:root{
  --bg:#07090F; --bg-deep:#05070C; --band:#0B1020; --surface:#0E1322;
  --line:#1C2438; --line-strong:#2E3C66; --input-border:#5C70AD;
  --text:#E8ECF5; --muted:#A9B3C9; --dim:#8C96AD; --white:#FFFFFF;
  --accent:#2F5BFF; --accent-light:#7FA2FF;
  --radius:16px; --max:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Heebo,sans-serif;font-size:17px;line-height:1.6}
a{color:var(--text)}a:hover{color:var(--accent-light)}
h1,h2,h3{font-family:Rubik,sans-serif;color:var(--white);margin:0}
p{margin:0}
img{max-width:100%}
.skip{position:absolute;inset-inline-start:8px;top:8px;transform:translateY(-200%);background:var(--accent);color:#fff;padding:8px 14px;border-radius:8px;z-index:10}
.skip:focus{transform:none}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:24px}
.narrow{max-width:880px}
.section{padding-block:100px}
.section-tight{padding-block:60px}
.eyebrow{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--accent-light);margin-bottom:12px}
.eyebrow-light{color:#DCE3FF}
h2{font-weight:700;font-size:clamp(32px,4vw,44px);line-height:1.15;margin-bottom:16px}
h2.xl{font-weight:800;font-size:clamp(36px,5vw,50px);line-height:1.1}
.sub{color:var(--muted);max-width:620px}
.grid{display:grid;gap:18px;margin-top:44px}
.grid-cards{grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:28px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:24px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:24px;margin-top:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:13px 28px;border-radius:999px;text-decoration:none;font-weight:700;font-size:17px;border:none;cursor:pointer;font-family:inherit}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#2148E0;color:#fff}
.btn-ghost{border:1.5px solid #3A4A78;background:var(--band);color:#fff;font-weight:500}
.btn-sm{padding:9px 22px;font-size:16px}

/* hero */
.hero{position:relative;overflow:hidden;min-height:780px;background:var(--bg-deep);border-bottom:1px solid var(--line)}
#hero3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-inner{position:relative}
.nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff}
.logo-mark{width:36px;height:36px;display:block;flex:none}
.logo-text{font-family:Rubik,sans-serif;font-weight:700;font-size:21px}
.logo-text span{color:var(--accent-light)}
.nav-links{display:flex;flex-wrap:wrap;gap:28px;font-weight:500;font-size:16px}
.nav-links a{text-decoration:none}
.hero-body{padding-block:110px 120px}
.hero-copy{max-width:620px}
.hero h1{font-weight:800;font-size:clamp(42px,6vw,68px);line-height:1.06;letter-spacing:-1px}
.hl{color:var(--accent-light)}
.lead{margin-top:28px;font-size:20px;color:var(--muted);max-width:520px}
.ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.stats{display:flex;flex-wrap:wrap;gap:44px;margin-top:64px}
.stats strong{display:block;font-family:Rubik,sans-serif;font-size:34px;color:#fff}
.stats span{font-size:15px;color:var(--dim)}

/* strip */
.strip{background:var(--band);border-bottom:1px solid var(--line)}
.strip-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 30px;padding-block:24px;font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--muted)}
.strip i{font-style:normal;color:var(--line-strong)}

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.card h3{font-size:23px}
.card p{color:var(--muted);font-size:16px}
.num{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--accent-light)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:8px}
.tags span{font-family:'JetBrains Mono',monospace;font-size:12px;color:#C9D3EA;background:#121A2E;border:1px solid #24304D;padding:4px 10px;border-radius:999px}

/* when */
.when{background:var(--accent);color:#fff;border-radius:24px;padding:56px 48px}
.when h2{margin-bottom:0}
.when .grid>div{border-top:1px solid #A8B9FF;padding-top:20px}
.when h3{font-size:20px;margin-bottom:8px}
.when p{color:#EEF1FF;font-size:16px}

/* steps */
.steps{list-style:none;padding:0;margin-top:44px;gap:0}
.steps li{border-inline-start:2px solid var(--accent);padding-inline:24px;margin-bottom:32px}
.steps .big{font-family:Rubik,sans-serif;font-weight:800;font-size:52px;line-height:1;color:#5B6FA8}
.steps h3{margin:14px 0 8px;font-size:21px}
.steps p,.why p{color:var(--muted);font-size:16px}
.band{background:var(--band);border-block:1px solid var(--line)}
.why h3{margin:10px 0 8px;font-size:21px}

/* projects */
.row-between{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px}
.row-between h2{margin-bottom:0}
.link{font-weight:500;color:var(--accent-light)}
.project{display:flex;flex-direction:column;gap:14px}
.shot{aspect-ratio:4/3;border-radius:var(--radius);background:var(--surface);border:1px dashed var(--line-strong);display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:15px}
.ptag{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--dim)}
.project h3{font-size:22px}
.project p{color:var(--muted);font-size:16px}

/* quotes */
.quote{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:36px}
.quote blockquote{margin:0;font-family:Rubik,sans-serif;font-weight:500;font-size:22px;line-height:1.45;color:#fff}
.quote figcaption{margin-top:22px;display:flex;align-items:center;gap:12px}
.quote small{color:var(--dim);font-size:15px}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--line);flex:none}

/* faq */
details{border-top:1px solid var(--line);padding:22px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;font-family:Rubik,sans-serif;font-weight:500;font-size:20px;color:#fff}
summary::-webkit-details-marker{display:none}
summary i{font-style:normal;font-size:24px;color:var(--accent-light);transition:transform .2s}
details[open] summary i{transform:rotate(45deg)}
details p{margin-top:12px;color:var(--muted)}

/* contact */
.contact{display:flex;flex-wrap:wrap;gap:56px}
.contact-copy{flex:1 1 380px;min-width:0}
.contact-links{margin-top:32px;display:flex;flex-direction:column;gap:10px;font-size:17px}
.contact-links a{color:#fff}
.form{flex:999 1 480px;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:32px;display:flex;flex-direction:column;gap:18px}
.form .row{display:flex;flex-wrap:wrap;gap:18px}
.form .row label{flex:1 1 200px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--muted)}
.form input[type=text],.form input[type=tel],.form input[type=email],.form textarea{font:inherit;background:var(--bg);border:1px solid var(--input-border);border-radius:10px;padding:12px 14px;color:#fff;min-height:44px}
.form input:focus,.form textarea:focus{outline:2px solid var(--accent-light);outline-offset:1px}
.form textarea{resize:vertical}
.form .check{flex-direction:row;align-items:flex-start;gap:10px;font-size:14px}
.form .check input{width:18px;height:18px;margin-top:3px}
.form .check a{color:#fff}
.form .btn{align-self:flex-start}
.status{background:#16244A;color:#fff;border-radius:10px;padding:14px 16px}
.status:empty{display:none}
.status.is-error{background:#3A1622}
.hp{display:none}
.form .btn:disabled{opacity:.6;cursor:wait}
.form .check>span{flex:1}

/* footer */
.footer{background:var(--bg-deep);color:var(--dim);font-size:14px;border-top:1px solid var(--line)}
.footer-inner{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;padding-block:28px}
.footer-links{display:flex;flex-wrap:wrap;gap:22px}
.footer-links a{color:var(--muted)}

/* accessibility */
:focus-visible{outline:2px solid var(--accent-light);outline-offset:3px;border-radius:4px}
.btn:focus-visible{border-radius:999px}
.anim-toggle{position:absolute;inset-inline-end:24px;bottom:20px;z-index:2;min-height:44px;padding:8px 16px;border-radius:999px;border:1px solid var(--input-border);background:var(--band);color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.anim-toggle:hover{border-color:var(--accent-light)}
.req{color:var(--accent-light)}
.form-note{font-size:14px;color:var(--muted)}

/* text pages (accessibility statement) */
.page-head{border-bottom:1px solid var(--line);background:var(--bg-deep)}
.doc{max-width:760px;margin:0 auto;padding-inline:24px;padding-block:64px 96px}
.doc h1{font-weight:800;font-size:clamp(32px,4.5vw,44px);line-height:1.15;margin-bottom:12px;text-wrap:balance}
.doc h2{font-size:24px;margin:44px 0 12px}
.doc p,.doc li{color:var(--muted);max-width:68ch}
.doc p+p{margin-top:12px}
.doc ul{padding-inline-start:22px;margin:12px 0 0;display:grid;gap:8px}
.doc .meta{color:var(--dim);font-size:15px}
.doc .contact-box{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.doc .contact-box p{color:var(--text)}
.doc a{color:var(--accent-light)}

@media (max-width:640px){
  .section{padding-block:72px}
  .when{padding:40px 24px}
  .hero{min-height:auto}
  .hero-body{padding-block:56px 72px}
  .nav-links{order:3;width:100%;gap:18px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .card{transition:none}
}