/* =============================================
   CRIMIND — SHARED STYLES v1.0
   Noir-Tech | Dark Investigation Aesthetic
============================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap');

/* ─── CSS VARIABLES ─── */
:root {
  --bg-0: #030306;
  --bg-1: #07070f;
  --bg-2: #0c0c18;
  --bg-3: #111120;
  --glass: rgba(255,255,255,0.03);
  --glass-b: rgba(255,255,255,0.06);
  --glass-hover: rgba(255,255,255,0.05);

  --red:       #ff1744;
  --red-dim:   #c41e3a;
  --red-glow:  rgba(255,23,68,0.35);
  --red-sub:   rgba(255,23,68,0.08);
  --red-border:rgba(255,23,68,0.25);

  --cyan:      #00e5ff;
  --cyan-dim:  #00b8d4;
  --cyan-glow: rgba(0,229,255,0.3);
  --cyan-sub:  rgba(0,229,255,0.08);

  --gold:      #ffd700;
  --gold-dim:  #f9a825;
  --gold-sub:  rgba(255,215,0,0.08);

  --green:     #00ff88;
  --green-dim: #00c853;
  --green-sub: rgba(0,255,136,0.08);

  --t1:  rgba(255,255,255,0.95);
  --t2:  rgba(255,255,255,0.55);
  --t3:  rgba(255,255,255,0.30);
  --t4:  rgba(255,255,255,0.12);

  --fd: 'Bebas Neue', sans-serif;
  --fb: 'Inter', sans-serif;
  --fm: 'JetBrains Mono', monospace;

  --max-w: 1280px;
  --nav-h: 76px;
  --r:  12px;
  --rs:  8px;
  --rl: 20px;

  --sh-red:  0 0 50px rgba(255,23,68,0.22), 0 0 20px rgba(255,23,68,0.15);
  --sh-cyan: 0 0 50px rgba(0,229,255,0.18);
  --sh-card: 0 20px 80px rgba(0,0,0,0.55);

  --tr: 0.15s ease;
  --tm: 0.3s ease;
  --ts: 0.6s cubic-bezier(0.16,1,0.3,1);
}

/* ─── RESET ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; scroll-behavior:smooth; overflow-x:hidden; }
body {
  font-family: var(--fb);
  background: var(--bg-0);
  color: var(--t1);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Noise overlay */
body::before {
  content:'';
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px;
  opacity:0.022;
  pointer-events:none;
  z-index:9990;
}

/* Scanlines */
body::after {
  content:'';
  position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.025) 2px,rgba(0,0,0,0.025) 4px);
  pointer-events:none;
  z-index:9989;
}

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:var(--bg-1); }
::-webkit-scrollbar-thumb { background:var(--red-dim); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--red); }

/* ─── TYPOGRAPHY ─── */
.display-xl {
  font-family:var(--fd);
  font-size:clamp(4.5rem,13vw,11rem);
  line-height:.88;
  letter-spacing:.02em;
}
.display-lg {
  font-family:var(--fd);
  font-size:clamp(3rem,8vw,7rem);
  line-height:.9;
  letter-spacing:.02em;
}
.section-title {
  font-size:clamp(2rem,4.5vw,3.5rem);
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.1;
}
.section-sub {
  font-size:1.1rem;
  color:var(--t2);
  max-width:580px;
  line-height:1.75;
}
.mono { font-family:var(--fm); }

/* ─── CONTAINER ─── */
.container {
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 2rem;
}

/* ─── NAVIGATION ─── */
.nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h);
  z-index:1000;
  transition:var(--tm);
}
.nav.scrolled {
  background:rgba(3,3,6,0.88);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--glass-b);
}
.nav-inner {
  display:flex; align-items:center;
  justify-content:space-between;
  height:100%;
}
.nav-logo {
  font-family:var(--fd);
  font-size:1.9rem;
  color:var(--t1);
  text-decoration:none;
  letter-spacing:.06em;
  display:flex; align-items:center; gap:.4rem;
}
.logo-badge {
  background:var(--red);
  color:#fff;
  font-family:var(--fm);
  font-size:.6rem;
  padding:.15rem .5rem;
  border-radius:100px;
  letter-spacing:.12em;
  animation:pulse-badge 3s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%,100% { box-shadow:0 0 0 0 var(--red-glow); }
  50%      { box-shadow:0 0 0 8px transparent; }
}
.nav-links {
  display:flex; align-items:center;
  gap:2rem; list-style:none;
}
.nav-links a {
  color:var(--t2); text-decoration:none;
  font-size:.8rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  transition:var(--tr);
  position:relative;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:-4px; left:0;
  width:0; height:1.5px;
  background:var(--red);
  transition:width var(--tr);
}
.nav-links a:hover { color:var(--t1); }
.nav-links a:hover::after { width:100%; }
.nav-links a.active { color:var(--t1); }
.nav-links a.active::after { width:100%; }
.nav-right { display:flex; align-items:center; gap:1rem; }
.nav-hamburger {
  display:none; flex-direction:column;
  gap:5px; cursor:pointer; padding:4px;
}
.nav-hamburger span {
  display:block; width:22px; height:2px;
  background:var(--t1);
  transition:var(--tr);
}
.nav-mobile {
  display:none; position:fixed;
  top:var(--nav-h); left:0; right:0;
  background:rgba(3,3,6,.97);
  backdrop-filter:blur(24px);
  padding:2rem; border-bottom:1px solid var(--glass-b);
  z-index:999;
}
.nav-mobile.open { display:block; }
.nav-mobile a {
  display:block; color:var(--t2);
  text-decoration:none; font-size:1.2rem;
  font-weight:600; padding:.75rem 0;
  border-bottom:1px solid var(--glass-b);
  transition:var(--tr);
}
.nav-mobile a:hover { color:var(--t1); }

