:root{--navy:#0b2545;--ink:#0b2545;--body:#3d4b63;--mute:#6b7890;--blue:#1d4ed8;--line:#e3e8f0;--soft:#f6f8fb;--r:12px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:17px;line-height:1.6;color:var(--body);background:#fff;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:96px 0;border-top:1px solid var(--line)}
h1,h2,h3{color:var(--ink);font-weight:600;letter-spacing:-.03em;line-height:1.05}
h1{font-size:clamp(44px,8vw,88px);max-width:14ch}h2{font-size:clamp(32px,4.4vw,48px);margin-bottom:16px}h3{font-size:20px;letter-spacing:-.015em;line-height:1.3;margin-bottom:8px}
.eyebrow{font-size:13px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:16px}
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 24px;border-radius:8px;background:var(--navy);color:#fff;font:500 16px/1 Inter,system-ui,sans-serif;border:0;cursor:pointer;transition:background .2s,transform .2s}
.btn:hover{background:var(--blue)}.btn:active{transform:translateY(1px)}.btn-sm{height:40px;padding:0 16px;font-size:14px}
.btn-light{background:#fff;color:var(--navy)}.btn-light:hover{background:#dbe6ff}
.link{font-weight:500;color:var(--ink);border-bottom:1px solid var(--line);padding-bottom:2px;transition:border-color .2s,color .2s}.link:hover{color:var(--blue);border-color:var(--blue)}.link span{display:inline-block;transition:transform .2s}.link:hover span{transform:translateX(4px)}
/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;gap:24px}
.brand{font-weight:600;color:var(--ink);letter-spacing:-.02em;font-size:16px}.brand span{color:var(--mute);font-weight:500}
.nav nav{display:none;gap:32px;font-size:15px;color:var(--body)}.nav nav a:hover{color:var(--ink)}
/* hero */
.hero{border-top:0;padding:96px 0 64px}.hero h1{margin-bottom:48px}
.hero-row{display:grid;gap:32px;align-items:end;padding-top:32px;border-top:1px solid var(--line)}
.lead{font-size:20px;color:var(--body);line-height:1.5}.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:24px}
/* showcase */
.showcase{border-top:0;padding:16px 0 96px;background:linear-gradient(#fff 0,#fff 30%,var(--soft) 30%)}
.stage{position:relative;height:clamp(300px,52vw,640px)}
.browser{position:absolute;display:block;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px rgba(11,37,69,.08),0 24px 64px -24px rgba(11,37,69,.28);transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.browser:hover{transform:translateY(-8px)}
.bar{display:flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-bottom:1px solid var(--line);background:#fbfcfd}
.bar i{width:10px;height:10px;border-radius:50%;background:#dfe4ec}.bar span{margin:0 auto;font-size:11px;color:var(--mute);background:#f0f3f7;padding:2px 24px;border-radius:6px;transform:translateX(-18px)}
.b1{width:52%;left:0;top:14%;z-index:1}.b3{width:52%;right:0;top:14%;z-index:1}.b2{width:62%;left:19%;top:0;z-index:2}
.phone{position:absolute;z-index:3;right:6%;bottom:0;width:15%;border-radius:28px;padding:6px;background:var(--navy);box-shadow:0 24px 48px -16px rgba(11,37,69,.45);overflow:hidden}
.phone img{border-radius:22px;aspect-ratio:9/18;object-fit:cover;object-position:top}
.caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line);font-size:15px;color:var(--mute)}
.caption ul{list-style:none;display:flex;flex-wrap:wrap;gap:24px}.caption a{color:var(--ink);font-weight:500}.caption a:hover{color:var(--blue)}
/* split */
.split .wrap{display:grid;gap:48px;align-items:center}.split figure img,.mini img{border-radius:var(--r);aspect-ratio:4/3;object-fit:cover}
.copy p{max-width:52ch}.list{list-style:none;margin-top:32px;border-top:1px solid var(--line)}
.list li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--ink);font-weight:500}
/* two col */
.two{display:grid;gap:40px}
.steps{list-style:none;border-top:1px solid var(--line)}.steps li{display:grid;grid-template-columns:56px 1fr;padding:32px 0;border-bottom:1px solid var(--line)}
.steps span{font-size:15px;font-weight:500;color:var(--blue);padding-top:2px;font-variant-numeric:tabular-nums}
/* dark */
.dark{background:var(--navy);color:#b8c5da;border-top:0}.dark h2{color:#fff}.dark .eyebrow{color:#8fb0ff}
.amt{font-size:clamp(72px,10vw,112px);font-weight:600;letter-spacing:-.04em;color:#fff;line-height:1;margin-bottom:32px}.amt small{display:block;font-size:16px;letter-spacing:0;font-weight:400;color:#8b9bb6;margin-top:12px}
.dark .list{border-color:rgba(255,255,255,.12)}.dark .list li{color:#fff;border-color:rgba(255,255,255,.12)}
.note{font-size:14px;color:#8b9bb6;margin:24px 0 32px}
/* faq */
.faq{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}
summary{list-style:none;cursor:pointer;padding:24px 0;font-size:19px;font-weight:500;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px;transition:color .2s}
summary::-webkit-details-marker{display:none}summary:after{content:"+";font-weight:400;font-size:24px;color:var(--mute);transition:transform .25s}
details[open] summary:after{transform:rotate(45deg)}summary:hover{color:var(--blue)}details p{padding:0 0 24px;max-width:60ch}
/* contact */
.contact{background:var(--soft)}.direct{margin:24px 0 32px;font-size:20px;font-weight:500;color:var(--ink);line-height:1.6}.direct a:hover{color:var(--blue)}
.mini{display:none}
form{display:grid;gap:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:32px;align-self:start}
label{display:grid;gap:8px;font-size:14px;font-weight:500;color:var(--ink)}
input{font:inherit;font-size:16px;height:48px;padding:0 16px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
input:hover{border-color:#c9d2df}input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
form .btn{width:100%;margin-top:8px}.fine{font-size:13px;color:var(--mute)}form .fine{text-align:center}
footer{border-top:1px solid var(--line);padding:48px 0;font-size:15px}footer .wrap{display:grid;gap:8px}footer a:hover{color:var(--blue)}
@media(max-width:759px){.b1,.b3{display:none}.b2{width:100%;left:0;top:0}.stage{height:auto}.b2{position:relative}.phone{width:30%;right:-4px;bottom:-32px}.showcase{background:linear-gradient(#fff 0,#fff 20%,var(--soft) 20%)}}
@media(min-width:760px){.nav nav{display:flex}.hero{padding:144px 0 80px}.hero-row{grid-template-columns:1fr auto}
.split .wrap{grid-template-columns:1.1fr 1fr;gap:80px}.two{grid-template-columns:5fr 7fr;gap:80px}.mini{display:block;margin-top:16px}section{padding:128px 0}.showcase{padding:16px 0 128px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.brand{white-space:nowrap}.btn{white-space:nowrap}@media(max-width:380px){.nav .brand span{display:none}}