:root{
  --bg0:#060816;
  --bg1:#0b1020;
  --ink:#eaf0ff;
  --muted:rgba(234,240,255,.72);
  --faint:rgba(234,240,255,.52);
  --line:rgba(234,240,255,.12);
  --line2:rgba(234,240,255,.08);
  --accent:#8ef0ff;
  --accent2:#b18cff;
  --good:#7cffb1;
  --shadow: 0 26px 70px rgba(0,0,0,.52);
  --radius: 20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background: linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{color:inherit}
.mono{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}
.em{
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.faint{color:var(--faint)}

/* Background */
.bg{position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden}
.bgVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  filter: saturate(1.05) contrast(1.05) brightness(.85);
  transform: scale(1.02);
}
.vignette{
  position:absolute; inset:-2px;
  background:
    radial-gradient(1200px 700px at 20% 0%, rgba(177,140,255,.18), transparent 60%),
    radial-gradient(900px 600px at 70% 10%, rgba(142,240,255,.14), transparent 60%),
    radial-gradient(900px 500px at 50% 60%, rgba(0,0,0,.42), transparent 60%),
    linear-gradient(180deg, rgba(5,7,18,.62), rgba(5,7,18,.82));
}
.noise{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
}
.grid{
  position:absolute; inset:-2px;
  background:
    linear-gradient(to right, rgba(234,240,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(234,240,255,.06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(closest-side at 50% 22%, rgba(0,0,0,.9), transparent 72%);
  opacity:.55;
}
.glow{
  position:absolute; left:50%; top:-60px;
  transform:translateX(-50%);
  width:min(1200px, 92vw);
  height:560px;
  background:
    radial-gradient(circle at 50% 30%, rgba(142,240,255,.18), transparent 60%),
    radial-gradient(circle at 28% 18%, rgba(177,140,255,.16), transparent 58%);
  filter: blur(10px);
}

/* Topbar */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 14px;
  padding:18px 22px;
  position:sticky;
  top:0;
  z-index:10;
  background: rgba(5,8,18,.50);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--line2);
}
.brand{display:flex; gap:12px; align-items:center}
.brandIcon{
  width:40px; height:40px;
  border-radius: 14px;
  border:1px solid rgba(234,240,255,.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,.03) inset, 0 18px 40px rgba(0,0,0,.35);
}
.brandName{font-weight:700; letter-spacing:.2px}
.brandTag{font-size:12px; color:rgba(234,240,255,.62); margin-top:2px}

.links{display:flex; gap:12px; flex-wrap:wrap; justify-content:flex-end}
.navLink{
  text-decoration:none;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid var(--line2);
  color:rgba(234,240,255,.84);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  background: rgba(10,14,30,.30);
}
.navLink:hover{transform: translateY(-1px); border-color: rgba(142,240,255,.24); background: rgba(10,14,30,.55)}

/* Layout */
.wrap{width:min(1100px, 92vw); margin: 0 auto; padding: 42px 0 34px}
.hero{padding: 18px 0 26px}

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line2);
  background: rgba(10,14,30,.30);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset;
}
.pulse{
  width:10px; height:10px; border-radius:50%;
  background: var(--good);
  box-shadow: 0 0 0 0 rgba(124,255,177,.5);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(124,255,177,.45)}
  70%{box-shadow:0 0 0 12px rgba(124,255,177,0)}
  100%{box-shadow:0 0 0 0 rgba(124,255,177,0)}
}

.headline{
  margin: 18px 0 10px;
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -1.2px;
}
.ghost{display:block; color:rgba(234,240,255,.70); font-weight:500}
.glitch{
  display:inline-block;
  position:relative;
  font-weight:800;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.glitch::before, .glitch::after{
  content: attr(data-text);
  position:absolute;
  left:0; top:0;
  opacity:.55;
  mix-blend-mode: screen;
  filter: blur(.2px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(142,240,255,.26);
}
.glitch::before{transform: translate(2px, -1px); animation: glitch 2.7s infinite linear alternate-reverse}
.glitch::after{transform: translate(-2px, 1px); animation: glitch 2.1s infinite linear alternate}
@keyframes glitch{
  0%{clip-path: inset(0 0 82% 0)}
  15%{clip-path: inset(10% 0 46% 0)}
  30%{clip-path: inset(64% 0 16% 0)}
  45%{clip-path: inset(26% 0 56% 0)}
  60%{clip-path: inset(80% 0 4% 0)}
  75%{clip-path: inset(8% 0 72% 0)}
  100%{clip-path: inset(0 0 86% 0)}
}

.subhead{margin: 0 0 18px; max-width: 76ch; font-size: 18px; line-height: 1.65; color: var(--muted)}
.divider{
  height: 1px;
  width: min(880px, 100%);
  background: linear-gradient(90deg, transparent, rgba(142,240,255,.22), rgba(177,140,255,.18), transparent);
  margin: 18px 0;
}

.teaser{
  width: min(880px, 100%);
  border-radius: 22px;
  border: 1px solid var(--line2);
  background: rgba(10,14,30,.38);
  box-shadow: var(--shadow);
  padding: 18px 18px 14px;
}
.teaserLine{margin: 0 0 10px; color: rgba(234,240,255,.86); line-height: 1.75}
.teaserLine:last-child{margin-bottom:0}

.ctaRow{display:flex; gap:12px; align-items:center; margin-top: 16px; flex-wrap:wrap}
.btn{
  text-decoration:none;
  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line2);
  background: rgba(10,14,30,.34);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.btn:hover{transform: translateY(-1px); border-color: rgba(234,240,255,.16); background: rgba(10,14,30,.56)}
.btn.primary{
  border-color: rgba(142,240,255,.30);
  background: linear-gradient(180deg, rgba(142,240,255,.16), rgba(10,14,30,.46));
}
.btn.ghost{color:rgba(234,240,255,.88)}
.arrow{opacity:.9}

.fineprint{margin-top: 14px; color: rgba(234,240,255,.58); font-size: 12px; letter-spacing: .2px}
.sep{opacity:.6; margin: 0 8px}

/* Below section */
.below{padding: 26px 0 10px}
.panel{
  width: min(900px, 100%);
  border-radius: 24px;
  border: 1px solid var(--line2);
  background: rgba(10,14,30,.30);
  box-shadow: var(--shadow);
  padding: 22px;
}
.panelTitle{margin:0 0 10px; font-size: 20px; letter-spacing: .2px}
.panelText{margin:0 0 10px; color: var(--muted); line-height: 1.8}

.miniRow{display:flex; gap:10px; flex-wrap:wrap; margin-top: 12px}
.chip{
  display:inline-flex;
  font-size: 12px;
  letter-spacing: .6px;
  padding: 8px 10px;
  border-radius: 999px;
  border:1px solid var(--line2);
  background: rgba(0,0,0,.18);
  color: rgba(234,240,255,.78);
}

.footer{
  display:flex; justify-content:space-between; align-items:center;
  padding: 14px 0 0;
  color: rgba(234,240,255,.55);
}
.footer a{color: rgba(234,240,255,.62); text-decoration:none}
.footer a:hover{text-decoration:underline}
.statusDot{
  display:inline-block;
  width:9px; height:9px;
  border-radius:50%;
  background: rgba(142,240,255,.9);
  box-shadow: 0 0 14px rgba(142,240,255,.45);
  margin-right: 8px;
}

@media (prefers-reduced-motion: reduce){
  .pulse, .glitch::before, .glitch::after { animation: none !important; }
}

@media (max-width: 920px){
  .topbar{flex-wrap:wrap}
  .links{justify-content:flex-start}
  .brandIcon{width:36px; height:36px}
}