@layer components {
/* Home hero component -- promoted from the hero-g prototype: typed word,
   layered petal ring, black core with a colored halo. JS writes classes and a handful of
   custom properties (--wheel-turn, --hero-accent, --petal-blend, the two
   sheen colors). */

/* Registered so every consumer (current word, code tokens, background
   radials) glides from one state's accent to the next instead of
   snapping. */
@property --hero-accent {
    syntax: '<color>';
    inherits: true;
    initial-value: transparent;
}

@property --fusion-glow-a {
    syntax: '<color>';
    inherits: true;
    initial-value: transparent;
}

@property --fusion-glow-b {
    syntax: '<color>';
    inherits: true;
    initial-value: transparent;
}

.home-hero {
    --hero-accent: var(--accent);

    position: relative;
    width: 100%;
    min-block-size: 100svh;
    display: grid;
    /* Inline padding matches the nav bar's, so the copy, the buttons and
       the proof align with the logo and the icon cluster. */
    padding: calc(var(--nav-h) + var(--space-6)) var(--space-6) var(--space-16);
    overflow: clip;
    isolation: isolate;
    transition: --hero-accent 700ms ease;

    /* Accent-tinted room light, from the homepage. */
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -2;
        background:
            radial-gradient(circle at 74% 46%, color-mix(in oklch, var(--hero-accent) 13%, transparent), transparent 35%),
            radial-gradient(circle at 30% 48%, color-mix(in oklch, var(--hero-accent) 5%, transparent), transparent 32%);
        transition: background var(--duration-slow) var(--ease-out-expo);
    }
}

.home-hero__layout {
    inline-size: min(100%, 96rem);
    block-size: 100%;
    min-block-size: 0;
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(26rem, 0.9fr) minmax(34rem, 1.3fr);
    /* The scene owns the whole first viewport; the proof row starts just
       below the fold and rewards the first scroll. */
    grid-template-rows: minmax(calc(100svh - var(--nav-h) - var(--space-16)), 1fr) auto;
    align-items: center;
    gap: var(--space-10) 0;
}

/* ── Copy column: Every / roller / in PHP ── */

.home-hero__copy {
    position: relative;
    z-index: auto;
    align-self: center;
    min-inline-size: 0;
    /* The column centres as a block, but its visual anchor is the typed
       word: this top padding rebalances the buttons' weight below so the
       word and its triangle sit level with the wheel centre. */
    padding-block-start: var(--space-20);
}

.home-hero__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: var(--text-0);
    font-weight: 300;
    line-height: 0.95;
    letter-spacing: -0.035em;
}

.home-hero__every,
.home-hero__php {
    position: relative;
    z-index: 9;
    /* Smaller than the roller word: Every and in PHP frame the sentence,
       the capability is the loud part. */
    font-size: clamp(var(--text-4xl), 4vw, var(--text-6xl));
    font-weight: 300;
}

/* Diagonal composition: Every anchors the top left, in PHP the bottom
   right, and the roller word owns the full row between them. */
.home-hero__every {
    align-self: flex-start;
    margin-block-end: calc(var(--space-2) * -1);
}

.home-hero__php {
    align-self: flex-start;
    margin-block-start: calc(var(--space-2) * -1);

    strong {
        font-weight: 500;
    }
}

/* ── The roller (homepage mechanics, unchanged) ── */

.home-hero__roller {
    --roller-current-size: clamp(var(--text-6xl), 6vw, var(--text-8xl));
    --roller-context-size: var(--text-3xl);
    --roller-distant-size: var(--text-2xl);

    position: relative;
    z-index: auto;
    inline-size: min(116%, 40rem);
    block-size: calc(var(--space-24) * 1.5);
    display: block;
    overflow: hidden;
    perspective: 42rem;
    perspective-origin: left center;
    color: var(--text-0);
    background:
        radial-gradient(ellipse at center, color-mix(in oklch, var(--surface-2) 88%, transparent), transparent 72%),
        linear-gradient(
            to bottom,
            transparent,
            color-mix(in oklch, var(--surface-1) 76%, transparent) 22%,
            color-mix(in oklch, var(--surface-0) 94%, transparent) 50%,
            color-mix(in oklch, var(--surface-1) 76%, transparent) 78%,
            transparent
        );
    box-shadow:
        inset 0 var(--space-5) var(--space-8) var(--surface-0),
        inset 0 calc(var(--space-5) * -1) var(--space-8) var(--surface-0);
    text-align: start;

    &:focus-visible {
        outline: none;

        .home-hero__roller-line.is-current {
            text-shadow: 0 0 var(--space-8) color-mix(in oklch, var(--hero-accent) 42%, transparent);
        }
    }
}

.home-hero__roller-line {
    position: absolute;
    inset-inline: 0;
    display: block;
    white-space: nowrap;
    font-size: var(--roller-current-size);
    font-weight: 600;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform-origin: left center;
}

.home-hero__roller-line.is-previous {
    inset-block-start: 50%;
    font-size: var(--roller-context-size);
    color: var(--text-2);
    opacity: 0.44;
    transform: translate3d(0, calc(var(--space-16) * -1), -5rem) rotateX(56deg);
}

.home-hero__roller-line.is-current {
    inset-block-start: 50%;
    transform: translateY(-50%);
    /* The state's accent, luminous variant; the registered --hero-accent
       interpolates, so the word glides between hues at every change. */
    color: var(--hero-accent);
}

.home-hero__roller-line.is-next {
    inset-block-start: 50%;
    font-size: var(--roller-context-size);
    color: var(--text-2);
    opacity: 0.44;
    transform: translate3d(0, var(--space-12), -5rem) rotateX(-56deg);
}

