/* =============================================
   JETPATH — style.css
   Design tokens + full layout
   ============================================= */

/* ===== RESET & BASE ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body { font-family: 'Inter', system-ui, sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; transition: background-color 0.4s, color 0.4s; }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
a { text-decoration: none; }
ul, ol { list-style: none; }
svg { flex-shrink: 0; }
[hidden] { display: none !important; }

/* ===== DESIGN TOKENS ===== */
:root {
    --navy:       #1e3a5f;
    --navy-dark:  #162d4d;
    --navy-light: #2d4f73;
    --teal:       #C9962B;
    --teal-br:    #FFC857;
    --teal-light: #FFE08A;
    --amber:      #d97706;
    --amber-br:   #fbbf24;
    --emerald:    #10b981;
    --rose:       #f43f5e;

    --radius-sm:  6px;
    --radius-md:  12px;
    --radius-lg:  20px;
    --radius-xl:  28px;
    --radius-2xl: 40px;

    --shadow-sm:  0 2px 8px rgba(0,0,0,.15);
    --shadow-md:  0 8px 32px rgba(0,0,0,.2);
    --shadow-lg:  0 16px 64px rgba(0,0,0,.3);
    --shadow-glow: 0 0 40px rgba(255,200,87,.2);

    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --ease-out:    cubic-bezier(.22,1,.36,1);

    --header-h: 68px;

    /* Phone */
    --phone-w:  290px;
    --phone-h:  648px;
    --phone-br: 44px;
    --phone-bd: 2px;

    --phone-sm-w:  248px;
    --phone-sm-h:  555px;
}

/* ===== DARK THEME (default) ===== */
[data-theme="dark"] {
    --bg:          #0d1b2e;
    --bg-2:        #111f34;
    --bg-3:        #162845;
    --surface:     #1b2f4a;
    --surface-2:   #22395a;
    --surface-3:   #2d4f73;
    --border:      rgba(255,255,255,.08);
    --border-2:    rgba(255,255,255,.13);
    --txt:         #f0f4f8;
    --txt-2:       #c8d8e8;
    --txt-3:       #627d98;
    --txt-inv:     #0d1b2e;
    --glow-1:      rgba(201,150,43,.35);
    --glow-2:      rgba(255,200,87,.22);
    --glow-3:      rgba(30,58,95,.5);
    --header-bg:   rgba(13,27,46,.55);
    --nav-logo-filter: none;
    color-scheme: dark;
}

/* ===== LIGHT THEME ===== */
[data-theme="light"] {
    --bg:          #f7f9fc;
    --bg-2:        #eef2f7;
    --bg-3:        #e4eaf2;
    --surface:     #ffffff;
    --surface-2:   #f0f4f8;
    --surface-3:   #e2e8f0;
    --border:      rgba(0,0,0,.07);
    --border-2:    rgba(0,0,0,.12);
    --txt:         #1e3a5f;
    --txt-2:       #4a6380;
    --txt-3:       #7f97b2;
    --txt-inv:     #ffffff;
    --teal:        #B07A10;
    --teal-br:     #B07A10;
    --teal-light:  #C9962B;
    --glow-1:      rgba(201,150,43,.15);
    --glow-2:      rgba(255,200,87,.1);
    --glow-3:      rgba(200,215,230,.5);
    --header-bg:   rgba(247,249,252,.72);
    --nav-logo-filter: none;
    color-scheme: light;
}

body { background: var(--bg); color: var(--txt); }


/* ===== THEME REVEAL ===== */
.theme-reveal {
    position: fixed; inset: 0; z-index: 9998;
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
    will-change: transform;
}

/* ===== TYPOGRAPHY ===== */
h1,h2,h3,h4,h5,h6 { font-family: 'Space Grotesk', sans-serif; line-height: 1.15; }
h1 { font-size: clamp(38px, 7vw, 72px); font-weight: 700; }
h2 { font-size: clamp(28px, 5vw, 52px); font-weight: 700; }
h3 { font-size: clamp(18px, 3vw, 24px); font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; }

.gradient-text {
    color: #FFC857;
    -webkit-text-fill-color: #FFC857;
}
[data-theme="light"] .gradient-text {
    color: #B07A10;
    -webkit-text-fill-color: #B07A10;
}

/* ===== LAYOUT ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; position: relative; }

/* Light mode — content sits above pseudo-element overlays */
[data-theme="light"] .hiw-section > *,
[data-theme="light"] .features-section > *,
[data-theme="light"] .pricing-section > *,
[data-theme="light"] .roadmap-section > *,
[data-theme="light"] .faq-section > *,
[data-theme="light"] .getapp-section > *,
[data-theme="light"] .contact-section > * { position: relative; z-index: 1; }

/* Light mode zone transitions — mirrors dark mode structure */
[data-theme="light"] .hero::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 180px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}
[data-theme="light"] .hiw-section::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 240px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}
[data-theme="light"] .features-section::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 140px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}
[data-theme="light"] .pricing-section::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 200px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}
[data-theme="light"] .faq-section::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 140px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}
[data-theme="light"] .getapp-section::before {
    content: ''; position: absolute;
    top: 0; left: 0; right: 0; height: 200px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}
[data-theme="light"] .contact-section::after {
    content: ''; position: absolute;
    bottom: 0; left: 0; right: 0; height: 100px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none; z-index: 1;
}

/* ===== BUTTONS ===== */
.btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 26px;
    border-radius: var(--radius-lg);
    font-size: 15px; font-weight: 600;
    transition: all 0.25s var(--ease-out);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.btn-primary {
    background: linear-gradient(135deg, var(--teal), var(--teal-br));
    color: var(--txt-inv);
    box-shadow: 0 4px 20px rgba(255,200,87,.35);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 32px rgba(255,200,87,.5); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
    background: var(--surface);
    color: var(--txt);
    border: 1px solid var(--border-2);
}
.btn-ghost:hover { background: var(--surface-2); transform: translateY(-2px); }
.btn-outline {
    background: transparent;
    color: var(--teal-br);
    border: 1.5px solid var(--teal);
}
.btn-outline:hover { background: rgba(255,200,87,.08); transform: translateY(-2px); }
.w-full { width: 100%; justify-content: center; }

/* ===== SECTION COMMON ===== */
.section-header { text-align: center; margin-bottom: 60px; }
.section-tag {
    display: inline-block;
    padding: 5px 14px;
    background: rgba(255,200,87,.12);
    color: var(--teal-br);
    border-radius: 100px;
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    margin-bottom: 14px;
    border: 1px solid rgba(255,200,87,.2);
}
.section-title { margin-bottom: 16px; }
.section-subtitle { font-size: 17px; color: var(--txt-2); max-width: 560px; margin: 0 auto; line-height: 1.7; }

