/* ═══════════════════════════════════════════════════════════════════
   hud.css — "HUD" design layer

   Two references, blended onto the UrgeSol brand:

   1. khaledoghli.com → the whole effect vocabulary. Notched octagon
      panels drawn as a 1px accent rim around a dark fill, fractal-noise
      texture, corner brackets, scanline sweep on hover, wide-tracked
      mono micro-labels, segmented meters, glitch/chromatic cursor,
      HUD buttons with a corner diamond + a sub-label chip.
      Its teal/amber accents were swapped for UrgeSol blue/magenta.
   2. melius.com → the portfolio "coverflow": a perspective row of
      window-chrome cards on an arc, driven by horizontal scroll, with
      arrow + progress-rail controls.

   EVERYTHING here is scoped to `body.hud`, which only the homepage
   carries for now (`@section('body-class', 'neo hud')`). Inner pages
   stay on neo.css until this is signed off — at which point the class
   moves into the layout's default and this file covers the whole site.

   Load order: urgesol.css → neo.css → hud.css.
   ═══════════════════════════════════════════════════════════════════ */

/* The cursor markup lives in the shared layout, so this one rule is
   deliberately unscoped: without it the element would fall back to a
   plain static <div> — three visible arrow glyphs — on every page that
   does not carry `hud`. Everything below is scoped as advertised. */
.hud-cursor {
    display: none;
}

/* ── 1. Tokens ─────────────────────────────────────────────────────── */
body.hud {
    /* accents. --ha is the channel every panel/button reads; variants
       re-point it and everything inside re-tints for free. */
    --ha: 109, 152, 232;
    /* blue   — primary */
    --ha2: 201, 100, 199;
    /* magenta — secondary */

    /* notch depth for the octagon panels */
    --nx: 14px;

    /* one curve, shared with neo.css's */
    --hud-ease: cubic-bezier(.22, 1, .36, 1);

    /* Lifted one notch. Several templates hard-code `color: var(--muted)`
       inline on small print (plan sub-headings, meta lines), and at the
       stock value it disappears against these darker panels. */
    --muted: #54708e;

    /* fractal-noise film laid over every panel — the reference's
       `.noise-overlay`, inlined so it costs no request */
    --hud-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.085'/%3E%3C/svg%3E");
}

/* The octagon. Applied to a panel and, one pixel in, to its fill layer —
   the sliver of accent left showing between the two is the border, since
   clip-path would eat a real one. */
body.hud .hud-clip,
body.hud .hud-panel,
body.hud .hud-panel::before {
    clip-path: polygon(var(--nx) 0,
            calc(100% - var(--nx)) 0,
            100% var(--nx),
            100% calc(100% - var(--nx)),
            calc(100% - var(--nx)) 100%,
            var(--nx) 100%,
            0 calc(100% - var(--nx)),
            0 var(--nx));
}

/* ── 2. Panel primitive ────────────────────────────────────────────── */
body.hud .hud-panel {
    position: relative;
    isolation: isolate;
    background: rgba(var(--ha), .34);
    /* the 1px rim */
    transition: background-color .35s var(--hud-ease),
        transform .35s var(--hud-ease),
        filter .35s var(--hud-ease);
}

body.hud .hud-panel::before {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    --nx: calc(14px - 1px);
    background-color: #070c14;
    background-image:
        radial-gradient(120% 100% at 0% 0%, rgba(var(--ha), .16) 0%, transparent 58%),
        linear-gradient(160deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 46%),
        var(--hud-noise);
    background-size: auto, auto, 180px 180px;
    background-repeat: no-repeat, no-repeat, repeat;
    opacity: 1;
    transition: background-color .35s var(--hud-ease);
}

/* scanline wash + gradient bloom, revealed on hover — the reference
   stacks these as two absolutely-positioned layers per card */
body.hud .hud-panel::after {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background-image:
        repeating-linear-gradient(0deg, rgba(var(--ha), .16) 0 1px, transparent 1px 4px),
        radial-gradient(90% 70% at 50% 110%, rgba(var(--ha), .22) 0%, transparent 70%);
    transition: opacity .5s var(--hud-ease);
}

body.hud .hud-panel:hover,
body.hud .hud-panel:focus-within {
    background: rgba(var(--ha), .78);
    transform: translateY(-3px);
    filter: drop-shadow(0 10px 26px rgba(var(--ha), .22));
}

body.hud .hud-panel:hover::after,
body.hud .hud-panel:focus-within::after {
    opacity: .55;
}

/* corner brackets — the little ⌐ marks the reference hangs on every
   frame. Two spans keep them crisp at any panel size. */
body.hud .hud-bracket {
    position: absolute;
    width: 13px;
    height: 13px;
    pointer-events: none;
    opacity: .55;
    border: 1px solid rgb(var(--ha));
    transition: opacity .35s var(--hud-ease);
}

body.hud .hud-bracket.tl {
    top: 7px;
    left: 7px;
    border-right: 0;
    border-bottom: 0;
}

body.hud .hud-bracket.br {
    right: 7px;
    bottom: 7px;
    border-left: 0;
    border-top: 0;
}

body.hud .hud-panel:hover .hud-bracket {
    opacity: 1;
}

/* ── 3. Micro type ─────────────────────────────────────────────────── */
/* the wide-tracked mono labels the reference puts above every value */
body.hud .hud-micro {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--mono);
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgb(var(--ha));
    line-height: 1;
}

body.hud .hud-micro.dim {
    color: var(--muted);
}

/* the small filled square that leads a label */
body.hud .hud-micro::before {
    content: '';
    width: 5px;
    height: 5px;
    background: currentColor;
    flex: 0 0 auto;
}

body.hud .hud-micro.bare::before {
    display: none;
}

/* ── 4. Section headers ────────────────────────────────────────────── */
/* Heading over a huge ghosted word, with a rule that fades out. */
body.hud .hud-head {
    position: relative;
    margin-bottom: 3rem;
}

body.hud .hud-head[data-ghost]::before {
    content: attr(data-ghost);
    position: absolute;
    left: -.06em;
    top: 50%;
    transform: translateY(-58%);
    z-index: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(4rem, 13vw, 11rem);
    line-height: .8;
    letter-spacing: -.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(var(--ha), .045);
    pointer-events: none;
    user-select: none;
}

body.hud .hud-head>* {
    position: relative;
    z-index: 1;
}

body.hud .hud-head h2 {
    margin: .8rem 0 0;
    color: var(--white);
}

body.hud .hud-head .hud-rule {
    display: block;
    height: 1px;
    width: min(340px, 60%);
    margin-top: 1.1rem;
    background: linear-gradient(90deg, rgb(var(--ha)) 0%, rgba(var(--ha), 0) 100%);
}

body.hud .hud-head p {
    margin-top: 1.1rem;
    max-width: 46rem;
    color: var(--dim);
}

body.hud .hud-head.center {
    text-align: center;
}

body.hud .hud-head.center[data-ghost]::before {
    left: 50%;
    transform: translate(-50%, -58%);
}

body.hud .hud-head.center .hud-rule {
    margin-inline: auto;
}

body.hud .hud-head.center p {
    margin-inline: auto;
}

/* ── 5. Glitch cursor ──────────────────────────────────────────────────
   khaledoghli.com hides the native cursor and draws an arrow as three
   stroked SVG copies — one per RGB channel — blended with `screen` and
   jittered apart in bursts, which reads as chromatic aberration. The
   reference splits to #00ffcc / #ff1a1a / #0055ff; UrgeSol's own neon
   channels (blue / magenta / ice) are used instead so it stays on brand.

   Gated on a real pointer: touch and coarse pointers keep the OS cursor,
   and so does anyone who asked for reduced motion. */
@media (hover: hover) and (pointer: fine) {

    body.hud.hud-cursor-on,
    body.hud.hud-cursor-on * {
        cursor: none !important;
    }
}

body.hud .hud-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10100;
    width: 0;
    height: 0;
    pointer-events: none;
    display: none;
    will-change: transform;
}

body.hud.hud-cursor-on .hud-cursor {
    display: block;
}

body.hud .hud-cursor-l {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 27px;
    opacity: .45;
    mix-blend-mode: screen;
    fill: none;
    stroke-width: 1.4;
    stroke-linejoin: round;
    will-change: transform;
}

body.hud .hud-cursor-l.c1 {
    stroke: rgb(var(--nb-ice, 223, 230, 255));
    opacity: .95;
}

body.hud .hud-cursor-l.c2 {
    stroke: rgb(var(--nb-blue, 111, 157, 255));
}

body.hud .hud-cursor-l.c3 {
    stroke: rgb(var(--nb-magenta, 201, 100, 199));
}

/* the halo that swells over anything clickable */
body.hud .hud-cursor-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border: 1px solid rgba(var(--ha), .55);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.35);
    transition: opacity .28s var(--hud-ease), transform .28s var(--hud-ease);
}

body.hud .hud-cursor.is-hot .hud-cursor-ring {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 18px -4px rgba(var(--ha), .8), inset 0 0 12px -6px rgba(var(--ha), .9);
}