.home-hero__roller-line.is-following {
    inset-block-start: 50%;
    font-size: var(--roller-distant-size);
    color: var(--text-2);
    opacity: 0;
    transform: translate3d(0, var(--space-24), -10rem) rotateX(-82deg);
}

.home-hero.is-rolling {
    .home-hero__roller-line.is-previous {
        animation: home-hero-roll-previous var(--duration-slow) var(--ease-out-expo) both;
    }

    .home-hero__roller-line.is-current {
        animation: home-hero-roll-current var(--duration-slow) var(--ease-out-expo) both;
    }

    .home-hero__roller-line.is-next {
        color: var(--hero-accent);
        animation: home-hero-roll-next var(--duration-slow) var(--ease-out-expo) both;
    }

    .home-hero__roller-line.is-following {
        animation: home-hero-roll-following var(--duration-slow) var(--ease-out-expo) both;
    }
}

@keyframes home-hero-roll-previous {
    to {
        opacity: 0;
        font-size: var(--roller-distant-size);
        transform: translate3d(0, calc(var(--space-24) * -1), -10rem) rotateX(82deg);
    }
}

@keyframes home-hero-roll-current {
    to {
        opacity: 0.44;
        font-size: var(--roller-context-size);
        transform: translate3d(0, calc(var(--space-16) * -1), -5rem) rotateX(56deg);
    }
}

@keyframes home-hero-roll-next {
    to {
        opacity: 1;
        font-size: var(--roller-current-size);
        transform: translate3d(0, -50%, 0) rotateX(0);
    }
}

@keyframes home-hero-roll-following {
    to {
        opacity: 0.44;
        font-size: var(--roller-context-size);
        transform: translate3d(0, var(--space-12), -5rem) rotateX(-56deg);
    }
}

/* ── The wheel: disc + layered petals + sheen + frosted core ── */

.home-hero__visual {
    position: relative;
    /* The wheel crosses over the roller's black band, while the title
       glyphs remain above it through their own higher stacking level. */
    z-index: 6;
    min-inline-size: 0;
    display: grid;
    place-items: center;
}

.home-hero__stage {
    position: relative;
    inline-size: min(100%, 52rem, calc(100svh - var(--nav-h) - var(--space-40)));
    aspect-ratio: 1;
    container-type: inline-size;
    /* Hugging the right edge frees room for the copy column; the slight
       negative margin lets the rim kiss the viewport edge. */
    margin-inline: auto calc(var(--space-6) * -1);
    translate: calc(var(--space-8) * -1) 0;

    /* The pointer belongs to the wheel, so it always meets the actual
       circumference instead of floating at the edge of the text track. */
    &::after {
        content: "";
        position: absolute;
        inset-block-start: 50%;
        inset-inline-start: calc(var(--space-2) * -1);
        z-index: 8;
        inline-size: var(--space-3);
        block-size: var(--space-3);
        translate: 0 -50%;
        background: var(--text-0);
        clip-path: polygon(0 0, 0 100%, 100% 50%);
    }
}

.home-hero__petals {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    transform-origin: center;
    animation: home-hero-wheel-drift 120s linear infinite;
}

@keyframes home-hero-wheel-drift {
    to {
        rotate: 1turn;
    }
}

.home-hero__disc {
    fill: var(--surface-1);
    /* Rim tinted by the live accent, hairline thin; the registered
       --hero-accent makes it glide between states. */
    stroke: color-mix(in oklch, var(--hero-accent) 18%, transparent);
    /* SVG user units scale up with the viewBox: 0.1 unit is about a third
       of a CSS pixel at desktop sizes. */
    stroke-width: 0.1;
    transition: stroke 700ms ease;
}

/* One petal rule places the whole ring: each path carries its --i, the
   transform derives the position. The paths live in <defs>; the three
   <use> layers below instantiate them. */
.home-hero__petal {
    --petal-color: var(--hero-accent);

    fill: var(--petal-color);
    /* The wheel centre is folded into the transform itself: origin
       resolution via transform-box misfires inside use shadow trees. */
    transform: translate(100px, 100px) rotate(calc(var(--i, 0) * 22.5deg)) translate(0, -64.6px) rotate(-60deg) scale(1.9);
    transition: fill var(--duration-slow) var(--ease-out-expo);
}

/* The three instances share the same animated rotation, but each settles
   with its own easing so the layers separate and regroup organically. */
.home-hero__ring-layer {
    transform: translate(100px, 100px) rotate(var(--wheel-turn, 0deg)) translate(-100px, -100px);
    transition-property: transform;
    transition-duration: 900ms;
    /* Three layers rotating with filters and blends on top of each other:
       keep them on the compositor for the whole ride. */
    will-change: transform;
}

/* A, at the bottom: the base color, darker and firmer, ahead of the ring
   by +2deg. */
.home-hero__ring-a {
    transform: translate(100px, 100px) rotate(calc(var(--wheel-turn, 0deg) + 2deg)) translate(-100px, -100px);
    transition-timing-function: cubic-bezier(0.34, 1.34, 0.52, 1);
    transition-delay: 60ms;
    filter: brightness(0.68);
}

/* B, the base computed color, carries the per-state blend mode. */
.home-hero__ring-b {
    transition-timing-function: var(--ease-out-expo);
    mix-blend-mode: var(--petal-blend, normal);
}

/* C, on top: a luminous edge trailing at -2deg, mirroring A. Screen lifts
   the face where it overlaps and glows against the dark disc where it
   peeks. */
.home-hero__ring-c {
    transform: translate(100px, 100px) rotate(calc(var(--wheel-turn, 0deg) - 2deg)) translate(-100px, -100px);
    transition-timing-function: cubic-bezier(0.22, 0.72, 0.36, 1);
    transition-delay: -60ms;
    mix-blend-mode: screen;
    opacity: 0.25;
}

