/* ══════════════════════════════════════════════════════════
   dabber.life v2 — cyber-terminal cinematic
   base #030014 · hero purple #a855f7 · signal cyan #06b6d4
   per-tile accents preserved from v1 via --acc (r,g,b)
   ══════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #030014;
    --bg-2: #08021e;
    --purple: #a855f7;
    --cyan: #06b6d4;
    --text: #e2e8f0;
    --dim: #94a3b8;
    --muted: #475569;
    --line: rgba(255,255,255,0.07);
    --mono: 'JetBrains Mono', ui-monospace, monospace;
    --disp: 'Big Shoulders', 'Arial Narrow', sans-serif;
    --pad: clamp(20px, 4vw, 64px);
}

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100dvh;
    /* stop the top/bottom scroll bounce from yanking the pinned scenes on mobile
       (the horizontal client carousel scrolls in X, unaffected) */
    overscroll-behavior-y: none;
}

::selection { background: rgba(168,85,247,.45); color: #fff; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.src-video { position: fixed; width: 2px; height: 2px; opacity: 0.01; pointer-events: none; left: -10px; top: -10px; }

/* ── ambient layers ──────────────────────────── */
.grain {
    position: fixed; inset: 0; z-index: 80; pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 220px;
}
.scanlines {
    position: fixed; inset: 0; z-index: 81; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0,0,0,.10) 3px, rgba(0,0,0,.10) 4px);
    mix-blend-mode: multiply;
}

/* ── topbar ──────────────────────────────────── */
.topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px var(--pad);
    font-size: .72rem; letter-spacing: .08em; color: var(--muted);
    background: linear-gradient(180deg, rgba(3,0,20,.85), rgba(3,0,20,0));
}
.topbar-left { display: flex; align-items: baseline; gap: 14px; }
.clock {
    color: var(--cyan); font-size: .85rem; letter-spacing: .18em;
    text-shadow: 0 0 12px rgba(6,182,212,.5);
}
.topbar-brand {
    font-size: .8rem; letter-spacing: .3em; color: var(--dim);
    text-transform: uppercase;
    opacity: 0; transition: opacity .4s;
}
body.past-hero .topbar-brand { opacity: 1; }
.topbar-right { display: flex; align-items: center; gap: 8px; }
.sys-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #10b981; box-shadow: 0 0 10px #10b981;
    animation: pulse 2.4s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

/* ── dot nav ─────────────────────────────────── */
.dotnav {
    position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
    z-index: 90; display: flex; flex-direction: column; gap: 16px;
}
.dotnav a {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255,255,255,.18);
    position: relative;
    transition: background .3s, box-shadow .3s, transform .3s;
}
.dotnav a::after {
    content: attr(data-label);
    position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
    font-size: .68rem; letter-spacing: .14em; color: var(--dim);
    white-space: nowrap; opacity: 0; transition: opacity .25s;
    pointer-events: none;
}
.dotnav a:hover::after { opacity: 1; }
.dotnav a.on {
    background: var(--purple);
    box-shadow: 0 0 12px rgba(168,85,247,.9);
    transform: scale(1.35);
}
@media (max-width: 900px) { .dotnav { display: none; } }

