/* ============================================
   WAQAS MALIK — V2 FUTURIST
   Three.js / Glitch / Grid floor / Acid / Holographic
   ============================================ */

:root {
    --bg: #050507;
    --bg-2: #0c0c10;
    --bg-3: #14141a;
    --ink: #f5e6d3;
    --ink-2: #d6c8b6;
    --ink-3: #908578;
    --ink-4: #4a443c;
    --red: #ff2a2a;
    --red-2: #ff4d4d;
    --red-glow: rgba(255, 42, 42, .6);
    --acid: #d4ff00;
    --cyan: #00f0ff;
    --magenta: #ff00aa;
    --cream: #f5e6d3;
    --line: rgba(245, 230, 211, .12);
    --line-2: rgba(245, 230, 211, .06);
    --glass: rgba(245, 230, 211, .03);
    --display: 'Fraunces', 'Times New Roman', serif;
    --hand: 'Caveat', cursive;
    --mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    --sans: 'Inter', system-ui, sans-serif;
    --grid-gap: clamp(16px, 2vw, 28px);
    --r: 16px;
    --easing: cubic-bezier(.8, 0, .2, 1);
    --bounce: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
html { scroll-behavior: auto; }
body {
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    cursor: none;
    position: relative;
}
body.loading { overflow: hidden; height: 100vh; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--red); color: var(--bg); }
button { font-family: inherit; }

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ════ Page transition wipe ════ */
.page-wipe {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 9999;
    transform: translateY(100%);
    pointer-events: none;
}
.page-wipe.in { animation: wipe-in .9s var(--easing) forwards; pointer-events: auto; }
.page-wipe.out { animation: wipe-out .9s var(--easing) forwards; pointer-events: none; }
@keyframes wipe-in {
    0% { transform: translateY(100%); }
    100% { transform: translateY(0); }
}
@keyframes wipe-out {
    0% { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}
.page-wipe::after {
    content: 'WAQAS.';
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(60px, 14vw, 220px);
    letter-spacing: -.04em;
    color: var(--ink);
    opacity: 0;
}
.page-wipe.in::after { animation: text-flash .9s var(--easing) forwards; }
@keyframes text-flash {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* ════ Custom Cursor + Trail ════ */
.cursor, .cursor-ring, .cursor-trail {
    position: fixed;
    pointer-events: none;
    transform: translate(-50%, -50%);
    will-change: left, top, transform;
}
.cursor {
    top: 0; left: 0;
    width: 7px; height: 7px;
    background: var(--red);
    border-radius: 50%;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: width .25s var(--easing), height .25s var(--easing), background .2s;
}
.cursor-ring {
    top: 0; left: 0;
    width: 38px; height: 38px;
    border: 1.5px solid rgba(245, 230, 211, .5);
    border-radius: 50%;
    z-index: 9998;
    transition: width .35s var(--easing), height .35s var(--easing), border-color .25s, background .25s, opacity .2s;
}
.cursor-trail {
    top: 0; left: 0;
    width: 4px; height: 4px;
    background: var(--red);
    border-radius: 50%;
    z-index: 9997;
    opacity: .4;
}
.cursor.hover { width: 14px; height: 14px; background: var(--cream); }
.cursor-ring.hover { width: 80px; height: 80px; border-color: var(--red); background: rgba(255, 42, 42, .08); }
.cursor-ring.click { transform: translate(-50%, -50%) scale(.7); border-color: var(--red); }
.cursor-ring.text { width: 110px; height: 110px; border-radius: 0; border: 1px solid var(--red); }
@media (max-width: 900px) { .cursor, .cursor-ring, .cursor-trail { display: none; } body { cursor: auto; } }

/* ════ Click confetti container ════ */
.fx-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9996;
}

/* ════ Sound Toggle ════ */
.sound-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--line);
    z-index: 200;
    display: grid;
    place-items: center;
    cursor: none;
    transition: transform .35s var(--easing), background .25s;
}
.sound-toggle:hover { transform: scale(1.08); background: rgba(255, 42, 42, .15); }
.sound-toggle .bars {
    display: flex;
    gap: 3px;
    height: 18px;
    align-items: center;
}
.sound-toggle .bars span {
    width: 2px;
    background: var(--ink);
    height: 6px;
    border-radius: 1px;
    transition: height .3s;
}
.sound-toggle.on .bars span { animation: bar-bounce 1s ease-in-out infinite; }
.sound-toggle.on .bars span:nth-child(2) { animation-delay: .12s; }
.sound-toggle.on .bars span:nth-child(3) { animation-delay: .24s; }
.sound-toggle.on .bars span:nth-child(4) { animation-delay: .36s; }
@keyframes bar-bounce {
    0%, 100% { height: 4px; }
    50% { height: 16px; }
}

/* ════ Loader ════ */
.v2-loader {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
}
.v2-loader::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 42, 42, .15), transparent 60%);
    pointer-events: none;
}
.loader-text {
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(60px, 14vw, 220px);
    letter-spacing: -.04em;
    line-height: 1;
    color: var(--ink);
    display: flex;
    overflow: hidden;
    z-index: 2;
}
.loader-char {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    will-change: transform, opacity;
}
.loader-dot { color: var(--red); }
.loader-meta {
    position: absolute;
    bottom: 50px;
    left: 50px;
    right: 50px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--ink-3);
    z-index: 3;
}
.loader-meta strong { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.loader-meta .scrambling { color: var(--red); }
.loader-bar-frame {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: var(--line);
}
.loader-bar {
    height: 100%;
    background: var(--red);
    width: 0%;
    transition: width .12s linear;
    box-shadow: 0 0 20px var(--red);
}

/* ════ Marquee bars ════ */
.bar-marquee {
    position: relative;
    color: var(--bg);
    overflow: hidden;
    padding: 8px 0;
    font-family: var(--display);
    font-style: italic;
    font-size: 14px;
    letter-spacing: .02em;
    white-space: nowrap;
    z-index: 50;
}
.bar-marquee.red { background: var(--red); border-bottom: 1px solid var(--bg); }
.bar-marquee.acid { background: var(--acid); color: #08080a; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.bar-marquee-track {
    display: inline-flex;
    gap: 50px;
    animation: scroll-x 28s linear infinite;
    will-change: transform;
}
.bar-marquee.acid .bar-marquee-track { animation-duration: 26s; animation-direction: reverse; }
.bar-marquee span { display: inline-flex; align-items: center; gap: 50px; }
.bar-marquee em {
    font-style: normal;
    font-family: var(--mono);
    font-size: 11px;
    opacity: .8;
}
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ════ Nav (glass pill) ════ */
.v2-nav {
    position: fixed;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 60px);
    max-width: 1320px;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(5, 5, 7, .7);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid var(--line);
    border-radius: 100px;
    transition: top .35s var(--easing), background .3s;
}
.v2-nav.scrolled { top: 18px; background: rgba(5, 5, 7, .9); }
.v2-logo {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 22px;
    letter-spacing: -.02em;
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}
.v2-logo .dot { color: var(--red); animation: dot-pulse 1.6s infinite; }
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.v2-nav-links { display: flex; gap: 4px; align-items: center; }
.v2-nav-link {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .02em;
    padding: 9px 16px;
    border-radius: 100px;
    color: var(--ink-2);
    transition: color .2s, background .2s;
    position: relative;
    overflow: hidden;
}
.v2-nav-link::before {
    content: attr(data-text);
    position: absolute;
    top: 100%;
    left: 16px;
    color: var(--red);
    transition: top .35s var(--easing);
}
.v2-nav-link span { display: block; transition: transform .35s var(--easing); }
.v2-nav-link:hover span { transform: translateY(-100%); }
.v2-nav-link:hover::before { top: 9px; }

/* Holographic CTA */
.v2-nav-cta {
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 100px;
    color: var(--cream);
    margin-left: 6px;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s, box-shadow .35s;
}
.v2-nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, var(--red), var(--magenta), var(--red), var(--red-2), var(--red));
    background-size: 200% 200%;
    animation: holo-spin 4s linear infinite;
    z-index: -1;
}
.v2-nav-cta::after {
    content: '';
    position: absolute;
    inset: 1.5px;
    background: var(--red);
    border-radius: inherit;
    z-index: -1;
}
.v2-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 30px var(--red-glow); }
@keyframes holo-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.v2-nav-burger {
    display: none;
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: transparent;
    cursor: none;
    position: relative;
}
.v2-nav-burger::before, .v2-nav-burger::after {
    content: ''; position: absolute;
    width: 14px; height: 1.5px;
    background: var(--ink);
    left: 50%; transform: translateX(-50%);
    transition: transform .3s;
}
.v2-nav-burger::before { top: 14px; }
.v2-nav-burger::after { top: 20px; }
@media (max-width: 820px) {
    .v2-nav { top: 16px; padding: 8px 8px 8px 18px; }
    .v2-nav-links { display: none; }
    .v2-nav-burger { display: block; }
    .v2-nav-cta { font-size: 12px; padding: 8px 14px; }
}

/* ════ Hero ════ */
.v2-hero {
    position: relative;
    min-height: 100vh;
    padding: 180px 0 100px;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
}
.hero-3d {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: auto;
}
.hero-grid-floor {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%) rotateX(70deg);
    transform-origin: center bottom;
    width: 200%;
    height: 60vh;
    background-image:
        linear-gradient(to right, rgba(255, 42, 42, .35) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 42, 42, .35) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: 0;
    animation: grid-pan 4s linear infinite;
    mask-image: linear-gradient(to top, black 30%, transparent 90%);
    -webkit-mask-image: linear-gradient(to top, black 30%, transparent 90%);
    pointer-events: none;
    opacity: .55;
}
@keyframes grid-pan {
    from { background-position: 0 0; }
    to { background-position: 0 60px; }
}
.hero-glow {
    position: absolute;
    width: 70%; aspect-ratio: 1;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, var(--red) 0%, transparent 60%);
    opacity: .35;
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
}
.v2-hero .grain {
    position: absolute; inset: 0;
    pointer-events: none;
    opacity: .12;
    z-index: 4;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
.scanlines {
    position: absolute; inset: 0;
    z-index: 3;
    pointer-events: none;
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 2px, rgba(245, 230, 211, .03) 2px, rgba(245, 230, 211, .03) 3px);
    mix-blend-mode: overlay;
}

.hero-inner {
    position: relative;
    width: 100%;
    max-width: 1380px;
    padding: 0 30px;
    text-align: center;
    z-index: 5;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    border: 1px solid var(--line);
    border-radius: 100px;
    background: rgba(5, 5, 7, .65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--ink-2);
    margin-bottom: 36px;
}
.hero-eyebrow .live-dot {
    width: 8px; height: 8px;
    background: #2dd87b;
    border-radius: 50%;
    box-shadow: 0 0 12px #2dd87b;
    animation: pulse 1.6s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(45, 216, 123, .6); }
    70% { box-shadow: 0 0 0 16px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.hero-eyebrow .clock { color: var(--ink); font-variant-numeric: tabular-nums; }

.hero-headline {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(60px, 12vw, 200px);
    letter-spacing: -.045em;
    line-height: .92;
    color: var(--ink);
    text-shadow: 0 0 80px rgba(5,5,7,.9);
}
.hero-headline .row { display: block; overflow: hidden; padding: .03em 0; }
.hero-headline .word, .hero-headline .ch {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    will-change: transform;
}
.hero-headline em {
    font-style: italic;
    color: var(--red);
    font-weight: 300;
    position: relative;
    text-shadow: 0 0 40px var(--red-glow);
}
.hero-headline .strike {
    position: relative;
    color: var(--ink-3);
    font-style: normal;
    text-shadow: none;
}
.hero-headline .strike::after {
    content: '';
    position: absolute;
    left: -4%; right: -4%; top: 52%;
    height: 5px;
    background: var(--red);
    transform: rotate(-2deg);
    box-shadow: 0 0 12px var(--red);
}

/* Glitch hover on big text */
.glitch {
    position: relative;
    display: inline-block;
}
.glitch::before, .glitch::after {
    content: attr(data-glitch);
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    opacity: 0;
}
.glitch:hover::before {
    color: var(--cyan);
    transform: translate(-3px, 0);
    clip-path: polygon(0 12%, 100% 12%, 100% 36%, 0 36%);
    opacity: 1;
    animation: glitch-1 .4s infinite;
}
.glitch:hover::after {
    color: var(--magenta);
    transform: translate(3px, 0);
    clip-path: polygon(0 60%, 100% 60%, 100% 88%, 0 88%);
    opacity: 1;
    animation: glitch-2 .4s infinite reverse;
}
@keyframes glitch-1 {
    0%, 100% { clip-path: polygon(0 12%, 100% 12%, 100% 36%, 0 36%); }
    50% { clip-path: polygon(0 25%, 100% 25%, 100% 50%, 0 50%); }
}
@keyframes glitch-2 {
    0%, 100% { clip-path: polygon(0 60%, 100% 60%, 100% 88%, 0 88%); }
    50% { clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%); }
}

