/* =========================================
   NV CASINO · Y2K CHROME · Aqua interface 2001
   ========================================= */

:root{
  --bg:        #cde4ff;
  --bg-deep:   #98bfe5;
  --ink:       #1a1a3e;
  --ink-soft:  #4a4a72;
  --accent:    #ff4faf;
  --accent-d:  #d6378f;
  --green:     #4ade80;
  --gold:      #ffd84a;

  --chrome-1:  #ffffff;
  --chrome-2:  #e2eef9;
  --chrome-3:  #b9d4f0;
  --chrome-4:  #6494c8;
  --chrome-5:  #98bfe5;

  --glass:     rgba(255,255,255,.55);
  --glass-d:   rgba(26,26,62,.08);

  --display:   "Bowlby One SC", "Impact", sans-serif;
  --body:      "Geist", -apple-system, "Segoe UI", sans-serif;
  --mono:      "VT323", "Courier New", monospace;

  --shadow-bubble: 0 8px 28px rgba(100,148,200,.45), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -8px 14px rgba(100,148,200,.18);
  --shadow-card:   0 12px 40px rgba(70,110,170,.22), 0 2px 0 rgba(255,255,255,.7) inset;
  --shadow-press:  0 4px 12px rgba(100,148,200,.3), inset 0 -3px 8px rgba(100,148,200,.2);

  --gloss: linear-gradient(180deg,
    var(--chrome-1) 0%,
    var(--chrome-2) 35%,
    var(--chrome-3) 49%,
    var(--chrome-4) 51%,
    var(--chrome-5) 100%
  );
  --gloss-pink: linear-gradient(180deg,
    #ffe7f3 0%,
    #ffb6dc 49%,
    var(--accent) 51%,
    var(--accent-d) 100%
  );
  --gloss-dark: linear-gradient(180deg,
    #2a2a52 0%,
    #1a1a3e 49%,
    #0a0a2a 51%,
    #050518 100%
  );

  --r:           18px;
  --r-pill:      999px;
  --maxw:        1180px;
}

/* ============= base ============= */
*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  width:100%;
}
body{
  margin:0;
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:
    radial-gradient(ellipse 1200px 600px at 50% -200px, #ffffff 0%, transparent 60%),
    radial-gradient(circle at 90% 10%, rgba(255,79,175,.15) 0%, transparent 40%),
    radial-gradient(circle at 5% 60%, rgba(255,79,175,.1) 0%, transparent 35%),
    linear-gradient(180deg, #e2eefa 0%, var(--bg) 35%, var(--bg-deep) 100%);
  background-attachment:fixed;
  min-height:100vh;
  overflow-x:hidden;
  width:100%;
}

/* bubble pattern overlay */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.6) 0, rgba(255,255,255,.6) 2px, transparent 3px),
    radial-gradient(circle at 78% 35%, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 3px, transparent 4px),
    radial-gradient(circle at 45% 85%, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 2px, transparent 3px),
    radial-gradient(circle at 88% 78%, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 2px, transparent 3px),
    radial-gradient(circle at 18% 65%, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 2px, transparent 3px);
  background-size: 380px 380px, 460px 460px, 540px 540px, 420px 420px, 500px 500px;
  pointer-events:none;
  z-index:0;
  opacity:.7;
}

a{color:var(--ink); text-decoration:none}
img{max-width:100%; display:block}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px; position:relative; z-index:2}

/* ============= AGE STRIP ============= */
.age-strip{
  position:relative;
  background:var(--gloss-dark);
  color:#fff;
  padding:8px 16px;
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:.06em;
  text-align:center;
  border-bottom:1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15);
  z-index:50;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.age-strip__pulse{
  color:var(--accent);
  animation:pulse 1.6s ease-in-out infinite;
  font-size:10px;
}
.age-strip__txt{ text-transform:uppercase }
@keyframes pulse{
  0%,100%{opacity:.4; transform:scale(.9)}
  50%{opacity:1; transform:scale(1.2)}
}

/* ============= NAV ============= */
.nav{
  position:sticky; top:0;
  z-index:40;
  background:var(--gloss);
  border-bottom:2px solid #000;
  box-shadow: 0 6px 24px rgba(70,110,170,.2);
}
.nav__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px 24px;
  display:flex;
  align-items:center;
  gap:24px;
}

.logo{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--display);
  font-size:22px;
  letter-spacing:.02em;
  color:var(--ink);
  text-decoration:none;
  flex-shrink:0;
}
.logo__chrome{
  background:var(--gloss);
  border:2px solid var(--ink);
  border-radius:50%;
  width:42px; height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--ink);
  font-family:var(--display);
  font-size:14px;
  box-shadow: inset 0 2px 0 #fff, 0 4px 10px rgba(100,148,200,.4);
  text-shadow: 1px 1px 0 #fff;
}
.logo__txt{
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(26,26,62,.15);
}
.logo__star{
  color:var(--accent);
  text-shadow: 1px 1px 0 #fff;
  display:inline-block;
  animation: spin 8s linear infinite;
  transform-origin: center;
}

