:root{
  --bg0:#05060a;
  --bg1:#070a16;
  --card: rgba(14, 18, 35, 0.72);
  --card2: rgba(20, 25, 48, 0.85);
  --text:#e9f0ff;
  --muted:rgba(233,240,255,.72);
  --brand:#6dfcff;
  --brand2:#9b5cff;
  --hot:#ff3df2;
  --warn:#ffd166;
  --line:rgba(160, 220, 255, .14);
  --shadow: 0 20px 60px rgba(0,0,0,.55);
  --radius:18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ overflow-x: hidden; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background: radial-gradient(1200px 700px at 20% -10%, rgba(109,252,255,.18), transparent 60%),
              radial-gradient(900px 600px at 80% 10%, rgba(155,92,255,.16), transparent 55%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
}

.mjolnir{
  position:fixed;
  top:0;
  left:0;
  width:64px;
  height:64px;
  margin: -16px 0 0 -22px;
  pointer-events:none;
  z-index:2147483647;
  opacity:0;
  visibility:hidden;
  filter: drop-shadow(0 0 10px rgba(109,252,255,.55)) drop-shadow(0 8px 16px rgba(0,0,0,.55));
}
.mjolnir.is-on{
  opacity:1;
  visibility:visible;
}
.mjolnir svg{
  display:block;
  width:100%;
  height:100%;
  overflow:visible;
  transform-origin: 22px 16px;
}
.mjolnir.is-slam svg{
  animation: mjolnirSlam 220ms ease-out;
}
@keyframes mjolnirSlam{
  0%{ transform: rotate(0deg); }
  40%{ transform: rotate(16deg); }
  100%{ transform: rotate(0deg); }
}

html.has-mjolnir, html.has-mjolnir *{
  cursor: none !important;
}

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:14px; top:14px; width:auto; height:auto; padding:10px 14px;
  background:#0d1025; border:1px solid var(--line); border-radius:12px; z-index:9999;
}

.container{
  width:min(1100px, calc(100% - 40px));
  margin-inline:auto;
}

.bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
.bg__grid{
  position:absolute; inset:-2px;
  background:
    linear-gradient(to right, rgba(110,252,255,.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(155,92,255,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  transform: perspective(900px) rotateX(52deg) translateY(-120px);
  opacity:.35;
  filter: blur(.2px);
}
.bg__aurora{
  position:absolute; inset:-120px -120px -120px -120px;
  background:
    radial-gradient(600px 320px at 25% 30%, rgba(109,252,255,.22), transparent 60%),
    radial-gradient(520px 320px at 80% 20%, rgba(155,92,255,.22), transparent 62%),
    radial-gradient(480px 260px at 60% 70%, rgba(255,61,242,.12), transparent 60%);
  animation: auroraMove 7s ease-in-out infinite;
  opacity:.9;
}
@keyframes auroraMove{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(-2.5%, 2.2%, 0) scale(1.02); }
}

.bg__lightning{
  position:absolute; inset:-40px;
  background:
    radial-gradient(500px 200px at 40% 0%, rgba(255,255,255,.10), transparent 55%),
    linear-gradient(115deg, transparent 30%, rgba(109,252,255,.14), transparent 60%),
    linear-gradient(0deg, rgba(255,255,255,.00), rgba(255,255,255,.08));
  opacity:0;
  filter: blur(0px);
}

.bg__storm{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:8;
  mix-blend-mode:screen;
}

.bg__sparks{
  position:absolute;
  inset:0;
  z-index:9;
}
.spark{
  position:absolute;
  width:6px; height:6px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), rgba(109,252,255,.9) 35%, rgba(155,92,255,.4) 65%, transparent 70%);
  box-shadow: 0 0 18px rgba(109,252,255,.55), 0 0 40px rgba(155,92,255,.22);
  transform: translate(-50%,-50%);
  animation: sparkFly var(--dur, 900ms) ease-out forwards;
}
@keyframes sparkFly{
  0%{ opacity:0; transform: translate(-50%,-50%) scale(.7); }
  10%{ opacity:1; }
  100%{ opacity:0; transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -60px))) scale(1.15); }
}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(8,10,22,.78), rgba(8,10,22,.45));
  border-bottom:1px solid rgba(160, 220, 255, .10);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}

