
:root {
  --y:#FFD700; --pk:#FF2D6B; --cy:#00C8FF;
  --or:#FF6B1A; --dk:#090909; --navy:#0d0d1a;
  --panel:#111118; --w:#f0ebe0; --gr:#00ff41;
  --ink:#000;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--dk);
  color:var(--w);
  font-family:'Share Tech Mono','Courier New',monospace;
  overflow-x:hidden;
  cursor:crosshair;
}

/* ── HALFTONE OVERLAY ── */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:5px 5px;
  pointer-events:none;
  z-index:9500;
}

/* ── SCAN LINES ── */
body::after{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 2px,
    rgba(0,0,0,.07) 2px,rgba(0,0,0,.07) 4px
  );
  pointer-events:none;
  z-index:9400;
  animation:scanDrift 8s linear infinite;
}
@keyframes scanDrift{from{background-position:0 0;}to{background-position:0 40px;}}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:8000;
  background:rgba(10,10,10,.96);
  backdrop-filter:blur(12px);
  border-bottom:4px solid var(--y);
  box-shadow:0 4px 0 var(--pk),0 8px 0 #000;
  padding:0 4vw;height:64px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{
  font-family:'Bangers',cursive;font-size:1.8rem;
  color:var(--y);text-shadow:3px 3px 0 var(--pk),5px 5px 0 #000;
  letter-spacing:2px;cursor:pointer;text-decoration:none;
  transition:transform .15s;
}
.nav-logo:hover{transform:scale(1.08) rotate(-1deg);}
.nav-links{display:flex;gap:24px;list-style:none;align-items:center;}
.nav-links a{
  font-family:'Bangers',cursive;font-size:1rem;letter-spacing:2px;
  color:var(--cy);text-decoration:none;position:relative;transition:color .2s;
}
.nav-links a::after{
  content:'';position:absolute;bottom:-4px;left:0;right:0;
  height:3px;background:var(--pk);
  transform:scaleX(0);transform-origin:left;transition:transform .2s;
}
.nav-links a:hover{color:var(--y);}
.nav-links a:hover::after{transform:scaleX(1);}
.nav-hire{
  font-family:'Bangers',cursive !important;font-size:1rem !important;
  letter-spacing:2px;color:#000 !important;background:var(--y);
  padding:8px 20px;border:3px solid #000;
  box-shadow:3px 3px 0 var(--pk),5px 5px 0 #000;
  transition:transform .1s,box-shadow .1s !important;
}
.nav-hire:hover{transform:translate(-2px,-2px) !important;box-shadow:5px 5px 0 var(--pk),8px 8px 0 #000 !important;color:#000 !important;}
.nav-hire::after{display:none !important;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;}
.hamburger span{display:block;width:24px;height:3px;background:var(--y);transition:all .3s;}
.mob-menu{
  display:none;position:fixed;top:64px;left:0;right:0;
  background:rgba(10,10,10,.98);border-bottom:4px solid var(--y);
  z-index:7999;padding:20px;flex-direction:column;gap:16px;
}
.mob-menu.open{display:flex;}
.mob-menu a{font-family:'Bangers',cursive;font-size:1.4rem;letter-spacing:3px;color:var(--cy);text-decoration:none;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);}

/* ── COMIC PANEL SYSTEM ── */
.comic-page{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}

/* diagonal panel cuts */
.panel-cut{
  position:relative;
  overflow:hidden;
}
.panel-cut::after{
  content:'';
  position:absolute;
  bottom:-2px;left:0;right:0;
  height:80px;
  background:var(--dk);
  clip-path:polygon(0 60px,100% 0,100% 80px,0 80px);
  z-index:10;
}
.panel-cut-rev::after{
  clip-path:polygon(0 0,100% 60px,100% 80px,0 80px);
}
.panel-cut-navy::after{background:var(--navy);}

/* panel borders */
.panel-border{
  border:4px solid #000;
  box-shadow:inset 0 0 0 2px rgba(255,215,0,.05);
}