.nav__links{
  display:flex;
  gap:6px;
  margin-left:24px;
  flex:1;
}
.nav__links a{
  font-family:var(--body);
  font-weight:500;
  font-size:14px;
  padding:8px 14px;
  border-radius:var(--r-pill);
  transition: background .2s, transform .15s;
  color:var(--ink);
}
.nav__links a:hover{
  background:rgba(255,255,255,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(100,148,200,.25);
}

.nav__cta{display:flex; gap:8px; flex-shrink:0}

.burger{
  display:none;
  background:transparent;
  border:none;
  width:42px; height:42px;
  cursor:pointer;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  border-radius:8px;
}
.burger span{
  display:block;
  width:22px; height:2px;
  background:var(--ink);
  border-radius:2px;
  transition: transform .25s, opacity .25s;
}
.nav__mobile{ display:none }

/* ============= BUTTONS ============= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 20px;
  font-family:var(--body);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  border:2px solid var(--ink);
  border-radius:var(--r-pill);
  cursor:pointer;
  transition: transform .12s, box-shadow .2s, filter .2s;
  white-space:nowrap;
  position:relative;
  overflow:hidden;
}
.btn:active{ transform: translateY(1px) }

.btn--chrome{
  background:var(--gloss-pink);
  color:#fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.25);
  box-shadow: var(--shadow-bubble);
}
.btn--chrome:hover{
  filter: brightness(1.08);
  box-shadow: 0 12px 32px rgba(255,79,175,.55), inset 0 2px 0 rgba(255,255,255,.95);
}

.btn--bubble{
  background:var(--gloss);
  color:var(--ink);
  text-shadow: 1px 1px 0 #fff;
  box-shadow: var(--shadow-bubble);
}
.btn--bubble:hover{
  filter: brightness(1.04);
}

.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--ink);
  text-shadow: 1px 1px 0 #fff;
}
.btn--ghost:hover{
  background:rgba(255,255,255,.5);
}

.btn--ghost-light{
  background:transparent;
  color:#fff;
  border-color:#fff;
  text-shadow: none;
}
.btn--ghost-light:hover{
  background: rgba(255,255,255,.18);
}

.btn--lg{ padding:14px 28px; font-size:15px }
.btn--xl{ padding:18px 36px; font-size:17px }
.btn--block{ display:flex; width:100%; }

.arrow{ display:inline-block; transition: transform .25s }
.btn:hover .arrow{ transform: translateX(4px) }

/* ============= HERO ============= */
.hero{
  position:relative;
  padding:80px 24px 40px;
  text-align:center;
  overflow:hidden;
}

.hero__inner{
  max-width:920px;
  margin:0 auto;
  position:relative;
  z-index:3;
}

.hero__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--gloss);
  border:2px solid var(--ink);
  border-radius:var(--r-pill);
  padding:6px 18px;
  margin-bottom:32px;
  font-family:var(--mono);
  font-size:14px;
  color:var(--ink);
  box-shadow: var(--shadow-bubble);
}
.dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green), inset 0 1px 0 rgba(255,255,255,.6);
  animation: pulse 1.6s ease-in-out infinite;
}
.vt{ font-family:var(--mono); letter-spacing:.06em }

