/*
 * Home page design system — "You sleep. It hunts." redesign.
 *
 * Scoped to public/pages/home.php ONLY. That page is standalone (no Bootstrap,
 * no _layout/head.php), so this file carries its own reset and component styles.
 * Do NOT load it alongside landing.css: the reset here (`*{margin:0;padding:0}`,
 * bare `section`/`nav`/`footer`/`.btn` rules) collides with Bootstrap and would
 * break the shared pages (/stories, /pricing, /features, legal, support).
 */
:root{
  --bg:#F5F6F8; --card:#fff;
  --ink:#111827; --mut:#6B7280; --soft:#9CA3AF;
  --line:#E5E7EB; --line2:#EDEFF2;
  --blue:#2563EB; --blue-bg:#EFF4FE;
  --green:#16A34A; --amber:#D97706; --red:#EF4444;
  --r:16px; --rs:12px;
  --sh:0 1px 2px rgba(17,24,39,.04),0 8px 24px rgba(17,24,39,.06);
  --sh-lg:0 2px 4px rgba(17,24,39,.05),0 24px 60px rgba(17,24,39,.12);
  /* design tokens consumed by consent_banner.js (ported from the Bootstrap layout) */
  --gradient-primary:linear-gradient(135deg,#1F2937,#111827);
  --brand-primary:var(--blue); --brand-on-primary:#fff;
  --color-surface:#fff; --color-surface-2:#F5F6F8; --color-surface-hover:#EDEFF2;
  --color-border:var(--line); --color-success:var(--green);
  --color-text:var(--ink); --color-text-strong:var(--ink); --color-text-muted:var(--mut);
  --radius-sm:10px; --radius-lg:16px; --shadow-lg:var(--sh-lg); --transition:.15s ease;
  --fs-sm:13.5px; --fs-lg:18px; --fw-medium:500; --fw-semibold:600;
  --space-2:8px; --space-4:12px; --space-5:16px; --space-6:20px; --space-8:28px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
.dn{display:none!important}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2{letter-spacing:-.035em;line-height:1.05;font-weight:800}
h1{font-size:clamp(42px,6vw,76px)}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-size:18px;font-weight:700;letter-spacing:-.01em}
p{color:var(--mut)}
a{color:inherit;text-decoration:none}
section{padding:100px 0}
.k{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:15.5px;padding:14px 26px;border-radius:var(--rs);border:0;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.btn:hover{transform:translateY(-1.5px)}
.btn-black{background:var(--ink);color:#fff}
.btn-black:hover{background:#000;box-shadow:0 10px 26px rgba(17,24,39,.25)}
.btn-white{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-white:hover{border-color:var(--ink)}
.btn-blue{background:var(--blue);color:#fff}
svg.ic{width:1.05em;height:1.05em;flex:none}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(22,163,74,.14);animation:blink 1.8s ease infinite}
@keyframes blink{50%{opacity:.45}}

/* ═ NAV ═ */
nav{position:sticky;top:0;z-index:60;background:rgba(245,246,248,.85);backdrop-filter:blur(14px);border-bottom:1px solid var(--line2)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.03em}
.rtile{width:36px;height:36px;border-radius:10px;background:var(--ink);display:flex;align-items:center;justify-content:center;flex:none}
.nl{display:flex;gap:28px;font-weight:500;font-size:14.5px;color:var(--mut)}
.nl a:hover{color:var(--ink)}
.nav-r{display:flex;gap:14px;align-items:center}
.nav-r .login{font-size:14.5px;font-weight:600;color:var(--mut)}
.nav-r .btn{padding:10px 20px;font-size:14.5px}
@media(max-width:900px){.nl{display:none}}

/* ═ HERO ═ */
.hero{padding:84px 0 40px;overflow:hidden}
/* Text column is wider than the panel so "Let a smart robot do it." keeps a real
   margin on one line — at the old 1.05fr it cleared by 11px and a font fallback
   would have wrapped it. */
/* Text column is wider than the panel so both headline sentences hold one line
   each — at the original 1.05fr the longer one needed 696px of a 563px column. */
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr}}
/* inline-block, not inline-flex: the chip is one sentence, and flex made every
   text run its own item, so `gap` shredded it into pieces once it wrapped. */
.status{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font-size:13.5px;font-weight:600;line-height:1.55;color:var(--mut);box-shadow:var(--sh)}
.status .dot{display:inline-block;vertical-align:middle;margin:-2px 8px 0 0}
@media(max-width:560px){.status{font-size:12.5px;border-radius:16px}}
/* The hero headline is a full sentence, not two short beats — at the global 76px
   it broke into four lines and orphaned "job." on its own. */
/* 30px floor: below the breakpoint the column is ~327px, and "Let a smart robot
   do it." needs 307px there — at 34px it overflowed and orphaned "it.". */
.hero h1{margin:26px 0 8px;font-size:clamp(30px,3.7vw,48px)}
/* Each sentence is its own block so text-wrap:balance evens out ITS own lines.
   Both fit one line on desktop; on narrow screens only the first sentence wraps,
   and balance keeps it off "Job search is a full-" / "time job.". */
.hero h1 .hl{display:block;text-wrap:balance}
.hero h1 .grey{color:#C6CAD2}
/* nowrap: "smart robot" is one accented unit — on narrow screens it was
   splitting across lines with the colour break landing mid-phrase. */
.hero h1 .accent{color:var(--blue);white-space:nowrap}
.hero .count{font-family:'JetBrains Mono',monospace;color:var(--blue)}
.status .count{font-variant-numeric:tabular-nums}
.hero .lead{font-size:18.5px;max-width:520px;margin:18px 0 32px}
.hero .lead b{color:var(--ink);font-weight:600}
.hctas{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:20px}
.hmeta{display:flex;gap:20px;flex-wrap:wrap;font-size:13.5px;font-weight:500;color:var(--mut)}
.hmeta span{display:inline-flex;gap:7px;align-items:center}
.hmeta svg{color:var(--green)}

/* live feed */
.feed{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);overflow:hidden}
.feed-h{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line2)}
.feed-h b{font-size:14px;display:flex;align-items:center;gap:9px}
.feed-h .mono{font-size:12px;color:var(--mut)}
.feed-b{padding:10px 14px 14px;height:398px;overflow:hidden;position:relative}
.feed-b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,#fff)}
.fi{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:10px 4px;opacity:0;transform:translateY(-14px);transition:opacity .5s,transform .5s}
.fi.show{opacity:1;transform:none}
.fi-top{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.fi .role{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.fi .co{font-size:12.5px;color:var(--mut);margin-top:1px}
.fi .pct{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:15px}
.fi .bar{height:5px;background:var(--line2);border-radius:99px;margin-top:10px;overflow:hidden}
.fi .bar i{display:block;height:100%;border-radius:99px;transition:width 1s ease .3s;width:0}
.fi .meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--soft);margin-top:8px}
.fi .meta .mono{font-size:11px}

/* ═ MARQUEE ═ */
.mq{border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);background:#fff;padding:18px 0;overflow:hidden;position:relative}
.mq .lab{position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;background:#fff;padding:0 22px 0 24px;z-index:2;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);border-right:1px solid var(--line2)}
.mq-track{display:flex;gap:12px;width:max-content;animation:scroll 36s linear infinite}
@keyframes scroll{to{transform:translateX(-50%)}}
.mq .b{flex:none;font-size:13.5px;font-weight:600;color:var(--mut);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 18px}

/* ═ NIGHT TIMELINE ═ */
.night{background:var(--ink);color:#fff;position:relative;overflow:hidden}
.night::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 340px at 15% 0%,rgba(37,99,235,.25),transparent 60%)}
.night .wrap{position:relative}
.night .k{color:#6B7280}
.night h2{color:#fff;margin-top:12px}
.night h2 .dim{color:#4B5563}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:64px;position:relative}
@media(max-width:900px){.tl{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.tl{grid-template-columns:1fr}}
.tl::before{content:"";position:absolute;top:11px;left:2%;right:2%;border-top:2px dashed #374151}
@media(max-width:900px){.tl::before{display:none}}
.tli{position:relative;padding-top:36px}
.tli .node{position:absolute;top:0;left:0;width:24px;height:24px;border-radius:50%;background:var(--ink);border:2px solid #4B5563;display:flex;align-items:center;justify-content:center}
.tli.hot .node{border-color:var(--blue);background:var(--blue)}
.tli .t{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#9CA3AF;margin-bottom:8px}
.tli.hot .t{color:#7FA6F7}
.tli b{display:block;font-size:16.5px;letter-spacing:-.01em;margin-bottom:6px}
.tli p{color:#9CA3AF;font-size:14px}
.tli .badge{display:inline-block;margin-top:10px;font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#86EFAC;background:rgba(22,163,74,.15);border-radius:8px;padding:4px 10px}
.night .end{margin-top:60px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid #1F2937;padding-top:34px}
.night .end p{color:#D1D5DB;font-size:17px;max-width:560px}
.night .end p b{color:#fff}

/* ═ STEPS ═ */
.steps{counter-reset:st}
.steps-g{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:60px;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--sh)}
@media(max-width:900px){.steps-g{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps-g{grid-template-columns:1fr}}
.st{padding:32px 28px;border-right:1px solid var(--line2);position:relative}
.st:last-child{border-right:0}
@media(max-width:900px){.st{border-bottom:1px solid var(--line2)}}
.st::before{counter-increment:st;content:"0" counter(st);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:var(--blue);background:var(--blue-bg);border-radius:8px;padding:5px 10px;display:inline-block;margin-bottom:18px}
.st h3{margin-bottom:8px}
.st p{font-size:14.5px}
.st .opt{font-size:12px;font-weight:600;color:var(--soft);border:1px solid var(--line);border-radius:99px;padding:2px 9px;margin-left:6px;vertical-align:2px}
/* how-it-works step illustrations */
.st-viz{background:var(--bg);border:1px solid var(--line2);border-radius:12px;padding:14px;height:116px;margin-bottom:20px;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
/* 1 · setup */
.v1-field{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--ink)}
.v1-field svg{width:13px;height:13px;color:var(--soft);flex:none}
.v1-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.v1-chips span{font-size:11px;font-weight:600;color:var(--mut);background:#fff;border:1px solid var(--line);border-radius:99px;padding:3px 9px;display:inline-flex;align-items:center;gap:4px}
.v1-chips .on{color:var(--blue);background:var(--blue-bg);border-color:#D6E2FB}
.v1-chips .on svg{width:11px;height:11px}
/* 2 · scan */
.v2-row{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:600;color:var(--mut);padding:4px 0}
.v2-row .nm{width:62px;flex:none}
.v2-bar{flex:1;height:5px;background:var(--line2);border-radius:99px;overflow:hidden}
.v2-bar i{display:block;height:100%;width:0;background:var(--blue);border-radius:99px;animation:v2scan 2.1s ease-in-out infinite}
@keyframes v2scan{0%{width:0}50%{width:100%}100%{width:0}}
/* 3 · digest */
.v3-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px}
.v3-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.v3-top b{font-size:12.5px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.v3-top small{display:block;font-size:10.5px;color:var(--mut);margin-top:1px}
.v3-pct{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;color:var(--green)}
.v3-bar{height:5px;background:var(--line2);border-radius:99px;margin-top:9px;overflow:hidden}
.v3-bar i{display:block;height:100%;width:92%;background:var(--green);border-radius:99px}
/* 4 · approve */
.st-viz.v4{flex-direction:row;align-items:center;gap:14px}
.v4-doc{width:60px;height:76px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 9px;display:flex;flex-direction:column;gap:6px;flex:none}
.v4-doc span{height:5px;background:var(--line2);border-radius:99px}
.v4-doc span.sh{width:58%}
.v4-ok{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--green);background:rgba(22,163,74,.1);border-radius:99px;padding:6px 12px}
.v4-ok svg{width:13px;height:13px;flex:none}

/* ═ SCORE DEMO ═ */
.score-sec .grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-top:0}
@media(max-width:920px){.score-sec .grid{grid-template-columns:1fr}}
.score-card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);padding:28px}
.score-card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:4px}
.score-card .role{font-weight:700;font-size:17px;letter-spacing:-.01em}
.score-card .co{font-size:13.5px;color:var(--mut);margin:2px 0 16px}
.big-score{text-align:right}
.big-score .n{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:30px;color:var(--green)}
.big-score .l{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--soft);text-transform:uppercase}
.srow{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--line2);font-size:14px}
.srow .sic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.srow .sic svg{width:14px;height:14px}
.s-ok .sic{background:rgba(22,163,74,.1);color:var(--green)}
.s-mid .sic{background:rgba(217,119,6,.12);color:var(--amber)}
.s-no .sic{background:rgba(239,68,68,.1);color:var(--red)}
.srow b{font-weight:600}
.srow small{color:var(--mut);font-size:13px}
.checkline{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--line2);font-size:15.5px;color:var(--mut)}
.checkline:last-of-type{border-bottom:0}
.checkline svg{width:19px;height:19px;color:var(--green);flex:none;margin-top:3px}
.checkline b{color:var(--ink);font-weight:600}

/* ═ TRIAL ═ */
.trial{padding:110px 0}
.trial-box{background:linear-gradient(160deg,#EFF4FE 0%,#fff 55%);border:1.5px solid #D6E2FB;border-radius:28px;padding:64px;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
@media(max-width:700px){.trial-box{padding:36px 26px}}
.trial-box::after{content:"";position:absolute;right:-120px;top:-120px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(37,99,235,.12),transparent 70%)}
.trial-tag{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;padding:7px 16px;margin-bottom:22px}
.trial-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;position:relative;z-index:1}
@media(max-width:920px){.trial-grid{grid-template-columns:1fr}}
.trial h2{margin-bottom:14px}
.trial .lead{font-size:17.5px;margin-bottom:30px;max-width:460px}
.tr-steps{margin-bottom:34px}
.tr-step{display:flex;gap:15px;align-items:flex-start;padding:10px 0}
.tr-step .n{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;color:var(--blue);background:#fff;border:1.5px solid #D6E2FB;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none}
.tr-step b{font-size:15.5px;display:block}
.tr-step small{font-size:13.5px;color:var(--mut)}
.trial .fine{font-size:13px;color:var(--soft);margin-top:14px}
.credit-chip{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);padding:30px 30px 26px;text-align:center;position:relative}
.cc-badge{display:inline-flex;align-items:center;gap:6px;background:var(--blue);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:99px;padding:6px 14px;margin-bottom:18px;box-shadow:0 6px 18px rgba(37,99,235,.28)}
.cc-badge svg{width:12px;height:12px}
.credit-chip .cc-n{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:66px;line-height:1;letter-spacing:-.03em}
.credit-chip .cc-n span{color:var(--blue)}
.credit-chip .cc-l{font-size:14px;font-weight:600;color:var(--mut);margin:8px 0 20px}
.cc-bonus{text-align:left;border-top:1px solid var(--line2);padding-top:8px}
.cc-b{display:flex;align-items:center;gap:14px;padding:9px 0}
.cc-b .q{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:27px;line-height:1;color:var(--blue);min-width:44px;text-align:right;letter-spacing:-.02em}
.cc-b .t{font-size:14px;color:var(--ink);font-weight:500;line-height:1.25}
.cc-rows{text-align:left;border-top:1px solid var(--line2);padding-top:12px;margin-top:6px}
.cc-row{display:flex;justify-content:space-between;font-size:13.5px;padding:6px 0;color:var(--mut)}
.cc-row b{color:var(--ink);font-weight:600}
.cc-row .mono{font-size:12.5px}
.cc-sum{margin-top:16px;background:var(--blue-bg);border:1px solid #D6E2FB;border-radius:11px;padding:12px;font-size:13px;color:var(--mut);font-weight:500}
.cc-sum b{color:var(--blue);font-weight:700}

/* ═ PRICING ═ */
.pricing{background:#fff;border-top:1px solid var(--line2)}
.pg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
@media(max-width:920px){.pg{grid-template-columns:1fr;max-width:430px;margin-left:auto;margin-right:auto}}
.plan{border:1px solid var(--line);border-radius:20px;padding:34px;display:flex;flex-direction:column;position:relative;background:#fff;transition:box-shadow .2s}
.plan:hover{box-shadow:var(--sh)}
.plan.pop{border:2px solid var(--ink);box-shadow:var(--sh-lg)}
.plan .tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:5px 15px;white-space:nowrap}
.plan .nm{font-weight:700;font-size:15.5px;color:var(--mut)}
.plan .pr{font-weight:800;font-size:52px;letter-spacing:-.04em;margin:8px 0 0}
.plan .per{font-size:13.5px;color:var(--mut)}
.plan .per .mono{color:var(--ink);font-weight:700;font-size:12.5px}
.plan .cr{margin:16px 0 22px;font-size:13.5px;font-weight:600;color:var(--blue);background:var(--blue-bg);border-radius:9px;padding:8px 13px;align-self:flex-start}
.plan ul{list-style:none;flex:1;margin-bottom:26px}
.plan li{display:flex;gap:10px;font-size:14.5px;color:var(--mut);padding:7px 0}
.plan li svg{width:16px;height:16px;color:var(--green);flex:none;margin-top:3.5px}
.plan li .fl{font-weight:600;color:var(--ink)}
.plan li .fd{display:block;font-size:12px;color:var(--soft);font-weight:400;margin-top:2px;line-height:1.45}
.pnotes{display:flex;gap:24px;justify-content:center;margin-top:36px;flex-wrap:wrap;font-size:13.5px;font-weight:500;color:var(--mut)}
.pnotes span{display:inline-flex;align-items:center;gap:7px}
.pnotes svg{width:15px;height:15px;color:var(--green)}
.ptrial{margin-top:30px;text-align:center;font-size:15px;color:var(--mut)}
.ptrial a{color:var(--blue);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ═ STORIES ═ */
.sg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:60px}
@media(max-width:900px){.sg{grid-template-columns:1fr}}
.story{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px 30px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s,border-color .18s}
.story:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:#D9DEE6}
.story-cat{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--blue);background:var(--blue-bg);border:1px solid #D6E2FB;border-radius:99px;padding:4px 11px;margin-bottom:16px}
.story .q{font-size:15.5px;color:var(--ink);font-weight:500;line-height:1.55;margin-bottom:22px;flex:1}
.story-ft{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--line2);padding-top:18px}
.story .who{display:flex;gap:12px;align-items:center}
.story .av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:13.5px;display:flex;align-items:center;justify-content:center;flex:none}
.story .who b{font-size:14px;display:block;line-height:1.2}
.story .who small{font-size:12px;color:var(--mut);display:block;margin-top:2px}
.story-more{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:var(--soft);transition:color .15s}
.story-more svg{width:13px;height:13px;transition:transform .15s}
.story:hover .story-more{color:var(--blue)}
.story:hover .story-more svg{transform:translateX(3px)}
.sg-all{text-align:center;margin-top:36px}
.sg-all a{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;color:var(--blue)}
.sg-all a svg{width:15px;height:15px;transition:transform .15s}
.sg-all a:hover svg{transform:translateX(3px)}

/* ═ FAQ ═ */
.faql{max-width:740px;margin:60px auto 0}
.faq{background:#fff;border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
.faq summary{cursor:pointer;padding:19px 24px;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;color:var(--soft);transition:transform .2s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 24px 19px;font-size:14.5px;color:var(--mut)}

/* ═ FINAL ═ */
.final{background:var(--ink);color:#fff;text-align:center;padding:110px 0;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 50% 120%,rgba(37,99,235,.35),transparent 70%)}
.final .wrap{position:relative}
.final h2{color:#fff;margin:22px 0 14px}
.final h2 .dim{color:#4B5563}
.final p{color:#9CA3AF;font-size:17px;max-width:480px;margin:0 auto 34px}
.final .btn-white{border:0}
.final small{display:block;margin-top:16px;font-size:13px;color:#6B7280}

/* ═ FOOTER ═ */
footer{background:#fff;border-top:1px solid var(--line2);padding:56px 0 32px;font-size:14px;color:var(--mut)}
.fg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}
@media(max-width:800px){.fg{grid-template-columns:1fr 1fr}}
footer h4{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin-bottom:13px}
footer li{list-style:none;padding:4px 0}
footer a:hover{color:var(--ink)}
.fb{border-top:1px solid var(--line2);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--soft)}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}

/* ── ported sections (from previous landing) ── */
.sec-sub{font-size:17px;max-width:560px;margin:16px auto 0;color:var(--mut)}
.night-lead{color:#9CA3AF;font-size:18px;max-width:620px;margin-top:16px}
.lead2{font-size:17px;color:var(--mut);max-width:440px;margin-bottom:28px}
/* FEATURES */
.feat-g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:56px}
@media(max-width:900px){.feat-g{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.feat-g{grid-template-columns:1fr}}
.feat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;box-shadow:var(--sh)}
.feat-ic{width:46px;height:46px;border-radius:12px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.feat-ic svg{width:22px;height:22px}
.feat h3{margin-bottom:8px}
.feat p{font-size:14px;flex:1;margin-bottom:16px}
.stat{align-self:flex-start;font-size:11.5px;font-weight:700;border-radius:99px;padding:4px 11px 4px 10px;display:inline-flex;align-items:center;gap:6px}
.stat::before{content:"";width:6px;height:6px;border-radius:50%}
.stat.on{color:var(--green);background:rgba(22,163,74,.1)}.stat.on::before{background:var(--green)}
.stat.soon{color:var(--amber);background:rgba(217,119,6,.12)}.stat.soon::before{background:var(--amber)}
/* TRUST */
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
@media(max-width:920px){.trust-grid{grid-template-columns:1fr;gap:40px}}
.tlist{display:flex;flex-direction:column;gap:22px}
.ti{display:flex;gap:15px;align-items:flex-start}
.ti-ic{width:38px;height:38px;border-radius:10px;background:var(--blue-bg);color:var(--blue);display:flex;align-items:center;justify-content:center;flex:none}
.ti-ic svg{width:18px;height:18px}
.ti b{display:block;font-size:15.5px;letter-spacing:-.01em;margin-bottom:3px}
.ti p{font-size:14px}
/* browser frame (trust + showcase) */
.frame{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);overflow:hidden}
.frame-bar{display:flex;gap:7px;padding:12px 16px;border-bottom:1px solid var(--line2)}
.frame-bar span{width:11px;height:11px;border-radius:50%;background:var(--line)}
.frame-bar span:nth-child(1){background:#F87171}.frame-bar span:nth-child(2){background:#FBBF24}.frame-bar span:nth-child(3){background:#34D399}
.frame img{display:block;width:100%;height:auto}
/* SHOWCASE */
.sc-panel{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;margin-top:56px}
.sc-panel.rev .sc-text{order:2}
@media(max-width:920px){.sc-panel{grid-template-columns:1fr;gap:28px}.sc-panel.rev .sc-text{order:0}}
.sc-ix{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.sc-text h3{font-size:26px;letter-spacing:-.02em;margin:12px 0;font-weight:800}
.sc-text p{font-size:15.5px}
/* CALCULATOR */
.calc-box{max-width:620px;margin:44px auto 0;display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-lg);padding:14px}
@media(max-width:560px){.calc-box{flex-direction:column}}
.calc-field{position:relative;flex:1}
.calc-field input{width:100%;height:50px;border:1px solid var(--line);border-radius:11px;padding:0 16px;font:inherit;font-size:16px;color:var(--ink);outline:none}
.calc-field input:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.calc-box .btn{height:50px;white-space:nowrap}
.calc-sug{position:absolute;top:56px;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:var(--sh-lg);list-style:none;overflow:hidden;z-index:10}
.calc-sug li{padding:11px 16px;font-size:14.5px;cursor:pointer}
.calc-sug li:hover,.calc-sug li.sel{background:var(--blue-bg);color:var(--blue)}
.calc-res{max-width:620px;margin:24px auto 0;text-align:center;background:linear-gradient(160deg,#EFF4FE,#fff 60%);border:1.5px solid #D6E2FB;border-radius:20px;padding:40px 28px}
.calc-res .calc-n{font-family:'JetBrains Mono',monospace;font-size:64px;font-weight:700;color:var(--blue);line-height:1;letter-spacing:-.03em}
.calc-res .calc-l{font-size:16px;color:var(--mut);margin:8px 0 22px}
.calc-res .calc-l b{color:var(--ink)}
.calc-again{display:block;margin:16px auto 0;background:none;border:0;color:var(--mut);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.calc-again:hover{color:var(--ink)}
/* STATS BAND */
.statsb{background:var(--ink);color:#fff;padding:64px 0}
.sb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center}
@media(max-width:640px){.sb-grid{grid-template-columns:1fr 1fr;gap:36px 24px}}
.sb-i{display:flex;flex-direction:column;gap:6px}
.sb-n{font-size:clamp(34px,5vw,48px);font-weight:800;letter-spacing:-.03em;color:#fff}
.sb-l{font-size:13.5px;font-weight:600;color:#9CA3AF;letter-spacing:.02em}