/* AI / Future Tech Theme (edgy dark) — safe override layer
   This file is designed to sit AFTER style.css without changing HTML structure. */

:root{
  --bg:#05070d;
  --text:#e5e7eb;
  --muted:#a8b0bd;
  --line:rgba(255,255,255,.10);
  --card:rgba(11,16,32,.72);
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --shadow-soft:0 14px 34px rgba(0,0,0,.38);

  /* keep existing brand mapping but make them “neon-tech” */
  --brand:#f5c542;      /* gold */
  --brand-2:#3b82f6;    /* neon blue */
  --accent:#ff6a3d;     /* orange */
  --glow-ai:rgba(59,130,246,.45);
  --glow-gold:rgba(245,197,66,.22);
}

/* global background: grid + orbs (no images, fast) */
html,body{
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(59,130,246,.22), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(245,197,66,.14), transparent 60%),
    radial-gradient(900px 700px at 60% 90%, rgba(59,130,246,.16), transparent 60%),
    linear-gradient(180deg, #05070d 0%, #070a12 38%, #05070d 100%);
  color:var(--text);
}

/* subtle math grid overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.55;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: radial-gradient(900px 650px at 50% 30%, black 55%, transparent 100%);
}

/* faint “noise” illusion (cheap) */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.08;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

/* typography */
h1,h2,h3{
  color:var(--text);
  text-shadow: 0 0 18px rgba(59,130,246,.10);
}
.sub,.note{color:var(--muted)}

/* header (blur stays, make it cyber) */
.site-header{
  background: rgba(6, 10, 18, .56);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}
