/* ================================================================
   ECOKURE DESIGN SYSTEM v2
   Display: Space Grotesk  ·  Body: Inter  ·  Grid: 8px
   Brand: #00b890 (green)  ·  Accent: #1877f2 (blue)
================================================================ */

/* ─── SELF-HOSTED FONTS ───────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    src: url('/static/fonts/inter.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Space Grotesk';
    src: url('/static/fonts/space-grotesk.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

/* ─── TOKENS ──────────────────────────────────────────────── */
:root {
    /* Page handles its own theming — discourages browser "force dark mode" inversion */
    color-scheme: light dark;

    --brand:         #00b890;
    --brand-mid:     #00a07d;
    --brand-dark:    #008f6e;
    --brand-subtle:  #e6f9f5;
    --brand-border:  #a7ead8;

    --blue:          #1877f2;
    --blue-mid:      #0f6de0;
    --blue-subtle:   #e7f3ff;
    --blue-border:   #b3d4f8;

    /* Futuristic tier colors */
    --tier-free:     #1e9eff;
    --tier-bronze:   #cd7f32;
    --tier-silver:   #c7ccd1;
    --tier-gold:     #f0b90b;
    --tier-platinum: #b9a6ff;

    /* Futuristic accents */
    --neon-cyan:     #00ffff;
    --neon-magenta:  #ff00ff;
    --neon-green:    #00ff88;

    --bg:            #f0f2f5;
    --surface:       #ffffff;
    --surface-2:     #f7f8fa;
    --surface-hover: #f0f2f5;

    --border:        #dde1e7;
    --border-light:  #e8eaed;

    --text-1:        #1c1e21;
    --text-2:        #65676b;
    --text-3:        #90949c;

    --navy:          #070d1a;
    --navy-2:        #0e1b2d;
    --navy-3:        #162840;

    /* Spacing — tightened for a denser, more readable rhythm */
    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:18px;
    --s6:22px; --s8:28px; --s10:36px; --s12:42px;
    --s16:54px; --s20:62px; --s24:74px;

    /* Radius */
    --r-sm:6px; --r:8px; --r-md:12px; --r-lg:16px;
    --r-xl:20px; --r-2xl:24px; --r-full:9999px;

    /* Shadows — layered & soft, with a touch of brand-tinted ambient depth */
    --sh-xs:  0 1px 2px rgba(16,24,40,.06);
    --sh-sm:  0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
    --sh:     0 2px 4px rgba(16,24,40,.05), 0 4px 12px rgba(16,24,40,.08);
    --sh-md:  0 4px 8px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.09);
    --sh-lg:  0 8px 16px rgba(16,24,40,.06), 0 16px 48px rgba(16,24,40,.11);
    --sh-xl:  0 12px 24px rgba(16,24,40,.07), 0 28px 72px rgba(16,24,40,.14);
    --sh-brand: 0 8px 30px rgba(0,184,144,.28);

    /* Futuristic glow shadows */
    --glow-brand: 0 0 20px rgba(0,184,144,.25), 0 0 40px rgba(0,184,144,.12);
    --glow-blue: 0 0 20px rgba(24,119,242,.25), 0 0 40px rgba(24,119,242,.12);
    --glow-neon: 0 0 15px rgba(0,255,136,.3);

    --font:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono:    'SF Mono', 'Fira Code', 'Courier New', monospace;

    /* Signature easing — used site-wide for a cohesive, premium feel */
    --ease:      cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out:  cubic-bezier(0.33, 1, 0.68, 1);
    --tx:    180ms var(--ease);
    --tx-md: 320ms var(--ease);
    --tx-lg: 520ms var(--ease);
    --max-w: 1240px;
}

/* ─── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-padding-top: 84px;
}
body {
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-1);
    background: var(--surface);
    overflow-x: hidden;
    /* Refined Inter glyphs: single-storey a, slashed zero, tabular-friendly */
    font-feature-settings: 'cv11', 'ss01', 'cv02';
    font-optical-sizing: auto;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
ul, ol { list-style: none; }
h1, h2, h3, h4 {
    font-family: var(--font-display);
    text-wrap: balance;          /* premium heading line-breaks */
    font-feature-settings: 'ss01';
}
p { text-wrap: pretty; }         /* avoids orphans/widows */

/* Premium selection + focus + scrollbar — the small tells of a crafted site */
::selection { background: rgba(0,184,144,.22); color: var(--text-1); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,130,145,.35); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,130,145,.55); background-clip: content-box; }

/* ─── SCROLL PROGRESS BAR ─────────────────────────────────── */
.scroll-bar {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--brand), var(--blue));
    z-index: 1001;
    pointer-events: none;
    transition: width 80ms linear;
    box-shadow: 0 0 8px rgba(0,184,144,.6);
}

/* ─── SWE-BENCH PUBLIC LEADERBOARD ────────────────────────── */
.swe-board { max-width: 720px; margin: var(--s10) auto 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-xl); padding: var(--s7) var(--s8); }
.swe-board-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); margin-bottom: var(--s5); flex-wrap: wrap; }
.swe-board-title { font-weight: 700; font-size: 1rem; }
.swe-board-asof { font-size: .78rem; color: var(--text-3); }
.swe-board-list { display: flex; flex-direction: column; gap: var(--s3); }
.swe-row { display: grid; grid-template-columns: minmax(150px, 1.3fr) 2fr auto; align-items: center; gap: var(--s4); }
.swe-row-name { font-size: .9rem; font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.swe-badge { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: var(--r-full); white-space: nowrap; }
.swe-badge-verified { background: rgba(0,184,144,.12); color: var(--brand-dark); border: 1px solid var(--brand-border); }
.swe-badge-pending { background: rgba(245,158,11,.14); color: #b45309; border: 1px solid rgba(245,158,11,.35); }
.swe-row-bar { height: 8px; border-radius: var(--r-full); background: var(--border-light); overflow: hidden; }
.swe-row-fill { display: block; height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--brand), var(--blue)); }
.swe-row-pending .swe-row-fill { background: repeating-linear-gradient(45deg, rgba(245,158,11,.75) 0, rgba(245,158,11,.75) 6px, rgba(245,158,11,.4) 6px, rgba(245,158,11,.4) 12px); }
.swe-badge-none { background: rgba(150,160,170,.12); color: #8a929c; border: 1px solid rgba(150,160,170,.3); }
.swe-row-leading .swe-row-fill { background: linear-gradient(90deg, var(--brand), #38d9a9); }
.swe-row-leading .swe-row-score { color: var(--brand-dark); font-weight: 800; }
.swe-row-score { font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.swe-board-foot { margin-top: var(--s5); font-size: .76rem; color: var(--text-3); line-height: 1.55; }
.swe-board-foot a { color: var(--brand-dark); font-weight: 600; }
@media (max-width: 560px) { .swe-row { grid-template-columns: 1fr auto; } .swe-row-bar { display: none; } }

/* ─── SECTION RAIL (right-side section navigator) ─────────── */
.section-rail {
    position: fixed;
    top: 50%; right: 20px;
    transform: translateY(-50%);
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0;
}
.section-rail::before {
    content: '';
    position: absolute;
    top: 12px; bottom: 12px;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, rgba(0,184,144,.2), rgba(58,160,255,.2));
    border-radius: 2px;
    z-index: -1;
}
.rail-dot {
    position: relative;
    width: 10px; height: 10px;
    margin: 8px 0;
    padding: 0;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--brand-border);
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    transition: transform .3s var(--ease), background .3s var(--ease),
                border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.rail-dot:hover { transform: scale(1.35); border-color: var(--brand); }
.rail-dot.active {
    background: linear-gradient(135deg, var(--brand), var(--blue));
    border-color: transparent;
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(0,184,144,.14), 0 0 10px rgba(0,184,144,.5);
}
.rail-label {
    position: absolute;
    right: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    white-space: nowrap;
    background: var(--navy);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    box-shadow: var(--sh-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.rail-label::after {
    content: '';
    position: absolute;
    left: 100%; top: 50%;
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-left-color: var(--navy);
}
.rail-dot:hover .rail-label,
.rail-dot.active .rail-label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1280px) { .section-rail { display: none; } }

/* ─── STARFIELD ───────────────────────────────────────────── */
#starfield {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}
body.hero-dark #starfield { opacity: 1; }

/* ─── LAYOUT ──────────────────────────────────────────────── */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--s6);
}
/* Narrower content column for comfortable reading + tighter sections */
.container-narrow { max-width: 920px; margin: 0 auto; padding: 0 var(--s6); }
.section { padding: clamp(48px, 5.5vw, 80px) 0; position: relative; z-index: 1; }
.section-white { background: var(--surface); }
.section-gray  { background: var(--bg); }

/* Panel contrast: cards on a WHITE section get a light-gray fill so they
   stand out (mirrors how white cards pop on gray sections). Highlighted /
   gradient / dark cards keep their own look. */
.section-white :is(
    .step, .pcard, .tech-card, .feature-card, .blog-card, .glm-lane,
    .bench-card, .sp-tier, .tl-content, .eco-card, .value-card, .ps-card,
    .rm-sidebar-card, .cs-notify-wrap, .wall-card, .econ-card,
    .scale-card, .ent-card, .j3-strip-card, .j3-ach-card, .sm-demo-card,
    .calc-card, .calc-result-card
):not(.bench-card-perfect) {
    background: var(--bg);
}

/* ─── NAV ─────────────────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 68px;
    z-index: 900;
    background: rgba(255,255,255,0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: background var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md);
}
.nav.scrolled {
    background: rgba(255,255,255,0.82);
    border-bottom-color: var(--border-light);
    box-shadow: 0 1px 0 rgba(16,24,40,.04), 0 8px 32px rgba(16,24,40,.06);
}

.nav-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--s6);
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--s8);
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--s3);
    text-decoration: none;
    margin-right: auto;
    flex-shrink: 0;
}
.nav-logo-orb {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--brand), var(--blue));
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 18px;
    box-shadow: 0 2px 10px rgba(0,184,144,.28);
    flex-shrink: 0;
    transition: transform var(--tx), box-shadow var(--tx);
}
.nav-logo:hover .nav-logo-orb { transform: rotate(-8deg) scale(1.05); box-shadow: 0 4px 16px rgba(0,184,144,.4); }

.nav-logo-text {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.4px;
    background: linear-gradient(135deg, var(--brand-dark), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-links { display: flex; align-items: center; gap: var(--s1); position: relative; }

.nav-link,
.nav-labs-toggle {
    display: block;
    padding: 7px 14px;
    border-radius: var(--r-sm);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-2);
    transition: background var(--tx), color var(--tx);
    position: relative;
}
.nav-link:hover,
.nav-link.active,
.nav-labs.open .nav-labs-toggle,
.nav-labs-toggle:hover,
.nav-labs-toggle:focus-visible {
    background: var(--surface-hover);
    color: var(--text-1);
}

.nav-labs {
    position: relative;
}

.nav-labs-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

.nav-labs-toggle svg {
    transition: transform var(--tx);
}

.nav-labs.open .nav-labs-toggle svg {
    transform: rotate(180deg);
}

.nav-labs-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: min(340px, calc(100vw - 32px));
    max-height: min(440px, calc(100vh - 110px));
    overflow-y: auto;
    padding: 8px;
    border: 1px solid rgba(0, 184, 144, .18);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 24px 70px rgba(7, 13, 26, .18), 0 0 0 1px rgba(255,255,255,.5) inset;
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--tx), transform var(--tx);
}

.nav-labs-menu::-webkit-scrollbar {
    width: 8px;
}

.nav-labs-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 184, 144, .35);
    border-radius: 999px;
}

.nav-labs.open .nav-labs-menu,
.nav-labs:focus-within .nav-labs-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.nav-labs-menu a {
    display: grid;
    gap: 3px;
    padding: 11px 12px;
    border-radius: 10px;
    color: var(--text-1);
    text-decoration: none;
    transition: background var(--tx), transform var(--tx);
}

.nav-labs-menu a:hover,
.nav-labs-menu a:focus-visible {
    background: rgba(0, 184, 144, .1);
    transform: translateX(2px);
}

.labs-menu-name {
    font-size: .9rem;
    font-weight: 700;
}

.labs-menu-meta {
    color: var(--text-3);
    font-size: .74rem;
}

.mobile-menu-label {
    color: rgba(154, 245, 192, .75);
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-top: var(--s4);
}

.mobile-overlay.open {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
/* One shared underline that glides between links (positioned by JS) */
.nav-indicator {
    position: absolute;
    bottom: 3px; left: 0; width: 0;
    height: 2px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--brand), var(--blue));
    box-shadow: 0 0 6px rgba(0,184,144,.55);
    opacity: 0;
    pointer-events: none;
    transition: left .35s var(--ease), width .35s var(--ease), opacity .3s var(--ease);
}
.nav-indicator.show { opacity: 1; }

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: var(--brand);
    color: white;
    border-radius: var(--r-full);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(0,184,144,.3);
    transition: background var(--tx), transform var(--tx), box-shadow var(--tx);
    flex-shrink: 0;
}
.nav-cta:hover { background: var(--brand-mid); transform: translateY(-1px); box-shadow: 0 5px 18px rgba(0,184,144,.42); }
.nav-cta-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.7);
    animation: blip 2s infinite;
}
/* Merch store icon button (sits to the right of Launch) */
.nav-merch {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin-left: 10px;
    border-radius: var(--r-full); font-size: 1.05rem; line-height: 1;
    text-decoration: none; flex-shrink: 0;
    background: rgba(0,184,144,.1);
    border: 1px solid var(--brand-border);
    transition: background var(--tx), transform var(--tx), box-shadow var(--tx);
}
.nav-merch:hover { background: rgba(0,184,144,.2); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,184,144,.28); }
.nav-merch.active { background: var(--brand); color: white; box-shadow: 0 4px 16px rgba(0,184,144,.34); }

.nav-hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    border-radius: var(--r-sm);
    transition: background var(--tx);
}
.nav-hamburger:hover { background: var(--surface-hover); }
.nav-hamburger span { display: block; width: 20px; height: 2px; background: var(--text-2); border-radius: 1px; transition: transform var(--tx-md), opacity var(--tx-md); }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Launch Week ribbon */
.launch-ribbon {
    position: fixed;
    top: 68px; left: 0; right: 0;
    z-index: 790;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s3);
    padding: 8px var(--s6);
    text-decoration: none;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(0,184,144,.95), rgba(24,119,242,.95)),
        var(--brand);
    box-shadow: 0 8px 24px rgba(16,24,40,.16);
}
.launch-ribbon-kicker {
    padding: 3px 9px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: var(--r-full);
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    white-space: nowrap;
}
.launch-ribbon-copy {
    font-size: .86rem;
    font-weight: 650;
    text-align: center;
}
.launch-ribbon-arrow { font-weight: 900; }
body.has-launch-ribbon .hero { padding-top: 110px; }
body.has-launch-ribbon .page-hero { padding-top: calc(110px + var(--s20)); }
body.has-launch-ribbon .j3-page-hero { padding-top: 110px; }

/* Full-screen mobile overlay */
.mobile-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(20px);
    z-index: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tx-md);
}
.mobile-overlay.open { opacity: 1; pointer-events: all; }
.mobile-overlay-inner { text-align: center; }
.mobile-overlay-inner ul li { margin-bottom: var(--s6); }
.mobile-overlay-inner ul li a {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-1);
    text-decoration: none;
    transition: color var(--tx);
}
.mobile-overlay-inner ul li a:hover { color: var(--brand); }
.mobile-launch-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: var(--s8);
    background: var(--brand);
    color: white;
    padding: 14px 32px;
    border-radius: var(--r-full);
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,184,144,.3);
}

/* ─── MAGNETIC BUTTON ─────────────────────────────────────── */
.mag-btn { position: relative; overflow: hidden; }

/* ─── HERO ────────────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    padding-top: 68px;
    display: flex;
    align-items: center;
    /* Deep-space: real Hubble deep-field photo, darkened, with brand-tinted
       nebula clouds layered on top (CSS starfield sits above via .hero-mesh). */
    background:
        radial-gradient(700px 520px at 60% 50%, rgba(0,184,144,.06), transparent 60%),
        linear-gradient(105deg, rgba(3,5,12,.85) 0%, rgba(3,5,12,.55) 38%, rgba(5,9,18,.22) 72%, rgba(5,9,18,.12) 100%),
        url('/static/images/wp9116447.jpg') center / cover no-repeat,
        #03050c;
    overflow: hidden;
    z-index: 1;
}
/* ─── Reusable tiled CSS starfield ───────────────────────────
   Applied to every dark "mesh" section so the deep-space look carries
   across the whole site (self-hosted, no image). Two layers at different
   scales give parallax depth, and each sits behind its section's content.
   Covers: homepage hero + Jarvi3 hero (shared .hero-mesh), the community
   fund (.campaign-mesh), and the Ecosystem/dark page heroes (.page-hero-dark). */
.hero-mesh::before, .hero-mesh::after,
.campaign-mesh::before, .campaign-mesh::after,
.page-hero-dark::before, .page-hero-dark::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.hero-mesh::before, .campaign-mesh::before, .page-hero-dark::before {
    background-image:
        radial-gradient(2px 2px at 24px 32px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 130px 88px, rgba(255,255,255,.85), transparent),
        radial-gradient(2px 2px at 205px 168px, #ffffff, transparent),
        radial-gradient(1.5px 1.5px at 84px 210px, rgba(255,255,255,.8), transparent),
        radial-gradient(2px 2px at 268px 58px, rgba(190,235,255,.95), transparent),
        radial-gradient(1.5px 1.5px at 318px 232px, rgba(255,255,255,.8), transparent),
        radial-gradient(1.5px 1.5px at 50px 150px, rgba(210,225,255,.85), transparent),
        radial-gradient(2px 2px at 175px 20px, #ffffff, transparent);
    background-size: 300px 260px;
    animation: starTwinkle 4.5s ease-in-out infinite;
    opacity: .9;
}
.hero-mesh::after, .campaign-mesh::after, .page-hero-dark::after {
    background-image:
        radial-gradient(1px 1px at 60px 70px, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 160px 130px, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 110px 200px, rgba(180,220,255,.6), transparent),
        radial-gradient(1px 1px at 30px 120px, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 200px 40px, rgba(255,255,255,.5), transparent);
    background-size: 220px 200px;
    animation: starTwinkle 6.5s ease-in-out infinite reverse;
    opacity: .7;
}
@keyframes starTwinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .hero-mesh::before, .hero-mesh::after,
    .campaign-mesh::before, .campaign-mesh::after,
    .page-hero-dark::before, .page-hero-dark::after { animation: none; }
}

.hero-mesh {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.mesh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    animation: meshDrift linear infinite alternate;
}
.mesh-blob.mb1 { width: 600px; height: 500px; top: -100px; left: -150px; background: var(--brand); opacity: .06; animation-duration: 16s; }
.mesh-blob.mb2 { width: 500px; height: 450px; bottom: -100px; right: 10%; background: var(--blue); opacity: .055; animation-duration: 22s; animation-direction: alternate-reverse; }
.mesh-blob.mb3 { width: 350px; height: 300px; top: 30%; right: -50px; background: #38d9a9; opacity: .045; animation-duration: 13s; }

.hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,184,144,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,184,144,.03) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
}

/* Earthy divider band — green nature break between dark sections */
.earth-divider {
    position: relative;
    height: clamp(190px, 27vh, 320px);
    background-image: url('/static/images/photos/nat-forest.webp');
    background-size: cover;
    background-position: center 42%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.earth-divider-overlay {
    position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(180deg, #081120 0%, transparent 26%, transparent 68%, #041410 100%),
        linear-gradient(180deg, rgba(4,12,9,.32), rgba(4,12,9,.42));
}
.earth-divider-text {
    position: relative; z-index: 1; margin: 0;
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(1.3rem, 3vw, 2.1rem); letter-spacing: -.5px;
    color: #fff; text-align: center; padding: 0 var(--s5);
    text-shadow: 0 2px 22px rgba(0,0,0,.55);
}

/* Earth */
.earth-scene {
    position: absolute;
    right: 4%;
    top: 50%;
    transform: translateY(-50%);
    width: 660px;
    height: 660px;
    pointer-events: none;
    transition: transform 0.1s ease-out;
    z-index: 2; /* sit above the star layers so stars never land on the planet */
}
.earth-atmo {
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 48%, rgba(0,184,144,.04) 52%, rgba(0,184,144,.1) 60%, transparent 68%);
}
.earth-globe {
    position: absolute;
    inset: 68px;
    border-radius: 50%;
    overflow: hidden;
    background: #07182b;   /* deep-ocean fallback before texture loads */
    box-shadow:
        0 0 0 20px rgba(0,184,144,.05),
        0 0 0 40px rgba(0,184,144,.025),
        0 0 90px rgba(0,184,144,.22),
        0 0 180px rgba(24,119,242,.14),
        inset 0 0 60px rgba(0,0,0,.4);
    animation: earthGlow 8s ease-in-out infinite;
}
/* Rotating NASA Blue Marble texture (equirectangular, seamless loop) */
.earth-globe::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 400%;                              /* holds two undistorted 2:1 copies */
    background-image: url('/static/images/earth-map.webp');
    background-repeat: repeat-x;
    background-size: 50% 100%;                /* each copy = 200% globe width → true 2:1 */
    animation: earthSpin 90s linear infinite;
    z-index: 0;
    filter: saturate(1.08) brightness(1.04);
}
/* Spherical shading: sunlit highlight + terminator shadow + edge vignette */
.earth-globe::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    z-index: 2;
    pointer-events: none;
    background:
        radial-gradient(circle at 30% 26%, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 18%, transparent 40%),
        radial-gradient(circle at 68% 74%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.22) 38%, transparent 62%),
        radial-gradient(circle at 50% 50%, transparent 60%, rgba(0,20,40,.55) 88%, rgba(0,10,25,.8) 100%);
}
@keyframes earthSpin { to { transform: translateX(-50%); } }

/* Drifting cloud wisps over the surface (z between texture and shading) */
.earth-cloud { position: absolute; z-index: 1; background: rgba(255,255,255,.22); border-radius: 50%; filter: blur(13px); }
.earth-cloud.ec1 { width: 46%; height: 13%; top: 24%; left: 14%; animation: cloudA 14s ease-in-out infinite; }
.earth-cloud.ec2 { width: 32%; height: 10%; bottom: 32%; right: 16%; animation: cloudA 17s ease-in-out infinite reverse; }
.earth-cloud.ec3 { width: 24%; height: 9%;  top: 56%; left: 30%; animation: cloudA 12s ease-in-out infinite 2s; }
.earth-shine, .earth-continent { display: none; }   /* replaced by real texture + shading */

.earth-orbit {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotateX(72deg);
    border-radius: 50%;
    border: 1px solid rgba(0,184,144,.16);
    animation: orbitSpin linear infinite;
}
.earth-orbit.eo1 { width: 340px; height: 340px; animation-duration: 13s; }
.earth-orbit.eo2 { width: 450px; height: 450px; border-color: rgba(24,119,242,.1); animation-duration: 22s; animation-direction: reverse; }
.earth-orbit.eo3 { width: 540px; height: 540px; border-color: rgba(255,255,255,.04); animation-duration: 35s; }

.orbit-sat { position: absolute; width: 9px; height: 9px; border-radius: 50%; top: -4px; left: 50%; transform: translateX(-50%); }
.orbit-sat.green { background: var(--brand); box-shadow: 0 0 10px var(--brand); }
.orbit-sat.blue  { background: #63b3ed;    box-shadow: 0 0 10px #63b3ed; }
.orbit-sat.white { background: rgba(255,255,255,.6); box-shadow: 0 0 6px rgba(255,255,255,.4); }

/* Floating stat cards */
.hfc {
    position: absolute;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-lg);
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    box-shadow: 0 8px 32px rgba(0,0,0,.3);
    animation: hfcFloat ease-in-out infinite;
    pointer-events: auto; /* clickable even though the earth scene is decorative */
    text-decoration: none; cursor: pointer;
    transition: border-color var(--tx), box-shadow var(--tx), background var(--tx);
}
.hfc:hover { border-color: rgba(0,184,144,.5); background: rgba(0,184,144,.14); box-shadow: 0 12px 38px rgba(0,0,0,.4), 0 0 18px rgba(0,184,144,.3); }
.hfc.hfc-1 { top: 9%; left: 24%; animation-duration: 5s; animation-delay: 0s; }
.hfc.hfc-2 { bottom: 10%; left: 30%; animation-duration: 6s; animation-delay: 1.5s; }
.hfc.hfc-3 { top: 52%; right: 1%; animation-duration: 4.5s; animation-delay: 0.8s; }
.hfc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.hfc-dot-green { background: var(--brand); box-shadow: 0 0 6px var(--brand); animation: blip 1.5s infinite; }
.hfc-label { font-size: 0.68rem; color: rgba(255,255,255,.45); font-weight: 500; line-height: 1; margin-bottom: 2px; }
.hfc-val { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,.9); line-height: 1; }
.hfc-val.hfc-green { color: #38d9a9; }
.hfc-spark { font-size: 0.7rem; color: rgba(0,184,144,.7); letter-spacing: 1px; }
.hfc-emoji { font-size: 1.1rem; }

/* ─── Orbiting satellites around the globe (clickable) ─────── */
.sat-system {
    position: absolute; right: 4%; top: 50%; transform: translateY(-50%);
    width: 660px; height: 660px; z-index: 12; pointer-events: none;
}
.sat-orbit { position: absolute; border-radius: 50%; border: 1px dashed rgba(130,200,255,.13); }
.sat-track { position: absolute; border-radius: 50%; animation: satSpin linear infinite; }
/* orbits ring the OUTSIDE of the globe; the high z-index keeps every satellite
   clickable even when it passes over the headline (pointer-events stay off the
   empty orbit area, so text underneath is still selectable) */
.sat-orbit-1, .sat-track-1 { inset: -18px; }
.sat-orbit-2, .sat-track-2 { inset: 12px; }
.sat-orbit-3, .sat-track-3 { inset: 48px; }
.sat-track-1 { animation-duration: 22s; }
.sat-track-2 { animation-duration: 30s; animation-direction: reverse; }
.sat-track-3 { animation-duration: 27s; }
.sat-pos {
    position: absolute; top: -21px; left: 50%; width: 42px; height: 42px; margin-left: -21px;
    animation: satSpin linear infinite;
}
.sat-track-1 .sat-pos { animation-duration: 22s; animation-direction: reverse; }
.sat-track-2 .sat-pos { animation-duration: 30s; }
.sat-track-3 .sat-pos { animation-duration: 27s; animation-direction: reverse; }
.sat {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; border-radius: 50%;
    font-size: 1.15rem; text-decoration: none; pointer-events: auto; cursor: pointer;
    background: rgba(8,18,32,.72); border: 1px solid rgba(130,200,255,.45);
    box-shadow: 0 0 14px rgba(0,184,144,.35);
    transition: transform .2s var(--ease), box-shadow .2s, background .2s;
}
.sat:hover, .sat:focus-visible {
    transform: scale(1.22); outline: none;
    background: rgba(0,184,144,.28); border-color: rgba(0,184,144,.7);
    box-shadow: 0 0 22px rgba(0,184,144,.7);
}
/* pause orbits while hovering/focusing so the satellites are easy to click */
.sat-system:hover .sat-track, .sat-system:hover .sat-pos,
.sat-system:focus-within .sat-track, .sat-system:focus-within .sat-pos { animation-play-state: paused; }
@keyframes satSpin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) { .sat-track, .sat-pos { animation: none; } }

