@font-face{
  font-family:'Geologica';
  src:url('../assets/fonts/Geologica-Variable.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Martian Mono';
  src:url('../assets/fonts/MartianMono-Variable.ttf') format('truetype');
  font-weight:100 800; font-style:normal; font-display:swap;
}

:root{
  --bg:#05070B; --bg2:#0A0E15; --bg3:#10161F;
  --t1:#F2F5FA; --t2:#A9B3C4; --t3:#8C97AA; --td:#4F5868;
  --acc:#9CD3FF; --accp:#7BBEF2; --onacc:#05070B; --accsoft:rgba(156,211,255,.14);
  --warm:#FFB86B; --warmsoft:rgba(255,184,107,.12);
  --ok:#7DE3B5; --warn:#FFC85B; --danger:#FF7A6E;
  --sep:rgba(255,255,255,.08);
  --glass:rgba(255,255,255,.055); --glass2:rgba(255,255,255,.085);
  --gb:rgba(255,255,255,.13); --sheet:rgba(12,17,26,.92); --bar:rgba(5,7,11,.82);
  --spec:linear-gradient(90deg,#FF6A5B,#FFC85B,#7DFFB2,#5BC8FF,#9A7BFF);
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px; --r-btn:26px;
  --max:1120px; --gutter:48px;
  --sans:'Geologica',system-ui,sans-serif;
  --mono:'Martian Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,0,0,1);
  --focus:0 0 0 2px var(--bg), 0 0 0 4px var(--acc);
}
@media (max-width:1024px){:root{--gutter:32px}}
@media (max-width:768px){:root{--gutter:20px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--t1);
  font-family:var(--sans); font-weight:300; font-size:17px; line-height:1.55; overflow-wrap:anywhere; word-break:break-word;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--acc); text-decoration:none}
a:hover{color:var(--accp)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:none; box-shadow:var(--focus);
}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
::selection{background:rgba(156,211,255,.28)}

/* Type */
.ov{font-family:var(--mono); font-weight:500; font-size:12px; line-height:1.35; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); --qa-max-scale:1.5}
.h-display{text-wrap:balance; font-weight:250; font-size:clamp(36px,5.2vw,56px); line-height:1.08; letter-spacing:-.02em; --qa-max-scale:1.4}
.h1{text-wrap:balance; font-weight:300; font-size:clamp(28px,3.6vw,40px); line-height:1.15; letter-spacing:-.015em; --qa-max-scale:1.5}
.h2{text-wrap:balance; font-weight:300; font-size:clamp(22px,2.6vw,28px); line-height:1.2; letter-spacing:-.01em; --qa-max-scale:1.5}
.h3{font-weight:400; font-size:20px; line-height:1.3; letter-spacing:-.005em; --qa-max-scale:1.6}
.body{font-weight:300; font-size:17px; line-height:1.55; color:var(--t2)}
.body-sm{font-weight:300; font-size:15px; line-height:1.5; color:var(--t2)}
.cap{font-weight:400; font-size:13px; line-height:1.4; color:var(--t3)}
.mono{font-family:var(--mono)}

.wrap{width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter)}
.section{padding:64px 0}
@media (max-width:768px){.section{padding:48px 0}}
.section-sm{padding:40px 0}
.section-tight{padding:48px 0}
@media (max-width:768px){.section-tight{padding:36px 0}}
.stack-8>*+*{margin-top:8px}.stack-12>*+*{margin-top:12px}.stack-16>*+*{margin-top:16px}.stack-20>*+*{margin-top:20px}
.stack-24>*+*{margin-top:24px}.stack-32>*+*{margin-top:32px}.stack-40>*+*{margin-top:40px}