.hero-sub {
    margin-top: 40px;
    font-family: var(--display);
    font-size: clamp(18px, 1.5vw, 22px);
    line-height: 1.5;
    font-style: italic;
    color: var(--ink-2);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.hero-sub b { color: var(--ink); font-weight: 600; font-style: normal; }

.hero-cta-row {
    margin-top: 52px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ════ Magnetic / Holographic Buttons ════ */
.btn-mag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    border: 1.5px solid var(--ink);
    color: var(--ink);
    background: transparent;
    cursor: none;
    overflow: hidden;
    isolation: isolate;
    will-change: transform;
    transition: color .35s var(--easing), border-color .35s, box-shadow .35s;
}
.btn-mag::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ink);
    border-radius: 100px;
    transform: translateY(102%);
    transition: transform .55s var(--easing);
    z-index: -1;
}
.btn-mag:hover { color: var(--bg); border-color: var(--ink); }
.btn-mag:hover::before { transform: translateY(0); }

.btn-mag.primary {
    color: var(--cream);
    border-color: transparent;
    background: var(--red);
    box-shadow: 0 0 0 0 var(--red-glow);
}
.btn-mag.primary::before { background: var(--cream); }
.btn-mag.primary:hover { color: var(--bg); box-shadow: 0 0 40px var(--red-glow); }

.btn-mag.holo {
    color: var(--cream);
    border-color: transparent;
}
.btn-mag.holo::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, var(--red), var(--magenta), var(--cyan), var(--acid), var(--red));
    z-index: -2;
    animation: holo-spin 5s linear infinite;
}
.btn-mag.holo > span:first-child {
    position: relative;
    z-index: 1;
}
.btn-mag.holo::before { background: var(--bg); inset: 1.5px; transform: none; }
.btn-mag.holo:hover::before { transform: translateY(102%); }
.btn-mag.holo:hover { color: var(--bg); }

.btn-mag .arrow { display: inline-block; transition: transform .4s var(--easing); }
.btn-mag:hover .arrow { transform: translateX(6px) rotate(-3deg); }

.btn-mag-text {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 1.2em;
    line-height: 1.2;
}
.btn-mag-text span {
    display: block;
    transition: transform .4s var(--easing);
}
.btn-mag-text span:last-child {
    position: absolute;
    top: 110%; left: 0;
}
.btn-mag:hover .btn-mag-text span:first-child { transform: translateY(-110%); }
.btn-mag:hover .btn-mag-text span:last-child { transform: translateY(-110%); }

/* ════ Hero stat pills ════ */
.hero-stats-orbit {
    margin-top: 80px;
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.stat-pill {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 18px 26px;
    background: rgba(5, 5, 7, .6);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--line);
    border-radius: 100px;
    transition: transform .4s var(--easing), border-color .25s, background .3s;
}
.stat-pill:hover {
    transform: translateY(-4px);
    border-color: var(--red);
    background: rgba(255, 42, 42, .08);
}
.stat-pill .num {
    font-family: var(--display);
    font-style: italic;
    font-size: 38px;
    color: var(--ink);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-pill .lbl {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink-3);
}

/* ════ Status strip ════ */
.status-strip {
    position: relative;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 26px 0;
    overflow: hidden;
    background: var(--bg-2);
}
.status-track {
    display: inline-flex;
    gap: 60px;
    align-items: center;
    white-space: nowrap;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(26px, 4.5vw, 72px);
    color: var(--ink-2);
    animation: scroll-x 48s linear infinite;
    will-change: transform;
}
.status-track .num { color: var(--ink); font-style: italic; }
.status-track .red-dot {
    width: 14px; height: 14px;
    background: var(--red);
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 24px var(--red);
}

/* ════ Section primitives ════ */
.v2-section { padding: 160px 0; position: relative; }
.v2-container { max-width: 1380px; margin: 0 auto; padding: 0 30px; }
.v2-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--red);
    margin-bottom: 24px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.v2-eyebrow::before { content: ''; width: 26px; height: 1px; background: var(--red); }
.v2-h2 {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(48px, 8vw, 130px);
    letter-spacing: -.04em;
    line-height: .95;
    margin-bottom: 28px;
}
.v2-h2 em { font-style: italic; color: var(--red); }

/* ════ Pinned horizontal story ════ */
.story {
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
}
.story-pin {
    position: relative;
    height: 100vh;
    overflow: hidden;
}
.story-track {
    position: absolute;
    top: 0; left: 0;
    height: 100vh;
    display: flex;
    will-change: transform;
}
.story-panel {
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 100px 80px;
    gap: 60px;
    position: relative;
}
.story-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--line-2) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
    pointer-events: none;
    opacity: .8;
}
.story-panel .panel-num {
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(160px, 28vw, 460px);
    line-height: .82;
    color: var(--red);
    letter-spacing: -.05em;
    text-shadow: 0 0 80px var(--red-glow);
    position: relative;
    z-index: 1;
}
.story-panel .panel-num small {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .25em;
    font-style: normal;
    font-weight: 400;
    display: block;
    margin-bottom: 12px;
    text-shadow: none;
}
.story-panel .panel-body {
    position: relative;
    z-index: 1;
}
.story-panel .panel-body h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(40px, 5vw, 76px);
    letter-spacing: -.025em;
    line-height: 1.05;
    color: var(--ink);
    margin-bottom: 22px;
}
.story-panel .panel-body h3 em { font-style: italic; color: var(--red); }
.story-panel .panel-body p {
    font-family: var(--display);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 480px;
}
.story-panel .panel-tag {
    display: inline-block;
    margin-top: 24px;
    padding: 8px 16px;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink-3);
}
.story-progress {
    position: absolute;
    bottom: 50px;
    left: 80px;
    right: 80px;
    height: 1px;
    background: var(--line);
    z-index: 2;
}
.story-progress-fill {
    height: 100%;
    background: var(--red);
    width: 0%;
    transform-origin: left;
    box-shadow: 0 0 12px var(--red);
}
.story-progress-label {
    position: absolute;
    bottom: 60px;
    right: 80px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: .2em;
    z-index: 2;
}
@media (max-width: 760px) {
    .story-panel { grid-template-columns: 1fr; padding: 100px 30px; gap: 30px; }
    .story-progress, .story-progress-label { left: 30px; right: 30px; }
    .story-progress-label { right: 30px; }
}

/* ════ Numbers mega ════ */
.numbers-mega {
    background: var(--bg);
    padding: 160px 0;
    position: relative;
    overflow: hidden;
}
.numbers-mega .row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: end;
    padding: 50px 0;
    border-top: 1px solid var(--line);
    transition: background .3s;
    position: relative;
}
.numbers-mega .row:last-of-type { border-bottom: 1px solid var(--line); }
.numbers-mega .row:hover { background: rgba(255, 42, 42, .03); }
.numbers-mega .row::after {
    content: '↗';
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%) translateX(-30px);
    font-size: 40px;
    color: var(--red);
    opacity: 0;
    transition: opacity .3s, transform .5s var(--easing);
}
.numbers-mega .row:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.numbers-mega .row-label {
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink-3);
    padding-bottom: 18px;
}
.numbers-mega .row-num {
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(80px, 14vw, 240px);
    line-height: .85;
    letter-spacing: -.045em;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    transition: color .35s, transform .6s var(--easing), text-shadow .35s;
    transform-origin: left;
}
.numbers-mega .row:hover .row-num {
    color: var(--red);
    transform: translateX(20px);
    text-shadow: 0 0 60px var(--red-glow);
}
.numbers-mega .row-meta {
    grid-column: 2;
    margin-top: 14px;
    font-family: var(--display);
    font-style: italic;
    font-size: 18px;
    color: var(--ink-2);
}

/* ════ Beliefs marquee — acid ════ */
.belief-marquee {
    background: var(--acid);
    color: #08080a;
    padding: 38px 0;
    overflow: hidden;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
}
.belief-track {
    display: inline-flex;
    gap: 80px;
    white-space: nowrap;
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(46px, 8vw, 130px);
    line-height: 1;
    letter-spacing: -.03em;
    animation: scroll-x 38s linear infinite;
}
.belief-track .star { color: #08080a; opacity: .5; font-style: normal; }

/* ════ Reel grid (WebGL hover) ════ */
.reel-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--grid-gap);
}
.reel-card {
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    background: var(--bg-2);
    border: 1px solid var(--line);
    aspect-ratio: 16 / 10;
    transition: transform .55s var(--easing);
    isolation: isolate;
}
.reel-card:hover { transform: translateY(-8px); }
.reel-card.large { grid-column: span 8; aspect-ratio: 16 / 9; }
.reel-card.small { grid-column: span 4; aspect-ratio: 4 / 5; }
.reel-card.medium { grid-column: span 6; }
.reel-card .thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .8s var(--easing), filter .55s;
    filter: saturate(.75) brightness(.78) contrast(1.05);
    will-change: transform;
}
.reel-card:hover .thumb { transform: scale(1.08); filter: saturate(1.15) brightness(.95) contrast(1.1); }

/* RGB split overlay on hover */
.reel-card::before, .reel-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: inherit;
    background-image: var(--bg-thumb);
    background-size: cover;
    background-position: center;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity .35s, transform .35s;
    pointer-events: none;
}
.reel-card::before { background-color: rgba(255, 0, 0, .35); transform: translate(-3px, 0); }
.reel-card::after { background-color: rgba(0, 240, 255, .35); transform: translate(3px, 0); }
.reel-card:hover::before { opacity: .35; transform: translate(-6px, 0); }
.reel-card:hover::after { opacity: .35; transform: translate(6px, 0); }

.reel-card .meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 26px;
    background: linear-gradient(to top, rgba(5,5,7,.96) 30%, transparent);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    z-index: 2;
}
.reel-card .meta h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(18px, 1.6vw, 24px);
    letter-spacing: -.015em;
    line-height: 1.15;
    color: var(--ink);
    max-width: 80%;
}
.reel-card .meta-tag {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--red);
    background: var(--bg);
    padding: 6px 12px;
    border-radius: 100px;
    flex-shrink: 0;
    border: 1px solid var(--red);
}
.reel-card .play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(.85);
    width: 88px; height: 88px;
    border-radius: 50%;
    background: var(--red);
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity .35s, transform .55s var(--easing);
    box-shadow: 0 0 60px var(--red-glow);
    z-index: 3;
}
.reel-card:hover .play-btn { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.reel-card .play-btn::after {
    content: '';
    width: 0; height: 0;
    border-left: 20px solid var(--cream);
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    margin-left: 6px;
}
.reel-card .views {
    position: absolute;
    top: 20px; right: 20px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--ink);
    background: rgba(5,5,7,.7);
    backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 100px;
    font-variant-numeric: tabular-nums;
    z-index: 3;
    border: 1px solid var(--line);
}
@media (max-width: 900px) {
    .reel-grid { grid-template-columns: 1fr; }
    .reel-card.large, .reel-card.small, .reel-card.medium { grid-column: span 12; aspect-ratio: 16 / 10; }
}

/* ════ Invitation (orbit + portal) ════ */
.invite {
    position: relative;
    padding: 200px 0;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid var(--line);
    background:
        radial-gradient(ellipse at center, rgba(255, 42, 42, .35) 0%, transparent 60%),
        var(--bg);
}
.invite-orbit-rings { position: absolute; inset: 0; pointer-events: none; }
.invite-orbit-rings .ring {
    position: absolute; left: 50%; top: 50%;
    border: 1px solid var(--line);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: ring-rotate 40s linear infinite;
}
.invite-orbit-rings .ring:nth-child(1) { width: 320px; height: 320px; border-color: rgba(255, 42, 42, .25); }
.invite-orbit-rings .ring:nth-child(2) { width: 540px; height: 540px; animation-duration: 60s; animation-direction: reverse; border-color: rgba(255, 42, 42, .15); }
.invite-orbit-rings .ring:nth-child(3) { width: 800px; height: 800px; animation-duration: 90s; }
.invite-orbit-rings .ring::before {
    content: '';
    position: absolute;
    width: 8px; height: 8px;
    background: var(--red);
    border-radius: 50%;
    top: 0; left: 50%;
    transform: translateX(-50%);
    box-shadow: 0 0 16px var(--red);
}
@keyframes ring-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }
.invite-inner { position: relative; z-index: 2; max-width: 940px; margin: 0 auto; padding: 0 30px; }
.invite-kicker {
    font-family: var(--hand);
    font-size: 30px;
    color: var(--red);
    transform: rotate(-2deg);
    display: inline-block;
    margin-bottom: 12px;
    text-shadow: 0 0 20px var(--red-glow);
}
.invite h2 {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(60px, 11vw, 180px);
    letter-spacing: -.04em;
    line-height: .9;
    margin-bottom: 24px;
}
.invite h2 em { font-style: italic; color: var(--red); text-shadow: 0 0 60px var(--red-glow); }
.invite p {
    font-family: var(--display);
    font-style: italic;
    font-size: 21px;
    line-height: 1.55;
    color: var(--ink-2);
    margin-bottom: 38px;
}

