/* ============================================================
   0xWALID // SIGNAL INTERCEPT — design system
   palette: near-black · bone · signal red
   ============================================================ */

:root{
  --bg:#0a0a0c;
  --bg2:#0d0d11;
  --panel:#111117;
  --panel2:#14141b;
  --line:#212129;
  --line2:#2c2c38;
  --text:#eceae6;
  --muted:#8f8f9a;
  --dim:#5a5a66;
  --red:#ff2d55;
  --red-hi:#ff5c7e;
  --red-soft:rgba(255,45,85,.13);
  --green:#00e07f;
  --amber:#ffb454;
  --sans:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'Cascadia Code',monospace;
  --nav-h:64px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--red);color:#fff}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line2);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--red)}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.mono{font-family:var(--mono)}
.ok{color:var(--green)}
.dim{color:var(--muted)}
em{font-style:normal;color:var(--red)}
strong{color:var(--text);font-weight:600}

.container{max-width:1160px;margin-inline:auto;padding-inline:clamp(20px,4vw,44px)}
.skip-link{
  position:fixed;top:-60px;left:16px;z-index:200;background:var(--red);color:#fff;
  padding:.5rem 1rem;font-family:var(--mono);font-size:.8rem;transition:top .2s;
}
.skip-link:focus{top:12px}

/* ---------- film grain ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---------- boot sequence ---------- */
#boot{
  position:fixed;inset:0;z-index:150;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:transform .55s var(--ease),opacity .4s;
}
#boot.done{transform:translateY(-100%);opacity:.6;pointer-events:none}
.boot-lines p{
  font-family:var(--mono);color:var(--muted);font-size:.82rem;line-height:2;
  opacity:0;transform:translateX(-8px);
}
.boot-lines p.on{opacity:1;transform:none;transition:.25s var(--ease)}
.boot-art{
  color:var(--red);font-size:clamp(.7rem,2.6vw,1rem);line-height:1.35;
  text-align:left;margin-bottom:1.3rem;text-shadow:0 0 24px rgba(255,45,85,.45);
}
.boot-grant{color:var(--green)!important;font-size:1rem!important;font-weight:700}
#boot.instant{display:none}

