:root{
  --bg:#020303; --txt:#b8ffd6; --muted:#7fe9c3;
  --accent:#20ff9d; --accent2:#00d0ff; --warn:#ff3b81;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt); font-family:var(--mono);
  text-shadow:0 0 1px rgba(0,255,146,.25);
  overflow-x:hidden;
}

/* cinematic background layers */
#shader,#matrix{position:fixed; inset:0; z-index:-3}
#matrix{z-index:-2; opacity:.2}
.scanlines{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px, rgba(255,255,255,.04) 2px 3px);
  mix-blend-mode:overlay; opacity:.25;
}
.noise{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence baseFrequency=".9" numOctaves="2" type="fractalNoise"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity=".15"/></svg>');
  mix-blend-mode:soft-light; animation:grain 6s steps(8) infinite; opacity:.06;
}
.vignette{position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(1300px 700px at 50% 30%, transparent, #000 70%);
}
@keyframes grain{to{transform:translate3d(0,0,0)}}

/* layout */
.wrap{width:min(1120px,92vw); margin:0 auto}
.hud{display:flex; align-items:center; justify-content:space-between; padding:20px 0}
.logo{font-weight:900; font-size:34px; letter-spacing:.6px; color:#e6fff4;
  text-decoration:none; text-shadow:0 0 14px rgba(32,255,157,.9), 0 0 40px rgba(0,208,255,.35)}
.glitch{position:relative; display:inline-block}
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; width:100%;
  clip-path:inset(0 0 0 0); opacity:.9;
}
.glitch::before{transform:translate(2px,-1px); color:#ff2a6d; mix-blend-mode:screen; animation:gl1 2s infinite steps(20)}
.glitch::after{transform:translate(-2px,1px); color:#00d0ff; mix-blend-mode:screen; animation:gl2 2.2s infinite steps(22)}
@keyframes gl1{50%{clip-path:inset(0 0 80% 0)}}
@keyframes gl2{50%{clip-path:inset(80% 0 0 0)}}

.nav a{color:var(--muted); margin-left:18px; text-decoration:none; border-bottom:1px dotted transparent}
.nav a:hover{color:var(--txt); border-color:var(--accent)}
.mute{margin-left:18px; background:transparent; border:1px dashed #0c2; color:#9dffbf; border-radius:10px; padding:6px 10px; cursor:pointer}
.mute:hover{border-style:solid}

/* grid layout */
.stage{display:grid; grid-template-columns:1.15fr .85fr; gap:24px; align-items:start}
.left{min-width:0}
.right{display:grid; gap:14px}

/* terminal */
.terminal{background:rgba(3,12,6,.65); border:1px solid #0c2; border-radius:14px; box-shadow:0 25px 60px rgba(0,0,0,.45) inset}
.term-head{display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px dashed #0c2; color:#8efcbb}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.red{background:#ff5566}.yellow{background:#f3d36b}.green{background:#49f39b}
.title{margin-left:6px; opacity:.8}
.term-feed{padding:14px; height:320px; overflow:auto; font-size:14px; line-height:1.5; color:#b8ffd6}
.prompt{display:flex; gap:10px; align-items:center; padding:12px 14px; border-top:1px dashed #0c2}
.path{color:#9dffbf}
.term-input{flex:1; background:transparent; border:none; outline:none; color:#eafff6; font-family:var(--mono); font-size:14px}

/* ticker */
.ticker{white-space:nowrap; overflow:hidden; border:1px dashed #0c2; border-radius:12px}
.ticker span{display:inline-block; padding:10px 24px; animation:ticker 24s linear infinite}
@keyframes ticker{from{transform:translateX(100%)} to{transform:translateX(-100%)}}

/* cards */
.card{padding:18px; text-decoration:none; color:#eafff6;
  background:linear-gradient(180deg,rgba(5,20,12,.72),rgba(4,14,10,.6));
  border:1px solid #0c2; border-radius:16px; box-shadow:0 10px 40px rgba(0,0,0,.35)}
.card h3{margin:0 0 6px; font-size:18px}
.card p{margin:0; color:#a6ffd2}
.card:hover{box-shadow:0 0 24px rgba(32,255,157,.35)}
.c1{border-color:#17ff9d} .c2{border-color:#00d0ff} .c3{border-color:#8dffea} .c4{border-color:#baffc9}

.footer{
  padding:22px 0;
  border-top:1px solid #0a2417;
  margin-top:36px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  color:#79cfa6;
}

.socials{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

/* icon buttons */
.social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px; height:46px;
  border:1px solid #0c2;
  border-radius:12px;
  text-decoration:none;
  position:relative;
  transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  background:linear-gradient(180deg,rgba(5,20,12,.6),rgba(4,14,10,.55));
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.social:hover{
  transform:translateY(-2px);
  border-color:#14d88a;
  box-shadow:0 0 18px rgba(32,255,157,.35);
}
.social svg{
  width:22px; height:22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px currentColor);
}

/* neon brand tints */
.insta { color:#ff4db8; }
.yt    { color:#ff3b3b; }
.mail  { color:#20ff9d; }
.li    { color:#00b1ff; }
.med   { color:#00ff95; }

/* copyright line */
.copy{ font-size:12px; opacity:.8 }

/* mobile spacing */
@media (max-width:640px){
  .social { width:44px; height:44px }
  .social svg{ width:20px; height:20px }
}


/* boot overlay */
#boot{position:fixed; inset:0; background:#000; color:#9dffbf; z-index:10; display:flex; flex-direction:column; align-items:center; justify-content:center}
.bootlog{width:min(900px,86vw); height:min(60vh,460px); border:1px solid #0c2; padding:16px; overflow:auto; background:#020; box-shadow:0 0 50px rgba(32,255,157,.25) inset}
.press{margin-top:16px; font-size:12px; color:#7fe9c3; opacity:.7}
.press span{border-bottom:1px dotted #7fe9c3}
#boot.fadeout{animation:bootout .35s forwards}
@keyframes bootout{to{opacity:0;visibility:hidden}}

/* hacker extras */
.ascii { font-family: monospace; font-size: 14px; white-space: pre; color:#20ff9d;
  text-shadow:0 0 8px #20ff9d, 0 0 16px #00d0ff; margin-bottom:20px; }
.neon { animation:flicker 2s infinite alternate; }
@keyframes flicker { 0%,19%,21%,23%,25%,54%,56%,100%{opacity:1;} 20%,24%,55%{opacity:.4;} }
.typewriter { overflow:hidden; border-right:.15em solid #20ff9d; white-space:nowrap;
  animation:typing 3.5s steps(40,end), blink .75s step-end infinite; }
@keyframes typing { from{width:0} to{width:100%} }
@keyframes blink { 50%{border-color:transparent} }
ul.hacker-list{list-style:none;padding-left:0}
ul.hacker-list li::before{content:"> ";color:#20ff9d;text-shadow:0 0 6px #20ff9d}

/* responsive */
@media (max-width:980px){ .stage{grid-template-columns:1fr} }

/* ...keep all existing hacker.css from before... */

/* general mobile spacing */
.wrap { padding: 0 8px; }

/* stack layout on phones */
@media (max-width: 980px){
  .stage{ grid-template-columns:1fr; gap:16px }
  .term-feed{ height: 46vh }
  .card h3{ font-size: 17px }
  .card p { font-size: 14px }
  .logo    { font-size: 28px }
  .nav a   { margin-left: 12px }
  .cta.big { font-size: 18px; padding: 16px 22px }
  .ticker span { animation-duration: 32s }
}

/* big tap targets */
a, .cta, .mute, .card { min-height: 44px; }

/* terminal input bigger on phones */
@media (max-width: 640px){
  .term-input{ font-size:16px; padding:8px 0 }
  .path{ font-size: 14px }
}

/* boot overlay safe text size */
.bootlog { font-size: 13px; }
.press { font-size: 12px; }
/* global skull cursor */
/* skull cursor globally */
html, body {
  cursor: url("/cursor/skull.png") 32 32, auto !important;
}

a, button, .cta, .nav a {
  cursor: url("/cursor/skull.png") 32 32, pointer !important;
}

.feed-grid {
  display: grid;
  gap: 28px;
  margin-top: 30px;
}

.feed-source {
  border: 1px solid #0c2;
  border-radius: 14px;
  padding: 16px;
  background: rgba(5, 20, 12, 0.6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.feed-title {
  font-size: 22px;
  margin: 0 0 12px;
  color: #20ff9d;
  text-shadow: 0 0 6px #20ff9d;
}

.feed-source ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feed-card {
  margin: 8px 0;
}

.feed-card a {
  color: #eafff6;
  text-decoration: none;
  transition: color 0.2s;
}

.feed-card a:hover {
  color: #ff4db8;
  text-shadow: 0 0 8px #ff4db8;
}

.courses-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 28px;
}

.card {
  background: rgba(5, 20, 12, .7);
  border: 1px solid #0c2;
  padding: 18px;
  border-radius: 16px;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #20ff9d;
}

.card p {
  margin: 0 0 14px;
  color: #a6ffd2;
  font-size: 14px;
}

.cta.small {
  display: inline-block;
  padding: 8px 14px;
  background: #00d0ff;
  color: #020303;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: box-shadow .2s;
}

.cta.small:hover {
  box-shadow: 0 0 12px rgba(0,208,255,.6);
}

.arsenal-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin: 30px 0 50px;
}

.arsenal-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 600px;
  margin: 20px auto;
}

.arsenal-form label {
  font-weight: bold;
  color: #20ff9d;
}

.arsenal-form input,
.arsenal-form textarea {
  background: #0c1510;
  border: 1px solid #20ff9d;
  border-radius: 8px;
  padding: 10px;
  color: #eafff6;
  font-size: 14px;
}

.arsenal-form button {
  background: #ff4db8;
  color: #020303;
  font-weight: bold;
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: box-shadow .2s;
}

.arsenal-form button:hover {
  box-shadow: 0 0 12px rgba(255,77,184,.6);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  body {
    font-size: 14px;
    padding: 10px;
  }

  header nav ul {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .card, .section {
    width: 100%;
    margin: 5px 0;
  }
}