:root{
    --ink:#f2f0f5;
    --ink-dim:#8f8d99;
    --bg:#030304;
    --bg-2:#08080c;
    --panel:#0d0d13;
    --line: rgba(242,240,245,.10);
    --violet:#8b5cf6;
    --violet-dim:#5b3aa8;
    --gold:#ffb85e;
    --radius:14px;
    --max:1160px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--ink);
    font-family:"Manrope",system-ui,-apple-system,sans-serif;
    line-height:1.6; overflow-x:hidden;
  }
  a{color:inherit} img{max-width:100%;display:block}
  .wrap{width:min(var(--max), calc(100% - 48px)); margin-inline:auto; position:relative; z-index:2}
  h1,h2,h3{font-family:"Unbounded",sans-serif; font-weight:600; margin:0; letter-spacing:-.01em; color:var(--ink)}
  h2{font-size:clamp(1.9rem,4vw,2.9rem); line-height:1.12}
  h3{font-size:1.2rem; line-height:1.3}
  p{margin:0}
  .lede{max-width:50ch; color:var(--ink-dim); font-size:1.05rem}
  .eyebrow{font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); font-weight:600; margin:0 0 14px}

  header{position:fixed; top:0; left:0; right:0; z-index:60; padding:22px 0; border-bottom:1px solid transparent; transition:.25s}
  header.scrolled{background:rgba(3,3,4,.75); backdrop-filter:blur(10px); border-color:var(--line)}
  .nav{display:flex; align-items:center; justify-content:space-between; gap:20px}
  .brand{display:flex; align-items:center; gap:10px; font-family:"Unbounded"; font-weight:700; font-size:1.05rem; text-decoration:none; color:var(--ink)}
  .brand .dot{width:9px;height:9px;border-radius:50%; background:var(--gold); box-shadow:0 0 12px var(--gold)}
  .navlinks{display:flex; gap:28px; list-style:none; margin:0; padding:0}
  .navlinks a{text-decoration:none; font-size:.85rem; color:var(--ink-dim); border-bottom:1px solid transparent; padding-bottom:3px; transition:.2s}
  .navlinks a:hover{color:var(--ink); border-color:var(--gold)}
  .nav-cta{font-size:.82rem; font-weight:600; text-decoration:none; color:#1a0f00; background:var(--gold); padding:10px 20px; border-radius:999px; transition:.2s}
  .nav-cta:hover{background:#ffca85}

  /* ---------- hero / black hole ---------- */
  .hero{position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden}
  #holeCanvas{position:absolute; inset:0; width:100%; height:100%; z-index:0}
  .hero-copy{position:relative; z-index:3; padding-top:70px; pointer-events:none}
  .hero-copy *{pointer-events:auto}
  .hero h1{font-size:clamp(2.6rem,7vw,5rem); line-height:1.02; text-shadow:0 0 40px rgba(0,0,0,.8)}
  .hero-sub{margin:22px auto 0; text-shadow:0 0 30px rgba(0,0,0,.9)}
  .hero-cta{margin-top:34px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
  .btn{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; font-weight:600; text-decoration:none; padding:14px 24px; border-radius:999px; transition:.2s}
  .btn-primary{background:var(--gold); color:#1a0f00}
  .btn-primary:hover{background:#ffca85; transform:translateY(-1px)}
  .btn-ghost{border:1px solid var(--line); color:var(--ink); backdrop-filter:blur(4px)}
  .btn-ghost:hover{border-color:var(--gold); color:var(--gold)}
  .scroll-hint{position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:3; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-dim); display:flex; flex-direction:column; align-items:center; gap:8px}
  .scroll-hint span{width:1px; height:26px; background:linear-gradient(var(--ink-dim), transparent); animation:hint 1.8s ease-in-out infinite}
  @keyframes hint{0%,100%{opacity:.2} 50%{opacity:1}}

  /* ---------- sections ---------- */
  .section{padding:110px 0; position:relative; z-index:2; background:var(--bg)}
  .section-head{max-width:640px; margin-bottom:52px}

  .feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden}
  .fcard{background:var(--panel); padding:34px 28px}
  .fcard .num{font-family:"Unbounded"; font-size:.78rem; color:var(--violet); margin-bottom:16px}
  .fcard p{margin-top:12px; color:var(--ink-dim); font-size:.92rem}

  .cta-band{padding:120px 0; text-align:center; border-top:1px solid var(--line)}
  .cta-band h2{max-width:16ch; margin-inline:auto}
  .cta-band p{margin-top:16px; color:var(--ink-dim)}
  .cta-band .hero-cta{margin-top:32px}

  footer{padding:34px 0; border-top:1px solid var(--line); background:var(--bg)}
  .footer-row{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-dim)}
  .footer-row a{text-decoration:none; color:var(--ink-dim)}
  .footer-row a:hover{color:var(--gold)}

  .reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
  .reveal.visible{opacity:1; transform:none}

  @media (max-width:860px){
    .feature-grid{grid-template-columns:1fr}
    .navlinks{display:none}
  }