:root { --neon: #00f2ff; --up: #22c55e; --bg: #010409; --bannerH: 0px; }

body { background-color: var(--bg); color: #e6edf3; font-family: 'Inter', sans-serif; overflow-x: hidden; }
.grid-bg { position: fixed; inset: 0; background-image: radial-gradient(circle at center, #0a1224 0%, #010409 100%); z-index: -1; }
.glass-panel { background: rgba(13, 17, 23, 0.9); border: 1px solid #30363d; border-radius: 12px; }
.btn-cta { background: linear-gradient(180deg, #00f2ff 0%, #0072ff 100%); color: #000; font-weight: 900; box-shadow: 0 0 25px rgba(0, 242, 255, 0.4); }
.sticky-footer { position: fixed; bottom: 0; left: 0; width: 100%; background: #0d1117; border-top: 2px solid var(--neon); z-index: 1000; padding: 15px; }

#cookie-banner {
  position: fixed;
  top: 0; left: 0; width: 100%;
  background: #000;
  z-index: 5000;
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #333;
  font-size: 10px;
  color: #888;
}

/* TOP ticker (kept on mobile, one row only) */
.top-ticker {
  position: sticky;
  top: var(--bannerH);
  z-index: 4500;
  background: rgba(0,0,0,0.9);
  border-bottom: 1px solid rgb(30 41 59 / 1);
  overflow: hidden;
  padding: 8px 0;
}
@keyframes ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.ticker-wrap { animation: ticker 25s linear infinite; will-change: transform; }
.ticker-row { display:flex; flex-wrap:nowrap; white-space:nowrap; gap: 3rem; }

/* Hacker vibe */
.scanlines::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 242, 255, 0.05) 0px,
    rgba(0, 242, 255, 0.05) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  mix-blend-mode: overlay;
  opacity: .22;
  z-index: 1;
}
.noise::after{
  content:"";
  position:fixed; inset:-20%;
  pointer-events:none;
  background-image:url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22200%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.8%22 numOctaves=%221%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22200%22 height=%22200%22 filter=%22url(%23n)%22 opacity=%220.12%22/%3E%3C/svg%3E');
  animation: noiseMove 6s steps(6) infinite;
  z-index: 2;
  opacity: .25;
  mix-blend-mode: soft-light;
}
@keyframes noiseMove{
  0%{transform:translate(0,0)}
  20%{transform:translate(-5%,3%)}
  40%{transform:translate(4%,-2%)}
  60%{transform:translate(-3%,-4%)}
  80%{transform:translate(5%,2%)}
  100%{transform:translate(0,0)}
}
.glow-border{ border:1px solid rgba(0,242,255,.35); box-shadow: 0 0 18px rgba(0,242,255,.12), inset 0 0 20px rgba(0,242,255,.05); }
.mono-input{ background: rgba(0,0,0,.35); border:1px solid rgba(0,242,255,.25); color:#e6edf3; }
.mono-input:focus{ outline:none; border-color: rgba(0,242,255,.65); box-shadow:0 0 0 3px rgba(0,242,255,.12); }
.hacker-modal{ background: rgba(0,0,0,.78); backdrop-filter: blur(6px); }
.terminal-card{ background: rgba(13, 17, 23, 0.92); border:1px solid rgba(0,242,255,.25); border-radius: 14px; }
.blink{ animation: blink 1.1s steps(1) infinite; }
@keyframes blink{ 50% { opacity: 0; } }

/* Mobile optimisations */
@media (max-width: 640px){
  body{ padding-bottom: 100px; }
  .sticky-footer{ padding: 10px 12px; }
  header{ padding-left: 16px !important; padding-right: 16px !important; padding-top: 56px !important; padding-bottom: 56px !important; }
  h1{ word-break: break-word; }
  .glass-panel{ border-radius: 14px; }
  .mono-input{ font-size: 16px; } /* prevent iOS zoom */
  #start-capture{ width: 100%; }
  #privacy-modal{ padding: 16px !important; }
  #privacy-modal .max-w-2xl{ max-width: 100% !important; }
  #privacy-modal h2{ font-size: 18px; }
  #privacy-modal .text-sm{ font-size: 13px; }
  .terminal-card{ max-height: 85vh; overflow: auto; }
  .top-ticker{ padding: 6px 0; }
  .ticker-row{ gap: 2rem; }
}

@media (max-width: 380px){
  .btn-cta{ padding-left: 14px; padding-right: 14px; }
}
#matrix-canvas{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: .55;
}
header, section, footer, .sticky-footer, .top-ticker, #cookie-banner{
  position: relative;
  z-index: 10;
}
@media (prefers-reduced-motion: reduce){
  #matrix-canvas{ display:none !important; }
}