/* ════ Kinetic Image Collage ════ */
.collage {
    position: relative;
    padding: 160px 0;
    overflow: hidden;
}
.collage-canvas {
    position: relative;
    height: 90vh;
    min-height: 720px;
}
.collage-card {
    position: absolute;
    width: 280px;
    aspect-ratio: 3 / 4;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
    transition: transform .6s var(--easing), z-index 0s .6s;
    will-change: transform;
}
.collage-card:hover { z-index: 10; transition: transform .6s var(--easing), z-index 0s; }
.collage-card img { width: 100%; height: 100%; object-fit: cover; }
.collage-card .lbl {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 14px 18px;
    background: linear-gradient(to top, rgba(5,5,7,.95), transparent);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink);
}
.collage-card.c1 { left: 4%; top: 6%; transform: rotate(-6deg); width: 240px; }
.collage-card.c2 { left: 22%; top: 38%; transform: rotate(3deg); width: 320px; }
.collage-card.c3 { left: 46%; top: 12%; transform: rotate(-2deg); width: 300px; }
.collage-card.c4 { left: 68%; top: 44%; transform: rotate(5deg); width: 260px; }
.collage-card.c5 { right: 4%; top: 8%; transform: rotate(-4deg); width: 240px; }
.collage-card .placeholder {
    width: 100%; height: 100%;
    background:
        repeating-linear-gradient(45deg, rgba(255,42,42,.08) 0 8px, transparent 8px 18px),
        var(--bg-3);
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-style: italic;
    font-size: 90px;
    color: var(--red);
    opacity: .4;
}
.collage-headline {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(80px, 16vw, 280px);
    line-height: .85;
    letter-spacing: -.04em;
    color: var(--ink);
    text-align: center;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: difference;
}
.collage-headline em { color: var(--red); font-style: italic; }
@media (max-width: 760px) {
    .collage-canvas { display: none; }
}

/* ════ Final CTA ════ */
.final {
    position: relative;
    padding: 240px 0 160px;
    overflow: hidden;
    text-align: center;
    background: linear-gradient(to bottom, var(--bg) 0%, #1a0606 100%);
}
.final::before {
    content: '';
    position: absolute;
    bottom: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 130%; aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, var(--red) 0%, transparent 60%);
    opacity: .35;
    filter: blur(80px);
    pointer-events: none;
}
.final h2 {
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(140px, 26vw, 420px);
    letter-spacing: -.05em;
    line-height: .85;
    background: linear-gradient(180deg, var(--ink) 0%, var(--red) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: 30px;
    position: relative;
    z-index: 1;
}
.final p {
    font-family: var(--display);
    font-style: italic;
    font-size: 22px;
    color: var(--ink-2);
    max-width: 620px;
    margin: 0 auto 50px;
    line-height: 1.5;
    position: relative;
    z-index: 1;
}
.final p b { color: var(--ink); }
.final .btn-row {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
    position: relative; z-index: 1;
}

/* ════ Footer ════ */
.v2-footer {
    background: var(--bg);
    border-top: 1px solid var(--line);
    padding: 80px 0 40px;
    color: var(--ink-3);
    position: relative;
    overflow: hidden;
}
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 30px;
}
.footer-top h4 {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--ink-2);
    margin-bottom: 18px;
}
.footer-top a {
    display: block;
    color: var(--ink-3);
    font-size: 14px;
    padding: 5px 0;
    transition: color .2s, transform .25s var(--easing);
}
.footer-top a:hover { color: var(--red); transform: translateX(4px); }
.footer-top .brand-block .logo {
    font-family: var(--display);
    font-style: italic;
    font-size: 38px;
    color: var(--ink);
    margin-bottom: 14px;
    display: inline-block;
}
.footer-top .brand-block .logo .dot { color: var(--red); }
.footer-top .brand-block p { color: var(--ink-3); font-size: 14px; line-height: 1.6; max-width: 340px; }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink-4);
    flex-wrap: wrap;
    gap: 12px;
}
.footer-mega-w {
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(160px, 32vw, 540px);
    line-height: .8;
    color: var(--bg-2);
    letter-spacing: -.05em;
    margin: 60px 0 -100px;
    pointer-events: none;
    user-select: none;
    text-align: left;
    overflow: hidden;
}
.footer-mega-w em { color: var(--red); opacity: .15; font-style: italic; }
@media (max-width: 760px) {
    .footer-top { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ════ Reveal helpers ════ */
.r-fade { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--easing), transform .9s var(--easing); }
.r-fade.in { opacity: 1; transform: none; }
.r-mask { overflow: hidden; }
.r-mask > * { transform: translateY(102%); will-change: transform; transition: transform .9s var(--easing); }
.r-mask.in > * { transform: none; }
.r-skew { will-change: transform; transition: transform .35s var(--easing); }

/* ════ Mobile menu overlay ════ */
.v2-mobile {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 90;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    transform: translateX(100%);
    transition: transform .55s var(--easing);
}
.v2-mobile.active { transform: none; }
.v2-mobile a {
    font-family: var(--display);
    font-style: italic;
    font-size: 42px;
    color: var(--ink);
}
.v2-mobile a:hover { color: var(--red); }

/* ════ Scrollbar (subtle) ════ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ════════════════════════════════════════════════
   V2.5 — Tesla minimal + Hormozi conversion
   ════════════════════════════════════════════════ */

/* Scroll progress bar at the very top */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    z-index: 9997;
    pointer-events: none;
}
.scroll-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--red), var(--magenta), var(--red));
    box-shadow: 0 0 12px var(--red);
}

/* Sticky floating CTA */
.float-cta {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    background: var(--red);
    color: var(--cream);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 600;
    cursor: none;
    box-shadow: 0 0 0 0 var(--red-glow), 0 20px 50px rgba(255, 42, 42, .35);
    transform: translateY(0);
    transition: transform .4s var(--easing), box-shadow .35s, opacity .35s;
    opacity: 0;
    pointer-events: none;
    border: 1px solid rgba(245, 230, 211, .15);
    overflow: hidden;
    isolation: isolate;
}
.float-cta.visible { opacity: 1; pointer-events: auto; }
.float-cta:hover { transform: translateY(-3px); box-shadow: 0 0 35px var(--red-glow), 0 25px 55px rgba(255, 42, 42, .45); }
.float-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, .25), transparent);
    animation: holo-spin 3s linear infinite;
    z-index: -1;
}
.float-cta .pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 0 0 rgba(245, 230, 211, .6);
    animation: cta-pulse 1.5s infinite;
}
@keyframes cta-pulse {
    0% { box-shadow: 0 0 0 0 rgba(245, 230, 211, .8); }
    70% { box-shadow: 0 0 0 12px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* Press / featured strip */
.press-strip {
    background: var(--bg);
    padding: 60px 0;
    border-bottom: 1px solid var(--line);
}
.press-strip .container {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    justify-content: center;
}
.press-label {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--ink-3);
    border-right: 1px solid var(--line);
    padding-right: 60px;
}
.press-platforms {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}
.press-platform {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--ink-2);
    font-family: var(--display);
    font-style: italic;
    font-size: 20px;
    transition: color .25s, transform .35s var(--easing);
}
.press-platform:hover { color: var(--red); transform: translateY(-2px); }
.press-platform .icn {
    width: 28px; height: 28px;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    font-style: normal;
}
.press-platform .views {
    font-family: var(--mono);
    font-style: normal;
    font-size: 11px;
    color: var(--ink-3);
    letter-spacing: .15em;
}
@media (max-width: 760px) {
    .press-strip .container { gap: 30px; }
    .press-label { border: none; padding: 0; }
    .press-platforms { gap: 30px; }
    .press-platform { font-size: 16px; }
}

/* What You Get — Hormozi value stack */
.value-stack {
    padding: 160px 0 140px;
    position: relative;
    background:
        radial-gradient(ellipse at top, rgba(255, 42, 42, .08), transparent 50%),
        var(--bg);
    overflow: hidden;
}
.value-stack-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: start;
}
@media (max-width: 900px) {
    .value-stack-grid { grid-template-columns: 1fr; gap: 50px; }
}
.value-stack-left h2 {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(48px, 7vw, 110px);
    line-height: .95;
    letter-spacing: -.04em;
    margin-bottom: 30px;
}
.value-stack-left h2 em { font-style: italic; color: var(--red); }
.value-stack-left p {
    font-family: var(--display);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--ink-2);
    margin-bottom: 30px;
}
.value-receipt {
    border: 1px dashed var(--line);
    border-radius: 14px;
    padding: 28px;
    background: var(--bg-2);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink-3);
    line-height: 1.6;
}
.value-receipt strong { color: var(--ink); font-weight: 500; }
.value-receipt .total {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.value-receipt .total strong {
    font-family: var(--display);
    font-style: italic;
    font-size: 28px;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--red);
    text-shadow: 0 0 20px var(--red-glow);
}
.value-receipt .strike { text-decoration: line-through; color: var(--ink-4); }

.value-items {
    display: grid;
    gap: 18px;
}
.value-item {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 22px 26px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: transform .35s var(--easing), border-color .25s, background .25s;
}
.value-item:hover { transform: translateX(8px); border-color: var(--red); background: rgba(255, 42, 42, .04); }
.value-item .check {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--red);
    display: grid;
    place-items: center;
    color: var(--cream);
    font-size: 22px;
    box-shadow: 0 0 20px var(--red-glow);
}
.value-item h4 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 4px;
}
.value-item p {
    font-family: var(--display);
    font-style: italic;
    color: var(--ink-3);
    font-size: 15px;
    line-height: 1.45;
}
.value-item .price {
    text-align: right;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink-3);
}
.value-item .price strong {
    display: block;
    font-family: var(--display);
    font-style: italic;
    font-size: 28px;
    color: var(--red);
    margin-bottom: 4px;
    letter-spacing: -.01em;
    text-transform: none;
}
.value-item .price .strike { text-decoration: line-through; color: var(--ink-4); font-style: normal; }

/* Who is this for / not for */
.who-for {
    padding: 160px 0;
    background: var(--bg);
    border-top: 1px solid var(--line);
}
.who-for-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
}
@media (max-width: 900px) {
    .who-for-grid { grid-template-columns: 1fr; }
}
.who-col {
    padding: 50px 44px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: var(--bg-2);
    position: relative;
    overflow: hidden;
}
.who-col.yes {
    border-color: rgba(45, 216, 123, .25);
    background: linear-gradient(180deg, rgba(45, 216, 123, .04), transparent);
}
.who-col.no {
    border-color: rgba(255, 42, 42, .25);
    background: linear-gradient(180deg, rgba(255, 42, 42, .04), transparent);
}
.who-col .tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    border-radius: 100px;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    margin-bottom: 24px;
}
.who-col.yes .tag { background: rgba(45, 216, 123, .12); color: #2dd87b; border: 1px solid rgba(45, 216, 123, .3); }
.who-col.no .tag { background: rgba(255, 42, 42, .12); color: var(--red); border: 1px solid rgba(255, 42, 42, .35); }
.who-col h3 {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3.2vw, 42px);
    letter-spacing: -.02em;
    line-height: 1.1;
    margin-bottom: 28px;
    color: var(--ink);
}
.who-col ul { list-style: none; }
.who-col ul li {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: start;
    padding: 14px 0;
    border-bottom: 1px dashed var(--line);
    font-family: var(--display);
    font-style: italic;
    font-size: 18px;
    line-height: 1.4;
    color: var(--ink-2);
}
.who-col ul li:last-child { border-bottom: none; }
.who-col ul li::before {
    content: '';
    display: inline-block;
    width: 22px; height: 22px;
    border-radius: 50%;
    margin-top: 2px;
}
.who-col.yes ul li::before {
    background: #2dd87b;
    box-shadow: 0 0 14px rgba(45, 216, 123, .5);
    background-image: linear-gradient(135deg, transparent 44%, var(--bg) 44% 50%, transparent 50% 56%, var(--bg) 56% 70%, transparent 70%);
    background-size: 22px 22px;
}
.who-col.no ul li::before {
    background: var(--red);
    box-shadow: 0 0 14px var(--red-glow);
    background-image: linear-gradient(45deg, transparent 44%, var(--bg) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--bg) 44% 56%, transparent 56%);
}

