/* The Catalyst website. Values come from The Catalyst design system (tokens.json, 27 Oct 2026). */

:root {
  color-scheme: light;
  --brand-purple: #3B1F73;
  --brand-night: #15102A;
  --brand-lavender: #D9CCFF;
  --brand-violet: #6D28D9;
  --brand-paper: #FAF9F7;

  --surface: #FAF9F7;
  --surface-raised: #FFFFFF;
  --surface-tint: #F1EDF8;
  --ink: #15102A;
  --ink-muted: #5B5470;
  --line: #E4DFEC;
  --line-strong: #8A82A0;
  --primary: #3B1F73;
  --on-primary: #FFFFFF;
  --accent: #6D28D9;
  --focus-ring: #6D28D9;
  --panel: #15102A;
  --on-panel: #FFFFFF;
  --on-panel-accent: #D9CCFF;
  --on-panel-muted: #B9B1D1;
  --go: #1C7547; --go-tint: #E5F3EA;
  --caution: #A34A06; --caution-tint: #FCEFDF;
  --stop: #B42318; --stop-tint: #FCE9E7;

  --font-display: "Space Grotesk", "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px;
  --radius-s: 6px; --radius-m: 12px; --radius-l: 20px; --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(21, 16, 42, 0.06), 0 8px 24px rgba(21, 16, 42, 0.06);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --wrap: 1200px;
  --gutter: 40px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body { margin: 0; background: var(--surface); color: var(--ink); font: 400 16px/26px var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-purple); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.night :focus-visible { outline-color: var(--on-panel-accent); }
h1, h2, h3, h4 { margin: 0; color: inherit; }
p, ul, ol, dl, figure { margin: 0; }
strong { font-weight: 600; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--surface-raised); color: var(--ink); padding: 12px 16px; border-radius: var(--radius-s); font-weight: 600; box-shadow: var(--shadow-card); }
.skip-link:focus { top: var(--space-4); }

/* ---------- Type ---------- */
.kicker { font: 600 12px/16px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.night .kicker { color: var(--on-panel-accent); }
.display-xl { font: 700 72px/72px var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.display-l { font: 700 56px/60px var(--font-display); letter-spacing: -0.02em; text-wrap: balance; }
.heading-1 { font: 700 40px/46px var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.heading-2 { font: 600 30px/36px var(--font-display); letter-spacing: -0.01em; text-wrap: balance; }
.heading-3 { font: 600 22px/28px var(--font-display); letter-spacing: -0.005em; }
.heading-4 { font: 600 18px/24px var(--font-display); }
.lead { font: 400 20px/30px var(--font-sans); color: var(--ink-muted); max-width: 40em; }
.night .lead { color: var(--on-panel-muted); }
.body { max-width: 65ch; }
.small { font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.caption { font: 500 12px/18px var(--font-sans); color: var(--ink-muted); }
.mono { font: 500 13px/20px var(--font-mono); }
.title-set { display: flex; flex-direction: column; gap: var(--space-2); max-width: 780px; }
.title-set .lead { margin-top: var(--space-2); }
.title-set--center { align-items: center; text-align: center; margin: 0 auto; }
.title-set--center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 24px; border-radius: var(--radius-pill); border: 1.5px solid transparent; font: 600 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease); }
.btn--primary { background: var(--primary); color: var(--on-primary); }
.btn--primary:hover { background: var(--brand-night); color: var(--on-primary); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }
.night .btn--primary { background: var(--brand-lavender); color: var(--brand-night); }
.night .btn--primary:hover { background: #FFFFFF; color: var(--brand-night); }
.night .btn--secondary { color: var(--on-panel); border-color: var(--on-panel-muted); }
.night .btn--secondary:hover { border-color: var(--on-panel); color: var(--on-panel); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.link-arrow { display: inline-flex; align-items: center; min-height: 24px; gap: 6px; font: 600 15px/20px var(--font-sans); color: var(--accent); text-decoration: none; }
.link-arrow:hover { text-decoration: underline; color: var(--brand-purple); }
.link-arrow svg { width: 16px; height: 16px; flex: none; transition: transform 200ms var(--ease); }
.link-arrow:hover svg { transform: translateX(3px); }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.night .dot { background: var(--on-panel-accent); }

/* ---------- Header and navigation ---------- */
.site-header { position: relative; z-index: 20; color: var(--on-panel); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); min-height: 80px; }
.brand { display: inline-flex; padding: 6px 0; flex: none; }
.brand img { height: 30px; width: auto; }
.nav-menu { display: flex; align-items: center; gap: var(--space-6); }
.nav-list { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-list > li { position: relative; }
.nav-link, .nav-trigger { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: var(--radius-pill); border: 0; background: none; color: var(--on-panel); font: 500 15px/20px var(--font-sans); text-decoration: none; cursor: pointer; }
.nav-link:hover, .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { color: var(--on-panel-accent); }
.nav-link[aria-current="page"], .nav-link.is-section { color: var(--on-panel-accent); box-shadow: inset 0 -2px 0 var(--on-panel-accent); border-radius: 0; }
.nav-trigger svg { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
.nav-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-panel { position: absolute; top: calc(100% + 8px); left: -12px; width: 640px; background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-m); box-shadow: 0 24px 64px rgba(21, 16, 42, 0.18); padding: var(--space-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px var(--space-4); }
.nav-panel[hidden] { display: none; }
.nav-panel a { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--radius-s); text-decoration: none; color: var(--ink); }
.nav-panel a:hover { background: var(--surface-tint); color: var(--ink); }
.nav-panel a strong { font: 600 15px/20px var(--font-sans); }
.nav-panel a span { font: 400 13px/19px var(--font-sans); color: var(--ink-muted); }
.nav-panel .nav-panel__all { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; border-top: 1px solid var(--line); border-radius: 0; margin-top: 4px; padding-top: 16px; }
.nav-tools { display: flex; align-items: center; gap: var(--space-4); }
.lang-switch { display: inline-flex; align-items: center; gap: 2px; font: 600 13px/16px var(--font-sans); color: var(--on-panel-muted); }
.lang-switch a, .lang-switch span { display: inline-flex; align-items: center; min-height: 44px; min-width: 32px; justify-content: center; color: var(--on-panel-muted); text-decoration: none; }
.lang-switch a:hover { color: var(--on-panel); text-decoration: underline; }
.lang-switch [aria-current="true"] { color: var(--on-panel); }
.menu-toggle { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill); border: 1.5px solid var(--on-panel-muted); background: none; color: var(--on-panel); cursor: pointer; }
.menu-toggle .icon-close { display: none; }
.menu-toggle[aria-expanded="true"] .icon-open { display: none; }
.menu-toggle[aria-expanded="true"] .icon-close { display: block; }

/* ---------- Night hero ---------- */
.night { background: var(--panel); color: var(--on-panel); position: relative; overflow: hidden; }
.orbits { position: absolute; pointer-events: none; }
.orbits ellipse { fill: none; stroke-width: 1.75; vector-effect: non-scaling-stroke; }
.orbits--dark ellipse { stroke: var(--brand-lavender); stroke-opacity: 0.32; }
.orbits--dark circle { fill: var(--brand-lavender); }
.orbits--light ellipse { stroke: var(--brand-purple); stroke-opacity: 0.16; }
.hero-orbits { right: -380px; top: -160px; width: 1000px; height: 1000px; }
.hero { position: relative; padding: var(--space-8) 0 104px; }
.hero__inner { max-width: 840px; display: flex; flex-direction: column; gap: var(--space-4); }
.hero__inner .lead { margin-top: var(--space-2); }
.hero__inner .btn-row { margin-top: var(--space-4); }
.hero--page { padding: var(--space-7) 0 var(--space-8); }
.hero--page .hero__inner { gap: var(--space-3); }
.hero-meta { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid rgba(217, 204, 255, 0.2); display: flex; flex-wrap: wrap; gap: 12px 28px; font: 500 14px/20px var(--font-sans); color: var(--on-panel-muted); }
.hero-meta > span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .hero-meta__lead { color: var(--on-panel); font-weight: 600; }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 13px/20px var(--font-sans); color: var(--on-panel-muted); }
.crumbs li { display: inline-flex; gap: 6px; align-items: center; }
.crumbs li + li::before { content: "/"; color: var(--on-panel-muted); opacity: 0.6; }
.crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--on-panel-muted); text-decoration: none; }
.crumbs a:hover { color: var(--on-panel); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--on-panel); }
.status-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid rgba(217, 204, 255, 0.4); color: var(--on-panel-accent); font: 600 13px/16px var(--font-sans); }
.product-lockup { height: 44px; width: auto; align-self: flex-start; margin-bottom: var(--space-2); }