.brand{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
}
.brand__img{
  display:block;
  height:52px;
  width:auto;
  max-width:240px;
  object-fit:contain;
  filter: drop-shadow(0 0 16px rgba(109,252,255,.35));
}
.brand--footer .brand__img{
  height:64px;
  max-width:280px;
}

.nav__toggle{
  display:none;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(160,220,255,.16);
  color:var(--text);
  border-radius:12px;
  padding:10px 12px;
}
.nav__menu{
  display:flex; align-items:center; gap:18px;
}
.nav__link{
  color:rgba(233,240,255,.85);
  text-decoration:none;
  font-size:14px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid transparent;
}
.nav__link:hover{
  border-color: rgba(160,220,255,.18);
  background: rgba(255,255,255,.03);
}
.nav__cta{
  text-decoration:none;
  color:#06101a;
  background: linear-gradient(90deg, var(--brand), rgba(155,92,255,.95));
  padding:10px 14px;
  border-radius:14px;
  font-weight:800;
  box-shadow: 0 14px 40px rgba(109,252,255,.18);
}

.section{
  padding:74px 0;
}
.hero{
  padding:78px 0 56px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:34px;
  align-items:stretch;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.18);
  background: rgba(255,255,255,.03);
  color:rgba(233,240,255,.9);
  font-size:13px;
  margin-bottom:14px;
}
.badge__dot{
  width:10px; height:10px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--brand) 35%, rgba(155,92,255,.3) 65%);
  box-shadow: 0 0 25px rgba(109,252,255,.45);
  animation: dotPulse 1.6s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ transform:scale(.9); opacity:.65; }
  50%{ transform:scale(1.2); opacity:1; }
}
.hero__title{
  font-size:54px;
  line-height:1.02;
  margin:0 0 14px;
  letter-spacing:-.8px;
}
.hero__title--accent{
  display:inline-block;
  background: linear-gradient(90deg, var(--brand), rgba(155,92,255,.95), var(--hot));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 30px rgba(109,252,255,.18);
}
.hero__lead{
  margin:0 0 24px;
  color:rgba(233,240,255,.78);
  font-size:16px;
  max-width:56ch;
}
.hero__actions{
  display:flex; gap:12px; flex-wrap:wrap;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  border-radius:14px;
  padding:12px 16px;
  border:1px solid rgba(160,220,255,.18);
  cursor:pointer;
  color:var(--text);
  background: rgba(255,255,255,.02);
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  user-select:none;
}
.btn:hover{ transform: translateY(-1px); border-color: rgba(109,252,255,.35); }
.btn:active{ transform: translateY(0px) scale(.99); }
.btn--primary{
  background: linear-gradient(90deg, rgba(109,252,255,.95), rgba(155,92,255,.95));
  border-color: transparent;
  color:#041018;
  box-shadow: 0 18px 48px rgba(109,252,255,.18);
  font-weight:900;
}
.btn--ghost{
  background: rgba(255,255,255,.02);
}
.btn--small{
  padding:10px 14px;
  border-radius:12px;
  font-size:13px;
}
.btn--large{
  padding:14px 18px;
}

.hero__trust{
  display:flex;
  gap:14px;
  margin-top:26px;
  flex-wrap:wrap;
}
.trust{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
  min-width:190px;
}
.trust__icon{ font-size:18px; }
.trust__text{ color:rgba(233,240,255,.78); font-size:13px; }

