*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',sans-serif;
  background:var(--ink);color:var(--chalk);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
.display{font-family:'Bricolage Grotesque',sans-serif}

/* ── Footer links (hover adapts to surface via --chalk) ── */
.ft-link:hover{color:var(--chalk)}

/* ── Grain overlay ── */
body::before{
  content:'';position:fixed;inset:0;z-index:1000;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity:.028;mix-blend-mode:overlay;
}

/* ── Double-bezel card ── */
.bezel{
  background:var(--border);
  padding:2px;border-radius:1.75rem;
}
.bezel-inner{
  background:var(--ink2);
  border-radius:calc(1.75rem - 2px);
  box-shadow:inset 0 1px 1px rgba(244,246,240,.06);
  overflow:hidden;
}
.bezel-lg{border-radius:2.5rem}
.bezel-lg .bezel-inner{border-radius:calc(2.5rem - 2px)}

/* ── Button in button ── */
.btn-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
  padding:.75rem .75rem .75rem 1.375rem;border-radius:9999px;
  transition:all .6s cubic-bezier(0.32,0.72,0,1);
  position:relative;overflow:hidden;cursor:pointer;text-decoration:none;
}
.btn-pill:active{transform:scale(.97)}
.btn-icon{
  width:2rem;height:2rem;border-radius:9999px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:transform .6s cubic-bezier(0.32,0.72,0,1);
}
.btn-pill:hover .btn-icon{transform:translate(2px,-1px) scale(1.08)}

/* ── Reveal ── */
.reveal{
  opacity:0;
  transform:translateY(20px);
  filter:blur(4px);
  transition:opacity .85s cubic-bezier(0.32,0.72,0,1),
              transform .85s cubic-bezier(0.32,0.72,0,1),
              filter .85s cubic-bezier(0.32,0.72,0,1);
}
.reveal.on{opacity:1;transform:none;filter:none}
.d1{transition-delay:.08s}
.d2{transition-delay:.16s}
.d3{transition-delay:.24s}
.d4{transition-delay:.32s}
.d5{transition-delay:.40s}

/* ── Spotlight card (JS driven) ── */
.spotlight{position:relative;overflow:hidden}
.spotlight::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(200,241,53,.12), transparent 60%);
  opacity:0;transition:opacity .4s ease;
}
.spotlight:hover::before{opacity:1}

/* ── Marquee ── */
.marquee{overflow:hidden}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee__track{
  display:flex;width:max-content;gap:0;
  animation:marquee 28s linear infinite;
}
.marquee__track:hover{animation-play-state:paused}

/* ── Count up ── */
.tabnum{font-variant-numeric:tabular-nums}

/* ── Ambient orbs ── */
.orb{position:absolute;border-radius:9999px;pointer-events:none;filter:blur(80px)}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;filter:none;transition:none}
  .marquee__track{animation:none}
  .btn-pill,.btn-icon{transition:none}
}