.nav a{color:rgba(229,231,235,.92)}
.nav a:hover{color:#fff}

/* “pill” icon button */
.icon-btn{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: none;
}
.icon-btn:hover{border-color:rgba(59,130,246,.35); box-shadow: 0 0 0 6px rgba(59,130,246,.10)}

/* sections: add depth */
.section{
  border-top:1px solid rgba(255,255,255,.06);
}
.section-header .kicker{
  color: rgba(245,197,66,.92);
  letter-spacing:.18em;
}

/* hero glow */
.hero{
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-20px -20px auto -20px;
  height: 420px;
  background:
    radial-gradient(520px 320px at 25% 40%, rgba(59,130,246,.22), transparent 70%),
    radial-gradient(380px 260px at 70% 15%, rgba(245,197,66,.12), transparent 70%);
  filter: blur(2px);
  pointer-events:none;
  z-index:0;
}
.hero > .container{position:relative; z-index:1}

/* glass cards */
.hero-card, .usp-item, .product-card, .faq, .panel, .newsletter, .contact-card{
  background: var(--card);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}
.hero-card{
  box-shadow: 0 22px 70px rgba(0,0,0,.55);
}

/* video frame */
.video-wrap{
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
}

/* product grid feel more “AI modules” */
.product-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-card:hover{
  transform: translateY(-4px);
  border-color: rgba(59,130,246,.40);
  box-shadow: 0 26px 70px rgba(0,0,0,.65), 0 0 0 6px rgba(59,130,246,.12);
}

/* stars slightly glowing */
.product-stars{
  filter: drop-shadow(0 0 10px rgba(245,197,66,.18));
}

/* buttons: neon */
.btn{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
}
.btn:hover{
  border-color: rgba(59,130,246,.35);
  box-shadow: 0 0 0 6px rgba(59,130,246,.12);
}

/* primary: blue→gold subtle gradient */
.btn-primary{
  background: linear-gradient(135deg, rgba(59,130,246,.95), rgba(245,197,66,.62));
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 16px 44px rgba(59,130,246,.20);
  color:#06101f;
}
.btn-primary:hover{
  box-shadow: 0 22px 70px rgba(59,130,246,.28), 0 0 0 6px rgba(245,197,66,.12);
}

/* accent buttons (contact) */
.btn-accent{
  background: linear-gradient(135deg, rgba(255,106,61,.98), rgba(245,197,66,.55));
  color:#1a0b05;
  border-color: rgba(255,255,255,.14);
}

/* links within cards */
.product-card a:hover, .usp-item a:hover{
  color:#fff;
}

/* footer */
.footer{
  background: #05070d;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer, .footer a{color: rgba(229,231,235,.86)}
.footer a:hover{color:#fff}

/* make dividers subtle */
.hr, hr{
  border-color: rgba(255,255,255,.10);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
}


/* --- Casino/Roulette subtle layer (keep it classy) --- */
:root{
  --roulette-red:#ff3b3b;
  --roulette-green:#22c55e;
  --glow-red:rgba(255,59,59,.18);
  --glow-green:rgba(34,197,94,.14);
}

/* roulette wheel-inspired conic glow in the background */
html::before{
  content:"";
  position:fixed;
  inset:-18%;
  pointer-events:none;
  z-index:-2;
  opacity:.10;
  background:
    radial-gradient(900px 700px at 22% 18%, var(--glow-gold), transparent 60%),
    radial-gradient(800px 650px at 78% 22%, var(--glow-ai), transparent 58%),
    radial-gradient(900px 720px at 70% 78%, var(--glow-red), transparent 62%),
    radial-gradient(900px 720px at 28% 82%, var(--glow-green), transparent 62%),
    conic-gradient(from 10deg at 70% 35%,
      rgba(245,197,66,.55) 0 6%,
      rgba(255,59,59,.45) 6% 12%,
      rgba(34,197,94,.40) 12% 18%,
      rgba(59,130,246,.45) 18% 24%,
      rgba(245,197,66,.50) 24% 30%,
      rgba(255,59,59,.42) 30% 36%,
      rgba(34,197,94,.38) 36% 42%,
      rgba(59,130,246,.42) 42% 48%,
      rgba(245,197,66,.45) 48% 54%,
      rgba(255,59,59,.38) 54% 60%,
      rgba(34,197,94,.34) 60% 66%,
      rgba(59,130,246,.38) 66% 72%,
      rgba(245,197,66,.40) 72% 78%,
      rgba(255,59,59,.34) 78% 84%,
      rgba(34,197,94,.30) 84% 90%,
      rgba(59,130,246,.34) 90% 100%);
  transform: rotate(14deg);
  filter: blur(0.2px);
  mask-image: radial-gradient(900px 650px at 70% 35%, black 40%, transparent 78%);
}

/* make the grid a bit lighter so it doesn’t overpower */
body::before{
  opacity:.30;
}

/* headline glow + casino accent */
h1,h2{
  text-shadow:
    0 0 22px rgba(59,130,246,.12),
    0 0 28px rgba(245,197,66,.10);
}

/* primary buttons: tech->casino gradient */
.btn-primary, .button-primary, a.btn.primary{
  background-image: linear-gradient(135deg,
    rgba(59,130,246,1) 0%,
    rgba(245,197,66,1) 55%,
    rgba(255,59,59,.95) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 34px rgba(0,0,0,.35), 0 0 0 1px rgba(59,130,246,.10);
}
.btn-primary:hover, .button-primary:hover, a.btn.primary:hover{
  box-shadow: 0 16px 42px rgba(0,0,0,.45),
              0 0 34px rgba(59,130,246,.20),
              0 0 26px rgba(245,197,66,.18),
              0 0 18px rgba(255,59,59,.12);
  transform: translateY(-1px);
}

/* cards: subtle roulette edge on hover */
.card:hover, .product-card:hover, .panel:hover{
  border-color: rgba(245,197,66,.28);
  box-shadow: var(--shadow), 0 0 0 1px rgba(245,197,66,.18), 0 0 28px rgba(59,130,246,.10);
}
.card:hover::before, .product-card:hover::before{
  opacity:.65;
}

/* JS-triggered hover sweep: treat .is-hover like real :hover */
.product-card.is-hover{
  border-color: rgba(245,197,66,.28);
  box-shadow: var(--shadow), 0 0 0 1px rgba(245,197,66,.18), 0 0 28px rgba(59,130,246,.10);
}
.product-card.is-hover::before{ opacity:.65; }

/* tiny casino accent badges */
.badge, .tag{
  background: linear-gradient(135deg, rgba(245,197,66,.22), rgba(59,130,246,.16));
  border: 1px solid rgba(245,197,66,.20);
}

/* section separators with a faint “roulette arc” feel */
.section-divider, hr{
  border:0;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(245,197,66,.25), rgba(59,130,246,.18), transparent);
}


/* --- Subtle math/stat + AI symbols layer (very light) --- */
html::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.10;
  background-image:
    radial-gradient(1100px 760px at 18% 68%, rgba(245,197,66,.10), transparent 64%),
    radial-gradient(980px 720px at 82% 62%, rgba(59,130,246,.12), transparent 62%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='700' viewBox='0 0 900 700'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff' stop-opacity='.10'/%3E%3Cstop offset='1' stop-color='%23ffffff' stop-opacity='.02'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='900' height='700' fill='none'/%3E%3Cg fill='url(%23g)' font-family='ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace' font-size='18'%3E%3Ctext x='44' y='78'%3E%CE%A3 p(i)%3C/text%3E%3Ctext x='640' y='92'%3E%CF%80 r%5E2%3C/text%3E%3Ctext x='72' y='248'%3EP(hit)%20%3D%20k%2F37%3C/text%3E%3Ctext x='602' y='262'%3E%CE%94t%20%5Crarr%20v%28t%29%3C/text%3E%3Ctext x='110' y='424'%3E%CE%BC%20%3D%20%CE%A3x%2Fn%3C/text%3E%3Ctext x='610' y='452'%3E%5Csigma%20%5Capprox%20sqrt(E%5Bx%5E2%5D)%3C/text%3E%3Ctext x='54' y='612'%3EAI%20%5Ccdot%20stats%20%5Ccdot%20edge%3C/text%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-opacity='.10' fill='none'%3E%3Cpath d='M120 120 C210 140, 250 90, 330 120 S470 160, 560 120'/%3E%3Cpath d='M520 520 C610 540, 650 490, 730 520 S870 560, 960 520'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.10'%3E%3Ccircle cx='170' cy='150' r='3'/%3E%3Ccircle cx='250' cy='105' r='3'/%3E%3Ccircle cx='330' cy='130' r='3'/%3E%3Ccircle cx='430' cy='150' r='3'/%3E%3Ccircle cx='560' cy='120' r='3'/%3E%3Ccircle cx='620' cy='520' r='3'/%3E%3Ccircle cx='700' cy='505' r='3'/%3E%3Ccircle cx='780' cy='530' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat, repeat;
  background-size: auto, auto, 900px 700px;
  mix-blend-mode: screen;
  mask-image: radial-gradient(1200px 820px at 50% 60%, black 50%, transparent 100%);
}


/* --- Product cards: stronger 3D module effect (no JS) --- */
.products{perspective: 1200px;}

/* During the JS sweep we slow down transitions a bit, so it feels like real hover */
.products.sweep-running .product-card{
  transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease;
  will-change: transform;
}

.product-card{
  position:relative;
  transform-style: preserve-3d;
  border-radius: 18px;
  overflow:hidden;
}

/* inner “depth” layers */
.product-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 18px;
  background: linear-gradient(135deg,
    rgba(59,130,246,.30) 0%,
    rgba(245,197,66,.18) 45%,
    rgba(255,59,59,.14) 100%);
  opacity:.28;
  pointer-events:none;
  transform: translateZ(-1px);
}

.product-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 220px at 20% 10%, rgba(255,255,255,.22), transparent 55%),
    radial-gradient(420px 240px at 80% 0%, rgba(59,130,246,.16), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.08), transparent 40%);
  opacity:.20;
  transform: translateZ(1px);
}