/* ─── BUTTONS ─── */
.btn {
  display:inline-flex; align-items:center;
  gap:.5rem; padding:.75rem 1.75rem;
  border-radius:var(--rs);
  font-family:var(--fb); font-size:.8rem;
  font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; text-decoration:none;
  border:none; cursor:pointer;
  transition:var(--tm);
  position:relative; overflow:hidden;
  white-space:nowrap;
}
.btn-primary {
  background:var(--red); color:#fff;
}
.btn-primary::after {
  content:''; position:absolute;
  inset:0; background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
  opacity:0; transition:opacity var(--tr);
}
.btn-primary:hover { background:#ff3d5e; box-shadow:var(--sh-red); transform:translateY(-2px); }
.btn-primary:hover::after { opacity:1; }
.btn-outline {
  background:transparent; color:var(--t1);
  border:1px solid var(--glass-b);
}
.btn-outline:hover { border-color:var(--red); color:var(--red); transform:translateY(-2px); }
.btn-ghost {
  background:transparent; color:var(--t2);
}
.btn-ghost:hover { color:var(--t1); }
.btn-lg { padding:1rem 2.5rem; font-size:.9rem; border-radius:var(--r); }
.btn-sm { padding:.5rem 1.25rem; font-size:.72rem; }

/* ─── BADGES ─── */
.badge {
  display:inline-flex; align-items:center;
  gap:.35rem; padding:.3rem .85rem;
  border-radius:100px; font-size:.7rem;
  font-weight:700; letter-spacing:.1em;
  text-transform:uppercase;
}
.badge-red   { background:var(--red-sub);  color:var(--red);  border:1px solid var(--red-border); }
.badge-cyan  { background:var(--cyan-sub); color:var(--cyan); border:1px solid rgba(0,229,255,.2); }
.badge-gold  { background:var(--gold-sub); color:var(--gold); border:1px solid rgba(255,215,0,.2); }
.badge-green { background:var(--green-sub);color:var(--green);border:1px solid rgba(0,255,136,.2); }

/* ─── CARDS ─── */
.card {
  background:var(--glass);
  border:1px solid var(--glass-b);
  border-radius:var(--r);
  padding:1.75rem;
  transition:var(--tm);
}
.card:hover {
  background:var(--glass-hover);
  border-color:rgba(255,255,255,.1);
  transform:translateY(-3px);
  box-shadow:var(--sh-card);
}
.card-red:hover {
  border-color:var(--red-border);
  box-shadow:var(--sh-red);
}
.card-cyan:hover {
  border-color:rgba(0,229,255,.25);
  box-shadow:var(--sh-cyan);
}

/* ─── GRID ─── */
.grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }

/* ─── SECTIONS ─── */
.section { padding:7rem 0; position:relative; }
.section-header { text-align:center; margin-bottom:4rem; }
.section-label {
  display:inline-block;
  font-family:var(--fm);
  font-size:.68rem; color:var(--red);
  letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:1rem;
}

/* ─── DIVIDERS ─── */
.divider {
  height:1px;
  background:linear-gradient(90deg,transparent,var(--glass-b),transparent);
}

/* ─── STATS ─── */
.stat { text-align:center; padding:1.5rem; }
.stat-num {
  font-family:var(--fd);
  font-size:clamp(2.5rem,6vw,4rem);
  color:var(--red); display:block;
  line-height:1;
}
.stat-lbl {
  font-size:.8rem; color:var(--t2);
  text-transform:uppercase; letter-spacing:.1em;
  margin-top:.5rem;
}