.hero__h1{
  font-family:var(--display);
  font-size: clamp(48px, 9vw, 110px);
  line-height: 1.02;
  letter-spacing:-.02em;
  color: var(--ink);
  margin: 0 0 28px;
  text-shadow:
    1px 1px 0 #fff,
    2px 2px 0 #fff,
    3px 3px 0 #fff,
    4px 4px 0 rgba(26,26,62,.18),
    8px 8px 0 rgba(255,79,175,.18);
}
.hero__h1 em{
  font-style:italic;
  color: transparent;
  -webkit-text-stroke: 2.5px var(--ink);
  text-shadow:
    2px 2px 0 #fff,
    3px 3px 0 rgba(255,79,175,.6),
    5px 5px 0 rgba(0,245,255,.4);
  background: linear-gradient(180deg, #fff, #ffe7f3);
  -webkit-background-clip: text;
  background-clip: text;
}
.star-pulse{
  display:inline-block;
  color: var(--accent);
  -webkit-text-stroke: 0;
  font-style:normal;
  background:none;
  text-shadow: 0 0 20px rgba(255,79,175,.8), 2px 2px 0 #fff;
  animation: spin 6s linear infinite;
}
@keyframes spin{
  from{ transform: rotate(0) }
  to{ transform: rotate(360deg) }
}

.hero__sub{
  font-size: clamp(16px, 1.6vw, 19px);
  max-width:640px;
  margin:0 auto 36px;
  color:var(--ink-soft);
  line-height:1.65;
}
.hero__sub strong{ color:var(--ink) }

.hero__cta-row{
  display:flex; gap:14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:32px;
}

.hero__trust{
  display:flex;
  gap:18px;
  justify-content:center;
  flex-wrap:wrap;
  font-family:var(--mono);
  font-size:15px;
  color:var(--ink-soft);
}
.hero__trust span{
  background:var(--glass);
  padding:6px 14px;
  border-radius:var(--r-pill);
  border:1px solid rgba(26,26,62,.15);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

/* floating bubbles + sparkles */
.bubble{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle at 30% 25%, #fff 0%, rgba(255,255,255,.7) 18%, rgba(185,212,240,.5) 60%, rgba(100,148,200,.3) 100%);
  box-shadow: inset 0 -10px 20px rgba(100,148,200,.3), inset 0 4px 10px rgba(255,255,255,.6), 0 8px 30px rgba(100,148,200,.3);
  z-index:1;
  animation: float 10s ease-in-out infinite;
}
.bubble--1{ width:140px; height:140px; top:120px; left:8%; animation-delay:-2s }
.bubble--2{ width:80px;  height:80px;  top:60px;  right:12%; animation-delay:-5s }
.bubble--3{ width:200px; height:200px; bottom:40px; left:5%; animation-delay:-1s }
.bubble--4{ width:60px;  height:60px;  bottom:120px; right:8%; animation-delay:-7s }
.bubble--5{ width:100px; height:100px; top:50%; right:3%; animation-delay:-3s }
@keyframes float{
  0%,100%{ transform: translateY(0) translateX(0) }
  33%   { transform: translateY(-15px) translateX(8px) }
  66%   { transform: translateY(10px) translateX(-6px) }
}

.sparkle{
  position:absolute;
  font-size:32px;
  color:var(--accent);
  text-shadow: 0 0 16px rgba(255,79,175,.7), 2px 2px 0 #fff;
  z-index:2;
  animation: twinkle 2.4s ease-in-out infinite;
  pointer-events:none;
}
.sparkle--1{ top:90px; left:18%; animation-delay:-.5s; font-size:24px }
.sparkle--2{ top:200px; right:22%; animation-delay:-1.2s; font-size:36px }
.sparkle--3{ bottom:120px; left:24%; animation-delay:-.2s; font-size:28px }
.sparkle--4{ top:140px; right:30%; animation-delay:-1.8s; color:#00f5ff; text-shadow: 0 0 16px rgba(0,245,255,.7), 2px 2px 0 #fff }
@keyframes twinkle{
  0%,100%{ opacity:.4; transform: scale(.7) rotate(0) }
  50%   { opacity:1;  transform: scale(1.2) rotate(180deg) }
}
.sparkle-inline{
  display:inline-block;
  color:var(--accent);
  text-shadow: 0 0 12px rgba(255,79,175,.6), 1px 1px 0 #fff;
  animation: twinkle 2s ease-in-out infinite;
}

/* ============= STATS BUBBLES ============= */
.stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
  max-width:920px;
  margin: 56px auto 0;
  position:relative;
  z-index:3;
}
.stat{
  background:var(--gloss);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:18px 8px;
  text-align:center;
  box-shadow: var(--shadow-bubble);
  transition: transform .25s;
}
.stat:hover{ transform: translateY(-4px) }
.stat__num{
  font-family:var(--display);
  font-size:28px;
  color:var(--ink);
  line-height:1;
  text-shadow: 1px 1px 0 #fff;
}
.stat__lbl{
  font-family:var(--mono);
  font-size:14px;
  margin-top:6px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

/* ============= SECTIONS ============= */
.section{
  padding: 88px 24px;
  position:relative;
  z-index:2;
}
.section--about{ padding-top: 100px }

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:15px;
  color:var(--ink-soft);
  margin-bottom:14px;
  letter-spacing:.04em;
}
.eyebrow span:first-child{
  background:var(--gloss-pink);
  color:#fff;
  border:2px solid var(--ink);
  width:36px; height:36px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--display);
  font-size:13px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.6);
}

.h2{
  font-family:var(--display);
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.05;
  letter-spacing:-.01em;
  color:var(--ink);
  margin: 0 0 24px;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 rgba(26,26,62,.12);
}
.h2 em{
  font-style:italic;
  color: transparent;
  -webkit-text-stroke: 2px var(--ink);
  background: var(--gloss-pink);
  -webkit-background-clip:text;
  background-clip:text;
}
.h2--sm{ font-size: clamp(28px, 3.6vw, 38px) }

