/* ============================================================
   TOKENS
   Palette encodes ownership:
   brass     = infrastructure you built and control
   verdigris = a surface you borrowed and wear
   steel     = upstream compute you rent
   orchid    = reserved for one thing: the routing decision
   ============================================================ */
:root{
  --ink:#080C16;
  --surface:#0E1424;
  --surface-2:#141C30;
  --brass:#E0A344;
  --verdigris:#55B9A6;
  --steel:#8FADD0;
  --orchid:#C471E5;
  --text:#E6EAF2;
  --muted:#78879F;
  --dim:#4E5B72;
  --rule:rgba(143,173,208,.14);
  --rule-strong:rgba(143,173,208,.26);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --rail:92px;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--body);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
  user-select:none;
  touch-action:none;
}
/* ambient: faint engineering grid + atmospheric wash */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(143,173,208,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(143,173,208,.055) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 0%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 60% at 50% 20%,#000 0%,transparent 78%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 620px at 12% -8%, rgba(224,163,68,.10), transparent 62%),
    radial-gradient(760px 560px at 92% 6%, rgba(85,185,166,.07), transparent 60%),
    radial-gradient(1000px 800px at 50% 108%, rgba(143,173,208,.07), transparent 62%);
}
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ============================================================ TYPE */
.h-display{font-family:var(--display);font-stretch:125%;font-weight:800;line-height:.98;letter-spacing:-.025em;margin:0}
.mono{font-family:var(--mono)}

/* ============================================================ HERO */
.hero{padding:96px 0 20px;position:relative}
.hero__mark{display:flex;align-items:center;gap:12px;margin-bottom:56px}
.hero__glyph{width:26px;height:26px;flex:none;border:1.5px solid var(--brass);position:relative}
.hero__glyph::after{content:"";position:absolute;left:50%;top:-9px;bottom:-9px;width:1.5px;background:var(--brass);transform:translateX(-50%)}
.hero__wordmark{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.28em;text-transform:uppercase}
.hero__head{font-size:clamp(38px,6.4vw,84px);max-width:16ch;margin-bottom:26px}
.hero__head em{font-style:normal;color:var(--brass)}
.hero__sub{max-width:56ch;font-size:clamp(16px,1.35vw,18.5px);color:#B7C2D6;margin:0 0 52px}

.redirect{border:1px solid var(--rule-strong);background:linear-gradient(180deg,rgba(20,28,48,.9),rgba(14,20,36,.7));padding:30px 32px;max-width:820px}
.redirect__label{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.redirect__row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:clamp(12px,1.35vw,15px)}
.redirect__row + .redirect__row{margin-top:12px}
.redirect__key{color:var(--muted);flex:none}
.redirect__val--old{color:var(--dim);text-decoration:line-through;text-decoration-thickness:1px}
.redirect__val--new{color:var(--brass);font-weight:600}
.redirect__arrow{color:var(--brass);flex:none}
.redirect__note{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);font-size:14.5px;color:var(--muted);max-width:62ch}