/* ─── GRADIENT TEXTS ─── */
.grad-red  { background:linear-gradient(135deg,var(--red),#ff8a80);   -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-cyan { background:linear-gradient(135deg,var(--cyan),#80deea);  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.grad-gold { background:linear-gradient(135deg,var(--gold),#ffecb3);  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ─── SEPARATOR ─── */
.sep { width:48px; height:3px; background:var(--red); border-radius:2px; }
.sep-c { margin:1.25rem auto; }
.sep-l { margin:1.25rem 0; }

/* ─── REVEAL ANIMATIONS ─── */
.reveal {
  opacity:0; transform:translateY(28px);
  transition:opacity .65s var(--ts), transform .65s var(--ts);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left  { transform:translateX(-28px); }
.reveal-right { transform:translateX(28px);  }
.reveal-left.visible, .reveal-right.visible { transform:translateX(0); }
.d1 { transition-delay:.1s; }
.d2 { transition-delay:.2s; }
.d3 { transition-delay:.3s; }
.d4 { transition-delay:.4s; }
.d5 { transition-delay:.5s; }

/* ─── FLOAT ─── */
.float { animation:float 7s ease-in-out infinite; }
.float-2 { animation:float 9s ease-in-out infinite 1.5s; }
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-12px); }
}

/* ─── GLITCH ─── */
.glitch { position:relative; display:inline-block; }
.glitch::before,.glitch::after {
  content:attr(data-text); position:absolute;
  top:0; left:0; width:100%; height:100%; opacity:0;
}
.glitch:hover::before { color:var(--cyan); opacity:.85; animation:g1 .25s steps(1) infinite; }
.glitch:hover::after  { color:var(--red);  opacity:.85; animation:g2 .25s steps(1) infinite; }
.glitch-on::before    { color:var(--cyan); opacity:.85; animation:g1 .35s steps(1) infinite; }
.glitch-on::after     { color:var(--red);  opacity:.85; animation:g2 .35s steps(1) infinite; }
@keyframes g1 {
  0%   { clip-path:inset(20% 0 60% 0); transform:translate(-3px,0); }
  25%  { clip-path:inset(80% 0 5% 0);  transform:translate(2px,0); }
  50%  { clip-path:inset(45% 0 40% 0); transform:translate(-2px,0); }
  75%  { clip-path:inset(10% 0 75% 0); transform:translate(3px,0); }
  100% { clip-path:inset(60% 0 25% 0); transform:translate(-1px,0); }
}
@keyframes g2 {
  0%   { clip-path:inset(60% 0 20% 0); transform:translate(3px,0); }
  25%  { clip-path:inset(5% 0 80% 0);  transform:translate(-2px,0); }
  50%  { clip-path:inset(40% 0 45% 0); transform:translate(2px,0); }
  75%  { clip-path:inset(75% 0 10% 0); transform:translate(-3px,0); }
  100% { clip-path:inset(25% 0 60% 0); transform:translate(1px,0); }
}