body.hud .hud-cursor.is-down .hud-cursor-ring {
    transform: scale(.72);
    border-color: rgba(var(--ha2), .8);
}

/* ── 6. Buttons ────────────────────────────────────────────────────────
   A port of khaledoghli.com's `.cybr-btn`, structure for structure, with
   its teal/amber tones swapped for UrgeSol's blue/magenta/steel. Read
   off the reference's own stylesheet, so the layer stack is its stack:

     .btn            transparent; owns --clip and the tone variables
     .btn::before    the offset echo — the same silhouette in full accent
                     at 66%, nudged 0.24rem down-right. This is what gives
                     the button its doubled, printed-slightly-off look.
     .btn::after     the body — gloss, two 2px lit side rails, a top
                     surface fade, and a fill of 24% accent on black
     __content       the label, above both
     __scan          a skewed light bar that sweeps across on hover
     __glitch        a duplicate label that only exists on hover, screen
                     blended, hopping between seven clip windows
     __node          the two 45deg-rotated squares in the corners
     __tag           the "MAIL"/"BRIEF" chip, hanging past the bottom edge

   Only ::before and ::after can come from CSS; the five spans are added
   by hud.js so no template has to change. Without JS the button still
   renders and works — it just loses the scan, glitch, nodes and tag.

   `--clip` stays on the pseudo-elements, never on `.btn` itself: that is
   what lets the tag hang outside the frame. */
body.hud .btn {
    /* tone — a variant only re-points these five */
    --primary: #3d65c4;
    --shadow-primary: #6f9dff;
    --shadow-secondary: #1e3b7a;
    --color: #fff;
    --tag-background: #6f9dff;
    --tag-color: #060c16;

    /* derived exactly as the reference derives them (its build inlines
       plain-colour fallbacks first, so old engines still get a button) */
    --edge-light: #0055ff;
    --edge-light: color-mix(in oklab, var(--primary) 72%, white 28%);
    --edge-muted: rgba(61, 101, 196, .35);
    --edge-muted: color-mix(in oklab, var(--primary) 35%, transparent);
    --signal-fill: #0f1830;
    --signal-fill: color-mix(in oklab, var(--primary) 24%, black 76%);
    --signal-surface: rgba(61, 101, 196, .10);
    --signal-surface: color-mix(in oklab, var(--primary) 10%, transparent);

    --font-size: .68rem;
    --label-size: .52rem;
    --btn-height: 2.6rem;
    --btn-min-width: 8.5rem;
    --btn-padding-x: .95rem;
    --btn-padding-y: .48rem;
    --border: 2px;
    --shimmy-distance: 5;

    /* the frame, and the seven windows the glitch hops between */
    --clip: polygon(7% 0, 94% 0, 100% 24%, 100% 76%, 94% 100%, 18% 100%, 15% 88%, 6% 88%, 0 72%, 0 24%);
    --clip-one: polygon(7% 0, 94% 0, 100% 24%, 100% 32%, 0 32%, 0 24%);
    --clip-two: polygon(0 62%, 100% 62%, 100% 100%, 18% 100%, 15% 88%, 6% 88%, 0 72%);
    --clip-three: polygon(0 42%, 100% 42%, 100% 52%, 0 52%);
    --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --clip-six: polygon(0 32%, 100% 32%, 100% 72%, 0 72%);
    --clip-seven: polygon(0 14%, 100% 14%, 100% 21%, 0 21%);

    isolation: isolate;
    position: relative;
    overflow: visible;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;

    min-width: var(--btn-min-width);
    min-height: var(--btn-height);
    padding: var(--btn-padding-y) var(--btn-padding-x);

    font-family: var(--tech);
    font-size: var(--font-size);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .2em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--color);

    background: 0 0;
    border: 0;
    border-radius: 0;
    outline: #0000;
    box-shadow: none;
    text-shadow: none;
    filter: none;
    clip-path: none;
    cursor: pointer;
    transition: none;
}

/* nothing moves on any state */
body.hud .btn:hover,
body.hud .btn:focus-visible,
body.hud .btn:active {
    transform: none;
    letter-spacing: .2em;
    filter: none;
}

/* urgesol.css parks a specular sweep on ::after at left:-70% with an
   explicit width and skew; both pseudos are re-declared from scratch
   here, so every one of those has to be answered. */
body.hud .btn::before,
body.hud .btn::after {
    content: "";
    display: block;
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    clip-path: var(--clip);
    border-radius: 0;
    z-index: -2;
}

body.hud .btn::before {
    background: linear-gradient(90deg, var(--primary), var(--primary), rgba(255, 255, 255, .16)), var(--primary);
    opacity: .66;
    transform: translate(.24rem, .24rem);
}

body.hud .btn::after {
    z-index: -1;
    transform: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .2) 0%, transparent 18%, rgba(255, 255, 255, .078) 52%, transparent 72%),
        linear-gradient(90deg, var(--edge-light) 0 2px, transparent 2px calc(100% - 2px), var(--edge-light) calc(100% - 2px)),
        linear-gradient(180deg, var(--signal-surface), transparent 54%),
        var(--signal-fill);
    transition: background .18s;
}

body.hud .btn:hover::after,
body.hud .btn:focus-visible::after {
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .26) 0%, transparent 18%, rgba(255, 255, 255, .12) 52%, transparent 72%),
        linear-gradient(90deg, var(--edge-light) 0 2px, transparent 2px calc(100% - 2px), var(--edge-light) calc(100% - 2px)),
        radial-gradient(circle at 22% 42%, var(--primary) 0%, transparent 34%),
        linear-gradient(110deg, var(--primary) 0%, var(--primary) 52%, var(--primary) 100%);
}

