/* DuDuClaw platform website
   Design system copied from the DuDuClaw OS website (DuDuClaw-OS/website/
   assets/css/site.css): same tokens, nav, buttons, cards, footer and motion
   rules, so the two sites read as one family. OS-only components (layer
   stack, shadow-workspace demo, download page, QR) are left out; the
   platform-only components live at the bottom of this file.
   Light palette on :root, dark palette declared twice so the manual toggle
   wins in both directions. */

/* ---------- tokens ---------- */

:root {
  color-scheme: light;

  --ground: #f3f3f3;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f4f4f5;
  --border: #e4e4e7;
  --border-strong: #d4d4d8;
  --text: #09090b;
  --muted: #71717b;
  --subtle: #9f9fa9;

  --accent: #2171cc;
  --accent-hover: #1a5ba6;
  --accent-soft: rgba(33, 113, 204, 0.09);
  --accent-line: rgba(33, 113, 204, 0.28);
  /* The lighter end of the blue ramp: scroll progress, glow rings, the
     charging connector. Never crimson — that stays on the cat, the logo
     and the H1 highlight. */
  --accent-bright: #4f9cf0;
  --accent-glow: rgba(33, 113, 204, 0.30);

  /* The one crimson this stylesheet may use. Crimson is reserved for the
     mascot, the logo and the H1 highlight; the mascot and logo carry their own
     gradient stops inline, which leaves the H1 highlight as the only crimson
     TEXT on the site. It needs a per-theme value: on the light hero the
     background is mid-tone, where the #e5484d of the brand set falls under the
     3:1 large-text floor. Both values below are stops the mascot's own
     gradients already use, so this is the same crimson family. There is
     deliberately no general-purpose --crimson token to reach for. */
  --hero-hl: #d63d42;

  --success: #1c882d;
  --success-soft: rgba(28, 136, 45, 0.10);
  --warning: #8a6600;
  --warning-soft: rgba(220, 164, 0, 0.14);
  --danger: #e0335a;

  --hero-ground: #eef1f6;
  --hero-circle-a: #c2d9f5;
  --hero-circle-b: #cfe0f7;
  /* Third, brighter highlight blob, painted by the .c3 circle. */
  --hero-glow: #dbeaff;
  /* Body copy that sits directly on the hero background. --muted (#71717b)
     only reaches 4.26:1 against --hero-ground and 4.02:1 against
     --hero-glow; this darker grey clears 4.5:1 at the brightest point of
     the hero background. */
  --hero-muted: #5a5a63;

  --nav-bg: rgba(255, 255, 255, 0.74);
  --code-bg: #f4f4f5;
  --code-text: #18181b;

  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-lift: 0 22px 52px rgba(0, 0, 0, 0.16);

  /* Fully transparent twin of --surface. Fading to `transparent` renders as
     a grey haze in some engines, so scroll hints fade to this instead. */
  --surface-fade: rgba(255, 255, 255, 0);


  --r-card: 12px;
  --r-btn: 10px;
  --r-pill: 999px;

  --maxw: 1120px;
  --gutter: 24px;

  --font-sans: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  --dur: 180ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ground: #0c0c0e;
    --surface: #1e1e21;
    --surface-2: #17171a;
    --surface-3: #232326;
    --border: #27272a;
    --border-strong: #3a3a3e;
    --text: #fafafa;
    --muted: #9f9fa9;
    --subtle: #71717b;

    --accent: #4390ee;
    --accent-hover: #59a6ff;
    --accent-soft: rgba(67, 144, 238, 0.14);
    --accent-line: rgba(67, 144, 238, 0.36);
    --accent-bright: #7ec0ff;
    --accent-glow: rgba(67, 144, 238, 0.42);

    --hero-hl: #ff7a7e;

    --success: #4cc463;
    --success-soft: rgba(76, 196, 99, 0.14);
    --warning: #e0b13a;
    --warning-soft: rgba(220, 164, 0, 0.16);
    --danger: #ff6b8b;

    --hero-ground: #0c0c0e;
    --hero-circle-a: #1a2540;
    --hero-circle-b: #141b33;
    --hero-glow: #1c3a66;
    --hero-muted: #c4c4cc;

    --nav-bg: rgba(18, 18, 21, 0.74);
    --code-bg: #17171a;
    --code-text: #e4e4e7;

    --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-lift: 0 22px 52px rgba(0, 0, 0, 0.6);

    --surface-fade: rgba(30, 30, 33, 0);
  }
}

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

  --ground: #0c0c0e;
  --surface: #1e1e21;
  --surface-2: #17171a;
  --surface-3: #232326;
  --border: #27272a;
  --border-strong: #3a3a3e;
  --text: #fafafa;
  --muted: #9f9fa9;
  --subtle: #71717b;

  --accent: #4390ee;
  --accent-hover: #59a6ff;
  --accent-soft: rgba(67, 144, 238, 0.14);
  --accent-line: rgba(67, 144, 238, 0.36);
  --accent-bright: #7ec0ff;
  --accent-glow: rgba(67, 144, 238, 0.42);

  --hero-hl: #ff7a7e;

  --success: #4cc463;
  --success-soft: rgba(76, 196, 99, 0.14);
  --warning: #e0b13a;
  --warning-soft: rgba(220, 164, 0, 0.16);
  --danger: #ff6b8b;

  --hero-ground: #0c0c0e;
  --hero-circle-a: #1a2540;
  --hero-circle-b: #141b33;
  --hero-glow: #1c3a66;
  --hero-muted: #c4c4cc;

  --nav-bg: rgba(18, 18, 21, 0.74);
  --code-bg: #17171a;
  --code-text: #e4e4e7;

  --shadow-soft: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 22px 52px rgba(0, 0, 0, 0.6);

  --surface-fade: rgba(30, 30, 33, 0);
}

