/* ============================================================
   TrendGenie website styles
   Brand palette derived from the genie logo:
   azure/navy blue as the dominant color, orange/gold as the
   energy accent (blue body + orange tail).
   Sections: 1 Tokens  2 Base  3 Motion  4 Buttons  5 Nav
   6 Hero  7 App window mockup  8 Sections/components
   9 Pricing  10 FAQ  11 Footer  12 Responsive
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:#f5f8fc; --bg-2:#eaf1f8; --panel:#ffffff; --panel-2:#f3f7fb;
  --ink:#0c1b33; --ink-soft:#2f4058; --muted:#5c6b82;
  --line:#e3eaf2; --line-2:#d3dde8;
  --brand:#1591e0; --brand-deep:#0e3f8c; --brand-navy:#0c2a66;
  --cyan:#38bdf8; --brand-soft:#e7f2fc;
  --warm:#f5871f; --warm-2:#fdb515; --warm-soft:#fef1e0;
  --good:#12b981; --bad:#ef4444;
  --g-cool:linear-gradient(120deg,#0e3f8c,#1591e0 55%,#38bdf8);
  --g-warm:linear-gradient(120deg,#fdb515,#f5871f);

  --r-1:10px; --r-2:14px; --r-3:20px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(12,27,51,.06);
  --sh-2:0 10px 30px -10px rgba(12,27,51,.16);
  --sh-3:0 30px 70px -22px rgba(12,27,51,.30);
  --ring:0 0 0 3px color-mix(in srgb,var(--brand) 34%,transparent);

  --shell:1200px; --gutter:clamp(20px,5vw,44px);
  --e-out:cubic-bezier(.22,1,.36,1);
  --t-micro:160ms; --t-std:320ms; --t-large:640ms;
  --font:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
}
:root[data-theme=dark]{
  --bg:#081426; --bg-2:#0b1a30; --panel:#0f2038; --panel-2:#0c1a2f;
  --ink:#eaf2fb; --ink-soft:#c0cddd; --muted:#8397ae;
  --line:#1b2c47; --line-2:#26395a;
  --brand:#3aa5ea; --brand-deep:#2f7fd6; --brand-navy:#12244c;
  --cyan:#56c7fb; --brand-soft:#122a45;
  --warm:#f79433; --warm-2:#fcb64a; --warm-soft:#241a0d;
  --good:#22c58f; --bad:#f2555b;
  --sh-1:0 1px 3px rgba(0,0,0,.4);
  --sh-2:0 12px 34px -10px rgba(0,0,0,.55);
  --sh-3:0 34px 80px -24px rgba(0,0,0,.72);
}

/* ---------- 2. BASE ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums; overflow-x:hidden}
h1,h2,h3,h4{margin:0; line-height:1.1; letter-spacing:-.02em; font-weight:700; color:var(--ink)}
p{margin:0}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
code{font-family:var(--mono); font-size:.86em; background:var(--panel-2); border:1px solid var(--line); border-radius:6px; padding:.08em .42em}
:focus-visible{outline:none; box-shadow:var(--ring); border-radius:8px}
.shell{width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter)}
.shell-wide{max-width:1320px}
.grad{background:var(--g-cool); -webkit-background-clip:text; background-clip:text; color:transparent}
.mono{font-family:var(--mono)}
.good{color:var(--good)} .bad{color:var(--bad)}
.skip-link{position:absolute; left:-999px; top:8px; z-index:200; background:var(--panel); border:1px solid var(--line); padding:10px 16px; border-radius:var(--r-1)}
.skip-link:focus{left:16px}

.eyebrow{font-family:var(--mono); font-size:12px; font-weight:500; text-transform:uppercase;
  letter-spacing:.2em; color:var(--brand); margin:0 0 18px; display:inline-flex; align-items:center; gap:9px}
.eyebrow.center{justify-content:center; display:flex}
.eyebrow .dot{width:7px; height:7px; border-radius:50%; background:var(--warm)}

.section{padding:clamp(68px,10vw,124px) 0; position:relative}
.section-tint{background:var(--bg-2)}
.section-title{font-size:clamp(2rem,4.2vw,3.2rem); letter-spacing:-.03em}
.section-head{max-width:720px; margin-bottom:clamp(40px,6vw,60px)}
.section-head.center,.center{margin-inline:auto; text-align:center}
.section-lede{color:var(--muted); font-size:clamp(1.05rem,1.6vw,1.2rem); margin-top:18px; max-width:640px}
.section-head.center .section-lede{margin-inline:auto}

/* ---------- 3. MOTION ---------- */
[data-reveal],[data-stagger]{opacity:0; transform:translateY(18px); transition:opacity var(--t-large) var(--e-out), transform var(--t-large) var(--e-out)}
[data-reveal].in,[data-stagger].in{opacity:1; transform:none}

