:root {
  --bg:       #141414;
  --bg2:      #1A1A1A;
  --bg3:      #1F1F1F;
  --bg4:      #242424;
  --green:    #E8212A;
  --green2:   #C41920;
  --green3:   rgba(232,33,42,0.08);
  --green4:   rgba(232,33,42,0.04);
  --amber:    #FFB800;
  --red:      #E8212A;
  --text:     #F0F0F0;
  --text2:    rgba(240,240,240,0.6);
  --text3:    rgba(240,240,240,0.3);
  --border:   rgba(232,33,42,0.18);
  --border2:  rgba(232,33,42,0.08);
  --mono:     'Space Mono', monospace;
  --sans:     'DM Sans', sans-serif;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  overflow-x: hidden;
  line-height: 1.6;
  padding-top: 72px;
}

/* SCANLINE OVERLAY */
body::before {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  );
  pointer-events:none;
  z-index:1000;
}

/* GRID */
body::after {
  content:'';
  position:absolute;
  top:112px; left:0; right:0;
  height:200vh;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 0;
  pointer-events:none;
  z-index:0;
}

/* ── NAV ── */
nav {
  position:fixed; inset:0 0 auto 0;
  z-index:500;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 48px; height:72px;
  background: rgba(0,0,0,1);
  backdrop-filter:blur(20px);
  border-bottom:none;
  transition:all 0.3s;
}
nav.scrolled { background: rgba(0,0,0,1); box-shadow:0 0 40px rgba(232,33,42,0.05); }

.logo {
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.logo-icon {
  width:36px; height:36px;
  border:1px solid var(--green);
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono);
  font-size:11px; font-weight:700;
  color:#E8212A;
  position:relative;
  overflow:hidden;
}
.logo-icon::before {
  content:'';
  position:absolute; inset:0;
  background: var(--green3);
}
.logo-text {
  font-family:var(--sans);
  font-size:17px; font-weight:800;
  color:var(--text);
  letter-spacing:-0.3px;
}
.logo-text span { color:#E8212A; }

.nav-links { display:flex; align-items:center; gap:36px; list-style:none; }
.nav-links a {
  font-family:var(--mono);
  font-size:11px; font-weight:400;
  color:var(--text2); text-decoration:none;
  letter-spacing:1px; text-transform:uppercase;
  transition:color 0.2s;
}
.nav-links a:hover { color:#E8212A; }

.nav-cta {
  font-family:var(--mono);
  font-size:11px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  color:#ffffff !important;
  background:#E8212A;
  padding:9px 20px; border-radius:3px;
  transition:all 0.2s !important;
}
.nav-cta:hover { background:#C41920 !important; transform:translateY(-1px); }

.nav-hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px; }
.nav-hamburger span { width:22px; height:2px; background:var(--text2); border-radius:2px; transition:all 0.3s; }

/* ── HERO ── */
#hero {
  position:relative;
  min-height:80vh;
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  padding:0px 24px; padding-top:20px;
  overflow:hidden;
  z-index:1;
}



.hero-ticker {
  font-family:var(--mono);
  font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:#E8212A;
  border:1px solid var(--border);
  padding:6px 16px; border-radius:2px;
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:40px;
  opacity:0; animation:fadeUp 0.6s 0.2s ease forwards;
}
.ticker-dot {
  width:6px; height:6px; border-radius:50%;
  background:#E8212A;
  animation:pulse 2s infinite;
}
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.8)} }