.section__sub{
  font-size:17px;
  color:var(--ink-soft);
  max-width:640px;
  margin: 0 0 40px;
}
.lead{
  font-size:18px;
  line-height:1.65;
  color:var(--ink);
  margin-bottom:18px;
}

.about__grid{
  max-width:780px;
}
.about__grid p{ margin: 0 0 16px }

/* ============= CARDS ============= */
.cards-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
  margin-top:32px;
}
.card{
  background: linear-gradient(180deg, #fff 0%, #f0f6fd 100%);
  border:2px solid var(--ink);
  border-radius:24px;
  padding:28px 24px;
  box-shadow: var(--shadow-card);
  position:relative;
  overflow:hidden;
  transition: transform .25s;
}
.card::before{
  /* gloss highlight */
  content:"";
  position:absolute; top:0; left:0; right:0; height:50%;
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
  border-radius:22px 22px 0 0;
}
.card:hover{ transform: translateY(-6px) }
.card__icon{
  font-size:38px;
  width:64px; height:64px;
  background:var(--gloss);
  border:2px solid var(--ink);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  box-shadow: var(--shadow-bubble);
  position:relative;
  z-index:1;
}
.card__h3{
  font-family:var(--display);
  font-size:22px;
  margin: 0 0 12px;
  color:var(--ink);
  text-shadow: 1px 1px 0 #fff;
  position:relative;
  z-index:1;
}
.card p{
  margin:0 0 14px;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
  position:relative;
  z-index:1;
}
.card__list{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  position:relative;
  z-index:1;
}
.card__list li{
  font-size:14px;
  font-family:var(--mono);
  letter-spacing:.02em;
  padding: 4px 0 4px 22px;
  position:relative;
  color:var(--ink);
}
.card__list li::before{
  content:"✦";
  position:absolute;
  left:0; top:4px;
  color:var(--accent);
}

.card--game .game-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:64px; height:64px;
  background: var(--gloss-pink);
  border:2px solid var(--ink);
  border-radius:50%;
  font-size:26px;
  color:#fff;
  margin-bottom:18px;
  box-shadow: var(--shadow-bubble);
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
  position:relative;
  z-index:1;
}

/* ============= STEPS ============= */
.steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
  margin: 32px 0 24px;
  position:relative;
}
.steps::before{
  /* connector line */
  content:"";
  position:absolute;
  top:30px;
  left:5%; right:5%;
  height:2px;
  background: repeating-linear-gradient(90deg, var(--ink) 0, var(--ink) 6px, transparent 6px, transparent 12px);
  z-index:0;
}
.step{
  text-align:center;
  position:relative;
  z-index:1;
  padding:0 10px;
}
.step__num{
  width:60px; height:60px;
  margin: 0 auto 16px;
  background: var(--gloss);
  border:2px solid var(--ink);
  border-radius:50%;
  font-family:var(--display);
  font-size:20px;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  text-shadow: 1px 1px 0 #fff;
  box-shadow: var(--shadow-bubble);
}
.step__h{
  font-family:var(--display);
  font-size:18px;
  margin: 0 0 8px;
  color:var(--ink);
  text-shadow: 1px 1px 0 #fff;
}
.step p{
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.55;
  margin:0;
}

.kyc-note{
  margin-top:32px;
  background: rgba(26,26,62,.92);
  color: #ffe7f3;
  padding: 16px 22px;
  border-radius:var(--r);
  border:2px solid var(--ink);
  font-size:15px;
  line-height:1.6;
  box-shadow: 0 4px 16px rgba(26,26,62,.25);
}
.kyc-note .vt{ color:var(--accent); margin-right:10px }