/* ===== HEADER ===== */
.header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    height: var(--header-h);
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid transparent;
    transition: border-color .3s, box-shadow .3s, background .4s;
}
.header.scrolled {
    border-bottom-color: var(--border);
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
}
.header-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    height: 100%;
    display: flex; align-items: center; gap: 32px;
}

/* Logo */
.nav-logo {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px; font-weight: 700;
    color: var(--txt);
    flex-shrink: 0;
}
.nav-logo em { font-style: normal; }
.logo-img { width: 32px; height: 32px; object-fit: contain; }
.logo-img-svart { width: auto; height: 36px; max-width: 160px; }

[data-theme="dark"]  .logo-img-light,
[data-theme="dark"]  .logo-img-svart  { display: none; }
[data-theme="dark"]  .logo-img-dark,
[data-theme="dark"]  .logo-img-vit    { display: block; }
[data-theme="light"] .logo-img-dark,
[data-theme="light"] .logo-img-vit    { display: none; }
[data-theme="light"] .logo-img-light,
[data-theme="light"] .logo-img-svart  { display: block; }

.main-nav { display: flex; align-items: center; gap: 6px; flex: 1; }
.nav-link {
    padding: 7px 14px;
    border-radius: var(--radius-md);
    font-size: 14.5px; font-weight: 500;
    color: var(--txt-2);
    transition: color .2s, background .2s;
}
.nav-link:hover, .nav-link.active { color: var(--txt); background: var(--surface); }

.nav-actions {
    display: flex; align-items: center; gap: 10px; margin-left: auto;
}

/* Language selector */
.lang-selector { position: relative; }
.lang-toggle {
    display: flex; align-items: center; gap: 5px;
    padding: 7px 10px;
    border-radius: var(--radius-md);
    font-size: 13.5px; font-weight: 500;
    color: var(--txt-2);
    background: var(--surface);
    border: 1px solid var(--border);
    transition: all .2s;
}
.lang-toggle:hover { color: var(--txt); border-color: var(--border-2); }
.lang-chevron { transition: transform .25s; }
.lang-selector.open .lang-chevron { transform: rotate(180deg); }
.lang-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 165px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 6px;
    display: flex; flex-direction: column;
    opacity: 0; pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .2s, transform .2s;
    z-index: 200;
}
.lang-selector.open .lang-dropdown { opacity: 1; pointer-events: all; transform: translateY(0); }
.lang-opt {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 13.5px; font-weight: 500;
    color: var(--txt-2);
    transition: background .15s, color .15s;
    text-align: left;
}
.lang-opt:hover, .lang-opt.selected { background: var(--surface-2); color: var(--txt); }
.lang-opt.selected { color: var(--teal-br); }

/* Theme button */
.theme-btn {
    width: 38px; height: 38px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
    color: var(--txt-2);
    transition: all .2s;
    flex-shrink: 0;
}
.theme-btn:hover { color: var(--teal-br); border-color: var(--teal); transform: rotate(15deg); }
[data-theme="dark"]  .icon-sun  { display: block; }
[data-theme="dark"]  .icon-moon { display: none; }
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="light"] .icon-moon { display: block; }

.btn-cta {
    padding: 8px 18px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--teal), var(--teal-br));
    color: var(--txt-inv);
    font-size: 14px; font-weight: 600;
    transition: all .2s;
    box-shadow: 0 3px 14px rgba(255,200,87,.28);
}
.btn-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(255,200,87,.45); }

/* Hamburger */
.hamburger {
    display: none; flex-direction: column; gap: 5px;
    padding: 8px; border-radius: var(--radius-sm);
}
.hamburger span {
    width: 22px; height: 2px;
    background: var(--txt-2);
    border-radius: 2px;
    transition: all .25s;
    display: block;
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ===== HERO ===== */
.hero {
    min-height: 100vh;
    padding: calc(var(--header-h) + 60px) 0 60px;
    position: relative;
    display: flex; flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
}
.hero-grid { display: none; }
.hero-glow {
    position: absolute; border-radius: 50%; filter: blur(80px);
    pointer-events: none;
}
.hero-glow-1 {
    width: 700px; height: 700px;
    background: var(--glow-1);
    top: -200px; left: -200px;
    animation: glow1 10s ease-in-out infinite alternate;
}
.hero-glow-2 {
    width: 500px; height: 500px;
    background: var(--glow-2);
    top: 50%; right: -100px;
    animation: glow2 12s ease-in-out infinite alternate;
}
.hero-glow-3 {
    width: 400px; height: 400px;
    background: var(--glow-3);
    bottom: -100px; left: 30%;
    animation: glow3 8s ease-in-out infinite alternate;
}
@keyframes glow1 { to { transform: translate(60px, 80px) scale(1.15); } }
@keyframes glow2 { to { transform: translate(-40px, 50px) scale(1.1); } }
@keyframes glow3 { to { transform: translate(30px, -40px) scale(1.08); } }

/* Particles */
.particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
    position: absolute;
    border-radius: 50%;
    background: var(--teal-br);
    opacity: 0;
    animation: particleFly 8s ease-in-out infinite;
}
.p1  { width: 4px; height: 4px; left: 15%; top: 30%; animation-delay: 0s;   animation-duration: 9s; }
.p2  { width: 3px; height: 3px; left: 25%; top: 60%; animation-delay: 1.5s; animation-duration: 8s; }
.p3  { width: 5px; height: 5px; left: 40%; top: 20%; animation-delay: 2s;   animation-duration: 11s; }
.p4  { width: 3px; height: 3px; left: 65%; top: 45%; animation-delay: 3s;   animation-duration: 9s; }
.p5  { width: 4px; height: 4px; left: 80%; top: 25%; animation-delay: 1s;   animation-duration: 10s; }
.p6  { width: 2px; height: 2px; left: 70%; top: 70%; animation-delay: 4s;   animation-duration: 8s; }
.p7  { width: 3px; height: 3px; left: 10%; top: 80%; animation-delay: 2.5s; animation-duration: 12s; }
.p8  { width: 5px; height: 5px; left: 55%; top: 85%; animation-delay: 0.8s; animation-duration: 9.5s; background: var(--amber-br); }
@keyframes particleFly {
    0%   { opacity: 0; transform: translateY(0) scale(1); }
    20%  { opacity: 0.7; }
    80%  { opacity: 0.5; }
    100% { opacity: 0; transform: translateY(-80px) scale(0.4); }
}

.hero-content {
    position: relative; z-index: 2;
    max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 60px;
    flex: 1;
}
.hero-text { flex: 1; max-width: 580px; }
.hero-phone { flex-shrink: 0; position: relative; }