.meta{display:flex;flex-wrap:wrap;border:1px solid var(--rule);border-bottom:none;margin-top:64px}
.meta__cell{flex:1 1 180px;padding:20px 22px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.meta__cell:last-child{border-right:none}
.meta__k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.meta__v{font-family:var(--mono);font-size:14.5px}

/* ============================================================ SIGNAL SCHEMATIC */
.schematic{margin:104px 0 8px;padding-top:44px;border-top:1px solid var(--rule)}
.schematic__head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:34px}
.schematic__title{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(20px,2.3vw,27px);letter-spacing:-.015em;margin:0 0 8px}
.schematic__lede{max-width:50ch;color:var(--muted);font-size:14.5px;margin:0}
.schematic__swipe{display:none;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 12px}
.schematic__scroll{position:relative;overflow-x:auto;overflow-y:hidden;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.schematic__scroll::-webkit-scrollbar{height:5px}
.schematic__scroll::-webkit-scrollbar-thumb{background:var(--rule-strong)}
.schematic__svg{display:block;width:100%;min-width:1000px;height:auto}

.sch-lbl{font-family:var(--mono);font-size:14px;font-weight:600;fill:var(--text)}
.sch-sub{font-family:var(--mono);font-size:10px;letter-spacing:.1em;fill:var(--muted);text-transform:uppercase}
.sch-tick{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;fill:var(--dim);text-transform:uppercase}
.sch-cond{font-family:var(--mono);font-size:10px;fill:var(--orchid)}
.sch-pulse{stroke-dasharray:26 1214;animation:travel 5.5s linear infinite}
@keyframes travel{from{stroke-dashoffset:1240}to{stroke-dashoffset:0}}

.key{display:flex;flex-wrap:wrap;gap:26px;margin:44px 0 8px;padding-bottom:26px;border-bottom:1px solid var(--rule)}
.key__item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.key__swatch{width:22px;height:3px;flex:none}
.key__swatch--brass{background:var(--brass)}
.key__swatch--verdigris{background:var(--verdigris)}
.key__swatch--steel{background:var(--steel)}
.key__swatch--orchid{background:var(--orchid)}

/* ============================================================ STACK + SPINE */
.stack{position:relative;padding:8px 0 40px}
.spine{position:absolute;left:calc(var(--rail) / 2 - 1px);top:0;bottom:0;width:2px;background:var(--rule-strong)}
.spine__fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(180deg,var(--brass) 0%,var(--brass) 52%,var(--verdigris) 64%,var(--brass) 78%,var(--steel) 100%);box-shadow:0 0 14px rgba(224,163,68,.4)}

.stratum{display:grid;grid-template-columns:var(--rail) 1fr;align-items:start;padding:60px 0;opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
.stratum.in{opacity:1;transform:none}
.stratum + .stratum{border-top:1px solid var(--rule)}
.stratum__rail{position:relative;padding-top:4px}
.stratum__node{position:absolute;left:calc(50% - 6px);top:8px;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid var(--rule-strong);transition:border-color .4s,box-shadow .4s}
.stratum.in .stratum__node{border-color:var(--accent,var(--brass));box-shadow:0 0 0 5px rgba(224,163,68,.09)}
.stratum__idx{position:absolute;left:calc(50% + 22px);top:0;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;color:var(--muted)}
.stratum__body{min-width:0;padding-left:6px}

.stratum__eyebrow{display:flex;align-items:center;gap:11px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--accent,var(--brass));margin-bottom:14px}
.glyph{width:22px;height:22px;flex:none;display:block;overflow:visible}
.glyph *{stroke:var(--accent,var(--brass));fill:none;stroke-width:1.4;stroke-linecap:square}

.stratum__title{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:clamp(24px,2.9vw,36px);line-height:1.1;letter-spacing:-.015em;margin:0 0 14px}
.stratum__lede{max-width:62ch;color:#A9B6CC;font-size:15.5px;margin:0 0 30px}

.grid{display:grid;gap:14px}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{border:1px solid var(--rule);border-left:2px solid var(--accent,var(--brass));background:linear-gradient(180deg,rgba(20,28,48,.72),rgba(14,20,36,.5));padding:20px 22px;transition:border-color .3s,background .3s}
.card__name{font-family:var(--mono);font-size:13.5px;font-weight:600;margin-bottom:8px;word-break:break-word}
.card__desc{font-size:13.5px;color:var(--muted);line-height:1.5}
.card__viz{margin-top:16px;padding-top:15px;border-top:1px solid var(--rule);display:block;width:100%;height:auto;overflow:visible}
.viz-lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;fill:var(--dim);text-transform:uppercase}

.subhead{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin:34px 0 16px;padding-bottom:10px;border-bottom:1px solid var(--rule)}