/* ── crypto ticker ───────────────────────────── */
.ticker {
    position: absolute; top: 46px; left: 0; right: 0; z-index: 5;
    overflow: hidden; padding: 8px 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    display: none;
}
.ticker.live { display: block; }
.ticker-track {
    display: inline-flex; gap: 34px; white-space: nowrap;
    animation: tick 60s linear infinite;
    will-change: transform;
}
@keyframes tick { to { transform: translateX(-50%); } }
.ticker:hover .ticker-track { animation-play-state: paused; }
.coin { font-size: .72rem; letter-spacing: .06em; color: var(--dim); }
.coin b { color: var(--text); font-weight: 500; }
.coin .up { color: #10b981; }
.coin .down { color: #ef4444; }

/* ── hero ────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100dvh;
    display: flex; align-items: center; justify-content: center;
    overflow: clip;
    cursor: crosshair;
}
.hero-field {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 1; opacity: .94;
}
/* scrim values match the live site's proven #ascii-scrim: the ASCII movie
   stays clearly watchable, type stays readable */
.hero-scrim {
    position: absolute; inset: 0; z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(3,0,20,.42) 0%, rgba(3,0,20,.14) 35%, rgba(3,0,20,.32) 70%, rgba(3,0,20,.72) 100%),
        radial-gradient(ellipse 68% 58% at 50% 46%, transparent 0%, rgba(3,0,20,.4) 100%);
}
.hero-inner {
    position: relative; z-index: 3;
    text-align: center;
    padding: 0 var(--pad);
    display: flex; flex-direction: column; align-items: center;
    transform: translateY(3vh);
}
.hero-title {
    font-family: var(--disp);
    font-weight: 900;
    font-size: clamp(56px, min(12vw, 24vh), 190px);
    line-height: .88;
    letter-spacing: .01em;
    background: linear-gradient(100deg, #c084fc 5%, #a855f7 35%, #6366f1 62%, #22d3ee 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 28px rgba(168,85,247,.55)) drop-shadow(0 4px 18px rgba(3,0,20,.9));
}
.hero-tagline {
    margin-top: 2vh;
    font-size: clamp(.72rem, 1.6vw, 1rem);
    letter-spacing: .22em;
    color: var(--dim);
    text-shadow: 0 2px 18px rgba(3,0,20,.9);
}
.hero-tagline .acc { color: var(--purple); }
.hero-tagline .sep { color: var(--muted); }
.hero-pitch {
    margin-top: 3.2vh;
    max-width: 560px;
    font-size: clamp(.78rem, 1.5vw, .95rem);
    color: var(--text);
    text-shadow: 0 2px 14px rgba(3,0,20,.95), 0 0 34px rgba(3,0,20,.8);
}
.cta {
    margin-top: 3.4vh;
    display: inline-block;
    font-family: var(--mono);
    font-size: .9rem; letter-spacing: .12em;
    color: #030014;
    background: var(--purple);
    padding: 14px 30px;
    border-radius: 4px;
    box-shadow: 0 0 30px rgba(168,85,247,.5), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .18s, box-shadow .3s, background .3s;
}
.cta:hover { background: #b96cf9; box-shadow: 0 0 46px rgba(168,85,247,.75), inset 0 1px 0 rgba(255,255,255,.35); }
.cta:active { transform: translateY(1px) scale(.99); }
.cta::before { content: "$ mail "; color: rgba(3,0,20,.62); }
.cta::after {
    content: "▊"; margin-left: 9px;
    color: rgba(3,0,20,.75);
    animation: caret 1.1s steps(2) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

/* ── signal (scrub) ──────────────────────────────
   FAIL-VISIBLE: base layout is a static, readable
   stack. body.anim (set only when GSAP is live and
   motion is allowed) switches to the pinned scene. */
.signal { position: relative; }
.signal-pin {
    position: relative; overflow: clip;
    background: #01000a;
    padding: 6vh 0 4vh;
}
.signal-poster {
    position: relative; width: 100%; height: 46vh;
    object-fit: cover;
}
.signal-canvas { display: none; }
.signal-veil { display: none; }
body.anim .signal-pin { height: 100dvh; padding: 0; }
body.anim .signal-poster,
body.anim .signal-canvas {
    display: block;
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover;
}
body.anim .signal-veil {
    display: block;
    position: absolute; inset: 0; z-index: 2;
    background: radial-gradient(ellipse 90% 70% at 50% 55%, transparent 30%, rgba(1,0,10,.55) 100%);
}
.beat {
    position: relative; z-index: 3;
    text-align: center;
    padding: 7vh var(--pad) 0;
}
body.anim .beat {
    position: absolute;
    left: 0; right: 0;
    top: 10vh;
    padding: 0 var(--pad);
    opacity: 0;
    pointer-events: none;
}
.beat h2 {
    font-family: var(--disp); font-weight: 900;
    /* vh-capped so beats can never reach the climax row on short windows */
    font-size: clamp(42px, min(8.6vw, 13.5vh), 124px);
    line-height: .9; letter-spacing: .015em;
    color: #fff;
    text-shadow: 0 0 34px rgba(6,182,212,.55), 0 4px 40px rgba(0,0,0,.8);
}
.beat p {
    margin-top: 14px;
    font-size: clamp(.7rem, 1.4vw, .85rem);
    letter-spacing: .2em; color: #e6edf7;
    text-shadow: 0 2px 6px rgba(0,0,0,.95), 0 0 22px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,1);
}
.beat-3 h2 { text-shadow: 0 0 34px rgba(168,85,247,.6), 0 4px 40px rgba(0,0,0,.8); }

.climax {
    position: relative; z-index: 4;
    display: flex; justify-content: center; align-items: flex-end;
    gap: clamp(10px, 2.4vw, 34px);
    padding: 6vh var(--pad) 2vh;
    perspective: 900px;
}
body.anim .climax {
    position: absolute;
    left: 0; right: 0; bottom: 6vh;
    padding: 0 var(--pad);
}
.shot {
    /* width bounded by BOTH vw and vh so the row stays clear of the beats */
    width: clamp(150px, min(26vw, 56vh), 420px);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: #0a0520;
    box-shadow: 0 30px 80px rgba(0,0,0,.65), 0 0 44px rgba(168,85,247,.22);
}
body.anim .shot { opacity: 0; }
.shot img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.shot figcaption {
    font-size: .62rem; letter-spacing: .18em; color: var(--dim);
    padding: 7px 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    background: rgba(3,0,20,.8);
}
.shot-b { width: clamp(170px, min(30vw, 64vh), 500px); z-index: 2; }

/* ── arsenal (horizontal pan) ─────────────────
   FAIL-VISIBLE: base = vertical stack; body.pan
   (desktop + GSAP live) switches to the sideways
   pinned track. */
.arsenal { position: relative; background: var(--bg); }
.arsenal-pin { overflow: clip; }
.arsenal-track { display: block; }
body.pan .arsenal-track {
    display: flex; height: 100dvh;
    width: max-content;
    will-change: transform;
}
.panel {
    width: 100%; min-height: 100dvh;
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(20px, 4vw, 70px);
    align-items: center;
    padding: 12vh var(--pad) 8vh;
    position: relative;
}
body.pan .panel { width: 100vw; height: 100%; min-height: 0; }
.panel::before {
    content: "";
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 74% 50%, rgba(var(--pa), .13), transparent 65%),
        radial-gradient(ellipse 40% 45% at 12% 80%, rgba(var(--pa), .07), transparent 70%);
    pointer-events: none;
}
.panel-copy { position: relative; padding-left: clamp(0px, 3vw, 46px); }
.panel-copy h3 {
    font-family: var(--disp); font-weight: 900;
    font-size: clamp(54px, min(8.6vw, 15vh), 150px);
    line-height: .88; letter-spacing: .012em;
    color: #fff;
    text-shadow: 0 0 38px rgba(var(--pa), .5);
}
.panel-copy p {
    margin-top: 3vh;
    max-width: 46ch;
    color: var(--dim);
    font-size: clamp(.78rem, 1.35vw, .95rem);
}
.panel-visual {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(var(--pa), .35);
    box-shadow: 0 34px 90px rgba(0,0,0,.6), 0 0 60px rgba(var(--pa), .18);
    transform: translateZ(0);
    max-height: 62vh;
}
.panel-visual::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(var(--pa), .16), transparent 45%, rgba(3,0,20,.35));
    mix-blend-mode: screen;
    pointer-events: none;
}
.panel-visual img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; }