/* ── STICKERS ── */
.sticker{
  position:absolute;
  font-family:'Bangers',cursive;
  font-size:.8rem;letter-spacing:2px;
  padding:6px 14px;
  border:3px solid #000;
  pointer-events:none;
  z-index:50;
  box-shadow:3px 3px 0 #000;
}
.sticker-yellow{background:var(--y);color:#000;}
.sticker-pink{background:var(--pk);color:#fff;}
.sticker-cyan{background:var(--cy);color:#000;}
.sticker-green{background:var(--gr);color:#000;}

/* ── ONOMATOPOEIA ELEMENTS ── */
.ono{
  font-family:'Bangers',cursive;
  pointer-events:none;
  user-select:none;
  line-height:1;
}

/* ── HERO ── */
.hero{
  min-height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  position:relative;
  overflow:hidden;
  padding-top:64px;
}

/* left panel */
.hero-left-panel{
  background:var(--dk);
  border-right:5px solid #000;
  padding:60px 4vw 100px;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;
  overflow:hidden;
}
.hero-left-panel::before{
  content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(-45deg,transparent,transparent 40px,rgba(255,215,0,.02) 40px,rgba(255,215,0,.02) 41px);
  animation:bgDrift 20s linear infinite;
}
@keyframes bgDrift{to{background-position:200px 200px;}}

/* right panel */
.hero-right-panel{
  background:var(--navy);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:60px 4vw 100px;
  position:relative;overflow:hidden;
}
.hero-right-panel::before{
  content:'POW!';
  font-family:'Bangers',cursive;
  font-size:18rem;color:rgba(255,45,107,.04);
  position:absolute;top:-40px;right:-40px;line-height:1;
  pointer-events:none;
}

.hero-eyebrow{
  font-size:.7rem;letter-spacing:6px;color:var(--cy);
  margin-bottom:16px;
  display:flex;align-items:center;gap:10px;
}
.hero-eyebrow::before{content:'';display:block;width:24px;height:2px;background:var(--cy);}

.hero-title{
  font-family:'Bangers',cursive;
  font-size:clamp(3.5rem,7vw,6rem);
  line-height:.92;margin-bottom:24px;
  position:relative;z-index:1;
}
.ht-1{color:var(--y);text-shadow:5px 5px 0 var(--pk),8px 8px 0 #000;display:block;}
.ht-2{color:var(--w);text-shadow:4px 4px 0 #000;display:block;}
.ht-3{color:var(--pk);font-size:50%;letter-spacing:4px;text-shadow:2px 2px 0 #000;display:block;margin-top:6px;}

.hero-desc{
  font-size:.9rem;line-height:1.85;color:#aaa;
  margin-bottom:28px;max-width:420px;position:relative;z-index:1;
}
.hero-desc strong{color:var(--cy);}

.hero-pillars{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px;position:relative;z-index:1;
}
.pill{
  font-family:'Bangers',cursive;font-size:.85rem;letter-spacing:2px;
  padding:5px 14px;border:2px solid currentColor;
  position:relative;overflow:hidden;cursor:default;transition:transform .15s;
}
.pill::before{content:'';position:absolute;inset:0;background:currentColor;opacity:.08;}
.pill:hover{transform:scale(1.1) rotate(-2deg);}
.p1{color:var(--pk);}
.p2{color:var(--cy);}
.p3{color:var(--or);}
.p4{color:var(--y);}
.p5{color:var(--gr);}
.p-ai{color:#b44fff;}

.hero-btns{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1;}
.btn-boom{
  font-family:'Bangers',cursive;font-size:1.2rem;letter-spacing:3px;
  color:#000;background:var(--y);
  padding:12px 30px;border:4px solid #000;
  box-shadow:5px 5px 0 var(--pk),8px 8px 0 #000;
  text-decoration:none;cursor:pointer;display:inline-block;
  transition:transform .1s,box-shadow .1s;
}
.btn-boom:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--pk),11px 11px 0 #000;}
.btn-boom:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--pk),3px 3px 0 #000;}
.btn-wire{
  font-family:'Bangers',cursive;font-size:1.2rem;letter-spacing:3px;
  color:var(--cy);background:transparent;
  padding:12px 30px;border:3px solid var(--cy);
  box-shadow:4px 4px 0 rgba(0,200,255,.3);
  text-decoration:none;cursor:pointer;display:inline-block;
  transition:all .15s;
}
.btn-wire:hover{background:rgba(0,200,255,.1);transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(0,200,255,.4);}

.hero-logo-wrap{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:100%;
}
.hero-logo-img{
  width:min(380px,90%);
  filter:drop-shadow(0 0 40px rgba(255,215,0,.3));
  animation:logoFloat 4s ease-in-out infinite;
  cursor:pointer;position:relative;z-index:2;
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) rotate(-1deg);}
  50%{transform:translateY(-14px) rotate(1deg);}
}

/* mascot peeking at hero */
.mascot-peek{
  position:absolute;bottom:-10px;right:10px;
  width:160px;
  filter:drop-shadow(0 0 20px rgba(255,107,26,.5));
  animation:peekBob 3s ease-in-out infinite;
  cursor:pointer;z-index:20;
}
@keyframes peekBob{
  0%,100%{transform:translateY(0) rotate(-3deg);}
  50%{transform:translateY(-8px) rotate(2deg);}
}

/* hero bottom strip */
.hero-stats{
  position:absolute;bottom:0;left:0;right:0;
  background:#000;border-top:4px solid var(--y);
  display:flex;z-index:10;
}
.hero-stat-item{
  flex:1;padding:14px;text-align:center;
  border-right:3px solid #111;
}
.hero-stat-item:last-child{border-right:none;}
.hsn{font-family:'Bangers',cursive;font-size:1.8rem;color:var(--y);text-shadow:2px 2px 0 var(--pk);display:block;}
.hsl{font-size:.6rem;letter-spacing:3px;color:#444;display:block;}

/* stickers on hero */
.s-appsec{top:80px;right:-8px;transform:rotate(5deg);}
.s-iot{bottom:110px;left:-6px;transform:rotate(-4deg);}
.s-ctf{top:50%;right:-10px;transform:rotate(8deg);}

/* ── TICKER ── */
.ticker{
  background:var(--pk);overflow:hidden;white-space:nowrap;
  padding:10px 0;
  border-top:3px solid #000;border-bottom:3px solid #000;
  position:relative;z-index:11;
}
.tick-inner{
  display:inline-block;
  animation:tickRoll 20s linear infinite;
  font-family:'Bangers',cursive;font-size:1rem;letter-spacing:4px;color:#fff;
}
@keyframes tickRoll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ── ATTACK SURFACE — 4 PANELS ── */
.surface-section{background:var(--navy);position:relative;padding:80px 4vw 120px;}
.surface-section::before{
  content:'ZAP!';font-family:'Bangers',cursive;
  font-size:20rem;color:rgba(0,200,255,.03);
  position:absolute;bottom:-60px;right:-30px;line-height:1;
  pointer-events:none;
}

.surface-panels{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border:4px solid #000;
  margin-top:48px;
}
.surf-panel{
  padding:32px 24px;
  border-right:4px solid #000;
  position:relative;overflow:hidden;
  cursor:pointer;transition:background .2s;
  background:var(--navy);
}
.surf-panel:last-child{border-right:none;}
.surf-panel::before{
  content:attr(data-ono);
  font-family:'Bangers',cursive;
  font-size:5rem;
  position:absolute;top:-16px;right:8px;
  line-height:1;opacity:.06;
  transition:opacity .3s,transform .3s;
}
.surf-panel:hover::before{opacity:.18;transform:scale(1.1) rotate(-5deg);}
.surf-panel:hover{background:rgba(255,255,255,.02);}

/* bottom accent line */
.surf-panel::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:5px;
  transform:scaleX(0);transform-origin:left;transition:transform .3s;
}
.surf-panel:hover::after{transform:scaleX(1);}
.sp-web::before{color:var(--pk);}
.sp-web::after{background:var(--pk);}
.sp-mob::before{color:var(--cy);}
.sp-mob::after{background:var(--cy);}
.sp-iot::before{color:var(--or);}
.sp-iot::after{background:var(--or);}
.sp-api::before{color:var(--y);}
.sp-api::after{background:var(--y);}
.sp-ai::before{color:#b44fff;}
.sp-ai::after{background:#b44fff;}

.sp-num{font-family:'Bangers',cursive;font-size:3rem;opacity:.06;position:absolute;top:8px;left:12px;}
.sp-icon{font-size:2.4rem;margin-bottom:14px;display:block;}
.sp-title{font-family:'Bangers',cursive;font-size:1.7rem;letter-spacing:1px;margin-bottom:10px;}
.sp-web .sp-title{color:var(--pk);}
.sp-mob .sp-title{color:var(--cy);}
.sp-iot .sp-title{color:var(--or);}
.sp-api .sp-title{color:var(--y);}
.sp-ai .sp-title{color:#b44fff;}
.sp-body{font-size:.78rem;line-height:1.7;color:#777;margin-bottom:14px;}
.sp-tags{display:flex;flex-wrap:wrap;gap:5px;}
.sp-tag{font-size:.6rem;letter-spacing:1px;padding:2px 7px;border:1px solid #222;color:#555;}

/* mascot in surface section */
.surface-mascot{
  position:absolute;bottom:100px;right:30px;
  width:120px;opacity:.7;
  filter:drop-shadow(0 0 15px rgba(255,107,26,.4));
  animation:mascotBob 3s ease-in-out infinite;
  transform:scaleX(-1);
  pointer-events:none;
}

/* ── WANTED POSTER — ABOUT ── */
.about-section{
  background:var(--dk);
  padding:100px 4vw 120px;
  position:relative;overflow:hidden;
}
.about-section::before{
  content:'BOOM!';font-family:'Bangers',cursive;
  font-size:22rem;color:rgba(255,45,107,.025);
  position:absolute;top:-60px;left:-60px;line-height:1;
  pointer-events:none;
}

.about-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:420px 1fr;
  gap:60px;align-items:start;
}

/* WANTED POSTER */
.wanted-poster{
  background:#d4a855;
  border:6px solid #5c3a0a;
  box-shadow:8px 8px 0 #2a1a04,14px 14px 0 rgba(0,0,0,.5);
  padding:28px 24px;
  position:relative;
  transform:rotate(-1.5deg);
  transition:transform .3s;
}
.wanted-poster:hover{transform:rotate(0deg) scale(1.02);}
.wanted-poster::before{
  content:'';position:absolute;inset:6px;
  border:2px solid rgba(92,58,10,.4);
  pointer-events:none;
}

.wp-header{
  text-align:center;margin-bottom:16px;
  border-bottom:3px solid #5c3a0a;padding-bottom:12px;
}
.wp-wanted{
  font-family:'Bangers',cursive;font-size:3rem;
  color:#5c3a0a;letter-spacing:6px;
  text-shadow:2px 2px 0 rgba(92,58,10,.3);
  display:block;line-height:1;
}
.wp-dead{
  font-family:'Bangers',cursive;font-size:.9rem;
  letter-spacing:4px;color:#7a4c14;display:block;margin-top:4px;
}

.wp-photo{
  width:100%;
  background:rgba(92,58,10,.15);
  border:3px solid #5c3a0a;
  aspect-ratio:3/4;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;
  overflow:hidden;position:relative;
}
.wp-photo img{width:100%;height:100%;object-fit:cover;object-position:top center;filter:sepia(.2) contrast(1.05);}
.wp-photo-placeholder{
  font-size:5rem;
}

.wp-name{
  font-family:'Bangers',cursive;font-size:1.8rem;
  color:#5c3a0a;letter-spacing:3px;text-align:center;
  border-top:2px solid rgba(92,58,10,.4);
  border-bottom:2px solid rgba(92,58,10,.4);
  padding:6px 0;margin-bottom:12px;
  text-shadow:1px 1px 0 rgba(255,255,255,.3);
}

.wp-charges{
  font-family:'Permanent Marker',cursive;
  font-size:.75rem;color:#5c3a0a;line-height:1.6;
  margin-bottom:14px;
}
.wp-charges span{color:#8B1A1A;font-weight:bold;}

.wp-reward{
  text-align:center;
  background:#5c3a0a;color:#d4a855;
  font-family:'Bangers',cursive;
  font-size:1.2rem;letter-spacing:3px;
  padding:10px;margin:-4px -4px -8px;
}
.wp-reward-amt{font-size:1.6rem;display:block;color:#FFD700;}

.cert-strip-poster{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;
  transform:rotate(1.5deg);
}
.cert-p{
  font-family:'Bangers',cursive;font-size:.75rem;letter-spacing:2px;
  padding:4px 10px;border:2px solid rgba(255,215,0,.4);
  color:rgba(255,215,0,.7);transition:all .2s;cursor:default;
}
.cert-p:hover{border-color:var(--y);color:var(--y);box-shadow:0 0 10px rgba(255,215,0,.3);}

/* about text side */
.about-text{position:relative;}
.avail-dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--gr);box-shadow:0 0 10px var(--gr);margin-right:8px;
  animation:dotP 2s ease-in-out infinite;
}
@keyframes dotP{0%,100%{box-shadow:0 0 6px var(--gr);}50%{box-shadow:0 0 18px var(--gr);}}
.avail-bar{
  display:flex;align-items:center;
  font-size:.8rem;color:var(--gr);
  border:2px solid var(--gr);padding:10px 16px;
  background:rgba(0,255,65,.04);margin-bottom:28px;
  box-shadow:4px 4px 0 #000;
}

.about-bio{font-size:.88rem;line-height:1.9;color:#aaa;margin-bottom:16px;}
.about-bio strong{color:var(--w);}
.about-bio a{color:var(--cy);text-decoration:none;}

.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:24px 0;}
.spec-item{
  display:flex;align-items:flex-start;gap:10px;
  font-size:.8rem;color:#888;
  padding:10px;border:2px solid #1a1a1a;
  background:rgba(255,255,255,.02);
  transition:border-color .2s;
}
.spec-item:hover{border-color:#333;}
.spec-i{font-size:1.1rem;flex-shrink:0;}

/* ── WRITEUPS — COMIC GRID ── */
.content-section{background:var(--navy);padding:100px 4vw 120px;position:relative;overflow:hidden;}

.writeups-comic{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-template-rows:auto auto;
  gap:4px;
  background:#000;
  border:4px solid #000;
  margin-top:48px;
}

.wc{
  background:var(--panel);
  padding:24px;
  position:relative;overflow:hidden;
  cursor:pointer;transition:filter .2s;
}
.wc:hover{filter:brightness(1.1);}
.wc:hover .wc-ono{opacity:.3;transform:scale(1.15) rotate(-3deg);}

.wc-featured{
  grid-column:span 2;
  background:var(--navy);
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;padding:0;
}
.wc-featured .wc-body{padding:28px;}
.wc-featured-code{
  background:#000;padding:24px;
  font-family:'Share Tech Mono','Courier New',monospace;
  font-size:.75rem;color:var(--gr);
  border-left:4px solid var(--cy);
  overflow:hidden;position:relative;
}
.wc-featured-code::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,#000 0%,transparent 30%);
  pointer-events:none;z-index:1;
}

.wc-ono{
  font-family:'Bangers',cursive;
  position:absolute;bottom:-10px;right:8px;
  font-size:4rem;opacity:.05;line-height:1;
  transition:opacity .3s,transform .3s;
}

.wc-banner{height:5px;margin:-24px -24px 16px;}
.bw{background:var(--pk);}
.bm{background:var(--cy);}
.bi{background:var(--or);}
.ba{background:var(--y);}
.bf{background:var(--gr);}

.wc-meta{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.wc-cat{
  font-family:'Bangers',cursive;font-size:.75rem;letter-spacing:2px;
  padding:2px 8px;border:1.5px solid currentColor;
}
.cc-web{color:var(--pk);}
.cc-mob{color:var(--cy);}
.cc-iot{color:var(--or);}
.cc-api{color:var(--y);}
.cc-fw {color:var(--gr);}

.wc-diff{font-size:.65rem;letter-spacing:2px;margin-left:auto;}
.de{color:var(--gr);}.dm{color:var(--y);}.dh{color:var(--pk);}

.wc-title{
  font-family:'Bangers',cursive;font-size:1.2rem;letter-spacing:.5px;
  color:var(--w);margin-bottom:8px;line-height:1.1;transition:color .2s;
}
.wc:hover .wc-title{color:var(--y);}
.wc-excerpt{font-size:.75rem;color:#666;line-height:1.6;margin-bottom:12px;}
.wc-read{
  font-family:'Bangers',cursive;letter-spacing:2px;font-size:.85rem;
  color:var(--cy);text-decoration:none;transition:color .2s;
}
.wc-read:hover{color:var(--y);}

/* ── LABS — TERMINAL SECTION ── */
.labs-section{
  background:var(--dk);
  padding:100px 4vw 120px;
  position:relative;overflow:hidden;
}
.labs-section::before{
  content:'H4CK!';font-family:'Bangers',cursive;
  font-size:20rem;color:rgba(0,200,255,.025);
  position:absolute;top:0;right:-40px;line-height:1;
  pointer-events:none;
}

/* SECRET TERMINAL */
.secret-terminal{
  background:#000;border:3px solid var(--cy);
  margin-bottom:48px;
  box-shadow:0 0 30px rgba(0,200,255,.2),6px 6px 0 #000;
  position:relative;
  max-width:700px;
}
.term-bar{
  background:#111;padding:10px 16px;
  display:flex;align-items:center;gap:8px;
  border-bottom:2px solid #1a1a1a;
}
.td{width:12px;height:12px;border-radius:50%;}
.td-r{background:#ff5f57;}.td-y{background:#febc2e;}.td-g{background:#28c840;}
.term-title{font-size:.75rem;letter-spacing:3px;color:#555;margin-left:auto;margin-right:auto;}

.term-body{padding:20px;}
.tl{margin-bottom:4px;font-size:.82rem;}
.tp{color:var(--cy);}.tc{color:var(--y);}.to{color:var(--gr);}
.te{color:var(--pk);}.tg{color:#888;}
.blink{display:inline-block;width:9px;height:1em;background:var(--gr);vertical-align:text-bottom;animation:blink 1s step-end infinite;}
@keyframes blink{50%{opacity:0;}}

/* interactive input */
.term-input-row{
  display:flex;align-items:center;gap:0;
  margin-top:12px;border-top:1px solid #111;padding-top:12px;
}
.term-input{
  flex:1;background:transparent;border:none;
  color:var(--gr);font-family:'Share Tech Mono','Courier New',monospace;
  font-size:.82rem;outline:none;caret-color:var(--gr);
}
.term-prompt-label{color:var(--cy);font-size:.82rem;white-space:nowrap;margin-right:6px;}

.labs-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.lab-card{
  border:3px solid #1a1a1a;padding:22px;
  background:rgba(0,200,255,.02);
  position:relative;cursor:pointer;transition:all .2s;
}
.lab-card:hover{border-color:var(--cy);background:rgba(0,200,255,.06);transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,200,255,.1);}
.lc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.lc-diff{font-size:.65rem;letter-spacing:3px;}
.lc-icon{font-size:1.6rem;opacity:.5;}
.lc-name{font-family:'Bangers',cursive;font-size:1.35rem;color:var(--cy);margin-bottom:6px;}
.lc-desc{font-size:.78rem;color:#666;line-height:1.5;margin-bottom:10px;}
.lc-tags{display:flex;gap:5px;flex-wrap:wrap;}
.lc-tag{font-size:.6rem;letter-spacing:1px;color:#444;border:1px solid #111111;padding:2px 6px;}

@keyframes xGlow{0%,100%{text-shadow:none;}50%{text-shadow:0 0 10px var(--or);}}

/* locked lab */
.lab-locked-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;
  font-family:'Bangers',cursive;font-size:1.1rem;letter-spacing:2px;color:#222;
}

/* ── CONSULTING — SPLIT PANEL ── */
.consult-section{
  background:var(--navy);
  display:grid;grid-template-columns:1fr 1fr;
  position:relative;overflow:hidden;
}

.consult-left{
  padding:100px 6vw 100px 4vw;
  border-right:4px solid #000;
  position:relative;
}
.consult-right{padding:100px 4vw 100px 6vw;}

/* service list */
.service-list{display:flex;flex-direction:column;gap:0;border:3px solid #1a1a1a;margin-top:32px;}
.svc{
  padding:20px 24px;border-bottom:2px solid #1a1a1a;
  cursor:pointer;transition:all .2s;position:relative;overflow:hidden;
}
.svc:last-child{border-bottom:none;}
.svc::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  transition:width .25s;
}
.svc:hover::before{width:4px;}
.svc:hover{background:rgba(255,255,255,.02);padding-left:28px;}
.sv-pk::before{background:var(--pk);}.sv-cy::before{background:var(--cy);}
.sv-y::before{background:var(--y);}.sv-or::before{background:var(--or);}

.svc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.svc-title{font-family:'Bangers',cursive;font-size:1.3rem;letter-spacing:1px;}
.sv-pk .svc-title{color:var(--pk);}
.sv-cy .svc-title{color:var(--cy);}
.sv-y  .svc-title{color:var(--y);}
.sv-or .svc-title{color:var(--or);}
.svc-icon{font-size:1.5rem;opacity:.6;}
.svc-desc{font-size:.78rem;color:#666;line-height:1.6;margin-bottom:10px;}
.svc-pills{display:flex;flex-wrap:wrap;gap:5px;}
.svc-pill{font-size:.6rem;letter-spacing:1px;color:#555;border:1px solid #222;padding:2px 7px;}

/* contact form */
.cta-box{
  background:var(--dk);
  border:4px solid var(--y);
  box-shadow:8px 8px 0 var(--pk),12px 12px 0 #000;
  padding:32px 28px;margin-bottom:24px;
}
.cta-box h3{
  font-family:'Bangers',cursive;font-size:2.2rem;
  color:var(--y);text-shadow:3px 3px 0 var(--pk);
  margin-bottom:6px;
}
.cta-box p{font-size:.82rem;color:#888;margin-bottom:20px;line-height:1.7;}
.ff{margin-bottom:12px;}
.ff label{display:block;font-size:.65rem;letter-spacing:3px;color:#444;margin-bottom:5px;}
.ff input,.ff select,.ff textarea{
  width:100%;background:#090909;border:2px solid #111111;
  color:var(--w);font-family:'Share Tech Mono','Courier New',monospace;
  font-size:.82rem;padding:10px 14px;outline:none;
  transition:border-color .2s;appearance:none;
}
.ff input:focus,.ff select:focus,.ff textarea:focus{border-color:var(--cy);}
.ff textarea{resize:vertical;min-height:80px;}
.form-btn{
  width:100%;font-family:'Bangers',cursive;font-size:1.2rem;
  letter-spacing:3px;color:#000;background:var(--y);
  padding:14px;border:3px solid #000;
  box-shadow:4px 4px 0 var(--pk),7px 7px 0 #000;
  cursor:pointer;transition:transform .1s,box-shadow .1s;
}
.form-btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--pk),9px 9px 0 #000;}

.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.trust-item{border:2px solid #111;padding:12px;font-size:.75rem;color:#666;}
.trust-item strong{color:var(--cy);display:block;margin-bottom:3px;font-size:.82rem;}

/* ── TESTIMONIALS ── */
.testi-section{background:var(--dk);padding:90px 4vw;position:relative;overflow:hidden;}
.testi-comic{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:4px;background:#000;border:4px solid #000;
  margin-top:48px;
}
.testi-panel{
  background:var(--panel);padding:28px;position:relative;
}
.testi-panel::before{
  content:'"';font-family:'Bangers',cursive;
  font-size:6rem;color:rgba(255,215,0,.06);
  position:absolute;top:-10px;left:12px;line-height:1;
}
.tq{font-family:'Permanent Marker',cursive;font-size:.85rem;color:#ccc;line-height:1.7;margin-bottom:20px;}
.ta{display:flex;align-items:center;gap:12px;}
.ta-av{
  width:40px;height:40px;border-radius:50%;background:#1a1a1a;
  border:2px solid #333;display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;flex-shrink:0;
}
.ta-name{font-family:'Bangers',cursive;font-size:1rem;letter-spacing:1px;color:var(--y);}
.ta-role{font-size:.65rem;letter-spacing:1px;color:#444;}

/* ── NEWSLETTER ── */
.nl-section{
  background:#000;border-top:5px solid var(--y);
  box-shadow:0 -4px 0 var(--pk);
  padding:80px 4vw;text-align:center;
  position:relative;overflow:hidden;
}
.nl-section::before{
  content:'📧';font-size:18rem;position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  opacity:.02;pointer-events:none;
}
.nl-title{
  font-family:'Bangers',cursive;
  font-size:clamp(2.5rem,6vw,4rem);
  color:var(--y);text-shadow:4px 4px 0 var(--pk),6px 6px 0 #000;
  margin-bottom:12px;
}
.nl-sub{font-size:.9rem;color:#666;margin-bottom:32px;line-height:1.7;}
.nl-form{
  display:flex;gap:0;max-width:560px;margin:0 auto 14px;
  border:4px solid var(--y);box-shadow:6px 6px 0 var(--pk),9px 9px 0 #000;
}
.nl-in{
  flex:1;background:#000;border:none;
  color:var(--w);font-family:'Share Tech Mono','Courier New',monospace;
  font-size:.9rem;padding:16px 20px;outline:none;
}
.nl-in::placeholder{color:#333;}
.nl-btn2{
  font-family:'Bangers',cursive;font-size:1.1rem;letter-spacing:3px;
  background:var(--y);color:#000;border:none;border-left:3px solid #000;
  padding:16px 26px;cursor:pointer;transition:background .15s;
}
.nl-btn2:hover{background:var(--or);}
.nl-note{font-size:.65rem;color:#333;letter-spacing:2px;}

/* ── FOOTER ── */
footer{
  background:#000;border-top:5px solid var(--y);
  box-shadow:0 -4px 0 var(--pk);
  padding:60px 4vw 30px;
}
.footer-grid{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:40px;
}
.f-logo{
  font-family:'Bangers',cursive;font-size:2.2rem;
  color:var(--y);text-shadow:3px 3px 0 var(--pk),5px 5px 0 #000;
  display:block;margin-bottom:12px;
}
.footer-brand p{font-size:.78rem;color:#444;line-height:1.7;max-width:220px;}
.soc-links{display:flex;gap:10px;margin-top:16px;}
.soc-lnk{
  width:36px;height:36px;border:2px solid #1a1a1a;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;text-decoration:none;color:#444;transition:all .2s;
}
.soc-lnk:hover{border-color:var(--y);color:var(--y);}
.footer-col h4{font-family:'Bangers',cursive;font-size:1rem;letter-spacing:3px;color:var(--cy);margin-bottom:14px;}
.footer-col ul{list-style:none;}
.footer-col ul li{margin-bottom:7px;}
.footer-col ul a{font-size:.78rem;color:#444;text-decoration:none;transition:color .2s;}
.footer-col ul a:hover{color:var(--y);}
.footer-bottom{
  max-width:1200px;margin:0 auto;
  border-top:1px solid #0f0f0f;padding-top:24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
}
.footer-bottom p{font-size:.72rem;color:#222;}
.footer-bottom a{color:var(--cy);text-decoration:none;}

/* ── KONAMI OVERLAY ── */
#konamiScreen{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.97);z-index:99999;
  align-items:center;justify-content:center;flex-direction:column;
}
#konamiScreen.on{display:flex;}
.ks-inner{text-align:center;animation:ksIn .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes ksIn{from{transform:scale(0) rotate(-20deg);}to{transform:scale(1) rotate(0);}}
.ks-inner h2{font-family:'Bangers',cursive;font-size:clamp(2.5rem,8vw,5rem);color:var(--y);text-shadow:4px 4px 0 var(--pk);margin-bottom:10px;}
.ks-flag{font-family:'Share Tech Mono','Courier New',monospace;color:var(--cy);font-size:1rem;margin-bottom:6px;}
.ks-inner p{color:#555;font-size:.8rem;margin-bottom:28px;}
.ks-close{font-family:'Bangers',cursive;font-size:1.1rem;letter-spacing:3px;background:var(--pk);color:#fff;border:3px solid #000;padding:10px 32px;cursor:pointer;box-shadow:4px 4px 0 #000;}

/* ── FLOATING MASCOT ── */
#floatMascot{
  position:fixed;bottom:20px;right:20px;
  width:90px;cursor:pointer;z-index:8900;
  animation:floatBob 3s ease-in-out infinite;
  transition:transform .2s;
}
#floatMascot img{
  width:90px;
  filter:drop-shadow(0 4px 15px rgba(255,107,26,.5));
  display:block;
}
#floatMascot:hover{transform:scale(1.15) rotate(5deg);}
@keyframes floatBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

#mascotBubble{
  position:fixed;bottom:116px;right:10px;
  background:var(--w);color:#000;
  font-family:'Permanent Marker',cursive;
  font-size:.78rem;padding:10px 14px;
  border:3px solid #000;border-radius:16px 16px 4px 16px;
  box-shadow:3px 3px 0 #000;max-width:180px;text-align:center;
  opacity:0;pointer-events:none;z-index:8901;
  transition:opacity .3s;
}
#mascotBubble.show{opacity:1;}

/* ── EASTER EGG TOOLTIP ── */
.ee-tip{
  border-bottom:1px dashed rgba(0,200,255,.25);
  position:relative;cursor:help;
}
.ee-tip::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);
  background:#000;border:2px solid var(--cy);
  color:var(--cy);font-family:'Share Tech Mono','Courier New',monospace;
  font-size:.68rem;padding:5px 10px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;z-index:100;
}
.ee-tip:hover::after{opacity:1;}

/* ── SECTION HEADER ── */
.sec-label{font-size:.68rem;letter-spacing:6px;color:var(--cy);margin-bottom:12px;display:flex;align-items:center;gap:12px;}
.sec-label::before{content:'';width:24px;height:2px;background:var(--cy);display:block;}
.sec-title{font-family:'Bangers',cursive;font-size:clamp(2.5rem,5vw,4rem);line-height:1;margin-bottom:12px;}
.sec-sub{font-size:.88rem;line-height:1.8;color:#666;max-width:560px;margin-bottom:0;}

/* ── SCROLL REVEAL ── */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .6s,transform .6s;}
.reveal.up{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-36px);transition:opacity .6s,transform .6s;}
.reveal-l.up{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(36px);transition:opacity .6s,transform .6s;}
.reveal-r.up{opacity:1;transform:translateX(0);}

/* ── PARTICLES ── */
.spark{position:fixed;pointer-events:none;user-select:none;font-size:1.1rem;animation:spUp linear both;z-index:9300;}
@keyframes spUp{from{transform:translateY(0) rotate(0);opacity:1;}to{transform:translateY(-100vh) rotate(720deg);opacity:0;}}
.boom-p{position:fixed;pointer-events:none;font-size:1.3rem;z-index:99000;animation:boomOut .8s ease-out forwards;}
@keyframes boomOut{0%{transform:translate(0,0) scale(0);opacity:1;}100%{transform:translate(var(--tx),var(--ty)) scale(1);opacity:0;}}

/* ── TOAST ── */
.toast{
  position:fixed;bottom:30px;left:30px;
  background:#000;border:3px solid var(--cy);
  color:var(--cy);font-family:'Share Tech Mono','Courier New',monospace;
  font-size:.78rem;padding:12px 18px;
  box-shadow:5px 5px 0 #000;z-index:99999;
  animation:toastIn .3s ease-out;
}
@keyframes toastIn{from{transform:translateX(-60px);opacity:0;}to{transform:translateX(0);opacity:1;}}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .hero{grid-template-columns:1fr;}
  .hero-right-panel{display:none;}
  .surface-panels{grid-template-columns:repeat(3,1fr);}
  .surf-panel:nth-child(3){border-right:none;}
  .surf-panel:nth-child(1),.surf-panel:nth-child(2),.surf-panel:nth-child(3){border-bottom:4px solid #000;}
  .about-inner{grid-template-columns:1fr;}
  .wanted-poster{max-width:340px;margin:0 auto;}
  .writeups-comic{grid-template-columns:1fr;grid-template-rows:auto;}
  .wc-featured{grid-column:span 1;display:block;}
  .wc-featured-code{display:none;}
  .labs-grid{grid-template-columns:1fr 1fr;}
  .consult-section{grid-template-columns:1fr;}
  .consult-left{border-right:none;border-bottom:4px solid #000;}
  .testi-comic{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .hero-left-panel{padding:40px 4vw 80px;}
  .surface-panels{grid-template-columns:1fr;}
  .surf-panel{border-right:none !important;border-bottom:4px solid #000;}
  .surf-panel:last-child{border-bottom:none;}
  .spec-grid{grid-template-columns:1fr;}
  .trust-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .nl-form{flex-direction:column;}
  .nl-btn2{border-left:none;border-top:3px solid #000;}
  .labs-grid{grid-template-columns:1fr;}
}

/* WordPress full-bleed overrides — forces hero/sections to escape WP wrappers */
.home .hero,
.front-page .hero,
body.home section.hero {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}
/* Kill any WP container max-width on the homepage */
body.home .wp-site-blocks,
body.home .site-content,
body.home .entry-content,
body.home main,
body.home #main,
body.home #content,
body.home .site-main {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
/* hero logo text fallback */
.hero-logo-text-fallback {
  font-family: 'Bangers', cursive;
  font-size: 4rem;
  color: var(--y);
  text-shadow: 4px 4px 0 var(--pk), 7px 7px 0 #000;
  text-align: center;
  line-height: 1;
  letter-spacing: 3px;
}
/* WordPress compatibility */
.wp-block-image img{max-width:100%;height:auto;}
.alignleft{float:left;margin-right:1.5rem;}
.alignright{float:right;margin-left:1.5rem;}
.aligncenter{display:block;margin:0 auto;}
.screen-reader-text{clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;width:1px;}
.single-post{padding:100px 4vw 80px;max-width:860px;margin:0 auto;}
.single-post h1{font-family:'Bangers',cursive;font-size:clamp(2rem,5vw,3.5rem);color:var(--y);text-shadow:3px 3px 0 var(--pk),5px 5px 0 #000;margin-bottom:16px;line-height:1;}
.single-post .post-content{font-size:.95rem;line-height:1.85;color:#aaa;}
.single-post .post-content h2{font-family:'Bangers',cursive;color:var(--cy);font-size:1.8rem;margin:32px 0 12px;}
.single-post .post-content pre{background:#000;border:2px solid var(--cy);padding:20px;overflow-x:auto;font-size:.8rem;color:#00ff41;margin:20px 0;}
.single-post .post-content code{background:rgba(0,200,255,.1);color:var(--cy);padding:2px 6px;font-size:.85em;}
.single-post .post-content a{color:var(--cy);text-decoration:underline;}
.post-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.75rem;color:#555;margin-bottom:32px;}
.writeups-archive{max-width:1200px;margin:0 auto;padding:100px 4vw 80px;}
.writeups-archive h1{font-family:'Bangers',cursive;font-size:clamp(2.5rem,5vw,4rem);color:var(--pk);text-shadow:3px 3px 0 #000;margin-bottom:40px;}