/* ─── Satellite vision section (destination) ──────────────── */
.section-sats {
    position: relative; overflow: hidden;
    background: linear-gradient(160deg, #03050c 0%, #070f1e 55%, #050b14 100%);
    padding: var(--s24) 0;
}
.sats-stars {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .7;
    background-image:
        radial-gradient(1.5px 1.5px at 24px 32px, #fff, transparent),
        radial-gradient(1px 1px at 130px 88px, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 205px 168px, #fff, transparent),
        radial-gradient(1px 1px at 84px 210px, rgba(190,235,255,.8), transparent),
        radial-gradient(1px 1px at 268px 58px, rgba(255,255,255,.7), transparent);
    background-size: 300px 260px;
    animation: starTwinkle 5s ease-in-out infinite;
}
.section-sats .container { position: relative; z-index: 1; }
.sats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); margin-top: var(--s12); }
.sat-card {
    position: relative; overflow: hidden;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(130,200,255,.16);
    border-radius: var(--r-xl); padding: var(--s8);
    transition: transform var(--tx), border-color var(--tx), box-shadow var(--tx), background var(--tx);
}
.sat-card-green { --sat-accent: #00b890; }
.sat-card-teal  { --sat-accent: #0ca678; }
.sat-card-cyan  { --sat-accent: #76e4f7; }
.sat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--sat-accent, #00b890); opacity: .85;
}
.sat-card:hover {
    transform: translateY(-6px);
    border-color: color-mix(in srgb, var(--sat-accent, #00b890) 55%, transparent);
    box-shadow: 0 18px 44px rgba(0,0,0,.4);
    background: rgba(255,255,255,.06);
}
.sat-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s5); }
.sat-card-icon {
    font-size: 1.45rem; width: 50px; height: 50px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 13px;
    background: color-mix(in srgb, var(--sat-accent, #00b890) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--sat-accent, #00b890) 36%, transparent);
}
.sat-card-title { font-family: var(--font-display); font-size: 1.32rem; font-weight: 700; color: #fff; margin-bottom: var(--s3); }
.sat-card-desc { font-size: 0.95rem; color: rgba(255,255,255,.66); line-height: 1.65; }
.sat-card-tag {
    font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
    color: var(--sat-accent, #4dd9b8);
    background: color-mix(in srgb, var(--sat-accent, #00b890) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--sat-accent, #00b890) 40%, transparent);
    border-radius: var(--r-full); padding: 4px 11px;
}
.sat-card-list { list-style: none; margin: var(--s5) 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.sat-card-list li { position: relative; padding-left: 20px; font-size: 0.86rem; color: rgba(255,255,255,.62); }
.sat-card-list li::before { content: '›'; position: absolute; left: 4px; color: var(--sat-accent, #00b890); font-weight: 700; }
.sats-foot { text-align: center; margin: var(--s12) auto 0; font-size: 0.85rem; color: rgba(255,255,255,.45); max-width: 660px; }
@media (max-width: 880px) { .sats-grid { grid-template-columns: 1fr; } }

/* Hero content */
.hero-container { position: relative; z-index: 10; }
.hero-content { width: 620px; max-width: 100%; padding: var(--s20) 0; }
/* Staggered entrance on first load — adds polish without waiting for scroll */
@keyframes heroRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero-content > * { animation: heroRise 0.75s var(--ease) backwards; }
.hero-content > *:nth-child(1) { animation-delay: 0.10s; }
.hero-content > *:nth-child(2) { animation-delay: 0.20s; }
.hero-content > *:nth-child(3) { animation-delay: 0.32s; }
.hero-content > *:nth-child(4) { animation-delay: 0.44s; }
.hero-content > *:nth-child(5) { animation-delay: 0.56s; }
/* Shift hero text further left on desktop — scaled to available gutter so it never overflows. */
@media (min-width: 1080px) {
    .hero-content { margin-left: min(0px, calc((var(--max-w) - 100vw) * 0.32)); }
}

.eyebrow-tag {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    border-radius: var(--r-full);
    background: rgba(0,184,144,.1);
    border: 1px solid rgba(0,184,144,.24);
    color: #4dd9b8;
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: var(--s8);
}
.eyebrow-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 6px var(--brand);
    animation: blip 2s infinite;
}

.hero-h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.4rem);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -2.5px;
    color: #ffffff;
    margin-bottom: var(--s6);
    text-align: left;
    text-wrap: wrap;
}
/* Each heading line is its own block, so the cycling word's changing width
   is structurally isolated and can never reflow the lines above/below it. */
.hero-h1 .hl { display: block; }
#hero-cycle {
    display: inline-block;
    white-space: nowrap;      /* never wrap the longest word ("Transforming") */
    transition: opacity 0.28s ease, transform 0.28s ease;
    will-change: opacity, transform;
}

.text-grad-green {
    background: linear-gradient(135deg, var(--brand), #38d9a9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-grad-blue {
    background: linear-gradient(135deg, #63b3ed, #90cdf4);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.hero-sub { font-size: 1.12rem; color: rgba(255,255,255,.82); line-height: 1.75; max-width: 490px; margin-bottom: var(--s8); }

/* live ecosystem-impact ticker in the hero */
.hero-live {
    display: inline-flex; align-items: center; gap: 10px;
    margin-bottom: var(--s8); padding: 8px 15px;
    border-radius: var(--r-full);
    background: rgba(0,184,144,.08); border: 1px solid rgba(0,184,144,.22);
    font-size: 0.86rem; color: rgba(255,255,255,.82);
    backdrop-filter: blur(4px);
}
.hero-live strong { color: #4dd9b8; font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-live sub { font-size: .7em; }
.hl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px var(--brand); animation: blip 2s infinite; flex-shrink: 0; }
.hl-count { color: rgba(255,255,255,.45); }

/* Mini community-fund teaser in the hero (bottom-right, under the globe) */
.hero-fund {
    position: absolute; bottom: 7%; right: 3%; z-index: 6;
    width: 232px; padding: 14px 16px;
    background: rgba(8,18,32,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0,184,144,.3); border-radius: var(--r-lg);
    box-shadow: 0 12px 36px rgba(0,0,0,.4);
    text-decoration: none; color: #fff;
    transition: transform var(--tx), border-color var(--tx), box-shadow var(--tx);
}
.hero-fund:hover { transform: translateY(-3px); border-color: rgba(0,184,144,.6); box-shadow: 0 16px 44px rgba(0,0,0,.5), 0 0 18px rgba(0,184,144,.3); }
.hero-fund-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.hf-amount { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.hf-goal { font-size: .7rem; color: rgba(255,255,255,.55); line-height: 1.3; }
.hero-fund-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.hero-fund-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--brand), #38d9a9); min-width: 3px; }
.hero-fund-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: .66rem; color: rgba(255,255,255,.5); font-family: var(--font-mono); }
@media (max-width: 980px) { .hero-fund { display: none; } }
.hero-actions { display: flex; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s12); }
.hero-stats { display: flex; align-items: center; gap: var(--s8); }
.hero-stat { display: flex; flex-direction: column; gap: 2px; }
.stat-val {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--brand), #63b3ed);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1;
}
.stat-lbl { font-size: 0.76rem; color: rgba(255,255,255,.38); font-weight: 500; }
.hero-stat-div { width: 1px; height: 36px; background: rgba(255,255,255,.1); }
.hero-scroll-cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); opacity: .3; }
.scroll-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); animation: scrollBounce 2s ease-in-out infinite; margin: 0 auto; }

/* ─── MARQUEE TRUST STRIP ─────────────────────────────────── */
.trust-strip {
    background: var(--surface);
    border-bottom: 1px solid var(--border-light);
    padding: 14px 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.marquee-track {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.marquee-content {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: max-content;
    animation: marqueeScroll 28s linear infinite;
}
.trust-strip:hover .marquee-content { animation-play-state: paused; }
.marquee-content span { font-size: 0.82rem; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.mq-dot { color: var(--brand); opacity: .4; font-size: 1.2rem; line-height: 1; }

/* ─── STATS ROW ───────────────────────────────────────────── */
.stats-section {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 60%, #0a1e10 100%);
    padding: var(--s16) 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,184,144,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,184,144,.03) 1px, transparent 1px);
    background-size: 52px 52px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s4);
    position: relative;
    z-index: 2;
}
.stat-box {
    text-align: center;
    padding: var(--s8) var(--s6);
    border-radius: var(--r-xl);
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.03);
    transition: background var(--tx-md), border-color var(--tx-md);
}
.stat-box:hover { background: rgba(0,184,144,.06); border-color: rgba(0,184,144,.2); }
.stat-num {
    font-family: var(--font-display);
    font-size: clamp(2.8rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -2px;
    background: linear-gradient(135deg, #fff, rgba(255,255,255,.7));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1;
    margin-bottom: var(--s3);
}
.stat-name { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,.75); margin-bottom: 4px; }
.stat-desc { font-size: 0.76rem; color: rgba(255,255,255,.3); }

/* ─── SECTION HEADERS ─────────────────────────────────────── */
.sec-header { max-width: 600px; margin: 0 auto var(--s10); text-align: center; }
.label-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--brand-dark);
    background: var(--brand-subtle);
    border: 1px solid var(--brand-border);
    padding: 5px 14px;
    border-radius: var(--r-full);
    margin-bottom: var(--s5);
}
.label-chip::before {
    content: '';
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 3px rgba(0,184,144,.18);
}
.label-chip-light { color: #5fe3bd; background: rgba(0,184,144,.1); border-color: rgba(0,184,144,.22); }
.sec-h2 {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    font-weight: 700;
    letter-spacing: -1.6px;
    line-height: 1.08;
    color: var(--text-1);
    margin-bottom: var(--s5);
}
.sec-p { font-size: 1.08rem; color: var(--text-2); line-height: 1.7; max-width: 560px; letter-spacing: -.1px; }
.center-p { margin: 0 auto; text-align: center; }
.sec-footer-link { text-align: center; margin-top: var(--s12); }

/* ─── BUTTONS ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: 0.93rem;
    font-weight: 600;
    letter-spacing: -.1px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: transform var(--tx), box-shadow var(--tx), background var(--tx), filter var(--tx);
    white-space: nowrap;
    will-change: transform;
}
.btn svg { transition: transform var(--tx); }
.btn:hover { transform: translateY(-2px); }
.btn:hover svg { transform: translateX(2px); }
.btn:active { transform: translateY(0) scale(0.985); }

.btn-hero-primary {
    background: linear-gradient(135deg, #00c79b, var(--brand-mid));
    color: white;
    padding: 15px 30px;
    box-shadow: 0 6px 20px rgba(0,184,144,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-hero-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 30px rgba(0,184,144,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.btn-hero-secondary { background: rgba(255,255,255,.08); color: rgba(255,255,255,.88); border: 1px solid rgba(255,255,255,.18); padding: 14px 28px; backdrop-filter: blur(8px); }
.btn-hero-secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.38); }
.btn-jarvi3-primary { background: var(--brand); color: white; box-shadow: 0 4px 20px rgba(0,184,144,.35); padding: 13px 26px; }
.btn-jarvi3-primary:hover { background: var(--brand-mid); box-shadow: 0 8px 32px rgba(0,184,144,.5); }
.btn-outline-dark { background: transparent; color: var(--text-1); border: 1.5px solid var(--border); padding: 11px 24px; }
.btn-outline-dark:hover { border-color: var(--brand); color: var(--brand-dark); }
.btn-outline-brand { background: transparent; color: var(--brand-dark); border: 1.5px solid var(--brand-border); padding: 11px 24px; }
.btn-outline-brand:hover { background: var(--brand-subtle); }
.btn-cta-primary { background: var(--brand); color: white; box-shadow: 0 4px 20px rgba(0,184,144,.3); padding: 13px 28px; }
.btn-cta-primary:hover { background: var(--brand-mid); box-shadow: 0 8px 32px rgba(0,184,144,.45); }
.btn-cta-secondary { background: rgba(255,255,255,.08); color: rgba(255,255,255,.82); border: 1.5px solid rgba(255,255,255,.18); padding: 13px 28px; }
.btn-cta-secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); }

/* ─── BADGES ──────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: var(--r-full); font-size: 0.69rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.badge-live       { background: rgba(0,184,144,.1); color: var(--brand-dark); border: 1px solid rgba(0,184,144,.25); }
.badge-coming     { background: var(--blue-subtle); color: var(--blue-mid);   border: 1px solid var(--blue-border); }
.badge-dev        { background: #fff7ed;            color: #c05621;           border: 1px solid #fbd38d; }
.badge-live-glow  { background: rgba(0,184,144,.18); color: #38d9a9;          border: 1px solid rgba(0,184,144,.35); }

/* ─── SPLIT GRID ──────────────────────────────────────────── */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s20); align-items: center; }
.split-reverse { direction: rtl; }
.split-reverse > * { direction: ltr; }

/* ─── MISSION ─────────────────────────────────────────────── */
.pillars { display: flex; flex-direction: column; gap: var(--s6); margin-top: var(--s8); }
.pillar { display: flex; gap: var(--s4); align-items: flex-start; }
.pillar-icon { width: 42px; height: 42px; border-radius: var(--r-md); display: grid; place-items: center; font-size: 1.2rem; flex-shrink: 0; }
.pi-green { background: rgba(0,184,144,.1); }
.pi-blue  { background: rgba(24,119,242,.1); }
.pi-teal  { background: rgba(12,166,120,.09); }
.pillar-name { font-size: 0.95rem; font-weight: 600; margin-bottom: 3px; }
.pillar-desc { font-size: 0.87rem; color: var(--text-2); line-height: 1.55; }

.mission-card {
    background: linear-gradient(140deg, var(--blue-subtle) 0%, var(--brand-subtle) 100%);
    border-radius: var(--r-2xl);
    padding: var(--s10);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,184,144,.12);
    transition: transform var(--tx-md), box-shadow var(--tx-md);
}
.mission-card:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); }
.mc-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-dark); background: white; padding: 4px 12px; border-radius: var(--r-full); box-shadow: var(--sh-xs); margin-bottom: var(--s6); }
.mc-emoji { font-size: 3.5rem; margin-bottom: var(--s5); display: block; }
.mc-title { font-size: 1.35rem; font-weight: 700; margin-bottom: var(--s3); }
.mc-body  { font-size: 0.92rem; color: var(--text-2); line-height: 1.68; margin-bottom: var(--s8); }
.mc-stat { display: inline-flex; flex-direction: column; background: white; border-radius: var(--r-lg); padding: var(--s4) var(--s6); box-shadow: var(--sh-sm); }
.mc-stat-val { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--brand-dark); line-height: 1; }
.mc-stat-lbl { font-size: 0.75rem; color: var(--text-3); margin-top: 2px; }

/* ─── HOW IT WORKS ────────────────────────────────────────── */
.steps {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--s4);
    align-items: start;
}
.step {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: var(--s8);
    border: 1px solid var(--border);
    position: relative;
    transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(0,184,144,.25); }
.step-num {
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--brand);
    margin-bottom: var(--s4);
    text-transform: uppercase;
}
.step-icon {
    font-size: 1.7rem; line-height: 1; margin-bottom: var(--s5);
    width: 58px; height: 58px; border-radius: 16px;
    display: grid; place-items: center;
    background: linear-gradient(140deg, var(--brand-subtle), var(--blue-subtle));
    border: 1px solid var(--brand-border);
    box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform var(--tx-md), box-shadow var(--tx-md);
}
.step:hover .step-icon { transform: scale(1.08) rotate(-4deg); box-shadow: var(--sh-md); }
.step-name { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--s3); }
.step-desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.62; margin-bottom: var(--s5); }
.step-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; font-weight: 600; color: var(--brand-dark); text-decoration: none; transition: gap var(--tx); }
.step-link:hover { gap: 9px; }
.step-tag { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--text-3); background: var(--surface-2); padding: 3px 10px; border-radius: var(--r-full); border: 1px solid var(--border); }

.step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    align-self: center;
    padding: 0 var(--s1);
    color: var(--brand);
}
.conn-track {
    position: relative;
    width: 46px; height: 2px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, rgba(0,184,144,.12), rgba(0,184,144,.45) 45%, rgba(58,160,255,.32));
    overflow: hidden;
}
.conn-pulse {
    position: absolute;
    top: 0; left: -45%;
    width: 45%; height: 100%;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, transparent, #fff 45%, var(--brand) 60%, transparent);
    box-shadow: 0 0 8px 1px rgba(0,184,144,.6);
    animation: connFlow 2.6s var(--ease) infinite;
}
.conn-arrow {
    color: var(--brand);
    filter: drop-shadow(0 1px 3px rgba(0,184,144,.45));
    animation: connNudge 2.6s var(--ease) infinite;
}
@keyframes connFlow {
    0%   { left: -45%; opacity: 0; }
    15%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
@keyframes connNudge {
    0%, 55%, 100% { transform: translateX(0); }
    72%           { transform: translateX(4px); }
}
/* Whole row reacts when you hover the steps — energy speeds up + brightens */
.steps:hover .conn-pulse { animation-duration: 1.3s; }
.steps:hover .conn-arrow { animation-duration: 1.3s; filter: drop-shadow(0 0 6px rgba(0,184,144,.7)); }
.steps:hover .conn-track { background: linear-gradient(90deg, rgba(0,184,144,.2), rgba(0,184,144,.6) 45%, rgba(58,160,255,.45)); }
@media (prefers-reduced-motion: reduce) {
    .conn-pulse, .conn-arrow { animation: none; }
    .conn-pulse { left: 28%; opacity: .9; }
}

/* ─── JARVI3 SPOTLIGHT ────────────────────────────────────── */
.section-jarvi3 { background: var(--surface); padding: var(--s12) 0; }

.jarvi3-card {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #0b1e10 100%);
    border-radius: var(--r-2xl);
    padding: clamp(2rem, 5vw, 3.5rem);
    display: flex;
    align-items: center;
    gap: var(--s12);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0,184,144,.14);
    box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.14);
}
.jarvi3-bg-glow {
    position: absolute;
    top: -100px; left: -100px;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,184,144,.07) 0%, transparent 65%);
    pointer-events: none;
}
.jarvi3-content { flex: 1; min-width: 0; }

/* ─── Jarvi3 routing orb (the flagship visual) ────────────── */
.jarvi3-visual { position: relative; width: clamp(260px, 30vw, 360px); aspect-ratio: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.j3-orb {
    position: relative; z-index: 3;
    width: 46%; aspect-ratio: 1; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: clamp(2.2rem, 5vw, 3.4rem);
    background: radial-gradient(circle at 36% 30%, rgba(0,184,144,.5), rgba(8,18,32,.94));
    border: 1px solid rgba(0,184,144,.55);
    box-shadow: 0 0 60px rgba(0,184,144,.45), inset 0 0 30px rgba(0,184,144,.25);
    animation: j3OrbPulse 4s ease-in-out infinite;
}
@keyframes j3OrbPulse { 0%,100% { box-shadow: 0 0 50px rgba(0,184,144,.4), inset 0 0 26px rgba(0,184,144,.2); } 50% { box-shadow: 0 0 84px rgba(0,184,144,.62), inset 0 0 34px rgba(0,184,144,.3); } }
.j3-pulse { position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, rgba(0,184,144,.32), transparent 70%); animation: j3PulseGlow 4s ease-in-out infinite; }
@keyframes j3PulseGlow { 0%,100% { opacity: .45; transform: scale(.88); } 50% { opacity: 1; transform: scale(1.12); } }
.j3-orb-ring { position: absolute; border-radius: 50%; }
.j3-orb-ring.r1 { inset: 0;   border: 1px dashed rgba(0,184,144,.28);  animation: satSpin 30s linear infinite; }
.j3-orb-ring.r2 { inset: 15%; border: 1px solid  rgba(118,228,247,.22); animation: satSpin 22s linear infinite reverse; }
.j3-orb-ring.r3 { inset: 29%; border: 1px dashed rgba(24,119,242,.24);  animation: satSpin 17s linear infinite; }
.j3-orbit { position: absolute; border-radius: 50%; animation: satSpin linear infinite; }
.j3-orbit-1 { inset: 0;   animation-duration: 26s; }
.j3-orbit-2 { inset: 15%; animation-duration: 20s; animation-direction: reverse; }
.j3-orbit-3 { inset: 29%; animation-duration: 23s; }
.j3-node {
    position: absolute; top: -17px; left: 50%; width: 34px; height: 34px; margin-left: -17px;
    display: flex; align-items: center; justify-content: center; font-size: .95rem; border-radius: 50%;
    background: rgba(8,18,32,.85); border: 1px solid rgba(0,184,144,.42); box-shadow: 0 0 14px rgba(0,184,144,.4);
}
@media (prefers-reduced-motion: reduce) { .j3-orb, .j3-pulse, .j3-orb-ring, .j3-orbit { animation: none; } }
/* clickable routing nodes */
.j3-pulse, .j3-orb-ring, .j3-orbit { pointer-events: none; }
.j3-node, .j3-orb { pointer-events: auto; text-decoration: none; cursor: pointer; }
.j3-node { transition: transform .2s var(--ease), background .2s, border-color .2s, box-shadow .2s; }
.j3-node:hover, .j3-node:focus-visible { transform: scale(1.22); background: rgba(0,184,144,.3); border-color: rgba(0,184,144,.8); box-shadow: 0 0 20px rgba(0,184,144,.7); outline: none; }
.j3-orb { transition: transform .25s var(--ease); }
.j3-orb:hover, .j3-orb:focus-visible { transform: scale(1.06); outline: none; }
.jarvi3-visual:hover .j3-orbit, .jarvi3-visual:focus-within .j3-orbit { animation-play-state: paused; }

.j3-name {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    color: white;
    letter-spacing: -1.2px;
    line-height: 1.1;
    margin: var(--s4) 0 var(--s3);
}
.j3-tag  { font-size: 1rem; color: rgba(255,255,255,.52); margin-bottom: var(--s5); }
.j3-desc { font-size: 0.92rem; color: rgba(255,255,255,.58); line-height: 1.72; margin-bottom: var(--s6); max-width: 460px; }
.j3-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s8); }
.jtag { font-size: 0.72rem; padding: 4px 10px; border-radius: var(--r-full); background: rgba(255,255,255,.07); color: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.1); font-weight: 500; }
.j3-actions { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.j3-url { font-size: 0.8rem; color: rgba(255,255,255,.28); font-family: var(--font-mono); }

/* ─── TERMINAL MOCK ───────────────────────────────────────── */
.j3-terminal {
    background: #0d1117;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 32px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(0,184,144,.08);
    flex-shrink: 0;
    width: 320px;
    min-width: 280px;
}
.j3-term-bar {
    background: #161b22;
    padding: 11px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.jt-dots { display: flex; gap: 6px; }
.jt-dot { width: 11px; height: 11px; border-radius: 50%; }
.jt-r { background: #ff5f57; }
.jt-y { background: #ffbd2e; }
.jt-g { background: #28c840; }
.jt-title { font-size: 0.7rem; font-family: var(--font-mono); color: rgba(255,255,255,.28); margin: 0 auto; }

.j3-term-body { padding: 18px 18px 22px; font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.7; }
.jt-line { color: rgba(255,255,255,.65); opacity: 0; animation: termLine 0.3s ease forwards; }
.jt-line.l1 { animation-delay: 0.4s; }
.jt-line.l2 { animation-delay: 1.1s; }
.jt-line.l3 { animation-delay: 1.8s; }
.jt-line.l4 { animation-delay: 2.5s; }
.jt-line.l5 { animation-delay: 3.2s; }
.jt-line.l6 { animation-delay: 3.9s; }

.jt-prompt { color: #38d9a9; display: flex; gap: 8px; margin-bottom: 10px; }
.jt-gt { color: var(--brand); opacity: .7; }
.jt-processing { color: rgba(255,255,255,.4); margin-bottom: 3px; }
.jt-spin { color: #facc15; }
.jt-success { color: #28c840; margin: 8px 0 10px; }
.jt-check { margin-right: 4px; }
.jt-output { color: rgba(255,255,255,.6); line-height: 1.65; }
.jt-hl { color: #38d9a9; font-weight: 700; }
.jt-cursor {
    display: inline-block;
    width: 7px; height: 14px;
    background: var(--brand);
    margin-left: 2px;
    vertical-align: middle;
    border-radius: 1px;
    animation: termBlink 1s step-end infinite;
    opacity: 0;
    animation-delay: 4.5s;
}

/* ─── PRODUCT CARDS ───────────────────────────────────────── */
.pcard-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.pcard {
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: var(--s8);
    border: 1px solid var(--border);
    transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md);
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
}
.pcard::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: var(--r-xl);
    background: linear-gradient(135deg, var(--brand), var(--blue));
    z-index: -1;
    opacity: 0;
    transition: opacity var(--tx-md);
}
.pcard:hover::after { opacity: 1; }
.pcard:hover { border-color: transparent; box-shadow: var(--sh-xl); }

.pcard-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s5); }
.pcard-icon { font-size: 2.2rem; line-height: 1; }
.pcard-name { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--s2); }
.pcard-desc { font-size: 0.9rem; color: var(--text-2); line-height: 1.62; margin-bottom: var(--s5); }
.pcard-tags { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s5); }
.ptag { font-size: 0.72rem; padding: 3px 9px; border-radius: var(--r-full); background: var(--brand-subtle); color: var(--brand-dark); border: 1px solid var(--brand-border); font-weight: 500; }
.pcard-link { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; font-weight: 600; color: var(--brand-dark); text-decoration: none; transition: gap var(--tx); }
.pcard-link:hover { gap: 9px; }

/* ─── TECH FEATURES ───────────────────────────────────────── */
.tech-feats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-top: var(--s8); }
.tech-feat {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    background: var(--bg);
    border-radius: var(--r-lg);
    padding: var(--s5);
    border: 1px solid var(--border-light);
    transition: border-color var(--tx), box-shadow var(--tx), transform var(--tx);
}
.tech-feat:hover { border-color: rgba(0,184,144,.3); box-shadow: 0 4px 16px rgba(0,184,144,.07); transform: translateY(-2px); }
.tf-icon { font-size: 1.6rem; flex-shrink: 0; line-height: 1; }
.tf-name { font-size: 0.9rem; font-weight: 600; margin-bottom: 2px; }
.tf-desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.52; }

/* ─── ARCHITECTURE DIAGRAM ────────────────────────────────── */
.arch-diagram {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
    border-radius: var(--r-2xl);
    padding: var(--s8);
    border: 1px solid rgba(0,184,144,.18);
    box-shadow: 0 16px 48px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
/* slow ambient glow drifting in the corner */
.arch-diagram::after {
    content: ''; position: absolute; top: -35%; right: -25%;
    width: 65%; height: 65%; pointer-events: none;
    background: radial-gradient(circle, rgba(0,184,144,.14), transparent 70%);
    animation: archGlow 9s ease-in-out infinite;
}
@keyframes archGlow { 0%,100% { opacity:.45; transform: scale(1); } 50% { opacity:1; transform: scale(1.2); } }
.arch-large { padding: var(--s10); }

.arch-label {
    display: flex; align-items: center; gap: var(--s3);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2.5px;
    color: rgba(255,255,255,.8); margin-bottom: var(--s6); font-weight: 700;
}
.arch-label::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(0,184,144,.45), transparent); }

.arch-node {
    position: relative;
    display: flex; align-items: center; gap: var(--s3);
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r-md);
    padding: 12px 14px 12px 16px;
    transition: transform var(--tx), background var(--tx), border-color var(--tx), box-shadow var(--tx);
}
/* coloured accent bar that slides in on hover */
.arch-node::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    border-radius: var(--r-md) 0 0 var(--r-md);
    background: var(--brand); opacity: 0; transition: opacity var(--tx);
}
/* hover tooltip explaining each layer */
.arch-node[data-tip]::after {
    content: attr(data-tip);
    position: absolute; left: 16px; bottom: calc(100% + 9px); z-index: 8;
    width: max-content; max-width: 250px;
    background: #0a1726; color: rgba(255,255,255,.94);
    border: 1px solid rgba(0,184,144,.4);
    padding: 8px 12px; border-radius: var(--r);
    font-size: 0.72rem; font-weight: 500; line-height: 1.45; letter-spacing: .2px;
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
    opacity: 0; transform: translateY(6px); pointer-events: none;
    transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.arch-node[data-tip]:hover::after { opacity: 1; transform: translateY(0); }
.arch-node:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(0,184,144,.4);
    transform: translateX(4px);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.arch-node:hover::before { opacity: 1; }
.arch-node-green::before  { background: var(--brand); }
.arch-node-purple::before { background: #9f7aea; }
.arch-node-teal::before   { background: #0ca678; }
.arch-node-cyan::before   { background: #76e4f7; }
.arch-node-blue::before   { background: #63b3ed; }

.arch-connector {
    width: 2px; height: 18px; margin: 3px 0 3px 19px;
    border-radius: 2px; color: transparent; font-size: 0; line-height: 0;
    background: linear-gradient(180deg, rgba(0,184,144,.55), rgba(0,184,144,.12));
}

.nd { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.nd-green { background: var(--brand); box-shadow: 0 0 8px var(--brand); animation: ndPulse 2.4s ease-in-out infinite; }
.nd-blue  { background: #63b3ed; box-shadow: 0 0 8px #63b3ed; }
.nd-teal  { background: #0ca678; box-shadow: 0 0 8px #0ca678; }
.nd-cyan  { background: #76e4f7; box-shadow: 0 0 8px #76e4f7; }
@keyframes ndPulse { 0%,100% { box-shadow: 0 0 6px var(--brand); } 50% { box-shadow: 0 0 15px var(--brand); } }

.nd-label { flex: 1; font-size: 0.92rem; font-weight: 600; color: #ffffff; }

.nd-tag {
    font-size: 0.64rem; text-transform: uppercase; letter-spacing: .8px; font-weight: 700;
    font-family: var(--font-mono); padding: 3px 10px; border-radius: var(--r-full);
    color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
}
.nd-tag-live {
    position: relative; padding-left: 18px;
    color: #1cf0bf;
    background: rgba(0,184,144,.16);
    border-color: rgba(0,184,144,.5);
}
.nd-tag-live::before {
    content: ''; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%; background: #1cf0bf;
    box-shadow: 0 0 6px #1cf0bf; animation: liveBlink 1.6s ease-in-out infinite;
}
@keyframes liveBlink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.arch-footer { margin-top: var(--s5); background: rgba(0,184,144,.06); border: 1px solid rgba(0,184,144,.16); border-radius: var(--r-md); padding: var(--s4) var(--s5); }
.arch-footer code { display: block; font-size: 0.73rem; font-family: var(--font-mono); color: rgba(0,184,144,.82); line-height: 1.8; }

@media (prefers-reduced-motion: reduce) {
    .arch-diagram::after, .nd-green, .nd-tag-live::before { animation: none; }
}

/* ─── VISION CARDS ────────────────────────────────────────── */
.section-vision-dark {
    position: relative; overflow: hidden; z-index: 1;
    background:
        linear-gradient(180deg, rgba(5,10,18,.94) 0%, rgba(5,14,11,.96) 100%),
        url('/static/images/photos/post-launch.webp') center / cover no-repeat;
}
.vgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--s5); position: relative; }
.vcard {
    background: linear-gradient(165deg, rgba(18,30,25,.92) 0%, rgba(10,18,15,.94) 100%);
    border-radius: var(--r-xl);
    padding: var(--s7);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
    transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md), background var(--tx-md);
    transform-style: preserve-3d;
    position: relative; overflow: hidden;
}
.vcard::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--brand), var(--blue));
    opacity: 0; transition: opacity var(--tx-md);
}
.vcard:hover {
    transform: translateY(-5px);
    border-color: rgba(0,184,144,.42);
    background: linear-gradient(165deg, rgba(22,36,30,.95) 0%, rgba(12,21,17,.96) 100%);
    box-shadow: 0 22px 50px rgba(0,0,0,.52);
}
.vcard:hover::before { opacity: 1; }
.vc-icon {
    font-size: 1.5rem; line-height: 1; margin-bottom: var(--s5);
    width: 50px; height: 50px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 13px; background: rgba(0,184,144,.12); border: 1px solid rgba(0,184,144,.28);
}
.vc-name { font-size: 1.08rem; font-weight: 700; margin-bottom: var(--s3); color: #fff; letter-spacing: -.2px; }
.vc-desc { font-size: 0.9rem; color: rgba(255,255,255,.72); line-height: 1.62; }

/* ─── NEWSLETTER ──────────────────────────────────────────── */
.newsletter-section {
    background: var(--surface);
    padding: var(--s16) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}
.nl-card {
    background: linear-gradient(135deg, var(--brand-subtle) 0%, var(--blue-subtle) 100%);
    border-radius: var(--r-2xl);
    padding: var(--s12);
    display: flex;
    align-items: center;
    gap: var(--s12);
    border: 1px solid rgba(0,184,144,.15);
}
.nl-left { flex: 1; }
.nl-right { flex: 1; }
.nl-title {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -.8px;
    line-height: 1.15;
    margin: var(--s3) 0 var(--s4);
}
.nl-desc { font-size: 0.92rem; color: var(--text-2); line-height: 1.68; }
.nl-input-row { display: flex; gap: var(--s3); margin-bottom: var(--s3); }
.nl-input {
    flex: 1;
    padding: 13px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: 0.92rem;
    background: var(--surface);
    color: var(--text-1);
    outline: none;
    transition: border-color var(--tx), box-shadow var(--tx);
}
.nl-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,184,144,.12); }
.nl-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 22px;
    background: var(--brand);
    color: white;
    border-radius: var(--r-full);
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 16px rgba(0,184,144,.3);
    transition: background var(--tx), transform var(--tx), box-shadow var(--tx);
    white-space: nowrap;
}
.nl-btn:hover { background: var(--brand-mid); transform: translateY(-1px); box-shadow: 0 6px 22px rgba(0,184,144,.42); }
.nl-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.nl-fine { font-size: 0.76rem; color: var(--text-3); }
.nl-msg { font-size: 0.85rem; margin-top: var(--s3); min-height: 20px; }
.nl-msg-ok { color: var(--brand-dark); font-weight: 600; }

/* ─── CTA SECTION ─────────────────────────────────────────── */
.section-cta { background: linear-gradient(145deg, var(--navy) 0%, var(--navy-2) 55%, #0a1d10 100%); padding: var(--s24) 0; text-align: center; overflow: hidden; }
.cta-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 700px; height: 350px; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,184,144,.07) 0%, transparent 65%); pointer-events: none; }

/* ─── EFFECTS: cursor spotlight on cards ──────────────────── */
/* ─── Smooth cross-page navigation (View Transitions API) ─────
   Progressive enhancement: supported browsers cross-fade between
   page loads; others just navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .20s ease both; }
::view-transition-new(root) { animation: vtIn .32s ease both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

.spotlight-card { position: relative; }
.card-glow {
    position: absolute; inset: 0; z-index: 3;
    border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity 0.4s ease;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%),
                rgba(0,184,144,.16), transparent 62%);
}
.spotlight-card:hover .card-glow { opacity: 1; }

/* ─── EFFECTS: shimmer sweep on primary CTAs ──────────────── */
.btn-cta-primary, .btn-hero-primary, .btn-jarvi3-primary, .campaign-cta, .forest-cta, .wow-cta {
    position: relative;
    overflow: hidden;
}
.btn-cta-primary::after, .btn-hero-primary::after, .btn-jarvi3-primary::after,
.campaign-cta::after, .forest-cta::after, .wow-cta::after {
    content: ''; position: absolute; top: 0; bottom: 0; left: -75%; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-20deg); pointer-events: none;
}
.btn-cta-primary:hover::after, .btn-hero-primary:hover::after, .btn-jarvi3-primary:hover::after,
.campaign-cta:hover::after, .forest-cta:hover::after, .wow-cta:hover::after {
    animation: btnSweep 0.75s var(--ease);
}
@keyframes btnSweep { to { left: 130%; } }
.cta-container { position: relative; z-index: 2; }
.cta-h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; color: white; letter-spacing: -1px; line-height: 1.12; max-width: 560px; margin: 0 auto var(--s5); }
.cta-p { font-size: 1.05rem; color: rgba(255,255,255,.5); max-width: 480px; margin: 0 auto var(--s10); line-height: 1.7; }
.cta-actions { display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap; }

/* ─── PAGE HERO (inner pages) ─────────────────────────────── */
.page-hero {
    background: var(--bg);
    padding: calc(68px + var(--s20)) 0 var(--s20);
    border-bottom: 1px solid var(--border);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.page-hero-inner { max-width: 680px; position: relative; }

/* ── Unified interactive mesh layer (signature across all pages) ── */
.page-hero .mesh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero:not(.page-hero-banner):not(.page-hero-dark) .mesh-canvas { opacity: .55; }  /* light hero: subtle green network */
.page-hero-banner .mesh-canvas { opacity: .45; }                                       /* over photo: very subtle */
.page-hero-dark .mesh-canvas { opacity: 1; }

/* Dark mesh hero (Ecosystem etc.) */
.page-hero-dark {
    min-height: 82vh;
    display: flex;
    align-items: center;
    background:
        radial-gradient(820px 560px at 84% 14%, rgba(0,184,144,.14), transparent 60%),
        radial-gradient(700px 520px at 8% 86%, rgba(24,119,242,.12), transparent 62%),
        linear-gradient(108deg, rgba(3,5,12,.92) 0%, rgba(3,5,12,.66) 42%, rgba(5,9,18,.34) 78%, rgba(5,9,18,.28) 100%),
        url('/static/images/wp9116447.jpg') center / cover no-repeat,
        #03050c;
    border-bottom: 1px solid rgba(0,184,144,.14);
}
.page-h1 { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -1.2px; line-height: 1.1; margin-bottom: var(--s5); }
.page-sub { font-size: 1.1rem; color: var(--text-2); line-height: 1.7; max-width: 520px; }

/* ─── ECOSYSTEM PAGE ──────────────────────────────────────── */
.section-jarvi3-full {
    position: relative; overflow: hidden;
    background:
        radial-gradient(620px 440px at 9% 16%, rgba(250,204,21,.16), transparent 60%),
        radial-gradient(580px 460px at 92% 84%, rgba(24,119,242,.14), transparent 62%),
        radial-gradient(520px 420px at 74% 10%, rgba(0,184,144,.10), transparent 60%),
        var(--surface);
    padding: var(--s12) 0;
}
.section-jarvi3-full > .container { position: relative; z-index: 1; }
.eco-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.eco-card { background: var(--surface); border-radius: var(--r-xl); padding: var(--s8); border: 1px solid var(--border); transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md); display: flex; flex-direction: column; }
.eco-card:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); border-color: rgba(0,184,144,.25); }
.eco-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--s5); }

