:root{
  --bg: #0b0b0d;
  --bg2:#121216;
  --card:#16161c;
  --text:#ffffff;
  --muted: rgba(255,255,255,.68);
  --line: rgba(255,255,255,.10);
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --accent:#ff2a2a;
  --accent2:#00ffae;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% -10%, rgba(255,42,42,.18), transparent 60%),
              radial-gradient(1200px 800px at 100% 0%, rgba(0,255,174,.14), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ width:min(1150px, 92vw); margin-inline:auto; }
.nav{ position:fixed; width:100%; top:0; z-index:1000; backdrop-filter: blur(14px); background: rgba(10,10,12,.6); border-bottom:1px solid rgba(255,255,255,.08);}
.nav__inner{ height:70px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:0 10px;}
.logo{ display:flex; align-items:center; gap:10px; font-family: Archivo, sans-serif; font-weight:800; letter-spacing:.4px;}
.logo__mark{ display:inline-grid; place-items:center; width:44px;height:44px; border-radius:12px; background: linear-gradient(135deg, rgba(255,42,42,.95), rgba(0,255,174,.75)); box-shadow: 0 10px 30px rgba(255,42,42,.22); font-size:14px;}
.logo__text{ font-size:14px; opacity:.95;}
.nav__links{ display:flex; align-items:center; gap:18px;}
.nav__links a{ font-size:14px; opacity:.85; transition:.2s ease;}
.nav__links a:hover{ opacity:1; transform:translateY(-1px);}
.nav__cta{ padding:10px 14px; border:1px solid rgba(255,255,255,.15); border-radius:999px; background: rgba(255,255,255,.06);}
.nav__toggle{ display:none; width:44px;height:44px; border:1px solid rgba(255,255,255,.15); border-radius:12px; background: rgba(255,255,255,.05); cursor:pointer;}
.nav__toggle span{ display:block; height:2px; background: white; width:18px; margin:5px auto; opacity:.9;}
.hero{ position:relative; min-height:100vh; display:grid; place-items:center; padding-top:80px;}
.hero__bg{ position:absolute; inset:0;}
.hero__overlay{ position:absolute; inset:0; background: radial-gradient(900px 600px at 25% 35%, rgba(0,0,0,.10), rgba(0,0,0,.85)), linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.9));}
.hero__content{ position:relative; z-index:2; padding:40px 0 30px;}
.hero__eyebrow{ display:inline-block; font-size:13px; opacity:.85; border:1px solid rgba(255,255,255,.18); padding:7px 12px; border-radius:999px; background: rgba(0,0,0,.28);}
.hero__title{ font-family: Archivo, sans-serif; font-weight:800; font-size: clamp(36px, 5vw, 62px); line-height:1.02; margin:18px 0 14px; letter-spacing:-.8px;}
.hero__title span{ display:block; font-size: clamp(18px, 2.1vw, 24px); opacity:.9; font-weight:600; margin-top:12px;}
.hero__subtitle{ max-width:52ch; font-size: clamp(15px, 2vw, 18px); color:var(--muted); margin: 0 0 24px;}
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:28px;}
.hero__stats{ display:flex; gap:18px; flex-wrap:wrap; margin-top:22px;}
.stat{ padding:12px 14px; border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.35); min-width: 170px;}
.stat__num{ display:block; font-weight:800; font-family: Archivo, sans-serif; font-size:18px;}
.stat__label{ font-size:13px; opacity:.78;}
.hero__scrollhint{ position:absolute; bottom:22px; display:flex; align-items:center; gap:10px; opacity:.82; font-size:12px; z-index:3;}
.scroll-dot{ width:28px;height:44px; border:1px solid rgba(255,255,255,.25); border-radius:999px; position:relative;}
.scroll-dot::after{ content:""; position:absolute; left:50%; top:10px; transform:translateX(-50%); width:6px;height:6px; border-radius:999px; background:white; animation: scrollDot 1.3s infinite;}
@keyframes scrollDot{0%{ transform:translate(-50%,0); opacity:1;}70%{ transform:translate(-50%,18px); opacity:.35;}100%{ opacity:0;}}
.btn{ border-radius:999px; padding:13px 16px; font-weight:700; letter-spacing:.2px; border:1px solid rgba(255,255,255,.14); transition:.2s ease; display:inline-flex; align-items:center; justify-content:center; gap:10px; user-select:none;}
.btn--primary{ background: linear-gradient(135deg, var(--accent), #ff5555); border-color: transparent; box-shadow: 0 18px 45px rgba(255,42,42,.25);}
.btn--primary:hover{ transform:translateY(-2px); filter:saturate(1.2);}
.btn--ghost{ background: rgba(0,0,0,.35);}
.btn--ghost:hover{ transform:translateY(-2px); background: rgba(0,0,0,.55);}
.btn--block{ width:100%;}
.trust{ background: rgba(0,0,0,.88); border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08);}
.trust__label{ font-family: Archivo, sans-serif; font-weight:800; opacity:.85;}
.section{ padding: 90px 0;}
.section--dark{ background: linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,0)); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06);}
.section__header{ margin-bottom: 36px;}
.section__header h2{ font-family: Archivo, sans-serif; font-weight:800; font-size: clamp(26px, 3.2vw, 42px); margin:0 0 10px;}
.section__header p{ margin:0; color:var(--muted); max-width: 65ch;}
.grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;}
.info-card{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding:22px; box-shadow: var(--shadow);}
.info-card__icon{ font-size: 26px; margin-bottom: 10px;}
.info-card h3{ font-family: Archivo, sans-serif; margin: 0 0 8px; font-size:20px;}
.info-card p{ margin:0; color:var(--muted); line-height:1.55;}
.driver-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;}
.driver-card{ position:relative; border-radius: var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.12); min-height: 360px; background: #0e0e12;}
.driver-card__img{ width:100%; height:100%; object-fit:cover; transform: scale(1.02); filter: contrast(1.1) saturate(1.08);}
.driver-card__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; padding:18px; background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.05) 60%);}
.driver-card__overlay h3{ margin:0 0 6px; font-family: Archivo, sans-serif; font-weight:800;}
.driver-card__overlay p{ margin:0 0 12px; color:var(--muted);}
.socials{ display:flex; gap:10px; flex-wrap:wrap;}
.social{ font-size:12px; font-weight:800; padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.30);}
.pricing-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:18px;}
.pricing-card{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding:24px; box-shadow: var(--shadow); position:relative; overflow:hidden;}
.pricing-card__tag{ display:inline-block; font-size:12px; font-weight:800; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.26); margin-bottom:14px;}
.pricing-card h3{ margin:0 0 12px; font-family: Archivo, sans-serif; font-weight:800;}
.pricing-card ul{ margin:0; padding-left:18px; color:var(--muted); line-height:1.7;}
.embed-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px;}
.embed-card{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius); padding:20px;}
.embed-placeholder{ height:240px; display:grid; place-items:center; border-radius: 14px; margin-top:14px; background: rgba(0,0,0,.35); border:1px dashed rgba(255,255,255,.18); font-weight:800; opacity:.85;}
.product-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:18px;}
.product-card{ background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.1); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow);}
.product-card img{ height:180px; width:100%; object-fit:cover;}
.product-card__content{ padding:14px;}
.product-card__content h3{ margin:0 0 6px; font-family: Archivo, sans-serif;}
.giveaway{ display:grid; grid-template-columns: 1.2fr .8fr; align-items:center; gap:22px;}
.prize-card{ border-radius: var(--radius); padding:22px; background: linear-gradient(135deg, rgba(255,42,42,.18), rgba(0,0,0,.6)); border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow);}
.optin{ background: radial-gradient(800px 500px at 15% 25%, rgba(255,42,42,.25), transparent 60%), radial-gradient(800px 500px at 90% 60%, rgba(0,255,174,.16), transparent 60%), rgba(0,0,0,.85); border-top:1px solid rgba(255,255,255,.08);}
.optin__box{ border-radius: 26px; padding: 28px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.45); box-shadow: var(--shadow); display:grid; grid-template-columns: 1fr 1fr; gap:22px;}
.optin__text h2{ font-family: Archivo, sans-serif; margin:0 0 10px; font-weight:800; font-size: clamp(22px, 3vw, 36px);}
.optin__text p{ margin:0; color:var(--muted); line-height:1.6;}
.optin__form label{ display:block; font-size:13px; opacity:.9; margin-bottom:12px;}
.optin__form input{ width:100%; margin-top:8px; padding:12px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.35); color:white; outline:none;}
.checkbox{ display:flex !important; align-items:flex-start; gap:10px; margin: 10px 0 12px;}
.footer{ padding:70px 0 20px; background: rgba(0,0,0,.92); border-top:1px solid rgba(255,255,255,.08);}
.footer__inner{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
.footer__links{ display:flex; gap:44px; flex-wrap:wrap;}
.footer__links h4{ font-family: Archivo, sans-serif; margin:0 0 12px; font-weight:800;}
.footer__links a{ display:block; color:var(--muted); margin-bottom:10px; font-size:14px;}
.footer__bottom{ border-top: 1px solid rgba(255,255,255,.08); margin-top:30px; padding-top:18px; text-align:center;}
.reveal{ opacity:0; transform: translateY(16px); transition: .8s ease;}
.reveal.in{ opacity:1; transform: translateY(0);}
.center{ text-align:center; margin-top:26px; }
.muted{ color:var(--muted); }
.tiny{ font-size:12px; opacity:.8; }
@media (max-width: 980px){
  .grid-3, .pricing-grid, .driver-grid, .embed-grid{ grid-template-columns: 1fr; }
  .product-grid{ grid-template-columns: repeat(2,1fr); }
  .giveaway{ grid-template-columns: 1fr; }
  .optin__box{ grid-template-columns: 1fr; }
  .nav__toggle{ display:inline-block; }
  .nav__links{
    position:fixed; top:70px; right:0; height: calc(100vh - 70px);
    width:min(320px, 88vw); background: rgba(10,10,12,.94);
    backdrop-filter: blur(12px); border-left:1px solid rgba(255,255,255,.12);
    padding:18px; flex-direction:column; align-items:flex-start;
    transform: translateX(100%); transition:.25s ease;
  }
  .nav__links.open{ transform: translateX(0); }
}

/* ============================
   UPGRADE PACK (VISUALS)
============================ */
.hero--video .hero__bg--video{ position:absolute; inset:0; overflow:hidden;}
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter: contrast(1.1) saturate(1.12); transform: scale(1.03);}
.hero__grain{ position:absolute; inset:0; pointer-events:none; background-image:url("https://grainy-gradients.vercel.app/noise.svg"); opacity:.12; mix-blend-mode: overlay;}
.hero__badges{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.badge{ padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.28); font-size:12px; font-weight:800; opacity:.92;}
.btn--glow{ position:relative;}
.btn--glow::after{ content:""; position:absolute; inset:-10px; border-radius:999px; background: radial-gradient(circle at 30% 30%, rgba(255,42,42,.45), transparent 60%); filter: blur(14px); opacity:.6; z-index:-1;}
.btn--shine{ position:relative; overflow:hidden;}
.btn--shine::before{ content:""; position:absolute; inset:0; transform: translateX(-120%); background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.14) 50%, transparent 100%); animation: shine 3.8s infinite;}
@keyframes shine{0%{ transform: translateX(-120%);}45%{ transform: translateX(120%);}100%{ transform: translateX(120%);}}
.trust--marquee{ padding:18px 0 8px;}
.marquee{ overflow:hidden; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.75); margin-top:14px;}
.marquee__track{ display:flex; gap:26px; width:max-content; animation: marquee 25s linear infinite; padding:14px 0;}
.marquee__group{ display:flex; gap:26px; align-items:center;}
.marquee img{ height:38px; opacity:.92; filter: contrast(1.1);}
@keyframes marquee{0%{ transform: translateX(0);}100%{ transform: translateX(-50%);}}
.info-card, .pricing-card, .embed-card, .product-card{ transition: .25s ease;}
.info-card:hover, .pricing-card:hover, .embed-card:hover, .product-card:hover{ transform: translateY(-6px); border-color: rgba(255,255,255,.18); box-shadow: 0 30px 80px rgba(0,0,0,.75);}
.driver-card{ transition: .25s ease;}
.driver-card:hover{ transform: translateY(-6px);}
.driver-card:hover .driver-card__img{ transform: scale(1.06); transition: .7s ease;}
.section--dark{ position:relative;}
.section--dark::before{ content:""; position:absolute; inset:-1px 0 auto 0; height:1px; background: linear-gradient(to right, transparent, rgba(255,42,42,.35), rgba(0,255,174,.25), transparent);}
.mobile-cta{ display:none;}
@media (max-width: 980px){
  .mobile-cta{ display:flex; position:fixed; bottom:12px; left:50%; transform:translateX(-50%); width:min(520px, 92vw);
    background: rgba(15,15,18,.88); backdrop-filter: blur(16px); border:1px solid rgba(255,255,255,.14);
    border-radius: 999px; padding:10px; gap:10px; z-index:9999; box-shadow: 0 20px 70px rgba(0,0,0,.65);}
  .mobile-cta a{ flex:1; padding:12px 14px; text-align:center; border-radius:999px; font-weight:900; font-size:14px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.32);}
  .mobile-cta .primary{ background: linear-gradient(135deg, var(--accent), #ff5555); border-color: transparent;}
}
/* Driver slider */
.slider{ position:relative;}
.slider__track{ display:flex; gap:18px; overflow:auto; scroll-behavior:smooth; padding:8px 4px; scrollbar-width: none;}
.slider__track::-webkit-scrollbar{ display:none;}
.slider-card{ flex: 0 0 min(340px, 84vw); min-height: 420px;}
.slider__btn{ position:absolute; top:50%; transform: translateY(-50%); width:46px;height:46px; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.45); backdrop-filter: blur(10px); color:white; font-size:26px; cursor:pointer; z-index:10;}
.slider__btn--left{ left:-8px;}
.slider__btn--right{ right:-8px;}
@media (max-width:980px){ .slider__btn{ display:none;} }