:root{--ink:#0d1b2e;--ink2:#16294a;--paper:#f3f5f7;--card:#fff;--text:#1b2733;--mute:#566474;--line:#d8dee5;--amber:#f2a93b;--amberd:#b8730f;--ok:#2e9e74;--warn:#d9822b;--bad:#c4452f;
--h:'Bricolage Grotesque',Georgia,sans-serif;--b:'IBM Plex Sans',system-ui,sans-serif;--m:'IBM Plex Mono',ui-monospace,Menlo,monospace}
@media (prefers-color-scheme:dark){:root{--paper:#0a1422;--card:#101e33;--text:#e6ebf1;--mute:#9aa8b9;--line:#233350;--amberd:#f2a93b}}
html{scroll-behavior:smooth;scroll-padding-top:12px}
*,*:before,*:after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--text);font:400 17px/1.6 var(--b);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--h);line-height:1.1;margin:0;letter-spacing:-.02em}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.w{max-width:1160px;margin:0 auto;padding:0 24px}
.btn{display:inline-block;background:var(--amber);color:#1a1205;font:700 16px var(--h);padding:15px 26px;border-radius:6px;text-decoration:none;border:0;cursor:pointer;transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn.sm{padding:10px 18px;font-size:15px}
.ghost{color:#fff;margin-left:18px;text-decoration:underline;text-underline-offset:4px}

/* image backgrounds: image on top, dark road-line pattern underneath as fallback */
.bg{position:relative;isolation:isolate;color:#fff;background-color:var(--ink);
background-image:var(--img,none),repeating-linear-gradient(100deg,transparent 0 120px,rgba(242,169,59,.05) 120px 122px),linear-gradient(160deg,#0d1b2e 0%,#16294a 55%,#0d1b2e 100%);
background-size:cover,cover,auto,auto;background-position:center,center,0 0,0 0}
.bg:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,rgba(8,17,30,.95) 0%,rgba(8,17,30,.82) 45%,rgba(8,17,30,.5) 100%)}
.bg.flat:before{background:rgba(8,17,30,.84)}
.lane{height:6px;background:repeating-linear-gradient(90deg,var(--amber) 0 44px,transparent 44px 88px);opacity:.9}

/* header and nav */
nav{display:flex;justify-content:space-between;align-items:center;padding:20px 0;gap:16px}
.logo{display:flex;align-items:center;gap:11px;font:700 24px var(--h);text-decoration:none;letter-spacing:-.02em;color:#fff}
.logo img{width:36px;height:36px;display:block}
.logo span{display:inline}.logo b{color:var(--amber);font-weight:700}
.nl{display:flex;align-items:center;gap:26px}
.nl a{text-decoration:none;font-size:15px;color:#fff;opacity:.88}
.nl a:hover,.nl a[aria-current]{opacity:1}
.nl a[aria-current]{box-shadow:0 2px 0 var(--amber)}
.nl .btn{opacity:1;color:#1a1205}

/* hero */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:48px 0 96px}
.hero h1{font-size:clamp(38px,5.4vw,66px);color:#fff}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.sub{color:#c6d2e0;max-width:50ch;margin:22px 0 32px;font-size:19px}
.small{font-size:14px;color:#9fb1c7;margin-top:18px}
.phero{padding:56px 0 96px;max-width:800px}
.phero h1{font-size:clamp(36px,5vw,60px);color:#fff}
.phero p{color:#c6d2e0;font-size:19px;margin:20px 0 30px;max-width:60ch}
.eyebrow{font:500 13px var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin:0 0 14px;display:block}
.light .eyebrow,section:not(.bg):not(.dark) .eyebrow{color:var(--amberd)}

/* animated hero card */
.demo{background:#fff;color:#1b2733;border-radius:10px;box-shadow:0 30px 60px rgba(0,0,0,.45);overflow:hidden;font-size:14px}
.bar{background:#e8ecf0;padding:9px 14px;font:500 12px var(--b);color:#5b6978;display:flex;justify-content:space-between}
.mail{padding:14px 16px;border-bottom:1px solid #e3e8ed}
.mail b{display:block;font-size:13px}
.rec{padding:6px 16px 14px}
.row{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed #e3e8ed;opacity:0;animation:in .5s forwards}
.row:nth-child(1){animation-delay:.8s}.row:nth-child(2){animation-delay:1.5s}.row:nth-child(3){animation-delay:2.2s}.row:nth-child(4){animation-delay:2.9s}.row:nth-child(5){animation-delay:3.6s}
.row span:first-child{color:#5b6978;font-size:12.5px}
.c{font:700 12px var(--b);color:var(--ok)}
.row.flag{background:#fff4e5;margin:0 -16px;padding:8px 16px}.row.flag .c{color:var(--warn)}
.push{margin:0 16px 16px;padding:11px;border-radius:6px;background:#0d1b2e;color:#fff;text-align:center;font-weight:500;opacity:0;animation:in .5s 4.4s forwards}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.row,.push{animation:none;opacity:1}html{scroll-behavior:auto}}

/* sections */
section{padding:88px 0}
section h2{font-size:clamp(30px,4vw,46px);max-width:26ch;text-wrap:balance}
.lead{color:var(--mute);max-width:62ch;margin:16px 0 0;font-size:18px}
.dark,.bg{--mute:#b9c6d6}
.dark{background:var(--ink);color:#fff}
.dark .lead,.bg .lead{color:#c6d2e0}
.alt{background:var(--card)}
.head{margin-bottom:44px}
.grid2,.grid3,.grid4{display:grid;gap:24px}
.grid2{grid-template-columns:repeat(2,1fr)}.grid3{grid-template-columns:repeat(3,1fr)}.grid4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:28px;position:relative}
.alt .card{background:var(--paper)}
.card h3{font-size:22px;margin-bottom:10px}
.card p{margin:0;color:var(--mute);font-size:15.5px}
.card .ic{width:46px;height:46px;border-radius:10px;background:var(--ink);display:grid;place-items:center;margin-bottom:18px}
.card .ic svg{width:26px;height:26px;stroke:var(--amber);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card.dk{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff}
.card.dk p{color:#c6d2e0}
.tag{display:inline-block;font:500 12px var(--m);letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:4px;background:rgba(242,169,59,.16);color:var(--amberd);margin-bottom:14px}
.dark .tag,.bg .tag{color:var(--amber)}
.tick{padding:0;margin:14px 0 0;list-style:none}
.tick li{padding:9px 0 9px 30px;border-bottom:1px solid var(--line);position:relative;font-size:16px}
.tick li:before{content:"";position:absolute;left:3px;top:16px;width:12px;height:7px;border-left:3px solid var(--amber);border-bottom:3px solid var(--amber);transform:rotate(-45deg)}
.dark .tick li,.bg .tick li{border-color:rgba(255,255,255,.14)}
.tick.cols{columns:2;column-gap:40px}.tick.cols li{break-inside:avoid}
.note{font-size:14px;color:var(--mute);margin-top:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.split.mid{align-items:center}

/* placeholders: easy to spot, easy to replace */
.ph{background:rgba(242,169,59,.16);border:1px dashed var(--amber);color:var(--amberd);padding:1px 7px;border-radius:4px;font-size:.93em;font-weight:500}
.dark .ph,.bg .ph{color:var(--amber)}
.phbox{border:2px dashed var(--amber);border-radius:10px;padding:26px;background:rgba(242,169,59,.07)}
.phbox h3{font-size:21px;margin-bottom:8px}.phbox p{margin:6px 0 0;color:var(--mute);font-size:15px}
.phimg{aspect-ratio:16/10;border:2px dashed var(--amber);border-radius:10px;display:grid;place-items:center;text-align:center;padding:20px;color:var(--amberd);font:500 14px var(--m);background:rgba(242,169,59,.07)}
.big{font:700 clamp(34px,4vw,48px) var(--h);display:block;color:var(--amberd);letter-spacing:-.02em}

/* how it works */
.steps{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:s}
.steps li{padding:22px 20px 0 0;border-top:3px solid var(--ink2);counter-increment:s;position:relative}
.dark .steps li,.bg .steps li{border-color:rgba(255,255,255,.2)}
.steps li:before{content:counter(s);font:700 14px var(--h);color:var(--amber);background:var(--ink);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;position:absolute;top:-15px;border:2px solid var(--amber)}
.steps.s4{grid-template-columns:repeat(4,1fr)}
.steps h3{font-size:19px;margin-bottom:8px}.steps p{font-size:15px;color:var(--mute);margin:0}

/* demo player */
.player{margin-top:10px;background:var(--ink);border-radius:12px;padding:22px;color:#fff;box-shadow:0 24px 50px rgba(0,0,0,.25)}
.stage{min-height:320px;display:grid;place-items:center;padding:8px}
.sc{background:#fff;color:#1b2733;border-radius:8px;width:min(600px,100%);padding:20px;font-size:14.5px;animation:in .5s}
.sc b{display:block}.sc .r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed #e3e8ed}.sc .r b{display:inline;text-align:right}
.sc .bad{background:#fff4e5;color:#a35614;padding:8px 10px;border-radius:5px;margin-top:8px;font-weight:500}
.sc .ok{background:#e6f6ef;color:#1a6e50;padding:8px 10px;border-radius:5px;margin-top:8px;font-weight:500}
.sc pre{margin:0;font:12.5px/1.5 var(--m);overflow-x:auto}
.cap{text-align:center;font:500 19px var(--h);margin:14px 0 4px}
.ctrl{display:flex;align-items:center;gap:14px;margin-top:10px}
.ctrl button{background:var(--amber);border:0;border-radius:50%;width:42px;height:42px;font:700 15px var(--h);cursor:pointer;color:#1a1205}
.prog{flex:1;height:6px;background:#23375a;border-radius:3px;overflow:hidden}.prog i{display:block;height:100%;width:0;background:var(--amber)}
.dots{display:flex;gap:6px}.dots button{width:12px;height:12px;border-radius:50%;background:#35507e;padding:0}.dots button.on{background:var(--amber)}

/* sample documents */
.doc{background:#fff;color:#222;border-radius:6px;box-shadow:0 18px 40px rgba(13,27,46,.22);padding:26px;font:13px/1.55 var(--m);position:relative;overflow:hidden}
.doc:after{content:"SAMPLE";position:absolute;right:-8px;top:46%;font:700 78px var(--h);color:rgba(13,27,46,.06);transform:rotate(-18deg);pointer-events:none;letter-spacing:.05em}
.doc h4{font:700 16px var(--h);letter-spacing:0;margin-bottom:2px}
.doc .dh{display:flex;justify-content:space-between;gap:10px;border-bottom:2px solid #222;padding-bottom:10px;margin-bottom:12px}
.doc .dr{display:flex;justify-content:space-between;gap:14px;padding:5px 0;border-bottom:1px dotted #bbb}
.doc .dr span:first-child{color:#666}
.doc .dr.hl{background:#fff4e5;margin:0 -8px;padding:5px 8px;outline:1px solid var(--amber)}
.doc small{color:#777;display:block;margin-top:10px}
.entry{background:var(--ink);color:#fff;border-radius:6px;box-shadow:0 18px 40px rgba(13,27,46,.28);padding:22px;font-size:14px}
.entry h4{font:700 16px var(--h);margin-bottom:12px;display:flex;justify-content:space-between;align-items:center;gap:10px;letter-spacing:0}
.entry .er{display:grid;grid-template-columns:130px 1fr auto;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12);align-items:center}
.entry .er span:first-child{color:#9fb1c7;font-size:12.5px}
.entry .er .s{font:700 12px var(--m);color:#5fd3a4}
.entry .er.f{background:rgba(242,169,59,.14);margin:0 -10px;padding:8px 10px;border-radius:4px}.entry .er.f .s{color:var(--amber)}
.pill{font:700 11px var(--m);letter-spacing:.06em;padding:3px 8px;border-radius:99px;background:rgba(95,211,164,.18);color:#5fd3a4;text-transform:uppercase}
.pill.a{background:rgba(242,169,59,.2);color:var(--amber)}.pill.r{background:rgba(232,110,90,.2);color:#ff8f7c}
.arrow{display:grid;place-items:center;color:var(--amberd);font:700 13px var(--m);text-align:center;gap:6px}
.ba{display:grid;grid-template-columns:1fr 70px 1fr;gap:18px;align-items:center}
.ba .arrow svg{width:46px;height:46px;stroke:var(--amber);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font:500 12px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.scroll{overflow-x:auto}

/* faq */
details{border-bottom:1px solid var(--line);padding:18px 0}
details summary{font:600 19px var(--h);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;letter-spacing:-.01em}
details summary::-webkit-details-marker{display:none}
details summary:after{content:"+";font:400 26px/1 var(--h);color:var(--amberd)}
details[open] summary:after{content:"\2013"}
details p{margin:12px 0 0;color:var(--mute);max-width:70ch}

/* offer flow */
.offer{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.flow{margin-top:8px}
.flow div{padding:20px 0 20px 24px;border-left:3px solid rgba(255,255,255,.18);position:relative}
.flow div:before{content:"";position:absolute;left:-9px;top:27px;width:15px;height:15px;border-radius:50%;background:var(--amber)}
.flow h3{font-size:21px}.flow p{margin:6px 0 0;color:#c6d2e0;font-size:15.5px}

/* form */
form{background:var(--card);color:var(--text);padding:32px;border-radius:10px;display:grid;gap:14px}
label{font:500 14px var(--b);display:grid;gap:5px}
input,select,textarea{font:400 16px var(--b);padding:12px;border:1px solid #c5cdd6;border-radius:6px;background:#fff;color:#1b2733;width:100%}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fine{font-size:13px;color:var(--mute);margin:0}
#ok{display:none;color:var(--ok);font-weight:500;margin:0}

/* cta + footer + legal */
.cta{text-align:center}.cta h2{margin:0 auto}.cta .lead{margin:16px auto 28px}
footer{background:#08111e;color:#93a5bb;padding:48px 0 36px;font-size:14px}
footer .fg{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
footer h4{font:600 13px var(--m);letter-spacing:.1em;text-transform:uppercase;color:#fff;margin-bottom:12px}
footer a{color:#cfd9e6;display:block;margin:6px 0;text-decoration:none}footer a:hover{text-decoration:underline}
footer .logo{margin-bottom:14px}
footer .base{border-top:1px solid #23375a;margin-top:32px;padding-top:20px;font-size:13px}
.legal h2{font-size:26px;margin:36px 0 8px;max-width:none}.legal p,.legal li{color:var(--text);max-width:70ch}
.mk{background:rgba(242,169,59,.16);border:1px dashed var(--amber);color:var(--amberd);padding:1px 6px;border-radius:4px;font-size:.92em}
.status{display:flex;gap:10px;align-items:center}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block}.dot.g{background:#5fd3a4}.dot.a{background:var(--amber)}.dot.r{background:#ff8f7c}

@media (max-width:980px){.grid4{grid-template-columns:repeat(2,1fr)}footer .fg{grid-template-columns:1fr 1fr}}
@media (max-width:860px){
.hero,.split,.offer,.grid2,.grid3,.ba{grid-template-columns:1fr;gap:32px}
.hero{padding:24px 0 72px}.steps,.steps.s4{grid-template-columns:1fr;gap:36px}
nav{flex-wrap:wrap}.nl{flex-wrap:wrap;gap:8px 18px}
.g2{grid-template-columns:1fr}.ghost{display:block;margin:18px 0 0}
.ba .arrow{transform:rotate(90deg)}.tick.cols{columns:1}section{padding:64px 0}
}
@media (max-width:520px){.grid4{grid-template-columns:1fr}footer .fg{grid-template-columns:1fr}.entry .er{grid-template-columns:100px 1fr auto}}

/* photos, tools strip, mobile menu */
.photo{margin:0;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:linear-gradient(160deg,#16294a,#0d1b2e);box-shadow:0 18px 40px rgba(13,27,46,.22)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.tools{display:flex;flex-wrap:wrap;gap:12px 36px;align-items:center;justify-content:space-between}
.tools strong{font:600 14px var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.tools span{font:700 22px var(--h);color:var(--text);opacity:.85}.tools .more{font:500 16px var(--b);color:var(--mute)}
.menu{display:none;background:transparent;border:1px solid rgba(255,255,255,.35);border-radius:8px;width:46px;height:46px;padding:0;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.menu i{display:block;width:22px;height:2px;background:#fff;border-radius:2px}
.head.split{margin-bottom:44px}
@media (max-width:860px){
nav{position:relative;flex-wrap:nowrap}
.menu{display:flex}
.nl{display:none;position:absolute;top:100%;left:0;right:0;z-index:20;flex-direction:column;align-items:stretch;gap:0;background:#0b1626;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px;box-shadow:0 20px 40px rgba(0,0,0,.5)}
.nl.open{display:flex}
.nl a{padding:14px 12px;font-size:17px;border-bottom:1px solid rgba(255,255,255,.08)}
.nl a[aria-current]{box-shadow:none;color:var(--amber)}
.nl .btn{margin:10px 4px 4px;text-align:center;border:0;padding:15px}
.tools{justify-content:flex-start}
.phero{padding:28px 0 64px}
.btn{display:block;text-align:center;width:100%}
.hero .btn,.phero .btn{width:100%}
.player{padding:14px}.stage{min-height:300px}
.doc,.entry{padding:18px}.doc:after{font-size:56px}
.card{padding:22px}.head.split{margin-bottom:32px}
}
@media (max-width:420px){
body{font-size:16px}.w{padding:0 18px}
.lead{font-size:17px}.hero p.sub,.phero p{font-size:17px}
.row{grid-template-columns:86px 1fr auto}.entry .er{grid-template-columns:84px 1fr auto}
.sc{padding:14px;font-size:13.5px}.cap{font-size:17px}
.tbl{font-size:14px}.tbl th,.tbl td{padding:9px 8px}
}