/* ── the parts hud.js injects ── */
body.hud .hud-btn__content {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

body.hud .btn:hover .hud-btn__content {
    color: #fff;
}

body.hud .btn i {
    font-size: 1em;
    color: inherit;
}

body.hud .hud-btn__tag {
    position: absolute;
    right: 10%;
    left: auto;
    bottom: -.34rem;
    z-index: 3;
    padding: .2rem .42rem .18rem;
    background: linear-gradient(90deg, var(--tag-background), var(--tag-background));
    color: var(--tag-color);
    font-family: var(--tech);
    font-size: var(--label-size);
    font-weight: 800;
    line-height: 1;
    letter-spacing: .18em;
    text-transform: uppercase;
    clip-path: polygon(0 0, 88% 0, 100% 38%, 100% 100%, 8% 100%, 0 70%);
    pointer-events: none;
}

body.hud .hud-btn__glitch {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    align-items: center;
    justify-content: center;
    clip-path: var(--clip);
    color: var(--color);
    font-size: calc(var(--font-size) * .92);
    letter-spacing: .28em;
    pointer-events: none;
    mix-blend-mode: screen;
    background:
        linear-gradient(90deg, transparent, var(--shadow-primary), transparent),
        repeating-linear-gradient(0deg, transparent 0 6px, var(--primary) 6px 8px);
    animation: .72s step-end both hud-btn-glitch;
}

body.hud .btn:hover .hud-btn__glitch,
body.hud .btn:focus-visible .hud-btn__glitch {
    display: flex;
}

body.hud .hud-btn__glitch::before {
    content: "";
    position: absolute;
    inset: var(--border);
    z-index: -1;
    background: var(--primary);
    clip-path: var(--clip);
}

body.hud .hud-btn__scan {
    position: absolute;
    inset: 1px;
    z-index: 1;
    clip-path: var(--clip);
    pointer-events: none;
    overflow: hidden;
}

body.hud .hud-btn__scan::before {
    content: "";
    position: absolute;
    top: -18%;
    bottom: -18%;
    left: -42%;
    width: 34%;
    background: linear-gradient(90deg, transparent, var(--shadow-primary), rgba(255, 255, 255, .22), transparent);
    opacity: 0;
    transform: skew(-18deg);
}

/* the reference drives this from script; a hover-triggered sweep reads
   the same and costs nothing */
body.hud .btn:hover .hud-btn__scan::before,
body.hud .btn:focus-visible .hud-btn__scan::before {
    animation: hud-btn-scan .85s var(--hud-ease) forwards;
}

body.hud .hud-btn__node {
    position: absolute;
    z-index: 3;
    width: .44rem;
    height: .44rem;
    background: var(--edge-light);
    transform: rotate(45deg);
    pointer-events: none;
}

body.hud .hud-btn__node--one {
    top: .48rem;
    left: .64rem;
}

body.hud .hud-btn__node--two {
    right: .64rem;
    bottom: .48rem;
}

@keyframes hud-btn-glitch {
    0% {
        clip-path: var(--clip-one);
    }

    2%,
    8% {
        clip-path: var(--clip-two);
        transform: translate(calc(var(--shimmy-distance) * -1%), 0);
    }

    6% {
        clip-path: var(--clip-two);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    9% {
        clip-path: var(--clip-two);
        transform: translate(0);
    }

    10% {
        clip-path: var(--clip-three);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    13% {
        clip-path: var(--clip-three);
        transform: translate(0);
    }

    14%,
    21% {
        clip-path: var(--clip-four);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    25% {
        clip-path: var(--clip-five);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    30% {
        clip-path: var(--clip-five);
        transform: translate(calc(var(--shimmy-distance) * -1%), 0);
    }

    35%,
    45% {
        clip-path: var(--clip-six);
        transform: translate(calc(var(--shimmy-distance) * -1%));
    }

    40% {
        clip-path: var(--clip-six);
        transform: translate(calc(var(--shimmy-distance) * 1%));
    }

    50% {
        clip-path: var(--clip-six);
        transform: translate(0);
    }

    55% {
        clip-path: var(--clip-seven);
        transform: translate(calc(var(--shimmy-distance) * 1%), 0);
    }

    60% {
        clip-path: var(--clip-seven);
        transform: translate(0);
    }

    31%,
    61%,
    to {
        clip-path: var(--clip-four);
    }
}

@keyframes hud-btn-scan {
    0% {
        opacity: 0;
        left: -42%;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        left: 108%;
    }
}

/* ── tones ── */
body.hud .btn-primary {
    --primary: #3d65c4;
    --shadow-primary: #6f9dff;
    --shadow-secondary: #1e3b7a;
    --tag-background: #6f9dff;
    --tag-color: #060c16;
}

body.hud .btn-secondary {
    --primary: #b03aae;
    --shadow-primary: #c964c7;
    --shadow-secondary: #6e1e6c;
    --tag-background: #c964c7;
    --tag-color: #150a15;
}

/* the reference's quieter second button: a near-neutral tone, so the
   pair reads as lead and support rather than two competing accents */
body.hud .btn-outline,
body.hud .btn-ghost {
    --primary: #6b7f9c;
    --shadow-primary: #c9d6ea;
    --shadow-secondary: #243549;
    --tag-background: #c9d6ea;
    --tag-color: #0a0e14;
}

/* ── sizes — the reference scales by variable, never by rule ── */
body.hud .btn-sm {
    --btn-height: 2.3rem;
    --btn-min-width: 7rem;
    --btn-padding-x: .8rem;
    --btn-padding-y: .38rem;
    --font-size: .6rem;
    --label-size: .48rem;
    --border: 2px;
}

body.hud .btn-lg {
    --btn-height: 2.85rem;
    --btn-min-width: 10rem;
    --btn-padding-x: 1.1rem;
    --btn-padding-y: .5rem;
    --font-size: .75rem;
    --label-size: .55rem;
    --border: 3px;
}

/* the reference has no full-width button; `.btn-block` hugs its label
   and centres in its column instead of stretching into a bar */
body.hud .btn-block {
    display: flex;
    width: fit-content;
    margin-inline: auto;
}

/* bracket arrows — the reference's carousel prev/next: an arrow framed
   by two corner marks rather than a button box */
body.hud .hud-arrow {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    padding: 0;
    color: var(--dim);
    cursor: pointer;
    transition: color .3s var(--hud-ease);
}

body.hud .hud-arrow::before,
body.hud .hud-arrow::after {
    content: '';
    position: absolute;
    width: 11px;
    height: 11px;
    border: 1px solid currentColor;
    opacity: .6;
    transition: opacity .3s var(--hud-ease), inset .3s var(--hud-ease);
}

body.hud .hud-arrow::before {
    top: 4px;
    left: 4px;
    border-right: 0;
    border-bottom: 0;
}

body.hud .hud-arrow::after {
    right: 4px;
    bottom: 4px;
    border-left: 0;
    border-top: 0;
}

body.hud .hud-arrow:hover:not(:disabled) {
    color: rgb(var(--ha));
}

body.hud .hud-arrow:hover:not(:disabled)::before,
body.hud .hud-arrow:hover:not(:disabled)::after {
    opacity: 1;
}

body.hud .hud-arrow:disabled {
    opacity: .3;
    cursor: default;
}

body.hud .hud-arrow svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
}

/* "01 / 08" counter + its two-segment rule, under every carousel */
body.hud .hud-count {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    font-family: var(--display);
}

body.hud .hud-count-n {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: rgb(var(--ha));
}

body.hud .hud-count-t {
    font-size: .85rem;
    color: var(--dim);
}

body.hud .hud-rail {
    position: relative;
    width: min(180px, 40vw);
    height: 2px;
    background: rgba(var(--ha), .18);
    overflow: hidden;
}

body.hud .hud-rail span {
    position: absolute;
    inset: 0 auto 0 0;
    width: 25%;
    background: linear-gradient(90deg, rgb(var(--ha)), rgb(var(--ha2)));
    transition: transform .25s var(--hud-ease), width .25s var(--hud-ease);
}

/* ── 7. Stat panels ────────────────────────────────────────────────────
   The four numbers under the hero, rebuilt as the reference's skill
   cards: notched panel, accent title, wide mono micro-label, a segmented
   level meter, a faint call-sign bottom-left, and a node on the right
   edge with a line running out of it. Each panel carries its own --ha,
   so the row reads as four channels rather than one flat colour. */
body.hud .hud-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

body.hud .hud-stat {
    padding: 1.4rem 1.5rem 1.25rem;
    min-height: 168px;
    display: flex;
    flex-direction: column;
}

body.hud .hud-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

/* the node + its outgoing line */
body.hud .hud-stat-node {
    position: relative;
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: rgb(var(--ha));
    box-shadow: 0 0 10px rgba(var(--ha), .9);
}

body.hud .hud-stat-node::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    width: 34px;
    height: 1px;
    margin-right: 6px;
    background: linear-gradient(270deg, rgb(var(--ha)), rgba(var(--ha), 0));
}

body.hud .hud-stat-num {
    font-family: var(--display);
    font-size: clamp(2.1rem, 3.4vw, 2.9rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--white);
    margin: 0;
    text-shadow: 0 0 26px rgba(var(--ha), .45);
    font-variant-numeric: tabular-nums;
}

body.hud .hud-stat-lbl {
    margin: .55rem 0 0;
    font-size: .8rem;
    line-height: 1.45;
    color: var(--dim);
}

/* segmented level meter */
body.hud .hud-meter {
    display: flex;
    gap: 4px;
    margin-top: auto;
    padding-top: 1rem;
}

body.hud .hud-meter i {
    height: 5px;
    flex: 1;
    background: rgba(var(--ha), .16);
    transform: skewX(-20deg);
    transition: background-color .4s var(--hud-ease), box-shadow .4s var(--hud-ease);
}

body.hud .hud-meter i.on {
    background: rgb(var(--ha));
    box-shadow: 0 0 9px rgba(var(--ha), .75);
}

body.hud .hud-stat-code {
    margin: .7rem 0 0;
    font-family: var(--mono);
    font-size: .58rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(var(--ha), .38);
}

/* ── 8. Service panels ─────────────────────────────────────────────────
   The reference's certificate card: square top-left, a clipped top-right,
   and two deep cuts along the bottom. Icon tile + category on one line,
   a bracketed chip on the right, then title, then an "issued by" style
   footer over a rule that fades out. */
body.hud .hud-svc,
body.hud .hud-svc::before,
body.hud .hud-svc::after {
    clip-path: polygon(0 0,
            calc(100% - 18px) 0,
            100% 18px,
            100% calc(100% - 26px),
            calc(100% - 26px) 100%,
            26px 100%,
            0 calc(100% - 26px));
}

body.hud .hud-svc {
    display: flex;
    flex-direction: column;
    padding: 1.35rem 1.5rem 1.7rem;
    height: 100%;
}

body.hud .hud-svc-top {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: 1.1rem;
}

body.hud .hud-svc-ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--ha), .55);
    color: rgb(var(--ha));
    font-size: .95rem;
    background: rgba(var(--ha), .10);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
    transition: background-color .35s var(--hud-ease), box-shadow .35s var(--hud-ease);
}

body.hud .hud-svc:hover .hud-svc-ico {
    background: rgba(var(--ha), .22);
    box-shadow: 0 0 18px -4px rgba(var(--ha), .8);
}

/* the bracketed date-style chip pinned right */
body.hud .hud-svc-chip {
    position: relative;
    margin-left: auto;
    padding: .32rem .5rem;
    font-family: var(--mono);
    font-size: .58rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
}

body.hud .hud-svc-chip::before,
body.hud .hud-svc-chip::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(var(--ha), .75);
}

body.hud .hud-svc-chip::before {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
}

body.hud .hud-svc-chip::after {
    right: 0;
    bottom: 0;
    border-left: 0;
    border-top: 0;
}

body.hud .hud-svc h3 {
    margin: 0 0 .5rem;
    font-size: 1.12rem;
    line-height: 1.25;
    color: var(--white);
    letter-spacing: -.015em;
}

body.hud .hud-svc-stack {
    margin: 0 0 .85rem;
    font-family: var(--mono);
    font-size: .64rem;
    line-height: 1.6;
    letter-spacing: .05em;
    color: rgb(var(--ha));
}

body.hud .hud-svc-desc {
    margin: 0;
    font-size: .855rem;
    line-height: 1.75;
    color: var(--dim);
    flex: 1;
}

