:root{
  --brand1:#03a3fe;  /* blue */
  --brand2:#ff7f32;  /* orange */
  --bg:#0b1118;
  --card:#0f1722cc;
  --text:#e9f0fb;
  --muted:#9fb3c8;
  --ring:rgba(3,163,254,.35);
  --radius:20px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% 10%, #123 0%, transparent 70%),
    radial-gradient(1000px 600px at 85% 90%, #101b2a 0%, transparent 70%),
    linear-gradient(180deg,#0a0f16 0%, #0e141d 100%);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  display:grid; place-items:center; padding:24px;
}
.shell{ width:min(880px, 96vw); }
.header{ display:flex; align-items:center; gap:12px; margin-bottom:12px; opacity:.95; }

/* Material icon utility */
.msr{
  font-family: 'Material Symbols Rounded';
  font-weight: 600; font-style: normal; font-size: 22px; line-height: 1;
  display:inline-flex; align-items:center; justify-content:center;
  font-variation-settings:'FILL' 1,'wght' 600,'GRAD' 0,'opsz' 24;
}

.logo{
  width:40px; height:40px; border-radius:12px;
  background:linear-gradient(135deg,var(--brand1),var(--brand2));
  box-shadow:0 6px 24px rgba(3,163,254,.25), inset 0 0 12px rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.title{font-weight:800; letter-spacing:.2px; font-size:1.1rem}

/* ===== HERO VIDEO CARD ===== */
.hero{
  position:relative; overflow:hidden; border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:#0f1722;
  box-shadow:0 16px 48px rgba(0,0,0,.35), 0 0 0 1px rgba(3,163,254,.08) inset;
  aspect-ratio: 16 / 9; margin-bottom:16px;
}
.hero video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: saturate(1.05) contrast(1.04);
}
/* shading and brand duotone overlays */
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(5,8,14,0) 40%, rgba(5,8,14,.55) 100%);
  pointer-events:none; z-index:1;
}
.hero::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(65% 65% at 20% 20%, color-mix(in srgb, var(--brand1) 65%, transparent), transparent 60%),
    radial-gradient(65% 65% at 80% 80%, color-mix(in srgb, var(--brand2) 60%, transparent), transparent 60%);
  mix-blend-mode: soft-light; opacity:.9;
}
.hero-top{
  position:absolute; inset:14px auto auto 14px; z-index:3;
  display:flex; align-items:center; gap:10px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-weight:800; letter-spacing:.25px;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  color:#fff; box-shadow:0 8px 24px rgba(3,163,254,.25);
  font-size:.9rem;
}

/* ===== HERO COPY (overlay text) ===== */
.hero-copy{
  position:absolute; z-index:3;
  left:16px; right:16px; bottom:10%;
  max-width:min(680px, 92%);
}
.headline{
  margin:0 0 .25em;
  font-weight:900;
  line-height:1.05;
  font-size:clamp(1.6rem, 3.2vw + 1rem, 3rem);
  letter-spacing:.2px;
  text-shadow:0 6px 22px rgba(0,0,0,.45);
}
.headline .grad{
  background: linear-gradient(90deg, var(--brand1), var(--brand2), var(--brand1));
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheen 8s ease-in-out infinite;
}
@keyframes sheen{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; letter-spacing:.3px;
  font-size:clamp(.9rem, .5vw + .8rem, 1.05rem);
  color:#fff;
  padding:8px 12px; border-radius:999px;
  background:linear-gradient(90deg, rgba(3,163,254,.55), rgba(255,127,50,.55));
  box-shadow:0 8px 24px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  backdrop-filter: blur(4px);
  margin-bottom:.6em;
}
.subline{
  margin:.25em 0 0;
  color:var(--text);
  opacity:.95;
  font-size:clamp(.95rem, .5vw + .8rem, 1.15rem);
  text-shadow:0 4px 16px rgba(0,0,0,.35);
}
[dir="rtl"] .hero-copy{ left:auto; right:16px; text-align:right; }

.hero-controls{
  position:absolute; inset:auto 12px 12px auto; z-index:3; display:flex; gap:8px;
}
.ctrl{
  appearance:none; border:0; border-radius:12px; padding:10px;
  background:rgba(12,18,28,.55); color:#fff; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset;
  display:inline-flex; align-items:center; justify-content:center;
  transition:filter .2s ease, transform .06s ease;
}
.ctrl:hover{ filter:brightness(1.06); }
.ctrl:active{ transform:translateY(1px); }
.ctrl:focus-visible{ outline:none; box-shadow:0 0 0 3px var(--ring), 0 4px 16px rgba(0,0,0,.35); }

