/* =========================================================
   LUME · main stylesheet
   Mobile-first · layered cascade · scroll-driven enhancement.
   ========================================================= */

@import url("./tokens.css");

@layer reset, base, layout, components, sections, utilities;

/* ---------- RESET ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html {
    -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
    scroll-behavior: smooth;
    height: 100%;
    /* clear the sticky stack (ticker 32 + nav ~64) when anchor links land mid-page · also covers WCAG 2.4.11 Focus Not Obscured */
    scroll-padding-top: 110px;
  }
  /* Safari falls back to per-target scroll-margin-top outside scroll-snap contexts */
  :where(section[id], [id^="section-"]) { scroll-margin-top: 110px; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  textarea { resize: vertical; field-sizing: content; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }
  a { color: inherit; text-underline-offset: 0.2em; }
  ::selection { background: var(--selection); color: var(--fg); }
}

/* ---------- BASE ---------- */
@layer base {
  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: var(--fs-body);
    overflow-x: clip;
    min-height: 100svh;
    font-feature-settings: "ss01", "cv11";
  }

  .mono, [data-mono] {
    font-family: var(--mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-feature-settings: "tnum", "zero";
    color: var(--fg-mute);
  }

  h1, .h1 {
    font-family: var(--sans);
    font-size: var(--fs-h1);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.04em;
    text-wrap: balance;
  }
  h2, .h2 {
    font-size: var(--fs-h2);
    font-weight: 600;
    line-height: 1.0;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }
  h3, .h3 {
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .lead {
    font-size: var(--fs-lead);
    line-height: 1.4;
    color: var(--fg-quiet);
    text-wrap: pretty;
    max-width: 60ch;
    font-weight: 400;
  }

  .accent { color: var(--accent); }

  .kicker {
    font-family: var(--mono);
    font-size: var(--fs-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
  }
  .kicker::before {
    content: "";
    display: inline-block;
    width: 24px; height: 1px;
    background: var(--accent);
  }
}

/* ---------- LAYOUT ---------- */
@layer layout {
  .frame {
    width: 100%;
    max-width: var(--max-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  section.scope {
    padding-block: var(--s-8);
    scroll-margin-top: 110px;
  }
  @media (min-width: 1024px) { section.scope { padding-block: var(--s-9); } }

  .stack > * + * { margin-block-start: var(--s-5); }
  .stack-tight > * + * { margin-block-start: var(--s-3); }
  .stack-loose > * + * { margin-block-start: var(--s-7); }
}

/* ---------- COMPONENTS ---------- */
@layer components {

  /* TICKER */
  .ticker {
    position: sticky; top: 0; z-index: var(--z-nav);
    background: color-mix(in oklch, var(--bg) 88%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
    height: 32px;
    display: flex; align-items: center;
    transform: translateZ(0);
    padding-top: env(safe-area-inset-top, 0);
  }
  .ticker-mask {
    flex: 1;
    overflow: hidden;
    /* edge fade so items don't pop at the boundaries */
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      black var(--s-6),
      black calc(100% - var(--s-6)),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      black var(--s-6),
      black calc(100% - var(--s-6)),
      transparent 100%);
  }
  .ticker-track {
    display: inline-flex; gap: var(--s-7);
    white-space: nowrap;
    will-change: transform;
    /* loop distance accounts for the gap between duplicated sets - fixes seam jump */
    animation: ticker-roll 70s linear infinite;
  }
  .ticker:hover .ticker-track {
    animation-play-state: paused;
  }
  .ticker-item { padding-inline: var(--s-3); }
  .ticker-item::before {
    content: "●"; color: var(--accent);
    padding-right: var(--s-3);
    font-size: 0.5em; vertical-align: middle;
  }
  @keyframes ticker-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--s-7) / 2)); }
  }
  /* WCAG 2.2.2 user-initiated pause control */
  .ticker-pause {
    position: absolute;
    right: var(--s-3);
    top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in oklch, var(--bg) 70%, transparent);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    color: var(--fg-mute);
    cursor: pointer;
    z-index: 1;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
  }
  .ticker-pause:hover, .ticker-pause:focus-visible {
    color: var(--accent);
    border-color: var(--accent);
    outline: none;
  }
  .ticker-pause svg { width: 10px; height: 10px; }
  /* WCAG 2.3.3 / 2.2.2 - fully halt motion for users who request it */
  @media (prefers-reduced-motion: reduce) {
    .ticker-track { animation: none; transform: none; }
    .ticker-pause { display: none; }
  }

  /* NAV */
  .nav {
    position: sticky;
    top: 32px;
    z-index: var(--z-nav);
    background: color-mix(in oklch, var(--bg) 80%, transparent);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--rule);
    /* Safari · promote to its own compositor layer so sticky stays anchored across long pages */
    transform: translateZ(0);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-4) var(--gutter);
    gap: var(--s-4);
    max-width: var(--max-w);
    margin-inline: auto;
  }
  .wordmark {
    display: inline-flex; align-items: baseline; gap: 2px;
    font: 700 1.125rem/1 var(--sans);
    letter-spacing: -0.02em;
    text-decoration: none;
  }
  /* native <sup> handles the raise; we just color and size it */
  sup.lume3d {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-left: 0.06em;
  }
  .hero-mega sup.lume3d {
    font-size: 0.30em;
    vertical-align: top;
    line-height: 1;
    display: inline-block;
    margin-top: 0.06em;
    margin-left: 0.08em;
  }
  .foot-mark sup.lume3d { font-size: 0.45em; }
  .wordmark sup.lume3d { font-size: 0.65em; }
  .wordmark .small {
    font: 500 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.06em;
    color: var(--fg-mute);
    margin-left: var(--s-3);
    text-transform: uppercase;
  }
  .nav-actions { display: flex; align-items: center; gap: var(--s-3); }
  @media (max-width: 720px) {
    .wordmark .small { display: none; }
  }

  /* BUTTONS */
  .btn {
    display: inline-flex; align-items: center; gap: var(--s-3);
    padding: 0.85rem 1.35rem;
    font: 600 0.95rem/1 var(--sans);
    letter-spacing: -0.01em;
    border-radius: var(--r-pill);
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
    min-height: 44px;
    white-space: nowrap;
    cursor: pointer;
  }
  .btn-primary {
    background: var(--accent);
    color: var(--accent-fg);
    box-shadow: var(--shadow-flame);
  }
  .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 0 0 1px var(--accent), 0 16px 50px -10px var(--glow); }
  .btn-ghost {
    background: transparent; color: var(--fg);
    border-color: var(--rule-2);
  }
  .btn-ghost:hover { background: var(--surface-2); border-color: var(--fg); }
  .btn-sm { padding: 0.55rem 0.95rem; font-size: 0.85rem; min-height: 36px; }
  .btn-arrow::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
  .btn-arrow:hover::after { transform: translateX(3px); }

  /* TOGGLES */
  .seg {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: var(--r-pill);
    padding: 3px;
    gap: 0;
  }
  .seg button, .seg .seg-btn {
    padding: 0.4rem 0.7rem;
    font: 600 0.78rem/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
    color: var(--fg-mute);
    min-width: 40px;
    min-height: 30px;
    display: inline-grid;
    place-items: center;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .seg button[aria-current="true"], .seg .seg-btn[aria-current="true"] { background: var(--surface); color: var(--fg); box-shadow: var(--shadow-1); }

  .icon-btn {
    width: 38px; height: 38px;
    border-radius: var(--r-pill);
    display: grid; place-items: center;
    border: 1px solid var(--rule-2);
    color: var(--fg);
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .icon-btn:hover { border-color: var(--fg); background: var(--surface-2); }
  .icon-btn svg { width: 16px; height: 16px; }

  /* CARDS */
  .card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-6);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-mid) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out);
    display: flex; flex-direction: column; gap: var(--s-4);
    position: relative; overflow: hidden;
  }
  .card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--rule-2);
  }
  .card-num {
    font: 600 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.06em;
    color: var(--fg-mute);
  }
  .card-title { font: 600 1.5rem/1.1 var(--sans); letter-spacing: -0.02em; }
  .card-text { color: var(--fg-quiet); }

  /* TAGS */
  .tag {
    display: inline-flex; align-items: center;
    padding: 0.3rem 0.7rem;
    font: 500 0.72rem/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-mute);
    background: var(--surface-2);
    border-radius: var(--r-pill);
    border: 1px solid var(--rule);
  }
  .tag-list { display: flex; flex-wrap: wrap; gap: var(--s-2); }

  /* MARQUEE */
  .marquee {
    overflow: hidden;
    border-block: 1px solid var(--rule);
    padding-block: var(--s-5);
    background: var(--surface);
    /* edge fade so giant glyphs don't pop at borders */
    -webkit-mask-image: linear-gradient(to right,
      transparent 0,
      black var(--s-7),
      black calc(100% - var(--s-7)),
      transparent 100%);
    mask-image: linear-gradient(to right,
      transparent 0,
      black var(--s-7),
      black calc(100% - var(--s-7)),
      transparent 100%);
  }
  .marquee-track {
    display: inline-flex;
    gap: var(--s-7);
    white-space: nowrap;
    /* seam math: -50% of doubled width is short by half-gap; correct for it */
    animation: marquee-roll 38s linear infinite;
    will-change: transform;
  }
  .marquee:hover .marquee-track,
  .marquee:focus-within .marquee-track {
    animation-play-state: paused;
  }
  .marquee-item {
    font: 700 clamp(2rem, 1.2rem + 4vw, 4rem)/1 var(--sans);
    letter-spacing: -0.03em;
    color: var(--fg);
  }
  .marquee-item.alt { color: var(--accent); }
  .marquee-item.dim { color: var(--fg-mute); }
  @keyframes marquee-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-50% - var(--s-7) / 2)); }
  }
  /* WCAG 2.2.2 - full motion stop */
  @media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; transform: none; }
  }
  /* unified user-controlled pause: covers ticker + marquee + any future motion */
  body.motion-paused .ticker-track,
  body.motion-paused .marquee-track {
    animation-play-state: paused;
  }
}

