/* =====================================================================
   command-deck.css  —  Site-wide visual refinement.
   Layered AFTER existing styles. Additive only — does not remove or
   rewrite existing animations (Earth, stars, particles, data lines,
   binary). Tightens the visual language toward a control-console feel.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. REMOVE THE CARTOON HERO SCENERY
      The .castle-wrap SVG carries a cartoon moon, Saturn-style planet,
      castle silhouette, glowing windows, flags, antennae and a UFO.
      Hide them. Keep the SVG container so layout / spacing don't shift.
   --------------------------------------------------------------------- */
.castle-wrap .hero-moon,
.castle-wrap .hero-saturn,
.castle-wrap .hero-cityscape,
.castle-wrap .hero-ufo { display:none !important; }
.castle-wrap svg { filter:none !important; }
.castle-silhouette { filter:none !important; }

/* ---------------------------------------------------------------------
   2. REPLACE THE SKYLINE WITH A SUBTLE TOPOLOGY GRID
      The ground-fog area becomes faint horizontal scan-lines + a thin
      cyan rule along the bottom — a "deck floor" instead of a city.
   --------------------------------------------------------------------- */
.ground-fog{
  background:linear-gradient(to top, rgba(2,2,10,.92), rgba(2,2,10,.45) 55%, transparent) !important;
  height:46% !important;
}
.ground-fog::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(34,211,238,.05) 38px 39px),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(56,189,248,.04) 96px 97px);
  -webkit-mask:linear-gradient(to top,#000 25%,transparent 100%);
          mask:linear-gradient(to top,#000 25%,transparent 100%);
  opacity:.65;
}
.ground-fog::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent 4%,rgba(34,211,238,.4) 50%,transparent 96%);
}

/* Thin horizontal structure rule across the hero — anchors text */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:7%;height:1px;
  z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent 8%,rgba(56,189,248,.16) 50%,transparent 92%);
}

/* ---------------------------------------------------------------------
   3. COMMAND-DECK PANEL BEHIND HERO TEXT
      A subtle dark-glass panel + faint corner ticks. Anchors the title.
   --------------------------------------------------------------------- */
.hero-inner{position:relative}
.hero-inner::before{
  content:"";position:absolute;
  inset:-26px -28px -22px -28px;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,6,23,.55),rgba(2,6,23,.22));
  border:1px solid rgba(56,189,248,.10);
  border-radius:14px;
  -webkit-backdrop-filter:blur(6px) saturate(120%);
          backdrop-filter:blur(6px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(148,163,184,.06);
}
@media (max-width:720px){
  .hero-inner::before{inset:-14px -10px -16px -10px;border-radius:10px}
}

/* π marker docked above the hero panel — small system tag */
.hero-inner > .hero-name::before{
  content:"π · NODE";
  display:block;margin:0 auto 10px;
  padding:3px 10px;
  font:600 10px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--cyan);
  background:rgba(2,6,23,.7);
  border:1px solid rgba(56,189,248,.22);
  border-radius:999px;
  opacity:.85;
  width:max-content;
}

/* ---------------------------------------------------------------------
   4. TYPOGRAPHY — tighter, less glow, more precise
   --------------------------------------------------------------------- */
.hero-inner .title{
  filter:
    drop-shadow(0 1px 0 rgba(0,0,0,.5))
    drop-shadow(0 2px 6px rgba(0,0,0,.45)) !important;
  letter-spacing:-.028em !important;
}
.title-accent{
  filter:drop-shadow(0 1px 4px rgba(34,211,238,.25)) !important;
}
.page h1{text-shadow:0 1px 6px rgba(0,0,0,.45) !important}

/* ---------------------------------------------------------------------
   5. REDUCE GLOW ~50% ACROSS UI ELEMENTS
   --------------------------------------------------------------------- */
.nav{
  box-shadow:0 6px 22px rgba(0,0,0,.4),inset 0 0 10px rgba(34,211,238,.05) !important;
  border-color:rgba(34,211,238,.18) !important;
}
.nav .brand{
  box-shadow:0 0 8px rgba(34,211,238,.35),0 0 16px rgba(30,64,175,.22) !important;
}
.portrait-orb img{
  box-shadow:inset 0 0 30px rgba(0,0,0,.55),0 0 22px rgba(34,211,238,.18) !important;
}
.portrait-orb .ring{filter:blur(1px) !important}

.kingdom,.svc-card,.qa-card,.qa-quick,.tile,.callout,.related,.process-card,.hire-card{
  box-shadow:0 4px 14px rgba(0,0,0,.38) !important;
}
.kingdom:hover,.svc-card:hover,.tile:hover{
  box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 1px rgba(34,211,238,.25) !important;
}
.btn:hover{box-shadow:0 8px 20px rgba(34,211,238,.18) !important}
.btn.primary:hover{box-shadow:0 8px 22px rgba(34,211,238,.22) !important}

/* Aurora ribbon — pull intensity down */
body::after{opacity:.32 !important;filter:blur(80px) !important}

/* ---------------------------------------------------------------------
   6. PI (π) SECTION DIVIDERS — line · π · line
      Inserts a subtle separator before every chapter section after the
      first one. Box-drawing characters keep it CSS-only.
   --------------------------------------------------------------------- */
.chapter:not(:first-of-type)::before,
.page > section + section::before{
  content:"────────  π  ────────";
  display:block;text-align:center;
  font:500 11px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.22em;
  color:rgba(148,196,228,.45);
  margin:46px auto 28px;
  white-space:nowrap;overflow:hidden;
}
@media (max-width:560px){
  .chapter:not(:first-of-type)::before,
  .page > section + section::before{
    content:"───  π  ───";font-size:10px;margin:32px auto 20px;
  }
}

/* ---------------------------------------------------------------------
   7. PANEL / TILE EDGES — sharper, more "instrument"
      Thin top-edge highlight + tighter borders on cards.
   --------------------------------------------------------------------- */
.kingdom,.svc-card,.qa-card,.qa-quick,.tile,.process-card,.hire-card,.callout,.related{
  border-color:rgba(148,163,184,.16) !important;
  position:relative;
}
.kingdom::after,.svc-card::after,.qa-card::after,.qa-quick::after,
.tile::after,.process-card::after{
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(56,189,248,.35),transparent);
  pointer-events:none;opacity:.55;
}

/* Tiny π corner marker on card-style panels — subtle UI accent */
.kingdom > .glyph::after,
.svc-card > .svc-icon::after{
  content:"π";
  position:absolute;top:6px;right:8px;
  font:600 9px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.05em;color:var(--cyan);
  opacity:.35;transition:opacity .25s;
}
.kingdom:hover > .glyph::after,
.svc-card:hover > .svc-icon::after{opacity:.85}
.kingdom > .glyph,.svc-card > .svc-icon{position:relative}

/* ---------------------------------------------------------------------
   8. SCAN-LINE / GRID OVERLAY (very faint, fixed)
      A whisper of horizontal lines across the whole page. Keeps the
      console feel without obscuring the Earth or stars.
   --------------------------------------------------------------------- */
html::before{
  content:"";position:fixed;inset:0;z-index:-6;pointer-events:none;
  background:repeating-linear-gradient(0deg,
    transparent 0 3px,
    rgba(148,196,228,.022) 3px 4px);
  mix-blend-mode:screen;
  opacity:.6;
}