body.hud .hud-svc-foot {
    margin-top: 1.4rem;
}

body.hud .hud-svc-foot .hud-micro {
    margin-bottom: .4rem;
}

body.hud .hud-svc-issuer {
    display: block;
    font-size: .8rem;
    color: var(--light);
    padding-bottom: .8rem;
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(var(--ha), .55), rgba(var(--ha), 0)) 1;
}

body.hud .hud-svc-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: .9rem;
    padding: .35rem 0;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgb(var(--ha));
    text-decoration: none;
    transition: gap .3s var(--hud-ease);
}

body.hud .hud-svc-link:hover {
    gap: .75rem;
}

/* ── 9. Portfolio coverflow ────────────────────────────────────────────
   melius.com's model row. A native horizontal scroller supplies the
   motion — so wheel, trackpad, touch and keyboard all work for free —
   and hud.js only maps each card's distance from the centre onto a
   rotateY / translateZ / lift, which is what bends the row onto an arc.
   Cards are the reference's little app-window: chrome bar with an LED,
   then the thumbnail with the project name over it. */
body.hud .pf-flow {
    position: relative;
    perspective: 1500px;
    perspective-origin: 50% 44%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding: 2.5rem 0 3rem;
    cursor: grab;
}

body.hud .pf-flow::-webkit-scrollbar {
    display: none;
}

body.hud .pf-flow.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

body.hud .pf-flow-track {
    display: flex;
    gap: 1.75rem;
    width: max-content;
    transform-style: preserve-3d;
    padding-inline: max(1.25rem, calc(50% - 130px));
}

body.hud .pf-card {
    flex: 0 0 260px;
    scroll-snap-align: center;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

body.hud .pf-card-in {
    display: block;
    text-decoration: none;
    padding: 0 5px 5px;
    background: rgba(var(--ha), .34);
    clip-path: polygon(10px 0,
            calc(100% - 10px) 0,
            100% 10px,
            100% calc(100% - 10px),
            calc(100% - 10px) 100%,
            10px 100%,
            0 calc(100% - 10px),
            0 10px);
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .85));
    transition: background-color .35s var(--hud-ease), filter .35s var(--hud-ease);
}

body.hud .pf-card-in:hover {
    background: rgb(var(--ha));
    filter: drop-shadow(0 0 16px rgba(var(--ha), .45)) drop-shadow(0 24px 44px rgba(0, 0, 0, .9));
}

/* window chrome */
body.hud .pf-card-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 26px;
    padding: 0 8px;
}

body.hud .pf-card-led {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgb(var(--ha2));
    box-shadow: 0 0 8px rgba(var(--ha2), .9);
}

body.hud .pf-card-bar em {
    font-style: normal;
    font-family: var(--mono);
    font-size: .62rem;
    letter-spacing: .18em;
    color: rgba(255, 255, 255, .35);
    line-height: 1;
}

body.hud .pf-card-media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: #070c14;
    background-image:
        radial-gradient(120% 100% at 18% 0%, hsl(var(--pf-hue, 218) 62% 30% / .85) 0%, transparent 62%),
        radial-gradient(120% 100% at 86% 100%, hsl(calc(var(--pf-hue, 218) + 48) 58% 26% / .8) 0%, transparent 64%),
        var(--hud-noise);
    background-size: auto, auto, 180px 180px;
}

body.hud .pf-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .6s var(--hud-ease), filter .4s var(--hud-ease);
}

body.hud .pf-card-in:hover .pf-card-media img {
    transform: scale(1.05);
}

/* stands in for a thumbnail: an icon above the title inside the mark,
   rather than a watermark the title has to sit on top of */
body.hud .pf-card-ph {
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: .35rem;
    color: rgba(255, 255, 255, .42);
}

/* the wordmark sitting over the thumbnail, as on the reference */
body.hud .pf-card-mark {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 1rem;
    text-align: center;
    background: linear-gradient(180deg, rgba(5, 9, 16, .18) 0%, rgba(5, 9, 16, .72) 100%);
    transition: background-color .35s var(--hud-ease);
}

body.hud .pf-card-title {
    font-family: var(--display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0, 0, 0, .85);
    line-height: 1.2;
}

body.hud .pf-card-meta {
    font-family: var(--mono);
    font-size: .58rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .68);
}

body.hud .pf-flow-ctl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

body.hud .pf-flow-ctl .hud-rail {
    width: min(280px, 42vw);
}

/* ── 10. Testimonials ──────────────────────────────────────────────────
   The reference's two-pane layout: one wide panel for the quote on
   screen — avatar tile, name, an index and a five-axis radar top-right,
   a call-sign rule, the quote, a tagline footer — beside a narrow
   "QUEUE" panel listing the rest, each row carrying its own accent bar.
   Clicking a row swaps the main panel. */
body.hud .hud-tm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 1.5rem;
    align-items: start;
}

/* The reference's main panel is not a plain octagon: the corners are cut
   at 45deg and both the right and bottom edges step inward for a short
   run, which is what gives it the instrument-panel read. Corner cuts stay
   in px so they hold their angle; the tab positions are percentages so
   they travel with the panel. */
body.hud .hud-tm-main,
body.hud .hud-tm-main::before,
body.hud .hud-tm-main::after {
    --c: 26px;
    --t: 9px;
    clip-path: polygon(var(--c) 0,
            calc(100% - var(--c)) 0,
            100% var(--c),
            100% 30%,
            calc(100% - var(--t)) calc(30% + 9px),
            calc(100% - var(--t)) calc(46% - 9px),
            100% 46%,
            100% calc(100% - var(--c)),
            calc(100% - var(--c)) 100%,
            58% 100%,
            calc(58% - 9px) calc(100% - var(--t)),
            calc(46% + 9px) calc(100% - var(--t)),
            46% 100%,
            var(--c) 100%,
            0 calc(100% - var(--c)),
            0 62%,
            var(--t) calc(62% - 9px),
            var(--t) calc(44% + 9px),
            0 44%,
            0 var(--c));
}

body.hud .hud-tm-main {
    padding: 1.9rem 2.2rem 2rem;
    min-height: 340px;
    /* the rim reads as a lit line on the reference, not a hairline */
    background: rgba(var(--ha), .85);
    filter: drop-shadow(0 0 14px rgba(var(--ha), .22));
}

/* the fill falls from a lit top-left to black, as on the reference */
body.hud .hud-tm-main::before {
    background-color: #05090f;
    background-image:
        linear-gradient(122deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .022) 38%, rgba(255, 255, 255, 0) 66%),
        radial-gradient(120% 90% at 0% 0%, rgba(var(--ha), .20) 0%, transparent 60%),
        repeating-linear-gradient(0deg, rgba(var(--ha), .05) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(var(--ha), .05) 0 1px, transparent 1px 34px),
        var(--hud-noise);
    background-size: auto, auto, auto, auto, 180px 180px;
}

/* it is a display panel, not a control — no lift, no scanline sweep */
body.hud .hud-tm-main:hover,
body.hud .hud-tm-main:focus-within {
    transform: none;
    background: rgba(var(--ha), .85);
}

body.hud .hud-tm-main::after {
    display: none;
}

body.hud .hud-tm-panel {
    display: none;
}

body.hud .hud-tm-panel.is-active {
    display: block;
    animation: hud-fade .5s var(--hud-ease) both;
}

@keyframes hud-fade {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

body.hud .hud-tm-head {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

/* avatar: hatched tile with a badge notched out of the corner */
body.hud .hud-tm-avatar {
    position: relative;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--ha), .5);
    background-color: rgba(var(--ha), .10);
    background-image: repeating-linear-gradient(0deg, rgba(var(--ha), .22) 0 1px, transparent 1px 4px);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .06em;
    color: rgb(var(--ha));
}

body.hud .hud-tm-badge {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    background: #060b12;
    border: 1px solid rgba(var(--ha), .5);
    font-size: .62rem;
    color: rgb(var(--ha));
}

body.hud .hud-tm-id h3 {
    margin: .35rem 0 .2rem;
    font-size: clamp(1.4rem, 2.4vw, 1.85rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    color: var(--white);
}

body.hud .hud-tm-id p {
    margin: 0;
    font-size: .85rem;
    color: var(--dim);
}

body.hud .hud-tm-aside {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

body.hud .hud-tm-idx {
    text-align: right;
    line-height: 1;
}

body.hud .hud-tm-idx b {
    display: block;
    font-family: var(--display);
    font-size: 1.5rem;
    font-weight: 700;
    color: rgb(var(--ha));
}

body.hud .hud-tm-idx span {
    display: block;
    margin-top: .4rem;
    font-family: var(--mono);
    font-size: .55rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
}

body.hud .hud-radar {
    width: 108px;
    height: 108px;
    flex: 0 0 auto;
    overflow: visible;
}

body.hud .hud-radar .grid {
    fill: none;
    stroke: rgba(var(--ha), .3);
    stroke-width: .8;
}

body.hud .hud-radar .spoke {
    stroke: rgba(var(--ha), .16);
    stroke-width: 1;
}

body.hud .hud-radar .plot {
    fill: rgba(var(--ha), .3);
    stroke: rgb(var(--ha));
    stroke-width: 1.6;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 3px rgba(var(--ha), .8));
}

body.hud .hud-radar text {
    font-family: var(--mono);
    font-size: 5.5px;
    letter-spacing: .1em;
    fill: var(--dim);
    text-anchor: middle;
}

/* call-sign + rule */
body.hud .hud-tm-div {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.6rem 0 1.1rem;
}

body.hud .hud-tm-div b {
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
    white-space: nowrap;
}

body.hud .hud-tm-div i {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgb(var(--ha)), rgba(var(--ha), 0));
}

