@charset "UTF-8";

/* ==========================================================================
   CRUSH30 — Frost-Tech design system
   Layers: tokens -> base -> layout -> components -> sections -> motion -> utils
   ========================================================================== */

@layer tokens, base, layout, components, sections, motion, utils;

/* ---------------------------------- fonts --------------------------------- */

@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/unbounded-cyrl.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
  src: url('../fonts/unbounded-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+20B8, U+2122, U+2191-2193, U+2212, U+2215,
    U+2248;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-cyrl.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+20B8, U+2122, U+2191-2193, U+2212, U+2215,
    U+2248;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jbmono-cyrl.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/jbmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+20B8, U+2122, U+2191-2193, U+2212, U+2215,
    U+2248;
}

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

@layer tokens {
  :root {
    /* Cold base: the whole surface reads as a freezer interior, not plain black */
    --bg-void: #06080b;
    --bg-base: #0a0d12;
    --bg-card: #11151c;
    --bg-card-hi: #161b24;
    --bg-inset: #0d1116;

    --line: #1e242f;
    --line-hi: #2a323f;
    --grid-line: rgb(185 203 221 / 2.8%);

    /* Single primary accent */
    --acid: #a3ff00;
    --acid-dim: #7fc900;
    --acid-ink: #0a1400;

    /* Frost typography + cold-chain signal */
    --frost-100: #eaf4ff;
    --frost-300: #b9cbdd;
    --frost-500: #8b9db1;
    --frost-700: #4a5666;
    --ice: #79e6ff;

    /* Product-only accents */
    --berry: #ff3d7f;
    --banana: #ffc53d;
    --protein: #b87cf0;

    --danger: #ff6b5e;

    /* Type */
    --font-display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

    /* Unbounded is a wide face — the display steps are deliberately
       conservative so headings stay two or three lines, not six. */
    --fs-display: clamp(1.75rem, 3.3vw, 3.125rem);
    --fs-h2: clamp(1.5rem, 2.6vw, 2.25rem);
    --fs-h3: clamp(1.0625rem, 1.3vw, 1.3125rem);
    --fs-lead: clamp(1rem, 1.2vw, 1.1875rem);
    --fs-body: 1rem;
    --fs-sm: 0.875rem;
    --fs-xs: 0.8125rem;
    --fs-micro: 0.6875rem;
    --fs-metric: clamp(1.75rem, 3.2vw, 2.75rem);

    /* Space — 8px base */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;
    --s-10: 8rem;

    --gutter: clamp(1rem, 4vw, 2.5rem);
    --container: 1280px;
    --section-y: clamp(4.5rem, 9vw, 9rem);

    --r-1: 2px;
    --r-2: 4px;

    /* Motion — one shared vocabulary across the whole site */
    --ease-frost: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-impact: cubic-bezier(0.36, 0.07, 0.19, 0.97);
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --dur-fast: 180ms;
    --dur-mid: 320ms;
    --dur-slow: 520ms;

    --glow-acid: 0 0 0 1px rgb(163 255 0 / 24%), 0 10px 40px -12px rgb(163 255 0 / 40%);
    --glow-ice: 0 0 0 1px rgb(121 230 255 / 16%), 0 18px 60px -32px rgb(121 230 255 / 45%);

    --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

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

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

  * {
    margin: 0;
    padding: 0;
  }

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

  body {
    background: var(--bg-void);
    color: var(--frost-300);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-feature-settings: 'ss01', 'cv05';
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
    position: relative;
    min-height: 100%;
  }

  /* Blueprint hairline grid + matte film. Fixed so it never scrolls. */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: radial-gradient(ellipse 120% 90% at 50% 0%, #000 20%, transparent 85%);
  }

  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: var(--noise);
    opacity: 0.026;
    mix-blend-mode: screen;
  }

  body > * {
    position: relative;
    z-index: 2;
  }

  h1,
  h2,
  h3,
  h4 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--frost-100);
    line-height: 1.04;
    letter-spacing: -0.02em;
    text-wrap: balance;
    hyphens: none;
  }

  h1 {
    font-size: var(--fs-display);
  }
  h2 {
    font-size: var(--fs-h2);
  }
  h3 {
    font-size: var(--fs-h3);
    line-height: 1.25;
    letter-spacing: -0.01em;
  }

  p {
    text-wrap: pretty;
  }

  p,
  li,
  .section__head p,
  .faq__body p,
  .honest__truth,
  .hero__lead {
    overflow-wrap: break-word;
    hyphens: manual;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

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

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  ul,
  ol {
    list-style: none;
  }

  strong,
  b {
    color: var(--frost-100);
    font-weight: 600;
  }

  :focus-visible {
    outline: 2px solid var(--acid);
    outline-offset: 3px;
    border-radius: var(--r-1);
  }

  ::selection {
    background: var(--acid);
    color: var(--acid-ink);
  }

  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--bg-void);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--line-hi);
    border: 3px solid var(--bg-void);
    border-radius: 99px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--frost-700);
  }
}

/* ---------------------------------- layout -------------------------------- */

@layer layout {
  .shell {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  .section {
    position: relative;
    padding-block: var(--section-y);
  }

  /* Cold condensation bloom marking each section seam */
  .section--bloom::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 420px;
    pointer-events: none;
    background: radial-gradient(
      ellipse 70% 100% at 50% 0%,
      rgb(121 230 255 / 6%),
      transparent 70%
    );
  }

  .section__head {
    display: grid;
    gap: var(--s-4);
    max-width: 52rem;
    margin-bottom: var(--s-8);
    min-width: 0;
  }

  /* Title + crack share one shrink-wrapped box so the lime line is always
     as wide as the heading, whether that is one desktop line or a wrap. */
  .section__title {
    display: inline-grid;
    gap: var(--s-4);
    max-width: 100%;
    min-width: 0;
  }
  .section__title h2 {
    min-width: 0;
    max-width: 100%;
  }

  .section__head p {
    font-size: var(--fs-lead);
    color: var(--frost-500);
    max-width: 44rem;
  }

  .grid {
    display: grid;
    gap: var(--s-5);
  }
  .grid--2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  }
  .grid--3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }

  .skip-link {
    position: absolute;
    top: var(--s-3);
    left: var(--s-3);
    z-index: 200;
    padding: var(--s-3) var(--s-4);
    background: var(--acid);
    color: var(--acid-ink);
    font-weight: 600;
    border-radius: var(--r-1);
    transform: translateY(-160%);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus-visible {
    transform: translateY(0);
  }
}

/* -------------------------------- components ------------------------------ */