.personas{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:12px}
.persona{border:1px solid var(--rule);background:rgba(20,28,48,.5);padding:16px 18px;transition:border-color .3s,background .3s}
.persona:hover{border-color:rgba(224,163,68,.5);background:rgba(224,163,68,.06)}
.persona__flag{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--brass);margin-bottom:6px}
.persona__role{font-size:12.5px;color:var(--muted);line-height:1.45}

.injector{display:block;width:100%;max-width:520px;height:auto;margin:22px auto 0;overflow:visible}

.branch{margin-top:30px;padding:18px 22px;border:1px dashed var(--rule-strong);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.branch__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);flex:none}
.branch__body{font-size:13.5px;color:var(--muted)}
.branch__body b{color:var(--text);font-weight:600;font-family:var(--mono);font-size:13px}

.phase__tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.cycle{display:block;width:100%;max-width:600px;height:auto;margin:26px auto 0;overflow:visible}
.cyc-lbl{font-family:var(--mono);font-size:11px;font-weight:600;fill:var(--text)}
.cyc-sub{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--muted);text-transform:uppercase}
.cyc-edge{font-family:var(--mono);font-size:9.5px;fill:var(--brass)}
.cyc-exit{font-family:var(--mono);font-size:9.5px;fill:var(--verdigris)}

.card--pivot{border-left-color:var(--verdigris);background:linear-gradient(180deg,rgba(85,185,166,.09),rgba(14,20,36,.5))}
.card--pivot .card__name{color:var(--verdigris)}

/* routing */
.router{display:block;width:100%;height:auto;margin:4px 0 26px;overflow:visible}
.rt-path{stroke:rgba(196,113,229,.28);fill:none;stroke-width:1.6;transition:stroke .3s,stroke-width .3s}
.rt-path.is-hot{stroke:var(--orchid);stroke-width:2.6}
.rt-node{fill:rgba(20,28,48,.95);stroke:rgba(196,113,229,.4);stroke-width:1.4;transition:stroke .3s}
.rt-node.is-hot{stroke:var(--orchid)}
.rt-lbl{font-family:var(--mono);font-size:10.5px;fill:var(--muted);transition:fill .3s}
.rt-lbl.is-hot{fill:var(--orchid)}
.rt-cap{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--dim);text-transform:uppercase}

.forks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.fork{border:1px solid rgba(196,113,229,.34);background:linear-gradient(180deg,rgba(196,113,229,.09),rgba(14,20,36,.5));padding:20px 22px;cursor:default;transition:border-color .3s,background .3s,transform .3s}
.fork:hover,.fork:focus-visible{border-color:var(--orchid);background:linear-gradient(180deg,rgba(196,113,229,.17),rgba(14,20,36,.5));transform:translateY(-2px)}
.fork__cond{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--orchid);margin-bottom:10px}
.fork__then{font-size:13px;color:var(--muted);margin:0}
.router__hint{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--dim);margin:-6px 0 6px}

/* models */
.models{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:14px}
.model{position:relative;border:1px solid var(--rule);border-top:2px solid var(--steel);background:linear-gradient(180deg,rgba(20,28,48,.7),rgba(14,20,36,.45));padding:22px;transition:border-color .35s,box-shadow .35s,transform .35s,background .35s}
.model__tag{position:absolute;top:14px;right:16px;font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--rule-strong);color:var(--dim)}
.model__tag--auto{color:var(--orchid);border-color:rgba(196,113,229,.4)}
.model__alias{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-bottom:12px;word-break:break-all;padding-right:52px}
.model__engine{font-family:var(--display);font-stretch:112%;font-weight:700;font-size:19px;letter-spacing:-.01em;margin-bottom:8px}
.model__role{font-size:13px;color:var(--muted);line-height:1.45}
.model.is-lit{border-color:var(--orchid);border-top-color:var(--orchid);background:linear-gradient(180deg,rgba(196,113,229,.15),rgba(14,20,36,.45));box-shadow:0 0 0 1px rgba(196,113,229,.28),0 12px 40px rgba(196,113,229,.16);transform:translateY(-3px)}
.model.is-lit .model__engine{color:var(--orchid)}

