/* ============================================================
   Norton VPN × Roblox Rewards — landing page (v2)
   Extends ../styles.css. Dark + metallic gold + Roblox accents.
   ============================================================ */

.rbx { background:
    radial-gradient(60% 40% at 80% 5%, rgba(0,210,106,.07), transparent 60%),
    radial-gradient(50% 35% at 5% 20%, rgba(210,161,92,.10), transparent 65%),
    #07070a;
}

/* ---------- Robux SVG icon utility ---------- */
.rbx-logo-svg          { width: 26px; height: 26px; flex-shrink: 0; }
.rbx-logo-svg.sm       { width: 18px; height: 18px; }
.big-coin              { width: 130px; height: 130px; filter: drop-shadow(0 0 24px rgba(210,161,92,.55)); }
.big-coin.glow         { filter: drop-shadow(0 0 40px rgba(210,161,92,.8)); }
.amount-r, .amount-line, .rbx-sub, .rbx-tag, .rbx-logo-svg { display: none; }

/* ---------- Top bar (pill + download) ---------- */
.rbx-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; gap: 14px; align-items: center;
  padding: 18px 28px 0;
  max-width: 1320px; margin: 0 auto;
}
.rbx-nav-pill {
  flex: 1;
  display: flex; align-items: center; gap: 28px;
  padding: 12px 18px 12px 14px;
  background: linear-gradient(180deg, rgba(28,28,32,.92), rgba(14,14,18,.85));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 10px 40px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
}
.brand-logo-mark {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--grad-gold);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(210,161,92,.4);
  flex-shrink: 0;
}
.brand-logo-mark.sm { width: 22px; height: 22px; }
.brand-text { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -.3px; -webkit-background-clip: initial; background-clip: initial; background: none; }
.brand-text.sm { font-size: 13px; }
.brand-text .brand-light { color: rgba(255,255,255,.85); font-weight: 600; }
.rbx-nav .brand { display: flex; align-items: center; gap: 10px; }
.rbx-nav-links { display: flex; gap: 26px; margin-left: 14px; }
.rbx-nav-links a { color: rgba(255,255,255,.7); font-weight: 500; font-size: 14px; transition: color .15s; }
.rbx-nav-links a:hover { color: var(--gold-light); }
.rbx-nav-burger {
  margin-left: auto;
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
  cursor: pointer;
}
.rbx-nav-burger span { width: 16px; height: 2px; border-radius: 2px; background: #fff; }
.rbx-nav-dl {
  width: 56px; height: 56px; border-radius: 16px;
  background: linear-gradient(180deg,#fff,#e6e6e6);
  color: #0a0a0c;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  flex-shrink: 0;
  transition: transform .15s;
}
.rbx-nav-dl:hover { transform: translateY(-2px); }

/* ---------- Hero ---------- */
.rbx-hero {
  position: relative;
  padding: 70px 32px 110px;
  overflow: hidden;
  min-height: 720px;
}
.rbx-hero-glow {
  position: absolute; inset: -10% -10% auto -10%; height: 130%;
  background:
    radial-gradient(45% 60% at 78% 50%, rgba(0,210,106,.30) 0%, transparent 60%),
    radial-gradient(35% 55% at 18% 28%, rgba(210,161,92,.30) 0%, transparent 60%),
    radial-gradient(50% 40% at 50% 100%, rgba(0,210,106,.18) 0%, transparent 65%);
  pointer-events: none; filter: blur(50px);
}

/* Light rays / streaks behind phone */
.rbx-hero-rays { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ray {
  position: absolute;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  height: 2px; border-radius: 2px;
  filter: blur(.5px) drop-shadow(0 0 6px var(--gold));
  opacity: .85;
}
.ray.r1 { width: 220px; top: 22%; right: 14%; transform: rotate(35deg); }
.ray.r2 { width: 160px; top: 40%; right: 8%;  transform: rotate(-18deg); background: linear-gradient(90deg, transparent, #00D26A, transparent); filter: blur(.5px) drop-shadow(0 0 6px #00D26A); }
.ray.r3 { width: 280px; top: 60%; right: 22%; transform: rotate(20deg); }
.ray.r4 { width: 180px; bottom: 18%; right: 4%; transform: rotate(-30deg); background: linear-gradient(90deg, transparent, #00D26A, transparent); filter: blur(.5px) drop-shadow(0 0 6px #00D26A); }
.ray.r5 { width: 140px; top: 30%; right: 30%; transform: rotate(60deg); }
.ray.r6 { width: 200px; bottom: 30%; right: 28%; transform: rotate(-50deg); }
.ray.r7 { width: 120px; top: 14%; right: 38%; transform: rotate(25deg); background: linear-gradient(90deg, transparent, #00D26A, transparent); filter: blur(.5px) drop-shadow(0 0 6px #00D26A); }
.ray.r8 { width: 240px; bottom: 8%; right: 10%; transform: rotate(15deg); }

.rbx-hero-particles    { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.rbx-hero-particles span {
  position: absolute;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 10px var(--gold);
  opacity: .8;
  animation: float-p 7s ease-in-out infinite;
}
.rbx-hero-particles span:nth-child(odd)  { background: #00D26A; box-shadow: 0 0 10px #00D26A; }
.rbx-hero-particles span:nth-child(1)  { top: 18%; right: 22%; animation-delay: 0s; }
.rbx-hero-particles span:nth-child(2)  { top: 30%; right: 34%; animation-delay: .8s; }
.rbx-hero-particles span:nth-child(3)  { top: 52%; right: 12%; animation-delay: 1.6s; }
.rbx-hero-particles span:nth-child(4)  { top: 64%; right: 36%; animation-delay: 2.4s; }
.rbx-hero-particles span:nth-child(5)  { top: 12%; right: 8%;  animation-delay: 3.2s; }
.rbx-hero-particles span:nth-child(6)  { top: 78%; right: 18%; animation-delay: .4s; }
.rbx-hero-particles span:nth-child(7)  { top: 86%; right: 32%; animation-delay: 1.2s; }
.rbx-hero-particles span:nth-child(8)  { top: 22%; right: 44%; animation-delay: 2.0s; }
.rbx-hero-particles span:nth-child(9)  { top: 46%; right: 4%;  animation-delay: 2.8s; }
.rbx-hero-particles span:nth-child(10) { top: 70%; right: 6%;  animation-delay: 3.6s; }
.rbx-hero-particles span:nth-child(11) { top: 38%; right: 26%; animation-delay: .6s; }
.rbx-hero-particles span:nth-child(12) { top: 8%;  right: 28%; animation-delay: 1.4s; }
.rbx-hero-particles span:nth-child(13) { top: 60%; right: 42%; animation-delay: 2.2s; }
.rbx-hero-particles span:nth-child(14) { top: 90%; right: 24%; animation-delay: 3.0s; }
.rbx-hero-particles span:nth-child(15) { top: 26%; right: 16%; animation-delay: 3.8s; }
@keyframes float-p { 0%,100% { transform: translateY(0); opacity: .8; } 50% { transform: translateY(-20px); opacity: 1; } }

.rbx-hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
  max-width: 1280px; margin: 0 auto; align-items: center;
}

.hero-title {
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.1; font-weight: 800; letter-spacing: -1.5px;
  color: #fff;
  margin: 0 0 22px;
}
.hero-x {
  display: inline-block;
  font-weight: 400;
  font-style: italic;
  color: var(--gold-light);
  margin: 0 4px;
}
.hero-sub {
  color: rgba(255,255,255,.72);
  font-size: 18px;
  max-width: 480px;
  margin: 0 0 38px;
  line-height: 1.5;
}

/* Big gold pill CTA */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 40px;
  border-radius: 999px;
  background: var(--grad-gold);
  color: #1a1208;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: .2px;
  text-decoration: none;
  box-shadow:
    0 14px 40px rgba(210,161,92,.45),
    inset 0 1px 0 rgba(255,255,255,.4),
    inset 0 -2px 0 rgba(92,68,32,.4);
  transition: transform .2s, box-shadow .2s;
}
.btn-pill:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 50px rgba(210,161,92,.6), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(92,68,32,.4);
}

.rbx-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 50px; }
.rbx-hero-stats { display: flex; gap: 36px; max-width: 480px; }
.rbx-hero-stats div { display: flex; flex-direction: column; }
.rbx-hero-stats strong { font-size: 22px; font-weight: 800; color: var(--gold-light); }
.rbx-hero-stats span   { font-size: 11px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 2px; }

/* ---------- Hero art ---------- */
.rbx-hero-art {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 600px;
}

/* Big neon halo behind the phone */
.rbx-phone-halo {
  position: absolute;
  width: 480px; height: 480px;
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,210,106,.45) 0%, rgba(0,210,106,.18) 30%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(210,161,92,.25) 20%, transparent 60%);
  filter: blur(30px);
  pointer-events: none;
  animation: halo-pulse 5s ease-in-out infinite;
}
@keyframes halo-pulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); opacity: .9; }
  50%     { transform: translate(-50%,-50%) scale(1.08); opacity: 1; }
}

/* Floating Robux coins */
.rbx-coin { position: absolute; filter: drop-shadow(0 12px 30px rgba(210,161,92,.55)); }
.rbx-coin svg          { width: 100%; height: 100%; display: block; }
.rbx-coin-1 { width: 60px; height: 60px; top: 8%;   left: 18%; transform: rotate(-15deg); }
.rbx-coin-2 { width: 90px; height: 90px; top: 18%;  left: 30%; transform: rotate(8deg); z-index: 2; }
.rbx-coin-3 { width: 55px; height: 55px; bottom: 18%; right: 8%; transform: rotate(20deg); }
.rbx-coin-4 { width: 70px; height: 70px; top: 6%;   right: 14%; transform: rotate(-22deg); }
.rbx-coin-5 { width: 45px; height: 45px; bottom: 8%; left: 22%; transform: rotate(35deg); }
.rbx-coin-6 { width: 50px; height: 50px; top: 48%;  right: 6%; transform: rotate(12deg); }
.float                 { animation: float-c 5.5s ease-in-out infinite; }
.rbx-coin-2.float      { animation-delay: 1s; }
.rbx-coin-3.float      { animation-delay: 2s; }
.rbx-coin-4.float      { animation-delay: .5s; }
.rbx-coin-5.float      { animation-delay: 2.5s; }
.rbx-coin-6.float      { animation-delay: 3s; }
@keyframes float-c { 0%,100% { transform: translateY(0) rotate(var(--r,0deg)); } 50% { transform: translateY(-14px) rotate(var(--r,0deg)); } }

/* Big "side coin" overlapping phone left edge */
.rbx-coin-side {
  position: absolute;
  width: 130px; height: 130px;
  left: 16%; top: 42%;
  transform: translateY(-50%) rotate(-8deg);
  z-index: 4;
  filter: drop-shadow(0 18px 36px rgba(0,210,106,.45)) drop-shadow(0 8px 20px rgba(210,161,92,.5));
  animation: float-c 6s ease-in-out infinite;
}
.rbx-coin-side svg { width: 100%; height: 100%; }

/* Cubes — Roblox dark blocks with green-edge glow */
.rbx-cube {
  position: absolute;
  width: 42px; height: 42px;
  background: linear-gradient(135deg,#2a2a30,#0f0f14);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 6px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.6);
}
.rbx-cube::before {
  content: ''; position: absolute; inset: 4px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 4px;
}
.rbx-cube.green {
  border-color: rgba(0,210,106,.65);
  box-shadow: 0 0 26px rgba(0,210,106,.45), inset 0 0 18px rgba(0,210,106,.35);
}
.rbx-cube-1 { top: 4%;     right: 6%;  transform: rotate(15deg); width: 34px; height: 34px; }
.rbx-cube-2 { bottom: 12%; left: 4%;   transform: rotate(-12deg); width: 50px; height: 50px; }
.rbx-cube-3 { bottom: 0%;  right: 14%; transform: rotate(20deg); width: 56px; height: 56px; }
.rbx-cube-4 { top: 38%;    left: 2%;   transform: rotate(-30deg); width: 36px; height: 36px; }
.rbx-cube-5 { bottom: 38%; right: 0%;  transform: rotate(8deg); width: 30px; height: 30px; }

/* Sparks — small bright streaks */
.rbx-sparks { position: absolute; inset: 0; pointer-events: none; }
.rbx-sparks span {
  position: absolute;
  width: 30px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  filter: blur(.5px) drop-shadow(0 0 4px var(--gold));
}
.rbx-sparks span:nth-child(1) { top: 18%; left: 28%; transform: rotate(25deg); }
.rbx-sparks span:nth-child(2) { top: 32%; left: 12%; transform: rotate(-15deg); width: 22px; }
.rbx-sparks span:nth-child(3) { top: 60%; left: 18%; transform: rotate(40deg); width: 26px; }
.rbx-sparks span:nth-child(4) { top: 12%; right: 24%; transform: rotate(-20deg); }
.rbx-sparks span:nth-child(5) { top: 40%; right: 12%; transform: rotate(35deg); width: 24px; background: linear-gradient(90deg, transparent, #00D26A, transparent); filter: blur(.5px) drop-shadow(0 0 4px #00D26A); }
.rbx-sparks span:nth-child(6) { bottom: 22%; right: 28%; transform: rotate(-30deg); width: 28px; }
.rbx-sparks span:nth-child(7) { bottom: 8%; left: 40%; transform: rotate(15deg); width: 22px; background: linear-gradient(90deg, transparent, #00D26A, transparent); filter: blur(.5px) drop-shadow(0 0 4px #00D26A); }
.rbx-sparks span:nth-child(8) { top: 70%; left: 38%; transform: rotate(-25deg); }

/* ---------- Phone mockup (Roblox variant) ---------- */
.rbx-phone     { width: 270px; height: 540px; z-index: 3; position: relative; }
.rbx-phone .phone-screen {
  padding: 50px 16px 20px;
  display: flex; flex-direction: column;
  align-items: center; gap: 16px;
  background:
    radial-gradient(120% 60% at 50% 35%, rgba(210,161,92,.22) 0%, transparent 60%),
    radial-gradient(80% 50% at 50% 100%, rgba(0,210,106,.10) 0%, transparent 60%),
    #0A0A0C;
}
.rbx-phone-brand { display: flex; align-items: center; gap: 6px; }
.rbx-phone-coin {
  flex: 1; display: flex; align-items: center; justify-content: center;
  position: relative;
}
.rbx-phone-coin .coin-rings {
  position: absolute; inset: 14%;
  border: 1px solid rgba(210,161,92,.18);
  border-radius: 50%;
  box-shadow: 0 0 0 16px rgba(210,161,92,.06), 0 0 0 32px rgba(210,161,92,.03);
}
.rbx-phone-toggle {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; padding: 0 8px;
  font-size: 11px; color: rgba(255,255,255,.7);
}
.rbx-switch { display: inline-block; width: 30px; height: 18px; border-radius: 999px; background: var(--green); position: relative; box-shadow: 0 0 10px rgba(0,210,106,.6); }
.rbx-switch i { position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.rbx-phone-btn {
  width: 86%; padding: 13px;
  border: 0; border-radius: 999px;
  background: var(--grad-gold); color: #1a1208;
  font-weight: 800; font-size: 14px; cursor: pointer;
  box-shadow: 0 10px 24px rgba(210,161,92,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.rbx-phone-btn svg { width: 18px; height: 18px; }

/* ============================================================
   Section scaffolding
   ============================================================ */
.rbx-section {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 32px;
}
.rbx-section-alt {
  max-width: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.02), transparent);
  padding-left: max(32px, calc((100vw - 1200px) / 2));
  padding-right: max(32px, calc((100vw - 1200px) / 2));
}
.rbx-section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.rbx-section-head .eyebrow {
  display: inline-block;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(210,161,92,.10);
  border: 1px solid rgba(210,161,92,.30);
  color: var(--gold-light);
  font-size: 12px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  margin-bottom: 18px;
}
.rbx-section-head h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 800; letter-spacing: -1px;
  margin: 0 0 14px;
}
.rbx-section-head p { color: var(--text-2); font-size: 16px; margin: 0; }

/* ============================================================
   How it works
   ============================================================ */
.rbx-video-frame {
  max-width: 880px; margin: 0 auto 60px;
  border-radius: 22px;
  padding: 4px;
  background: linear-gradient(135deg, rgba(210,161,92,.45), rgba(0,210,106,.35), rgba(210,161,92,.45));
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}
/* Vertical YouTube Short: narrower + 9:16 */
.rbx-video-frame.rbx-video-short {
  max-width: 360px;
}
.rbx-video-frame.rbx-video-short .rbx-video-inner {
  aspect-ratio: 9 / 16;
}
.rbx-video-inner {
  position: relative;
  border-radius: 18px; overflow: hidden;
  background: #0a0a0c;
  aspect-ratio: 16 / 9;
}
.rbx-video-inner video,
.rbx-video-inner iframe { width: 100%; height: 100%; display: block; border: 0; }
.rbx-video-inner video { object-fit: contain; background: #0a0a0c; }
.rbx-video-link {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--gold-light);
  text-decoration: none;
  letter-spacing: .3px;
}
.rbx-video-link:hover { color: #fff; }
.rbx-video-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(210,161,92,.18), transparent 70%),
    #0a0a0c;
  color: var(--text-2);
}
.rbx-video-fallback p { margin: 0; font-size: 14px; }
.rbx-video-fallback code {
  background: rgba(255,255,255,.06); padding: 2px 8px; border-radius: 6px;
  font-size: 13px; color: var(--gold-light);
}
.play-pulse {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--grad-gold);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 0 rgba(210,161,92,.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(210,161,92,.55); }
  70%  { box-shadow: 0 0 0 26px rgba(210,161,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(210,161,92,0); }
}
/* Hide fallback when video can play */
.rbx-video-inner video:not([poster=""]) ~ .rbx-video-fallback { display: none; }

.rbx-steps-v2 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1100px; margin: 0 auto;
}
.rbx-step-v2 {
  position: relative;
  scroll-margin-top: 100px;
  background: linear-gradient(180deg, var(--card), #14141a);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 30px 26px 26px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.rbx-step-v2:hover {
  transform: translateY(-4px);
  border-color: rgba(210,161,92,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.step-num {
  position: absolute; top: 18px; right: 24px;
  font-size: 36px; font-weight: 900;
  background: linear-gradient(180deg, rgba(210,161,92,.5), rgba(210,161,92,.05));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -2px;
}
.step-icon-wrap { width: 64px; height: 64px; }
.rbx-step-v2 h3 { margin: 0; font-size: 18px; font-weight: 700; }
.rbx-step-v2 h3 em { font-style: normal; color: var(--gold-light); font-family: monospace; background: rgba(210,161,92,.10); padding: 1px 6px; border-radius: 4px; }
.rbx-step-v2 p  { margin: 0; color: var(--text-2); font-size: 14.5px; }
.rbx-step-v2 p.rank-note {
  color: #ff5b5b;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .2px;
}

.app-icon-card {
  margin-top: auto;
  display: flex; gap: 12px; align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px;
}
.app-icon { flex-shrink: 0; }
.app-icon-card strong { display: block; font-size: 13px; color: var(--text); }
.app-icon-card span   { display: block; font-size: 11px; color: var(--text-3); }
.app-icon-card em     { display: block; font-style: normal; font-size: 11px; color: var(--gold-light); margin-top: 4px; }

.app-store-shot {
  margin-top: auto;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  background: #000;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.app-store-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.phone-mini {
  margin-top: auto;
  background: rgba(0,0,0,.4);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 6px;
}
.phone-mini-tabs {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 4px;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 4px;
}
.phone-mini-tabs span {
  text-align: center; padding: 8px 4px;
  font-size: 11.5px; font-weight: 600;
  color: var(--text-3); border-radius: 6px;
}
.phone-mini-tabs .active {
  background: var(--grad-gold); color: #1a1208;
  box-shadow: 0 4px 12px rgba(210,161,92,.4);
}

.search-mock {
  margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(0,210,106,.35);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 13.5px;
}
.search-icon  { color: var(--text-3); }
.search-text  { flex: 1; color: var(--gold-light); font-weight: 600; }
.search-enter {
  background: var(--green); color: #001b0e;
  width: 22px; height: 22px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
}

/* ============================================================
   Reward tiers v2
   ============================================================ */
.rbx-tiers-v2 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  align-items: stretch;
  max-width: 1100px; margin: 0 auto;
}
.rbx-tier-v2 {
  position: relative;
  background: linear-gradient(180deg, #1a1410, #0c0c0e);
  border: 1px solid rgba(210,161,92,.4);
  border-radius: 22px;
  padding: 32px 24px 26px;
  text-align: center;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
  box-shadow: 0 0 30px rgba(210,161,92,.18), inset 0 0 0 1px rgba(255,255,255,.04);
  transition: transform .3s, box-shadow .3s;
}
.rbx-tier-v2:hover { transform: translateY(-5px); }
.rbx-tier-v2.featured {
  border-color: rgba(210,161,92,.7);
  background: linear-gradient(180deg, #221810, #0c0c0e);
  box-shadow: 0 0 50px rgba(210,161,92,.35), inset 0 0 0 1px rgba(255,255,255,.07);
  transform: translateY(-8px);
}
.rbx-tier-v2.featured:hover { transform: translateY(-12px); }
.rbx-tier-v2.mega {
  border-color: rgba(210,161,92,.85);
  background: linear-gradient(180deg, #2a1d10, #0c0c0e);
  box-shadow: 0 0 60px rgba(210,161,92,.5), inset 0 0 0 1px rgba(255,255,255,.10);
}

.tier-glow {
  position: absolute; inset: -12%;
  background: radial-gradient(circle at 50% 35%, rgba(210,161,92,.30) 0%, transparent 60%);
  pointer-events: none; filter: blur(24px); z-index: -1;
}
.tier-glow.strong { background: radial-gradient(circle at 50% 35%, rgba(210,161,92,.55) 0%, transparent 65%); }

.tier-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 14px; border-radius: 999px;
  background: rgba(0,210,106,.18); border: 1px solid rgba(0,210,106,.5);
  color: #00D26A;
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.tier-badge.gold {
  background: var(--grad-gold); border-color: rgba(210,161,92,.6); color: #1a1208;
  box-shadow: 0 6px 18px rgba(210,161,92,.5);
}

.tier-coin {
  position: relative;
  width: 130px; height: 130px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.tier-coin > svg:first-child {
  width: 110px; height: 110px;
  filter: drop-shadow(0 0 24px rgba(210,161,92,.55));
  animation: coin-spin 6s linear infinite;
}
@keyframes coin-spin { 0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); } }
.tier-coin .orbit {
  position: absolute;
  width: 36px; height: 36px;
  filter: drop-shadow(0 4px 10px rgba(210,161,92,.5));
  animation: orbit 6s linear infinite;
}
.tier-coin .orbit.two   { width: 28px; height: 28px; animation-duration: 8s; animation-direction: reverse; }
.tier-coin .orbit.three { width: 22px; height: 22px; animation-duration: 5s; }
@keyframes orbit {
  from { transform: rotate(0deg) translateX(70px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(70px) rotate(-360deg); }
}

.tier-amount { font-size: 38px; font-weight: 900; letter-spacing: -1px; line-height: 1; color: #fff; }
.rbx-tier-v2.featured .tier-amount,
.rbx-tier-v2.mega .tier-amount { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier-label { font-size: 13px; color: var(--text-2); letter-spacing: 1px; text-transform: uppercase; }

.tier-feat {
  list-style: none; padding: 0; margin: 14px 0 18px; text-align: left; max-width: 220px;
  font-size: 13.5px; color: var(--text-2);
}
.tier-feat li { padding: 5px 0; }
.tier-feat li::before { content: "✓ "; color: var(--green); font-weight: 800; }

.rbx-tier-v2 .btn { width: 100%; justify-content: center; }

/* ============================================================
   Why benefits v2
   ============================================================ */
.rbx-benefits-v2 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  max-width: 1100px; margin: 0 auto;
}
.rbx-benefit-v2 {
  background: linear-gradient(180deg, var(--card), #14141a);
  border: 1px solid var(--stroke);
  border-radius: 18px;
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.rbx-benefit-v2:hover {
  transform: translateY(-3px);
  border-color: rgba(210,161,92,.4);
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.b-ico {
  width: 52px; height: 52px; border-radius: 14px;
  background: rgba(210,161,92,.10);
  border: 1px solid rgba(210,161,92,.35);
  display: flex; align-items: center; justify-content: center;
}
.rbx-benefit-v2 h4 { margin: 0; font-size: 16px; font-weight: 700; }
.rbx-benefit-v2 p  { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }

/* ============================================================
   Trending games
   ============================================================ */
.rbx-games-v2 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 1100px; margin: 0 auto;
}
.rbx-game-v2 {
  position: relative;
  aspect-ratio: 1 / 1.1;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--stroke);
  cursor: pointer;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  background: #14141a;
}
.rbx-game-v2:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(210,161,92,.5);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}
.game-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 14px;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%);
  z-index: 2;
}
.game-pill {
  align-self: flex-start;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,.18); backdrop-filter: blur(10px);
  font-size: 10.5px; font-weight: 700; color: #fff;
  margin-bottom: auto;
}
.rbx-game-v2 h4 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #fff; }
.players { font-size: 12px; color: rgba(255,255,255,.85); font-weight: 600; }

/* Each game gets a stylised gradient background that evokes the actual game */
.g-adoptme    { background: linear-gradient(135deg,#FF9ED2,#FFCBA4 60%,#A6E2FF); }
.g-brookhaven { background: linear-gradient(135deg,#7FBFFF,#9FE0A0 70%,#FFE082); }
.g-bloxfruits { background: linear-gradient(135deg,#FF6B6B,#FFA94D 50%,#1B4E8C); }
.g-petsim     { background: linear-gradient(135deg,#A78BFA,#22D3EE 50%,#34D399); }
.g-mm2        { background: linear-gradient(135deg,#0F172A,#7C3AED 60%,#EF4444); }
.g-jailbreak  { background: linear-gradient(135deg,#F97316,#1E293B 70%,#0EA5E9); }
.g-doors      { background: linear-gradient(135deg,#1F2937,#7E22CE 70%,#0F172A); }
.g-toh        { background: linear-gradient(135deg,#FCD34D,#10B981 50%,#3B82F6); }

.rbx-disclaimer { text-align: center; color: var(--text-3); font-size: 12.5px; max-width: 720px; margin: 36px auto 0; }

/* ============================================================
   Testimonials v2
   ============================================================ */
.rbx-testimonials-v2 {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 1100px; margin: 0 auto;
}
.rbx-quote-v2 {
  background: linear-gradient(180deg, var(--card), #14141a);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 22px 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.avatar {
  width: 48px; height: 48px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.45);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar svg { width: 44px; height: 44px; display: block; }
.avatar.a1, .avatar.a2, .avatar.a3, .avatar.a4 { background: transparent; }
.stars     { color: var(--gold); font-size: 13px; letter-spacing: 1.5px; }
.rbx-quote-v2 p     { margin: 0; font-size: 14px; color: var(--text); line-height: 1.55; }
.rbx-quote-v2 .qname { font-size: 12px; color: var(--text-3); }

/* ============================================================
   FAQ + final
   ============================================================ */
.rbx-faq         { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.rbx-faq details {
  background: linear-gradient(180deg, var(--card), #14141a);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 18px 22px;
  transition: border-color .2s;
}
.rbx-faq details[open] { border-color: rgba(210,161,92,.4); }
.rbx-faq summary { cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.rbx-faq summary::-webkit-details-marker { display: none; }
.rbx-faq summary::after { content: '+'; color: var(--gold); font-size: 22px; line-height: 1; }
.rbx-faq details[open] summary::after { content: '−'; }
.rbx-faq p       { margin: 14px 0 0; color: var(--text-2); font-size: 14.5px; }
.rbx-faq em      { color: var(--gold-light); font-style: normal; font-family: monospace; background: rgba(210,161,92,.10); padding: 1px 6px; border-radius: 4px; }

.rbx-final-section { max-width: 1100px; padding-top: 40px; padding-bottom: 110px; }
.rbx-final-card {
  position: relative;
  text-align: center;
  background: linear-gradient(180deg, rgba(210,161,92,.14), rgba(20,20,24,.85));
  border: 1px solid rgba(210,161,92,.5);
  border-radius: 24px;
  padding: 60px 32px;
  box-shadow: 0 0 60px rgba(210,161,92,.3);
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  overflow: hidden;
}
.rbx-final-card::before {
  content: ''; position: absolute; inset: -50%;
  background: radial-gradient(circle at 50% 50%, rgba(210,161,92,.18), transparent 60%);
  pointer-events: none;
}
.rbx-final-card h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); font-weight: 800; letter-spacing: -1px; }
.rbx-final-card p  { margin: 0; color: var(--text-2); font-size: 17px; }

/* ============================================================
   Responsive — tuned for every iPhone & iPad size
   Breakpoints:
     1280  : iPad Pro 12.9" landscape
     1100  : iPad Pro 11" landscape, iPad Air landscape
      960  : iPad portrait (768–834), small laptops
      820  : iPad mini portrait
      600  : tablet → mobile transition
      430  : iPhone Pro Max
      390  : iPhone 14/15 standard, 13/12, X/XS/11 Pro
      375  : iPhone SE 2/3, iPhone 13 mini
      360  : tightest Android / very small phones
   ============================================================ */

/* Avoid horizontal scroll anywhere */
html, body { overflow-x: hidden; }
body { -webkit-text-size-adjust: 100%; }

/* Large desktop polish */
@media (max-width: 1280px) {
  .rbx-hero       { padding: 60px 28px 90px; }
  .rbx-section    { padding: 80px 28px; }
}

/* Smaller laptops & iPad Pro landscape */
@media (max-width: 1100px) {
  .rbx-tiers-v2   { gap: 18px; }
  .rbx-tier-v2.featured { transform: translateY(-6px); }
}

/* iPad portrait (≤ 960) */
@media (max-width: 960px) {
  .rbx-nav         { padding: 12px 18px; margin: 12px 16px 0; gap: 10px; }
  .rbx-nav-pill    { padding: 10px 14px 10px 12px; gap: 18px; }
  .rbx-nav-links   { display: none; }
  .rbx-nav-dl      { width: 50px; height: 50px; border-radius: 14px; }

  .rbx-hero        { padding: 50px 24px 70px; min-height: 0; }
  .rbx-hero-grid   { grid-template-columns: 1fr; gap: 20px; }
  .rbx-hero-art    { order: -1; min-height: 460px; }
  .rbx-hero-copy   { text-align: center; }
  .hero-sub        { margin-left: auto; margin-right: auto; }
  .rbx-hero-ctas   { justify-content: center; }
  .rbx-hero-stats  { margin: 0 auto; justify-content: center; }

  .rbx-section     { padding: 70px 24px; }
  .rbx-steps-v2,
  .rbx-tiers-v2    { grid-template-columns: 1fr; gap: 18px; }
  .rbx-tier-v2.featured       { transform: none; }
  .rbx-tier-v2.featured:hover { transform: translateY(-4px); }
  .rbx-testimonials-v2 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}

/* iPad mini portrait & small tablets */
@media (max-width: 820px) {
  .rbx-section-head h2 { font-size: clamp(26px, 5vw, 36px); }
  .rbx-video-frame.rbx-video-short { max-width: 320px; }
  .rbx-final-card { padding: 50px 26px; }
}

/* Phone landscape & large phones (≤ 600) */
@media (max-width: 600px) {
  .rbx-hero        { padding: 32px 18px 40px; }
  .rbx-section     { padding: 56px 18px; }
  .rbx-section-alt { padding-left: 18px; padding-right: 18px; }
  .rbx-section-head { margin-bottom: 36px; }

  /* Hide heavy decorative hero composition on phones */
  .rbx-hero-art,
  .rbx-hero-rays,
  .rbx-hero-particles { display: none; }

  .hero-title      { font-size: clamp(32px, 9vw, 42px); margin-bottom: 16px; }
  .hero-sub        { font-size: 16px; margin-bottom: 28px; }
  .btn-pill        { padding: 14px 30px; font-size: 15px; }

  .rbx-hero-stats  { gap: 14px; flex-wrap: wrap; }
  .rbx-hero-stats div { flex: 1 1 28%; align-items: center; }
  .rbx-hero-stats strong { font-size: 18px; }

  .rbx-testimonials-v2 { grid-template-columns: 1fr; }
  .rbx-quote-v2 p  { font-size: 14.5px; }

  .rbx-video-frame { padding: 3px; border-radius: 18px; }
  .rbx-video-frame.rbx-video-short { max-width: 280px; }

  .rbx-step-v2 { padding: 26px 22px 22px; }
  .step-num    { font-size: 30px; top: 14px; right: 18px; }

  .rbx-tier-v2 { padding: 28px 22px; }

  .rbx-final-card { padding: 40px 22px; border-radius: 20px; }
  .rbx-final-card p { font-size: 15px; }
}

/* iPhone Pro Max (≤ 430) — fine tuning */
@media (max-width: 430px) {
  .rbx-nav         { padding: 10px 14px; margin: 10px 12px 0; gap: 8px; }
  .rbx-nav-pill    { padding: 8px 12px 8px 10px; gap: 14px; border-radius: 14px; }
  .brand-text      { font-size: 16px; }
  .brand-logo-mark { width: 26px; height: 26px; }
  .rbx-nav-dl      { width: 44px; height: 44px; border-radius: 12px; }
  .rbx-nav-dl svg  { width: 18px; height: 18px; }
}

/* iPhone 14/15 standard, 13, 12, 11 Pro (≤ 390) */
@media (max-width: 390px) {
  .rbx-hero        { padding: 24px 16px 32px; }
  .rbx-section     { padding: 48px 16px; }
  .hero-title      { font-size: clamp(28px, 9.5vw, 36px); letter-spacing: -1px; }
  .rbx-hero-stats strong { font-size: 16px; }
  .rbx-hero-stats span   { font-size: 10px; letter-spacing: 1px; }
  .btn-pill        { padding: 13px 26px; font-size: 14.5px; }

  .rbx-section-head h2 { font-size: 24px; }
  .rbx-section-head p  { font-size: 14.5px; }

  .rbx-step-v2     { padding: 22px 18px 20px; border-radius: 16px; }
  .rbx-step-v2 h3  { font-size: 16.5px; }
  .step-num        { font-size: 26px; top: 12px; right: 16px; }
  .step-icon-wrap  { width: 56px; height: 56px; }

  .rbx-tier-v2     { padding: 24px 20px; border-radius: 18px; }
  .tier-amount     { font-size: 32px; }

  .rbx-video-frame.rbx-video-short { max-width: 260px; }
}

/* iPhone SE / 13 mini (≤ 375) */
@media (max-width: 375px) {
  .rbx-nav-pill { gap: 10px; }
  .brand-text   { font-size: 15px; }
  .rbx-hero-stats div { flex: 1 1 30%; }
  .rbx-video-frame.rbx-video-short { max-width: 240px; }
}

/* Tightest devices */
@media (max-width: 360px) {
  .rbx-hero  { padding: 20px 14px 28px; }
  .rbx-section { padding: 42px 14px; }
  .hero-title { font-size: 26px; }
}

/* Landscape phones — give the hero a bit of breathing room */
@media (max-height: 480px) and (orientation: landscape) {
  .rbx-hero { min-height: 0; padding-top: 24px; padding-bottom: 24px; }
}

/* Reduce-motion users: kill floating animations */
@media (prefers-reduced-motion: reduce) {
  .rbx-hero-particles span,
  .rbx-coin.float,
  .play-pulse { animation: none !important; }
}