/* ---------- base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: `hidden` would turn body into a scroll container
     and break the sticky nav. */
  overflow-x: clip;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
  font-weight: 700;
}

p { margin: 0; }

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover { color: var(--accent-hover); text-decoration: underline; }

code, kbd, pre { font-family: var(--font-mono); }

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

.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;
  left: 16px; top: -60px;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--r-btn);
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 16px; color: #fff; text-decoration: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- icons ---------- */

.icon {
  width: 20px; height: 20px;
  flex: none;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-lg { width: 24px; height: 24px; }
.icon-sm { width: 16px; height: 16px; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  font-size: 16px;
}
.brand:hover { text-decoration: none; color: var(--text); }
.brand img { width: 28px; height: 28px; border-radius: var(--r-pill); }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-links a {
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-btn);
}
.nav-links a:hover {
  color: var(--text);
  background: var(--surface-3);
  text-decoration: none;
}
.nav-links a[aria-current="page"] { color: var(--text); }

.nav-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.icon-btn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }

.nav-toggle { display: none; }

.theme-toggle .icon-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; }
}

.nav-panel { display: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-tools { margin-left: auto; }

  /* Closed state must collapse to zero height: padding and border are
     applied by the open state only, otherwise max-height:0 still leaves
     a visible strip under the nav. */
  .nav-panel {
    display: block;
    border-top: 0 solid var(--border);
    padding: 0 var(--gutter);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--dur) var(--ease), padding var(--dur) var(--ease);
  }
  .nav-panel[data-open="true"] {
    max-height: 360px;
    visibility: visible;
    border-top-width: 1px;
    padding-block: 8px 16px;
  }
  .nav-panel a {
    display: block;
    padding: 11px 8px;
    color: var(--text);
    font-weight: 500;
    border-bottom: 1px solid var(--border);
  }
  .nav-panel a:last-child { border-bottom: 0; }
}

/* ---------- release band ---------- */

.release-band {
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.release-band .wrap {
  display: flex;
  justify-content: center;
  padding-block: 8px;
}
.release-band a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.release-band a:hover { color: var(--text); text-decoration: none; }
.release-band .dot {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}
.release-band strong { color: var(--text); font-weight: 600; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--r-btn);
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- sections ---------- */

.section { padding-block: 88px; }
.section-tight { padding-block: 56px; }
.section-alt { background: var(--surface-2); border-block: 1px solid var(--border); }

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 12px;
}