/* ---------------------------------------------------------------------
   9. SIDE-RAIL π MARKERS — anchors the page to the deck
      Two faint vertical rails with a π glyph midway. Hidden on mobile.
   --------------------------------------------------------------------- */
@media (min-width:1100px){
  body::before{ /* keep existing gradient body::before — do not touch */ }
  .page::before,
  .hero::before{
    content:"π";
    position:fixed;left:14px;top:50%;transform:translateY(-50%);
    font:600 11px/1 'Space Grotesk','Inter',sans-serif;
    letter-spacing:.2em;
    color:rgba(56,189,248,.4);
    writing-mode:vertical-rl;
    padding:8px 4px;
    border-left:1px solid rgba(56,189,248,.18);
    border-right:1px solid rgba(56,189,248,.06);
    pointer-events:none;z-index:3;
    opacity:.7;
  }
}

/* ---------------------------------------------------------------------
   10. HOVER PULSE on π markers and accent buttons
   --------------------------------------------------------------------- */
@keyframes piPulse{
  0%,100%{opacity:.5;text-shadow:0 0 0 transparent}
  50%{opacity:.95;text-shadow:0 0 6px rgba(56,189,248,.45)}
}
.kingdom:hover > .glyph::after,
.svc-card:hover > .svc-icon::after{animation:piPulse 1.6s ease-in-out infinite}

/* ---------------------------------------------------------------------
   11. NAV — slightly more "control panel"
   --------------------------------------------------------------------- */
.nav{
  background:rgba(6,12,28,.6) !important;
  border-radius:10px !important;
}
@media (max-width:760px){.nav{border-radius:999px !important}}

/* ---------------------------------------------------------------------
   12. FOOTER — tighten + add deck rule
   --------------------------------------------------------------------- */
footer.site-footer{
  border-top:1px solid rgba(56,189,248,.12) !important;
  background:linear-gradient(180deg,transparent,rgba(2,6,23,.4));
}
footer.site-footer::before{
  content:"────  π  ────";
  display:block;text-align:center;
  font:500 10px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.25em;color:rgba(56,189,248,.45);
  margin-bottom:30px;
}

/* =====================================================================
   PHASE 2 — MODULE / SYSTEM-INTERFACE LAYER
   Adds section role labels, panel module conversion (brackets, header
   bars, dot grid, meters), navigation control-strip styling, and
   micro-animations (scan lines, blinking nodes). All additive.
   ===================================================================== */

/* --------------------------------------------------------------------
   13. SECTION ROLE LABELS  (override the generic line·π·line divider
       on sections with known IDs so each gets a system tag instead).
   -------------------------------------------------------------------- */
#quick-answers.chapter:not(:first-of-type)::before,
#services.chapter:not(:first-of-type)::before,
#about.chapter:not(:first-of-type)::before,
#kingdoms.chapter:not(:first-of-type)::before,
#definitions.chapter:not(:first-of-type)::before,
#skills.chapter:not(:first-of-type)::before,
#contact.chapter:not(:first-of-type)::before,
section[id].chapter::before { content: none; }

section[id].chapter > .cd-seclabel,
.page > section[id] > .cd-seclabel{
  display:flex;align-items:center;gap:14px;
  max-width:1180px;margin:46px auto 24px;padding:7px 14px 7px 18px;
  font:600 10px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(170,210,235,.78);
  background:linear-gradient(90deg,rgba(11,18,32,.72),rgba(11,18,32,.18) 70%,transparent);
  border-left:2px solid var(--cyan);
  border-top:1px solid rgba(56,189,248,.16);
  position:relative;overflow:hidden;border-radius:0 6px 6px 0;
}
.cd-seclabel-id{color:var(--cyan);font-weight:700;letter-spacing:.32em}
.cd-seclabel-pi{color:var(--cyan);opacity:.85}
.cd-seclabel-dot{
  width:7px;height:7px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 6px var(--cyan);animation:cdDotBlink 2.6s ease-in-out infinite;
  flex-shrink:0;
}
.cd-seclabel-rule{
  flex:1;height:1px;
  background:linear-gradient(90deg,rgba(56,189,248,.5),transparent);
}
.cd-seclabel-status{
  font-size:9px;letter-spacing:.2em;color:rgba(170,210,235,.55);
  border:1px solid rgba(56,189,248,.22);padding:3px 8px;border-radius:3px;
}
@media(max-width:560px){
  section[id].chapter > .cd-seclabel,
  .page > section[id] > .cd-seclabel{font-size:9px;padding:6px 10px;letter-spacing:.2em;gap:8px;margin:28px auto 18px}
  .cd-seclabel-status{display:none}
}

/* --------------------------------------------------------------------
   14. PANEL MODULE — corner brackets + module header bar + dot grid
       Injected by command-deck.js into each card.
   -------------------------------------------------------------------- */
.kingdom,.svc-card,.qa-card,.qa-quick,.tile,.process-card,.hire-card,.callout{
  /* dot grid, very faint, sits under content */
  background-image:radial-gradient(rgba(56,189,248,.05) 1px,transparent 1px) !important;
  background-size:18px 18px !important;
  background-position:0 0 !important;
}
.kingdom,.svc-card,.qa-card,.qa-quick,.tile,.process-card{
  padding-top:30px !important;
}

.cd-bracket{
  position:absolute;width:12px;height:12px;pointer-events:none;
  opacity:.55;transition:opacity .3s,border-color .3s;z-index:2;
}
.cd-tl{top:0;left:0;border-top:1px solid var(--cyan);border-left:1px solid var(--cyan)}
.cd-tr{top:0;right:0;border-top:1px solid var(--cyan);border-right:1px solid var(--cyan)}
.cd-bl{bottom:0;left:0;border-bottom:1px solid var(--cyan);border-left:1px solid var(--cyan)}
.cd-br{bottom:0;right:0;border-bottom:1px solid var(--cyan);border-right:1px solid var(--cyan)}
.kingdom:hover .cd-bracket,
.svc-card:hover .cd-bracket,
.tile:hover .cd-bracket,
.qa-card:hover .cd-bracket,
.qa-quick:hover .cd-bracket{opacity:.95;border-color:var(--cyan)}

.cd-modhead{
  position:absolute;top:7px;left:14px;right:14px;height:14px;
  display:flex;align-items:center;gap:8px;pointer-events:none;z-index:2;
  font:600 9px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.22em;text-transform:uppercase;
  color:rgba(170,210,235,.55);
}
.cd-modhead .cd-mod-id{color:var(--cyan);font-weight:700}
.cd-modhead .cd-mod-rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(56,189,248,.32),transparent)}
.cd-modhead .cd-mod-stat{display:inline-flex;align-items:center;gap:6px}
.cd-mod-led{
  width:6px;height:6px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 5px var(--cyan);animation:cdDotBlink 2.4s ease-in-out infinite;
}
@keyframes cdDotBlink{0%,82%,100%{opacity:.45}40%{opacity:1}}

/* Meter / signal strip at bottom of cards */
.cd-meter{
  position:absolute;left:14px;right:14px;bottom:8px;height:10px;
  display:flex;align-items:flex-end;gap:3px;pointer-events:none;
  opacity:.65;z-index:2;
}
.cd-meter .cd-bar{
  flex:1;height:30%;background:rgba(56,189,248,.28);border-radius:1px;
  animation:cdBar 4.2s ease-in-out infinite;
}
.cd-meter .cd-bar:nth-child(1){animation-delay:0s}
.cd-meter .cd-bar:nth-child(2){animation-delay:.4s;background:rgba(56,189,248,.4)}
.cd-meter .cd-bar:nth-child(3){animation-delay:.9s;background:rgba(34,211,238,.5)}
.cd-meter .cd-bar:nth-child(4){animation-delay:1.4s;background:rgba(34,211,238,.35)}
.cd-meter .cd-bar:nth-child(5){animation-delay:2.0s;background:rgba(56,189,248,.28)}
.cd-meter .cd-pct{
  font:600 8px/1 'Space Grotesk','Inter',sans-serif;letter-spacing:.15em;
  color:rgba(170,210,235,.7);min-width:30px;text-align:right;
}