/* Launch badge */
.hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px;
    background: rgba(255,200,87,.1);
    border: 1px solid rgba(255,200,87,.25);
    border-radius: 100px;
    font-size: 13px; font-weight: 500;
    color: var(--teal-br);
    margin-bottom: 20px;
}
.badge-dot,
.badge-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--emerald);
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes pulse {
    0%,100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(16,185,129,.4); }
    50% { opacity: .7; transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16,185,129,0); }
}

/* App icon in hero */
.jp-hero-brand { margin-bottom: 4px; }
.jp-hero-icon { width: 72px; height: 72px; border-radius: 20px; margin-bottom: 12px; object-fit: cover; }
.jp-hero-icon.jp-light { width: auto; height: 84px; max-width: 280px; border-radius: 0; object-fit: contain; }
[data-theme="dark"]  .jp-hero-icon.jp-light  { display: none; }
[data-theme="dark"]  .jp-hero-icon.jp-dark   { display: block; }
[data-theme="light"] .jp-hero-icon.jp-dark   { display: none; }
[data-theme="light"] .jp-hero-icon.jp-light  { display: block; }

.hero-title { margin-bottom: 20px; }
.hero-desc  { font-size: 17px; color: var(--txt-2); margin-bottom: 32px; line-height: 1.75; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; }

/* Store badges */
.store-badges { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.store-badge {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 20px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-lg);
    color: var(--txt);
    font-size: 13px;
    transition: all .2s;
    position: relative;
}
.store-badge:hover { border-color: var(--teal); transform: translateY(-2px); }
.store-badge small { display: block; color: var(--txt-2); font-size: 10.5px; }
.store-badge strong { display: block; font-size: 14px; font-family: 'Space Grotesk', sans-serif; }
.cs-badge {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: var(--amber);
    color: #fff;
    font-size: 9px; font-weight: 700; letter-spacing: .05em;
    padding: 2px 7px; border-radius: 100px;
    white-space: nowrap;
    pointer-events: none;
}

/* Phone mockup */
.phone-frame {
    width: var(--phone-w);
    height: var(--phone-h);
    border-radius: var(--phone-br);
    border: var(--phone-bd) solid rgba(255,255,255,.12);
    background: #0c1520;
    position: relative;
    overflow: hidden;
    box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
    flex-shrink: 0;
    z-index: 1;
    animation: phoneFloat 4s ease-in-out infinite;
}
@keyframes phoneFloat {
    0%,100% { transform: translateY(0)    rotate(-1deg); }
    50%      { transform: translateY(-12px) rotate(1deg);  }
}
[data-theme="light"] .phone-frame { border-color: rgba(0,0,0,.08); background: #f0f4f8; box-shadow: 0 30px 70px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.05); }
.phone-notch {
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 13px; height: 13px;
    background: #060d14;
    border-radius: 50%;
    z-index: 5;
}
[data-theme="light"] .phone-notch { background: #c0c8d4; }
.phone-screen-wrap {
    position: absolute; inset: 0;
    border-radius: calc(var(--phone-br) - var(--phone-bd));
    overflow: hidden;
}
.phone-screen {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: inherit;
    transition: opacity .5s;
}
.phone-placeholder {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
}
.phone-placeholder svg { width: 100%; height: 100%; }
/* Hide placeholder when image loads */
.phone-screen[src] ~ .phone-placeholder { display: none; }
.phone-reflection {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.06) 0%, transparent 40%, transparent 60%, rgba(255,255,255,.02) 100%);
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
}

/* Hero phone floating pills */
.hero-phone { position: relative; padding: 20px; }
.hero-phone .phone-frame {
    --phone-w:  232px;   /* 290 × 0.8 */
    --phone-h:  518px;   /* 648 × 0.8 */
    --phone-br:  35px;   /*  44 × 0.8 */
}
.hero-pill {
    position: absolute;
    display: flex; align-items: center; gap: 6px;
    padding: 7px 12px;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 100px;
    font-size: 12px; font-weight: 600; color: var(--txt-2);
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    backdrop-filter: blur(12px);
    z-index: 5;
}
.hero-pill svg { color: var(--teal-br); }
.pill-1 { top: 15%; left: -60px;  animation: pillFloat 5s ease-in-out infinite; }
.pill-2 { top: 45%; right: -70px; animation: pillFloat 5s ease-in-out infinite 1.5s; }
.pill-3 { bottom: 20%; left: -55px; animation: pillFloat 5s ease-in-out infinite 3s; }
@keyframes pillFloat {
    0%,100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.phone-glow {
    position: absolute; inset: -30px;
    background: radial-gradient(ellipse at center, var(--glow-1) 0%, transparent 65%);
    pointer-events: none; z-index: 0;
    animation: phoneGlow 6s ease-in-out infinite alternate;
}
@keyframes phoneGlow { to { opacity: .5; transform: scale(1.1); } }

/* Stats strip */
.hero-stats {
    position: relative; z-index: 2;
    width: 100%; max-width: 1200px; padding: 0 24px;
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 0;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-xl);
    margin: 48px auto 0;
    overflow: hidden;
}
.stat-item {
    flex: 1; min-width: 120px;
    display: flex; flex-direction: column; align-items: center;
    padding: 24px 20px;
}
.stat-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(22px, 4vw, 36px); font-weight: 700;
    color: var(--teal-br);
    line-height: 1;
}
.stat-label { font-size: 13px; color: var(--txt-2); margin-top: 5px; }
.stat-divider { width: 1px; height: 44px; background: var(--border); flex-shrink: 0; }

/* Scroll hint */