/* ============= PAYMENT GRID ============= */
.pay-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:14px;
  margin: 28px 0 24px;
}
.pay-cell{
  background: var(--gloss);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:18px 12px;
  text-align:center;
  box-shadow: var(--shadow-bubble);
  transition: transform .15s;
}
.pay-cell:hover{ transform: translateY(-3px) }
.pay-cell__name{
  font-family:var(--display);
  font-size:16px;
  color:var(--ink);
  text-shadow: 1px 1px 0 #fff;
  margin-bottom:4px;
}
.pay-cell__time{
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink-soft);
  letter-spacing:.02em;
}
.pay-cell--crypto{
  background: var(--gloss-pink);
}
.pay-cell--crypto .pay-cell__name,
.pay-cell--crypto .pay-cell__time{
  color:#fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}

.section--pay p{ font-size:16px; line-height:1.65; color:var(--ink); max-width:780px }

/* ============= BONUS ============= */
.bonus-hero{
  display:grid;
  grid-template-columns: 1fr 1.6fr;
  gap:32px;
  align-items:center;
  margin: 28px 0 36px;
}
.bonus-hero__bubble{
  background: var(--gloss-pink);
  border: 3px solid var(--ink);
  border-radius:24px;
  padding:36px 28px;
  text-align:center;
  color:#fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.25);
  box-shadow: var(--shadow-bubble), 8px 8px 0 var(--ink);
  transform: rotate(-2deg);
  position:relative;
}
.bonus-hero__bubble::before{
  content:"✦";
  position:absolute; top:-18px; right:-12px;
  background:#fff;
  color:var(--accent);
  font-size:26px;
  width:44px; height:44px;
  border:2px solid var(--ink);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  text-shadow:none;
  box-shadow: var(--shadow-bubble);
  animation: spin 4s linear infinite;
}
.bonus-hero__lbl{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.1em;
  display:block;
  margin-bottom:8px;
  opacity:.95;
}
.bonus-hero__big{
  display:block;
  font-family:var(--display);
  font-size: clamp(34px, 4.4vw, 48px);
  line-height:1;
  margin-bottom:8px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.3), 4px 4px 0 rgba(0,0,0,.18);
}
.bonus-hero__plus{
  font-family:var(--display);
  font-size:18px;
  display:block;
}
.bonus-hero__txt p{
  font-size:16px;
  margin:0 0 14px;
  line-height:1.65;
  color:var(--ink);
}
.bonus-hero__txt strong{ color:var(--ink) }

.promo-list{
  list-style:none;
  padding:0;
  margin:24px 0 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 28px;
}
.promo-list li{
  font-size:15px;
  padding:10px 16px;
  background: var(--glass);
  border:1px solid rgba(26,26,62,.15);
  border-radius:var(--r-pill);
  display:flex;
  align-items:center;
  gap:10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.promo-list li span{
  color:var(--accent);
  font-size:18px;
  text-shadow: 0 0 8px rgba(255,79,175,.5);
}

/* ============= COMPARE ============= */
.cmp-wrap{
  background: var(--gloss);
  border:2px solid var(--ink);
  border-radius:24px;
  padding: 8px;
  box-shadow: var(--shadow-bubble);
  overflow:hidden;
}
.cmp{
  width:100%;
  border-collapse: collapse;
  background:#fff;
  border-radius: 18px;
  overflow:hidden;
  font-size:15px;
}
.cmp thead th{
  background: var(--gloss-dark);
  color:#fff;
  font-family:var(--display);
  font-size:15px;
  padding: 18px 16px;
  text-align: left;
  border-bottom: 2px solid var(--ink);
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.cmp thead th.cmp__us{
  background: var(--gloss-pink);
  color:#fff;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
}
.cmp tbody td{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(26,26,62,.1);
  color:var(--ink);
}
.cmp tbody tr:last-child td{ border-bottom:none }
.cmp tbody td.cmp__us{
  background: rgba(255,79,175,.08);
  font-weight:500;
}
.cmp tbody td.cmp__us strong{ color: var(--accent-d) }

/* ============= MOBILE SECTION ============= */
.mobile-wrap{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:48px;
  align-items:center;
}
.mobile-txt p{
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
  margin: 0 0 16px;
}
.mobile-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin-top:18px;
}
.tag{
  font-family:var(--mono);
  font-size:14px;
  background: var(--glass);
  border:1px solid rgba(26,26,62,.2);
  padding:4px 12px;
  border-radius: var(--r-pill);
  letter-spacing:.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.phone{
  width: 280px;
  margin: 0 auto;
  background: var(--gloss-dark);
  border-radius: 38px;
  padding: 14px 12px 24px;
  border: 3px solid var(--ink);
  box-shadow: 12px 12px 0 var(--ink), 0 16px 50px rgba(26,26,62,.3);
  position:relative;
  transform: rotate(3deg);
}
.phone__notch{
  width: 80px; height: 18px;
  background:#000;
  border-radius: 0 0 12px 12px;
  margin: 0 auto 10px;
}
.phone__screen{
  background: var(--bg);
  border-radius: 24px;
  padding: 14px 12px;
  min-height: 380px;
  position:relative;
  overflow:hidden;
}
.phone__screen::before{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.5) 0, rgba(255,255,255,.5) 1.5px, transparent 2.5px);
  background-size: 80px 80px;
  pointer-events:none;
}
.phone__bar{
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:13px;
  color:var(--ink);
  padding: 0 6px 10px;
  position:relative;
  z-index:1;
}
.phone__greeting{
  font-size:15px;
  color:var(--ink);
  margin-bottom:14px;
  position:relative; z-index:1;
  padding: 0 4px;
}
.phone__greeting strong{
  font-family:var(--display);
  font-size:20px;
  display:block;
  margin-top:2px;
}
.phone__balance{
  background: var(--gloss);
  border:2px solid var(--ink);
  border-radius: 14px;
  padding: 10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:14px;
  box-shadow: var(--shadow-bubble);
  position:relative; z-index:1;
}
.phone__balance-lbl{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
}
.phone__balance-num{
  font-family:var(--display);
  font-size:18px;
  color:var(--ink);
  text-shadow: 1px 1px 0 #fff;
}
.phone__tiles{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
  margin-bottom:14px;
  position:relative; z-index:1;
}
.phone__tile{
  background: var(--gloss);
  border:2px solid var(--ink);
  border-radius:14px;
  padding:14px 8px;
  text-align:center;
  font-size:24px;
  box-shadow: var(--shadow-bubble);
  line-height:1;
}
.phone__tile span{
  display:block;
  margin-top:6px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink);
}
.phone__cta{
  background: var(--gloss-pink);
  color:#fff;
  border:2px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 10px;
  text-align:center;
  font-family:var(--display);
  font-size:14px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.25);
  box-shadow: var(--shadow-bubble);
  position:relative; z-index:1;
}