h1.hero-title {
  font-family:var(--sans);
  font-size:clamp(42px,6vw,88px);
  font-weight:800; line-height:1.0;
  letter-spacing:-2px;
  margin-bottom:28px;
  opacity:0; animation:fadeUp 0.7s 0.35s ease forwards;
}
h1.hero-title .accent { color:#E8212A; }
h1.hero-title .dim { color:var(--text2); }

.hero-sub {
  font-family:'DM Sans', sans-serif;
  font-size:17px; line-height:1.5; font-weight:400;
  color:var(--text2);
  max-width:700px; margin:0 auto 48px;
  opacity:0; animation:fadeUp 0.7s 0.5s ease forwards;
}
.hero-body-text {
  font-family:'DM Sans', sans-serif;
  font-size:15px; line-height:1.8; font-weight:400;
  color:#FFFFFF;
  max-width:620px; margin:0 auto 40px;
  opacity:0; animation:fadeUp 0.7s 0.5s ease forwards;
}

.hero-actions {
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  opacity:0; animation:fadeUp 0.7s 0.65s ease forwards;
}

.btn-primary {
  display:inline-flex; align-items:center; gap:10px;
  background:#E8212A; color:var(--bg);
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:14px 32px; border-radius:3px;
  border:none; cursor:pointer; text-decoration:none;
  transition:all 0.2s;
}
.btn-primary:hover { background:#C41920; transform:translateY(-2px); box-shadow:0 8px 32px rgba(232,33,42,0.2); }

.btn-outline {
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--text);
  font-family:var(--mono); font-size:12px; font-weight:400;
  letter-spacing:1.5px; text-transform:uppercase;
  padding:14px 32px; border-radius:3px;
  border:1px solid rgba(232,238,244,0.2); cursor:pointer; text-decoration:none;
  transition:all 0.2s;
}
.btn-outline:hover { border-color:#E8212A; color:#E8212A; transform:translateY(-2px); }

/* STATS ROW */
.hero-stats {
  display:flex; gap:0; justify-content:center;
  margin-top:72px;
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  max-width:600px; margin-left:auto; margin-right:auto;
  opacity:0; animation:fadeUp 0.7s 0.8s ease forwards;
}
.stat-item {
  flex:1; padding:20px 24px;
  border-right:1px solid var(--border);
  text-align:center;
}
.stat-item:last-child { border-right:none; }
.stat-num {
  font-family:var(--mono);
  font-size:24px; font-weight:700;
  color:#E8212A;
  display:block;
}
.stat-label {
  font-family:var(--mono);
  font-size:10px; letter-spacing:1px;
  color:var(--text3); text-transform:uppercase;
  margin-top:4px;
}

@keyframes fadeUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── SECTIONS ── */
section {
  position:relative; z-index:1;
  padding:100px 24px;
}
.container { max-width:1100px; margin:0 auto; }

.section-label {
  font-family:var(--mono);
  font-size:10px; letter-spacing:3px; text-transform:uppercase;
  color:#E8212A;
  display:flex; align-items:center; gap:12px;
  margin-bottom:20px;
}
.section-label::before {
  content:''; width:24px; height:1px; background:#E8212A;
}

.section-title {
  font-family:var(--sans);
  font-size:clamp(32px,4vw,52px);
  font-weight:800; line-height:1.1;
  letter-spacing:-1px;
  margin-bottom:16px;
}
.section-title em { font-style:normal; color:#E8212A; }

.section-body {
  font-family:var(--mono);
  font-size:13px; line-height:1.9;
  color:var(--text2);
  max-width:560px;
  margin-bottom:56px;
}

/* ── PRODUCTS ── */
#products { background: var(--bg2); border-top:1px solid var(--border2); border-bottom:1px solid var(--border2); }

.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:1px;
  background:var(--border2);
  border:1px solid var(--border2);
  border-radius:8px;
  overflow:hidden;
}

.product-card {
  background:rgba(26,26,26,0.85);
  padding:36px 32px;
  position:relative;
  transition:background 0.3s;
  display:flex; flex-direction:column;
}
.product-card:hover { background:var(--bg3); }
.product-card::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:2px;
  background:transparent;
  transition:background 0.3s;
}
.product-card:hover::before { background:#E8212A; }

.product-tag {
  font-family:var(--mono);
  font-size:9px; letter-spacing:2px; text-transform:uppercase;
  padding:4px 10px; border-radius:2px;
  display:inline-block; margin-bottom:20px;
  width:fit-content;
}
.tag-free { background:rgba(232,33,42,0.12); color:#E8212A; border:1px solid rgba(232,33,42,0.2); }
.tag-paid { background:rgba(255,184,0,0.1); color:var(--amber); border:1px solid rgba(255,184,0,0.2); }
.tag-new  { background:rgba(232,33,42,0.12); color:#E8212A; border:1px solid rgba(232,33,42,0.2); }
.tag-soon { background:rgba(232,238,244,0.06); color:var(--text3); border:1px solid rgba(232,238,244,0.1); }

.product-name {
  font-family:var(--sans);
  font-size:22px; font-weight:800;
  letter-spacing:-0.5px;
  margin-bottom:12px;
}

.product-desc {
  font-family:var(--mono);
  font-size:12px; line-height:1.8;
  color:var(--text2);
  margin-bottom:24px;
  flex:1;
}

.product-features {
  list-style:none;
  margin-bottom:28px;
  display:flex; flex-direction:column; gap:8px;
}
.product-features li {
  font-family:var(--mono);
  font-size:11px; color:var(--text2);
  display:flex; align-items:flex-start; gap:10px;
}
.product-features li::before {
  content:'→';
  color:#E8212A;
  flex-shrink:0;
}

.product-footer {
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border2);
  padding-top:24px;
  margin-top:auto;
}

.product-price {
  font-family:var(--mono);
  font-size:20px; font-weight:700;
  color:var(--text);
}
.product-price .free-label { color:#E8212A; }
.product-price .currency { font-size:13px; color:var(--text2); margin-right:2px; }

.btn-buy {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  padding:10px 20px; border-radius:3px;
  border:none; cursor:pointer; text-decoration:none;
  transition:all 0.2s;
}
.btn-buy-green {
  background:#E8212A; color:var(--bg);
}
.btn-buy-green:hover { background:#C41920; transform:translateY(-1px); box-shadow:0 4px 20px rgba(232,33,42,0.25); }

.btn-buy-outline {
  background:transparent; color:var(--text2);
  border:1px solid rgba(232,238,244,0.15);
}
.btn-buy-outline:hover { border-color:#E8212A; color:#E8212A; }

.btn-buy-disabled {
  background:rgba(232,238,244,0.05); color:var(--text3);
  border:1px solid rgba(232,238,244,0.08);
  cursor:not-allowed;
}

/* ── HOW IT WORKS ── */
.how-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:32px;
}

.how-step {
  position:relative;
  padding:32px 28px;
  border:1px solid var(--border2);
  border-radius:6px;
  background:var(--bg2);
  transition:border-color 0.3s, background 0.3s;
}
.how-step:hover { border-color:rgba(232,33,42,0.2); background:var(--bg3); }

.step-num {
  font-family:var(--mono);
  font-size:11px; letter-spacing:2px;
  color:#E8212A; margin-bottom:16px;
}
.step-title {
  font-family:var(--sans);
  font-size:17px; font-weight:700;
  margin-bottom:10px;
}
.step-desc {
  font-family:var(--mono);
  font-size:11px; line-height:1.8;
  color:var(--text2);
}

/* ── WHY ── */
#why { background:var(--bg); }

.why-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:24px;
}

.why-card {
  padding:28px;
  border:1px solid var(--border2);
  border-radius:6px;
  background:var(--bg2);
}
.why-icon {
  font-size:24px; margin-bottom:14px;
  display:block;
}
.why-title {
  font-family:var(--sans);
  font-size:16px; font-weight:700;
  margin-bottom:8px;
}
.why-desc {
  font-family:var(--mono);
  font-size:11px; line-height:1.8;
  color:var(--text2);
}

/* ── NEWSLETTER ── */
#newsletter {
  background:var(--bg2);
  border-top:1px solid var(--border2);
  border-bottom:1px solid var(--border2);
}

.newsletter-inner {
  max-width:600px; margin:0 auto;
  text-align:center;
}

.nl-form {
  display:flex; gap:0;
  margin-top:36px;
  border:1px solid var(--border);
  border-radius:4px;
  overflow:hidden;
}
.nl-input {
  flex:1;
  background:var(--bg3);
  border:none; outline:none;
  font-family:var(--mono); font-size:13px;
  color:var(--text);
  padding:16px 20px;
}
.nl-input::placeholder { color:var(--text3); }
.nl-btn {
  background:#E8212A; color:#fff;
  font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
  padding:16px 28px; border:none; cursor:pointer;
  white-space:nowrap;
  transition:background 0.2s;
}
.nl-btn:hover { background:#C41920; }

.nl-note {
  font-family:var(--mono);
  font-size:10px; color:var(--text3);
  margin-top:14px; letter-spacing:0.5px;
}

/* ── SUPPORT ── */
#support { background:var(--bg); }

.support-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:24px;
}

.support-card {
  padding:32px 28px;
  border:1px solid var(--border2);
  border-radius:6px;
  background:var(--bg2);
}
.support-title {
  font-family:var(--sans); font-size:17px; font-weight:700;
  margin-bottom:10px;
  display:flex; align-items:center; gap:10px;
}
.support-title span { font-size:20px; }
.support-desc {
  font-family:var(--mono); font-size:11px; line-height:1.8;
  color:var(--text2); margin-bottom:20px;
}
.support-link {
  font-family:var(--mono); font-size:11px;
  color:#E8212A; text-decoration:none;
  letter-spacing:0.5px;
  display:inline-flex; align-items:center; gap:6px;
  transition:gap 0.2s;
}
.support-link:hover { gap:10px; }

/* ── FOOTER ── */
footer {
  position:relative; z-index:1;
  border-top:1px solid var(--border2);
  padding:40px 48px;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:20px;
}
.footer-logo {
  font-family:var(--sans); font-size:16px; font-weight:800;
  color:var(--text);
}
.footer-logo span { color:#E8212A; }
.footer-copy {
  font-family:var(--mono); font-size:10px;
  color:var(--text3); letter-spacing:0.5px;
}
.footer-links {
  list-style:none; display:flex; gap:24px; flex-wrap:wrap;
}
.footer-links a {
  font-family:var(--mono); font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--text3);
  text-decoration:none; transition:color 0.2s;
}
.footer-links a:hover { color:#E8212A; }


/* ── HERO PREVIEWS ── */
.hero-previews {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:56px;
  text-align:left;
}

.bestseller-banner {
  background: transparent;
  border-bottom: 1px solid rgba(232,33,42,0.3);
  color: #E8212A;
  font-family:'Space Mono', monospace;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  text-align:center;
  padding:8px 14px;
}
.preview-card {
  border:1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  border-radius:8px;
  overflow:hidden;
  background:var(--bg2);
  transition:border-color 0.3s, transform 0.3s;
  display:flex; flex-direction:column;
}
.preview-card:hover {
  border-color:rgba(232,33,42,0.3);
  transform:translateY(-4px);
}

.preview-img-wrap {
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
}
.preview-img {
  width:100%; height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform 0.4s;
}
.preview-card:hover .preview-img { transform:scale(1.03); }

.preview-img-placeholder {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg4) 100%);
  border-bottom:1px solid var(--border2);
}
.placeholder-icon { font-size:32px; }
.placeholder-text {
  font-family:var(--sans); font-size:14px; font-weight:700;
  color:var(--text2);
}
.placeholder-sub {
  font-family:var(--mono); font-size:10px;
  color:var(--text3); letter-spacing:1px;
}

.preview-badge {
  position:absolute; top:12px; left:12px;
  font-family:var(--mono); font-size:9px;
  font-weight:700; letter-spacing:2px;
  padding:4px 10px; border-radius:2px;
}

.preview-info {
  padding:20px;
  display:flex; flex-direction:column;
  flex:1;
}
.preview-name {
  font-family:var(--sans); font-size:17px; font-weight:800;
  margin-bottom:8px;
}
.preview-desc {
  font-family:var(--mono); font-size:11px; line-height:1.7;
  color:var(--text2); margin-bottom:16px;
}
.preview-bullets {
  list-style:none;
  margin-bottom:20px;
  display:flex; flex-direction:column; gap:7px;
}
.preview-bullets li {
  font-family:'Space Mono', monospace;
  font-size:11px; line-height:1.5;
  color:rgba(240,240,240,0.6);
  display:flex; align-items:flex-start; gap:8px;
}
.preview-bullets li::before {
  content:'→';
  color:#E8212A;
  flex-shrink:0;
  font-size:11px;
}
.preview-footer {
  display:flex; align-items:center; justify-content:space-between;
  border-top:1px solid var(--border2);
  padding-top:14px;
  margin-top:auto;
}
.preview-price {
  font-family:var(--mono); font-size:18px; font-weight:700;
}
.preview-price .free-label { color:#E8212A; }
.preview-price .currency { font-size:12px; color:var(--text2); }

@media(max-width:900px) {
  .hero-previews { grid-template-columns:1fr; }
}
@media(max-width:768px) {
  .hero-previews { margin-top:40px; }
}



/* ── REVEAL ── */
.reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in { opacity:1; transform:translateY(0); }

/* ── LIVE TICKER ── */
.terminal-bar {
  position:relative; z-index:1;
  background:#000000;
  border-top:none;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:0;
  overflow:hidden;
  height:40px;
  display:flex; align-items:center;
}
.terminal-scroll {
  display:flex; gap:0;
  white-space:nowrap;
  animation:ticker 128s linear infinite;
  width:max-content;
  align-items:center;
  height:40px;
}
.terminal-scroll:hover { animation-play-state:paused; }
.ticker-box {
  display:inline-flex; align-items:center; gap:10px;
  padding:0 20px;
  height:40px;
  border-right:1px solid rgba(255,255,255,0.07);
  font-family:'DM Sans', sans-serif;
  font-size:13px;
  font-weight:500;
  letter-spacing:0;
  white-space:nowrap;
}
.ticker-symbol {
  color:rgba(255,255,255,0.55);
  font-weight:600;
  font-size:12px;
  letter-spacing:0.5px;
  text-transform:uppercase;
}
.ticker-price {
  color:#F0F0F0;
  font-weight:600;
}
.ticker-change-up   { color:#00C853; font-weight:700; }
.ticker-change-down { color:#E8212A; font-weight:500; }
.ticker-divider {
  color:rgba(255,255,255,0.15);
  font-size:11px;
}
@keyframes ticker {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

/* ── MOBILE ── */
@media(max-width:768px) {
  nav { padding:0 20px; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }

  #hero { padding:60px 20px; min-height:auto; padding-top:40px; }
  h1.hero-title { letter-spacing:-1px; }
  .hero-stats { flex-direction:column; }
  .stat-item { border-right:none; border-bottom:1px solid var(--border); }
  .stat-item:last-child { border-bottom:none; }

  section { padding:72px 20px; }
  footer { padding:32px 20px; flex-direction:column; align-items:flex-start; }

  .nl-form { flex-direction:column; }
  .nl-btn { padding:14px; }

  .products-grid { grid-template-columns:1fr; }
  .how-grid { grid-template-columns:1fr; }
  .why-grid { grid-template-columns:1fr; }
  .support-grid { grid-template-columns:1fr; }
}

@media(max-width:480px) {
  .hero-actions { flex-direction:column; align-items:center; }
  .btn-primary, .btn-outline { width:100%; justify-content:center; }
}

/* Success state */
.nl-success {
  display:none;
  font-family:var(--mono); font-size:13px;
  color:#E8212A; text-align:center;
  padding:16px;
  border:1px solid var(--border);
  border-radius:4px;
  margin-top:20px;
}