/* Ambient light on the disc: faint vertical falloff plus two palette
   radials, all in soft-light (hero-e). */
.home-hero__sheen {
    position: absolute;
    inset: 0.5%;
    border-radius: 50%;
    pointer-events: none;
    background:
        linear-gradient(oklch(1 0 0 / 0.25), oklch(0 0 0 / 0.3)),
        radial-gradient(70% 70% at 50% 30%, var(--fusion-glow-a) 0%, transparent 65%),
        radial-gradient(70% 70% at 50% 80%, var(--fusion-glow-b) 0%, transparent 65%),
        radial-gradient(80% 80% at 50% 50%, transparent 52%, color-mix(in oklch, var(--hero-accent) 42%, transparent) 100%);
    mix-blend-mode: soft-light;
    transition: --fusion-glow-a 900ms ease, --fusion-glow-b 900ms ease;
}

/* The core: fully opaque black so the code is isolated from whatever the
   ring does, with a wide soft shadow melting its edge into the petals. */
.home-hero__hollow {
    position: absolute;
    inset: 24%;
    display: grid;
    place-items: center;
    /* Centre the track itself too: the widest panel defines the implicit
       column, and without this every narrower panel drifts right. */
    place-content: center;
    border-radius: 50%;
    /* Near-opaque black, no backdrop-filter: blurring the backdrop forced
       a re-blur on every frame of the ring rotation for an effect the 95%
       black made invisible anyway. */
    background: oklch(0 0 0 / 0.97);
    border: 2px solid oklch(0 0 0);
    box-shadow: 0 0 var(--space-12) oklch(0 0 0 / 0.8);

    > * {
        grid-area: 1 / 1;
    }

    /* The homepage's conic halo, dialed way down: a faint two-color glow
       ringing the black core, painted behind the petals (negative z), so
       it only breathes through the gaps around the centre. */
    &::before {
        content: "";
        position: absolute;
        inset: -7%;
        z-index: -1;
        border-radius: 50%;
        background: conic-gradient(
            from 18deg,
            color-mix(in oklch, var(--fusion-glow-a) 12%, transparent),
            color-mix(in oklch, var(--fusion-glow-b) 12%, transparent),
            color-mix(in oklch, var(--fusion-glow-a) 12%, transparent)
        );
        filter: blur(18px);
        transition: --fusion-glow-a 900ms ease, --fusion-glow-b 900ms ease;
    }
}

/* Stroke-only star after the GitHub label. */
.home-hero__star {
    inline-size: 1em;
    block-size: 1em;
    margin-inline-start: var(--space-2);
    vertical-align: -0.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.home-hero__panel {
    display: grid;
    opacity: 0;
    translate: 0 var(--space-4);
    filter: blur(4px);
    pointer-events: none;
    transition:
        opacity var(--duration-normal),
        translate var(--duration-normal) var(--ease-out-expo),
        filter var(--duration-normal);

    &.is-active {
        opacity: 1;
        translate: 0 0;
        filter: none;
        pointer-events: auto;
    }
}

.home-hero__line {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 2.6cqw, 1.15rem);
    line-height: 1.75;
    font-variant-ligatures: none;
    white-space: pre;
    color: var(--text-1);

    /* Accent-derived syntax palette, from the homepage: every state
       recolors the code with its own accent. */
    /* Context lines: the drum treatment applied to the code, so one call
       is spoken and its siblings whisper the rest of the family. */
    &.is-dim {
        opacity: 0.38;
    }

    .tk-var { color: color-mix(in oklch, var(--hero-accent) 60%, var(--text-0)); }
    .tk-type { color: color-mix(in oklch, var(--hero-accent) 42%, var(--text-0)); }
    .tk-fn { color: oklch(from var(--hero-accent) 0.88 0.17 calc(h + 72)); }
    .tk-str { color: oklch(from var(--hero-accent) 0.85 0.17 calc(h - 48)); }
    .tk-num { color: oklch(from var(--hero-accent) 0.90 0.16 calc(h + 118)); }
}

.home-hero__panel[data-hero-state="Color Space"] {
    .home-hero__line {
        font-size: clamp(var(--text-base), 3cqw, var(--text-xl));
        color: var(--text-0);

        &.is-dim {
            opacity: 0.72;
        }

        .tk-str {
            color: var(--text-0);
        }
    }
}

/* The parse frame's middle line: every notation stacked on one cell, each
   visible for its slice of the loop. Quick, steady, no JS. */
.home-hero__cycle {
    display: grid;

    > * {
        grid-area: 1 / 1;
    }
}

.home-hero__line.is-cycle {
    opacity: 0;
    animation: home-hero-cycle calc(var(--n, 4) * 1.4s) infinite;
    animation-delay: calc(var(--k, 0) * 1.4s);
}

@keyframes home-hero-cycle {
    0%, 20% {
        opacity: 1;
    }

    26%, 100% {
        opacity: 0;
    }
}

/* ── Actions and proof ── */

.home-hero__actions {
    position: relative;
    z-index: 4;
    /* Living under "in PHP", inside the copy column. */
    margin-block-start: var(--space-24);

    /* Both buttons stay black with a plain contour. */
    .btn {
        background: var(--surface-0);
        border: 2px solid var(--border-default);
        color: var(--text-0);
        box-shadow: none;
    }

}

.home-hero__proof {
    align-self: end;
    display: grid;
    grid-template-columns: repeat(4, auto);
    /* The whole bottom row belongs to the proof: 80% of the width, the
       four facts spread across it. */
    /* The whole bottom row, centred: sized and spaced like the header
       menu. */
    grid-column: 1 / -1;
    justify-content: center;
    gap: var(--space-4) var(--space-16);
    inline-size: 80%;
    margin: 0 auto;
    color: var(--text-0);

    dt {
        font-size: calc(var(--text-xs) * 0.9);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-3);
    }

    dd {
        margin-block-start: 0;
        font-size: var(--text-base);
        white-space: nowrap;
    }
}

