/* ─────────────────────────────────────────────────────────────
   F3H Content Agency — Landing Page
   Design language: Liquid Glass on a white ground
   Brand: Gold #E8B411 · Ink #171905
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Sampled directly from the real F3H logo file */
    --gold:      #ECB60B;
    --gold-deep: #B8860A;
    --amber:     #F5A623;

    /* CTA green — a deliberate break from the gold identity so the
       one action that matters (contact) is unmistakable at a glance */
    --green:      #17A34A;
    --green-deep: #0F7C38;

    /* Pure white ground, per client direction */
    --paper:       #FFFFFF;
    --paper-2:     #FAFAF7;
    --ink:         #191901;
    --ink-2:       #3B3B2E;
    --ink-3:       #6E6E5E;

    /* Liquid glass body: translucent, brighter along the upper edge */
    --glass-fill:  linear-gradient(178deg,
                       rgba(255, 255, 255, 0.80) 0%,
                       rgba(255, 255, 255, 0.52) 12%,
                       rgba(255, 255, 255, 0.38) 54%,
                       rgba(255, 255, 255, 0.54) 100%);
    --glass-fill-strong: linear-gradient(178deg,
                       rgba(255, 255, 255, 0.90) 0%,
                       rgba(255, 255, 255, 0.68) 14%,
                       rgba(255, 255, 255, 0.58) 56%,
                       rgba(255, 255, 255, 0.70) 100%);
    --glass-blur:  blur(26px) saturate(180%);
    --hairline:    rgba(23, 25, 5, 0.06);

    /* Rim light: bright at the top, dimmer at the shoulders,
       faint bounce along the bottom — the Apple-glass tell */
    --rim: linear-gradient(180deg,
               rgba(255, 255, 255, 1) 0%,
               rgba(255, 255, 255, 0.62) 16%,
               rgba(255, 255, 255, 0.18) 48%,
               rgba(255, 255, 255, 0.34) 78%,
               rgba(255, 255, 255, 0.62) 100%);

    /* Inner speculars, painted above the fill but under content */
    --spec: inset 0 1px 0 rgba(255, 255, 255, 0.98),
            inset 0 10px 22px -12px rgba(255, 255, 255, 0.95),
            inset 0 -10px 24px -18px rgba(232, 180, 17, 0.22);

    --sheen:       rgba(255, 255, 255, 0.9);

    --shadow-sm:   var(--spec),
                   0 1px 2px rgba(120, 90, 20, 0.05),
                   0 10px 26px -14px rgba(120, 90, 20, 0.20);
    --shadow-md:   var(--spec),
                   0 2px 6px rgba(120, 90, 20, 0.06),
                   0 24px 54px -26px rgba(120, 90, 20, 0.28);
    --shadow-lg:   var(--spec),
                   0 4px 14px rgba(120, 90, 20, 0.08),
                   0 46px 92px -40px rgba(120, 90, 20, 0.36);

    --ease:        cubic-bezier(0.16, 1, 0.3, 1);
    --ease-soft:   cubic-bezier(0.32, 0.72, 0, 1);

    --r-lg: 30px;
    --r-md: 24px;
    --r-sm: 18px;
}

html { scroll-behavior: smooth; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    letter-spacing: -0.011em;
}

::selection { background: rgba(232, 180, 17, 0.22); }

.container {
    width: min(92%, 1120px);
    margin: 0 auto;
}