/* ============= SUPPORT ============= */
.support-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  margin-top:28px;
}
.support-cell{
  background: var(--gloss);
  border:2px solid var(--ink);
  border-radius: 24px;
  padding: 28px 22px;
  text-align:center;
  box-shadow: var(--shadow-card);
}
.support-cell__icon{
  font-size:36px;
  margin-bottom:14px;
}
.support-cell__h{
  font-family:var(--display);
  font-size:22px;
  margin: 0 0 4px;
  color:var(--ink);
  text-shadow: 1px 1px 0 #fff;
}
.support-cell__t{
  font-family:var(--mono);
  font-size:14px;
  color:var(--accent);
  margin: 0 0 10px;
  letter-spacing:.04em;
}
.support-cell p{
  font-size:14px;
  color:var(--ink-soft);
  margin:0;
  line-height:1.55;
}

/* ============= LEGAL & RESPONSIBLE ============= */
.legal-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
}
.legal-wrap p{
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
  margin:0 0 14px;
}
.legal-list{
  list-style:none;
  padding:0;
  margin: 18px 0 0;
}
.legal-list li{
  padding: 10px 0;
  font-size:14px;
  border-bottom: 1px dashed rgba(26,26,62,.2);
  color:var(--ink);
}
.legal-list .vt{
  color: var(--accent);
  margin-right: 10px;
}
.bzga{
  margin-top:22px;
  background: rgba(26,26,62,.92);
  color: #fff;
  padding:16px 20px;
  border-radius: var(--r);
  border:2px solid var(--ink);
  font-size:14px;
  line-height:1.6;
  box-shadow: 0 4px 16px rgba(26,26,62,.25);
}
.bzga strong{ color: var(--accent); display:block; margin-bottom:4px }

/* ============= FAQ ============= */
.faq{
  max-width: 820px;
  margin-top:24px;
}
.faq__item{
  background: var(--gloss);
  border:2px solid var(--ink);
  border-radius: 18px;
  margin-bottom:14px;
  box-shadow: var(--shadow-card);
  overflow:hidden;
  transition: background .2s;
}
.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding: 18px 24px 18px 24px;
  font-family:var(--display);
  font-size: 17px;
  color:var(--ink);
  text-shadow: 1px 1px 0 #fff;
  position:relative;
  padding-right: 60px;
}
.faq__item summary::-webkit-details-marker{ display:none }
.faq__item summary::after{
  content: "+";
  position:absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  width:34px; height:34px;
  background: var(--gloss-pink);
  color:#fff;
  border-radius:50%;
  border:2px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  line-height:1;
  font-family:var(--body);
  font-weight:700;
  text-shadow: 1px 1px 0 rgba(0,0,0,.25);
  box-shadow: var(--shadow-bubble);
  transition: transform .25s;
}
.faq__item[open] summary::after{ transform: translateY(-50%) rotate(45deg) }
.faq__item p{
  margin:0;
  padding: 0 24px 22px;
  font-size:15px;
  line-height:1.65;
  color:var(--ink-soft);
}