.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(26px, 3.4vw, 36px); }
.section-head p { margin-top: 14px; color: var(--muted); font-size: 17px; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-ground);
  border-bottom: 1px solid var(--border);
  padding-block: 72px 0;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg span {
  position: absolute;
  display: block;
  border-radius: var(--r-pill);
}
/* Same three circles as the OS site's no-WebGL hero. */
.hero-bg .c1 {
  width: 1540px; height: 1540px;
  right: -320px; top: -520px;
  background: radial-gradient(circle at 50% 50%,
    var(--hero-circle-a) 0%, var(--hero-circle-a) 44%, transparent 66%);
}
.hero-bg .c2 {
  width: 1260px; height: 1260px;
  left: -460px; top: 40px;
  background: radial-gradient(circle at 50% 50%,
    var(--hero-circle-b) 0%, var(--hero-circle-b) 44%, transparent 66%);
}
/* The third, brighter highlight. */
.hero-bg .c3 {
  width: 720px; height: 720px;
  left: 46%; top: -120px;
  background: radial-gradient(circle at 50% 50%,
    var(--hero-glow) 0%, var(--hero-glow) 22%, transparent 62%);
  opacity: 0.85;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 40px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(34px, 5.4vw, 56px);
  letter-spacing: -0.03em;
}
.hero h1 .hl { color: var(--hero-hl); }
/* Everything that sits straight on the hero background uses --hero-muted,
   not --muted: the circles brighten the ground under it. */
.hero .eyebrow { color: var(--hero-muted); }
.hero-sub {
  margin-top: 20px;
  font-size: 17.5px;
  color: var(--hero-muted);
  max-width: 34em;
}
.hero-sub + .hero-sub { margin-top: 12px; }

/* Scoped claim pill. Same blue-dot look as the release band; allowed
   to wrap onto a second line on narrow screens. */
/* No flex-wrap on purpose: the label wraps inside its own span, so the
   dot stays beside the first line instead of breaking onto its own. */
.hero-claim {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}
.hero-claim:hover {
  color: var(--text);
  border-color: var(--border-strong);
  text-decoration: none;
}
.hero-claim .dot {
  width: 7px; height: 7px;
  border-radius: var(--r-pill);
  background: var(--accent);
  flex: none;
}

.hero-cta {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hero-meta {
  margin-top: 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--hero-muted);
  letter-spacing: 0.02em;
}

/* The mascot is inlined as SVG so its folded panels are individually
   animatable. Three nested boxes keep the transforms from fighting: the
   outer one owns the perspective, the middle one the idle float, the SVG
   itself the pointer tilt. */
.hero-cat {
  position: relative;
  justify-self: center;
  width: min(220px, 60%);
  perspective: 700px;
}
.hero-cat-float { width: 100%; position: relative; }
.hero-cat-svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(198, 53, 58, 0.24));
}

.hero-shot {
  position: relative;
  margin-top: 56px;
  padding-bottom: 72px;
}

/* ---------- screenshot frame ---------- */

.frame {
  border: 1px solid var(--border-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding-inline: 12px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
}
.frame-bar i {
  width: 9px; height: 9px;
  border-radius: var(--r-pill);
  background: var(--border-strong);
  display: block;
}
.frame img { width: 100%; }

.shot-dark { display: none; }
:root[data-theme="dark"] .shot-dark { display: block; }
:root[data-theme="dark"] .shot-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shot-dark { display: block; }
  :root:not([data-theme="light"]) .shot-light { display: none; }
}

/* ---------- notice card ---------- */

.notice {
  border: 1px solid var(--border);
  border-left: 3px solid var(--warning);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 28px;
  box-shadow: var(--shadow-card);
}
.notice h2 { font-size: 22px; }
.notice ul { margin: 16px 0 0; padding-left: 20px; color: var(--muted); }
.notice li { margin-block: 8px; }
.notice li strong { color: var(--text); font-weight: 600; }

/* ---------- claim card ---------- */

/* Same frame as the honest status card, blue edge instead of amber:
   this one states what we claim, not what is still unfinished. */
.claim {
  margin-bottom: 32px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 26px 28px;
  box-shadow: var(--shadow-card);
}
.claim-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  margin-bottom: 14px;
}
.claim-title .icon { color: var(--accent); }
.claim p { color: var(--muted); font-size: 15.5px; }
.claim p + p { margin-top: 12px; }
.claim p strong { color: var(--text); font-weight: 600; }
.claim-sources {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.9;
}
.claim-sources a { color: var(--accent); }