/* Testimonials */
.testimonials {
    padding: 160px 0;
    background: var(--bg-2);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.testimonials-track {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 60px;
}
@media (max-width: 900px) {
    .testimonials-track { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
    .testimonials-track { grid-template-columns: 1fr; }
}
.testimonial-card {
    padding: 32px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    position: relative;
    transition: transform .45s var(--easing), border-color .25s;
}
.testimonial-card:hover { transform: translateY(-6px); border-color: var(--red); }
.testimonial-card .stars {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    color: #ffb800;
}
.testimonial-card .stars span {
    font-size: 14px;
}
.testimonial-card blockquote {
    font-family: var(--display);
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink);
    margin-bottom: 24px;
}
.testimonial-card blockquote::before {
    content: '"';
    font-family: var(--display);
    font-size: 60px;
    line-height: 0;
    color: var(--red);
    margin-right: 8px;
    vertical-align: -8px;
}
.testimonial-card .who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px dashed var(--line);
}
.testimonial-card .avatar {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--red), var(--bg-3));
    display: grid;
    place-items: center;
    font-family: var(--display);
    font-style: italic;
    font-size: 18px;
    color: var(--cream);
    border: 1px solid var(--line);
}
.testimonial-card .meta {
    flex: 1;
}
.testimonial-card .name {
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--ink);
    margin-bottom: 2px;
}
.testimonial-card .when {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .2em;
    color: var(--ink-3);
}

/* Improved hero CTAs — Hormozi yellow ribbon callout */
.hero-promise {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    margin: 36px auto 0;
    background: var(--acid);
    color: #000;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .15em;
    border-radius: 100px;
    transform: rotate(-1deg);
    box-shadow: 0 0 0 1px #000, 4px 4px 0 0 #000;
    padding: 10px 20px;
}
.hero-promise::before {
    content: '★';
    color: #000;
    font-size: 16px;
}

/* Tweak — hero stat pills to have "FREE" badges */
.stat-pill.free::after {
    content: 'FREE';
    margin-left: 10px;
    padding: 3px 8px;
    background: var(--acid);
    color: #000;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .15em;
    transform: rotate(-3deg);
}


/* ════════════════════════════════════════════════
   V3 — Apple/Tesla cinematic moments
   ════════════════════════════════════════════════ */

/* Apple-style scroll manifesto — pinned word-by-word reveal */
.manifesto {
    position: relative;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.manifesto-pin {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100vw;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
}
.manifesto-pin::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(255, 42, 42, .12), transparent 60%);
    pointer-events: none;
}
.manifesto-pin::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--line-2) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
    opacity: .5;
    pointer-events: none;
}
.manifesto-text {
    position: relative;
    z-index: 2;
    max-width: 1400px;
    padding: 0 60px;
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(54px, 8vw, 132px);
    letter-spacing: -.04em;
    line-height: 1.05;
    text-align: left;
}
.manifesto-text .m-word {
    display: inline-block;
    margin-right: .2em;
    transition: color .45s cubic-bezier(.8,0,.2,1), text-shadow .45s;
    color: rgba(245, 230, 211, .42);
}
.manifesto-text .m-word.lit { color: var(--ink); text-shadow: 0 0 30px rgba(245, 230, 211, .25); }
.manifesto-text em {
    font-style: italic;
    color: rgba(255, 42, 42, .55);
    transition: color .45s, text-shadow .45s;
}
.manifesto-text .m-word.lit em {
    color: var(--red);
    text-shadow: 0 0 60px var(--red-glow);
}
.manifesto-meta {
    position: absolute;
    bottom: 50px;
    left: 60px;
    right: 60px;
    display: flex;
    justify-content: space-between;
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--ink-3);
    z-index: 3;
}
.manifesto-progress {
    position: absolute;
    bottom: 100px;
    left: 60px;
    right: 60px;
    height: 1px;
    background: var(--line);
}
.manifesto-progress-fill {
    height: 100%;
    width: 0%;
    background: var(--red);
    box-shadow: 0 0 12px var(--red);
}
@media (max-width: 760px) {
    .manifesto-text { padding: 0 30px; }
    .manifesto-meta, .manifesto-progress { left: 30px; right: 30px; }
}

/* The 10,000 — Apple environment page style */
.mission {
    position: relative;
    background: var(--bg);
    padding: 200px 0;
    text-align: center;
    overflow: hidden;
    border-top: 1px solid var(--line);
}
.mission::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top, rgba(255, 42, 42, .18), transparent 50%),
        radial-gradient(ellipse at bottom, rgba(212, 255, 0, .04), transparent 50%);
    pointer-events: none;
}
.mission-eyebrow {
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--red);
    margin-bottom: 30px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
}
.mission-eyebrow::before, .mission-eyebrow::after {
    content: '';
    width: 40px; height: 1px;
    background: var(--red);
}
.mission-number {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(180px, 28vw, 440px);
    letter-spacing: -.05em;
    line-height: .85;
    background: linear-gradient(180deg, var(--ink) 0%, var(--red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 100px rgba(255, 42, 42, .3);
    margin-bottom: 20px;
}
.mission-sub {
    position: relative;
    z-index: 2;
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 52px);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--ink);
    max-width: 920px;
    margin: 0 auto 24px;
}
.mission-sub em { font-style: italic; color: var(--red); }
.mission-deadline {
    position: relative;
    z-index: 2;
    font-family: var(--mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--ink-3);
    padding: 10px 22px;
    border: 1px solid var(--line);
    border-radius: 100px;
    display: inline-block;
    margin-top: 30px;
}

/* Why FREE — Hormozi-style explainer */
.why-free {
    background: var(--bg-2);
    padding: 180px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
}
.why-free::before {
    content: 'FREE';
    position: absolute;
    right: -50px;
    top: -40px;
    font-family: var(--display);
    font-style: italic;
    font-size: clamp(200px, 30vw, 500px);
    line-height: .8;
    color: rgba(212, 255, 0, .045);
    pointer-events: none;
    user-select: none;
    transform: rotate(-8deg);
}
.why-free-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: start;
    position: relative;
    z-index: 2;
}
@media (max-width: 900px) {
    .why-free-grid { grid-template-columns: 1fr; gap: 50px; }
}
.why-free-left .v2-eyebrow { color: var(--acid); }
.why-free-left .v2-eyebrow::before { background: var(--acid); }
.why-free-left h2 {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(60px, 9vw, 140px);
    letter-spacing: -.04em;
    line-height: .9;
    margin-bottom: 30px;
    color: var(--ink);
}
.why-free-left h2 em {
    font-style: italic;
    background: linear-gradient(180deg, var(--acid), #b3d100);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.why-free-cards {
    display: grid;
    gap: 22px;
}
.why-free-card {
    padding: 32px 36px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 18px;
    transition: transform .4s var(--easing), border-color .25s;
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 24px;
    align-items: start;
}
.why-free-card:hover { transform: translateX(8px); border-color: var(--acid); }
.why-free-card .num {
    font-family: var(--display);
    font-style: italic;
    font-size: 46px;
    color: var(--acid);
    line-height: 1;
    letter-spacing: -.02em;
}
.why-free-card h4 {
    font-family: var(--display);
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -.015em;
    color: var(--ink);
    margin-bottom: 8px;
}
.why-free-card p {
    font-family: var(--display);
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-2);
}

/* Hero — Add stronger subtitle hierarchy + scroll cue */
.scroll-cue {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 42px;
    border: 1.5px solid var(--ink-3);
    border-radius: 14px;
    z-index: 8;
    opacity: 0;
    animation: cue-in .8s 3s var(--easing) forwards;
}
.scroll-cue::before {
    content: '';
    position: absolute;
    top: 8px; left: 50%;
    width: 3px; height: 8px;
    background: var(--ink);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: cue-bounce 1.6s ease-in-out infinite;
}
@keyframes cue-in {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes cue-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
    50% { transform: translateX(-50%) translateY(12px); opacity: .2; }
}


/* ════════════════════════════════════════════════
   V4 — Full-bleed cinematic video story
   ════════════════════════════════════════════════ */

.video-story {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    overflow: hidden;
    background: var(--bg);
}
.video-story-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.video-story-bg iframe {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.78vh;
    pointer-events: none;
    filter: saturate(.65) brightness(.35) contrast(1.1);
}
.video-story::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, transparent 0%, rgba(5, 5, 7, .55) 60%, var(--bg) 100%),
        linear-gradient(180deg, rgba(5, 5, 7, .6) 0%, transparent 40%, transparent 60%, rgba(5, 5, 7, .85) 100%);
    pointer-events: none;
    z-index: 2;
}
.video-story-inner {
    position: relative;
    z-index: 3;
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 0 30px;
}
.video-story .kicker {
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--red);
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.video-story .kicker::before {
    content: '●';
    color: var(--red);
    animation: rec-pulse 1.4s ease-in-out infinite;
}
@keyframes rec-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.85); }
}
.video-story h2 {
    font-family: var(--display);
    font-weight: 300;
    font-size: clamp(60px, 9vw, 150px);
    letter-spacing: -.04em;
    line-height: .95;
    color: var(--ink);
    max-width: 1200px;
    margin-bottom: 28px;
    text-shadow: 0 4px 30px rgba(0,0,0,.8);
}
.video-story h2 em { font-style: italic; color: var(--red); text-shadow: 0 0 60px var(--red-glow); }
.video-story p {
    font-family: var(--display);
    font-style: italic;
    font-size: 21px;
    line-height: 1.55;
    color: var(--ink-2);
    max-width: 660px;
    margin: 0 auto 40px;
}
.video-story .stats {
    display: flex;
    gap: 50px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 30px;
}
.video-story .stat-item {
    text-align: left;
}
.video-story .stat-item .n {
    font-family: var(--display);
    font-style: italic;
    font-size: 42px;
    color: var(--ink);
    letter-spacing: -.02em;
    display: block;
    line-height: 1;
}
.video-story .stat-item .l {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: var(--ink-3);
    margin-top: 6px;
    display: block;
}
.video-story .watch-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    margin-top: 36px;
    padding: 16px 30px;
    background: rgba(5, 5, 7, .7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--red);
    border-radius: 100px;
    color: var(--ink);
    font-family: var(--mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .25em;
    transition: background .3s, transform .35s var(--easing), box-shadow .35s;
}
.video-story .watch-cta:hover { background: var(--red); color: var(--cream); transform: translateY(-2px); box-shadow: 0 0 40px var(--red-glow); }
.video-story .watch-cta .play-mini {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--red);
    display: grid;
    place-items: center;
    position: relative;
    box-shadow: 0 0 16px var(--red-glow);
}
.video-story .watch-cta .play-mini::after {
    content: '';
    width: 0; height: 0;
    border-left: 8px solid var(--cream);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    margin-left: 2px;
}
.video-story .watch-cta:hover .play-mini { background: var(--cream); }
.video-story .watch-cta:hover .play-mini::after { border-left-color: var(--red); }

/* Corner timestamps for cinematic feel */
.video-story .corner-tag {
    position: absolute;
    z-index: 4;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .3em;
    color: var(--ink-3);
}
.video-story .corner-tag.tl { top: 30px; left: 30px; }
.video-story .corner-tag.tr { top: 30px; right: 30px; }
.video-story .corner-tag.bl { bottom: 30px; left: 30px; }
.video-story .corner-tag.br { bottom: 30px; right: 30px; }
.video-story .corner-tag .rec {
    color: var(--red);
    margin-right: 8px;
    animation: rec-pulse 1.4s ease-in-out infinite;
}


/* ════════════════════════════════════════════════
   V5 — FULL-BLEED VIDEO HERO, SANS-SERIF PUNCH
   ════════════════════════════════════════════════ */

.hero-fullbleed {
    position: relative;
    width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    background: #000;
    isolation: isolate;
}
.hero-fullbleed .yt-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.hero-fullbleed .yt-bg iframe {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;
    min-height: 100vh;
    min-width: 177.78vh;
    pointer-events: none;
    filter: brightness(.42) saturate(.75) contrast(1.15);
}
.hero-fullbleed::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(ellipse 70% 50% at 50% 60%, transparent 0%, rgba(0,0,0,.55) 70%, #000 100%),
        linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 20%, transparent 60%, rgba(0,0,0,.95) 100%);
    pointer-events: none;
}
.hero-fullbleed .grain { z-index: 2; opacity: .18; }
.hero-fullbleed .scanlines { z-index: 2; }

.hero-fb-inner {
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 160px 30px 80px;
    text-align: center;
}

/* Eyebrow */
.hero-fb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 22px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(0, 0, 0, .55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .3em;
    color: #fff;
    border-radius: 100px;
    margin-bottom: 40px;
}
.hero-fb-eyebrow .live-dot {
    width: 8px; height: 8px;
    background: #2dd87b;
    border-radius: 50%;
    box-shadow: 0 0 14px #2dd87b;
    animation: pulse 1.6s infinite;
}

