:root{
  --bg:#0f1724; --card:#0b1220; --accent:#7afcff; --muted:#9aa6b2;
  --glass: rgba(255,255,255,0.06); --glass-2: rgba(255,255,255,0.02);
  --max: 1200px; --radius:14px;
  color-scheme: dark;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(122,252,255,0.05), transparent 30%) , linear-gradient(180deg,#071021 0%, #071623 60%);
  color:#e6f0f6; line-height:1.45;
}
img,video{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:clamp(16px, 3vw, 28px)}
.section-pad{padding-block:clamp(28px, 6vw, 64px)}
.maxch{max-width:70ch}
.muted{color:var(--muted)}
.subline{font-size:12px}
.tiny{font-size:12px;margin-top:10px}
.hidden{display:none}
.skip{position:absolute;left:-9999px;top:auto;opacity:0}
.skip:focus{left:8px;top:8px;opacity:1;background:#000;padding:8px 10px;border-radius:8px}

/* Typography with clamp() */
.hero-title{
  font-size:clamp(26px, 4vw, 44px);
  line-height:1.05; margin:0 0 12px;
}
.section-title{
  font-size:clamp(20px, 2.5vw, 28px);
  margin:0 0 12px 0;
}
h3{font-size:clamp(16px, 2vw, 20px); margin:0 0 6px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px);
  background:linear-gradient(180deg, rgba(7,16,33,0.75), rgba(7,22,35,0.4));
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.site-header .wrap{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:10px;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:48px;height:48px;border-radius:12px;
  background:linear-gradient(135deg,var(--accent),#56a6ff);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#012;font-family:monospace;
  box-shadow:0 6px 20px rgba(0,0,0,.6), inset 0 -4px 12px rgba(255,255,255,.06);
}
.brand-title{font-size:16px}

/* Desktop nav */
.nav{display:flex;align-items:center;gap:clamp(10px,2vw,20px)}
.nav a{
  color:var(--muted); text-decoration:none; font-weight:600; font-size:14px;
  padding:10px 8px; border-radius:10px;
}
.nav a:hover{background:rgba(255,255,255,0.06)}
.cta{
  background:linear-gradient(90deg,var(--accent),#6fd3ff);
  color:#012;padding:10px 14px;border-radius:12px;font-weight:800;text-decoration:none;
  box-shadow:0 6px 18px rgba(122,252,255,0.12);
}

/* Mobile menu button */
.menu-btn{
  display:none; background:transparent; border:1px solid rgba(255,255,255,0.12);
  padding:10px; border-radius:10px; cursor:pointer;
}
.menu-bar{display:block;width:20px;height:2px;background:#e6f0f6;margin:4px 0}

/* Mobile drawer */
.mobile-nav{
  display:none; flex-direction:column; gap:8px;
  padding:12px 16px 16px;
  border-bottom:1px solid rgba(255,255,255,0.06);
  background:linear-gradient(180deg, rgba(7,16,33,0.92), rgba(7,22,35,0.92));
}
.mobile-nav a{
  color:#e6f0f6; text-decoration:none; font-weight:700; padding:12px 10px; border-radius:10px;
}
.mobile-nav a:hover{background:rgba(255,255,255,0.06)}

/* Hero grid */
.grid-hero{
  display:grid; gap:clamp(18px, 3vw, 28px);
  grid-template-columns:minmax(0,1.05fr) minmax(280px, 0.95fr);
  align-items:center;
}
.sub{color:var(--muted);margin-bottom:18px;font-size:clamp(14px, 1.8vw, 16px)}
.metrics{display:flex;gap:12px;flex-wrap:wrap}
.metric{
  background:rgba(255,255,255,0.04);padding:10px 14px;border-radius:12px;font-weight:700;color:var(--accent);
  display:flex;flex-direction:column;min-width:110px
}
.kicker{font-size:12px;color:var(--muted);font-weight:600}
.big{font-size:18px}
.actions{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.12);padding:12px 14px;border-radius:12px;color:#dbe7ef;font-weight:700;cursor:pointer}

/* Mockup */
.mockup{
  width:100%;min-height:clamp(300px, 38vw, 420px);border-radius:20px;
  background:
    radial-gradient(1200px 600px at 90% 10%, rgba(122,252,255,.06), transparent 6%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06));
  padding:24px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  border:1px solid var(--glass-2);
  box-shadow: 0 20px 60px rgba(1,8,15,.6);
}
.sparkle{
  position:absolute;right:-100px;top:-60px;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(122,252,255,.06), transparent 12%);
  filter:blur(24px);opacity:.9;transform:rotate(12deg);
}
.lens{
  width:clamp(180px, 22vw, 260px);height:clamp(180px, 22vw, 260px);border-radius:50%;
  background:conic-gradient(from 120deg at 50% 50%, rgba(122,252,255,.08), rgba(86,166,255,.06));
  border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;
  animation:float 5s ease-in-out infinite; position:relative;
}
.lens::after{
  content:"";position:absolute;width:60%;height:60%;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.12), rgba(255,255,255,.02));
  box-shadow: inset 0 -6px 20px rgba(0,0,0,.6);
}
.lens-svg{filter:drop-shadow(0 12px 30px rgba(2,8,20,.6))}
.stroke-ring{stroke:rgba(255,255,255,.06);stroke-width:1}
.iris{fill:rgba(2,12,20,.18)}
.smile{stroke:rgba(122,252,255,.7);stroke-width:2;stroke-linecap:round}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-18px)}100%{transform:translateY(0)}}