/* --------------------------------------------------------------------
   PANEL FLOAT — every card drifts a few px like it's in zero-g.
   Uses the standalone `translate:` property so hover `transform:` rules
   keep working without conflict.
   -------------------------------------------------------------------- */
/* Use transform: translate3d() — most reliable across browsers/caches.
   Hover transforms in inline CSS get superseded while the animation runs;
   we add the hover lift back via a separate translate: longhand below. */
@keyframes cdPanelFloatA{
  0%,100%{ transform: translate3d(0,0,0) }
  25%    { transform: translate3d(10px,-14px,0) }
  50%    { transform: translate3d(-7px,-7px,0) }
  75%    { transform: translate3d(-12px,10px,0) }
}
@keyframes cdPanelFloatB{
  0%,100%{ transform: translate3d(0,0,0) }
  33%    { transform: translate3d(-10px,12px,0) }
  66%    { transform: translate3d(13px,-10px,0) }
}
@keyframes cdPanelFloatC{
  0%,100%{ transform: translate3d(0,0,0) }
  20%    { transform: translate3d(8px,13px,0) }
  50%    { transform: translate3d(-13px,-8px,0) }
  80%    { transform: translate3d(11px,-12px,0) }
}
@keyframes cdPanelFloatD{
  0%,100%{ transform: translate3d(0,0,0) }
  30%    { transform: translate3d(-10px,-10px,0) }
  60%    { transform: translate3d(13px,8px,0) }
  85%    { transform: translate3d(-8px,13px,0) }
}
@keyframes cdPanelFloatE{
  0%,100%{ transform: translate3d(0,0,0) }
  40%    { transform: translate3d(11px,11px,0) }
  70%    { transform: translate3d(-13px,5px,0) }
}

.kingdom,.svc-card,.qa-card,.qa-quick,.tile,.process-card,.hire-card{
  animation: cdPanelFloatA 7s ease-in-out infinite !important;
  will-change: transform;
}
.kingdom:nth-child(2n),.svc-card:nth-child(2n),.qa-card:nth-child(2n),
.qa-quick:nth-child(2n),.tile:nth-child(2n),.process-card:nth-child(2n),
.hire-card:nth-child(2n){
  animation: cdPanelFloatB 8.5s ease-in-out infinite !important;
}
.kingdom:nth-child(3n),.svc-card:nth-child(3n),.qa-card:nth-child(3n),
.qa-quick:nth-child(3n),.tile:nth-child(3n),.process-card:nth-child(3n){
  animation: cdPanelFloatC 6s ease-in-out infinite !important;
}
.kingdom:nth-child(4n+1),.svc-card:nth-child(4n+1),.qa-card:nth-child(4n+1),
.qa-quick:nth-child(4n+1),.tile:nth-child(4n+1),.process-card:nth-child(4n+1){
  animation: cdPanelFloatD 9.5s ease-in-out infinite !important;
}
.kingdom:nth-child(5n+2),.svc-card:nth-child(5n+2),.qa-card:nth-child(5n+2),
.qa-quick:nth-child(5n+2),.tile:nth-child(5n+2),.process-card:nth-child(5n+2){
  animation: cdPanelFloatE 7.5s ease-in-out infinite !important;
}

/* Negative animation-delay so each card enters its loop at a random phase
   instead of every card at t=0 */
.kingdom:nth-child(2){animation-delay:-2.1s}
.kingdom:nth-child(3){animation-delay:-4.4s}
.kingdom:nth-child(4){animation-delay:-1.7s}
.kingdom:nth-child(5){animation-delay:-6.3s}
.svc-card:nth-child(2){animation-delay:-3.2s}
.svc-card:nth-child(3){animation-delay:-5.8s}
.svc-card:nth-child(4){animation-delay:-1.1s}
.svc-card:nth-child(5){animation-delay:-7.4s}
.svc-card:nth-child(6){animation-delay:-2.6s}
.svc-card:nth-child(7){animation-delay:-4.9s}
.qa-card:nth-child(2){animation-delay:-3.7s}
.qa-card:nth-child(3){animation-delay:-1.3s}
.qa-card:nth-child(4){animation-delay:-5.5s}
.qa-card:nth-child(5){animation-delay:-2.4s}
.qa-card:nth-child(6){animation-delay:-6.1s}
.qa-quick:nth-child(2){animation-delay:-4.2s}
.tile:nth-child(2){animation-delay:-3.8s}
.tile:nth-child(3){animation-delay:-1.5s}

/* Orbit-mode kingdoms are JS-positioned via `transform` every frame,
   which already includes its own gentle drift. Freeze the CSS float
   here so the two systems don't fight each other. */
.kingdoms.is-orbit .kingdom,
.kingdom.is-grabbing,
.kingdom.is-dropping{
  animation:none !important;
}

/* Mobile: keep cards still — they're stacked tight and motion would
   feel like jitter rather than zero-g drift */
@media (max-width:720px){
  .kingdom,.svc-card,.qa-card,.qa-quick,.tile,.process-card,.hire-card{
    animation:none !important;
  }
}
@media (prefers-reduced-motion: reduce){
  .kingdom,.svc-card,.qa-card,.qa-quick,.tile,.process-card,.hire-card{
    animation:none !important;
  }
}
@keyframes cdBar{
  0%,100%{height:25%}
  20%{height:65%}
  35%{height:40%}
  55%{height:90%}
  75%{height:50%}
}
.kingdom,.svc-card,.qa-card,.qa-quick,.tile,.process-card{padding-bottom:26px !important}

/* --------------------------------------------------------------------
   15. SLOW SCAN LINE across cards (sweep top → bottom, very subtle)
   -------------------------------------------------------------------- */
.kingdom,.svc-card,.qa-card,.qa-quick,.tile,.process-card{overflow:hidden}
.kingdom > .cd-scan,
.svc-card > .cd-scan,
.qa-card > .cd-scan,
.qa-quick > .cd-scan,
.tile > .cd-scan,
.process-card > .cd-scan{
  position:absolute;left:0;right:0;height:36px;pointer-events:none;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(56,189,248,.07) 45%,
    rgba(34,211,238,.16) 50%,
    rgba(56,189,248,.07) 55%,
    transparent 100%);
  animation:cdScan 7.5s linear infinite;
  mix-blend-mode:screen;z-index:1;
}
@keyframes cdScan{
  0%{top:-40px;opacity:0}
  10%{opacity:.7}
  90%{opacity:.7}
  100%{top:100%;opacity:0}
}
.kingdom:nth-child(2n) > .cd-scan{animation-delay:-2.5s}
.kingdom:nth-child(3n) > .cd-scan{animation-delay:-5s}
.svc-card:nth-child(2n) > .cd-scan{animation-delay:-3s}
.svc-card:nth-child(3n) > .cd-scan{animation-delay:-1.5s}