/* ---------- 4. BUTTONS ---------- */
.btn{display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--font); font-weight:600; font-size:15px; line-height:1;
  padding:13px 22px; border-radius:var(--r-1); border:1px solid transparent; cursor:pointer;
  transition:transform var(--t-micro) var(--e-out), background var(--t-micro), box-shadow var(--t-micro), border-color var(--t-micro), color var(--t-micro)}
.btn-lg{font-size:16px; padding:16px 28px}
.btn-primary{background:var(--warm); color:#fff; box-shadow:0 8px 22px -8px color-mix(in srgb,var(--warm) 70%,transparent)}
.btn-primary:hover{transform:translateY(-2px); background:color-mix(in srgb,var(--warm) 88%,#000); box-shadow:0 14px 30px -10px color-mix(in srgb,var(--warm) 70%,transparent)}
.btn-secondary{background:var(--brand); color:#fff; box-shadow:0 8px 22px -8px color-mix(in srgb,var(--brand) 60%,transparent)}
.btn-secondary:hover{transform:translateY(-2px); background:color-mix(in srgb,var(--brand) 88%,#000)}
.btn-ghost{background:var(--panel); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-1)}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--brand); color:var(--brand)}
.btn-arrow{transition:transform var(--t-std) var(--e-out)}
.btn:hover .btn-arrow{transform:translateX(4px)}

/* ---------- 5. NAV ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:100; transition:background var(--t-std) var(--e-out), border-color var(--t-std)}
.nav::after{content:''; position:absolute; inset:auto 0 0 0; border-bottom:1px solid transparent; transition:border-color var(--t-std)}
.nav.scrolled{background:color-mix(in srgb,var(--bg) 85%,transparent); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3)}
.nav.scrolled::after{border-bottom-color:var(--line)}
.nav-inner{display:flex; align-items:center; gap:24px; height:70px}
.brand{display:flex; align-items:center; gap:11px; font-weight:800; font-size:20px; letter-spacing:-.02em; color:var(--ink)}
.brand-logo{width:38px; height:38px; object-fit:contain; flex:none}
.brand-word{white-space:nowrap}
.nav-links{display:flex; gap:2px; margin-left:auto}
.nav-links a{position:relative; color:var(--muted); font-size:15px; font-weight:500; padding:9px 14px; border-radius:var(--r-1); transition:color var(--t-micro), background var(--t-micro)}
.nav-links a:hover{color:var(--ink); background:var(--panel-2)}
.nav-links a.active{color:var(--brand)}
.nav-links a.active::after{content:''; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px; background:var(--warm)}
.nav-actions{display:flex; align-items:center; gap:10px}
.theme-toggle{display:grid; place-items:center; width:42px; height:42px; border-radius:var(--r-1); border:1px solid var(--line-2); background:var(--panel); color:var(--ink-soft); cursor:pointer; transition:color var(--t-micro), border-color var(--t-micro)}
.theme-toggle:hover{color:var(--brand); border-color:var(--brand)}
.theme-toggle .ic-moon{display:none}
:root[data-theme=dark] .theme-toggle .ic-sun{display:none}
:root[data-theme=dark] .theme-toggle .ic-moon{display:block}
.menu-toggle{display:none; flex-direction:column; gap:5px; width:44px; height:44px; align-items:center; justify-content:center; background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-1); cursor:pointer}
.menu-toggle span{width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform var(--t-std) var(--e-out), opacity var(--t-micro)}
.menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:flex; flex-direction:column; gap:4px; padding:14px var(--gutter) 22px; background:var(--panel); border-bottom:1px solid var(--line)}
.mobile-menu[hidden]{display:none}
.mobile-menu a{padding:13px 12px; border-radius:var(--r-1); color:var(--ink-soft); font-weight:500}
.mobile-menu a:hover,.mobile-menu a.active{background:var(--panel-2); color:var(--brand)}
.mobile-menu .btn{margin-top:8px}

/* ---------- 6. HERO ---------- */
.hero{position:relative; padding:calc(70px + clamp(48px,9vh,96px)) 0 clamp(60px,9vw,104px); overflow:hidden}
.hero-halo{position:absolute; z-index:0; top:-160px; right:-120px; width:640px; height:640px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--brand) 20%,transparent),transparent 72%); pointer-events:none}
.hero-halo.warm{top:auto; bottom:-220px; left:-160px; right:auto; width:520px; height:520px;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--warm) 15%,transparent),transparent 72%)}
.hero-inner{position:relative; z-index:1; display:grid; grid-template-columns:1.02fr 1.1fr; gap:clamp(30px,4vw,60px); align-items:center}
.hero-copy{max-width:560px}
.hero-title{font-size:clamp(2.5rem,5.4vw,4.1rem); letter-spacing:-.035em; margin:8px 0 22px}
.hero-title .grad{display:inline}
.hero-lede{color:var(--ink-soft); font-size:clamp(1.06rem,1.6vw,1.24rem); max-width:520px}
.hero-lede b{color:var(--ink); font-weight:700}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin:32px 0 24px}
.hero-trust{display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none; padding:0; margin:0; color:var(--muted); font-size:14.5px}
.hero-trust li{display:inline-flex; align-items:center; gap:8px}
.hero-trust svg{color:var(--brand)}