/* ─────────────────────────────────────────────
   AMBIENT FIELD — faint gold blobs behind the
   glass, kept subtle so the page still reads white
───────────────────────────────────────────── */
.ambient {
    position: fixed;
    inset: -10vh -10vw;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

.blob-1 {
    width: 40vw; height: 40vw;
    min-width: 380px; min-height: 380px;
    background: radial-gradient(circle at 35% 35%, rgba(232, 180, 17, 0.20), rgba(232, 180, 17, 0) 68%);
    top: -8vh; left: -6vw;
    animation: drift-a 26s var(--ease-soft) infinite alternate;
}

.blob-2 {
    width: 34vw; height: 34vw;
    min-width: 320px; min-height: 320px;
    background: radial-gradient(circle at 50% 50%, rgba(245, 166, 35, 0.16), rgba(245, 166, 35, 0) 68%);
    top: 4vh; right: -8vw;
    animation: drift-b 32s var(--ease-soft) infinite alternate;
}

.blob-3 {
    width: 36vw; height: 36vw;
    min-width: 340px; min-height: 340px;
    background: radial-gradient(circle at 50% 50%, rgba(232, 180, 17, 0.14), rgba(232, 180, 17, 0) 70%);
    top: 46%; left: 28%;
    animation: drift-c 38s var(--ease-soft) infinite alternate;
}

.blob-4 {
    width: 30vw; height: 30vw;
    min-width: 300px; min-height: 300px;
    background: radial-gradient(circle at 50% 50%, rgba(245, 166, 35, 0.12), rgba(245, 166, 35, 0) 70%);
    bottom: -6vh; left: -4vw;
    animation: drift-a 30s var(--ease-soft) infinite alternate-reverse;
}

@keyframes drift-a {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(7vw, 6vh, 0) scale(1.12); }
}
@keyframes drift-b {
    from { transform: translate3d(0, 0, 0) scale(1.06); }
    to   { transform: translate3d(-6vw, 8vh, 0) scale(0.94); }
}
@keyframes drift-c {
    from { transform: translate3d(0, 0, 0) scale(0.96); }
    to   { transform: translate3d(-8vw, -7vh, 0) scale(1.14); }
}

/* Paper veil — keeps the ground reading as white while still
   giving the glass something faint to refract */
.veil {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(130% 90% at 50% 0%,
            rgba(255, 255, 255, 0.30) 0%,
            rgba(255, 255, 255, 0.55) 48%,
            rgba(255, 255, 255, 0.78) 100%);
}

/* ─────────────────────────────────────────────
   LIQUID GLASS
───────────────────────────────────────────── */
.glass {
    position: relative;
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: none;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-md);
    isolation: isolate;
    overflow: hidden;
}

.glass::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 4;
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .glass { border: 1px solid rgba(255, 255, 255, 0.72); }
    .glass::before { display: none; }
}

/* Specular sheen — the moving light that makes it read as glass */
.glass-sheen::after {
    content: '';
    position: absolute;
    inset: -60% -20%;
    background: linear-gradient(
        105deg,
        transparent 38%,
        rgba(255, 255, 255, 0.55) 47%,
        rgba(255, 255, 255, 0.9) 50%,
        rgba(255, 255, 255, 0.55) 53%,
        transparent 62%
    );
    transform: translateX(-120%);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.glass-sheen:hover::after,
.glass-sheen:focus-visible::after {
    opacity: 1;
    animation: sweep 1.15s var(--ease) forwards;
}

@keyframes sweep {
    from { transform: translateX(-120%); }
    to   { transform: translateX(120%); }
}

/* ─────────────────────────────────────────────
   NAV
───────────────────────────────────────────── */
.nav-wrap {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 16px 0;
    transition: padding 0.5s var(--ease);
}

.nav-wrap.is-stuck { padding: 10px 0; }

.nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 10px 10px 14px;
    border-radius: 999px;
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: none;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.5s var(--ease), background 0.5s var(--ease);
}

.nav::before,
.eyebrow::before,
.btn-ghost::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--rim);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 3;
}

@supports not ((-webkit-mask-composite: xor) or (mask-composite: exclude)) {
    .nav, .eyebrow, .btn-ghost { border: 1px solid rgba(255, 255, 255, 0.72); }
    .nav::before, .eyebrow::before, .btn-ghost::after { display: none; }
}