/* ── creed ───────────────────────────────────── */
.creed {
    position: relative;
    min-height: 92dvh;
    display: flex; align-items: center; justify-content: center;
    overflow: clip;
    background: #01000a;
}
.creed-field { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; }
.creed blockquote {
    position: relative; z-index: 2;
    max-width: 1150px;
    padding: 0 var(--pad);
    text-align: center;
}
.creed blockquote p {
    font-family: var(--disp); font-weight: 800;
    font-size: clamp(30px, 5vw, 74px);
    line-height: 1.04;
    color: #fff;
    text-shadow: 0 0 44px rgba(168,85,247,.35);
    min-height: 3em;
}
.creed blockquote footer {
    margin-top: 4vh;
    font-size: .78rem; letter-spacing: .2em;
    color: var(--purple);
}
.creed-year { color: var(--muted); margin-left: 10px; }

/* ── fleet ───────────────────────────────────── */
.fleet {
    position: relative;
    padding: 14vh var(--pad) 10vh;
    background:
        radial-gradient(ellipse 60% 40% at 80% 0%, rgba(6,182,212,.07), transparent 60%),
        radial-gradient(ellipse 70% 50% at 10% 100%, rgba(168,85,247,.08), transparent 60%),
        var(--bg);
}
.fleet-head { max-width: 1440px; margin: 0 auto 7vh; }
.fleet-head h2 {
    font-family: var(--disp); font-weight: 900;
    font-size: clamp(58px, 10vw, 170px);
    line-height: .9;
    color: #fff;
    text-shadow: 0 0 48px rgba(6,182,212,.4);
}
.fleet-head p { margin-top: 14px; color: var(--dim); max-width: 60ch; }

