/* ============================================================
   REDESIGN SYSTEM — shared chrome for the marinkurir-inspired redesign
   ------------------------------------------------------------
   Single source of truth for every redesign prototype page
   (home-v2, lifetime-loyalty-v2, …). Holds: design tokens, base
   reset, the custom cursor, scroll-reveal, the fixed nav, and the
   framed-panel layout system (rail + main + dividers).
   Page-specific sections (hero, cards, case sections, etc.) stay
   inline in each page's <style>, loaded AFTER this file so they can
   override. Pair with redesign.js (cursor / reveal / magnetic /
   parallax / Lenis) + the Lenis CDN script.
   ============================================================ */
:root{
  --page:#e4e7ea;
  --surface:#f7f8f9;
  --ink:#11151b;
  --soft:#3c424b;
  --muted:#828a93;
  --line:#cdd2d7;          /* divider line (a touch stronger so frames read) */
  --line-soft:#dde0e4;
  --accent:#1b8a8d;
  --dark:#0e1318;
  --dline:rgba(228,231,234,0.12); /* divider on dark panels (translucent, reads on any dark tone) */
  --display:'roc-grotesk-variable','Clash Display',-apple-system,sans-serif;
  --sans:'General Sans','Inter',sans-serif;
  --r:24px;
  --gap:18px;
  --sgap:clamp(48px,5vw,90px);
  --rail:63px;        /* left rail width (was 84px; trimmed to ~75%) */
  --max:1680px;        /* section-card max width (wider, marinkurir-style) */
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}
body{background:var(--page);color:var(--ink);font-family:var(--sans);line-height:1.5;overflow-x:hidden;cursor:none;}
@media(hover:none){body{cursor:auto;}}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
.shell{max-width:var(--max);margin:0 auto;padding:0 var(--gap);}
.lbl{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);}

/* Custom cursor — small mix-blend dot; grows into a backdrop-filter invert lens
   (with a "View" label) on [data-cbig] elements. Disabled on touch. */
.cursor{position:fixed;top:0;left:0;width:12px;height:12px;border-radius:50%;background:#fff;mix-blend-mode:difference;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);display:grid;place-items:center;transition:width .3s var(--ease),height .3s var(--ease),background .3s;}
.cursor.big{width:84px;height:84px;background:transparent;mix-blend-mode:normal;
  -webkit-backdrop-filter:invert(1) hue-rotate(180deg);backdrop-filter:invert(1) hue-rotate(180deg);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);}
.cursor .clabel{opacity:0;color:#fff;font-family:var(--display);font-weight:600;font-size:11px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 7px rgba(0,0,0,.5);transition:opacity .2s;}
.cursor.big .clabel{opacity:1;}
@media(hover:none){.cursor{display:none;}}

/* Scroll-reveal — elements fade/rise in when observed (redesign.js). */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* Fixed nav — frosts (blur + bg) once scrolled past 30px (redesign.js). */
nav.top{position:fixed;top:0;left:0;right:0;z-index:200;padding:24px 0;transition:padding .35s var(--ease),background .35s,box-shadow .35s,backdrop-filter .35s;}
nav.top.scrolled{padding:13px 0;background:rgba(244,245,247,0.72);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 1px 0 var(--line);}
nav.top .row{display:flex;justify-content:space-between;align-items:center;}
nav.top .brand{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:-0.01em;}
nav.top ul{display:flex;gap:28px;list-style:none;}
nav.top a{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);}
nav.top a.cta{color:var(--ink);}
nav.top a.active{color:var(--ink);} /* current page emphasis */

/* ===== FRAMED PANEL: left rail + main, full-bleed dividers ===== */
.framed{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:grid;grid-template-columns:var(--rail) 1fr;}
.framed.no-rail{grid-template-columns:1fr;}
.rail{border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:space-between;}
.rail .v-wrap{padding-top:30px;}
.rail .v{writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);}
.toprail{padding:16px clamp(30px,3.6vw,64px);border-bottom:1px solid var(--line);}
.rail .idx{height:64px;width:100%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.08em;color:var(--muted);}
.main{min-width:0;position:relative;}
.hr{border-top:1px solid var(--line);}
.pad{padding:clamp(30px,3.6vw,64px);}

/* ===== STATBAND — 4-up metric strip (no-rail framed) =====
   Builds on .framed. Used on home-v2 (opening personal stats) and
   lifetime-loyalty-v2 (impact strip + outcomes). Big number sits in .cell .v;
   wrap the figure in <span class="accent" data-count> to opt into the odometer.
   Collapses 4 → 2×2 ≤880px → single column ≤520px. */
.statband{padding:0 0 var(--sgap);}
.statband .framed{display:grid;grid-template-columns:repeat(4,1fr);}
.statband .cell{padding:clamp(26px,2.6vw,40px);border-right:1px solid var(--line);}
.statband .cell:last-child{border-right:0;}
.statband .cell .k{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px;}
.statband .cell .v{font-family:var(--display);font-weight:600;font-size:clamp(34px,3.6vw,52px);line-height:1;letter-spacing:-0.02em;}
.statband .cell .v .accent{color:var(--accent);}
.statband .cell .desc{margin-top:14px;font-size:13px;line-height:1.5;color:var(--soft);}
@media(max-width:880px){
  .statband .framed{grid-template-columns:1fr 1fr;}
  .statband .cell{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
  .statband .cell:nth-child(2n){border-right:0;}
  .statband .cell:nth-child(3),.statband .cell:nth-child(4){border-bottom:0;}
}
@media(max-width:520px){
  .statband .framed{grid-template-columns:1fr;}
  .statband .cell{border-right:0;border-bottom:1px solid var(--line);}
  .statband .cell:last-child{border-bottom:0;}
}

/* ===== ODOMETER (redesign.js) — spinning digit reels for [data-count] stats =====
   Each char becomes a fixed-height cell; digit cells clip a vertical .reel that
   translateY's up to land on its target. --oh is the cell height (a hair over 1em
   so glyphs don't clip); the JS translates in multiples of var(--oh). Static
   chars ($, %, +, …) sit in matching cells so the row stays baseline-aligned. */
.odo{--oh:1.12em;display:inline-flex;align-items:flex-start;}
.odo .od-c{display:inline-block;height:var(--oh);line-height:var(--oh);overflow:hidden;}
.odo .od-r{display:flex;flex-direction:column;font-variant-numeric:tabular-nums;will-change:transform;}
.odo .od-r>span{height:var(--oh);line-height:var(--oh);text-align:center;}

/* ===== LIGHTBOX (redesign.js) — chrome-framed, scrollable, full-color ===== */
.lb{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:clamp(18px,5vw,68px);background:rgba(14,19,24,0.88);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);opacity:0;transition:opacity .3s var(--ease);}
.lb.on{display:flex;opacity:1;}
.lb-frame{width:min(880px,100%);max-height:100%;display:flex;flex-direction:column;background:#0c0f14;border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;box-shadow:0 44px 120px rgba(0,0,0,.55);}
.lb-bar{flex:0 0 auto;height:40px;display:flex;align-items:center;gap:7px;padding:0 16px;border-bottom:1px solid rgba(255,255,255,.1);}
.lb-bar span{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22);}
.lb-url{margin-left:13px;font-family:var(--sans);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lb-screen{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;background:#fff;-webkit-overflow-scrolling:touch;}
.lb-screen img{width:100%;display:block;} /* full color, full height — scrolls inside the frame */
.lb-cap{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.65);pointer-events:none;}
.lb-close{position:absolute;top:20px;right:24px;width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:15px;cursor:pointer;display:grid;place-items:center;transition:background .2s;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font-size:22px;line-height:1;cursor:pointer;display:none;place-items:center;transition:background .2s;}
.lb.multi .lb-nav{display:grid;}
.lb-prev{left:clamp(10px,3vw,38px);}
.lb-next{right:clamp(10px,3vw,38px);}
@media(hover:hover){.lb-close:hover,.lb-nav:hover{background:rgba(255,255,255,.18);}}

/* Lightbox-enabled windows (`[data-gallery] .win`): cap long screenshots so they
   crop to the top inline (full image stays viewable in the lightbox), and show a
   persistent "enlarge" badge so the click-to-zoom is discoverable. Applies on any
   page with lightbox windows (anyroad-v2, lifetime-loyalty-v2). The .win base
   chrome itself stays page-inline; this just decorates it. */
[data-gallery] .win .screen{position:relative;cursor:pointer;max-height:clamp(300px,34vw,440px);}
[data-gallery] .win .screen img{object-position:top;}
[data-gallery] .win .screen::after{content:'';position:absolute;top:10px;right:10px;z-index:3;width:28px;height:28px;border-radius:7px;background:rgba(14,19,24,.58) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H5a2 2 0 0 0-2 2v4M15 3h4a2 2 0 0 1 2 2v4M9 21H5a2 2 0 0 1-2-2v-4M15 21h4a2 2 0 0 0 2-2v-4'/%3E%3C/svg%3E") center/15px no-repeat;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:.82;transition:opacity .25s var(--ease),transform .25s var(--ease);pointer-events:none;}
[data-gallery] .win:hover .screen::after{opacity:1;transform:scale(1.08);}

/* Shared mobile collapse for the framed system: hide nav items + the left rail,
   collapse the panel to a single column. Page-specific mobile rules stay inline. */
@media(max-width:880px){
  nav.top ul li:not(.cta){display:none;}
  .framed{grid-template-columns:1fr;}
  .rail{display:none;}
}

/* ============================================================
   THEME TOGGLE BUTTON + STATUS BAR (chrome present in both themes)
   ------------------------------------------------------------
   .theme-tog lives in nav on every page; the JS controller in
   redesign.js wires click + `T`. .sysbar is injected by the JS and
   shown ONLY in Systems (see the systems block below).
   ============================================================ */
.theme-tog{display:inline-flex;align-items:center;gap:8px;cursor:none;background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-family:var(--mono,'Geist Mono',monospace);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);transition:color .25s var(--ease),border-color .25s var(--ease);}
.theme-tog:hover{color:var(--ink);border-color:var(--muted);}
.theme-tog .tt-ic{width:11px;height:11px;border-radius:50%;border:1px solid currentColor;position:relative;overflow:hidden;flex:0 0 auto;}
.theme-tog .tt-ic::after{content:'';position:absolute;inset:0;left:50%;background:currentColor;}
@media(hover:none){.theme-tog{cursor:auto;}}
@media(max-width:880px){nav.top ul li.tog-wrap{display:inline-flex;}}

.sysbar{display:none;}

/* THEME TRANSITION — a deliberate switch, not a snap.
   .theme-anim is added to <html> by the JS for ~0.55s while toggling, cross-fading
   the whole palette (colors/borders/shadows) so the two themes morph into each
   other. The .theme-sweep is a one-shot scanline wipe in the active accent, like
   the system rebooting into the other mode. Both are skipped under reduced-motion
   (the JS applies the theme instantly instead). */
html.theme-anim,html.theme-anim *{transition:background-color .8s var(--ease),color .8s var(--ease),border-color .8s var(--ease),box-shadow .8s var(--ease),fill .8s var(--ease),stroke .8s var(--ease)!important;}
.theme-sweep{position:fixed;inset:0;z-index:9000;pointer-events:none;opacity:0;}
.theme-sweep::before{content:'';position:absolute;left:0;right:0;top:-3%;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);box-shadow:0 0 30px 3px var(--accent);}
.theme-sweep.run{animation:sweepfade 1.05s var(--ease) forwards;}
.theme-sweep.run::before{animation:sweepline 1.05s var(--ease) forwards;}
@keyframes sweepfade{0%{opacity:0;}10%{opacity:1;}85%{opacity:1;}100%{opacity:0;}}
@keyframes sweepline{from{top:-3%;}to{top:103%;}}

/* ============================================================
   SYSTEMS THEME — console / control-panel build
   ------------------------------------------------------------
   Activated by [data-theme="systems"] on <html> (set by the FOUC
   pre-paint script + the JS controller). A true second vibe, not a
   color swap: near-black blueprint surface, Geist / Geist Mono, a
   phosphor-teal accent with glow, monospace HUD labels, corner-tick
   framing, a terminal status bar, and a square cursor. The light
   product artifacts (.win / .proto-win / mockups / screenshots /
   passkit / phone-mocks / diagram fills) are LEFT light on purpose —
   they read as lit panels on the dark deck. Most rules target shared
   class names so they cascade across all 9 pages from this one file.
   ============================================================ */
[data-theme="systems"]{
  --page:#09090a;            /* neutral near-black (no blue cast) */
  --surface:#141416;
  --elev:#1c1c1f;            /* card deck — neutral gray, reads black/white/volt */
  --ink:#ededef;
  --soft:#a2a2a7;
  --muted:#6b6b71;
  --line:rgba(255,255,255,0.13);
  --line-soft:rgba(255,255,255,0.07);
  --accent:#ccff00;          /* Nike "Volt" — the only color in the theme */
  --glow:0 0 16px rgba(204,255,0,.30);
  --grid:rgba(255,255,255,0.035);
  --display:'rubik-mono-one','Martian Mono',ui-monospace,monospace;  /* H1/H2 + brand only — chunky terminal display (single weight) */
  --sans:'JetBrains Mono','Geist Mono',ui-monospace,monospace;       /* body = code-editor mono (terminal feel) */
  --mono:'JetBrains Mono','Geist Mono',ui-monospace,monospace;       /* labels + small UI chrome = workhorse mono */
  --mids:'Martian Mono','Geist Mono',ui-monospace,monospace;         /* H3/H4 + stat readouts — wide technical mono, distinct from body */
  --display-weight:400;
}
/* TWO-TIER MONO TYPE:
   Tier 1 — Rubik Mono One (var --display) for H1/H2 + brand. It's a single-weight
   face, so force weight 400 (a hardcoded 600 would render as ugly faux-bold). */
[data-theme="systems"] h1,[data-theme="systems"] h2,[data-theme="systems"] nav.top .brand{letter-spacing:0;font-weight:400!important;}
/* Tier 2 — H3/H4 + stat readouts in Martian Mono (wide technical), a distinct
   step between the Rubik display and the JetBrains body. */
[data-theme="systems"] h3,[data-theme="systems"] h4,
[data-theme="systems"] .statband .cell .v,[data-theme="systems"] .out-cells .v,
[data-theme="systems"] .ccard .stats .v{font-family:var(--mids)!important;letter-spacing:0;}
/* Tier 3 — small UI chrome that defaulted to var(--display) → workhorse mono. */
[data-theme="systems"] .rail .idx,[data-theme="systems"] .ccard .idx,
[data-theme="systems"] .ccard .cfoot .yr{font-family:var(--mono)!important;letter-spacing:0;}

/* SYSTEMS TYPE SCALE — the case pages (home sets matching values inline). Compress
   the editorial display sizes into the terminal hierarchy: H1 58 ▸ H2 ~42 ▸ H3 ~25,
   with relaxed mono line-heights so multi-line heads breathe. Keeps Rubik on H1/H2
   (size only — family comes from --display) and Martian on H3/H4 (via Tier 2). */
[data-theme="systems"] .case h1,[data-theme="systems"] .about h1{font-size:clamp(28px,4vw,58px)!important;line-height:1.08;letter-spacing:0;}
[data-theme="systems"] .sec-head h2,[data-theme="systems"] .cs h2{font-size:clamp(23px,2.8vw,42px)!important;line-height:1.14;letter-spacing:0;}
[data-theme="systems"] .main h3,[data-theme="systems"] .main h4{font-size:clamp(18px,1.9vw,25px)!important;line-height:1.3;letter-spacing:0;}
/* Neutralize the dark "editorial accent" panels (navy in editorial) so they read
   gray on the black/white/volt deck. .case-nav finale is on every case page. */