.progress-wrap{
  height:6px; background:#152233; border-radius:999px; overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
  opacity:1; transition:opacity .25s ease;
}
.progress{
  height:100%; background:linear-gradient(90deg,var(--brand1),var(--brand2));
  width:33%; transition: width .45s cubic-bezier(.22,1,.36,1);
}
.card{
  margin-top:14px; background:var(--card); border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 12px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(3,163,254,.08) inset;
  overflow:hidden; backdrop-filter: blur(6px);
}
.stage{ display:none; padding:28px 22px 24px; animation:.45s fadeUp both; }
.stage.active{ display:block; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px) scale(.995);} to{opacity:1; transform:translateY(0) scale(1);} }
h2{ margin:0 0 10px; font-size:1.35rem; line-height:1.2; display:flex; align-items:center; gap:8px;}
.sub{ margin:0 0 18px; color:var(--muted); font-size:.95rem; }

.cta{
  --pad:14px; appearance:none; border:0; cursor:pointer; width:100%;
  padding:var(--pad) 18px; border-radius:14px;
  font-weight:800; letter-spacing:.2px; font-size:1rem; color:white;
  background:linear-gradient(90deg,var(--brand1),var(--brand2));
  box-shadow:0 10px 26px rgba(3,163,254,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease;
  outline:none; display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.cta:hover{ filter:saturate(1.06) brightness(1.02); }
.cta:active{ transform:translateY(1px); }
.cta:focus-visible{ box-shadow:0 0 0 3px var(--ring), 0 10px 26px rgba(3,163,254,.25); }

.footer{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px 16px; border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
.step-dots{ display:flex; gap:8px; align-items:center; }
.dot{ width:8px; height:8px; border-radius:999px; background:#2a3a52; opacity:.8; }
.dot.active{ width:22px; border-radius:999px; background:linear-gradient(90deg,var(--brand1),var(--brand2)); }
.safe{ color:var(--muted); font-size:.85rem; display:flex; align-items:center; gap:8px; }
.lang{ display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.85rem; }
.lang select{
  background:#0f1a28; color:var(--text); border:1px solid rgba(255,255,255,.08);
  border-radius:10px; padding:6px 8px; outline:none;
}
[dir="rtl"] .footer{ flex-direction:row-reverse; }
[dir="rtl"] .header{ flex-direction:row-reverse; }
@media (max-width:520px){
  .shell{ width:min(96vw, 96vw); }
  .title{font-size:1rem}
  h2{font-size:1.2rem}
  .hero{ aspect-ratio: 16 / 10; }
  .hero-copy{ bottom:8%; }
}

/* ===== 18+ Entry Gate ===== */
.gate{
  position:fixed; inset:0; z-index:50; display:grid; place-items:center;
  background:
    radial-gradient(1200px 800px at 20% 10%, rgba(255,127,50,.08), transparent 70%),
    radial-gradient(900px 600px at 80% 90%, rgba(3,163,254,.12), transparent 70%),
    rgba(7,10,15,.85);
  backdrop-filter: blur(4px);
}
.gate-card{
  width:min(640px, 94vw);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12); border-radius:22px;
  padding:26px 22px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(3,163,254,.12) inset;
  text-align:center; animation:.35s fadeUp both;
}
.badge-gate{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:999px;
  font-weight:800; letter-spacing:.3px; background:linear-gradient(90deg,var(--brand1),var(--brand2));
  color:#fff; box-shadow:0 8px 24px rgba(3,163,254,.25); margin-bottom:14px;
}
.gate h1{ margin:0 0 8px; font-size:1.6rem; font-weight:900; letter-spacing:.2px; }
.gate p{ margin:0 0 18px; color:var(--muted); }
.gate-actions{ display:grid; grid-template-columns:1fr; gap:10px; margin-top:6px; }
.btn{
  appearance:none; border:0; border-radius:14px; padding:14px 16px; font-weight:800; letter-spacing:.2px; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
}
.btn.primary{
  background:linear-gradient(90deg,var(--brand1),var(--brand2)); color:#fff;
  box-shadow:0 10px 26px rgba(3,163,254,.25), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.btn.ghost{
  background:#0f1722; color:var(--text); border:1px solid rgba(255,255,255,.12);
}
.gate .fineprint{ font-size:.82rem; color:#93a6bb; margin-top:8px; }

/* ===== Requested visibility tweaks ===== */
.hero-controls{ display:none !important; } /* hide video icons */
.lang{ display:none !important; }          /* hide language selector */

.hide{ display:none !important; }