body.hud .hud-tm-quote {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.75;
    color: var(--white);
}

body.hud .hud-tm-qm {
    display: block;
    margin-bottom: .5rem;
    font-size: 1.1rem;
    color: rgb(var(--ha));
}

body.hud .hud-tm-foot {
    margin-top: 1.8rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(var(--ha), .16);
}

body.hud .hud-tm-foot p {
    margin: .5rem 0 0;
    font-size: .8rem;
    color: var(--dim);
}

/* queue */
body.hud .hud-tm-queue {
    --nx: 0px;
    padding: 1.15rem 1.15rem 1.25rem;
    background: rgba(var(--ha), .30);
}

body.hud .hud-tm-queue:hover {
    transform: none;
    background: rgba(var(--ha), .30);
}

body.hud .hud-tm-queue::after {
    display: none;
}

/* the bright edge across the top of the reference's queue panel */
body.hud .hud-tm-queue>.edge {
    position: absolute;
    top: 1px;
    left: 1px;
    right: 1px;
    height: 2px;
    background: linear-gradient(90deg, rgba(var(--ha), 0), rgb(var(--ha)) 30%, rgb(var(--ha2)));
}

body.hud .hud-tm-queue-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: .9rem;
}

body.hud .hud-tm-queue-top b {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .18em;
    color: var(--dim);
}

body.hud .hud-tm-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

body.hud .hud-tm-row {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .7rem .6rem 1rem;
    background: rgba(255, 255, 255, .02);
    border: 1px solid transparent;
    text-align: left;
    cursor: pointer;
    transition: background-color .3s var(--hud-ease), border-color .3s var(--hud-ease);
}

body.hud .hud-tm-row::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background: rgb(var(--ha));
    opacity: .5;
    transition: opacity .3s var(--hud-ease);
}

body.hud .hud-tm-row:hover {
    background: rgba(var(--ha), .07);
}

body.hud .hud-tm-row.is-active {
    background: rgba(var(--ha), .12);
    border-color: rgba(var(--ha), .4);
}

body.hud .hud-tm-row.is-active::before {
    opacity: 1;
    box-shadow: 0 0 12px rgba(var(--ha), .9);
}

body.hud .hud-tm-row .ini {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--ha), .35);
    font-family: var(--mono);
    font-size: .6rem;
    color: rgb(var(--ha));
}

body.hud .hud-tm-row .txt {
    min-width: 0;
}

body.hud .hud-tm-row .txt b {
    display: block;
    font-family: var(--display);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.hud .hud-tm-row .txt i {
    font-style: normal;
    font-size: .72rem;
    color: var(--dim);
}

body.hud .hud-tm-row .dot {
    margin-left: auto;
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    background: rgba(var(--ha), .55);
}

body.hud .hud-tm-queue-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.1rem;
}

body.hud .hud-tm-queue-foot .hud-count {
    align-items: flex-start;
}

body.hud .hud-tm-queue-foot .hud-rail {
    width: 74px;
}


/* ── 11. "Why UrgeSol" panels ──────────────────────────────────────────
   The reference's expertise cards laid on their side: notched frame, a
   tile for the mark, the claim, then the detail — with a mono index
   pinned to the top-right and its own accent channel per row. */
body.hud .hud-why {
    display: flex;
    align-items: flex-start;
    gap: 1.05rem;
    padding: 1.25rem 1.4rem 1.35rem;
    margin-bottom: .9rem;
    --nx: 12px;
}

body.hud .hud-why-ico {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    font-size: 1rem;
    color: rgb(var(--ha));
    background: rgba(var(--ha), .10);
    border: 1px solid rgba(var(--ha), .5);
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    transition: background-color .35s var(--hud-ease), box-shadow .35s var(--hud-ease);
}

body.hud .hud-why:hover .hud-why-ico {
    background: rgba(var(--ha), .22);
    box-shadow: 0 0 18px -4px rgba(var(--ha), .85);
}

body.hud .hud-why-body {
    min-width: 0;
    flex: 1;
}

body.hud .hud-why-body h4 {
    margin: .1rem 0 .45rem;
    font-family: var(--display);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--white);
}

body.hud .hud-why-body p {
    margin: 0;
    font-size: .845rem;
    line-height: 1.75;
    color: var(--dim);
}

body.hud .hud-why-idx {
    flex: 0 0 auto;
    align-self: flex-start;
    font-family: var(--mono);
    font-size: .6rem;
    letter-spacing: .18em;
    color: rgba(var(--ha), .6);
    line-height: 1;
    padding-top: .2rem;
}

/* ── 12. "Get in touch" panels ─────────────────────────────────────────
   Small readouts: a notched tile for the mark, a wide-tracked field
   label, the value, and a note under it. */
body.hud .hud-cc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

body.hud .hud-cc {
    --nx: 12px;
    padding: 1.15rem 1.2rem 1.25rem;
}

body.hud .hud-cc-top {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .9rem;
}

body.hud .hud-cc-ico {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    font-size: .9rem;
    color: rgb(var(--ha));
    background: rgba(var(--ha), .10);
    border: 1px solid rgba(var(--ha), .45);
    clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
    transition: background-color .35s var(--hud-ease), box-shadow .35s var(--hud-ease);
}

body.hud .hud-cc:hover .hud-cc-ico {
    background: rgba(var(--ha), .22);
    box-shadow: 0 0 16px -4px rgba(var(--ha), .85);
}

body.hud .hud-cc-val {
    margin: 0;
    font-family: var(--display);
    font-size: .95rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--white);
    word-break: break-word;
}

body.hud .hud-cc-sub {
    margin: .35rem 0 0;
    padding-top: .6rem;
    font-size: .76rem;
    color: var(--dim);
    border-top: 1px solid transparent;
    border-image: linear-gradient(90deg, rgba(var(--ha), .5), rgba(var(--ha), 0)) 1;
}

/* ── 13. Tech strip ────────────────────────────────────────────────────
   The marquee restyled to the same vocabulary: a band ruled top and
   bottom in the accent, a centred micro-label between two fading rules,
   and chips cut like the panels with a lit bar down the left edge. The
   per-brand icon colours from neo.css are left alone — they are the one
   place on the page where colour carries meaning. */
body.hud .tech-strip {
    position: relative;
    padding: 2.6rem 0 2.9rem;
    background: var(--bg);
    border-top: 1px solid rgba(var(--ha), .16);
    border-bottom: 1px solid rgba(var(--ha), .16);
    overflow: hidden;
}

body.hud .tech-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(90deg, rgba(var(--ha), .06) 0 1px, transparent 1px 46px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}

body.hud .tech-strip>* {
    position: relative;
    z-index: 1;
}

body.hud .tech-strip-lbl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--dim);
}

body.hud .tech-strip-lbl::before,
body.hud .tech-strip-lbl::after {
    content: '';
    height: 1px;
    width: min(140px, 14vw);
    flex: 0 0 auto;
}

body.hud .tech-strip-lbl::before {
    background: linear-gradient(90deg, rgba(var(--ha), 0), rgb(var(--ha)));
}

body.hud .tech-strip-lbl::after {
    background: linear-gradient(90deg, rgb(var(--ha)), rgba(var(--ha), 0));
}

body.hud .tech-chip {
    position: relative;
    isolation: isolate;
    padding: .62rem 1.05rem .62rem .95rem;
    margin-right: 1rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-image: none;
    background-color: rgba(var(--ha), .32);
    font-family: var(--mono);
    font-size: .74rem;
    letter-spacing: .05em;
    color: var(--light);
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    transition: background-color .25s var(--hud-ease), color .25s var(--hud-ease);
}

body.hud .tech-chip::before {
    content: '';
    position: absolute;
    inset: 1px;
    z-index: -1;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    background-color: #070c14;
    background-image:
        linear-gradient(90deg, rgb(var(--ha)) 0 2px, transparent 2px),
        linear-gradient(100deg, rgba(var(--ha), .18) 0%, rgba(var(--ha), .04) 45%, transparent 70%),
        var(--hud-noise);
    background-size: 2px 100%, auto, 180px 180px;
    background-repeat: no-repeat, no-repeat, repeat;
    transition: background-color .25s var(--hud-ease);
}

/* nothing on this page lifts or scales on hover any more */
body.hud .tech-chip:hover {
    transform: none;
    background-color: rgb(var(--ha));
    color: var(--white);
}

