:root{
  --bg:#0a1524;           /* deep night blue */
  --bg2:#0e2340;          /* twilight blue */
  --ice:#bfe6ff;          /* icy highlight */
  --frost:#e4f4ff;
  --accent:#7cd4ff;       /* light cyan */
  --accent2:#6ad6bd;      /* mint */
  --pow:#ffd166;          /* sunny pow pop */
  --rose:#ff8fa3;         /* sunset pink */
  --ink:#e9f6ff;          /* text */
  --muted:#b6c8db;
  --card:#0f1d34cc;       /* translucent card */
  --glass:#0f1d34a0;      /* glass pane */
  --shadow: 0 20px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  --radius: 18px;
  --header-h: 72px;
}

*{ box-sizing:border-box }
html,body{ height:100% }

body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, Helvetica, sans-serif;
  color:var(--ink);
  padding-top:var(--header-h);
  background:
    radial-gradient(1200px 800px at 20% -10%, #153a6b 0%, transparent 30%),
    radial-gradient(1200px 800px at 110% -20%, #142c50 0%, transparent 30%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--frost); text-decoration:underline }

/* Snow Canvas */
#snow{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  filter:drop-shadow(0 2px 1px rgba(255,255,255,.2));
}

:where(section, h1, h2, h3, h4, h5, h6, [id]) {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

#site-header{ padding-top: env(safe-area-inset-top) }
#site-header{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(12,14,20,.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* Nav */
header{
  position:sticky; top:0; z-index:10;
  backdrop-filter:saturate(1.2) blur(8px);
  background:linear-gradient(180deg, rgba(10,21,36,.85) 0%, rgba(10,21,36,.45) 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}

/* audio link in header (center lane) */
.audio-header{
  flex:0 1 48ch;
  display:flex; align-items:center; min-width:0;
}
.audio-header button{
  background:none; border:none; color:var(--accent); cursor:pointer; font:inherit;
  padding:6px 10px; border-radius:8px; transition:background .2s;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.audio-header button:hover,
.audio-header button:focus{
  background: rgba(255,255,255,.08); outline:none;
}

.nav{ max-width:1200px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; gap:20px }
.brand{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.3px }
.logo{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:conic-gradient(from 200deg, #5cd5ff, #6ad6bd, #bfe6ff, #5cd5ff);
  box-shadow:var(--shadow);
}
.logo span{ font-family:"JetBrains Mono", monospace; font-weight:700; color:#0a1b2e }
.navspacer{ flex:1 }
.nav a.btn{
  padding:10px 14px; border:1px solid rgba(255,255,255,.18); border-radius:12px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  color:var(--frost);
}

/* Hero */
.hero{ position:relative; z-index:1 }
.wrap{ max-width:1200px; margin:0 auto; padding:60px 20px }
.hero-inner{
  display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center;
}
.kicker{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  font-weight:600; color:var(--muted);
}
h1{ font-size:clamp(36px, 5vw, 60px); line-height:1.02; margin:18px 0 10px }
.lede{ font-size:clamp(18px, 2.2vw, 22px); color:var(--frost); opacity:.95 }
.cta{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap }
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:700; letter-spacing:.2px; cursor:pointer; border:0;
  background:linear-gradient(180deg, #58cfff, #37a7ff); color:#0a1830; box-shadow:0 8px 20px rgba(88,207,255,.3);
}
.btn.secondary{
  background:linear-gradient(180deg, #74e2ca, #4cc6af); color:#04252c; box-shadow:0 8px 20px rgba(76,198,175,.25)
}
.btn.ghost{ background:transparent; color:var(--frost); border:1px solid rgba(255,255,255,.2) }

.glass{
  border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:var(--shadow);
}
.screen{
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(60% 100% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #061225, #0f1d34);
  border-radius:16px; position:relative; border:1px solid rgba(255,255,255,.14);
}
.screen::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,0) 35%);
  mix-blend-mode:overlay; pointer-events:none;
}
.spec-chip{
  position:absolute; bottom:10px; left:10px; padding:6px 10px; border-radius:10px;
  background:rgba(0,0,0,.35); color:var(--frost);
  font-family:"JetBrains Mono", monospace; font-size:12px; border:1px solid rgba(255,255,255,.14)
}

/* Feature grid */
.grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px }
.card{ padding:20px; min-height:170px }
.icon{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.14); margin-bottom:12px
}
h3{ margin:0 0 8px; font-size:20px }
p{ margin:0; color:var(--muted); line-height:1.6 }

/* Section headers */
.section{ margin-top:70px }
.section h2{ font-size:32px; margin:0 0 10px }
.section .sub{ color:var(--muted); margin-bottom:18px }

/* Steps */
.steps{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px }
.step{ padding:18px }
.step .num{ font-weight:800; font-size:22px; color:var(--accent) }

/* Split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch }

/* Footer */
footer{
  margin-top:80px; padding:30px 20px;
  border-top:1px solid rgba(255,255,255,.1);
  color:var(--muted); text-align:center
}
/* Feature cards: icon + heading inline on all screens */
#features .grid .card {
  display: grid;
  grid-template-columns: auto 1fr;   /* icon | heading/text */
  align-items: start;
  column-gap: 10px;
}

#features .grid .card .icon {
  margin: 0;                        /* remove bottom margin */
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

#features .grid .card h3 {
  margin: 0;
  align-self: center;
}

/* Make paragraph span full width under icon + heading row */
#features .grid .card p {
  grid-column: 1 / -1;
  margin-top: 6px;
}
/* Social link styling */
.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--frost);
  transition: background 0.2s, color 0.2s;
}

.social-link:hover {
  background: rgba(255,255,255,0.1);
  color: var(--accent);
}

.footer-social {
  margin-top: 8px;
}