.nav-wrap.is-stuck .nav {
    background: var(--glass-fill-strong);
    box-shadow: var(--shadow-md);
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.nav-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    display: block;
    flex: none;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.9), 0 4px 14px -4px rgba(236, 182, 11, 0.55);
    transition: transform 0.5s var(--ease);
}

.nav-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.nav-brand:hover .nav-mark { transform: scale(1.06); }

.nav-name {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.nav-role {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ink-3);
    line-height: 1.3;
    white-space: nowrap;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
    border: 1px solid transparent;
    transition: color 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
}

.nav-link:hover {
    color: var(--gold-deep);
    background: rgba(232, 180, 17, 0.10);
    border-color: rgba(232, 180, 17, 0.22);
}

.nav-btn { padding: 12px 22px; font-size: 14px; }

/* ─────────────────────────────────────────────
   NAV — MOBILE
   Below ~640px there isn't room for the full
   wordmark + subtitle next to the CTA, so the
   brand collapses to just the logo mark ("How it
   works" is still reachable via the ghost button
   under the VSL) and the button shrinks to a
   compact, thumb-sized pill.
───────────────────────────────────────────── */
@media (max-width: 640px) {
    .nav-wrap { padding: 10px 0; }

    .nav { padding: 6px 6px 6px 8px; gap: 8px; }

    .nav-mark { width: 32px; height: 32px; border-radius: 9px; }

    .nav-id { display: none; }

    .nav-link { display: none; }

    .nav-btn { padding: 8px 14px; font-size: 12px; }
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 30px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    overflow: hidden;
    isolation: isolate;
    white-space: nowrap;
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
    will-change: transform;
}

.btn-primary {
    color: #ffffff;
    background: var(--green);
    box-shadow:
        0 10px 24px -10px rgba(23, 163, 74, 0.55),
        0 26px 50px -26px rgba(15, 124, 56, 0.45);
}

.btn-primary:hover {
    background: var(--green-deep);
    box-shadow:
        0 14px 30px -10px rgba(23, 163, 74, 0.65),
        0 34px 64px -28px rgba(15, 124, 56, 0.5);
}

.btn-primary:active { transform: scale(0.975); }

.btn-ghost {
    color: var(--ink);
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: none;
    box-shadow: var(--shadow-sm);
}

.btn-ghost:hover {
    background: var(--glass-fill-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-ghost:active { transform: scale(0.975); }

.btn .arr { transition: transform 0.45s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* ─────────────────────────────────────────────
   SECTION SHELL
───────────────────────────────────────────── */
section { position: relative; z-index: 1; }

.section-head {
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

.eyebrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: none;
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.eyebrow .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--amber));
    box-shadow: 0 0 8px rgba(232, 180, 17, 0.8);
}

.section-title {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.032em;
    margin-bottom: 16px;
    text-wrap: balance;
}

.section-sub {
    font-size: clamp(15px, 1.6vw, 17.5px);
    color: var(--ink-2);
    line-height: 1.6;
    text-wrap: pretty;
}

.grad {
    background: linear-gradient(100deg, var(--gold-deep) 0%, var(--gold) 28%, var(--amber) 55%, var(--gold-deep) 82%, var(--gold) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: grad-flow 9s linear infinite;
}

@keyframes grad-flow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 130% 50%; }
}

/* ─────────────────────────────────────────────
   SCROLL REVEAL
───────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(26px) scale(0.985);
    transition: opacity 0.9s var(--ease), transform 1.1s var(--ease);
    transition-delay: var(--d, 0ms);
}

.reveal.in { opacity: 1; transform: none; }

/* ─────────────────────────────────────────────
   1 — HERO
───────────────────────────────────────────── */
.hero {
    padding: clamp(14px, 2vw, 22px) 0 clamp(28px, 4vw, 44px);
    text-align: center;
}

.hero-inner { max-width: 980px; margin: 0 auto; }

.headline {
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 800;
    line-height: 1.09;
    letter-spacing: -0.035em;
    margin-bottom: 24px;
}