/* --------------------------------------------------------------------
   16. NAV — control-strip styling (segmented bg + active sweep)
   -------------------------------------------------------------------- */
.nav{
  background:
    linear-gradient(90deg,rgba(6,12,28,.78),rgba(6,12,28,.45)) !important;
  border:1px solid rgba(56,189,248,.22) !important;
  position:relative;overflow:hidden;
}
.nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,
    transparent 0 60px, rgba(56,189,248,.07) 60px 61px);
  opacity:.55;
}
.nav::after{
  content:"";position:absolute;top:0;left:-30%;width:30%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.18),transparent);
  animation:cdSweep 9s ease-in-out infinite;pointer-events:none;
}
@keyframes cdSweep{
  0%,100%{left:-30%;opacity:0}
  10%{opacity:.5}
  50%{left:100%;opacity:.5}
  60%{opacity:0}
}
.nav a.is-current,.nav a[aria-current="page"]{
  color:#fff !important;
  background:rgba(34,211,238,.08);
  border-radius:8px;
}

/* --------------------------------------------------------------------
   17. HERO — PRIMARY NODE strip (injected by JS as .cd-hero-strip)
   -------------------------------------------------------------------- */
.cd-hero-strip{
  position:absolute;top:78px;left:50%;transform:translateX(-50%);
  z-index:6;display:flex;align-items:center;gap:10px;
  padding:5px 14px;border-radius:0 4px 4px 0;
  font:700 9px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.32em;text-transform:uppercase;
  color:rgba(170,210,235,.85);
  background:linear-gradient(90deg,rgba(11,18,32,.85),rgba(11,18,32,.3));
  border-left:2px solid var(--cyan);
  border-top:1px solid rgba(56,189,248,.2);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;animation:cdFadeIn .9s ease 1s forwards;
}
.cd-hero-strip .cd-mod-led{margin-right:2px}
.cd-hero-strip .cd-pi{color:var(--cyan);font-weight:600;letter-spacing:.18em}
@keyframes cdFadeIn{to{opacity:.9}}
@media(max-width:720px){
  .cd-hero-strip{top:62px;font-size:8px;letter-spacing:.22em;padding:4px 10px;gap:6px}
}

/* --------------------------------------------------------------------
   18. π NODE PULSE — for hover targets
   -------------------------------------------------------------------- */
.kingdom > .glyph::after,
.svc-card > .svc-icon::after{
  width:12px;height:12px;line-height:12px;text-align:center;
  border:1px solid rgba(56,189,248,.3);border-radius:50%;
  background:rgba(2,6,23,.7);
  font-size:7.5px !important;
}
.kingdom:hover > .glyph::after,
.svc-card:hover > .svc-icon::after{
  animation:cdPiPulse 1.4s ease-in-out infinite;
  border-color:var(--cyan);
}
@keyframes cdPiPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.5),0 0 4px rgba(34,211,238,.4)}
  50%{box-shadow:0 0 0 5px rgba(34,211,238,0),0 0 8px rgba(34,211,238,.7)}
}

/* --------------------------------------------------------------------
   19. NUMBER TICK — flicker for animated digit elements
   -------------------------------------------------------------------- */
.cd-tick{font-variant-numeric:tabular-nums;color:var(--cyan);font-weight:600}

/* --------------------------------------------------------------------
   20. DATA-LINE FLICKER — soft, infrequent
   -------------------------------------------------------------------- */
@keyframes cdLineFlicker{
  0%,93%,100%{opacity:1}
  94%{opacity:.6}
  95%{opacity:1}
  96%{opacity:.4}
  97%{opacity:1}
}
.constellation svg line,.constellation svg path{
  animation:cdLineFlicker 6.5s ease-in-out infinite;
}

/* --------------------------------------------------------------------
   21. CONSTELLATION node pulse — fired by JS on data arrival
   -------------------------------------------------------------------- */
.constellation .star-node.cd-pulse{
  animation:cdNodePulse .9s ease-out;
}

/* =====================================================================
   HERO HEADLINE — boot sequence (no bounce, no overshoot)
   Each line powers on with a brief brightness surge that settles to
   normal. The chromeSheen on .title keeps running. The bouncy
   introBubbleTitle is overridden away.
   ===================================================================== */
.hero-inner .title{
  /* kill the rubber-band entrance, keep the chrome sheen running */
  animation: chromeSheen 7s linear 3.2s infinite !important;
  /* shrunk down — was clamp(2.4, 7.4vw, 5.4rem) originally */
  font-size: clamp(1.7rem, 4.8vw, 3.4rem) !important;
  line-height: 1.06 !important;
  position: relative;
}
/* The line itself just slides up + fades — the per-char flash does the work */
.hero-inner .title .cd-line{
  position:relative;display:block;
  opacity:0;
  transform:translateY(28px);
  animation: cdBootLine 1300ms cubic-bezier(.16,1,.3,1) both !important;
  will-change: opacity, transform;
}
/* Each line gets a base delay used by its child characters */
.hero-inner .title .cd-line-1{--cd-line-delay:750ms;  animation-delay:750ms  !important}
.hero-inner .title .cd-line-2{--cd-line-delay:1500ms; animation-delay:1500ms !important}
.hero-inner .title .cd-line-3{
  --cd-line-delay:2250ms;
  animation: cdBootLineAccent 1300ms cubic-bezier(.16,1,.3,1) 2250ms both !important;
}
.hero-inner .title .cd-line-4{--cd-line-delay:3000ms; animation-delay:3000ms !important}

/* Per-character flash — each letter pops bright, then settles */
.hero-inner .title .cd-char{
  display:inline-block;
  opacity:0;
  filter:brightness(0);
  animation: cdCharFlash 720ms cubic-bezier(.2,.85,.3,1) both;
  animation-delay: calc(var(--cd-line-delay, 0ms) + (var(--cd-char-i, 0) * 38ms));
  will-change: filter, opacity;
}
/* Accent line characters keep the cyan drop-shadow at rest */
.hero-inner .title .cd-line-3 .cd-char{
  animation-name: cdCharFlashAccent;
}

/* The location line reads as a sub-title — slightly smaller, looser */
.hero-inner .title .cd-line-loc{
  font-size:.62em;
  letter-spacing:.02em;
  opacity:0;
  font-weight:600;
  color:#dde7ff;
  -webkit-text-fill-color:#dde7ff;
  background:none;
  filter:brightness(0);
  margin-top:.18em;
}

/* Line: just slide-up + fade. Brightness/flash lives on the chars. */
@keyframes cdBootLine{
  0%   { opacity:0; transform:translateY(28px) }
  20%  { opacity:1 }
  100% { opacity:1; transform:translateY(0) }
}
@keyframes cdBootLineAccent{
  0%   { opacity:0; transform:translateY(28px) }
  20%  { opacity:1 }
  100% { opacity:1; transform:translateY(0) }
}

/* Per-character: brief darkness, then HUGE flash, then settle to halo.
   Two opacity flickers in the early phase read as a CRT power-on. */
@keyframes cdCharFlash{
  0%   { opacity:0; filter:brightness(0)
         drop-shadow(0 0 0 rgba(34,211,238,0)) }
  6%   { opacity:1; filter:brightness(4.5)
         drop-shadow(0 0 26px rgba(255,255,255,.95))
         drop-shadow(0 0 12px rgba(34,211,238,1)) }
  12%  { opacity:.4 }                        /* flicker */
  20%  { opacity:1; filter:brightness(3)
         drop-shadow(0 0 18px rgba(34,211,238,.85)) }
  32%  { opacity:.6 }                        /* second flicker */
  44%  { opacity:1; filter:brightness(2)
         drop-shadow(0 0 12px rgba(34,211,238,.55)) }
  100% { opacity:1; filter:brightness(1)
         drop-shadow(0 0 4px rgba(34,211,238,.18)) }
}
/* Accent line keeps a stronger cyan halo at rest */
@keyframes cdCharFlashAccent{
  0%   { opacity:0; filter:brightness(0)
         drop-shadow(0 0 0 rgba(34,211,238,0)) }
  6%   { opacity:1; filter:brightness(4.8)
         drop-shadow(0 0 28px rgba(255,255,255,1))
         drop-shadow(0 0 14px rgba(34,211,238,1)) }
  12%  { opacity:.4 }
  20%  { opacity:1; filter:brightness(3.2)
         drop-shadow(0 0 22px rgba(34,211,238,.95)) }
  32%  { opacity:.6 }
  44%  { opacity:1; filter:brightness(2.2)
         drop-shadow(0 0 14px rgba(34,211,238,.7)) }
  100% { opacity:1; filter:brightness(1)
         drop-shadow(0 2px 10px rgba(34,211,238,.5)) }
}

/* Single fast scan sweep across the headline after lines settle */
.hero-inner .title .cd-title-scan{
  position:absolute;left:-2%;right:-2%;height:18px;pointer-events:none;
  top:-22px;opacity:0;display:block;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(56,189,248,.22) 38%,
    rgba(255,255,255,.6) 50%,
    rgba(56,189,248,.22) 62%,
    transparent 100%);
  mix-blend-mode:screen;filter:blur(.6px);
  /* fires once, after line 4's last character lands (~3000 + ~25 chars * 38ms + 720ms ≈ 4670ms) */
  animation:cdTitleScan 700ms cubic-bezier(.4,0,.6,1) 4700ms both;
}
@keyframes cdTitleScan{
  0%   { top:-22px;  opacity:0 }
  20%  { opacity:1 }
  100% { top:104%;   opacity:0 }
}

/* Reduced motion — opacity-only, no surge */
@media (prefers-reduced-motion: reduce){
  .hero-inner .title .cd-line{
    animation:cdBootLineRM .35s ease-out both;
    filter:none;transform:none;
  }
  .hero-inner .title .cd-title-scan{display:none}
}
@keyframes cdBootLineRM{from{opacity:0}to{opacity:1}}

/* Visually hidden, still in accessibility tree */
.cd-sr-only{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* =====================================================================
   SHORT BIO PANEL  (sits directly under hero, above quick-answers)
   ===================================================================== */
.cd-shortbio{
  position:relative;z-index:3;
  padding:8px 20px 0;margin:-12px auto 0;
  max-width:920px;
}
.cd-shortbio-inner{
  position:relative;
  padding:18px 22px 16px;
  background:linear-gradient(180deg,rgba(11,18,32,.6),rgba(11,18,32,.32));
  border:1px solid rgba(56,189,248,.16);
  border-left:2px solid var(--cyan);
  border-radius:0 8px 8px 0;
  -webkit-backdrop-filter:blur(10px) saturate(140%);
          backdrop-filter:blur(10px) saturate(140%);
  box-shadow:0 6px 22px rgba(0,0,0,.35);
}
.cd-shortbio-inner::before,
.cd-shortbio-inner::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border-color:rgba(56,189,248,.55);
}
.cd-shortbio-inner::before{top:0;right:0;border-top:1px solid;border-right:1px solid}
.cd-shortbio-inner::after {bottom:0;right:0;border-bottom:1px solid;border-right:1px solid}

.cd-shortbio-head{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
  font:600 9.5px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(170,210,235,.65);
}
.cd-shortbio-id{color:var(--cyan);font-weight:700}
.cd-shortbio-rule{flex:1;height:1px;
  background:linear-gradient(90deg,rgba(56,189,248,.4),transparent);}
.cd-shortbio-stat{
  font-size:9px;color:rgba(170,210,235,.55);
  border:1px solid rgba(56,189,248,.22);padding:3px 8px;border-radius:3px;
}
.cd-shortbio p{
  margin:0 0 8px;font-size:.96rem;line-height:1.65;color:#dde7ff;
}
.cd-shortbio p:last-child{margin-bottom:0}
@media (max-width:720px){
  .cd-shortbio{padding:8px 14px 0;margin-top:-8px}
  .cd-shortbio-inner{padding:14px 16px 12px}
  .cd-shortbio p{font-size:.92rem}
  .cd-shortbio-stat{display:none}
}

/* =====================================================================
   STORY TIMELINE  (#about long bio — left rail + π nodes + section labels)
   ===================================================================== */
/* Wrap the entire bio body in a stronger module panel so the story reads
   as a credibility section, not loose supporting copy. */
.cd-bio{
  position:relative;
  padding:30px 34px 32px;
  background:linear-gradient(180deg,rgba(11,18,32,.66),rgba(11,18,32,.42));
  border:1px solid rgba(56,189,248,.2);
  border-left:2px solid var(--cyan);
  border-radius:0 14px 14px 0;
  -webkit-backdrop-filter:blur(12px) saturate(140%);
          backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 12px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(148,163,184,.06);
}
.cd-bio::before,.cd-bio::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;
  border-color:rgba(56,189,248,.55);
}
.cd-bio::before{top:0;right:0;border-top:1px solid;border-right:1px solid}
.cd-bio::after {bottom:0;right:0;border-bottom:1px solid;border-right:1px solid}

/* Bio header — clear visual title above the timeline */
.cd-bio-header{
  margin:0 0 26px;padding-bottom:18px;
  border-bottom:1px solid rgba(56,189,248,.18);
}
.cd-bio-eyebrow{
  display:inline-block;
  font:700 10px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:10px;opacity:.9;
}
.cd-bio-head{
  font:700 clamp(1.6rem,3.2vw,2.1rem)/1.15 'Space Grotesk','Inter',sans-serif !important;
  letter-spacing:-.015em;
  color:#fff !important;margin:0 0 12px !important;
  background:linear-gradient(90deg,#fff 0%,#dbe6f5 60%,var(--cyan) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
}
.cd-bio-intro{
  margin:0 !important;font-size:1.04rem !important;line-height:1.75 !important;
  color:#dde7ff !important;
  font-style:italic;
  border-left:2px solid rgba(56,189,248,.4);
  padding-left:14px;
}

.cd-bio .cd-timeline{
  list-style:none;margin:0 0 8px;padding:0 0 0 32px;
  position:relative;
}
/* left progression rail */
.cd-bio .cd-timeline::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(56,189,248,.45) 6%,
    rgba(56,189,248,.18) 92%,
    transparent 100%);
}
.cd-bio .cd-tl-item{
  position:relative;padding:0 0 30px 6px;margin:0;
}
.cd-bio .cd-tl-item + .cd-tl-item{padding-top:6px}
.cd-bio .cd-tl-item:last-child{padding-bottom:0}