/* live data indicator + update flash (see main.js's marketing snapshot fetch) */
.live-dot{display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--line-2); margin-left:6px; vertical-align:middle; transition:background var(--t-std)}
.live-dot.on{background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 22%,transparent)}
@keyframes liveFlash{0%{color:var(--warm)}100%{color:inherit}}
.live-flash{animation:liveFlash 900ms var(--e-out)}

/* stat strip */
.stat-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:2px; margin-top:clamp(40px,6vw,64px); background:var(--line); border:1px solid var(--line); border-radius:var(--r-2); overflow:hidden}
.stat-cell{background:var(--panel); padding:24px 22px}
.stat-cell b{display:block; font-family:var(--mono); font-size:clamp(1.6rem,3vw,2.2rem); letter-spacing:-.02em; color:var(--ink)}
.stat-cell span{color:var(--muted); font-size:14px}

/* ---------- 7. APP WINDOW MOCKUP ---------- */
.appwin{position:relative; z-index:1; border:1px solid var(--line-2); border-radius:var(--r-3); background:var(--panel); box-shadow:var(--sh-3); overflow:hidden; will-change:transform}
.appwin-top{display:flex; align-items:center; gap:12px; padding:11px 16px; background:var(--panel-2); border-bottom:1px solid var(--line)}
.appwin-top .dots{display:flex; gap:7px}
.appwin-top .dots i{width:11px; height:11px; border-radius:50%; background:var(--line-2)}
.appwin-top .url{font-family:var(--mono); font-size:11.5px; color:var(--muted); background:var(--panel); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 14px; margin-inline:auto}
.appmock{display:grid; grid-template-columns:168px 1fr; min-height:376px}
.am-side{background:var(--panel-2); border-right:1px solid var(--line); padding:16px 12px; display:flex; flex-direction:column; gap:5px}
.am-brand{display:flex; align-items:center; gap:9px; padding:2px 6px 14px}
.am-brand .m{width:30px; height:30px; border-radius:9px; background:var(--g-cool); display:grid; place-items:center; color:#fff; flex:none}
.am-brand b{font-size:14px; letter-spacing:-.01em}
.am-brand span{display:block; font-size:9.5px; color:var(--muted)}
.am-nav{display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; font-size:12.5px; color:var(--muted); border-left:2px solid transparent}
.am-nav svg{width:15px; height:15px; flex:none}
.am-nav.active{background:color-mix(in srgb,var(--brand) 9%,transparent); color:var(--ink); border-left-color:var(--brand); font-weight:600}
.am-status{margin-top:auto; display:flex; align-items:center; gap:8px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; background:var(--panel); font-size:11px; color:var(--muted)}
.am-status i{width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 3px color-mix(in srgb,var(--good) 18%,transparent)}
.am-main{padding:16px; min-width:0; display:flex; flex-direction:column; gap:12px}
.am-metrics{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.am-metric{border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:11px 12px}
.am-metric span{font-size:9px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-family:var(--mono)}
.am-metric b{display:block; font-family:var(--mono); font-size:16px; margin-top:5px}
.am-chartcard{border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:13px 14px; flex:1; display:flex; flex-direction:column}
.am-chart-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.am-chart-head b{font-family:var(--mono); font-size:13px}
.am-tag{font-family:var(--mono); font-size:9px; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill)}
.am-tag.long{color:#fff; background:var(--good)}
.am-chart{width:100%; height:auto; display:block}
.am-signal{border:1px solid color-mix(in srgb,var(--good) 30%,var(--line)); border-left:3px solid var(--good); border-radius:10px; background:var(--panel); padding:11px 13px; display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center}
.am-signal .s-pair{font-family:var(--mono); font-weight:700; font-size:13px}
.am-signal .s-dir{font-family:var(--mono); font-size:10px; color:#fff; background:var(--good); padding:3px 7px; border-radius:5px; letter-spacing:.06em}
.am-signal .s-levels{display:flex; gap:14px; font-family:var(--mono); font-size:11px; color:var(--muted); grid-column:1/-1}
.am-signal .s-levels b{color:var(--ink)}
/* floating accent card echoing the genie tail (orange) */
.appwin-float{position:absolute; z-index:2; right:-16px; bottom:-18px; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--sh-2); padding:12px 14px; display:flex; align-items:center; gap:11px; will-change:transform}
.appwin-float .ring{width:36px; height:36px; border-radius:50%; background:conic-gradient(var(--warm) 74%,var(--line) 0); display:grid; place-items:center; flex:none}
.appwin-float .ring i{width:26px; height:26px; border-radius:50%; background:var(--panel); display:grid; place-items:center; font-family:var(--mono); font-size:10px; font-weight:700; color:var(--warm)}
.appwin-float b{font-size:13px} .appwin-float span{display:block; font-size:11px; color:var(--muted)}

/* ---------- 8. SECTIONS / COMPONENTS ---------- */
/* problem story */
.story{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.story-step{padding:26px 22px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--panel); box-shadow:var(--sh-1); transition:transform var(--t-std) var(--e-out), box-shadow var(--t-std), border-color var(--t-std)}
.story-step:hover{transform:translateY(-4px); box-shadow:var(--sh-2)}
.story-num{font-family:var(--mono); font-size:13px; color:var(--muted); display:block; margin-bottom:16px}
.story-step h3{font-size:1.16rem; margin-bottom:9px}
.story-step p{color:var(--muted); font-size:15px}
.story-step.accent{background:linear-gradient(160deg,color-mix(in srgb,var(--brand) 9%,var(--panel)),var(--panel)); border-color:color-mix(in srgb,var(--brand) 28%,var(--line))}
.story-step.accent .story-num{color:var(--warm); font-size:20px; font-weight:700}
.story-step.accent p b{color:var(--ink)}

/* split feature row */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
.split+.split{margin-top:clamp(56px,8vw,104px)}
.split.rev .split-media{order:-1}
.split-body h3{font-size:clamp(1.5rem,2.6vw,2rem); margin-bottom:16px}
.split-body p{color:var(--muted); font-size:1.05rem; margin-bottom:18px}
.check{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px}
.check li{position:relative; padding-left:30px; color:var(--ink-soft)}
.check li::before{content:''; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:6px; background:var(--brand-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231591e0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center}

/* pillar cards */
.pillars{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.pillar{padding:30px 26px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--panel); box-shadow:var(--sh-1); transition:transform var(--t-std) var(--e-out), box-shadow var(--t-std)}
.pillar:hover{transform:translateY(-5px); box-shadow:var(--sh-2)}
.pillar-ic{width:50px; height:50px; border-radius:12px; display:grid; place-items:center; color:#fff; background:var(--g-cool); margin-bottom:20px; box-shadow:var(--sh-2)}
.pillar-ic.warm{background:var(--g-warm)}
.pillar h3{font-size:1.3rem; margin-bottom:11px}
.pillar p{color:var(--muted); font-size:15px}

/* module grid */
.modules{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.module{padding:22px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--panel); transition:border-color var(--t-std), transform var(--t-std)}
.module:hover{border-color:var(--brand); transform:translateY(-3px)}
.module .m-ic{color:var(--brand); margin-bottom:12px}
.module b{display:block; font-size:15.5px; margin-bottom:6px}
.module span{color:var(--muted); font-size:14px}

/* steps */
.steps{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.step{position:relative; padding:30px 26px; border:1px solid var(--line); border-radius:var(--r-2); background:var(--panel); box-shadow:var(--sh-1)}
.step-n{display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--warm-soft); color:var(--warm); font-family:var(--mono); font-weight:700; font-size:18px; margin-bottom:20px}
.step h3{font-size:1.2rem; margin-bottom:10px}
.step p{color:var(--muted); font-size:15px}

/* cta band */
.ctaband{position:relative; overflow:hidden; border-radius:var(--r-3); padding:clamp(44px,7vw,72px); text-align:center; color:#fff;
  background:var(--g-cool); box-shadow:var(--sh-3)}
.ctaband::after{content:''; position:absolute; right:-80px; bottom:-120px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--warm) 55%,transparent),transparent 70%); opacity:.5}
.ctaband>*{position:relative; z-index:1}
.ctaband h2{color:#fff; font-size:clamp(2rem,4vw,3rem); margin-bottom:16px}
.ctaband p{color:rgba(255,255,255,.85); font-size:1.12rem; max-width:560px; margin:0 auto 30px}
.ctaband .btn-ghost{background:rgba(255,255,255,.12); color:#fff; border-color:rgba(255,255,255,.3)}
.ctaband .btn-ghost:hover{background:rgba(255,255,255,.2); color:#fff; border-color:#fff}

/* page header (interior pages) */
.pagehead{padding:calc(70px + clamp(52px,8vw,88px)) 0 clamp(30px,5vw,52px); text-align:center; position:relative; overflow:hidden}
.pagehead h1{font-size:clamp(2.3rem,5vw,3.6rem); letter-spacing:-.03em; max-width:900px; margin:8px auto 0}
.pagehead p{color:var(--muted); font-size:clamp(1.05rem,1.7vw,1.25rem); max-width:620px; margin:20px auto 0}

/* ---------- 9. PRICING ---------- */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:start}
.plan{border:1px solid var(--line); border-radius:var(--r-3); background:var(--panel); padding:30px 28px; box-shadow:var(--sh-1); display:flex; flex-direction:column; gap:18px}
.plan.featured{border-color:var(--brand); box-shadow:var(--sh-2); position:relative}
.plan.featured::before{content:'Most popular'; position:absolute; top:-12px; left:28px; background:var(--warm); color:#fff; font-size:11px; font-weight:700; letter-spacing:.04em; padding:5px 12px; border-radius:var(--r-pill)}
.plan-name{font-size:1.15rem; font-weight:700}
.plan-desc{color:var(--muted); font-size:14px; min-height:40px}
.plan-price{display:flex; align-items:baseline; gap:6px}
.plan-price b{font-size:2.6rem; letter-spacing:-.03em}
.plan-price span{color:var(--muted); font-size:14px}
.plan .btn{width:100%}
.plan-feats{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:11px; border-top:1px solid var(--line); padding-top:20px}
.plan-feats li{position:relative; padding-left:28px; font-size:14.5px; color:var(--ink-soft)}
.plan-feats li::before{content:''; position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:5px; background:var(--brand-soft);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%231591e0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center}
.plan-feats li.off{color:var(--muted)}
.plan-feats li.off::before{background:var(--panel-2); background-image:none}

/* ---------- 10. FAQ ---------- */
.faq-shell{max-width:820px}
.accordion{display:flex; flex-direction:column; gap:10px}
.acc-item{border:1px solid var(--line); border-radius:var(--r-2); background:var(--panel); overflow:hidden; transition:border-color var(--t-std), box-shadow var(--t-std)}
.acc-item.open{border-color:color-mix(in srgb,var(--brand) 40%,var(--line)); box-shadow:var(--sh-1)}
.acc-trigger{width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 22px; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font); font-size:1.05rem; font-weight:600; color:var(--ink)}
.acc-icon{position:relative; flex:none; width:20px; height:20px}
.acc-icon::before,.acc-icon::after{content:''; position:absolute; top:50%; left:50%; width:12px; height:2px; background:var(--brand); border-radius:2px; transform:translate(-50%,-50%); transition:transform var(--t-std) var(--e-out)}
.acc-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-item.open .acc-icon::after{transform:translate(-50%,-50%) rotate(0)}
.acc-panel{overflow:hidden; height:0; transition:height var(--t-std) var(--e-out)}
.acc-inner{padding:0 22px 22px}
.acc-inner p{color:var(--muted); font-size:15px}

/* ---------- 11. FOOTER ---------- */
.footer{border-top:1px solid var(--line); background:var(--panel); padding-top:clamp(48px,7vw,72px)}
.footer-inner{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:40px 24px; padding-bottom:44px}
.footer-brand{max-width:300px}
.footer-brand .brand{margin-bottom:16px}
.footer-brand p{color:var(--muted); font-size:14.5px}
.footer-col h4{font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:16px; font-weight:500}
.footer-col a{display:block; color:var(--ink-soft); font-size:14.5px; padding:6px 0; transition:color var(--t-micro)}
.footer-col a:hover{color:var(--brand)}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:22px 0; border-top:1px solid var(--line)}
.disclaimer{font-size:12.5px; color:var(--muted); max-width:640px}
.copyright{font-family:var(--mono); font-size:12.5px; color:var(--muted)}

/* ---------- 12. RESPONSIVE ---------- */
@media(max-width:1000px){
  .hero-inner{grid-template-columns:1fr; gap:48px}
  .hero-visual{max-width:600px}
  .story,.pillars,.modules,.steps,.plans{grid-template-columns:1fr 1fr}
  .split,.split.rev .split-media{grid-template-columns:1fr; order:0}
  .split-media{order:-1}
  .stat-strip{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr 1fr; gap:32px}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:680px){
  body{font-size:16px}
  .nav-links,.nav-cta{display:none}
  .menu-toggle{display:flex}
  .story,.pillars,.modules,.steps,.plans,.stat-strip{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .appmock{grid-template-columns:1fr}
  .am-side{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:10px}
  .am-brand,.am-status{display:none}
  .am-nav{white-space:nowrap; border-left:0}
  .am-nav.active{border-left:0; border-bottom:2px solid var(--brand)}
  .appwin-float{position:static; margin-top:14px}
  .am-metrics{grid-template-columns:1fr 1fr}
  .footer-inner{grid-template-columns:1fr 1fr}
  .footer-bottom{flex-direction:column; align-items:flex-start}
}
@media(max-width:400px){
  .footer-inner{grid-template-columns:1fr}
  .hero-cta .btn,.plan .btn{width:100%}
}

/* ---------- LEGAL / LONG-FORM ---------- */
.legal{max-width:820px; margin-inline:auto}
.legal .updated{font-family:var(--mono); font-size:13px; color:var(--muted); margin-bottom:8px}
.legal .lead{font-size:1.1rem; color:var(--ink-soft); margin-bottom:12px}
.legal h2{font-size:1.4rem; margin:40px 0 14px; letter-spacing:-.02em}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:1.1rem; margin:24px 0 8px}
.legal p{color:var(--ink-soft); margin-bottom:14px}
.legal ul{padding-left:22px; margin:0 0 16px}
.legal li{color:var(--ink-soft); margin-bottom:8px}
.legal a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}
.legal strong{color:var(--ink)}
.legal .callout{border:1px solid color-mix(in srgb,var(--warm) 40%,var(--line)); background:var(--warm-soft); border-radius:var(--r-2); padding:18px 20px; margin:0 0 24px}
.legal .callout p{margin:0; color:var(--ink-soft)}
.legal-toc{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; padding:0 0 24px; border-bottom:1px solid var(--line); list-style:none}
.legal-toc a{font-size:13px; color:var(--muted); border:1px solid var(--line); border-radius:var(--r-pill); padding:6px 13px; text-decoration:none}
.legal-toc a:hover{color:var(--brand); border-color:var(--brand)}

/* ---------- REDUCED MOTION ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important}
  [data-reveal],[data-stagger]{opacity:1 !important; transform:none !important}
}