.hero__panel{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.panel{
  background: linear-gradient(180deg, rgba(14,18,35,.72), rgba(10,12,25,.66));
  border:1px solid rgba(160,220,255,.16);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:18px;
  position:relative;
  overflow:hidden;
}
.panel::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(700px 240px at 15% 0%, rgba(109,252,255,.22), transparent 55%),
              radial-gradient(500px 220px at 80% 30%, rgba(155,92,255,.2), transparent 52%);
  opacity:.9;
  pointer-events:none;
}
.panel--lift{ transform: translateZ(0); }
.panel > *{ position:relative; z-index:1; }
.panel__top{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-bottom:12px;
}
.panel__pill{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.03);
  font-size:12px;
  color: rgba(233,240,255,.82);
}
.panel__status{
  display:flex; align-items:center; gap:8px;
  font-size:12px;
  color: rgba(233,240,255,.78);
}
.pulse{
  width:10px; height:10px; border-radius:50%;
  background: rgba(109,252,255,.95);
  box-shadow: 0 0 20px rgba(109,252,255,.48);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ transform:scale(.8); opacity:.7; }
  50%{ transform:scale(1.2); opacity:1; }
}
.panel__title{ margin:0 0 10px; font-size:18px; letter-spacing:.2px; }
.panel__desc{
  margin:0 0 14px;
  color: rgba(233,240,255,.75);
  font-size:14px;
  line-height:1.45;
}
.panel__meter{
  height:10px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.meter__bar{
  height:100%;
  width:20%;
  background: linear-gradient(90deg, rgba(109,252,255,.95), rgba(155,92,255,.9), rgba(255,61,242,.75));
  border-radius:999px;
  transform-origin:left center;
  animation: meterPulse 2.8s ease-in-out infinite;
}
@keyframes meterPulse{
  0%,100%{ transform: scaleX(.35); opacity:.8; }
  50%{ transform: scaleX(1); opacity:1; }
}
.panel__actions{
  display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;
}
.mini-cards{
  display:grid;
  grid-template-columns: 1fr;
  gap:10px;
}
.mini-card{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(160,220,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(233,240,255,.78);
  font-size:13px;
}

.section-head__title{
  margin:0 0 10px;
  font-size:30px;
  letter-spacing:-.4px;
}
.section-head__sub{
  margin:0;
  color: rgba(233,240,255,.75);
  max-width:70ch;
}
.section--dark{
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.26));
}

.section-head{ margin-bottom:26px; }

.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.step{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.step h3{ margin:0 0 10px; font-size:16px; }
.step p{ margin:0; color: rgba(233,240,255,.72); font-size:14px; line-height:1.45; }

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:center;
}
.two-col--reverse{ grid-template-columns: 1fr 1fr; }
.two-col--reverse > :first-child{ order:2; }
.section-title{
  margin:0 0 12px;
  font-size:32px;
  letter-spacing:-.5px;
}
.section-sub{
  margin:0 0 18px;
  color: rgba(233,240,255,.76);
  line-height:1.55;
}
.list{
  display:grid;
  gap:10px;
}
.list__item{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(160,220,255,.12);
  background: rgba(255,255,255,.02);
  color: rgba(233,240,255,.78);
  font-size:14px;
}

.slot-cards{
  display:grid;
  gap:12px;
}
.slot-card{
  padding:18px 18px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
  position:relative;
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.slot-card::after{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(460px 120px at 15% 0%, rgba(109,252,255,.22), transparent 58%),
              radial-gradient(320px 120px at 80% 20%, rgba(155,92,255,.18), transparent 60%);
  opacity:.65;
  pointer-events:none;
}
.slot-card > *{ position:relative; z-index:1; }
.slot-card:hover{ transform: translateY(-3px); border-color: rgba(109,252,255,.32); }
.slot-card__tag{
  display:inline-flex;
  align-items:center;
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.03);
}
.slot-card__tag--hot{ border-color: rgba(255,61,242,.28); }
.slot-card__tag--cool{ border-color: rgba(109,252,255,.28); }
.slot-card__name{
  margin:14px 0 8px;
  font-weight:900;
  font-size:18px;
}
.slot-card__meta{
  color: rgba(233,240,255,.74);
  font-size:14px;
}