/* Sky background (subtle, corporate-calm) */
.sky{
  position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(156,211,255,.10), transparent 60%),
    radial-gradient(900px 500px at 10% 20%, rgba(154,123,255,.07), transparent 55%),
    radial-gradient(800px 500px at 90% 80%, rgba(255,184,107,.05), transparent 50%),
    var(--bg);
}
.sky::after{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%, rgba(242,245,250,.55), transparent),
    radial-gradient(1px 1px at 40% 70%, rgba(242,245,250,.4), transparent),
    radial-gradient(1.2px 1.2px at 65% 25%, rgba(242,245,250,.5), transparent),
    radial-gradient(1px 1px at 80% 55%, rgba(242,245,250,.35), transparent),
    radial-gradient(1.4px 1.4px at 15% 80%, rgba(242,245,250,.45), transparent),
    radial-gradient(1px 1px at 55% 15%, rgba(242,245,250,.4), transparent),
    radial-gradient(1px 1px at 90% 20%, rgba(242,245,250,.3), transparent),
    radial-gradient(1.2px 1.2px at 30% 50%, rgba(242,245,250,.35), transparent);
  opacity:.7;
}
@media (prefers-reduced-motion:reduce){.sky{animation:none}}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--bar); backdrop-filter:blur(20px) saturate(1.3);
  border-bottom:1px solid var(--sep);
}
.header-inner{display:flex; align-items:center; gap:12px 20px; min-height:64px; flex-wrap:nowrap; padding-block:0}
.logo{
  display:inline-flex; align-items:center; gap:10px; color:var(--t1); font-weight:400; font-size:18px; letter-spacing:.04em;
  min-height:44px; padding:8px 0; flex-shrink:0; --qa-max-scale:1.25;
}
.logo-mark{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg, rgba(156,211,255,.35), rgba(154,123,255,.25));
  border:1px solid var(--gb); position:relative; flex-shrink:0;
}
.logo-mark::after{
  content:""; position:absolute; inset:6px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 0 3px rgba(156,211,255,.15);
}
.nav{display:flex; align-items:center; gap:4px; margin-left:8px; flex:1}
.nav a{
  color:var(--t2); font-weight:400; font-size:14px; padding:8px 10px; border-radius:12px; min-height:44px;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0; --qa-max-scale:1.35;
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--t1); background:var(--glass)}
.badge-soon{
  font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--onacc); background:var(--warm); padding:3px 7px; border-radius:6px; line-height:1.2;
}
.lang{
  display:inline-flex; align-items:center; gap:2px; padding:4px; border-radius:12px;
  background:var(--glass); border:1px solid var(--gb); flex-shrink:0; --qa-max-scale:1;
}
.lang a,.lang span{
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:9px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--t3);
  --qa-max-scale:1; flex-shrink:0;
}
.lang a:hover{color:var(--t1)}
.lang [aria-current="true"]{background:var(--accsoft); color:var(--acc)}
.burger{
  display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--gb);
  background:var(--glass); align-items:center; justify-content:center; flex-direction:column; gap:5px;
}
.burger span{display:block; width:18px; height:1.5px; background:var(--t1); border-radius:1px}
/* Compact header: keep nav one line at 1024+; CTA hides first, then burger */
.header-actions .btn-primary{white-space:nowrap; flex-shrink:0; padding:10px 16px; font-size:14px; min-height:44px; height:auto; max-width:min(240px,22vw); line-height:1.25; --qa-max-scale:1.25; overflow:hidden; text-overflow:ellipsis}
.header-actions{display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:nowrap; flex-shrink:0}
@media (max-width:1280px){
  .header-actions .btn-primary{display:none}
  .nav a{padding:8px 8px; font-size:13.5px}
}
@media (max-width:1000px){
  .nav{display:none}
  .burger{display:inline-flex}
}


