:root{
  --bg:#0b0b0c;
  --fg:#e7e7ea;
  --muted:#a9a9b2;
  --card:#111113;
  --line:#1a1a1d;
  --accent:#8ef9a5;
  --accent-2:#7ad0ff;
  --container: min(1100px, calc(100vw - 4rem));
}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
  line-height:1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.container{width:var(--container); margin-inline:auto;}

.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--card); border:1px solid var(--line); border-radius:.5rem;}

.site-header{
  position:sticky; top:0; z-index:10; backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
}
.site-header .container{display:flex; align-items:center; gap:1rem; padding:1rem 0;}
.brand{display:flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--fg); font-weight:700; letter-spacing:.1px}
.brand .mark{width:22px; height:22px; fill:none; stroke:var(--accent); stroke-width:1.5}
.wordmark .muted{color:var(--muted); font-weight:600}

.site-nav{margin-left:auto}
.nav-list{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav-list a{color:var(--fg); text-decoration:none; opacity:.9}
.nav-list a:hover{opacity:1; text-decoration:underline; text-underline-offset:3px}

.hero{position:relative; overflow:hidden}
.hero .container{padding:8rem 0 4rem}
.hero-grid{display:grid; gap:1.25rem; align-items:start}
.mega{font-size: clamp(2.5rem, 6vw, 5rem); line-height:1.05; margin:0; letter-spacing:-.02em}
.accent{color:var(--accent)}
.lede{color:var(--muted); max-width:65ch; margin:.25rem 0 1rem}
.cta-row{display:flex; gap:.75rem; flex-wrap:wrap; margin: .5rem 0 1rem}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.7rem 1rem; border-radius:.75rem; border:1px solid var(--line); text-decoration:none; font-weight:600; cursor:pointer}
.btn.primary{background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 30%, #fff 0%), var(--accent)); color:#0b0b0c; border-color: color-mix(in oklab, var(--accent) 50%, #000 50%)}
.btn.ghost{background:transparent; color:var(--fg)}
.btn:focus-visible{outline:2px solid var(--accent-2); outline-offset:2px}

.stats{display:flex; gap:1rem; margin-top:1rem; flex-wrap:wrap}
.stat{background:var(--card); border:1px solid var(--line); border-radius:.75rem; padding:.75rem 1rem; min-width:10ch}
.k{font-weight:800; letter-spacing:.02em}
.sublabel{display:block; font-size:.85rem; color:var(--muted)}

.hero-bg{position:absolute; inset:0; background:
  radial-gradient(60% 40% at 80% 10%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%),
  radial-gradient(40% 25% at 10% 30%, color-mix(in oklab, var(--accent-2) 10%, transparent), transparent 70%);
  mask: linear-gradient(#000 60%, transparent 100%);
  pointer-events:none;
}

.section{padding:4rem 0; border-top:1px solid var(--line)}
.section-title{margin-top:0; font-size: clamp(1.5rem, 3vw, 2rem)}

.pillars{display:grid; grid-template-columns: 1fr; gap:.8rem; padding:0; margin:1rem 0 0; list-style:none}
.pillars li{background:var(--card); border:1px solid var(--line); border-radius:.75rem; padding: .9rem 1rem; display:flex; align-items:center; gap:.75rem}
.dot{width:.55rem; height:.55rem; border-radius:50%; background:var(--accent)}

@media (min-width: 720px){
  .pillars{grid-template-columns: repeat(2, 1fr)}
}

.signals .marquee{overflow:hidden; border:1px solid var(--line); border-radius:.75rem; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0));}
.signals .track{display:flex; gap:2rem; padding: .75rem 1rem; width:max-content; animation: slide 30s linear infinite}
.signals .track span{white-space:nowrap; color:var(--muted); font-weight:600; letter-spacing:.04em}
@keyframes slide{from{transform: translateX(0)} to{transform: translateX(-50%)}}

.cards{display:grid; grid-template-columns: 1fr; gap:1rem; margin-top:1rem}
.card{background:var(--card); border:1px solid var(--line); border-radius:.9rem; padding:1.2rem}
.card h3{margin:.25rem 0 .25rem}
.card p{margin:.25rem 0 .75rem; color:var(--muted)}
.chip{display:inline-block; font-size:.9rem; padding:.35rem .6rem; border-radius:999px; border:1px dashed var(--line); color:var(--fg); text-decoration:none; opacity:.8}
.chip[aria-disabled="true"]{pointer-events:none;}

@media (min-width: 880px){
  .cards{grid-template-columns: repeat(3, 1fr)}
}

.contact-cta{display:flex; gap:.75rem; flex-wrap:wrap; margin: .5rem 0 1rem}

.site-footer{border-top:1px solid var(--line); padding:2rem 0; color:var(--muted)}
.site-footer .container{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.foot-links{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.tiny{font-size:.9rem}
.fine{font-size:.9rem; color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .signals .track{animation: none}
}

::selection{background: color-mix(in oklab, var(--accent) 40%, #000 60%); color:#0b0b0c}