/* Eco card with photo header */
.eco-card-photo { padding: 0; overflow: hidden; }
.eco-card-photo > :not(.eco-photo) { padding-left: var(--s8); padding-right: var(--s8); }
.eco-card-photo > .eco-card-head { padding-top: var(--s6); margin-bottom: var(--s3); }
.eco-card-photo > .eco-cta { margin: var(--s5) var(--s8) var(--s8); }
.eco-photo {
    height: 180px; background-size: cover; background-position: center;
    position: relative;
}
.eco-photo::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,13,26,.05), rgba(7,13,26,.4)); }
.eco-photo-badge { position: absolute; top: var(--s4); right: var(--s4); z-index: 1; }
.eco-icon { width: 52px; height: 52px; border-radius: var(--r-lg); display: grid; place-items: center; font-size: 1.6rem; }
.eco-icon-green { background: rgba(0,184,144,.1); }
.eco-icon-blue  { background: var(--blue-subtle); }
.eco-icon-teal  { background: rgba(12,166,120,.1); }
.eco-icon-dark  { background: var(--bg); }
.eco-name { font-size: 1.35rem; font-weight: 700; margin-bottom: var(--s2); }
.eco-tag  { font-size: 0.9rem; color: var(--text-2); font-weight: 500; margin-bottom: var(--s4); }
.eco-desc { font-size: 0.9rem; color: var(--text-2); line-height: 1.65; margin-bottom: var(--s5); flex: 1; }
.eco-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.eco-cta { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: var(--r-full); font-size: 0.85rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: background var(--tx), transform var(--tx), color var(--tx); background: var(--brand-subtle); color: var(--brand-dark); border: 1px solid var(--brand-border); align-self: flex-start; }
.eco-cta:hover { background: var(--brand); color: white; border-color: transparent; transform: translateY(-1px); }

/* ─── ABOUT PAGE ──────────────────────────────────────────── */
.story-block { max-width: 680px; }
.story-body { margin-top: var(--s6); display: flex; flex-direction: column; gap: var(--s5); }
.story-body p { font-size: 1.05rem; color: var(--text-2); line-height: 1.78; }
.story-body em { color: var(--text-1); font-style: normal; font-weight: 600; }
.values-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.value-card { background: var(--surface); border-radius: var(--r-xl); padding: var(--s8); border: 1px solid var(--border); transition: transform var(--tx-md), box-shadow var(--tx-md); }
.value-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.vc-icon-sm  { font-size: 2rem; margin-bottom: var(--s4); }
.vc-name-sm  { font-size: 1rem; font-weight: 700; margin-bottom: var(--s3); }
.vc-desc-sm  { font-size: 0.87rem; color: var(--text-2); line-height: 1.62; }
/* Safety page pull-quote */
.safety-statement {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.4rem, 3vw, 2.25rem); line-height: 1.42; letter-spacing: -.5px;
    color: var(--text-1); margin: 0;
}
.safety-statement em { color: var(--brand-dark); font-style: italic; }

/* ─── Safety hero "Aegis" visual ──────────────────────────── */
.safety-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: var(--s12); }
.aegis { position: relative; width: min(440px, 40vw); aspect-ratio: 1; margin: 0 auto; }
.aegis-aura {
    position: absolute; inset: 14%; border-radius: 50%;
    background: radial-gradient(circle, rgba(0,184,144,.35), transparent 65%);
    filter: blur(26px); animation: aegisPulse 4.5s ease-in-out infinite;
}
.aegis-ring { position: absolute; border-radius: 50%; }
.aegis-ring.r1 { inset: 0;   border: 1px dashed rgba(0,184,144,.30); animation: satSpin 28s linear infinite; }
.aegis-ring.r2 { inset: 13%; border: 1px solid  rgba(118,228,247,.24); animation: satSpin 21s linear infinite reverse; }
.aegis-ring.r3 { inset: 27%; border: 1px dashed rgba(24,119,242,.28); animation: satSpin 16s linear infinite; }
/* little orbiting tokens on the outer rings */
.aegis-orbit { position: absolute; inset: 0; border-radius: 50%; animation: satSpin 18s linear infinite; }
.aegis-orbit-2 { inset: 13%; animation: satSpin 24s linear infinite reverse; }
.aegis-sat {
    position: absolute; top: -16px; left: 50%; width: 34px; height: 34px; margin-left: -17px;
    display: flex; align-items: center; justify-content: center; font-size: .95rem;
    background: rgba(8,18,32,.8); border: 1px solid rgba(0,184,144,.5);
    border-radius: 50%; box-shadow: 0 0 12px rgba(0,184,144,.4);
}
.aegis-core {
    position: absolute; inset: 35%; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    background: radial-gradient(circle at 36% 30%, rgba(0,184,144,.4), rgba(8,18,32,.9));
    border: 1px solid rgba(0,184,144,.55);
    box-shadow: 0 0 55px rgba(0,184,144,.4), inset 0 0 28px rgba(0,184,144,.22);
    animation: aegisPulse 4.5s ease-in-out infinite;
}
.aegis-node {
    position: absolute; font-size: .68rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
    color: #cdeee5; background: rgba(8,18,32,.72); border: 1px solid rgba(0,184,144,.4);
    border-radius: var(--r-full); padding: 5px 12px; box-shadow: 0 0 14px rgba(0,184,144,.25);
    backdrop-filter: blur(3px); white-space: nowrap;
}
.aegis-node.n1 { top: -3%; left: 50%; transform: translateX(-50%); }
.aegis-node.n2 { bottom: 6%; left: -8%; }
.aegis-node.n3 { bottom: 6%; right: -8%; }
@keyframes aegisPulse { 0%,100% { opacity: .6; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
    .aegis-aura, .aegis-ring, .aegis-orbit, .aegis-core { animation: none; }
}
/* Clickable aegis pieces */
.aegis-aura, .aegis-ring, .aegis-orbit { pointer-events: none; }
.aegis-sat, .aegis-core, .aegis-node { pointer-events: auto; text-decoration: none; cursor: pointer; }
.aegis-node { transition: transform .2s var(--ease), border-color .2s, color .2s, box-shadow .2s; }
.aegis-node:hover, .aegis-node:focus-visible { color: #fff; border-color: rgba(0,184,144,.75); box-shadow: 0 0 18px rgba(0,184,144,.45); transform: translateY(-1px); outline: none; }
.aegis-node.n1:hover, .aegis-node.n1:focus-visible { transform: translate(-50%,-1px); }
.aegis-sat { transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.aegis-sat:hover, .aegis-sat:focus-visible { transform: scale(1.2); background: rgba(0,184,144,.3); box-shadow: 0 0 18px rgba(0,184,144,.6); outline: none; }
.aegis-core { transition: box-shadow .25s; }
.aegis-core:hover, .aegis-core:focus-visible { box-shadow: 0 0 70px rgba(0,184,144,.6), inset 0 0 30px rgba(0,184,144,.3); outline: none; }
.aegis:hover .aegis-orbit, .aegis:focus-within .aegis-orbit { animation-play-state: paused; }
@media (max-width: 900px) {
    .safety-hero-grid { grid-template-columns: 1fr; }
    .aegis { display: none; }
}

/* ─── Safety: "Then vs Now" sourced comparison ────────────── */
.tvn { max-width: 940px; margin: var(--s12) auto 0; display: flex; flex-direction: column; gap: var(--s5); }
.tvn-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: var(--s4); }
.tvn-cell { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r-lg); padding: var(--s5) var(--s6); }
.tvn-cell p { margin: 7px 0 0; color: rgba(255,255,255,.82); font-size: .95rem; line-height: 1.55; }
.tvn-then { border-left: 3px solid var(--brand); }
.tvn-now  { border-left: 3px solid #f0883e; }
.tvn-tag { font-size: .62rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: #4dd9b8; }
.tvn-tag-bad { color: #f0a868; }
.tvn-when { display: block; margin-top: 9px; font-size: .72rem; color: rgba(255,255,255,.42); font-family: var(--font-mono); }
.tvn-when a { color: rgba(118,228,247,.85); text-decoration: none; }
.tvn-when a:hover { text-decoration: underline; }
.tvn-arrow { align-self: center; color: rgba(255,255,255,.35); font-size: 1.35rem; }
.wb-sources { max-width: 940px; margin: var(--s10) auto 0; font-size: .76rem; color: rgba(255,255,255,.42); line-height: 1.95; }
.wb-sources-title { font-weight: 700; color: rgba(255,255,255,.62); margin-right: 6px; }
.wb-sources a { color: rgba(118,228,247,.82); text-decoration: none; }
.wb-sources a:hover { text-decoration: underline; }
@media (max-width: 760px) {
    .tvn-row { grid-template-columns: 1fr; }
    .tvn-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ─── Safety: stat band with image ────────────────────────── */
.safety-stats { position: relative; overflow: hidden;
    background: linear-gradient(rgba(3,8,14,.84), rgba(3,8,14,.9)), var(--scene) center / cover no-repeat; }
.safety-stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s8); text-align: center; }
.ss-val { font-family: var(--font-display); font-size: clamp(2.4rem,5vw,3.6rem); font-weight: 800; line-height: 1;
    background: linear-gradient(135deg, var(--brand), #38d9a9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.ss-lbl { margin: var(--s4) auto 0; color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.55; max-width: 300px; }
@media (max-width: 760px) { .safety-stats-grid { grid-template-columns: 1fr; } }
.timeline { position: relative; padding-left: 28px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.tl-item { position: relative; margin-bottom: var(--s10); }
.tl-dot { position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--border); border: 2px solid var(--surface); }
.tl-done .tl-dot { background: var(--brand); box-shadow: 0 0 8px rgba(0,184,144,.4); }
.tl-date { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-dark); margin-bottom: 4px; }
.tl-name { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--s2); }
.tl-desc { font-size: 0.9rem; color: var(--text-2); line-height: 1.6; }

/* ─── ABOUT PAGE ENHANCEMENTS ─────────────────────────────── */
/* Hero credibility chips */
.about-hero-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s6); }
.aht-chip {
    font-size: .82rem; font-weight: 600; color: #fff;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    padding: 6px 14px; border-radius: var(--r-full);
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

/* Story — editorial two-column */
.about-story-head { margin-bottom: var(--s8); }
.about-story-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: var(--s10); align-items: start; }
.about-story-prose { display: flex; flex-direction: column; gap: var(--s5); }
.about-story-prose p { font-size: 1.05rem; color: var(--text-2); line-height: 1.8; }
.about-story-prose em { color: var(--text-1); font-style: normal; font-weight: 600; }
.about-lead { font-size: 1.45rem; line-height: 1.5; color: var(--text-1); font-weight: 600; }
.about-quote {
    position: relative;
    background: linear-gradient(150deg, var(--brand-subtle), var(--blue-subtle));
    border: 1px solid rgba(0,184,144,.18);
    border-radius: var(--r-2xl);
    padding: var(--s9) var(--s8) var(--s8);
    box-shadow: var(--sh-md);
    position: sticky; top: 96px;
}
.about-quote-mark {
    position: absolute; top: 2px; left: 22px;
    font-family: Georgia, "Times New Roman", serif; font-size: 5rem; line-height: 1;
    color: var(--brand); opacity: .28;
}
.about-quote-text { margin: var(--s6) 0 var(--s5); font-size: 1.3rem; font-weight: 600; line-height: 1.45; color: var(--text-1); }
.about-quote-by { display: flex; align-items: center; gap: 9px; font-size: .9rem; font-weight: 700; color: var(--brand-dark); }
.aqb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 8px rgba(0,184,144,.6); }

/* Values — premium cards */
.value-card { position: relative; overflow: hidden; }
.value-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--blue));
    transform: scaleX(0); transform-origin: left; transition: transform var(--tx-md);
}
.value-card:hover::before { transform: scaleX(1); }
.value-card:hover { border-color: rgba(0,184,144,.3); }
.vc-orb {
    width: 56px; height: 56px; border-radius: 16px;
    display: grid; place-items: center;
    font-size: 1.7rem; line-height: 1; margin-bottom: var(--s5);
    background: linear-gradient(140deg, var(--brand-subtle), var(--blue-subtle));
    border: 1px solid var(--brand-border);
    box-shadow: var(--sh-sm), inset 0 1px 0 rgba(255,255,255,.6);
    transition: transform var(--tx-md), box-shadow var(--tx-md);
}
.value-card:hover .vc-orb { transform: scale(1.08) rotate(-4deg); box-shadow: var(--sh-md); }
.vc-index {
    position: absolute; top: var(--s5); right: var(--s6);
    font-size: 1.7rem; font-weight: 800; color: var(--text-1);
    opacity: .07; letter-spacing: -1px;
}

/* Belief band */
.section-vision-dark.about-belief {
    text-align: center;
    background:
        linear-gradient(180deg, rgba(7,13,26,.9) 0%, rgba(8,30,20,.84) 100%),
        url('/static/images/photos/nat-renewable.webp') center / cover no-repeat;
}
.about-belief-inner { max-width: 880px; margin: 0 auto; }
.about-belief-h2 {
    font-size: clamp(1.7rem, 4vw, 2.8rem); font-weight: 800;
    line-height: 1.22; color: #fff; margin: var(--s5) 0;
    letter-spacing: -.02em; text-wrap: balance;
}
.about-belief-p { font-size: 1.08rem; color: rgba(255,255,255,.62); line-height: 1.7; max-width: 620px; margin: 0 auto; }

/* Roadmap — premium timeline */
.about-timeline { padding-left: 36px; }
.about-timeline::before {
    left: 11px; width: 2px;
    background: linear-gradient(180deg, var(--brand) 0%, var(--blue) 70%, var(--border) 100%);
}
.about-timeline .tl-dot {
    left: -32px; top: 6px; width: 16px; height: 16px;
    background: var(--surface); border: 3px solid var(--brand-border);
    transition: transform var(--tx-md), box-shadow var(--tx-md);
}
.about-timeline .tl-done .tl-dot {
    background: linear-gradient(135deg, var(--brand), var(--blue)); border-color: transparent;
    box-shadow: 0 0 0 5px rgba(0,184,144,.12), 0 0 12px rgba(0,184,144,.6);
}
.about-timeline .tl-item:hover .tl-dot { transform: scale(1.18); }
.about-timeline .tl-content {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--s5) var(--s6);
    transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md);
}
.about-timeline .tl-item:hover .tl-content { transform: translateX(5px); box-shadow: var(--sh-md); border-color: rgba(0,184,144,.25); }
.tl-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.tl-pill {
    font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    padding: 2px 9px; border-radius: var(--r-full);
    background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border);
}
.tl-pill-live { background: rgba(0,184,144,.12); color: var(--brand-dark); border-color: var(--brand-border); }
@media (max-width: 860px) {
    .about-story-grid { grid-template-columns: 1fr; gap: var(--s8); }
    .about-quote { position: static; }
}

/* ─── TECH PAGE ───────────────────────────────────────────── */
.tech-grid-full { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); }
.tech-card { background: var(--surface); border-radius: var(--r-xl); padding: var(--s8); border: 1px solid var(--border); transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md); }
.tech-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(0,184,144,.22); }
.tc-icon { font-size: 2.2rem; margin-bottom: var(--s5); }
.tc-name { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--s3); }
.tc-desc { font-size: 0.9rem; color: var(--text-2); line-height: 1.62; }

/* ─── FOOTER ──────────────────────────────────────────────── */
.footer { background: #07101f; padding: var(--s20) 0 var(--s8); position: relative; overflow: hidden; }
.footer-glow { position: absolute; top: -100px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(0,184,144,.04) 0%, transparent 70%); pointer-events: none; }
.footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--s6); position: relative; z-index: 1; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s12); margin-bottom: var(--s12); padding-bottom: var(--s12); border-bottom: 1px solid rgba(255,255,255,.07); }
.footer-logo { display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; margin-bottom: var(--s5); }
.footer-logo-orb { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--blue)); display: grid; place-items: center; font-size: 17px; }
.footer-logo span { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; background: linear-gradient(135deg, var(--brand), #63b3ed); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-tagline { font-size: 0.88rem; line-height: 1.65; color: rgba(255,255,255,.35); max-width: 280px; margin-bottom: var(--s6); }
.footer-socials { display: flex; gap: var(--s3); }
.social-btn { width: 34px; height: 34px; border-radius: var(--r-sm); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: grid; place-items: center; color: rgba(255,255,255,.4); transition: background var(--tx), color var(--tx), border-color var(--tx); text-decoration: none; }
.social-btn:hover { background: rgba(0,184,144,.14); color: var(--brand); border-color: rgba(0,184,144,.24); }
.footer-col-title { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: rgba(255,255,255,.72); margin-bottom: var(--s5); }
.footer-col ul li { margin-bottom: var(--s3); }
.footer-col ul li a { font-size: 0.87rem; color: rgba(255,255,255,.36); text-decoration: none; transition: color var(--tx); }
.footer-col ul li a:hover { color: var(--brand); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 0.82rem; color: rgba(255,255,255,.22); flex-wrap: wrap; gap: var(--s4); }
.footer-legal { display: flex; gap: var(--s6); }
.footer-legal a { color: rgba(255,255,255,.22); text-decoration: none; transition: color var(--tx); }
.footer-legal a:hover { color: var(--brand); }

/* ─── ERROR PAGE ──────────────────────────────────────────── */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 80px var(--s6); text-align: center; }
.error-inner { max-width: 420px; }
.error-icon  { font-size: 5rem; margin-bottom: var(--s5); }
.error-code  { font-family: var(--font-display); font-size: 6rem; font-weight: 900; letter-spacing: -4px; line-height: 1; margin-bottom: var(--s3); }
.error-title { font-size: 1.6rem; font-weight: 700; margin-bottom: var(--s4); }
.error-desc  { font-size: 1rem; color: var(--text-2); margin-bottom: var(--s8); }

/* ─── SCROLL REVEAL ───────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease), filter 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; filter: blur(0); }

/* ─── ANIMATIONS ──────────────────────────────────────────── */
@keyframes blip { 0%,100% { opacity:1 } 50% { opacity:.2 } }

@keyframes earthGlow {
    0%,100% { box-shadow: 0 0 0 20px rgba(0,184,144,.05),0 0 0 40px rgba(0,184,144,.025),0 0 80px rgba(0,184,144,.22),0 0 160px rgba(24,119,242,.12),inset -32px -32px 80px rgba(0,0,0,.2),inset 14px 14px 40px rgba(255,255,255,.1); }
    50%       { box-shadow: 0 0 0 20px rgba(0,184,144,.08),0 0 0 40px rgba(0,184,144,.04),0 0 100px rgba(0,184,144,.32),0 0 180px rgba(24,119,242,.18),inset -32px -32px 80px rgba(0,0,0,.16),inset 14px 14px 40px rgba(255,255,255,.14); }
}
@keyframes cloudA { 0%,100% { transform:translateX(0) scaleX(1); opacity:.3 } 50% { transform:translateX(12px) scaleX(1.08); opacity:.46 } }
@keyframes orbitSpin { from { transform:translate(-50%,-50%) rotateX(72deg) rotateZ(0deg) } to { transform:translate(-50%,-50%) rotateX(72deg) rotateZ(360deg) } }
@keyframes hfcFloat { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-9px) } }
@keyframes meshDrift { from { transform:translate(-3%,-2%) scale(1); } to { transform:translate(6%,4%) scale(1.22); } }
@keyframes marqueeScroll { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes scrollBounce { 0%,100% { transform:translateY(0); opacity:.3 } 50% { transform:translateY(7px); opacity:.65 } }
@keyframes termLine { from { opacity:0; transform:translateX(-6px) } to { opacity:1; transform:none } }
@keyframes termBlink { 0%,50% { opacity:1 } 51%,100% { opacity:0 } }

/* ═══════════════════════════════════════════════════════════
   JARVI3 PAGE STYLES
═══════════════════════════════════════════════════════════ */

/* ─── JARVI3 PAGE HERO ────────────────────────────────────── */
.j3-page-hero {
    background:
        radial-gradient(900px 620px at 82% 18%, rgba(0,184,144,.12), transparent 60%),
        radial-gradient(760px 560px at 8% 80%, rgba(24,119,242,.12), transparent 62%),
        radial-gradient(620px 620px at 55% 50%, rgba(118,75,162,.08), transparent 60%),
        linear-gradient(160deg, #03050c 0%, #060b16 48%, #081120 100%);
    padding-top: calc(68px + var(--s20));
    padding-bottom: var(--s20);
    position: relative;
    overflow: hidden;
    min-height: 88vh;
    display: flex;
    align-items: center;
    z-index: 1;
}
.j3ph-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s16);
    align-items: center;
}

/* Achievement cards on the right */
.j3ph-achievements { display: flex; flex-direction: column; gap: var(--s4); }
.j3-ach-card {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-xl);
    padding: var(--s5) var(--s7);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    display: flex;
    align-items: center;
    gap: var(--s5);
    transition: background var(--tx-md), border-color var(--tx-md), transform var(--tx-md);
    position: relative;
    text-decoration: none; color: inherit;
}
.j3-ach-card:hover { transform: translateX(6px); background: rgba(255,255,255,.1); }
.j3-ach-green { border-left: 3px solid var(--brand); }
.j3-ach-blue  { border-left: 3px solid #63b3ed; }
.j3-ach-teal  { border-left: 3px solid #4fd1c5; }
.j3-ach-icon  { font-size: 2rem; flex-shrink: 0; line-height: 1; }
.j3-ach-body  { display: flex; flex-direction: column; gap: 2px; }
.j3-ach-val   { font-family: var(--font-display); font-size: 2rem; font-weight: 800; color: #ffffff; line-height: 1; }
.j3-ach-denom { font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,.42); }
.j3-ach-name  { font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,.65); }
.j3-ach-sub   { font-size: 0.73rem; color: rgba(255,255,255,.32); }

/* ─── GLM PIPELINE DIAGRAM ────────────────────────────────── */
.glm-pipeline {
    display: flex;
    align-items: center;
    gap: var(--s6);
    margin-bottom: var(--s10);
    overflow: hidden;
}
.glm-input-node {
    flex-shrink: 0;
    background: var(--navy);
    border: 1px solid rgba(0,184,144,.28);
    border-radius: var(--r-xl);
    padding: var(--s6) var(--s7);
    text-align: center;
    min-width: 138px;
    box-shadow: 0 0 30px rgba(0,184,144,.1), inset 0 0 0 1px rgba(255,255,255,.04);
}
.glm-in-icon  { font-size: 2rem; line-height: 1; margin-bottom: var(--s2); }
.glm-in-label { font-size: 0.88rem; font-weight: 700; color: white; }
.glm-in-sub   { font-size: 0.7rem; color: rgba(255,255,255,.35); margin-top: 2px; }

.glm-pipe-arrow {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    color: var(--brand);
}
.glm-pipe-line  { width: 32px; height: 1px; background: linear-gradient(90deg, var(--brand), rgba(0,184,144,.3)); }
.glm-pipe-badge { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand); white-space: nowrap; background: rgba(0,184,144,.1); border: 1px solid rgba(0,184,144,.2); padding: 3px 8px; border-radius: var(--r-full); }
.glm-pipe-chevron { color: var(--brand); flex-shrink: 0; }

.glm-lanes { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.glm-lane {
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: var(--s5) var(--s6);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand);
    transition: transform var(--tx-md), box-shadow var(--tx-md);
    position: relative;
    overflow: hidden;
}
.glm-lane::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,184,144,.04), transparent);
    opacity: 0;
    transition: opacity var(--tx-md);
}
.glm-lane:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.glm-lane:hover::before { opacity: 1; }
.glm-lane-icon { font-size: 1.6rem; line-height: 1; margin-bottom: var(--s2); }
.glm-lane-name { font-size: 0.88rem; font-weight: 700; margin-bottom: 4px; color: var(--text-1); }
.glm-lane-desc { font-size: 0.78rem; color: var(--text-2); line-height: 1.55; }

.glm-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--s6);
    background: linear-gradient(135deg, var(--blue-subtle) 0%, var(--brand-subtle) 100%);
    border-radius: var(--r-xl);
    padding: var(--s7) var(--s10);
    border: 1px solid rgba(0,184,144,.15);
}
.glm-insight-icon    { font-size: 2rem; flex-shrink: 0; margin-top: 2px; }
.glm-insight-title   { font-size: 1rem; font-weight: 700; margin-bottom: var(--s3); color: var(--text-1); }
.glm-insight-text    { font-size: 0.9rem; color: var(--text-2); line-height: 1.7; }

/* Global taxonomy block (Jarvi3 GLM section) */
.glm-taxonomy { margin-top: var(--s12); padding-top: var(--s10); border-top: 1px solid var(--border); }
.glm-tax-head { text-align: center; max-width: 680px; margin: 0 auto var(--s8); }
.glm-tax-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 800; line-height: 1.1; margin: var(--s3) 0; letter-spacing: -1px; }
.glm-tax-sub { color: var(--text-2); line-height: 1.65; }
.glm-tax-sub em { color: var(--brand-dark); font-style: normal; font-weight: 600; }
.glm-tax-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.glm-tax-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s6); transition: transform var(--tx), box-shadow var(--tx), border-color var(--tx); }
.glm-tax-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(0,184,144,.3); }
.gt-icon { font-size: 1.8rem; margin-bottom: var(--s3); }
.glm-tax-card h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: var(--s2); color: var(--text-1); }
.glm-tax-card p { font-size: 0.9rem; color: var(--text-2); line-height: 1.62; }
.glm-tax-foot { text-align: center; max-width: 740px; margin: var(--s8) auto 0; font-size: 1.02rem; color: var(--text-1); font-weight: 500; line-height: 1.6; }
@media (max-width: 820px) { .glm-tax-grid { grid-template-columns: 1fr; } }

/* KureAcademy five-year roadmap */
.academy-roadmap { margin-top: var(--s14); padding-top: var(--s12); border-top: 1px solid var(--border); }
.ar-head { text-align: center; max-width: 700px; margin: 0 auto var(--s10); }
.ar-title { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; letter-spacing: -1px; line-height: 1.12; margin: var(--s3) 0; }
.ar-sub { color: var(--text-2); line-height: 1.65; }
.ar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.ar-phase { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--s7); transition: transform var(--tx), box-shadow var(--tx), border-color var(--tx); }
.ar-phase:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.ar-phase-1 { border-top: 3px solid #7c3aed; }
.ar-phase-2 { border-top: 3px solid var(--brand); }
.ar-phase-3 { border-top: 3px solid var(--blue); }
.ar-when { font-size: .66rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--text-3); }
.ar-icon { font-size: 1.85rem; margin: var(--s3) 0 var(--s2); }
.ar-phase h4 { font-size: 1.1rem; font-weight: 700; margin-bottom: var(--s2); color: var(--text-1); }
.ar-phase p { font-size: .9rem; color: var(--text-2); line-height: 1.6; }
.ar-link { text-align: center; max-width: 720px; margin: var(--s10) auto 0; font-size: 1.02rem; color: var(--text-1); font-weight: 500; line-height: 1.6; }
.ar-link a { color: var(--brand-dark); font-weight: 700; text-decoration: none; white-space: nowrap; }
.ar-link a:hover { text-decoration: underline; }
@media (max-width: 820px) { .ar-grid { grid-template-columns: 1fr; } }

/* ─── Glossary terms inline + System Index page ───────────── */
.gterm {
    color: var(--brand); font-weight: 700; text-decoration: none;
    border-bottom: 1px dotted currentColor; cursor: pointer;
    transition: color var(--tx), border-bottom-color var(--tx);
}
.gterm:hover, .gterm:focus-visible { color: #38d9a9; border-bottom-style: solid; outline: none; }
.glossary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.gloss-item {
    background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--brand);
    border-radius: var(--r-lg); padding: var(--s6) var(--s7); scroll-margin-top: 96px;
    transition: box-shadow var(--tx), transform var(--tx), border-color var(--tx);
}
.gloss-item:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.gloss-item:target { border-left-color: var(--blue); box-shadow: 0 0 0 3px rgba(0,184,144,.2); }
.gloss-term { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--text-1); margin-bottom: var(--s3); }
.gloss-aka { font-size: .82rem; font-weight: 500; color: var(--text-3); }
.gloss-item p { font-size: .92rem; color: var(--text-2); line-height: 1.65; }
.gloss-item p a, .gloss-item em { color: var(--brand-dark); font-weight: 600; font-style: normal; }
.gloss-foot { text-align: center; margin-top: var(--s10); color: var(--text-2); }
.gloss-foot a { color: var(--brand-dark); font-weight: 600; }
@media (max-width: 760px) { .glossary-grid { grid-template-columns: 1fr; } }