/* Mobile menu */
.mobile-nav{
  display:none; position:fixed; inset:72px 0 0 0; z-index:40; background:var(--sheet);
  backdrop-filter:blur(24px); padding:24px var(--gutter) 40px; flex-direction:column; gap:8px;
  overflow:auto;
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:52px; padding:14px 16px; border-radius:16px; color:var(--t1); font-size:17px; font-weight:400;
  background:var(--glass); border:1px solid var(--gb);
}
.mobile-nav .btn{margin-top:16px}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:52px; padding:12px 24px; border-radius:var(--r-btn);
  font-weight:400; font-size:16px; text-align:center; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn-primary{background:var(--acc); color:var(--onacc)}
.btn-primary:hover{background:var(--accp); color:var(--onacc)}
.btn-secondary{
  background:var(--glass); color:var(--t1); border:1px solid var(--gb);
}
.btn-secondary:hover{background:var(--glass2); border-color:rgba(255,255,255,.22)}
.btn-ghost{color:var(--acc); min-height:44px; padding:8px 4px}
.btn-ghost:hover{color:var(--accp)}
.btn[disabled],.btn.is-disabled{opacity:.45; pointer-events:none}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

/* Cards / glass */
.card{
  overflow-wrap:anywhere;
  background:var(--glass); border:1px solid var(--gb); border-radius:var(--r-lg);
  padding:24px; position:relative;
}
.card::before{
  content:""; position:absolute; left:18px; right:18px; top:0; height:1px;
  background:var(--spec); opacity:.45; border-radius:1px;
}
.card-strong{background:var(--glass2)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:1fr 1fr}.grid-2{grid-template-columns:1fr}}
@media (max-width:560px){.grid-3,.grid-4,.grid-2{grid-template-columns:1fr}}

/* Hero */
.hero{padding:40px 0 48px; min-height:0}
@media (max-width:768px){.hero{padding:32px 0 40px}}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr; gap:32px}}
.hero .body{font-size:17px; max-width:36em; color:var(--t2)}
.hero .h-display{max-width:14em}
@media (min-width:1440px){
  .hero{padding:32px 0 40px}
}
.hero-visual{position:relative; min-height:480px; display:flex; flex-direction:column; align-items:center; justify-content:center}
@media (max-width:960px){.hero-visual{min-height:420px}}
@media (max-width:560px){.hero-visual{min-height:360px; margin-top:8px}}


/* Device frame */
.device{
  width:min(280px,100%); margin:0 auto; aspect-ratio:9/19.2;
  border-radius:40px; padding:9px;
  background:linear-gradient(160deg,#1a2230,#0a0e15);
  border:1px solid var(--gb); box-shadow:0 24px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06);
  position:relative;
}
.device-screen{
  width:100%; height:100%; border-radius:32px; overflow:hidden; background:#05070B;
  position:relative;
}
.device-screen img{width:100%; height:100%; object-fit:cover; object-position:top}
.device-notch{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); width:34%; height:18px;
  background:#05070B; border-radius:0 0 12px 12px; z-index:2;
}
.device-caption{text-align:center; margin-top:10px; max-width:28em}
/* Overlapping fan composition for hero */
.devices{
  position:relative; width:100%; max-width:420px; height:480px; margin:0 auto;
  display:block;
}
.devices .device{
  position:absolute; margin:0; width:210px;
  transition:transform .3s var(--ease);
}
.devices .device:nth-child(1){
  left:4px; top:40px; z-index:1;
  transform:rotate(-12deg);
  width:176px; opacity:.88; filter:brightness(.85);
}
.devices .device:nth-child(2){
  left:50%; top:4px; z-index:3;
  transform:translateX(-50%);
  width:220px;
  box-shadow:0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(156,211,255,.12);
}
.devices .device:nth-child(3){
  right:4px; top:44px; z-index:2;
  transform:rotate(11deg);
  width:176px; opacity:.9; filter:brightness(.9);
}
@media (max-width:960px){
  .devices{height:440px; max-width:360px}
  .devices .device:nth-child(1),.devices .device:nth-child(3){width:160px; top:40px}
  .devices .device:nth-child(2){width:200px}
}
@media (max-width:560px){
  .devices{height:360px; max-width:300px}
  .devices .device:nth-child(1){left:-4px; transform:rotate(-12deg); width:140px; top:36px}
  .devices .device:nth-child(2){width:170px; top:4px}
  .devices .device:nth-child(3){right:-4px; transform:rotate(11deg); width:140px; top:40px}
}
@media (prefers-reduced-motion:reduce){
  .devices .device{transition:none}
}
/* Feature / Asterism section single phone — larger */
.feature-device{
  width:min(300px,78%); margin:0 auto;
}
.feature-row .feature-device{width:min(280px,100%)}
@media (min-width:961px){
  .feature-row .feature-device{width:300px}
}