.hero-sub {
    font-size: clamp(16px, 1.9vw, 20px);
    color: var(--ink-2);
    line-height: 1.6;
    max-width: 720px;
    margin: 0 auto;
    text-wrap: pretty;
}

.hero-actions {
    margin-top: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   2 — VSL
───────────────────────────────────────────── */
.vsl-section {
    padding: clamp(16px, 3vw, 32px) 0 clamp(64px, 9vw, 110px);
}

.vsl-card {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 12px;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.vsl-card .vsl-frame-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background: #0b0b08 center / cover no-repeat;
}

.vsl-card iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.vsl-sound-btn {
    position: absolute;
    inset: 12px;
    border: 0;
    background: transparent;
    border-radius: 18px;
    cursor: pointer;
    padding: 0;
    z-index: 5;
}

.vsl-sound-btn[hidden] { display: none; }

.vsl-sound-pill {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform 0.2s ease;
}

.vsl-sound-btn:hover .vsl-sound-pill { transform: translateX(-50%) scale(1.05); }

.vsl-caption {
    text-align: center;
    margin-top: 20px;
    font-size: 13.5px;
    color: var(--ink-3);
    font-weight: 500;
}

.vsl-actions { margin-top: 22px; }

/* ─────────────────────────────────────────────
   3 — TESTIMONIALS
   Pinterest-style masonry of real client message
   and review screenshots, via CSS columns so tiles
   keep their own natural aspect ratio instead of
   being cropped into a uniform grid.
───────────────────────────────────────────── */
.testimonials-section { padding: clamp(56px, 8vw, 96px) 0; }

.testimonials-masonry {
    columns: 2;
    column-gap: 18px;
    margin-bottom: clamp(40px, 6vw, 64px);
}

@media (min-width: 640px) {
    .testimonials-masonry { columns: 3; }
}

@media (min-width: 980px) {
    .testimonials-masonry { columns: 4; }
}

.testimonial-tile {
    break-inside: avoid;
    margin-bottom: 18px;
    border-radius: 0;
    overflow: hidden;
    box-shadow:
        0 2px 4px rgba(23, 25, 5, 0.08),
        0 14px 28px -10px rgba(23, 25, 5, 0.24),
        0 30px 54px -28px rgba(23, 25, 5, 0.32);
    background: var(--paper-2);
    transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.testimonial-tile:hover {
    transform: translateY(-6px);
    box-shadow:
        0 4px 8px rgba(23, 25, 5, 0.10),
        0 22px 40px -12px rgba(23, 25, 5, 0.30),
        0 40px 70px -30px rgba(23, 25, 5, 0.38);
}

.testimonial-tile img {
    display: block;
    width: 100%;
    height: auto;
}

/* ─────────────────────────────────────────────
   4 — CTA (now lives inside the testimonials
   section, right after the masonry grid)
───────────────────────────────────────────── */
.cta-card {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 64px) clamp(24px, 5vw, 56px);
    text-align: center;
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
}

.cta-title {
    font-size: clamp(26px, 3.6vw, 38px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    margin-bottom: 14px;
}

.cta-sub {
    font-size: 15.5px;
    color: var(--ink-2);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* ─────────────────────────────────────────────
   FOOTER
───────────────────────────────────────────── */
.site-footer { position: relative; z-index: 1; padding: 0 0 44px; }

.footer-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    padding: 26px 30px;
    border-radius: var(--r-md);
}

.footer-brand { display: flex; align-items: center; gap: 12px; }

.footer-mark {
    width: 34px; height: 34px;
    border-radius: 10px;
    overflow: hidden;
    display: block;
    flex: none;
}

.footer-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.footer-name { font-size: 14px; font-weight: 700; }
.footer-meta { font-size: 12px; color: var(--ink-3); }

.footer-links { display: flex; gap: 18px; }

.footer-links a {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    text-decoration: none;
}

.footer-links a:hover { color: var(--gold-deep); }