/* Press */
.press{padding-block:clamp(8px, 2vw, 14px)}
.press-track{display:flex;align-items:center;gap:12px}
.press-track span{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.12em}
.press-logos{display:flex;gap:10px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);padding:6px 10px;border-radius:999px;font-size:12px;color:#dbe7ef}

/* Features grid */
.cards{
  display:grid;gap:clamp(10px, 2vw, 14px);
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.card{background:var(--card);padding:18px;border-radius:14px;border:1px solid var(--glass);min-height:120px}

/* CTA band */
.cta-band{padding-block:clamp(14px, 3.8vw, 22px);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);background:linear-gradient(90deg, rgba(122,252,255,.04), rgba(86,166,255,.02))}
.band-grid{
  display:grid; gap:14px; align-items:center;
  grid-template-columns:1fr auto;
}
.form-inline{display:flex;gap:8px;flex-wrap:wrap}
.form-inline input{
  background:transparent;border:1px solid rgba(255,255,255,.12);padding:12px 12px;border-radius:10px;color:inherit;outline:none;min-width:min(280px, 100%)
}
.form-inline button{
  padding:12px 14px;border-radius:10px;border:none;background:var(--accent);color:#012;font-weight:900;cursor:pointer
}

/* Roadmap */
.timeline{list-style:none;margin:0;padding:0;position:relative}
.timeline li{background:var(--card);border:1px solid var(--glass);border-radius:12px;padding:14px;margin:0 0 12px 24px;position:relative}
.timeline li::before{content:"";position:absolute;left:-18px;top:18px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(122,252,255,.15)}
.timeline::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:rgba(255,255,255,.06);border-radius:1px}

/* Demo */
.demo-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.panel{background:var(--card);padding:14px;border-radius:12px;border:1px solid var(--glass)}
.mt-6{margin-top:6px}.mt-8{margin-top:8px}.mt-10{margin-top:10px}

/* FAQ */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
details{background:var(--card);padding:14px;border-radius:12px;border:1px solid var(--glass);color:var(--muted)}
summary{font-weight:700;cursor:pointer}

/* Contact */
.contact-form{
  display:grid;grid-template-columns:1fr minmax(180px, 220px);gap:10px;max-width:820px
}
.contact-form input[name="email"], .contact-form textarea{grid-column:1 / -1}
.submit{background:var(--accent);border:none;padding:12px 14px;border-radius:12px;font-weight:900;cursor:pointer}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06);margin-top:clamp(18px, 4vw, 36px)}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:16px}

/* Modal */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:60;padding:20px;visibility:hidden;opacity:0;transition:opacity .18s ease, visibility .18s ease}
.modal.show{visibility:visible;opacity:1}
.backdrop{position:absolute;inset:0;background:rgba(1,6,12,.7)}
.modal-card{position:relative;max-width:min(960px, 96vw);width:100%;border-radius:14px;overflow:hidden;background:#02111a;border:1px solid rgba(255,255,255,.06);box-shadow:0 30px 80px rgba(0,0,0,.6);padding:18px}
.modal-close{position:absolute;right:12px;top:12px;border:none;background:transparent;color:var(--muted);font-size:20px;cursor:pointer}
.modal-title{margin:0 0 12px 0}
.modal-body .video{width:100%;max-height:60vh;border-radius:10px;background:#000}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(12px)}

/* Breakpoints */
@media (max-width:1080px){
  .grid-hero{grid-template-columns:1fr}
}
@media (max-width:920px){
  .cards{grid-template-columns:repeat(2, minmax(0,1fr))}
  .faq{grid-template-columns:1fr}
  .demo-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .band-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .nav{display:none}
  .menu-btn{display:inline-flex}
  .mobile-nav.open{display:flex}
}

/* Focus styles */
a:focus, button:focus, input:focus, textarea:focus{
  outline:2px dashed rgba(122,252,255,.28); outline-offset:3px;
}

/* Touch target boost */
a, button { min-height:44px }