/* Below laptop: one column, the color comes first. Wheel on top (allowed
   to bleed past the viewport edges, the code stays fully readable), then
   the slogan, then the buttons right below, then the proof. */
@media (width <= 1200px) {
    .home-hero {
        padding-block: calc(var(--nav-h) + var(--space-2)) var(--space-8);
    }

    .home-hero__layout {
        block-size: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--space-6);
        /* The vertical stack reads best narrow: cap it and centre it. */
        max-inline-size: 40rem;
    }

    .home-hero__visual {
        order: -1;
    }

    .home-hero__copy {
        padding-block-start: 0;
    }

    .home-hero__title {
        align-items: center;
    }

    .home-hero__every,
    .home-hero__color,
    .home-hero__php {
        align-self: center;
        font-size: clamp(var(--text-3xl), 5.5vw, var(--text-5xl));
    }

    .home-hero__roller {
        --roller-current-size: clamp(var(--text-4xl), 7vw, var(--text-6xl));
        --roller-context-size: var(--text-xl);
        --roller-distant-size: var(--text-lg);

        inline-size: min(100%, 34rem);
        block-size: calc(var(--space-20) * 1.6);
        /* The glass band reads as a cut rectangle when the layout is a
           centred column; drop it, the type carries the line alone. */
        background: none;
        box-shadow: none;

        /* The wheel sits above the text here: an arrow pointing right
           would aim at nothing. */
        &::after {
            display: none;
        }
    }

    .home-hero__roller-line {
        text-align: center;
        transform-origin: center;
    }

    /* The wheel keeps its size and bleeds past the viewport edges; the
       section clip crops the petals, the code stays fully readable.
       Grid "center" falls back to start when the item overflows its
       track; symmetric negative margins do the centring instead. */
    .home-hero__stage {
        /* Sized against the viewport height too: the wheel must leave the
           first screen enough room to show the title below it. */
        inline-size: min(38rem, 108vw, calc(100svh - var(--nav-h) - 22rem));
        margin-inline: calc((100% - min(38rem, 108vw, calc(100svh - var(--nav-h) - 22rem))) / 2);
    }

    .home-hero__actions {
        justify-content: center;
    }

    .home-hero__proof {
        inline-size: auto;
        margin-inline: 0;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        gap: var(--space-4) var(--space-8);
        text-align: center;

        dd {
            font-size: var(--text-base);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero *,
    .home-hero *::before,
    .home-hero *::after {
        animation-duration: 1ms;
        animation-iteration-count: 1;
        transition-duration: 1ms;
    }

    /* The cycling notation freezes on its first value instead of ending
       up with every layer invisible. */
    .home-hero__line.is-cycle {
        animation: none;

        &:first-child {
            opacity: 1;
        }
    }
}

/* Typed word, core halo and hero-g refinements, merged into the component. */

@property --fusion-glow-c {
    syntax: '<color>';
    inherits: true;
    initial-value: transparent;
}

@property --fusion-glow-d {
    syntax: '<color>';
    inherits: true;
    initial-value: transparent;
}

/* The homepage's centre treatment: a four-color conic glow sitting over
   the disc; the opaque core painted right after swallows its middle, so
   it only rings the black circle. */
.home-hero__halo {
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    pointer-events: none;
    background: conic-gradient(
        from 18deg,
        color-mix(in oklch, var(--fusion-glow-a) 13%, transparent),
        color-mix(in oklch, var(--fusion-glow-c) 13%, transparent),
        color-mix(in oklch, var(--fusion-glow-b) 13%, transparent),
        color-mix(in oklch, var(--fusion-glow-d) 13%, transparent),
        color-mix(in oklch, var(--fusion-glow-a) 13%, transparent)
    );
    filter: blur(30px);
    transition:
        --fusion-glow-a 900ms ease,
        --fusion-glow-b 900ms ease,
        --fusion-glow-c 900ms ease,
        --fusion-glow-d 900ms ease;
}

[data-controller="home-hero"] .home-hero__hollow {
    /* Keep the code readable when the outer wheel is constrained by a
       narrow viewport or a short mobile screen. */
    inset: 50% auto auto 50%;
    inline-size: max(56%, calc(var(--space-40) * 2));
    aspect-ratio: 1;
    translate: -50% -50%;
    border: none;
    box-shadow: 0 0 var(--space-16) var(--space-4) oklch(0 0 0 / 0.9);
}

.home-hero__type {
    z-index: 7;
    display: flex;
    align-items: center;
    overflow: visible;
    perspective: none;
    background: none;
    box-shadow: none;
}

.home-hero__word {
    position: relative;
    z-index: 9;
    font-size: var(--roller-current-size);
    font-weight: 600;
    white-space: pre;
    color: var(--hero-accent);
}

/* While the word types, the panel swap must be crisp: the fusion blur and
   duration leave two ghosted panels stacked mid-keystroke. */
[data-controller="home-hero"] .home-hero__panel {
    filter: blur(2px);
    transition-duration: 180ms;

    &.is-active {
        filter: none;
    }
}

@media (width <= 1200px) {
    .home-hero__stage { translate: 0; }
    .home-hero__stage::after { display: none; }

    .home-hero__type {
        justify-content: center;
        text-align: center;
    }
}
}
@layer page {
/* ============================================================
   LANDING
   Styles for the rich product landing page (splits variant).
   Full-viewport hero, alternating split sections with
   visual compositions, numbers band, and CTA.
   ============================================================ */

/* --- Hero (full viewport) --- */
.landing-hero {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 var(--gutter);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 100% 65% at 50% 40%, oklch(0.14 0.06 260 / 0.6) 0%, transparent 60%),
      radial-gradient(ellipse 50% 45% at 20% 65%, oklch(0.12 0.08 350 / 0.3) 0%, transparent 50%),
      radial-gradient(ellipse 50% 45% at 80% 55%, oklch(0.12 0.07 145 / 0.3) 0%, transparent 50%);
    pointer-events: none;
  }
}