/* ─── Bottom page pager (back to top + next page) ─────────── */
.pager { position: relative; overflow: hidden; background: linear-gradient(160deg, #03050c 0%, #081120 100%); border-top: 1px solid rgba(0,184,144,.14); padding: var(--s14) 0; }
.pager-stars {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 45% 80%, rgba(190,235,255,.8), transparent),
        radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.6), transparent);
    background-size: 320px 200px; animation: starTwinkle 5s ease-in-out infinite;
}
.pager-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--s5); flex-wrap: wrap; }
.pager-top {
    display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.85); border-radius: var(--r-full); padding: 8px 20px 8px 8px;
    font-size: .9rem; font-weight: 600;
    transition: background var(--tx), border-color var(--tx), color var(--tx);
}
.pager-top { transition: background var(--tx), border-color var(--tx), color var(--tx), transform var(--tx); }
.pager-top:hover { background: rgba(0,184,144,.14); border-color: rgba(0,184,144,.45); color: #fff; transform: translateY(-2px); }
.pager-top-ring { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(0,184,144,.18); color: var(--brand); transition: transform var(--tx); }
.pager-top:hover .pager-top-ring { transform: translateY(-2px); }
.pager-next {
    display: inline-flex; align-items: center; gap: var(--s6); justify-content: space-between; min-width: 264px;
    background: linear-gradient(135deg, rgba(0,184,144,.16), rgba(24,119,242,.14));
    border: 1px solid rgba(0,184,144,.32); border-radius: var(--r-xl);
    padding: var(--s5) var(--s6) var(--s5) var(--s7); text-decoration: none;
    transition: transform var(--tx), border-color var(--tx), box-shadow var(--tx);
}
.pager-next:hover { transform: translateY(-3px); border-color: rgba(0,184,144,.6); box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 24px rgba(0,184,144,.22); }
.pager-next-meta { display: flex; flex-direction: column; gap: 3px; }
.pager-next-kicker { font-size: .68rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: rgba(120,228,200,.92); }
.pager-next-name { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: #fff; line-height: 1; }
.pager-next-arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; flex-shrink: 0; transition: transform var(--tx); }
.pager-next:hover .pager-next-arrow { transform: translateX(5px); }
@media (prefers-reduced-motion: reduce) { .pager-stars { animation: none; } }
@media (max-width: 560px) { .pager-inner { flex-direction: column-reverse; align-items: stretch; } .pager-top { justify-content: center; } }

/* Premium pager override */
.pager {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(0,184,144,.12), transparent 22%, transparent 78%, rgba(24,119,242,.12)),
        linear-gradient(160deg, #03050c 0%, #07111f 54%, #03150f 100%);
    border-top: 1px solid rgba(120,228,200,.2);
    padding: clamp(42px, 6vw, 78px) 0;
}
.pager::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(120,228,200,.74), transparent);
    opacity: .8;
}
.pager-stars {
    opacity: .55;
    background-image:
        radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.86), transparent),
        radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.68), transparent),
        radial-gradient(1.5px 1.5px at 45% 80%, rgba(190,235,255,.78), transparent),
        radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.58), transparent);
}
.pager-inner {
    display: grid;
    grid-template-columns: minmax(220px, .72fr) minmax(330px, 1fr);
    align-items: stretch;
    justify-content: stretch;
    gap: clamp(14px, 2vw, 24px);
    max-width: 920px;
    flex-wrap: nowrap;
}
.pager-top,
.pager-next {
    min-width: 0;
    min-height: 92px;
    border-radius: 24px;
    text-decoration: none;
    transition: transform var(--tx), border-color var(--tx), box-shadow var(--tx), background var(--tx), color var(--tx);
}
.pager-top {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 20px;
    background: rgba(255,255,255,.065);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.9);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 44px rgba(0,0,0,.28);
}
.pager-top:hover,
.pager-top:focus-visible {
    background: rgba(0,184,144,.14);
    border-color: rgba(120,228,200,.54);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 50px rgba(0,0,0,.34), 0 0 26px rgba(0,184,144,.16);
}
.pager-top-ring,
.pager-next-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 50%;
}
.pager-top-ring {
    width: 46px;
    height: 46px;
    background: linear-gradient(135deg, rgba(0,184,144,.24), rgba(24,119,242,.16));
    color: var(--brand);
    border: 1px solid rgba(120,228,200,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
    transition: transform var(--tx), color var(--tx);
}
.pager-top:hover .pager-top-ring { transform: translateY(-2px); color: #fff; }
.pager-top-meta,
.pager-next-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pager-top-kicker,
.pager-next-label,
.pager-next-kicker {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
}
.pager-top-kicker { color: rgba(120,228,200,.82); }
.pager-top-txt {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.3vw, 1.28rem);
    font-weight: 800;
    line-height: 1.05;
}
.pager-next {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(12px, 1.6vw, 20px);
    padding: 18px 20px 18px 22px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(0,184,144,.24), rgba(24,119,242,.18)),
        rgba(4,15,28,.92);
    border: 1px solid rgba(120,228,200,.36);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 20px 52px rgba(0,0,0,.32);
}
.pager-next::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.09) 44%, transparent 72%);
    transform: translateX(-100%);
    transition: transform .7s ease;
}
.pager-next:hover,
.pager-next:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(120,228,200,.74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 24px 58px rgba(0,0,0,.38), 0 0 30px rgba(0,184,144,.18);
}
.pager-next:hover::before,
.pager-next:focus-visible::before { transform: translateX(100%); }
.pager-next-label {
    color: rgba(7,13,26,.9);
    background: rgba(120,228,200,.92);
    border-radius: var(--r-full);
    padding: 7px 10px;
    white-space: nowrap;
}
.pager-next-kicker { color: rgba(188,247,231,.92); }
.pager-next-name {
    font-family: var(--font-display);
    font-size: clamp(1.45rem, 2vw, 2rem);
    font-weight: 850;
    color: #fff;
    line-height: 1.02;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pager-next-arrow {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, var(--brand), var(--blue));
    color: #fff;
    box-shadow: 0 12px 28px rgba(0,184,144,.28);
    transition: transform var(--tx), box-shadow var(--tx);
}
.pager-next:hover .pager-next-arrow { transform: translateX(5px); box-shadow: 0 16px 36px rgba(0,184,144,.38); }
.pager-top:focus-visible,
.pager-next:focus-visible { outline: 2px solid rgba(120,228,200,.9); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
    .pager-stars { animation: none; }
    .pager-next::before { transition: none; }
}
@media (max-width: 720px) {
    .pager { padding: 34px 0; }
    .pager-inner { grid-template-columns: 1fr; max-width: 420px; }
    .pager-top { order: 2; min-height: 72px; justify-content: flex-start; }
    .pager-next {
        order: 1;
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: 86px;
        padding: 18px;
    }
    .pager-next-label { display: none; }
    .pager-next-name { font-size: 1.45rem; }
}

/* ─── Default desktop view rendered at 80% ────────────────────
   The site reads better "zoomed out", so on wider screens we render
   everything at 0.8 by default (the fixed nav and footer scale with it).
   Phones/tablets keep their normal sizing. */
@media (min-width: 1100px) {
    :root { zoom: 0.8; }
}

/* ─── COMPARISON CHART ────────────────────────────────────── */
.comp-wrap { max-width: 820px; margin: 0 auto; }

.comp-tabs {
    display: inline-flex;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 4px;
    margin-bottom: var(--s8);
}
.comp-tab {
    padding: 8px 20px;
    border-radius: var(--r-full);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-2);
    background: none;
    border: none;
    cursor: pointer;
    transition: background var(--tx), color var(--tx);
    white-space: nowrap;
}
.comp-tab.active { background: var(--brand); color: white; box-shadow: 0 2px 10px rgba(0,184,144,.3); }
.comp-tab:hover:not(.active) { background: var(--surface-hover); color: var(--text-1); }

.comp-chart { display: flex; flex-direction: column; gap: var(--s6); margin-bottom: var(--s8); }
.comp-row { cursor: default; }
.comp-tooltip {
    position: absolute; transform: translate(-50%, -100%);
    background: var(--navy); color: #fff; padding: 7px 12px; border-radius: var(--r-md);
    font-size: 0.78rem; white-space: nowrap; pointer-events: none;
    opacity: 0; transition: opacity var(--tx); box-shadow: var(--sh-lg); z-index: 6;
}
.comp-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:var(--navy); }
.comp-tooltip b { color: #38d9a9; }
.comp-tooltip-show { opacity: 1; }

.comp-row {
    display: grid;
    grid-template-columns: 140px 1fr 90px;
    align-items: center;
    gap: var(--s5);
}
.comp-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-1);
    display: flex;
    align-items: center;
    gap: var(--s2);
    justify-content: flex-end;
    text-align: right;
}
.comp-badge-j3 {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--brand);
    color: white;
    padding: 2px 7px;
    border-radius: var(--r-full);
}
.comp-bar-track {
    height: 38px;
    background: var(--bg);
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border-light);
}
.comp-bar {
    height: 100%;
    background: linear-gradient(90deg, #94a3b8, #64748b);
    border-radius: var(--r-md);
    transition: width 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.comp-bar-hero {
    background: linear-gradient(90deg, var(--brand), #38d9a9);
    box-shadow: 0 0 12px rgba(0,184,144,.45);
}
.comp-row-hero .comp-label { color: var(--brand-dark); }
.comp-val {
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-2);
    text-align: right;
    white-space: nowrap;
}
.comp-row-hero .comp-val { color: var(--brand-dark); }

.comp-summary {
    display: flex;
    align-items: center;
    gap: var(--s6);
    background: var(--surface);
    border-radius: var(--r-xl);
    padding: var(--s6) var(--s8);
    border: 1px solid var(--border);
    flex-wrap: wrap;
}
.cs-block { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.cs-val { font-family: var(--font-display); font-size: 2rem; font-weight: 800; line-height: 1; }
.cs-lbl { font-size: 0.78rem; color: var(--text-2); font-weight: 500; }
/* Scoped: this card sits on a light surface, so keep labels dark+readable
   (overrides the white .cs-lbl used by the dark campaign stats). */
.comp-summary .cs-lbl { color: var(--text-2); text-transform: none; letter-spacing: 0; }
.cs-div { width: 1px; height: 48px; background: var(--border); flex-shrink: 0; }

/* ─── SCALE SAVINGS ───────────────────────────────────────── */
.j3-scale-section {
    background: linear-gradient(145deg, var(--navy) 0%, var(--navy-2) 55%, #0a1e10 100%);
    position: relative;
    overflow: hidden;
}
.j3-scale-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0,184,144,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,184,144,.03) 1px, transparent 1px);
    background-size: 52px 52px;
    pointer-events: none;
}
/* Climate photo backdrop (wind turbines) */
.j3-scale-photo::after {
    content: '';
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--scene);
    background-size: cover; background-position: center;
    opacity: .14;
    mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, #000 70%, transparent);
}
.j3-scale-photo .container { position: relative; z-index: 1; }

.scale-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s5); margin-bottom: var(--s6); }

.scale-card {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-xl);
    padding: var(--s8);
    text-align: center;
    transition: background var(--tx-md), border-color var(--tx-md), transform var(--tx-md);
    position: relative;
    z-index: 1;
}
.scale-card:hover { background: rgba(0,184,144,.07); border-color: rgba(0,184,144,.22); transform: translateY(-4px); }
.sc-icon { font-size: 2.2rem; margin-bottom: var(--s4); line-height: 1; }
.sc-num {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    margin-bottom: var(--s2);
}
.sc-num [data-count] {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    font-weight: 800;
    letter-spacing: -2px;
    background: linear-gradient(135deg, var(--brand), #38d9a9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1;
}
.sc-unit { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,.4); line-height: 1; }
.sc-label { font-size: 0.75rem; color: rgba(255,255,255,.28); margin-bottom: var(--s4); }
.sc-equiv { font-size: 0.82rem; color: rgba(255,255,255,.35); line-height: 1.55; }
.sc-equiv strong { color: rgba(255,255,255,.7); font-weight: 600; }
.scale-footnote { text-align: center; font-size: 0.72rem; color: rgba(255,255,255,.2); position: relative; z-index: 1; }

/* ─── BENCHMARKS ──────────────────────────────────────────── */
.bench-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }

.bench-card {
    background: var(--surface);
    border-radius: var(--r-2xl);
    padding: var(--s10);
    border: 1px solid var(--border);
    box-shadow: var(--sh-md);
    transition: transform var(--tx-md), box-shadow var(--tx-md);
}
.bench-card:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); }
.bench-card-perfect {
    border-color: rgba(0,184,144,.28);
    background: linear-gradient(140deg, var(--surface) 0%, var(--brand-subtle) 100%);
}
.bench-head {
    display: flex;
    align-items: flex-start;
    gap: var(--s4);
    margin-bottom: var(--s8);
}
.bench-hicon   { font-size: 2.2rem; flex-shrink: 0; line-height: 1; }
.bench-name    { font-size: 1.2rem; font-weight: 700; margin-bottom: var(--s2); }
.bench-sub     { font-size: 0.83rem; color: var(--text-2); line-height: 1.5; }

/* Radial ring */
.bench-radial  { position: relative; width: 160px; height: 160px; margin: 0 auto var(--s6); }
.radial-svg    { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.radial-bg     { fill: none; stroke: var(--bg); stroke-width: 9; }
.radial-fill   {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
}
.radial-center {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.radial-num { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--brand-dark); line-height: 1; }
.radial-of  { font-size: 0.82rem; color: var(--text-3); font-weight: 600; }

/* Dot grid */
.bench-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: var(--s6);
}
.bench-dot {
    width: 11px; height: 11px;
    border-radius: 2px;
    background: var(--bg);
    border: 1px solid var(--border);
    flex-shrink: 0;
    transition: none;
}
.bench-dot-filled {
    background: var(--blue);
    border-color: var(--blue-mid);
    box-shadow: 0 0 5px rgba(24,119,242,.4);
    transform: scale(0.6);
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.bench-dot-filled.dot-active { opacity: 1; transform: scale(1); }

.bench-row-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s5);
}
.bench-score-lbl { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; color: var(--text-1); }
.bench-pill { font-size: 0.7rem; font-weight: 700; padding: 4px 11px; border-radius: var(--r-full); text-transform: uppercase; letter-spacing: .5px; }
.bench-pill-green { background: var(--brand-subtle); color: var(--brand-dark); border: 1px solid var(--brand-border); }
.bench-pill-blue  { background: var(--blue-subtle); color: var(--blue-mid); border: 1px solid var(--blue-border); }

/* Trajectory bar */
.bench-traj { margin-bottom: var(--s5); }
.bt-track { height: 8px; background: var(--bg); border-radius: var(--r-full); overflow: hidden; margin-bottom: var(--s3); border: 1px solid var(--border-light); }
.bt-fill { height: 100%; background: linear-gradient(90deg, var(--blue), #63b3ed); border-radius: var(--r-full); }
.bt-label { font-size: 0.78rem; color: var(--text-2); }

.bench-detail-box { background: var(--bg); border-radius: var(--r-md); padding: var(--s4) var(--s5); border: 1px solid var(--border-light); }
.bench-detail-text { font-size: 0.83rem; color: var(--text-2); line-height: 1.65; }

/* ─── SUPERMATH BRAIN ─────────────────────────────────────── */
.sm-status-chips { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }
.sm-chip {
    font-size: 0.8rem;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--r-full);
}
.sm-chip-info { background: var(--blue-subtle); color: var(--blue-mid); border: 1px solid var(--blue-border); }
.sm-chip-os   { background: var(--brand-subtle); color: var(--brand-dark); border: 1px solid var(--brand-border); }

.sm-demo-card {
    background: linear-gradient(145deg, var(--navy) 0%, var(--navy-2) 100%);
    border-radius: var(--r-2xl);
    padding: var(--s10);
    border: 1px solid rgba(0,184,144,.18);
    box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
    overflow: hidden;
}
.sm-photo {
    height: 150px; margin: calc(var(--s10) * -1) calc(var(--s10) * -1) var(--s7);
    background-size: cover; background-position: center; position: relative;
    filter: saturate(1.05);
}
.sm-photo::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,13,26,.25), var(--navy)); }
.sm-demo-head {
    display: flex;
    align-items: center;
    gap: var(--s4);
    margin-bottom: var(--s8);
}
.sm-demo-orb {
    width: 46px; height: 46px;
    background: rgba(0,184,144,.12);
    border: 1px solid rgba(0,184,144,.2);
    border-radius: var(--r-lg);
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}
.sm-demo-title { font-size: 0.92rem; font-weight: 700; color: rgba(255,255,255,.88); }
.sm-demo-sub   { font-size: 0.72rem; color: rgba(255,255,255,.35); margin-top: 2px; }

.sm-eq-block {
    background: #0d1117;
    border-radius: var(--r-md);
    padding: var(--s6) var(--s8);
    margin-bottom: var(--s6);
    border: 1px solid rgba(255,255,255,.07);
    font-family: var(--font-mono);
}
.sm-eq { font-size: 0.95rem; color: rgba(255,255,255,.62); line-height: 2.1; opacity: 0; animation: termLine 0.4s ease forwards; }
.sm-eq-1 { animation-delay: 0.3s; }
.sm-eq-2 { animation-delay: 0.9s; }
.sm-eq-3 { animation-delay: 1.5s; }
.sm-eq-solved { color: #38d9a9; font-weight: 700; }

.sm-feat-chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s6); }
.sm-feat {
    font-size: 0.73rem;
    padding: 4px 11px;
    border-radius: var(--r-full);
    background: rgba(0,184,144,.1);
    color: rgba(0,184,144,.8);
    border: 1px solid rgba(0,184,144,.2);
    font-weight: 500;
}
.sm-demo-footer { border-top: 1px solid rgba(255,255,255,.06); padding-top: var(--s5); }
.sm-soon-label  { font-size: 0.8rem; color: rgba(255,255,255,.32); }

/* ─── ENTERPRISE GRID ─────────────────────────────────────── */
.section-enterprise-dark {
    position: relative; overflow: hidden; z-index: 1;
    background:
        linear-gradient(160deg, rgba(7,13,26,.9) 0%, rgba(14,27,45,.86) 100%),
        url('/static/images/photos/data.webp') center / cover no-repeat;
}
.ent-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--s4);
    margin-bottom: var(--s6);
    position: relative;
}
.ent-card {
    background: rgba(13,20,34,.55);
    border-radius: var(--r-xl);
    padding: var(--s7);
    border: 1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md), background var(--tx-md);
}
.ent-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: rgba(0,184,144,.4); background: rgba(0,184,144,.1); }
.ent-icon { font-size: 2rem; margin-bottom: var(--s4); line-height: 1; }
.ent-name { font-size: 1rem; font-weight: 700; margin-bottom: var(--s2); color: #fff; }
.ent-desc { font-size: 0.86rem; color: rgba(255,255,255,.6); line-height: 1.6; }

.ent-cta-banner {
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    border-radius: var(--r-2xl);
    padding: var(--s8) var(--s10);
    border: 1px solid rgba(0,184,144,.15);
    box-shadow: 0 12px 40px rgba(0,0,0,.15);
}
.ent-cta-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.ent-cta-title { font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: var(--s2); }
.ent-cta-sub   { font-size: 0.9rem; color: rgba(255,255,255,.44); }

/* ─── INDEX PAGE — JARVI3 ACHIEVEMENT STRIP ───────────────── */
.j3-ach-strip {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: var(--s4);
    margin-top: var(--s6);
}
.j3-strip-card {
    display: flex;
    align-items: center;
    gap: var(--s4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s4) var(--s5);
    text-decoration: none;
    color: var(--text-1);
    transition: background var(--tx), border-color var(--tx), transform var(--tx), box-shadow var(--tx);
}
.j3-strip-card:hover { background: var(--surface); border-color: var(--brand-border); transform: translateY(-2px); box-shadow: var(--sh-md); }
.j3-sc-icon  { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.j3-sc-val   { font-family: var(--font-display); font-size: 0.95rem; font-weight: 800; color: var(--text-1); line-height: 1; margin-bottom: 2px; }
.j3-sc-lbl   { font-size: 0.75rem; color: var(--text-2); }
.j3-sc-arrow { margin-left: auto; font-size: 0.9rem; color: var(--text-3); transition: color var(--tx), transform var(--tx); }
.j3-strip-card:hover .j3-sc-arrow { color: var(--brand-dark); transform: translateX(3px); }

/* ─── LOGO IN NAV / FOOTER ────────────────────────────────── */
.nav-logo-img {
    height: 36px;
    width: 36px;
    border-radius: 9px;
    object-fit: cover;       /* crops to show the emblem without whitespace padding */
    flex-shrink: 0;
    display: block;
    box-shadow: 0 2px 10px rgba(0,184,144,.28);
    transition: transform var(--tx), box-shadow var(--tx);
}
.nav-logo:hover .nav-logo-img { transform: rotate(-8deg) scale(1.05); box-shadow: 0 4px 16px rgba(0,184,144,.4); }

.footer-logo-img {
    height: 84px;
    width: auto;
    max-width: 200px;
    display: block;
    object-fit: contain;
    mix-blend-mode: screen;  /* blends the dark background away into the dark footer */
    margin-bottom: var(--s2);
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════════ */
.contact-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s16);
    align-items: start;
}
.contact-form-wrap {
    background: var(--surface);
    border-radius: var(--r-2xl);
    padding: var(--s10);
    border: 1px solid var(--border);
    box-shadow: var(--sh-md);
}
.contact-form { display: flex; flex-direction: column; gap: var(--s5); }
.cf-row { display: flex; gap: var(--s5); }
.cf-row-half .cf-field { flex: 1; }
.cf-field { display: flex; flex-direction: column; gap: var(--s2); }
.cf-label { font-size: 0.85rem; font-weight: 600; color: var(--text-1); }
.cf-input {
    padding: 12px 16px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-lg);
    font-family: var(--font);
    font-size: 0.92rem;
    color: var(--text-1);
    background: var(--surface);
    outline: none;
    transition: border-color var(--tx), box-shadow var(--tx);
    width: 100%;
}
.cf-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,184,144,.12); }
.cf-select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2365676b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; }
.cf-textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.cf-submit { align-self: flex-start; padding: 13px 28px; margin-top: var(--s2); }
.cf-msg { font-size: 0.85rem; min-height: 20px; margin-top: var(--s2); }
.cf-msg-ok  { color: var(--brand-dark); font-weight: 600; }
.cf-msg-err { color: #c0392b; font-weight: 600; }

.contact-details { display: flex; flex-direction: column; gap: var(--s7); padding-top: var(--s2); }
.cd-block {}
.cd-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-3); margin-bottom: var(--s3); }
.cd-link { display: inline-flex; align-items: center; gap: var(--s2); font-size: 1rem; font-weight: 600; color: var(--brand-dark); text-decoration: none; transition: color var(--tx); }
.cd-link:hover { color: var(--brand); }
.cd-link-icon { font-size: 1.2rem; }
.cd-list { display: flex; flex-direction: column; gap: var(--s2); }
.cd-list li { font-size: 0.9rem; color: var(--text-2); line-height: 1.5; padding-left: var(--s4); position: relative; }
.cd-list li::before { content: '→'; position: absolute; left: 0; color: var(--brand); font-size: 0.8rem; }
.cd-response-note { display: flex; align-items: center; gap: var(--s3); background: var(--brand-subtle); border: 1px solid var(--brand-border); border-radius: var(--r-lg); padding: var(--s4) var(--s5); font-size: 0.84rem; font-weight: 500; color: var(--brand-dark); }
.cd-resp-icon { font-size: 1.2rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   BLOG PAGES
═══════════════════════════════════════════════════════════ */
/* Image banner hero (blog + others) */
.page-hero-banner { position: relative; overflow: hidden; border-bottom: none; }
.page-hero-banner::before {
    content: ''; position: absolute; inset: 0; z-index: 0;
    background-image: var(--banner); background-size: cover; background-position: center;
    transform: scale(1.05);
}
.page-hero-banner-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        linear-gradient(180deg, rgba(7,13,26,.55) 0%, rgba(7,13,26,.78) 100%),
        linear-gradient(110deg, rgba(7,13,26,.65) 0%, rgba(7,13,26,.25) 60%, transparent 100%);
}
.page-hero-banner .container { position: relative; z-index: 2; }
.page-h1-light { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.4); }
.page-sub-light { color: rgba(255,255,255,.78); }
/* Bigger, more immersive headline for the dark Ecosystem hero */
.page-hero-dark .page-h1 { font-size: clamp(2.8rem, 6.5vw, 5rem); letter-spacing: -2px; line-height: 1.04; }
.page-hero-dark .page-sub { font-size: 1.18rem; max-width: 600px; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s6);
}
/* Card thumbnail */
.blog-card-img .blog-card-link { padding: 0; }
.blog-card-img .bc-top { padding: var(--s6) var(--s7) 0; }
.blog-card-img .bc-footer { margin: 0 var(--s7); padding-bottom: var(--s5); }
.bc-thumb {
    height: 168px; background-size: cover; background-position: center;
    border-bottom: 1px solid var(--border-light); position: relative;
}
.bc-thumb::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.18));
}
.blog-card-img:hover .bc-thumb { filter: saturate(1.08); }

/* Featured post — editorial hero */
.blog-featured {
    display: grid; grid-template-columns: 1.15fr 1fr;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-2xl); overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: var(--sh-md); margin-bottom: var(--s12);
    transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md);
}
.blog-featured:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); border-color: rgba(0,184,144,.25); }
.bf-media { position: relative; min-height: 320px; background-size: cover; background-position: center; }
.bf-media::after { content:''; position:absolute; inset:0; background: linear-gradient(120deg, transparent 60%, rgba(255,255,255,.04)); }
.bf-badge {
    position: absolute; top: var(--s5); left: var(--s5);
    background: rgba(0,184,144,.92); color: #042018; font-size: 0.72rem; font-weight: 800;
    letter-spacing: .5px; text-transform: uppercase; padding: 5px 13px; border-radius: var(--r-full);
    box-shadow: 0 4px 14px rgba(0,184,144,.4);
}
.bf-body { padding: var(--s10); display: flex; flex-direction: column; justify-content: center; }
.bf-title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.18; letter-spacing: -.8px; margin: var(--s4) 0 var(--s4); color: var(--text-1); }
.blog-featured:hover .bf-title { color: var(--brand-dark); }
.bf-excerpt { font-size: 1rem; color: var(--text-2); line-height: 1.7; margin-bottom: var(--s5); }
.bf-meta { display: flex; align-items: center; gap: var(--s2); font-size: 0.82rem; color: var(--text-3); margin-bottom: var(--s5); }
.bf-meta .bc-author { color: var(--text-2); font-weight: 600; }
.bf-cta { font-size: 0.92rem; font-weight: 700; color: var(--brand-dark); }
.blog-section-label { font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-3); margin-bottom: var(--s6); }
@media (max-width: 820px) {
    .blog-featured { grid-template-columns: 1fr; }
    .bf-media { min-height: 200px; }
    .bf-body { padding: var(--s7); }
}

/* Post hero over banner → light text */
.page-hero-post.page-hero-banner { padding-bottom: var(--s12); }
.page-hero-banner .post-back,
.page-hero-banner .post-author,
.page-hero-banner .post-date,
.page-hero-banner .post-read-time { color: rgba(255,255,255,.75); }
.page-hero-banner .post-back:hover { color: #fff; }
.page-hero-banner .post-h1 { color: #fff; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
.page-hero-banner .post-dot { color: rgba(255,255,255,.4); }
.blog-card {
    position: relative;
    background: var(--surface);
    border-radius: var(--r-xl);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(15,26,32,.05);
    transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md);
}
.blog-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 2;
    background: linear-gradient(90deg, var(--brand), var(--blue));
    opacity: .5; transition: opacity var(--tx-md);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: 0 22px 50px rgba(15,26,32,.14); border-color: rgba(0,184,144,.35); }
.blog-card:hover::before { opacity: 1; }
.blog-card:hover .bc-read-more { gap: 9px; color: var(--brand); }
.bc-tag { transition: background var(--tx), border-color var(--tx); }
.blog-card:hover .bc-tag { background: rgba(0,184,144,.14); border-color: rgba(0,184,144,.4); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; padding: var(--s7); }
.bc-top { flex: 1; }
.bc-tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s4); }
.bc-tag { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: 3px 9px; border-radius: var(--r-full); background: var(--brand-subtle); color: var(--brand-dark); border: 1px solid var(--brand-border); }
.bc-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin-bottom: var(--s3); color: var(--text-1); transition: color var(--tx); }
.blog-card:hover .bc-title { color: var(--brand-dark); }
.bc-excerpt { font-size: 0.87rem; color: var(--text-2); line-height: 1.65; margin-bottom: var(--s6); }
.bc-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--s4); border-top: 1px solid var(--border-light); }
.bc-meta { display: flex; align-items: center; gap: var(--s2); }
.bc-author { font-size: 0.78rem; font-weight: 600; color: var(--text-2); }
.bc-dot { color: var(--text-3); font-size: 0.8rem; }
.bc-date { font-size: 0.78rem; color: var(--text-3); }
.bc-read-more { font-size: 0.82rem; font-weight: 600; color: var(--brand-dark); transition: gap var(--tx); }
.blog-empty { text-align: center; padding: var(--s20) 0; }
.be-icon { font-size: 4rem; margin-bottom: var(--s6); }
.be-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 700; margin-bottom: var(--s4); }
.be-desc { font-size: 1rem; color: var(--text-2); }

/* Blog post layout */
.page-hero-post { padding-bottom: var(--s12); }
.post-hero-inner { max-width: 780px; }
.post-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--text-2); text-decoration: none; margin-bottom: var(--s6); transition: color var(--tx); }
.post-back:hover { color: var(--brand-dark); }
.post-tags { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.post-h1 { font-size: clamp(1.8rem, 4vw, 3rem); }
.post-meta { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s4); }
.post-author { font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
.post-dot { color: var(--text-3); }
.post-date { font-size: 0.88rem; color: var(--text-3); }

.post-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--s12); align-items: start; }
.post-body.prose { max-width: 720px; }
.prose h2 { font-family: var(--font-display); font-size: 1.55rem; font-weight: 700; margin: var(--s10) 0 var(--s4); color: var(--text-1); letter-spacing: -.5px; }
.prose h3 { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; margin: var(--s8) 0 var(--s3); color: var(--text-1); }
.prose p { font-size: 1.05rem; color: var(--text-2); line-height: 1.82; margin-bottom: var(--s5); }
.prose strong { color: var(--text-1); font-weight: 700; }
.prose a { color: var(--brand-dark); text-decoration: underline; text-decoration-color: var(--brand-border); text-underline-offset: 3px; transition: color var(--tx); }
.prose a:hover { color: var(--brand); }
.prose ul, .prose ol { margin: var(--s4) 0 var(--s6) var(--s8); display: flex; flex-direction: column; gap: var(--s2); }
.prose li { font-size: 1rem; color: var(--text-2); line-height: 1.7; }
.prose ul li { list-style: disc; }
.prose ol li { list-style: decimal; }
.prose pre { background: var(--navy); border-radius: var(--r-lg); padding: var(--s6) var(--s8); margin: var(--s6) 0; overflow-x: auto; border: 1px solid rgba(255,255,255,.08); }
.prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg); padding: 2px 6px; border-radius: 4px; color: var(--brand-dark); }
.prose pre code { background: none; padding: 0; color: rgba(255,255,255,.78); font-size: 0.85rem; line-height: 1.7; }

.post-sidebar { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--s5); }
.ps-card { background: var(--surface); border-radius: var(--r-xl); padding: var(--s6); border: 1px solid var(--border); }
.ps-title { font-size: 0.9rem; font-weight: 700; margin-bottom: var(--s3); }
.ps-desc { font-size: 0.84rem; color: var(--text-2); margin-bottom: var(--s4); line-height: 1.55; }
.ps-nl-msg { font-size: 0.8rem; margin-top: var(--s2); }
.ps-nav {}
.ps-all-link { font-size: 0.88rem; font-weight: 600; color: var(--brand-dark); text-decoration: none; transition: color var(--tx); }
.ps-all-link:hover { color: var(--brand); }

/* CTA newsletter on blog index */
.cta-nl-form { display: flex; gap: var(--s3); flex-wrap: wrap; justify-content: center; }
.cta-nl-input { flex: 1; min-width: 220px; padding: 13px 20px; border: 1.5px solid rgba(255,255,255,.18); border-radius: var(--r-full); background: rgba(255,255,255,.08); color: white; font-family: var(--font); font-size: 0.92rem; outline: none; transition: border-color var(--tx); }
.cta-nl-input:focus { border-color: var(--brand); }
.cta-nl-input::placeholder { color: rgba(255,255,255,.35); }
.cta-nl-msg { font-size: 0.88rem; margin-top: var(--s4); min-height: 20px; }
.cta-nl-ok  { color: #38d9a9; font-weight: 600; }
.cta-nl-err { color: #fc8181; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════
   COMING SOON PAGE
═══════════════════════════════════════════════════════════ */
.coming-soon-page {
    min-height: calc(100vh - 68px);
    padding-top: calc(68px + var(--s20));
    padding-bottom: var(--s20);
    display: flex;
    align-items: center;
    background: var(--bg);
}
.coming-soon-mesh { position: relative; overflow: hidden; }
.coming-soon-mesh .mesh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .55; }
.coming-soon-mesh .container { position: relative; z-index: 1; }
.cs-inner { max-width: 560px; margin: 0 auto; text-align: center; }
.cs-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; color: var(--text-2); text-decoration: none; margin-bottom: var(--s8); transition: color var(--tx); }
.cs-back:hover { color: var(--brand-dark); }
.cs-icon { font-size: 4rem; margin-bottom: var(--s5); line-height: 1; display: block; }
.cs-title { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -1.2px; margin: var(--s4) 0 var(--s5); }
.cs-desc { font-size: 1.05rem; color: var(--text-2); line-height: 1.75; max-width: 460px; margin: 0 auto var(--s6); }
.cs-contact-note { font-size: 0.9rem; color: var(--text-2); margin-bottom: var(--s8); }
.cs-email { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.cs-email:hover { color: var(--brand); }
.cs-actions { display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s12); }
.cs-notify-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-2xl); padding: var(--s8); }
.cs-notify-label { font-size: 0.85rem; font-weight: 600; color: var(--text-2); margin-bottom: var(--s4); }
.cs-nl-form { display: flex; gap: var(--s3); flex-wrap: wrap; }
.cs-nl-input { flex: 1; min-width: 200px; }
.cs-nl-msg { font-size: 0.82rem; margin-top: var(--s3); min-height: 20px; }

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES
═══════════════════════════════════════════════════════════ */
.legal-body { max-width: 720px; }
.legal-body.prose h2 { margin-top: var(--s12); }
.legal-body.prose h2:first-child { margin-top: 0; }