/* lift key elements inside the card */
.product-card img{transform: translateZ(14px);}
.product-card .product-title{transform: translateZ(18px);}
.product-card .product-stars{transform: translateZ(16px);}
.product-card .btn, .product-card .btn-primary{transform: translateZ(20px);}

/* 3D hover tilt + stronger shadow */
.product-card:hover,
.product-card.is-hover{
  transform: translateY(-10px) rotateX(7deg) rotateY(-7deg);
  box-shadow:
    0 30px 90px rgba(0,0,0,.72),
    0 0 0 1px rgba(245,197,66,.18),
    0 0 42px rgba(59,130,246,.16),
    0 0 28px rgba(245,197,66,.12);
}



/* a thin “light edge” at the bottom for depth */
.product-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 35%),
    radial-gradient(700px 380px at 50% -20%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(680px 420px at 40% 120%, rgba(245,197,66,.10), transparent 62%),
    var(--card);
}

/* reduce heavy tilt on small screens */
@media (max-width: 720px){
  .product-card:hover,
  .product-card.is-hover{transform: translateY(-6px);}
}


/* Language switcher (manual) */
.lang-switch{ position:relative; display:inline-block; margin-right:10px; }
.lang-btn{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(10,12,18,.35);
  backdrop-filter: blur(12px);
  color: var(--text);
  cursor:pointer;
  line-height:1;
}
.lang-btn:hover{
  border-color: rgba(245,197,66,.40);
  box-shadow: 0 0 22px rgba(245,197,66,.16);
}
.lang-menu{
  position:absolute; right:0; top:100%;
  min-width:180px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(10,12,18,.82);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  display:none;
  z-index:9999;
}
.lang-switch.open .lang-menu{ display:block; }

