/* ============================================================
   the-world777.com — "Midnight Casino Luxe" design system
   Deep emerald night · molten gold · glass surfaces · motion
   ============================================================ */
:root{
  --bg:#071209;            /* near-black emerald night */
  --bg2:#0b1f10;           /* raised night */
  --glass:rgba(255,255,255,.045);
  --glass-brd:rgba(255,255,255,.09);
  --ink:#eaf6ec;           /* primary text */
  --ink-dim:#b9cfbe;       /* body text */
  --ink-faint:#86a08c;
  --gold:#f2c14e;
  --gold-hot:#ffd977;
  --em:#17c964;            /* emerald action */
  --em-deep:#0f8a46;
  --wa:#25d366;
  --danger:#ffb86b;
  --radius:18px;
  --font-d:"Unbounded",sans-serif;
  --font-b:"Manrope",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-b);color:var(--ink-dim);
  background:var(--bg);line-height:1.7;font-size:16.5px;
  overflow-x:hidden;
}
::selection{background:var(--gold);color:#123317}
a{color:var(--em);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-hot)}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}

/* ---------- ambient background texture ---------- */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 500px at 85% -10%,rgba(23,201,100,.13),transparent 60%),
    radial-gradient(700px 450px at -10% 30%,rgba(242,193,78,.07),transparent 60%),
    radial-gradient(800px 600px at 50% 110%,rgba(15,138,70,.12),transparent 60%);
}
body::after{ /* fine grain */
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:26px 26px;
  mask-image:radial-gradient(ellipse at center,black 40%,transparent 100%);
}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(7,18,9,.75);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--glass-brd);padding:13px 0;
}
header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.logo{
  font-family:var(--font-d);font-weight:800;font-size:20px;letter-spacing:1px;
  color:var(--ink);
}
.logo span{
  color:var(--gold);
  text-shadow:0 0 18px rgba(242,193,78,.55);
}
nav{display:flex;flex-wrap:wrap;gap:2px 16px;justify-content:flex-end}
nav a{
  color:var(--ink-faint);font-size:13.5px;font-weight:600;
  padding:4px 2px;position:relative;
}
nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--gold),transparent);transition:width .28s;
}
nav a:hover{color:var(--ink)}
nav a:hover::after{width:100%}