@layer components {
  /* --- mono microlabel: the "instrument readout" voice of the brand --- */
  .label {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--frost-500);
  }

  .label::before {
    content: '';
    width: 14px;
    height: 1px;
    background: var(--acid);
    flex: none;
  }

  .label--bare::before {
    display: none;
  }
  .label--ice {
    color: var(--ice);
  }
  .label--ice::before {
    background: var(--ice);
  }

  .mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }

  .num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
  }

  /* --- panel: hairline surface with technical corner brackets --- */
  .panel {
    position: relative;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--r-1);
    padding: var(--s-5);
    transition:
      border-color var(--dur-mid) var(--ease-out),
      transform var(--dur-mid) var(--ease-frost),
      box-shadow var(--dur-mid) var(--ease-out),
      background-color var(--dur-mid) var(--ease-out);
  }

  .panel::before,
  .panel::after {
    content: '';
    position: absolute;
    width: 9px;
    height: 9px;
    border: 1px solid var(--acid);
    opacity: 0.4;
    transition: opacity var(--dur-mid) var(--ease-out);
    pointer-events: none;
  }
  .panel::before {
    top: -1px;
    left: -1px;
    border-right-width: 0;
    border-bottom-width: 0;
  }
  .panel::after {
    right: -1px;
    bottom: -1px;
    border-left-width: 0;
    border-top-width: 0;
  }

  .panel--ice::before,
  .panel--ice::after {
    border-color: var(--ice);
  }

  .panel--flat::before,
  .panel--flat::after {
    display: none;
  }

  .panel--hover:hover,
  .panel--hover:focus-within {
    background: var(--bg-card-hi);
    border-color: var(--line-hi);
    transform: translateY(-3px);
    box-shadow: var(--glow-ice);
  }
  .panel--hover:hover::before,
  .panel--hover:hover::after,
  .panel--hover:focus-within::before,
  .panel--hover:focus-within::after {
    opacity: 1;
  }

  /* --- buttons --- */
  .btn {
    --btn-bg: transparent;
    --btn-fg: var(--frost-100);
    --btn-bd: var(--line-hi);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    min-height: 3.25rem;
    padding: 0 var(--s-6);
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bd);
    border-radius: var(--r-1);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    cursor: pointer;
    text-align: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition:
      transform var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-mid) var(--ease-out),
      border-color var(--dur-mid) var(--ease-out),
      background-color var(--dur-mid) var(--ease-out);
  }

  .btn > * {
    position: relative;
    z-index: 1;
  }

  /* frost sweep: a cold sheen crossing the button on hover */
  .btn::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
      105deg,
      transparent 25%,
      rgb(234 244 255 / 16%) 48%,
      transparent 72%
    );
    transform: translateX(-120%);
    transition: transform 620ms var(--ease-frost);
  }
  .btn:hover::after {
    transform: translateX(120%);
  }

  .btn--primary {
    --btn-bg: var(--acid);
    --btn-fg: var(--acid-ink);
    --btn-bd: var(--acid);
    box-shadow: var(--glow-acid);
    font-weight: 700;
  }
  .btn--primary:hover {
    --btn-bg: #b4ff29;
    box-shadow:
      0 0 0 1px rgb(163 255 0 / 40%),
      0 14px 52px -10px rgb(163 255 0 / 62%);
  }
  .btn--primary::after {
    background: linear-gradient(
      105deg,
      transparent 25%,
      rgb(255 255 255 / 45%) 48%,
      transparent 72%
    );
  }

  .btn--ghost:hover {
    --btn-bd: var(--frost-700);
    background: rgb(234 244 255 / 4%);
  }

  .btn:active {
    transform: translateY(1px) scale(0.994);
  }

  .btn--wide {
    width: 100%;
  }

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

  /* --- inline text link with hairline underline --- */
  .tlink {
    color: var(--frost-100);
    border-bottom: 1px solid rgb(163 255 0 / 45%);
    padding-bottom: 1px;
    transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
  }
  .tlink:hover {
    color: var(--acid);
    border-bottom-color: var(--acid);
  }

  /* --- pill / chip --- */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    /* Caps sit high in the em-box — a hair more bottom padding centers them optically */
    padding: 0.34rem 0.85rem 0.42rem;
    border: 1px solid var(--line-hi);
    border-radius: 99px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--frost-500);
    background: rgb(234 244 255 / 2%);
  }

  .chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: var(--acid);
    flex: none;
  }

  .chip--live .chip__dot {
    animation: pulse-dot 2.4s var(--ease-out) infinite;
  }

  /* --- stat block --- */
  .stat__value {
    font-family: var(--font-display);
    font-size: var(--fs-metric);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--frost-100);
    font-variant-numeric: tabular-nums;
  }
  .stat__value em {
    font-style: normal;
    color: var(--acid);
  }
  .stat__label {
    margin-top: var(--s-3);
    font-size: var(--fs-sm);
    color: var(--frost-500);
    line-height: 1.45;
  }

  /* --- hairline crack underline shared by every H2 --- */
  .crack {
    display: block;
    width: 100%;
    max-width: none;
    height: 9px;
    overflow: visible;
  }
  .crack path {
    fill: none;
    stroke: var(--acid);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: var(--crack-len, 400);
    stroke-dashoffset: var(--crack-len, 400);
    opacity: 0.5;
  }
  .is-in .crack path,
  .crack.is-in path {
    animation: crack-draw 760ms var(--ease-frost) forwards;
  }

  /* --- data ticker used as section seam --- */
  .ticker {
    position: relative;
    border-block: 1px solid var(--line);
    background: linear-gradient(var(--bg-base), var(--bg-void));
    overflow: hidden;
    padding-block: var(--s-3);
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .ticker__track {
    display: flex;
    width: max-content;
    gap: var(--s-6);
    animation: ticker-run 46s linear infinite;
  }
  .ticker:hover .ticker__track {
    animation-play-state: paused;
  }
  .ticker__item {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--frost-500);
    white-space: nowrap;
  }
  .ticker__item b {
    color: var(--ice);
    font-weight: 500;
  }
  .ticker__item::after {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--line-hi);
    transform: rotate(45deg);
  }

  /* --- key/value rows --- */
  .kv {
    display: grid;
    gap: 0;
  }
  .kv__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding-block: var(--s-3);
    border-bottom: 1px solid var(--line);
  }
  .kv__row:last-child {
    border-bottom: 0;
  }
  .kv__k {
    font-size: var(--fs-sm);
    color: var(--frost-500);
  }
  .kv__v {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--frost-100);
    font-variant-numeric: tabular-nums;
    text-align: right;
  }

  /* --- responsibility matrix --- */
  .matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
  }
  .matrix caption {
    text-align: left;
    color: var(--frost-500);
    font-size: var(--fs-xs);
    padding-bottom: var(--s-4);
  }
  .matrix th,
  .matrix td {
    padding: var(--s-4) var(--s-3);
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
  }
  .matrix thead th {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--frost-500);
    border-bottom-color: var(--line-hi);
    white-space: nowrap;
  }
  .matrix thead th:not(:first-child) {
    text-align: center;
    width: 8.5rem;
  }
  .matrix tbody th {
    font-weight: 400;
    color: var(--frost-300);
  }
  .matrix td {
    text-align: center;
  }
  .matrix tbody tr:hover {
    background: rgb(234 244 255 / 2.5%);
  }
  .matrix tbody tr:last-child th,
  .matrix tbody tr:last-child td {
    border-bottom: 0;
  }
  /* Give the description column the room it needs instead of scrolling sideways */
  @media (width < 40rem) {
    .matrix th,
    .matrix td {
      padding: var(--s-3) var(--s-2);
    }
    .matrix thead th:not(:first-child) {
      width: 3.75rem;
    }
  }

  .mark {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 99px;
    font-size: 12px;
    line-height: 1;
  }
  .mark--yes {
    background: rgb(163 255 0 / 12%);
    border: 1px solid rgb(163 255 0 / 30%);
  }
  /* Tick is drawn, not typed: U+2713 sits outside our font subsets and would
     fall back to a random system glyph. */
  .mark--yes::before {
    content: '';
    width: 9px;
    height: 5px;
    margin-top: -2px;
    border: 0 solid var(--acid);
    border-width: 0 0 2px 2px;
    rotate: -45deg;
  }
  .mark--no::before {
    content: '';
    width: 8px;
    height: 0;
    border-top: 2px solid var(--frost-700);
  }
  .mark--no {
    border: 1px solid var(--line);
  }

  /* --- accordion --- */
  .faq {
    border-top: 1px solid var(--line);
  }
  .faq__item {
    border-bottom: 1px solid var(--line);
  }
  .faq__item summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-5);
    padding-block: var(--s-5);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--frost-100);
    transition: color var(--dur-fast) var(--ease-out);
  }
  .faq__item summary::-webkit-details-marker {
    display: none;
  }
  .faq__item summary:hover {
    color: var(--acid);
  }
  .faq__sign {
    flex: none;
    position: relative;
    width: 18px;
    height: 18px;
    margin-top: 0.15rem;
  }
  .faq__sign::before,
  .faq__sign::after {
    content: '';
    position: absolute;
    inset: 50% 0 auto 0;
    height: 1px;
    background: var(--acid);
    transition: transform var(--dur-mid) var(--ease-frost);
  }
  .faq__sign::after {
    transform: rotate(90deg);
  }
  .faq__item[open] .faq__sign::after {
    transform: rotate(0deg);
  }
  .faq__body {
    padding-bottom: var(--s-5);
    max-width: 46rem;
    color: var(--frost-500);
    display: grid;
    gap: var(--s-3);
  }
  .faq__item[open] .faq__body {
    animation: defrost 420ms var(--ease-frost) both;
  }

  /* --- form --- */
  .field {
    display: grid;
    gap: var(--s-2);
  }
  .field > span {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--frost-500);
  }
  .field input,
  .field select {
    width: 100%;
    min-height: 3.25rem;
    padding: 0 var(--s-4);
    background: var(--bg-inset);
    border: 1px solid var(--line);
    border-radius: var(--r-1);
    color: var(--frost-100);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .field input::placeholder {
    color: var(--frost-700);
  }
  .field input:hover,
  .field select:hover {
    border-color: var(--line-hi);
  }
  .field input:focus,
  .field select:focus {
    outline: none;
    border-color: var(--acid);
    box-shadow: 0 0 0 3px rgb(163 255 0 / 12%);
  }
  .field input[aria-invalid='true'] {
    border-color: var(--danger);
  }
  .field__error {
    font-size: var(--fs-xs);
    color: var(--danger);
    min-height: 1.2em;
  }
  .field select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--frost-500) 50%),
      linear-gradient(135deg, var(--frost-500) 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: var(--s-8);
  }

  /* --- range slider --- */
  .range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    background: transparent;
    cursor: pointer;
  }
  .range::-webkit-slider-runnable-track {
    height: 2px;
    background: linear-gradient(
      90deg,
      var(--acid) 0 var(--fill, 20%),
      var(--line-hi) var(--fill, 20%) 100%
    );
  }
  .range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -8px;
    border-radius: 99px;
    background: var(--acid);
    border: 3px solid var(--bg-void);
    box-shadow: 0 0 0 1px var(--acid), 0 0 22px rgb(163 255 0 / 55%);
    transition: transform var(--dur-fast) var(--ease-out);
  }
  .range:hover::-webkit-slider-thumb,
  .range:focus-visible::-webkit-slider-thumb {
    transform: scale(1.18);
  }
  .range::-moz-range-track {
    height: 2px;
    background: var(--line-hi);
  }
  .range::-moz-range-progress {
    height: 2px;
    background: var(--acid);
  }
  .range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 99px;
    background: var(--acid);
    border: 3px solid var(--bg-void);
    box-shadow: 0 0 0 1px var(--acid), 0 0 22px rgb(163 255 0 / 55%);
  }

  /* --- segmented control --- */
  .segmented {
    display: flex;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--r-1);
    padding: 3px;
    background: var(--bg-inset);
  }
  .segmented button {
    flex: 1;
    min-height: 2.75rem;
    padding: 0 var(--s-3);
    background: transparent;
    border: 0;
    border-radius: 1px;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--frost-500);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .segmented button:hover {
    color: var(--frost-100);
  }
  .segmented button[aria-checked='true'] {
    background: rgb(163 255 0 / 10%);
    color: var(--acid);
    box-shadow: inset 0 0 0 1px rgb(163 255 0 / 28%);
  }

  /* --- left spec rail: the instrument-panel signature --- */
  .rail {
    position: fixed;
    left: clamp(0.75rem, 1.6vw, 1.5rem);
    top: 50%;
    translate: 0 -50%;
    z-index: 40;
    display: none;
    flex-direction: column;
    gap: var(--s-3);
  }
  .rail__item {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--frost-700);
    transition: color var(--dur-mid) var(--ease-out);
  }
  .rail__item::before {
    content: '';
    width: 10px;
    height: 1px;
    background: currentcolor;
    transition: width var(--dur-mid) var(--ease-frost);
  }
  .rail__item:hover,
  .rail__item[aria-current='true'] {
    color: var(--acid);
  }
  .rail__item[aria-current='true']::before {
    width: 22px;
  }
  .rail__name {
    opacity: 0;
    translate: -6px 0;
    transition: opacity var(--dur-mid) var(--ease-out), translate var(--dur-mid) var(--ease-frost);
    white-space: nowrap;
    text-transform: uppercase;
  }
  .rail__item:hover .rail__name,
  .rail__item[aria-current='true'] .rail__name {
    opacity: 1;
    translate: 0 0;
  }

  @media (width >= 1400px) {
    .rail {
      display: flex;
    }
  }

  /* --- note / disclosure line ---
     These carry the honest caveats, so they are held at readable contrast
     rather than dimmed into decoration. */
  .note {
    display: flex;
    gap: var(--s-3);
    font-size: var(--fs-xs);
    line-height: 1.55;
    color: var(--frost-500);
  }
  .note::before {
    content: '*';
    color: var(--acid);
    flex: none;
  }
}

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

