* { box-sizing: border-box; }
:root { color-scheme: dark; --bg:#0b1018; --panel:#111a26; --line:#28394b; --text:#f2f7fd; --muted:#aabacf; --blue:#8ed4ff; font: 16px/1.55 "Segoe UI", system-ui, sans-serif; }
html { scroll-behavior:smooth; }
body { margin:0; background:radial-gradient(ellipse 850px 510px at 85% 10%, #13243b 0%, transparent 85%), var(--bg); color:var(--text); }
a { color:inherit; text-decoration:none; }
button, input, textarea { font:inherit; }
:focus-visible { outline:2px solid var(--blue); outline-offset:4px; }
.skip { position:absolute; top:8px; left:8px; transform:translateY(-160%); z-index:2; padding:8px 14px; background:var(--panel); }
.skip:focus { transform:none; }
.wrap { width:min(1200px, 100% - 80px); margin-inline:auto; }
.header { border-bottom:1px solid var(--line); background:#0b1018b8; }
.bar, .brand, nav, .actions, .footer { display:flex; align-items:center; }
.bar { min-height:72px; justify-content:space-between; gap:24px; }
.brand { gap:10px; font-weight:720; white-space:nowrap; }
nav { gap:28px; font-size:.9rem; color:var(--muted); }
nav a, .footer > a:last-child, .header-cta { padding-block:10px; }
nav a:hover, .footer a:hover, .header-cta:hover { color:var(--blue); }
.header-cta { color:#cbe9ff; font-size:.9rem; white-space:nowrap; }
.hero { display:grid; grid-template-columns:1.4fr 1fr; align-items:center; gap:34px; padding-block:clamp(62px, 9vw, 130px); }
.eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 16px; font:600 .75rem/1.4 ui-monospace, "Consolas", monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:#86d6ff; box-shadow:0 0 14px #63baff; flex:none; }
h1,h2,h3,p,dl,dd { margin:0; }
h1,h2,h3 { line-height:1.06; letter-spacing:-.035em; }
h1 { font-size:clamp(2.65rem, 5.1vw, 5rem); font-weight:720; }
h1 em { font-style:normal; color:var(--blue); }
h2 { font-size:clamp(2rem, 4vw, 3.4rem); }
h3 { font-size:1.26rem; }
.lede, .section-note { color:var(--muted); margin-top:18px; max-width:52ch; }
.lede { font-size:clamp(1.05rem, 1.6vw, 1.25rem); }
.actions { gap:12px; flex-wrap:wrap; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:12px; padding:11px 17px; min-height:46px; border-radius:8px; border:1px solid transparent; font-size:.94rem; font-weight:670; cursor:pointer; }
.primary { background:#9edbff; color:#091a29; }
.primary:hover { background:#c5ebff; }
.secondary { border-color:#3d536a; background:#172333; }
.secondary:hover { background:#25394f; }
button:disabled { opacity:.62; cursor:default; }
.hero-visual { overflow:hidden; padding:16px; border:1px solid #34495f; border-radius:18px; background:linear-gradient(150deg,#152539e0,#0e1826e8); box-shadow:0 18px 55px #0005; }
.visual-label,.visual-caption { display:flex; align-items:center; gap:8px; color:#acbed3; letter-spacing:.12em; font:600 .68rem/1.5 ui-monospace, "Consolas", monospace; }
.visual-label > span:last-child { margin-left:auto; }
.visual-caption { justify-content:space-between; border-top:1px solid var(--line); padding-top:13px; }
.diagram { width:100%; display:block; background-image:linear-gradient(#6da2d010 1px,transparent 1px),linear-gradient(90deg,#6da2d010 1px,transparent 1px); background-size:24px 24px; margin-block:14px; }
.section { border-top:1px solid var(--line); padding-block:clamp(42px, 7vw, 82px); }
.service-grid,.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin:26px 0 0; }
.card { border:1px solid var(--line); border-radius:14px; background:var(--panel); }
.service-grid .card { padding:22px; }
.card p,.steps p,.metric-list dd { color:var(--muted); margin-top:10px; }
.glyph { display:grid; place-items:center; width:40px; height:40px; border:1px solid #344e66; border-radius:9px; margin-bottom:22px; color:var(--blue); background:#182a40; font-size:1.4rem; }
.demo,.metrics,.contact { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px, 6vw, 72px); }
.demo,.contact { padding:clamp(20px, 5vw, 54px); background:linear-gradient(130deg, #16253a, var(--panel) 65%); }
.demo { margin-top:26px; align-items:center; }
.badge { display:inline-block; padding:4px 9px; border-radius:5px; border:1px solid #3a536b; color:var(--blue); font-size:.77rem; margin-bottom:14px; }
.demo h3 { font-size:clamp(1.8rem,4vw,2.8rem); }
.demo .button { margin-top:18px; }
.demo-flow,.steps { list-style:none; padding:0; }
.demo-flow { margin:0; }
.demo-flow li { display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--line); border-radius:8px; background:#0e1826; }
.demo-flow li + li { margin-top:9px; }
.demo-flow span,.steps span { font:600 .76rem/1.4 ui-monospace, "Consolas", monospace; color:var(--blue); }
.method-note { margin-top:20px; padding-left:13px; border-left:2px solid var(--blue); color:#c9def0; }
.metric-list > div { padding:14px 0; border-bottom:1px solid var(--line); }
.metric-list > div:first-child { padding-top:0; }
.metric-list dt { font-weight:670; }
.metric-list dd { margin-top:3px; }
.steps li { border-top:1px solid #3a566f; padding:16px 6px 0 0; }
.steps h3 { margin-top:12px; }
form,label { display:grid; gap:8px; min-width:0; }
form { gap:14px; }
form .button { justify-self:start; }
.fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
label { color:#dceaf7; font-size:.9rem; }
input,textarea { background:#0b141f; border:1px solid #3d5066; border-radius:8px; color:var(--text); padding:10px 12px; width:100%; font-size:1rem; }
input::placeholder,textarea::placeholder { color:#91a4ba; opacity:1; }
textarea { resize:vertical; }
.card .fine { margin-top:0; color:var(--muted); font-size:.83rem; }
.demo .fine { margin-top:10px; }
.card .feedback { color:#a4e7cd; min-height:1.55em; margin:0; font-size:.9rem; }
.card .feedback[data-error] { color:#ffc3be; }
.footer { justify-content:space-between; gap:16px; padding-block:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; }
@media (max-width: 960px) {
  .wrap { width:calc(100% - 48px); }
  .service-grid,.steps { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fields { grid-template-columns:1fr; }
}
@media (max-width: 740px) {
  .wrap { width:calc(100% - 36px); }
  .bar { flex-wrap:wrap; gap:0 12px; padding-top:10px; }
  nav { order:3; width:100%; border-top:1px solid var(--line); margin-top:9px; gap:8px; justify-content:space-between; flex-wrap:wrap; }
  .header-cta { font-size:.81rem; }
  .hero,.demo,.metrics,.contact { grid-template-columns:1fr; }
  .hero { padding-block:48px; }
  .hero-visual { width:min(100%,500px); }
}
@media (max-width: 480px) {
  .service-grid,.steps { grid-template-columns:1fr; }
  .service-grid .card { padding:18px; }
  h1 { font-size:clamp(2.15rem, 8vw, 2.6rem); }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }