:root{
  --bg-1:#eaf4ff; --bg-2:#cfe5ff; --bg-3:#b3d6ff; --ink:#0a1a3a;
  --azure:#5fb4ff; --silver:#d8e3f0; --gold:#d4b06a;
}
*{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html,body{ background:#eaf4ff; color:var(--ink); overflow-x:hidden; }
body{ font-family:'Inter',sans-serif; }
.font-display{ font-family:'Cormorant Garamond',serif; letter-spacing:-0.01em; }

/* ===== Animated luxury background ===== */
.bg-orb{
  position:fixed; pointer-events:none; border-radius:9999px; filter:blur(80px);
  opacity:.55; z-index:0;
}
.bg-orb.a{ width:520px; height:520px; left:-120px; top:-120px;
  background:radial-gradient(circle at 30% 30%, #aed7ff 0%, transparent 70%); animation:orbA 22s ease-in-out infinite; }
.bg-orb.b{ width:620px; height:620px; right:-160px; top:30vh;
  background:radial-gradient(circle at 40% 40%, #7fc1ff 0%, transparent 65%); animation:orbB 26s ease-in-out infinite; }
.bg-orb.c{ width:480px; height:480px; left:30%; bottom:-180px;
  background:radial-gradient(circle at 50% 50%, #e9d6a5 0%, transparent 70%); opacity:.35; animation:orbC 30s ease-in-out infinite; }
@keyframes orbA{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(80px,40px) scale(1.1)} }
@keyframes orbB{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-60px,-50px) scale(1.15)} }
@keyframes orbC{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(40px,-80px) scale(1.08)} }

/* ===== Floating particles ===== */
.particle{ position:absolute; width:6px; height:6px; border-radius:9999px;
  background:radial-gradient(circle at 30% 30%, #ffffff, rgba(255,255,255,0));
  box-shadow:0 0 12px rgba(212,176,106,.65); opacity:.7; pointer-events:none;
}

/* ===== Glassmorphism ===== */
.glass{
  background:linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.25));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 20px 60px -20px rgba(15,52,110,.25), inset 0 1px 0 rgba(255,255,255,.7);
}
.glass-dark{
  background:linear-gradient(135deg, rgba(10,26,58,.85), rgba(10,26,58,.6));
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.5);
}

/* ===== Buttons ===== */
.btn-primary{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  padding:.95rem 1.8rem; border-radius:9999px; font-weight:600; letter-spacing:.02em;
  color:#fff; overflow:hidden; isolation:isolate;
  background:linear-gradient(120deg,#19a85a 0%, #1bc06b 45%, #19a85a 100%);
  box-shadow:0 14px 40px -10px rgba(25,168,90,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .35s ease, box-shadow .35s ease;
}
.btn-primary::before{
  content:""; position:absolute; inset:0; background:linear-gradient(120deg,transparent,rgba(255,255,255,.6),transparent);
  transform:translateX(-110%); transition:transform .9s ease;
}
.btn-primary:hover{ transform:translateY(-3px) scale(1.02); box-shadow:0 20px 50px -10px rgba(25,168,90,.7); }
.btn-primary:hover::before{ transform:translateX(110%); }

.btn-ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.6rem; border-radius:9999px; font-weight:500;
  color:#0a1a3a; background:rgba(255,255,255,.55);
  border:1px solid rgba(10,26,58,.12);
  backdrop-filter:blur(10px); transition:all .35s ease;
}
.btn-ghost:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(15,52,110,.25); }

.btn-gold{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.7rem; border-radius:9999px; font-weight:600;
  color:#0a1a3a; background:linear-gradient(120deg,#f1dca0 0%,#d4b06a 50%,#bf954b 100%);
  border:1px solid rgba(191,149,75,.5);
  box-shadow:0 14px 40px -12px rgba(212,176,106,.6), inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .35s, box-shadow .35s;
}
.btn-gold:hover{ transform:translateY(-3px); box-shadow:0 20px 50px -12px rgba(212,176,106,.85); }

/* ===== Hero ===== */
.hero-grad{
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(170,210,255,.7), transparent 60%),
    radial-gradient(900px 500px at 90% 30%, rgba(212,176,106,.25), transparent 60%),
    linear-gradient(180deg,#eaf4ff 0%, #d9ecff 60%, #c8e2ff 100%);
}
.hero-title{
  background:linear-gradient(120deg,#0a1a3a 0%, #1d4d8c 45%, #0a1a3a 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.gold-text{
  background:linear-gradient(120deg,#f1dca0,#d4b06a 50%,#a9803f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ===== Italian ribbon ===== */
.it-ribbon{
  display:inline-flex; align-items:center; gap:.45rem; padding:.4rem .9rem;
  border-radius:9999px; background:rgba(255,255,255,.55); backdrop-filter:blur(10px);
  border:1px solid rgba(10,26,58,.08); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600;
}
.it-dot{ width:8px; height:8px; border-radius:9999px; }
.dot-g{ background:#19a85a; box-shadow:0 0 12px #19a85a; }
.dot-w{ background:#fff; box-shadow:0 0 12px #fff; }
.dot-r{ background:#e63946; box-shadow:0 0 12px #e63946; }

/* ===== Game tilt cards ===== */
.tilt-card{
  position:relative; border-radius:22px; overflow:hidden; isolation:isolate;
  background:linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.3));
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 20px 50px -20px rgba(15,52,110,.3);
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s;
  will-change:transform;
}
.tilt-card::after{
  content:""; position:absolute; inset:-1px; border-radius:22px; padding:1px; pointer-events:none;
  background:linear-gradient(140deg, transparent 30%, rgba(212,176,106,.7) 50%, transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .5s;
}
.tilt-card:hover{ transform:translateY(-8px) scale(1.03); box-shadow:0 30px 70px -20px rgba(15,52,110,.4); }
.tilt-card:hover::after{ opacity:1; animation:borderSweep 2s linear infinite; }
@keyframes borderSweep{ from{background-position:0 0} to{background-position:300% 0} }
.tilt-card img{ transition:transform .9s cubic-bezier(.2,.7,.2,1); }
.tilt-card:hover img{ transform:scale(1.08); }
.tilt-glow{
  position:absolute; inset:0; opacity:0; transition:opacity .4s;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.45), transparent 40%);
  pointer-events:none;
}
.tilt-card:hover .tilt-glow{ opacity:1; }
.tilt-caption{
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  background:linear-gradient(to top, rgba(10,26,58,.88), rgba(10,26,58,.55) 60%, transparent);
  transform:translateY(100%); opacity:0; transition:transform .45s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
  pointer-events:none;
}
.tilt-card:hover .tilt-caption{ transform:translateY(0); opacity:1; }

/* ===== Marquee ===== */
.marquee{ display:flex; width:max-content; animation:marq 60s linear infinite; gap:18px; }
.marquee:hover{ animation-play-state:paused; }
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ===== Section reveal (only hide when JS is active) ===== */
.js .reveal{ opacity:0; transform:translateY(40px); transition:opacity 1s ease, transform 1s ease; }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ===== VIP card ===== */
.vip-card{
  position:relative; padding:42px; border-radius:28px; overflow:hidden;
  background:
    radial-gradient(600px 300px at 80% 0%, rgba(212,176,106,.25), transparent 60%),
    linear-gradient(160deg, #0a1a3a 0%, #122a55 60%, #0a1a3a 100%);
  border:1px solid rgba(212,176,106,.35);
  box-shadow:0 40px 100px -30px rgba(10,26,58,.6), inset 0 1px 0 rgba(255,255,255,.08);
}
.vip-card::before{
  content:""; position:absolute; inset:0; background:
    repeating-linear-gradient(120deg, rgba(212,176,106,.06) 0 2px, transparent 2px 14px);
  pointer-events:none;
}

/* ===== Bonus card ===== */
.bonus-card{
  position:relative; padding:30px; border-radius:24px; overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,.5));
  backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.7);
  box-shadow:0 25px 60px -25px rgba(15,52,110,.35);
  transition:transform .5s ease, box-shadow .5s ease;
}
.bonus-card:hover{ transform:translateY(-10px); box-shadow:0 35px 80px -25px rgba(15,52,110,.5); }
.float{ animation:float 6s ease-in-out infinite; }
.float.delay-1{ animation-delay:-1.5s; }
.float.delay-2{ animation-delay:-3s; }
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }

/* ===== Steps ===== */
.step-num{
  display:inline-flex; align-items:center; justify-content:center; width:54px; height:54px;
  border-radius:9999px; font-weight:700; font-size:1.25rem;
  background:linear-gradient(135deg,#fff,#d8e3f0); color:#0a1a3a;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 30px -8px rgba(15,52,110,.3), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ===== FAQ ===== */
details.faq{
  background:linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
  backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.7);
  border-radius:18px; padding:18px 22px; transition:all .4s;
}
details.faq[open]{ background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(232,242,255,.7)); box-shadow:0 20px 50px -20px rgba(15,52,110,.25); }
details.faq summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; font-weight:600; color:#0a1a3a; }
details.faq summary::-webkit-details-marker{ display:none; }
details.faq .chev{ transition:transform .4s; }
details.faq[open] .chev{ transform:rotate(45deg); color:#19a85a; }

/* ===== Loader ===== */
#loader{ position:fixed; inset:0; z-index:100; background:linear-gradient(180deg,#eaf4ff,#cfe5ff); display:flex; align-items:center; justify-content:center; transition:opacity .8s ease; }
.loader-ring{ width:64px; height:64px; border-radius:9999px; border:3px solid rgba(10,26,58,.1); border-top-color:#d4b06a; animation:spin 1s linear infinite; }
@keyframes spin{ to{transform:rotate(360deg)} }

/* ===== Cursor glow ===== */
#cursor-glow{
  position:fixed; pointer-events:none; width:480px; height:480px; border-radius:9999px;
  background:radial-gradient(circle, rgba(170,210,255,.35), transparent 60%);
  transform:translate(-50%,-50%); z-index:1; filter:blur(20px); transition:opacity .4s;
  mix-blend-mode:screen;
}
@media (max-width:768px){ #cursor-glow{ display:none; } }

/* ===== Mobile preview phones ===== */
.phone-stack img{ filter:drop-shadow(0 30px 60px rgba(15,52,110,.35)); }

/* ===== Stat tile ===== */
.stat{ position:relative; padding:18px 22px; border-radius:18px; background:linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.4)); border:1px solid rgba(255,255,255,.7); backdrop-filter:blur(12px); }

/* ===== Italian ribbon line ===== */
.italy-line{ height:3px; width:100%; background:linear-gradient(90deg,#19a85a 0 33.33%, #fff 33.33% 66.66%, #e63946 66.66% 100%); border-radius:9999px; opacity:.7; }

/* ===== Selection ===== */
::selection{ background:#d4b06a; color:#0a1a3a; }

/* Smooth scroll */
html{ scroll-behavior:smooth; }

/* Headings glow */
.glow-title{ text-shadow:0 0 40px rgba(170,210,255,.6); }

/* Live card */
.live-card{ position:relative; overflow:hidden; border-radius:26px; }
.live-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,26,58,0) 50%, rgba(10,26,58,.85) 100%);
}
.live-pulse{ position:absolute; top:18px; left:18px; z-index:2; display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .8rem; border-radius:9999px; background:rgba(230,57,70,.95); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.live-pulse::before{ content:""; width:8px; height:8px; border-radius:9999px; background:#fff; animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:.4; transform:scale(.9)} 50%{opacity:1; transform:scale(1.15)} }

/* Mouse-react card */
.react-card{ transition:transform .4s ease; will-change:transform; }