/* GIANT SANS-SERIF NAME — Inter Black */
.hero-fb-name {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(70px, 18vw, 320px);
    line-height: .82;
    letter-spacing: -.06em;
    color: #fff;
    text-transform: uppercase;
    text-shadow:
        0 8px 60px rgba(0, 0, 0, .9),
        0 0 80px rgba(255, 42, 42, .35);
    margin-bottom: 30px;
    position: relative;
}
.hero-fb-name .accent {
    color: var(--red);
    font-style: italic;
    font-weight: 800;
    text-shadow:
        0 0 60px var(--red-glow),
        0 4px 30px rgba(0, 0, 0, .8);
    display: inline-block;
    margin-left: -.04em;
}
.hero-fb-name .word-row { display: block; overflow: hidden; }
.hero-fb-name .word-row > span {
    display: inline-block;
    transform: translateY(110%);
    opacity: 0;
    will-change: transform;
}

/* Yellow promise ribbon — bigger, bolder */
.hero-fb-promise {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 14px 26px;
    background: var(--acid);
    color: #000;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .15em;
    border-radius: 8px;
    transform: rotate(-1.5deg);
    box-shadow:
        0 0 0 1.5px #000,
        6px 6px 0 0 #000,
        0 0 50px rgba(212, 255, 0, .35);
    margin-bottom: 40px;
}
.hero-fb-promise::before {
    content: '★';
    font-size: 18px;
}

/* MEGA tagline */
.hero-fb-tagline {
    font-family: var(--sans);
    font-weight: 500;
    font-size: clamp(20px, 1.7vw, 26px);
    line-height: 1.4;
    color: rgba(255, 255, 255, .85);
    max-width: 880px;
    margin-bottom: 50px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, .8);
}
.hero-fb-tagline b { color: #fff; font-weight: 800; }
.hero-fb-tagline .red { color: var(--red); font-weight: 800; }

/* Aggressive CTA pair */
.hero-fb-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 70px;
}
.btn-fat {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 22px 36px;
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-radius: 100px;
    border: 2px solid transparent;
    cursor: none;
    overflow: hidden;
    isolation: isolate;
    transition: transform .3s var(--easing), box-shadow .35s;
    will-change: transform;
}
.btn-fat.primary {
    background: var(--red);
    color: #fff;
    box-shadow: 0 12px 40px rgba(255, 42, 42, .45), 0 0 0 0 var(--red-glow);
}
.btn-fat.primary:hover { transform: translateY(-3px); box-shadow: 0 18px 60px rgba(255, 42, 42, .6), 0 0 50px var(--red-glow); }
.btn-fat.outline {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.btn-fat.outline:hover { background: #fff; color: #000; transform: translateY(-3px); }
.btn-fat .arrow {
    display: inline-block;
    transition: transform .35s var(--easing);
}
.btn-fat:hover .arrow { transform: translateX(6px); }

/* Inline stat row — clean, big */
.hero-fb-stats {
    display: flex;
    gap: 60px;
    justify-content: center;
    flex-wrap: wrap;
    padding-top: 50px;
    border-top: 1px solid rgba(255, 255, 255, .15);
    max-width: 900px;
    width: 100%;
}
.hero-fb-stats .si {
    text-align: left;
}
.hero-fb-stats .si .n {
    font-family: var(--sans);
    font-weight: 800;
    font-size: clamp(36px, 4vw, 64px);
    line-height: 1;
    letter-spacing: -.03em;
    color: #fff;
    display: block;
    font-variant-numeric: tabular-nums;
}
.hero-fb-stats .si .l {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .25em;
    color: rgba(255, 255, 255, .55);
    margin-top: 8px;
    display: block;
}
.hero-fb-stats .si.accent .n { color: var(--acid); }
.hero-fb-stats .si.accent .l { color: var(--acid); }

/* Corner timestamps for cinematic */
.hero-fb-corner {
    position: absolute;
    z-index: 4;
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .3em;
    color: rgba(255, 255, 255, .6);
}
.hero-fb-corner.tl { top: 28px; left: 28px; }
.hero-fb-corner.tr { top: 28px; right: 28px; }
.hero-fb-corner.bl { bottom: 28px; left: 28px; }
.hero-fb-corner.br { bottom: 28px; right: 28px; }
.hero-fb-corner .rec { color: var(--red); margin-right: 8px; animation: rec-pulse 1.4s infinite; }

@media (max-width: 760px) {
    .hero-fb-stats { gap: 30px; padding-top: 30px; }
    .hero-fb-corner.tr, .hero-fb-corner.br { display: none; }
    .btn-fat { padding: 18px 26px; font-size: 14px; }
}


/* ════════════════════════════════════════════════
   V6 — OSMO.SUPPLY-INSPIRED RESTRAINT
   Less. Bigger. Cleaner. Premium.
   ════════════════════════════════════════════════ */

.v6 {
    --v6-bg: #0a0a0c;
    --v6-bg-2: #15151a;
    --v6-bg-3: #1d1d24;
    --v6-text: #f5f3ee;
    --v6-text-dim: #9a958c;
    --v6-text-mute: #5c5852;
    --v6-accent: #ff3322;
    --v6-accent-2: #2dd4bf;
    --v6-line: rgba(245, 243, 238, .08);
    --v6-line-strong: rgba(245, 243, 238, .16);
}
.v6 body { background: var(--v6-bg); color: var(--v6-text); font-family: 'Inter', system-ui, sans-serif; }
body.v6 { background: var(--v6-bg) !important; color: var(--v6-text); font-family: 'Inter', system-ui, sans-serif; }

/* ── V6 Container ── */
.v6-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 760px) { .v6-wrap { padding: 0 20px; } }

/* ── V6 Nav ── */
.v6-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 100;
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(10, 10, 12, .65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--v6-line);
    transition: padding .35s var(--easing);
}
.v6-nav.scrolled { padding: 14px 32px; background: rgba(10, 10, 12, .92); }
.v6-nav-logo {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
    color: var(--v6-text);
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.v6-nav-logo .dot {
    width: 8px; height: 8px;
    background: var(--v6-accent);
    border-radius: 50%;
    margin: 0 4px;
    box-shadow: 0 0 14px var(--v6-accent);
}
.v6-nav-links {
    display: flex;
    gap: 36px;
    align-items: center;
}
.v6-nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--v6-text-dim);
    transition: color .25s;
    position: relative;
}
.v6-nav-link:hover { color: var(--v6-text); }
.v6-nav-link.active { color: var(--v6-text); }
.v6-nav-cta {
    padding: 10px 20px;
    background: var(--v6-text);
    color: var(--v6-bg);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.01em;
    transition: background .25s, transform .25s var(--easing);
}
.v6-nav-cta:hover { background: var(--v6-accent); color: var(--v6-text); transform: translateY(-1px); }
@media (max-width: 820px) {
    .v6-nav-links { display: none; }
    .v6-nav { padding: 18px 20px; }
}

/* ── V6 Hero ── */
.v6-hero {
    min-height: 100vh;
    padding: 200px 32px 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--v6-bg);
    position: relative;
    overflow: hidden;
}
.v6-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 100%, rgba(255, 51, 34, .15), transparent 55%);
    pointer-events: none;
}
.v6-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: rgba(245, 243, 238, .04);
    border: 1px solid var(--v6-line);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--v6-text-dim);
    margin-bottom: 32px;
}
.v6-eyebrow .live-dot {
    width: 6px; height: 6px;
    background: #2dd87b;
    border-radius: 50%;
    box-shadow: 0 0 10px #2dd87b;
    animation: pulse 1.6s infinite;
}
.v6-hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(56px, 9vw, 144px);
    line-height: .95;
    letter-spacing: -.045em;
    color: var(--v6-text);
    max-width: 1100px;
    margin-bottom: 32px;
    position: relative;
    z-index: 2;
}
.v6-hero h1 .accent {
    color: var(--v6-accent);
    display: inline-block;
}
.v6-hero .lead {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.5;
    color: var(--v6-text-dim);
    max-width: 620px;
    margin-bottom: 44px;
    position: relative;
    z-index: 2;
}
.v6-hero .lead b { color: var(--v6-text); font-weight: 600; }
.v6-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 80px;
    position: relative;
    z-index: 2;
}
.v6-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 28px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    cursor: none;
    transition: transform .3s var(--easing), background .25s, color .25s, box-shadow .35s;
    border: 1px solid transparent;
}
.v6-btn.primary {
    background: var(--v6-text);
    color: var(--v6-bg);
}
.v6-btn.primary:hover {
    background: var(--v6-accent);
    color: var(--v6-text);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(255, 51, 34, .35);
}
.v6-btn.secondary {
    background: rgba(245, 243, 238, .04);
    color: var(--v6-text);
    border-color: var(--v6-line-strong);
}
.v6-btn.secondary:hover {
    background: rgba(245, 243, 238, .08);
    border-color: var(--v6-text);
    transform: translateY(-2px);
}
.v6-btn .arrow { display: inline-block; transition: transform .3s var(--easing); }
.v6-btn:hover .arrow { transform: translateX(4px); }

/* ── Hero stat strip ── */
.v6-hero-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--v6-line);
    border-bottom: 1px solid var(--v6-line);
    width: 100%;
    max-width: 900px;
    position: relative;
    z-index: 2;
}
.v6-hero-stats .st {
    flex: 1;
    padding: 28px 20px;
    text-align: center;
    border-right: 1px solid var(--v6-line);
}
.v6-hero-stats .st:last-child { border-right: none; }
.v6-hero-stats .n {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3vw, 40px);
    color: var(--v6-text);
    letter-spacing: -.025em;
    line-height: 1;
    margin-bottom: 6px;
    display: block;
    font-variant-numeric: tabular-nums;
}
.v6-hero-stats .l {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--v6-text-mute);
    letter-spacing: -.005em;
}
@media (max-width: 700px) {
    .v6-hero-stats { flex-wrap: wrap; }
    .v6-hero-stats .st { flex: 1 0 50%; border-bottom: 1px solid var(--v6-line); }
}

/* ── V6 Trust strip (logos / platforms) ── */
.v6-trust {
    padding: 60px 32px;
    border-bottom: 1px solid var(--v6-line);
    background: var(--v6-bg);
}
.v6-trust-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
    justify-content: center;
}
.v6-trust-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--v6-text-mute);
    letter-spacing: -.005em;
}
.v6-trust-platforms {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    align-items: center;
}
.v6-trust-platforms a {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--v6-text-dim);
    transition: color .25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.v6-trust-platforms a:hover { color: var(--v6-text); }
.v6-trust-platforms a .count {
    font-size: 12px;
    color: var(--v6-text-mute);
    font-weight: 500;
}

/* ── V6 Section base ── */
.v6-section {
    padding: 140px 0;
    background: var(--v6-bg);
}
.v6-section.alt { background: var(--v6-bg-2); }
.v6-section-head {
    margin-bottom: 80px;
}
.v6-tag {
    display: inline-block;
    padding: 6px 14px;
    background: rgba(255, 51, 34, .1);
    color: var(--v6-accent);
    border: 1px solid rgba(255, 51, 34, .25);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.005em;
    margin-bottom: 24px;
}
.v6-h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 80px);
    line-height: 1.0;
    letter-spacing: -.035em;
    color: var(--v6-text);
    max-width: 800px;
}
.v6-h2 .accent { color: var(--v6-accent); }
.v6-h2-sub {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.5;
    color: var(--v6-text-dim);
    margin-top: 20px;
    max-width: 580px;
}

/* ── V6 Reel Grid (osmo-style premium cards) ── */
.v6-reel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 760px) { .v6-reel { grid-template-columns: 1fr; } }
.v6-card {
    position: relative;
    background: var(--v6-bg-2);
    border: 1px solid var(--v6-line);
    border-radius: 20px;
    overflow: hidden;
    transition: transform .55s var(--easing), border-color .35s;
    aspect-ratio: 4 / 3;
    cursor: none;
}
.v6-card:hover { transform: translateY(-6px); border-color: var(--v6-line-strong); }
.v6-card .thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--easing);
}
.v6-card:hover .thumb { transform: scale(1.06); }
.v6-card .info {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(10,10,12,.55) 0%, transparent 30%, transparent 60%, rgba(10,10,12,.95) 100%);
}
.v6-card .info-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}
.v6-card .views {
    background: rgba(10, 10, 12, .7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--v6-line-strong);
    color: var(--v6-text);
    padding: 7px 14px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.v6-card .label {
    background: var(--v6-accent);
    color: var(--v6-text);
    padding: 7px 14px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: -.005em;
    text-transform: uppercase;
}
.v6-card h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 2.2vw, 32px);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--v6-text);
}

