/* ===== BOLÃO COPA 2026 - DESIGN IGUAL AO MODELO ===== */
:root{
  --bg:#0a0f0a;
  --bg-2:#0d130d;
  --card:#111916;
  --card-solid:#121a12;
  --line:rgba(174,240,0,.14);
  --line-soft:rgba(255,255,255,.07);
  --lime:#c8ff00;
  --lime-dark:#9fcc00;
  --gold:#f5c518;
  --white:#ffffff;
  --txt:#a8b5a8;
  --muted:#6b7a6b;
  --live:#ff3b3b;
  --radius:16px;
  --font-display:'Anton',system-ui,sans-serif;
  --font:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--txt);line-height:1.5;overflow-x:hidden}
.container{width:min(1280px,94%);margin:0 auto}
.hl{color:var(--lime)}
.gold{color:var(--gold)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--font);font-weight:700;font-size:.9rem;padding:.75em 1.5em;border-radius:10px;border:none;cursor:pointer;transition:all .2s}
.btn-lg{padding:1em 2em;font-size:1rem}
.btn-block{width:100%}
.btn-primary{background:var(--lime);color:#0a0f0a}
.btn-primary:hover{background:#b8ef00;transform:translateY(-2px)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--white)}
.btn-outline:hover{border-color:var(--lime);color:var(--lime)}
.btn-ghost{background:transparent;color:var(--white);border:none}
.btn-ghost:hover{color:var(--lime)}

/* ===== Ticker ===== */
.ticker{background:linear-gradient(90deg,var(--lime),#9fcc00);overflow:hidden}
.ticker-track{display:flex;gap:3rem;padding:.5rem 0;animation:ticker 20s linear infinite}
.ticker-track span{color:#0a0f0a;font-weight:800;font-size:.8rem;letter-spacing:.03em;white-space:nowrap}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Header ===== */
.header{position:sticky;top:0;z-index:100;background:rgba(10,15,10,.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:.8rem 0}
.logo{display:flex;align-items:center;gap:.5rem}
.logo-badge{width:36px;height:36px;display:grid;place-items:center;background:var(--lime);border-radius:8px;font-size:1rem}
.logo-text{font-family:var(--font-display);font-size:1rem;color:var(--white);line-height:1;display:flex;flex-direction:column}
.logo-text strong{color:var(--lime);font-weight:400}
.nav{display:flex;gap:2rem}
.nav-link{font-weight:600;font-size:.85rem;color:var(--txt);transition:color .2s}
.nav-link:hover{color:var(--lime)}
.header-actions{display:flex;gap:.5rem}
.menu-toggle{display:none;background:none;border:none;color:var(--white);font-size:1.5rem;cursor:pointer}

/* ===== HERO - CENTRALIZADO ===== */
.hero{
  position:relative;
  min-height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--bg);
}
.hero-bg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:55%;
  z-index:0;
}
.hero-bg-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--bg) 40%, rgba(10,15,10,.7) 55%, rgba(10,15,10,.3) 70%, transparent 85%);
  z-index:1;
}
.hero .container{
  display:flex;
  align-items:center;
}
.hero-grid{
  position:relative;
  z-index:2;
  padding:3rem 0;
}
.hero-copy{max-width:560px}
.hero-title{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,5vw,3.8rem);
  line-height:.95;
  color:var(--white);
  font-style:italic;
}
.hero-sub{margin-top:1rem;font-size:1rem;max-width:40ch}
.hero-features{display:flex;flex-direction:column;gap:.5rem;margin:1.5rem 0;border-left:3px solid var(--lime);padding-left:1rem}
.hf{display:flex;gap:.6rem;align-items:flex-start}
.hf-ico{width:28px;height:28px;display:grid;place-items:center;background:rgba(200,255,0,.1);border-radius:6px;color:var(--lime);font-size:.75rem}
.hf strong{display:block;color:var(--white);font-size:.85rem}
.hf span{font-size:.75rem;color:var(--muted)}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-trust{margin-top:1rem;font-size:.8rem;color:var(--muted)}

.my-bet-receipt{margin-top:.8rem;font-size:.85rem;padding:.6rem}

/* ===== CARROSSEL DE JOGOS NO HERO ===== */
.hero .container{justify-content:flex-start;gap:2.5rem}
.hero-copy{flex-shrink:0}
.hero-carousel{
  position:relative;z-index:2;
  width:330px;flex-shrink:0;
  align-self:center;
  margin-left:clamp(1rem,6vw,5rem);
  background:rgba(15,20,15,.72);
  backdrop-filter:blur(10px);
  border:1px solid rgba(200,255,0,.18);
  border-radius:16px;
  padding:1rem;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.hero-carousel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.hc-title{font-family:var(--font-display);font-style:italic;color:var(--lime);font-size:.95rem;letter-spacing:.5px}
.hc-dots{display:flex;gap:.35rem}
.hc-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);cursor:pointer;transition:.25s}
.hc-dot.active{background:var(--lime);width:18px;border-radius:4px}
.hc-track{position:relative;overflow:hidden;min-height:188px}
.hc-slide{display:none;animation:hcFade .45s ease}
.hc-slide.active{display:block}
@keyframes hcFade{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.hc-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:1rem;cursor:pointer;transition:.2s}
.hc-card:hover{border-color:var(--lime);transform:translateY(-2px)}
.hc-card.brasil{border-color:rgba(255,223,0,.55);background:linear-gradient(135deg,rgba(0,156,59,.14),rgba(255,223,0,.08))}
.hc-stage{font-size:.65rem;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.hc-badge-br{float:right;font-size:.6rem;background:#ffdf00;color:#002776;font-weight:800;padding:2px 7px;border-radius:20px;letter-spacing:.5px}
.hc-teams{display:flex;align-items:center;justify-content:center;gap:.6rem;margin:.7rem 0}
.hc-team{display:flex;flex-direction:column;align-items:center;gap:.35rem;flex:1}
.hc-flag{width:46px;height:31px;object-fit:cover;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.4)}
.hc-team span{font-size:.72rem;font-weight:700;color:var(--white);text-align:center;line-height:1.1}
.hc-vs{font-family:var(--font-display);font-style:italic;color:var(--lime);font-size:.9rem}
.hc-meta{display:flex;justify-content:space-between;font-size:.68rem;color:var(--muted);margin-bottom:.7rem;border-top:1px solid rgba(255,255,255,.08);padding-top:.6rem}
.hc-meta b{color:var(--lime)}
.hc-btn{width:100%;background:var(--lime);color:#0a0f0a;border:none;padding:.6rem;border-radius:8px;font-weight:800;font-size:.78rem;cursor:pointer;letter-spacing:.5px;transition:.2s}
.hc-btn:hover{filter:brightness(1.08)}
.hc-empty{color:var(--muted);text-align:center;padding:3rem 1rem;font-size:.85rem}

/* ===== Sections ===== */
.section{padding:4rem 0}
.section-title{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2rem);color:var(--white);text-align:center;font-style:italic}
.section-sub{text-align:center;color:var(--muted);margin-top:.3rem;font-size:.9rem}

/* ===== Steps - Como Funciona ===== */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin:2rem 0}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1rem;text-align:center;position:relative}
.step-n{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--lime);color:#0a0f0a;width:22px;height:22px;border-radius:50%;font-weight:800;font-size:.7rem;display:grid;place-items:center}
.step-icon{font-size:2rem;margin-bottom:.4rem;display:block}
.step-icon.score{font-family:var(--font);font-size:1.3rem;font-weight:800;color:var(--white);background:var(--bg);padding:.4rem .8rem;border-radius:8px;display:inline-block}
.step h3{font-size:.8rem;color:var(--white);margin-bottom:.2rem;font-weight:700}
.step p{font-size:.7rem;color:var(--muted);line-height:1.4}

/* ===== Example Card ===== */
.example-card{display:grid;grid-template-columns:repeat(4,1fr);background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:2rem}
.ex-block{padding:1.5rem 1rem;text-align:center;border-right:1px solid var(--line)}
.ex-block:last-child{border-right:none}
.ex-eyebrow{font-size:.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:.4rem}
.ex-game{font-size:.85rem;color:var(--white)}
.ex-teams{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.6rem}
.ex-flag{width:36px;height:24px;border-radius:3px;object-fit:cover;border:1px solid var(--line-soft)}
.ex-x{color:var(--muted);font-weight:700;font-size:.8rem}
.ex-big{font-size:1.3rem;display:block;font-weight:800;color:var(--white)}
.ex-cap{font-size:.65rem;color:var(--muted);display:block;margin-top:.2rem}
.highlight-gold{background:rgba(245,197,24,.05)}
.highlight-green{background:rgba(200,255,0,.05)}

/* ===== Two Column - Bolões ===== */
.two-col{display:grid;grid-template-columns:1fr 360px;gap:1.5rem;align-items:start}

/* ===== Panels ===== */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8rem}
.panel-title{font-family:var(--font-display);font-size:1rem;color:var(--white);font-style:italic}
.panel-sub{font-size:.8rem;color:var(--muted);margin-bottom:.8rem}
.link-ver-todos{font-size:.7rem;color:var(--lime);font-weight:600;text-transform:uppercase}