.fleet-grid {
    max-width: 1440px; margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.card {
    --a: rgba(var(--acc), 1);
    position: relative;
    min-height: 210px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(var(--acc), .22);
    background: #07031a;
    display: flex; align-items: flex-end;
    isolation: isolate;
    transition: transform .25s cubic-bezier(.2,.9,.3,1.4), border-color .25s, box-shadow .3s;
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--acc), .65);
    box-shadow: 0 18px 44px rgba(0,0,0,.5), 0 0 34px rgba(var(--acc), .25);
}
.card:focus-visible { outline: 2px solid rgba(var(--acc), .8); outline-offset: 2px; }
.card-wide { grid-column: span 2; min-height: 250px; }
.card .bg {
    position: absolute; inset: 0; z-index: -1;
    background-size: cover; background-position: top center;
    opacity: .38;
    filter: saturate(.65) brightness(.7);
    transition: opacity .35s, transform .6s ease, filter .35s;
}
.card:hover .bg { opacity: .55; transform: scale(1.04); filter: saturate(.9) brightness(.8); }
.card::before {
    content: "";
    position: absolute; inset: 0; z-index: 0;
    background:
        linear-gradient(180deg, rgba(3,0,20,.1) 0%, rgba(3,0,20,.55) 55%, rgba(3,0,20,.92) 100%),
        linear-gradient(300deg, rgba(var(--acc), .16), transparent 55%);
}
.card-body { position: relative; z-index: 1; padding: 18px 18px 16px; width: 100%; }
.card h4 {
    font-family: var(--disp); font-weight: 800;
    font-size: clamp(26px, 2.6vw, 40px);
    letter-spacing: .02em; line-height: 1;
    color: #fff;
    text-shadow: 0 0 22px rgba(var(--acc), .55);
}
.card p { margin-top: 8px; font-size: .74rem; line-height: 1.55; color: var(--dim); max-width: 46ch; }
.card .meta {
    display: block; margin-top: 10px;
    font-size: .64rem; letter-spacing: .16em; text-transform: lowercase;
    color: rgba(var(--acc), .95);
}
.card .meta a { text-decoration: underline; text-underline-offset: 3px; }
.card-ascii {
    position: absolute; inset: 0; z-index: 0;
    width: 100%; height: 100%;
    opacity: 0; transition: opacity .35s;
    pointer-events: none;
}
.card-ascii.on { opacity: 1; }
.status {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 8px; height: 8px; border-radius: 50%;
    background: #334155;
    transition: background .4s, box-shadow .4s;
}
.status.up { background: #10b981; box-shadow: 0 0 12px #10b981; }
.status.down { background: #ef4444; box-shadow: 0 0 12px #ef4444; }
.card-offline { opacity: .55; }
.card-click { cursor: pointer; }
.mc-addr { color: rgba(var(--acc),1); border-bottom: 1px dashed rgba(var(--acc),.6); }

/* ── client work ─────────────────────────────── */
.clients {
    position: relative;
    padding: 14vh var(--pad) 12vh;
    background:
        radial-gradient(ellipse 55% 45% at 15% 10%, rgba(236,72,153,.06), transparent 60%),
        radial-gradient(ellipse 60% 50% at 90% 90%, rgba(6,182,212,.06), transparent 60%),
        #020010;
}
.clients-head { max-width: 1440px; margin: 0 auto 6vh; }
.clients-head h2 {
    font-family: var(--disp); font-weight: 900;
    font-size: clamp(52px, 9.4vw, 160px);
    line-height: .9; color: #fff;
    text-shadow: 0 0 46px rgba(236,72,153,.35);
}
.clients-head p { margin-top: 14px; color: var(--dim); max-width: 60ch; }
.clients-wrap {
    max-width: 1440px; margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(20px, 3.4vw, 56px);
    align-items: start;
}
.client-list { display: flex; flex-direction: column; }
.client-row {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    gap: 14px;
    align-items: baseline;
    padding: 20px 10px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    position: relative;
    transition: background .25s, padding-left .25s;
}
.client-row:first-child { border-top: 1px solid rgba(255,255,255,.08); }
.client-row:hover, .client-row.active {
    background: linear-gradient(90deg, rgba(var(--acc), .10), transparent 70%);
    padding-left: 22px;
}
.client-row::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px;
    background: rgba(var(--acc), .9);
    transform: scaleY(0);
    transition: transform .25s;
}
.client-row:hover::before, .client-row.active::before { transform: scaleY(1); }
.c-name {
    font-family: var(--disp); font-weight: 800;
    font-size: clamp(20px, 2.2vw, 34px);
    letter-spacing: .02em; color: #fff;
    line-height: 1;
}
.c-domain { font-size: .74rem; letter-spacing: .08em; color: rgba(var(--acc), .95); }
.c-tag { font-size: .66rem; letter-spacing: .14em; color: var(--muted); text-transform: lowercase; text-align: right; }
.client-row .status { position: static; align-self: center; justify-self: end; }
.client-preview {
    position: sticky; top: 12vh;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(var(--pacc, 168,85,247), .4);
    box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 50px rgba(var(--pacc, 168,85,247), .16);
    background: #07031a;
    isolation: isolate;
    transition: border-color .3s, box-shadow .3s;
}
.client-preview img { width: 100%; aspect-ratio: 16/10; object-fit: cover; object-position: top; display: block; transition: opacity .25s; }
.cp-sweep {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 30%, rgba(var(--pacc, 168,85,247), .25) 50%, transparent 70%);
    transform: translateX(-120%);
    opacity: 0;
}
.client-preview.swap .cp-sweep { animation: cpsweep .5s ease; }
@keyframes cpsweep { 0% { opacity: 1; transform: translateX(-120%); } 100% { opacity: 1; transform: translateX(120%); } }