.live-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
.live-card{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  position:relative;
  overflow:hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.live-card::before{
  content:"";
  position:absolute; inset:-40px;
  background: radial-gradient(500px 160px at 30% 0%, rgba(109,252,255,.20), transparent 55%),
              radial-gradient(380px 140px at 80% 20%, rgba(155,92,255,.18), transparent 60%);
  opacity:.55;
}
.live-card > *{ position:relative; z-index:1; }
.live-card:hover{ transform: translateY(-3px); border-color: rgba(109,252,255,.32); }
.live-card__top{ color:rgba(233,240,255,.7); font-size:12px; }
.live-card__name{ font-weight:900; font-size:18px; margin-top:10px; }
.live-card__cta{
  margin-top:12px;
  display:inline-flex;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
  color: rgba(233,240,255,.84);
  font-size:13px;
}

.bonus-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.bonus{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
}
.bonus h3{ margin:0 0 10px; font-size:16px; }
.bonus p{ margin:0 0 14px; color: rgba(233,240,255,.72); font-size:14px; line-height:1.45; }
.bonus__chips{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  font-size:12px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
  color: rgba(233,240,255,.78);
}
.chip--hot{ border-color: rgba(255,61,242,.28); }
.chip--cool{ border-color: rgba(109,252,255,.28); }

.promo-row{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.promo{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
}
.promo__title{ font-weight:900; font-size:16px; margin-bottom:6px; }
.promo__meta{ color: rgba(233,240,255,.72); font-size:13px; margin-bottom:12px; }
.promo__desc{ color: rgba(233,240,255,.74); font-size:14px; line-height:1.5; margin-bottom:14px; }

.callout{
  display:flex; gap:16px; align-items:flex-start;
  padding:22px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
}
.callout__icon{
  width:48px; height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:16px;
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.03);
  font-size:20px;
}
.callout__title{ margin:0 0 10px; font-size:24px; }
.callout__text{ margin:0 0 12px; color: rgba(233,240,255,.78); line-height:1.55; }
.callout__note{ color: rgba(233,240,255,.66); font-size:13px; }

.tip-card{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
  box-shadow: 0 16px 46px rgba(0,0,0,.22);
}
.tip-card__title{ font-weight:900; margin-bottom:10px; }
.tip-card__text{ margin:0 0 14px; color: rgba(233,240,255,.74); line-height:1.55; }
.tip-card__progress{
  height:12px;
  border-radius:999px;
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}
.progress__bar{
  height:100%;
  width:20%;
  background: linear-gradient(90deg, rgba(109,252,255,.95), rgba(155,92,255,.95), rgba(255,61,242,.8));
  transform: translateX(-20%);
}

.review-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.review{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
}
.review__stars{ color: rgba(255,209,102,.95); margin-bottom:10px; }
.review__text{ margin:0 0 12px; color: rgba(233,240,255,.76); line-height:1.55; }
.review__by{ color: rgba(233,240,255,.62); font-size:13px; }

.faq{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  max-width:820px;
}
.faq__item{
  padding:14px 16px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.14);
  background: rgba(255,255,255,.02);
}
.faq__item summary{
  cursor:pointer;
  font-weight:800;
  color: rgba(233,240,255,.9);
}
.faq__item p{
  margin:10px 0 0;
  color: rgba(233,240,255,.74);
  line-height:1.55;
}