/* Blog teaser (2-col on home) */
.blog-teaser-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s6);
}
@media (max-width: 640px) {
    .blog-teaser-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   BACK TO TOP
═══════════════════════════════════════════════════════════ */
.btt-btn {
    position: fixed;
    bottom: var(--s8);
    right: var(--s8);
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--brand);
    color: white;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 16px rgba(0,184,144,.4);
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity var(--tx-md), transform var(--tx-md), background var(--tx), box-shadow var(--tx);
    z-index: 800;
}
.btt-btn.btt-visible { opacity: 1; pointer-events: all; transform: translateY(0); }
.btt-btn:hover { background: var(--brand-mid); box-shadow: 0 6px 22px rgba(0,184,144,.55); transform: translateY(-2px); }
.btt-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* Premium floating back-to-top override */
.btt-btn {
    width: auto;
    min-width: 78px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 5px 12px 5px 6px;
    border-radius: var(--r-full);
    background: rgba(7,13,26,.86);
    color: #fff;
    border: 1px solid rgba(120,228,200,.34);
    box-shadow: 0 16px 38px rgba(0,0,0,.34), 0 0 22px rgba(0,184,144,.2), inset 0 1px 0 rgba(255,255,255,.12);
    backdrop-filter: blur(16px);
    transition: opacity var(--tx-md), transform var(--tx-md), background var(--tx), border-color var(--tx), box-shadow var(--tx);
}
.btt-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--blue));
    box-shadow: 0 8px 20px rgba(0,184,144,.28);
}
.btt-label {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}
.btt-btn:hover {
    background: rgba(5,18,29,.94);
    border-color: rgba(120,228,200,.68);
    box-shadow: 0 18px 44px rgba(0,0,0,.38), 0 0 28px rgba(0,184,144,.32), inset 0 1px 0 rgba(255,255,255,.16);
    transform: translateY(-3px);
}
.btt-btn:focus-visible { outline: 2px solid rgba(120,228,200,.9); outline-offset: 4px; }
@media (max-width: 560px) {
    .btt-btn {
        right: var(--s5);
        bottom: var(--s5);
        min-width: 48px;
        width: 48px;
        height: 48px;
        padding: 6px;
    }
    .btt-label { display: none; }
    .btt-icon { width: 34px; height: 34px; }
}

/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
═══════════════════════════════════════════════════════════ */
#toast-container {
    position: fixed;
    bottom: var(--s8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s3);
    z-index: 2000;
    pointer-events: none;
}
.toast {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    padding: 11px 20px;
    border-radius: var(--r-full);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 8px 32px rgba(0,0,0,.2);
    pointer-events: all;
    opacity: 0;
    transform: translateY(16px) scale(0.95);
    transition: opacity 0.28s ease, transform 0.28s ease;
    white-space: nowrap;
    max-width: 90vw;
}
.toast.toast-show { opacity: 1; transform: translateY(0) scale(1); }
.toast-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.toast-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.toast-info    { background: var(--blue-subtle); color: var(--blue-mid); border: 1px solid var(--blue-border); }
.toast-warning { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; }
.toast-icon    { font-size: 0.9rem; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   COPY CODE BUTTON
═══════════════════════════════════════════════════════════ */
.copy-code-btn {
    position: absolute;
    top: 10px; right: 10px;
    padding: 4px 10px;
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--r-sm);
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tx), color var(--tx);
    opacity: 0;
    transition: opacity var(--tx), background var(--tx), color var(--tx);
}
pre:hover .copy-code-btn { opacity: 1; }
.copy-code-btn:hover { background: rgba(255,255,255,.18); color: rgba(255,255,255,.9); }
.copy-code-btn.copy-done { background: rgba(0,184,144,.25); color: #38d9a9; border-color: rgba(0,184,144,.3); }

/* ═══════════════════════════════════════════════════════════
   BLOG SHARE BUTTONS
═══════════════════════════════════════════════════════════ */
.post-share { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }
.post-share-label { font-size: 0.82rem; font-weight: 600; color: var(--text-2); }
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--r-full);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg);
    color: var(--text-2);
    border: 1px solid var(--border);
    transition: background var(--tx), color var(--tx), border-color var(--tx);
}
.share-btn:hover { background: var(--brand-subtle); color: var(--brand-dark); border-color: var(--brand-border); }
.post-end-share { margin-top: var(--s12); padding-top: var(--s8); border-top: 1px solid var(--border-light); }
.pes-label { font-size: 0.9rem; color: var(--text-2); margin-bottom: var(--s3); }

/* ═══════════════════════════════════════════════════════════
   BLOG TABLE OF CONTENTS
═══════════════════════════════════════════════════════════ */
.toc-list { display: flex; flex-direction: column; gap: 2px; }
.toc-list a {
    display: block;
    font-size: 0.83rem;
    color: var(--text-2);
    text-decoration: none;
    padding: 5px 8px;
    border-radius: var(--r-sm);
    border-left: 2px solid transparent;
    transition: color var(--tx), border-color var(--tx), background var(--tx);
    line-height: 1.4;
}
.toc-list a:hover { color: var(--brand-dark); background: var(--brand-subtle); border-left-color: var(--brand); }
.toc-list a.toc-active { color: var(--brand-dark); border-left-color: var(--brand); font-weight: 600; }
.toc-list a.toc-h3 { padding-left: 20px; font-size: 0.78rem; }
.post-read-time { font-size: 0.88rem; color: var(--text-3); }

/* ═══════════════════════════════════════════════════════════
   SAVINGS CALCULATOR
═══════════════════════════════════════════════════════════ */
.calc-card {
    background: var(--surface);
    border-radius: var(--r-2xl);
    padding: var(--s10);
    border: 1px solid var(--border);
    box-shadow: var(--sh-md);
}
.calc-input-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: var(--s8);
    margin-bottom: var(--s8);
    align-items: end;
}
.calc-label { font-size: 0.85rem; font-weight: 600; color: var(--text-2); margin-bottom: var(--s3); display: block; }
.calc-slider-wrap { display: flex; flex-direction: column; }
.calc-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--brand) var(--val, 33%), var(--bg) var(--val, 33%));
    outline: none;
    cursor: pointer;
    margin: var(--s3) 0;
}
.calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand);
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0,184,144,.4);
    cursor: grab;
    transition: box-shadow var(--tx), transform var(--tx);
}
.calc-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); box-shadow: 0 4px 14px rgba(0,184,144,.55); }
.calc-slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--brand); border: 3px solid white; box-shadow: 0 2px 8px rgba(0,184,144,.4); cursor: grab; }
.calc-slider-labels { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--text-3); font-weight: 500; margin-top: 2px; }
.calc-number-input { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; text-align: right; }

.calc-results {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s4);
    margin-bottom: var(--s5);
}
.calc-result-card {
    border-radius: var(--r-xl);
    padding: var(--s5) var(--s4);
    text-align: center;
    border: 1px solid var(--border-light);
    transition: transform var(--tx-md);
}
.calc-result-card:hover { transform: translateY(-3px); }
.calc-rc-green { background: var(--brand-subtle); border-color: var(--brand-border); }
.calc-rc-blue  { background: var(--blue-subtle);  border-color: var(--blue-border); }
.calc-rc-teal  { background: rgba(12,166,120,.07); border-color: rgba(12,166,120,.2); }
.calc-rc-dark  { background: var(--bg); }
.calc-rc-icon  { font-size: 1.4rem; margin-bottom: var(--s2); line-height: 1; }
.calc-rc-val   { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: var(--text-1); line-height: 1.2; margin-bottom: 4px; word-break: break-word; }
.calc-rc-lbl   { font-size: 0.72rem; color: var(--text-2); font-weight: 500; }
.calc-footnote { font-size: 0.72rem; color: var(--text-3); text-align: center; }

/* Interactive comparison graph */
.calc-graph-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin: var(--s8) 0 var(--s5); }
.calc-graph-title { font-size: 0.9rem; font-weight: 700; color: var(--text-1); }
.calc-metric-tabs { display: inline-flex; gap: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-full); padding: 3px; }
.calc-mtab { padding: 6px 14px; border-radius: var(--r-full); font-size: 0.8rem; font-weight: 600; color: var(--text-2); background: none; cursor: pointer; transition: background var(--tx), color var(--tx); white-space: nowrap; }
.calc-mtab-active { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(0,184,144,.3); }
.calc-mtab:hover:not(.calc-mtab-active) { color: var(--text-1); }

.calc-chart { position: relative; display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s6); }
.calc-bar-row { display: grid; grid-template-columns: 130px 1fr 110px; align-items: center; gap: var(--s4); cursor: default; transition: transform var(--tx); }
.calc-bar-row:hover { transform: translateX(2px); }
.calc-bar-name { font-size: 0.88rem; font-weight: 700; color: var(--text-1); text-align: right; line-height: 1.2; }
.calc-bar-sub { display: block; font-size: 0.68rem; font-weight: 500; color: var(--text-3); }
.calc-bar-row-hero .calc-bar-name { color: var(--brand-dark); }
.calc-bar-track { height: 30px; background: var(--bg); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--border-light); }
.calc-bar { height: 100%; border-radius: var(--r-md); transition: width 0.7s var(--ease); min-width: 4px; }
.calc-bar-bad  { background: linear-gradient(90deg, #ff8a6b, #ff5a5a); }
.calc-bar-hero { background: linear-gradient(90deg, var(--brand), #38d9a9); box-shadow: 0 0 14px rgba(0,184,144,.5); }
.calc-bar-val { font-family: var(--font-display); font-size: 0.92rem; font-weight: 800; color: var(--text-2); text-align: left; }
.calc-bar-val-hero { color: var(--brand-dark); }

.calc-tooltip {
    position: absolute; transform: translate(-50%, -100%);
    background: var(--navy); color: #fff;
    padding: 8px 13px; border-radius: var(--r-md);
    font-size: 0.78rem; line-height: 1.5; white-space: nowrap;
    pointer-events: none; opacity: 0; transition: opacity var(--tx);
    box-shadow: var(--sh-lg); z-index: 5;
}
.calc-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color: var(--navy); }
.calc-tooltip strong { color: #38d9a9; }
.calc-tooltip-show { opacity: 1; }

.calc-savings-banner {
    text-align: center; font-size: 1rem; color: var(--text-2);
    background: var(--brand-subtle); border: 1px solid var(--brand-border);
    border-radius: var(--r-lg); padding: var(--s4) var(--s6); margin-bottom: var(--s6);
}
.calc-savings-banner strong { color: var(--brand-dark); font-family: var(--font-display); font-size: 1.15rem; }

@media (max-width: 600px) {
    .calc-bar-row { grid-template-columns: 88px 1fr 76px; gap: var(--s2); }
    .calc-bar-name { font-size: 0.78rem; }
    .calc-bar-val { font-size: 0.78rem; }
}
.calc-share-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s4);
    flex-wrap: wrap;
    padding: var(--s5) 0;
    margin-bottom: var(--s4);
    border-top: 1px solid var(--border-light);
}
.calc-share-label { font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.calc-share-btns { display: flex; gap: var(--s2); flex-wrap: wrap; }
.calc-share-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 15px; border-radius: var(--r-full);
    font-size: 0.8rem; font-weight: 600; cursor: pointer;
    background: var(--bg); color: var(--text-2); border: 1px solid var(--border);
    transition: background var(--tx), color var(--tx), border-color var(--tx), transform var(--tx);
}
.calc-share-btn:hover { background: var(--brand-subtle); color: var(--brand-dark); border-color: var(--brand-border); transform: translateY(-1px); }

/* ═══════════════════════════════════════════════════════════
   FOCUS STATES (Accessibility)
═══════════════════════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 3px;
}
.btn:focus-visible, .nav-link:focus-visible, .nav-cta:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
═══════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   SKIP LINK (Accessibility)
═══════════════════════════════════════════════════════════ */
.skip-link {
    position: fixed;
    top: -60px;
    left: var(--s4);
    z-index: 2000;
    background: var(--brand);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--r-md);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--sh-lg);
    transition: top 0.2s ease;
}
.skip-link:focus { top: var(--s4); outline: 2px solid #fff; outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════
   ERROR PAGE ACTIONS
═══════════════════════════════════════════════════════════ */
.error-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s6); }

/* ═══════════════════════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════════════════════════ */
@media print {
    .nav, .scroll-bar, .skip-link, #starfield, .btt-btn, #toast-container,
    .footer-glow, .hero-mesh, .hero-bg-grid, .earth-scene, .mobile-overlay,
    .proj-share, .proj-modal, .calc-share-row, .post-share, .nav-cta,
    .newsletter-section, .section-cta, .j3-wow-section {
        display: none !important;
    }
    body { color: #000; background: #fff; }
    .section { padding: 1rem 0 !important; }
    a { color: #000; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
    .sec-h2, .page-h1, .hero-h1 { color: #000 !important; }
    * { box-shadow: none !important; animation: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
    #starfield { display: none; }
    .earth-globe { animation: none !important; }
    .earth-orbit { animation: none !important; }
    .hfc { animation: none !important; }
    .marquee-content { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   ROADMAP PAGE
═══════════════════════════════════════════════════════════ */

/* Stats bar */
.rm-stats-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: var(--s5) 0;
}
.rm-stats-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s10);
    flex-wrap: wrap;
}
.rm-stat { text-align: center; }
.rm-stat-num { font-family: var(--font-display); font-size: 2rem; font-weight: 800; letter-spacing: -1px; color: var(--brand-dark); display: block; line-height: 1; }
.rm-stat-lbl { font-size: 0.78rem; color: var(--text-2); font-weight: 500; }
.rm-stat-div { width: 1px; height: 40px; background: var(--border); }

/* Legend */
.rm-legend { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.rm-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }

/* Layout */
.rm-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--s12); align-items: start; }

/* Month groups */
.rm-month-group { margin-bottom: var(--s12); }
.rm-month-label {
    display: flex;
    align-items: center;
    gap: var(--s3);
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-3);
    margin-bottom: var(--s6);
}
.rm-month-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.rm-events { display: flex; flex-direction: column; gap: 0; }

/* Event card */
.rm-event {
    display: flex;
    gap: 0;
    transition: opacity var(--tx-md);
}
.rm-ev-done { opacity: 0.65; }
.rm-ev-done:hover { opacity: 1; }

.rm-ev-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 48px;
}
.rm-ev-icon {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--bg);
    border: 2px solid var(--border);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    z-index: 1;
    transition: border-color var(--tx), box-shadow var(--tx);
}
.rm-event:hover .rm-ev-icon { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(0,184,144,.1); }
.rm-ev-line { flex: 1; width: 2px; background: var(--border-light); min-height: 24px; }
.rm-events > .rm-event:last-child .rm-ev-line { display: none; }

.rm-ev-body { padding: 0 0 var(--s8) var(--s5); flex: 1; }
.rm-ev-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s2); }
.rm-ev-date { font-size: 0.76rem; color: var(--text-3); font-weight: 500; }
.rm-ev-cat  {
    font-size: 0.67rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; padding: 2px 8px; border-radius: var(--r-full);
}
.rm-ev-status { font-size: 0.67rem; font-weight: 700; padding: 2px 8px; border-radius: var(--r-full); }
.rm-status-done     { background: var(--brand-subtle); color: var(--brand-dark); }
.rm-status-live     { background: rgba(0,184,144,.15); color: var(--brand); animation: blip 2s infinite; }
.rm-status-upcoming { background: var(--blue-subtle); color: var(--blue-mid); }

.rm-ev-title { font-size: 1rem; font-weight: 700; color: var(--text-1); margin-bottom: var(--s2); line-height: 1.35; }
.rm-ev-link { text-decoration: none; color: inherit; transition: color var(--tx); }
.rm-ev-link:hover { color: var(--brand-dark); }
.rm-ev-desc { font-size: 0.86rem; color: var(--text-2); line-height: 1.62; }

/* Category colour system */
.rm-color-green  { background: var(--brand-subtle);           color: var(--brand-dark); border: 1px solid var(--brand-border); }
.rm-color-blue   { background: var(--blue-subtle);            color: var(--blue-mid);   border: 1px solid var(--blue-border); }
.rm-color-teal   { background: rgba(12,166,120,.08);          color: #0ca678;           border: 1px solid rgba(12,166,120,.2); }
.rm-color-purple { background: rgba(139,92,246,.08);          color: #7c3aed;           border: 1px solid rgba(139,92,246,.2); }
.rm-color-orange { background: rgba(249,115,22,.08);          color: #ea580c;           border: 1px solid rgba(249,115,22,.2); }

/* Icon colour per category */
.rm-ev-green  .rm-ev-icon { border-color: var(--brand-border);          background: var(--brand-subtle); }
.rm-ev-blue   .rm-ev-icon { border-color: var(--blue-border);           background: var(--blue-subtle); }
.rm-ev-teal   .rm-ev-icon { border-color: rgba(12,166,120,.25);         background: rgba(12,166,120,.07); }
.rm-ev-purple .rm-ev-icon { border-color: rgba(139,92,246,.25);         background: rgba(139,92,246,.07); }
.rm-ev-orange .rm-ev-icon { border-color: rgba(249,115,22,.25);         background: rgba(249,115,22,.07); }

/* Sidebar */
.rm-sidebar { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--s5); }
.rm-sidebar-card { background: var(--surface); border-radius: var(--r-xl); padding: var(--s6); border: 1px solid var(--border); }
.rm-sc-title { font-size: 0.88rem; font-weight: 700; margin-bottom: var(--s4); color: var(--text-1); }
.rm-sc-desc  { font-size: 0.82rem; color: var(--text-2); margin-bottom: var(--s4); line-height: 1.55; }
.rm-sc-empty { font-size: 0.82rem; color: var(--text-3); }

.rm-upcoming-list { display: flex; flex-direction: column; gap: var(--s4); }
.rm-up-item { display: flex; align-items: flex-start; gap: var(--s3); }
.rm-up-icon { font-size: 1.2rem; flex-shrink: 0; line-height: 1.3; }
.rm-up-title { font-size: 0.83rem; font-weight: 600; color: var(--text-1); line-height: 1.35; margin-bottom: 2px; }
.rm-up-date  { font-size: 0.74rem; color: var(--text-3); }

.rm-notify-card { background: linear-gradient(135deg, var(--brand-subtle), var(--blue-subtle)); border-color: rgba(0,184,144,.18); text-align: center; }
.rm-notify-icon { font-size: 2rem; margin-bottom: var(--s3); }
.rm-nl-form { display: flex; flex-direction: column; gap: var(--s3); }
.rm-nl-input { text-align: center; }
.rm-nl-btn { justify-content: center; }
.rm-nl-msg { font-size: 0.78rem; min-height: 18px; margin-top: var(--s2); }

.rm-filter-btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rm-filter-btn {
    padding: 5px 12px;
    border-radius: var(--r-full);
    font-size: 0.77rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--bg);
    color: var(--text-2);
    border: 1px solid var(--border);
    transition: background var(--tx), color var(--tx), border-color var(--tx);
}
.rm-filter-btn:hover, .rm-filter-btn.active {
    background: var(--brand-subtle);
    color: var(--brand-dark);
    border-color: var(--brand-border);
}

/* Homepage upcoming events teaser */
.home-events-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s4);
}
.hev-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s5);
    transition: transform var(--tx), box-shadow var(--tx), border-color var(--tx);
}
.hev-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: rgba(0,184,144,.22); }
.hev-icon  { font-size: 1.4rem; margin-bottom: var(--s3); line-height: 1; }
.hev-title { font-size: 0.88rem; font-weight: 700; color: var(--text-1); margin-bottom: var(--s2); line-height: 1.35; }
.hev-date  { font-size: 0.74rem; color: var(--text-3); }
.hev-cat   { display: inline-block; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; padding: 2px 7px; border-radius: var(--r-full); margin-top: var(--s2); }

/* ─── PURPLE DOT (KureAcademy) ────────────────────────────── */
.nd-purple { background: #9f7aea; box-shadow: 0 0 7px #9f7aea; }

/* ═══════════════════════════════════════════════════════════
   JARVI3 — PROBLEM SECTION
═══════════════════════════════════════════════════════════ */
.j3-problem-section {
    background:
        linear-gradient(160deg, rgba(10,15,30,.92) 0%, rgba(14,27,45,.88) 100%),
        url('/static/images/photos/data.webp') center / cover no-repeat;
    padding: var(--s20) 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s12);
    align-items: center;
}
.problem-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s3);
}
.ps-stat {
    background: rgba(13,20,34,.55);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-lg);
    padding: var(--s5);
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background var(--tx-md), transform var(--tx-md);
}
.ps-stat:hover { transform: translateY(-3px); }
.ps-stat:hover { background: rgba(0,184,144,.07); border-color: rgba(0,184,144,.18); }
.ps-stat-icon { font-size: 1.8rem; margin-bottom: var(--s3); }
.ps-stat-val  { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: white; letter-spacing: -1px; margin-bottom: 4px; line-height: 1; }
.ps-stat-lbl  { font-size: 0.75rem; color: rgba(255,255,255,.38); line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════
   JARVI3 — 5 QUESTIONS CAROUSEL
═══════════════════════════════════════════════════════════ */
.j3-questions-section {
    background: linear-gradient(180deg, #050a14 0%, var(--navy) 100%);
    padding: var(--s24) 0;
    position: relative;
    z-index: 1;
}
.jq-carousel {
    max-width: 720px;
    margin: 0 auto var(--s5);
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-2xl);
    padding: var(--s10);
    backdrop-filter: blur(10px);
}
.jq-header { margin-bottom: var(--s8); }

/* Scroll-down "next" button at the bottom of the section */
.jq-next-down { text-align: center; margin-top: var(--s4); }
.jq-down-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 11px 24px; border-radius: var(--r-full);
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.8); font-size: 0.9rem; font-weight: 600; text-decoration: none;
    transition: background var(--tx), color var(--tx), border-color var(--tx);
}
.jq-down-btn:hover { background: rgba(0,184,144,.14); border-color: rgba(0,184,144,.4); color: #fff; }
.jq-down-btn svg { animation: jqDownBounce 1.8s ease-in-out infinite; }
@keyframes jqDownBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.jq-progress-wrap { height: 4px; background: rgba(255,255,255,.08); border-radius: var(--r-full); overflow: hidden; margin-bottom: var(--s3); }
.jq-progress-fill { height: 100%; width: 20%; background: linear-gradient(90deg, var(--brand), #38d9a9); border-radius: var(--r-full); transition: width 0.5s ease; }
.jq-progress-label { font-size: 0.75rem; color: rgba(255,255,255,.3); font-weight: 600; letter-spacing: .5px; text-transform: uppercase; }

.jq-slide { display: none; animation: jqFadeIn 0.4s ease; }
.jq-slide.jq-active { display: block; }
@keyframes jqFadeIn { from { opacity:0; transform:translateX(20px) } to { opacity:1; transform:none } }

.jq-num {
    font-family: var(--font-display);
    font-size: 4rem;
    font-weight: 900;
    color: rgba(0,184,144,.12);
    line-height: 1;
    margin-bottom: var(--s3);
    letter-spacing: -3px;
}
.jq-question {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 2.5vw, 1.65rem);
    font-weight: 700;
    color: white;
    line-height: 1.3;
    margin-bottom: var(--s6);
    letter-spacing: -.4px;
}

.jq-reveal-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: var(--r-full);
    background: rgba(0,184,144,.12);
    border: 1px solid rgba(0,184,144,.25);
    color: #38d9a9;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--tx), transform var(--tx), gap var(--tx);
    margin-bottom: var(--s6);
}
.jq-reveal-btn:hover { background: rgba(0,184,144,.2); transform: translateX(4px); }
.jq-reveal-arrow { transition: transform var(--tx); }
.jq-reveal-btn[aria-expanded="true"] .jq-reveal-arrow { transform: rotate(90deg); }

.jq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease, opacity 0.4s ease;
    opacity: 0;
}
.jq-answer.jq-answer-open { max-height: 300px; opacity: 1; }
.jq-answer p {
    font-size: 1rem;
    color: rgba(255,255,255,.65);
    line-height: 1.78;
    margin-bottom: var(--s4);
    border-left: 2px solid rgba(0,184,144,.3);
    padding-left: var(--s5);
}
.jq-answer p:last-child { margin-bottom: 0; }
.jq-answer strong { color: rgba(255,255,255,.9); }
.jq-answer em { color: #38d9a9; font-style: normal; }

.jq-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--s8);
    padding-top: var(--s6);
    border-top: 1px solid rgba(255,255,255,.07);
}
.jq-btn {
    padding: 9px 20px;
    border-radius: var(--r-full);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255,255,255,.07);
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.1);
    transition: background var(--tx), color var(--tx);
}
.jq-btn:hover:not(:disabled) { background: rgba(255,255,255,.14); color: white; }
.jq-btn:disabled { opacity: .3; cursor: not-allowed; }
.jq-next { background: rgba(0,184,144,.12); color: #38d9a9; border-color: rgba(0,184,144,.22); }
.jq-next:hover:not(:disabled) { background: rgba(0,184,144,.22); color: #38d9a9; }

.jq-dots { display: flex; gap: 6px; }
.jq-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.15); transition: background var(--tx), transform var(--tx); }
.jq-dot-active { background: var(--brand); transform: scale(1.3); }

/* Bridge (shown after Q5) */
.jq-bridge {
    max-width: 720px;
    margin: 0 auto;
    height: 0; overflow: hidden;          /* reserve no space until revealed */
    opacity: 0;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.jq-bridge.jq-bridge-visible { height: auto; overflow: visible; margin-top: var(--s6); opacity: 1; pointer-events: all; transform: none; }
.jq-bridge-inner {
    background: linear-gradient(135deg, rgba(0,184,144,.12), rgba(24,119,242,.08));
    border: 1px solid rgba(0,184,144,.22);
    border-radius: var(--r-2xl);
    padding: var(--s10);
    text-align: center;
}
.jq-bridge-icon { font-size: 2.5rem; margin-bottom: var(--s4); }
.jq-bridge-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: white; margin-bottom: var(--s4); }
.jq-bridge-body { font-size: 0.95rem; color: rgba(255,255,255,.55); line-height: 1.7; max-width: 480px; margin: 0 auto var(--s7); }
.jq-bridge-actions { display: flex; justify-content: center; align-items: center; gap: var(--s4); flex-wrap: wrap; }
.jq-restart-btn { background: none; border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.45); padding: 10px 20px; border-radius: var(--r-full); font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background var(--tx), color var(--tx); }
.jq-restart-btn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.75); }

/* ═══════════════════════════════════════════════════════════
   JARVI3 — AIRPLANE SECTION
═══════════════════════════════════════════════════════════ */
.airplane-section {}
.airplane-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--s16); align-items: center; }
.airplane-quote-col {
    background: linear-gradient(140deg, var(--blue-subtle), var(--brand-subtle));
    border-radius: var(--r-2xl);
    padding: var(--s10);
    border: 1px solid rgba(0,184,144,.15);
}
.aq-orb { font-size: 3rem; margin-bottom: var(--s5); display: block; }
.aq-text {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-weight: 600;
    color: var(--text-1);
    line-height: 1.55;
    letter-spacing: -.3px;
    margin-bottom: var(--s5);
    font-style: normal;
    border: none;
    padding: 0;
}
.aq-attr { font-size: 0.82rem; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 1px; }

.airplane-principles { display: flex; flex-direction: column; gap: var(--s5); margin-top: var(--s8); }
.ap-item { display: flex; align-items: flex-start; gap: var(--s4); }
.ap-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; }
.ap-item strong { display: block; font-size: 0.92rem; font-weight: 700; margin-bottom: 3px; }
.ap-item p { font-size: 0.85rem; color: var(--text-2); line-height: 1.55; margin: 0; }

/* ═══════════════════════════════════════════════════════════
   JARVI3 — WOW SECTION
═══════════════════════════════════════════════════════════ */
.j3-wow-section {
    background: linear-gradient(160deg, var(--navy) 0%, #030810 60%, #050d05 100%);
    padding: var(--s24) 0;
    position: relative;
    overflow: hidden;
    text-align: center;
    z-index: 1;
}
.wow-container { position: relative; z-index: 2; }
.wow-headline { font-size: clamp(1.8rem, 4.5vw, 3.2rem); margin: var(--s5) 0 var(--s3); }
.wow-sub { font-size: 0.92rem; color: rgba(255,255,255,.35); max-width: 560px; margin: 0 auto var(--s12); line-height: 1.7; }

.wow-counters {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: var(--s5);
    max-width: 800px;
    margin: 0 auto var(--s12);
}
.wow-cc {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-xl);
    padding: var(--s7) var(--s5);
    transition: background var(--tx-md);
}
.wow-cc-main {
    background: rgba(0,184,144,.07);
    border-color: rgba(0,184,144,.2);
    transform: scale(1.04);
    box-shadow: 0 0 40px rgba(0,184,144,.12);
}
.wow-cc-icon { font-size: 1.8rem; margin-bottom: var(--s3); }
.wow-cc-val {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 800;
    color: white;
    letter-spacing: -1px;
    line-height: 1;
    margin-bottom: var(--s2);
    font-variant-numeric: tabular-nums;
}
.wow-cc-lbl { font-size: 0.75rem; color: rgba(255,255,255,.35); font-weight: 500; }

.wow-divider {
    width: 1px;
    height: 60px;
    background: linear-gradient(to bottom, transparent, rgba(0,184,144,.3), transparent);
    margin: 0 auto var(--s8);
}
.wow-close-text {
    max-width: 560px;
    margin: 0 auto var(--s10);
}
.wow-close-text p {
    font-size: 1.15rem;
    color: rgba(255,255,255,.5);
    line-height: 1.8;
    margin-bottom: var(--s1);
}
.wow-close-text strong { color: white; font-size: 1.25rem; }
.wow-actions { display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s6); }
.wow-cta { padding: 16px 36px; font-size: 1rem; box-shadow: 0 0 40px rgba(0,184,144,.35); }
.wow-footnote { font-size: 0.7rem; color: rgba(255,255,255,.18); }

/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM — NEW SECTIONS
═══════════════════════════════════════════════════════════ */
.badge-vision { background: rgba(139,92,246,.1); color: #7c3aed; border: 1px solid rgba(139,92,246,.22); }
.eco-icon-purple { background: rgba(139,92,246,.1); }
.eco-card-vision { border-style: dashed; border-color: var(--border); }
.eco-card-vision:hover { border-style: solid; border-color: rgba(139,92,246,.25); }

/* Funding flywheel */
.section-funds { position: relative; overflow: hidden; background: var(--surface); z-index: 1; }
.funds-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 50% 0%, rgba(0,184,144,.08), transparent 55%),
        radial-gradient(circle at 85% 90%, rgba(24,119,242,.06), transparent 45%);
}
.section-funds .container { position: relative; z-index: 1; }

