/* =====================================================================
   SceneCraft — design system
   ---------------------------------------------------------------------
   Dark, technical, restrained. Built around a 4px spacing scale and a
   single accent hue, so the page reads like 3D software rather than a
   marketing template.

   Contents
     1  Tokens
     2  Reset & base
     3  Layout primitives
     4  Typography
     5  Buttons
     6  Forms & filters
     7  Cards
     8  Navigation
     9  Hero
    10  Sections
    11  Function library
    12  Function detail (modal)
    13  Tutorials
    14  Video component
    15  Showcase
    16  Compatibility / pricing / docs / FAQ / support
    17  Footer
    18  Utilities & motion
    19  Responsive
   ===================================================================== */

/* ─── 1  Tokens ──────────────────────────────────────────────────── */

:root {
  /* Surfaces — cool near-black, blue-shifted like a dark viewport */
  --bg:            #0b0e14;
  --bg-1:          #0e1219;
  --bg-2:          #121722;
  --bg-3:          #171d2a;
  --bg-4:          #1d2534;

  /* Hairlines */
  --line:          rgba(255, 255, 255, .07);
  --line-2:        rgba(255, 255, 255, .12);
  --line-3:        rgba(255, 255, 255, .18);

  /* Text */
  --text:          #e8edf6;
  --text-2:        #a8b3c6;
  --text-3:        #6d7889;
  --text-4:        #4a5364;

  /* Accent — one hue, used sparingly */
  --accent:        #4d8dff;
  --accent-2:      #7aa9ff;
  --accent-dim:    rgba(77, 141, 255, .12);
  --accent-line:   rgba(77, 141, 255, .32);

  /* Secondary, for category coding only */
  --phys:          #38bdf8;
  --cam:           #a78bfa;
  --eff:           #f0a35e;
  --scn:           #34d399;
  --wf:            #94a3b8;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px;

  /* Radii — small; this is a technical tool, not a toy */
  --r1: 4px; --r2: 6px; --r3: 10px; --r4: 14px; --r5: 20px;

  /* Elevation */
  --sh-1: 0 1px 2px rgba(0,0,0,.4);
  --sh-2: 0 4px 16px rgba(0,0,0,.35);
  --sh-3: 0 12px 40px rgba(0,0,0,.45);
  --sh-4: 0 24px 70px rgba(0,0,0,.55);

  /* Type */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
          Consolas, monospace;

  --wrap: 1200px;
  --wrap-wide: 1440px;
  --nav-h: 62px;

  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur: .22s;
}

/* ─── 2  Reset & base ────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, video, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-dim); color: var(--text); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r1);
}

/* Ambient background wash. Fixed, cheap, GPU-friendly. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 78% -8%,
      rgba(77,141,255,.10), transparent 62%),
    radial-gradient(760px 520px at 8% 4%,
      rgba(167,139,250,.07), transparent 60%);
}

/* ─── 3  Layout primitives ──────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s5);
}
.wrap--wide { max-width: var(--wrap-wide); }

.section {
  position: relative;
  z-index: 1;
  padding: var(--s9) 0;
  border-top: 1px solid var(--line);
}
.section--tight { padding: var(--s8) 0; }
.section--alt { background: var(--bg-1); }

.section__head { max-width: 760px; margin-bottom: var(--s7); }
.section__head.is-center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s3);
}
.eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--accent-line);
}

.grid { display: grid; gap: var(--s5); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ─── 4  Typography ─────────────────────────────────────────────── */

h1, h2, h3, h4, h5 {
  margin: 0 0 var(--s3);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.022em;
}

h1 { font-size: clamp(2.5rem, 6.5vw, 4.4rem); font-weight: 700; letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.6rem); letter-spacing: -.028em; }
h3 { font-size: 1.22rem; }
h4 { font-size: 1.02rem; }

p { margin: 0 0 var(--s4); color: var(--text-2); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  line-height: 1.7;
  color: var(--text-2);
}

.muted { color: var(--text-3); }
.mono {
  font-family: var(--mono);
  font-size: .82em;
  letter-spacing: -.01em;
}

code, kbd {
  font-family: var(--mono);
  font-size: .86em;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: .12em .42em;
  color: var(--text);
}

kbd {
  display: inline-block;
  padding: .18em .5em;
  font-size: .78em;
  background: var(--bg-4);
  border-bottom-width: 2px;
  border-radius: var(--r1);
}

/* ─── 5  Buttons ────────────────────────────────────────────────── */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  --btn-bd: var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 0 var(--s5);
  height: 44px;
  font-size: .93rem;
  font-weight: 550;
  letter-spacing: -.01em;
  white-space: nowrap;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  border-radius: var(--r2);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.btn:hover { border-color: var(--line-3); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled] { opacity: .4; pointer-events: none; }

.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: #04070d;
  --btn-bd: var(--accent);
  font-weight: 600;
}
.btn--primary:hover { --btn-bg: var(--accent-2); --btn-bd: var(--accent-2); }

.btn--ghost { --btn-bg: var(--bg-2); --btn-bd: var(--line-2); }
.btn--ghost:hover { --btn-bg: var(--bg-3); }

.btn--lg { height: 52px; padding: 0 var(--s6); font-size: 1rem; }
.btn--sm { height: 34px; padding: 0 var(--s3); font-size: .84rem; }
.btn--block { width: 100%; }

.btn__arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ─── 6  Forms & filters ────────────────────────────────────────── */

.search {
  position: relative;
  display: flex;
  align-items: center;
}
.search__icon {
  position: absolute;
  left: 14px;
  width: 16px; height: 16px;
  color: var(--text-4);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 46px;
  padding: 0 40px 0 40px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  color: var(--text);
  font-size: .95rem;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.search input::placeholder { color: var(--text-4); }
.search input:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--bg-3);
}
.search__clear {
  position: absolute;
  right: 8px;
  width: 28px; height: 28px;
  display: none;
  align-items: center; justify-content: center;
  background: none; border: 0;
  color: var(--text-3);
  border-radius: var(--r1);
  cursor: pointer;
}
.search.has-value .search__clear { display: flex; }
.search__clear:hover { color: var(--text); background: var(--bg-4); }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.filters--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: var(--s2);
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.chip {
  padding: 7px 14px;
  font-size: .84rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 100px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-2); }
.chip[aria-pressed="true"] {
  color: var(--text);
  background: var(--accent-dim);
  border-color: var(--accent-line);
}

.count {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--text-4);
}