@layer sections {
  /* ---------------------------- header ---------------------------- */
  .header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    border-bottom: 1px solid transparent;
    transition:
      background-color var(--dur-mid) var(--ease-out),
      border-color var(--dur-mid) var(--ease-out),
      translate var(--dur-mid) var(--ease-frost),
      backdrop-filter var(--dur-mid) var(--ease-out);
  }
  .header__inner {
    display: flex;
    align-items: center;
    gap: var(--s-5);
    min-height: 4.5rem;
  }
  .header.is-stuck {
    background: rgb(6 8 11 / 82%);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom-color: var(--line);
  }
  .header.is-hidden {
    translate: 0 -100%;
  }

  .brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex: none;
    cursor: pointer;
  }
  .wordmark.brand__mark {
    width: auto;
    height: 24px;
  }

  .nav {
    display: none;
    margin-left: auto;
    gap: var(--s-2);
  }
  .nav a {
    padding: var(--s-2) var(--s-3);
    font-size: var(--fs-sm);
    color: var(--frost-500);
    border-radius: var(--r-1);
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }
  .nav a:hover,
  .nav a[aria-current='page'] {
    color: var(--frost-100);
    background: rgb(234 244 255 / 5%);
  }

  .header__cta {
    display: none;
    flex: none;
    min-height: 2.75rem;
    padding-inline: var(--s-5);
  }

  .burger {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--line-hi);
    border-radius: var(--r-1);
    cursor: pointer;
  }
  .burger span {
    position: relative;
    width: 16px;
    height: 1px;
    background: var(--frost-100);
    transition: background-color var(--dur-fast) linear;
  }
  .burger span::before,
  .burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 16px;
    height: 1px;
    background: var(--frost-100);
    transition: transform var(--dur-mid) var(--ease-frost);
  }
  .burger span::before {
    top: -5px;
  }
  .burger span::after {
    top: 5px;
  }
  .burger[aria-expanded='true'] span {
    background: transparent;
  }
  .burger[aria-expanded='true'] span::before {
    transform: translateY(5px) rotate(45deg);
  }
  .burger[aria-expanded='true'] span::after {
    transform: translateY(-5px) rotate(-45deg);
  }

  .drawer {
    position: fixed;
    inset: 4.5rem 0 auto;
    z-index: 99;
    background: rgb(6 8 11 / 97%);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: var(--s-1);
    padding: var(--s-5) var(--gutter) var(--s-6);
    clip-path: inset(0 0 100% 0);
    transition: clip-path 420ms var(--ease-frost);
  }
  .drawer[data-open='true'] {
    clip-path: inset(0 0 0 0);
  }
  .drawer a:not(.btn) {
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 1.125rem;
    color: var(--frost-100);
  }
  .drawer .btn {
    margin-top: var(--s-4);
  }

  @media (width >= 62rem) {
    .nav,
    .header__cta {
      display: flex;
    }
    .burger,
    .drawer {
      display: none;
    }
  }

  /* ---------------------------- hero ---------------------------- */
  .hero {
    position: relative;
    padding-top: clamp(7rem, 14vh, 10rem);
    padding-bottom: var(--section-y);
    overflow: clip;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: -20% -10% auto;
    height: 780px;
    pointer-events: none;
    background:
      radial-gradient(ellipse 46% 54% at 68% 30%, rgb(121 230 255 / 10%), transparent 70%),
      radial-gradient(ellipse 40% 40% at 18% 8%, rgb(163 255 0 / 7%), transparent 68%);
  }

  .hero__grid {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }
  @media (width >= 64rem) {
    .hero__grid {
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
      align-items: start;
    }
    .hero__copy {
      padding-top: 0;
    }
    .hero__grid > .rig {
      margin-top: 0;
      align-self: start;
    }
  }

  .hero__copy {
    display: grid;
    gap: var(--s-5);
    justify-items: start;
  }
  .hero h1 {
    max-width: 16em;
  }
  .hero h1 em {
    font-style: normal;
    color: var(--acid);
  }
  .hero__lead {
    font-size: var(--fs-lead);
    color: var(--frost-500);
    max-width: 44ch;
  }
  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
    width: 100%;
  }
  .hero__actions .btn {
    flex: 1 1 15rem;
  }

  /* wordmark shatter stage */
  .wordmark {
    width: min(100%, 26rem);
    height: auto;
    overflow: visible;
  }

  .hero__stats {
    --stat-gap: clamp(1.5rem, 4vw, 2.5rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-6);
    margin-top: var(--s-6);
    padding-top: var(--s-6);
    border-top: 1px solid var(--line);
  }
  .hero__stats > li {
    position: relative;
    padding: 0;
    border: 0;
  }
  .hero__stats .stat__value {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
  }

  /* Two-up on large phones / tablets: the rule lives in the gap, never on the type. */
  @media (width >= 26rem) {
    .hero__stats {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--stat-gap);
      row-gap: var(--s-6);
    }
    .hero__stats > li:nth-child(odd):not(:last-child)::after {
      content: '';
      position: absolute;
      top: 0.15em;
      bottom: 0.15em;
      right: calc(var(--stat-gap) / -2);
      width: 1px;
      background: var(--line);
    }
  }

  /* Three-up once the hero copy column is wide enough. */
  @media (width >= 72rem) {
    .hero__stats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .hero__stats > li:not(:last-child)::after {
      content: '';
      position: absolute;
      top: 0.15em;
      bottom: 0.15em;
      right: calc(var(--stat-gap) / -2);
      width: 1px;
      background: var(--line);
    }
  }

  /* --- machine visual, built from CSS + SVG (no photography available) --- */
  .rig {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(0.75rem, 2vw, 1.5rem);
    align-items: end;
    filter: drop-shadow(0 40px 80px rgb(0 0 0 / 60%));
  }

  /*
   * Stacked hero: center the rig. Phone keeps full column width;
   * tablets get a mid size (not full-bleed, not phone-tiny).
   */
  @media (width < 64rem) {
    .hero__grid > .rig {
      margin-inline: auto;
    }
  }

  /* iPad / mid tablets: readable size + enough vertical room for bay + scanner */
  @media (width >= 48rem) and (width < 64rem) {
    .hero__grid > .rig {
      width: min(100%, 34rem);
    }
    .rig__machine {
      aspect-ratio: auto;
      min-height: 26rem;
      grid-template-rows: auto minmax(6rem, 1.35fr) minmax(4.25rem, 0.95fr) auto;
      gap: 0.7rem;
      padding: var(--s-4);
    }
    .rig__screen {
      min-height: 7.5rem;
      padding: var(--s-4) var(--s-3);
    }
    .rig__bay {
      gap: 0.4rem;
      padding: 0.2rem 0 0.15rem;
    }
    .rig__pocket {
      min-height: 3.6rem;
    }
    .rig__bayhint {
      line-height: 1.3;
      letter-spacing: 0.12em;
    }
    .rig__scanner {
      gap: 0.4rem;
      padding-top: 0.2rem;
    }
    .rig__freezer {
      aspect-ratio: 4 / 5.6;
      align-self: end;
    }
    .rig__glass {
      min-height: 11rem;
    }
  }

  .rig__unit {
    position: relative;
    border: 1px solid var(--line-hi);
    border-radius: var(--r-2);
    background:
      linear-gradient(160deg, rgb(234 244 255 / 6%), transparent 40%),
      linear-gradient(var(--bg-card-hi), var(--bg-void));
    overflow: hidden;
    isolation: isolate;
  }
  .rig__unit::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--noise);
    opacity: 0.05;
    pointer-events: none;
  }

  .rig__machine {
    aspect-ratio: 5 / 8.2;
    display: grid;
    grid-template-rows: auto minmax(0, 1.85fr) minmax(0, 0.72fr) auto;
    gap: var(--s-3);
    padding: var(--s-4);
  }

  .rig__brandbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--frost-100);
  }
  .rig__brandbar span:last-child {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--acid);
  }

  /* the machine's screen: live readout */
  .rig__screen {
    position: relative;
    border: 1px solid var(--line-hi);
    border-radius: var(--r-1);
    background: radial-gradient(ellipse 100% 70% at 50% 0%, rgb(121 230 255 / 10%), var(--bg-void) 70%);
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--s-2);
    padding: var(--s-5) var(--s-4);
    overflow: hidden;
    min-height: 9.5rem;
  }
  .rig__screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      to bottom,
      rgb(234 244 255 / 4%) 0 1px,
      transparent 1px 3px
    );
    pointer-events: none;
  }
  .rig__timer {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 700;
    color: var(--acid);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 24px rgb(163 255 0 / 45%);
  }
  .rig__screen .label {
    font-size: 9px;
    letter-spacing: 0.22em;
    text-align: center;
  }

  .rig__bar {
    width: 100%;
    height: 2px;
    background: var(--line-hi);
    overflow: hidden;
  }
  .rig__bar i {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    background: var(--acid);
    box-shadow: 0 0 12px var(--acid);
    transition: width 120ms linear;
  }

  /* Hommy bay: acid trapezoid only, no outer frame */
  .rig__bay {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto;
    justify-items: center;
    gap: 0.35rem;
    min-height: 0;
    padding: 0.15rem 0 0;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
  }
  .rig__bay.is-busy:not(.is-takeout) {
    pointer-events: none;
  }
  .rig__pocket {
    position: relative;
    width: 90%;
    height: 100%;
    min-height: 3.2rem;
    clip-path: polygon(14% 0, 86% 0, 76% 100%, 24% 100%);
    background: linear-gradient(180deg, #2e3744 0%, #151a22 40%, #080a0e 100%);
    overflow: hidden;
    filter:
      drop-shadow(0 0 0.6px var(--acid))
      drop-shadow(0 0 1.2px color-mix(in srgb, var(--acid) 80%, transparent));
    transition: filter var(--dur-mid) var(--ease-out);
  }
  .rig__bay.is-target .rig__pocket {
    filter:
      drop-shadow(0 0 1px var(--acid))
      drop-shadow(0 0 10px rgb(163 255 0 / 45%));
  }
  .rig__bay.has-cup .rig__pocket {
    filter:
      drop-shadow(0 0 0.6px var(--ice))
      drop-shadow(0 0 1.2px color-mix(in srgb, var(--ice) 70%, transparent));
  }
  .rig__seat {
    position: absolute;
    inset: 8% 12% 4%;
    display: grid;
    place-items: end center;
  }
  .rig__shutter {
    position: absolute;
    inset: 0;
    z-index: 2;
    transform: scaleY(0);
    transform-origin: top center;
    background:
      linear-gradient(180deg, rgb(234 244 255 / 18%), rgb(121 230 255 / 8%) 40%, rgb(17 21 28 / 72%)),
      linear-gradient(120deg, transparent 40%, rgb(234 244 255 / 12%) 50%, transparent 60%);
    backdrop-filter: blur(2px);
    box-shadow: inset 0 -1px 0 rgb(234 244 255 / 20%);
    transition: transform 1.15s var(--ease-frost);
    pointer-events: none;
  }
  .rig__shutter.is-closed {
    transform: scaleY(1);
  }
  .rig__bayhint {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--frost-700);
  }
  .rig__bay.has-cup .rig__bayhint {
    color: var(--frost-500);
  }

  /* square glowing barcode scanner — white/frost glow (not acid) */
  .rig__scanner {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    cursor: default;
    outline: none;
    pointer-events: auto;
  }
  .rig__scanner:focus-visible .rig__scanwindow {
    box-shadow:
      0 0 0 1px rgb(234 244 255 / 70%),
      0 0 18px rgb(234 244 255 / 35%);
  }
  .rig__scanwindow {
    position: relative;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid color-mix(in srgb, var(--frost-100) 40%, var(--line-hi));
    border-radius: 2px;
    background:
      radial-gradient(circle at 50% 50%, rgb(234 244 255 / 14%), #030507 70%);
    overflow: hidden;
    display: grid;
    place-items: center;
    box-shadow:
      0 0 14px rgb(234 244 255 / 22%),
      inset 0 0 10px rgb(234 244 255 / 12%);
    transition:
      box-shadow var(--dur-mid) var(--ease-out),
      border-color var(--dur-mid) var(--ease-out);
  }
  .rig__scancorner {
    position: absolute;
    inset: 4px;
    border: 1px solid transparent;
    border-image: linear-gradient(#eaf4ff, transparent, #eaf4ff) 1;
    opacity: 0.55;
    pointer-events: none;
  }
  .rig__scanbeam {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: linear-gradient(#ffffff, #eaf4ff);
    box-shadow: 0 0 10px rgb(234 244 255 / 80%);
    opacity: 0;
    pointer-events: none;
  }
  .rig__scanner.is-scanning .rig__scanbeam {
    opacity: 1;
    animation: scan-beam 0.7s var(--ease-out) both;
  }
  .rig__scanner.is-alert .rig__scanwindow {
    animation: scan-alert 0.45s ease-in-out 3;
    border-color: rgb(234 244 255 / 80%);
  }
  .rig__scanner.is-locked .rig__scanwindow {
    border-color: rgb(234 244 255 / 75%);
    box-shadow:
      0 0 16px rgb(234 244 255 / 32%),
      inset 0 0 10px rgb(234 244 255 / 14%);
  }
  .rig__scanner.is-target .rig__scanwindow {
    border-color: rgb(234 244 255 / 85%);
    box-shadow:
      0 0 22px rgb(234 244 255 / 42%),
      inset 0 0 12px rgb(234 244 255 / 16%);
  }
  .rig__scancode {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.06em;
    color: var(--frost-500);
    white-space: nowrap;
    line-height: 1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: clip;
  }
  .rig__scanner.is-scanning .rig__scancode,
  .rig__scanner.is-locked .rig__scancode {
    color: var(--frost-100);
  }
  .rig__scanlabel {
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--frost-700);
    text-align: center;
  }

  @keyframes scan-alert {
    0%,
    100% {
      box-shadow:
        0 0 12px rgb(234 244 255 / 22%),
        inset 0 0 10px rgb(234 244 255 / 12%);
    }
    50% {
      box-shadow:
        0 0 24px rgb(234 244 255 / 55%),
        inset 0 0 14px rgb(234 244 255 / 28%);
    }
  }

  /* freezer with openable glass door */
  .rig__freezer {
    aspect-ratio: 4 / 6;
    display: grid;
    grid-template-rows: auto 1fr;
    gap: var(--s-2);
    padding: var(--s-3);
    overflow: visible;
  }
  .rig__temp {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.08em;
    color: var(--ice);
  }
  .rig__temp .chip__dot {
    background: var(--ice);
  }

  .rig__cabinet {
    position: relative;
    min-height: 0;
    border-radius: var(--r-1);
    overflow: visible;
    perspective: 900px;
  }
  .rig__glass {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 6px;
    height: 100%;
    min-height: 12rem;
    padding: var(--s-2);
    border: 1px solid var(--line-hi);
    border-radius: var(--r-1);
    background: linear-gradient(200deg, rgb(121 230 255 / 8%), rgb(6 8 11 / 90%) 55%);
  }
  .rig__door {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    border: 1px solid var(--line-hi);
    border-radius: var(--r-1);
    background: transparent;
    cursor: pointer;
    transform-origin: left center;
    transform: rotateY(0deg);
    transition:
      transform 420ms var(--ease-frost),
      box-shadow var(--dur-mid) var(--ease-out);
  }
  .rig__doorglass {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
      linear-gradient(120deg, rgb(234 244 255 / 10%), transparent 42%, rgb(121 230 255 / 6%) 70%),
      linear-gradient(200deg, rgb(17 21 28 / 72%), rgb(6 8 11 / 88%));
    backdrop-filter: blur(1.5px);
    box-shadow: inset 0 0 0 1px rgb(234 244 255 / 8%);
    overflow: hidden;
  }
  .rig__doorglass::after {
    content: '';
    position: absolute;
    inset: -40% -60%;
    background: linear-gradient(
      100deg,
      transparent 42%,
      rgb(234 244 255 / 13%) 50%,
      transparent 58%
    );
    animation: glass-sheen 7s var(--ease-out) infinite;
    pointer-events: none;
  }
  .rig__doorhandle {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 0.7rem;
    width: 5px;
    height: 2.4rem;
    translate: 0 -50%;
    border-radius: 99px;
    background: linear-gradient(#eaf4ff, #8b9db1);
    box-shadow: 0 0 10px rgb(121 230 255 / 25%);
  }
  .rig__doorlabel {
    position: absolute;
    z-index: 1;
    left: var(--s-3);
    bottom: var(--s-3);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--frost-300);
  }
  .rig__freezer.is-open .rig__door {
    transform: rotateY(-108deg);
    box-shadow: 12px 8px 28px rgb(0 0 0 / 45%);
  }

  /* Cups: muted behind door; interactive when open */
  .rig__cup {
    position: relative;
    appearance: none;
    border: 1px solid rgb(234 244 255 / 8%);
    border-radius: 1px 1px 3px 3px;
    padding: 0;
    margin: 0;
    min-height: 2.4rem;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--cup, #4a5666) 24%, #0d1116),
      rgb(6 8 11 / 88%)
    );
    cursor: grab;
    touch-action: none;
    transition:
      outline-color var(--dur-fast) var(--ease-out),
      transform var(--dur-fast) var(--ease-out),
      opacity var(--dur-mid) var(--ease-out);
  }
  .rig__cup::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: rgb(234 244 255 / 22%);
  }
  .rig__cup--berry {
    --cup: var(--berry);
  }
  .rig__cup--banana {
    --cup: var(--banana);
  }
  .rig__cup--protein {
    --cup: var(--protein);
  }
  .rig__barcode {
    position: absolute;
    inset: auto 15% 18% 15%;
    height: 22%;
    background: repeating-linear-gradient(
      90deg,
      #eaf4ff 0 1px,
      transparent 1px 2px,
      #eaf4ff 2px 3px,
      transparent 3px 5px,
      #eaf4ff 5px 6px,
      transparent 6px 7px
    );
    opacity: 0.35;
  }
  .rig__freezer:not(.is-open) .rig__cup {
    pointer-events: none;
  }
  .rig__cup.is-selected,
  .rig__cup:focus-visible {
    outline: 1px solid var(--acid);
    outline-offset: 1px;
    z-index: 1;
  }
  .rig__cup.is-dragging,
  .rig__cup.is-held {
    opacity: 0.25;
    cursor: grabbing;
  }
  .rig__cup.is-spent {
    opacity: 0.2;
    pointer-events: none;
    filter: grayscale(0.6);
  }

  /* seated cup: same proportions as freezer / ghost cups */
  #rig-seated {
    width: 2.4rem;
    height: 3.1rem;
    min-height: 2.4rem;
    max-width: none;
    border-radius: 1px 1px 3px 3px;
    pointer-events: none;
    cursor: default;
    box-shadow: 0 8px 16px rgb(0 0 0 / 45%);
  }
  #rig-seated[hidden] {
    display: none !important;
  }
  #rig-seated:not([hidden]) {
    display: block;
  }
  #rig-seated .rig__barcode {
    opacity: 0.55;
    inset: auto 15% 18% 15%;
    height: 22%;
  }

  .rig.is-holding {
    cursor: grabbing;
  }
  .rig__ghost {
    position: fixed;
    z-index: 200;
    width: 2.4rem;
    height: 3.1rem;
    pointer-events: none;
    border-radius: 2px 2px 40% 40% / 2px 2px 18% 18%;
    border: 1px solid rgb(234 244 255 / 20%);
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--cup, #4a5666) 55%, #0d1116),
      rgb(6 8 11 / 90%)
    );
    box-shadow: 0 12px 28px rgb(0 0 0 / 55%);
    translate: -50% -50%;
  }

  @keyframes scan-beam {
    from {
      left: 0;
      opacity: 0;
    }
    12% {
      opacity: 1;
    }
    to {
      left: calc(100% - 2px);
      opacity: 0.2;
    }
  }

  @media (width < 48rem) {
    .rig {
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
      gap: 0.55rem;
      align-items: end;
      width: 100%;
      max-width: 100%;
    }

    .rig__machine {
      aspect-ratio: auto;
      min-height: 21rem;
      grid-template-rows: auto minmax(5rem, 1.2fr) minmax(3.2rem, 0.85fr) auto;
      gap: 0.55rem;
      padding: 0.75rem;
    }

    .rig__brandbar {
      font-size: 0.68rem;
      gap: 0.3rem;
    }
    .rig__brandbar span:last-child {
      font-size: 8px;
      letter-spacing: 0.1em;
    }

    .rig__screen {
      min-height: 5.75rem;
      padding: 0.7rem 0.6rem;
      gap: 0.35rem;
    }
    .rig__timer {
      font-size: clamp(1.35rem, 7vw, 1.75rem);
    }
    .rig__screen .label {
      font-size: 8px;
      letter-spacing: 0.16em;
    }

    .rig__bay {
      gap: 0.35rem;
      padding: 0.1rem 0 0.15rem;
      min-height: 0;
    }
    .rig__pocket {
      width: 100%;
      min-height: 3.1rem;
    }
    .rig__bayhint {
      font-size: 8px;
      letter-spacing: 0.1em;
      line-height: 1.3;
    }
    .rig__scanner {
      gap: 0.35rem;
      padding-top: 0.15rem;
    }
    .rig__scanwindow {
      width: 2.55rem;
      height: 2.55rem;
    }
    .rig__scancode {
      font-size: 6.5px;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }
    .rig__scanlabel {
      font-size: 8px;
    }

    .rig__freezer {
      aspect-ratio: 4 / 5.7;
      width: 100%;
      max-height: 94%;
      min-height: 0;
      height: auto;
      align-self: end;
      padding: 0.65rem;
      gap: 0.4rem;
      overflow: hidden;
    }
    .rig__freezer.is-open {
      overflow: visible;
      z-index: 2;
    }
    .rig__temp {
      font-size: 9px;
    }
    .rig__cabinet {
      overflow: hidden;
      min-height: 0;
    }
    .rig__freezer.is-open .rig__cabinet {
      overflow: visible;
    }
    .rig__glass {
      min-height: 0;
      gap: 5px;
      padding: 0.4rem;
    }
    .rig__cup {
      min-height: 1.9rem;
    }
    .rig__doorlabel {
      font-size: 8px;
    }
    #rig-seated {
      width: 2.1rem;
      height: 2.7rem;
      min-height: 2.1rem;
    }
  }

  @media (width < 36rem) {
    .rig {
      grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
      gap: 0.45rem;
    }
    .rig__machine {
      min-height: 19rem;
      padding: 0.65rem;
    }
    .rig__screen {
      min-height: 5.25rem;
    }
    .rig__scanwindow {
      width: 2.4rem;
      height: 2.4rem;
    }
    .rig__freezer {
      aspect-ratio: 4 / 5.6;
      max-height: 92%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .rig__door,
    .rig__shutter {
      transition: none;
    }
    .rig__doorglass::after {
      animation: none;
    }
    .rig__scanner.is-scanning .rig__scanbeam {
      animation: none;
      opacity: 1;
      inset: 0;
      width: 100%;
      background: rgb(234 244 255 / 18%);
    }
    .rig__scanner.is-alert .rig__scanwindow {
      animation: none;
      box-shadow:
        0 0 22px rgb(234 244 255 / 55%),
        inset 0 0 14px rgb(234 244 255 / 25%);
    }
  }

  /* ---------------------------- honesty block ---------------------------- */
  .honest__card {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-6) var(--s-5);
  }
  .honest__strike {
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--frost-500);
    text-decoration: line-through;
    text-decoration-color: var(--danger);
    text-decoration-thickness: 1px;
  }
  .honest__truth {
    font-size: var(--fs-sm);
    color: var(--frost-300);
    line-height: 1.6;
  }
  .honest__truth b {
    color: var(--acid);
    font-weight: 600;
  }

  /* ---------------------------- compare ---------------------------- */
  .compare {
    display: grid;
    gap: var(--s-5);
  }
  @media (width >= 56rem) {
    .compare {
      grid-template-columns: 1fr 1fr;
    }
  }
  .compare__col {
    display: grid;
    gap: var(--s-5);
    align-content: start;
    padding: var(--s-6) var(--s-5);
  }
  .compare__col--old {
    background: var(--bg-inset);
    border-color: var(--line);
  }
  .compare__col--old::before,
  .compare__col--old::after {
    border-color: var(--frost-700);
  }
  .compare__col--new {
    background: linear-gradient(180deg, rgb(163 255 0 / 4%), transparent 40%), var(--bg-card);
  }
  .compare__list {
    display: grid;
    gap: var(--s-4);
  }
  .compare__list li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--s-3);
    font-size: var(--fs-sm);
    line-height: 1.55;
  }
  .compare__list li::before {
    content: '−';
    font-family: var(--font-mono);
    color: var(--danger);
    line-height: 1.5;
  }
  .compare__col--new .compare__list li::before {
    content: '+';
    color: var(--acid);
  }
  .compare__sum {
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 0.04em;
    color: var(--frost-500);
  }

  /* ---------------------------- process timeline ---------------------------- */
  .flow {
    display: grid;
    gap: var(--s-6);
  }
  @media (width >= 64rem) {
    .flow {
      grid-template-columns: 22rem minmax(0, 1fr);
      gap: clamp(3rem, 6vw, 6rem);
      align-items: start;
    }
    .flow__aside {
      position: sticky;
      top: 20vh;
    }
  }

  .flow__aside {
    display: grid;
    gap: var(--s-5);
    align-content: start;
  }
  .flow__progress {
    position: relative;
    height: 2px;
    background: var(--line);
    overflow: hidden;
  }
  .flow__progress i {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    background: linear-gradient(90deg, var(--ice), var(--acid));
    box-shadow: 0 0 14px rgb(163 255 0 / 50%);
  }
  .flow__count {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--frost-100);
    font-variant-numeric: tabular-nums;
  }
  .flow__count span {
    color: var(--frost-700);
    font-size: 1.25rem;
  }

  .flow__steps {
    display: grid;
    gap: var(--s-5);
    counter-reset: step;
  }
  .flow__step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-5);
    padding: var(--s-6) var(--s-5);
    transition: border-color var(--dur-slow) var(--ease-out), background-color var(--dur-slow) var(--ease-out);
  }
  .flow__step[data-active='true'] {
    border-color: var(--line-hi);
    background: var(--bg-card-hi);
  }
  .flow__step[data-active='true']::before,
  .flow__step[data-active='true']::after {
    opacity: 1;
  }
  .flow__num {
    counter-increment: step;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    color: var(--frost-700);
    padding-top: 0.3rem;
    transition: color var(--dur-mid) var(--ease-out);
  }
  .flow__num::before {
    content: '0' counter(step);
  }
  .flow__step[data-active='true'] .flow__num {
    color: var(--acid);
  }
  .flow__body {
    display: grid;
    gap: var(--s-3);
  }
  .flow__body p {
    font-size: var(--fs-sm);
    color: var(--frost-500);
    max-width: 44ch;
  }
  .flow__body .kv {
    margin-top: var(--s-2);
  }

  /* ---------------------------- calculator ---------------------------- */
  .calc {
    display: grid;
    gap: var(--s-6);
  }
  @media (width >= 64rem) {
    .calc {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: clamp(2rem, 4vw, 4rem);
      align-items: start;
    }
  }

  .calc__controls {
    display: grid;
    gap: var(--s-6);
    padding: var(--s-6) var(--s-5);
  }
  .calc__control {
    display: grid;
    gap: var(--s-3);
  }
  .calc__readout {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
  }
  .calc__readout output {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--frost-100);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .calc__readout small {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--frost-700);
  }
  .calc__scale {
    position: relative;
    height: 1.1em;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--frost-500);
  }
  .calc__scale span {
    position: absolute;
    top: 0;
    /* Same mapping as the range fill: min 3 → max 30 */
    left: calc((var(--at) - 3) / 27 * 100%);
    translate: -50% 0;
  }
  .calc__scale span:first-child {
    translate: 0 0;
  }
  .calc__scale span:last-child {
    translate: -100% 0;
  }

  .calc__result {
    display: grid;
    gap: var(--s-5);
  }
  .calc__hero {
    display: grid;
    gap: var(--s-2);
    padding: var(--s-7) var(--s-6);
    background:
      radial-gradient(ellipse 80% 120% at 0% 0%, rgb(163 255 0 / 9%), transparent 60%),
      var(--bg-card);
  }
  .calc__hero .label {
    margin-bottom: var(--s-2);
  }
  .calc__big {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 5.6vw, 4rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.035em;
    color: var(--acid);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 60px rgb(163 255 0 / 25%);
  }
  .calc__big sub {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--frost-500);
    vertical-align: baseline;
    margin-left: var(--s-2);
    bottom: 0;
  }
  .calc__sub {
    font-size: var(--fs-sm);
    color: var(--frost-500);
  }
  .calc__breakdown {
    padding: var(--s-5);
  }

  /* ---------------------------- requirements ---------------------------- */
  .req {
    display: grid;
    gap: var(--s-5);
  }
  @media (width >= 56rem) {
    .req {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .req__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--s-4);
    padding: var(--s-5);
  }
  .req__icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line-hi);
    border-radius: var(--r-1);
    background: var(--bg-inset);
    color: var(--acid);
  }
  .req__icon svg {
    width: 20px;
    height: 20px;
  }
  .req__body {
    display: grid;
    gap: var(--s-2);
  }
  .req__body p {
    font-size: var(--fs-sm);
    color: var(--frost-500);
  }
  .req__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ice);
  }

  /* ---------------------------- menu cards ---------------------------- */
  .menu {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  }
  .product {
    --tint: var(--acid);
    position: relative;
    display: grid;
    gap: var(--s-5);
    align-content: start;
    padding: var(--s-6) var(--s-5);
    overflow: hidden;
  }
  .product::before,
  .product::after {
    border-color: var(--tint);
  }
  .product__glow {
    position: absolute;
    inset: auto -30% -60% -30%;
    height: 220px;
    background: radial-gradient(ellipse 50% 100% at 50% 100%, var(--tint), transparent 70%);
    opacity: 0.1;
    transition: opacity var(--dur-slow) var(--ease-out);
    pointer-events: none;
  }
  .product:hover .product__glow {
    opacity: 0.24;
  }
  .product__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-4);
  }
  .product__cup {
    position: relative;
    width: 44px;
    height: 58px;
    flex: none;
    border-radius: 2px 2px 6px 6px;
    background: linear-gradient(170deg, var(--tint), rgb(6 8 11 / 85%));
    border: 1px solid rgb(234 244 255 / 14%);
  }
  .product__cup::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 6px;
    background: rgb(234 244 255 / 45%);
    border-radius: 1px;
  }
  .product__cup::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -12px;
    width: 3px;
    height: 20px;
    translate: -50% 0;
    background: rgb(234 244 255 / 30%);
    border-radius: 2px;
  }
  .product__price {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--frost-100);
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .product__tier {
    margin-top: var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tint);
    text-align: right;
  }
  .product h3 {
    max-width: 16ch;
  }
  .product__comp {
    font-size: var(--fs-sm);
    color: var(--frost-500);
  }
  .product__nutri {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
  }
  .product__nutri div {
    display: grid;
    gap: 2px;
  }
  .product__nutri dt {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--frost-500);
  }
  .product__nutri dd {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--frost-100);
    font-variant-numeric: tabular-nums;
  }
  .product__gym {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
    font-size: var(--fs-xs);
    color: var(--frost-500);
  }
  .product__gym b {
    font-family: var(--font-mono);
    color: var(--acid);
    font-size: var(--fs-sm);
  }

  /* ---------------------------- hygiene ---------------------------- */
  .hygiene {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
  .hygiene__item {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding: var(--s-5);
  }
  .hygiene__item p {
    font-size: var(--fs-sm);
    color: var(--frost-500);
  }

  /* ---------------------------- tech doorway ---------------------------- */
  .tech-door {
    display: grid;
    gap: var(--s-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  }
  .tech-door__card {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    color: inherit;
    text-decoration: none;
  }
  .tech-door__card p {
    font-size: var(--fs-sm);
    color: var(--frost-500);
  }
  .tech-door__card .tlink {
    justify-self: start;
    margin-top: var(--s-2);
  }

  /* ---------------------------- pilot + form ---------------------------- */
  .pilot {
    display: grid;
    gap: var(--s-6);
  }
  @media (width >= 64rem) {
    .pilot {
      grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
    }
  }
  .pilot__terms {
    display: grid;
    gap: var(--s-5);
    align-content: start;
  }
  .pilot__list {
    display: grid;
    gap: var(--s-4);
  }
  .pilot__list li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--s-3);
    font-size: var(--fs-sm);
    color: var(--frost-300);
    line-height: 1.55;
  }
  .pilot__list li::before {
    content: '→';
    font-family: var(--font-mono);
    color: var(--acid);
  }

  .form {
    display: grid;
    gap: var(--s-4);
    padding: var(--s-6) var(--s-5);
  }
  .form__head {
    display: grid;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
  }
  .form__head h3 {
    font-size: 1.25rem;
  }
  .form__head p {
    font-size: var(--fs-xs);
    color: var(--frost-500);
  }
  .form__status {
    font-size: var(--fs-xs);
    color: var(--acid);
    min-height: 1.2em;
  }

  /* ---------------------------- footer ---------------------------- */
  .footer {
    border-top: 1px solid var(--line);
    padding-block: var(--s-8) var(--s-6);
    background: var(--bg-void);
  }
  .footer__grid {
    display: grid;
    gap: var(--s-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    padding-bottom: var(--s-7);
    border-bottom: 1px solid var(--line);
  }
  .footer__col {
    display: grid;
    gap: var(--s-3);
    align-content: start;
    font-size: var(--fs-sm);
    color: var(--frost-500);
  }
  .footer__col a:hover {
    color: var(--acid);
  }
  .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4);
    justify-content: space-between;
    padding-top: var(--s-5);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--frost-500);
  }
  .footer__legal {
    max-width: 62rem;
    margin-top: var(--s-5);
    font-size: var(--fs-xs);
    line-height: 1.6;
    color: var(--frost-500);
  }
}

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

