/* Neel Studio: deep space black, violet, teal and coral. Unbounded for headings, Outfit for text.
   Change the colours and fonts here; base.css reads these variables. */
:root {
  --bg: #07070C;
  --surface: #11111C;
  --soft: #191928;
  --ink: #F4F4F8;
  --muted: #A3A3BD;
  --line: #24243A;
  --line-strong: #383856;
  --brand: #8B6CFF;
  --brand-hover: #A18BFF;
  --brand-ink: #07070C;
  --brand-text: #A792FF;
  --teal: #00E5C7;
  --coral: #FF6B6B;
  --eyebrow: #00E5C7;
  --ok: #00E5C7;
  --head: "Unbounded", system-ui, sans-serif;
  --body: "Outfit", system-ui, sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --btn-radius: 999px;
  --wrap: 1220px;
  --gap: 24px;
  --menu-bg: #07070C;
  --input-bg: #11111C;
  --est-bg: linear-gradient(135deg, #2A1D7A, #0B3D38);
  --est-ink: #F4F4F8;
  color-scheme: dark;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.02em; }
h1 em, h2 em, .f-statement em { font-style: normal; background: linear-gradient(90deg, var(--brand), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { letter-spacing: .16em; font-weight: 600; }
.btn { font-weight: 600; }
.btn-primary { background: linear-gradient(90deg, var(--brand), #6E8BFF); }
.btn-ghost { border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.est-out { background: var(--est-bg); }

/* header */
.header { background: rgba(7,7,12,.7); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-cube { width: 22px; height: 22px; background: linear-gradient(135deg, var(--brand), var(--teal)); transform: rotate(45deg); border-radius: 5px; animation: spin 8s linear infinite; }
@keyframes spin { to { transform: rotate(405deg); } }
.logo b { font: 600 1.05rem var(--head); }
.logo b span { color: var(--muted); }
.nav a { color: var(--muted); font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"] { background: var(--soft); border-radius: 999px; }

/* hero */
.hero { position: relative; min-height: min(92vh, 820px); display: grid; align-items: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(40% 40% at 70% 40%, rgba(139,108,255,.32), transparent 70%), radial-gradient(30% 30% at 85% 75%, rgba(0,229,199,.18), transparent 70%); pointer-events: none; }
.orb { position: absolute; top: 0; right: 0; width: min(46vw, 620px); height: 100%; }
@media (max-width: 1100px) { .orb { width: 52vw; opacity: .7; } }
@media (max-width: 860px) { .orb { width: 100%; height: 56%; top: auto; bottom: 0; opacity: .5; } }
.hero-text { position: relative; z-index: 1; padding-block: 80px; }
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 5.2rem); line-height: 1.02; margin: 18px 0 22px; max-width: 12ch; }
.hero .lede { max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.marquee { overflow: hidden; border-block: 1px solid var(--line); background: var(--surface); }
.mq-track { display: flex; gap: 56px; width: max-content; padding-block: 20px; animation: marquee 28s linear infinite; }
.mq-track span { font: 600 1.05rem var(--head); color: var(--muted); white-space: nowrap; }
.mq-track span::before { content: "✦"; margin-right: 56px; color: var(--brand); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* tilting cards */
.w-card { perspective: 900px; }
.w-cover { border-color: var(--line-strong); transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .25s; }
.w-card:hover .w-cover { box-shadow: 0 30px 60px -30px rgba(139,108,255,.6); }
.w-card:hover h3 { color: var(--teal); }
.w-tags span { background: var(--soft); border-color: var(--line-strong); }

/* lab */
.lab { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 900px) { .lab { grid-template-columns: minmax(0, 1fr); } }
.lab-stage { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: radial-gradient(60% 60% at 50% 45%, #1B1530, #07070C); border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.lab-stage canvas { width: 100%; height: 100%; cursor: grab; }
.lab-stage canvas:active { cursor: grabbing; }
.lab-fps { position: absolute; right: 14px; bottom: 10px; font: 500 .75rem var(--head); color: var(--muted); }
.lab-ctl { display: grid; gap: 20px; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line-strong); font-weight: 500; }
.seg input:checked + span { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.range { width: 100%; accent-color: var(--brand); height: 28px; }
.ease { display: grid; gap: 14px; justify-items: start; }
.ease-row { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; }
@media (max-width: 640px) { .ease-row { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.ease-track { position: relative; height: 40px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); }
.ease-track i { position: absolute; top: 5px; left: 5px; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--teal)); transition: left 1.4s; }
.ease.is-on .ease-track i { left: calc(100% - 33px); }

/* inner pages */
.page-head { border-bottom: 1px solid var(--line); margin-bottom: clamp(28px, 4vw, 48px); }
.page-head h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
.cs-results dt { background: linear-gradient(90deg, var(--brand), var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.process-band { background: var(--surface); border-block: 1px solid var(--line); }
.steps li { border-top-color: var(--teal); }
.clients li { font-family: var(--head); font-weight: 500; font-size: .85rem; }

/* CTA + footer */
.cta-band { padding-block: clamp(64px, 9vw, 120px); text-align: center; background: radial-gradient(50% 80% at 50% 100%, rgba(139,108,255,.3), transparent 70%); border-top: 1px solid var(--line); }
.cta-band h2 { font-size: clamp(2rem, 5vw, 3.6rem); max-width: 18ch; margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.footer { border-top: 1px solid var(--line); color: var(--muted); }
.f-statement { font: 700 clamp(2.6rem, 9vw, 7rem)/1 var(--head); color: var(--ink); margin-bottom: 48px; letter-spacing: -.04em; }
.footer .logo b { color: var(--ink); }
.footer h2 { color: var(--ink); }
.f-about { margin-top: 12px; max-width: 34ch; }
.footer .credit a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .mq-track, .logo-cube { animation: none; } }

@media (max-width: 400px) { .logo b span { display: none; } }