/* ─── 7  Cards ──────────────────────────────────────────────────── */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.card:hover {
  background: var(--bg-3);
  border-color: var(--line-2);
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
}

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-3);
  overflow: hidden;
}
.card__body { padding: var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card__title { font-size: 1rem; margin: 0; font-weight: 600; }
.card__text { font-size: .88rem; color: var(--text-3); margin: 0; flex: 1; }
.card__foot {
  margin-top: auto;
  padding-top: var(--s3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--bg-4);
  border: 1px solid var(--line);
  border-radius: 100px;
  white-space: nowrap;
}
.tag--accent { color: var(--accent-2); background: var(--accent-dim); border-color: var(--accent-line); }

/* Category colour coding */
.tag[data-cat="animation"] { color: var(--accent-2); border-color: var(--accent-line); }
.tag[data-cat="physics"]   { color: var(--phys);     border-color: rgba(56,189,248,.3); }
.tag[data-cat="camera"]    { color: var(--cam);      border-color: rgba(167,139,250,.3); }
.tag[data-cat="effects"]   { color: var(--eff);      border-color: rgba(240,163,94,.3); }
.tag[data-cat="scene"]     { color: var(--scn);      border-color: rgba(52,211,153,.3); }
.tag[data-cat="workflow"]  { color: var(--wf);       border-color: rgba(148,163,184,.3); }

/* Clickable card */
.card--link { cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; }
.card--link:hover { border-color: var(--accent-line); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .84rem;
  font-weight: 550;
  color: var(--accent-2);
}
.link-arrow svg { transition: transform var(--dur) var(--ease); }
.card:hover .link-arrow svg,
a:hover .link-arrow svg { transform: translateX(3px); }

/* Media placeholder — any missing image renders this */
.media-ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s4);
  text-align: center;
  background:
    repeating-linear-gradient(135deg,
      var(--bg-3) 0 10px, var(--bg-2) 10px 20px);
  color: var(--text-4);
}
.media-ph__icon { width: 26px; height: 26px; opacity: .6; }
.media-ph__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.media-ph__note { font-size: .72rem; color: var(--text-4); max-width: 30ch; }

/* ─── 8  Navigation ─────────────────────────────────────────────── */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(11, 14, 20, .72);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
.nav.is-stuck {
  background: rgba(11, 14, 20, .92);
  border-bottom-color: var(--line);
}

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-weight: 650;
  font-size: 1.04rem;
  letter-spacing: -.028em;
  flex-shrink: 0;
}
.nav__mark {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), #2f6fd0);
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.nav__mark svg { width: 15px; height: 15px; color: #04070d; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s1);
  margin-left: auto;
}
.nav__link {
  padding: 7px 11px;
  font-size: .88rem;
  font-weight: 500;
  color: var(--text-3);
  border-radius: var(--r2);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav__link:hover { color: var(--text); background: var(--bg-2); }
.nav__link.is-active { color: var(--text); }

.nav__cta { margin-left: var(--s3); }

.nav__burger {
  display: none;
  margin-left: auto;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  color: var(--text);
  cursor: pointer;
}
.nav__burger span {
  display: block;
  position: relative;
  width: 16px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.nav__burger span::before,
.nav__burger span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px; height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--dur) var(--ease);
}
.nav__burger span::before { top: -5px; }
.nav__burger span::after  { top: 5px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }

.nav__mobile {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 99;
  padding: var(--s4) var(--s5) var(--s6);
  background: var(--bg-1);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-3);
  display: none;
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
}
.nav__mobile.is-open { display: block; }
.nav__mobile a {
  display: block;
  padding: 13px 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
}
.nav__mobile a:last-of-type { border-bottom: 0; }
.nav__mobile .btn { margin-top: var(--s4); width: 100%; }

/* ─── 9  Hero ───────────────────────────────────────────────────── */

.hero {
  position: relative;
  z-index: 1;
  padding: calc(var(--nav-h) + var(--s9)) 0 var(--s9);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--s8);
  align-items: center;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 5px 12px 5px 6px;
  margin-bottom: var(--s5);
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 100px;
}
.hero__badge b {
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--accent-2);
  background: var(--accent-dim);
  border-radius: 100px;
}

.hero h1 {
  margin-bottom: var(--s4);
  background: linear-gradient(170deg, #ffffff 20%, #9fb4d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 500;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: var(--s4);
}
.hero__body { max-width: 52ch; margin-bottom: var(--s6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s7); }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s7);
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
}
.hero__stat b {
  display: block;
  font-size: 1.65rem;
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.hero__stat span {
  font-size: .8rem;
  color: var(--text-3);
}

.hero__media {
  position: relative;
  border-radius: var(--r4);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-4);
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--line);
  pointer-events: none;
}

/* ─── 10  Sections ──────────────────────────────────────────────── */

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s5);
  padding: var(--s6) 0;
}
.stat-row > div {
  padding-left: var(--s4);
  border-left: 1px solid var(--line);
}
.stat-row b {
  display: block;
  font-size: 1.9rem;
  font-weight: 650;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.stat-row span { font-size: .84rem; color: var(--text-3); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--s8);
  align-items: center;
}
.split--flip > *:first-child { order: 2; }

.bullets { list-style: none; padding: 0; margin: var(--s5) 0 0; display: grid; gap: var(--s4); }
.bullets li { display: flex; gap: var(--s3); }
.bullets svg { flex-shrink: 0; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }
.bullets b { display: block; color: var(--text); font-weight: 550; margin-bottom: 2px; }
.bullets span { font-size: .9rem; color: var(--text-3); }

.frame {
  position: relative;
  border-radius: var(--r4);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  box-shadow: var(--sh-3);
}

/* Feature card */
.feature__top {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.icon-box {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-radius: var(--r2);
  color: var(--accent-2);
}
.icon-box svg { width: 18px; height: 18px; }

/* Integration points */
.point {
  display: flex;
  gap: var(--s4);
  padding: var(--s4);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  transition: border-color var(--dur) var(--ease);
}
.point:hover { border-color: var(--line-2); }
.point h4 { margin: 0 0 3px; font-size: .96rem; }
.point p { font-size: .86rem; color: var(--text-3); margin: 0; }
.point .icon-box { width: 32px; height: 32px; }
.point .icon-box svg { width: 15px; height: 15px; }

/* Workflow steps */
.flow { display: grid; gap: 0; counter-reset: flow; }
.flow__item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: var(--s5);
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
}
.flow__item:last-child { border-bottom: 1px solid var(--line); }
.flow__n {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -.03em;
  color: var(--text-4);
  line-height: 1;
}
.flow__item h3 { margin: 0 0 var(--s2); font-size: 1.05rem; }
.flow__item p { margin: 0; font-size: .92rem; }

/* ─── 11  Function library ──────────────────────────────────────── */

.lib { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--s6); align-items: start; }

.lib__side {
  position: sticky;
  top: calc(var(--nav-h) + var(--s5));
  display: grid;
  gap: var(--s5);
}
.lib__sideHead {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: var(--s3);
}
.lib__cats { display: grid; gap: 2px; }
.lib__cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding: 9px 12px;
  font-size: .88rem;
  font-weight: 500;
  text-align: left;
  color: var(--text-2);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.lib__cat:hover { color: var(--text); background: var(--bg-2); }
.lib__cat[aria-pressed="true"] {
  color: var(--text);
  background: var(--accent-dim);
  border-color: var(--accent-line);
}
.lib__cat span {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--text-4);
}
.lib__cat[aria-pressed="true"] span { color: var(--accent-2); }

.fn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: var(--s4);
}

.fn {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s4);
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: all var(--dur) var(--ease);
}
.fn:hover {
  background: var(--bg-3);
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--sh-2);
}
.fn__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}
.fn__name { font-size: .97rem; font-weight: 600; margin: 0; letter-spacing: -.015em; }
.fn__desc {
  font-size: .84rem;
  color: var(--text-3);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}
.fn__foot {
  margin-top: var(--s2);
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--text-4);
}
.fn__params { margin-left: auto; }

.is-hidden { display: none !important; }

.empty {
  padding: var(--s8) var(--s5);
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r3);
}
.empty b { display: block; margin-bottom: var(--s2); }
.empty p { margin: 0; font-size: .9rem; }