@media (max-width: 560px) {
  .claim { padding: 22px 20px; }
  .claim-title { align-items: flex-start; font-size: 17px; }
  .claim-title .icon { margin-top: 2px; }
}

/* ---------- table ---------- */

.table-scroll { overflow-x: auto; border-radius: var(--r-card); border: 1px solid var(--border); }
table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: 15px;
}
caption { text-align: left; color: var(--muted); font-size: 14px; padding-bottom: 10px; }
th, td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
thead th {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  background: var(--surface-2);
  white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.col-old { color: var(--muted); }
td.col-new { color: var(--text); }
th[scope="row"] { font-weight: 600; white-space: nowrap; }

/* ---------- cards ---------- */

.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 24px;
  box-shadow: var(--shadow-card);
}
.card h3 { font-size: 17px; margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-btn);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 16px;
}

/* ---------- tabs ---------- */

.tablist {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 24px;
  scrollbar-width: thin;
}
.tablist button {
  flex: none;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.tablist button:hover { color: var(--text); }
.tablist button[aria-selected="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.tabpanel[hidden] { display: none; }
.tabpanel p.caption {
  margin-top: 16px;
  color: var(--muted);
  font-size: 15px;
  max-width: 62em;
}

/* ---------- timeline ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 28px;
  border-top: 2px solid var(--border);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -15px; left: 0;
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.step h3 { font-size: 16px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 14.5px; }

/* ---------- badges / pills ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface-3);
  color: var(--muted);
  white-space: nowrap;
}
.pill-ok { background: var(--success-soft); color: var(--success); border-color: transparent; }
.pill-warn { background: var(--warning-soft); color: var(--warning); border-color: transparent; }
.pill-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; }

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- code / copy ---------- */

/* The copy button lives in its own column so long one-line commands
   scroll underneath nothing: the <pre> is the scroller, the button is
   a static flex item pinned to the right edge. Markup order is button
   then <pre>; `order` puts the button visually last. */
.code {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  padding: 8px 8px 8px 16px;
}
.code pre {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 6px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.code code {
  font-size: 13.5px;
  color: var(--code-text);
  white-space: pre;
}
.copy-btn {
  order: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.copy-btn:hover { color: var(--text); background: var(--surface-3); }

.key-block code {
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------- two column list ---------- */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  display: flex;
  gap: 12px;
  padding-block: 11px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}
.checklist li:last-child { border-bottom: 0; }
.checklist .icon { margin-top: 3px; }
.checklist .ok { color: var(--success); }
.checklist .pending { color: var(--warning); }
.checklist span { color: var(--muted); }
.checklist strong { color: var(--text); font-weight: 600; display: block; }

/* ---------- edition cards ---------- */

.edition {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.edition h3 { font-size: 20px; }
.edition .persona { color: var(--accent); font-weight: 600; font-size: 14.5px; }
.edition ul { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14.5px; }
.edition li { margin-block: 6px; }
.edition .btn { margin-top: auto; }

/* ---------- link cards ---------- */

.linkgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.linkcard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--text);
}
.linkcard:hover { border-color: var(--accent-line); background: var(--accent-soft); text-decoration: none; }
.linkcard .icon { color: var(--accent); margin-top: 2px; }
.linkcard b { display: block; font-weight: 600; font-size: 15px; }
.linkcard small { color: var(--muted); font-size: 13px; line-height: 1.5; display: block; margin-top: 2px; }

/* ---------- CTA ---------- */

.cta {
  position: relative;
  overflow: hidden;
  background: var(--hero-ground);
  border-block: 1px solid var(--border);
  padding-block: 88px;
  text-align: center;
}
.cta-cat {
  position: absolute;
  right: 6%;
  top: 50%;
  transform: translateY(-50%);
  width: 300px;
  opacity: 0.10;
  pointer-events: none;
}
.cta-inner { position: relative; }
.cta h2 { font-size: clamp(26px, 3.6vw, 38px); }
.cta p { margin-top: 14px; color: var(--muted); font-size: 17px; }
.cta .hero-cta { justify-content: center; }

/* ---------- footer ---------- */

.footer {
  background: var(--surface-2);
  padding-block: 56px 32px;
  font-size: 14.5px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.footer h4 {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 700;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 9px; }
.footer li a { color: var(--muted); }
.footer li a:hover { color: var(--text); }
.footer-brand p { color: var(--muted); margin-top: 12px; max-width: 26em; }
.footer-legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
}


/* ---------- reveal ---------- */

:root[data-js] .reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
}
:root[data-js] .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .grid-3, .linkgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 780px) {
  .section { padding-block: 60px; }
  .hero { padding-top: 48px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hero-cat {
    width: 150px;
    order: -1;
    justify-self: start;
  }
  .hero-shot { margin-top: 40px; padding-bottom: 48px; }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .cta-cat { opacity: 0.06; right: -40px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .grid-3, .linkgrid, .steps, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .btn { width: 100%; }
  .hero-cta .btn { width: 100%; }
  /* A wrapped pill reads better with a corner radius than a stadium. */
  .hero-claim { border-radius: 14px; align-items: flex-start; }
  .hero-claim .dot { margin-top: 7px; }
}

/* ---------- scroll progress ---------- */

/* Sits on the bottom edge of the 60px nav row, so opening the mobile panel
   below it does not drag the line down with it. */
.scroll-progress {
  position: absolute;
  left: 0; right: 0;
  top: 57px;
  height: 3px;
  pointer-events: none;
}
.scroll-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
  box-shadow: 0 0 10px var(--accent-glow), 0 0 3px var(--accent-glow);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* ---------- picture / art-directed screenshots ---------- */

.frame picture { display: block; }

/* ---------- table shell ---------- */

/* Wraps .table-scroll so the right-edge fade can be positioned against the
   frame instead of scrolling away with the table. */
.table-shell { position: relative; }
.table-shell::after {
  content: "";
  position: absolute;
  top: 1px; right: 1px; bottom: 1px;
  width: 38px;
  border-radius: 0 var(--r-card) var(--r-card) 0;
  background: linear-gradient(to right, var(--surface-fade), var(--surface) 82%);
  pointer-events: none;
  display: none;
}
.table-shell[data-scrollable="true"]::after { display: block; }
/* Without JS the hint is shown across the width band where these tables
   (min-width 620px) cannot fit their container. */
@media (min-width: 601px) and (max-width: 700px) {
  :root:not([data-js]) .table-shell::after { display: block; }
}

/* ---------- disclosure inside a table cell ---------- */

/* Open by default, so the third column reads as an ordinary cell on wide
   screens and stays fully readable with JS off. Below 600px the script
   closes it and the summary becomes the toggle. */
.cell-detail > summary { display: none; }
.cell-detail > summary::-webkit-details-marker { display: none; }
.cell-detail > p { color: inherit; }

/* ---------- below the fold ---------- */

.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}


/* ---------- safe area ---------- */

/* viewport-fit=cover lets the page run under the notch, so the sticky nav
   and the panel it opens pad themselves back out of it. */
.nav-inner {
  padding-inline:
    max(var(--gutter), env(safe-area-inset-left))
    max(var(--gutter), env(safe-area-inset-right));
}
@media (max-width: 860px) {
  .nav-panel {
    padding-inline:
      max(var(--gutter), env(safe-area-inset-left))
      max(var(--gutter), env(safe-area-inset-right));
  }
  .nav-panel[data-open="true"] {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}

/* ---------- touch targets ---------- */

@media (pointer: coarse) {
  .icon-btn { width: 44px; height: 44px; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; padding-block: 10px; }
  .tablist button { min-height: 44px; }
  .copy-btn { min-height: 44px; padding-inline: 14px; }
  .nav-panel a { padding-block: 13px; }
  .release-band a { padding-block: 6px; }
}


/* ======================================================================
   Platform-site components (not on the OS site)
   ====================================================================== */

/* ---------- hero without a screenshot ---------- */

/* The OS hero ends in a screenshot frame that carries its bottom padding;
   this hero ends with the copy, so it pads itself. */
.hero { padding-bottom: 80px; }
@media (max-width: 780px) {
  .hero { padding-bottom: 52px; }
  /* Copy first on phones; the mascot follows the buttons. */
  .hero-cat { order: 1; width: 110px; }
}

/* The platform headline is longer than the OS one: a wider copy column, a
   slightly smaller size, and the highlighted phrase never splits. */
@media (min-width: 781px) {
  .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); }
}
.hero h1 { font-size: clamp(32px, 4.6vw, 50px); }
.hero h1 .hl { white-space: nowrap; }

/* ---------- nav extras ---------- */

/* The language switch sits with the icon buttons, so it borrows their size
   and hover, but carries a text label instead of a glyph. */
.lang-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding-inline: 8px;
  border-radius: var(--r-btn);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.lang-link:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }

.nav-links a.nav-ext { display: inline-flex; align-items: center; gap: 5px; }
.nav-links a.nav-ext .icon { width: 13px; height: 13px; opacity: 0.7; }

/* ---------- button with an outbound arrow ---------- */

.btn .icon-ext { width: 15px; height: 15px; opacity: 0.8; }

/* ---------- dashboard tour ---------- */

.tour { max-width: 1040px; margin-inline: auto; }
.tour-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}
/* Without JS the tabs do nothing, so they stay hidden and every screenshot
   is listed instead. */
.tour-tabs { display: none; }
.tour[data-tour-ready] .tour-tabs { display: grid; }
.tour-tab {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-btn);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}
.tour-tab b {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--subtle);
}
.tour-tab:hover { color: var(--text); border-color: var(--border-strong); }
.tour-tab[aria-selected="true"] {
  color: var(--text);
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.tour-tab[aria-selected="true"] b { color: var(--accent); }
.tour-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.tour-shot { margin: 0; }
.tour-shot + .tour-shot { margin-top: 28px; }
.tour[data-tour-ready] .tour-shot + .tour-shot { margin-top: 0; }
/* No `display` here: the .shot-light / .shot-dark rules decide which copy
   shows, and a display value at this specificity would override them. */
.tour-shot img {
  vertical-align: top;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top left;
}
.tour-shot figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 15px;
  max-width: 62em;
}
.tour-shot figcaption strong { color: var(--text); font-weight: 600; }
.tour-note {
  margin-top: 18px;
  color: var(--subtle);
  font-size: 13.5px;
}