body.hud .tech-chip:hover::before {
    background-color: #0b1522;
}

body.hud .tech-chip:hover i {
    transform: none;
}


/* ── 14. Shared page components ────────────────────────────────────────
   Everything above styles markup written for it. This chapter re-points
   the *existing* component classes the inner pages already use, so the
   restyle reaches services / about / pricing / faq / how-it-works /
   contact / portfolio / intake without rewriting eight templates.

   They get the same notched panel the homepage uses: the element itself
   is painted in the accent and clipped to the octagon, and a ::before
   inset by 1px carries the dark fill — the sliver left showing between
   the two is the rim, since clip-path would eat a real border.

   urgesol.css already owns ::before on `.card` (a top-edge highlight)
   and on `.stat-card` (a filament rule with an explicit height), so the
   fill layer below re-states width/height/opacity/transform rather than
   trusting `inset` alone. */
body.hud .card,
body.hud .card-sm,
body.hud .card-note,
body.hud .mission-card,
body.hud .vision-card,
body.hud .value-card,
body.hud .team-card,
body.hud .feature-item,
body.hud .deliverable-row,
body.hud .sub-service,
body.hud .service-card,
body.hud .contact-info-item,
body.hud .phase-item,
body.hud .proposal-row,
body.hud .related-card,
body.hud .portfolio-card,
body.hud .pricing-card,
body.hud .testimonial-card,
body.hud .empty-state,
body.hud .faq-item,
body.hud .faq-toc,
body.hud .review-box,
body.hud .stat-row,
body.hud .path-inner,
body.hud .desc-card,
body.hud .next-box,
body.hud .submit-card,
body.hud .form-section,
body.hud .intake-section {
    --nx: 12px;
    position: relative;
    isolation: isolate;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background-color: rgba(var(--ha), .30);
    background-image: none;
    clip-path: polygon(var(--nx) 0,
            calc(100% - var(--nx)) 0,
            100% var(--nx),
            100% calc(100% - var(--nx)),
            calc(100% - var(--nx)) 100%,
            var(--nx) 100%,
            0 calc(100% - var(--nx)),
            0 var(--nx));
    transition: background-color .32s var(--hud-ease), filter .32s var(--hud-ease);
}

body.hud .card::before,
body.hud .card-sm::before,
body.hud .card-note::before,
body.hud .mission-card::before,
body.hud .vision-card::before,
body.hud .value-card::before,
body.hud .team-card::before,
body.hud .feature-item::before,
body.hud .deliverable-row::before,
body.hud .sub-service::before,
body.hud .service-card::before,
body.hud .contact-info-item::before,
body.hud .phase-item::before,
body.hud .proposal-row::before,
body.hud .related-card::before,
body.hud .portfolio-card::before,
body.hud .pricing-card::before,
body.hud .testimonial-card::before,
body.hud .empty-state::before,
body.hud .faq-item::before,
body.hud .faq-toc::before,
body.hud .review-box::before,
body.hud .stat-row::before,
body.hud .path-inner::before,
body.hud .desc-card::before,
body.hud .next-box::before,
body.hud .submit-card::before,
body.hud .form-section::before,
body.hud .intake-section::before {
    content: '';
    display: block;
    position: absolute;
    inset: 1px;
    width: auto;
    height: auto;
    opacity: 1;
    transform: none;
    z-index: -1;
    pointer-events: none;
    --nx: 11px;
    clip-path: polygon(var(--nx) 0,
            calc(100% - var(--nx)) 0,
            100% var(--nx),
            100% calc(100% - var(--nx)),
            calc(100% - var(--nx)) 100%,
            var(--nx) 100%,
            0 calc(100% - var(--nx)),
            0 var(--nx));
    background-color: #070c14;
    background-image:
        radial-gradient(130% 100% at 0% 0%, rgba(var(--ha), .15) 0%, transparent 58%),
        linear-gradient(160deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 44%),
        var(--hud-noise);
    background-size: auto, auto, 180px 180px;
    background-repeat: no-repeat, no-repeat, repeat;
    border-radius: 0;
}

/* no lift, no scale — only the rim reacts */
body.hud .card:hover,
body.hud .card-sm:hover,
body.hud .mission-card:hover,
body.hud .vision-card:hover,
body.hud .value-card:hover,
body.hud .team-card:hover,
body.hud .feature-item:hover,
body.hud .deliverable-row:hover,
body.hud .sub-service:hover,
body.hud .service-card:hover,
body.hud .contact-info-item:hover,
body.hud .phase-item:hover,
body.hud .proposal-row:hover,
body.hud .related-card:hover,
body.hud .portfolio-card:hover,
body.hud .pricing-card:hover,
body.hud .testimonial-card:hover,
body.hud .faq-item:hover,
body.hud .path-card:hover .path-inner,
body.hud .desc-card:hover {
    transform: none;
    background-color: rgba(var(--ha), .75);
    filter: drop-shadow(0 8px 24px rgba(var(--ha), .2));
}

/* the highlighted plan keeps a lit rim at rest */
body.hud .pricing-card.featured {
    --ha: 201, 100, 199;
    background-color: rgba(var(--ha), .8);
    filter: drop-shadow(0 0 22px rgba(var(--ha), .28));
}

/* icon tiles across the pages get the notched corner the panels use */
body.hud .service-icon,
body.hud .value-icon,
body.hud .contact-icon,
body.hud .deliv-icon,
body.hud .why-icon,
body.hud .team-avatar,
body.hud .contact-card-icon,
body.hud .path-inner>.badge {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    box-shadow: none;
}

body.hud .why-icon::after,
body.hud .process-dot::after {
    display: none;
}

/* ── chips, tags and pills ── */
body.hud .filter-btn,
body.hud .tech-tag,
body.hud .badge,
body.hud .service-tag,
body.hud .tab-link,
body.hud .phase-list .phase-item {
    border-radius: 0;
    clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
    border: 0;
    background: rgba(var(--ha), .12);
    box-shadow: inset 0 0 0 1px rgba(var(--ha), .3);
    font-family: var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dim);
    transition: background-color .25s var(--hud-ease), color .25s var(--hud-ease), box-shadow .25s var(--hud-ease);
}

body.hud .filter-btn:hover,
body.hud .tech-tag:hover,
body.hud .tab-link:hover {
    transform: none;
    background: rgba(var(--ha), .26);
    color: var(--white);
    box-shadow: inset 0 0 0 1px rgba(var(--ha), .7);
}

body.hud .filter-btn.active,
body.hud .tab-link.tab-active {
    background: rgba(var(--ha), .34);
    color: var(--white);
    box-shadow: inset 0 0 0 1px rgb(var(--ha)), 0 0 18px -8px rgba(var(--ha), .9);
}

/* ── FAQ accordions ── */
body.hud .faq-item {
    overflow: hidden;
}

/* "Jump to" is one panel with rows inside, not a stack of little boxes.
   Each row is a plain line that lights a rail on its left when active. */
body.hud .faq-toc {
    padding: 1.1rem 1.15rem 1.25rem;
}

body.hud .faq-toc>p:first-child {
    padding: 0 .55rem .8rem;
    margin-bottom: .35rem !important;
    border-bottom: 1px solid rgba(var(--ha), .16);
    color: rgb(var(--ha)) !important;
    letter-spacing: .2em !important;
}

body.hud .toc-link {
    position: relative;
    display: block;
    padding: .55rem .55rem .55rem .85rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    clip-path: none;
    font-family: var(--sans);
    font-size: .86rem;
    letter-spacing: normal;
    text-transform: none;
    color: var(--dim);
    transition: color .25s var(--hud-ease), background-color .25s var(--hud-ease);
}

body.hud .toc-link::before {
    content: '';
    position: absolute;
    top: .35rem;
    bottom: .35rem;
    left: 0;
    width: 2px;
    background: rgb(var(--ha));
    opacity: 0;
    transition: opacity .25s var(--hud-ease);
}

body.hud .toc-link:hover,
body.hud .toc-link.active {
    transform: none;
    color: var(--white);
    background: rgba(var(--ha), .08);
}

body.hud .toc-link:hover::before,
body.hud .toc-link.active::before {
    opacity: 1;
    box-shadow: 0 0 10px rgba(var(--ha), .9);
}

body.hud .faq-q {
    font-family: var(--display);
    letter-spacing: -.01em;
    color: var(--white);
}

body.hud .faq-icon {
    color: rgb(var(--ha));
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    box-shadow: none;
}

body.hud .faq-section-header {
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgb(var(--ha));
}

/* ── project intake ──────────────────────────────────────────────
   The form's sections became panels above, which they had no padding
   for; give them room, drop the rule they used to be separated by, and
   put the whole field vocabulary on the same footing as the rest. */
body.hud .form-section {
    padding: 1.7rem 1.85rem 1.9rem;
    margin-bottom: 1.5rem;
    border-bottom: 0;
}

body.hud .form-section:last-of-type {
    margin-bottom: 0;
}

body.hud .section-hd {
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.6rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(var(--ha), .16);
}