/* Compact variant: keeps the big title but drops the full-viewport
   height so the content below sits within view. For hub pages that are
   not the homepage. */
.landing-hero.compact {
  min-height: 0;
  justify-content: flex-start;
  padding-block: calc(var(--nav-h) + var(--space-16)) var(--space-12);
}

.landing-hero-content {
  position: relative;
}
.landing-hero-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--text-2);
  margin-bottom: var(--space-8);

  /* Breadcrumb-style links: each segment ahead of the current page
     is a real <a>. Same visual rhythm as the original kicker, plus
     a hover affordance. */
  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--duration-fast);

    &:hover { color: var(--text-0); }
  }
}
.landing-hero-title {
  font-size: clamp(3.5rem, 10vw, 8rem);
  font-weight: 100;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text-0);
  margin-bottom: clamp(1.5rem, 3vh, 3rem);

  em {
    font-style: normal;
    font-weight: 600;
    background: linear-gradient(135deg,
      oklch(0.78 0.28 350),
      oklch(0.82 0.26 55),
      oklch(0.80 0.26 145),
      oklch(0.75 0.28 260));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.landing-hero-sub {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-weight: 300;
  color: var(--text-2);
  max-width: 34rem;
  margin: 0 auto clamp(2rem, 4vh, 4rem);
  text-wrap: balance;
}

/* Spectrum bar */
.landing-spectrum {
  display: flex;
  height: 3px;
  gap: 1px;
  margin-top: clamp(4rem, 8vh, 8rem);
  width: min(70%, 32rem);
  margin-inline: auto;

  span {
    flex: 1;
    border-radius: 2px;
  }
}

/* --- Split sections --- */
.landing-split {
  max-width: 80rem;
  margin: 0 auto;
  padding: clamp(5rem, 12vh, 12rem) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;

  &.reverse {
    .landing-split-text { order: 2; }
    .landing-split-visual { order: 1; }
  }
}

.landing-split-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-text);
  margin-bottom: var(--space-4);
}
.landing-split-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 200;
  color: var(--text-0);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);

  strong { font-weight: 600; }
}
.landing-split-desc {
  color: var(--text-1);
  max-width: 30rem;
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
}

/* Visual side glow */
.landing-split-visual {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: -3rem;
    background: radial-gradient(
      ellipse 80% 70% at 50% 50%,
      oklch(from var(--accent) 0.12 0.06 h / 0.55) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
  }
  > * { position: relative; z-index: 1; }
}

/* --- Checklist --- */
.landing-checklist {
  list-style: none;
  margin-bottom: var(--space-8);

  li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-1);
  }
}
.landing-check {
  width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: oklch(from var(--accent) l c h / 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-text);
  font-size: 0.65rem;
}

/* --- Code float --- */
.landing-code {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 1vw, 0.92rem);
  font-weight: 300;
  line-height: 2.2;
  color: var(--text-1);
  padding: var(--space-8) var(--space-6);
  background: oklch(from var(--accent) 0.07 0.006 h);
  border-radius: var(--radius-lg);
}

/* --- Color wheel (animated ring) --- */
.landing-wheel {
  width: clamp(280px, 100%, 400px);
  aspect-ratio: 1;
  position: relative;
  margin: 0 auto;
}
.landing-wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    oklch(0.75 0.28 0), oklch(0.80 0.26 30), oklch(0.85 0.24 60),
    oklch(0.88 0.22 90), oklch(0.85 0.26 120), oklch(0.80 0.28 150),
    oklch(0.75 0.26 180), oklch(0.70 0.24 210), oklch(0.65 0.26 240),
    oklch(0.62 0.28 270), oklch(0.65 0.26 300), oklch(0.72 0.28 330),
    oklch(0.75 0.28 360));
  mask-image: radial-gradient(circle, transparent 58%, black 60%, black 84%, transparent 86%);
  -webkit-mask-image: radial-gradient(circle, transparent 58%, black 60%, black 84%, transparent 86%);
  animation: landing-wheel-spin 30s linear infinite;
}
@keyframes landing-wheel-spin { to { transform: rotate(360deg); } }
.landing-wheel-center {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-2);
  letter-spacing: 0.05em;
}
.landing-wheel-dots {
  position: absolute;
  inset: 0;
  animation: landing-dots-spin 20s linear infinite reverse;
}
@keyframes landing-dots-spin { to { transform: rotate(360deg); } }
.landing-wheel-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  box-shadow: 0 0 12px currentColor;
}

/* --- Palette strips --- */
.landing-palette {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.landing-palette-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-2);
}
.landing-palette-strip {
  display: flex;
  gap: 2px;
  height: 48px;
  border-radius: var(--radius-sm);
  overflow: hidden;

  span {
    flex: 1;
    transition: flex var(--duration-normal) var(--ease-out-expo);
  }
  &:hover span:nth-child(odd) { flex: 1.8; }
}

/* --- Contrast bars --- */
.landing-contrast {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.landing-contrast-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md);

  .sample {
    font-size: var(--text-xl);
    font-weight: 400;
  }
  .score {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    display: flex;
    align-items: center;
    gap: var(--space-2);

    .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
    }
  }
}

/* --- Color mosaic --- */
.landing-mosaic {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 3px;
}
.landing-mosaic-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--ease-out-expo);

  &:hover { transform: scale(1.2); z-index: 1; }
  &.wide { grid-column: span 2; aspect-ratio: 2/1; }
  &.tall { grid-row: span 2; aspect-ratio: auto; }
}

