/* Visual refresh: brand wordmark, hero, and a richer page background. Loaded last; colours via theme tokens. */
:root{--aur1:#ff8f3f;--aur2:#8b5cf6;--aur3:#22c3b5;--gl:rgba(255,255,255,.035);--gl2:rgba(255,255,255,.06);--dot:rgba(255,255,255,.10)}
:root[data-theme="light"]{--aur1:#ff9a52;--aur2:#a78bfa;--aur3:#2dd4bf;--gl:rgba(70,45,20,.05);--gl2:rgba(70,45,20,.08);--dot:rgba(70,45,20,.16)}
/* background: deep base + soft aurora light; a fine engineering grid (minor lines, major lines, dots at crossings)
   that fades out from the top, and a whisper of grain so gradients don't band */
body{background:
  radial-gradient(1000px 560px at 88% -8%,color-mix(in srgb,var(--aur1) 22%,transparent),transparent 64%),
  radial-gradient(820px 560px at -8% 14%,color-mix(in srgb,var(--aur2) 15%,transparent),transparent 62%),
  radial-gradient(900px 620px at 55% 112%,color-mix(in srgb,var(--aur3) 10%,transparent),transparent 64%),
  linear-gradient(180deg,color-mix(in srgb,var(--bg) 92%,#000) 0%,var(--bg) 40%),
  var(--bg);background-attachment:fixed}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(circle at 1px 1px,var(--dot) 1px,transparent 1.6px),
    linear-gradient(var(--gl2) 1px,transparent 1px),linear-gradient(90deg,var(--gl2) 1px,transparent 1px),
    linear-gradient(var(--gl) 1px,transparent 1px),linear-gradient(90deg,var(--gl) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,96px 96px,24px 24px,24px 24px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 25%,rgba(0,0,0,.35) 60%,transparent 90%);
          mask-image:radial-gradient(ellipse 85% 70% at 50% 0%,#000 25%,rgba(0,0,0,.35) 60%,transparent 90%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-transparency:reduce){body::before,body::after{display:none}}
/* brand: solid "DSA", warm gradient "Visual", quiet slash */
.brand{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:var(--ink)!important;text-transform:none!important;letter-spacing:-.02em!important}
.brand .b-txt{display:inline-flex;align-items:baseline;gap:.22em;font:800 1em/1 var(--display)}
.brand .b-dsa{font-weight:800;color:var(--ink)}
.brand .b-sl{font-style:normal;font-weight:400;color:var(--muted);opacity:.7;transform:translateY(-.02em)}
.brand .b-vis{font-weight:800;background:linear-gradient(95deg,var(--b2),var(--b1) 55%,var(--b3));-webkit-background-clip:text;background-clip:text;color:transparent}
header.top>.brand{font-size:23px}
header.top>.brand img{filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--b1) 35%,transparent))}
/* hero */
.hero2{align-items:center}
.hero2 h1{letter-spacing:-.03em}
.hero2 h1 em{background:linear-gradient(95deg,var(--b2),var(--b1) 50%,var(--b3));-webkit-background-clip:text;background-clip:text}
.hero-copy>.eyebrow{border:1px solid color-mix(in srgb,var(--b1) 35%,transparent);border-radius:999px;clip-path:none;padding:5px 12px}
.hero2 .cta{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
#cta-start{max-width:100%}
#cta-start.cont{display:grid;gap:2px;text-align:left;text-transform:none;letter-spacing:0;padding-block:10px;max-width:min(440px,100%)}
#cta-start.cont small{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:.75}
#cta-start.cont span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.demo{position:relative;border-radius:18px;box-shadow:0 30px 80px -40px color-mix(in srgb,var(--cat) 80%,transparent),0 0 0 1px color-mix(in srgb,var(--cat) 30%,transparent)}
.demo::after{content:"";position:absolute;inset:-40px;z-index:-1;border-radius:40px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--cat) 22%,transparent),transparent)}
.hero2 .stats{display:flex;flex-wrap:wrap;gap:8px 18px}