body.hud .section-badge {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid rgba(var(--ha), .5);
    background: rgba(var(--ha), .1);
    color: rgb(var(--ha));
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
    font-weight: 700;
    letter-spacing: .1em;
}

body.hud .section-body .s-title {
    font-family: var(--display);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

body.hud .fl {
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgb(var(--ha));
    margin-bottom: .55rem;
}

body.hud .fl .opt {
    color: var(--muted);
    letter-spacing: .1em;
}

/* the intake fields are reached by element selectors in urgesol.css, so
   they need the same reach here */
body.hud .intake-wrap input[type=text],
body.hud .intake-wrap input[type=email],
body.hud .intake-wrap input[type=tel],
body.hud .intake-wrap input[type=url],
body.hud .intake-wrap textarea,
body.hud .intake-wrap select {
    background-color: #070c14;
    border: 0;
    border-radius: 0;
    box-shadow: inset 0 0 0 1px rgba(var(--ha), .3);
    color: var(--white);
    padding: .8rem 1rem;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    transition: box-shadow .25s var(--hud-ease), background-color .25s var(--hud-ease);
}

body.hud .intake-wrap input:focus,
body.hud .intake-wrap textarea:focus,
body.hud .intake-wrap select:focus {
    background-color: #0a1220;
    border: 0;
    box-shadow: inset 0 0 0 1px rgb(var(--ha)), 0 0 20px -8px rgba(var(--ha), .9);
}

body.hud .intake-wrap input.err,
body.hud .intake-wrap textarea.err,
body.hud .intake-wrap select.err {
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .85);
}

body.hud .intake-wrap select {
    padding-right: 2.5rem;
}

/* option rows: a light frame rather than a full panel, so the radio and
   checkbox marks (urgesol.css draws them with ::before) survive */
body.hud .rc>label:not(.desc-card),
body.hud .ck>label,
body.hud .radio-card>label {
    border: 0;
    border-radius: 0;
    background: rgba(var(--ha), .06);
    box-shadow: inset 0 0 0 1px rgba(var(--ha), .28);
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    transition: box-shadow .25s var(--hud-ease), background-color .25s var(--hud-ease), color .25s var(--hud-ease);
}

body.hud .rc>label:not(.desc-card):hover,
body.hud .ck>label:hover,
body.hud .radio-card>label:hover {
    border-color: transparent;
    color: var(--white);
    box-shadow: inset 0 0 0 1px rgba(var(--ha), .7);
}

body.hud .rc input:checked+label:not(.desc-card),
body.hud .ck input:checked+label,
body.hud .radio-card input:checked+label {
    background: rgba(var(--ha), .18);
    color: var(--white);
    box-shadow: inset 0 0 0 1px rgb(var(--ha)), 0 0 18px -8px rgba(var(--ha), .9);
}

body.hud .rc>label:not(.desc-card)::before,
body.hud .ck>label::before {
    z-index: 1;
    border-radius: 50%;
}

/* the description cards are real panels; picking one lights its rim */
body.hud .rc label.desc-card {
    padding: 1rem 1.25rem;
}

body.hud .rc input:checked+label.desc-card {
    border-left: 0;
    padding-left: 1.25rem;
    background-color: rgb(var(--ha));
}

body.hud .desc-card,
body.hud .next-box,
body.hud .submit-card,
body.hud .review-box {
    padding: 1.25rem 1.35rem;
}

body.hud .intake-h1 {
    font-family: var(--display);
    letter-spacing: -.02em;
}

body.hud .sensitive-notice {
    border-radius: 0;
}

/* ── forms ── */
body.hud .form-control,
body.hud .intake-input {
    border-radius: 0;
    clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
    border: 0;
    background-color: #070c14;
    box-shadow: inset 0 0 0 1px rgba(var(--ha), .28);
    color: var(--white);
    transition: box-shadow .25s var(--hud-ease), background-color .25s var(--hud-ease);
}

body.hud .form-control:focus,
body.hud .intake-input:focus {
    outline: none;
    background-color: #0a1220;
    box-shadow: inset 0 0 0 1px rgb(var(--ha)), 0 0 20px -8px rgba(var(--ha), .9);
}

body.hud .form-control.is-invalid,
body.hud .intake-input.err {
    box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .8);
}

body.hud .form-label,
body.hud .meta-lbl,
body.hud .intake-label,
body.hud .intake-eyebrow,
body.hud .ri-lbl,
body.hud .section-badge {
    font-family: var(--mono);
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgb(var(--ha));
}

body.hud .alert {
    border-radius: 0;
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    border: 0;
    box-shadow: inset 0 0 0 1px rgba(var(--ha), .45);
}

/* ── page heads ── */
/* every inner page opens with `.page-hero`; give its eyebrow the same
   fading rule the homepage section heads use */
body.hud .page-hero .label,
body.hud .sec-hdr .label,
body.hud .sec-intro .label,
body.hud .sec-intro-lg .label,
body.hud .sec-center .label {
    position: relative;
    display: inline-block;
    padding-bottom: .7rem;
}

body.hud .page-hero .label::after,
body.hud .sec-hdr .label::after,
body.hud .sec-intro .label::after,
body.hud .sec-intro-lg .label::after,
body.hud .sec-center .label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    min-width: 120px;
    height: 1px;
    background: linear-gradient(90deg, rgb(var(--ha)), rgba(var(--ha), 0));
}

/* ── steps, timelines and rows ── */
body.hud .step-num,
body.hud .timeline-dot,
body.hud .process-dot {
    border-radius: 0;
    clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 6px 100%, 0 calc(100% - 6px));
    box-shadow: none;
}

body.hud .timeline-item::before,
body.hud .steps-wrap::before {
    background: linear-gradient(180deg, rgba(var(--ha), .55), rgba(var(--ha), 0));
}

body.hud .price-num {
    font-family: var(--display);
    letter-spacing: -.03em;
    text-shadow: 0 0 26px rgba(var(--ha), .35);
}

/* ── portfolio grid (the /portfolio page, not the homepage flow) ── */
body.hud .portfolio-card {
    overflow: hidden;
}

body.hud .portfolio-placeholder,
body.hud .hero-placeholder,
body.hud .related-placeholder {
    background-color: #070c14;
    background-image:
        radial-gradient(120% 100% at 20% 0%, rgba(var(--ha), .22) 0%, transparent 62%),
        var(--hud-noise);
    background-size: auto, 180px 180px;
}


/* ── 15. Footer ────────────────────────────────────────────────────────
   Same vocabulary as the rest, kept quiet — it is the last thing on the
   page, not a section competing for attention. A lit rule across the top
   ties the band in (the queue panel does the same), the blueprint grid
   returns behind it, column heads become the wide-tracked micro-labels
   used everywhere else, links light a rail rather than change colour,
   and the social tiles pick up the notched corner. */
body.hud .footer {
    position: relative;
    background: var(--bg2);
    border-top: 1px solid rgba(var(--ha), .18);
    overflow: hidden;
}

/* the lit edge */
body.hud .footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 8%;
    right: 8%;
    height: 2px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
            rgba(var(--ha), 0),
            rgb(var(--ha)) 22%,
            rgb(var(--ha2)) 78%,
            rgba(var(--ha2), 0));
    opacity: .75;
}

/* grid + a low bloom, both masked so they fade out before the edges */
body.hud .footer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--ha), .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ha), .07) 1px, transparent 1px),
        radial-gradient(ellipse 60% 90% at 50% 0%, rgba(var(--ha), .1) 0%, transparent 70%);
    background-size: 52px 52px, 52px 52px, auto;
    -webkit-mask-image: radial-gradient(ellipse 80% 90% at 50% 0%, #000 0%, transparent 82%);
    mask-image: radial-gradient(ellipse 80% 90% at 50% 0%, #000 0%, transparent 82%);
}

body.hud .footer>* {
    position: relative;
    z-index: 1;
}

/* brand column */
body.hud .footer-brand-logo {
    position: relative;
    padding-bottom: 1.1rem;
}

body.hud .footer-brand-logo::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(240px, 70%);
    height: 1px;
    background: linear-gradient(90deg, rgb(var(--ha)), rgba(var(--ha), 0));
}

/* column heads — the same micro-label as every section eyebrow */
body.hud .footer-col h4 {
    position: relative;
    display: flex;
    align-items: center;
    gap: .45rem;
    padding-bottom: .85rem;
    margin-bottom: 1rem;
    font-family: var(--mono);
    font-size: .62rem;
    font-weight: 500;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: rgb(var(--ha));
}

body.hud .footer-col h4::before {
    content: '';
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    background: currentColor;
}

body.hud .footer-col h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--ha), .45), rgba(var(--ha), 0));
}

/* links: a rail lights on the left and the row steps in, rather than the
   label changing colour on its own */
body.hud .footer-col ul a {
    position: relative;
    padding: .38rem 0 .38rem .8rem;
    color: var(--dim);
    transition: color .25s var(--hud-ease), padding-left .25s var(--hud-ease);
}