/* --- Feature icons --- */
.landing-feat-icons {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.landing-feat-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 72px;

  span {
    font-size: 0.65rem;
    font-weight: 400;
    color: var(--text-2);
    text-align: center;
  }
}

/* --- Numbers band --- */
.landing-numbers {
  padding: clamp(3rem, 6vh, 5rem) var(--gutter);
  display: flex;
  justify-content: center;
  gap: clamp(3rem, 8vw, 10rem);
  flex-wrap: wrap;
}
.landing-num { text-align: center; }
.landing-num-value {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
}
.landing-num-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-2);
  margin-top: var(--space-2);
}

/* --- CTA (full viewport) --- */
.landing-cta {
  min-height: 70dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6rem, 14vh, 14rem) var(--gutter);
  position: relative;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 60% at 50% 50%, oklch(0.10 0.05 145 / 0.4) 0%, transparent 60%),
      radial-gradient(ellipse 50% 40% at 30% 60%, oklch(0.08 0.06 260 / 0.25) 0%, transparent 50%);
    pointer-events: none;
  }

  h2 {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 100;
    color: var(--text-0);
    line-height: 1.05;
    letter-spacing: -0.03em;
    margin-bottom: var(--space-4);

    strong { font-weight: 600; }
  }
  p {
    font-size: var(--text-lg);
    color: var(--text-2);
    margin-bottom: clamp(2rem, 4vh, 4rem);
    text-wrap: balance;
  }
}
.landing-cta-content { position: relative; }

/* --- Responsive --- */
@media (width <= 900px) {
  .landing-split { grid-template-columns: 1fr; gap: var(--space-12); }
  .landing-split.reverse .landing-split-text { order: 0; }
  .landing-split.reverse .landing-split-visual { order: 0; }
}
@media (width <= 600px) {
  .landing-numbers { gap: var(--space-8); }
  .landing-feat-icons { gap: var(--space-3); }
}
}
@layer page {
.home-engine,
.home-system,
.home-vision,
.home-solvers,
.home-relative {
  max-width: 88rem;
  margin-inline: auto;
  padding: clamp(6rem, 10vw, 10rem) var(--gutter);
  border-top: 1px solid var(--border-subtle);
}

.home-engine__header,
.home-system > header,
.home-vision > header,
.home-solvers > header,
.home-relative > header {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18rem, 0.65fr);
  gap: var(--space-8) var(--space-20);
  align-items: end;
  margin-block-end: clamp(4rem, 8vw, 7rem);
}

.home-engine__header .eyebrow,
.home-system > header .eyebrow,
.home-vision > header .eyebrow,
.home-solvers > header .eyebrow,
.home-relative > header .eyebrow {
  grid-column: 1 / -1;
}

.home-engine h2,
.home-system h2,
.home-vision h2,
.home-solvers h2,
.home-relative h2 {
  margin: 0;
  color: var(--text-0);
  font-size: clamp(3.4rem, 6.4vw, 6.7rem);
  font-weight: var(--weight-light);
  letter-spacing: -0.055em;
  line-height: 0.94;
  text-wrap: balance;
}

.home-engine h2 em,
.home-system h2 em,
.home-vision h2 em,
.home-solvers h2 em,
.home-relative h2 em {
  color: var(--accent-text);
  font-style: normal;
}

.home-engine__header > p:last-child,
.home-system > header > p:last-child,
.home-vision > header > p:not(.eyebrow),
.home-relative > header > p:last-child {
  max-width: 48ch;
  margin: 0;
  color: var(--text-1);
  font-size: var(--text-lg);
  line-height: 1.75;
  text-wrap: pretty;
}

