/* Performance-optimized Matrix feel */
:root{
  --bg:#050806; --fg:#d4fcd1; --muted:#6de36f; --accent:#00ff95; --btn-fg:#000;
  --glass:rgba(5,12,8,0.5); --line:rgba(0,255,149,0.22);
  --shadow:0 0 20px rgba(0,255,149,0.12), 0 0 6px rgba(0,255,149,0.25) inset;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; background:var(--bg); color:var(--fg);
  font-family:ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; line-height:1.6; letter-spacing:.2px; scroll-behavior:smooth; }

/* Canvases are viewport-only */
#matrixBack,#matrixFront{ position:fixed; inset:0; pointer-events:none; }
#matrixBack{ z-index:-3; } #matrixFront{ z-index:-2; mix-blend-mode:screen; }

/* Lightweight scanlines (no blend modes needed) */
.scanlines{ pointer-events:none; position:fixed; inset:0; z-index:-1;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.14) 0 1px, transparent 2px 4px);
  opacity:.3; }

/* Header */
.header{ position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between;
  padding:10px 18px; border-bottom:1px solid var(--line); }
.glass{ background:var(--glass); box-shadow:var(--shadow); }
.brand{ display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:1px; }
.brand .lock{ color:var(--accent); filter:drop-shadow(0 0 6px rgba(0,255,149,.6)); }
.brand .blink{ animation:blink 1s infinite steps(2); color:var(--muted); }
@keyframes blink{ 50%{ opacity:0; } }
.nav a{ color:var(--fg); text-decoration:none; margin-left:12px; font-size:13px; padding:6px 10px; border:1px solid transparent; border-radius:6px; }
.nav a:hover{ border-color:var(--line); background:rgba(0,255,149,.05); }

/* Parallax container */
.wrap{ perspective:800px; transform-style:preserve-3d; will-change:transform; transition:transform .06s ease-out; }
.layer{ transform: translateZ(0); will-change: transform; }

.hero{ min-height:64vh; display:flex; flex-direction:column; justify-content:center; padding:min(6vw,80px); }
h1{ font-size:clamp(28px,4vw,52px); margin:0 0 10px 0; text-shadow:0 0 18px rgba(0,255,149,.12); }
.muted{ color:var(--muted); }
.tag{ color:#a9f7a6; opacity:.9; margin:8px 0 14px 0; }
.cta{ display:flex; gap:12px; margin-bottom:6px; }

/* Buttons */
.btn{ display:inline-block; padding:10px 14px; border-radius:8px; font-weight:700; font-size:13px;
  text-decoration:none; color:#000; background:var(--accent); box-shadow:0 0 10px rgba(0,255,149,.2); }
.btn:hover{ transform:translateY(-1px); }
a.btn,a.btn:link,a.btn:visited,a.btn:hover,a.btn:focus,a.btn:active{ color:#000 !important; text-decoration:none; }

.section{ padding:min(8vw,90px) min(6vw,80px); border-top:1px dashed var(--line);
  background: linear-gradient(to bottom, rgba(0,255,149,.02), transparent 60%); }
h2{ font-size:clamp(20px,2.4vw,32px); margin:0 0 12px 0; }
.hash{ color:var(--muted); margin-right:6px; }

.grid-2{ display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.panel{ border:1px solid var(--line); padding:14px; border-radius:12px; background:rgba(0,255,149,.035); box-shadow:var(--shadow); }
.panel h3{ margin-top:0; }

.social{ display:flex; gap:12px; margin-top:14px; }
.icon{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border:1px solid var(--line); border-radius:8px; color:var(--fg); background:rgba(0,255,149,.03); text-decoration:none; }
.icon:hover{ background:rgba(0,255,149,.08); }

.footer{ margin-top:26px; display:flex; gap:10px; justify-content:space-between; align-items:center; font-size:12px; opacity:.75; }
.small{ font-size:11px; opacity:.85; }

@media (max-width:980px){ .grid-2{ grid-template-columns:1fr; } }

/* Readable links */
a{ color:var(--muted); text-decoration-color:rgba(0,255,149,.5); }
a:visited{ color:var(--muted); }
a:hover{ color:var(--accent); text-decoration-thickness:2px; }

/* Glitch headers (kept subtle) */
.glitch-h{ position:relative; text-shadow:0 0 6px rgba(0,255,149,.22), 0 0 14px rgba(0,255,149,.12); }
.glitch-h::before,.glitch-h::after{ content:attr(data-text); position:absolute; inset:0; opacity:0; pointer-events:none; }
.glitch-h:hover::before{ opacity:.25; transform:translate(1px,0); color:#6de36f; }
.glitch-h:hover::after{ opacity:.2; transform:translate(-1px,0); color:#00ffa0; }