/* π node marker on the rail */
.cd-bio .cd-tl-item::before{
  content:"π";
  position:absolute;left:-32px;top:14px;
  width:22px;height:22px;border-radius:50%;
  display:grid;place-items:center;
  font:700 11px/1 'Space Grotesk','Inter',sans-serif;
  color:var(--cyan);
  background:rgba(2,6,23,.95);
  border:1px solid var(--cyan);
  box-shadow:0 0 0 3px rgba(2,6,23,.85),0 0 8px rgba(34,211,238,.5);
}
.cd-bio .cd-tl-item::after{
  content:"";position:absolute;left:-22px;top:25px;width:22px;height:1px;
  background:linear-gradient(90deg,rgba(56,189,248,.6),transparent);
  pointer-events:none;
}

.cd-bio .cd-tl-tag{
  display:inline-block;
  font:700 9px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.32em;color:var(--cyan);
  margin-bottom:4px;opacity:.75;
}
.cd-bio .cd-tl-label{
  font:700 14.5px/1.2 'Space Grotesk','Inter',sans-serif !important;
  letter-spacing:.2em;text-transform:uppercase;
  color:#fff !important;margin:0 0 12px !important;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px;
  text-shadow:0 0 12px rgba(34,211,238,.15);
}
.cd-bio .cd-tl-when{
  font-weight:500;font-size:10px;letter-spacing:.22em;
  color:var(--cyan);opacity:.85;
}
.cd-bio .cd-tl-item p{
  margin:0 0 10px;font-size:1.05rem;line-height:1.78;color:#e8eef9;
}
.cd-bio .cd-tl-item p:last-child{margin-bottom:0}
.cd-bio .cd-tl-item a{color:var(--cyan);border-bottom:1px solid rgba(34,211,238,.3)}
.cd-bio .cd-tl-item a:hover{color:#fff;border-bottom-color:#fff}
.cd-bio .cd-tl-item:hover::before{
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(2,6,23,.85),0 0 10px rgba(34,211,238,.6);
}

/* Quick reference card under the timeline */
.cd-bio-quickref{
  margin-top:24px;padding:18px 20px;
  background:linear-gradient(160deg,rgba(34,211,238,.07),rgba(30,64,175,.04));
  border:1px solid var(--panel-line);border-left:2px solid var(--cyan);
  border-radius:0 10px 10px 0;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.cd-bio-quickref .cd-bio-quickref-tag{
  font:600 10px/1 'Space Grotesk','Inter',sans-serif !important;
  letter-spacing:.22em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 10px !important;
}
.cd-bio-quickref p:last-child{
  margin:0 !important;font-size:1rem;line-height:1.75;
}

/* Tighten the about-grid slightly so text aligns closer to image */
@media (min-width:861px){
  #about .about-grid{gap:42px;align-items:start}
  #about .about-visual{position:sticky;top:90px}
}
@media (max-width:720px){
  .cd-bio{padding:22px 18px 22px 22px;border-radius:0 10px 10px 0}
  .cd-bio-head{font-size:1.5rem !important}
  .cd-bio-intro{font-size:.98rem !important}
  .cd-bio .cd-timeline{padding-left:26px}
  .cd-bio .cd-tl-item{padding-bottom:24px}
  .cd-bio .cd-tl-item::before{left:-26px;width:18px;height:18px;font-size:10px;top:10px}
  .cd-bio .cd-tl-item::after{left:-19px;top:19px;width:14px}
  .cd-bio .cd-tl-label{font-size:12.5px !important;letter-spacing:.16em}
  .cd-bio .cd-tl-item p{font-size:1rem}
}

/* --------------------------------------------------------------------
   FLOATING SKILL PILLS — gentle organic drift around their anchor
   Layers on top of the existing `twinkle` animation. Inline
   animation-delay on each node gives each pill its own phase.
   -------------------------------------------------------------------- */
.constellation .star-node{
  animation:twinkle 4s ease-in-out infinite, cdFloat 9s ease-in-out infinite;
}
@keyframes cdFloat{
  0%,100% { transform: translate(-50%, -50%) }
  20%     { transform: translate(calc(-50% + 18px), calc(-50% - 22px)) }
  40%     { transform: translate(calc(-50% - 20px), calc(-50% - 10px)) }
  60%     { transform: translate(calc(-50% - 14px), calc(-50% + 20px)) }
  80%     { transform: translate(calc(-50% + 22px), calc(-50% + 14px)) }
}
/* Each pill picks its own rhythm so the cluster feels alive, not in lockstep */
.constellation .star-node:nth-of-type(2n)  {animation-duration:4s, 11.5s}
.constellation .star-node:nth-of-type(3n)  {animation-duration:4s, 8s}
.constellation .star-node:nth-of-type(4n+1){animation-duration:4s, 13s}
.constellation .star-node:nth-of-type(5n+2){animation-duration:4s, 10s}
.constellation .star-node:nth-of-type(7n+3){animation-duration:4s, 7s}

/* Pause the drift on hover / active so the scale-up reads cleanly */
.constellation .star-node:hover,
.constellation .star-node.is-active{
  animation-name: twinkle;
}
@media (prefers-reduced-motion: reduce){
  .constellation .star-node{animation:twinkle 4s ease-in-out infinite}
}
@keyframes cdNodePulse{
  0%  {box-shadow:0 0 0 0 rgba(34,211,238,.6),0 0 8px rgba(34,211,238,.6)}
  60% {box-shadow:0 0 0 14px rgba(34,211,238,0),0 0 16px rgba(34,211,238,.5)}
  100%{box-shadow:0 0 0 18px rgba(34,211,238,0),0 0 6px rgba(34,211,238,.3)}
}

/* =====================================================================
   PHASE 3 — Live bridge-style telemetry & feedback
   Adds: live stardate readout, telemetry corner pip, footer status bar,
   hover-activation feedback on cards, LED variant blinks. Restrained.
   ===================================================================== */

/* --------------------------------------------------------------------
   22. HERO STRIP — make room for live stardate field
   -------------------------------------------------------------------- */
.cd-hero-strip .cd-stardate{
  color:var(--cyan);font-weight:700;letter-spacing:.18em;
  font-variant-numeric:tabular-nums;
}
.cd-hero-strip .cd-sep{color:rgba(170,210,235,.4);margin:0 2px}

/* --------------------------------------------------------------------
   23. TELEMETRY DOCK — subtle bottom-right system pip
   -------------------------------------------------------------------- */
.cd-telemetry{
  position:fixed;right:14px;bottom:14px;z-index:90;
  display:flex;flex-direction:column;gap:4px;
  padding:8px 12px 9px;
  font:600 9px/1.35 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.18em;text-transform:uppercase;
  color:rgba(170,210,235,.7);
  background:linear-gradient(180deg,rgba(2,6,23,.78),rgba(2,6,23,.55));
  border:1px solid rgba(56,189,248,.22);
  border-left:2px solid var(--cyan);
  border-radius:0 6px 6px 0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  pointer-events:none;
  opacity:0;animation:cdFadeIn 1s ease 1.2s forwards;
}
.cd-telemetry .cd-tm-row{display:flex;justify-content:space-between;gap:14px;align-items:center}
.cd-telemetry .cd-tm-k{color:rgba(170,210,235,.5);font-weight:500}
.cd-telemetry .cd-tm-v{color:var(--cyan);font-variant-numeric:tabular-nums;letter-spacing:.12em}
.cd-telemetry .cd-tm-led{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 5px var(--cyan);margin-right:6px;
  animation:cdDotBlink 2.6s ease-in-out infinite;vertical-align:middle;
}
.cd-telemetry .cd-tm-rule{height:1px;margin:2px 0;
  background:linear-gradient(90deg,rgba(56,189,248,.35),transparent);}
@media(max-width:760px){.cd-telemetry{display:none}}

/* --------------------------------------------------------------------
   24. FOOTER SYSTEM STATUS BAR — sits ABOVE main footer
   -------------------------------------------------------------------- */
.cd-statusbar{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:24px;padding:10px 18px;margin:60px auto 0;max-width:1180px;
  font:600 9.5px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(170,210,235,.6);
  border-top:1px solid rgba(56,189,248,.16);
  border-bottom:1px solid rgba(56,189,248,.08);
  background:linear-gradient(90deg,transparent,rgba(11,18,32,.4),transparent);
}
.cd-statusbar .cd-sb-cell{display:inline-flex;align-items:center;gap:8px}
.cd-statusbar .cd-mod-led{box-shadow:0 0 5px var(--cyan)}
.cd-statusbar .cd-sb-v{color:var(--cyan);font-weight:700;font-variant-numeric:tabular-nums}
@media(max-width:560px){
  .cd-statusbar{gap:14px;font-size:8.5px;letter-spacing:.18em;padding:8px 12px}
}

/* --------------------------------------------------------------------
   25. HOVER ACTIVATION — feels like activating a panel
   -------------------------------------------------------------------- */
.kingdom:hover,.svc-card:hover,.qa-card:hover,.qa-quick:hover,
.tile:hover,.process-card:hover{
  border-color:rgba(34,211,238,.45) !important;
}
.kingdom:hover .cd-modhead .cd-mod-id,
.svc-card:hover .cd-modhead .cd-mod-id,
.qa-card:hover .cd-modhead .cd-mod-id,
.qa-quick:hover .cd-modhead .cd-mod-id,
.tile:hover .cd-modhead .cd-mod-id,
.process-card:hover .cd-modhead .cd-mod-id{
  color:#fff;text-shadow:0 0 6px rgba(34,211,238,.6);
}
.kingdom:hover .cd-mod-led,
.svc-card:hover .cd-mod-led,
.qa-card:hover .cd-mod-led,
.qa-quick:hover .cd-mod-led,
.tile:hover .cd-mod-led,
.process-card:hover .cd-mod-led{
  animation:cdLedFast .55s ease-in-out infinite;
}
@keyframes cdLedFast{50%{opacity:.3;box-shadow:0 0 8px var(--cyan)}}

/* One-shot ACK pulse on first hover (added/removed by JS) */
.cd-ack > .cd-bracket{animation:cdBracketAck .55s ease-out}
@keyframes cdBracketAck{
  0%  {box-shadow:0 0 0 0 rgba(34,211,238,.5)}
  60% {box-shadow:0 0 4px 4px rgba(34,211,238,0)}
  100%{box-shadow:none}
}

/* --------------------------------------------------------------------
   26. LED VARIANT BLINK RATES — subtle module differentiation
   -------------------------------------------------------------------- */
.svc-card .cd-mod-led       {animation-duration:2.1s}
.kingdom .cd-mod-led        {animation-duration:3.0s}
.qa-card .cd-mod-led,
.qa-quick .cd-mod-led       {animation-duration:2.7s}
.process-card .cd-mod-led   {animation-duration:1.8s}
.tile .cd-mod-led           {animation-duration:3.4s}

/* --------------------------------------------------------------------
   27. SCROLL PROGRESS RAIL — tiny vertical fill on right edge
       Functional, not decorative: shows reading progress.
   -------------------------------------------------------------------- */
.cd-scrollrail{
  position:fixed;top:0;right:0;width:2px;height:100vh;z-index:80;
  background:rgba(56,189,248,.06);pointer-events:none;
}
.cd-scrollrail-fill{
  position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(180deg,var(--cyan),rgba(56,189,248,.4));
  box-shadow:0 0 6px rgba(34,211,238,.5);
  transition:height .12s linear;
}
@media(max-width:560px){.cd-scrollrail{display:none}}

/* =====================================================================
   PHASE 4 — Wide-screen outward expansion (1600px+)
   Side rails, edge HUD, background rings, and grid connectors. All
   layered around the existing center content; layout is untouched.
   ===================================================================== */

/* --------------------------------------------------------------------
   28. SIDE RAIL PANELS — only on very wide screens
   -------------------------------------------------------------------- */
/* Scaling tokens — drive rail width, padding, font-size, page gutters */
:root{
  --cd-side-w: 168px;
  --cd-side-fs: 9px;
  --cd-side-pad: 14px;
  --cd-side-gap: 14px;
  --cd-page-gutter: 200px;
  --cd-hud-edge: 14px;
}
@media (min-width:1800px){
  :root{
    --cd-side-w: 196px; --cd-side-fs: 9.5px; --cd-side-pad: 16px;
    --cd-page-gutter: 230px; --cd-hud-edge: 16px;
  }
}
@media (min-width:2200px){
  :root{
    --cd-side-w: 240px; --cd-side-fs: 10.5px; --cd-side-pad: 18px;
    --cd-side-gap: 18px;
    --cd-page-gutter: 280px; --cd-hud-edge: 20px;
  }
}
@media (min-width:2600px){
  :root{
    --cd-side-w: 300px; --cd-side-fs: 12px; --cd-side-pad: 22px;
    --cd-side-gap: 22px;
    --cd-page-gutter: 350px; --cd-hud-edge: 26px;
  }
}
@media (min-width:3200px){
  :root{
    --cd-side-w: 380px; --cd-side-fs: 13.5px; --cd-side-pad: 26px;
    --cd-side-gap: 26px;
    --cd-page-gutter: 440px; --cd-hud-edge: 32px;
  }
}

.cd-side{display:none}
@media (min-width:1600px){
  .cd-side{
    display:flex;flex-direction:column;gap:var(--cd-side-gap);
    position:fixed;top:96px;bottom:96px;
    width:var(--cd-side-w);z-index:70;
    padding:var(--cd-side-pad) calc(var(--cd-side-pad) - 2px);
    font:600 var(--cd-side-fs)/1.4 'Space Grotesk','Inter',sans-serif;
    letter-spacing:.18em;text-transform:uppercase;
    color:rgba(170,210,235,.62);
    background:linear-gradient(180deg,rgba(2,6,23,.65),rgba(2,6,23,.42));
    border:1px solid rgba(56,189,248,.16);
    border-radius:6px;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    box-shadow:0 8px 24px rgba(0,0,0,.4);
    pointer-events:none; /* never blocks center content */
    overflow:hidden;
    opacity:0;animation:cdFadeIn 1.2s ease 1.4s forwards;
  }
  .cd-side-l{left:var(--cd-hud-edge);border-left:2px solid var(--cyan)}
  .cd-side-r{right:var(--cd-hud-edge);border-right:2px solid var(--cyan);text-align:right}

  /* corner brackets on the rails */
  .cd-side::before,.cd-side::after{
    content:"";position:absolute;width:14px;height:14px;pointer-events:none;
    border-color:rgba(56,189,248,.55);
  }
  .cd-side-l::before{top:0;right:0;border-top:1px solid;border-right:1px solid}
  .cd-side-l::after {bottom:0;right:0;border-bottom:1px solid;border-right:1px solid}
  .cd-side-r::before{top:0;left:0;border-top:1px solid;border-left:1px solid}
  .cd-side-r::after {bottom:0;left:0;border-bottom:1px solid;border-left:1px solid}

  /* Telemetry dock conflicts with right rail at this width — hide it */
  .cd-telemetry{display:none !important}
}

.cd-side h4{
  font:700 9px/1 'Space Grotesk','Inter',sans-serif;letter-spacing:.32em;
  text-transform:uppercase;color:var(--cyan);
  display:flex;align-items:center;gap:8px;
  padding:0 0 6px;margin:0;border-bottom:1px solid rgba(56,189,248,.18);
}
.cd-side-r h4{flex-direction:row-reverse;text-align:right}
.cd-side h4 .cd-mod-led{box-shadow:0 0 4px var(--cyan)}
.cd-side section{
  display:flex;flex-direction:column;gap:5px;
  padding:8px 0 10px;border-bottom:1px dashed rgba(56,189,248,.08);
}
.cd-side section:last-child{border-bottom:0}
.cd-side .cd-row{display:flex;justify-content:space-between;align-items:center;gap:10px}
.cd-side-r .cd-row{flex-direction:row-reverse}
.cd-side .cd-k{color:rgba(170,210,235,.5);font-weight:500}
.cd-side .cd-v{color:var(--cyan);font-variant-numeric:tabular-nums;letter-spacing:.1em}

/* sparkline */
.cd-sparkline{width:100%;height:34px;display:block}
.cd-sparkline polyline{fill:none;stroke:var(--cyan);stroke-width:1.2;
  filter:drop-shadow(0 0 3px rgba(34,211,238,.5));}
.cd-sparkline .grid{stroke:rgba(56,189,248,.12);stroke-width:.5}

/* node list */
.cd-nodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:4px}
.cd-side-r .cd-nodes{direction:rtl}
.cd-nodes li{
  display:flex;align-items:center;gap:6px;
  padding:3px 6px;font-size:8.5px;letter-spacing:.16em;
  background:rgba(56,189,248,.05);border:1px solid rgba(56,189,248,.12);border-radius:3px;
  color:rgba(170,210,235,.7);
}
.cd-nodes li::before{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 4px var(--cyan);flex-shrink:0;
  animation:cdDotBlink 2.6s ease-in-out infinite;
}
.cd-nodes li:nth-child(2n)::before{animation-delay:-.7s}
.cd-nodes li:nth-child(3n)::before{animation-delay:-1.4s}
.cd-nodes li:nth-child(5n)::before{animation-duration:3.4s}

/* signal bar set */
.cd-sig{display:flex;align-items:flex-end;gap:3px;height:18px}
.cd-sig span{flex:1;background:rgba(56,189,248,.25);border-radius:1px;
  animation:cdBar 4.2s ease-in-out infinite;}
.cd-sig span:nth-child(1){animation-delay:-.4s;height:30%}
.cd-sig span:nth-child(2){animation-delay:-1.2s;height:55%;background:rgba(56,189,248,.4)}
.cd-sig span:nth-child(3){animation-delay:-2.0s;height:70%;background:rgba(34,211,238,.55)}
.cd-sig span:nth-child(4){animation-delay:-2.8s;height:85%;background:rgba(34,211,238,.45)}
.cd-sig span:nth-child(5){animation-delay:-3.6s;height:60%;background:rgba(56,189,248,.3)}

/* log feed */
.cd-log{
  display:block;font:500 8.5px/1.5 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.08em;color:rgba(170,210,235,.55);
  height:84px;overflow:hidden;position:relative;
  text-transform:none;
}
.cd-log .cd-log-line{padding:1px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cd-log .cd-log-line:first-child{color:var(--cyan)}
.cd-log .cd-log-line .cd-t{color:rgba(56,189,248,.7);margin-right:6px}

/* --------------------------------------------------------------------
   29. EDGE HUD — corner markers (1280px+)
   -------------------------------------------------------------------- */
.cd-hud{display:none;position:fixed;z-index:75;pointer-events:none;
  font:700 9px/1 'Space Grotesk','Inter',sans-serif;
  letter-spacing:.28em;text-transform:uppercase;
  color:rgba(170,210,235,.55);
}
.cd-hud .cd-hud-pi{color:var(--cyan)}
.cd-hud-tl{top:14px;left:14px}
.cd-hud-tr{top:14px;right:18px}
.cd-hud-bl{bottom:14px;left:14px}
.cd-hud-br{bottom:14px;right:18px}
@media (min-width:1280px){.cd-hud{display:block}}
@media (min-width:1600px){
  .cd-hud-tl,.cd-hud-bl{left:calc(var(--cd-side-w) + var(--cd-hud-edge) + 16px)}
  .cd-hud-tr,.cd-hud-br{right:calc(var(--cd-side-w) + var(--cd-hud-edge) + 16px)}
}

/* --------------------------------------------------------------------
   30. BACKGROUND TARGETING RINGS + SLOW ARCS  (very faint)
       Sits above body::after aurora, below stars canvas.
   -------------------------------------------------------------------- */
.cd-bgring{
  position:fixed;inset:0;z-index:-7;pointer-events:none;overflow:hidden;
  opacity:.55;
}
.cd-bgring svg{position:absolute;width:100%;height:100%}
.cd-bgring .ring{fill:none;stroke:rgba(56,189,248,.06);stroke-width:1}
.cd-bgring .ring-tick{fill:none;stroke:rgba(56,189,248,.1);stroke-width:.5;
  stroke-dasharray:2 6}
.cd-bgring .arc{fill:none;stroke:rgba(34,211,238,.08);stroke-width:1;
  stroke-dasharray:6 4}
.cd-bgring .ring-rot{transform-origin:center;animation:spin 200s linear infinite}
.cd-bgring .ring-rot-rev{transform-origin:center;animation:spin 280s linear infinite reverse}
@media(max-width:560px){.cd-bgring{display:none}}

/* --------------------------------------------------------------------
   31. KINGDOMS / SERVICES — subtle connector grid behind cards
   -------------------------------------------------------------------- */
@media (min-width:1100px){
  .kingdoms,.services-grid{position:relative}
  .kingdoms::before,.services-grid::before{
    content:"";position:absolute;inset:-12px;z-index:0;pointer-events:none;
    background:
      linear-gradient(90deg,transparent,rgba(56,189,248,.16),transparent) 0 50%/100% 1px no-repeat,
      linear-gradient(0deg,transparent,rgba(56,189,248,.12),transparent) 50% 0/1px 100% no-repeat;
    opacity:.6;
  }
  .kingdoms > *,.services-grid > *{position:relative;z-index:1}
}

/* --------------------------------------------------------------------
   32. ALLOW CONTENT BREATHING ROOM ON ULTRAWIDE
       Bumps the wraps that don't have inline max-width caps.
   -------------------------------------------------------------------- */
/* Scale page chrome with viewport — gutters expand so center has breathing
   room beside the rails. Mobile / standard desktops untouched. */
@media (min-width:1600px){
  .page{padding-left:var(--cd-page-gutter);padding-right:var(--cd-page-gutter)}
  .nav{max-width:calc(100vw - (var(--cd-page-gutter) * 2))}
  .page-wrap{max-width:calc(100vw - (var(--cd-page-gutter) * 2) - 80px)}
  .page-wrap.wide{max-width:calc(100vw - (var(--cd-page-gutter) * 2))}
  .hero-inner{max-width:calc(100vw - (var(--cd-page-gutter) * 2) - 60px)}
}
@media (min-width:2200px){
  /* Gentle base font bump so the whole site reads bigger on giant displays */
  html{font-size:17px}
}
@media (min-width:2600px){
  html{font-size:18.5px}
}
@media (min-width:3200px){
  html{font-size:20px}
}