/* ─── 12  Function detail (modal) ───────────────────────────────── */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--s6) var(--s4);
  overflow-y: auto;
  background: rgba(5, 7, 11, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.modal.is-open { display: flex; }

.modal__panel {
  position: relative;
  width: 100%;
  max-width: 860px;
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--r4);
  box-shadow: var(--sh-4);
  overflow: hidden;
  animation: modalIn .26s var(--ease);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.modal__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: var(--s5) var(--s6);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}
.modal__headText { flex: 1; min-width: 0; }
.modal__head h2 { font-size: 1.5rem; margin: var(--s2) 0 0; }
.modal__close {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}
.modal__close:hover { color: var(--text); background: var(--bg-4); }

.modal__body { padding: var(--s6); }

.dsection { margin-bottom: var(--s7); }
.dsection:last-child { margin-bottom: 0; }
.dsection__title {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
}
.dsection__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: var(--s3); }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: var(--s3);
  align-items: start;
  font-size: .92rem;
  color: var(--text-2);
}
.steps li::before {
  content: counter(s);
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 600;
  color: var(--accent-2);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
}

.tips { display: grid; gap: var(--s3); }
.tip {
  display: flex;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  font-size: .89rem;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r1);
}
.tip svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* Table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r3); }
table { width: 100%; border-collapse: collapse; font-size: .87rem; min-width: 520px; }
thead th {
  position: sticky; top: 0;
  padding: 11px var(--s4);
  text-align: left;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-4);
  background: var(--bg-2);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
tbody td {
  padding: 11px var(--s4);
  color: var(--text-2);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--bg-2); }
td .mono { color: var(--accent-2); }
.td-type { font-family: var(--mono); font-size: .74rem; color: var(--text-4); white-space: nowrap; }

.todo {
  font-family: var(--mono);
  font-size: .78rem;
  color: var(--eff);
  background: rgba(240,163,94,.08);
  border: 1px dashed rgba(240,163,94,.28);
  border-radius: var(--r1);
  padding: 1px 6px;
}

.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s3); }

/* "See it move" — one clip per function the tutorial uses. */
.tut-clips { display: grid; gap: var(--s4); }
.tut-clip {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  background: var(--bg-1);
}
.tut-clip img,
.tut-clip video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r1);
  background: var(--bg-3);
  display: block;
}
.tut-clip__body { display: grid; gap: var(--s2); align-content: start; }
.tut-clip__body b { font-size: .95rem; }
.tut-clip__body p {
  margin: 0;
  font-size: .84rem;
  color: var(--text-3);
  line-height: 1.6;
}
.tut-clip__body .rel { justify-self: start; }

@media (max-width: 700px) {
  .tut-clip { grid-template-columns: 1fr; }
}
.rel {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: 11px var(--s3);
  font-size: .87rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
}
.rel:hover { background: var(--bg-3); border-color: var(--accent-line); color: var(--text); }
.rel svg { width: 14px; height: 14px; color: var(--text-4); flex-shrink: 0; }

/* ─── 13  Tutorials ─────────────────────────────────────────────── */

.tut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s5); }

.tut__thumb { position: relative; aspect-ratio: 16 / 9; background: var(--bg-3); }

/* A tutorial's own clip, layered over the thumbnail and revealed on
   hover. Kept hidden and unloaded-by-default visually, but the <img> is
   lazy so it costs nothing until the card scrolls into view. */
.tut__clip {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.card:hover .tut__clip,
.card:focus-visible .tut__clip { opacity: 1; }

/* Touch devices have no hover, so the clip must be visible rather than
   stuck behind a state that can never be reached. */
@media (hover: none) {
  .tut__clip { opacity: 1; }
}
.tut__dur {
  position: absolute;
  right: 8px; bottom: 8px;
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--text);
  background: rgba(0,0,0,.78);
  border-radius: var(--r1);
  backdrop-filter: blur(4px);
}
.tut__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.card:hover .tut__play { opacity: 1; }
.tut__play span {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  backdrop-filter: blur(6px);
}
.tut__play svg { width: 18px; height: 18px; margin-left: 2px; }

.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* Learning path */
.path { display: grid; gap: 0; counter-reset: path; }
.path__item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s5);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  margin-bottom: var(--s3);
  transition: all var(--dur) var(--ease);
}
.path__item:hover { background: var(--bg-3); border-color: var(--line-2); }
.path__n {
  counter-increment: path;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 600;
  color: var(--accent-2);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  border-radius: 50%;
}
.path__n::before { content: counter(path); }
.path__title { font-weight: 600; font-size: .98rem; }
.path__body { font-size: .84rem; color: var(--text-3); margin: 0; }

/* ─── 14  Video component ───────────────────────────────────────── */

.sc-video {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: var(--bg-3);
  border-radius: var(--r3);
  overflow: hidden;
}
.sc-video__frame {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.sc-video__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  background: var(--bg-3);
  cursor: pointer;
  overflow: hidden;
}
.sc-video__img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.sc-video__scrim {
  position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.25), rgba(0,0,0,.6));
}
.sc-video__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 62px; height: 62px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.sc-video__poster:hover .sc-video__play { transform: translate(-50%,-50%) scale(1.07); background: rgba(0,0,0,.7); }
.sc-video__play svg { width: 24px; height: 24px; margin-left: 3px; color: #fff; }

.sc-video__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  padding: var(--s5);
  text-align: center;
  background:
    repeating-linear-gradient(135deg, var(--bg-3) 0 12px, var(--bg-2) 12px 24px);
  border: 1px dashed var(--line-2);
  border-radius: inherit;
}
.sc-video__phFrame {
  display: flex;
  align-items: center;
  gap: var(--s3);
  color: var(--text-3);
}
.sc-video__phIcon { width: 34px; height: 34px; opacity: .5; }
.sc-video__phText { font-size: 1rem; font-weight: 550; }
.sc-video__phMeta { display: grid; gap: 7px; justify-items: center; }
.sc-video__phTag {
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--eff);
  background: rgba(240,163,94,.1);
  border: 1px dashed rgba(240,163,94,.3);
  border-radius: 100px;
}
.sc-video__phId { background: var(--bg-4); color: var(--text-2); }
.sc-video__phHint { font-size: .74rem; color: var(--text-4); max-width: 34ch; }
.sc-video.is-invalid .sc-video__phTag { color: #f87171; background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }

/* ─── 15  Showcase ──────────────────────────────────────────────── */

.show-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.show-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r3);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: all var(--dur) var(--ease);
}
.show-item:nth-child(1) { grid-column: span 2; aspect-ratio: 16 / 9; }
.show-item:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh-3); }
.show-item__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--s6) var(--s4) var(--s4);
  background: linear-gradient(transparent, rgba(5,7,11,.9));
}
.show-item__cap b { display: block; font-size: .95rem; }
.show-item__cap span { font-size: .76rem; color: var(--text-3); }

/* ─── 16  Compatibility / pricing / docs / FAQ / support ────────── */

.kv { display: grid; gap: 0; }
.kv__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s4);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
  font-size: .9rem;
}
.kv__row:last-child { border-bottom: 0; }
.kv__k { color: var(--text-4); font-size: .84rem; }
.kv__v { color: var(--text); }

.versions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.version {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
}
.version svg { width: 13px; height: 13px; color: var(--scn); }

