/* ============================================================
   Destrio Core — THÈME PRO REFONTE (style EXM + Paragon)
   Chargé EN DERNIER (index uniquement) après style.css + protweak.css.
   Noir profond #010101 · Accent or #e9e9e9 · Bleu glace #8f8f8f
   Identité : esports / premium SaaS. FX matrix+intro+curseur conservés.
   ============================================================ */

/* ---------- Tokens : palette PRO forcée ---------- */
:root {
  --bg: #010101;
  --bg2: #020202;
  --card: #030303;
  --card2: #040404;
  --line: rgba(255, 255, 255, 0.08);
  --txt: #f2f2f2;
  --muted: #8f8f8f;
  --rose: #e9e9e9;
  --rose-l: #ffffff;
  --violet: #8f8f8f;
  --grad: linear-gradient(135deg, #ffffff, #e9e9e9 55%, #8f8f8f);
  --esp-ac-rgb: 233, 233, 233;
  --amb1: rgba(255,255,255,0.08);
  --amb2: rgba(255,255,255,0.07);
  --amb3: rgba(255,255,255,0.04);
  --radius: 16px;
  --accent: #e9e9e9;
  --accent-2: #ffffff;
  --accent-3: #f5f5f5;
  --ink: #f2f2f2;
  --mono: 'JetBrains Mono', monospace;
}
body {
  --rose: #e9e9e9 !important;
  --rose-l: #ffffff !important;
  --violet: #8f8f8f !important;
  --esp-ac-rgb: 233, 233, 233 !important;
  --card: #030303 !important;
  --card2: #040404 !important;
  --line: rgba(255, 255, 255, 0.08) !important;
  --amb1: rgba(255,255,255,0.08) !important;
  --amb2: rgba(255,255,255,0.07) !important;
  --amb3: rgba(255,255,255,0.04) !important;
}

/* ---------- Base ---------- */
body {
  background:
    radial-gradient(1500px 950px at 80% -12%, rgba(255,255,255,0.06), transparent 58%),
    radial-gradient(1200px 800px at -8% 20%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 700px at 50% 118%, rgba(255,255,255,0.04), transparent 62%),
    #010101;
  color: #f2f2f2;
  font-family: 'Poppins', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body::before {
  background:
    radial-gradient(860px 460px at 85% -5%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(800px 520px at -10% 25%, rgba(255,255,255,0.03), transparent 60%),
    radial-gradient(1000px 700px at 50% 115%, rgba(255,255,255,0.04), transparent 65%);
}
body::after { background: radial-gradient(ellipse at center, transparent 55%, rgba(1,1,1,0.7) 100%); }
::selection { background: rgba(255,255,255,0.27); color: #fff; }

/* Typo display : Bebas Neue uppercase esprit Paragon/EXM */
h1, h2, h3, .stat b, .pack-name, .pcard-name, .price-new, .dc-stat-num,
.pop-title, .hero-title, .section-title, .sp-title, .discord-title,
.score-name, .score-num, .bm-score, .aa-gain, .pcard-name-life {
  font-family: 'Poppins', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.015em;
  font-weight: 400;
}
.hero-title, .section-title, .sp-title, .discord-title, .cta-box .section-title {
  text-shadow: 0 2px 18px rgba(255,255,255,0.17);
  letter-spacing: 0.02em;
}

/* Labels mono uppercase */
.section-label, .engine-tag, .scan-title, .scan-lbl, .scan-pct, .score-name,
.sbar-top, .ba-head, .hist-date, .bm-label, .bm-metric span:first-child,
.rc-hw, .dc-stat-lbl, .hero-eyebrow, .marquee-track span, .ht-item,
.sp-tag, .bc-label, .pay-label, .nav a {
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #010101; }
::-webkit-scrollbar-thumb { background: #141414; border-radius: 5px; border: 2px solid #010101; }
::-webkit-scrollbar-thumb:hover { background: #e9e9e9; }

/* ---------- Intro ---------- */
#intro { background: #010101; }
.intro-char { color: #f2f2f2; text-shadow: 0 0 34px rgba(255,255,255,0.42); }
.intro-char.orange { color: #e9e9e9; }

/* ---------- Header verre (premium) ---------- */
#siteHeader {
  background: rgba(1,1,1,0.96);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
#siteHeader.scrolled {
  background: rgba(1,1,1,0.97);
  border-color: rgba(255,255,255,0.13);
  box-shadow: 0 18px 50px -22px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255,255,255,0.04);
}
.logo-txt { font-family: 'Poppins', system-ui, sans-serif; letter-spacing: 1.5px; font-size: 20px; }
.logo-txt em { color: #e9e9e9; }
.nav { gap: 28px; color: rgba(226, 231, 245, 0.62); }
.nav a::after { background: linear-gradient(90deg, #e9e9e9, #ffffff); box-shadow: 0 0 10px rgba(255,255,255,0.48); }
.nav-cta {
  background: linear-gradient(180deg, #d4d4d4, #a3a3a3);
  color: #020202;
  border-radius: 980px;
  padding: 9px 18px;
  box-shadow: 0 8px 26px -10px rgba(255,255,255,0.51);
  font-weight: 700;
}
.nav-cta:hover { background: linear-gradient(180deg, #e4e4e4, #d4d4d4); color: #010101 !important; box-shadow: 0 10px 34px -8px rgba(255,255,255,0.54); }
.nav-status { color: #8f8f8f; }
.nav-dot { background: #3ddc84; box-shadow: 0 0 8px #3ddc84; }
.lang-btn, .btn-account, .burger {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.13);
  color: #e4e4e4;
}
.lang-btn:hover, .btn-account:hover, .burger:hover { border-color: rgba(255,255,255,0.36); }
.header-right .btn-discord {
  background: rgba(88, 101, 242, 0.16);
  border: 1px solid rgba(88, 101, 242, 0.4);
  color: #e4e4e4;
}
.header-right .btn-discord:hover { background: rgba(88, 101, 242, 0.28); box-shadow: 0 0 20px rgba(88, 101, 242, 0.4); }
.nav.open { background: #030303; border-left: 1px solid rgba(255,255,255,0.15); }

/* ---------- Popup promo ---------- */
#popup {
  background: rgba(2,2,2,0.97);
  border-color: rgba(255,255,255,0.27);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 0 42px rgba(255,255,255,0.13), 0 12px 44px rgba(0, 0, 0, 0.75);
}
.pop-tag { color: #e9e9e9; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); }
.pop-code { color: #e9e9e9; font-family: var(--mono); }
.pop-cta { background: linear-gradient(135deg, #e9e9e9, #8f8f8f); color: #fff; }
.announce { border-bottom-color: rgba(255,255,255,0.18); }
.announce::before { background: linear-gradient(90deg, transparent, #ffffff, transparent); }
.ann-timer { color: #ffffff; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.21); }

/* ---------- Hero (esprit Paragon : Max Performance. Zero Lag.) ---------- */
.hero { padding-top: 140px; }
.hero-eyebrow { color: #e9e9e9; font-size: 12.5px; }
.hero-eyebrow .dot { background: #e9e9e9; box-shadow: 0 0 12px #e9e9e9; }
.hero-title {
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.98;
  letter-spacing: 0.02em;
}
.hero-title .grad {
  background: linear-gradient(120deg, #f5f5f5 5%, #e9e9e9 55%, #8f8f8f 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 18px rgba(255,255,255,0.21);
}
.hero-sub { color: rgba(226, 231, 245, 0.7); max-width: 720px; }
.btn-primary {
  background: linear-gradient(135deg, #d4d4d4, #a3a3a3);
  color: #020202;
  box-shadow: 0 8px 30px rgba(255,255,255,0.23);
  border-radius: 10px;
  font-weight: 700;
}
.btn-primary:hover { background: linear-gradient(135deg, #e4e4e4, #d4d4d4); box-shadow: 0 12px 42px rgba(255,255,255,0.33); transform: translateY(-2px); }
.btn-ghost:hover { border-color: #e9e9e9; background: rgba(255,255,255,0.04); }
.hero-app { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 34px 100px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.11); }
.hero-app-glow { background: linear-gradient(135deg, rgba(255,255,255,0.18), transparent 55%, rgba(255,255,255,0.11)); }
.stat b { color: #e9e9e9; text-shadow: 0 0 24px rgba(255,255,255,0.3); font-size: 30px; }

/* ---------- Marquee ---------- */
.marquee { border-top-color: rgba(255,255,255,0.1); border-bottom-color: rgba(255,255,255,0.1); background: #030303; }
.marquee-track i { color: #e9e9e9; }

/* ---------- Sections / titres ---------- */
.section-title span { background: linear-gradient(120deg, #f5f5f5, #e9e9e9, #8f8f8f); -webkit-background-clip: text; background-clip: text; color: transparent; }
.section-title::after { background: linear-gradient(90deg, #e9e9e9, #ffffff); box-shadow: 0 0 18px rgba(255,255,255,0.36); }
.section-label { color: #e9e9e9; }

/* ---------- Moteurs (engines) ---------- */
.engine { background: var(--card); border-color: var(--line); }
.engine:hover { border-color: rgba(255,255,255,0.3); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); }
.engine::before { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.48), transparent); }
.engine-ico { color: #e9e9e9; background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03)); border-color: rgba(255,255,255,0.21); }
.engine-tag { color: #e9e9e9; }

/* ---------- Scan panels ---------- */
.scan-panel { background: #030303; border-color: rgba(255, 255, 255, 0.08); }
.scan-panel::after { background: radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,0.04), transparent 60%); }
.scan-bar { background: linear-gradient(90deg, #8f8f8f, #e9e9e9); box-shadow: 0 0 12px rgba(255,255,255,0.42); }
.scan-pct { color: #e9e9e9; }
.sbar-fill { background: linear-gradient(90deg, #8f8f8f, #e9e9e9); }
.sbar-fill.low { background: linear-gradient(90deg, #e9e9e9, #8f8f8f); }
.ba-col { background: #030303; border-color: rgba(255, 255, 255, 0.08); }
.ba-col.ba-ai { border-color: rgba(255,255,255,0.27); background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01)); }
.ba-ai .ba-head { color: #e9e9e9; }

/* ---------- Jeux ---------- */
.game-ico { color: #e9e9e9; background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03)); border-color: rgba(255,255,255,0.21); }
.game-score .gsfill { background: linear-gradient(90deg, #8f8f8f, #e9e9e9); }
.game-name { font-family: 'Poppins', system-ui, sans-serif; font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase; }

/* ---------- Avis ---------- */
.mq-wrap::before { background: linear-gradient(90deg, #010101, transparent); }
.mq-wrap::after { background: linear-gradient(-90deg, #010101, transparent); }
.rc { background: #030303; border-color: rgba(255, 255, 255, 0.08); }
.rc:hover { border-color: rgba(255,255,255,0.21); }
.rc-stars { color: #e9e9e9; }
.rc-av { color: #e9e9e9; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.21); }
.rc-hw { color: #e9e9e9; }
.rc-name { font-weight: 600; }
.rev-filters button.active { color: #e9e9e9; background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.36); }
.rev-note b { color: #ffffff; }

/* ---------- Packs (cartes prix premium) ---------- */
.pcard { background: #030303; border-color: rgba(255, 255, 255, 0.1); }
.pcard-pro { border-color: rgba(255,255,255,0.21); background: linear-gradient(160deg, #030303, #030303); }
.pcard-pro:hover { border-color: rgba(255,255,255,0.39); box-shadow: 0 20px 60px rgba(255,255,255,0.09); }
.pcard-lifetime {
  position: relative;
  border-color: rgba(255,255,255,0.42);
  background: linear-gradient(160deg, #050505, #030303);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.21), 0 0 52px rgba(255,255,255,0.13), 0 24px 56px rgba(0, 0, 0, 0.5);
}
.pcard-lifetime::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.1), transparent 60%);
  animation: proPackPulse 3s ease-in-out infinite;
  z-index: 0;
}
.pcard-lifetime > * { position: relative; z-index: 1; }
@keyframes proPackPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.pcard-lifetime:hover { border-color: rgba(255,255,255,0.57); box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 76px rgba(255,255,255,0.23), 0 32px 80px rgba(255,255,255,0.07); }
.pcard-badge { background: linear-gradient(135deg, #e9e9e9, #8f8f8f); color: #fff; box-shadow: 0 0 20px rgba(255,255,255,0.36); }
.icon-pro { color: #ffffff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); }
.icon-life { color: #f5f5f5; background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); }
.pcard-cat-pro { color: #ffffff; }
.pcard-cat-life { color: #f5f5f5; }
.check-pro { color: #ffffff; background: rgba(255,255,255,0.09); }
.check-life { color: #f5f5f5; background: rgba(255,255,255,0.11); }
.price-life { color: #ffffff; text-shadow: 0 0 26px rgba(255,255,255,0.3); }
.btn-buy-pro { background: linear-gradient(135deg, #d4d4d4, #a3a3a3); color: #020202; font-weight: 700; }
.btn-buy-pro:hover { box-shadow: 0 0 26px rgba(255,255,255,0.3); }
.btn-buy-life { background: linear-gradient(135deg, #d4d4d4, #a3a3a3); color: #020202; box-shadow: 0 0 26px rgba(255,255,255,0.3); font-weight: 700; }
.btn-buy-life:hover { box-shadow: 0 0 40px rgba(255,255,255,0.45); }

/* ---------- Comment ça marche ---------- */
.step-n { color: #080808; background: var(--grad); text-shadow: none; font-weight: 800; }
@media (min-width: 1025px) { .step:not(:last-child)::after { background: linear-gradient(90deg, #8f8f8f, #e9e9e9); } }

/* ---------- Showcase ---------- */
.sp-tag { color: #e9e9e9; }
.sp-feat-dot { background: #e9e9e9; box-shadow: 0 0 9px #e9e9e9; }
.sp-price { color: #e9e9e9; }

/* ---------- Bande Discord ---------- */
.discord-eyebrow { color: #e9e9e9; }
.discord-title span { color: #e9e9e9; }
.dc-stat-num { color: #e9e9e9; }
.dc-av { color: #e9e9e9; background: rgba(255,255,255,0.09); }
.dc-join { background: linear-gradient(135deg, #5865F2, #525252); color: #fff; }
.dc-join:hover { background: linear-gradient(135deg, #525252, #5865F2); box-shadow: 0 0 20px rgba(88, 101, 242, 0.5); }

/* ---------- FAQ ---------- */
.faq-list details { background: #030303; border-color: rgba(255, 255, 255, 0.08); }
.faq-list details[open] { border-color: rgba(255,255,255,0.24); box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 0 26px rgba(255,255,255,0.05); }
.faq-list summary::after, .faq-list summary i { color: #e9e9e9; }

/* ---------- CTA final ---------- */
.cta-box { background: radial-gradient(ellipse 70% 60% at 50% 120%, rgba(255,255,255,0.08), transparent 70%), #030303; border-color: rgba(255,255,255,0.15); }
.cta-box:hover { border-color: rgba(255,255,255,0.27); }
.cta-chip { color: #ffffff; background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.27); }
.cta-trust i, .packs-note i { color: #e9e9e9; }

/* ---------- Footer ---------- */
.footer { border-top-color: rgba(255, 255, 255, 0.08); background: #010101; }
.footer-social a:hover, .footer-col a:hover, .footer-legal a:hover { color: #e9e9e9; }
.footer-social a:hover { border-color: rgba(255,255,255,0.27); }
.footer-pay i:hover { color: #e9e9e9; }

/* ---------- Back top ---------- */
.back-top { background: linear-gradient(135deg, #d4d4d4, #a3a3a3); color: #020202; box-shadow: 0 0 22px rgba(255,255,255,0.3); }
.back-top:hover { background: linear-gradient(135deg, #e4e4e4, #d4d4d4); }

/* ---------- AI assistant ---------- */
.ai-fab { background: linear-gradient(135deg, #e9e9e9, #8f8f8f); box-shadow: 0 8px 30px rgba(255,255,255,0.3); }
.ai-fab:hover { box-shadow: 0 10px 36px rgba(255,255,255,0.42); }
.ai-panel { background: #030303; border-color: rgba(255,255,255,0.15); }
.ai-head { background: linear-gradient(135deg, rgba(255,255,255,0.11), rgba(255,255,255,0.03)); }
.ai-msg.user { background: rgba(255,255,255,0.11); border-color: rgba(255,255,255,0.24); }
.ai-quick button { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.21); color: #e8e8e8; }
.ai-quick button i, .ai-act { color: #ffffff; }
.ai-input input:focus { border-color: rgba(255,255,255,0.36); }

/* ---------- Benchmark (avant / après) ---------- */
.bm-vs-head { border-color: rgba(255,255,255,0.15); }
.bm-vs-tag { color: #e9e9e9; }
.bm-vs-gain { color: #4ade80; }
.bm-td-g i { color: #4ade80; }
.bm-table { border-color: rgba(255, 255, 255, 0.08); }
.bm-row-head { background: rgba(255,255,255,0.04); }

/* ---------- Hist / divers ---------- */
.hist-date { color: #e9e9e9; }
.bm-label { color: #e9e9e9; }
.warn i { color: #f59e0b; }
.pcard-save { color: #4ade80; }
.pcard-oneshot { color: #ffffff; }

/* ---------- Modal / composants utiles ---------- */
.modal-box { background: #030303; border: 1px solid rgba(255,255,255,0.12); }
.btn-discord.btn-block { background: #5865F2; color: #fff; }
.btn-discord.btn-block:hover { background: #525252; }
.guide-plan .gp-price { color: #e9e9e9; }
.promo-row input:focus { border-color: rgba(255,255,255,0.36); }
.promo-status.ok { color: #4ade80; }
.promo-status.no { color: #f87171; }
.modal-secure i { color: #4ade80; }

/* ---------- Conteneurs principaux : halo discret ---------- */
.container { position: relative; }

/* ---------- Cartes : bordure + gradient subtil ---------- */
.card, .app-window, .scan-panel, .rc, .pcard, .faq-list details, .engine,
.score-card, .bk-card, .bm-table, .bios-rec {
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

/* ---------- Responsive garde ---------- */
@media (max-width: 900px) {
  .hero-title { font-size: clamp(44px, 11vw, 72px); }
  .pcard-name-life { font-size: 32px; }
  .score-num { font-size: 40px; }
}