/* ---------- SECTIONS ---------- */
@layer sections {

  /* === HERO === */
  .hero {
    position: relative;
    min-height: calc(100svh - 32px);
    display: grid;
    place-items: center;
    overflow: clip;
    padding: var(--s-8) var(--gutter);
    isolation: isolate;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 60% at 50% 35%, color-mix(in oklch, var(--accent) 35%, transparent) 0%, transparent 60%),
      radial-gradient(ellipse 40% 30% at 80% 90%, color-mix(in oklch, var(--indigo) 25%, transparent) 0%, transparent 70%),
      var(--bg);
    z-index: -2;
    animation: ember 14s ease-in-out infinite alternate;
  }
  @keyframes ember {
    from { transform: scale(1) translate(0, 0); filter: hue-rotate(0deg); }
    to   { transform: scale(1.08) translate(-2%, 2%); filter: hue-rotate(8deg); }
  }
  @media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; } }

  .hero-canvas {
    position: absolute; inset: 0;
    z-index: -1;
    opacity: 0;
    transition: opacity 1.4s var(--ease-out);
  }
  .hero-canvas[data-loaded="true"] { opacity: 0.4; }
  .hero-canvas, .hero-canvas canvas {
    pointer-events: none;
    width: 100% !important;
    height: 100% !important;
  }

  .hero-grid-fade {
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, transparent 60%, var(--bg) 100%),
      repeating-linear-gradient(0deg, transparent 0, transparent 39px, color-mix(in oklch, var(--fg) 4%, transparent) 39px, color-mix(in oklch, var(--fg) 4%, transparent) 40px),
      repeating-linear-gradient(90deg, transparent 0, transparent 39px, color-mix(in oklch, var(--fg) 4%, transparent) 39px, color-mix(in oklch, var(--fg) 4%, transparent) 40px);
    z-index: -1;
    pointer-events: none;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  }

  .hero-frame {
    text-align: center;
    max-width: 1100px;
    display: grid; gap: var(--s-6);
    padding-block: var(--s-7);
  }

  .hero-mega {
    font-family: var(--sans);
    font-weight: 700;
    font-size: var(--fs-mega);
    line-height: 0.84;
    letter-spacing: -0.06em;
    color: var(--fg);
    view-transition-name: hero-mega;
    background: linear-gradient(180deg,
      var(--fg) 0%,
      var(--fg) 60%,
      color-mix(in oklch, var(--fg) 50%, transparent) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 80px color-mix(in oklch, var(--accent) 30%, transparent);
  }
  .hero-mega .dot { color: var(--accent); -webkit-text-fill-color: var(--accent); }

  .hero-tagline {
    font: 600 clamp(1.5rem, 1.0rem + 2.0vw, 2.5rem)/1.05 var(--sans);
    letter-spacing: -0.025em;
    color: var(--fg);
  }
  .hero-tagline em { font-style: normal; color: var(--accent); }

  .hero-sub {
    color: var(--fg-quiet);
    max-width: 56ch;
    margin-inline: auto;
    font-size: var(--fs-lead);
    text-wrap: pretty;
  }

  .hero-cta {
    display: flex; gap: var(--s-3); flex-wrap: wrap;
    justify-content: center;
    margin-block-start: var(--s-3);
  }

  /* === STATE / 02 === */
  .compare-card {
    border-radius: var(--r-3);
    padding: var(--s-6);
    border: 1px solid var(--rule);
    background: var(--surface);
    display: flex; flex-direction: column; gap: var(--s-4);
    min-height: 320px;
    position: relative; overflow: hidden;
  }
  .compare-card.is-hero {
    background: linear-gradient(150deg, color-mix(in oklch, var(--accent) 18%, var(--surface)) 0%, var(--surface) 80%);
    border-color: color-mix(in oklch, var(--accent) 40%, transparent);
    box-shadow: var(--shadow-flame);
  }
  .compare-card h3 { font-size: 1.6rem; }
  .compare-icon {
    width: 96px; height: 60px;
    color: var(--fg-quiet);
    margin-block-end: var(--s-3);
  }
  .compare-card.is-hero .compare-icon { color: var(--accent); }
  .compare-icon svg { width: 100%; height: 100%; }
  .feature-list { display: grid; gap: var(--s-2); margin-block-start: auto; }
  .feature-list li {
    list-style: none;
    display: flex; align-items: center; gap: var(--s-2);
    color: var(--fg-quiet); font-size: 0.95rem;
  }
  .feature-list li.no::before { content: "×"; color: var(--fg-mute); margin-right: 6px; }
  .feature-list li.yes::before { content: "✓"; color: var(--accent); margin-right: 6px; font-weight: 700; }

  /* === EVOLUTION TIMELINE / 02 === */
  .evo-timeline {
    position: relative;
    list-style: none;
    margin-block-start: var(--s-9);
    padding-inline-start: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
  .evo-node {
    list-style: none;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .evo-era {
    display: block;
    text-align: center;
    font: 500 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.12em;
    color: var(--fg-mute);
    margin-block-end: var(--s-4);
    transition: color 0.25s ease;
  }
  .evo-node.is-now .evo-era { color: var(--accent); }
  .evo-rail {
    position: relative;
    height: 24px;
    margin-block-end: var(--s-5);
  }
  .evo-rail::before,
  .evo-rail::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    background: var(--rule);
    transform: translateY(-0.5px);
  }
  .evo-rail::before { left: 0; right: calc(50% + 8px); }
  .evo-rail::after  { left: calc(50% + 8px); right: 0; }
  .evo-node:first-child .evo-rail::before { display: none; }
  .evo-node:last-child  .evo-rail::after  { display: none; }
  /* accent the segment leading INTO the now-node */
  .evo-node.is-now .evo-rail::before {
    background: linear-gradient(to right,
      var(--rule) 0%,
      color-mix(in oklch, var(--accent) 80%, transparent) 100%);
    height: 1.5px;
  }
  .evo-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--surface);
    border: 1.5px solid var(--rule-2);
    z-index: 1;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .evo-node.is-now .evo-dot {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow:
      0 0 0 4px color-mix(in oklch, var(--accent) 22%, transparent),
      0 0 32px color-mix(in oklch, var(--accent) 60%, transparent);
  }
  .evo-card { min-height: 320px; }
  /* dim the older nodes' card subtly */
  .evo-node:not(.is-now) .evo-card { opacity: 0.92; }

  @media (max-width: 1024px) {
    .evo-timeline { grid-template-columns: 1fr 1fr; }
    .evo-timeline > :nth-child(3) { grid-column: 1 / -1; }
    /* rail no longer makes spatial sense across rows; suppress segments, keep dots */
    .evo-rail::before, .evo-rail::after { display: none; }
  }
  @media (max-width: 640px) {
    .evo-timeline {
      grid-template-columns: 1fr;
      gap: var(--s-7);
      position: relative;
    }
    .evo-timeline > :nth-child(3) { grid-column: auto; }
    /* continuous vertical track through the whole timeline */
    .evo-timeline::before {
      content: "";
      position: absolute;
      left: 5px;
      top: 8px;
      bottom: 8px;
      width: 1px;
      background: var(--rule);
    }
    .evo-node {
      position: relative;
      padding-inline-start: var(--s-6);
    }
    /* drop the horizontal rail entirely on mobile */
    .evo-rail { display: none; }
    /* dot rendered via pseudo on the node so it sits on the vertical track */
    .evo-node::before {
      content: "";
      position: absolute;
      left: 0;
      top: 4px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: var(--surface);
      border: 1.5px solid var(--rule-2);
      z-index: 1;
      box-shadow: 0 0 0 4px var(--bg);
    }
    .evo-node.is-now::before {
      width: 14px;
      height: 14px;
      left: -1px;
      background: var(--accent);
      border-color: var(--accent);
      box-shadow:
        0 0 0 4px var(--bg),
        0 0 0 8px color-mix(in oklch, var(--accent) 22%, transparent);
    }
    /* accent the segment leading INTO the now-node */
    .evo-node.is-now::after {
      content: "";
      position: absolute;
      left: 5px;
      top: calc(-1 * var(--s-7));
      height: var(--s-7);
      width: 1.5px;
      background: linear-gradient(to bottom,
        var(--rule) 0%,
        color-mix(in oklch, var(--accent) 80%, transparent) 100%);
      z-index: 0;
    }
    .evo-era { text-align: start; }
  }

  /* === SIX WORLDS / 03 === */
  .worlds-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-5); margin-block-end: var(--s-7); }
  .worlds-head h2 { max-width: 22ch; }
  .worlds-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
  }
  @media (max-width: 980px) { .worlds-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 600px) { .worlds-grid { grid-template-columns: 1fr; } }

  .world-card {
    --world-accent: var(--accent);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: 0;
    overflow: hidden;
    transition: transform var(--dur-mid) var(--ease-out),
                box-shadow var(--dur-mid) var(--ease-out),
                border-color var(--dur-mid) var(--ease-out);
    display: flex; flex-direction: column;
    color: inherit;
  }
  .world-card:hover, .world-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
    border-color: color-mix(in oklch, var(--world-accent) 50%, var(--rule));
  }
  .world-banner {
    aspect-ratio: 16 / 10;
    background: var(--surface-2);
    position: relative;
    overflow: hidden;
    border: 0;
    border-block-end: 1px solid var(--rule);
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    display: block;
    width: 100%;
    font: inherit;
  }
  .world-banner:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }
  .world-thumb {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--dur-mid) var(--ease-out), filter var(--dur-mid) var(--ease-out);
    filter: brightness(0.92) saturate(1.05);
  }
  .world-card:hover .world-thumb,
  .world-banner:focus-visible .world-thumb { transform: scale(1.04); filter: brightness(1.02) saturate(1.1); }
  .world-banner-num {
    position: absolute;
    inset-inline-end: var(--s-5);
    inset-block-end: var(--s-3);
    font: 700 clamp(3rem, 2.4rem + 3vw, 5rem)/0.85 var(--sans);
    letter-spacing: -0.06em;
    color: color-mix(in oklch, var(--world-accent) 70%, var(--bg));
    text-shadow: 0 2px 12px rgba(0,0,0,0.45);
    pointer-events: none;
  }
  .world-play {
    position: absolute;
    inset-block-start: var(--s-4);
    inset-inline-start: var(--s-4);
    width: 44px; height: 44px;
    border-radius: 999px;
    background: color-mix(in oklch, var(--bg) 70%, transparent);
    backdrop-filter: blur(8px);
    display: grid; place-items: center;
    color: var(--fg);
    transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
    pointer-events: none;
  }
  .world-play svg { width: 26px; height: auto; }
  .world-card:hover .world-play,
  .world-banner:focus-visible .world-play {
    transform: scale(1.08);
    background: var(--world-accent);
    color: var(--bone);
  }
  .world-walk-cta {
    position: absolute;
    inset-inline-start: var(--s-4);
    inset-block-end: var(--s-3);
    font: 500 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bone);
    background: color-mix(in oklch, var(--bg) 60%, transparent);
    backdrop-filter: blur(6px);
    padding: 0.4em 0.7em;
    border-radius: var(--r-1);
    pointer-events: none;
  }

  .world-body {
    padding: var(--s-6);
    display: flex; flex-direction: column;
    gap: var(--s-4);
    flex: 1;
  }
  .world-num { font: 500 var(--fs-mono)/1 var(--mono); letter-spacing: 0.06em; color: var(--world-accent); }
  .world-title { font: 600 clamp(1.5rem, 1.2rem + 0.8vw, 1.85rem)/1.05 var(--sans); letter-spacing: -0.025em; }
  .world-text { color: var(--fg-quiet); font-size: 0.95rem; line-height: 1.45; }
  .world-foot {
    margin-block-start: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--rule);
  }
  .world-ref-badge {
    font: 500 0.65rem/1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-mute);
  }
  .world-arrow {
    display: inline-flex; align-items: center; gap: var(--s-2);
    font: 600 0.85rem/1 var(--sans);
    color: var(--world-accent);
    text-transform: uppercase; letter-spacing: 0.04em;
    text-decoration: none;
  }
  .world-arrow::after { content: "→"; transition: transform var(--dur-fast) var(--ease-out); }
  .world-card:hover .world-arrow::after { transform: translateX(4px); }

  .worlds-note {
    margin-block-start: var(--s-7);
    padding: var(--s-6) var(--s-7);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    color: var(--fg-quiet);
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: left;
  }
  @media (min-width: 900px) {
    .worlds-note {
      font-size: 1rem;
      padding: var(--s-7) var(--s-8);
    }
  }
  .worlds-note::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--accent);
    margin-block-end: var(--s-3);
  }

  .world-card[data-w="01"] { --world-accent: oklch(0.68 0.20 38); }
  .world-card[data-w="02"] { --world-accent: oklch(0.56 0.18 280); }
  .world-card[data-w="03"] { --world-accent: oklch(0.48 0.20 20); }
  .world-card[data-w="04"] { --world-accent: oklch(0.70 0.17 70); }
  .world-card[data-w="05"] { --world-accent: oklch(0.62 0.17 200); }
  .world-card[data-w="06"] { --world-accent: oklch(0.62 0.16 145); }

  /* === METHOD / 04 === */
  .method-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin-block-start: var(--s-7);
    counter-reset: step;
  }
  @media (max-width: 900px) { .method-grid { grid-template-columns: 1fr; } }

  .step {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-7) var(--s-6) var(--s-6);
    position: relative;
    counter-increment: step;
    display: flex; flex-direction: column; gap: var(--s-4);
    transition: border-color var(--dur-mid) var(--ease-out), transform var(--dur-mid) var(--ease-out);
  }
  .step:hover { transform: translateY(-3px); border-color: var(--accent); }
  .step::before {
    content: "0" counter(step);
    position: absolute;
    top: var(--s-5);
    inset-inline-end: var(--s-5);
    font: 700 clamp(2.6rem, 1.6rem + 3vw, 4rem)/1 var(--sans);
    letter-spacing: -0.05em;
    color: color-mix(in oklch, var(--accent) 70%, transparent);
  }
  .step h3 { font-size: 1.6rem; max-width: 12ch; }
  .step-icon {
    width: 44px; height: 44px;
    border-radius: var(--r-2);
    background: color-mix(in oklch, var(--accent) 15%, transparent);
    color: var(--accent);
    display: grid; place-items: center;
  }
  .step-icon svg { width: 22px; height: 22px; }
  .step-meta {
    margin-block-start: auto; padding-block-start: var(--s-4);
    border-block-start: 1px dashed var(--rule);
    color: var(--fg-mute);
    font: 500 var(--fs-mono)/1.4 var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* === FUNDING / 05 === */
  .funding {
    background: linear-gradient(135deg, color-mix(in oklch, var(--accent) 16%, var(--bg)) 0%, var(--bg) 60%);
    border: 1px solid color-mix(in oklch, var(--accent) 30%, transparent);
    border-radius: var(--r-4);
    padding: var(--s-9) var(--s-7);
    margin-block-start: var(--s-7);
  }
  @media (max-width: 800px) { .funding { padding: var(--s-7) var(--s-5); } }
  .stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
    margin-block-start: var(--s-7);
  }
  @media (max-width: 980px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }
  .stat {
    display: flex; flex-direction: column; gap: var(--s-2);
    padding-block-start: var(--s-4);
    border-block-start: 2px solid var(--accent);
  }
  .stat-num {
    font: 700 clamp(2.5rem, 1.8rem + 3vw, 4rem)/0.9 var(--sans);
    letter-spacing: -0.04em;
    color: var(--fg);
  }
  .stat-num small { font-size: 0.5em; color: var(--accent); font-weight: 600; }
  .stat-label { font: 500 var(--fs-mono)/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-mute); max-width: 22ch; }
  .funding-prog { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-7); }
  .funding-prog .tag { background: var(--surface); }

  /* === CONTACT === */
  .contact-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--s-7);
    margin-block-start: var(--s-7);
    align-items: start;
  }
  @media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
  .contact-aside { display: flex; flex-direction: column; gap: var(--s-5); }
  .contact-aside a { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border: 1px solid var(--rule); border-radius: var(--r-2); text-decoration: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
  .contact-aside a:hover { background: var(--surface-2); border-color: var(--accent); }
  .contact-aside a strong { display: block; font: 600 0.95rem/1.3 var(--sans); }
  .contact-aside a span { display: block; font: 500 var(--fs-mono)/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-mute); margin-top: 2px; }

  .contact-form {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-7);
    display: grid; gap: var(--s-5);
  }
  .field { display: grid; gap: var(--s-2); }
  .field label { font: 500 var(--fs-mono)/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-mute); }
  .field input, .field select, .field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--bg);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-2);
    color: var(--fg);
    font-size: 1rem;
    transition: border-color var(--dur-fast) var(--ease-out);
    min-height: 44px;
  }
  .field textarea { min-height: 120px; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 15%, transparent);
  }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  @media (max-width: 600px) { .field-row { grid-template-columns: 1fr; } }
  .form-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; }
  .form-foot small { color: var(--fg-mute); font-size: 0.85rem; max-width: 32ch; }

  /* === FOOTER === */
  footer.foot {
    border-top: 1px solid var(--rule);
    padding: var(--s-9) var(--gutter) var(--s-7);
    margin-block-start: var(--s-9);
  }
  .foot-inner {
    max-width: var(--max-w);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: var(--s-7);
    align-items: end;
  }
  @media (max-width: 800px) {
    .foot-inner { grid-template-columns: 1fr; align-items: start; gap: var(--s-5); }
  }
  .foot-brand .foot-mark {
    font: 700 clamp(3rem, 2rem + 4vw, 5rem)/0.9 var(--sans);
    letter-spacing: -0.05em;
  }
  .foot-brand p { color: var(--fg-quiet); margin-top: var(--s-3); }
  .foot-contact {
    display: flex; flex-direction: column;
    gap: var(--s-2);
  }
  .foot-contact a {
    text-decoration: none;
    color: var(--fg);
    font-weight: 500;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .foot-contact a:hover { color: var(--accent); }
  .foot-legal-nav {
    display: flex; flex-direction: column;
    gap: var(--s-2);
  }
  .foot-legal-nav a {
    text-decoration: none;
    font: 500 var(--fs-mono)/1.4 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-mute);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .foot-legal-nav a:hover { color: var(--accent); }

  /* Required by DL 59/2021 · phone tariff notice */
  .phone-note {
    display: block;
    margin-top: var(--s-1);
    font: 500 0.7rem/1.4 var(--mono);
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--fg-mute);
    font-style: italic;
  }
  .phone-note--inline {
    margin-top: 4px;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-style: normal;
  }
  .foot-prefs {
    max-width: var(--max-w);
    margin-inline: auto;
    margin-block-start: var(--s-7);
    display: flex; align-items: center; gap: var(--s-3);
    flex-wrap: wrap;
  }
  .foot-base {
    max-width: var(--max-w);
    margin-inline: auto;
    margin-block-start: var(--s-5);
    padding-block-start: var(--s-5);
    border-block-start: 1px solid var(--rule);
    display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
    color: var(--fg-mute);
    font-size: 0.82rem;
  }
}