.funds-flywheel {
    position: relative;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s6);
    margin-bottom: var(--s8);
}
/* animated flow track behind the orbs */
.funds-track {
    position: absolute; top: 44px; left: 16%; right: 16%; height: 3px;
    background: linear-gradient(90deg, var(--brand), var(--blue), #0ca678);
    border-radius: 99px; opacity: .35; z-index: 0; overflow: visible;
}
.funds-pulse {
    position: absolute; top: 50%; left: 0; width: 12px; height: 12px;
    margin-top: -6px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 12px 3px rgba(0,184,144,.8);
    animation: fundsPulse 3.2s var(--ease) infinite;
}
@keyframes fundsPulse { 0% { left: 0; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.fs-step { position: relative; z-index: 1; text-align: center; padding: 0 var(--s3); }
.fs-orb {
    position: relative; width: 88px; height: 88px; margin: 0 auto var(--s5);
    border-radius: 50%; display: grid; place-items: center;
    box-shadow: 0 10px 30px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.4);
    border: 4px solid var(--surface);
    transition: transform var(--tx-md), box-shadow var(--tx-md);
}
.fs-step:hover .fs-orb { transform: translateY(-4px) scale(1.04); }
.fs-emoji { font-size: 2.2rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.fs-num {
    position: absolute; top: -4px; right: -4px;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--surface); color: var(--text-1);
    font-family: var(--font-display); font-size: 0.82rem; font-weight: 800;
    display: grid; place-items: center; box-shadow: var(--sh-sm);
    border: 1px solid var(--border);
}
.fs-green .fs-orb { background: linear-gradient(140deg, #00c79b, var(--brand-dark)); }
.fs-blue  .fs-orb { background: linear-gradient(140deg, #4aa3ff, var(--blue-mid)); }
.fs-teal  .fs-orb { background: linear-gradient(140deg, #2fd6bf, #0ca678); }
.fs-green .fs-orb { box-shadow: 0 10px 30px rgba(0,184,144,.3), inset 0 1px 0 rgba(255,255,255,.4); }
.fs-blue  .fs-orb { box-shadow: 0 10px 30px rgba(24,119,242,.3), inset 0 1px 0 rgba(255,255,255,.4); }
.fs-teal  .fs-orb { box-shadow: 0 10px 30px rgba(12,166,120,.3), inset 0 1px 0 rgba(255,255,255,.4); }
.fs-title { font-size: 1.08rem; font-weight: 700; margin-bottom: var(--s3); letter-spacing: -.3px; }
.fs-desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.62; max-width: 280px; margin: 0 auto var(--s4); }
.fs-tag {
    display: inline-block; font-size: 0.7rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .8px;
    padding: 4px 12px; border-radius: var(--r-full);
}
.fs-green .fs-tag { background: var(--brand-subtle); color: var(--brand-dark); }
.fs-blue  .fs-tag { background: var(--blue-subtle); color: var(--blue-mid); }
.fs-teal  .fs-tag { background: rgba(12,166,120,.1); color: #0ca678; }

.funds-loop {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    max-width: 560px; margin: 0 auto; text-align: center;
    background: linear-gradient(135deg, var(--brand-subtle), var(--blue-subtle));
    border: 1px solid var(--brand-border); border-radius: var(--r-full);
    padding: var(--s4) var(--s7); font-size: 0.92rem; font-weight: 600; color: var(--text-1);
}
.funds-loop svg { color: var(--brand-dark); flex-shrink: 0; }

/* KureAcademy card */
.academy-pillars { display: flex; flex-direction: column; gap: var(--s5); margin-top: var(--s8); }
.acp { display: flex; align-items: flex-start; gap: var(--s4); }
.acp-icon { font-size: 1.5rem; flex-shrink: 0; line-height: 1.2; }
.acp strong { display: block; font-size: 0.92rem; font-weight: 700; margin-bottom: 3px; }
.acp p { font-size: 0.85rem; color: var(--text-2); line-height: 1.55; margin: 0; }

.academy-card {
    background: linear-gradient(145deg, #0a0a1a, #0d1220);
    border-radius: var(--r-2xl);
    padding: var(--s8);
    border: 1px solid rgba(139,92,246,.2);
    box-shadow: 0 20px 60px rgba(0,0,0,.25), 0 0 40px rgba(139,92,246,.06);
}
.ac-photo {
    height: 200px; margin: calc(var(--s8) * -1) calc(var(--s8) * -1) var(--s7);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    background-size: cover; background-position: center; position: relative;
    display: flex; align-items: flex-end;
}
.ac-photo::after { content:''; position:absolute; inset:0; border-radius: var(--r-2xl) var(--r-2xl) 0 0; background: linear-gradient(180deg, rgba(10,10,26,.1), rgba(10,10,26,.85)); }
.ac-photo-tag { position: relative; z-index: 1; padding: var(--s5); font-size: 0.85rem; font-weight: 600; color: rgba(255,255,255,.92); }
.ac-head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s7); }
.ac-orb { font-size: 2rem; width: 48px; height: 48px; background: rgba(139,92,246,.12); border: 1px solid rgba(139,92,246,.22); border-radius: var(--r-lg); display: grid; place-items: center; flex-shrink: 0; }
.ac-title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: white; }
.ac-sub { font-size: 0.73rem; color: rgba(255,255,255,.3); margin-top: 2px; }

.ac-modules { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s6); }
.ac-module { display: flex; align-items: center; gap: var(--s3); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: var(--r-md); padding: var(--s3) var(--s4); color: rgba(255,255,255,.7); font-size: 0.85rem; font-weight: 500; }
.ac-module-locked { opacity: .45; border-style: dashed; }
.acm-icon { font-size: 1rem; flex-shrink: 0; }
.ac-footer { border-top: 1px solid rgba(255,255,255,.06); padding-top: var(--s5); }
.ac-tag { font-size: 0.75rem; color: rgba(255,255,255,.28); }

/* ═══════════════════════════════════════════════════════════
   20-YEAR CLIMATE PROJECTION
═══════════════════════════════════════════════════════════ */
.j3-projection-section {
    background: linear-gradient(180deg, var(--navy) 0%, #030810 100%);
    padding: var(--s24) 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Metric tabs */
.proj-metric-tabs {
    display: inline-flex;
    gap: 4px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-full);
    padding: 4px;
    margin-bottom: var(--s8);
}
.proj-tab {
    padding: 9px 22px;
    border-radius: var(--r-full);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background: none;
    border: none;
    color: rgba(255,255,255,.45);
    transition: background var(--tx), color var(--tx);
    white-space: nowrap;
}
.proj-tab-active { background: var(--brand); color: white; box-shadow: 0 2px 12px rgba(0,184,144,.35); }
.proj-tab:hover:not(.proj-tab-active) { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }

/* Chart area */
.proj-chart-wrap {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-xl);
    padding: var(--s5) var(--s5) 0;
    margin-bottom: var(--s5);
    overflow: hidden;
    position: relative;
}
.proj-y-label {
    font-size: 0.72rem;
    color: rgba(255,255,255,.25);
    letter-spacing: .5px;
    margin-bottom: var(--s2);
    padding-left: var(--s3);
}
.proj-chart-inner { position: relative; cursor: crosshair; }
.proj-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Interactive crosshair + tooltip */
.proj-crosshair {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(180deg, transparent, rgba(56,217,169,.7), transparent);
    pointer-events: none; opacity: 0; transform: translateX(-0.5px);
    transition: opacity 0.15s ease; z-index: 3;
}
.proj-crosshair-show { opacity: 1; }
.proj-tip {
    position: absolute; bottom: calc(100% + 12px); transform: translateX(-50%);
    background: rgba(8,14,24,.96); backdrop-filter: blur(8px);
    border: 1px solid rgba(56,217,169,.28); border-radius: var(--r-lg);
    padding: var(--s4) var(--s5); min-width: 240px;
    box-shadow: var(--sh-xl); pointer-events: none; z-index: 6;
    opacity: 0; transition: opacity 0.15s ease;
}
.proj-tip-show { opacity: 1; }
.proj-tip-year { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: #fff; margin-bottom: var(--s2); }
.proj-tip-row { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: rgba(255,255,255,.6); padding: 2px 0; }
.proj-tip-row b { margin-left: auto; color: #fff; font-family: var(--font-display); font-weight: 700; }
.pt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.pt-worst b { color: #ff8585; }
.proj-tip-sep { height: 1px; background: rgba(255,255,255,.1); margin: var(--s2) 0; }
.proj-tip-drain { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.4); margin-bottom: 2px; }
.proj-tip-foot { font-size: 0.72rem; color: rgba(56,217,169,.85); margin-top: var(--s2); line-height: 1.4; }
.proj-milestones {
    position: absolute;
    top: var(--s2); right: var(--s3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 280px;
}
.proj-milestone {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,184,144,.12);
    border: 1px solid rgba(0,184,144,.25);
    border-radius: var(--r-full);
    padding: 4px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #38d9a9;
    animation: projMilestoneIn 0.4s ease;
    white-space: nowrap;
}
@keyframes projMilestoneIn { from { opacity:0; transform:translateX(10px) } to { opacity:1; transform:none } }

.proj-x-labels {
    display: flex;
    justify-content: space-between;
    padding: var(--s2) var(--s3) var(--s4);
    font-size: 0.7rem;
    color: rgba(255,255,255,.25);
    font-weight: 600;
}

/* Year slider */
.proj-slider-wrap { text-align: center; margin-bottom: var(--s8); }
.proj-slider-label { display: block; font-size: 0.85rem; color: rgba(255,255,255,.45); margin-bottom: var(--s3); }
.proj-slider-label strong { color: var(--brand); font-size: 1.1rem; font-family: var(--font-display); }
.proj-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; max-width: 600px;
    height: 6px;
    border-radius: var(--r-full);
    background: rgba(255,255,255,.12);
    outline: none; cursor: pointer;
}
.proj-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--brand); border: 3px solid white;
    box-shadow: 0 2px 10px rgba(0,184,144,.5); cursor: grab;
    transition: transform var(--tx), box-shadow var(--tx);
}
.proj-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }

/* Scenario cards */
.proj-scenarios {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: var(--s4);
    margin-bottom: var(--s8);
}
.proj-models { grid-template-columns: repeat(4, 1fr); }

/* Legend */
.proj-legend { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-bottom: var(--s5); }
.proj-leg {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-full); padding: 6px 14px;
    font-size: 0.82rem; font-weight: 600; color: rgba(255,255,255,.7);
    cursor: pointer; transition: background var(--tx), border-color var(--tx), color var(--tx);
}
.proj-leg em { font-style: normal; font-weight: 400; color: rgba(255,255,255,.4); font-size: 0.92em; }
.proj-leg-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c); flex-shrink: 0; box-shadow: 0 0 8px var(--c); }
.proj-leg:hover { background: rgba(255,255,255,.1); color: #fff; border-color: var(--c); }

/* Per-model card accents + focus */
.proj-mc { border-top: 3px solid var(--c); transition: transform var(--tx-md), background var(--tx-md), box-shadow var(--tx-md); }
.proj-mc-focus { transform: translateY(-4px); background: rgba(255,255,255,.08); box-shadow: 0 12px 36px rgba(0,0,0,.3); }
.proj-mc .proj-sc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.proj-line { transition: opacity var(--tx), stroke-width var(--tx); }
.proj-tip-row.pt-focus b { color: #fff; }
.proj-tip-row.pt-focus { background: rgba(255,255,255,.06); border-radius: 5px; margin: 0 -6px; padding-left: 6px; padding-right: 6px; }
.proj-sc {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--r-xl);
    padding: var(--s6);
    position: relative;
    transition: background var(--tx-md);
}
.proj-sc-featured {
    background: rgba(0,184,144,.07);
    border-color: rgba(0,184,144,.25);
    transform: scale(1.03);
    box-shadow: 0 8px 40px rgba(0,184,144,.12);
}
.proj-sc-banner {
    position: absolute;
    top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--brand);
    color: white;
    font-size: 0.68rem; font-weight: 800;
    padding: 3px 12px; border-radius: var(--r-full);
    text-transform: uppercase; letter-spacing: 1px;
    white-space: nowrap;
}
.proj-sc-dot {
    width: 10px; height: 10px; border-radius: 50%; margin-bottom: var(--s3);
}
.proj-sc-conservative .proj-sc-dot { background: #64748b; }
.proj-sc-realistic    .proj-sc-dot { background: var(--brand); box-shadow: 0 0 8px var(--brand); }
.proj-sc-global       .proj-sc-dot { background: #38d9a9; box-shadow: 0 0 8px #38d9a9; }
.proj-sc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s3); gap: var(--s2); flex-wrap: wrap; }
.proj-sc-name { font-size: 0.8rem; font-weight: 700; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .8px; }
.proj-sc-adoption { font-size: 0.72rem; color: rgba(255,255,255,.3); font-family: var(--font-mono); }
.proj-sc-val {
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 2vw, 1.6rem);
    font-weight: 800;
    color: white;
    letter-spacing: -.5px;
    line-height: 1.1;
    margin-bottom: var(--s2);
    min-height: 1.8rem;
}
.proj-sc-featured .proj-sc-val { color: #38d9a9; }
.proj-sc-equiv { font-size: 0.8rem; color: rgba(255,255,255,.4); line-height: 1.5; min-height: 2.5rem; margin-bottom: var(--s3); }
.proj-sc-annual { font-size: 0.72rem; color: rgba(255,255,255,.25); font-family: var(--font-mono); border-top: 1px solid rgba(255,255,255,.06); padding-top: var(--s3); }

/* Context comparison */
.proj-context {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: var(--r-xl);
    padding: var(--s7) var(--s8);
    margin-bottom: var(--s6);
}
.proj-ctx-label { font-size: 0.78rem; color: rgba(255,255,255,.35); margin-bottom: var(--s5); font-weight: 600; }
.pctx-row { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: var(--s4); margin-bottom: var(--s3); }
.pctx-label { font-size: 0.78rem; color: rgba(255,255,255,.38); text-align: right; }
.pctx-label strong { color: rgba(255,255,255,.7); }
.pctx-bar-wrap { height: 12px; background: rgba(255,255,255,.06); border-radius: var(--r-full); overflow: hidden; }
.pctx-bar { height: 100%; border-radius: var(--r-full); transition: width 0.8s ease; }
.pctx-ref    { background: rgba(255,255,255,.18); }
.pctx-jarvi3 { background: linear-gradient(90deg, var(--brand), #38d9a9); box-shadow: 0 0 8px rgba(0,184,144,.4); }
.pctx-jarvi3-row .pctx-label { color: rgba(255,255,255,.7); }

.proj-footnote {
    font-size: 0.71rem;
    color: rgba(255,255,255,.2);
    line-height: 1.65;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

/* Share this future bar */
.proj-share {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s6);
    flex-wrap: wrap;
    background: linear-gradient(135deg, rgba(0,184,144,.1), rgba(24,119,242,.06));
    border: 1px solid rgba(0,184,144,.22);
    border-radius: var(--r-2xl);
    padding: var(--s7) var(--s8);
    margin-bottom: var(--s8);
}
.proj-share-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: white; margin-bottom: 4px; }
.proj-share-sub { font-size: 0.88rem; color: rgba(255,255,255,.5); line-height: 1.5; }
.proj-share-sub em { color: #38d9a9; font-style: normal; }
.proj-share-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
.proj-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: var(--r-full);
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.14);
    transition: background var(--tx), color var(--tx), transform var(--tx);
    white-space: nowrap;
}
.proj-share-btn:hover { background: rgba(255,255,255,.16); color: white; transform: translateY(-1px); }
.proj-share-primary { background: var(--brand); color: white; border-color: transparent; box-shadow: 0 4px 16px rgba(0,184,144,.35); }
.proj-share-primary:hover { background: var(--brand-mid); box-shadow: 0 6px 22px rgba(0,184,144,.5); }

/* Snapshot modal */
.proj-modal {
    position: fixed; inset: 0;
    z-index: 1500;
    display: flex; align-items: center; justify-content: center;
    padding: var(--s5);
    opacity: 0; pointer-events: none;
    transition: opacity var(--tx-md);
}
.proj-modal-open { opacity: 1; pointer-events: all; }
.proj-modal-backdrop { position: absolute; inset: 0; background: rgba(3,8,16,.85); backdrop-filter: blur(8px); }
.proj-modal-card {
    position: relative;
    z-index: 1;
    background: var(--navy-2);
    border: 1px solid rgba(0,184,144,.2);
    border-radius: var(--r-2xl);
    padding: var(--s8);
    max-width: 720px;
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 32px 100px rgba(0,0,0,.6);
    transform: scale(0.96);
    transition: transform var(--tx-md);
}
.proj-modal-open .proj-modal-card { transform: scale(1); }
.proj-modal-close {
    position: absolute; top: var(--s5); right: var(--s5);
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.6);
    border: none; cursor: pointer; font-size: 0.9rem;
    transition: background var(--tx), color var(--tx);
}
.proj-modal-close:hover { background: rgba(255,255,255,.16); color: white; }
.proj-modal-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: white; margin-bottom: var(--s2); }
.proj-modal-sub { font-size: 0.9rem; color: rgba(255,255,255,.5); line-height: 1.6; margin-bottom: var(--s6); max-width: 480px; }
.proj-canvas-wrap { border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s6); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 8px 32px rgba(0,0,0,.4); }
#proj-canvas { width: 100%; height: auto; display: block; }
.proj-modal-actions { display: flex; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6); }
.proj-modal-cta {
    display: block; text-align: center;
    padding: var(--s4); border-radius: var(--r-lg);
    background: rgba(0,184,144,.1); border: 1px solid rgba(0,184,144,.22);
    color: #38d9a9; font-weight: 700; font-size: 0.95rem;
    text-decoration: none; transition: background var(--tx);
}
.proj-modal-cta:hover { background: rgba(0,184,144,.18); }

/* ═══════════════════════════════════════════════════════════
   LIVING FOREST — TREES SAVED TRACKER
═══════════════════════════════════════════════════════════ */
.forest {
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: var(--s16) 0 150px;   /* extra bottom room for the living treeline */
    background:
        linear-gradient(180deg, rgba(5,34,24,.92) 0%, rgba(7,46,32,.8) 38%, rgba(4,26,18,.97) 100%),
        url('/static/images/photos/nat-forest.webp') center / cover no-repeat;
    z-index: 1;
}
.forest-sky {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 50% 6%, rgba(120,240,200,.18), transparent 42%),
        radial-gradient(circle at 80% 12%, rgba(0,184,144,.12), transparent 40%);
}
/* Generative living-forest canvas (growing trees + drifting light) */
.forest-scene-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.forest-scene-fade {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(125% 75% at 50% 26%, rgba(5,28,19,.15), rgba(4,24,17,.82) 92%);
}
.forest-inner { position: relative; z-index: 2; max-width: 720px; }

.forest-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(56,217,169,.14); border: 1px solid rgba(56,217,169,.4);
    color: #7af0c4; font-size: 0.74rem; font-weight: 800; letter-spacing: 1.2px;
    padding: 6px 16px; border-radius: var(--r-full); margin-bottom: var(--s4);
    text-transform: uppercase;
}
.forest-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 800;
    color: white; letter-spacing: -1.5px; line-height: 1.03; margin-bottom: var(--s3);
}
.forest-sub { font-size: 1rem; color: rgba(255,255,255,.62); line-height: 1.65; max-width: 540px; margin: 0 auto var(--s6); }