/* ===== MARQUEE STRIP ===== */
.marquee-strip {
    overflow: hidden;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 14px 0;
    position: relative; z-index: 2;
}
.marquee-strip::before,
.marquee-strip::after {
    content: '';
    position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
    pointer-events: none;
}
.marquee-strip::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee-strip::after  { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.marquee-track {
    display: flex; align-items: center;
    width: max-content;
    animation: marquee 38s linear infinite;
    gap: 0;
}
.marquee-strip:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.mq-item {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 500;
    color: var(--txt-2);
    padding: 0 20px;
    white-space: nowrap;
}
.mq-item svg { color: var(--teal-br); }
.mq-sep { color: var(--border-2); font-size: 16px; padding: 0 4px; }

/* ===== FEATURES ===== */
.features-section { background: var(--bg-2); }
[data-theme="dark"] .features-section { background: var(--bg); }

.feat-nav {
    display: flex; flex-wrap: wrap; gap: 8px;
    justify-content: center;
    margin-bottom: 56px;
}
.feat-nav-btn {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    border-radius: var(--radius-lg);
    font-size: 14px; font-weight: 500;
    color: var(--txt-2);
    background: var(--surface);
    border: 1.5px solid var(--border);
    transition: all .2s;
}
.feat-nav-btn:hover { color: var(--teal-br); border-color: var(--teal); }
.feat-nav-btn.active { color: var(--teal-br); background: rgba(255,200,87,.1); border-color: var(--teal); }
.feat-nav-btn svg { transition: transform .2s; }
.feat-nav-btn.active svg { transform: scale(1.1); }

.feat-scroll-area {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 60px;
    align-items: start;
}

.feat-steps { position: relative; }
.feat-step { display: none; animation: fadeUp .35s var(--ease-out); }
.feat-step.active { display: block; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.feat-step-header {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 32px;
}
.feat-step-num {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 13px; font-weight: 700; letter-spacing: .1em;
    color: var(--teal-br);
    padding: 4px 10px;
    background: rgba(255,200,87,.1);
    border-radius: 100px;
    border: 1px solid rgba(255,200,87,.2);
}
.feat-step-title { font-size: 22px; font-weight: 700; }

.feat-step-items {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.feature-item {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.feature-item:hover {
    border-color: rgba(255,200,87,.3);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255,200,87,.08);
}
.fi-icon {
    width: 38px; height: 38px; flex-shrink: 0;
    background: rgba(255,200,87,.1);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    color: var(--teal-br);
}
.feature-item h4 { font-size: 14px; margin-bottom: 4px; }
.feature-item p  { font-size: 13px; color: var(--txt-2); line-height: 1.55; }

/* Features phone column */
.feat-phone-col {
    position: sticky; top: calc(var(--header-h) + 24px);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.phone-sm { --phone-w: var(--phone-sm-w); --phone-h: var(--phone-sm-h); }
.feat-phone-indicator {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.feat-phone-dots { display: flex; gap: 6px; }
.feat-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--border-2);
    transition: all .3s;
}
.feat-dot.active { background: var(--teal-br); width: 20px; border-radius: 4px; }
.feat-phone-current {
    font-size: 12px; font-weight: 500; color: var(--txt-2);
}

/* ===== PRICING ===== */
.pricing-section { background: var(--bg); }
.billing-toggle {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-bottom: 44px;
}
.billing-label {
    font-size: 15px; color: var(--txt-2);
    transition: color .2s;
    display: flex; align-items: center; gap: 8px;
}
.billing-label.active { color: var(--txt); font-weight: 600; }
.toggle-switch {
    width: 48px; height: 26px;
    background: var(--surface-2);
    border: 1.5px solid var(--border-2);
    border-radius: 100px;
    display: flex; align-items: center; padding: 2px;
    transition: background .3s;
    cursor: pointer;
}
.toggle-switch[aria-pressed="true"] { background: linear-gradient(135deg, var(--teal), var(--teal-br)); border-color: transparent; }
.toggle-thumb {
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--txt-2);
    transition: transform .3s var(--ease-spring), background .3s;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.toggle-switch[aria-pressed="true"] .toggle-thumb { transform: translateX(22px); background: #fff; }
.save-badge {
    display: inline-flex;
    font-size: 11px; font-weight: 700; font-style: normal;
    background: rgba(16,185,129,.15);
    color: var(--emerald);
    border-radius: 100px; padding: 2px 9px;
    border: 1px solid rgba(16,185,129,.2);
}

.pricing-grid {
    display: grid; grid-template-columns: 1fr 1.1fr; gap: 24px;
    max-width: 860px; margin: 0 auto;
}
.price-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xl);
    padding: 36px;
    position: relative;
    transition: transform .3s, box-shadow .3s;
    display: flex;
    flex-direction: column;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-card-pro {
    border-color: rgba(255,200,87,.4);
    background: linear-gradient(145deg, var(--surface) 0%, rgba(255,200,87,.05) 100%);
    box-shadow: 0 0 0 1px rgba(255,200,87,.15), var(--shadow-glow);
}
.price-badge {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    padding: 4px 16px;
    background: linear-gradient(135deg, var(--teal), var(--teal-br));
    color: var(--txt-inv);
    font-size: 12px; font-weight: 700; letter-spacing: .05em;
    border-radius: 100px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(255,200,87,.4);
}
.price-name {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 16px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--txt-2);
    margin-bottom: 10px;
}
.price-amount { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.price-num { font-family: 'Space Grotesk', sans-serif; font-size: 42px; font-weight: 700; }
.price-period { font-size: 15px; color: var(--txt-2); }
.price-annual-note {
    font-size: 13px; color: var(--teal-br);
    margin-bottom: 12px; display: none;
}
.price-founding-note {
    font-size: 13px; color: #d99a2b;
    margin-bottom: 12px;
}
.price-desc { font-size: 14px; color: var(--txt-2); margin-bottom: 24px; line-height: 1.55; }
.price-features { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
.price-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--txt-2); }
.price-features li.dimmed { opacity: .55; }
.check { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--teal-br); }
.price-card .btn { margin-top: auto; }

/* ===== ROADMAP ===== */
.roadmap-section { background: var(--bg-2); }
[data-theme="dark"] .roadmap-section { background: var(--bg); }
.roadmap-timeline {
    max-width: 760px; margin: 0 auto;
    position: relative;
    padding-left: 40px;
}
.roadmap-timeline::before {
    content: '';
    position: absolute; left: 15px; top: 16px; bottom: 16px;
    width: 2px;
    background: linear-gradient(to bottom, var(--teal) 0%, var(--border) 100%);
    border-radius: 2px;
}
.roadmap-item {
    position: relative;
    padding: 0 0 44px 28px;
}
.roadmap-item:last-child { padding-bottom: 0; }
.roadmap-marker {
    position: absolute; left: -40px; top: 2px;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface);
    border: 2px solid var(--border-2);
    z-index: 2;
}
.roadmap-item.completed .roadmap-marker {
    background: linear-gradient(135deg, var(--teal), var(--teal-br));
    border-color: transparent;
    box-shadow: 0 0 0 4px rgba(255,200,87,.15);
    color: var(--txt-inv);
}
.roadmap-item.in-progress .roadmap-marker {
    background: var(--surface);
    border-color: var(--teal);
    box-shadow: 0 0 0 4px rgba(255,200,87,.12);
}
.rm-pulse {
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--teal-br);
    animation: rmPulse 2s ease-in-out infinite;
}
@keyframes rmPulse {
    0%,100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.3); opacity: .7; }
}
.roadmap-date {
    font-size: 12px; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--teal-br);
    display: block; margin-bottom: 6px;
}
.roadmap-content h3 { font-size: 20px; margin-bottom: 8px; }
.roadmap-content p  { font-size: 14.5px; color: var(--txt-2); line-height: 1.65; margin-bottom: 14px; }
.roadmap-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.rm-tag {
    font-size: 12px; font-weight: 600; letter-spacing: .05em;
    padding: 3px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--txt-2);
    border-radius: 100px;
}
.rm-tag-highlight {
    background: rgba(255,200,87,.1);
    border-color: rgba(255,200,87,.2);
    color: var(--teal-br);
}
.tag-pulse { animation: tagP 2s ease-in-out infinite; }
@keyframes tagP {
    0%,100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 4px rgba(255,200,87,.1); }
}