@layer motion {
  /* Primitive 1 — "defrost reveal": condensation clearing off the glass.
     Applied to every section element via IntersectionObserver. */
  [data-reveal] {
    opacity: 0;
    translate: 0 16px;
    filter: blur(6px);
    transition:
      opacity var(--dur-slow) var(--ease-out) var(--delay, 0ms),
      translate var(--dur-slow) var(--ease-frost) var(--delay, 0ms),
      filter var(--dur-slow) var(--ease-out) var(--delay, 0ms),
      letter-spacing var(--dur-slow) var(--ease-frost) var(--delay, 0ms);
  }
  h1[data-reveal],
  h2[data-reveal] {
    letter-spacing: 0.02em;
  }
  [data-reveal].is-in {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
  h1[data-reveal].is-in,
  h2[data-reveal].is-in {
    letter-spacing: -0.02em;
  }

  @keyframes defrost {
    from {
      opacity: 0;
      translate: 0 10px;
      filter: blur(5px);
    }
    to {
      opacity: 1;
      translate: 0 0;
      filter: blur(0);
    }
  }

  /* Primitive 2 — "impact": the shared 180ms hit used by the shatter,
     the CTA press and every committed calculator value. */
  @keyframes impact-shake {
    0% {
      translate: 0 0;
    }
    18% {
      translate: -3px 1px;
    }
    36% {
      translate: 2px -2px;
    }
    54% {
      translate: -2px -1px;
    }
    72% {
      translate: 1px 1px;
    }
    100% {
      translate: 0 0;
    }
  }

  .is-impact {
    animation: impact-shake 190ms var(--ease-impact) both;
  }

  @keyframes value-hit {
    0% {
      filter: brightness(1);
    }
    22% {
      filter: brightness(1.55) drop-shadow(0 0 18px rgb(163 255 0 / 70%));
    }
    100% {
      filter: brightness(1);
    }
  }
  .is-hit {
    animation: value-hit 340ms var(--ease-out);
  }

  /* --- wordmark frost shatter --- */
  @keyframes shard-land {
    from {
      opacity: 0;
      transform: translate(var(--dx), var(--dy)) rotate(var(--rot));
    }
    to {
      opacity: 1;
      transform: translate(0, 0) rotate(0deg);
    }
  }

  @keyframes chip-land {
    0% {
      opacity: 0;
      transform: translate(26px, -22px) rotate(10deg);
    }
    72% {
      opacity: 1;
      transform: translate(-2px, 2px) rotate(-1.2deg);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0) rotate(0);
    }
  }

  @keyframes crack-draw {
    from {
      stroke-dashoffset: var(--crack-len, 400);
      opacity: 0.9;
    }
    to {
      stroke-dashoffset: 0;
      opacity: 0.5;
    }
  }

  @keyframes crack-frost {
    from {
      stroke-dashoffset: var(--crack-len, 400);
      opacity: 0;
    }
    to {
      stroke-dashoffset: 0;
      opacity: 1;
    }
  }

  @keyframes impact-flash {
    0% {
      opacity: 0;
      transform: scale(0.2);
    }
    12% {
      opacity: 0.95;
    }
    100% {
      opacity: 0;
      transform: scale(1.5);
    }
  }

  @keyframes shard-fly {
    0% {
      opacity: 0;
      transform: translate(0, 0) scale(0.4);
    }
    14% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      transform: translate(var(--fx), var(--fy)) scale(0.1);
    }
  }

  @keyframes chroma-split {
    0%,
    100% {
      opacity: 0;
      transform: translate(0, 0);
    }
    18% {
      opacity: 0.7;
      transform: translate(-1.5px, 0.4px);
    }
    40% {
      opacity: 0.35;
      transform: translate(1.5px, -0.4px);
    }
    70% {
      opacity: 0;
    }
  }

  /* Before the hit: solid copy. After the hit: `is-shattering` stays on so
     fill-mode `both` holds the landed shards and drawn cracks. Killing that
     class (or animation:none) was compositing the wedges into a clean glyph —
     letters looked taller, most fractures vanished. */
  .wordmark [data-solid],
  .wordmark [data-chip] {
    opacity: 1;
  }
  .wordmark [data-shard],
  .wordmark [data-ice],
  .wordmark [data-flash],
  .wordmark [data-chroma] {
    opacity: 0;
  }
  .wordmark [data-crack] {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  /* Header mark: the landed hero pose, without playing the hit. */
  .wordmark--rest [data-solid] {
    opacity: 0;
  }
  .wordmark--rest [data-shard],
  .wordmark--rest [data-chip] {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }
  .wordmark--rest [data-crack] {
    stroke-dashoffset: 0;
    opacity: 1;
  }

  .wordmark.is-armed:not(.is-shattering) [data-chip] {
    opacity: 0;
  }
  .wordmark.is-armed:not(.is-shattering) [data-crack] {
    opacity: 0;
    stroke-dashoffset: var(--crack-len, 400);
  }

  .wordmark.is-shattering [data-solid] {
    opacity: 0;
  }
  .wordmark.is-shattering [data-shard] {
    animation: shard-land 620ms var(--ease-frost) var(--d, 0ms) both;
  }
  .wordmark.is-shattering [data-chip] {
    animation: chip-land 520ms var(--ease-impact) both;
  }
  .wordmark.is-shattering [data-crack] {
    animation: crack-frost 700ms var(--ease-out) 180ms both;
  }
  .wordmark.is-shattering [data-flash] {
    animation: impact-flash 420ms var(--ease-out) 150ms both;
  }
  .wordmark.is-shattering [data-ice] {
    animation: shard-fly 720ms var(--ease-out) var(--d, 0ms) both;
  }
  .wordmark.is-shattering [data-chroma] {
    animation: chroma-split 280ms linear 170ms both;
  }

  /* Cheaper replay used on header logo hover: cracks only */
  .wordmark.is-cracking [data-crack] {
    animation: crack-frost 1400ms var(--ease-out) both;
  }

  @keyframes pulse-dot {
    0%,
    100% {
      opacity: 1;
      box-shadow: 0 0 0 0 currentcolor;
    }
    50% {
      opacity: 0.55;
      box-shadow: 0 0 0 4px rgb(163 255 0 / 0%);
    }
  }

  @keyframes ticker-run {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  @keyframes glass-sheen {
    0%,
    62% {
      transform: translateX(-70%);
    }
    100% {
      transform: translateX(70%);
    }
  }

  @keyframes blade-idle {
    to {
      rotate: 360deg;
    }
  }

  /* Scroll-driven where the browser supports it; JS drives the fallback. */
  @supports (animation-timeline: scroll()) {
    .scrollbar-top {
      animation: scale-x linear;
      animation-timeline: scroll(root block);
    }
    @keyframes scale-x {
      from {
        scale: 0 1;
      }
      to {
        scale: 1 1;
      }
    }
  }

  .scrollbar-top {
    position: fixed;
    inset: 0 0 auto;
    z-index: 130;
    height: 2px;
    background: linear-gradient(90deg, var(--ice), var(--acid));
    transform-origin: 0 50%;
    scale: var(--sp, 0) 1;
    pointer-events: none;
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    [data-reveal] {
      opacity: 1;
      translate: 0 0;
      filter: none;
    }
    .wordmark.is-armed [data-solid],
    .wordmark.is-armed [data-chip] {
      opacity: 1;
    }
    .wordmark [data-crack],
    .wordmark.is-armed [data-crack] {
      stroke-dashoffset: 0;
      opacity: 1;
    }
    .ticker__track {
      animation: none;
    }
  }

  /* Heavy blurs are wasteful on small screens */
  @media (width < 48rem) {
    [data-reveal] {
      filter: none;
    }
    .hero::before {
      opacity: 0.6;
    }
  }
}

/* --------------------------- sections: tech page -------------------------- */

@layer sections {
  .page-hero {
    position: relative;
    padding-top: clamp(7rem, 16vh, 11rem);
    padding-bottom: var(--s-8);
  }
  .page-hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 640px;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 70% at 30% 0%, rgb(121 230 255 / 10%), transparent 70%);
  }
  .page-hero__inner {
    display: grid;
    gap: var(--s-5);
    max-width: 52rem;
  }
  .page-hero h1 {
    font-size: clamp(2.125rem, 5.4vw, 4.25rem);
  }
  .page-hero p {
    font-size: var(--fs-lead);
    color: var(--frost-500);
  }

  /* --- The Blade Engine --- */
  .engine {
    position: relative;
    display: grid;
    gap: var(--s-6);
  }
  @media (width >= 64rem) {
    .engine {
      grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
      gap: clamp(2rem, 5vw, 5rem);
    }
  }

  .engine__viewport {
    position: sticky;
    top: 0;
    z-index: 4;
    height: 100vh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--s-5);
    pointer-events: none;
  }

  .engine__mill {
    display: contents;
  }
  .engine__blade-stage {
    display: contents;
  }
  .engine__blade {
    width: min(74%, 21rem);
    aspect-ratio: 1;
    overflow: visible;
    filter: drop-shadow(0 0 60px rgb(121 230 255 / 22%));
  }
  .engine__spin {
    transform-origin: 100px 100px;
    transform-box: view-box;
  }
  .engine__drift {
    transform-origin: 100px 100px;
    transform-box: view-box;
    animation: blade-idle 24s linear infinite;
  }

  .engine__hud {
    display: flex;
    gap: var(--s-5);
    padding: var(--s-3) var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-1);
    background: rgb(6 8 11 / 70%);
    backdrop-filter: blur(8px);
  }
  .engine__hud div {
    display: grid;
    gap: 2px;
    text-align: center;
  }
  .engine__hud dt {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--frost-700);
  }
  .engine__hud dd {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--acid);
    font-variant-numeric: tabular-nums;
  }

  .engine__shards {
    display: none;
  }

  .engine__track {
    display: grid;
    padding-block: 30vh;
  }
  .engine__block {
    min-height: 56vh;
    display: grid;
    align-content: center;
    gap: var(--s-4);
    contain: layout;
    text-wrap: wrap;
  }
  .engine__block[data-crush] {
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
  }
  .engine__block h3 {
    font-size: clamp(1.375rem, 2.4vw, 2rem);
  }
  .engine__block p {
    font-size: var(--fs-lead);
    color: var(--frost-500);
    max-width: 40ch;
    text-wrap: wrap;
  }
  .engine__block .kv {
    max-width: 26rem;
  }

  /*
    Phone / tablet: compact mill bar.
    Round blade under the HUD — no fake perspective stretch.
  */
  @media (width < 64rem) {
    .engine {
      gap: 0;
    }
    .engine__viewport {
      --mill-top: 2px;
      top: var(--mill-top);
      height: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 0.35rem;
      padding: 0.4rem 0 0.65rem;
      overflow: hidden;
      isolation: isolate;
      background: transparent;
      border-bottom: 1px solid var(--line);
      transition: top var(--dur-mid) var(--ease-frost);
    }
    body:has(#site-header:not(.is-hidden)) .engine__viewport {
      --mill-top: var(--header-h, 4.5rem);
    }
    .engine__viewport::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 100vw;
      translate: -50% 0;
      z-index: -1;
      background: var(--bg-void);
      box-shadow: 0 22px 36px 12px var(--bg-void);
    }
    .engine__hud {
      order: 1;
      position: relative;
      z-index: 3;
      width: auto;
      gap: var(--s-5);
      padding: 0.35rem 0.85rem;
      backdrop-filter: none;
    }
    .engine__mill {
      order: 2;
      display: grid;
      place-items: center;
      position: relative;
      z-index: 2;
      width: 100%;
      height: auto;
      overflow: visible;
    }
    .engine__blade-stage {
      display: grid;
      place-items: center;
      width: auto;
      height: auto;
      transform: none;
    }
    .engine__blade {
      width: 6.5rem;
      height: auto;
      aspect-ratio: 1;
      filter: drop-shadow(0 0 14px rgb(121 230 255 / 18%));
    }
    .engine__shards {
      display: block;
      position: absolute;
      left: 50%;
      top: 50%;
      width: min(100vw, 22rem);
      height: 7.5rem;
      translate: -50% -50%;
      z-index: 1;
      pointer-events: none;
    }
    .engine__track {
      display: grid;
      gap: var(--s-8);
      padding: var(--s-6) 0 28vh;
    }
    .engine__block {
      min-height: 0;
      padding-block: 0;
    }
    .engine__block[data-crush] {
      clip-path: inset(var(--chew, 0px) 0 0 0);
      will-change: filter, opacity;
    }
  }

  /* --- CIP cycle diagram --- */
  .cip {
    display: grid;
    gap: var(--s-6);
    align-items: center;
  }
  @media (width >= 56rem) {
    .cip {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: clamp(2rem, 5vw, 4rem);
    }
  }
  .cip__diagram {
    width: 100%;
    max-width: 30rem;
    margin-inline: auto;
  }
  .cip__flow {
    stroke: var(--ice);
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 6 10;
    animation: cip-flow 1.6s linear infinite;
  }
  @keyframes cip-flow {
    to {
      stroke-dashoffset: -32;
    }
  }
  .cip__steps {
    display: grid;
    gap: var(--s-4);
    counter-reset: cip;
  }
  .cip__steps li {
    display: grid;
    grid-template-columns: 2.25rem 1fr;
    gap: var(--s-3);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--line);
    font-size: var(--fs-sm);
    color: var(--frost-300);
  }
  .cip__steps li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
  }
  .cip__steps li::before {
    counter-increment: cip;
    content: '0' counter(cip);
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    letter-spacing: 0.1em;
    color: var(--ice);
    padding-top: 0.25rem;
  }

  /* --- cold chain --- */
  .chain {
    display: grid;
    gap: 0;
    counter-reset: chain;
  }
  @media (width >= 56rem) {
    .chain {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  .chain__link {
    position: relative;
    display: grid;
    gap: var(--s-3);
    align-content: start;
    padding: var(--s-5);
    border: 1px solid var(--line);
    background: var(--bg-card);
  }
  .chain__link + .chain__link {
    border-top: 0;
  }
  @media (width >= 56rem) {
    .chain__link + .chain__link {
      border-top: 1px solid var(--line);
      border-left: 0;
    }
  }
  .chain__temp {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    color: var(--ice);
  }
  .chain__link h3 {
    font-size: 1rem;
  }
  .chain__link p {
    font-size: var(--fs-xs);
    color: var(--frost-500);
  }

  .cta-band {
    display: grid;
    gap: var(--s-5);
    justify-items: start;
    padding: clamp(2rem, 5vw, 4rem);
    background:
      radial-gradient(ellipse 60% 140% at 100% 0%, rgb(163 255 0 / 8%), transparent 60%),
      var(--bg-card);
  }
  .cta-band h2 {
    max-width: 24ch;
  }
  .cta-band p {
    max-width: 48ch;
    color: var(--frost-500);
  }
}

/* ---------------------------------- utils --------------------------------- */

@layer utils {
  .vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .stack {
    display: grid;
    gap: var(--s-4);
  }
  .stack-lg {
    display: grid;
    gap: var(--s-6);
  }
  .muted {
    color: var(--frost-500);
  }
  .acid {
    color: var(--acid);
  }
  .ice {
    color: var(--ice);
  }
  .nowrap {
    white-space: nowrap;
  }
  .center {
    text-align: center;
  }
  .mt-4 {
    margin-top: var(--s-4);
  }
  .mt-6 {
    margin-top: var(--s-6);
  }
}