/* Make language menu usable without JS (mobile/blocked JS): */
.lang-switch:focus-within .lang-menu{ display:block; }
.lang-item{
  display:block;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color: var(--text);
  opacity:.92;
  border:1px solid transparent;
}
.lang-item:hover{
  background: rgba(59,130,246,.12);
  border-color: rgba(59,130,246,.20);
}

/* Language flags */
.lang-item{ display:flex; align-items:center; gap:10px; }
.lang-item .flag{ font-size:18px; line-height:1; }
.lang-btn .lang-current{ display:inline-flex; align-items:center; gap:8px; }

/* Casino CTA button (roulette colors, 3D neon casino glow) */
.casino-cta-wrap{
  width:100%;
  display:flex;
  justify-content:center;
  margin: 30px 0 20px;
}

a.roulette-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 16px 22px;
  border-radius: 18px;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: none;
  color: #ffffff;
  background: rgba(8,10,16,.70);
  border: 2px solid rgba(255,255,255,.10);
  position:relative;
  transform: translateZ(0);
  box-shadow:
    0 12px 0 rgba(0,0,0,.62),
    0 26px 70px rgba(0,0,0,.46),
    0 0 0 2px rgba(255,255,255,.06) inset;
  transition: transform .12s ease, filter .12s ease;
}

a.roulette-cta .cta-text{
  position:relative;
  z-index:2;
  text-shadow:
    0 0 6px rgba(255,255,255,.35),
    0 0 18px rgba(214,40,40,.28),
    0 0 22px rgba(11,107,58,.22);
}

a.roulette-cta:before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius: 22px;
  border: 4px solid transparent;
  background: linear-gradient(90deg, #d62828 0%, #111111 48%, #0b6b3a 100%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  filter: drop-shadow(0 0 10px rgba(214,40,40,.22)) drop-shadow(0 0 12px rgba(11,107,58,.18));
}

a.roulette-cta:after{
  content:"";
  position:absolute;
  inset: 3px;
  border-radius: 14px;
  background: radial-gradient(120px 60px at 25% 15%, rgba(255,255,255,.22), transparent 60%);
  opacity:.75;
  pointer-events:none;
  z-index:1;
}