/* ===== Games List ===== */
.games-list{display:flex;flex-direction:column;gap:.6rem}
.game-item{display:grid;grid-template-columns:1fr auto auto auto;gap:.8rem;align-items:center;padding:.8rem 1rem;background:rgba(0,0,0,.2);border:1px solid var(--line-soft);border-radius:10px;cursor:pointer;transition:all .2s}
.game-item:hover{border-color:var(--lime);background:rgba(200,255,0,.03)}
.game-teams{display:flex;align-items:center;gap:.4rem}
.game-flag{width:24px;height:16px;border-radius:2px;object-fit:cover}
.game-vs{color:var(--lime);font-weight:700;font-size:.75rem;margin:0 .3rem}
.game-team-name{font-size:.8rem;color:var(--white)}
.game-info{text-align:center}
.game-date{font-size:.7rem;color:var(--muted)}
.game-stats{text-align:right}
.game-value{font-size:.85rem;color:var(--lime);font-weight:700;display:block}
.game-participants{font-size:.65rem;color:var(--muted)}
.btn-participar{padding:.4rem .8rem;font-size:.75rem}

/* ===== Highlight Panel - Jogo em Destaque ===== */
.highlight-panel{
  position:relative;
  overflow:hidden;
  padding:0;
  background:
    linear-gradient(180deg, rgba(0,40,80,.7) 0%, rgba(0,20,40,.9) 50%, rgba(0,10,20,.95) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(100,200,255,.15) 0%, transparent 60%);
  border-color:rgba(100,200,255,.15);
}
.highlight-panel .panel-head{
  padding:1rem 1.2rem;
  background:transparent;
  position:relative;
  z-index:3;
}
.highlight-bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center top;
  opacity:.5;
  z-index:1;
  /* Fallback gradient se não tiver imagem */
  background-image:
    radial-gradient(ellipse at 50% 100%, rgba(50,100,50,.3) 0%, transparent 70%),
    linear-gradient(180deg, rgba(0,30,60,.5) 0%, rgba(0,60,30,.3) 100%);
}
.highlight-body{
  position:relative;
  z-index:2;
  padding:0 1.5rem 1.5rem;
  text-align:center;
}
.hl-teams{display:flex;align-items:center;justify-content:center;gap:1.5rem;margin-bottom:.8rem}
.hl-team{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.hl-flag{width:60px;height:42px;border-radius:4px;object-fit:cover;border:2px solid rgba(255,255,255,.1)}
.hl-team span{font-size:.85rem;color:var(--white);font-weight:600}
.hl-vs{font-family:var(--font-display);font-size:1.3rem;color:var(--lime)}
.hl-date{font-size:.75rem;color:var(--muted)}
.hl-stadium{font-size:.75rem;color:var(--muted);margin-bottom:.8rem}
.hl-stats{display:flex;justify-content:center;gap:2rem;margin:1rem 0}
.hl-stat{text-align:center}
.hl-stat-label{font-size:.65rem;color:var(--muted);display:block}
.hl-stat-value{font-size:1.2rem;font-weight:800;display:block}
.hl-stat-sub{font-size:.65rem;color:var(--muted)}
.live-badge{background:var(--live);color:#fff;padding:.2rem .5rem;border-radius:12px;font-size:.65rem;font-weight:700}

/* ===== Three Column ===== */
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;align-items:start}

/* ===== Winners ===== */
.winners{display:flex;flex-direction:column;gap:.8rem}
.winner{padding:.8rem;background:rgba(0,0,0,.2);border-radius:10px}
.w-game span{font-size:.75rem}
.w-game strong{color:var(--lime)}
.w-prize{font-weight:700;font-size:.8rem}
.w-avatars{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem}
.w-label{font-size:.65rem;color:var(--muted)}
.avatars{display:flex}
.avatar{width:24px;height:24px;background:var(--bg);border:2px solid var(--card);border-radius:50%;display:grid;place-items:center;font-size:.6rem;margin-left:-6px}
.avatar:first-child{margin-left:0}
.avatar.more{background:var(--lime);color:#0a0f0a;font-weight:700}

/* ===== Ranking ===== */
.ranking-list{display:flex;flex-direction:column;gap:.5rem}
.rank-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .8rem;background:rgba(0,0,0,.2);border-radius:8px}
.gold-rank{background:linear-gradient(90deg,rgba(245,197,24,.12),transparent)}
.silver-rank{background:linear-gradient(90deg,rgba(192,192,192,.08),transparent)}
.bronze-rank{background:linear-gradient(90deg,rgba(205,127,50,.08),transparent)}
.rank-pos{font-weight:800;color:var(--lime);width:24px;font-size:.85rem}
.rank-medal{font-size:1rem}
.rank-name{flex:1;font-size:.85rem;color:var(--white)}
.rank-pts{font-weight:700;font-size:.85rem}

/* ===== Donut Chart ===== */
.donut-panel{text-align:center}
.donut-wrap{margin:1rem 0}
.donut-chart{position:relative;width:160px;height:160px;margin:0 auto}
.donut-svg{transform:rotate(-90deg);width:100%;height:100%}
.donut-bg{fill:none;stroke:rgba(245,197,24,.15);stroke-width:14}
.donut-fill{fill:none;stroke:var(--lime);stroke-width:14;stroke-linecap:round;stroke-dasharray:calc(var(--percent) * 2.51) 251}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-center strong{font-size:1.8rem;color:var(--lime)}
.donut-center span{font-size:.65rem;color:var(--muted);max-width:80px}
.donut-side{display:flex;flex-direction:column;gap:.4rem;margin-top:.8rem;text-align:left}
.donut-item{display:flex;align-items:center;gap:.4rem;font-size:.75rem;justify-content:center}
.donut-pct{font-weight:700;width:35px}
.donut-item.green .donut-pct{color:var(--lime)}
.donut-item.gold .donut-pct{color:var(--gold)}
.panel-note{font-size:.7rem;color:var(--muted);margin-top:.8rem;line-height:1.4}

/* ===== Trust Strip ===== */
.trust-strip{padding:1.5rem 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.trust-item{display:flex;align-items:center;gap:.6rem}
.trust-icon{font-size:1.3rem}
.trust-item strong{display:block;font-size:.8rem;color:var(--white)}
.trust-item>div>span{font-size:.7rem;color:var(--muted)}

/* ===== Footer ===== */
.footer{padding:2.5rem 0 1rem;background:var(--bg-2)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr auto;gap:2rem;align-items:start}
.footer-brand{max-width:260px}
.footer-tag{font-size:.75rem;color:var(--muted);margin-top:.6rem;line-height:1.5}
.social-links{display:flex;gap:.4rem;margin-top:.8rem}
.social-link{width:32px;height:32px;background:rgba(255,255,255,.05);border-radius:6px;display:grid;place-items:center;font-size:.9rem}
.social-link:hover{background:var(--lime);color:#0a0f0a}
.footer-col h4{font-size:.7rem;color:var(--lime);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem}
.footer-col a{display:block;font-size:.8rem;color:var(--txt);padding:.25rem 0}
.footer-col a:hover{color:var(--lime)}
.app-badges{display:flex;flex-direction:column;gap:.4rem;margin-top:.6rem}
.app-badge{display:flex;align-items:center;gap:.4rem;padding:.4rem .6rem;background:rgba(255,255,255,.05);border-radius:6px;font-size:.7rem;color:var(--white)}
.footer-fifa{text-align:center}
.fifa-logo{max-width:80px;opacity:.8}
.fifa-placeholder{font-family:var(--font-display);font-size:.6rem;color:var(--gold);line-height:1.2}
.footer-bottom{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line-soft);text-align:center;font-size:.7rem;color:var(--muted)}

/* ===== Modals ===== */
.modal{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.85);backdrop-filter:blur(8px);display:none;justify-content:center;align-items:center;padding:1rem}
.modal.active{display:flex}
.modal-content{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;width:100%;max-width:400px;position:relative}
.modal-close{position:absolute;top:.8rem;right:.8rem;background:none;border:none;color:var(--muted);font-size:1.3rem;cursor:pointer}
.modal-close:hover{color:var(--white)}
.modal-title{font-family:var(--font-display);font-size:1.2rem;color:var(--white);margin-bottom:.8rem}
.modal-game-info{font-size:.85rem;color:var(--muted);margin-bottom:1rem;text-align:center}
.form-row{margin-bottom:.8rem}
.form-row label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.3rem}
.form-row input{width:100%;padding:.7rem .8rem;background:var(--bg);border:1px solid var(--line-soft);border-radius:8px;color:var(--white);font-size:.9rem}
.form-row input:focus{outline:none;border-color:var(--lime)}
.score-picker{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1rem 0;padding:1rem;background:var(--bg);border-radius:10px}
.sp-team{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.sp-flag{width:40px;height:28px;border-radius:3px;object-fit:cover}
.sp-team span{font-size:.8rem;color:var(--white)}
.sp-team input{width:50px;height:44px;text-align:center;font-size:1.5rem;font-weight:800;background:var(--card);border:2px solid var(--line);border-radius:8px;color:var(--lime)}
.sp-x{font-size:1.2rem;font-weight:800;color:var(--muted)}
.bet-value-line{text-align:center;font-size:.85rem;color:var(--muted);margin-bottom:.8rem}
.bet-value-line strong{color:var(--lime)}
.pix-qr{width:180px;height:180px;margin:1rem auto;background:#fff;border-radius:10px;display:grid;place-items:center}
.pix-value-line{text-align:center;font-size:.9rem;margin:.8rem 0}
.pix-copy{display:flex;gap:.4rem}
.pix-copy input{flex:1;padding:.6rem;background:var(--bg);border:1px solid var(--line-soft);border-radius:6px;color:var(--txt);font-size:.75rem}
.my-bets-list{margin-top:1rem;display:flex;flex-direction:column;gap:.6rem}
.my-bet{padding:.8rem;background:var(--bg);border-radius:8px;border-left:3px solid var(--lime)}
.my-bet.pending{border-left-color:var(--gold)}
.my-bet-game{font-weight:600;color:var(--white);font-size:.85rem}
.my-bet-score{color:var(--lime);font-weight:700;font-size:.9rem}
.my-bet-status{font-size:.7rem;color:var(--muted)}
.no-games{text-align:center;padding:2rem;color:var(--muted)}

/* ===== Payment Options ===== */
.payment-options{margin:1rem 0}
.payment-label{display:block;font-size:.8rem;color:var(--muted);margin-bottom:.6rem}
.payment-cards{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.payment-card{cursor:pointer}
.payment-card input{display:none}
.payment-card-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:.8rem .5rem;background:var(--bg);border:2px solid var(--line-soft);border-radius:10px;transition:all .2s}
.payment-card input:checked + .payment-card-inner{border-color:var(--lime);background:rgba(200,255,0,.05)}
.payment-card:hover .payment-card-inner{border-color:var(--lime)}
.payment-icon{font-size:1.5rem;margin-bottom:.3rem}
.payment-card-inner strong{color:var(--white);font-size:.8rem}
.payment-desc{font-size:.65rem;color:var(--muted);margin:.2rem 0}
.payment-badge{font-size:.6rem;padding:.2rem .5rem;border-radius:20px;margin-top:.3rem}
.payment-badge.auto{background:rgba(200,255,0,.15);color:var(--lime)}
.payment-badge.manual{background:rgba(245,197,24,.15);color:var(--gold)}

/* Modal subtitle */
.modal-subtitle{font-size:.85rem;color:var(--muted);text-align:center;margin-bottom:1rem}

/* PIX Status */
.pix-status{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem;border-radius:8px;margin-top:1rem;font-size:.8rem}
.pix-status.pending{background:rgba(245,197,24,.1);color:var(--gold)}
.pix-status.confirmed{background:rgba(200,255,0,.1);color:var(--lime)}
.pix-status-icon{font-size:1.2rem}

/* Checkout Modal */
.checkout-info{background:var(--bg);border-radius:10px;padding:1rem;margin:1rem 0}
.checkout-item{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--line-soft)}
.checkout-item:last-child{border-bottom:none}
.checkout-item span{color:var(--muted);font-size:.85rem}
.checkout-item strong{color:var(--white);font-size:.85rem}
.checkout-loading{text-align:center;padding:1.5rem}
.spinner{width:40px;height:40px;border:3px solid var(--line);border-top-color:var(--lime);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto .8rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* ===== Responsive ===== */
@media(max-width:1024px){
  .hero-bg{width:50%}
  .hero-carousel{width:300px}
  .two-col{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(3,1fr)}
  .example-card{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .highlight-panel{margin-top:1rem}
}
@media(max-width:768px){
  .nav{display:none}
  .menu-toggle{display:block}
  .hero{min-height:auto;padding:2rem 0}
  .hero-bg{display:none}
  .hero::before{background:var(--bg)}
  .hero .container{flex-direction:column}
  .hero-carousel{width:100%;max-width:560px;margin-top:1.5rem;margin-left:0}
  .steps{grid-template-columns:1fr 1fr}
  .trust-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .game-item{grid-template-columns:1fr}
  .game-info,.game-stats{text-align:left}
  .game-stats{display:flex;gap:1rem}
}
@media(max-width:480px){
  .steps{grid-template-columns:1fr}
  .example-card{grid-template-columns:1fr}
  .example-card .ex-block{border-right:none;border-bottom:1px solid var(--line)}
  .example-card .ex-block:last-child{border-bottom:none}
  .trust-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
}
.nav.mobile-open{display:flex;position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;padding:1rem;border-bottom:1px solid var(--line);gap:.5rem}