/* ── consult / contact ───────────────────────── */
.consult {
    position: relative;
    padding: 16vh var(--pad) 12vh;
    background:
        radial-gradient(ellipse 80% 55% at 50% 0%, rgba(168,85,247,.10), transparent 60%),
        #01000a;
}
.consult-inner { max-width: 1180px; margin: 0 auto; }
.consult h2 {
    font-family: var(--disp); font-weight: 900;
    font-size: clamp(52px, 9vw, 150px);
    line-height: .9;
    color: #fff;
    text-shadow: 0 0 46px rgba(168,85,247,.45);
}
.consult-lede { margin-top: 3.4vh; font-size: clamp(.95rem, 1.9vw, 1.25rem); color: var(--text); }
.consult-sub { margin-top: 12px; color: var(--dim); max-width: 74ch; font-size: .82rem; }

.svc-list {
    margin-top: 7vh;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px 34px;
}
.svc { border-left: 2px solid rgba(var(--acc), .85); padding-left: 16px; }
.svc h5 {
    font-family: var(--disp); font-weight: 800;
    font-size: 1.35rem; letter-spacing: .03em;
    color: #fff;
}
.svc p { margin-top: 6px; font-size: .74rem; color: var(--dim); }

/* terminal */
.term {
    margin-top: 9vh;
    border: 1px solid rgba(168,85,247,.3);
    border-radius: 8px;
    background: rgba(5,2,18,.92);
    box-shadow: 0 24px 70px rgba(0,0,0,.55), 0 0 40px rgba(168,85,247,.12);
    overflow: hidden;
}
.term-head {
    display: flex; align-items: center; gap: 7px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.025);
}
.term-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,.12); }
.term-head .term-dot:first-child { background: rgba(239,68,68,.7); }
.term-head .term-dot:nth-child(2) { background: rgba(250,204,21,.7); }
.term-head .term-dot:nth-child(3) { background: rgba(16,185,129,.7); }
.term-title { margin-left: 8px; font-size: .68rem; letter-spacing: .14em; color: var(--muted); }
.term-scroll { padding: 16px 18px 18px; max-height: 320px; overflow-y: auto; font-size: .78rem; }
.term-out { white-space: pre-wrap; color: var(--dim); }
.term-out .ok { color: #10b981; }
.term-out .hl { color: var(--purple); }
.term-out .cy { color: var(--cyan); }
.term-out .snake {
    color: #10b981; line-height: 1.16; font-size: .8rem;
    margin: 8px 0;
    text-shadow: 0 0 9px rgba(16,185,129,.4);
}
#mtxRain { position: fixed; inset: 0; z-index: 96; pointer-events: none; }
.term-line { display: flex; gap: 10px; margin-top: 8px; align-items: baseline; }
.term-ps1 { color: #10b981; white-space: nowrap; }
#termIn {
    flex: 1;
    background: none; border: none; outline: none;
    color: var(--text); font-family: var(--mono); font-size: .78rem;
    caret-color: var(--purple);
}

.cta-big { margin-top: 8vh; font-size: clamp(.95rem, 2.4vw, 1.4rem); padding: 20px 44px; }

/* ── footer ──────────────────────────────────── */
.footer {
    display: flex; flex-wrap: wrap; gap: 12px 34px;
    align-items: center; justify-content: space-between;
    padding: 26px var(--pad) 34px;
    border-top: 1px solid var(--line);
    font-size: .7rem; letter-spacing: .1em;
    color: var(--muted);
    background: #01000a;
}
.footer b { color: var(--purple); font-weight: 500; }
.footer a { color: var(--dim); border-bottom: 1px solid rgba(255,255,255,.15); padding-bottom: 2px; }
.footer a:hover { color: #fff; }
.foot-dim { opacity: .75; }

/* ── music player ────────────────────────────── */
.player {
    position: fixed; right: 22px; bottom: 22px; z-index: 92;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    border: 1px solid rgba(168,85,247,.4);
    border-radius: 999px;
    background: rgba(5,2,18,.85);
    backdrop-filter: blur(10px);
    color: var(--dim);
    font-family: var(--mono); font-size: .68rem; letter-spacing: .14em;
    cursor: pointer;
    transition: border-color .3s, box-shadow .3s;
}
.player:hover { border-color: rgba(168,85,247,.9); box-shadow: 0 0 26px rgba(168,85,247,.3); }
.p-icon { width: 13px; height: 13px; fill: var(--purple); }
.p-pause { display: none; }
.player.playing .p-pause { display: block; }
.player.playing .p-play { display: none; }
.p-bars { display: none; align-items: flex-end; gap: 2px; height: 12px; }
.player.playing .p-bars { display: inline-flex; }
.p-bars i { width: 2px; background: var(--cyan); animation: eq 0.9s ease-in-out infinite; }
.p-bars i:nth-child(1) { height: 40%; animation-delay: 0s; }
.p-bars i:nth-child(2) { height: 90%; animation-delay: .15s; }
.p-bars i:nth-child(3) { height: 60%; animation-delay: .3s; }
.p-bars i:nth-child(4) { height: 100%; animation-delay: .45s; }
@keyframes eq { 0%,100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }

/* ── toast ───────────────────────────────────── */
.toast {
    position: fixed; left: 50%; bottom: 30px; transform: translate(-50%, 20px);
    z-index: 95;
    background: rgba(16,185,129,.14);
    border: 1px solid rgba(16,185,129,.5);
    color: #a7f3d0;
    padding: 10px 22px; border-radius: 6px;
    font-size: .74rem; letter-spacing: .1em;
    opacity: 0; pointer-events: none;
    transition: opacity .3s, transform .3s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── responsive ──────────────────────────────── */
@media (max-width: 1100px) {
    /* 3 columns cannot pair two 2-col cards, so every wide tile used to leave a
       dead cell beside it. dense backfills those with the next 1-col tile. */
    .fleet-grid { grid-template-columns: repeat(3, 1fr); grid-auto-flow: row dense; }
}
@media (max-width: 900px) {
    .svc-list { grid-template-columns: repeat(2, 1fr); }
    .panel { grid-template-columns: 1fr; grid-template-rows: auto minmax(0,1fr); gap: 4vh; padding-top: 13vh; }
    .panel-copy { padding-left: 0; }
    .panel-copy h3 { font-size: clamp(48px, 13vw, 96px); }
    .panel-visual { align-self: start; max-height: 44vh; }
    .panel-visual img { aspect-ratio: auto; height: 100%; max-height: 44vh; }
}
@media (max-width: 900px) {
    /* clients: horizontal snap carousel of live-site cards */
    .clients-wrap { grid-template-columns: 1fr; }
    .client-preview { display: none; }
    .client-list {
        flex-direction: row;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 16px;
        margin: 0 calc(var(--pad) * -1);
        padding-left: var(--pad); padding-right: var(--pad);
        -webkit-overflow-scrolling: touch;
    }
    .client-row {
        flex: 0 0 78vw;
        max-width: 340px;
        scroll-snap-align: start;
        display: block;
        border: 1px solid rgba(var(--acc), .3) !important;
        border-radius: 10px;
        padding: 0 0 14px;
        overflow: hidden;
        background: #07031a;
    }
    .client-row::before { display: none; }
    .client-row::after {
        content: "";
        display: block;
        height: 150px;
        margin-bottom: 12px;
        background-image: var(--shot);
        background-size: cover;
        background-position: top center;
        border-bottom: 1px solid rgba(var(--acc), .25);
    }
    .client-row .c-name { display: block; padding: 0 14px; font-size: 22px; }
    .client-row .c-domain { display: block; padding: 4px 14px 0; }
    .client-row .c-tag { display: block; padding: 4px 14px 0; text-align: left; }
    .client-row .status { position: absolute; top: 10px; right: 10px; }
}
@media (max-width: 760px) {
    .fleet-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .card-wide { grid-column: span 2; }
    .hero-inner { transform: translateY(6vh); }
    .climax { flex-wrap: nowrap; }
    .shot { width: 30vw; }
    .shot figcaption { font-size: .5rem; padding: 5px 8px; }
    .topbar-brand { display: none; }
    .date { display: none; }
}
@media (max-width: 560px) {
    body { font-size: 14px; }
    .creed-field { opacity: .44; }

    /* hero: stacked tagline, one-line CTA, tighter pitch */
    .hero-title { font-size: clamp(56px, 19vw, 110px); }
    .hero-tagline { display: flex; flex-direction: column; gap: 7px; margin-top: 2.4vh; }
    .hero-tagline .sep { display: none; }
    .hero-tagline { font-size: .72rem; letter-spacing: .26em; }
    .hero-pitch { font-size: .78rem; max-width: 34ch; }
    .cta { font-size: .78rem; padding: 13px 18px; letter-spacing: .08em; white-space: nowrap; }
    .cta::before { content: "$ "; }

    /* fleet: compact 2-col cards, clamped copy */
    .fleet-grid { grid-template-columns: repeat(2, 1fr); }
    .card-wide { grid-column: span 2; }
    .card { min-height: 150px; }
    .card-body { padding: 12px 12px 11px; }
    .card h4 { font-size: 21px; }
    .card p {
        font-size: .62rem; line-height: 1.45; margin-top: 5px;
        display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .card .meta { font-size: .56rem; margin-top: 7px; }
    .status { top: 10px; right: 10px; }

    .fleet { padding: 10vh var(--pad) 8vh; }
    .fleet-head p, .clients-head p { font-size: .8rem; }
    .clients { padding: 10vh var(--pad) 9vh; }
    .consult { padding: 12vh var(--pad) 10vh; }
    .svc-list { grid-template-columns: 1fr; gap: 18px; margin-top: 5vh; }
    .svc p { font-size: .7rem; }
    .consult-sub { font-size: .74rem; }
    .beat { top: 12vh; }
    .beat p { font-size: .62rem; letter-spacing: .14em; }
    .climax { bottom: 9vh; gap: 8px; }
    .shot { width: 31vw; min-width: 100px; }
    .player { right: 14px; bottom: 14px; padding: 9px 13px; }
    .p-label { display: none; }
    .term-scroll { max-height: 260px; font-size: .7rem; }
    .footer { font-size: .6rem; gap: 8px 20px; padding-bottom: 70px; }
}

/* ── mobile: locked viewport height ──────────────
   Drive the full-height + pinned scenes off the JS-locked --vhlock (px) instead
   of 100dvh, so the address bar sliding in/out can't reflow them and drift the
   ScrollTrigger pins (that reflow caused the snap-back AND the pinned-city gap).
   Falls back to dvh until the script sets --vhlock. */
@media (max-width: 900px) {
    .hero { min-height: var(--vhlock, 100dvh); }
    body.anim .signal-pin { height: var(--vhlock, 100dvh); }
    .panel { min-height: var(--vhlock, 100dvh); }
    .creed { min-height: calc(var(--vhlock, 100dvh) * 0.92); }
}

/* ── reveals (fail-visible) ──────────────────────
   Base state is fully visible. Only when the anim
   runtime is live (body.anim) do .rv elements start
   translated+transparent, and a class flip reveals
   them. A JS safety timer force-reveals everything. */
body.anim .rv {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1);
    transition-delay: var(--rvd, 0s);
}
body.anim .rv.is-in { opacity: 1; transform: none; }

/* ── reduced motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .ticker-track { animation: none; }
    .sys-dot { animation: none; }
    .p-bars i { animation: none; }
    .card, .cta { transition: none; }
    .cta::after { animation: none; }
}

/* ── presence: operators on the wire ─────────────
   Other live visitors' cursors render as glyph
   ghosts on this overlay (inside the hero, above
   the scrim, below the type). Pure paint layer. */
.ghost-layer {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 2; pointer-events: none;
}
.wire {
    margin-top: 2.6vh;
    font-family: var(--mono);
    font-size: .68rem;
    letter-spacing: .2em;
    color: rgba(34,211,238,.82);
    text-shadow: 0 0 14px rgba(6,182,212,.45), 0 2px 12px rgba(3,0,20,.9);
    opacity: 0;
    transition: opacity .9s ease;
}
.wire.on { opacity: 1; }

/* ── wormhole exit overlay ───────────────────────
   Fullscreen glyph-swarm canvas for fleet-card
   travel. Sits above every fixed chrome layer;
   transparent wherever cells are not yet covered. */
.warp-layer {
    position: fixed; inset: 0; width: 100%; height: 100%;
    z-index: 120; pointer-events: none;
    opacity: 0;
}
.warp-layer.on { opacity: 1; }