@keyframes casinoNeonPulse{
  0%{
    box-shadow:
      0 12px 0 rgba(0,0,0,.62),
      0 26px 70px rgba(0,0,0,.46),
      0 0 18px rgba(214,40,40,.16),
      0 0 22px rgba(11,107,58,.10);
    filter: saturate(1.05);
  }
  50%{
    box-shadow:
      0 12px 0 rgba(0,0,0,.62),
      0 26px 80px rgba(0,0,0,.50),
      0 0 26px rgba(214,40,40,.34),
      0 0 32px rgba(11,107,58,.22);
    filter: saturate(1.28) brightness(1.06);
  }
  100%{
    box-shadow:
      0 12px 0 rgba(0,0,0,.62),
      0 26px 70px rgba(0,0,0,.46),
      0 0 18px rgba(214,40,40,.16),
      0 0 22px rgba(11,107,58,.10);
    filter: saturate(1.05);
  }
}

a.roulette-cta{
  animation: casinoNeonPulse 1.7s ease-in-out infinite;
}

a.roulette-cta:hover{
  transform: translateY(-3px);
}

a.roulette-cta:active{
  transform: translateY(7px);
  animation-play-state: paused;
  filter: saturate(1.0) brightness(0.98);
  box-shadow:
    0 5px 0 rgba(0,0,0,.62),
    0 16px 44px rgba(0,0,0,.38);
}

/* === Roulette CTA animated neon border (casino sign) === */
@keyframes rsBorderSweep {
  0%   { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(255,59,59,.45)) drop-shadow(0 0 8px rgba(34,197,94,.35)); }
  50%  { background-position: 100% 50%; filter: drop-shadow(0 0 22px rgba(255,59,59,.70)) drop-shadow(0 0 18px rgba(34,197,94,.55)); }
  100% { background-position: 0% 50%; filter: drop-shadow(0 0 10px rgba(255,59,59,.45)) drop-shadow(0 0 8px rgba(34,197,94,.35)); }
}
@keyframes rsNeonFlicker {
  0%, 100% { text-shadow: 0 0 8px rgba(255,255,255,.55), 0 0 18px rgba(255,59,59,.38), 0 0 22px rgba(34,197,94,.28); }
  45% { text-shadow: 0 0 7px rgba(255,255,255,.45), 0 0 16px rgba(255,59,59,.30), 0 0 20px rgba(34,197,94,.22); }
  50% { text-shadow: 0 0 10px rgba(255,255,255,.70), 0 0 26px rgba(255,59,59,.55), 0 0 28px rgba(34,197,94,.40); }
  55% { text-shadow: 0 0 7px rgba(255,255,255,.45), 0 0 16px rgba(255,59,59,.30), 0 0 20px rgba(34,197,94,.22); }
}
a.roulette-cta{
  /* keep your current beautiful 3D look, but add subtle pulsing light */
  animation: rsCasinoNeon 1.2s infinite ease-in-out, rsNeonFlicker 2.4s infinite ease-in-out;
}
a.roulette-cta:before{
  background: linear-gradient(90deg, #d62828 0%, #111111 45%, #0b6b3a 100%) border-box;
  background-size: 300% 300%;
  animation: rsBorderSweep 1.6s ease-in-out infinite;
}

/* YouTube info banner (bigger + centered) */
.rs-yt-cookie-banner{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  max-width: min(92%, 760px);
  padding: 16px 18px;
  border-radius: 16px;
  font-weight: 900;
  font-size: 1.6rem; /* ~double typical 0.8rem */
  line-height: 1.15;
  text-align: center;
  color: rgba(255,255,255,.95);
  background: rgba(10,12,18,.62);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  pointer-events: none; /* do NOT block play click */
  text-shadow: 0 0 10px rgba(0,0,0,.45);
}
@media (max-width: 520px){
  .rs-yt-cookie-banner{ font-size: 1.25rem; padding: 14px 14px; }
}