.cta{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  align-items:center;
}
.cta__title{
  margin:0 0 12px;
  font-size:34px;
  letter-spacing:-.6px;
}
.cta__text{
  margin:0 0 16px;
  color: rgba(233,240,255,.78);
  line-height:1.6;
}
.cta__actions{ display:flex; gap:12px; flex-wrap:wrap; }
.cta__smallprint{
  margin-top:14px;
  font-size:13px;
  color: rgba(233,240,255,.64);
}
.cta__card{
  position:relative;
  overflow:hidden;
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(160,220,255,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: var(--shadow);
}
.cta-card__glow{
  position:absolute; inset:-120px;
  background:
    radial-gradient(460px 220px at 30% 20%, rgba(109,252,255,.22), transparent 60%),
    radial-gradient(420px 220px at 80% 60%, rgba(155,92,255,.18), transparent 62%);
  opacity:.65;
  pointer-events:none;
}
.cta__card > *{ position:relative; z-index:1; }
.cta-card__title{ font-weight:900; margin-bottom:10px; }
.cta-card__row{
  display:flex; justify-content:space-between; gap:10px;
  padding:10px 0;
  border-top:1px solid rgba(160,220,255,.10);
  color: rgba(233,240,255,.74);
}
.cta-card__row:first-of-type{ border-top:none; }

.footer{
  padding:34px 0 50px;
  border-top:1px solid rgba(160,220,255,.10);
  background: rgba(0,0,0,.12);
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr .6fr .9fr;
  gap:18px;
}
.footer__text{ color: rgba(233,240,255,.72); line-height:1.55; margin:10px 0 0; }
.footer__links{
  display:flex; flex-direction:column; gap:10px;
}
.footer__links a{
  text-decoration:none; color: rgba(233,240,255,.78);
  padding:10px 12px; border-radius:14px; border:1px solid rgba(160,220,255,.10);
  background: rgba(255,255,255,.02);
}
.footer__links a:hover{ border-color: rgba(109,252,255,.32); }
.footer__legal-title{ font-weight:900; margin-bottom:10px; }
.footer__legal-text{ color: rgba(233,240,255,.72); line-height:1.55; margin:0 0 10px; }
.footer__copyright{ color: rgba(233,240,255,.62); font-size:13px; margin:0; }

/* Interactions: scroll/ignite/tilt */
.panel, .slot-card, .live-card, .bonus, .promo, .review, .faq__item, .step, .tip-card, .cta__card{
  transition: transform .2s ease, border-color .2s ease;
}
.bg__lightning.is-flashing{
  opacity:1;
  animation: lightningFlash 520ms ease-in-out both;
}
@keyframes lightningFlash{
  0%{ opacity:0; filter: blur(2px); }
  8%{ opacity:1; filter: blur(0px); }
  16%{ opacity:.15; }
  24%{ opacity:.95; }
  38%{ opacity:.2; }
  52%{ opacity:.7; }
  100%{ opacity:0; filter: blur(3px); }
}
.bg.thunder{
  animation: thunderShake 320ms ease-out both;
}
@keyframes thunderShake{
  0%,100%{ transform: translate3d(0,0,0); }
  40%{ transform: translate3d(-2px, 0, 0); }
  65%{ transform: translate3d(2px, 0, 0); }
}

.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:14px;
}
.gallery-card{
  position:relative;
  overflow:hidden;
  border:0;
  padding:0;
  border-radius:16px;
  border:1px solid rgba(160,220,255,.16);
  background:#070a16;
  cursor:pointer;
  min-height:170px;
  text-align:left;
  color:var(--text);
}
.gallery-card img{
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  transition: transform .35s ease, filter .35s ease;
}
.gallery-card span{
  position:absolute;
  left:10px; right:10px; bottom:10px;
  padding:8px 10px;
  border-radius:10px;
  background: rgba(5,8,18,.72);
  border:1px solid rgba(109,252,255,.2);
  font-size:13px;
  font-weight:800;
}
.gallery-card:hover img,
.gallery-card.is-on img{
  transform: scale(1.08);
  filter: saturate(1.15) brightness(1.08);
}
.gallery-card.is-on{
  box-shadow: 0 0 0 2px rgba(109,252,255,.7), 0 0 28px rgba(155,92,255,.45);
}