/* Retired 2026-10-05: pages no longer use amber placeholders (rule kept for reference only) */
.todo{
  display:block; margin:12px 0; padding:14px 16px; border-radius:12px;
  border:1.5px dashed rgba(255,200,91,.55); background:rgba(255,200,91,.08);
  color:var(--warn); font-size:14px; line-height:1.45; font-weight:400;
}
.todo::before{content:"TODO · "; font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase}

/* Forms */
.form{display:flex; flex-direction:column; gap:16px; max-width:520px}
.form-row{display:flex; flex-direction:column; gap:8px}
.form-row.inline{flex-direction:row; gap:12px; align-items:stretch}
.form-row.inline .field{flex:1}
.form-row.inline .btn{flex-shrink:0}
@media (max-width:560px){.form-row.inline{flex-direction:column}}
label.field-label{font-size:14px; font-weight:400; color:var(--t2)}
.req{color:var(--acc)}
.field,.select,textarea.field{
  width:100%; min-height:52px; padding:14px 16px; border-radius:var(--r-md);
  background:rgba(255,255,255,.04); border:1px solid var(--gb); color:var(--t1);
  font:300 16px/1.4 var(--sans); appearance:none;
}
textarea.field{min-height:140px; resize:vertical}
.field::placeholder,textarea.field::placeholder{color:var(--t3)}
.field:hover,textarea.field:hover,.select:hover{border-color:rgba(255,255,255,.22)}
.field:focus,textarea.field:focus,.select:focus{border-color:var(--acc); background:rgba(156,211,255,.06)}
.field.is-error,textarea.field.is-error,.select.is-error{border-color:var(--danger)}
.field-error{font-size:13px; color:var(--danger); min-height:18px}
.field-hint{font-size:13px; color:var(--t3)}
.check{
  display:flex; gap:12px; align-items:flex-start; font-size:14px; color:var(--t2); line-height:1.45;
  min-height:44px; padding:8px 0;
}
.check input{
  width:24px; height:24px; margin-top:2px; flex-shrink:0; accent-color:var(--acc);
  border-radius:6px;
}
.check a{display:inline; min-height:0; padding:0; /* hit area via parent label */}
.form-status{
  padding:16px 18px; border-radius:14px; border:1px solid var(--gb); font-size:15px; line-height:1.45;
}
.form-status.ok{background:rgba(125,227,181,.1); border-color:rgba(125,227,181,.35); color:var(--ok)}
.form-status.err{background:rgba(255,122,110,.1); border-color:rgba(255,122,110,.35); color:var(--danger)}
.form-status[hidden]{display:none}

/* FAQ */
.faq{display:flex; flex-direction:column; gap:10px; max-width:720px}
.faq-item{
  border:1px solid var(--gb); border-radius:16px; background:var(--glass); overflow:hidden;
}
.faq-item summary{
  list-style:none; cursor:pointer; min-height:56px; padding:16px 20px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-weight:400; font-size:16px; color:var(--t1);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+"; font-family:var(--mono); color:var(--acc); font-size:18px; flex-shrink:0;
}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-a{padding:0 20px 18px; color:var(--t2); font-size:15px; line-height:1.55}

