:root{
    --bg:#020408;
    --panel:#071014;
    --accent:#00ff88;
    --accent-2:#20ffa8;
    --text:#b2dacb;
    --muted:#7fb8a4;
    --line:rgba(255,255,255,0.06);
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0;font-family:ui-monospace,Menlo,Monaco,"Roboto Mono","Courier New",monospace;background:radial-gradient(1200px 700px at 15% 5%, #03131b 0%, var(--bg) 45%), var(--bg);color:var(--text)}
  .container{max-width:1100px;margin:32px auto;padding:0 20px}
  
  /* Topbar */
  .topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00));backdrop-filter:blur(4px);border-bottom:1px solid var(--line)}
  .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
  .logo{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--accent);font-weight:800;background:linear-gradient(135deg,#042 0%, #023 100%);box-shadow:inset 0 8px 30px rgba(0,255,136,0.06)}
  .brandtext .name{font-size:14px}
  .brandtext .tagline{display:block;font-size:11px;color:var(--muted)}
  .nav{display:flex;gap:10px}
  .navlink{padding:8px 12px;border-radius:10px;color:var(--muted);text-decoration:none;border:1px solid transparent}
  .navlink.active,.navlink:hover{color:#052; background:linear-gradient(90deg, rgba(0,255,136,0.08), rgba(0,255,136,0.02));border-color:var(--line)}
  .burger{display:none;background:none;border:0;cursor:pointer}
  .burger span{display:block;width:24px;height:2px;background:var(--text);margin:5px 0}
  
  /* Layouts */
  .hero{display:grid;grid-template-columns:1fr 420px;gap:24px;align-items:start}
  .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.03));border:1px solid var(--line);padding:20px;border-radius:14px}
  .card.glass{background:rgba(255,255,255,0.02)}
  .lead{color:var(--muted);margin:6px 0 14px;line-height:1.55}
  .actions{display:flex;gap:10px;align-items:center;margin:10px 0}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:transparent;border:1px solid var(--line);text-decoration:none;color:var(--text);transition:transform .2s, box-shadow .2s}
  .btn:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,255,136,0.06)}
  .btn.primary{border-color:rgba(0,255,136,0.2);background:linear-gradient(180deg, rgba(0,255,136,0.10), rgba(0,255,136,0.02))}
  .btn .tag{font-size:12px;color:var(--accent);padding:3px 8px;border-radius:8px;border:1px solid rgba(0,255,136,0.15);background:rgba(0,255,136,0.03)}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
  
  /* Terminal */
  .terminal{background:#000;border-radius:12px;padding:16px;color:#9ae8b6;font-size:13px;line-height:1.45;border:1px solid var(--line);position:relative;overflow:hidden}
  .terminal .prompt{opacity:0.95}
  .termtext{margin:10px 0 0;font-size:12px;color:#9ae8b6}
  .matrix{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(180deg, rgba(0,255,136,0.04), transparent 40%);mix-blend-mode:overlay}
  
  /* Lists / downloads */
  .title{color:var(--accent)}
  .list{list-style:none;padding:0;margin:0}
  .item{margin:6px 0}
  .btn.block{justify-content:space-between;width:100%}
  .btn .file{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .btn .meta{font-size:12px;color:var(--muted)}
  .empty{padding:18px;border:1px dashed var(--line);border-radius:12px;color:var(--muted)}
  
  /* Details */
  .details{margin-top:12px}
  .steps{line-height:1.6;color:var(--muted)}
  
  /* Footer */
  .footer{max-width:1100px;margin:40px auto 80px;padding:18px;color:#6ea696;text-align:center;font-size:13px;border-top:1px solid var(--line)}
  
  /* Glitch title */
  .glitch{position:relative;color:var(--accent)}
  .glitch::after,.glitch::before{content:attr(data-text);position:absolute;left:0;top:0;opacity:0.6}
  .glitch::before{transform:translate(2px,-1px);color:rgba(0,255,136,0.6);clip-path:polygon(0 0,100% 0,100% 45%,0 45%)}
  .glitch::after{transform:translate(-2px,1px);color:rgba(0,100,60,0.45);clip-path:polygon(0 55%,100% 55%,100% 100%,0 100%)}
  
  /* Responsive */
  @media(max-width:980px){
    .hero{grid-template-columns:1fr}
    .grid-3{grid-template-columns:1fr 1fr}
  }
  @media(max-width:640px){
    .nav{display:none}
    .burger{display:block}
    .grid-3{grid-template-columns:1fr}
  }