:root {
  --night:#131f36; --blue:#0867c8; --orange:#ff8b38; --white:#f8faff;
  --paper:#edf2f9; --panel:#e2eaf6; --ink:#172742; --muted:#425775;
  --line:#cbd7e8; --mono:"Geist Mono",monospace;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.55 "DM Sans",sans-serif }
a { color:inherit; text-decoration:none }
button,input { font:inherit }
button { cursor:pointer }
button:disabled { cursor:default }
button,a,input,summary { -webkit-tap-highlight-color:transparent }
:focus-visible { outline:3px solid #3986e9; outline-offset:4px }
section[id] { scroll-margin-top:26px }
h1,h2,h3,p { margin:0 }
h1,h2,h3 { font-family:"Instrument Sans",sans-serif }
h1,h2 { line-height:1; letter-spacing:-.061em }
h2 { font-size:clamp(2.6rem,5.5vw,4.8rem); font-weight:600 }
.wrap { width:min(1248px,calc(100% - 112px)); margin-inline:auto }
.dark-top,.contact,footer { background:var(--night); color:var(--white) }
.skip { position:fixed; top:8px; left:8px; transform:translateY(-160%); z-index:5; background:var(--orange); color:var(--night); padding:10px 14px }
.skip:focus { transform:none }
.header { display:flex; justify-content:space-between; align-items:center; gap:28px; min-height:83px; border-bottom:1px solid #344b70 }
.brand { display:inline-flex; align-items:center; gap:0; font:700 1.55rem/1 "Instrument Sans",sans-serif; letter-spacing:-.05em; white-space:nowrap }
.brand > span:last-child { color:var(--orange) }
.brand-mark { display:grid; grid-template-columns:repeat(2,5px); gap:3px; background:var(--orange); padding:7px; border-radius:6px; margin-right:9px }
.brand-mark i { width:5px; height:5px; background:var(--night); border-radius:1px }
nav { display:flex; gap:32px; color:#e1e9f8; font-size:.91rem }
nav a:hover,.text-link:hover,footer a:hover { color:var(--orange) }
.button { display:inline-flex; justify-content:center; align-items:center; gap:20px; padding:13px 18px; min-height:48px; border-radius:7px; font-size:.89rem; font-weight:700; white-space:nowrap; transition:background .18s,color .18s }
.button span { font-size:1.08em }
.button.outline { border:1px solid #587099 }
.button.outline:hover { background:#253959 }
.button.primary { background:var(--orange); color:#1c2637 }
.button.primary:hover { background:#ffab68 }
.hero { display:grid; grid-template-columns:minmax(0,.91fr) minmax(0,1.09fr); align-items:center; gap:52px; min-height:530px; padding-block:67px 72px }
.hero-copy { padding-bottom:14px }
.eyebrow { display:flex; align-items:center; gap:9px; color:#205998; font:500 .73rem/1.45 var(--mono); letter-spacing:.105em }
.dark-top .eyebrow,.contact .eyebrow { color:var(--orange) }
.live-dot { width:7px; height:7px; flex:none; background:#196ac5; border-radius:50% }
.dark-top .live-dot,.contact .live-dot { background:var(--orange); box-shadow:0 0 13px #ff8b3870 }
h1 { font-size:clamp(2.9rem,5.12vw,5rem); font-weight:600; margin-block:23px 21px; text-wrap:balance }
h1 em { color:var(--orange); font-style:normal }
.lead { max-width:455px; color:#cddaf0; font-size:clamp(.98rem,1.35vw,1.16rem) }
.hero-actions { display:flex; gap:23px; align-items:center; flex-wrap:wrap; margin-top:31px }
.text-link { display:inline-flex; gap:10px; align-items:center; font-weight:700; font-size:.9rem }
.stage { align-self:center; }
.screen { margin:0; border:1px solid #cbd7e8; border-radius:12px; overflow:hidden; background:#fff; box-shadow:0 16px 36px #13254216 }
.stage.screen { border-color:#35517c; background:#172740; box-shadow:0 24px 52px #0a132b66 }
.panel-title { padding:8px 15px; background:#0867c8; color:#fff; font:700 .78rem/1.45 "Instrument Sans",sans-serif; letter-spacing:.045em; text-transform:uppercase }
.screen a { display:block }
.screen a:focus-visible { outline-offset:-4px }
.screen img { display:block; width:100%; height:auto }
.stage-caption { display:flex; justify-content:space-between; gap:8px; padding:9px 15px; color:#455a75; font:.74rem/1.4 var(--mono) }
.stage .stage-caption { color:#d3e0f3 }
.mini-mark { display:inline-grid; place-items:center; border-radius:5px; width:23px; height:23px; color:#19263d; background:var(--orange); font:700 .9rem/1 sans-serif }
.proof { background:var(--panel); border-block:1px solid #d0ddef }
.proof-inner { display:grid; grid-template-columns:repeat(3,1fr); padding-block:21px }
.proof-inner > div { display:flex; align-items:center; justify-content:center; gap:12px }
.proof-inner > div + div { border-left:1px solid #c7d6ec }
.proof-icon,.feature-icon { display:grid; place-items:center; background:#dce9fa; border-radius:8px; color:#194f89; width:39px; height:39px; flex:none; font-size:1.25rem; font-weight:700 }
.proof b,.proof small { display:block; line-height:1.35 }
.proof b { font-size:.9rem }
.proof small { color:var(--muted); font-size:.76rem }
.section,.modules,.contact { padding-block:92px }
.section-head { display:grid; grid-template-columns:1.5fr .8fr; align-items:end; gap:35px; margin-bottom:35px }
.section-head h2,.modules h2,.contact h2 { margin-top:13px }
.section-head > p,.modules p:not(.eyebrow) { color:var(--muted); max-width:390px }
.features { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:13px; overflow:hidden; background:#fff }
.features article { padding:26px 26px 29px }
.features article + article { border-left:1px solid var(--line) }
.features h3 { font-size:1.25rem; margin-block:13px 6px }
.features p { color:var(--muted); font-size:.91rem }
.modules { background:#e4ecf7; border-block:1px solid var(--line) }
.modules-inner,.contact-inner { display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center }
.modules h2 + p,.contact h2 + p { margin-top:19px }
.module-list { border-top:1px solid #c2d1e8 }
details { border-bottom:1px solid #c2d1e8; padding:15px 0 }
summary { cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; font-weight:700; list-style:none }
summary::-webkit-details-marker { display:none }
summary::after { content:"+"; font:500 1.2rem var(--mono) }
details[open] summary::after { content:"−" }
details p { padding-top:8px; font-size:.91rem }
.pricing { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:center; color:#f7faff; background:#1c2b46; border:1px solid #38537c; border-radius:14px; padding:30px }
.plan-name { display:flex; gap:8px; align-items:center; font-weight:700 }
.price-label { margin-top:16px; color:#d4e1f4; font-size:.88rem }
.price { display:flex; align-items:baseline; font:600 clamp(3.7rem,7vw,5.8rem)/1 "Instrument Sans",sans-serif; letter-spacing:-.07em; margin-top:4px }
.price span,.price sup { font-size:.36em; letter-spacing:-.035em }
.price span { margin-right:6px }
.price-period { color:#d4e1f4; font-size:.86rem; margin:8px 0 20px }
.estimate { background:#f4f7fc; color:var(--ink); border-radius:10px; padding:24px }
.estimate h3 { font-size:1.2rem; margin-bottom:11px }
.estimate label,.fine { font-size:.8rem; color:var(--muted) }
.stepper { display:flex; align-items:center; width:max-content; border:1px solid #aabbd3; border-radius:6px; overflow:hidden; margin-block:6px 15px }
.stepper button { display:grid; place-items:center; border:0; background:#dfeaf9; color:var(--ink); width:36px; height:36px; font-size:1.1rem }
.stepper button:disabled { color:#526785; background:#eaf0f9 }
.stepper input { width:64px; height:36px; padding:0; appearance:textfield; border:0; text-align:center; background:#fff; color:var(--ink) }
.stepper input::-webkit-inner-spin-button,.stepper input::-webkit-outer-spin-button { appearance:none }
.stepper :focus-visible { outline-offset:-3px }
.estimate-total { display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:12px; font-size:.87rem }
output { font:700 1.23rem "Instrument Sans",sans-serif }
.fine { margin-top:5px }
.estimate-action { margin-top:14px }
.management { padding-top:0 }
.contact { background:radial-gradient(ellipse at 83% 50%,#243f67,transparent 65%),var(--night) }
.contact-inner p:not(.eyebrow) { max-width:430px; color:#cddaf0 }
.contact-actions { justify-self:center; display:grid; gap:8px; text-align:center }
.contact-actions small { color:#c7d7ef }
footer { border-top:1px solid #31466a }
.footer-inner { display:flex; justify-content:space-between; align-items:center; gap:13px; flex-wrap:wrap; padding-block:25px; color:#d0dff4; font-size:.8rem }
.footer-inner .brand { color:var(--white) }
@media(max-width:1060px) {
  .wrap { width:calc(100% - 72px) }
  .hero { gap:28px }
}
@media(max-width:880px) {
  .hero { grid-template-columns:1fr; gap:20px; padding-block:56px 48px }
  .hero-copy { padding-bottom:0 }
  .stage { max-width:720px; margin-inline:auto; width:100% }
  .section,.modules,.contact { padding-block:65px }
  .management { padding-top:0 }
}
@media(max-width:650px) {
  .wrap { width:calc(100% - 34px) }
  .header { min-height:62px; gap:12px }
  .header nav { display:none }
  .header .button { min-height:36px; padding:7px 9px; font-size:.72rem; gap:5px }
  .brand { font-size:1.28rem }
  .hero { padding-block:40px 36px }
  .proof-inner { gap:10px; padding-block:12px }
  .proof-inner > div { flex-direction:column; text-align:center; gap:5px; justify-content:flex-start }
  .proof b { font-size:.76rem }
  .proof small { font-size:.65rem }
  .proof-icon { width:30px; height:30px }
  .section-head,.modules-inner,.contact-inner,.pricing,.features { grid-template-columns:1fr; gap:16px }
  .features { gap:0 }
  .features article { padding:18px }
  .features article + article { border-left:0; border-top:1px solid var(--line) }
  .pricing { padding:16px }
  .estimate { padding:14px }
  .contact-actions { justify-self:start; margin-top:6px }
  .footer-inner > span { order:3; width:100% }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto } .button { transition:none } }
.legal { display:flex; justify-content:space-between; gap:13px; flex-wrap:wrap; padding-block:0 25px; color:#a9bddb; font-size:.76rem }
.legal a { color:#d0dff4; text-decoration:underline; text-underline-offset:3px }
.legal a:hover { color:var(--orange) }
.doc { max-width:760px; padding-block:64px 80px }
.doc h1 { font:700 clamp(1.9rem,3.4vw,2.6rem)/1.1 "Instrument Sans",sans-serif; letter-spacing:-.025em; margin-bottom:10px }
.doc h2 { font-size:1.25rem; line-height:1.25; letter-spacing:-.01em; margin:34px 0 8px }
.doc p, .doc li { color:#2d3b52; line-height:1.65; margin-bottom:10px }
.doc ul { padding-left:20px; margin-bottom:10px }
.doc .updated { color:#5a6b85; font-size:.85rem }