/* ===== GET APP ===== */
.getapp-section { background: var(--bg); position: relative; overflow: hidden; }
.getapp-bg { position: absolute; inset: 0; z-index: 0; }
.getapp-layout {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr 340px; gap: 70px;
    align-items: center;
}
.getapp-benefits,
.ea-benefits {
    display: flex; flex-direction: column; gap: 11px;
    margin-bottom: 30px;
}
.getapp-benefit,
.ea-benefit {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 500; color: var(--txt-2);
}
.getapp-benefit svg,
.ea-benefit svg { color: var(--emerald); flex-shrink: 0; }

/* Email form */
.ea-form { max-width: 500px; }
.ea-input-wrap {
    display: flex; align-items: center; gap: 0;
    background: var(--surface);
    border: 1.5px solid var(--border-2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s;
    margin-bottom: 10px;
}
.ea-input-wrap:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(255,200,87,.12); }
.ea-input {
    flex: 1; padding: 14px 18px;
    background: transparent; border: none; outline: none;
    font-size: 15px; color: var(--txt);
    font-family: inherit;
}
.ea-input::placeholder { color: var(--txt-3); }
.ea-btn {
    flex-shrink: 0; padding: 14px 22px;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-size: 14px;
}
.ea-privacy { font-size: 12.5px; color: var(--txt-3); }
.ea-google-hint { font-size: 12.5px; color: var(--txt-3); margin-top: 2px; display: flex; align-items: center; gap: 5px; }
.ea-google-hint::before { content: ''; display: inline-block; width: 13px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%234285F4' d='M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z'/%3E%3Cpath fill='%2334A853' d='M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z'/%3E%3Cpath fill='%23FBBC05' d='M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z'/%3E%3Cpath fill='%23EA4335' d='M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z'/%3E%3C/svg%3E") center/contain no-repeat; flex-shrink: 0; }
.ea-error {
    font-size: 13px; color: var(--rose);
    margin-top: 8px; min-height: 18px;
}

.ea-success {
    display: flex; align-items: flex-start; gap: 16px;
    padding: 22px 24px;
    background: rgba(16,185,129,.08);
    border: 1.5px solid rgba(16,185,129,.2);
    border-radius: var(--radius-lg);
    max-width: 500px;
}
.success-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    background: rgba(16,185,129,.15);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--emerald);
}
.ea-success h3 { font-size: 17px; margin-bottom: 4px; }
.ea-success p  { font-size: 14px; color: var(--txt-2); }

/* Get app phone */
.getapp-phone { position: relative; display: flex; justify-content: center; }
.getapp-phone-frame {
    --phone-w: 290px;
    --phone-h: 648px;
}
.getapp-phone-glow {
    position: absolute; inset: -40px;
    background: radial-gradient(ellipse at center, rgba(255,200,87,.3) 0%, transparent 65%);
    animation: phoneGlow 6s ease-in-out infinite alternate;
    pointer-events: none;
}

/* ===== CONTACT ===== */
.contact-section { background: var(--bg-2); position: relative; overflow: hidden; }
[data-theme="dark"] .contact-section { background: var(--bg); }
.contact-bg { position: absolute; inset: 0; z-index: 0; }
.contact-info-center { position: relative; z-index: 1; }
.contact-items {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
    max-width: 1100px; margin: 0 auto;
}
.contact-item {
    display: flex; align-items: center; gap: 16px;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    flex: 1; min-width: 300px;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}
.contact-item:hover { border-color: rgba(255,200,87,.3); transform: translateY(-3px); }
.contact-item > div { min-width: 0; overflow: hidden; }
.ci-icon {
    width: 46px; height: 46px; flex-shrink: 0;
    background: rgba(255,200,87,.1);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    color: var(--teal-br);
}
.ci-label { display: block; font-size: 12px; color: var(--txt-3); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 3px; }
.ci-val  {
    display: block; font-size: 14.5px; font-weight: 600; color: var(--txt);
    overflow-wrap: break-word;
}
a.ci-val:hover { color: var(--teal-br); }

/* ===== FOOTER ===== */
.footer { background: var(--header-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--border); padding: 60px 0 36px; }
.footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px;
    margin-bottom: 48px;
}
.footer-brand .nav-logo { margin-bottom: 14px; }
.footer-brand p { font-size: 14px; color: var(--txt-2); line-height: 1.7; max-width: 280px; }
.footer-col h5 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--txt-2); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: var(--txt-2); padding: 4px 0; transition: color .2s; }
.footer-col a:hover { color: var(--teal-br); }
.footer-bottom {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
    font-size: 13px; color: var(--txt-3);
}