/* ── V6 What You Get (premium cards) ── */
.v6-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 760px) { .v6-services { grid-template-columns: 1fr; } }
.v6-service {
    background: var(--v6-bg-2);
    border: 1px solid var(--v6-line);
    border-radius: 20px;
    padding: 40px;
    transition: transform .4s var(--easing), border-color .25s, background .25s;
    cursor: none;
}
.v6-service:hover { transform: translateY(-4px); border-color: var(--v6-line-strong); background: var(--v6-bg-3); }
.v6-service .num {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: var(--v6-accent);
    letter-spacing: -.005em;
    margin-bottom: 32px;
    display: block;
}
.v6-service h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--v6-text);
    margin-bottom: 14px;
}
.v6-service p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--v6-text-dim);
    margin-bottom: 22px;
}
.v6-service .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255, 51, 34, .12);
    color: var(--v6-accent);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

/* ── V6 Testimonials ── */
.v6-testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { .v6-testimonials { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .v6-testimonials { grid-template-columns: 1fr; } }
.v6-testimonial {
    background: var(--v6-bg-2);
    border: 1px solid var(--v6-line);
    border-radius: 16px;
    padding: 32px;
    transition: transform .4s var(--easing), border-color .25s;
}
.v6-testimonial:hover { transform: translateY(-4px); border-color: var(--v6-line-strong); }
.v6-testimonial blockquote {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--v6-text);
    margin-bottom: 24px;
    letter-spacing: -.005em;
}
.v6-testimonial .who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--v6-line);
}
.v6-testimonial .avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v6-accent), var(--v6-bg-3));
    display: grid;
    place-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--v6-text);
}
.v6-testimonial .name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--v6-text);
}
.v6-testimonial .when {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--v6-text-mute);
    margin-top: 2px;
}

/* ── V6 Final CTA ── */
.v6-final {
    padding: 180px 32px;
    text-align: center;
    background:
        radial-gradient(circle at center, rgba(255, 51, 34, .18) 0%, transparent 55%),
        var(--v6-bg);
    border-top: 1px solid var(--v6-line);
    position: relative;
    overflow: hidden;
}
.v6-final h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(60px, 10vw, 160px);
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--v6-text);
    margin-bottom: 24px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.v6-final h2 .accent { color: var(--v6-accent); }
.v6-final p {
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: var(--v6-text-dim);
    max-width: 580px;
    margin: 0 auto 40px;
}

/* ── V6 Footer ── */
.v6-footer {
    background: var(--v6-bg);
    border-top: 1px solid var(--v6-line);
    padding: 80px 32px 40px;
}
.v6-footer-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 60px;
    border-bottom: 1px solid var(--v6-line);
}
@media (max-width: 760px) { .v6-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.v6-footer h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--v6-text);
    margin-bottom: 16px;
    letter-spacing: -.005em;
}
.v6-footer a {
    display: block;
    color: var(--v6-text-dim);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 5px 0;
    transition: color .2s;
}
.v6-footer a:hover { color: var(--v6-text); }
.v6-footer .brand-block .logo {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--v6-text);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 16px;
}
.v6-footer .brand-block .logo .dot {
    width: 8px; height: 8px;
    background: var(--v6-accent);
    border-radius: 50%;
    margin: 0 4px;
    display: inline-block;
}
.v6-footer .brand-block p {
    color: var(--v6-text-dim);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    max-width: 320px;
}
.v6-footer-bottom {
    max-width: 1280px;
    margin: 30px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--v6-text-mute);
}

/* ── V6 Reveal helpers ── */
.v6-reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--easing), transform .9s var(--easing); }
.v6-reveal.in { opacity: 1; transform: none; }


/* ════════════════════════════════════════════════
   V7 — LIGHT PREMIUM (Apple / Jeton-inspired)
   Cream/white bg · Bold Inter Black · Red accent
   ════════════════════════════════════════════════ */

.v7 {
    --v7-bg: #fbfaf6;
    --v7-bg-alt: #f4f1ea;
    --v7-bg-card: #ffffff;
    --v7-bg-deep: #ece6da;
    --v7-text: #0e0e10;
    --v7-text-2: #4a4945;
    --v7-text-mute: #8b867d;
    --v7-text-soft: #b8b3a8;
    --v7-accent: #e63422;
    --v7-accent-dark: #c41f0f;
    --v7-line: rgba(14, 14, 16, .08);
    --v7-line-2: rgba(14, 14, 16, .04);
    --v7-line-strong: rgba(14, 14, 16, .16);
}
body.v7 {
    background: var(--v7-bg) !important;
    color: var(--v7-text);
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    cursor: auto;
}
.v7 ::selection { background: var(--v7-accent); color: var(--v7-bg); }
.v7 a { color: inherit; text-decoration: none; }

.v7-wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 760px) { .v7-wrap { padding: 0 20px; } }

/* ── Nav ── */
.v7-nav {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    width: calc(100% - 32px);
    max-width: 1280px;
    padding: 12px 20px 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(251, 250, 246, .8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--v7-line);
    border-radius: 100px;
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 8px 30px rgba(14,14,16,.06);
    transition: all .35s var(--easing);
}
.v7-nav.scrolled {
    background: rgba(251, 250, 246, .96);
    box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 12px 40px rgba(14,14,16,.08);
}
.v7-nav-logo {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.025em;
    color: var(--v7-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.v7-nav-logo .dot {
    width: 7px; height: 7px;
    background: var(--v7-accent);
    border-radius: 50%;
    margin: 0 3px;
    display: inline-block;
}
.v7-nav-links {
    display: flex;
    gap: 6px;
    align-items: center;
}
.v7-nav-link {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--v7-text-2);
    padding: 8px 14px;
    border-radius: 100px;
    transition: color .25s, background .25s;
}
.v7-nav-link:hover { color: var(--v7-text); background: rgba(14,14,16,.04); }
.v7-nav-cta {
    padding: 10px 18px;
    background: var(--v7-text);
    color: var(--v7-bg);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: background .25s, transform .25s var(--easing);
    margin-left: 4px;
}
.v7-nav-cta:hover { background: var(--v7-accent); transform: translateY(-1px); }
.v7-nav-burger {
    display: none;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(14,14,16,.04);
    border: none;
    cursor: pointer;
    position: relative;
}
.v7-nav-burger::before, .v7-nav-burger::after {
    content: '';
    position: absolute;
    left: 50%;
    width: 14px; height: 1.5px;
    background: var(--v7-text);
    transform: translateX(-50%);
}
.v7-nav-burger::before { top: 14px; }
.v7-nav-burger::after { top: 20px; }
@media (max-width: 820px) {
    .v7-nav-links { display: none; }
    .v7-nav-burger { display: block; }
}

/* ── Hero ── */
.v7-hero {
    position: relative;
    padding: 160px 32px 100px;
    text-align: center;
    background: var(--v7-bg);
    overflow: hidden;
    isolation: isolate;
}
.v7-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(230, 52, 34, .08), transparent 50%);
    pointer-events: none;
    z-index: -1;
}
.v7-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(14,14,16,.05) 1px, transparent 0);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: -1;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 60%, black, transparent);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 60%, black, transparent);
}
.v7-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--v7-text-2);
    margin-bottom: 30px;
    box-shadow: 0 4px 16px rgba(14,14,16,.04);
}
.v7-eyebrow .live-dot {
    width: 7px; height: 7px;
    background: #1ec47a;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(30, 196, 122, .6);
    animation: v7pulse 1.6s infinite;
}
@keyframes v7pulse {
    0% { box-shadow: 0 0 0 0 rgba(30, 196, 122, .6); }
    70% { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.v7-hero h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(56px, 9vw, 144px);
    line-height: .95;
    letter-spacing: -.05em;
    color: var(--v7-text);
    max-width: 1080px;
    margin: 0 auto 30px;
}
.v7-hero h1 .accent { color: var(--v7-accent); }
.v7-hero .lead {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.5;
    color: var(--v7-text-2);
    max-width: 640px;
    margin: 0 auto 40px;
}
.v7-hero .lead b { color: var(--v7-text); font-weight: 600; }
.v7-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 90px;
}
.v7-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 26px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.005em;
    transition: transform .3s var(--easing), background .25s, color .25s, box-shadow .35s;
    border: 1px solid transparent;
    cursor: pointer;
}
.v7-btn.primary {
    background: var(--v7-text);
    color: var(--v7-bg);
    box-shadow: 0 8px 22px rgba(14, 14, 16, .15);
}
.v7-btn.primary:hover {
    background: var(--v7-accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(230, 52, 34, .35);
}
.v7-btn.secondary {
    background: var(--v7-bg-card);
    color: var(--v7-text);
    border-color: var(--v7-line);
    box-shadow: 0 4px 14px rgba(14,14,16,.05);
}
.v7-btn.secondary:hover {
    border-color: var(--v7-text);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(14,14,16,.1);
}
.v7-btn .arrow { display: inline-block; transition: transform .3s var(--easing); }
.v7-btn:hover .arrow { transform: translateX(4px); }

/* Hero stat strip */
.v7-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    border-top: 1px solid var(--v7-line);
    border-bottom: 1px solid var(--v7-line);
    max-width: 920px;
    margin: 0 auto;
}
.v7-hero-stats .st {
    padding: 26px 14px;
    text-align: center;
    border-right: 1px solid var(--v7-line);
}
.v7-hero-stats .st:last-child { border-right: none; }
.v7-hero-stats .n {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(28px, 3vw, 42px);
    color: var(--v7-text);
    letter-spacing: -.03em;
    line-height: 1;
    margin-bottom: 6px;
    display: block;
    font-variant-numeric: tabular-nums;
}
.v7-hero-stats .l {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--v7-text-mute);
}
@media (max-width: 700px) {
    .v7-hero-stats { grid-template-columns: 1fr 1fr; }
    .v7-hero-stats .st:nth-child(2) { border-right: none; }
    .v7-hero-stats .st:nth-child(1), .v7-hero-stats .st:nth-child(2) { border-bottom: 1px solid var(--v7-line); }
}

/* Trust strip */
.v7-trust {
    padding: 50px 32px;
    background: var(--v7-bg);
    border-bottom: 1px solid var(--v7-line);
}
.v7-trust-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
    justify-content: center;
}
.v7-trust-label {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--v7-text-mute);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.v7-trust-platforms {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
    align-items: center;
}
.v7-trust-platforms a {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: var(--v7-text-2);
    transition: color .25s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.v7-trust-platforms a:hover { color: var(--v7-text); }
.v7-trust-platforms a .count {
    font-size: 11px;
    color: var(--v7-text-mute);
    font-weight: 500;
}

/* Section base */
.v7-section { padding: 140px 0; background: var(--v7-bg); }
.v7-section.alt { background: var(--v7-bg-alt); }
.v7-section-head { margin-bottom: 70px; }
.v7-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: var(--v7-bg-card);
    color: var(--v7-accent);
    border: 1px solid var(--v7-line);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(14,14,16,.03);
}
.v7-tag::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--v7-accent);
    border-radius: 50%;
}
.v7-h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(40px, 6vw, 84px);
    line-height: 1.0;
    letter-spacing: -.04em;
    color: var(--v7-text);
    max-width: 820px;
}
.v7-h2 .accent { color: var(--v7-accent); }
.v7-h2-sub {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--v7-text-2);
    margin-top: 20px;
    max-width: 600px;
}

/* Reel grid */
.v7-reel {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}
@media (max-width: 760px) { .v7-reel { grid-template-columns: 1fr; } }
.v7-card {
    position: relative;
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 24px;
    overflow: hidden;
    transition: transform .5s var(--easing), border-color .35s, box-shadow .35s;
    aspect-ratio: 4 / 3;
    box-shadow: 0 4px 14px rgba(14,14,16,.04);
}
.v7-card:hover {
    transform: translateY(-6px);
    border-color: var(--v7-line-strong);
    box-shadow: 0 24px 50px rgba(14,14,16,.12);
}
.v7-card .thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--easing);
}
.v7-card:hover .thumb { transform: scale(1.05); }
.v7-card .info {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(180deg, rgba(14,14,16,.0) 0%, rgba(14,14,16,.0) 35%, rgba(14,14,16,.9) 100%);
}
.v7-card .info-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
}
.v7-card .views {
    background: rgba(255, 255, 255, .92);
    color: var(--v7-text);
    padding: 7px 14px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(6px);
}
.v7-card .label {
    background: var(--v7-accent);
    color: #fff;
    padding: 7px 14px;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.v7-card h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 2vw, 28px);
    line-height: 1.15;
    letter-spacing: -.02em;
    color: #fff;
}