/* Hero count — the focal point over the living scene */
.forest-hero-count { margin: var(--s4) 0 var(--s8); }
.forest-num {
    display: block;
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(4rem, 13vw, 8rem); letter-spacing: -3px; line-height: .88;
    background: linear-gradient(135deg, #ffffff 22%, #38d9a9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-variant-numeric: tabular-nums; text-shadow: 0 0 70px rgba(0,184,144,.5);
}
.forest-count-label { display: inline-flex; align-items: center; gap: 8px; font-size: 1.02rem; color: rgba(255,255,255,.66); margin-top: var(--s3); }
.forest-tree-icon { display: inline-block; font-size: 1.3rem; filter: drop-shadow(0 2px 10px rgba(0,184,144,.5)); animation: forestSway 4s ease-in-out infinite; }
@keyframes forestSway { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* Unified live-impact panel */
.forest-panel {
    max-width: 680px; margin: 0 auto var(--s6);
    background: rgba(5,22,15,.62);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--r-2xl);
    padding: var(--s6) var(--s8);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

/* Impact stats — divided row inside the panel */
.forest-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    margin-bottom: var(--s5);
}
.forest-stat { position: relative; padding: 0 var(--s2); }
.forest-stat + .forest-stat::before {
    content: ''; position: absolute; left: 0; top: 12%; height: 76%; width: 1px;
    background: rgba(255,255,255,.1);
}
.fs-icon { font-size: 1.35rem; display: block; margin-bottom: var(--s2); }
.fs-val { font-family: var(--font-display); font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 800; color: white; display: block; line-height: 1; margin-bottom: var(--s2); letter-spacing: -.5px; }
.fs-lbl { font-size: 0.68rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .6px; }

/* Comparison — flush divided section inside the panel */
.forest-vs {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: var(--s5);
}
.forest-vs-title { font-size: 0.86rem; color: rgba(255,255,255,.55); margin-bottom: var(--s4); font-weight: 600; }
.forest-vs-row { display: flex; flex-direction: column; gap: var(--s4); margin-bottom: var(--s4); }
.fvs { text-align: left; }
.fvs-head { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; font-weight: 700; color: white; margin-bottom: var(--s2); }
.fvs-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.fvs-tag { font-size: 0.74rem; font-weight: 500; color: rgba(255,255,255,.4); }
.fvs-bar-track { height: 16px; background: rgba(255,255,255,.08); border-radius: var(--r-full); overflow: hidden; margin-bottom: 4px; }
.fvs-bar { height: 100%; border-radius: var(--r-full); transition: width 1.2s cubic-bezier(.16,1,.3,1); }
.fvs-bar-j3 { background: linear-gradient(90deg, var(--brand), #38d9a9); box-shadow: 0 0 12px rgba(0,184,144,.6); min-width: 6px; }
.fvs-bar-gpt { background: linear-gradient(90deg, #ff7a5c, #ff5050); }
.fvs-val { font-family: var(--font-display); font-size: 1.1rem; font-weight: 800; color: white; }
.forest-vs-punch { font-size: 1.1rem; color: rgba(255,255,255,.7); }
.forest-vs-punch strong { color: #38d9a9; font-family: var(--font-display); font-size: 1.3rem; }

.forest-actions { display: flex; flex-direction: column; align-items: center; gap: var(--s4); margin-bottom: var(--s5); }
.forest-cta {
    background: linear-gradient(135deg, var(--brand), #38d9a9); color: #042018;
    font-weight: 800; font-size: 1.05rem; padding: 16px 38px; border-radius: var(--r-full);
    box-shadow: 0 8px 40px rgba(0,184,144,.45); border: none;
}
.forest-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 50px rgba(0,184,144,.6); }
.forest-link { color: #7af0c4; text-decoration: none; font-weight: 600; font-size: 0.92rem; }
.forest-link:hover { text-decoration: underline; }
.forest-foot { font-size: 0.74rem; color: rgba(255,255,255,.32); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   CO₂ MADE VISIBLE — "Fill the Sky" columns
═══════════════════════════════════════════════════════════ */
.co2viz-section {
    background: linear-gradient(180deg, #0a0e16 0%, #0d1420 55%, #0a1410 100%);
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.co2viz-wrap { max-width: 980px; }
.co2viz-stage {
    position: relative;
    width: 100%;
    height: 400px;
    margin: 0 auto var(--s6);
    border-radius: var(--r-2xl);
    border: 1px solid rgba(255,255,255,.07);
    background:
        radial-gradient(circle at 50% 120%, rgba(0,184,144,.1), transparent 60%),
        linear-gradient(180deg, rgba(255,255,255,.015), rgba(0,0,0,.18));
    overflow: hidden;
}
#co2-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.co2-cols {
    position: absolute; inset: 0; z-index: 2;
    display: grid; grid-template-columns: repeat(4, 1fr);
    pointer-events: none;
}
.co2-col {
    display: flex; flex-direction: column; justify-content: space-between;
    align-items: center; padding: var(--s4) 0 var(--s4);
}
.cc-head { text-align: center; }
.cc-name { display: block; font-size: 0.9rem; font-weight: 700; color: rgba(255,255,255,.82); }
.cc-sub  { display: block; font-size: 0.68rem; color: rgba(255,255,255,.38); margin-top: 1px; }
.co2-col-hero .cc-name { color: #38d9a9; }
.cc-foot { text-align: center; }
.cc-val  { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: #ff9090; letter-spacing: -.5px; }
.cc-val-green { color: #38d9a9; }
.cc-unit { display: block; font-size: 0.62rem; text-transform: uppercase; letter-spacing: .8px; color: rgba(255,255,255,.32); }

.co2-clear-badge {
    position: absolute; left: 50%; bottom: var(--s5); transform: translateX(-50%) translateY(8px);
    z-index: 3; background: rgba(0,184,144,.16); border: 1px solid rgba(0,184,144,.4);
    color: #7af0c4; font-size: 0.75rem; font-weight: 700; padding: 5px 14px; border-radius: var(--r-full);
    opacity: 0; transition: opacity var(--tx), transform var(--tx); pointer-events: none;
}
.co2-clear-badge.co2-clear-show { opacity: 1; transform: translateX(-50%) translateY(0); }

.co2viz-controls { max-width: 640px; margin: 0 auto; text-align: center; }
.co2viz-control-row { display: flex; align-items: center; gap: var(--s5); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s5); }
.co2-slider-group { display: flex; flex-direction: column; gap: 6px; min-width: 240px; flex: 1; max-width: 360px; }
.co2viz-label { font-size: 0.85rem; color: rgba(255,255,255,.55); }
.co2viz-label strong { color: white; font-family: var(--font-display); }
.co2-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 6px; border-radius: 99px;
    background: rgba(255,255,255,.14); outline: none; cursor: pointer;
}
.co2-slider::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: var(--brand); border: 3px solid white; cursor: grab;
    box-shadow: 0 2px 10px rgba(0,184,144,.5);
}
.co2-play-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border-radius: var(--r-full);
    background: var(--brand); color: #042018; border: none; cursor: pointer;
    font-size: 0.9rem; font-weight: 700; white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,184,144,.35); transition: filter var(--tx), transform var(--tx);
}
.co2-play-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.co2-play-btn.co2-playing { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.co2-play-icon { font-size: 0.7rem; }
.co2-play-btn.co2-playing .co2-play-icon::before { content: '⏸'; }
.co2-play-btn.co2-playing .co2-play-icon { font-size: 0; }
.co2-play-btn.co2-playing .co2-play-icon::before { font-size: 0.8rem; }

.co2viz-readout { display: inline-flex; align-items: center; gap: var(--s4); flex-wrap: wrap; justify-content: center; font-size: 0.92rem; color: rgba(255,255,255,.5); }
.co2-ro-bad strong  { color: #ff9090; font-family: var(--font-display); font-size: 1.1rem; }
.co2-ro-good strong { color: #38d9a9; font-family: var(--font-display); font-size: 1.1rem; }
.co2-ro-arrow { color: rgba(255,255,255,.3); }
.co2-ro-mult { color: rgba(255,255,255,.7); }
.co2-ro-mult strong { color: #38d9a9; font-family: var(--font-display); font-size: 1.2rem; }

@media (max-width: 600px) {
    .co2viz-stage { height: 320px; }
    .cc-name { font-size: 0.74rem; }
    .cc-val { font-size: 0.92rem; }
}

/* ═══════════════════════════════════════════════════════════
   EFFICIENCY AUDIT (big models vs personal computer)
═══════════════════════════════════════════════════════════ */
.j3-audit-section {
    background: linear-gradient(170deg, #050a14 0%, var(--navy) 55%, #04140d 100%);
    padding: var(--s24) 0;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.audit-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s4);
    margin-bottom: var(--s10);
}
.audit-card {
    position: relative;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r-xl);
    padding: var(--s6);
    display: flex;
    flex-direction: column;
    transition: transform var(--tx-md), background var(--tx-md), border-color var(--tx-md);
}
.audit-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.06); }
.audit-card-hero {
    background: linear-gradient(160deg, rgba(0,184,144,.14), rgba(0,184,144,.04));
    border-color: rgba(0,184,144,.4);
    box-shadow: 0 12px 50px rgba(0,184,144,.18);
}
.audit-winner-tag {
    position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
    background: var(--brand); color: #042018;
    font-size: 0.68rem; font-weight: 800; letter-spacing: .5px;
    padding: 3px 14px; border-radius: var(--r-full); white-space: nowrap;
    box-shadow: 0 4px 14px rgba(0,184,144,.5);
}
.audit-card-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.audit-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px rgba(255,255,255,.07); }
.audit-name { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; color: white; line-height: 1; }
.audit-model { font-size: 0.72rem; color: rgba(255,255,255,.4); margin-top: 3px; }

.audit-runs {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.74rem; font-weight: 700; padding: 4px 10px; border-radius: var(--r-full);
    margin-bottom: var(--s5); width: fit-content;
}
.audit-runs-cloud { background: rgba(255,90,90,.12); color: #ff9090; border: 1px solid rgba(255,90,90,.25); }
.audit-runs-local { background: rgba(0,184,144,.15); color: #38d9a9; border: 1px solid rgba(0,184,144,.3); }

.audit-meter-row { margin-bottom: var(--s5); }
.audit-meter-label { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.audit-meter-label span { font-size: 0.72rem; color: rgba(255,255,255,.45); }
.audit-meter-label strong { font-family: var(--font-display); font-size: 1.05rem; color: white; font-weight: 800; }
.audit-meter-track { height: 10px; background: rgba(255,255,255,.08); border-radius: var(--r-full); overflow: hidden; }
.audit-meter-fill {
    height: 100%; border-radius: var(--r-full);
    background: linear-gradient(90deg, #ff7a5c, #ff5050);
    transition: width 1s cubic-bezier(.16,1,.3,1);
    min-width: 4px;
}
.audit-meter-hero { background: linear-gradient(90deg, var(--brand), #38d9a9); box-shadow: 0 0 14px rgba(0,184,144,.6); }

.audit-substats { display: flex; gap: var(--s3); margin-bottom: var(--s5); }
.audit-ss { flex: 1; background: rgba(255,255,255,.04); border-radius: var(--r-md); padding: var(--s3); text-align: center; }
.audit-ss-icon { font-size: 0.95rem; display: block; margin-bottom: 2px; }
.audit-ss-val { font-family: var(--font-display); font-size: 0.92rem; font-weight: 800; color: white; display: block; }
.audit-ss-lbl { font-size: 0.66rem; color: rgba(255,255,255,.38); text-transform: uppercase; letter-spacing: .5px; }

.audit-hardware { font-size: 0.74rem; color: rgba(255,255,255,.4); line-height: 1.5; margin-bottom: var(--s4); flex: 1; }
.audit-multiple {
    font-size: 0.8rem; font-weight: 700; text-align: center;
    padding: var(--s3); border-radius: var(--r-md);
    background: rgba(255,90,90,.1); color: #ff9090; border: 1px solid rgba(255,90,90,.2);
}
.audit-multiple-win { background: rgba(0,184,144,.14); color: #38d9a9; border-color: rgba(0,184,144,.3); }

/* Verdict panel */
.audit-verdict {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(0,184,144,.2);
    border-radius: var(--r-2xl);
    padding: var(--s10);
}
.av-headline { display: flex; align-items: flex-start; gap: var(--s5); margin-bottom: var(--s8); }
.av-icon { font-size: 2.4rem; flex-shrink: 0; }
.av-title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 800; color: white; margin-bottom: var(--s2); }
.av-context { font-size: 0.95rem; color: rgba(255,255,255,.55); line-height: 1.6; }
.av-context strong { color: white; }
.av-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-bottom: var(--s6); }
.av-stat { text-align: center; padding: var(--s6) var(--s4); border-radius: var(--r-xl); border: 1px solid rgba(255,255,255,.08); }
.av-stat-bad  { background: rgba(255,90,90,.07); }
.av-stat-good { background: rgba(255,255,255,.04); }
.av-stat-hero { background: rgba(0,184,144,.1); border-color: rgba(0,184,144,.28); }
.av-stat-val { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; letter-spacing: -1px; line-height: 1; margin-bottom: var(--s2); }
.av-stat-bad .av-stat-val  { color: #ff9090; }
.av-stat-good .av-stat-val { color: rgba(255,255,255,.85); }
.av-stat-hero .av-stat-val { color: #38d9a9; }
.av-stat-lbl { font-size: 0.74rem; color: rgba(255,255,255,.45); }
.av-foot { font-size: 0.72rem; color: rgba(255,255,255,.25); line-height: 1.6; text-align: center; }

/* ═══════════════════════════════════════════════════════════
   LIVE DONATION CAMPAIGN (MrBeast-style)
═══════════════════════════════════════════════════════════ */
.campaign {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #041410 0%, var(--navy) 45%, #06140a 100%);
    padding: var(--s24) 0;
    text-align: center;
    z-index: 1;
}
.campaign-mesh { position: absolute; inset: 0; z-index: 0; opacity: .8; }
.campaign-mesh .mb1 { background: radial-gradient(circle, rgba(0,184,144,.35), transparent 70%); top: -10%; left: 10%; }
.campaign-mesh .mb2 { background: radial-gradient(circle, rgba(56,217,169,.25), transparent 70%); bottom: -10%; right: 10%; }
.campaign-grid-bg {
    position: absolute; inset: 0; z-index: 0; opacity: .5;
    background-image:
        linear-gradient(rgba(0,184,144,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,184,144,.04) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at center, black, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at center, black, transparent 80%);
}
.campaign-inner {
    position: relative; z-index: 1;
    max-width: 720px; margin: 0 auto;
    padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
    /* Solid translucent panel — no backdrop-filter (it flickers/vanishes over the animated mesh on Chrome/Windows) */
    background: linear-gradient(180deg, rgba(12,28,22,.66), rgba(7,16,12,.66));
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-2xl);
    box-shadow: 0 30px 80px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
}

.campaign-live-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,184,144,.12);
    border: 1px solid rgba(0,184,144,.35);
    color: #38d9a9;
    font-size: 0.72rem; font-weight: 800; letter-spacing: 1.5px;
    padding: 6px 16px; border-radius: var(--r-full);
    margin-bottom: var(--s5);
    text-transform: uppercase;
}
.cl-dot { width: 8px; height: 8px; border-radius: 50%; background: #38d9a9; animation: blip 1.4s infinite; box-shadow: 0 0 8px #38d9a9; }

.campaign-heading {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5.5vw, 3.6rem);
    font-weight: 800;
    color: white;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin-bottom: var(--s4);
}
.campaign-sub { font-size: 1.02rem; color: rgba(255,255,255,.55); line-height: 1.7; max-width: 580px; margin: 0 auto var(--s6); }

/* What your support builds — info row */
.campaign-funds { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s3); max-width: 760px; margin: 0 auto var(--s9); }
.campaign-fund {
    flex: 1 1 200px; max-width: 240px;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: var(--r-lg);
    padding: var(--s5) var(--s4);
    transition: border-color var(--tx-md), background var(--tx-md), transform var(--tx-md);
}
.campaign-fund:hover { border-color: rgba(0,184,144,.4); background: rgba(0,184,144,.08); transform: translateY(-3px); }
.cf-icon { font-size: 1.6rem; line-height: 1; }
.cf-label { font-size: .95rem; font-weight: 700; color: #fff; }
.cf-desc { font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.4; }
.campaign-first { color: var(--brand); font-weight: 700; }

.campaign-raised {
    display: flex; align-items: flex-start; justify-content: center;
    gap: 4px; line-height: 1; margin-bottom: var(--s3);
}
.cr-currency {
    font-family: var(--font-display); font-weight: 800;
    font-size: clamp(2rem, 5vw, 3.4rem); color: var(--brand-lt, #38d9a9);
    margin-top: clamp(.4rem, 1vw, .8rem);
}
.cr-amount {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(3.2rem, 9vw, 6rem);
    letter-spacing: -2px; line-height: .9;
    background: linear-gradient(135deg, #ffffff 30%, #38d9a9);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 40px rgba(0,184,144,.25);
}
.campaign-of { font-size: 1.05rem; color: rgba(255,255,255,.5); margin-bottom: var(--s8); }
.campaign-of strong { color: white; font-weight: 700; }

/* Progress bar */
.campaign-bar-wrap { max-width: 600px; margin: 0 auto var(--s10); }
.campaign-bar-track {
    height: 22px; border-radius: var(--r-full);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    overflow: hidden; position: relative;
}
.campaign-bar-fill {
    height: 100%; border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--brand), #38d9a9);
    box-shadow: 0 0 20px rgba(0,184,144,.6);
    transition: width 1.4s cubic-bezier(.16,1,.3,1);
    position: relative; overflow: hidden;
    min-width: 6px;
}
.campaign-bar-shimmer {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
    transform: translateX(-100%);
    animation: campaignShimmer 2.2s infinite;
}
@keyframes campaignShimmer { to { transform: translateX(200%); } }
.campaign-bar-labels { display: flex; justify-content: space-between; margin-top: var(--s2); font-size: 0.8rem; color: rgba(255,255,255,.4); font-weight: 600; }
.campaign-bar-labels span:first-child { color: #38d9a9; }

/* Stats */
.campaign-stats { display: flex; align-items: center; justify-content: center; gap: var(--s8); margin-bottom: var(--s10); flex-wrap: wrap; }
.campaign-stat { text-align: center; }
.cs-num { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; color: white; display: block; line-height: 1; letter-spacing: -1px; }
.cs-lbl { font-size: 0.75rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
.campaign-stat-div { width: 1px; height: 44px; background: rgba(255,255,255,.12); }

.campaign-actions { display: flex; justify-content: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.campaign-cta {
    background: linear-gradient(135deg, var(--brand), #38d9a9);
    color: #042018; font-weight: 800; font-size: 1.05rem;
    padding: 16px 38px; border-radius: var(--r-full);
    box-shadow: 0 8px 40px rgba(0,184,144,.45);
    border: none;
}
.campaign-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 50px rgba(0,184,144,.6); }
.campaign-share-btn {
    background: rgba(255,255,255,.08); color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.16); cursor: pointer;
    padding: 16px 28px; border-radius: var(--r-full); font-size: 0.95rem; font-weight: 600;
    transition: background var(--tx), color var(--tx);
}
.campaign-share-btn:hover { background: rgba(255,255,255,.16); color: white; }
.campaign-foot { font-size: 0.82rem; color: rgba(255,255,255,.35); }
.campaign-foot a { color: #38d9a9; text-decoration: none; font-weight: 600; }
.campaign-foot a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   GLOBAL ECONOMIC INSIGHTS
═══════════════════════════════════════════════════════════ */
.econ-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5);
    margin-bottom: var(--s8);
}
.econ-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--s7);
    transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md);
}
.econ-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: rgba(0,184,144,.22); }
.econ-top { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s4); }
.econ-icon { font-size: 1.6rem; line-height: 1; }
.econ-stat {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    background: linear-gradient(135deg, var(--brand-dark), var(--blue));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    line-height: 1;
}
.econ-label { font-size: 0.95rem; font-weight: 700; color: var(--text-1); margin-bottom: var(--s3); line-height: 1.4; }
.econ-detail { font-size: 0.86rem; color: var(--text-2); line-height: 1.65; }

.econ-bottom-line {
    display: flex;
    align-items: flex-start;
    gap: var(--s5);
    background: linear-gradient(135deg, var(--navy), var(--navy-2));
    border-radius: var(--r-2xl);
    padding: var(--s8) var(--s10);
    border: 1px solid rgba(0,184,144,.18);
}
.econ-bl-icon { font-size: 2.2rem; flex-shrink: 0; }
.econ-bl-title { font-family: var(--font-display); font-size: 1.2rem; font-weight: 700; color: white; margin-bottom: var(--s3); }
.econ-bl-text { font-size: 0.92rem; color: rgba(255,255,255,.6); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════
   SPONSOR TIERS
═══════════════════════════════════════════════════════════ */
.sp-tiers {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s4);
    margin-bottom: var(--s6);
}
.sp-tier {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    padding: var(--s8) var(--s6);
    display: flex;
    flex-direction: column;
    transition: transform var(--tx-md), box-shadow var(--tx-md), border-color var(--tx-md);
}
.sp-tier:hover { transform: translateY(-6px); box-shadow: var(--sh-xl); }
.sp-tier-popular { border-color: rgba(0,184,144,.4); box-shadow: 0 8px 40px rgba(0,184,144,.1); }
.sp-tier-green:hover   { border-color: var(--brand-border); }
.sp-tier-teal:hover    { border-color: rgba(12,166,120,.35); }
.sp-tier-blue:hover    { border-color: var(--blue-border); }
.sp-tier-purple:hover  { border-color: rgba(139,92,246,.35); }
.sp-tier-banner {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: var(--brand); color: white;
    font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
    padding: 4px 14px; border-radius: var(--r-full); white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,184,144,.4);
}
.sp-tier-icon { font-size: 2.4rem; line-height: 1; margin-bottom: var(--s4); }
.sp-tier-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; margin-bottom: var(--s2); }
.sp-tier-amount {
    font-family: var(--font-display);
    font-size: 2rem; font-weight: 800; letter-spacing: -1px;
    color: var(--brand-dark); margin-bottom: var(--s3); line-height: 1;
}
.sp-tier-purple .sp-tier-amount { color: #7c3aed; }
.sp-tier-blue .sp-tier-amount { color: var(--blue-mid); }
.sp-tier-blurb { font-size: 0.84rem; color: var(--text-2); line-height: 1.55; margin-bottom: var(--s5); }
.sp-tier-perks { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s6); flex: 1; }
.sp-tier-perks li { font-size: 0.82rem; color: var(--text-2); line-height: 1.45; display: flex; align-items: flex-start; gap: var(--s2); }
.sp-check { color: var(--brand); font-weight: 800; flex-shrink: 0; }
.sp-tier-btn {
    width: 100%;
    padding: 12px;
    border-radius: var(--r-full);
    background: var(--bg);
    color: var(--text-1);
    border: 1.5px solid var(--border);
    font-size: 0.88rem; font-weight: 600; cursor: pointer;
    transition: background var(--tx), color var(--tx), border-color var(--tx), transform var(--tx);
}
.sp-tier-btn:hover { background: var(--brand); color: white; border-color: transparent; transform: translateY(-1px); }
.sp-tier-popular .sp-tier-btn { background: var(--brand); color: white; border-color: transparent; box-shadow: 0 4px 16px rgba(0,184,144,.3); }
.sp-tier-popular .sp-tier-btn:hover { background: var(--brand-mid); }
.sp-tiers-note { text-align: center; font-size: 0.88rem; color: var(--text-2); }
.sp-tiers-note a { color: var(--brand-dark); font-weight: 600; text-decoration: none; }
.sp-tiers-note a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   SUPPORTER WALL
═══════════════════════════════════════════════════════════ */
.wall-toggle {
    display: flex;
    width: fit-content;
    gap: 4px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 4px;
    margin: 0 auto var(--s8);
}
.wall-tab {
    padding: 9px 22px; border-radius: var(--r-full);
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
    background: none; border: none; color: var(--text-2);
    transition: background var(--tx), color var(--tx); white-space: nowrap;
}
.wall-tab-active { background: var(--brand); color: white; box-shadow: 0 2px 10px rgba(0,184,144,.3); }
.wall-tab:hover:not(.wall-tab-active) { background: var(--surface-hover); color: var(--text-1); }

.wall-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.wall-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s5) var(--s6);
    transition: transform var(--tx), box-shadow var(--tx);
    position: relative;
}
.wall-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.wall-green  { border-left-color: var(--brand); }
.wall-teal   { border-left-color: #0ca678; }
.wall-blue   { border-left-color: var(--blue); }
.wall-purple { border-left-color: #9f7aea; }
.wall-card-head { display: flex; align-items: center; gap: var(--s3); }
.wall-tier-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.wall-name-wrap { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.wall-name { font-size: 0.95rem; font-weight: 700; color: var(--text-1); text-decoration: none; }
a.wall-name:hover { color: var(--brand-dark); }
.wall-ext { font-size: 0.75rem; opacity: .5; }
.wall-tier-label { font-size: 0.72rem; color: var(--text-3); font-weight: 500; }
.wall-msg { font-size: 0.82rem; color: var(--text-2); line-height: 1.55; font-style: italic; margin-top: var(--s3); }
.wall-amount { font-family: var(--font-display); font-size: 1rem; font-weight: 800; color: var(--brand-dark); margin-left: auto; flex-shrink: 0; }

/* Ranked (top) view */
.wall-ranked { padding-left: var(--s10); }
.wall-rank {
    position: absolute; left: var(--s4); top: 50%; transform: translateY(-50%);
    font-size: 1.3rem; font-weight: 800; font-family: var(--font-display);
    color: var(--text-3); min-width: 32px; text-align: center;
}

.wall-empty { text-align: center; padding: var(--s16) 0; }
/* Interactive mesh empty state */
.wall-empty-mesh {
    position: relative; overflow: hidden;
    padding: var(--s20) var(--s6);
    border-radius: var(--r-2xl);
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 55%, #07241a 100%);
    border: 1px solid rgba(0,184,144,.18);
}
.mesh-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.wall-empty-content { position: relative; z-index: 1; pointer-events: none; }
.wall-empty-content > * { pointer-events: auto; }
.wall-empty-mesh .wall-empty-icon { font-size: 3rem; filter: drop-shadow(0 0 20px rgba(0,184,144,.5)); }
.wall-empty-mesh .wall-empty-title { color: #fff; }
.wall-empty-mesh .wall-empty-desc { color: rgba(255,255,255,.6); }
.wall-empty-icon { font-size: 3.5rem; margin-bottom: var(--s5); }
.wall-empty-title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-bottom: var(--s3); }
.wall-empty-desc { font-size: 1rem; color: var(--text-2); max-width: 420px; margin: 0 auto var(--s6); line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   SPONSOR APPLICATION
═══════════════════════════════════════════════════════════ */
.sp-apply-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: var(--s16); align-items: start; }
.sp-apply-steps { display: flex; flex-direction: column; gap: var(--s5); margin-top: var(--s8); }
.sp-as { display: flex; align-items: flex-start; gap: var(--s4); }
.sp-as-num {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%; background: var(--brand-subtle); color: var(--brand-dark);
    display: grid; place-items: center; font-weight: 800; font-size: 0.9rem;
    border: 1px solid var(--brand-border);
}
.sp-as strong { display: block; font-size: 0.92rem; margin-bottom: 2px; }
.sp-as p { font-size: 0.84rem; color: var(--text-2); margin: 0; }

.sp-apply-form-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-2xl);
    padding: var(--s8);
    box-shadow: var(--sh-md);
}
.sp-form { display: flex; flex-direction: column; gap: var(--s4); }
.cf-optional { font-weight: 400; color: var(--text-3); font-size: 0.82em; }
.sp-checkbox { display: flex; align-items: center; gap: var(--s3); font-size: 0.85rem; color: var(--text-2); cursor: pointer; }
.sp-checkbox input { width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.sp-submit { justify-content: center; margin-top: var(--s2); }

/* Launch Week */
.launch-hero {
    min-height: 74vh;
    background:
        radial-gradient(780px 560px at 76% 18%, rgba(0,184,144,.20), transparent 60%),
        radial-gradient(700px 520px at 14% 84%, rgba(24,119,242,.18), transparent 62%),
        linear-gradient(108deg, rgba(3,5,12,.95) 0%, rgba(3,5,12,.74) 48%, rgba(5,9,18,.44) 100%),
        url('/static/images/photos/nat-forest.webp') center / cover no-repeat,
        #03050c;
}
.launch-hero-inner { max-width: 760px; }
.launch-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--s4);
    align-items: stretch;
}
.launch-status-grid > * { min-width: 0; }
.launch-status-card,
.launch-metric,
.launch-day-card,
.launch-share-card,
.launch-impact-panel,
.launch-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}
.launch-status-card { padding: var(--s8); }
.launch-status-card h2 {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    line-height: 1.14;
    margin: var(--s2) 0 var(--s3);
    overflow-wrap: anywhere;
}
.launch-status-card p,
.launch-day-card p,
.launch-share-card p {
    color: var(--text-2);
    line-height: 1.65;
}
.lw-card-kicker,
.launch-day-label {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-dark);
}
.launch-metric {
    padding: var(--s6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s2);
}
.launch-metric-value {
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: var(--brand-dark);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.launch-metric-label { color: var(--text-2); font-size: .84rem; line-height: 1.4; }
.launch-sprint-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: var(--s4);
    overflow-x: auto;
    padding-bottom: var(--s2);
}
.launch-day-card {
    min-height: 230px;
    padding: var(--s5);
    transition: transform var(--tx), box-shadow var(--tx), border-color var(--tx);
}
.launch-day-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,184,144,.32);
    box-shadow: var(--sh-md);
}
.launch-day-card h3 {
    font-size: 1.05rem;
    line-height: 1.15;
    margin: var(--s4) 0 var(--s3);
}
.launch-day-card p { font-size: .86rem; }
.launch-share-layout,
.launch-lab,
.launch-join {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: var(--s12);
    align-items: start;
}
.launch-share-stack { display: grid; gap: var(--s4); }
.launch-share-card { padding: var(--s6); }
.launch-copy-btn {
    margin-top: var(--s4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 18px;
    border-radius: var(--r-full);
    background: var(--navy);
    color: #fff;
    font-size: .86rem;
    font-weight: 700;
    transition: transform var(--tx), background var(--tx), box-shadow var(--tx);
}
.launch-copy-btn:hover {
    transform: translateY(-1px);
    background: var(--brand-dark);
    box-shadow: var(--sh-brand);
}
.launch-impact-panel {
    padding: var(--s8);
    display: grid;
    gap: var(--s4);
}
.launch-impact-panel label {
    font-size: .82rem;
    font-weight: 800;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: .06em;
}
.launch-range {
    width: 100%;
    accent-color: var(--brand);
}
.launch-impact-value {
    font-family: var(--font-display);
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--text-1);
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.launch-impact-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s3);
}
.launch-impact-results div {
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: var(--s4);
}
.launch-impact-results strong {
    display: block;
    color: var(--brand-dark);
    font-family: var(--font-display);
    font-size: 1rem;
    line-height: 1.15;
    margin-bottom: 2px;
}
.launch-impact-results span {
    color: var(--text-2);
    font-size: .76rem;
}
.launch-copy-wide { width: fit-content; }
.launch-form {
    padding: var(--s6);
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
}
.launch-form .cf-input { flex: 1; min-width: 0; }

@media (min-width: 961px) {
    .launch-status-grid { grid-template-columns: 1.7fr repeat(3, 1fr); }
}

/* Growth pages: proof, build log, academy, challenge, share kit */
.growth-hero .page-hero-inner { max-width: 760px; min-width: 0; }
.growth-hero .page-h1 { letter-spacing: 0; }
.growth-hero .page-sub { text-wrap: wrap; overflow-wrap: break-word; }
.growth-card-grid {
    display: grid;
    gap: var(--s4);
}
.growth-card-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.growth-card-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.growth-card-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.growth-card-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.growth-card,
.growth-stat-card,
.growth-status-panel,
.growth-ledger-row,
.growth-form-card,
.challenge-panel,
.share-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}
.growth-card {
    padding: var(--s6);
    min-width: 0;
    transition: transform var(--tx), box-shadow var(--tx), border-color var(--tx);
}
.growth-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,184,144,.28);
    box-shadow: var(--sh-md);
}
.growth-card h3,
.share-card h3 {
    font-family: var(--font-display);
    font-size: 1.08rem;
    line-height: 1.18;
    margin: var(--s3) 0 var(--s2);
}
.growth-card p,
.share-card p {
    color: var(--text-2);
    font-size: .9rem;
    line-height: 1.65;
}
.growth-card a,
.growth-link-card {
    color: var(--brand-dark);
    font-weight: 750;
    text-decoration: none;
}
.growth-link-card { display: block; color: inherit; }
.growth-link-card > span {
    color: var(--brand-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.growth-status {
    display: inline-flex;
    width: fit-content;
    padding: 4px 9px;
    border-radius: var(--r-full);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.growth-status-live { background: rgba(0,184,144,.12); color: var(--brand-dark); border: 1px solid var(--brand-border); }
.growth-status-pending { background: rgba(245,158,11,.14); color: #92400e; border: 1px solid rgba(245,158,11,.35); }
.growth-status-internal { background: rgba(24,119,242,.11); color: var(--blue-mid); border: 1px solid var(--blue-border); }
.growth-two-col {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: var(--s12);
    align-items: start;
}
.growth-ledger {
    display: grid;
    gap: var(--s4);
}
.growth-ledger-row {
    padding: var(--s5);
}
.growth-ledger-kicker {
    display: block;
    color: var(--brand-dark);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: var(--s2);
}
.growth-ledger-row h3 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: var(--s2);
}
.growth-ledger-row p {
    color: var(--text-2);
    font-size: .88rem;
    margin-bottom: var(--s4);
}
.growth-meter {
    display: block;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--border-light);
    overflow: hidden;
}
.growth-meter span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--brand), var(--blue));
}
.growth-stat-card {
    padding: var(--s6);
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--s2);
}
.growth-stat-card strong {
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    color: var(--brand-dark);
    line-height: 1;
}
.growth-stat-card span { color: var(--text-2); font-size: .88rem; line-height: 1.45; }
.growth-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    gap: var(--s3);
    align-items: center;
}
.growth-flow div {
    min-height: 78px;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--s3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    font-weight: 800;
}
.growth-flow span {
    width: 22px;
    height: 2px;
    border-radius: var(--r-full);
    background: linear-gradient(90deg, var(--brand), var(--blue));
}
.growth-check-list {
    display: grid;
    gap: var(--s3);
}
.growth-check-list li {
    position: relative;
    padding: var(--s4) var(--s4) var(--s4) 44px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    color: var(--text-2);
    line-height: 1.6;
}
.growth-check-list li::before {
    content: '';
    position: absolute;
    left: 18px; top: 22px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 5px rgba(0,184,144,.12);
}
.growth-status-panel {
    padding: var(--s6);
    display: grid;
    gap: var(--s3);
}
.growth-status-panel div {
    display: flex;
    justify-content: space-between;
    gap: var(--s4);
    padding-bottom: var(--s3);
    border-bottom: 1px solid var(--border-light);
}
.growth-status-panel div:last-child { border-bottom: 0; padding-bottom: 0; }
.growth-status-panel strong { color: var(--text-1); }
.growth-status-panel span { color: var(--text-2); text-align: right; }
.build-log-list {
    display: grid;
    gap: var(--s4);
}
.build-entry {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: var(--s5);
    padding: var(--s6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
}
.build-entry-live { border-color: rgba(0,184,144,.35); box-shadow: var(--sh-md); }
.build-entry-date {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
}
.build-entry-date span {
    color: var(--brand-dark);
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .76rem;
}
.build-entry-date time { color: var(--text-3); font-size: .84rem; }
.build-entry-body h3 {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin-bottom: var(--s2);
}
.build-entry-body p { color: var(--text-2); line-height: 1.65; }
.build-entry-body a { display: inline-flex; margin-top: var(--s3); color: var(--brand-dark); font-weight: 750; text-decoration: none; }
.growth-module-num {
    display: inline-flex;
    color: var(--brand-dark);
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 850;
    margin-bottom: var(--s3);
}
.growth-form-card {
    padding: var(--s6);
    display: grid;
    gap: var(--s3);
}
.challenge-layout {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: var(--s12);
    align-items: start;
}
.challenge-panel {
    padding: var(--s8);
    display: grid;
    gap: var(--s4);
}
.challenge-panel label {
    font-size: .78rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-2);
}
.challenge-query-row {
    display: flex;
    align-items: center;
    gap: var(--s3);
}
.challenge-query-row span { color: var(--text-2); font-size: .88rem; white-space: nowrap; }
.challenge-results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s3);
}
.challenge-results div {
    padding: var(--s4);
    background: var(--bg);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
}
.challenge-results strong {
    display: block;
    color: var(--brand-dark);
    font-family: var(--font-display);
    font-size: 1.1rem;
    line-height: 1.15;
}
.challenge-results span { color: var(--text-2); font-size: .76rem; }
.challenge-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
}
.challenge-disclaimer {
    color: var(--text-3);
    font-size: .78rem;
    line-height: 1.5;
}
.challenge-presets button {
    text-align: left;
    padding: var(--s5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-sm);
    transition: transform var(--tx), border-color var(--tx);
}
.challenge-presets button:hover { transform: translateY(-2px); border-color: rgba(0,184,144,.3); }
.challenge-presets strong { display: block; font-size: .95rem; margin-bottom: 2px; }
.challenge-presets span { color: var(--text-2); font-size: .82rem; }
.share-card {
    padding: var(--s6);
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}
.share-card p { flex: 1; }
.share-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
}
.share-card button,
.share-card a,
.growth-link-list button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border-radius: var(--r-full);
    background: var(--navy);
    color: #fff;
    font-size: .84rem;
    font-weight: 750;
    text-decoration: none;
}
.share-card a { background: var(--brand-dark); }
.growth-link-list {
    display: grid;
    gap: var(--s3);
}
.growth-link-list button {
    justify-content: space-between;
    width: 100%;
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text-1);
    border: 1px solid var(--border);
}
.growth-link-list button span { color: var(--brand-dark); font-weight: 850; }

/* ─── RESPONSIVE — JARVI3 PAGE ────────────────────────────── */
@media (max-width: 1000px) {
    .j3ph-inner { grid-template-columns: 1fr; gap: var(--s10); }
    .j3ph-achievements { flex-direction: row; flex-wrap: wrap; }
    .j3-ach-card { flex: 1; min-width: 200px; }
    .glm-pipeline { flex-direction: column; align-items: stretch; }
    .glm-pipe-arrow { flex-direction: row; justify-content: center; transform: rotate(90deg); margin: var(--s2) auto; }
    .bench-grid { grid-template-columns: 1fr; }
    .scale-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .j3ph-achievements { flex-direction: column; }
    .glm-lanes { grid-template-columns: 1fr; }
    .comp-row { grid-template-columns: 110px 1fr 70px; }
    .comp-summary { flex-direction: column; }
    .cs-div { width: 80px; height: 1px; margin: 0 auto; }
    .scale-grid { grid-template-columns: 1fr; }
    .ent-grid { grid-template-columns: 1fr; }
    .j3-ach-strip { grid-template-columns: 1fr; }
    .ent-cta-inner { flex-direction: column; text-align: center; }
    .glm-insight { flex-direction: column; gap: var(--s3); }
}

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width:960px) {
    .growth-card-grid-2,
    .growth-card-grid-3,
    .growth-card-grid-4,
    .growth-card-grid-5 { grid-template-columns: 1fr 1fr; }
    .growth-two-col,
    .challenge-layout { grid-template-columns: 1fr; gap: var(--s8); }
    .growth-flow { grid-template-columns: 1fr; }
    .growth-flow span { width: 2px; height: 22px; justify-self: center; }
    .build-entry { grid-template-columns: 1fr; }
    .challenge-results { grid-template-columns: 1fr; }
    .launch-status-grid { grid-template-columns: 1fr 1fr; }
    .launch-status-card { grid-column: 1 / -1; }
    .launch-share-layout,
    .launch-lab,
    .launch-join { grid-template-columns: 1fr; gap: var(--s8); }
    .launch-form { flex-direction: column; }
    .launch-form .cf-input,
    .launch-form .btn { width: 100%; }
    .contact-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr 1fr; }
    .post-layout { grid-template-columns: 1fr; }
    .post-sidebar { position: static; }
    .cf-row-half { flex-direction: column; }
    .calc-input-row { grid-template-columns: 1fr; }
    .calc-results { grid-template-columns: repeat(3, 1fr); }
    .problem-grid { grid-template-columns: 1fr; gap: var(--s10); }
    .airplane-grid { grid-template-columns: 1fr; gap: var(--s10); }
    .wow-counters { grid-template-columns: 1fr 1fr 1fr; gap: var(--s3); }
    .funds-flywheel { grid-template-columns: 1fr; gap: var(--s8); }
    .funds-track { display: none; }
    .proj-scenarios { grid-template-columns: 1fr; gap: var(--s5); }
    .proj-models { grid-template-columns: 1fr 1fr; }
    .proj-sc-featured { transform: none; }
    .proj-milestones { position: static; max-width: none; flex-direction: row; flex-wrap: wrap; margin-top: var(--s3); }
    .pctx-row { grid-template-columns: 130px 1fr; }
    .pctx-label { font-size: 0.72rem; }
    .econ-grid { grid-template-columns: 1fr 1fr; }
    .sp-tiers { grid-template-columns: 1fr 1fr; }
    .wall-grid { grid-template-columns: 1fr 1fr; }
    .sp-apply-grid { grid-template-columns: 1fr; gap: var(--s10); }
    .econ-bottom-line { flex-direction: column; gap: var(--s4); }
    .audit-grid { grid-template-columns: 1fr 1fr; }
    .av-stats { grid-template-columns: 1fr 1fr; }
    .forest-stats { grid-template-columns: 1fr 1fr; gap: var(--s5) 0; }
    .forest-stat + .forest-stat::before { display: none; }
    .forest-count { flex-direction: column; gap: var(--s2); }
    .forest-count-text { align-items: center; }
}
@media (max-width:600px) {
    .growth-card-grid-2,
    .growth-card-grid-3,
    .growth-card-grid-4,
    .growth-card-grid-5 { grid-template-columns: 1fr; }
    .growth-hero .page-hero-inner,
    .growth-hero .page-h1,
    .growth-hero .page-sub,
    .growth-hero .label-chip {
        max-width: 100%;
    }
    .growth-hero .page-h1 {
        font-size: clamp(2rem, 13vw, 2.65rem);
        line-height: 1.06;
    }
    .growth-hero .page-sub {
        font-size: 1rem;
        line-height: 1.65;
    }
    .growth-card,
    .growth-stat-card,
    .growth-status-panel,
    .growth-ledger-row,
    .growth-form-card,
    .challenge-panel,
    .share-card {
        min-width: 0;
        overflow-wrap: anywhere;
    }
    .growth-status-panel div { flex-direction: column; gap: 2px; }
    .growth-status-panel span { text-align: left; }
    .challenge-query-row { flex-direction: column; align-items: stretch; }
    .challenge-share-actions,
    .share-card-actions { flex-direction: column; }
    .share-card button,
    .share-card a,
    .challenge-share-actions .launch-copy-btn { width: 100%; }
    .launch-ribbon {
        justify-content: flex-start;
        gap: var(--s2);
        overflow: hidden;
    }
    .launch-ribbon-copy {
        display: none;
    }
    body.has-launch-ribbon .hero { padding-top: 118px; }
    body.has-launch-ribbon .page-hero { padding-top: calc(118px + var(--s16)); }
    body.has-launch-ribbon .j3-page-hero { padding-top: 118px; }
    .launch-hero .page-hero-inner,
    .launch-status-grid { max-width: 260px; }
    .launch-hero .hero-actions { flex-direction: column; align-items: flex-start; }
    .launch-status-grid { grid-template-columns: 1fr; }
    .launch-impact-results { grid-template-columns: 1fr; }
    .proj-metric-tabs { width: 100%; }
    .proj-tab { flex: 1; padding: 9px 8px; font-size: 0.78rem; }
    .pctx-row { grid-template-columns: 100px 1fr; gap: var(--s2); }
    .econ-grid { grid-template-columns: 1fr; }
    .sp-tiers { grid-template-columns: 1fr; }
    .wall-grid { grid-template-columns: 1fr; }
    .audit-grid { grid-template-columns: 1fr; }
    .av-stats { grid-template-columns: 1fr; }
    .av-headline { flex-direction: column; gap: var(--s3); }
}
@media (max-width:640px) {
    .calc-results { grid-template-columns: 1fr 1fr; }
    .post-share { gap: var(--s2); }
}
@media (max-width:600px) {
    .blog-grid { grid-template-columns: 1fr; }
    .cta-nl-form { flex-direction: column; align-items: center; }
    .cs-actions { flex-direction: column; align-items: center; }
    .cs-nl-form { flex-direction: column; }
}