/* ============= REVIEWS ============= */
.reviews{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:20px;
  margin-top:28px;
}
.review{
  background: linear-gradient(180deg, #fff 0%, #f0f6fd 100%);
  border:2px solid var(--ink);
  border-radius: 24px;
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  position:relative;
}
.review__stars{
  color: var(--gold);
  font-size:18px;
  margin-bottom:14px;
  text-shadow: 0 0 6px rgba(255,216,74,.5), 1px 1px 0 #fff;
  letter-spacing:.04em;
}
.review__txt{
  font-size:15px;
  line-height:1.65;
  color:var(--ink);
  margin: 0 0 22px;
  font-style: italic;
}
.review__txt strong{ color:var(--accent-d); font-style: normal }
.review__who{
  display:flex;
  gap:12px;
  align-items:center;
}
.review__avatar{
  width:42px; height:42px;
  border-radius:50%;
  background: var(--gloss-pink);
  border:2px solid var(--ink);
  color:#fff;
  font-family:var(--display);
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  text-shadow: 1px 1px 0 rgba(0,0,0,.25);
  box-shadow: var(--shadow-bubble);
}
.review__name{
  font-family:var(--display);
  font-size:15px;
  color:var(--ink);
  text-shadow: 1px 1px 0 #fff;
}
.review__city{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:.04em;
}

/* ============= CTA SECTION ============= */
.section--cta{ padding: 60px 24px 100px }
.cta-block{
  background: var(--gloss-dark);
  color:#fff;
  border: 3px solid var(--ink);
  border-radius:32px;
  padding: 56px 40px;
  text-align:center;
  position:relative;
  overflow:hidden;
  box-shadow: 0 24px 60px rgba(26,26,62,.4), inset 0 2px 0 rgba(255,255,255,.15);
}
.cta-block::before{
  /* moving gloss strip */
  content:"";
  position:absolute;
  top:-50%; left:-30%;
  width:60%; height:200%;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform: rotate(20deg);
  pointer-events:none;
}
.sparkle--cta{
  position:absolute;
  font-size: 32px;
  color: var(--accent);
  text-shadow: 0 0 20px rgba(255,79,175,.9);
  animation: twinkle 2.5s ease-in-out infinite;
}
.sparkle--c1{ top:24px; left:32px }
.sparkle--c2{ top:42px; right:48px; font-size:42px; color:#00f5ff; text-shadow: 0 0 20px rgba(0,245,255,.9) }
.sparkle--c3{ bottom:30px; left:48%; font-size:28px }

.cta-block__lbl{
  font-family:var(--mono);
  color: var(--accent);
  margin-bottom:12px;
  letter-spacing:.1em;
  font-size:14px;
}
.cta-block__h{
  font-family:var(--display);
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.05;
  margin: 0 0 18px;
  color:#fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.3), 4px 4px 0 rgba(255,79,175,.4);
}
.cta-block__h em{
  font-style: italic;
  color: transparent;
  -webkit-text-stroke: 2px #fff;
  background: var(--gloss-pink);
  -webkit-background-clip: text;
  background-clip: text;
}
.cta-block__t{
  max-width: 640px;
  margin: 0 auto 28px;
  font-size:16px;
  line-height:1.65;
  color: rgba(255,255,255,.85);
}
.cta-block__t strong{ color:#fff }

.cta-block__bonus{
  display:inline-block;
  background: var(--gloss-pink);
  border: 3px solid var(--ink);
  border-radius: 24px;
  padding: 22px 36px;
  margin: 12px 0 28px;
  box-shadow: var(--shadow-bubble), 6px 6px 0 #000;
  position:relative;
}
.cta-block__bonus-num{
  font-family:var(--display);
  font-size: clamp(48px, 7vw, 72px);
  line-height:1;
  color:#fff;
  text-shadow: 3px 3px 0 rgba(0,0,0,.3), 5px 5px 0 rgba(0,0,0,.18);
}
.cta-block__bonus-plus{
  font-family:var(--display);
  font-size:20px;
  color:#fff;
  margin-top:4px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.3);
}
.cta-block__bonus-lbl{
  font-family:var(--mono);
  font-size:13px;
  color:#fff;
  letter-spacing:.06em;
  margin-top:8px;
}

.cta-block__row{
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  margin-bottom: 22px;
  position:relative; z-index:1;
}
.cta-block__small{
  font-family:var(--mono);
  font-size:13px;
  color: rgba(255,255,255,.6);
  letter-spacing:.04em;
  margin: 0;
}

/* ============= FOOTER ============= */
.ftr{
  background: var(--gloss-dark);
  color:#fff;
  border-top: 2px solid var(--ink);
  padding-top: 56px;
  position:relative;
  z-index:2;
}
.ftr__inner{
  display:grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: 40px;
  padding-bottom: 40px;
}
.ftr__brand .logo{ color:#fff; margin-bottom:16px }
.ftr__brand .logo__txt{ text-shadow: 1px 1px 0 rgba(0,0,0,.4) }
.ftr__brand .logo__chrome{ background: var(--gloss-pink); color:#fff; text-shadow: 1px 1px 0 rgba(0,0,0,.3) }
.ftr__about{
  font-size:14px;
  line-height:1.6;
  color: rgba(255,255,255,.75);
  margin: 0 0 20px;
  max-width:380px;
}
.ftr__age{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:13px;
  color: rgba(255,255,255,.7);
  font-family:var(--mono);
}
.age-badge{
  background: var(--accent);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  width:42px; height:42px;
  display:flex;
  align-items:center; justify-content:center;
  font-family:var(--display);
  font-size:14px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.3);
  box-shadow: 0 0 0 2px var(--accent);
  flex-shrink:0;
}

.ftr__col h4{
  font-family:var(--display);
  font-size:14px;
  margin: 0 0 14px;
  color: var(--accent);
  letter-spacing:.05em;
  text-transform: uppercase;
}
.ftr__col a{
  display:block;
  font-size:14px;
  color: rgba(255,255,255,.75);
  padding: 5px 0;
  transition: color .2s;
}
.ftr__col a:hover{ color: #fff }

.ftr__bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding: 20px 0;
}
.ftr__bottom-inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  font-size:13px;
  color: rgba(255,255,255,.55);
}

/* ============= RESPONSIVE ============= */
@media (max-width: 960px){
  .nav__links{ display:none }
  .nav__cta{ display:none }
  .burger{ display:flex; margin-left:auto }

  .nav__mobile{
    display:none;
    flex-direction:column;
    padding: 14px 24px 22px;
    background: var(--gloss);
    border-top:1px solid var(--ink);
    gap:4px;
  }
  .nav__mobile.is-open{ display:flex }
  .nav__mobile a{
    padding: 12px 14px;
    font-size:15px;
    border-bottom:1px dashed rgba(26,26,62,.15);
    color: var(--ink);
  }
  .nav__mobile a:last-child{ border:none; margin-top:8px }

  .burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg) }
  .burger.is-open span:nth-child(2){ opacity:0 }
  .burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg) }

  .stats{ grid-template-columns: repeat(2, 1fr) }
  .cards-3{ grid-template-columns: 1fr }
  .steps{ grid-template-columns: repeat(2, 1fr); gap:32px }
  .steps::before{ display:none }
  .pay-grid{ grid-template-columns: repeat(3, 1fr) }
  .bonus-hero{ grid-template-columns: 1fr; gap:24px }
  .bonus-hero__bubble{ transform: rotate(-1.5deg); margin: 0 auto; max-width:340px }
  .promo-list{ grid-template-columns: 1fr }
  .mobile-wrap{ grid-template-columns: 1fr; gap:32px }
  .phone{ transform: rotate(0); margin-top:14px }
  .support-grid{ grid-template-columns: 1fr }
  .legal-wrap{ grid-template-columns: 1fr; gap:32px }
  .reviews{ grid-template-columns: 1fr }
  .ftr__inner{ grid-template-columns: 1fr 1fr; gap:32px }
  .ftr__brand{ grid-column: 1 / -1 }
  .section{ padding: 64px 20px }
  .hero{ padding: 60px 20px 30px }
  .cta-block{ padding: 40px 24px }
}