/* Lists */
.checklist{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.checklist li{
  display:flex; gap:12px; align-items:flex-start; color:var(--t2); font-size:16px; line-height:1.5;
}
.checklist li::before{
  content:""; width:8px; height:8px; margin-top:8px; border-radius:50%;
  background:var(--acc); box-shadow:0 0 0 4px rgba(156,211,255,.15); flex-shrink:0;
}

/* Footer */
.site-footer{
  margin-top:24px; border-top:1px solid var(--sep); background:var(--bg2);
  padding:56px 0 32px;
}
.footer-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand{color:var(--t2); font-size:15px; max-width:28em}
.footer-col h3{font-family:var(--mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3); font-weight:500; margin:0 0 14px}
.footer-col a{display:flex; align-items:center; color:var(--t2); font-size:14px; padding:10px 0; min-height:44px}
.footer-col a:hover{color:var(--t1)}
.footer-email{margin:8px 0 0}
.footer-email .mail-link{font-size:14px}
.footer-copy{margin:0}
/* E-mail / inline doc links: 44px hit area without changing visual size */
.mail-link{display:inline-flex; align-items:center; min-height:44px; vertical-align:baseline; overflow-wrap:anywhere}
.footer-bottom{
  margin-top:40px; padding-top:24px; border-top:1px solid var(--sep);
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center;
  color:var(--t3); font-size:13px;
}

/* Split / feature blocks */
.feature-row{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center}
.feature-row.reverse > :first-child{order:2}
@media (max-width:860px){
  .feature-row,.feature-row.reverse{grid-template-columns:1fr}
  .feature-row.reverse > :first-child{order:0}
}

/* Pricing cards */
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:720px}
@media (max-width:640px){.price-grid{grid-template-columns:1fr}}

/* Legal */
.legal{max-width:720px}
.legal .body{margin-top:16px}
.steps{counter-reset:step; display:flex; flex-direction:column; gap:20px}
.step{
  display:grid; grid-template-columns:48px 1fr; gap:16px; align-items:start;
  padding:20px; border-radius:16px; background:var(--glass); border:1px solid var(--gb);
}
.step-n{
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:var(--accsoft); color:var(--acc); font-family:var(--mono); font-weight:500; font-size:16px;
}

/* 404 */
.page-404{min-height:60vh; display:flex; align-items:center; text-align:center}
.page-404 .wrap{max-width:560px}

/* Components sheet helpers */
.swatch{width:72px; height:72px; border-radius:16px; border:1px solid var(--gb)}
.token-row{display:flex; gap:16px; flex-wrap:wrap; align-items:center}

/* Skip link */
.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{position:fixed; left:16px; top:16px; width:auto; height:auto; z-index:100;
  padding:12px 18px; background:var(--acc); color:var(--onacc); border-radius:12px}

/* Analytics banner (optional) */
.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:60; max-width:560px; margin:0 auto;
  padding:18px 20px; border-radius:18px; background:var(--sheet); border:1px solid var(--gb);
  box-shadow:0 20px 60px rgba(0,0,0,.45); display:none;
}
.consent-banner.show{display:block}

/* Utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-20{margin-top:20px}.mt-24{margin-top:24px}.mt-32{margin-top:32px}.mt-40{margin-top:40px}
.mb-0{margin-bottom:0}
.text-t1{color:var(--t1)}.text-t2{color:var(--t2)}.text-t3{color:var(--t3)}
.center{text-align:center}
.max-prose{max-width:40em; overflow-wrap:anywhere}
.divider{height:1px; background:var(--sep); border:0; margin:0}

.link-row{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.link-row a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font-size:14px;color:var(--t2)}
.link-row a:hover{color:var(--t1)}

@media (max-width:1100px) and (min-width:1001px){
  .nav a{padding:8px 6px; font-size:13px}
  .badge-soon{padding:3px 6px}
}

.hero .todo{margin:8px 0}
.hero .form{margin-top:8px}