.home-text-link {
  display: inline-flex;
  gap: var(--space-3);
  align-items: center;
  width: fit-content;
  margin-block-start: var(--space-10);
  color: var(--text-0);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.home-text-link span {
  color: var(--accent-text);
  transition: translate var(--duration-fast) var(--ease-out-expo);
}

.home-text-link:hover span { translate: var(--space-1) 0; }
.home-text-link:focus-visible { outline: 2px solid var(--accent-text); outline-offset: var(--space-2); }

.home-code-line {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  margin: var(--space-8) 0 0;
  color: var(--text-2);
  font-size: var(--text-sm);
}

.home-code-line code { color: var(--text-0); font-size: inherit; }

/* A compact inventory, not a stack of feature cards. */
.home-engine__spectrum {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  gap: var(--space-2);
  align-items: end;
  min-height: 19rem;
}

.home-engine__spectrum span {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: var(--space-4);
  min-width: 0;
  color: var(--text-2);
  font-size: clamp(0.56rem, 0.65vw, var(--text-xs));
  line-height: 1.25;
  text-align: center;
}

.home-engine__spectrum i {
  display: block;
  min-height: 7rem;
  background: #62d2ff;
  border-radius: 999px 999px var(--space-2) var(--space-2);
}

.home-engine__spectrum span:nth-child(1) i { height: 42%; background: #ff557c; }
.home-engine__spectrum span:nth-child(2) i { height: 56%; background: #ff7a4f; }
.home-engine__spectrum span:nth-child(3) i { height: 76%; background: #ffae38; }
.home-engine__spectrum span:nth-child(4) i { height: 61%; background: #d4ca42; }
.home-engine__spectrum span:nth-child(5) i { height: 82%; background: #82d767; }
.home-engine__spectrum span:nth-child(6) i { height: 67%; background: #3dd8a0; }
.home-engine__spectrum span:nth-child(7) i { height: 94%; background: #35d5d0; }
.home-engine__spectrum span:nth-child(8) i { height: 72%; background: #43bdff; }
.home-engine__spectrum span:nth-child(9) i { height: 88%; background: #5b91ff; }
.home-engine__spectrum span:nth-child(10) i { height: 64%; background: #806eae; }
.home-engine__spectrum span:nth-child(11) i { height: 100%; background: #ad74e8; }
.home-engine__spectrum span:nth-child(12) i { height: 78%; background: #dc72d7; }
.home-engine__spectrum span:nth-child(13) i { height: 58%; background: #f070a8; }
.home-engine__spectrum span:nth-child(14) i { height: 46%; background: #a99982; }

.home-engine__breadth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-16);
  margin-block-start: var(--space-16);
}

.home-engine__breadth > div {
  display: grid;
  grid-template-columns: minmax(7rem, 0.3fr) minmax(0, 1fr);
  gap: var(--space-6);
  padding-block: var(--space-6);
  border-block: 1px solid var(--border-subtle);
}

.home-engine__breadth strong { color: var(--text-0); font-weight: var(--weight-medium); }
.home-engine__breadth p { margin: 0; color: var(--text-1); line-height: 1.7; }
.home-engine__breadth code { color: inherit; }

/* Inputs converge on one typed value, then fan out into useful artifacts. */
.home-system-map {
  display: grid;
  grid-template-columns: minmax(12rem, 0.7fr) minmax(13rem, 0.65fr) minmax(24rem, 1.65fr);
  gap: clamp(2rem, 5vw, 6rem);
  align-items: center;
}

.home-system-map__inputs {
  display: grid;
  gap: var(--space-5);
}

.home-system-map__inputs code {
  padding-block: var(--space-3);
  color: var(--text-1);
  border-bottom: 1px solid var(--border-subtle);
  overflow-wrap: anywhere;
}

.home-system-map__core {
  display: grid;
  place-content: center;
  aspect-ratio: 1;
  padding: var(--space-6);
  border-radius: 50%;
  background: #806eae;
  color: #09080c;
  text-align: center;
}

.home-system-map__core span { font-size: var(--text-sm); }
.home-system-map__core strong { margin-block: var(--space-2); font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.home-system-map__core code { color: inherit; font-size: var(--text-xs); }

.home-system-map__outputs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-8) var(--space-12);
}

.home-system-map__outputs > div {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.home-system-map__outputs strong { color: var(--text-0); font-size: var(--text-lg); font-weight: var(--weight-regular); }
.home-system-map__outputs code { color: var(--text-1); overflow-wrap: anywhere; }

.home-color-run { display: flex; min-height: var(--space-10); }
.home-color-run i { flex: 1; }
.home-color-run i:first-child { border-radius: var(--space-2) 0 0 var(--space-2); }
.home-color-run i:last-child { border-radius: 0 var(--space-2) var(--space-2) 0; }
.home-color-run--variants i:nth-child(1) { background: #332b46; }
.home-color-run--variants i:nth-child(2) { background: #594c79; }
.home-color-run--variants i:nth-child(3) { background: #806eae; }
.home-color-run--variants i:nth-child(4) { background: #a99aca; }
.home-color-run--variants i:nth-child(5) { background: #d7cfea; }
.home-color-run--palette i:nth-child(1) { background: #e55f76; }
.home-color-run--palette i:nth-child(2) { background: #ee9a55; }
.home-color-run--palette i:nth-child(3) { background: #d2c85b; }
.home-color-run--palette i:nth-child(4) { background: #70c795; }
.home-color-run--palette i:nth-child(5) { background: #56a6d8; }
.home-color-run--gradient i:nth-child(1) { background: #806eae; }
.home-color-run--gradient i:nth-child(2) { background: #9a77a8; }
.home-color-run--gradient i:nth-child(3) { background: #b67f9c; }
.home-color-run--gradient i:nth-child(4) { background: #d38484; }
.home-color-run--gradient i:nth-child(5) { background: #e98523; }

/* The colors are the content. Surfaces stay open and quiet. */
.home-vision > header { grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); }
.home-vision > header .home-text-link { grid-column: 2; margin-block-start: 0; }

.home-vision-matrix { display: grid; gap: var(--space-7); }
.home-vision-row {
  display: grid;
  grid-template-columns: minmax(9rem, 0.5fr) repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.home-vision-row > strong { align-self: center; color: var(--text-0); font-weight: var(--weight-regular); }
.home-vision-row > span { display: grid; gap: var(--space-3); color: var(--text-2); font-size: var(--text-xs); }
.home-vision-row i { display: block; min-height: clamp(3.5rem, 7vw, 7rem); border-radius: var(--space-2); }
.home-vision-row--1 span:nth-of-type(1) i { background: #dc2626; }
.home-vision-row--1 span:nth-of-type(2) i { background: #d97706; }
.home-vision-row--1 span:nth-of-type(3) i { background: #16a34a; }
.home-vision-row--1 span:nth-of-type(4) i { background: #2563eb; }
.home-vision-row--2 span:nth-of-type(1) i { background: #98a526; }
.home-vision-row--2 span:nth-of-type(2) i { background: #b4bc28; }
.home-vision-row--2 span:nth-of-type(3) i { background: #4b4065; }
.home-vision-row--2 span:nth-of-type(4) i { background: #3c38c2; }
.home-vision-row--3 span:nth-of-type(1) i { background: #8d8c26; }
.home-vision-row--3 span:nth-of-type(2) i { background: #afae21; }
.home-vision-row--3 span:nth-of-type(3) i { background: #535460; }
.home-vision-row--3 span:nth-of-type(4) i { background: #4040ca; }
.home-vision-row--4 span:nth-of-type(1) i { background: #d32626; }
.home-vision-row--4 span:nth-of-type(2) i { background: #d4373c; }
.home-vision-row--4 span:nth-of-type(3) i { background: #1d7174; }
.home-vision-row--4 span:nth-of-type(4) i { background: #28b0aa; }
.home-vision-row--5 span:nth-of-type(1) i { background: #5c5c5c; }
.home-vision-row--5 span:nth-of-type(2) i { background: #878787; }
.home-vision-row--5 span:nth-of-type(3) i { background: #6f6f6f; }
.home-vision-row--5 span:nth-of-type(4) i { background: #606060; }

.home-solvers > header { grid-template-columns: 1fr; }
.home-solvers > header h2 { max-width: 15ch; }
.home-solvers__layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(20rem, 0.65fr); gap: clamp(5rem, 9vw, 10rem); }
.home-theme-transformer { display: grid; grid-template-columns: minmax(15rem, 0.7fr) minmax(20rem, 1.3fr); gap: var(--space-12); align-items: center; }
.home-theme-transformer__copy > span,
.home-contrast-fixer > span { color: var(--accent-text); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; }
.home-theme-transformer h3,
.home-contrast-fixer h3 { margin: var(--space-5) 0; color: var(--text-0); font-size: var(--text-3xl); font-weight: var(--weight-light); line-height: 1.12; }
.home-theme-transformer p { margin: 0; color: var(--text-1); line-height: 1.65; }
.home-theme-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.home-theme-pair figure { display: grid; align-content: space-between; min-height: 19rem; margin: 0; padding: var(--space-6); border-radius: var(--space-4); }
.home-theme-pair figcaption { font-size: var(--text-sm); }
.home-theme-pair strong { font-size: var(--text-xl); }
.home-theme-pair span { display: block; width: 55%; height: var(--space-3); border-radius: 999px; }
.home-theme-pair .is-light { background: #f4f1f8; color: #25212c; }
.home-theme-pair .is-light span { background: #806eae; }
.home-theme-pair .is-dark { background: #12101a; color: #eee8f7; }
.home-theme-pair .is-dark span { background: #b99ee8; }
.home-contrast-fixer { align-self: center; }
.home-contrast-fixer__result { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-4); align-items: center; margin-block: var(--space-10) var(--space-6); }
.home-contrast-fixer__result > div { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--space-3); }
.home-contrast-fixer__result small { color: inherit; opacity: 0.72; }
.home-contrast-fixer__result strong { font-size: var(--text-2xl); font-weight: var(--weight-medium); }
.home-contrast-fixer__result code { color: inherit; }
.home-contrast-fixer__result b { color: var(--text-2); font-weight: var(--weight-regular); }
.home-contrast-fixer__result .is-before { background: #3b82f6; color: #07111f; }
.home-contrast-fixer__result .is-after { background: var(--result-color); color: #07111f; }

.home-relative-flow { display: grid; grid-template-columns: minmax(10rem, 0.65fr) minmax(22rem, 1.7fr) minmax(10rem, 0.65fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; }
.home-relative-flow > div { display: grid; gap: var(--space-4); }
.home-relative-flow span { color: var(--text-2); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; }
.home-relative-flow i { display: block; aspect-ratio: 1; max-width: 12rem; border-radius: 50%; background: #806eae; }
.home-relative-flow__result i { background: #9e8cce; }
.home-relative-flow code,
.home-relative-flow strong { color: var(--text-0); }
.home-relative-flow__expression code { font-size: clamp(var(--text-lg), 2.3vw, var(--text-3xl)); line-height: 1.55; overflow-wrap: anywhere; }
.home-relative-flow__result strong { font-size: var(--text-xl); font-weight: var(--weight-regular); }
.home-relative-flow__result code { color: var(--text-2); }

@media (width <= 960px) {
  .home-engine__header,
  .home-system > header,
  .home-vision > header,
  .home-relative > header { grid-template-columns: 1fr; }
  .home-engine__header > p:last-child,
  .home-system > header > p:last-child,
  .home-vision > header > p:not(.eyebrow),
  .home-relative > header > p:last-child { max-width: 60ch; }
  .home-vision > header .home-text-link { grid-column: 1; }
  .home-engine__spectrum { grid-template-columns: repeat(7, minmax(0, 1fr)); min-height: 29rem; }
  .home-system-map { grid-template-columns: minmax(10rem, 0.7fr) minmax(11rem, 0.7fr) minmax(18rem, 1.6fr); gap: var(--space-8); }
  .home-solvers__layout { grid-template-columns: 1fr; }
  .home-contrast-fixer { max-width: 38rem; }
  .home-relative-flow { gap: var(--space-8); }
}

@media (width <= 680px) {
  .home-engine,
  .home-system,
  .home-vision,
  .home-solvers,
  .home-relative,
  .home-engine h2,
  .home-system h2,
  .home-vision h2,
  .home-solvers h2,
  .home-relative h2,
  .home-engine__spectrum { grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 44rem; }
  .home-engine__breadth,
  .home-system-map,
  .home-system-map__outputs,
  .home-theme-transformer,
  .home-relative-flow,
  .home-engine__breadth > div { grid-template-columns: 1fr; }
  .home-system-map__core { width: min(14rem, 70vw); justify-self: center; }
  .home-system-map__outputs { gap: var(--space-7); }
  .home-vision-matrix { gap: var(--space-10); }
  .home-vision-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .home-vision-row > strong { grid-column: 1 / -1; }
  .home-vision-row > span { font-size: 0.66rem; }
  .home-theme-pair { gap: var(--space-3); }
  .home-theme-pair figure { min-height: 15rem; padding: var(--space-4); }
  .home-contrast-fixer__result { grid-template-columns: 1fr; }
  .home-contrast-fixer__result b { rotate: 90deg; justify-self: center; }
  .home-relative-flow__expression { padding-block: var(--space-8); }
  .home-relative-flow i { width: 9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-text-link span { transition: none; }
}
}