@media (max-width: 560px){
  .pay-grid{ grid-template-columns: repeat(2, 1fr) }
  .steps{ grid-template-columns: 1fr }
  .stats{ grid-template-columns: repeat(2, 1fr) }
  .ftr__inner{ grid-template-columns: 1fr }
  .cmp{ font-size:13px }
  .cmp thead th, .cmp tbody td{ padding: 10px 8px }
  .age-strip{ font-size: 11px; padding: 6px 10px; gap:6px }
  .hero{ padding: 40px 16px 24px }
  .hero__h1{ font-size: 36px; margin-bottom: 20px }
  .hero__h1 em{ -webkit-text-stroke: 1.5px var(--ink) }
  .hero__sub{ font-size:15px }
  .hero__cta-row{ flex-direction:column; gap:10px }
  .hero__cta-row .btn{ width:100% }
  .hero__trust{ font-size:13px; gap:8px }
  .hero__trust span{ padding:4px 10px }

  /* hide oversized bubbles on phone, keep only small ones */
  .bubble--3{ display:none }
  .bubble--1{ width:80px; height:80px; top:60px; left:-10px }
  .bubble--5{ width:60px; height:60px; right:-5px }

  .stats{ margin-top: 36px; gap:10px }
  .stat{ padding: 14px 6px }
  .stat__num{ font-size: 22px }
  .stat__lbl{ font-size: 12px }

  .section{ padding: 56px 16px }
  .h2{ font-size: 32px }
  .h2 em{ -webkit-text-stroke: 1.5px var(--ink) }
  .cta-block{ padding: 32px 18px }
  .cta-block__h em{ -webkit-text-stroke: 1.5px #fff }

  .bonus-hero__bubble{ padding: 28px 20px }
  .bonus-hero__big{ font-size: 30px }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}