@media (max-width: 780px) {
  .tour[data-tour-ready] .tour-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- number strip ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--border);
  overflow: hidden;
}
.stat {
  background: var(--surface);
  padding: 20px 22px;
}
.stat b {
  display: block;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
}
.stat span { display: block; margin-top: 4px; color: var(--muted); font-size: 14px; }

/* ---------- selling points ---------- */

.point { display: flex; flex-direction: column; }
.point p + p { margin-top: 10px; }
.point code { font-size: 13.5px; }
.card-source {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--subtle);
  font-size: 13px;
  line-height: 1.7;
}
.point .card-source { margin-top: 18px; }
.card-source a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.card-source a:hover { color: var(--accent); }

/* ---------- architecture diagram ---------- */

.arch {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
.arch svg { display: block; width: 100%; height: auto; }
.arch-tall { display: none; }
.arch-tall svg { max-width: 360px; margin-inline: auto; }

.arch text { font-family: var(--font-sans); fill: var(--text); }
.arch .t-title { font-size: 15px; font-weight: 700; }
.arch .t-sub { font-size: 12.5px; fill: var(--muted); }
.arch .t-item { font-size: 13px; }
.arch .t-mono { font-family: var(--font-mono); font-size: 11.5px; fill: var(--muted); }
.arch .box { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }
.arch .box-brain { fill: var(--accent-soft); stroke: var(--accent-line); stroke-width: 1.5; }
.arch .box-core { fill: var(--surface-2); stroke: var(--accent); stroke-width: 2; }
.arch .chip { fill: var(--surface); stroke: var(--border); stroke-width: 1; }
.arch .wire { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arch .wire-soft { fill: none; stroke: var(--border-strong); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 4 5; }
.arch .glyph { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arch .glyph-muted { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.arch-caption { margin-top: 16px; color: var(--muted); font-size: 14.5px; max-width: 62em; }

/* ---------- get started ---------- */

.start-card { display: flex; flex-direction: column; gap: 14px; }
.start-card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 0; }
.start-card .code { margin-top: 2px; }
.start-card .code code { font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.start-card .btn { margin-top: auto; align-self: flex-start; }
.start-card .note { font-size: 13.5px; color: var(--subtle); }
.prereq {
  margin-top: 24px;
  color: var(--muted);
  font-size: 15px;
  max-width: 62em;
}
.prereq strong { color: var(--text); font-weight: 600; }

/* ---------- distributor ---------- */

.distributor {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: 32px;
  box-shadow: var(--shadow-card);
}
.distributor h3 { font-size: 22px; letter-spacing: -0.02em; }
.distributor p { margin-top: 12px; color: var(--muted); font-size: 15.5px; }
.distributor ul { margin: 16px 0 0; padding-left: 20px; color: var(--muted); font-size: 15px; }
.distributor li { margin-block: 6px; }
.distributor-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.distributor-cta small { color: var(--subtle); font-size: 13px; }

/* ---------- FAQ ---------- */

.faq { display: grid; gap: 12px; max-width: 860px; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 16px 20px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--muted); transition: transform var(--dur) var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq .answer { padding: 0 20px 18px; color: var(--muted); font-size: 15px; }
.faq .answer p + p { margin-top: 10px; }
.faq .answer code { font-size: 13.5px; }

/* ---------- legal page ---------- */

.prose { max-width: 760px; }
.prose h1 { font-size: clamp(30px, 4vw, 40px); }
.prose h2 { font-size: 20px; margin-top: 36px; }
.prose p, .prose li { color: var(--muted); font-size: 16px; }
.prose p { margin-top: 12px; }
.prose ul { margin: 12px 0 0; padding-left: 20px; }
.prose li { margin-block: 6px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose .meta { color: var(--subtle); font-size: 14px; margin-top: 10px; }

/* ---------- responsive (platform components) ---------- */

@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .distributor { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px; }
}

@media (max-width: 860px) {
  .arch-wide { display: none; }
  .arch-tall { display: block; }
  .arch { padding: 18px; }
}

@media (max-width: 560px) {
  .stat b { font-size: 26px; }
  .start-card .btn { align-self: stretch; }
  .distributor-cta { align-items: stretch; }
}

/* ---------- motion ---------- */

/* Same rule as the OS site: every animation and every motion transition
   lives inside this block, so `prefers-reduced-motion: reduce` gets a still
   page by declaring none of it. */

@media (prefers-reduced-motion: no-preference) {

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
  }
  @keyframes scroll-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }
  @keyframes cat-unfold {
    from { opacity: 0; transform: translate(0, 7px) rotate(-5deg) scale(0.94); }
    to { opacity: 1; transform: none; }
  }
  @keyframes cat-base-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes wire-flow {
    from { stroke-dashoffset: 18; }
    to { stroke-dashoffset: 0; }
  }

  :root[data-js] .reveal {
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  }

  .hero-cat-float { animation: float 6s ease-in-out infinite; }

  @supports (animation-timeline: scroll()) {
    .scroll-progress span {
      animation: scroll-progress linear both;
      animation-timeline: scroll(root);
    }
  }

  .hero { --mx: 0px; --my: 0px; --par: 0px; }
  .hero-bg .c1 {
    transform: translate3d(var(--mx), calc(var(--my) + var(--par)), 0);
    animation: hero-orbit-a 11s linear infinite;
  }
  .hero-bg .c2 {
    transform: translate3d(calc(var(--mx) * -0.6), calc(var(--my) * -0.6 + var(--par) * 0.55), 0);
    animation: hero-orbit-b 8.5s linear infinite;
  }
  .hero-bg .c3 { animation: hero-orbit-c 13s linear infinite; }
  @keyframes hero-orbit-a {
    0% { transform: translate3d(calc(var(--mx) + 0px), calc(var(--my) + var(--par)), 0); }
    25% { transform: translate3d(calc(var(--mx) + 38px), calc(var(--my) + var(--par) + 26px), 0); }
    50% { transform: translate3d(calc(var(--mx) + 0px), calc(var(--my) + var(--par) + 52px), 0); }
    75% { transform: translate3d(calc(var(--mx) - 38px), calc(var(--my) + var(--par) + 26px), 0); }
    100% { transform: translate3d(calc(var(--mx) + 0px), calc(var(--my) + var(--par)), 0); }
  }
  @keyframes hero-orbit-b {
    0% { transform: translate3d(calc(var(--mx) * -0.6), calc(var(--my) * -0.6 + var(--par) * 0.55), 0); }
    25% { transform: translate3d(calc(var(--mx) * -0.6 - 32px), calc(var(--my) * -0.6 + var(--par) * 0.55 + 22px), 0); }
    50% { transform: translate3d(calc(var(--mx) * -0.6), calc(var(--my) * -0.6 + var(--par) * 0.55 + 44px), 0); }
    75% { transform: translate3d(calc(var(--mx) * -0.6 + 32px), calc(var(--my) * -0.6 + var(--par) * 0.55 + 22px), 0); }
    100% { transform: translate3d(calc(var(--mx) * -0.6), calc(var(--my) * -0.6 + var(--par) * 0.55), 0); }
  }
  @keyframes hero-orbit-c {
    0% { transform: translate3d(0, 0, 0); }
    25% { transform: translate3d(-46px, 30px, 0); }
    50% { transform: translate3d(0, 60px, 0); }
    75% { transform: translate3d(46px, 30px, 0); }
    100% { transform: translate3d(0, 0, 0); }
  }

  /* Mascot unfold: fires once when the hero scrolls into view. */
  :root[data-js] .hero-cat-svg .cat-piece { opacity: 0; }
  :root[data-js] .hero-cat-svg .cat-base { opacity: 0; }
  :root[data-js] .hero-cat-svg.is-unfolded .cat-base {
    animation: cat-base-in 260ms var(--ease) both;
  }
  :root[data-js] .hero-cat-svg.is-unfolded .cat-piece {
    animation: cat-unfold 440ms var(--ease) both;
    transform-box: fill-box;
    transform-origin: 50% 62%;
  }
  :root[data-js] .hero-cat-svg.is-unfolded .cat-piece:nth-child(2) { animation-delay: 60ms; }
  :root[data-js] .hero-cat-svg.is-unfolded .cat-piece:nth-child(3) { animation-delay: 120ms; }
  :root[data-js] .hero-cat-svg.is-unfolded .cat-piece:nth-child(4) { animation-delay: 180ms; }
  :root[data-js] .hero-cat-svg.is-unfolded .cat-piece:nth-child(5) { animation-delay: 240ms; }
  :root[data-js] .hero-cat-svg.is-unfolded .cat-piece:nth-child(6) { animation-delay: 300ms; }
  :root[data-js] .hero-cat-svg.is-unfolded .cat-piece:nth-child(7) { animation-delay: 360ms; }
  :root[data-js] .hero-cat-svg.is-unfolded .cat-piece:nth-child(8) { animation-delay: 420ms; }

  /* The MCP wire carries a slow dash flow: calls going back and forth. */
  .arch .wire-flow { stroke-dasharray: 6 12; animation: wire-flow 1.4s linear infinite; }

  @media (hover: hover) and (pointer: fine) {
    .card,
    .linkcard,
    .faq details {
      transition: transform 220ms var(--ease), box-shadow 220ms var(--ease),
                  border-color 220ms var(--ease);
    }
    .card:hover,
    .linkcard:hover {
      transform: translateY(-6px);
      box-shadow: 0 0 0 1px var(--accent-line), 0 18px 50px var(--accent-glow),
                  var(--shadow-lift);
    }
    .faq details:hover { border-color: var(--border-strong); }

    .btn[data-magnetic] {
      transform: translate(var(--mag-x, 0px), var(--mag-y, 0px));
      transition: transform 160ms var(--ease), background var(--dur) var(--ease),
                  box-shadow 200ms var(--ease);
    }
    .btn[data-magnetic]:hover {
      box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 30px var(--accent-glow);
    }

    .hero-cat-svg {
      transform: rotateX(var(--cat-rx, 0deg)) rotateY(var(--cat-ry, 0deg));
      transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
  }
}

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

@media print {
  .nav, .release-band { display: none; }
}