/* =====================================================================
   Components — reusable UI pieces
   (brand, buttons, badges, phone mockup, star rating, review cards)
   ===================================================================== */

/* ---- Header text nav links ---- */
.header-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.header-links a {
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    color: var(--color-text-muted);
    transition: color var(--transition);
}

.header-links a:hover {
    color: var(--color-text);
}

/* ---- Brand / logo ---- */
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--fw-bold);
    font-size: var(--fs-400);
    letter-spacing: -0.01em;
}

.brand__mark {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
}

.brand__name {
    font-family: "Tanker", var(--font-sans);
    font-weight: 400;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0;
}

/* ---- Eyebrow / pill label ---- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-accent-soft);
    color: var(--color-accent-2);
    font-size: var(--fs-100);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-lg);
}

/* ---- Hero app icon ---- */
.hero__app-icon {
    width: 72px;
    height: 72px;
    border-radius: 16px;
    object-fit: cover;
    margin-bottom: var(--space-xs);
}

/* ---- Hero headline & slogan ---- */
.hero__title {
    font-size: var(--fs-600);
    font-weight: var(--fw-black);
    margin-bottom: var(--space-md);
}

.hero__title .accent {
    font-size: 2em;
    font-family: "Tanker", var(--font-sans);
    font-weight: 400;
    /* Tanker is a display face — regular weight is correct */
    color: var(--color-text);
    display: block;
}

.hero__title .accent--sub {
    font-size: 0.9em;
    color: rgba(245, 244, 240, 0.75);
}

.hero__slogan {
    font-size: var(--fs-400);
    color: var(--color-text-muted);
    line-height: var(--lh-snug);
    margin-bottom: var(--space-xl);
}

/* ---- Call-to-action group ---- */
.cta-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
    .hero__app-icon {
        margin-inline: auto;
    }

    .cta-group {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 520px) {
    .hero__title {
        font-size: var(--fs-500);
    }

    .header-links {
        gap: var(--space-md);
    }

    .header-links a {
        font-size: var(--fs-100);
    }

    .brand__name {
        font-size: var(--fs-300);
    }
}

/* ---- App Store badge ---- */
.app-store-badge {
    display: inline-flex;
    transition: transform var(--transition), opacity var(--transition);
}

.app-store-badge:hover {
    opacity: 0.85;
}

.app-store-badge__img {
    height: 54px;
    width: auto;
    display: block;
}

/* ---- Social icon buttons ---- */
.social-list {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.social-list__item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    transition: color var(--transition), border-color var(--transition),
        transform var(--transition), background var(--transition);
}

.social-list__item a:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    transform: translateY(-2px);
}

.social-list__item svg {
    width: 20px;
    height: 20px;
}

/* ---- iPhone mockup (real frame image + video composited on screen) ---- */
.phone-mockup {
    position: relative;
    container-type: inline-size;
    width: min(clamp(220px, 40vw, 420px), 100%);
    aspect-ratio: 1072 / 1945;
    /* native size of iphone-mockup.webp */
    filter: drop-shadow(var(--shadow-md));
}

/* The phone screen area: clips the video to the exact green-screen rect.
   The video can never bleed past this box, at any size. */
.phone-mockup__screen {
    position: absolute;
    left: 2.4%;
    top: 1.0%;
    width: 59%;
    height: 70.7%;
    overflow: hidden;
    border-radius: 8cqw;
    background: #000;
    z-index: 2;
}

/* Video fills the clipped screen */
.phone-mockup__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The transparent-background phone + hand frame underneath.
   Masked so the hand fades to true transparency and blends with the page. */
.phone-mockup__frame {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 92%);
}

/* Thumb re-overlaid on top of the video so the hand grips the screen */
.phone-mockup__thumb {
    position: absolute;
    left: 32.18%;
    top: 63.08%;
    width: 24.72%;
    height: auto;
    pointer-events: none;
    z-index: 3;
    -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 50%, transparent 100%);
}

/* ---- Star rating ---- */
.stars {
    display: inline-flex;
    gap: 2px;
    color: var(--color-star);
}

.stars svg {
    width: 18px;
    height: 18px;
}

/* ---- Section title ---- */
.section-title {
    font-size: var(--fs-600);
    margin-bottom: var(--space-sm);
}

.section-subtitle {
    color: var(--color-text-muted);
    font-size: var(--fs-300);
}

/* ---- Review card ---- */
.review-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: transform var(--transition), border-color var(--transition);
}

.review-card:hover {
    transform: translateY(-4px);
    border-color: var(--color-accent);
}

.review-card__text {
    color: var(--color-text);
    font-size: var(--fs-200);
    line-height: var(--lh-normal);
    flex: 1;
}

.review-card__author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

/* Placeholder avatar — replace background-image with a real photo */
.review-card__avatar {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-pill);
    background: var(--gradient-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: var(--fs-200);
    color: #1a1207;
    background-size: cover;
    background-position: center;
}

.review-card__meta {
    display: flex;
    flex-direction: column;
}

.review-card__name {
    font-weight: var(--fw-semibold);
    font-size: var(--fs-200);
}

.review-card__handle {
    font-size: var(--fs-100);
    color: var(--color-text-faint);
}