/* ═══════════════════════════════════════════
   GATES TOPBAR (scrollable)
═══════════════════════════════════════════ */
.gates-topbar {
    display: none;
    background: linear-gradient(135deg, #070d1a 0%, #0e1b2d 100%);
    border-bottom: 1px solid rgba(0, 184, 144, 0.15);
    padding: var(--s4) 0;
    position: sticky;
    top: 84px;
    z-index: 40;
    overflow: hidden;
}
.gates-track {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: 0 var(--s6);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    max-width: 100%;
}
.gates-track::-webkit-scrollbar { display: none; }
.gates-badge {
    display: flex;
    align-items: center;
    gap: var(--s2);
    color: #9af5c0;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: var(--r-sm);
    background: rgba(154, 245, 192, 0.08);
    border: 1px solid rgba(154, 245, 192, 0.2);
}
.gates-dot { color: #9af5c0; }
.gate-chip {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: 8px 14px;
    border-radius: var(--r);
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(0, 184, 144, 0.2);
    color: #d6e6f4;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all var(--tx);
}
.gate-chip:hover {
    background: rgba(0, 184, 144, 0.15);
    border-color: rgba(0, 184, 144, 0.4);
    color: #9af5c0;
}
.gate-chip.gate-chip-live {
    border-color: rgba(154, 245, 192, 0.3);
}
.gate-chip.gate-chip-live:hover {
    background: rgba(154, 245, 192, 0.1);
}
.gate-chip.gate-chip-lab {
    border: 1px solid rgba(139, 92, 246, 0.2);
    background: rgba(139, 92, 246, 0.08);
}
.gate-chip.gate-chip-lab:hover {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    color: #d8b4fe;
}
.gate-icon { font-size: 1.1rem; }
.gate-label { font-weight: 600; }
.gate-status {
    font-size: 0.65rem;
    color: #9af5c0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(154, 245, 192, 0.15);
}
.gate-status.lab {
    color: #d8b4fe;
    background: rgba(139, 92, 246, 0.15);
}
.gates-divider {
    width: 1px;
    height: 20px;
    background: rgba(148, 163, 184, 0.2);
    margin: 0 var(--s2);
    flex-shrink: 0;
}
.gates-scroll-hint {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(to left, rgba(7, 13, 26, 0.8), transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(154, 245, 192, 0.4);
    pointer-events: none;
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* ═══════════════════════════════════════════
   DTL EXPLAINED SECTION
═══════════════════════════════════════════ */
.section-dtl-dark {
    background: linear-gradient(135deg, #070d1a 0%, #0e1b2d 60%, #1a2942 100%);
    padding: var(--s24) 0;
    position: relative;
    overflow: hidden;
}
.section-dtl-dark::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 184, 144, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.dtl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s8);
    margin-top: var(--s12);
    position: relative;
    z-index: 1;
}
.dtl-card {
    background: rgba(30, 41, 59, 0.4);
    border: 1px solid rgba(0, 184, 144, 0.2);
    border-radius: var(--r-lg);
    padding: var(--s8);
    transition: all var(--tx-md);
}
.dtl-card:hover {
    background: rgba(0, 184, 144, 0.1);
    border-color: rgba(0, 184, 144, 0.4);
    transform: translateY(-4px);
}
.dtl-card-icon {
    font-size: 2.2rem;
    margin-bottom: var(--s4);
}
.dtl-card-title {
    color: #9af5c0;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: var(--s3);
    font-family: var(--font-display);
}
.dtl-card-desc {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   GATES WORKFLOW SECTION
═══════════════════════════════════════════ */
.gates-workflow {
    display: flex;
    align-items: center;
    gap: var(--s6);
    margin: var(--s12) 0;
    padding: var(--s8);
    background: rgba(0, 184, 144, 0.04);
    border: 1px solid rgba(0, 184, 144, 0.15);
    border-radius: var(--r-lg);
    flex-wrap: wrap;
    justify-content: center;
}
.gw-step {
    text-align: center;
    flex: 0 1 140px;
}
.gw-num {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: var(--s2);
    font-family: var(--font-display);
}
.gw-icon {
    font-size: 2rem;
    margin-bottom: var(--s3);
}
.gw-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: var(--s2);
    font-family: var(--font-display);
}
.gw-desc {
    font-size: 0.8rem;
    color: var(--text-3);
    line-height: 1.5;
}
.gw-arrow {
    font-size: 1.2rem;
    color: var(--brand);
    opacity: 0.6;
    flex-shrink: 0;
}

.pipeline-visual {
    background: rgba(7, 13, 26, 0.6);
    border: 1px solid rgba(0, 184, 144, 0.2);
    border-radius: var(--r-lg);
    padding: var(--s8);
    margin: var(--s10) 0;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}
.pv-header {
    margin-bottom: var(--s6);
}
.pv-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: #9af5c0;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
.pv-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: var(--s2);
}
.pv-code {
    display: block;
    color: #d6e6f4;
    line-height: 1.8;
    white-space: pre-wrap;
    word-break: break-all;
}
.pv-check {
    color: #9af5c0;
    font-weight: 700;
}

.gates-benefit {
    background: rgba(0, 184, 144, 0.08);
    border-left: 4px solid var(--brand);
    padding: var(--s8);
    border-radius: var(--r);
    margin-top: var(--s10);
}
.gb-content {
    display: flex;
    align-items: flex-start;
    gap: var(--s6);
}
.gb-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}
.gb-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: var(--s3);
    font-family: var(--font-display);
}
.gb-body {
    color: var(--text-2);
    line-height: 1.6;
    font-size: 0.95rem;
}

/* ═══════════════════════════════════════════
   100x VISION SECTION
═══════════════════════════════════════════ */
.section-vision-gradient {
    background: linear-gradient(135deg, #070d1a 0%, #1a3a52 50%, #2d5a3d 100%);
    padding: var(--s24) 0;
    position: relative;
    overflow: hidden;
}
.section-vision-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(800px circle at 20% 50%, rgba(0, 184, 144, 0.1) 0%, transparent 80%),
        radial-gradient(800px circle at 80% 80%, rgba(24, 119, 242, 0.1) 0%, transparent 80%);
    pointer-events: none;
}

.vision-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--s8);
    margin-top: var(--s12);
    position: relative;
    z-index: 1;
}
.vcard-large {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(0, 184, 144, 0.25);
    border-radius: var(--r-lg);
    padding: var(--s8);
    transition: all var(--tx-md);
    position: relative;
    overflow: hidden;
}
.vcard-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--brand), transparent);
    opacity: 0;
    transition: opacity var(--tx-md);
}
.vcard-large:hover {
    background: rgba(0, 184, 144, 0.12);
    border-color: rgba(0, 184, 144, 0.5);
    transform: translateY(-6px);
}
.vcard-large:hover::before {
    opacity: 1;
}
.vcl-num {
    position: absolute;
    top: 16px;
    right: 20px;
    font-size: 3rem;
    font-weight: 700;
    color: rgba(0, 184, 144, 0.2);
    font-family: var(--font-display);
}
.vcl-icon {
    font-size: 2.5rem;
    margin-bottom: var(--s4);
    display: block;
}
.vcl-title {
    color: #9af5c0;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: var(--s3);
    font-family: var(--font-display);
    padding-right: 60px;
}
.vcl-body {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: var(--s5);
}
.vcl-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.vcl-list li {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    padding-left: var(--s4);
    position: relative;
}
.vcl-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #9af5c0;
    font-weight: 700;
}

.multiplier-section {
    background: rgba(0, 184, 144, 0.08);
    border: 1px solid rgba(0, 184, 144, 0.25);
    border-radius: var(--r-lg);
    padding: var(--s8);
    margin: var(--s12) 0;
}
.mult-content {
    max-width: 600px;
}
.mult-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: #9af5c0;
    margin-bottom: var(--s4);
    font-family: var(--font-display);
}
.mult-body {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: var(--s6);
    font-size: 0.95rem;
    line-height: 1.6;
}
.mult-math {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    background: rgba(7, 13, 26, 0.6);
    padding: var(--s6);
    border-radius: var(--r);
    border: 1px solid rgba(0, 184, 144, 0.15);
    font-family: var(--font-mono);
    font-size: 0.9rem;
}
.mm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #d6e6f4;
}
.mm-label {
    flex: 1;
    font-weight: 500;
}
.mm-value {
    font-weight: 700;
    color: #9af5c0;
    font-size: 1.2rem;
}
.mm-note {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-left: var(--s4);
}
.mm-divider {
    height: 1px;
    background: rgba(0, 184, 144, 0.2);
    margin: var(--s2) 0;
}
.mm-row-result {
    padding-top: var(--s2);
    border-top: 1px solid rgba(0, 184, 144, 0.2);
}
.mm-row-result .mm-value {
    font-size: 1.4rem;
}
.mm-subtitle {
    display: block;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

.use-cases {
    margin-top: var(--s12);
}
.uc-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    margin-bottom: var(--s6);
    text-align: center;
    font-family: var(--font-display);
}
.uc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--s6);
}
.uc-card {
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(0, 184, 144, 0.2);
    border-radius: var(--r);
    padding: var(--s6);
    text-align: center;
    transition: all var(--tx);
}
.uc-card:hover {
    background: rgba(0, 184, 144, 0.12);
    border-color: rgba(0, 184, 144, 0.4);
    transform: translateY(-2px);
}
.uc-icon {
    font-size: 2rem;
    margin-bottom: var(--s3);
    display: block;
}
.uc-card h4 {
    color: #9af5c0;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: var(--s2);
    font-family: var(--font-display);
}
.uc-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════
   DTL JOURNEY SECTION
═══════════════════════════════════════════ */
.section-dtl-journey {
    background: linear-gradient(to bottom, rgba(230, 249, 245, 0.03), rgba(0, 184, 144, 0.04));
}
.journey-track {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s6);
    margin: var(--s12) 0;
    flex-wrap: wrap;
}
.journey-step {
    flex: 0 1 160px;
    text-align: center;
    padding: var(--s6);
    border: 1px solid rgba(0, 184, 144, 0.2);
    border-radius: var(--r-lg);
    background: rgba(0, 184, 144, 0.03);
    transition: all var(--tx-md);
}
.journey-step:hover {
    background: rgba(0, 184, 144, 0.08);
    border-color: rgba(0, 184, 144, 0.4);
    transform: translateY(-2px);
}
.js-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--r-full);
    background: var(--brand);
    color: white;
    font-weight: 700;
    margin-bottom: var(--s4);
}
.js-icon {
    font-size: 2rem;
    margin-bottom: var(--s3);
    display: block;
}
.js-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: var(--s2);
    font-family: var(--font-display);
}
.js-body {
    font-size: 0.8rem;
    color: var(--text-3);
    line-height: 1.5;
}
.journey-arrow {
    font-size: 1.4rem;
    color: var(--brand);
    opacity: 0.5;
    flex-shrink: 0;
}
.journey-benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s6);
    margin: var(--s12) 0;
    padding: var(--s8);
    background: rgba(0, 184, 144, 0.08);
    border: 2px solid var(--brand);
    border-radius: var(--r-lg);
}
.jb-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}
.jb-text {
    color: var(--text-1);
    font-size: 1rem;
    line-height: 1.6;
}
.jb-text strong {
    color: var(--brand);
}

/* ═══════════════════════════════════════════
   PROOF CENTER PREVIEW
═══════════════════════════════════════════ */
.proof-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s8);
    margin: var(--s12) 0;
}
.proof-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    padding: var(--s8);
    position: relative;
    overflow: hidden;
    transition: all var(--tx-md);
}
.proof-card:hover {
    border-color: var(--brand);
    box-shadow: 0 8px 24px rgba(0, 184, 144, 0.12);
    transform: translateY(-4px);
}
.pc-badge {
    position: absolute;
    top: var(--s4);
    right: var(--s4);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--brand);
    padding: 4px 8px;
    background: rgba(0, 184, 144, 0.1);
    border-radius: var(--r-sm);
    text-transform: uppercase;
}
.pc-icon {
    font-size: 2.2rem;
    margin-bottom: var(--s4);
}
.pc-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: var(--s3);
    font-family: var(--font-display);
}
.pc-desc {
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.6;
    margin-bottom: var(--s5);
}
.pc-evidence {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    margin: var(--s5) 0;
    padding: var(--s4);
    background: var(--surface-2);
    border-radius: var(--r);
    border-left: 3px solid var(--brand);
}
.pe-item {
    display: flex;
    align-items: center;
    gap: var(--s3);
    font-size: 0.8rem;
    color: var(--text-2);
}
.pe-dot {
    color: var(--brand);
    font-weight: 700;
}
.pe-dot.pending {
    color: #f7d66d;
}
.proof-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    color: var(--brand);
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all var(--tx);
}
.proof-link:hover {
    gap: var(--s3);
    color: var(--brand-mid);
}
.proof-footer {
    text-align: center;
    margin-top: var(--s10);
}

/* ═══════════════════════════════════════════
   CLAIM BOUNDARIES
═══════════════════════════════════════════ */
.boundary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s8);
    margin: var(--s12) 0;
}
.boundary-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--r-lg);
    padding: var(--s8);
    transition: all var(--tx-md);
}
.boundary-proven {
    border-color: rgba(0, 184, 144, 0.3);
}
.boundary-proven:hover {
    border-color: var(--brand);
    background: rgba(0, 184, 144, 0.02);
    box-shadow: 0 8px 24px rgba(0, 184, 144, 0.08);
}
.boundary-pending {
    border-color: rgba(240, 185, 11, 0.3);
}
.boundary-pending:hover {
    border-color: #f7d66d;
    background: rgba(240, 185, 11, 0.02);
    box-shadow: 0 8px 24px rgba(240, 185, 11, 0.08);
}
.boundary-blocked {
    border-color: rgba(246, 70, 93, 0.3);
}
.boundary-blocked:hover {
    border-color: #ff9ba8;
    background: rgba(246, 70, 93, 0.02);
    box-shadow: 0 8px 24px rgba(246, 70, 93, 0.08);
}
.bc-icon {
    font-size: 2rem;
    margin-bottom: var(--s4);
    display: block;
}
.bc-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-1);
    margin-bottom: var(--s4);
    font-family: var(--font-display);
}
.bc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
}
.bc-list li {
    font-size: 0.85rem;
    color: var(--text-2);
    line-height: 1.5;
    padding-left: var(--s4);
    position: relative;
}
.bc-list li::before {
    content: '·';
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--brand);
}
.boundary-proven .bc-list li::before {
    content: '✓';
    color: var(--brand);
}
.boundary-pending .bc-list li::before {
    content: '◐';
    color: #f7d66d;
}
.boundary-blocked .bc-list li::before {
    content: '⊘';
    color: #ff9ba8;
}

.boundary-note {
    background: rgba(0, 184, 144, 0.06);
    border: 1px solid rgba(0, 184, 144, 0.2);
    border-radius: var(--r-lg);
    padding: var(--s8);
    margin-top: var(--s10);
}
.bn-content {
    display: flex;
    align-items: flex-start;
    gap: var(--s6);
}
.bn-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}
.bn-text {
    font-size: 0.9rem;
    color: var(--text-2);
    line-height: 1.6;
}
.bn-text a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}
.bn-text a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════
   JARVI3 TIER SHOWCASE (Futuristic)
═══════════════════════════════════════════ */
.section-tiers {
    background: linear-gradient(135deg, #f0f2f5 0%, #ffffff 50%, #f7f8fa 100%);
    padding: var(--s24) 0;
    position: relative;
    overflow: hidden;
}
.section-tiers::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px circle at 20% 30%, rgba(0, 184, 144, 0.06) 0%, transparent 80%),
        radial-gradient(400px circle at 80% 70%, rgba(24, 119, 242, 0.05) 0%, transparent 80%);
    pointer-events: none;
}

.tiers-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s8);
    margin: var(--s12) 0;
    position: relative;
    z-index: 1;
}

.tier-showcase-card {
    position: relative;
    padding: var(--s8);
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 2px solid rgba(0, 184, 144, 0.15);
    border-radius: var(--r-xl);
    transition: all var(--tx-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--s5);
}

.tier-showcase-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tier-color, var(--brand)), transparent);
    opacity: 0;
    transition: opacity var(--tx-md);
}

.tsc-glow {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--tier-glow, rgba(0, 184, 144, 0.15)) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--tx-md);
}

/* Tier-specific colors */
.tier-showcase-card.tier-echo {
    --tier-color: var(--tier-free);
    --tier-glow: rgba(30, 158, 255, 0.2);
}
.tier-showcase-card.tier-bronze {
    --tier-color: var(--tier-bronze);
    --tier-glow: rgba(205, 127, 50, 0.2);
}
.tier-showcase-card.tier-silver {
    --tier-color: var(--tier-silver);
    --tier-glow: rgba(199, 204, 209, 0.2);
}
.tier-showcase-card.tier-gold {
    --tier-color: var(--tier-gold);
    --tier-glow: rgba(240, 185, 11, 0.25);
}
.tier-showcase-card.tier-platinum {
    --tier-color: var(--tier-platinum);
    --tier-glow: rgba(185, 166, 255, 0.25);
}

.tier-showcase-card:hover {
    border-color: var(--tier-color);
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-8px);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 40px var(--tier-glow);
}

.tier-showcase-card:hover::before {
    opacity: 1;
}

.tier-showcase-card:hover .tsc-glow {
    opacity: 1;
}

.tsc-badge {
    position: absolute;
    top: var(--s4);
    right: var(--s4);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: var(--s2) var(--s4);
    background: linear-gradient(135deg, var(--tier-color), color-mix(in srgb, var(--tier-color) 70%, white));
    color: white;
    border-radius: var(--r-full);
    text-transform: uppercase;
    box-shadow: 0 4px 12px var(--tier-glow);
}

.tsc-badge.premium {
    background: linear-gradient(135deg, #b9a6ff, #d8c0ff);
}

.tsc-top {
    position: relative;
    z-index: 1;
    text-align: center;
}

.tsc-icon {
    font-size: 2.8rem;
    margin-bottom: var(--s3);
    display: block;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.05));
}

.tsc-name {
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--tier-color);
    margin-bottom: var(--s2);
    font-family: var(--font-display);
    letter-spacing: 0.08em;
}

.tsc-tagline {
    font-size: 0.85rem;
    color: var(--text-2);
    font-style: italic;
    margin: 0;
}

.tsc-price {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--s4);
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--r);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.tsc-main {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-1);
    font-family: var(--font-display);
    margin-bottom: var(--s2);
}

.tsc-was {
    text-decoration: line-through;
    color: var(--text-3);
    margin-right: var(--s2);
    font-size: 1rem;
}

.tsc-period {
    font-size: 0.9rem;
    color: var(--text-2);
    font-weight: 500;
}

.tsc-sub {
    font-size: 0.8rem;
    color: var(--text-2);
    margin: 0;
}

.tsc-features {
    position: relative;
    z-index: 1;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--s3);
    flex-grow: 1;
}

.tsc-features li {
    font-size: 0.9rem;
    color: var(--text-2);
    padding-left: var(--s4);
    position: relative;
    line-height: 1.5;
}

.tsc-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--tier-color);
    font-weight: 700;
}

.tsc-cta {
    position: relative;
    z-index: 1;
    padding: var(--s4) var(--s6);
    border: none;
    border-radius: var(--r-lg);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all var(--tx);
    text-transform: uppercase;
    font-family: var(--font-display);
    margin-top: auto;
}

.tsc-cta-primary {
    background: linear-gradient(135deg, var(--tier-color), color-mix(in srgb, var(--tier-color) 80%, white));
    color: white;
    box-shadow: 0 8px 20px var(--tier-glow);
    border: 2px solid var(--tier-color);
}

.tsc-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px var(--tier-glow);
}

.tsc-cta-secondary {
    background: rgba(0, 0, 0, 0.04);
    color: var(--tier-color);
    border: 2px solid var(--tier-color);
}

.tsc-cta-secondary:hover {
    background: var(--tier-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--tier-glow);
}

.tier-compare-note {
    text-align: center;
    margin-top: var(--s10);
    padding: var(--s6);
    background: rgba(0, 184, 144, 0.04);
    border: 1px solid rgba(0, 184, 144, 0.15);
    border-radius: var(--r-lg);
    font-size: 0.9rem;
    color: var(--text-2);
}

.tier-compare-note a {
    color: var(--brand);
    font-weight: 600;
    text-decoration: none;
}

.tier-compare-note a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════
   TIER SELECTION MODAL
═══════════════════════════════════════════ */
.tier-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    animation: fadeIn 200ms var(--ease);
}

.tier-modal-overlay[aria-hidden="false"] {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; backdrop-filter: blur(0px); }
    to { opacity: 1; backdrop-filter: blur(4px); }
}

.tier-modal {
    position: relative;
    background: white;
    border-radius: var(--r-xl);
    padding: var(--s10);
    max-width: 500px;
    width: 90%;
    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.15),
        0 0 60px rgba(0, 184, 144, 0.1);
    border: 2px solid rgba(0, 184, 144, 0.2);
    animation: slideUp 300ms var(--ease);
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tier-modal-close {
    position: absolute;
    top: var(--s4);
    right: var(--s4);
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--r-full);
    font-size: 1.4rem;
    color: var(--text-1);
    cursor: pointer;
    transition: all var(--tx);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tier-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.tm-content {
    text-align: center;
}

.tm-icon {
    font-size: 3.5rem;
    margin-bottom: var(--s5);
    display: block;
    animation: bounce 1s ease-in-out infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.tm-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--text-1);
    margin-bottom: var(--s4);
    font-family: var(--font-display);
    background: linear-gradient(135deg, var(--brand), var(--blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.tm-body {
    font-size: 1rem;
    color: var(--text-2);
    margin-bottom: var(--s8);
    line-height: 1.6;
}

.tm-actions {
    display: flex;
    flex-direction: column;
    gap: var(--s4);
}

.tm-btn {
    padding: var(--s4) var(--s6);
    border: none;
    border-radius: var(--r-lg);
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--tx);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: var(--font-display);
}

.tm-btn-primary {
    background: linear-gradient(135deg, var(--brand), #00a07d);
    color: white;
    box-shadow: 0 8px 20px rgba(0, 184, 144, 0.3);
}

.tm-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 184, 144, 0.4);
}

.tm-btn-secondary {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-1);
    border: 2px solid rgba(0, 0, 0, 0.1);
}

.tm-btn-secondary:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════
   MOBILE RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .tiers-showcase {
        grid-template-columns: 1fr;
        gap: var(--s6);
    }

    .tier-showcase-card {
        padding: var(--s6);
    }

    .tsc-icon {
        font-size: 2.2rem;
    }

    .tsc-name {
        font-size: 1.2rem;
    }

    .tsc-main {
        font-size: 1.4rem;
    }

    .tier-modal {
        width: 95%;
        padding: var(--s8);
    }

    .tm-icon {
        font-size: 2.5rem;
    }

    .tm-title {
        font-size: 1.3rem;
    }

    .gates-topbar {
        top: 70px;
        padding: var(--s3) 0;
    }
    .gates-track {
        padding: 0 var(--s4);
        gap: var(--s2);
    }
    .gates-badge {
        font-size: 0.6rem;
        padding: 5px 8px;
    }
    .gate-chip {
        font-size: 0.75rem;
        padding: 6px 10px;
        gap: var(--s1);
    }
    .gate-icon {
        font-size: 0.9rem;
    }
    .gates-workflow {
        flex-direction: column;
        gap: var(--s4);
        padding: var(--s6);
    }
    .gw-step {
        flex: 1;
        width: 100%;
    }
    .gw-arrow {
        transform: rotate(90deg);
    }
    .dtl-grid {
        grid-template-columns: 1fr;
        gap: var(--s6);
    }
    .vision-cards {
        grid-template-columns: 1fr;
    }
    .vcl-title {
        padding-right: 0;
    }
    .vcl-num {
        position: static;
        font-size: 2rem;
        color: rgba(0, 184, 144, 0.3);
        margin-bottom: var(--s2);
    }
    .uc-grid {
        grid-template-columns: 1fr 1fr;
    }
    .pipeline-visual {
        font-size: 0.75rem;
        padding: var(--s6);
    }
}
@media (max-width: 768px) {
    .journey-track {
        flex-direction: column;
        gap: var(--s4);
    }
    .journey-arrow {
        transform: rotate(90deg);
    }
    .journey-step {
        flex: 1;
        width: 100%;
    }
    .boundary-grid {
        grid-template-columns: 1fr;
    }
    .proof-grid {
        grid-template-columns: 1fr;
    }
    .journey-benefit {
        flex-direction: column;
        text-align: center;
    }
    .bn-content {
        flex-direction: column;
        align-items: center;
    }
    .boundary-note {
        padding: var(--s6);
    }
}
@media (max-width: 480px) {
    .gates-track {
        padding: 0 var(--s3);
    }
    .gate-chip {
        font-size: 0.65rem;
        padding: 5px 8px;
    }
    .gates-badge {
        display: none;
    }
    .uc-grid {
        grid-template-columns: 1fr;
    }
    .mult-math {
        font-size: 0.8rem;
        padding: var(--s4);
    }
    .journey-step {
        flex: 1 100%;
    }
    .pc-title {
        font-size: 0.95rem;
    }
    .pc-desc {
        font-size: 0.8rem;
    }
}

@media (max-width:1100px) {
    .earth-scene { width:460px; height:460px; right:1%; }
    .sat-system { width:460px; height:460px; right:1%; }
    .pcard-grid { grid-template-columns:1fr 1fr; }
    .vgrid { grid-template-columns:1fr 1fr; }
    .eco-grid { grid-template-columns:1fr 1fr; }
    .footer-top { grid-template-columns:1fr 1fr; }
    .tech-grid-full { grid-template-columns:1fr 1fr; }
    .values-grid { grid-template-columns:1fr 1fr; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .steps { grid-template-columns:1fr; }
    .step-connector { display:none; }
}
@media (max-width:768px) {
    .earth-scene { display:none; }
    .sat-system { display:none; }
    .hero-content { padding:var(--s12) 0; }
    .split-grid,.split-reverse { grid-template-columns:1fr; gap:var(--s12); direction:ltr; }
    .split-reverse > * { direction:ltr; }
    .split-reverse .split-visual { order:-1; }
    .pcard-grid { grid-template-columns:1fr; }
    .vgrid { grid-template-columns:1fr 1fr; }
    .eco-grid { grid-template-columns:1fr; }
    .footer-top { grid-template-columns:1fr; gap:var(--s8); }
    .jarvi3-card { flex-direction:column; }
    .j3-terminal { width:100%; min-width:unset; }
    .nav-links { display:none; }
    .nav-hamburger { display:flex; }
    .nav-merch { display:none; } /* lives in the mobile menu instead */
    .tech-feats { grid-template-columns:1fr; }
    .tech-grid-full { grid-template-columns:1fr; }
    .values-grid { grid-template-columns:1fr; }
    .hero-stats { gap:var(--s5); }
    .nl-card { flex-direction:column; gap:var(--s8); }
    .nl-input-row { flex-direction:column; }
}
@media (max-width:480px) {
    .nav-inner {
        gap: var(--s2);
        padding: 0 var(--s4);
    }
    .nav-logo {
        gap: var(--s2);
        min-width: 0;
    }
    .nav-logo-text {
        font-size: 1.05rem;
        letter-spacing: 0;
    }
    .nav-cta { display: none; }
    .nav-hamburger {
        padding: 7px;
        flex-shrink: 0;
    }
    .vgrid { grid-template-columns:1fr; }
    .stats-grid { grid-template-columns:1fr 1fr; }
    .cta-actions { flex-direction:column; align-items:center; }
    .hero-actions { flex-direction:column; }
}
/* EcoKure Merch Store */
.merch-page {
    min-height: 100vh;
    padding: calc(var(--nav-h, 72px) + 112px) 20px 92px;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(0,184,144,.08), transparent 330px),
        linear-gradient(135deg, rgba(7,13,26,.95), rgba(10,26,24,.92));
}
.merch-shell { max-width: 1280px; margin: 0 auto; min-width: 0; }
.merch-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: end;
    margin-bottom: 24px;
    min-width: 0;
}
.merch-hero > * { min-width: 0; }
.merch-kicker {
    color: var(--brand);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.merch-hero h1 {
    font-size: clamp(2.4rem, 6vw, 5.2rem);
    line-height: .95;
    margin: 0 0 16px;
    letter-spacing: 0;
    color: #f4fff9;
}
.merch-lede {
    max-width: 760px;
    color: rgba(238,255,249,.78);
    font-size: clamp(1rem, 1.6vw, 1.16rem);
    line-height: 1.68;
    margin: 0;
}
.merch-proof {
    display: grid;
    gap: 10px;
    min-width: 230px;
}
.merch-proof span,
.merch-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--brand-border);
    border-radius: var(--r-full);
    padding: 9px 14px;
    background: rgba(255,255,255,.06);
    color: rgba(238,255,249,.82);
    font-size: .84rem;
    font-weight: 700;
}
.merch-status {
    min-height: 44px;
    margin-bottom: 16px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    border-radius: 14px;
    border: 1px solid transparent;
    color: rgba(238,255,249,.86);
}
.merch-status:empty { display: none; }
.merch-status[data-tone="ok"] { background: rgba(0,184,144,.14); border-color: rgba(0,184,144,.28); }
.merch-status[data-tone="error"] { background: rgba(255,95,95,.12); border-color: rgba(255,95,95,.26); }
.merch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 22px;
    align-items: start;
    min-width: 0;
}
.merch-products,
.merch-cart {
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(6,17,23,.72);
    box-shadow: 0 24px 80px rgba(0,0,0,.32);
    backdrop-filter: blur(18px);
    min-width: 0;
}
.merch-products {
    border-radius: 26px;
    padding: 22px;
}
.merch-cart {
    border-radius: 22px;
    padding: 18px;
    position: sticky;
    top: calc(var(--nav-h, 72px) + 20px);
}
.merch-section-head,
.merch-cart-head,
.merch-card-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}
.merch-section-head,
.merch-cart-head { margin-bottom: 18px; }
.merch-section-head h2,
.merch-cart-head h2 {
    margin: 2px 0 0;
    font-size: 1.45rem;
    color: #f4fff9;
}
.merch-count {
    color: rgba(238,255,249,.68);
    font-weight: 700;
    font-size: .88rem;
}
.merch-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.merch-card {
    overflow: hidden;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.045);
    transition: transform var(--tx), border-color var(--tx), box-shadow var(--tx);
    min-width: 0;
}
.merch-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0,184,144,.34);
    box-shadow: 0 18px 52px rgba(0,0,0,.32);
}
.merch-card-img {
    display: block;
    width: 100%;
    aspect-ratio: 1.18;
    object-fit: cover;
    background: #07131a;
}
.merch-card-body {
    display: grid;
    gap: 12px;
    padding: 15px;
}
.merch-card-top span {
    color: var(--brand);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.merch-card-top strong { color: rgba(255,255,255,.92); }
.merch-card h3 {
    font-size: 1.05rem;
    line-height: 1.25;
    margin: 0;
    color: #f4fff9;
}
.merch-card p {
    min-height: 43px;
    margin: 0;
    color: rgba(238,255,249,.66);
    line-height: 1.45;
    font-size: .9rem;
}
.merch-variant,
.merch-checkout-form input,
.merch-checkout-form select {
    width: 100%;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    background: rgba(5,15,20,.9);
    color: rgba(255,255,255,.92);
    padding: 12px 13px;
    font: inherit;
}
.merch-add,
.merch-checkout-btn {
    width: 100%;
    justify-content: center;
    background: var(--brand);
    color: white;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 26px rgba(0,184,144,.24);
}
.merch-add:hover,
.merch-checkout-btn:hover {
    background: var(--brand-mid);
    color: white;
}
.merch-checkout-btn:disabled {
    opacity: .65;
    cursor: wait;
}
.merch-cart-items {
    display: grid;
    gap: 10px;
    max-height: 360px;
    overflow: auto;
    padding-right: 4px;
    margin-bottom: 16px;
}
.merch-empty {
    margin: 0;
    color: rgba(238,255,249,.62);
    line-height: 1.55;
}
.merch-line {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
}
.merch-line img {
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 11px;
}
.merch-line strong,
.merch-line span,
.merch-line small { display: block; }
.merch-line strong {
    font-size: .86rem;
    line-height: 1.25;
}
.merch-line span,
.merch-line small {
    color: rgba(238,255,249,.62);
    font-size: .75rem;
}
.merch-stepper {
    display: grid;
    grid-template-columns: 28px 24px 28px;
    align-items: center;
    text-align: center;
    border-radius: var(--r-full);
    background: rgba(0,0,0,.2);
    overflow: hidden;
}
.merch-stepper button {
    width: 28px;
    height: 30px;
    color: white;
    background: rgba(255,255,255,.08);
    border: 0;
    cursor: pointer;
}
.merch-stepper span { font-weight: 800; font-size: .84rem; }
.merch-checkout-form {
    display: grid;
    gap: 12px;
}
.merch-checkout-form label span {
    display: block;
    margin: 0 0 6px;
    color: rgba(238,255,249,.72);
    font-weight: 700;
    font-size: .78rem;
}
.merch-totals {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.08);
}
.merch-totals div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}
.merch-totals dt {
    color: rgba(238,255,249,.62);
}
.merch-totals dd {
    margin: 0;
    color: rgba(255,255,255,.92);
    font-weight: 800;
}
.merch-totals .merch-total {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 9px;
}
.merch-note {
    margin: 0;
    color: rgba(238,255,249,.58);
    font-size: .78rem;
    line-height: 1.45;
}

@media (max-width: 1120px) {
    .merch-layout { grid-template-columns: 1fr; }
    .merch-cart { position: static; }
}
@media (max-width: 860px) {
    .merch-page { padding-inline: 14px; }
    .merch-hero { grid-template-columns: 1fr; }
    .merch-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
    .merch-proof span { padding-inline: 10px; font-size: .76rem; }
    .merch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .nav { overflow: hidden; }
    .nav-inner { width: 100%; max-width: 100%; }
    .launch-ribbon { overflow: hidden; }
    .merch-page { width: 100vw; max-width: 100vw; padding-inline: 10px; }
    .merch-shell { width: calc(100vw - 20px); max-width: calc(100vw - 20px); }
    .merch-hero,
    .merch-layout,
    .merch-products,
    .merch-cart,
    .merch-card { width: 100%; max-width: 100%; }
    .merch-hero h1 { font-size: 2.15rem; }
    .merch-lede { width: 100%; max-width: 100%; font-size: .95rem; overflow-wrap: break-word; }
    .merch-proof { width: 100%; max-width: 100%; }
    .merch-proof span { width: 100%; max-width: 100%; }
    .merch-section-head,
    .merch-cart-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
    .merch-count,
    .merch-pill { align-self: flex-start; }
    .merch-products,
    .merch-cart { padding: 14px; border-radius: 18px; }
    .merch-grid { grid-template-columns: 1fr; }
    .merch-proof { grid-template-columns: 1fr; }
    .merch-card-img { object-fit: contain; }
    .merch-line { grid-template-columns: 52px minmax(0, 1fr); }
    .merch-stepper { grid-column: 1 / -1; justify-self: start; }
}