/* ---------- NEW SECTIONS ---------- */
@layer sections {

  /* === PRICING === */
  .price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    margin-block-start: var(--s-7);
  }
  @media (max-width: 920px) { .price-grid { grid-template-columns: 1fr; } }
  .price-tier {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-7);
    display: flex; flex-direction: column; gap: var(--s-4);
    position: relative;
    transition: transform var(--dur-mid) var(--ease-out), border-color var(--dur-mid) var(--ease-out);
  }
  .price-tier:hover { transform: translateY(-3px); border-color: var(--accent); }
  .price-tier.is-feat {
    background: linear-gradient(160deg, color-mix(in oklch, var(--accent) 14%, var(--surface)) 0%, var(--surface) 60%);
    border-color: color-mix(in oklch, var(--accent) 50%, transparent);
    box-shadow: var(--shadow-flame);
  }
  .price-tier-label {
    font: 600 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .price-tier-name {
    font: 600 1.6rem/1.05 var(--sans);
    letter-spacing: -0.02em;
  }
  .price-tier-scope { color: var(--fg-quiet); font-size: 0.95rem; line-height: 1.5; }
  .price-tier-from {
    display: flex; align-items: baseline; gap: var(--s-3);
    padding-block: var(--s-3);
    border-block-start: 1px dashed var(--rule);
    border-block-end: 1px dashed var(--rule);
  }
  .price-from-label {
    font: 500 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-mute);
  }
  .price-from-num {
    font: 700 clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/1 var(--sans);
    letter-spacing: -0.04em;
    color: var(--fg);
  }
  .price-tier-list { display: grid; gap: var(--s-2); }
  .price-tier-list li {
    list-style: none;
    display: flex; align-items: flex-start; gap: var(--s-2);
    color: var(--fg-quiet); font-size: 0.95rem; line-height: 1.4;
  }
  .price-tier-list li::before {
    content: "+"; color: var(--accent); font-weight: 700; flex: 0 0 auto;
  }
  .price-foot {
    margin-block-start: var(--s-6);
    display: flex; flex-direction: column; gap: var(--s-3);
  }

  /* === DELIVERY & INTEGRATION (collapsed accordion under pricing tiers) === */
  .delivery-accordion {
    margin-block-start: var(--s-7);
    border-block-start: 1px solid var(--rule);
    padding-block-start: var(--s-6);
    text-align: center;
  }
  .delivery-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-inline: auto;
    padding: var(--s-3) var(--s-5);
    border: 1px solid var(--accent);
    border-radius: var(--r-pill);
    background: color-mix(in oklch, var(--accent) 12%, transparent);
    font: 500 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    cursor: pointer;
    width: max-content;
    max-width: 100%;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .delivery-toggle:hover,
  .delivery-toggle:focus-visible {
    background: var(--accent);
    color: var(--accent-fg);
    outline: none;
  }
  .delivery-toggle-icon {
    width: 12px; height: 12px;
    position: relative;
  }
  .delivery-toggle-icon::before,
  .delivery-toggle-icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .delivery-toggle-icon::before {
    inset-inline: 0;
    inset-block-start: calc(50% - 1px);
    height: 2px;
  }
  .delivery-toggle-icon::after {
    inset-block: 0;
    inset-inline-start: calc(50% - 1px);
    width: 2px;
  }
  [data-accordion][data-open="true"] .delivery-toggle-icon::after {
    transform: rotate(90deg);
  }
  /* animated wrap · grid-rows trick (matches FAQ animation) */
  .delivery-wrap,
  .funding-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 360ms var(--ease-out);
  }
  .delivery-accordion[data-open="true"] .delivery-wrap,
  .funding-accordion[data-open="true"] .funding-wrap {
    grid-template-rows: 1fr;
  }
  .delivery-inner,
  .funding-inner {
    overflow: hidden;
    min-height: 0;
  }
  .delivery-inner > *,
  .funding-inner > * {
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 320ms var(--ease-out) 80ms, transform 320ms var(--ease-out) 80ms;
  }
  .delivery-accordion[data-open="true"] .delivery-inner > *,
  .funding-accordion[data-open="true"] .funding-inner > * {
    opacity: 1;
    transform: none;
  }
  /* padding lives on the first child, not on the grid item · keeps 0fr → 1fr animation
     clean and avoids the inner showing through when collapsed */
  .delivery-inner > :first-child {
    padding-block-start: var(--s-6);
  }
  .funding-inner > :first-child {
    padding-block-start: var(--s-7);
  }

  /* === FUNDING ACCORDION (numbers panel below kicker + heading + lead) === */
  .funding-accordion {
    margin-block-start: var(--s-6);
    text-align: center;
  }
  .delivery-lead {
    color: var(--fg-quiet);
    font-size: 0.95rem;
    max-width: 56ch;
    margin-inline: auto;
    margin-block-end: var(--s-6);
    text-align: center;
  }
  .delivery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-4);
  }
  @media (max-width: 920px) { .delivery-grid { grid-template-columns: 1fr; } }
  .delivery-tile {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-2);
    padding: var(--s-5);
    display: flex; flex-direction: column;
    gap: var(--s-3);
  }
  .delivery-tile-label {
    font: 500 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-mute);
  }
  .delivery-tile-name {
    font: 600 1.1rem/1.2 var(--sans);
    letter-spacing: -0.02em;
  }
  .delivery-tile-scope {
    color: var(--fg-quiet);
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .delivery-tile-price {
    font: 600 0.95rem/1 var(--sans);
    color: var(--accent);
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--rule);
  }
  .delivery-tile-list {
    list-style: none;
    padding: 0;
    display: flex; flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--fg-quiet);
  }
  .delivery-tile-list li {
    display: flex; gap: 6px;
  }
  .delivery-tile-list li::before {
    content: "·";
    color: var(--accent);
    flex: 0 0 auto;
  }
  /* === FOUNDERS DUAL CARDS === */
  .founders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
    margin-block-start: var(--s-7);
  }
  @media (max-width: 720px) { .founders-grid { grid-template-columns: 1fr; } }
  .founder-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-3);
    padding: var(--s-7);
    display: flex; flex-direction: column; gap: var(--s-4);
    position: relative; overflow: hidden;
  }
  .founder-card::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(circle at 80% 0%, color-mix(in oklch, var(--accent) 14%, transparent), transparent 60%);
    pointer-events: none;
  }
  .founder-role {
    font: 500 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--accent);
    position: relative; z-index: 1;
  }
  .founder-name {
    font: 700 clamp(1.8rem, 1.5rem + 1vw, 2.2rem)/1.05 var(--sans);
    letter-spacing: -0.025em;
    position: relative; z-index: 1;
  }
  .founder-bio { color: var(--fg-quiet); line-height: 1.5; position: relative; z-index: 1; }
  .founder-creds {
    display: flex; flex-wrap: wrap; gap: var(--s-2);
    margin-block-start: auto;
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--rule);
    position: relative; z-index: 1;
  }
  .founder-creds li {
    list-style: none;
    padding: 0.3rem 0.7rem;
    font: 500 0.72rem/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-mute);
    background: var(--surface-2);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
  }

  /* parent agency link */
  .parent-link {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    margin-block-start: var(--s-6);
    padding: var(--s-4) var(--s-5);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--r-pill);
    text-decoration: none;
    color: var(--fg);
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
  }
  .parent-link:hover { border-color: var(--accent); background: var(--surface-2); }
  .parent-link .mono { color: var(--fg-mute); }
  .parent-link-name { font-weight: 600; }
  .parent-link-arrow { color: var(--accent); transition: transform var(--dur-fast) var(--ease-out); }
  .parent-link:hover .parent-link-arrow { transform: translateX(3px); }

  /* === MANIFESTO === */
  .manifesto-body {
    margin-block-start: var(--s-7);
    max-width: 70ch;
    display: flex; flex-direction: column; gap: var(--s-5);
  }
  .manifesto-body p {
    font: 400 var(--fs-lead)/1.55 var(--sans);
    color: var(--fg);
    text-wrap: pretty;
  }
  .manifesto-body p:first-child {
    font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
    font-weight: 500;
    color: var(--fg);
  }
  .manifesto-body p:last-child {
    color: var(--accent);
    font-weight: 500;
  }

  /* === FAQ · single-open · animated grid-rows === */
  .faq-list {
    margin-block-start: var(--s-7);
    display: flex; flex-direction: column;
    border-block-start: 1px solid var(--rule);
  }
  .faq-item {
    border-block-end: 1px solid var(--rule);
    transition: background var(--dur-fast) var(--ease-out);
  }
  .faq-item[data-open="true"] { background: color-mix(in oklch, var(--accent) 5%, transparent); }
  .faq-trigger {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-5) 0;
    text-align: left;
    gap: var(--s-5);
    background: transparent; border: 0;
    cursor: pointer;
  }
  .faq-q {
    font: 600 clamp(1.05rem, 1rem + 0.4vw, 1.25rem)/1.3 var(--sans);
    letter-spacing: -0.01em;
    color: var(--fg);
  }
  .faq-mark {
    flex: 0 0 auto;
    width: 24px; height: 24px;
    position: relative;
  }
  .faq-mark::before, .faq-mark::after {
    content: ""; position: absolute;
    inset-inline-start: 50%; inset-block-start: 50%;
    background: var(--fg);
    transform: translate(-50%, -50%);
    transition: transform var(--dur-mid) var(--ease-spring), opacity var(--dur-mid) var(--ease-out);
  }
  .faq-mark::before { width: 14px; height: 2px; }
  .faq-mark::after  { width: 2px; height: 14px; }
  .faq-item[data-open="true"] .faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
  .faq-item[data-open="true"] .faq-mark::before { background: var(--accent); }

  .faq-wrap {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 360ms var(--ease-out);
  }
  .faq-item[data-open="true"] .faq-wrap { grid-template-rows: 1fr; }
  .faq-inner {
    overflow: hidden;
    min-height: 0;
  }
  .faq-a {
    padding-block: 0 var(--s-5);
    color: var(--fg-quiet);
    line-height: 1.6;
    max-width: 70ch;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 320ms var(--ease-out) 80ms, transform 320ms var(--ease-out) 80ms;
  }
  .faq-item[data-open="true"] .faq-a { opacity: 1; transform: none; }

  /* === CONTACT prime book CTA === */
  .contact-aside .contact-prime {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 16%, var(--surface));
  }
  .contact-aside .contact-prime strong { color: var(--fg); }
  .contact-aside .contact-prime span { color: var(--accent); }

  /* === SCENE MODAL · iframe lightbox === */
  .scene-modal {
    border: 0;
    padding: 0;
    margin: auto;
    inset: 0;
    background: var(--ink);
    color: var(--bone);
    width: min(96vw, 1280px);
    height: min(92svh, 820px);
    max-width: 96vw;
    max-height: 92svh;
    border-radius: var(--r-3);
    overflow: hidden;
    box-shadow: 0 30px 100px -20px rgba(0,0,0,0.7);
  }
  .scene-modal:not([open]) { display: none; }
  .scene-modal[open] {
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
  .scene-modal::backdrop {
    background: oklch(0 0 0 / 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .scene-modal[open] {
    animation: scene-pop 320ms var(--ease-out);
  }
  @keyframes scene-pop {
    from { opacity: 0; transform: scale(0.96) translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  .scene-modal-header {
    display: flex; align-items: center;
    gap: var(--s-4);
    padding: var(--s-4) var(--s-5);
    background: oklch(0.10 0.01 60);
    border-block-end: 1px solid color-mix(in oklch, var(--bone) 10%, transparent);
  }
  .scene-modal-title {
    flex: 1;
    font: 600 1rem/1.2 var(--sans);
    letter-spacing: -0.01em;
    color: var(--bone);
    margin: 0;
  }
  .scene-modal-link {
    font: 500 var(--fs-mono)/1 var(--mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--flame-hi);
    text-decoration: none;
    padding: 8px 12px;
    border: 1px solid color-mix(in oklch, var(--flame-hi) 50%, transparent);
    border-radius: var(--r-pill);
    transition: background var(--dur-fast) var(--ease-out);
    white-space: nowrap;
  }
  .scene-modal-link:hover { background: color-mix(in oklch, var(--flame-hi) 18%, transparent); }
  .scene-modal-close {
    width: 40px; height: 40px;
    border-radius: var(--r-pill);
    display: grid; place-items: center;
    background: color-mix(in oklch, var(--bone) 8%, transparent);
    color: var(--bone);
    transition: background var(--dur-fast) var(--ease-out);
    flex: 0 0 auto;
  }
  .scene-modal-close:hover { background: color-mix(in oklch, var(--bone) 18%, transparent); }
  .scene-modal-close svg { width: 18px; height: 18px; }
  .scene-modal iframe {
    width: 100%; height: 100%;
    border: 0; display: block;
    background: var(--ink);
  }
  .scene-modal-foot {
    padding: var(--s-3) var(--s-5);
    background: oklch(0.10 0.01 60);
    border-block-start: 1px solid color-mix(in oklch, var(--bone) 8%, transparent);
    color: color-mix(in oklch, var(--bone) 65%, transparent);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-align: center;
  }
  @media (max-width: 720px) {
    .scene-modal-link { display: none; }
  }

  /* === COOKIE BANNER === */
  .cookie {
    position: fixed;
    inset-inline: var(--gutter);
    inset-block-end: var(--gutter);
    z-index: 100;
    background: var(--surface);
    border: 1px solid var(--rule-2);
    border-radius: var(--r-3);
    padding: var(--s-4) var(--s-5);
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4);
    box-shadow: var(--shadow-2);
    max-width: 720px;
    margin-inline: auto;
    flex-wrap: wrap;
  }
  .cookie p { color: var(--fg-quiet); font-size: 0.9rem; max-width: 60ch; }
  .cookie[hidden] { display: none; }
}

/* ---------- UTILITIES ---------- */
@layer utilities {
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .center { text-align: center; }
  .quiet { color: var(--fg-quiet); }
  .text-accent { color: var(--accent); }
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
  .reveal.is-in { opacity: 1; transform: none; }
}

/* ---------- VIEW TRANSITIONS ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 320ms;
  animation-timing-function: var(--ease-out);
}
::view-transition-old(hero-mega),
::view-transition-new(hero-mega) {
  animation-duration: 460ms;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- SCROLL-DRIVEN ENHANCEMENT ---------- */
@supports (animation-timeline: view()) {
  .hero-mega {
    animation: hero-zoom linear both;
    animation-timeline: scroll(root);
    animation-range: 0 90vh;
  }
  @keyframes hero-zoom {
    to { transform: scale(0.82) translateY(-3vh); opacity: 0.55; }
  }
}