/* ---------- Sections ---------- */
.section { padding: var(--space-9) 0; }
.section--white { background: var(--surface-raised); }
.section--tint { background: var(--surface-tint); }
.section--tight { padding: var(--space-8) 0; }
.section__stack { display: flex; flex-direction: column; gap: var(--space-7); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
.split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split__text { display: flex; flex-direction: column; gap: var(--space-5); padding-top: 28px; }
.split__text .lead { color: var(--ink); }
.prose-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.prose-stack p { max-width: 65ch; }

.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); }

.card { position: relative; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.section--white .card { background: var(--surface); }
.card--link:hover { border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.card--link .card__title a { color: inherit; text-decoration: none; }
.card--link .card__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card--link .card__title a:focus-visible { outline: none; }
.card--link:has(.card__title a:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.card--featured { border-color: var(--brand-purple); }
.card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); color: var(--brand-purple); }
.card__num { font: 500 13px/20px var(--font-mono); color: var(--ink-muted); }
.card__title { font: 600 20px/26px var(--font-display); }
.card__text { font: 400 15px/24px var(--font-sans); color: var(--ink-muted); flex-grow: 1; }
.card__meta { font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.card .link-arrow { margin-top: var(--space-1); }
.card__label { font: 700 15px/20px var(--font-sans); letter-spacing: 0.08em; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font: 600 12px/16px var(--font-sans); background: var(--surface-tint); color: var(--brand-purple); white-space: nowrap; }
.section--tint .pill { background: var(--surface-raised); }

.band { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding: 20px 24px; border-radius: var(--radius-m); background: var(--surface-tint); }
.band p { flex: 1 1 400px; max-width: none; }
.section--tint .band { background: var(--surface-raised); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
.checklist--single { grid-template-columns: minmax(0, 1fr); }
.checklist li { display: flex; gap: 12px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.checklist li .dot { transform: translateY(-1px); }
.checklist li strong { display: block; }
.checklist li span.small { display: block; margin-top: 2px; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 32px 1fr; column-gap: var(--space-4); row-gap: 4px; }
.step__n { grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font: 700 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.step__title { margin-top: 4px; font: 600 18px/24px var(--font-display); }
.step__text { font: 400 15px/24px var(--font-sans); color: var(--ink-muted); }
.steps--row { flex-direction: row; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }

.deliverables { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.deliverables ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.deliverables li { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.deliverables li .icon { color: var(--brand-purple); grid-row: span 2; margin-top: 2px; }
.deliverables li strong { font: 600 16px/22px var(--font-sans); }
.deliverables li span { font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }

.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.promises > div { display: flex; flex-direction: column; gap: var(--space-2); border-top: 2px solid var(--brand-purple); padding-top: 20px; }

/* Data rule */
.rule-card { border-radius: var(--radius-m); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.rule-card__head { display: flex; align-items: center; gap: var(--space-2); font: 700 13px/16px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.rule-card__rule { font: 600 20px/26px var(--font-display); color: var(--ink); }
.rule-card__eg { font: 400 14px/22px var(--font-sans); color: var(--ink); }
.rule-card--go { background: var(--go-tint); } .rule-card--go .rule-card__head { color: var(--go); }
.rule-card--caution { background: var(--caution-tint); } .rule-card--caution .rule-card__head { color: var(--caution); }
.rule-card--stop { background: var(--stop-tint); } .rule-card--stop .rule-card__head { color: var(--stop); }

/* Facts and course */
.facts { display: grid; grid-template-columns: auto 1fr; gap: 10px var(--space-5); font: 400 15px/22px var(--font-sans); }
.facts dt { color: var(--ink-muted); }
.facts dd { margin: 0; }
.aside-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 28px; display: flex; flex-direction: column; gap: var(--space-4); }
.section--white .aside-card { background: var(--surface); }
.sticky { position: sticky; top: 24px; }
.outcomes { list-style: none; counter-reset: o; padding: 0; margin: 0; display: flex; flex-direction: column; }
.outcomes li { counter-increment: o; display: grid; grid-template-columns: 48px 1fr; gap: var(--space-3); padding: 16px 0; border-top: 1px solid var(--line); }
.outcomes li::before { content: counter(o, decimal-leading-zero); font: 500 13px/24px var(--font-mono); color: var(--accent); }

/* Placeholders for content not yet verified */
.placeholder { border: 1.5px dashed var(--line-strong); border-radius: var(--radius-m); background: repeating-linear-gradient(135deg, var(--surface-tint) 0 12px, var(--surface) 12px 24px); color: var(--ink-muted); padding: var(--space-5); display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 160px; font: 400 14px/22px var(--font-sans); }
.placeholder strong { color: var(--ink); font-weight: 600; }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 20px 0; font: 600 18px/24px var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; color: var(--accent); transition: transform 200ms var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details > div { padding: 0 0 24px; max-width: 70ch; color: var(--ink-muted); }

/* Closing CTA */
.cta { position: relative; overflow: hidden; }
.cta .orbits { left: -420px; bottom: -420px; width: 900px; height: 900px; }
.cta__inner { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.cta__inner .btn-row { justify-content: center; margin-top: var(--space-4); }

/* Forms */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label, .field legend { font: 600 14px/20px var(--font-sans); color: var(--ink); }
.field .hint { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.field .optional { font-weight: 400; color: var(--ink-muted); }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 12px 14px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-raised); color: var(--ink); font: 400 16px/22px var(--font-sans); }
.field textarea { min-height: 160px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B5470' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 40px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.field [aria-invalid="true"] { border-color: var(--stop); }
.field .error { display: none; align-items: center; gap: 6px; font: 600 14px/20px var(--font-sans); color: var(--stop); }
.field .error svg { width: 16px; height: 16px; }
.field.has-error .error { display: inline-flex; }
.field label.check { font-weight: 400; font-size: 15px; line-height: 24px; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font: 400 15px/24px var(--font-sans); }
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--brand-purple); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status { display: none; border-radius: var(--radius-m); padding: var(--space-5); gap: var(--space-2); flex-direction: column; }
.form-status.is-visible { display: flex; }
.form-status--ok { background: var(--go-tint); }
.form-status--ok .form-status__head { color: var(--go); }
.form-status--error { background: var(--stop-tint); }
.form-status--error .form-status__head { color: var(--stop); }
.form-status--info { background: var(--surface-tint); }
.form-status__head { display: flex; align-items: center; gap: 8px; font: 700 13px/16px var(--font-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-purple); }
.form-status__head svg { width: 20px; height: 20px; }
.error-summary ul { margin: 6px 0 0; padding-left: 20px; }
.topic-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); border: 0; padding: 0; margin: 0; }
.topic-list legend { margin-bottom: var(--space-3); }
.topic { position: relative; }
.topic input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.topic span { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-m); background: var(--surface-raised); min-height: 72px; justify-content: center; }
.topic span strong { font: 600 15px/20px var(--font-sans); }
.topic span small { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.topic input:checked + span { border-color: var(--brand-purple); box-shadow: inset 0 0 0 1px var(--brand-purple); background: var(--surface-tint); }
.topic input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Prose pages (legal) */
.prose { max-width: 72ch; display: flex; flex-direction: column; gap: var(--space-4); }
.prose h2 { font: 600 26px/32px var(--font-display); margin-top: var(--space-6); }
.prose h3 { font: 600 19px/26px var(--font-display); margin-top: var(--space-3); }
.prose ul { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-top: 1px solid var(--line); }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 16px 20px; border-radius: var(--radius-m); background: var(--caution-tint); color: var(--ink); font: 400 15px/24px var(--font-sans); }
.notice svg { color: var(--caution); margin-top: 1px; }
.notice--info { background: var(--surface-tint); }
.notice--info svg { color: var(--brand-purple); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: var(--space-8) 0 var(--space-6); background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
.footer-brand { display: flex; flex-direction: column; gap: var(--space-4); }
.footer-brand img { height: 28px; width: auto; align-self: flex-start; }
.footer-col { display: flex; flex-direction: column; gap: 4px; }
.footer-col h2 { margin-bottom: var(--space-2); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.footer-col a { display: inline-flex; min-height: 32px; align-items: center; color: var(--ink-muted); text-decoration: none; font: 400 14px/22px var(--font-sans); }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-base { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.footer-base a { color: var(--ink-muted); }

/* ---------- Motion ---------- */
.motion .reveal { opacity: 0; transform: translateY(12px); transition: opacity 320ms var(--ease), transform 320ms var(--ease); }
.motion .reveal.is-in { opacity: 1; transform: none; }
.js .hero-orbits { animation: drift 2400ms var(--ease) both; }
@keyframes drift { from { opacity: 0; transform: rotate(-6deg) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4, .promises, .steps--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  .js .nav-menu { display: none; }
  .nav-menu { position: absolute; left: 0; right: 0; top: 80px; background: var(--panel); flex-direction: column; align-items: stretch; gap: var(--space-4); padding: var(--space-4) var(--gutter) var(--space-6); border-top: 1px solid rgba(217, 204, 255, 0.2); height: calc(100vh - 80px); height: calc(100dvh - 80px); overflow-y: auto; }
  .no-js .nav-menu { height: auto; }
  .js .nav-menu.is-open { display: flex; }
  .no-js .nav-menu { position: static; padding: 0 0 var(--space-4); }
  .nav-bar { flex-wrap: wrap; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid rgba(217, 204, 255, 0.15); }
  .nav-link, .nav-trigger { width: 100%; justify-content: space-between; min-height: 56px; padding: 0 4px; font-size: 17px; border-radius: 0; }
  .nav-link[aria-current="page"], .nav-link.is-section { box-shadow: none; }
  .nav-panel { position: static; width: auto; box-shadow: none; background: transparent; color: var(--on-panel); grid-template-columns: minmax(0, 1fr); padding: 0 0 var(--space-3); }
  .nav-panel a { color: var(--on-panel); padding: 10px 8px; }
  .nav-panel a:hover { background: rgba(217, 204, 255, 0.08); color: var(--on-panel); }
  .nav-panel a span { color: var(--on-panel-muted); }
  .nav-panel .nav-panel__all { color: var(--on-panel-accent); border-top-color: rgba(217, 204, 255, 0.15); }
  .nav-tools { justify-content: space-between; }
  .split, .split--even, .split--wide-left { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .split__text { padding-top: 0; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky { position: static; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .display-xl { font-size: 44px; line-height: 48px; }
  .display-l { font-size: 36px; line-height: 40px; }
  .heading-1 { font-size: 32px; line-height: 38px; }
  .heading-2 { font-size: 26px; line-height: 32px; }
  .lead { font-size: 18px; line-height: 28px; }
  .section { padding: var(--space-8) 0; }
  .hero { padding: var(--space-6) 0 var(--space-8); }
  .hero-orbits { right: -560px; top: -120px; }
  .grid--2, .grid--3, .grid--4, .grid--5, .promises, .steps--row, .checklist, .form-row, .topic-list { grid-template-columns: minmax(0, 1fr); }
  .hero .btn-row .btn, .cta .btn-row .btn { width: 100%; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-tools .nav-cta { display: none; }
  .deliverables { padding: var(--space-5); }
}
@media print {
  .site-header nav, .menu-toggle, .cta, .orbits { display: none !important; }
  .night { background: #fff; color: #000; }
  body { background: #fff; }
}

/* =====================================================================
   Signature moments (v2)
   ===================================================================== */

/* Hero headline: one highlighted word */
.hero h1 em { font-style: normal; color: var(--on-panel-accent); }

/* ---------- Home hero with the living nucleus ---------- */
.hero--home { padding: var(--space-6) 0 var(--space-9); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: var(--space-7); align-items: center; }
.hero-grid .hero__inner { max-width: none; }
.nucleus { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1; margin-left: auto; }
.nucleus__orbits { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.nucleus__orbits ellipse { fill: none; stroke: var(--brand-lavender); stroke-opacity: 0.42; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.nucleus__core { fill: var(--brand-lavender); }
.nucleus__halo { fill: none; stroke: var(--brand-lavender); stroke-opacity: 0.3; stroke-width: 1.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
.motion .nucleus.is-running .nucleus__halo { animation: halo 4.8s var(--ease) infinite; }
@keyframes halo { 0% { transform: scale(0.6); stroke-opacity: 0.45; } 70%, 100% { transform: scale(1.9); stroke-opacity: 0; } }
.nucleus__caption { position: absolute; left: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin: 0; font: 500 12px/16px var(--font-sans); color: var(--on-panel-muted); }
.nucleus__list { list-style: none; margin: 0; padding: 0; }
.nucleus__node { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: var(--radius-pill); background: rgba(21, 16, 42, 0.86); border: 1px solid rgba(217, 204, 255, 0.38); color: var(--on-panel); font: 600 14px/18px var(--font-sans); text-decoration: none; white-space: nowrap; backdrop-filter: blur(6px); transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); will-change: left, top; }
.nucleus__node:hover, .nucleus__node:focus-visible { background: var(--brand-lavender); color: var(--brand-night); border-color: var(--brand-lavender); }
.nucleus__num { font: 500 11px/1 var(--font-mono); color: var(--on-panel-accent); }
.nucleus__node:hover .nucleus__num, .nucleus__node:focus-visible .nucleus__num { color: var(--brand-purple); }
.nucleus__pause { position: absolute; right: 0; bottom: 0; display: none; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid rgba(217, 204, 255, 0.3); background: transparent; color: var(--on-panel-muted); font: 500 12px/16px var(--font-sans); cursor: pointer; }
.nucleus__pause svg { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.nucleus__pause:hover { color: var(--on-panel); border-color: var(--on-panel-muted); }
.motion .nucleus__pause { display: inline-flex; }

/* ---------- Editorial capability index ---------- */
.cap-head { max-width: 780px; }
.cap-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); counter-reset: cap; }
.cap-row a { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1.05fr) minmax(0, 1fr) 52px; gap: var(--space-5); align-items: center; padding: 30px 12px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: background-color 320ms var(--ease); }
.cap-row a::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--brand-purple); transform: scaleX(0); transform-origin: left; transition: transform 420ms var(--ease); }
.cap-row a:hover, .cap-row a:focus-visible { background: var(--surface-tint); }
.cap-row a:hover::before, .cap-row a:focus-visible::before { transform: scaleX(1); }
.cap-row__num { font: 500 13px/20px var(--font-mono); color: var(--accent); }
.cap-row__name { font: 700 44px/48px var(--font-display); letter-spacing: -0.025em; transition: transform 420ms var(--ease); }
.cap-row a:hover .cap-row__name, .cap-row a:focus-visible .cap-row__name { transform: translateX(8px); }
.cap-row__text { font: 400 16px/26px var(--font-sans); color: var(--ink-muted); }
.cap-row__go { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: var(--ink); transition: background-color 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease), transform 420ms var(--ease); }
.cap-row__go svg { width: 20px; height: 20px; }
.cap-row a:hover .cap-row__go, .cap-row a:focus-visible .cap-row__go { background: var(--primary); border-color: var(--primary); color: var(--on-primary); transform: rotate(-45deg); }

/* ---------- Live data-rule demo ---------- */
.split--demo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.rule-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.rule-mini { border-radius: var(--radius-m); padding: 16px 20px; display: grid; grid-template-columns: 112px 1fr; gap: 2px var(--space-4); align-items: baseline; }
.rule-mini .rule-card__head { grid-row: span 2; }
.rule-mini__rule { font: 600 16px/22px var(--font-display); color: var(--ink); }
.rule-mini__eg { font: 400 13px/20px var(--font-sans); color: var(--ink); }
.rule-mini--go { background: var(--go-tint); } .rule-mini--go .rule-card__head { color: var(--go); }
.rule-mini--caution { background: var(--caution-tint); } .rule-mini--caution .rule-card__head { color: var(--caution); }
.rule-mini--stop { background: var(--stop-tint); } .rule-mini--stop .rule-card__head { color: var(--stop); }
.rule-card__head svg { width: 20px; height: 20px; }
.ruledemo { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: 0 1px 2px rgba(21,16,42,.05), 0 24px 64px rgba(21,16,42,.10); overflow: hidden; }
.section--white .ruledemo { background: var(--surface); }
.ruledemo__bar { display: flex; align-items: center; gap: var(--space-3); padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--surface-tint); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); }
.ruledemo__dots { display: inline-flex; gap: 6px; }
.ruledemo__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); opacity: 0.5; }
.ruledemo__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }
.ruledemo__label { font: 600 13px/18px var(--font-sans); color: var(--ink); }
.ruledemo__input { width: 100%; min-height: 128px; padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-s); background: var(--surface-raised); color: var(--ink); font: 400 15px/24px var(--font-sans); resize: vertical; }
.ruledemo__input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--focus-ring); }
.ruledemo__arrow { display: flex; align-items: center; gap: var(--space-3); color: var(--accent); font: 600 12px/16px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; margin: var(--space-2) 0; }
.ruledemo__arrow::before, .ruledemo__arrow::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.ruledemo__arrow svg { width: 20px; height: 20px; }
.ruledemo__output { min-height: 96px; padding: 14px 16px; border-radius: var(--radius-s); background: var(--surface-tint); color: var(--ink); font: 400 15px/26px var(--font-sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.hit { display: inline; padding: 1px 6px; border-radius: 4px; font: 600 13px/20px var(--font-mono); white-space: nowrap; }
.hit--red { background: var(--stop-tint); color: var(--stop); box-shadow: inset 0 0 0 1px rgba(180,35,24,.25); }
.hit--amber { background: var(--caution-tint); color: var(--caution); box-shadow: inset 0 0 0 1px rgba(163,74,6,.25); }
.motion .hit { animation: pop 320ms var(--ease) both; }
@keyframes pop { from { transform: scale(0.92); opacity: 0.2; } to { transform: none; opacity: 1; } }
.ruledemo__summary { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ruledemo__summary li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font: 600 12px/16px var(--font-sans); }
.ruledemo__summary svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ruledemo__summary .sum--red { background: var(--stop-tint); color: var(--stop); }
.ruledemo__summary .sum--amber { background: var(--caution-tint); color: var(--caution); }
.ruledemo__summary .sum--green { background: var(--go-tint); color: var(--go); }
.ruledemo__note { display: flex; gap: 8px; align-items: flex-start; padding: 0 var(--space-5) var(--space-5); font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.ruledemo__note svg { width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }

/* ---------- Platform app tiles ---------- */
.tile { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.tile__mark { width: 62%; height: 62%; display: block; }
.tile--core { background: var(--brand-night); color: var(--brand-lavender); }
.tile--core .tile__mark { transform: rotate(45deg) scale(1.12); }
.tile--guard { background: var(--brand-purple); color: #FFFFFF; }
.tile--live { background: var(--brand-violet); color: #FFFFFF; }
.card__top:has(.tile) { justify-content: flex-start; gap: var(--space-3); }
.card__top:has(.tile) .pill { margin-left: auto; }
.card:has(.tile) { padding: 28px; }

/* ---------- Card hover: an orbit drifts in ---------- */
.card { isolation: isolate; overflow: hidden; }
.card::before { content: ""; position: absolute; z-index: -1; width: 240px; height: 240px; right: -110px; top: -110px; pointer-events: none; opacity: 0; transform: rotate(-25deg) scale(0.85); transition: opacity 320ms var(--ease), transform 640ms var(--ease);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='none' stroke='%233B1F73' stroke-opacity='.22' stroke-width='1.2'%3E%3Cellipse cx='100' cy='100' rx='92' ry='43' transform='rotate(45 100 100)'/%3E%3Cellipse cx='100' cy='100' rx='92' ry='43' transform='rotate(-45 100 100)'/%3E%3C/g%3E%3Ccircle cx='100' cy='100' r='5' fill='%236D28D9' fill-opacity='.35'/%3E%3C/svg%3E") center / contain no-repeat; }
.card--link:hover::before, .card--link:has(:focus-visible)::before { opacity: 1; transform: none; }

/* ---------- Steps joined by a line ---------- */
.steps li { position: relative; }
.steps:not(.steps--row) li:not(:last-child)::after { content: ""; position: absolute; left: 15px; top: 40px; bottom: -24px; width: 2px; background: linear-gradient(var(--brand-purple), var(--line)); opacity: 0.35; }
.steps--row li:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: 44px; right: calc(-1 * var(--space-5) + 8px); height: 2px; background: linear-gradient(90deg, var(--brand-purple), var(--line)); opacity: 0.35; }

/* ---------- Purple closing band ---------- */
.section.cta--purple { background: var(--brand-purple); }
.cta--purple .orbits { left: auto; right: -360px; top: -300px; bottom: auto; width: 960px; height: 960px; }
.cta--purple .orbits ellipse { stroke-opacity: 0.4; }
.cta--purple .lead, .cta--purple .small { color: #E4DCFA; }
.cta--purple a:not(.btn) { color: var(--brand-lavender); }
.cta--purple a:not(.btn):hover { color: #FFFFFF; }
.cta--purple .heading-1 { font-size: 48px; line-height: 54px; max-width: 820px; }

/* ---------- Footer signature ---------- */
.site-footer { padding-top: var(--space-9); }
.footer-signature { margin: 0 0 var(--space-8); font: 700 clamp(44px, 8.6vw, 128px)/0.95 var(--font-display); letter-spacing: -0.04em; color: var(--brand-purple); text-wrap: balance; }

@media (max-width: 1100px) {
  .cap-row__name { font-size: 36px; line-height: 40px; }
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .nucleus { margin: 0 auto; max-width: 440px; }
  .split--demo { grid-template-columns: minmax(0, 1fr); }
  .cap-row a { grid-template-columns: 40px minmax(0, 1fr) 44px; gap: 6px var(--space-4); padding: 24px 4px; }
  .cap-row__num { grid-row: 1 / span 2; align-self: start; padding-top: 6px; }
  .cap-row__text { grid-column: 2; grid-row: 2; }
  .cap-row__go { grid-column: 3; grid-row: 1 / span 2; width: 44px; height: 44px; }
}
@media (max-width: 720px) {
  .cap-row__name { font-size: 28px; line-height: 32px; }
  .cta--purple .heading-1 { font-size: 32px; line-height: 38px; }
  .nucleus__node { font-size: 12px; min-height: 32px; padding: 0 10px 0 8px; gap: 6px; }
  .rule-mini { grid-template-columns: minmax(0, 1fr); }
  .rule-mini .rule-card__head { grid-row: auto; }
  .steps--row li::after { display: none; }
}

/* =====================================================================
   Art direction (v3)
   ===================================================================== */

/* ---------- Orbital field, grain and curved edge on the hero ---------- */
.night { isolation: isolate; }
.orbit-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1200ms var(--ease); }
.orbit-field { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 150px), linear-gradient(to right, transparent 34%, #000 66%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 150px), linear-gradient(to right, transparent 34%, #000 66%); mask-composite: intersect; }
.night--home .orbit-field { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 140px), linear-gradient(to right, transparent 40%, #000 58%); mask-image: linear-gradient(to bottom, transparent 0, #000 140px), linear-gradient(to right, transparent 40%, #000 58%); }
@media (max-width: 960px) {
  .orbit-field, .night--home .orbit-field { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px); mask-image: linear-gradient(to bottom, transparent 0, #000 120px); }
}
.orbit-field.is-ready { opacity: 1; }
.has-field .hero-orbits { display: none; }
.night--hero::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 80% at 82% 40%, rgba(109, 40, 217, 0.22), transparent 70%), radial-gradient(40% 60% at 10% 100%, rgba(59, 31, 115, 0.5), transparent 70%); }
.night--home::before { background: radial-gradient(42% 60% at 74% 46%, rgba(109, 40, 217, 0.28), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(59, 31, 115, 0.55), transparent 70%); }
.night::after { content: none; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-curve { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(24px, 4.4vw, 64px); display: block; pointer-events: none; }
.hero-curve path { fill: var(--surface); }
.hero-curve--white path { fill: var(--surface-raised); }
.hero-curve--tint path { fill: var(--surface-tint); }
.hero { padding-bottom: calc(104px + clamp(24px, 4.4vw, 64px)); }
.hero--page { padding-bottom: calc(var(--space-8) + clamp(24px, 4.4vw, 64px)); }
.hero--home { padding-bottom: calc(var(--space-9) + 24px); }

/* ---------- Nucleus: woven depth ---------- */
.nucleus__orbits { z-index: 2; pointer-events: none; }
.nucleus__node { z-index: 3; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), opacity 400ms linear; }
.nucleus__node.is-back { z-index: 1; }
.nucleus__core { filter: drop-shadow(0 0 18px rgba(217, 204, 255, 0.9)); }

/* ---------- Load sequence ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__inner > * { animation: rise 900ms var(--ease) both; }
  .js .hero__inner > :nth-child(2) { animation-delay: 70ms; }
  .js .hero__inner > :nth-child(3) { animation-delay: 140ms; }
  .js .hero__inner > :nth-child(4) { animation-delay: 210ms; }
  .js .hero__inner > :nth-child(5) { animation-delay: 280ms; }
  .js .hero__inner > :nth-child(6) { animation-delay: 350ms; }
  .js .hero__inner > :nth-child(7) { animation-delay: 420ms; }
  .js .nucleus { animation: bloom 1400ms var(--ease) 200ms both; }
  .js .nucleus__orbits ellipse { stroke-dasharray: 1400; animation: draw 2200ms var(--ease) 300ms both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes bloom { from { opacity: 0; transform: scale(0.9) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }

/* ---------- Scroll-lit manifesto ---------- */
.statement { padding: var(--space-9) 0 var(--space-8); }
.statement .kicker { margin-bottom: var(--space-5); }
.statement__text { margin: 0; max-width: 22ch; font: 700 clamp(36px, 5.6vw, 76px)/1.06 var(--font-display); letter-spacing: -0.03em; color: var(--ink); text-wrap: pretty; }
.statement__text .w { transition: color 380ms var(--ease); }
.statement__text .w--accent { color: var(--accent); }
.statement-ready .statement__text .w { color: var(--line-strong); }
.statement-ready .statement__text .w.is-lit { color: var(--ink); }
.statement-ready .statement__text .w--accent.is-lit { color: var(--accent); }
@media (min-width: 1100px) { .statement__text { max-width: 24ch; } }

/* ---------- Cursor spotlight on cards ---------- */
.card { --mx: 50%; --my: 0%; }
.card.is-lit { background-image: radial-gradient(420px circle at var(--mx) var(--my), rgba(217, 204, 255, 0.45), transparent 62%); }
.cap-row a { background-image: none; }

@media (max-width: 960px) {
  .orbit-field { opacity: 0; }
  .orbit-field.is-ready { opacity: 0.55; }
  .night--home .orbit-field.is-ready { opacity: 1; }
}

/* =====================================================================
   v4: the still centre (minimal home hero)
   ===================================================================== */
.nucleus { aspect-ratio: auto; max-width: 500px; margin-left: auto; display: flex; flex-direction: column; gap: var(--space-5); }
.nucleus__stage { position: relative; }
.nucleus__art { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
.nucleus__art ellipse { fill: none; stroke: var(--brand-lavender); stroke-opacity: 0.34; stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.nucleus__spoke { stroke: var(--brand-lavender); stroke-opacity: 0.7; stroke-width: 1.25; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.motion .nucleus__spoke.is-drawn, .js .nucleus__spoke.is-drawn { stroke-dasharray: 320; animation: spoke 700ms var(--ease) both; }
@keyframes spoke { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
.nucleus__dot { fill: var(--on-panel-muted); opacity: 0.6; transition: r 400ms var(--ease), opacity 400ms var(--ease), fill 400ms var(--ease); }
.nucleus__dot.is-active { fill: #FFFFFF; opacity: 1; r: 8; filter: drop-shadow(0 0 10px rgba(217, 204, 255, 0.9)); }
.nucleus__core { fill: var(--brand-lavender); filter: drop-shadow(0 0 22px rgba(217, 204, 255, 0.75)); }
.nucleus__halo { fill: none; stroke: var(--brand-lavender); stroke-opacity: 0.3; stroke-width: 1.25; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .js .nucleus__halo { animation: halo 5.6s var(--ease) infinite; } }
.nucleus__centre { position: absolute; left: 50%; top: calc(50% + 32px); transform: translateX(-50%); margin: 0; font: 600 11px/14px var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-panel-muted); white-space: nowrap; }
.nucleus__panel { border-top: 1px solid rgba(217, 204, 255, 0.22); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); }
.nucleus__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.nucleus__item { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.js .nucleus__item { display: none; }
.js .nucleus__item.is-active { display: grid; }
@media (prefers-reduced-motion: no-preference) { .js .nucleus__item.is-active { animation: rise 500ms var(--ease) both; } }
.nucleus__num { font: 500 13px/24px var(--font-mono); color: var(--on-panel-accent); white-space: nowrap; }
.nucleus__item a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--on-panel); min-height: 72px; }
.nucleus__item a strong { font: 600 19px/24px var(--font-display); display: inline-flex; align-items: center; gap: 8px; }
.nucleus__item a strong::after { content: "→"; font-family: var(--font-sans); color: var(--on-panel-accent); transition: transform 200ms var(--ease); }
.nucleus__item a:hover strong::after { transform: translateX(4px); }
.nucleus__item a span { font: 400 15px/22px var(--font-sans); color: var(--on-panel-muted); }
.nucleus__controls { display: none; align-items: center; justify-content: space-between; gap: var(--space-3); }
.js .nucleus__controls { display: flex; }
.nucleus__picks { display: flex; gap: 6px; }
.nucleus__pick { min-width: 40px; height: 32px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid rgba(217, 204, 255, 0.25); background: transparent; color: var(--on-panel-muted); font: 500 12px/1 var(--font-mono); cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }
.nucleus__pick:hover { color: var(--on-panel); border-color: var(--on-panel-muted); }
.nucleus__pick.is-active { background: var(--brand-lavender); color: var(--brand-night); border-color: var(--brand-lavender); }
.nucleus .nucleus__pause { position: static; display: inline-flex; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; }
.nucleus .nucleus__pause[hidden] { display: none; }
.night--home::before { background: radial-gradient(36% 50% at 74% 38%, rgba(109, 40, 217, 0.22), transparent 70%); }
@media (max-width: 960px) {
  .nucleus { margin: 0 auto; max-width: 420px; width: 100%; }
}
@media (max-width: 720px) {
  .nucleus__item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- Alignment fixes ---------- */
.step__n, .ct-step__n { display: block; text-align: center; line-height: 32px; font: 600 14px/32px var(--font-sans); font-variant-numeric: tabular-nums; }
.steps--row li { display: flex; flex-direction: column; gap: var(--space-2); }
.steps--row .step__n { margin-bottom: var(--space-2); }
.steps--row li:not(:last-child)::after { top: 15px; left: 44px; right: calc(-1 * var(--space-5) + 12px); }
.checklist li, .deliverables li { align-items: start; }
.checklist li { align-items: flex-start; }
.checklist li .dot { transform: none; margin-top: 9px; }
.split__text .checklist li .dot { margin-top: 9px; }
.card__top { min-height: 24px; }
.card__top .icon { display: block; }
.rule-card__head, .ruledemo__summary li, .notice, .form-status__head { line-height: 20px; }
.rule-card__head svg, .notice svg, .form-status__head svg { flex: none; }
.link-arrow svg { margin-top: 1px; }
.hero-meta > span .dot { margin-top: 0; }

/* ---------- Pricing ---------- */
.pricing { display: flex; flex-direction: column; gap: var(--space-6); }
.pricing__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.pricing__tabs { display: none; gap: 4px; padding: 4px; border-radius: var(--radius-pill); background: var(--surface-tint); }
.js .pricing__tabs { display: inline-flex; }
.pricing__tab { min-height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink-muted); font: 600 15px/20px var(--font-sans); cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.pricing__tab:hover { color: var(--ink); }
.pricing__tab[aria-selected="true"] { background: var(--surface-raised); color: var(--ink); box-shadow: 0 1px 2px rgba(21,16,42,.08), 0 4px 12px rgba(21,16,42,.06); }
.pricing__billing { display: none; border: 0; margin: 0; padding: 4px; gap: 4px; border-radius: var(--radius-pill); background: var(--surface-tint); }
.js .pricing__billing { display: inline-flex; }
.pricing__billing label { position: relative; }
.pricing__billing input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.pricing__billing span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--radius-pill); font: 600 14px/18px var(--font-sans); color: var(--ink-muted); }
.pricing__billing input:checked + span { background: var(--primary); color: var(--on-primary); }
.pricing__billing input:focus-visible + span { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.js .pricing__panel[data-hidden] { display: none; }
.pricing__panel { display: flex; flex-direction: column; gap: var(--space-6); }
.pricing__panel + .pricing__panel { padding-top: var(--space-7); border-top: 1px solid var(--line); }
.js .pricing__panel + .pricing__panel { padding-top: 0; border-top: 0; }
.pricing__head { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-4) var(--space-5); align-items: center; }
.pricing__status { display: flex; align-items: center; gap: 8px; margin-top: 4px; font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.pricing__intro { font: 400 17px/27px var(--font-sans); color: var(--ink-muted); }
.tile--training { background: var(--brand-lavender); color: var(--brand-purple); }
.tile--training .icon { width: 28px; height: 28px; }
.pricing__calc { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-m); background: var(--surface-tint); }
.pricing__calc label { font: 600 15px/20px var(--font-sans); }
.pricing__calc-row { display: flex; align-items: center; gap: var(--space-5); }
.pricing__calc input[type="range"] { flex: 1; min-width: 0; height: 28px; accent-color: var(--brand-purple); }
.pricing__calc output { min-width: 120px; font: 400 15px/20px var(--font-sans); color: var(--ink-muted); text-align: right; }
.pricing__calc output strong { font: 700 28px/32px var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.pricing__plans { display: grid; gap: var(--space-5); align-items: stretch; }
.pricing__plans--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing__plans--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: 28px; border-radius: var(--radius-l); background: var(--surface-raised); border: 1px solid var(--line); }
.plan--featured { border: 1.5px solid var(--brand-purple); box-shadow: 0 1px 2px rgba(21,16,42,.05), 0 24px 56px rgba(59,31,115,.12); }
.plan__badge { position: absolute; top: -12px; left: 28px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--brand-purple); color: #FFFFFF; font: 600 12px/16px var(--font-sans); letter-spacing: 0.04em; }
.plan__name { font: 600 22px/28px var(--font-display); }
.plan__for { font: 400 14px/22px var(--font-sans); color: var(--ink-muted); min-height: 44px; }
.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 6px; margin-top: var(--space-3); }
.plan__fig { font: 700 40px/44px var(--font-display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.plan__from, .plan__unit { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.plan__sub { font: 400 13px/20px var(--font-sans); color: var(--ink-muted); }
.plan__total { min-height: 20px; font: 600 14px/20px var(--font-sans); color: var(--accent); }
.plan .btn { margin: var(--space-3) 0 var(--space-2); width: 100%; }
.plan__features { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.plan__features li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; font: 400 14px/22px var(--font-sans); color: var(--ink); }
.plan__features .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--brand-purple); }
.pricing__sessions table { width: 100%; border-collapse: collapse; margin-top: var(--space-3); }
.pricing__sessions th, .pricing__sessions td { padding: 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.pricing__sessions th { font: 600 15px/22px var(--font-sans); padding-right: var(--space-5); }
.pricing__sessions th span { display: block; font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.pricing__sessions td { font: 700 18px/22px var(--font-display); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricing__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.pricing__notes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font: 400 14px/22px var(--font-sans); color: var(--ink-muted); }
.pricing__notes li::before { content: "·"; margin-right: 8px; color: var(--accent); font-weight: 700; }
.starter { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-6); align-items: center; padding: var(--space-7); border-radius: var(--radius-l); background: var(--surface-tint); }
.starter > div:first-child { display: flex; flex-direction: column; gap: var(--space-2); }
.starter__price { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.starter__price .btn { margin-top: var(--space-3); }
@media (max-width: 1100px) {
  .pricing__plans--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pricing__head { grid-template-columns: auto minmax(0, 1fr); }
  .pricing__intro { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .pricing__plans--3, .pricing__plans--4 { grid-template-columns: minmax(0, 1fr); }
  .starter { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
  .pricing__tabs { display: none; }
  .js .pricing__tabs { display: flex; width: 100%; overflow-x: auto; }
  .pricing__tab { flex: 1 0 auto; }
  .js .pricing__billing { width: 100%; }
  .pricing__billing label { flex: 1; }
  .pricing__billing span { width: 100%; justify-content: center; }
  .plan__for { min-height: 0; }
}

.plan__pricebox { display: flex; flex-direction: column; gap: 4px; min-height: 112px; justify-content: flex-start; }
.pricing__plans--4 .plan__pricebox, #price-training .plan__pricebox { min-height: 92px; }
@media (max-width: 860px) { .plan__pricebox { min-height: 0; } }

/* =================================================================
   v5: a quieter home hero (dark, floor glow, one button)
   ================================================================= */
.hero--home { overflow: hidden; background: #0E0A1D; padding-top: var(--space-8); }
.night--home::before { background: none; }
.hero__floor { position: absolute; left: 50%; bottom: -38%; width: 140%; height: 70%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(217, 204, 255, 0.30) 0%, rgba(109, 40, 217, 0.20) 34%, rgba(14, 10, 29, 0) 70%); }
.hero--home .hero-grid { position: relative; align-items: center; }
.hero--home .hero__inner { gap: var(--space-4); }
.hero--home h1 { letter-spacing: -0.03em; }
.hero--home .lead { max-width: 30ch; color: rgba(255, 255, 255, 0.78); }
.hero-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; margin: 0; padding: 4px 14px 4px 4px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); font: 500 13px/20px var(--font-sans); color: rgba(255, 255, 255, 0.86); }
.hero-tag__new { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--brand-lavender); color: var(--brand-night); font: 700 11px/18px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.hero--home .btn--primary { background: #FFFFFF; color: var(--brand-night); }
.hero--home .btn--primary:hover { background: var(--brand-lavender); color: var(--brand-night); }
.hero--home .btn-row { margin-top: var(--space-3); }
/* the art: orbits only, one quiet caption beneath */
.hero--home .nucleus { gap: var(--space-3); }
.hero--home .nucleus__panel { border-top: 0; padding-top: 0; flex-direction: row; align-items: center; justify-content: center; gap: var(--space-3); }
.hero--home .nucleus__items { flex: 0 1 auto; }
.hero--home .nucleus__item { grid-template-columns: auto; justify-items: center; text-align: center; }
.hero--home .nucleus__num { display: none; }
.hero--home .nucleus__item a { min-height: 0; align-items: center; }
.hero--home .nucleus__item a strong { font-size: 17px; }
.hero--home .nucleus__item a span { font-size: 14px; line-height: 20px; max-width: 40ch; }
.hero--home .nucleus__controls { flex: none; }
.hero--home .nucleus__centre { color: var(--brand-lavender); font-size: 12px; letter-spacing: 0.2em; }
@media (max-width: 960px) {
  .hero__floor { bottom: -20%; height: 50%; }
  .hero--home .lead { max-width: none; }
}

/* =================================================================
   v5: training price builder
   ================================================================= */
.tb { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.tb__inputs { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-m); background: var(--surface-tint); }
.tb__field { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.tb__field > label, .tb__field > legend { padding: 0; font: 600 15px/20px var(--font-sans); color: var(--ink); }
.tb__field > legend { margin-bottom: var(--space-2); }
.tb__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
.tb select, .tb input[type="number"] { width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--line-strong, #C9C2D9); border-radius: 10px; background: var(--surface-raised, #fff); color: var(--ink); font: 500 16px/24px var(--font-sans); }
.tb input[type="number"] { font: 600 20px/24px var(--font-display); font-variant-numeric: tabular-nums; }
.tb select:focus-visible, .tb input:focus-visible { outline: 3px solid var(--brand-violet); outline-offset: 2px; }
.tb__hint { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.tb-formats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.tb-format { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-raised, #fff); cursor: pointer; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.tb-format input, .tb-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tb-format:has(input:checked) { border-color: var(--brand-purple); box-shadow: inset 0 0 0 1px var(--brand-purple); }
.tb-format:has(input:focus-visible), .tb-chip:has(input:focus-visible) { outline: 3px solid var(--brand-violet); outline-offset: 2px; }
.tb-format__name { font: 600 16px/22px var(--font-display); color: var(--ink); }
.tb-format__sub { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.tb-format__rate { margin-top: var(--space-2); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.tb-format__rate strong { display: block; font: 700 22px/28px var(--font-display); color: var(--brand-purple); font-variant-numeric: tabular-nums; }
.tb-chips { display: flex; gap: var(--space-2); }
.tb-chip { position: relative; flex: 1; }
.tb-chip span { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-raised, #fff); font: 600 15px/20px var(--font-sans); color: var(--ink); cursor: pointer; }
.tb-chip input:checked + span { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }
.tb__quote { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) var(--space-5); border-radius: var(--radius-m); background: var(--brand-night); color: #fff; }
.tb__quote .kicker { color: var(--brand-lavender); margin: 0; }
.tb__total { margin: 0; font: 700 48px/52px var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tb__pp { margin: 0; font: 400 14px/20px var(--font-sans); color: rgba(255, 255, 255, 0.72); }
.tb__lines { margin: var(--space-2) 0 0; padding: var(--space-3) 0 0; border-top: 1px solid rgba(217, 204, 255, 0.2); display: flex; flex-direction: column; gap: 8px; }
.tb__lines div { display: flex; justify-content: space-between; gap: var(--space-3); font: 400 14px/20px var(--font-sans); }
.tb__lines dt { color: rgba(255, 255, 255, 0.72); }
.tb__lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.tb__note { margin: 0; min-height: 20px; font: 400 13px/18px var(--font-sans); color: var(--brand-lavender); }
.tb__quote .btn--primary { background: #fff; color: var(--brand-night); align-self: stretch; justify-content: center; }
.tb__quote .btn--primary:hover { background: var(--brand-lavender); }
.pricing__bar .pricing__billing[hidden] { display: none; }
.pricing__panel > .pricing__calc { margin-bottom: var(--space-5); }
.pricing__sessions td span { display: block; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
@media (max-width: 960px) {
  .tb { grid-template-columns: minmax(0, 1fr); }
  .tb__quote { position: static; }
}
@media (max-width: 600px) {
  .tb-formats, .tb__row { grid-template-columns: minmax(0, 1fr); }
  .tb__inputs { padding: var(--space-4); }
  .tb__total { font-size: 40px; line-height: 44px; }
}
.night--home { background: #0E0A1D; }
.night--home .hero--home { background: transparent; }
/* Official product marks: drawn upright, no rotation; CORE is drawn 12% larger in its own file */
.tile--core .tile__mark { transform: none; }
.tile__mark { width: 64%; height: 64%; }

/* =================================================================
   v6: studio hero. Black room, lavender light on the floor, one object.
   ================================================================= */
.night--home { background: #050409; }
.night--home .site-header { background: transparent; }
.hero--home { background:
    radial-gradient(70% 55% at 72% 112%, rgba(217, 204, 255, 0.62) 0%, rgba(160, 146, 214, 0.34) 30%, rgba(59, 31, 115, 0.16) 58%, rgba(5, 4, 9, 0) 80%),
    linear-gradient(180deg, #050409 0%, #07060E 55%, #110C22 100%) !important;
  padding-top: var(--space-7); }
.hero__floor { display: none; }
.hero-tag { padding: 0; border: 0; background: none; gap: 12px; }
.hero-tag__new { border-radius: 4px; padding: 3px 10px; background: var(--brand-violet); color: #FFFFFF; font: 600 13px/18px var(--font-sans); letter-spacing: 0; text-transform: none; }
.hero--home h1 { font-weight: 600; }
.hero--home h1 em { color: var(--brand-lavender); }
.hero--home .lead { color: rgba(255, 255, 255, 0.82); }
.hero--home .btn--primary { border-radius: 8px; }
.hero-curve--home, .night--home .hero-curve { display: none; }

.showcase { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(16px, 2.4vw, 36px);
  width: 100%; max-width: 560px; margin-left: auto; padding: 48px 0 56px; }
.showcase__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; text-decoration: none; color: rgba(255, 255, 255, 0.62); }
.showcase__item--core { width: 46%; z-index: 2; }
.showcase__item--guard, .showcase__item--live { width: 24%; margin-bottom: 4%; opacity: 0.92; }
.showcase__icon { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 22.4%;
  transition: transform 500ms var(--ease);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.05) inset, 0 50px 70px -30px rgba(0, 0, 0, 0.85), 0 18px 30px -18px rgba(0, 0, 0, 0.7); }
.showcase__item--core .showcase__icon { transform: perspective(900px) rotateY(-14deg) rotateX(4deg); }
.showcase__item--guard .showcase__icon { transform: perspective(900px) rotateY(16deg); }
.showcase__item--live .showcase__icon { transform: perspective(900px) rotateY(-16deg); }
.showcase__icon img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.showcase__icon::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.04) 36%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.25) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10); }
/* contact shadow where each object meets the floor */
.showcase__icon::before { content: ""; position: absolute; left: 6%; right: 6%; bottom: -14px; height: 22px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)); filter: blur(4px); z-index: -1; }
.showcase__name { font: 600 11px/16px var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase; color: rgba(21, 16, 42, 0.0); }
.showcase__item .showcase__name { color: rgba(255, 255, 255, 0.7); }
.showcase__item:hover .showcase__icon, .showcase__item:focus-visible .showcase__icon { transform: perspective(900px) rotateY(0deg) translateY(-6px); }
.showcase__item:hover .showcase__name, .showcase__item:focus-visible .showcase__name { color: #FFFFFF; }
.showcase__item:focus-visible { outline: none; }
.showcase__item:focus-visible .showcase__icon { outline: 3px solid var(--brand-lavender); outline-offset: 6px; }
@media (prefers-reduced-motion: no-preference) {
  .js .showcase__item { animation: rise 900ms var(--ease) both; }
  .js .showcase__item--guard { animation-delay: 140ms; }
  .js .showcase__item--live { animation-delay: 240ms; }
}
@media (max-width: 960px) {
  .showcase { margin: 0 auto; max-width: 440px; padding-top: 16px; }
  .hero--home { background:
    radial-gradient(90% 40% at 50% 104%, rgba(217, 204, 255, 0.55) 0%, rgba(160, 146, 214, 0.28) 34%, rgba(5, 4, 9, 0) 78%),
    linear-gradient(180deg, #050409 0%, #0B0817 100%) !important; }
}