/* ===== SCROLL REVEAL ===== */
.scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-up { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal-up.revealed { opacity: 1; transform: translateY(0); }
.delay-1 { transition-delay: .1s !important; }
.delay-2 { transition-delay: .2s !important; }
.delay-3 { transition-delay: .3s !important; }
.delay-4 { transition-delay: .4s !important; }

/* ===== PH PLACEHOLDERS (SVG) ===== */
.ph-bg   { fill: var(--surface); }
.ph-card { fill: var(--surface-2); }
.ph-nav  { fill: var(--surface); }
.ph-txt  { fill: var(--txt); }
.ph-txt2 { fill: var(--txt-2); }
.ph-txt3 { fill: var(--txt-3); }
.ph-label {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: var(--txt-3); font-size: 12px; text-align: center;
}

/* ===== MOBILE ===== */
@media (max-width: 900px) {
    .feat-scroll-area { grid-template-columns: 1fr 115px; gap: 16px; }
    /* Pricing — keep side-by-side on mobile, just compact */
    .pricing-grid  { grid-template-columns: 1fr 1fr; gap: 10px; max-width: none; }
    .price-card    { padding: 20px 12px; min-width: 0; }
    .price-card .btn { padding: 11px 10px; font-size: 12px; }
    .price-name    { font-size: 12px; }
    .price-num     { font-size: 24px; }
    .price-period  { font-size: 12px; }
    .price-desc    { font-size: 11.5px; margin-bottom: 14px; }
    .price-features { gap: 7px; margin-bottom: 18px; }
    .price-features li { font-size: 11.5px; gap: 6px; }
    .check         { width: 12px; height: 12px; }
    .price-badge   { font-size: 10px; padding: 3px 8px; }
    .price-founding-note { font-size: 10.5px; }
    .getapp-layout { grid-template-columns: 1fr; }
    .footer-grid   { grid-template-columns: 1fr; gap: 32px; }
    .hero-content  { flex-direction: column; text-align: center; }
    .hero-actions  { justify-content: center; }
    .store-badges  { justify-content: center; }
    .hero-badge    { display: inline-flex; }
    .hero-stats    { border-radius: var(--radius-lg); }
    .feat-step-items { grid-template-columns: 1fr; gap: 10px; }
    .feat-nav { margin-bottom: 24px; }
    .feat-step-header { margin-bottom: 16px; }
    .feat-step-title { font-size: 18px; }
    .feature-item { padding: 12px 14px; gap: 10px; }
    .fi-icon { width: 32px; height: 32px; }
    .contact-items { flex-direction: column; }
    .contact-item  { max-width: 100%; }
    /* Hero phone — small centered below text */
    .hero-phone { display: flex; justify-content: center; margin-top: 20px; }
    .hero-phone .phone-frame { --phone-w: 145px; --phone-h: 324px; --phone-br: 20px; animation: none; box-shadow: 0 20px 40px rgba(0,0,0,.45); }
    .hero-phone .phone-glow { display: none; }
    /* Features phone — compact sticky column on right (same layout as desktop, scaled down) */
    .feat-phone-col { display: flex; flex-direction: column; align-items: center; gap: 12px; position: sticky; top: calc(var(--header-h) + 16px); padding-bottom: 0; }
    .feat-phone-col .phone-frame { --phone-w: 115px; --phone-h: 257px; --phone-br: 16px; animation: none; }
    .feat-phone-col .phone-glow { display: none; }
    /* Get app phone — below form */
    .getapp-phone { display: flex; justify-content: center; padding-top: 36px; }
    .getapp-phone-frame { --phone-w: 195px; --phone-h: 437px; animation: none; }
    .getapp-phone .phone-glow { display: none; }
}
@media (max-width: 360px) {
    /* Very narrow phones — collapse features to single column, hide phone frame, show only dots */
    .feat-scroll-area { grid-template-columns: 1fr; gap: 0; }
    .feat-phone-col { order: -1; position: static; flex-direction: row; justify-content: center; padding-bottom: 12px; }
    .feat-phone-col .phone-frame { display: none; }
}
@media (max-width: 700px) {
    .main-nav, .nav-actions .btn-cta { display: none; }
    .hamburger { display: flex; }
    .header-inner { gap: 16px; }
    .nav-actions { gap: 8px; }
    .hero-pill { display: none; }
    .jp-hero-icon { width: 56px; height: 56px; }
    .jp-hero-icon.jp-light { width: auto; height: 64px; max-width: 220px; }
    .jp-hero-brand { display: flex; justify-content: center; }
    .feat-nav { gap: 6px; }
    .feat-nav-btn { font-size: 13px; padding: 8px 14px; }
    /* Mobile nav drawer */
    .main-nav.mobile-open {
        display: flex; flex-direction: column;
        position: fixed; top: var(--header-h); left: 0; right: 0;
        background: var(--header-bg);
        backdrop-filter: blur(20px);
        border-bottom: 1px solid var(--border);
        padding: 16px;
        gap: 4px;
        z-index: 99;
    }
    .main-nav.mobile-open .nav-link { padding: 12px 16px; border-radius: var(--radius-md); }
    .main-nav.mobile-open .btn-cta { display: flex; justify-content: center; margin-top: 8px; padding: 12px 18px; border-radius: var(--radius-lg); }
}
@media (max-width: 540px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .price-card { padding: 28px 20px; }
    .price-num  { font-size: 36px; }
    .price-name { font-size: 14px; }
    .price-features li { font-size: 13px; }
    .price-desc { font-size: 13px; }
}
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    .section { padding: 72px 0; }
    .hero { padding-top: calc(var(--header-h) + 36px); padding-bottom: 44px; }
    .ea-input-wrap { flex-direction: column; border-radius: var(--radius-md); }
    .ea-input, .ea-btn { border-radius: var(--radius-md) !important; width: 100%; }
    .ea-btn { padding: 14px; }
}

/* ===== LIGHT MODE CONTRAST FIXES ===== */
/* Light mode uses the deep-gold accent (--teal/--teal-br = #B07A10) for readable elements on white */
[data-theme="light"] .section-tag {
    color: var(--teal);
    background: rgba(201,150,43,.1);
    border-color: rgba(201,150,43,.25);
}
[data-theme="light"] .stat-num { color: var(--teal); }
[data-theme="light"] .hero-badge {
    color: var(--teal);
    background: rgba(201,150,43,.08);
    border-color: rgba(201,150,43,.2);
}
[data-theme="light"] .badge-dot,
[data-theme="light"] .badge-pulse { background: var(--teal); }
[data-theme="light"] .btn-outline {
    color: var(--teal);
    border-color: var(--teal);
}
[data-theme="light"] .btn-outline:hover { background: rgba(201,150,43,.08); }
[data-theme="light"] .fi-icon { background: rgba(201,150,43,.1); }
[data-theme="light"] .fi-icon svg { color: var(--teal); }
[data-theme="light"] .check { color: var(--teal); }
[data-theme="light"] .ea-benefit svg,
[data-theme="light"] .getapp-benefit svg { color: var(--teal); }
[data-theme="light"] .feat-nav-btn.active {
    color: var(--teal);
    background: rgba(201,150,43,.1);
    border-color: var(--teal);
}
[data-theme="light"] .feat-nav-btn:hover { color: var(--teal); border-color: rgba(201,150,43,.4); }
[data-theme="light"] .phone-glow { opacity: .35; }
[data-theme="light"] .feat-step-num {
    color: var(--teal);
    background: rgba(201,150,43,.1);
    border-color: rgba(201,150,43,.25);
}
[data-theme="light"] .feat-phone-current { color: var(--teal); }
[data-theme="light"] .feat-dot.active { background: var(--teal); }
[data-theme="light"] .roadmap-item.completed .roadmap-marker {
    background: linear-gradient(135deg, var(--teal), var(--teal-br));
    box-shadow: 0 0 0 4px rgba(201,150,43,.15);
}
[data-theme="light"] .roadmap-item.in-progress .roadmap-marker { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(201,150,43,.12); }
[data-theme="light"] .roadmap-timeline::before { background: rgba(201,150,43,.2); }
[data-theme="light"] .rm-tag { color: var(--teal); background: rgba(201,150,43,.1); border-color: rgba(201,150,43,.2); }
[data-theme="light"] .rm-tag-highlight { background: var(--teal); color: #fff; border-color: transparent; }
[data-theme="light"] .roadmap-date { color: var(--teal); }

/* ===== DARK MODE GLASS CARDS =====
   Applied only in dark mode so the zone backgrounds show through.
   Light mode keeps solid white/surface backgrounds. */
[data-theme="dark"] .feature-item,
[data-theme="dark"] .contact-item {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="dark"] .feature-item:hover,
[data-theme="dark"] .contact-item:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,200,87,.3);
}

