* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:'Syne', sans-serif;
  background:var(--bg, #05050a);
  color:#f0eee8;
  overflow-x:hidden;
  cursor:none;
}

/* ── CURSOR ── */
.cursor-dot {
  position:fixed; width:8px; height:8px; border-radius:50%;
  background:#fff; pointer-events:none; z-index:99999;
  transform:translate(-50%,-50%); mix-blend-mode:difference;
}
.cursor-ring {
  position:fixed; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.4); pointer-events:none; z-index:99998;
  transform:translate(-50%,-50%); transition:width 0.3s, height 0.3s, border-color 0.3s;
}

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 48px;
  background:rgba(5,5,10,0.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--accent-dim, rgba(255,255,255,0.06));
}
.nav-logo {
  font-family:'DM Mono', monospace; font-size:17px;
  color:#0affb2; text-decoration:none; letter-spacing:0.05em;
}
.nav-back {
  font-family:'DM Mono', monospace; font-size:11px;
  color:rgba(240,238,232,0.45); text-decoration:none;
  letter-spacing:0.12em; text-transform:uppercase;
  transition:color 0.2s; display:flex; align-items:center; gap:8px;
}
.nav-back:hover { color:#f0eee8; }
.nav-back::before { content:'←'; }

/* ════════════════════════════════════
   PHRACK-STYLE PRODUCT PAGE
   ════════════════════════════════════ */

/* ── HERO ── */
.prod-hero {
  min-height:100vh;
  display:flex; align-items:center;
  position:relative; overflow:hidden;
  padding:120px 80px 80px;
}
.prod-hero-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--grid-c, rgba(0,255,100,0.025)) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-c, rgba(0,255,100,0.025)) 1px, transparent 1px);
  background-size:24px 24px;
}
.prod-hero-scanlines {
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    var(--scan-c, rgba(0,255,100,0.008)) 2px, var(--scan-c, rgba(0,255,100,0.008)) 3px
  );
}
.prod-hero-glow {
  position:absolute; width:1000px; height:1000px; border-radius:50%;
  background:radial-gradient(circle, var(--glow-c, rgba(0,255,100,0.1)) 0%, transparent 50%);
  top:40%; left:30%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.prod-hero-glow2 {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, var(--glow2-c, rgba(0,200,100,0.05)) 0%, transparent 55%);
  bottom:10%; right:10%;
  pointer-events:none;
}
.prod-hero-content {
  position:relative; z-index:2;
  max-width:700px;
}
.prod-codename {
  font-family:'DM Mono', monospace; font-size:10px;
  color:var(--accent, #00ff64); letter-spacing:0.4em;
  text-transform:uppercase; margin-bottom:24px;
  display:flex; align-items:center; gap:12px;
}
.prod-codename::before {
  content:''; width:32px; height:1px; background:var(--accent, #00ff64);
}
.prod-title {
  font-family:'Black Ops One', sans-serif;
  font-size:clamp(64px,9vw,120px);
  line-height:0.85; letter-spacing:-0.02em;
  color:#fff; margin-bottom:20px;
  text-shadow:0 0 60px var(--glow-c, rgba(0,255,100,0.3)),
    0 0 120px var(--glow-c, rgba(0,255,100,0.1));
}
.prod-title .accent { color:var(--accent, #00ff64); }
.prod-tagline {
  font-family:'DM Mono', monospace; font-size:13px;
  color:rgba(255,255,255,0.35); letter-spacing:0.08em;
  margin-bottom:36px; line-height:1.7;
}
.prod-status-badge {
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:0.2em; text-transform:uppercase;
  padding:8px 20px; display:inline-flex;
  color:var(--accent, #00ff64);
  border:1px solid var(--accent-dim, rgba(0,255,100,0.3));
  background:var(--accent-bg, rgba(0,255,100,0.08));
}

/* ── PHRACK HEADER ── */
.phrack-header {
  font-family:'DM Mono', monospace; font-size:11px;
  color:var(--accent, #00ff64);
  border:1px solid var(--accent-dim, rgba(0,255,100,0.2));
  background:rgba(0,0,0,0.5);
  padding:20px 28px;
  margin:80px 80px 0;
  line-height:2;
  position:relative; z-index:2;
  white-space:pre-wrap;
}
.phrack-header .dim { color:rgba(255,255,255,0.2); }
.phrack-header .hl { color:#fff; }
.phrack-header .bar {
  color:var(--accent-dim, rgba(0,255,100,0.3));
  display:block; letter-spacing:0;
}

/* ── CONTENT SECTIONS ── */
.prod-section {
  padding:100px 80px;
  position:relative; overflow:hidden;
}
.prod-section-glow {
  position:absolute; width:800px; height:800px; border-radius:50%;
  background:radial-gradient(circle, var(--glow-c, rgba(0,255,100,0.05)) 0%, transparent 55%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}

/* Terminal block */
.terminal-block {
  font-family:'DM Mono', monospace; font-size:12px;
  background:rgba(0,0,0,0.6);
  border:1px solid var(--accent-dim, rgba(0,255,100,0.15));
  padding:32px 36px;
  line-height:2;
  position:relative; z-index:2;
  max-width:800px;
  color:rgba(255,255,255,0.5);
}
.terminal-block .prompt { color:var(--accent, #00ff64); }
.terminal-block .cmd { color:rgba(255,255,255,0.7); }
.terminal-block .comment { color:rgba(255,255,255,0.2); }
.terminal-block .str { color:var(--str-c, #facc15); }
.terminal-block .hl { color:var(--accent, #00ff64); }
.terminal-block .heading {
  color:var(--accent, #00ff64);
  font-size:14px; letter-spacing:0.1em;
  margin:16px 0 8px; display:block;
}

/* Section title */
.prod-sec-title {
  font-family:'Black Ops One', sans-serif;
  font-size:clamp(36px,5vw,64px);
  color:#fff; line-height:0.9;
  margin-bottom:32px;
  position:relative; z-index:2;
}
.prod-sec-title .accent { color:var(--accent, #00ff64); }

/* Feature grid */
.feature-grid {
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:2px; position:relative; z-index:2;
  margin-top:48px;
}
.feature-card {
  padding:36px 28px;
  background:var(--card-bg, rgba(0,255,100,0.03));
  border:1px solid var(--accent-dim, rgba(0,255,100,0.1));
  transition:all 0.3s cubic-bezier(0.23,1,0.32,1);
  cursor:default;
}
.feature-card:hover {
  background:var(--card-hover-bg, rgba(0,255,100,0.08));
  border-color:var(--accent, rgba(0,255,100,0.35));
  transform:translateY(-8px);
  box-shadow:0 24px 48px -10px rgba(0,0,0,0.8),
    0 0 28px -6px var(--glow-c, rgba(0,255,100,0.2));
}
.feature-card-icon {
  font-size:28px; margin-bottom:16px;
  filter:drop-shadow(0 0 8px var(--glow-c, rgba(0,255,100,0.3)));
}
.feature-card-name {
  font-family:'Black Ops One', sans-serif;
  font-size:16px; color:#fff; margin-bottom:10px;
}
.feature-card-desc {
  font-size:11px; color:rgba(255,255,255,0.35); line-height:1.75;
}

/* Tech stack section */
.stack-list {
  display:flex; flex-wrap:wrap; gap:8px;
  position:relative; z-index:2; margin-top:32px;
}
.stack-item {
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase;
  padding:8px 18px;
  border:1px solid var(--accent-dim, rgba(0,255,100,0.2));
  color:var(--accent, #00ff64);
  background:var(--accent-bg, rgba(0,255,100,0.06));
  transition:all 0.2s;
}
.stack-item:hover {
  background:var(--card-hover-bg, rgba(0,255,100,0.15));
  border-color:var(--accent, rgba(0,255,100,0.5));
  transform:translateY(-2px);
  box-shadow:0 4px 12px -2px var(--glow-c, rgba(0,255,100,0.3));
}

/* Architecture ASCII */
.ascii-block {
  font-family:'DM Mono', monospace; font-size:11px;
  color:var(--accent, rgba(0,255,100,0.6));
  background:rgba(0,0,0,0.5);
  border:1px solid var(--accent-dim, rgba(0,255,100,0.12));
  padding:28px 32px;
  white-space:pre; overflow-x:auto;
  line-height:1.6;
  position:relative; z-index:2;
  margin-top:32px;
}
.ascii-block .dim { color:rgba(255,255,255,0.15); }

/* ── CTA ── */
.prod-cta {
  padding:120px 80px;
  text-align:center;
  position:relative; overflow:hidden;
}
.prod-cta-glow {
  position:absolute; width:800px; height:800px; border-radius:50%;
  background:radial-gradient(circle, var(--glow-c, rgba(0,255,100,0.08)) 0%, transparent 55%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.prod-cta-title {
  font-family:'Black Ops One', sans-serif;
  font-size:clamp(48px,7vw,96px);
  color:#fff; line-height:0.88;
  margin-bottom:28px;
  position:relative; z-index:2;
}
.prod-cta-title .accent { color:var(--accent, #00ff64); }
.prod-cta-sub {
  font-size:14px; color:rgba(255,255,255,0.35);
  max-width:460px; margin:0 auto 40px; line-height:1.85;
  position:relative; z-index:2;
}
.btn-prod {
  display:inline-block; text-decoration:none;
  font-family:'DM Mono', monospace; font-size:12px;
  letter-spacing:0.15em; text-transform:uppercase;
  background:var(--accent, #00ff64); color:#08080c;
  padding:16px 44px;
  transition:all 0.3s cubic-bezier(0.23,1,0.32,1);
  position:relative; z-index:2;
}
.btn-prod:hover {
  background:#ff2d78; color:#fff;
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 16px 40px -8px rgba(255,45,120,0.6);
}

/* ── FOOTER ── */
footer {
  background:#000; border-top:1px solid rgba(255,255,255,0.06);
  padding:48px 80px;
  display:flex; align-items:center; justify-content:space-between;
}
.footer-brand {
  font-family:'DM Mono', monospace; font-size:14px; color:var(--accent, #00ff64);
}
.footer-copy {
  font-family:'DM Mono', monospace; font-size:10px;
  color:rgba(255,255,255,0.2); letter-spacing:0.1em;
}
.footer-link {
  color:rgba(255,255,255,0.3); text-decoration:none;
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:0.12em; text-transform:uppercase;
  transition:color 0.2s;
}
.footer-link:hover { color:var(--accent, #00ff64); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to { opacity:1; transform:translateY(0); }
}
.reveal {
  opacity:0; transform:translateY(32px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:0.1s; }
.reveal-delay-2 { transition-delay:0.2s; }
.reveal-delay-3 { transition-delay:0.3s; }
.reveal-delay-4 { transition-delay:0.4s; }
.reveal-delay-5 { transition-delay:0.5s; }

::-webkit-scrollbar { height:4px; width:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; }

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  nav { padding:16px 24px; }
  .prod-hero { padding:100px 24px 60px; }
  .phrack-header { margin:48px 24px 0; }
  .prod-section, .prod-cta { padding-left:24px; padding-right:24px; }
  .feature-grid { grid-template-columns:1fr; }
  .ascii-block { font-size:9px; }
  footer { flex-direction:column; gap:24px; text-align:center; padding:32px 24px; }
}