/* payload chips */
.payload{display:grid;grid-template-columns:var(--rail) 1fr;align-items:center}
.payload__rail{position:relative;height:100%}
.payload__chip{display:inline-flex;align-items:center;gap:12px;border:1px solid var(--rule-strong);background:var(--ink);padding:9px 18px 9px 16px;margin-left:6px;font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.payload__chip b{color:var(--brass);font-weight:600}
.payload__carrying{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);flex:none}

.foot{margin-top:40px;padding:52px 0 84px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot__note{max-width:52ch;font-size:13.5px;color:var(--muted)}
.foot__sig{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}

/* ============================================================ RESPONSIVE */
@media (max-width:860px){
  :root{--rail:44px}
  .grid--2,.grid--3{grid-template-columns:1fr}
  .stratum__idx{left:calc(50% + 16px);font-size:10px}
  .hero{padding-top:64px}
  .meta__cell{flex:1 1 100%;border-right:none}
  .redirect{padding:24px 20px}
  .foot{flex-direction:column}
  .schematic{margin-top:72px}
  .schematic__swipe{display:block}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .stratum{padding:44px 0}
  .payload__chip{font-size:10.5px;padding:8px 14px}
  .glyph{width:18px;height:18px}
}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation:none !important}
  .stratum{opacity:1;transform:none}
}


/* === ORIGINAL NAV & SPA ROUTING STYLES OVERRIDDEN WITH NEW TOKENS === */
#top-nav {
    position: fixed;
    top: 0; left: 0; width: 100%;
    background: rgba(8, 12, 22, 0.9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--rule);
    z-index: 1000;
}
.nav-container {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 28px;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-brand {
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 600;
    color: var(--brass);
    letter-spacing: 0.1em;
}
.nav-links {
    display: flex;
    gap: 30px;
}
.tab {
    color: var(--muted);
    text-decoration: none;
    font-size: 13.5px;
    font-family: var(--mono);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    transition: color 0.3s;
}
.tab:hover, .tab.active {
    color: var(--verdigris);
}
.nav-status {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.status-dot {
    width: 6px; height: 6px;
    background: var(--verdigris);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--verdigris);
}

#viewport {
    padding-top: 60px;
}
.page {
    display: none;
    animation: fadeIn 0.4s ease-out;
}
.page.active {
    display: block;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.typing-container {
    font-family: var(--mono);
    font-size: 14px;
    color: var(--text);
    background: var(--ink);
    padding: 20px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    border-top: 2px solid var(--brass);
}
.prompt { color: var(--verdigris); }
.cursor { animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: 0; } }

.profile-art img {
    width: 100%;
    max-width: 300px;
    border: 1px solid var(--rule);
    border-radius: 4px;
}

/* GLOBAL PIGGY WIDGET */
#global-piggy {
    position: absolute;
    bottom: 20px;
    left: 50vw;
    z-index: 9999;
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 0 0 transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0.85;
    transition: opacity 0.3s;
}
.piggy-ascii {
    font-family: var(--mono);
    font-size: 8px;
    line-height: 1.1;
    color: var(--verdigris);
    margin: 0;
    text-shadow: 0 0 5px rgba(85,185,166,0.3);
    transition: transform 0.3s;
}
.piggy-status {
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.2em;
    color: var(--brass);
    margin-top: 5px;
    background: rgba(14,20,36,0.8);
    padding: 4px 8px;
    border: 1px solid rgba(224,163,68,0.3);
    backdrop-filter: blur(4px);
    box-shadow: 0 0 10px rgba(224,163,68,0.1);
}
.piggy-dialogue {
    position: absolute;
    bottom: 100%;
    margin-bottom: 10px;
    background: rgba(20,28,48,0.95);
    border: 1px solid var(--brass);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s, transform 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.piggy-dialogue::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--brass) transparent transparent transparent;
}
.piggy-dialogue.active {
    opacity: 1;
    transform: translateY(0);
}