/* Services */
.v7-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 760px) { .v7-services { grid-template-columns: 1fr; } }
.v7-service {
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 24px;
    padding: 40px;
    transition: transform .4s var(--easing), border-color .25s, box-shadow .25s;
    box-shadow: 0 4px 14px rgba(14,14,16,.04);
}
.v7-service:hover {
    transform: translateY(-4px);
    border-color: var(--v7-line-strong);
    box-shadow: 0 18px 38px rgba(14,14,16,.08);
}
.v7-service .num {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: var(--v7-accent);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 28px;
    display: block;
}
.v7-service h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 28px;
    letter-spacing: -.025em;
    line-height: 1.1;
    color: var(--v7-text);
    margin-bottom: 12px;
}
.v7-service p {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.55;
    color: var(--v7-text-2);
    margin-bottom: 22px;
}
.v7-service .pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(230, 52, 34, .08);
    color: var(--v7-accent);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
}

/* Testimonials */
.v7-testimonials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) { .v7-testimonials { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .v7-testimonials { grid-template-columns: 1fr; } }
.v7-testimonial {
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 20px;
    padding: 32px;
    transition: transform .4s var(--easing), border-color .25s, box-shadow .25s;
    box-shadow: 0 4px 14px rgba(14,14,16,.03);
}
.v7-testimonial:hover {
    transform: translateY(-4px);
    border-color: var(--v7-line-strong);
    box-shadow: 0 16px 32px rgba(14,14,16,.08);
}
.v7-testimonial .stars {
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
    color: #f4a52a;
    font-size: 14px;
}
.v7-testimonial blockquote {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.55;
    color: var(--v7-text);
    margin-bottom: 24px;
    letter-spacing: -.005em;
}
.v7-testimonial .who {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 24px;
    border-top: 1px solid var(--v7-line);
}
.v7-testimonial .avatar {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--v7-accent), #ff8060);
    display: grid;
    place-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    color: #fff;
}
.v7-testimonial .name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--v7-text);
}
.v7-testimonial .when {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--v7-text-mute);
    margin-top: 2px;
}

/* Final CTA */
.v7-final {
    padding: 160px 32px;
    text-align: center;
    background:
        radial-gradient(ellipse at center, rgba(230, 52, 34, .08) 0%, transparent 60%),
        var(--v7-bg-alt);
    border-top: 1px solid var(--v7-line);
    position: relative;
    overflow: hidden;
}
.v7-final h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(48px, 8vw, 124px);
    line-height: .95;
    letter-spacing: -.045em;
    color: var(--v7-text);
    margin: 0 auto 22px;
    max-width: 1000px;
}
.v7-final h2 .accent { color: var(--v7-accent); }
.v7-final p {
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    line-height: 1.5;
    color: var(--v7-text-2);
    max-width: 600px;
    margin: 0 auto 36px;
}

/* Footer */
.v7-footer {
    background: var(--v7-bg-alt);
    border-top: 1px solid var(--v7-line);
    padding: 80px 32px 36px;
}
.v7-footer-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--v7-line);
}
@media (max-width: 760px) { .v7-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } }
.v7-footer h4 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--v7-text);
    margin-bottom: 14px;
    letter-spacing: -.005em;
}
.v7-footer a {
    display: block;
    color: var(--v7-text-2);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    padding: 4px 0;
    transition: color .2s;
}
.v7-footer a:hover { color: var(--v7-accent); }
.v7-footer .brand-block .logo {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 22px;
    color: var(--v7-text);
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 14px;
}
.v7-footer .brand-block .logo .dot {
    width: 7px; height: 7px;
    background: var(--v7-accent);
    border-radius: 50%;
    margin: 0 4px;
    display: inline-block;
}
.v7-footer .brand-block p {
    color: var(--v7-text-2);
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    max-width: 320px;
}
.v7-footer-bottom {
    max-width: 1280px;
    margin: 28px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--v7-text-mute);
}

/* Reveal */
.v7-reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--easing), transform .9s var(--easing); }
.v7-reveal.in { opacity: 1; transform: none; }

/* Floating sticky CTA */
.v7-float-cta {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--v7-text);
    color: var(--v7-bg);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 12px 36px rgba(14,14,16,.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s, transform .35s var(--easing), background .25s;
}
.v7-float-cta.visible { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.v7-float-cta:hover { background: var(--v7-accent); }
.v7-float-cta .pulse {
    width: 8px; height: 8px;
    background: var(--v7-bg);
    border-radius: 50%;
    animation: v7pulse 1.5s infinite;
}


/* ════════════════════════════════════════════════
   V7.5 — Incredible copy + interactive surprises
   ════════════════════════════════════════════════ */

/* Top scroll progress */
.v7-scroll-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
    background: transparent;
}
.v7-scroll-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, var(--v7-accent), #ff8060);
    box-shadow: 0 0 12px rgba(230, 52, 34, .4);
    transition: width .08s linear;
}

/* Toast for click-to-copy */
.v7-toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 300;
    padding: 14px 22px;
    background: var(--v7-text);
    color: var(--v7-bg);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 32px rgba(14,14,16,.25);
    transition: transform .55s cubic-bezier(.34,1.56,.64,1);
}
.v7-toast.show { transform: translateX(-50%) translateY(0); }
.v7-toast::before {
    content: '✓';
    width: 18px; height: 18px;
    display: grid;
    place-items: center;
    background: var(--v7-accent);
    color: #fff;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
}

/* Section dividers — subtle, premium */
.v7-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--v7-line-strong), transparent);
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

/* Inline animated underline links */
.v7-link {
    color: var(--v7-text);
    font-weight: 600;
    border-bottom: 1.5px solid var(--v7-accent);
    transition: color .25s;
}
.v7-link:hover { color: var(--v7-accent); }

/* Tilt cards (3D depth on hover) */
.v7-card { transform-style: preserve-3d; will-change: transform; }
.v7-card .info,
.v7-card .views,
.v7-card .label,
.v7-card h3 { transform: translateZ(40px); }

/* ── ROADMAP (Your first 30 days) ── */
.v7-roadmap {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-top: 24px;
    position: relative;
}
@media (max-width: 900px) { .v7-roadmap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .v7-roadmap { grid-template-columns: 1fr; } }

.v7-roadmap::before {
    content: '';
    position: absolute;
    top: 56px;
    left: 7%;
    right: 7%;
    height: 2px;
    background: repeating-linear-gradient(to right, var(--v7-line-strong) 0 6px, transparent 6px 14px);
    z-index: 0;
}
@media (max-width: 900px) { .v7-roadmap::before { display: none; } }

.v7-step {
    position: relative;
    z-index: 1;
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 20px;
    padding: 36px 28px 30px;
    transition: transform .4s var(--easing), border-color .25s, box-shadow .25s;
    box-shadow: 0 4px 14px rgba(14,14,16,.04);
}
.v7-step:hover { transform: translateY(-6px); border-color: var(--v7-accent); box-shadow: 0 16px 40px rgba(14,14,16,.1); }
.v7-step .week {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--v7-bg);
    border: 2px solid var(--v7-text);
    color: var(--v7-text);
    display: grid;
    place-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 13px;
    letter-spacing: -.01em;
    margin: 0 auto 22px;
    transition: background .25s, color .25s;
}
.v7-step:hover .week { background: var(--v7-accent); border-color: var(--v7-accent); color: #fff; }
.v7-step .label {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--v7-text-mute);
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.v7-step h3 {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--v7-text);
    margin-bottom: 14px;
}
.v7-step p {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--v7-text-2);
}

/* ── FAQ ── */
.v7-faq {
    max-width: 900px;
    margin: 0 auto;
    border-top: 1px solid var(--v7-line);
}
.v7-faq details {
    border-bottom: 1px solid var(--v7-line);
    padding: 28px 0;
    transition: padding .35s;
}
.v7-faq details[open] { padding-bottom: 32px; }
.v7-faq summary {
    list-style: none;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 21px;
    color: var(--v7-text);
    letter-spacing: -.015em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    transition: color .25s;
}
.v7-faq summary:hover { color: var(--v7-accent); }
.v7-faq summary::-webkit-details-marker { display: none; }
.v7-faq summary::after {
    content: '+';
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--v7-bg);
    border: 1px solid var(--v7-line);
    display: grid;
    place-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 22px;
    color: var(--v7-text);
    transition: transform .35s var(--easing), background .25s, color .25s;
}
.v7-faq details[open] summary::after { transform: rotate(45deg); background: var(--v7-accent); color: #fff; border-color: var(--v7-accent); }
.v7-faq details p {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--v7-text-2);
    margin-top: 18px;
    max-width: 760px;
}
.v7-faq details p b { color: var(--v7-text); }

/* Stats counter (when value comes into view) */
.v7-hero-stats .n[data-count] { opacity: 0; transition: opacity .35s; }
.v7-hero-stats .n[data-count].counted { opacity: 1; }

/* Section narrow */
.v7-narrow { max-width: 1100px; margin: 0 auto; }

/* Big quote */
.v7-pullquote {
    margin: 60px auto;
    max-width: 900px;
    padding: 50px;
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 24px;
    text-align: center;
    position: relative;
    box-shadow: 0 8px 30px rgba(14,14,16,.05);
}
.v7-pullquote::before {
    content: '"';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px; height: 60px;
    background: var(--v7-accent);
    color: #fff;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Inter', serif;
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    padding-top: 14px;
}
.v7-pullquote q {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.35;
    letter-spacing: -.02em;
    color: var(--v7-text);
    display: block;
    margin-bottom: 18px;
    quotes: none;
}
.v7-pullquote cite {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--v7-text-mute);
    letter-spacing: .04em;
    text-transform: uppercase;
    font-style: normal;
}

/* Magnetic button transition */
.v7-btn { will-change: transform; }

/* Value receipt — Hormozi-style total */
.v7-receipt {
    margin: 60px auto 0;
    max-width: 740px;
    padding: 32px 36px;
    background: var(--v7-bg-card);
    border: 1.5px dashed var(--v7-line-strong);
    border-radius: 18px;
    box-shadow: 0 6px 24px rgba(14,14,16,.06);
}
.v7-receipt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--v7-text-2);
}
.v7-receipt-row .price { color: var(--v7-text); font-variant-numeric: tabular-nums; }
.v7-receipt-row .price .strike { color: var(--v7-text-mute); text-decoration: line-through; margin-right: 8px; }
.v7-receipt-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 18px;
    margin-top: 14px;
    border-top: 1.5px dashed var(--v7-line-strong);
}
.v7-receipt-total .l {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--v7-text);
}
.v7-receipt-total .v {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: -.025em;
    color: var(--v7-accent);
}
.v7-receipt-total .v .strike { color: var(--v7-text-mute); text-decoration: line-through; font-size: 22px; margin-right: 10px; font-weight: 500; }


/* ════════════════════════════════════════════════
   V7.6 — Ali Abdaal vibes (newsletter, guides, books, polish)
   ════════════════════════════════════════════════ */

/* ── Newsletter ── */
.v7-newsletter {
    padding: 120px 32px;
    background:
        radial-gradient(circle at 80% 20%, rgba(230, 52, 34, .07), transparent 40%),
        radial-gradient(circle at 20% 80%, rgba(244, 165, 42, .06), transparent 45%),
        var(--v7-bg-alt);
    border-top: 1px solid var(--v7-line);
    border-bottom: 1px solid var(--v7-line);
    position: relative;
    overflow: hidden;
}
.v7-newsletter-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 2;
}
.v7-newsletter .kicker {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--v7-accent);
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.v7-newsletter .kicker::before {
    content: '';
    width: 24px; height: 1.5px;
    background: var(--v7-accent);
}
.v7-newsletter h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(40px, 6.5vw, 88px);
    line-height: .95;
    letter-spacing: -.04em;
    color: var(--v7-text);
    margin-bottom: 22px;
}
.v7-newsletter h2 .accent { color: var(--v7-accent); }
.v7-newsletter p {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    line-height: 1.55;
    color: var(--v7-text-2);
    margin-bottom: 36px;
}
.v7-newsletter p b { color: var(--v7-text); font-weight: 600; }