.thor-wrap{ max-width:760px; margin:0 auto; }
.thor-table{
  position:relative;
  padding:22px;
  border-radius:48% / 18%;
  background:
    radial-gradient(circle at 50% 18%, rgba(109,252,255,.18), transparent 42%),
    linear-gradient(180deg, #2a1a0a 0%, #6b4a18 18%, #c9a45a 32%, #3a2710 50%, #120c08 100%);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 6px rgba(201,164,90,.85), inset 0 0 0 10px #1a1208;
}
.thor-table__runes{
  text-align:center;
  letter-spacing:12px;
  color:#f2d48a;
  font-size:18px;
  margin-bottom:10px;
  text-shadow: 0 0 18px rgba(109,252,255,.45);
}
.thor-table__felt{
  background:
    radial-gradient(800px 280px at 50% 0%, rgba(109,252,255,.12), transparent 50%),
    radial-gradient(circle at 50% 100%, rgba(155,92,255,.16), transparent 46%),
    linear-gradient(180deg, #0b1a2a, #071018);
  border:2px solid rgba(109,252,255,.28);
  border-radius: 42% / 16%;
  padding:28px 24px 22px;
  box-shadow: inset 0 0 80px rgba(0,0,0,.55);
}
.thor-table__title{
  text-align:center;
  font-weight:900;
  letter-spacing:4px;
  color:#6dfcff;
  margin-bottom:16px;
  text-shadow: 0 0 20px rgba(109,252,255,.45);
}
.thor-reels{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
  max-width:460px;
  margin:0 auto 8px;
}
.thor-reel{
  height:118px;
  border-radius:16px;
  border:1px solid rgba(201,164,90,.55);
  background: linear-gradient(180deg, #0a0d18, #151a2e);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: inset 0 0 24px rgba(109,252,255,.12), 0 10px 24px rgba(0,0,0,.35);
  overflow:hidden;
}
.thor-reel.is-spinning .thor-reel__sym{
  animation: reelBlur .08s linear infinite;
}
.thor-reel__sym{
  font-size:54px;
  line-height:1;
  filter: drop-shadow(0 0 12px rgba(109,252,255,.45));
}
@keyframes reelBlur{
  0%{ transform: translateY(-10px); opacity:.55; }
  100%{ transform: translateY(10px); opacity:1; }
}
.thor-payline{
  height:3px;
  max-width:460px;
  margin:8px auto 16px;
  background: linear-gradient(90deg, transparent, #6dfcff, #fff, #9b5cff, transparent);
  box-shadow: 0 0 16px rgba(109,252,255,.7);
  position:relative;
}
.thor-hud{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  max-width:460px;
  margin:0 auto 14px;
}
.thor-stat{
  text-align:center;
  padding:10px 8px;
  border-radius:12px;
  border:1px solid rgba(201,164,90,.3);
  background: rgba(0,0,0,.28);
}
.thor-stat span{ display:block; font-size:11px; color:rgba(233,240,255,.65); letter-spacing:.6px; text-transform:uppercase; }
.thor-stat strong{ font-size:20px; color:#f2d48a; }
.thor-charge{
  height:10px;
  max-width:460px;
  margin:0 auto 14px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(109,252,255,.2);
  overflow:hidden;
}
.thor-charge__bar{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #6dfcff, #9b5cff, #ffd166);
  box-shadow: 0 0 16px rgba(109,252,255,.55);
}
.thor-strike{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:min(460px, 100%);
  margin:0 auto;
  padding:16px 18px;
  border-radius:999px;
  border:1px solid rgba(255,209,102,.5);
  background: radial-gradient(circle at 30% 20%, #fff6c8, #c9a45a 42%, #6b3e10);
  color:#1a1208;
  font-weight:900;
  letter-spacing:.4px;
  cursor:pointer;
  box-shadow: 0 12px 30px rgba(201,164,90,.28), inset 0 1px 0 rgba(255,255,255,.4);
}
.thor-strike:disabled{ opacity:.55; cursor:not-allowed; }
.thor-strike__icon{ font-size:20px; }
.thor-msg{
  text-align:center;
  margin:12px 0 0;
  color:rgba(233,240,255,.8);
  min-height:24px;
}
.thor-note{
  text-align:center;
  color:rgba(233,240,255,.62);
  font-size:13px;
  margin:14px 0 0;
}
.thor-table.is-win .thor-reel{
  box-shadow: 0 0 28px rgba(109,252,255,.45), inset 0 0 24px rgba(255,209,102,.18);
}

.bac-hands{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap:12px;
  align-items:start;
  max-width:560px;
  margin:0 auto 16px;
}
.bac-vs{
  align-self:center;
  font-size:28px;
  filter: drop-shadow(0 0 12px rgba(109,252,255,.7));
}
.bac-hand{
  border:1px solid rgba(201,164,90,.35);
  border-radius:16px;
  padding:12px;
  background: rgba(0,0,0,.28);
  min-height:150px;
}
.bac-hand.is-win{
  box-shadow: 0 0 0 2px #6dfcff, 0 0 24px rgba(109,252,255,.35);
}
.bac-hand__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px;
  color:#f2d48a;
  font-weight:800;
  letter-spacing:.4px;
  text-transform:uppercase;
  font-size:12px;
}
.bac-hand__top strong{
  color:#6dfcff;
  font-size:22px;
}
.bac-cards{
  display:flex;
  gap:8px;
  min-height:88px;
  flex-wrap:wrap;
}
.bac-card{
  width:58px;
  height:82px;
  border-radius:8px;
  border:1px solid rgba(109,252,255,.35);
  background:
    linear-gradient(160deg, #1a2744, #0b1222);
  color:#e9f0ff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:6px 7px;
  font-weight:900;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  animation: bacFlip .35s ease;
}
.bac-card.is-red{ color:#ff8ab8; }
.bac-card small{ font-size:14px; }
@keyframes bacFlip{
  0%{ transform: rotateY(90deg) scale(.86); opacity:0; }
  100%{ transform: rotateY(0) scale(1); opacity:1; }
}
.bac-bets{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
  max-width:560px;
  margin:0 auto 14px;
}
.bac-bet{
  border-radius:14px;
  border:1px solid rgba(160,220,255,.18);
  background: rgba(255,255,255,.03);
  color:var(--text);
  padding:12px 8px;
  cursor:pointer;
  font-weight:800;
}
.bac-bet small{
  display:block;
  margin-top:4px;
  font-weight:600;
  color:rgba(233,240,255,.65);
}
.bac-bet.is-on,
.bac-bet:hover{
  border-color: rgba(109,252,255,.55);
  box-shadow: 0 0 18px rgba(109,252,255,.2);
}
.bac-bet--banker.is-on{ border-color: rgba(255,209,102,.7); }
.bac-bet--tie.is-on{ border-color: rgba(155,92,255,.75); }

.vault{ text-align:center; }
.vault-chests{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  max-width:720px;
  margin:0 auto 18px;
}
.chest{
  position:relative;
  border:1px solid rgba(201,164,90,.4);
  background:
    radial-gradient(circle at 50% 20%, rgba(255,209,102,.18), transparent 50%),
    linear-gradient(180deg, #2a1c0c, #120c08);
  color:var(--text);
  border-radius:18px;
  padding:28px 16px 18px;
  cursor:pointer;
  min-height:180px;
  transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.chest:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(109,252,255,.16); }
.chest.is-open{
  box-shadow: 0 0 0 2px #6dfcff, 0 0 30px rgba(155,92,255,.4);
}
.chest.is-dim{ opacity:.38; pointer-events:none; }
.chest__lid{
  display:block;
  height:18px;
  border-radius:10px 10px 4px 4px;
  background: linear-gradient(90deg, #8a6230, #f2d48a, #8a6230);
  margin-bottom:12px;
}
.chest.is-open .chest__lid{
  transform: translateY(-8px) rotate(-8deg);
}
.chest__body{
  display:block;
  font-size:42px;
  font-weight:900;
  color:#f2d48a;
  text-shadow: 0 0 18px rgba(255,209,102,.45);
}
.chest__label{ display:block; margin-top:10px; color:rgba(233,240,255,.75); }
.vault-result{
  color:rgba(233,240,255,.86);
  font-size:18px;
  font-weight:800;
  margin-bottom:14px;
  min-height:28px;
}

/* Responsive extras */
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .two-col, .cta{ grid-template-columns: 1fr; }
  .two-col--reverse > :first-child{ order:0; }
  .steps{ grid-template-columns: repeat(2, 1fr); }
  .bonus-grid{ grid-template-columns: repeat(2, 1fr); }
  .promo-row{ grid-template-columns: 1fr; }
  .review-grid{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .vault-chests{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .nav__toggle{ display:inline-flex; }
  .nav__menu{
    display:none;
    position:absolute;
    right:16px;
    top:64px;
    padding:12px;
    border-radius:16px;
    width: min(320px, calc(100% - 32px));
    flex-direction:column;
    gap:8px;
    background: rgba(9,11,22,.92);
    border:1px solid rgba(160,220,255,.14);
    box-shadow: 0 30px 80px rgba(0,0,0,.55);
  }
  .nav__menu.is-open{ display:flex; }
  .nav__cta{ width:100%; text-align:center; }
  .hero__title{ font-size:40px; }
  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .thor-table, .thor-table__felt{ border-radius:28px; }
  .thor-reel__sym{ font-size:42px; }
  .thor-strike{ font-size:12px; letter-spacing:0; }
  .bac-hands, .bac-bets{ grid-template-columns: 1fr; }
  .bac-vs{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
}