/* ===============  Base & tokens  =============== */
:root{
  --bg: #0b0e17;
  --elev: #0f1220;
  --text: #e6e8ee;
  --muted: #b7bcc9;
  --accent: #0ea5e9;      /* Electric teal/blue */
  --accent-2: #22d3ee;    /* Lighter accent */
  --card: rgba(255,255,255,0.03);
  --stroke: rgba(255,255,255,0.08);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --container: clamp(16px, 4vw, 40px);
  --w: min(1120px, 100% - var(--container)*2);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#f8fafc; --elev:#ffffff; --text:#0f172a; --muted:#475569; --card:#ffffff; --stroke:#e2e8f0;
  }
}

*{ box-sizing:border-box }
html:focus-within{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html:focus-within{ scroll-behavior:auto }
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(14,165,233,.15), transparent 60%), var(--bg);
  line-height:1.6;
}

img, video{ max-width:100%; height:auto; display:block }
a{ color:inherit; text-decoration:none }
p{ color: var(--muted) }
h1,h2,h3{ line-height:1.2; margin:0 0 .4rem }

/* ===============  Helpers  =============== */
.container{ width: var(--w); margin-inline:auto }
.section{ padding: 72px 0 }
.section-alt{ background: linear-gradient(180deg, transparent, rgba(255,255,255,.03)); }
.section-title{ font-size: clamp(1.5rem, 2.5vw, 2rem); margin-bottom: 24px }
.grid-2{ display:grid; gap: 32px; grid-template-columns: 1fr; align-items:center }
@media (min-width: 900px){
  .grid-2{ grid-template-columns: 1.1fr .9fr }
}

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

/* ===============  Header  =============== */
.site-header{
  position: sticky; top: 0; z-index: 80;
  backdrop-filter: blur(8px);
  background: color-mix(in oklab, var(--bg), transparent 20%);
  border-bottom: 1px solid var(--stroke);
}
.header-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 12px 0;
}
.logo{ display:flex; gap:10px; align-items:center; font-weight:700 }
.logo-ring{ fill:none; stroke: var(--accent); stroke-width:2 }
.logo-glyph{ fill:none; stroke: currentColor; stroke-width:2; stroke-linecap:round }
.logo-text{ letter-spacing:.2px }

.site-nav{ display:none; gap: 18px; align-items:center }
.site-nav a{ opacity:.9 }
.site-nav a:hover{ opacity:1 }
.nav-toggle{
  display:inline-flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px;
}
.nav-toggle-bar{ width:22px; height:2px; background: currentColor; border-radius:2px }
@media (min-width: 900px){
  .nav-toggle{ display:none }
  .site-nav{ display:flex }
}
.site-nav.open{ display:flex; position:absolute; inset: 60px 16px auto 16px; flex-direction:column; padding:16px; background: var(--elev); border:1px solid var(--stroke); border-radius: 12px; box-shadow: var(--shadow) }

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 14px; border-radius: 999px; border:1px solid var(--stroke);
  background: var(--card); color: var(--text); font-weight:600;
}
.btn:hover{ transform: translateY(-1px) }
.btn:active{ transform: translateY(0) }
.btn[aria-disabled="true"]{ opacity:.6; pointer-events:none }
.btn--primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #001018; border-color: transparent;
}
.btn--ghost{ background: transparent }

/* ===============  Hero  =============== */
.hero{ position:relative; padding: 72px 0 88px }
.hero-copy h1{ font-size: clamp(2rem, 5vw, 3rem) }
.underline{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.actions{ display:flex; gap:12px; margin: 16px 0 8px; flex-wrap: wrap }
.hero-highlights{ display:flex; gap:16px; padding-left:0; list-style:none; color: var(--muted); flex-wrap: wrap }
.hero-art{ display:grid; place-items:center }
.frame{
  position:relative; border-radius: 20px; overflow:hidden; background:#000; border:1px solid var(--stroke);
  box-shadow: 0 20px 60px rgba(14,165,233,.15);
  aspect-ratio: 16/10; max-width: 560px; width: 100%;
}
.frame-video{ width:100%; height:100%; object-fit:cover; opacity:.9 }
.frame-glow{
  position:absolute; inset:-20%; background: radial-gradient(50% 50% at 50% 50%, rgba(14,165,233,.25), transparent 60%); filter: blur(30px);
}

/* Decorative blobs */
.blob{
  position:absolute; width:320px; height:320px; border-radius:50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(34,211,238,.3), transparent 60%);
  filter: blur(40px); pointer-events:none; z-index:-1;
}
.blob-a{ top:-40px; right: -80px }
.blob-b{ bottom:-60px; left: -80px }

/* ===============  Cards / Features  =============== */
.card-grid{ display:grid; grid-template-columns: repeat(1,1fr); gap:16px }
@media (min-width: 700px){ .card-grid{ grid-template-columns: repeat(2,1fr) } }
@media (min-width: 1024px){ .card-grid{ grid-template-columns: repeat(4,1fr) } }

.card{
  background: var(--card); border: 1px solid var(--stroke); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.card h3{ margin: 6px 0 6px; font-size: 1.05rem }
.card-icon{ font-size: 22px }

/* ===============  Video  =============== */
.video-wrap{ background: var(--card); border:1px solid var(--stroke); border-radius: var(--radius); padding:10px; box-shadow: var(--shadow) }
.video-16x9{ position:relative; aspect-ratio:16/9; width:100% }
.video-16x9 iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; border-radius: 12px }

/* ===============  Contact / Form  =============== */
.list{ margin: 12px 0; padding-left: 18px }
.contact{ max-width: 520px }
.field{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px }
.field span{ font-size:.9rem; color: var(--muted) }
input, textarea{
  background: var(--elev); color: var(--text); border:1px solid var(--stroke);
  padding: 10px 12px; border-radius: 10px; font: inherit;
}
input:focus, textarea:focus{ outline:2px solid color-mix(in oklab, var(--accent), white 20%); outline-offset:2px }

/* ===============  Footer  =============== */
.site-footer{ border-top:1px solid var(--stroke); padding: 26px 0; margin-top: 40px }
.footer-wrap{ display:flex; gap:10px; align-items:center; justify-content:space-between; flex-wrap: wrap }
.footer-nav{ display:flex; gap:16px }
.fineprint{ font-size:.85rem; color: var(--muted) }

/* ===============  Reveal on scroll  =============== */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease }
.reveal.visible{ opacity:1; transform: translateY(0) }