#global-piggy:hover .piggy-ascii {
    color: var(--orchid);
    text-shadow: 0 0 15px rgba(196,113,229,0.8);
    transform: scale(1.1) !important;
}
.piggy-spin {
    animation: barrelRoll 0.6s ease-in-out;
}
@keyframes barrelRoll {
    0% { transform: rotate(0deg) scale(1.1); }
    50% { transform: rotate(180deg) scale(1.3); }
    100% { transform: rotate(360deg) scale(1.1); }
}

#viewport { padding-bottom: 180px; }

.super-piggy {
    font-family: var(--mono);
    font-size: 28px;
    line-height: 1.1;
    color: var(--orchid);
    text-shadow: 0 0 30px rgba(196,113,229,0.4), 0 0 10px rgba(196,113,229,0.2);
    text-align: left;
    margin: 0 auto 40px;
    display: block;
    width: max-content;
    animation: floatPiggy 4s ease-in-out infinite, fadeInDown 0.8s ease-out forwards;
}

@keyframes floatPiggy {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@media (max-width: 768px) {
    .super-piggy {
        font-size: 14px;
        margin-bottom: 20px;
    }
}

/* ============================================================
   PIGBENIS CYBERPUNK THEME OVERRIDES
   ============================================================ */

/* 1. Immersive Body Grid Background */
body::before {
  background-image:
    linear-gradient(rgba(196,113,229,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(196,113,229,0.08) 1px, transparent 1px) !important;
  background-size: 50px 50px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  opacity: 0.6;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
  z-index: 10000;
  opacity: 0.8;
}

/* 2. Hero Section Typography */
.hero__head {
  color: #fff;
  text-shadow: 0 0 30px rgba(196,113,229,0.6), 0 0 10px rgba(196,113,229,0.3);
  letter-spacing: -0.05em;
}
.hero__head em {
  color: var(--orchid) !important;
  text-shadow: 0 0 40px var(--orchid), 0 0 20px #fff;
}
.hero__sub {
  color: #e0d0f0 !important;
  font-family: var(--mono);
  letter-spacing: 0.05em;
}

/* 3. Hero Glyph */
.hero__glyph {
  border-color: var(--orchid) !important;
  box-shadow: 0 0 15px var(--orchid), inset 0 0 10px var(--orchid);
  background: rgba(196,113,229,0.2);
}
.hero__glyph::after {
  background: var(--orchid) !important;
  box-shadow: 0 0 10px var(--orchid);
}
.hero__wordmark {
  color: var(--orchid);
  text-shadow: 0 0 10px var(--orchid);
}

/* 4. Terminal & Cards */
.redirect {
  background: rgba(10, 5, 20, 0.8) !important;
  border: 1px solid rgba(196,113,229,0.4) !important;
  box-shadow: inset 0 0 30px rgba(196,113,229,0.1), 0 0 20px rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
}
.redirect__label {
  color: var(--orchid) !important;
  text-shadow: 0 0 10px var(--orchid);
}

.card, .meta__cell, .schematic {
  background: rgba(14, 10, 24, 0.7);
  border: 1px solid rgba(196,113,229,0.2) !important;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.card:hover, .meta__cell:hover {
  border-color: var(--orchid) !important;
  box-shadow: inset 0 0 40px rgba(196,113,229,0.1), 0 0 30px rgba(196,113,229,0.2);
  transform: translateY(-4px);
}
.card::before {
  content: "";
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(196,113,229,0.1), transparent);
  transform: skewX(-20deg);
  transition: 0.5s;
}
.card:hover::before {
  left: 150%;
}

.card__name, .meta__v {
  color: #fff !important;
  font-family: var(--mono);
  text-shadow: 0 0 10px rgba(196,113,229,0.5);
}

/* 5. Navigation Bar */
.nav-container {
  background: rgba(5, 8, 16, 0.8) !important;
  border-bottom: 1px solid rgba(196,113,229,0.3) !important;
  box-shadow: 0 0 20px rgba(196,113,229,0.1);
  backdrop-filter: blur(15px);
}
.nav-brand {
  color: #fff !important;
  text-shadow: 0 0 15px var(--orchid);
}
.nav-links .tab {
  color: #a090b0 !important;
  transition: all 0.3s ease;
}
.nav-links .tab:hover {
  color: #fff !important;
  text-shadow: 0 0 15px var(--orchid);
}
.nav-links .tab.active {
  color: #fff !important;
  border-bottom-color: var(--orchid) !important;
  text-shadow: 0 0 20px var(--orchid);
}
.status-dot {
  background: var(--orchid) !important;
  box-shadow: 0 0 10px var(--orchid), 0 0 20px var(--orchid) !important;
}

/* 6. General Titles */
h1, h2, h3, h4 {
  font-family: var(--display);
  letter-spacing: -0.03em;
}
.h-display {
  text-transform: uppercase;
}

/* ============================================================
   GLOBAL PIGGY WIDGET OVERRIDES (CINEMATIC UPDATE)
   ============================================================ */
#global-piggy {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    left: auto !important;
    z-index: 100000 !important;
}

.piggy-ascii {
    color: var(--orchid) !important;
    text-shadow: 0 0 10px rgba(196,113,229,0.5) !important;
}

.piggy-status {
    color: #fff !important;
    background: rgba(14, 10, 24, 0.9) !important;
    border: 1px solid var(--orchid) !important;
    box-shadow: 0 0 15px rgba(196,113,229,0.3) !important;
    text-shadow: 0 0 5px #fff !important;
}

.piggy-dialogue {
    background: rgba(10, 5, 20, 0.95) !important;
    border: 1px solid var(--orchid) !important;
    box-shadow: inset 0 0 20px rgba(196,113,229,0.1), 0 0 15px rgba(196,113,229,0.3) !important;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(196,113,229,0.5) !important;
}

/* ============================================================
   MOBILE RESPONSIVENESS OVERRIDES
   ============================================================ */
@media (max-width: 768px) {
    /* Cinematic Entity Page Mobile Fixes */
    #page-profile .wrap {
        align-items: flex-start !important;
        padding-top: 40px !important;
        height: auto !important;
        min-height: 100vh;
    }
    #page-profile .wrap > div {
        width: 100% !important; /* Give the text full width */
        z-index: 20;
    }
    #entity-parallax {
        width: 150% !important;
        right: -40% !important;
        opacity: 0.25 !important; /* Fade the massive 3D Piggy into the background so text is readable */
        z-index: 0 !important;
    }

    /* Top Navigation Mobile Fixes */
    .nav-container {
        padding: 0 16px;
    }
    .nav-links {
        gap: 16px !important;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nav-links::-webkit-scrollbar {
        display: none;
    }
    .nav-status {
        display: none; /* Hide the system online dot to save space on mobile */
    }

    /* Typography & Spacing Fixes */
    .hero__head {
        font-size: clamp(32px, 10vw, 50px) !important;
    }
    .redirect {
        padding: 16px !important;
    }
    
    /* Global Piggy Widget */
    #global-piggy {
        bottom: 10px !important;
        right: 10px !important;
        transform: scale(0.75);
        transform-origin: bottom right;
    }
}

#init-btn {
  font-family: var(--mono);
  font-size: max(1vw, 12px);
  color: var(--orchid);
  letter-spacing: 0.5em;
  text-transform: uppercase;
  animation: blink 2s infinite;
  text-align: center;
  text-shadow: 0 0 10px rgba(196,113,229,0.8);
  border: 1px solid var(--orchid);
  padding: 15px 30px;
  border-radius: 4px;
  background: rgba(196,113,229,0.1);
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.2s ease;
  z-index: 9999;
}

#init-btn:hover {
  background: var(--orchid);
  color: var(--ink);
  text-shadow: none;
  box-shadow: 0 0 20px rgba(196,113,229,1);
  transform: scale(1.05);
}