/* ---------- hero ---------- */
.hero{
  position:relative;text-align:center;overflow:hidden;
  padding:74px 0 84px;
  background:
    radial-gradient(1000px 420px at 50% -160px,rgba(23,201,100,.22),transparent 70%),
    linear-gradient(180deg,#0a1c0e 0%,var(--bg) 100%);
  border-bottom:1px solid var(--glass-brd);
}
.hero::before,.hero::after{ /* floating glow orbs */
  content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  animation:orb 14s ease-in-out infinite alternate;pointer-events:none;
}
.hero::before{width:340px;height:340px;left:-120px;top:-80px;background:rgba(23,201,100,.28)}
.hero::after{width:300px;height:300px;right:-100px;bottom:-120px;background:rgba(242,193,78,.16);animation-delay:-7s}
@keyframes orb{from{transform:translateY(-18px) scale(1)}to{transform:translateY(22px) scale(1.12)}}

h1{
  font-family:var(--font-d);font-weight:800;color:var(--ink);
  font-size:clamp(26px,4.2vw,40px);line-height:1.22;letter-spacing:.2px;
  margin-bottom:18px;position:relative;z-index:1;
  animation:rise .8s cubic-bezier(.2,.7,.2,1) both;
}
.hero p{
  font-size:17.5px;color:var(--ink-dim);max-width:660px;margin:0 auto 28px;
  position:relative;z-index:1;animation:rise .8s .12s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- WhatsApp CTA ---------- */
.wabtn{
  display:inline-flex;align-items:center;gap:11px;position:relative;z-index:1;
  background:linear-gradient(135deg,#2ee579,var(--em) 55%,var(--em-deep));
  color:#06220f;font-weight:800;font-size:17px;letter-spacing:.2px;
  padding:16px 32px;border-radius:60px;overflow:hidden;
  box-shadow:0 10px 34px rgba(23,201,100,.35),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .22s,box-shadow .22s;
  animation:rise .8s .22s cubic-bezier(.2,.7,.2,1) both;
}
.wabtn svg{width:23px;height:23px;fill:#06220f}
.wabtn:hover{transform:translateY(-3px) scale(1.02);color:#06220f;
  box-shadow:0 16px 44px rgba(23,201,100,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.wabtn::after{ /* shine sweep */
  content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);animation:shine 3.6s ease-in-out infinite;
}
@keyframes shine{0%,55%{left:-80%}75%,100%{left:130%}}

.badges{margin-top:26px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;
  animation:rise .8s .32s cubic-bezier(.2,.7,.2,1) both}
.badge{
  background:var(--glass);border:1px solid var(--glass-brd);
  color:var(--ink-dim);padding:8px 16px;border-radius:40px;font-size:13.5px;font-weight:600;
  backdrop-filter:blur(6px);transition:border-color .25s,transform .25s;
}
.badge:hover{border-color:rgba(242,193,78,.5);transform:translateY(-2px)}

/* ---------- sections ---------- */
section{padding:52px 0;border-bottom:1px solid rgba(255,255,255,.05)}
h2{
  font-family:var(--font-d);font-weight:600;color:var(--ink);
  font-size:clamp(20px,2.6vw,26px);line-height:1.3;margin-bottom:16px;
  position:relative;padding-left:16px;
}
h2::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--gold),var(--em));
  box-shadow:0 0 14px rgba(242,193,78,.45);
}
h3{font-family:var(--font-d);font-weight:600;font-size:17px;color:var(--ink);margin:20px 0 8px}
p{margin-bottom:14px}
section b,section strong{color:var(--ink)}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px;margin-top:22px}
.card{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:var(--radius);
  padding:22px 20px;backdrop-filter:blur(8px);position:relative;overflow:hidden;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold),transparent 70%);
  opacity:0;transition:opacity .3s;
}
.card:hover{transform:translateY(-6px);border-color:rgba(242,193,78,.35);
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.card:hover::before{opacity:1}
.card b{color:var(--gold);font-size:15.5px;display:block;margin-bottom:6px}
.card p{margin:0;font-size:14.5px;color:var(--ink-dim)}

/* ---------- CTA band ---------- */
.cta-band{
  text-align:center;padding:46px 0;position:relative;overflow:hidden;
  background:
    radial-gradient(600px 200px at 50% 0%,rgba(242,193,78,.10),transparent 70%),
    linear-gradient(180deg,var(--bg2),#0a1a0d);
  border-top:1px solid var(--glass-brd);border-bottom:1px solid var(--glass-brd);
}
.cta-band h2{padding-left:0}
.cta-band h2::before{display:none}
.cta-band p{color:var(--ink-dim)}

/* ---------- lists ---------- */
ul.check{list-style:none;margin:16px 0}
ul.check li{padding:7px 0 7px 32px;position:relative}
ul.check li::before{
  content:"✓";position:absolute;left:0;top:6px;
  width:21px;height:21px;border-radius:50%;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  color:#06220f;background:linear-gradient(135deg,var(--gold-hot),var(--gold));
  box-shadow:0 3px 10px rgba(242,193,78,.35);
}
.related{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;justify-content:center}
.related a{
  background:var(--glass);border:1px solid var(--glass-brd);color:var(--ink-dim);
  padding:9px 16px;border-radius:40px;font-size:13.5px;font-weight:600;
  transition:border-color .25s,color .25s,transform .25s;
}
.related a:hover{border-color:var(--gold);color:var(--gold-hot);transform:translateY(-2px)}

/* ---------- steps ---------- */
.steps{counter-reset:s;list-style:none;margin-top:18px}
.steps li{
  counter-increment:s;position:relative;padding:14px 16px 14px 62px;margin-bottom:12px;
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:14px;
  transition:border-color .25s;
}
.steps li:hover{border-color:rgba(23,201,100,.4)}
.steps li::before{
  content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  font-family:var(--font-d);font-weight:800;font-size:14px;
  display:flex;align-items:center;justify-content:center;color:#06220f;
  background:linear-gradient(135deg,#2ee579,var(--em));
  box-shadow:0 4px 14px rgba(23,201,100,.4);
}
.steps b{color:var(--ink)}

/* ---------- FAQ ---------- */
.faq details{
  background:var(--glass);border:1px solid var(--glass-brd);border-radius:14px;
  padding:0 18px;margin-bottom:10px;transition:border-color .25s;
}
.faq details:hover{border-color:rgba(242,193,78,.3)}
.faq details[open]{border-color:rgba(23,201,100,.4);background:rgba(23,201,100,.05)}
.faq summary{
  cursor:pointer;font-weight:700;color:var(--ink);padding:15px 26px 15px 0;
  font-size:15.5px;list-style:none;position:relative;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--font-d);color:var(--gold);font-size:18px;transition:transform .3s;
}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{padding-bottom:16px;font-size:14.8px}

/* ---------- warn ---------- */
.warn{
  background:rgba(255,184,107,.07);border:1px solid rgba(255,184,107,.3);
  color:var(--danger);padding:15px 18px;border-radius:14px;font-size:14px;margin-top:18px;
}

/* ---------- sticky WhatsApp ---------- */
.sticky{position:fixed;right:18px;bottom:18px;z-index:99}
.sticky a{
  display:flex;align-items:center;gap:9px;position:relative;
  background:linear-gradient(135deg,#2ee579,var(--em-deep));color:#06220f;font-weight:800;
  padding:14px 22px;border-radius:60px;font-size:15px;
  box-shadow:0 10px 30px rgba(23,201,100,.45);
  transition:transform .22s;
}
.sticky a:hover{transform:translateY(-3px) scale(1.04);color:#06220f}
.sticky a::before{ /* radar pulse */
  content:"";position:absolute;inset:-4px;border-radius:60px;z-index:-1;
  border:2px solid rgba(23,201,100,.6);animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.sticky svg{width:21px;height:21px;fill:#06220f}

/* ---------- footer ---------- */
footer{
  background:#050d07;color:var(--ink-faint);
  padding:34px 0 26px;font-size:13.5px;text-align:center;
  border-top:1px solid var(--glass-brd);
}
footer p{color:var(--ink-faint);margin-bottom:8px}
footer a{color:var(--gold)}
footer a:hover{color:var(--gold-hot)}

/* ---------- inline icon system ---------- */
.ic{
  display:inline-block;width:18px;height:18px;
  vertical-align:-3.5px;margin-right:7px;color:var(--gold);
  filter:drop-shadow(0 0 6px rgba(242,193,78,.35));
  flex:none;
}
.badge .ic{width:15px;height:15px;vertical-align:-2.5px;margin-right:5px}
.card b .ic{width:19px;height:19px;vertical-align:-4px}
.wabtn .ic{color:#06220f;width:20px;height:20px;margin-right:0;filter:none}
.sticky .ic{color:#06220f;filter:none}
.warn .ic{color:var(--danger);filter:drop-shadow(0 0 6px rgba(255,184,107,.3))}
footer .ic{width:14px;height:14px;vertical-align:-2.5px;margin-right:5px}
.faq summary .ic{width:16px;height:16px}

/* ---------- scroll reveal (driven by reveal.js) ---------- */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.grid .rv{transition-delay:calc(var(--i,0)*90ms)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media(max-width:640px){
  body{font-size:15.5px}
  .hero{padding:54px 0 64px}
  section{padding:40px 0}
  .sticky a span{display:none}
  .sticky a{padding:15px}
  nav{gap:2px 11px}
  nav a{font-size:12.5px}
}