.v7-newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 540px;
    margin: 0 auto;
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 100px;
    padding: 6px;
    box-shadow: 0 12px 30px rgba(14,14,16,.08);
    transition: border-color .25s, box-shadow .25s;
}
.v7-newsletter-form:focus-within {
    border-color: var(--v7-text);
    box-shadow: 0 16px 40px rgba(14,14,16,.12);
}
.v7-newsletter-form input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 14px 20px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--v7-text);
    outline: none;
    border-radius: 100px;
}
.v7-newsletter-form input::placeholder { color: var(--v7-text-soft); }
.v7-newsletter-form button {
    border: none;
    background: var(--v7-text);
    color: var(--v7-bg);
    padding: 13px 26px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    border-radius: 100px;
    cursor: pointer;
    transition: background .25s, transform .25s var(--easing);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.v7-newsletter-form button:hover {
    background: var(--v7-accent);
    transform: translateY(-1px);
}
.v7-newsletter-form button .arrow { transition: transform .3s var(--easing); }
.v7-newsletter-form button:hover .arrow { transform: translateX(3px); }
.v7-newsletter-meta {
    margin-top: 18px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    color: var(--v7-text-mute);
}
.v7-newsletter-meta b { color: var(--v7-text); font-weight: 600; }
@media (max-width: 600px) {
    .v7-newsletter-form { flex-direction: column; border-radius: 18px; padding: 14px; }
    .v7-newsletter-form input { padding: 14px 12px; }
    .v7-newsletter-form button { padding: 16px; width: 100%; justify-content: center; }
}

/* ── Latest guides preview ── */
.v7-guides {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 900px) { .v7-guides { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .v7-guides { grid-template-columns: 1fr; } }
.v7-guide {
    display: flex;
    flex-direction: column;
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 20px;
    padding: 28px 28px 32px;
    transition: transform .4s var(--easing), border-color .25s, box-shadow .25s;
    box-shadow: 0 4px 14px rgba(14,14,16,.04);
    position: relative;
    overflow: hidden;
}
.v7-guide:hover {
    transform: translateY(-5px);
    border-color: var(--v7-accent);
    box-shadow: 0 18px 38px rgba(14,14,16,.1);
}
.v7-guide .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--v7-text-mute);
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.v7-guide .meta .cat {
    color: var(--v7-accent);
    font-weight: 700;
}
.v7-guide h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--v7-text);
    margin-bottom: 12px;
}
.v7-guide p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.5;
    color: var(--v7-text-2);
    margin-bottom: 22px;
    flex: 1;
}
.v7-guide .more {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--v7-text);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1.5px solid var(--v7-accent);
    align-self: flex-start;
    padding-bottom: 2px;
    transition: color .25s, gap .25s;
}
.v7-guide:hover .more { color: var(--v7-accent); gap: 10px; }

/* ── Books / Reading list ── */
.v7-books {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
@media (max-width: 900px) { .v7-books { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .v7-books { grid-template-columns: 1fr; } }
.v7-book {
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 18px;
    padding: 24px;
    transition: transform .4s var(--easing), border-color .25s, box-shadow .25s;
    text-align: center;
    box-shadow: 0 4px 14px rgba(14,14,16,.04);
}
.v7-book:hover {
    transform: translateY(-5px) rotate(-1deg);
    border-color: var(--v7-accent);
    box-shadow: 0 18px 38px rgba(14,14,16,.1);
}
.v7-book .cover {
    aspect-ratio: 2 / 3;
    border-radius: 8px;
    margin-bottom: 18px;
    display: grid;
    place-items: center;
    background-size: cover;
    background-position: center;
    box-shadow:
        inset 0 0 0 1px rgba(14,14,16,.08),
        4px 6px 14px rgba(14,14,16,.12);
    color: #fff;
    padding: 22px 16px;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.02em;
    line-height: 1.15;
    overflow: hidden;
    position: relative;
}
.v7-book .cover.b1 { background: linear-gradient(135deg, #c2410c, #f97316); }
.v7-book .cover.b2 { background: linear-gradient(135deg, #1e40af, #3b82f6); }
.v7-book .cover.b3 { background: linear-gradient(135deg, #064e3b, #10b981); }
.v7-book .cover.b4 { background: linear-gradient(135deg, #581c87, #a855f7); }
.v7-book .cover small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: .75;
    text-transform: uppercase;
    letter-spacing: .12em;
    margin-bottom: 8px;
}
.v7-book h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--v7-text);
    margin-bottom: 4px;
    letter-spacing: -.015em;
    line-height: 1.25;
}
.v7-book .author {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--v7-text-mute);
    font-weight: 500;
}
.v7-book .note {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--v7-line);
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-size: 13px;
    color: var(--v7-text-2);
    line-height: 1.4;
}

/* ── About-me strip with photo placeholder ── */
.v7-about {
    padding: 120px 32px;
    background: var(--v7-bg);
}
.v7-about-grid {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    align-items: center;
}
@media (max-width: 900px) { .v7-about-grid { grid-template-columns: 1fr; gap: 50px; } }
.v7-photo {
    aspect-ratio: 1 / 1;
    background:
        repeating-linear-gradient(45deg, rgba(230, 52, 34, .04) 0 8px, transparent 8px 18px),
        var(--v7-bg-deep);
    border-radius: 28px;
    border: 1px solid var(--v7-line);
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 14px 40px rgba(14,14,16,.08);
}
.v7-photo .mono {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: clamp(80px, 14vw, 200px);
    letter-spacing: -.06em;
    color: var(--v7-text);
    line-height: .8;
    display: flex;
    align-items: baseline;
}
.v7-photo .mono .dot {
    width: 18px; height: 18px;
    background: var(--v7-accent);
    border-radius: 50%;
    margin: 0 8px;
    align-self: center;
}
.v7-photo::after {
    content: 'Hi, I\'m Waqas.';
    position: absolute;
    bottom: 24px;
    left: 24px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 13px;
    color: var(--v7-text);
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(8px);
    padding: 8px 14px;
    border-radius: 100px;
    border: 1px solid var(--v7-line);
}
.v7-about-text h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: -.035em;
    color: var(--v7-text);
    margin-bottom: 24px;
}
.v7-about-text h2 .accent { color: var(--v7-accent); }
.v7-about-text p {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--v7-text-2);
    margin-bottom: 16px;
}
.v7-about-text p b { color: var(--v7-text); font-weight: 600; }
.v7-about-bullets {
    list-style: none;
    margin-top: 22px;
    display: grid;
    gap: 12px;
}
.v7-about-bullets li {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 12px;
    align-items: start;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--v7-text-2);
}
.v7-about-bullets li::before {
    content: '→';
    color: var(--v7-accent);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
}
.v7-about-bullets li b { color: var(--v7-text); font-weight: 600; }


/* ════════════════════════════════════════════════
   V8 — Application flow + Kot Addu + member sections
   ════════════════════════════════════════════════ */

/* ── Application status badge in hero ── */
.v7-app-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    background: rgba(30, 196, 122, .12);
    color: #0f7a4c;
    border: 1px solid rgba(30, 196, 122, .3);
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: 28px;
    box-shadow: 0 4px 14px rgba(30, 196, 122, .12);
}
.v7-app-badge .blink {
    width: 8px; height: 8px;
    background: #1ec47a;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(30, 196, 122, .7);
    animation: v7pulse 1.6s infinite;
}

/* ── Inside the room (4 columns) ── */
.v7-inside {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
}
@media (max-width: 900px) { .v7-inside { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .v7-inside { grid-template-columns: 1fr; } }
.v7-room {
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 18px;
    padding: 30px 26px 28px;
    transition: transform .35s var(--easing), border-color .25s, box-shadow .25s;
    box-shadow: 0 4px 14px rgba(14,14,16,.04);
}
.v7-room:hover { transform: translateY(-4px); border-color: var(--v7-accent); box-shadow: 0 16px 32px rgba(14,14,16,.08); }
.v7-room .icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: rgba(230, 52, 34, .1);
    color: var(--v7-accent);
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 18px;
}
.v7-room h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -.02em;
    color: var(--v7-text);
    margin-bottom: 10px;
}
.v7-room p {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--v7-text-2);
}

/* ── Recent wins (DM-style cards) ── */
.v7-wins {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
@media (max-width: 900px) { .v7-wins { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .v7-wins { grid-template-columns: 1fr; } }
.v7-win {
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 18px;
    padding: 26px;
    transition: transform .35s var(--easing), border-color .25s, box-shadow .25s;
    box-shadow: 0 4px 14px rgba(14,14,16,.04);
}
.v7-win:hover { transform: translateY(-4px); border-color: var(--v7-accent); box-shadow: 0 16px 32px rgba(14,14,16,.08); }
.v7-win .head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.v7-win .badge {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1ec47a, #0f7a4c);
    color: #fff;
    display: grid;
    place-items: center;
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 14px;
}
.v7-win .name {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--v7-text);
    line-height: 1.2;
}
.v7-win .name span {
    display: block;
    font-size: 11px;
    color: var(--v7-text-mute);
    font-weight: 500;
    margin-top: 2px;
    letter-spacing: .02em;
}
.v7-win .amount {
    margin-left: auto;
    padding: 6px 12px;
    background: rgba(30, 196, 122, .12);
    color: #0f7a4c;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.v7-win blockquote {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--v7-text-2);
    margin-bottom: 0;
}
.v7-win blockquote::before {
    content: '"';
    color: var(--v7-accent);
    font-size: 24px;
    line-height: 0;
    vertical-align: -4px;
    margin-right: 4px;
}

/* ── Members from (city/country strip) ── */
.v7-geo {
    padding: 60px 32px;
    background: var(--v7-bg);
    border-top: 1px solid var(--v7-line);
    border-bottom: 1px solid var(--v7-line);
}
.v7-geo-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 40px;
    align-items: center;
}
@media (max-width: 700px) { .v7-geo-inner { grid-template-columns: 1fr; } }
.v7-geo-label {
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--v7-text);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.v7-geo-label span {
    display: block;
    color: var(--v7-text-mute);
    font-weight: 500;
    font-size: 12px;
    margin-top: 4px;
    text-transform: none;
    letter-spacing: 0;
}
.v7-geo-cities {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}
.v7-geo-cities span {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 14px;
    color: var(--v7-text-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.v7-geo-cities span::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--v7-accent);
}

/* ── Application form ── */
.v7-apply {
    padding: 140px 32px;
    background: var(--v7-bg-alt);
    border-top: 1px solid var(--v7-line);
}
.v7-apply-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 80px;
    align-items: start;
}
@media (max-width: 900px) { .v7-apply-grid { grid-template-columns: 1fr; gap: 40px; } }

.v7-apply-left h2 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.0;
    letter-spacing: -.035em;
    color: var(--v7-text);
    margin-top: 18px;
    margin-bottom: 24px;
}
.v7-apply-left h2 .accent { color: var(--v7-accent); }
.v7-apply-left p {
    font-family: 'Inter', sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--v7-text-2);
    margin-bottom: 16px;
}
.v7-apply-left p b { color: var(--v7-text); font-weight: 600; }
.v7-apply-meta {
    margin-top: 32px;
    padding: 22px 26px;
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(14,14,16,.04);
}
.v7-apply-meta .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
}
.v7-apply-meta .row .l { color: var(--v7-text-mute); font-weight: 500; }
.v7-apply-meta .row .v { color: var(--v7-text); font-weight: 700; }
.v7-apply-meta .row.live .v { color: #0f7a4c; display: inline-flex; align-items: center; gap: 6px; }
.v7-apply-meta .row.live .v::before {
    content: '';
    width: 7px; height: 7px;
    background: #1ec47a;
    border-radius: 50%;
    animation: v7pulse 1.6s infinite;
}

.v7-apply-form {
    background: var(--v7-bg-card);
    border: 1px solid var(--v7-line);
    border-radius: 22px;
    padding: 36px;
    box-shadow: 0 12px 36px rgba(14,14,16,.08);
}
.v7-apply-form h3 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--v7-text);
    margin-bottom: 4px;
    letter-spacing: -.02em;
}
.v7-apply-form .sub {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: var(--v7-text-mute);
    margin-bottom: 26px;
}
.v7-field {
    margin-bottom: 18px;
}
.v7-field label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--v7-text);
    margin-bottom: 6px;
    letter-spacing: -.005em;
}
.v7-field input,
.v7-field select,
.v7-field textarea {
    width: 100%;
    padding: 12px 16px;
    background: var(--v7-bg);
    border: 1px solid var(--v7-line);
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--v7-text);
    outline: none;
    transition: border-color .2s, background .2s;
}
.v7-field input:focus,
.v7-field select:focus,
.v7-field textarea:focus { border-color: var(--v7-text); background: var(--v7-bg-card); }
.v7-field textarea { resize: vertical; min-height: 96px; }
.v7-field .hint {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--v7-text-mute);
    margin-top: 5px;
}
.v7-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 540px) { .v7-field-row { grid-template-columns: 1fr; } }
.v7-apply-submit {
    width: 100%;
    margin-top: 10px;
    padding: 16px;
    background: var(--v7-text);
    color: var(--v7-bg);
    border: none;
    border-radius: 100px;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: background .25s, transform .25s var(--easing);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.v7-apply-submit:hover {
    background: var(--v7-accent);
    transform: translateY(-1px);
}
.v7-apply-form .note {
    margin-top: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: var(--v7-text-mute);
    text-align: center;
}
.v7-apply-form .note b { color: var(--v7-text); }