.note {
  display: flex;
  gap: var(--s3);
  padding: var(--s4);
  font-size: .88rem;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--eff);
  border-radius: var(--r1);
}
.note svg { flex-shrink: 0; width: 16px; height: 16px; margin-top: 2px; color: var(--eff); }
.note--ok { border-left-color: var(--scn); }
.note--ok svg { color: var(--scn); }

.price {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--s7) var(--s6);
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r5);
  box-shadow: var(--sh-3);
}
.price::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--accent-line), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.price__name { font-size: 1.05rem; font-weight: 600; margin-bottom: var(--s4); }
.price__amt {
  font-size: 3.4rem;
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: var(--s2);
}
.price__note { font-size: .86rem; color: var(--text-3); margin-bottom: var(--s6); }
.price__inc { text-align: left; margin: 0 0 var(--s6); display: grid; gap: 0; }
.price__inc .kv__row { grid-template-columns: 140px 1fr; padding: 10px 0; font-size: .87rem; }

.docs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.docs-group {
  padding: var(--s5);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r3);
}
.docs-group h3 {
  font-size: .78rem;
  font-family: var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: var(--s4);
}
.docs-list { display: grid; gap: var(--s4); }
.docs-list a, .docs-list span { display: block; }
.docs-list b { font-size: .92rem; font-weight: 550; color: var(--text); display: block; margin-bottom: 2px; }
.docs-list small { font-size: .8rem; color: var(--text-4); }
a.docs-item:hover b { color: var(--accent-2); }

.faq { display: grid; gap: var(--s2); max-width: 860px; }
.faq__item {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq__item[open] { border-color: var(--line-2); background: var(--bg-3); }
.faq__q {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  font-size: .97rem;
  font-weight: 550;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "";
  margin-left: auto;
  width: 9px; height: 9px;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}
.faq__item[open] .faq__q::after { transform: rotate(-135deg) translateY(-2px); }
.faq__a {
  padding: 0 var(--s5) var(--s5);
  font-size: .92rem;
  color: var(--text-2);
  max-width: 70ch;
}

/* ─── 17  Footer ────────────────────────────────────────────────── */

.footer {
  position: relative;
  z-index: 1;
  padding: var(--s8) 0 var(--s6);
  border-top: 1px solid var(--line);
  background: var(--bg-1);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: var(--s7);
  padding-bottom: var(--s7);
  border-bottom: 1px solid var(--line);
}
.footer__blurb { font-size: .88rem; color: var(--text-3); max-width: 34ch; margin-top: var(--s4); }
.footer__col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: var(--s4);
}
.footer__col a {
  display: block;
  padding: 5px 0;
  font-size: .88rem;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.footer__col a:hover { color: var(--text); }
.footer__bot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
  padding-top: var(--s5);
  font-size: .82rem;
  color: var(--text-4);
}
.footer__legal { display: flex; gap: var(--s5); }
.footer__legal a:hover { color: var(--text-2); }