body.hud .footer-col ul a::before {
    content: '';
    position: absolute;
    top: .55rem;
    bottom: .55rem;
    left: 0;
    width: 2px;
    background: rgb(var(--ha));
    opacity: 0;
    transition: opacity .25s var(--hud-ease);
}

body.hud .footer-col ul a:hover,
body.hud .footer-col ul a:focus-visible {
    color: var(--white);
    padding-left: 1.05rem;
}

body.hud .footer-col ul a:hover::before,
body.hud .footer-col ul a:focus-visible::before {
    opacity: 1;
    box-shadow: 0 0 9px rgba(var(--ha), .9);
}

/* social tiles take the notched corner the icon tiles use */
body.hud .footer-social a {
    border: 0;
    border-radius: 0;
    background: rgba(var(--ha), .07);
    box-shadow: inset 0 0 0 1px rgba(var(--ha), .3);
    color: var(--dim);
    clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
    transition: background-color .25s var(--hud-ease), color .25s var(--hud-ease), box-shadow .25s var(--hud-ease);
}

body.hud .footer-social a:hover,
body.hud .footer-social a:focus-visible {
    transform: none;
    background: rgba(var(--ha), .2);
    color: var(--white);
    box-shadow: inset 0 0 0 1px rgb(var(--ha)), 0 0 18px -6px rgba(var(--ha), .9);
}

/* bottom bar */
body.hud .footer-bottom {
    margin-top: .5rem;
    padding-top: 1.6rem;
    border-top: 0;
    border-image: none;
    position: relative;
}

body.hud .footer-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            rgba(var(--ha), .5),
            rgba(var(--ha), .12) 55%,
            rgba(var(--ha), 0));
}

body.hud .footer-bottom p {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .12em;
    color: var(--muted);
}

/* the status line on the right: a live dot and a wide-tracked label */
body.hud .footer-status {
    color: var(--dim) !important;
    letter-spacing: .2em !important;
    text-transform: uppercase;
}

body.hud .footer-status::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: 0 0 auto;
    background: #6ac89e;
    box-shadow: 0 0 9px rgba(106, 200, 158, .9);
}

@media (max-width: 760px) {
    body.hud .footer::before {
        left: 4%;
        right: 4%;
    }

    body.hud .footer-bottom {
        gap: .6rem;
    }
}


/* ── 16. Header ────────────────────────────────────────────────────────
   Kept deliberately quiet — it sits over every page, so it carries the
   least of the vocabulary: a lit edge along the bottom, the mono link
   treatment retinted to the accent, and the menu button as a notched
   tile. The drawer picks up the footer's rail-on-hover rows, and its
   CTA is now a real `.btn`, so hud.js gives it the same frame, nodes
   and tag as every other button on the site. */
body.hud .nav {
    background: rgba(8, 13, 20, .86);
    border-bottom: 1px solid rgba(var(--ha), .16);
}

/* the lit edge. `.nav` is sticky, which is a positioned ancestor. */
body.hud .nav::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 1px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg,
            rgba(var(--ha), 0),
            rgb(var(--ha)) 28%,
            rgb(var(--ha2)) 72%,
            rgba(var(--ha2), 0));
    opacity: .7;
}

/* neo.css already made these mono and uppercase; this only retints the
   marker and trades its double bloom for a single, tighter one */
body.hud .nav-links a::after {
    height: 2px;
    background: rgb(var(--ha));
    box-shadow: 0 0 8px rgba(var(--ha), .75);
}

body.hud .nav-links a:hover,
body.hud .nav-links a.active {
    color: var(--white);
}

/* menu button — the same notched tile the icons use */
body.hud .nav-toggle {
    gap: 4px;
    border: 0;
    border-radius: 0;
    background: rgba(var(--ha), .07);
    box-shadow: inset 0 0 0 1px rgba(var(--ha), .3);
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
    transition: background-color .25s var(--hud-ease), box-shadow .25s var(--hud-ease);
}

body.hud .nav-toggle span {
    width: 18px;
    height: 2px;
    border-radius: 0;
    background: rgb(var(--ha));
    transition: background-color .25s var(--hud-ease);
}

body.hud .nav-toggle:hover,
body.hud .nav-toggle:focus-visible {
    transform: none;
    background: rgba(var(--ha), .18);
    box-shadow: inset 0 0 0 1px rgb(var(--ha)), 0 0 16px -6px rgba(var(--ha), .9);
}

body.hud .nav-toggle:hover span {
    background: var(--white);
}

/* ── mobile drawer ── */
body.hud .nav-mobile {
    position: fixed;
    inset: 74px 0 0;
    background: var(--bg);
    border-top: 1px solid rgba(var(--ha), .18);
}

/* same faint blueprint ground as the footer */
body.hud .nav-mobile::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(var(--ha), .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--ha), .06) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 80%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 0%, transparent 80%);
}

body.hud .nav-mobile>* {
    position: relative;
    z-index: 1;
}

/* rows light a rail on the left, as the footer's links do */
body.hud .nav-mobile a:not(.nav-mobile-cta) {
    position: relative;
    padding-left: .9rem;
    border-bottom: 1px solid rgba(var(--ha), .12);
    transition: color .25s var(--hud-ease), padding-left .25s var(--hud-ease), border-color .25s var(--hud-ease);
}

body.hud .nav-mobile a:not(.nav-mobile-cta)::before {
    content: '';
    position: absolute;
    top: .7rem;
    bottom: .7rem;
    left: 0;
    width: 2px;
    background: rgb(var(--ha));
    opacity: 0;
    transition: opacity .25s var(--hud-ease);
}

body.hud .nav-mobile a:not(.nav-mobile-cta):hover,
body.hud .nav-mobile a:not(.nav-mobile-cta).active {
    color: var(--white);
    padding-left: 1.15rem;
    border-bottom-color: rgba(var(--ha), .3);
}

body.hud .nav-mobile a:not(.nav-mobile-cta):hover::before,
body.hud .nav-mobile a:not(.nav-mobile-cta).active::before {
    opacity: 1;
    box-shadow: 0 0 9px rgba(var(--ha), .9);
}

/* The drawer CTA carries `.btn` now. urgesol.css and neo.css both style
   `.nav-mobile-cta` at a specificity the `.btn` rules cannot reach, so
   every property they set has to be handed back to the button here. */
body.hud .nav-mobile .nav-mobile-cta {
    align-self: center;
    margin-top: 1.75rem;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    background: 0 0;
    color: var(--color);
    border: 0;
    border-bottom: 0;
    border-radius: 0;
    clip-path: none;
    filter: none;
    font-family: var(--tech);
    font-size: var(--font-size);
    font-weight: 800;
    letter-spacing: .2em;
    text-align: center;
}

/* ── 17. Responsive ────────────────────────────────────────────────── */
@media (max-width: 1080px) {
    body.hud .hud-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    body.hud .hud-tm {
        grid-template-columns: 1fr;
    }

    body.hud .hud-tm-queue {
        order: 2;
    }
}

@media (max-width: 760px) {
    body.hud .hud-head[data-ghost]::before {
        display: none;
    }

    body.hud .hud-tm-head {
        flex-wrap: wrap;
    }

    body.hud .hud-tm-aside {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }

    body.hud .pf-card {
        flex: 0 0 210px;
    }

    body.hud .pf-flow-track {
        gap: 1.1rem;
        padding-inline: max(1rem, calc(50% - 105px));
    }
}

@media (max-width: 639px) {
    body.hud .hud-btn__node {
        display: none;
    }
}

@media (max-width: 560px) {
    body.hud .hud-stats {
        grid-template-columns: 1fr;
    }

    /* the reference steps the whole button down by variable on narrow
       screens and drops the corner nodes below 640px */
    body.hud .btn,
    body.hud .btn-lg,
    body.hud .btn-sm {
        --font-size: .62rem;
        --label-size: .46rem;
        --btn-height: 2.35rem;
        --btn-min-width: 7.5rem;
        --btn-padding-x: .8rem;
        --btn-padding-y: .4rem;
        --border: 2px;
    }

    body.hud .hud-cc-grid {
        grid-template-columns: 1fr;
    }

    body.hud .hud-svc {
        padding: 1.15rem 1.15rem 1.5rem;
    }

    body.hud .hud-tm-main {
        padding: 1.4rem 1.25rem 1.6rem;
    }

    body.hud .hud-radar {
        display: none;
    }
}

/* ── 18. Reduced motion ─────────────────────────────────────────────
   Drop the cursor, flatten the coverflow arc and stop every sweep; the
   layouts themselves are unchanged. */
@media (prefers-reduced-motion: reduce) {

    body.hud.hud-cursor-on,
    body.hud.hud-cursor-on * {
        cursor: auto !important;
    }

    body.hud .hud-cursor {
        display: none !important;
    }

    body.hud .pf-card {
        transform: none !important;
        opacity: 1 !important;
    }

    body.hud .hud-panel:hover {
        transform: none;
    }

    body.hud .hud-panel::after {
        display: none;
    }

    body.hud .hud-tm-panel.is-active {
        animation: none;
    }
}