[data-theme="dark"] .hero-stats {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

[data-theme="dark"] .price-card {
    background: rgba(255,255,255,.03);
    border-color: rgba(255,255,255,.09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="dark"] .price-card-pro {
    background: linear-gradient(145deg, rgba(255,255,255,.05) 0%, rgba(255,200,87,.07) 100%);
    border-color: rgba(255,200,87,.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== LIGHT MODE GLASS CARDS =====
   White frosted glass against the subtle zone backgrounds. */
[data-theme="light"] .hiw-step {
    background: rgba(255,255,255,.60);
    border-color: rgba(0,0,0,.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .hiw-step:hover {
    background: rgba(255,255,255,.78);
    border-color: rgba(201,150,43,.3);
}

[data-theme="light"] .feature-item,
[data-theme="light"] .contact-item {
    background: rgba(255,255,255,.65);
    border-color: rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .feature-item:hover,
[data-theme="light"] .contact-item:hover {
    background: rgba(255,255,255,.80);
    border-color: rgba(201,150,43,.3);
}

[data-theme="light"] .hero-stats {
    background: rgba(255,255,255,.65);
    border-color: rgba(0,0,0,.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

[data-theme="light"] .price-card {
    background: rgba(255,255,255,.65);
    border-color: rgba(0,0,0,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
[data-theme="light"] .price-card-pro {
    background: linear-gradient(145deg, rgba(255,255,255,.75) 0%, rgba(201,150,43,.07) 100%);
    border-color: rgba(201,150,43,.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* ===== HOW IT WORKS ===== */
.hiw-section { padding: 80px 0; }
.hiw-section .section-title { font-size: clamp(1.75rem, 4vw, 2.5rem); text-align: center; margin-bottom: 56px; }
[data-theme="dark"] .hiw-section .section-header { position: relative; z-index: 2; }
[data-theme="dark"] .hiw-section .section-title { color: #ffffff; }
[data-theme="light"] .hiw-section .section-title { color: #1e3a5f; }
.hiw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.hiw-step {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--radius-lg);
    padding: 36px 28px;
    display: flex; flex-direction: column; gap: 16px;
    transition: border-color .25s, transform .25s;
}
.hiw-step:hover { border-color: rgba(255,200,87,.25); transform: translateY(-4px); }
.hiw-num {
    width: 44px; height: 44px; border-radius: 50%;
    background: linear-gradient(135deg, var(--teal), var(--teal-br));
    color: var(--txt-inv); font-size: 1.125rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hiw-title { font-size: 1.1rem; font-weight: 650; color: var(--txt); }
.hiw-body { font-size: .925rem; color: var(--text-secondary); line-height: 1.65; }

[data-theme="light"] .hiw-step { background: #fff; border-color: rgba(0,0,0,.07); }
[data-theme="light"] .hiw-step:hover { border-color: rgba(201,150,43,.3); }

@media (max-width: 768px) {
    .hiw-grid { grid-template-columns: 1fr; gap: 20px; }
    .hiw-section { padding: 56px 0; }
}

/* ===== FAQ ===== */
.faq-section { padding: 80px 0; }
.faq-section .section-tag { display: inline-block; margin-bottom: 40px; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.faq-item { border-bottom: 1px solid rgba(255,255,255,.08); }
.faq-item:first-child { border-top: 1px solid rgba(255,255,255,.08); }
.faq-q {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 20px 4px; text-align: left; color: var(--txt);
    font-size: 1rem; font-weight: 550; background: none; border: none;
    cursor: pointer; transition: color .2s;
}
.faq-q:hover { color: var(--teal-br); }
.faq-q[aria-expanded="true"] { color: var(--teal-br); }
.faq-chevron { flex-shrink: 0; color: var(--text-secondary); transition: transform .25s ease; }
.faq-q[aria-expanded="true"] .faq-chevron { transform: rotate(180deg); color: var(--teal-br); }
.faq-a {
    overflow: hidden;
    max-height: 0;
    transition: max-height .3s ease, opacity .25s ease;
    opacity: 0;
}
.faq-a.open { max-height: 400px; opacity: 1; }
.faq-a p { padding: 0 4px 20px; font-size: .925rem; color: var(--text-secondary); line-height: 1.7; }

[data-theme="light"] .faq-item { border-color: rgba(0,0,0,.1); }
[data-theme="light"] .faq-q:hover { color: var(--teal); }
[data-theme="light"] .faq-q[aria-expanded="true"] { color: var(--teal); }
[data-theme="light"] .faq-q[aria-expanded="true"] .faq-chevron { color: var(--teal); }

@media (max-width: 768px) {
    .faq-section { padding: 56px 0; }
    .faq-q { font-size: .95rem; }
}

/* ===== HERO EARTH IMAGE ===== */
.hero-earth-bg {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 68%;
    background-image: url('../earth.webp');
    background-size: cover;
    background-position: 38% center;
    pointer-events: none;
    z-index: 0;
    opacity: 0.72;
}
/* Dark mode: gradient feather on left edge */
.hero-earth-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
        var(--bg) 0%,
        var(--bg) 8%,
        rgba(13,27,46,0.45) 22%,
        transparent 40%
    );
}
/* Fade out the very bottom */
.hero-earth-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        var(--bg) 0%,
        transparent 30%
    );
    z-index: 1;
}
/* Light theme: filter lives on ::before only so ::after gradients stay colour-accurate */
[data-theme="light"] .hero-earth-bg {
    background-image: none;   /* image moved to ::before */
    opacity: 1;               /* gradients must be fully opaque */
}
[data-theme="light"] .hero-earth-bg::before {
    background: url('../earth.webp') 38% center / cover no-repeat;
    filter: brightness(3.8) saturate(0.18) contrast(0.72);
    opacity: 0.42;
    z-index: 0;
}
[data-theme="light"] .hero-earth-bg::after {
    background:
        linear-gradient(to right, var(--bg) 0%, var(--bg) 12%, transparent 42%),
        linear-gradient(to top,  var(--bg) 0%, transparent 28%);
    z-index: 2;
}

/* ===== HERO GLOBE CANVAS ===== */
.hero-globe-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 768px) {
    .hero-earth-bg { width: 100%; opacity: 0.58; }
    .hero-globe-canvas { opacity: 0.7; }
}

@media (max-width: 580px) {
    .hero-stats { display: grid !important; grid-template-columns: 1fr 1fr; }
    .stat-divider { display: none; }
    .stat-item { padding: 14px 10px; }
    .stat-num { font-size: 22px; }
}

/* =====================================================
   SECTION ZONE BACKGROUNDS
   Visual story: radar approach → runway → in-flight window seat
   Dark mode only — light mode keeps its clean palette.

   Zone mapping (adjacent sections share one image → seamless):
     Zone 1 (radar):   how-it-works + features
     Zone 2 (runway):  pricing + roadmap + faq   ← faq here keeps
                                                    roadmap→faq seamless
     Zone 3 (window):  getapp + contact

   ONE fade per zone boundary (bottom of the exiting section).
   No top fade on incoming sections avoids ~200px dead-dark bands.
   ===================================================== */

/* ── Zone 1: Aeronautical radar ── */
[data-theme="dark"] .hiw-section,
[data-theme="dark"] .features-section {
    background-image:
        linear-gradient(rgba(13,27,46,0.84), rgba(13,27,46,0.84)),
        url('../bg-zone1.webp');
    background-size: 100% 100%, cover;
    background-attachment: scroll, fixed;
    background-position: 0 0, center center;
    background-repeat: no-repeat, no-repeat;
}

/* ── Zone 2: Runway long-exposure ── */
[data-theme="dark"] .pricing-section,
[data-theme="dark"] .roadmap-section,
[data-theme="dark"] .faq-section {
    background-image:
        linear-gradient(rgba(13,27,46,0.83), rgba(13,27,46,0.83)),
        url('../bg-zone2.webp');
    background-size: 100% 100%, cover;
    background-attachment: scroll, fixed;
    background-position: 0 0, center 40%;
    background-repeat: no-repeat, no-repeat;
}

/* ── Zone 3: Window seat city lights ──
   Both layers are fixed so the gradient spans the viewport as one
   continuous gradient — no per-section restart that would create a
   dark band at the getapp→contact boundary.
   Gradient lightens toward the bottom so city lights (lower part of
   the window image) glow through the overlay more than the dark sky. */
[data-theme="dark"] .getapp-section,
[data-theme="dark"] .contact-section {
    background-image:
        linear-gradient(
            rgba(6,14,30,0.92) 0%,
            rgba(6,14,30,0.86) 40%,
            rgba(6,14,30,0.74) 70%,
            rgba(6,14,30,0.65) 100%
        ),
        url('../bg-zone3.webp');
    background-size: 100% 100%, cover;
    background-attachment: fixed, fixed;
    background-position: center top, center center;
    background-repeat: no-repeat, no-repeat;
}

/* Hide the hero-glow blobs inside getapp/contact in dark mode —
   they create bright teal spots that fight the window-seat background */
[data-theme="dark"] .getapp-section .contact-bg,
[data-theme="dark"] .contact-section .contact-bg {
    display: none;
}

/* ── Fade transitions — one per zone boundary ── */

/* Hero bottom fade — earth image dissolves into --bg before Zone 1 begins */
[data-theme="dark"] .hero::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 180px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Zone 1 top fade (opens after hero/stats row) — tall so the radar
   image eases in gradually rather than cutting hard from the hero */
[data-theme="dark"] .hiw-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 240px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Zone 1 → Zone 2: bottom of features fades out */
[data-theme="dark"] .features-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 140px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Zone 2 top fade — runway eases in from the dark bridge */
[data-theme="dark"] .pricing-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Zone 2 → Zone 3: bottom of faq fades out */
[data-theme="dark"] .faq-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 140px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Zone 3 top fade — window seat eases in from the dark bridge */
[data-theme="dark"] .getapp-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 200px;
    background: linear-gradient(to bottom, var(--bg), transparent);
    pointer-events: none;
    z-index: 1;
}

/* Zone 3 end: bottom of contact fades to footer */
[data-theme="dark"] .contact-section::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to top, var(--bg), transparent);
    pointer-events: none;
    z-index: 1;
}

/* ── Light mode zone backgrounds ──
   Same images as dark mode but with a high-opacity light overlay so only
   ~13% of the image bleeds through as subtle texture. Each zone uses the
   nearest --bg / --bg-2 colour so the alternating section rhythm is kept. */
[data-theme="light"] .hiw-section,
[data-theme="light"] .features-section {
    background-image:
        linear-gradient(rgba(247,249,252,0.87), rgba(247,249,252,0.87)),
        url('../bg-zone1.webp');
    background-size: 100% 100%, cover;
    background-attachment: scroll, fixed;
    background-position: 0 0, center center;
    background-repeat: no-repeat, no-repeat;
}

[data-theme="light"] .pricing-section,
[data-theme="light"] .roadmap-section,
[data-theme="light"] .faq-section {
    background-image:
        linear-gradient(rgba(238,242,247,0.87), rgba(238,242,247,0.87)),
        url('../bg-zone2.webp');
    background-size: 100% 100%, cover;
    background-attachment: scroll, fixed;
    background-position: 0 0, center 40%;
    background-repeat: no-repeat, no-repeat;
}

[data-theme="light"] .getapp-section,
[data-theme="light"] .contact-section {
    background-image:
        linear-gradient(rgba(247,249,252,0.87), rgba(247,249,252,0.87)),
        url('../bg-zone3.webp');
    background-size: 100% 100%, cover;
    background-attachment: scroll, fixed;
    background-position: 0 0, center center;
    background-repeat: no-repeat, no-repeat;
}

/* Mobile — background-attachment: fixed broken on iOS Safari */
@media (max-width: 1024px) {
    [data-theme="dark"] .hiw-section,
    [data-theme="dark"] .features-section,
    [data-theme="dark"] .pricing-section,
    [data-theme="dark"] .roadmap-section,
    [data-theme="dark"] .faq-section,
    [data-theme="light"] .hiw-section,
    [data-theme="light"] .features-section,
    [data-theme="light"] .pricing-section,
    [data-theme="light"] .roadmap-section,
    [data-theme="light"] .faq-section {
        background-attachment: scroll, scroll;
    }
    [data-theme="dark"] .getapp-section,
    [data-theme="dark"] .contact-section,
    [data-theme="light"] .getapp-section,
    [data-theme="light"] .contact-section {
        background-attachment: scroll, scroll;
        background-size: 100% 100%, cover;
    }
}