/* ─── 18  Utilities & motion ────────────────────────────────────── */

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -60px; left: var(--s5);
  z-index: 300;
  padding: 10px 16px;
  background: var(--accent);
  color: #04070d;
  font-weight: 600;
  border-radius: 0 0 var(--r2) var(--r2);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0; }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ─── 19  Responsive ────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero__media { order: -1; }
  .split { grid-template-columns: 1fr; gap: var(--s6); }
  .split--flip > *:first-child { order: 0; }
  .lib { grid-template-columns: 1fr; }
  .lib__side { position: static; }
  .lib__cats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); display: grid; }
  .docs-grid, .show-grid { grid-template-columns: repeat(2, 1fr); }
  .show-item:nth-child(1) { grid-column: span 2; }
  .footer__top { grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .section { padding: var(--s8) 0; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  .wrap { padding: 0 var(--s4); }
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .docs-grid, .show-grid { grid-template-columns: 1fr; }
  .show-item:nth-child(1) { grid-column: span 1; aspect-ratio: 4 / 3; }
  .fn-grid { grid-template-columns: 1fr; }
  .tut-grid { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__stats { gap: var(--s5); }
  .stat-row { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .modal { padding: 0; }
  .modal__panel { max-width: none; border-radius: 0; border: 0; min-height: 100dvh; }
  .modal__head { padding: var(--s4); }
  .modal__body { padding: var(--s4); }
  .modal__head h2 { font-size: 1.25rem; }
  .kv__row { grid-template-columns: 1fr; gap: 3px; }
  .price__inc .kv__row { grid-template-columns: 1fr; }
  .path__item { grid-template-columns: 36px 1fr; }
  .path__item > .tag { display: none; }
  .footer__top { grid-template-columns: 1fr; }
  .flow__item { grid-template-columns: 44px 1fr; gap: var(--s4); }
}

@media (max-width: 420px) {
  .hero__stats { gap: var(--s4); }
  .hero__stat b { font-size: 1.35rem; }
  .stat-row { grid-template-columns: 1fr; }
}

@media print {
  .nav, .nav__mobile, .modal, .hero__cta { display: none !important; }
  body { background: #fff; color: #000; }
}


/* =====================================================================
   20  Light theme
   ---------------------------------------------------------------------
   Overrides the token block only. Because every colour in the system is
   driven by those custom properties, this is the whole theme — no
   component rule is duplicated.

   The dark theme is the default in :root. This block is applied via
   [data-theme="light"] on <html>, set before first paint by the inline
   script in index.html so there is no flash of the wrong theme.
   ===================================================================== */

[data-theme="light"] {
  color-scheme: light;

  /* Surfaces — warm-tinted paper rather than blue-black */
  --bg:          #f7f8fa;
  --bg-1:        #ffffff;
  --bg-2:        #ffffff;
  --bg-3:        #f1f3f7;
  --bg-4:        #e7eaf0;

  /* Hairlines need more contrast on light than they do on dark */
  --line:        rgba(16, 24, 40, .10);
  --line-2:      rgba(16, 24, 40, .16);
  --line-3:      rgba(16, 24, 40, .26);

  /* Text */
  --text:        #101828;
  --text-2:      #475467;
  --text-3:      #667085;
  --text-4:      #98a2b3;

  /* The accent has to darken to stay legible as text on white */
  --accent:      #2b6cf6;
  --accent-2:    #1a56db;
  --accent-dim:  rgba(43, 108, 246, .09);
  --accent-line: rgba(43, 108, 246, .34);

  /* Category hues, darkened for contrast on white */
  --phys:        #0e7490;
  --cam:         #6d3fd4;
  --eff:         #b45309;
  --scn:         #047857;
  --wf:          #52606f;

  /* Shadows: low-alpha and tighter, or light mode looks smudged */
  --sh-1: 0 1px 2px rgba(16,24,40,.05);
  --sh-2: 0 2px 8px rgba(16,24,40,.07);
  --sh-3: 0 8px 28px rgba(16,24,40,.10);
  --sh-4: 0 16px 48px rgba(16,24,40,.14);
}

/* ---- component-level adjustments the tokens cannot reach ---- */

/* Ambient wash: nearly invisible on light, so soften it further */
[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(43,108,246,.05), transparent 62%),
    radial-gradient(760px 520px at 8% 4%, rgba(109,63,212,.04), transparent 60%);
}

/* The hero headline gradient runs white -> pale blue on dark; inverted
   here so it stays dark -> deeper blue rather than washing out. */
[data-theme="light"] .hero h1 {
  background: linear-gradient(170deg, #101828 %, #37507a %);
}

/* Navbar sits on a light translucent sheet */
[data-theme="light"] .nav {
  background: rgba(247, 248, 250, .78);
}
[data-theme="light"] .nav.is-stuck {
  background: rgba(247, 248, 250, .94);
}

/* Primary button text must stay dark on the blue fill — unchanged, but
   the hover uses the *lighter* accent-2 in dark mode, which is too pale
   on white. */
[data-theme="light"] .btn--primary:hover {
  --btn-bg: #1a56db;
  --btn-bd: #1a56db;
}

/* Placeholder media hatching reads as noise on light; flatten it */
[data-theme="light"] .media-ph,
[data-theme="light"] .sc-video__ph {
  background: repeating-linear-gradient(135deg, #f1f3f7 0 10px, #f7f8fa 10px 20px);
}

/* The "video placeholder" amber tag needs a darker hue plus a matching
   tint, otherwise it is nearly invisible against white. */
[data-theme="light"] .sc-video__phTag {
  color: #b45309;
  background: rgba(180, 83, 9, .07);
  border-color: rgba(180, 83, 9, .30);
}
[data-theme="light"] .sc-video.is-invalid .sc-video__phTag {
  color: #b42318;
  background: rgba(180, 35, 24, .07);
  border-color: rgba(180, 35, 24, .30);
}

/* Same for the inline TODO marker used across the data files */
[data-theme="light"] .todo {
  color: #b45309;
  background: rgba(180, 83, 9, .07);
  border-color: rgba(180, 83, 9, .30);
}

/* Notes and tips carry an accent left-border; the softer blue reads as
   a muddy grey on white. */
[data-theme="light"] .note {
  border-left-color: #b45309;
}
[data-theme="light"] .note--ok {
  border-left-color: #047857;
}

/* The showcase caption gradient sits on top of imagery in both themes,
   so it stays dark. No override needed — but the inline caption text on
   a very light screenshot still needs the scrim, which it has. */

/* Modal scrim: lighter, so the page behind does not look blacked out */
[data-theme="light"] .modal {
  background: rgba(16, 24, 40, .45);
}

/* Category tag borders were tuned against a dark bg-4; on white the
   30%-alpha hues need to stay visible. */
[data-theme="light"] .tag[data-cat="physics"] { border-color: rgba(14,116,144,.34); }
[data-theme="light"] .tag[data-cat="camera"]  { border-color: rgba(109,63,212,.34); }
[data-theme="light"] .tag[data-cat="effects"] { border-color: rgba(180,83,9,.34); }
[data-theme="light"] .tag[data-cat="scene"]   { border-color: rgba(4,120,87,.34); }
[data-theme="light"] .tag[data-cat="workflow"]{ border-color: rgba(82,96,111,.34); }

/* Focus ring needs more weight on a light background */
[data-theme="light"] :focus-visible {
  outline-color: var(--accent);
}

/* The fatal-error panel is intentionally alarming in both themes */
[data-theme="light"] #scfatal {
  background: #2a0f10 !important;
  color: #ffb4b4 !important;
}

/* ---- Theme toggle button ---- */

.theme-toggle {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r2);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.theme-toggle:hover {
  background: var(--bg-3);
  border-color: var(--line-3);
  color: var(--text);
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-moon { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }

@media (max-width: 900px) {
  /* Keep the toggle visible on mobile, just before the burger */
  .theme-toggle { margin-left: auto; }
  .nav__burger { margin-left: var(--s2); }
}

/* ---- Pagination ---- */

.pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  margin-top: var(--s6);
}
.pager__count {
  font-family: var(--mono);
  font-size: .8rem;
  color: var(--text-4);
}
.pager__more {
  min-width: 210px;
}


/* =====================================================================
   21  Portfolio
   ===================================================================== */

.pf__intro {
  max-width: 68ch;
  margin-bottom: var(--s5);
}

.pf-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s5);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.pf-bar__hint {
  font-size: .84rem;
  color: var(--text-4);
}

.pf-groups { display: grid; gap: var(--s7); }

/* ─── Marketplace listing checklist ──────────────────────────────────
     Rendered from data-portfolio.js `listing` + each item's `checks`.
     Colours use the same semantic tokens as the rest of the sheet so the
     card follows the theme instead of carrying fixed dark values. */
.pf-check {
  margin-bottom: var(--s5);
  padding: var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  background: var(--bg-2);
}
.pf-check.is-ready { border-color: rgba(52,211,153,.35); }
.pf-check.is-blocked { border-color: rgba(248,113,113,.4); }

.pf-check__head { margin-bottom: var(--s4); }
.pf-check__head h3 {
  margin: var(--s2) 0 var(--s2);
  font-size: 1.1rem;
}
.pf-check__head p {
  margin: 0;
  font-size: .86rem;
  max-width: 70ch;
}
.pf-check__flag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--text-3);
}
.pf-check.is-ready .pf-check__flag {
  color: #34d399;
  background: rgba(52,211,153,.12);
  border-color: rgba(52,211,153,.3);
}
.pf-check.is-blocked .pf-check__flag {
  color: #f87171;
  background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.32);
}

.pf-check__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s2);
}
.pf-check__row {
  display: grid;
  grid-template-columns: 22px minmax(0, auto) minmax(0, 1fr);
  gap: var(--s3);
  align-items: baseline;
  font-size: .88rem;
}
.pf-check__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  font-size: .72rem;
  font-weight: 700;
}
.pf-check__row.is-ok .pf-check__mark {
  color: #34d399;
  background: rgba(52,211,153,.14);
}
.pf-check__row.is-bad .pf-check__mark {
  color: #f87171;
  background: rgba(248,113,113,.14);
}
.pf-check__detail { color: var(--text-4); font-size: .82rem; }

.pf-check__problems {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: var(--s3) 0 0;
  border-top: 1px dashed var(--line-2);
  display: grid;
  gap: var(--s2);
  font-size: .82rem;
}
.pf-check__problems li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: baseline;
}
.pf-check__problems code { color: var(--text-2); }
.pf-check__problems .is-error span { color: #f87171; }
.pf-check__problems .is-warn span  { color: #f0a35e; }

/* Per-tile pass/fail mark inside the listing category. */
.pf-item__check {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-top: var(--s2);
  font-size: .74rem;
}
.pf-item__check b {
  font-size: .64rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.pf-item__check span { color: var(--text-4); }
.pf-item__check.is-ok   b { color: #34d399; background: rgba(52,211,153,.12); }
.pf-item__check.is-warn b { color: #f0a35e; background: rgba(240,163,94,.12); }
.pf-item__check.is-bad  b { color: #f87171; background: rgba(248,113,113,.12); }

/* A 2:1 listing image is wider than the grid's 4:3 crop, so give the
   listing category its own letterbox rather than cropping the sides. */
.pf-group[data-pf-group="listing"] .pf-item__frame { aspect-ratio: 2 / 1; }

.pf-group__head {
  display: flex;
  align-items: baseline;
  gap: var(--s3);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}
.pf-group__head h3 {
  margin: 0;
  font-size: 1.15rem;
}
.pf-group__blurb {
  font-size: .86rem;
  color: var(--text-4);
}
.pf-group__n {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--text-4);
  padding: 2px 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 100px;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--s4);
}

/* A real item */
.pf-item {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.pf-item:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
}

.pf-item__frame {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-3);
  overflow: hidden;
}
.pf-item__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}
.pf-item:hover .pf-item__frame img { transform: scale(1.03); }

.pf-item__kind {
  position: absolute;
  top: 10px; left: 10px;
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  color: #fff;
}
.pf-item__kind svg { width: 13px; height: 13px; }

.pf-item__body { padding: var(--s3) var(--s4) var(--s4); }
.pf-item__title {
  font-size: .94rem;
  font-weight: 600;
  margin: 0 0 3px;
  letter-spacing: -.012em;
}
.pf-item__note {
  font-size: .82rem;
  color: var(--text-3);
  margin: 0;
}
.pf-item__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: var(--s3);
}
.pf-item__tools span {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-4);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 2px 7px;
}

