/* ============ CYBERTACIO — style.css ============ */

:root{
  --bg: #060810;
  --bg2: #0b0f1c;
  --panel: #0d1420;
  --panel-border: #1e2c3d;
  --cyan: #4dfcff;
  --green: #6dffb0;
  --pistachio: #9ad86b;
  --blue-suit: #4a6fb0;
  --orange: #ffb020;
  --red: #ff5c5c;
  --text: #d9f2ff;
  --text-dim: #7d94a8;
  --mono: 'Share Tech Mono', 'VT323', monospace;
  --display: 'VT323', monospace;
  --sans: 'Inter', system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background: radial-gradient(ellipse at 30% 0%, #12203a 0%, var(--bg) 55%, #050608 100%);
  color: var(--text);
  font-family: var(--sans);
  overflow-x:hidden;
  min-height:100vh;
}

a{ color:inherit; text-decoration:none; }
code{ font-family: var(--mono); }
::selection{ background: var(--cyan); color:#001217; }

/* ---------- BOOT SCREEN ---------- */
.boot{
  position:fixed; inset:0; z-index:999;
  background:#000;
  color: var(--green);
  font-family: var(--mono);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  overflow:hidden;
}
.boot-inner{ max-width:700px; width:90%; text-align:left; }
.boot-ascii{
  color: var(--cyan);
  font-size: clamp(7px, 1.6vw, 13px);
  line-height:1.15;
  margin-bottom:24px;
  text-shadow: 0 0 8px rgba(77,252,255,.5);
  white-space:pre;
  overflow-x:auto;
}
.boot-line{
  font-size: 14px;
  margin: 6px 0;
  opacity:0;
  animation: bootFadeIn .4s forwards;
}
.boot-line:nth-child(3){ animation-delay: .5s; }
.boot-line:nth-child(4){ animation-delay: 1s; }
.boot-line:nth-child(5){ animation-delay: 1.5s; }
.boot-ok{ color: var(--green); font-weight:bold; }
@keyframes bootFadeIn{ to{ opacity:1; } }

.enter-btn{
  margin-top: 28px;
  background:transparent;
  border:1px solid var(--green);
  color: var(--green);
  font-family: var(--mono);
  font-size: 15px;
  padding: 12px 20px;
  cursor:pointer;
  opacity:0;
  animation: bootFadeIn .5s forwards;
  animation-delay: 2s;
  transition: background .2s, color .2s;
}
.enter-btn:hover{ background: var(--green); color:#000; }

.boot .scanline{
  position:absolute; left:0; right:0; height:2px;
  background: rgba(109,255,176,.5);
  box-shadow: 0 0 12px rgba(109,255,176,.6);
  animation: scan 4s linear infinite;
}
@keyframes scan{ 0%{ top:-2px; } 100%{ top:100%; } }

/* ---------- GLOBAL SITE FX ---------- */
.site{ position:relative; }

.crt-overlay{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.10) 3px, rgba(0,0,0,0) 4px
  );
  mix-blend-mode: overlay;
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:49;
  opacity:.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.floating-layer{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; }

/* ---------- TICKER ---------- */
.ticker-bar{
  position:relative; z-index:20;
  background: var(--cyan);
  color:#001217;
  overflow:hidden;
  white-space:nowrap;
  border-bottom: 1px solid #00e5ea;
}
.ticker-track{
  display:inline-flex; gap:40px;
  font-family: var(--mono);
  font-weight:bold;
  font-size:13px;
  padding: 6px 0;
  animation: tickerScroll 22s linear infinite;
}
.ticker-track span::after{ content:"◆"; margin-left:40px; opacity:.5; }
@keyframes tickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ---------- NAV ---------- */
.nav{
  position: sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 28px;
  background: rgba(6,8,16,.75);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--panel-border);
}
.nav-logo{
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: 1px;
  color:#fff;
}
.nav-logo span{ color: var(--pistachio); }
.nav-logo .dot{ color:var(--cyan); animation: blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.nav-links{ display:flex; align-items:center; gap:26px; font-family: var(--mono); font-size:13px; }
.nav-links a{ color: var(--text-dim); transition: color .15s; }
.nav-links a:hover{ color: var(--cyan); }

.sound-btn{
  background: var(--panel); border:1px solid var(--panel-border);
  color:var(--text); border-radius:6px; cursor:pointer;
  padding: 6px 10px; font-size:14px;
}
.burger{ display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }

@media (max-width: 760px){
  .nav-links{
    position:fixed; top:56px; right:0; left:0;
    background: rgba(6,8,16,.97);
    flex-direction:column; align-items:flex-start;
    padding: 18px 24px; gap:16px;
    border-bottom:1px solid var(--panel-border);
    transform: translateY(-140%);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: transform .25s ease, opacity .25s ease;
  }
  .nav-links.open{ transform: translateY(0); opacity:1; visibility:visible; pointer-events:auto; }
  .burger{ display:block; }
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  overflow:hidden;
  text-align:center;
}
.hero-img{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; object-position:50% 22%;
  filter: brightness(.72) saturate(1.05);
}
.hero-vignette{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(to bottom, rgba(6,8,16,.15) 0%, rgba(6,8,16,.35) 55%, rgba(6,8,16,.96) 100%),
              radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
}
.hero-floaters{ position:absolute; inset:0; z-index:2; pointer-events:none; }

.hero-content{
  position:relative; z-index:3;
  max-width: 760px; padding: 40px 20px 30px;
}
.terminal-chip{
  display:inline-block;
  font-family: var(--mono); font-size:12px; color: var(--green);
  border:1px solid rgba(109,255,176,.4);
  background: rgba(109,255,176,.06);
  padding: 5px 12px; border-radius:20px;
  margin-bottom: 18px;
}
.hero-title{ margin: 0 0 14px; }
.glitch-title{
  font-family: var(--display);
  font-size: clamp(48px, 11vw, 108px);
  letter-spacing: 2px;
  color:#fff;
  position:relative;
  display:inline-block;
  text-shadow: 0 0 18px rgba(77,252,255,.35);
}
.glitch-title::before, .glitch-title::after{
  content: attr(data-text);
  position:absolute; left:0; top:0; width:100%;
  overflow:hidden;
  clip-path: inset(0 0 0 0);
}
.glitch-title::before{ color: var(--cyan); animation: glitchTop 4.5s infinite linear; z-index:-1; }
.glitch-title::after{ color: var(--red); animation: glitchBot 6s infinite linear; z-index:-1; }
@keyframes glitchTop{
  0%,92%,100%{ transform: translate(0,0); clip-path: inset(0 0 90% 0); opacity:0; }
  93%{ transform: translate(-3px,-2px); clip-path: inset(10% 0 60% 0); opacity:.8; }
  95%{ transform: translate(3px,1px); clip-path: inset(40% 0 20% 0); opacity:.8; }
  97%{ opacity:0; }
}
@keyframes glitchBot{
  0%,88%,100%{ transform: translate(0,0); clip-path: inset(80% 0 0 0); opacity:0; }
  89%{ transform: translate(3px,2px); clip-path: inset(60% 0 10% 0); opacity:.7; }
  91%{ transform: translate(-2px,-1px); clip-path: inset(20% 0 50% 0); opacity:.7; }
  94%{ opacity:0; }
}
.glitch-inline{ position:relative; color: var(--orange); }

.hero-sub{ font-size: 17px; color: var(--text); margin-bottom:8px; line-height:1.5; }
.hero-sub2{ font-size: 15px; color: var(--text-dim); margin-bottom: 24px; }

.ca-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  flex-wrap:wrap;
  background: rgba(13,20,32,.8);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  padding: 10px 16px;
  margin: 0 auto 26px;
  max-width: 100%;
  font-family: var(--mono);
}
.ca-label{ color: var(--text-dim); font-size:13px; }
.ca-text{ font-size: 13px; color: var(--cyan); overflow-wrap:anywhere; }
.copy-btn{
  background: var(--cyan); color:#001217; border:none; border-radius:6px;
  padding: 5px 12px; font-family: var(--mono); font-size:12px; font-weight:bold;
  cursor:pointer; transition: transform .12s;
}
.copy-btn.small{ padding:3px 9px; font-size:11px; }
.copy-btn:hover{ transform: translateY(-1px); }
.copy-btn.copied{ background: var(--green); }

.cta-row{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.cta-row.centered{ margin-top: 30px; }
.btn{
  font-family: var(--mono); font-size:14px; font-weight:bold;
  padding: 13px 24px; border-radius:8px; display:inline-block;
  border:1px solid transparent; transition: transform .15s, box-shadow .15s;
}
.btn-primary{ background: var(--green); color:#012014; box-shadow: 0 0 20px rgba(109,255,176,.35); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 4px 26px rgba(109,255,176,.5); }
.btn-ghost{ background: rgba(255,255,255,.03); border-color: var(--panel-border); color: var(--text); }
.btn-ghost:hover{ border-color: var(--cyan); color: var(--cyan); }

.scroll-hint{
  position:relative; z-index:3;
  font-family: var(--mono); font-size:12px; color: var(--text-dim);
  padding-bottom: 26px;
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* ---------- SECTIONS ---------- */
.section{ position:relative; z-index:2; max-width: 1000px; margin: 0 auto; padding: 90px 24px; }
.section-title{
  font-family: var(--mono); font-size: 15px; color: var(--green);
  letter-spacing:.5px; margin-bottom: 8px;
}
.section-sub{ color: var(--text-dim); font-size:14px; margin-bottom: 34px; max-width: 640px; }
.section-sub code{ color: var(--cyan); }

/* Terminal window (breach log) */
.terminal-window{
  background: var(--panel);
  border: 1px solid var(--panel-border);
  border-radius: 10px;
  overflow:hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.terminal-topbar{
  display:flex; align-items:center; gap:8px;
  background: #0a0f18; padding: 10px 14px;
  border-bottom: 1px solid var(--panel-border);
}
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.dot.red{ background:#ff5f56; } .dot.yellow{ background:#ffbd2e; } .dot.green{ background:#27c93f; }
.terminal-name{ margin-left:10px; font-family: var(--mono); font-size:12px; color: var(--text-dim); }
.terminal-body{
  font-family: var(--mono); font-size: 14px; line-height:1.7;
  color: var(--green); padding: 22px 20px 30px;
  min-height: 260px; white-space:pre-wrap;
}
.cursor-block{ animation: blink 1s steps(1) infinite; color: var(--cyan); }

/* Leaked files */
.file-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.file-card{
  background: var(--panel); border:1px solid var(--panel-border); border-radius:10px;
  overflow:hidden; transition: transform .15s, border-color .15s;
}
.file-card:hover{ transform: translateY(-4px); border-color: var(--cyan); }
.file-thumb{ height:120px; position:relative; background:#05070c; }
.file-thumb.noise{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: noiseShift .2s steps(2) infinite;
}
@keyframes noiseShift{ from{ background-position:0 0; } to{ background-position: 3px 2px; } }
.file-thumb.redact{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding: 0 18px; }
.redact-bar{ height:12px; background:#111; border:1px solid #222; }
.redact-bar.short{ width:60%; }
.file-thumb.question{
  display:flex; align-items:center; justify-content:center;
  font-family: var(--display); font-size:48px; color: var(--orange);
}
.file-meta{ padding: 12px 14px; display:flex; flex-direction:column; gap:6px; }
.file-name{ font-family: var(--mono); font-size:13px; color:#fff; }
.file-status{ font-family: var(--mono); font-size:11px; letter-spacing:.5px; }
.status-corrupt{ color: var(--red); }
.status-decrypt{ color: var(--cyan); }
.status-redacted{ color: var(--text-dim); }
.status-unknown{ color: var(--orange); }
.pct{ display:inline-block; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* Stats */
.stat-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap:16px; }
.stat-card{
  background: var(--panel); border:1px solid var(--panel-border); border-radius:10px;
  padding: 20px; display:flex; flex-direction:column; gap:8px;
}
.stat-label{ font-family: var(--mono); font-size:11px; color: var(--text-dim); letter-spacing:.5px; }
.stat-value{ font-family: var(--display); font-size:30px; color: var(--cyan); }

/* Steps */
.steps{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:18px; }
.step{
  background: var(--panel); border:1px solid var(--panel-border); border-radius:10px;
  padding:20px;
}
.step-num{ font-family: var(--display); font-size:34px; color: var(--pistachio); }
.step h3{ font-family: var(--mono); font-size:15px; margin: 6px 0; color:#fff; text-transform:lowercase; }
.step p{ font-size:13px; color: var(--text-dim); line-height:1.5; }

/* Footer */
.footer{
  position:relative; z-index:2;
  border-top:1px solid var(--panel-border);
  padding: 40px 24px 60px;
  max-width: 1000px; margin: 0 auto;
}
.footer-top{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; margin-bottom:18px; }
.footer-logo{ font-family: var(--display); font-size:22px; color:#fff; }
.footer-logo span{ color: var(--pistachio); }
.footer-ca{ font-family: var(--mono); font-size:12px; color: var(--text-dim); display:flex; align-items:center; gap:8px; }
.footer-ca code{ color: var(--cyan); }
.footer-links{ display:flex; gap:20px; font-family: var(--mono); font-size:13px; margin-bottom: 22px; }
.footer-links a{ color: var(--text-dim); }
.footer-links a:hover{ color: var(--cyan); }
.footer-disclaimer{ font-size:11px; color: var(--text-dim); line-height:1.6; max-width: 720px; }
.footer-webmaster{ font-size:11px; color: var(--text-dim); opacity:.6; margin-top:14px; font-style:italic; }

/* Floating logo bits (hero) */
.float-chip{
  position:absolute; font-family: var(--mono); font-weight:bold; color: var(--orange);
  opacity:.85; pointer-events:none; user-select:none;
  text-shadow: 0 0 8px rgba(255,176,32,.5);
}
.float-chip.r-badge{
  background: var(--orange); color:#1a1200; border-radius:5px;
  padding: 2px 7px; font-size:14px;
}
.float-chip.vi-text{ color: var(--cyan); font-size:20px; text-shadow: 0 0 10px rgba(77,252,255,.6); }

@media (max-width: 600px){
  .section{ padding: 60px 18px; }
  .hero-content{ padding-top: 90px; }
}