[data-theme="systems"] .case-nav .framed{background:#0b0b0c!important;}
/* Hardcoded editorial-teal that won't flip to volt: the hero eyebrow pulse dot
   (its keyframes bake in teal) and the flow-diagram "shared spine" tint. */
[data-theme="systems"] .eyebrow .pulse{animation:none!important;background:var(--accent)!important;box-shadow:0 0 10px var(--accent)!important;}
[data-theme="systems"] .flow-base{background:rgba(204,255,0,.06)!important;}
/* Blueprint grid deck + faint top glow */
[data-theme="systems"] body{
  background-color:var(--page);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(204,255,0,0.04), transparent 60%),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:auto, 46px 46px, 46px 46px;
  background-attachment:fixed;
}
[data-theme="systems"] ::selection{background:rgba(204,255,0,.30);color:#0a0a0a;}

/* Status bar — terminal HUD pinned above the nav */
[data-theme="systems"] .sysbar{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  position:fixed;top:0;left:0;right:0;z-index:250;height:28px;padding:0 clamp(14px,3vw,34px);
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);background:rgba(7,10,14,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
[data-theme="systems"] .sysbar .sb-l{display:inline-flex;align-items:center;gap:9px;color:var(--soft);}
[data-theme="systems"] .sysbar .sb-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:var(--glow);animation:sbpulse 2.6s var(--ease) infinite;}
@keyframes sbpulse{0%,100%{opacity:1;}50%{opacity:.35;}}
[data-theme="systems"] .sysbar .sb-m{color:var(--muted);}
[data-theme="systems"] .sysbar .sb-r{color:var(--accent);text-shadow:var(--glow);}
@media(max-width:680px){[data-theme="systems"] .sysbar .sb-m{display:none;}}
@media(prefers-reduced-motion:reduce){[data-theme="systems"] .sysbar .sb-dot{animation:none;}}
[data-theme="systems"] nav.top{top:28px;}

/* Nav — dark frost + mono brand caret */
[data-theme="systems"] nav.top.scrolled{background:rgba(7,10,14,.72);box-shadow:0 1px 0 var(--line);}
[data-theme="systems"] nav.top .brand::after{content:'_';color:var(--accent);text-shadow:var(--glow);animation:caret 1.1s steps(1) infinite;}
@keyframes caret{50%{opacity:0;}}
@media(prefers-reduced-motion:reduce){[data-theme="systems"] nav.top .brand::after{animation:none;}}
[data-theme="systems"] .theme-tog{border-color:var(--line);color:var(--accent);}
[data-theme="systems"] .theme-tog:hover{border-color:var(--accent);box-shadow:var(--glow);}

/* Framed panels — crisp control-panel corners (sharp radius so the bracket ticks
   sit on square corners, not fighting the editorial 24px round) + corner ticks. */
[data-theme="systems"] .framed{position:relative;border-radius:4px;background:var(--surface);border-color:var(--line);box-shadow:0 0 0 1px rgba(204,255,0,.03),0 40px 90px -50px #000;}
[data-theme="systems"] .framed::before,[data-theme="systems"] .framed::after{content:'';position:absolute;width:11px;height:11px;z-index:4;pointer-events:none;border-color:var(--accent);opacity:.7;}
[data-theme="systems"] .framed::before{top:7px;left:7px;border-top:1.5px solid;border-left:1.5px solid;}
[data-theme="systems"] .framed::after{bottom:7px;right:7px;border-bottom:1.5px solid;border-right:1.5px solid;}
[data-theme="systems"] .rail,[data-theme="systems"] .toprail,[data-theme="systems"] .hr,
[data-theme="systems"] .statband .cell{border-color:var(--line);}
[data-theme="systems"] .rail .idx{color:var(--accent);text-shadow:var(--glow);border-top-color:var(--line);}

/* HUD labels — monospace + glow on the technical moments */
[data-theme="systems"] .lbl,
[data-theme="systems"] .rail .v,
[data-theme="systems"] .rail .idx,
[data-theme="systems"] .statband .cell .k,
[data-theme="systems"] .sec-head .lbl,
[data-theme="systems"] .eyebrow,
[data-theme="systems"] .out-cells .k,
[data-theme="systems"] .breadcrumb{font-family:var(--mono)!important;letter-spacing:.16em;}
[data-theme="systems"] .accent,[data-theme="systems"] .ac{color:var(--accent);text-shadow:var(--glow);}

/* Mobile: the Rubik brand is wide + three nav items don't fit at 375px. Shrink the
   brand (no wrap), make the toggle icon-only, keep the CTA tight, drop its brackets
   on small phones, and lower the mono headline floors so long words don't clip. */
@media(max-width:880px){
  .theme-tog{padding:7px 9px;}
  .theme-tog [data-theme-label]{display:none;}
  [data-theme="systems"] nav.top .brand{font-size:13px;white-space:nowrap;}
  [data-theme="systems"] nav.top .cta a{white-space:nowrap;font-size:11px;}
  [data-theme="systems"] .case h1,[data-theme="systems"] .about h1{font-size:clamp(23px,6.4vw,40px)!important;}
}
@media(max-width:560px){
  [data-theme="systems"] nav.top .cta a::before,[data-theme="systems"] nav.top .cta a::after{content:''!important;}
}

/* Square glowing cursor */
[data-theme="systems"] .cursor.sq{border-radius:2px;background:var(--accent);mix-blend-mode:normal;box-shadow:var(--glow);}
[data-theme="systems"] .cursor.sq.big{background:transparent;box-shadow:inset 0 0 0 1px var(--accent),var(--glow);}

/* ===== TERMINAL FLOURISHES (Systems only) ===== */
/* Slashed-zero numerals — the classic coder zero (inherits to all text). */
[data-theme="systems"]{font-variant-numeric:slashed-zero;}
/* CRT scanlines — a faint horizontal-line field over the whole viewport. */
[data-theme="systems"] body::after{content:'';position:fixed;inset:0;z-index:300;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 1px,transparent 1px 3px);opacity:.4;mix-blend-mode:multiply;}
/* Dashed hairline dividers — terminal-table feel. */
[data-theme="systems"] .hr{border-top-style:dashed;}
/* Blinking caret in the status bar (terminal prompt). */
[data-theme="systems"] .sysbar .sb-r::after{content:'▋';margin-left:9px;color:var(--accent);animation:caret 1.1s steps(1) infinite;}
/* Terminal cursor blinking after the case-page hero headline (sits inline after the
   text; the home hero uses block line-spans so its caret is the brand + status bar). */
[data-theme="systems"] .case h1::after,[data-theme="systems"] .about h1::after{content:'▋';color:var(--accent);font-size:.62em;line-height:1;margin-left:.14em;text-shadow:var(--glow);animation:caret 1.1s steps(1) infinite;}
/* Command-style brackets on the nav CTA → [ GET IN TOUCH ]. (.cta sits on the <li>) */
[data-theme="systems"] nav.top .cta a::before{content:'[ ';color:var(--accent);}
[data-theme="systems"] nav.top .cta a::after{content:' ]';color:var(--accent);}
@media(prefers-reduced-motion:reduce){[data-theme="systems"] .sysbar .sb-r::after,[data-theme="systems"] .case h1::after,[data-theme="systems"] .about h1::after{animation:none;}}