/* Empty folder: outlines what is still outstanding, and says where to
   put it — so the folder structure doubles as an instruction sheet. */
.pf-empty {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s5);
  border: 1px dashed var(--line-2);
  border-radius: var(--r3);
  background: var(--bg-1);
}
.pf-empty__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: .92rem;
  font-weight: 600;
}
.pf-empty__title svg { width: 15px; height: 15px; color: var(--text-4); }
.pf-empty__path {
  font-family: var(--mono);
  font-size: .76rem;
  color: var(--accent-2);
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--r1);
  padding: 5px 9px;
  align-self: flex-start;
  word-break: break-all;
}
.pf-empty__note { font-size: .84rem; color: var(--text-4); margin: 0; }

/* ---- Lightbox ---- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: none;
  flex-direction: column;
  background: rgba(5, 7, 11, .95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lightbox.is-open { display: flex; }

.lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.lightbox__count {
  font-family: var(--mono);
  font-size: .78rem;
  color: rgba(255,255,255,.55);
}
.lightbox__title {
  font-size: .98rem;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.lightbox__spacer { flex: 1; }

.lightbox__btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r2);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.lightbox__btn:hover { background: rgba(255,255,255,.16); }
.lightbox__btn svg { width: 16px; height: 16px; }

.lightbox__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s4) var(--s6);
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r2);
}
.lightbox__stage video {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--r2);
  background: #000;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.lightbox__nav:hover { background: rgba(0,0,0,.8); }
.lightbox__nav--prev { left: var(--s4); }
.lightbox__nav--next { right: var(--s4); }
.lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__nav[disabled] { opacity: .25; pointer-events: none; }

.lightbox__foot {
  padding: var(--s3) var(--s5) var(--s5);
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.08);
}
.lightbox__note {
  font-size: .88rem;
  color: rgba(255,255,255,.72);
  max-width: 70ch;
  margin: 0 auto var(--s2);
}
.lightbox__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.lightbox__tools span {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 100px;
  padding: 2px 8px;
}

/* The lightbox is deliberately dark in both themes: it sits on top of
   imagery, and a light chrome around a render distorts the read. */

@media (max-width: 720px) {
  .pf-grid { grid-template-columns: 1fr; }
  .lightbox__stage { padding: var(--s3); }
  .lightbox__nav { width: 38px; height: 38px; }
  .lightbox__nav--prev { left: var(--s2); }
  .lightbox__nav--next { right: var(--s2); }
}



/* The portfolio is the page SuperHive reviewers land on, so its heading
   is deliberately larger than every other section title. */
#portfolio h2 {
  font-size: clamp(2.4rem, 5.4vw, 3.6rem);
  letter-spacing: -.035em;
}
#portfolio .section__head { max-width: 820px; }

/* The chevron icon points right; the lightbox's "previous" control needs
   it mirrored. Applied by passing class="flip" in app.js. */
.icon-flip,
.lightbox__nav--prev svg {
  transform: scaleX(-1);
}

/* The media box sits inside the stage so the prev/next controls can be
   siblings of it — the stage is never cleared, only this is. */
.lightbox__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}


/* =====================================================================
   22  Function demos
   ===================================================================== */

.dm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s5);
}

.dm {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r3);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.dm:hover {
  border-color: var(--accent-line);
  transform: translateY(-2px);
  box-shadow: var(--sh-3);
}

.dm__frame { background: var(--bg-3); border-bottom: 1px solid var(--line); }
.dm__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
}
.dm__gif, .dm__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.dm__badge {
  position: absolute;
  top: 10px; right: 10px;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  color: #fff;
  pointer-events: none;
}
.dm__badge svg { width: 11px; height: 11px; opacity: .85; }

/* Missing-clip placeholder. */
.dm__ph {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: var(--s4);
  text-align: center;
  background: repeating-linear-gradient(135deg,
    var(--bg-3) 0 11px, var(--bg-2) 11px 22px);
  border: 0;
}
[data-theme="light"] .dm__ph {
  background: repeating-linear-gradient(135deg, #f1f3f7 0 11px, #f7f8fa 11px 22px);
}
.dm__phIcon { width: 22px; height: 22px; color: var(--text-4); }
.dm__phLabel {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-4);
}
.dm__phFile {
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--accent-2);
  background: var(--bg-1);
  border: 1px solid var(--accent-line);
  border-radius: var(--r1);
  padding: 2px 8px;
  word-break: break-all;
}
.dm__phHint { font-size: .68rem; color: var(--text-4); }

.dm__body {
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  flex: 1;
}
.dm__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}
.dm__title { margin: 0; font-size: 1.02rem; font-weight: 600; }
.dm__blurb {
  margin: 0;
  font-size: .87rem;
  line-height: 1.6;
  color: var(--text-3);
  flex: 1;
}
.dm__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}
.dm__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  font-size: .84rem;
  font-weight: 550;
  color: var(--accent-2);
  background: none;
  border: 0;
  cursor: pointer;
}
.dm__link svg { transition: transform var(--dur) var(--ease); }
.dm__link:hover svg { transform: translateX(3px); }
.dm__count {
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--text-4);
}

@media (max-width: 720px) {
  .dm-grid { grid-template-columns: 1fr; }
}

/* ── Media fallback chain ────────────────────────────────────────────
   media() tries the referenced file, then a same-named .svg sibling
   generated by tools/make_placeholders.py, then a labelled tile. These
   classes mark which one won so each can be sized correctly. */
.card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.media-ph-svg { width: 100%; height: 100%; object-fit: cover; display: block; }


/* =====================================================================
   23  Hero visual fallback
   ---------------------------------------------------------------------
   Replaces the raw "VIDEO PLACEHOLDER / YOUR_VIDEO_ID_HERE" block that
   used to sit above the fold. That string belongs in the tutorial and
   demo lists, where naming the exact file is the whole point. In the
   hero it read as a broken page, so the fallback became a branded panel
   with the instruction kept small and quiet.
   ===================================================================== */