/* ─── TERMINAL ─── */
.terminal {
  background:#000;
  border:1px solid rgba(0,255,136,.18);
  border-radius:var(--r); overflow:hidden;
  font-family:var(--fm);
}
.terminal-bar {
  background:rgba(0,255,136,.05);
  padding:.65rem 1rem;
  display:flex; align-items:center; gap:.5rem;
  border-bottom:1px solid rgba(0,255,136,.1);
}
.tdot { width:11px; height:11px; border-radius:50%; }
.tdot-r { background:#ff5f56; }
.tdot-y { background:#ffbd2e; }
.tdot-g { background:#27c93f; }
.terminal-title {
  flex:1; text-align:center; margin-left:-33px;
  font-size:.7rem; color:rgba(0,255,136,.4);
}
.terminal-body {
  padding:1.25rem 1.5rem;
  color:var(--green); font-size:.82rem;
  line-height:1.9; min-height:160px;
}
.t-line { display:flex; gap:.5rem; }
.t-prompt { color:var(--red); user-select:none; }
.t-cursor {
  display:inline-block; width:7px;
  height:1.1em; background:var(--green);
  animation:blink 1s step-end infinite;
  vertical-align:middle; margin-left:2px;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* ─── PULSE RING ─── */
.pulse-ring {
  position:relative; display:inline-block;
}
.pulse-ring::before {
  content:''; position:absolute;
  inset:-6px; border:2px solid var(--red);
  border-radius:50%; opacity:0;
  animation:ring 2s ease-out infinite;
}
@keyframes ring {
  0%   { transform:scale(.9); opacity:.6; }
  100% { transform:scale(1.5); opacity:0; }
}

/* ─── BENTO CARDS ─── */
.bento { display:grid; gap:1.25rem; }
.bento-2 { grid-template-columns:repeat(2,1fr); }
.bento-3 { grid-template-columns:repeat(3,1fr); }
.bento-item {
  background:var(--glass);
  border:1px solid var(--glass-b);
  border-radius:var(--rl);
  padding:2rem; overflow:hidden;
  position:relative; transition:var(--tm);
}
.bento-item:hover {
  background:var(--glass-hover);
  transform:translateY(-3px);
  box-shadow:var(--sh-card);
}
.bento-span-2 { grid-column:span 2; }

/* ─── PRICE CARDS ─── */
.price-card {
  background:var(--glass);
  border:1px solid var(--glass-b);
  border-radius:var(--rl);
  padding:2.5rem;
  position:relative; overflow:hidden;
  transition:var(--tm);
}
.price-card-featured {
  background:linear-gradient(135deg,rgba(255,23,68,.08),rgba(255,23,68,.03));
  border-color:var(--red-border);
  transform:scale(1.04);
}
.price-card-featured::before {
  content:''; position:absolute;
  inset:0; background:linear-gradient(135deg,rgba(255,23,68,.05),transparent);
}
.price-card:hover { transform:translateY(-5px); box-shadow:var(--sh-card); }
.price-card-featured:hover { transform:scale(1.04) translateY(-5px); }
.price-amount {
  font-family:var(--fd); font-size:3.5rem;
  line-height:1; color:var(--t1);
}
.price-currency { font-size:1.5rem; vertical-align:top; margin-top:.5rem; display:inline-block; }
.price-period { font-size:.9rem; color:var(--t2); }
.price-features { list-style:none; margin:1.5rem 0; display:flex; flex-direction:column; gap:.85rem; }
.price-features li { display:flex; align-items:flex-start; gap:.75rem; font-size:.9rem; color:var(--t2); }
.price-features li .check { color:var(--green); flex-shrink:0; margin-top:.15rem; }
.price-features li .x { color:var(--t4); flex-shrink:0; margin-top:.15rem; }

/* ─── TIMELINE ─── */
.timeline { position:relative; padding-left:2.5rem; }
.timeline::before {
  content:''; position:absolute;
  left:.75rem; top:0; bottom:0;
  width:2px; background:linear-gradient(to bottom, var(--red), var(--cyan), transparent);
}
.timeline-item { position:relative; padding-bottom:2.5rem; }
.timeline-item::before {
  content:''; position:absolute;
  left:-2.5rem; top:.3rem;
  width:16px; height:16px;
  border-radius:50%; background:var(--bg-2);
  border:2px solid var(--red);
  box-shadow:0 0 12px var(--red-glow);
}
.timeline-item:last-child { padding-bottom:0; }

/* ─── FOOTER ─── */
.footer {
  background:var(--bg-1);
  border-top:1px solid var(--glass-b);
  padding:5rem 0 2.5rem;
}
.footer-grid {
  display:grid;
  grid-template-columns:2.5fr 1fr 1fr 1fr;
  gap:3rem; margin-bottom:3rem;
}
.footer-brand { font-family:var(--fd); font-size:2.2rem; margin-bottom:1rem; }
.footer-desc { color:var(--t2); font-size:.85rem; line-height:1.75; max-width:280px; }
.footer-heading { font-size:.68rem; text-transform:uppercase; letter-spacing:.14em; color:var(--t3); margin-bottom:1.25rem; }
.footer-links { list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.footer-links a { color:var(--t2); text-decoration:none; font-size:.85rem; transition:var(--tr); }
.footer-links a:hover { color:var(--t1); }
.footer-bottom {
  padding-top:2rem; border-top:1px solid var(--glass-b);
  display:flex; align-items:center;
  justify-content:space-between;
  font-size:.72rem; color:var(--t3);
}
.footer-status { display:flex; align-items:center; gap:.5rem; }
.status-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--green);
  animation:pulse-badge 2s ease-in-out infinite;
}

/* ─── RESPONSIVE ─── */
@media (max-width:1024px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .bento-3 { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-grid > :first-child { grid-column:1/-1; }
}
@media (max-width:768px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .bento-2,.bento-3 { grid-template-columns:1fr; }
  .bento-span-2 { grid-column:span 1; }
  .nav-links { display:none; }
  .nav-right .btn-outline { display:none; }
  .nav-hamburger { display:flex; }
  .section { padding:5rem 0; }
  .container { padding:0 1.25rem; }
  .price-card-featured { transform:scale(1); }
  .price-card-featured:hover { transform:translateY(-5px); }
}