/* ---------- scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:110;background:transparent}
.scroll-progress span{display:block;height:100%;width:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}

/* ---------- nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:.3s;
}
.nav.scrolled{background:rgba(10,10,12,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{font-family:var(--mono);font-size:.95rem;color:var(--muted);text-decoration:none;user-select:none;cursor:pointer}
.logo span:first-of-type{color:var(--text);font-weight:700}
.logo .caret{color:var(--red);animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.nav-links{display:flex;gap:clamp(.9rem,2vw,1.8rem)}
.nav-links a{
  font-family:var(--mono);font-size:.78rem;text-decoration:none;color:var(--muted);
  letter-spacing:.04em;position:relative;padding:.35rem 0;transition:color .2s;
}
.nav-links a i{font-style:normal;color:var(--red);margin-right:.3em;font-size:.68rem}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--text)}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left}
.nav-links a.nav-cta{border:1px solid var(--line2);padding:.35rem .8rem;transition:.25s}
.nav-links a.nav-cta:hover{border-color:var(--red);background:var(--red-soft)}
.nav-links a.nav-cta::after{display:none}

.menu-btn{display:none;background:none;border:1px solid var(--line2);width:42px;height:42px;cursor:pointer;position:relative;z-index:112}
.menu-btn span{display:block;width:18px;height:2px;background:var(--text);margin:5px auto;transition:.3s var(--ease)}
body.menu-open .menu-btn span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body.menu-open .menu-btn span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;padding-top:var(--nav-h);
}
.hero-grid-bg{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 20%,transparent 75%);
  opacity:.55;
}
.hero::after{
  content:"";position:absolute;top:-20%;right:-15%;width:60vmax;height:60vmax;pointer-events:none;
  background:radial-gradient(circle,var(--red-soft) 0%,transparent 55%);
  opacity:.5;
}
#packetCanvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(2rem,6vh,4rem);
}
.status-chip{
  display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.12em;color:var(--muted);
  border:1px solid var(--line2);padding:.42rem .9rem;margin-bottom:1.4rem;
}
.status-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--green);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,224,127,.5)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

.hero-name{
  font-size:clamp(3.4rem,11vw,8.2rem);font-weight:700;line-height:.92;letter-spacing:-.02em;
  position:relative;display:inline-block;cursor:default;user-select:none;
}
.hero-name:hover{animation:glitch .32s steps(2) both}
@keyframes glitch{
  0%{text-shadow:none}
  25%{text-shadow:-3px 0 var(--red),3px 0 #29d3e0;transform:skewX(-2deg)}
  50%{text-shadow:3px 0 var(--red),-3px 0 #29d3e0;transform:skewX(2deg)}
  75%{text-shadow:-2px 0 var(--red),2px 0 #29d3e0}
  100%{text-shadow:none}
}
.hero-alias{color:var(--red);font-size:.85rem;margin:.9rem 0 .4rem;letter-spacing:.08em}
.hero-statement{font-size:clamp(1.15rem,2.4vw,1.6rem);font-weight:500;max-width:34ch}
.hero-statement em{border-bottom:2px solid var(--red);padding-bottom:2px}
.hero-typed{margin-top:1.1rem;color:var(--muted);font-size:.86rem;min-height:1.4em}
.type-caret{display:inline-block;width:8px;height:1.05em;background:var(--red);vertical-align:text-bottom;margin-left:2px;animation:blink 1s steps(1) infinite}
.hero-cta{display:flex;gap:.9rem;margin-top:1.8rem;flex-wrap:wrap}

.btn{
  font-family:var(--mono);font-size:.82rem;letter-spacing:.05em;text-decoration:none;
  padding:.85rem 1.5rem;border:1px solid var(--line2);color:var(--text);
  cursor:pointer;background:transparent;position:relative;overflow:hidden;
  transition:color .25s,border-color .25s;display:inline-block;
}
.btn::before{
  content:"";position:absolute;inset:0;background:var(--red);z-index:0;
  transform:scaleY(0);transform-origin:bottom;transition:transform .28s var(--ease);
}
.btn-primary{border-color:var(--red);color:var(--text)}
.btn span,.btn{z-index:1}.btn>*{position:relative;z-index:1}
.btn:hover::before{transform:scaleY(1)}
.btn:hover{border-color:var(--red)}
.btn-primary:hover{color:#fff}
.btn.btn-primary{box-shadow:0 0 24px -8px rgba(255,45,85,.55)}
.btn-ghost:hover{color:#fff}

/* ---------- terminal (shared) ---------- */
.terminal{
  background:rgba(13,13,17,.88);border:1px solid var(--line2);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;
}
.term-bar{
  display:flex;align-items:center;gap:.45rem;padding:.65rem .95rem;
  border-bottom:1px solid var(--line);background:var(--panel);
}
.t-dot{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.t-dot.r{background:#ff5f57}.t-dot.y{background:#febc2e}.t-dot.g{background:#28c840}
.term-title{margin-left:auto;margin-right:auto;color:var(--dim);font-size:.7rem;letter-spacing:.06em}
.term-body{
  padding:1.1rem 1.2rem;font-size:.78rem;line-height:1.75;color:var(--muted);
  min-height:280px;white-space:pre-wrap;word-break:break-word;
}
.term-body .cmd{color:var(--text)}
.term-body .cmd::before{content:"$ ";color:var(--red)}
.term-body .out-ok{color:var(--green)}
.term-body .out-red{color:var(--red)}
.term-body .out-dim{color:var(--dim)}
.cursor-block::after{content:"▊";color:var(--red);animation:blink 1s steps(1) infinite}

.scroll-hint{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  font-size:.68rem;color:var(--dim);letter-spacing:.25em;text-decoration:none;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.hint-line{width:1px;height:44px;background:linear-gradient(var(--red),transparent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ---------- ticker ---------- */
.ticker{
  border-block:1px solid var(--line);background:var(--bg2);overflow:hidden;
  padding-block:.8rem;position:relative;
}
.ticker-track{
  display:flex;width:max-content;gap:0;
  animation:marquee 30s linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.18em;color:var(--dim);
  white-space:nowrap;padding-inline:1.6rem;position:relative;
}
.ticker-track span::after{content:"//";position:absolute;right:-8px;color:var(--red);opacity:.7}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- sections ---------- */
.section{padding-block:clamp(4.5rem,10vh,8rem);position:relative}
.section-alt{background:var(--bg2);border-block:1px solid var(--line)}
.sec-head{
  margin-bottom:clamp(2.5rem,5vh,4rem);
  padding-bottom:1.2rem;border-bottom:1px solid var(--line);
}
.sec-index{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.92rem;letter-spacing:.18em;color:var(--red);
  border:1px solid rgba(255,45,85,.5);background:var(--red-soft);
  padding:.6rem 1.15rem;margin-bottom:1.2rem;
  box-shadow:0 0 22px -6px rgba(255,45,85,.4);
}
.sec-index::before{content:"";width:8px;height:8px;background:var(--red);flex-shrink:0}
.sec-head h2{
  font-size:clamp(2rem,4.8vw,3.4rem);font-weight:700;letter-spacing:-.01em;line-height:1;
}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}

/* ---------- recon ---------- */
.recon-grid{display:grid;grid-template-columns:minmax(330px,1.05fr) 1.2fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.dossier{
  background:var(--panel);border:1px solid var(--line2);position:relative;padding:1.9rem;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
.dossier::before{
  content:"CLASSIFIED // PERSONNEL FILE";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) rotate(-14deg);font-family:var(--mono);font-size:1.6rem;
  color:var(--red);opacity:.07;letter-spacing:.2em;white-space:nowrap;pointer-events:none;
}
.dossier-head{
  font-size:.75rem;letter-spacing:.2em;color:var(--dim);
  border-bottom:1px dashed var(--line2);padding-bottom:.9rem;margin-bottom:1.4rem;
  display:flex;justify-content:space-between;align-items:center;
}
.blink-red{color:var(--red);animation:blink 1.2s steps(1) infinite}
.dossier-photo{
  aspect-ratio:16/10;background:
    repeating-linear-gradient(45deg,transparent 0 10px,rgba(255,255,255,.015) 10px 20px),var(--bg2);
  border:1px solid var(--line);display:grid;place-items:center;margin-bottom:1.4rem;
  position:relative;
}
.dossier-photo::before,.dossier-photo::after,
.dossier-photo span::before,.dossier-photo span::after{
  content:"";position:absolute;width:26px;height:26px;border:2px solid var(--red);opacity:.85;
}
.dossier-photo::before{top:12px;left:12px;border-right:0;border-bottom:0}
.dossier-photo::after{top:12px;right:12px;border-left:0;border-bottom:0}
.dossier-photo span::before{bottom:12px;left:12px;border-right:0;border-top:0}
.dossier-photo span::after{bottom:12px;right:12px;border-left:0;border-top:0}
.dossier-photo span{font-family:var(--mono);font-size:3.8rem;font-weight:700;color:var(--red);opacity:.85}
.dossier-fields div{
  display:flex;justify-content:space-between;gap:1rem;padding-block:.72rem;
  border-bottom:1px dashed var(--line);font-size:.86rem;
}
.dossier-fields dt{color:var(--dim);letter-spacing:.1em}
.dossier-fields dd{text-align:right}
.dossier-fields .ok{letter-spacing:.06em}

.lead{font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:500;line-height:1.35;margin-bottom:1.2rem}
.recon-copy p+p{margin-top:1rem;color:var(--muted)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.5rem}
.chips li{
  font-family:var(--mono);font-size:.78rem;color:var(--muted);
  border:1px solid var(--line2);padding:.45rem .9rem;transition:.25s;
}
.chips li:hover{border-color:var(--red);color:var(--red);transform:translateY(-2px)}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:2rem}
.stat-row .stat{background:var(--bg2);padding:1.4rem 1rem;text-align:center;transition:background .3s}
.stat-row .stat:hover{background:var(--panel2)}
.stat b{display:block;font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:700;color:var(--red);font-variant-numeric:tabular-nums}
.stat span{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}

/* ---------- enumeration ---------- */
.enum-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
.scan-term .term-body{min-height:340px;font-size:.72rem}
.skill-group{margin-bottom:1.8rem}
.skill-group h3{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;color:var(--red);
  margin-bottom:.9rem;display:flex;align-items:center;gap:.7rem;
}
.skill-group h3::after{content:"";flex:1;height:1px;background:var(--line)}
.skill{margin-bottom:.75rem}
.skill-row{display:flex;justify-content:space-between;font-size:.8rem;margin-bottom:.35rem}
.skill-row .pct{font-family:var(--mono);font-size:.68rem;color:var(--dim)}
.bar{height:4px;background:var(--line);position:relative;overflow:hidden}
.bar i{
  position:absolute;inset:0;background:linear-gradient(90deg,#8a1832,var(--red));
  width:0;transition:width 1.1s var(--ease) .15s;display:block;
}
.in .bar i,.skill.vis .bar i{width:var(--w)}
.skill:nth-child(even) .bar i{transition-delay:.3s}

/* ---------- exploits ---------- */
.featured{
  position:relative;border:1px solid var(--line2);background:var(--panel);
  margin-bottom:2.5rem;overflow:hidden;
}
.featured .radar{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:conic-gradient(from 0deg at 82% 50%,transparent 0deg,transparent 300deg,rgba(255,45,85,.16) 350deg,transparent 360deg);
  animation:sweep 5.5s linear infinite;
}
@keyframes sweep{to{transform:rotate(360deg)}}
.featured-inner{position:relative;z-index:1;padding:clamp(1.6rem,4vw,3rem);display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.flag-tag{
  display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.16em;color:var(--amber);margin-bottom:1.1rem;
}
.flag-tag::before{content:"★";color:var(--amber)}
.featured h3{font-size:clamp(1.6rem,3.4vw,2.5rem);font-weight:700;line-height:1.08;margin-bottom:.9rem}
.featured p{color:var(--muted);max-width:52ch}
.feat-meta{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.2rem}
.tag{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--muted);
  border:1px solid var(--line2);padding:.3rem .65rem;
}
.flag-chip{
  justify-self:end;align-self:center;text-align:center;cursor:pointer;
  font-family:var(--mono);border:1px solid var(--line2);padding:1.6rem 2rem;
  background:var(--bg2);position:relative;transition:border-color .3s;min-width:230px;
}
.flag-chip small{display:block;font-size:.62rem;letter-spacing:.22em;color:var(--dim);margin-bottom:.6rem}
.flag-chip code{font-size:.95rem;color:var(--dim);letter-spacing:.04em;transition:color .3s}
.flag-chip.captured{border-color:var(--green)}
.flag-chip.captured small{color:var(--green)}
.flag-chip.captured code{color:var(--green);text-shadow:0 0 18px rgba(0,224,127,.6)}

.reticle{position:absolute;inset:0;pointer-events:none;z-index:2}
.reticle i{position:absolute;width:26px;height:26px;border:2px solid var(--red);opacity:.9;transition:.35s var(--ease)}
.reticle i:nth-child(1){top:-2px;left:-2px;border-right:0;border-bottom:0}
.reticle i:nth-child(2){top:-2px;right:-2px;border-left:0;border-bottom:0}
.reticle i:nth-child(3){bottom:-2px;left:-2px;border-right:0;border-top:0}
.reticle i:nth-child(4){bottom:-2px;right:-2px;border-left:0;border-top:0}
.featured:hover .reticle i{border-color:var(--red-hi)}
.featured:hover .reticle i:nth-child(1){top:10px;left:10px}
.featured:hover .reticle i:nth-child(2){top:10px;right:10px}
.featured:hover .reticle i:nth-child(3){bottom:10px;left:10px}
.featured:hover .reticle i:nth-child(4){bottom:10px;right:10px}

.proj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem}
.proj-card{
  position:relative;border:1px solid var(--line2);background:var(--panel);
  padding:1.5rem;display:flex;flex-direction:column;gap:.8rem;
  transition:transform .35s var(--ease),border-color .35s,box-shadow .35s;
}
.proj-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.proj-card:hover{transform:translateY(-6px);border-color:var(--line2);box-shadow:0 24px 50px -24px rgba(0,0,0,.9),0 0 30px -18px rgba(255,45,85,.5)}
.proj-card:hover::before{transform:scaleX(1)}
.proj-id{font-family:var(--mono);font-size:.66rem;color:var(--dim);letter-spacing:.14em;display:flex;justify-content:space-between}
.proj-card h3{font-size:1.18rem;font-weight:600}
.proj-card p{color:var(--muted);font-size:.88rem;flex:1}
.proj-foot{display:flex;justify-content:space-between;align-items:center;gap:.8rem;margin-top:.4rem}
.proj-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.stamp{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;padding:.28rem .6rem;
  border:1px solid currentColor;transform:rotate(-3deg);opacity:.9;flex-shrink:0;
}
.stamp.s-poc{color:var(--amber)}.stamp.s-active{color:var(--green)}.stamp.s-wip{color:#29d3e0}.stamp.s-dep{color:var(--red)}
.proj-links{display:flex;gap:1rem;margin-top:.2rem}
.proj-links a{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-decoration:none;transition:.2s}
.proj-links a:hover{color:var(--red)}
.more-link{margin-top:2.2rem;color:var(--dim);font-size:.8rem}
.more-link a{color:var(--red);text-decoration:none;border-bottom:1px solid transparent}
.more-link a:hover{border-bottom-color:var(--red)}

/* ---------- labs ---------- */
.labs-intro{color:var(--muted);max-width:64ch;margin-bottom:2.4rem}
.lab-list{display:flex;flex-direction:column;gap:1rem}
.lab-card{
  display:grid;grid-template-columns:auto 1fr auto;gap:1.4rem;align-items:center;
  border:1px solid var(--line2);background:var(--panel);padding:1.3rem 1.5rem;
  text-decoration:none;color:inherit;position:relative;
  transition:transform .3s var(--ease),border-color .3s,background .3s;
}
.lab-card:hover{transform:translateX(8px);border-color:var(--red);background:var(--panel2)}
.lab-badges{display:flex;flex-direction:column;gap:.45rem;align-items:flex-start}
.pill{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;padding:.3rem .6rem;
  border:1px solid currentColor;white-space:nowrap;
}
.plat{color:var(--dim)}
.dif-easy{color:var(--green)}.dif-medium{color:var(--amber)}.dif-hard{color:#ff7849}.dif-insane{color:var(--red)}
.lab-mid h3{font-size:1.12rem;font-weight:600;margin-bottom:.35rem}
.lab-tldr{
  font-size:.82rem;color:var(--muted);border-left:2px solid var(--red);
  padding-left:.8rem;max-width:70ch;
}
.lab-meta{
  font-family:var(--mono);font-size:.64rem;color:var(--dim);letter-spacing:.08em;
  display:flex;gap:1.1rem;margin-top:.55rem;flex-wrap:wrap;
}
.lab-arrow{font-size:1.3rem;color:var(--dim);transition:.3s var(--ease)}
.lab-card:hover .lab-arrow{color:var(--red);transform:translateX(6px)}

/* ---------- privesc / roadmap ---------- */
.roadmap-note{color:var(--muted);max-width:60ch;margin-bottom:3rem}
.roadmap{position:relative;padding-left:2.2rem;max-width:760px}
.roadmap::before{
  content:"";position:absolute;left:7px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(var(--green) 0%,var(--green) var(--done-h,30%),var(--line) var(--done-h,30%));
}
.ms{position:relative;padding-bottom:2.4rem}
.ms:last-child{padding-bottom:0}
.ms::before{
  content:"";position:absolute;left:calc(-2.2rem + 1px);top:5px;width:14px;height:14px;
  background:var(--bg);border:2px solid var(--line2);transition:.3s;
}
.ms.done::before{background:var(--green);border-color:var(--green);box-shadow:0 0 14px rgba(0,224,127,.5)}
.ms.now::before{border-color:var(--red);animation:pulse-r 1.8s infinite}
@keyframes pulse-r{0%{box-shadow:0 0 0 0 rgba(255,45,85,.45)}70%{box-shadow:0 0 0 11px transparent}100%{box-shadow:0 0 0 0 transparent}}
.ms-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:.4rem}
.ms-head h3{font-size:1.15rem;font-weight:600}
.ms.done .ms-head h3{color:var(--muted)}
.ms-state{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;padding:.26rem .6rem;border:1px solid currentColor;
}
.st-done{color:var(--green)}.st-now{color:var(--red)}.st-next{color:var(--dim)}
.ms p{color:var(--muted);font-size:.9rem;max-width:58ch}
.privesc-bar{margin-top:.8rem;max-width:420px}
.privesc-bar .row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.64rem;color:var(--dim);margin-bottom:.35rem;letter-spacing:.08em}
.ms.done .privesc-bar .bar i{background:var(--green)}

/* ---------- pivot ---------- */
.pivot{background:var(--bg2);border-top:1px solid var(--line)}
.pivot-inner{text-align:center;padding-block:1rem}
.pivot-big{font-size:clamp(2.4rem,6.5vw,4.6rem);font-weight:700;line-height:1.05;letter-spacing:-.02em}
.pivot-flavor{color:var(--dim);font-size:.8rem;margin:1.6rem 0 2rem}
.pivot-actions{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap;margin-bottom:1.6rem}
.pivot-email{font-size:.85rem;color:var(--muted);margin-bottom:3rem;letter-spacing:.03em}
.pivot-email a{color:var(--text);text-decoration:none;border-bottom:1px dashed var(--red)}
.pivot-email a:hover{color:var(--red)}
.link-grid{display:flex;justify-content:center;gap:.9rem;flex-wrap:wrap}
.link-card{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--muted);
  border:1px solid var(--line2);padding:.8rem 1.3rem;font-family:var(--mono);font-size:.76rem;
  transition:.28s var(--ease);background:var(--panel);
}
.link-card svg{width:16px;height:16px;fill:currentColor;flex-shrink:0}
.link-card:hover{color:var(--text);border-color:var(--red);transform:translateY(-4px);box-shadow:0 14px 30px -14px rgba(255,45,85,.35)}

/* ---------- footer ---------- */
.footer{border-top:1px solid var(--line);padding-block:2.2rem}
.footer-inner{display:flex;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;align-items:center}
.foot-line{font-size:.72rem;color:var(--dim)}
.foot-hint{font-size:.68rem;color:#2c2c38;cursor:help;transition:color .4s;user-select:none}
.foot-hint:hover{color:var(--red)}

/* ---------- toast ---------- */
.toast{
  position:fixed;bottom:28px;left:50%;transform:translate(-50%,80px);z-index:140;
  background:var(--panel2);border:1px solid var(--red);color:var(--text);
  font-size:.76rem;padding:.85rem 1.4rem;opacity:0;pointer-events:none;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.8);transition:.4s var(--ease);max-width:90vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- konami / phosphor mode ---------- */
body.phosphor{--red:#00ff41;--red-hi:#7dff9b;--red-soft:rgba(0,255,65,.12);--amber:#00ff41;--green:#00ff41}
body.phosphor .btn-primary,body.phosphor .stamp.s-dep{color:#031b07}
body.phosphor .hero-name:hover{animation:none}
body.phosphor #toast{border-color:#00ff41}

/* ---------- command palette ---------- */
.kbd-hint{
  font-size:.62rem;color:var(--dim);background:var(--panel);border:1px solid var(--line2);
  padding:.28rem .55rem;margin-left:.9rem;cursor:pointer;transition:.25s;letter-spacing:.08em;
}
.kbd-hint:hover{color:var(--text);border-color:var(--red)}
.palette-backdrop{position:fixed;inset:0;background:rgba(5,5,8,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:120;opacity:0;pointer-events:none;transition:.25s}

.palette{
  position:fixed;top:16vh;left:50%;transform:translate(-50%,-12px);z-index:121;width:min(560px,92vw);
  background:var(--panel2);border:1px solid var(--line2);box-shadow:0 40px 90px -20px rgba(0,0,0,.9);
  opacity:0;pointer-events:none;transition:.25s var(--ease);
}
#paletteHost.open .palette-backdrop,#paletteHost.open .palette{opacity:1;visibility:visible}
#paletteHost .palette{transform:translate(-50%,-12px)}
#paletteHost.open .palette{transform:translate(-50%,0)}
#palInput{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line2);
  color:var(--text);font-size:.95rem;padding:1.05rem 1.25rem;outline:none;
}
.pal-list{max-height:46vh;overflow-y:auto;overscroll-behavior:contain;padding:.45rem}
.pal-item{
  display:flex;justify-content:space-between;gap:1rem;width:100%;text-align:left;
  background:none;border:0;color:var(--muted);font-size:.8rem;
  padding:.7rem .85rem;cursor:pointer;transition:.15s;
}
.pal-item:hover,.pal-item.sel{background:var(--red-soft);color:var(--text)}
.pal-item.sel{box-shadow:inset 2px 0 0 var(--red)}
.pal-hint{font-size:.62rem;color:var(--dim);letter-spacing:.08em;white-space:nowrap}
.pal-empty{padding:1.2rem;color:var(--dim);font-size:.78rem}
.pal-foot{display:flex;gap:1.3rem;border-top:1px solid var(--line2);padding:.6rem 1.1rem;font-size:.62rem;color:var(--dim)}

/* ---------- sudo hire-me overlay ---------- */
.privesc-overlay{
  position:fixed;inset:0;z-index:160;background:rgba(10,10,12,.94);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:.7rem;font-size:.95rem;color:var(--muted);text-align:center;
  opacity:0;transition:opacity .35s;
}
.privesc-overlay.show{opacity:1}
.privesc-overlay .big{
  color:var(--green);font-size:clamp(1.6rem,6vw,3rem);font-weight:700;letter-spacing:.06em;
  text-shadow:0 0 40px rgba(0,224,127,.5);margin-top:.8rem;
}
.btn.pulse{animation:pulse-btn 1s ease infinite}
@keyframes pulse-btn{0%,100%{box-shadow:0 0 24px -8px rgba(255,45,85,.55)}50%{box-shadow:0 0 44px -4px rgba(255,45,85,.95)}}

/* ---------- article reading progress ---------- */
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:115}
.read-progress span{display:block;height:100%;background:var(--green);transform-origin:left;transform:scaleX(0)}

/* ---------- safe mode (manual reduced motion) ---------- */
body.no-motion *,
body.no-motion *::before,
body.no-motion *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
body.no-motion .reveal{opacity:1;transform:none}
body.no-motion .ticker-track{animation:none}

/* ---------- print / CV mode ---------- */
@media print{
  body::before,.nav,#boot,.scroll-progress,.ticker,#packetCanvas,.hero-grid-bg,
  .scroll-hint,.toast,#paletteHost,.menu-btn,.foot-hint,
  .term-bar,.terminal,.more-link,.lab-arrow,.reticle,.radar,
  .bot-fab,.bot-panel{display:none!important}
  body{background:#fff;color:#111;font-size:12pt}
  ::selection{background:#111;color:#fff}
  .hero{min-height:auto;padding-top:0}
  .hero-inner{display:block}
  .status-chip{border-color:#999;color:#333}
  .hero-name{font-size:34pt;color:#000}
  .hero-alias,.sec-index{color:#b3003c!important;background:none;border:0;padding:0}
  .hero-statement{font-size:14pt}
  .btn{border:0;padding:0;color:#b3003c;background:none;box-shadow:none;display:inline}
  .btn::before{display:none}
  .section{padding-block:18pt;page-break-inside:avoid}
  .sec-head h2{font-size:17pt}
  .dossier,.stat-row,.proj-card,.featured,.tldr-box,.link-card,.chips li{background:#fff;border-color:#bbb;box-shadow:none;color:#111}
  .recon-grid,.enum-grid,.featured-inner{grid-template-columns:1fr!important}
  .lead,p,h1,h2,h3,.stat b,.tag,.pill{color:#111!important}
  .stat b,.sec-head h2::before{color:#b3003c!important}
  .pivot-big{font-size:20pt}
  .link-grid a{text-decoration:none}
  footer .foot-line::before{content:"Portfolio: https://0xwalid.github.io"}
  .footer{border-top:1pt solid #999;padding-block:8pt}
}

/* ---------- project repo links / ctf ---------- */
.repo-btn{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.7rem;letter-spacing:.06em;color:var(--text);
  border:1px solid var(--line2);background:var(--bg2);
  padding:.6rem 1rem;transition:.25s var(--ease);
}
.repo-btn svg{width:15px;height:15px;fill:currentColor}
.repo-btn i{font-style:normal;color:var(--dim);transition:.25s}
.repo-btn:hover{border-color:var(--red);background:var(--red-soft);transform:translateY(-2px)}
.repo-btn:hover i{color:var(--red);transform:translate(2px,-2px)}
.side-link{font-family:var(--mono);font-size:.72rem;color:var(--muted);text-decoration:none;border-bottom:1px dashed var(--line2)}
.side-link:hover{color:var(--red);border-color:var(--red)}

.ctf-card{
  margin-top:4rem;border:1px dashed rgba(255,45,85,.45);background:var(--red-soft);
  padding:1.6rem 1.8rem;max-width:720px;
}
.ctf-tag{font-size:.66rem;letter-spacing:.2em;color:var(--red);margin-bottom:.9rem}
.ctf-copy{color:var(--muted);font-size:.92rem;max-width:56ch;margin-bottom:1.1rem}
.hof{list-style:none;font-size:.8rem;color:var(--text)}
.hof li{padding-block:.35rem;border-bottom:1px dashed var(--line)}
.hof li:last-child{border-bottom:0}

/* ---------- walid-bot ---------- */
.bot-fab{
  position:fixed;bottom:26px;right:26px;z-index:118;width:52px;height:52px;
  border-radius:50%;background:var(--panel2);border:1px solid var(--red);
  color:var(--red);font-size:.9rem;font-weight:700;cursor:pointer;
  box-shadow:0 0 30px -8px rgba(255,45,85,.6);transition:.25s var(--ease);
}
.bot-fab:hover{transform:translateY(-4px) rotate(-3deg);box-shadow:0 10px 40px -8px rgba(255,45,85,.8)}
.bot-panel{
  position:fixed;bottom:90px;right:26px;z-index:119;width:min(360px,92vw);
  background:var(--panel2);border:1px solid var(--line2);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.9);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:.28s var(--ease);
}
.bot-panel.open{opacity:1;visibility:visible;transform:none}
.bot-head{
  display:flex;align-items:center;gap:.7rem;padding:.75rem 1rem;border-bottom:1px solid var(--line2);
  font-size:.68rem;letter-spacing:.14em;color:var(--muted);
}
.bot-local{margin-left:auto;color:var(--green);font-size:.58rem;letter-spacing:.1em}
.bot-x{background:none;border:0;color:var(--dim);font-size:1.15rem;cursor:pointer;line-height:1;padding:.1rem .3rem}
.bot-x:hover{color:var(--red)}
.bot-msgs{height:260px;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.55rem}
.bot-msg{
  max-width:86%;padding:.6rem .8rem;font-size:.8rem;line-height:1.5;
}
.bot-msg.bot{background:var(--panel);border:1px solid var(--line2);color:#cfcdd4;align-self:flex-start}
.bot-msg.me{background:var(--red-soft);border:1px solid rgba(255,45,85,.35);color:var(--text);align-self:flex-end}
.bot-msg.typing{color:var(--dim)}
.bot-msg a{color:var(--red)}
.bot-chips{display:flex;gap:.4rem;flex-wrap:wrap;padding:0 1rem .7rem}
.bot-chips button{
  font-size:.62rem;color:var(--muted);background:none;border:1px solid var(--line2);
  padding:.32rem .65rem;cursor:pointer;transition:.2s;
}
.bot-chips button:hover{border-color:var(--red);color:var(--text)}
.bot-form{display:flex;border-top:1px solid var(--line2)}
#botInput{
  flex:1;background:transparent;border:0;color:var(--text);font-size:.82rem;
  padding:.85rem 1rem;outline:none;
}
.bot-send{
  background:none;border:0;border-left:1px solid var(--line2);color:var(--red);
  font-size:.72rem;letter-spacing:.12em;cursor:pointer;padding:0 1.1rem;transition:.2s;
}
.bot-send:hover{background:var(--red-soft)}

/* ---------- refined trophy system (featured) ---------- */
.featured{
  border-color:rgba(212,175,55,.32);
  box-shadow:0 0 0 1px rgba(212,175,55,.10) inset,0 24px 60px -30px rgba(0,0,0,.85);
  isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
}
.featured::before{
  content:"";position:absolute;inset:9px;z-index:3;pointer-events:none;
  border:1px solid rgba(212,175,55,.20);
}
.featured::after{
  content:"";position:absolute;left:10%;right:10%;bottom:-30px;height:36px;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.65),rgba(212,175,55,.06) 60%,transparent 75%);
  filter:blur(16px);opacity:.25;transition:.45s var(--ease);
}
.featured:hover{
  transform:translateY(-8px);
  border-color:rgba(212,175,55,.55);
  box-shadow:0 0 0 1px rgba(212,175,55,.16) inset,0 40px 80px -30px rgba(0,0,0,.95);
}
.featured:hover::after{opacity:1;height:44px;filter:blur(20px)}

.trophy-strip{
  display:flex;align-items:center;justify-content:center;gap:.95rem;
  padding:.72rem 1rem;
  background:linear-gradient(180deg,rgba(212,175,55,.14),rgba(212,175,55,.03));
  border-bottom:1px solid rgba(212,175,55,.38);
  color:#e8c15a;font-size:.62rem;letter-spacing:.42em;text-indent:.42em;
}
.ts-line{flex:1;max-width:150px;height:1px;background:linear-gradient(90deg,transparent,rgba(212,175,55,.55))}
.ts-line:last-child{background:linear-gradient(270deg,transparent,rgba(212,175,55,.55))}
.ts-star{color:#f0d78c;font-size:.78rem;text-shadow:0 0 12px rgba(212,175,55,.6)}

.trophy-seal{
  position:absolute;top:-22px;right:30px;z-index:4;width:76px;height:76px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:#0b0b0f radial-gradient(circle at 50% 35%,rgba(212,175,55,.16),transparent 70%);
  border:1px solid rgba(212,175,55,.7);
  box-shadow:0 10px 26px -10px rgba(0,0,0,.9),0 0 22px -6px rgba(212,175,55,.45);
}
.trophy-seal::before{
  content:"";position:absolute;inset:5px;border-radius:50%;
  border:1px dashed rgba(212,175,55,.55);
}
.trophy-seal b{color:#f0d78c;font-size:1.15rem;line-height:1;text-shadow:0 0 14px rgba(212,175,55,.7)}
.trophy-seal small{font-size:.5rem;letter-spacing:.22em;color:#c9a84c}

/* unify: radar */
.featured .radar{
  background:conic-gradient(from 0deg at 82% 50%,transparent 0deg,transparent 300deg,rgba(212,175,55,.15) 350deg,transparent 360deg);
}
/* unify: reticle */
.reticle i{border-color:rgba(212,175,55,.85);transition:.35s var(--ease)}
.featured:hover .reticle i{border-color:#f0d78c}
/* unify: terminal */
.feat-term{border-color:rgba(212,175,55,.22)}
.feat-term .cmd::before{color:#d4af37}
.feat-term.done{border-color:rgba(212,175,55,.5);box-shadow:0 0 24px -10px rgba(212,175,55,.5)}
/* unify: flag chip */
.flag-chip.captured{border-color:rgba(212,175,55,.6)}
.flag-chip.captured small{color:#e8c15a}
.flag-chip.captured code{color:#e8c15a;text-shadow:0 0 18px rgba(212,175,55,.6)}

/* ---------- responsive ---------- */
@media(max-width:1020px){
  .hero-inner{grid-template-columns:1fr;gap:2.6rem}
  .terminal{max-width:640px}
  .recon-grid,.enum-grid{grid-template-columns:1fr}
  .featured-inner{grid-template-columns:1fr}
  .flag-chip{justify-self:start}
}
/* ---------- operator's choice featured terminal ---------- */
.feat-term{
  margin-top:1.3rem;background:#0c0c10;border:1px solid var(--line2);
  padding:.9rem 1.05rem;font-size:.72rem;line-height:1.75;color:#b9e0d2;
  min-height:6.4em;white-space:pre-wrap;overflow-x:auto;
}
.feat-term.done{border-color:rgba(0,224,127,.35)}

@media(max-width:860px){
  .nav-links{
    position:fixed;inset:0;z-index:111;background:rgba(10,10,12,.97);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    flex-direction:column;justify-content:center;align-items:center;gap:1.6rem;
    opacity:0;visibility:hidden;transition:.35s var(--ease);
    overscroll-behavior:contain;
  }
  body.menu-open .nav-links{opacity:1;visibility:visible}
  .menu-btn{display:block;z-index:112}
  .kbd-hint{display:none}
  body.menu-open{overflow:hidden}
  .nav-links a{
    font-size:1.2rem;padding:.75rem 1.4rem;
  }
  .nav-links a i{font-size:.85rem}
  .lab-card{grid-template-columns:1fr;gap:1rem}
  .lab-arrow{display:none}
  .footer-inner{flex-direction:column;text-align:center}
}
@media(max-width:640px){
  .term-body{min-height:240px;font-size:.7rem}
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .pivot-actions{flex-direction:column;align-items:stretch}
  .hero-cta{flex-direction:column;align-items:stretch;text-align:center}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
  .reveal{opacity:1;transform:none}
  #boot{display:none}
  .ticker-track{animation:none}
}