.hero__visual {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  background: var(--bg-2);
  display: grid;
  place-items: center;
}
.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__overlay {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: var(--s5);
}
.hero__mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: var(--s2);
  background: linear-gradient(140deg, var(--accent), #2f6fd0);
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4),
              inset 0 1px 0 rgba(255,255,255,.22);
}
.hero__mark svg { width: 26px; height: 26px; color: #04070d; }
.hero__name {
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.hero__tag {
  font-size: .95rem;
  font-weight: 500;
  color: rgba(255,255,255,.82);
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
.hero__hint {
  margin-top: var(--s3);
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .06em;
  color: rgba(255,255,255,.55);
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 100px;
  backdrop-filter: blur(4px);
}

/* With no artwork at all, keep the mark legible on a plain surface. */
.hero__visual > .hero__overlay:first-child { position: relative; }

/* ═════════════════════════════════════════════════════════════════════
   22  Download page
   ═════════════════════════════════════════════════════════════════════ */

.download {
  display: grid;
  gap: var(--s7);
}
.download .btn--block { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ═════════════════════════════════════════════════════════════════════
   23  Changelog
   ═════════════════════════════════════════════════════════════════════ */

.changelog { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.release {
  padding: var(--s6);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.release:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--sh-2); }
.release__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s4);
}
.release__ver {
  font-family: var(--mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent-2);
}
.release__date {
  font-size: .8rem;
  color: var(--text-4);
}
.release h3 {
  font-size: .95rem;
  color: var(--text-2);
  margin-bottom: var(--s3);
}
.changelog__notes { display: grid; gap: var(--s3); }
.changelog__note {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  font-size: .88rem;
  color: var(--text-2);
  padding: var(--s2) 0;
}
.changelog__note svg { width: 14px; height: 14px; margin-top: 3px; color: var(--scn); flex-shrink: 0; }
.chips { display: flex; gap: var(--s3); flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 550;
  letter-spacing: .08em;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--text-3);
  background: var(--bg-3);
}
.chip--ok {
  border-color: rgba(52,211,153,.35);
  color: var(--scn);
  background: rgba(52,211,153,.1);
}
.chip--muted {
  border-color: var(--line);
  color: var(--text-4);
  background: var(--bg-3);
}
.chip--build {
  border-color: var(--accent-line);
  color: var(--accent-2);
  background: var(--accent-dim);
}

/* ═════════════════════════════════════════════════════════════════════
   24  Glass polish — hero stat counters and feature cards
   ══════════════════════════════════════════════════════════════════════ */

.hero__stat {
  text-align: center;
}
.hero__stat b {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--accent-2);
  margin-bottom: var(--s1);
  background: linear-gradient(170deg, var(--accent-2), #fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hero__stat span {
  font-size: .78rem;
  font-family: var(--mono);
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .1em;
}

.feature-card {
  position: relative;
  padding: var(--s6);
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r4);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature-card:hover {
  border-color: var(--accent-line);
  box-shadow: var(--sh-2);
}
.feature-card__icon {
  width: 40px; height: 40px;
  border-radius: var(--r2);
  background: var(--accent-dim);
  color: var(--accent-2);
  display: grid; place-items: center;
  margin-bottom: var(--s4);
  border: 1px solid var(--accent-line);
}
.feature-card__icon svg { width: 20px; height: 20px; }
.feature-card h3 { font-size: 1.05rem; margin-bottom: var(--s2); }
.feature-card p { font-size: .9rem; color: var(--text-2); line-height: 1.6; }

/* Stats row used in hero */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--s5);
}

/* ═════════════════════════════════════════════════════════════════════
   25  Visual Overhaul — more powerful, professional, cool
   ═════════════════════════════════════════════════════════════════════ */

/* ── 25a  Deeper token layer ── */

:root {
  --bg-deep: #080a0f;
  --glass: rgba(255, 255, 255, .04);
  --glass-border: rgba(255, 255, 255, .09);
  --glow: rgba(77, 141, 255, .25);
  --glow-weak: rgba(77, 141, 255, .08);
  --accent-rgb: 77, 141, 255;
}

body {
  background: var(--bg-deep);
}

/* Ambient animated wash — slow-moving, GPU-friendly */
body::before {
  background:
    radial-gradient(1400px 700px at 80% -10%,
      rgba(var(--accent-rgb), .12), transparent 55%),
    radial-gradient(900px 600px at -10% 0,
      rgba(167, 139, 250, .09), transparent 55%),
    radial-gradient(600px 400px at 110% 110%,
        rgba(52, 211, 153, .07), transparent 50%);
  animation: bg-wash 12s ease-in-out infinite alternate;
}

@keyframes bg-wash {
  0% { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.05) translate(2%, -2%); }
}

/* ── 25b  Glass card utility ── */

.glass {
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-3);
}

.glass:hover {
  border-color: var(--accent-line);
  box-shadow: 0 0 40px var(--glow-weak);
}

.glass--strong {
  background: rgba(18, 24, 38, .7);
  border-color: rgba(255, 255, 255, .14);
}

/* ── 25c  Navigation upgrade ── */

.nav {
  background: rgba(8, 10, 15, .85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-border);
}
.nav__inner { position: relative; z-index: 10; }

.nav__brand span { color: var(--text); }
.nav__mark {
  width: 36px; height: 36px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, var(--accent), var(--cam));
  display: grid; place-items: center;
  box-shadow: 0 0 24px var(--glow);
}
.nav__mark svg { width: 18px; height: 18px; color: #04070d; }

.nav__cta {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.nav__cta::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
}
.nav__cta:hover::before { opacity: 1; }

/* ── 25d  Hero overhaul ── */

.hero {
  padding: calc(var(--nav-h) + var(--s10)) 0 var(--s9);
}
.hero__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--s9);
}
.hero__badge {
  background: rgba(18, 24, 38, .7);
  border: 1px solid var(--glass-border);
  color: var(--text);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
}
.hero__badge b {
  color: var(--accent-2);
  background: rgba(var(--accent-rgb), .15);
  border: 1px solid var(--accent-line);
}

.hero h1 {
  font-size: clamp(3rem, 8vw, 5.5rem);
  letter-spacing: -.04em;
  background: linear-gradient(160deg, #ffffff 0%, #7aa9ff 45%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.5));
}
.hero__sub {
  font-size: clamp(1.25rem, 2.5vw, 1.8rem);
  color: var(--text-2);
  font-weight: 500;
}
.hero__body {
  color: var(--text-2);
  font-size: 1.05rem;
  max-width: 56ch;
}
.hero__cta { gap: var(--s3); margin-bottom: var(--s8); }
.hero__cta .btn--lg { height: 56px; font-size: 1.05rem; padding: 0 var(--s7); }
.hero__cta .btn--ghost {
  --btn-bd: var(--line-3);
  color: var(--text);
}
.hero__cta .btn--ghost:hover {
  --btn-bg: var(--bg-3);
  color: var(--text);
}

.hero__stats {
  display: flex;
  gap: var(--s7);
  padding: var(--s6) 0 0;
  margin-top: var(--s3);
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.hero__stat {
  display: flex; flex-direction: column; gap: var(--s1);
}
.hero__stat b {
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 700;
  color: var(--text);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
}
.hero__stat span {
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: .12em;
}

.hero__media {
  position: relative;
  border-radius: var(--r5);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--sh-4);
  background: var(--bg-2);
}
.hero__media::before {
  content: "";
  position: absolute; inset: -10%;
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(var(--accent-rgb), .15) 120deg,
    transparent 240deg, transparent 360deg);
  animation: hero-spin 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.hero__media::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  border: 1px solid var(--line);
  pointer-events: none;
  z-index: 2;
}

@keyframes hero-spin {
  to { transform: rotate(360deg); }
}

/* ── 25e  Feature cards — glass, glow, hover ── */

.features .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s6); }

