:root{
    --bg-void:#0a0906;
    --bg-panel:#151109;
    --bg-panel-2:#1c1610;
    --gold-deep:#a9781f;
    --gold:#d4a83f;
    --gold-bright:#f3cf6e;
    --red-ember:#7a1414;
    --red:#b71f2b;
    --red-bright:#e2394a;
    --ivory:#f3ecd9;
    --ivory-dim:#c9c0a6;
    --line:rgba(212,168,63,0.22);
    --shadow-gold:0 0 40px rgba(212,168,63,0.18);
    --font-display:'Cinzel', serif;
    --font-body:'Manrope', sans-serif;
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg-void);
    color:var(--ivory);
    font-family:var(--font-body);
    overflow-x:hidden;
    background-image:
      radial-gradient(ellipse 900px 500px at 15% -10%, rgba(212,168,63,0.10), transparent 60%),
      radial-gradient(ellipse 700px 500px at 100% 10%, rgba(183,31,43,0.10), transparent 60%);
  }
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
  }

  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    font-family:var(--font-display);
    letter-spacing:0.32em;
    text-transform:uppercase;
    font-size:12px;
    color:var(--gold-bright);
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before, .eyebrow::after{content:"";width:22px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
  h1,h2,h3{font-family:var(--font-display); font-weight:700; letter-spacing:0.02em;}
  .gold-text{
    background:linear-gradient(100deg, var(--gold-deep) 10%, var(--gold-bright) 35%, var(--gold) 55%, var(--gold-bright) 75%);
    background-size:220% 100%;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:shimmer 6s linear infinite;
  }
  @keyframes shimmer{
    0%{background-position:0% 50%;}
    100%{background-position:220% 50%;}
  }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:14px 30px;
    border-radius:3px;
    font-family:var(--font-display);
    font-weight:600;
    font-size:14px;
    letter-spacing:0.14em;
    text-transform:uppercase;
    cursor:pointer;
    border:1px solid transparent;
    transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(0);}
  .btn-primary{
    background:linear-gradient(135deg, var(--gold-deep), var(--gold-bright) 50%, var(--gold-deep));
    color:#1a1204;
    box-shadow:0 10px 30px -8px rgba(212,168,63,0.55);
  }
  .btn-primary:hover{filter:brightness(1.08); box-shadow:0 14px 36px -8px rgba(212,168,63,0.7);}
  .btn-whatsapp{
    background:linear-gradient(135deg, #1f8a4c, #25d366);
    color:#08210f;
    box-shadow:0 10px 26px -8px rgba(37,211,102,0.5);
  }
  .btn-whatsapp:hover{filter:brightness(1.06);}
  .btn-outline{
    background:transparent;
    border:1px solid var(--line);
    color:var(--ivory);
  }
  .btn-outline:hover{border-color:var(--gold); background:rgba(212,168,63,0.06);}

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    background:rgba(10,9,6,0.72);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 24px;
    max-width:1180px; margin:0 auto;
  }
  .logo{display:flex; align-items:center; gap:12px;}
  .logo-mark{
    width:40px; height:40px; position:relative; flex-shrink:0;
  }
  .logo-mark svg{width:100%; height:100%;}
  .logo-text{
    font-family:var(--font-display);
    font-size:20px;
    letter-spacing:0.08em;
    line-height:1;
  }
  .logo-text span{display:block; font-size:9px; letter-spacing:0.4em; color:var(--ivory-dim); font-family:var(--font-body); margin-top:4px;}
  .nav-links{display:flex; align-items:center; gap:34px;}
  .nav-links a{
    font-size:13px; letter-spacing:0.06em; text-transform:uppercase; font-weight:600;
    color:var(--ivory-dim);
    position:relative;
    padding:6px 0;
    transition:color .2s ease;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px;
    background:var(--gold-bright); transition:width .25s ease;
  }
  .nav-links a:hover{color:var(--ivory);}
  .nav-links a:hover::after{width:100%;}
  .nav-actions{display:flex; align-items:center; gap:14px;}
  .nav-actions .btn{padding:10px 20px; font-size:12px;}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; z-index:110; background:none; border:none; padding:6px;}
  .burger span{width:24px; height:2px; background:var(--gold-bright); transition:all .3s ease;}
  .mobile-panel{
    position:fixed; inset:0 0 0 auto; width:min(78vw,320px); height:100vh;
    background:var(--bg-panel); border-left:1px solid var(--line);
    transform:translateX(100%); transition:transform .35s ease;
    z-index:105; padding:100px 30px 30px; display:flex; flex-direction:column; gap:26px;
  }
  .mobile-panel.open{transform:translateX(0);}
  .mobile-panel a{font-family:var(--font-display); font-size:16px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ivory-dim);}
  .scrim{position:fixed; inset:0; background:rgba(0,0,0,0.6); opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:104;}
  .scrim.show{opacity:1; pointer-events:auto;}

  @media (max-width:900px){
    .nav-links, .nav-actions{display:none;}
    .burger{display:flex;}
  }

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    padding:170px 24px 120px;
    display:flex; align-items:center; justify-content:center;
    text-align:center;
    overflow:hidden;
    min-height:92vh;
  }
  .hero-sunburst{
    position:absolute; top:50%; left:50%; width:1100px; height:1100px;
    transform:translate(-50%,-52%);
    opacity:0.16;
    animation:spin 90s linear infinite;
    pointer-events:none;
  }
  @keyframes spin{ to{ transform:translate(-50%,-52%) rotate(360deg); } }
  .hero-vignette{
    position:absolute; inset:0;
    background:radial-gradient(ellipse 700px 500px at 50% 30%, transparent 30%, var(--bg-void) 90%);
    pointer-events:none;
  }
  .hero-content{position:relative; z-index:2; max-width:780px;}
  .hero h1{
    font-size:clamp(38px,6vw,68px);
    line-height:1.08;
    margin:22px 0 20px;
  }
  .hero p.lead{
    font-size:17px; color:var(--ivory-dim); max-width:560px; margin:0 auto 38px; line-height:1.7;
  }
  .hero-ctas{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
  .hero-stats{
    display:flex; gap:44px; justify-content:center; margin-top:64px; flex-wrap:wrap;
  }
  .hero-stats div{text-align:center;}
  .hero-stats strong{font-family:var(--font-display); font-size:26px; color:var(--gold-bright); display:block;}
  .hero-stats span{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ivory-dim);}

  .coin{
    position:absolute; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, var(--gold-bright), var(--gold-deep) 70%);
    box-shadow:0 0 24px rgba(212,168,63,0.4), inset 0 0 10px rgba(0,0,0,0.35);
    opacity:0.85;
    animation:float 7s ease-in-out infinite;
  }
  .coin::after{
    content:"◆"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:rgba(26,18,4,0.55); font-size:0.9em;
  }
  .c1{width:46px; height:46px; top:20%; left:10%; animation-delay:0s;}
  .c2{width:30px; height:30px; top:32%; right:12%; animation-delay:1.4s;}
  .c3{width:60px; height:60px; bottom:16%; left:16%; animation-delay:2.6s;}
  .c4{width:24px; height:24px; bottom:26%; right:18%; animation-delay:0.8s;}
  @keyframes float{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-22px) rotate(12deg);}
  }
  @media (max-width:700px){ .coin{display:none;} }

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}
  .reveal-stagger.in > *{opacity:1; transform:none;}
  .reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
  .reveal-stagger > *:nth-child(1){transition-delay:.05s;}
  .reveal-stagger > *:nth-child(2){transition-delay:.15s;}
  .reveal-stagger > *:nth-child(3){transition-delay:.25s;}
  .reveal-stagger > *:nth-child(4){transition-delay:.35s;}
  .reveal-stagger > *:nth-child(5){transition-delay:.45s;}
  .reveal-stagger > *:nth-child(6){transition-delay:.55s;}

  section{padding:110px 0; position:relative;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 60px;}
  .section-head h2{font-size:clamp(28px,4vw,42px); margin:18px 0 16px;}
  .section-head p{color:var(--ivory-dim); font-size:15.5px; line-height:1.7;}

  /* ---------- GAME CARDS ---------- */
  .games{background:linear-gradient(180deg, transparent, rgba(212,168,63,0.03), transparent);}
  .game-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  }
  @media (max-width:960px){ .game-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:620px){ .game-grid{grid-template-columns:1fr;} }

  .game-card{
    position:relative;
    background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
    border:1px solid var(--line);
    border-radius:6px;
    padding:34px 26px 28px;
    overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
  }
  .game-card:hover{
    transform:translateY(-8px);
    border-color:rgba(212,168,63,0.55);
    box-shadow:var(--shadow-gold);
  }
  .corner{position:absolute; width:26px; height:26px; border:1px solid var(--gold-deep); opacity:0.55;}
  .corner.tl{top:10px; left:10px; border-right:none; border-bottom:none;}
  .corner.br{bottom:10px; right:10px; border-left:none; border-top:none;}
  .game-icon{
    width:56px; height:56px; border-radius:50%;
    background:radial-gradient(circle at 32% 28%, var(--red-bright), var(--red-ember) 75%);
    display:flex; align-items:center; justify-content:center;
    font-size:24px; margin-bottom:22px;
    box-shadow:0 8px 20px -6px rgba(183,31,43,0.55);
  }
  .game-card h3{font-size:19px; margin-bottom:10px; color:var(--ivory);}
  .game-card p{font-size:14px; color:var(--ivory-dim); line-height:1.65; margin-bottom:22px;}
  .game-tag{
    display:inline-block; font-size:10px; letter-spacing:0.14em; text-transform:uppercase;
    color:var(--gold-bright); border:1px solid var(--line); padding:4px 10px; border-radius:20px; margin-bottom:16px;
  }
  .game-card .btn{width:100%; padding:11px 0; font-size:12px;}

  /* ---------- BONUS BANNER ---------- */
  .bonus{
    position:relative;
    margin:0 24px;
    max-width:1132px;
    margin-left:auto; margin-right:auto;
    border-radius:10px;
    padding:60px 40px;
    background:
      linear-gradient(120deg, rgba(183,31,43,0.22), transparent 60%),
      linear-gradient(160deg, var(--bg-panel-2), #0d0a05);
    border:1px solid var(--line);
    overflow:hidden;
    display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
  }
  .bonus::before{
    content:""; position:absolute; top:-40%; right:-10%; width:420px; height:420px;
    background:radial-gradient(circle, rgba(212,168,63,0.22), transparent 70%);
  }
  .bonus-ribbon{
    position:absolute; top:22px; left:-46px;
    background:linear-gradient(135deg, var(--red-bright), var(--red-ember));
    color:var(--ivory); font-family:var(--font-display); font-size:11px; letter-spacing:0.16em;
    text-transform:uppercase; padding:6px 60px; transform:rotate(-40deg);
    box-shadow:0 6px 14px rgba(0,0,0,0.35);
  }
  .bonus-left{position:relative; z-index:2; max-width:560px;}
  .bonus-left h2{font-size:clamp(26px,3.6vw,38px); margin-bottom:14px;}
  .bonus-left p{color:var(--ivory-dim); font-size:15px; line-height:1.7; margin-bottom:26px;}
  .bonus-right{position:relative; z-index:2; text-align:center;}
  .bonus-figure{font-family:var(--font-display); font-size:clamp(46px,7vw,74px); line-height:1;}
  .bonus-figure span{font-size:0.4em; display:block; letter-spacing:0.3em; color:var(--ivory-dim); margin-top:8px;}

  /* ---------- WHY CHOOSE US ---------- */
  .why-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:22px;
  }
  @media (max-width:960px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }
  .why-card{
    text-align:center; padding:34px 22px;
    border:1px solid var(--line); border-radius:6px;
    background:rgba(255,255,255,0.015);
    transition:border-color .3s ease, transform .3s ease;
  }
  .why-card:hover{transform:translateY(-6px); border-color:rgba(212,168,63,0.5);}
  .why-icon{
    width:52px; height:52px; margin:0 auto 18px; border-radius:50%;
    border:1px solid var(--gold-deep); display:flex; align-items:center; justify-content:center;
    font-size:22px; color:var(--gold-bright);
  }
  .why-card h3{font-size:16px; margin-bottom:10px;}
  .why-card p{font-size:13.5px; color:var(--ivory-dim); line-height:1.6;}

  /* ---------- FAQ ---------- */
  .faq-list{max-width:760px; margin:0 auto;}
  .faq-item{
    border-bottom:1px solid var(--line);
  }
  .faq-q{
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:24px 6px; cursor:pointer; background:none; border:none; width:100%;
    color:var(--ivory); font-family:var(--font-display); font-size:16px; text-align:left;
  }
  .faq-q .plus{
    font-size:20px; color:var(--gold-bright); transition:transform .3s ease; flex-shrink:0;
  }
  .faq-item.open .plus{transform:rotate(45deg);}
  .faq-a{
    max-height:0; overflow:hidden; transition:max-height .4s ease, padding .4s ease;
    color:var(--ivory-dim); font-size:14.5px; line-height:1.75; padding:0 6px;
  }
  .faq-item.open .faq-a{max-height:220px; padding:0 6px 24px;}

  /* ---------- CONTACT ---------- */
  .contact{
    text-align:center;
    background:radial-gradient(ellipse 700px 400px at 50% 0%, rgba(37,211,102,0.08), transparent 70%);
  }
  .contact-card{
    max-width:640px; margin:0 auto; padding:56px 40px;
    border:1px solid var(--line); border-radius:10px;
    background:linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
  }
  .contact-card h2{font-size:clamp(26px,3.6vw,36px); margin:16px 0 14px;}
  .contact-card p{color:var(--ivory-dim); margin-bottom:30px; font-size:15px; line-height:1.7;}
  .contact-meta{
    display:flex; justify-content:center; gap:36px; margin-top:36px; flex-wrap:wrap;
  }
  .contact-meta div{font-size:13px; color:var(--ivory-dim);}
  .contact-meta strong{display:block; color:var(--ivory); font-family:var(--font-display); font-size:15px; margin-bottom:4px;}

  /* ---------- FLOATING WHATSAPP ---------- */
  .float-wa{
    position:fixed; bottom:26px; right:26px; z-index:120;
    width:60px; height:60px; border-radius:50%;
    background:linear-gradient(135deg,#25d366,#1f8a4c);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 30px -6px rgba(37,211,102,0.6);
    animation:pulse 2.4s ease-in-out infinite;
  }
  .float-wa svg{width:28px; height:28px;}
  @keyframes pulse{
    0%,100%{box-shadow:0 10px 30px -6px rgba(37,211,102,0.6);}
    50%{box-shadow:0 10px 30px -6px rgba(37,211,102,0.95), 0 0 0 10px rgba(37,211,102,0.08);}
  }

  /* ---------- FOOTER ---------- */
  footer{
    border-top:1px solid var(--line);
    padding:44px 24px 30px;
    text-align:center;
  }
  footer .logo-text{justify-content:center; display:inline-flex;}
  footer p{color:var(--ivory-dim); font-size:12.5px; margin-top:14px; line-height:1.8;}
  .footer-links{display:flex; gap:24px; justify-content:center; margin-top:18px; flex-wrap:wrap;}
  .footer-links a{font-size:12px; color:var(--ivory-dim); letter-spacing:0.04em;}
  .footer-links a:hover{color:var(--gold-bright);}

  ::selection{background:var(--gold); color:#1a1204;}