.feature-card {
  position: relative;
  overflow: visible;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r5);
  box-shadow: var(--sh-3);
  transition: transform .4s var(--ease), border-color .4s var(--ease),
              box-shadow .4s var(--ease), background .4s var(--ease);
}
.feature-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--accent-line), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.feature-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--accent-line);
  box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 40px var(--glow-weak);
  background: rgba(22, 30, 46, .8);
}
.feature-card:hover::before { opacity: 1; }

.feature-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--r3);
  background: linear-gradient(135deg, var(--bg-3), var(--bg-2));
  border: 1px solid var(--glass-border);
  color: var(--accent-2);
  display: grid; place-items: center;
  box-shadow: 0 0 20px var(--glow-weak);
  transition: all .4s var(--ease);
}
.feature-card__icon svg { width: 22px; height: 22px; }
.feature-card:hover .feature-card__icon {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #04070d;
  box-shadow: 0 0 32px var(--glow);
  transform: rotate(-6deg) scale(1.1);
}
.feature-card h3 { font-size: 1.15rem; color: var(--text); letter-spacing: -.02em; }
.feature-card p { color: var(--text-2); font-size: .93rem; line-height: 1.7; }

/* ── 25f  Buttons — punchier ── */

.btn {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent 60%);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0; transition: opacity .3s var(--ease);
}
.btn:hover::before { opacity: 1; }
.btn--primary {
  box-shadow: 0 0 28px var(--glow);
}
.btn--primary:hover {
  box-shadow: 0 0 40px var(--glow);
  transform: translateY(-2px);
}
.btn--ghost:hover { box-shadow: 0 0 24px var(--glow-weak); }

/* ── 25g  Download page focal point ── */

.download {
  position: relative;
  overflow: hidden;
  padding: var(--s9) 0 var(--s8);
}
.download::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(900px 500px at 50% -20%, rgba(var(--accent-rgb), .10), transparent 50%),
    radial-gradient(600px 400px at 100% 100%, rgba(167, 139, 250, .06), transparent 40%);
  pointer-events: none;
  z-index: 0;
}
.download .wrap { position: relative; z-index: 1; }
.download .section__head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--s8);
}
.download .lead { color: var(--text-2); font-size: 1.08rem; }
.download .btn--block {
  max-width: 460px;
  height: 60px;
  font-size: 1.1rem;
  font-weight: 600;
  box-shadow: 0 0 40px var(--glow);
}
.download .btn--block:hover {
  box-shadow: 0 0 56px var(--glow);
  transform: translateY(-2px);
}
.download .price__inc { max-width: 620px; margin: 0 auto var(--s6); }
.download .note { max-width: 620px; margin: 0 auto; }

/* ── 25h  Changelog timeline ── */

.changelog {
  grid-template-columns: 1fr;
  gap: var(--s6);
}
.release {
  position: relative;
  padding: var(--s7);
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-left: 3px solid transparent;
  border-radius: var(--r4);
  box-shadow: var(--sh-2);
  transition: all .4s var(--ease);
}
.release::before {
  content: "";
  position: absolute; left: -13px; top: var(--s7);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--accent-line);
  box-shadow: 0 0 0 4px var(--glass-border);
}
.release--current::before {
  border-color: var(--scn);
  box-shadow: 0 0 0 4px rgba(52, 211, 153, .2);
}
.release--current {
  border-left-color: var(--scn);
  background: rgba(52, 211, 153, .05);
}
.release:hover {
  border-color: var(--line-2);
  transform: translateX(-4px);
  box-shadow: var(--sh-3);
}
.release__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.release__ver {
  font-family: var(--mono);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent-2);
  letter-spacing: -.02em;
}
.release__date {
  font-size: .8rem;
  color: var(--text-3);
  font-family: var(--mono);
}
.release h3 {
  font-size: 1rem;
  color: var(--text-2);
  margin-bottom: var(--s3);
  font-weight: 600;
}
.changelog__notes { display: grid; gap: var(--s3); }
.changelog__note {
  display: flex; gap: var(--s3); align-items: flex-start;
  font-size: .9rem;
  color: var(--text-2);
  line-height: 1.6;
}
.changelog__note svg { width: 14px; height: 14px; margin-top: 3px; color: var(--scn); flex-shrink: 0; }

.chips { display: flex; gap: var(--s3); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; padding: 4px 12px;
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .08em; border-radius: 100px;
  border: 1px solid var(--glass-border);
  color: var(--text-3); background: var(--glass);
}
.chip--ok {
  border-color: rgba(52, 211, 153, .35);
  color: var(--scn);
  background: rgba(52, 211, 153, .1);
}
.chip--muted {
  border-color: var(--glass-border);
  color: var(--text-4);
  background: var(--glass);
}
.chip--build {
  border-color: var(--accent-line);
  color: var(--accent-2);
  background: rgba(var(--accent-rgb), .1);
}

/* ── 25i  Section headings ── */

.section__head .eyebrow {
  color: var(--accent-2);
  text-shadow: 0 0 16px rgba(var(--accent-rgb), .25);
}
.section__head h2 {
  color: var(--text);
  letter-spacing: -.03em;
}
.section__head .lead {
  color: var(--text-2);
  max-width: 60ch;
}

/* ── 25j  Pricing card upgrade ── */

.price {
  position: relative;
  background: linear-gradient(160deg, var(--glass), rgba(22, 30, 46, .6));
  border: 1px solid var(--glass-border);
  box-shadow: var(--sh-4);
}
.price::before { display: none; }
.price::after {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}
.price__amt {
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  color: var(--text);
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.4));
}
.price__note { color: var(--accent-2); font-weight: 600; }

/* ── 25k  Utility animations ── */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.animate-in {
  animation: fadeInUp .6s var(--ease) both;
}

/* ── 25l  Light theme adjustments ── */

[data-theme="light"] {
  --bg-deep: #f7f8fa;
  --glass: rgba(255, 255, 255, .65);
  --glass-border: rgba(16, 24, 40, .12);
  --glow: rgba(43, 108, 246, .18);
  --glow-weak: rgba(43, 108, 246, .06);
}
[data-theme="light"] .hero__media::before {
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(43,108,246,.10) 120deg,
    transparent 240deg, transparent 360deg);
}
[data-theme="light"] .glass {
  background: rgba(255, 255, 255, .7);
  border-color: rgba(16, 24, 40, .14);
}
[data-theme="light"] .feature-card {
  background: rgba(255, 255, 255, .6);
  border-color: rgba(16, 24, 40, .12);
}
[data-theme="light"] .feature-card:hover {
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 20px 50px rgba(0,0,0,.08), 0 0 30px var(--glow-weak);
}
[data-theme="light"] .release {
  background: rgba(255, 255, 255, .6);
  border-color: rgba(16, 24, 40, .12);
}
[data-theme="light"] .release--current {
  background: rgba(4, 120, 87, .08);
}
[data-theme="light"] .price {
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(247,248,250,.6));
}

/* ── 25m  Responsive for new look ── */

@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s7); }
  .hero__media { order: -1; }
  .hero h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); }
  .changelog { grid-template-columns: 1fr; }
  .download .grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero__stats { gap: var(--s5); }
  .hero__stat b { font-size: 1.5rem; }
  .feature-card__icon { width: 40px; height: 40px; }
  .release { padding: var(--s5); }
}