/* ==========================================================================
   20bet España — assets/styles.css
   Palette: header #0C1D34 · CTA #EC622B · accent #4CA534 · bg #FFFFFF
   ========================================================================== */

:root{
  --c-bg:#FFFFFF;
  --c-bg-alt:#F4F6FA;
  --c-bg-dark:#0C1D34;
  --c-bg-dark-2:#0A1729;
  --c-text:#0C1D34;
  --c-text-soft:#475569;
  --c-text-muted:#7B8794;
  --c-line:#E5E9F0;
  --c-primary:#EC622B;
  --c-primary-2:#FF7A3D;
  --c-primary-dark:#C8501C;
  --c-accent:#4CA534;
  --c-accent-2:#62C247;
  --c-accent-dark:#388225;
  --c-warn:#FFB400;
  --c-live:#E63946;

  --radius-sm:8px;
  --radius:14px;
  --radius-lg:22px;
  --radius-pill:999px;

  --shadow-sm:0 2px 6px rgba(12,29,52,.06);
  --shadow:0 8px 24px rgba(12,29,52,.10);
  --shadow-lg:0 18px 48px rgba(12,29,52,.18);
  --shadow-cta:0 10px 24px rgba(236,98,43,.42);
  --shadow-cta-hover:0 14px 30px rgba(236,98,43,.55);
  --shadow-accent:0 10px 24px rgba(76,165,52,.40);

  --header-h:72px;
  --container:1280px;
  --space-section:96px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0;width:100%;overflow-x:hidden}
body{
  font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  background:var(--c-bg);
  color:var(--c-text);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
ul,ol{margin:0;padding:0}
li{list-style:none}
h1,h2,h3,h4,h5{margin:0;line-height:1.2;color:var(--c-text);font-weight:800;letter-spacing:-.01em}
p{margin:0 0 14px}
strong{font-weight:800}
em{font-style:italic}

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;
  background:var(--c-primary);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:9999;
}
.skip-link:focus{left:0}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;
  padding:12px 22px;
  border-radius:var(--radius-pill);
  font-weight:900;
  font-size:.95rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap;
  border:2px solid transparent;
  cursor:pointer;
  user-select:none;
  text-decoration:none;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn__icon{display:inline-flex;font-size:1.1em}

.btn--primary{
  background:linear-gradient(180deg,var(--c-primary-2) 0%,var(--c-primary) 60%,var(--c-primary-dark) 100%);
  color:#fff;
  box-shadow:var(--shadow-cta);
  border-color:var(--c-primary-dark);
}
.btn--primary:hover{box-shadow:var(--shadow-cta-hover);filter:brightness(1.05)}

.btn--ghost{
  background:transparent;
  color:var(--c-text);
  border:2px solid var(--c-line);
  box-shadow:var(--shadow-sm);
}
.btn--ghost:hover{border-color:var(--c-text);background:var(--c-bg-alt)}

.btn--login{
  background:linear-gradient(180deg,var(--c-accent-2) 0%,var(--c-accent) 60%,var(--c-accent-dark) 100%);
  color:#fff;
  box-shadow:var(--shadow-accent);
  border-color:var(--c-accent-dark);
}
.btn--login:hover{filter:brightness(1.05)}

.btn--register{padding-left:26px;padding-right:26px}

.btn--xl{
  min-height:56px;
  padding:16px 32px;
  font-size:1.05rem;
  border-radius:14px;
}
.btn--sm{
  min-height:38px;
  padding:8px 14px;
  font-size:.78rem;
  border-radius:10px;
}
.btn--block{display:flex;width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--c-bg-dark);
  color:#fff;
  box-shadow:0 2px 0 rgba(255,255,255,.04), 0 6px 18px rgba(0,0,0,.18);
}
.header__inner{
  display:flex;align-items:center;gap:18px;
  min-height:var(--header-h);
  padding-top:10px;padding-bottom:10px;
}
.burger{
  display:none;
  width:42px;height:42px;flex:0 0 42px;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border-radius:8px;
}
.burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:.2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.logo{display:inline-flex;align-items:center;flex:0 0 auto}
.logo img{height:40px;width:auto;max-width:140px;object-fit:contain}
.logo--footer img{height:48px;max-width:170px}

.header-app-pill{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(180deg,#1F3559,#16294A);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  padding:10px 22px;
  border-radius:var(--radius-pill);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:.18s;
}
.header-app-pill:hover{border-color:rgba(255,255,255,.25);transform:translateY(-1px)}
.header-app-pill__icons{display:inline-flex;gap:6px;align-items:center}

.primary-nav{
  display:flex;align-items:center;gap:6px;
  flex:1;min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
.primary-nav::-webkit-scrollbar{display:none}
.primary-nav__item{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 14px;
  color:rgba(255,255,255,.7);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  transition:color .18s;
  border-radius:8px;
}
.primary-nav__item:hover{color:#fff}
.primary-nav__item.is-active{color:#fff;position:relative}
.primary-nav__item.is-active::after{
  content:"";position:absolute;left:14px;right:14px;bottom:-12px;
  height:3px;background:var(--c-primary);border-radius:3px 3px 0 0;
}
.primary-nav__icon{font-size:1.05rem;opacity:.85}
.primary-nav__icon--accent{color:var(--c-primary);opacity:1}

.lang-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;
  border-radius:var(--radius-pill);
  font-weight:800;
  font-size:.85rem;
  color:#fff;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.lang-pill__globe{
  width:24px;height:24px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3A6CCC,#1E3D7E);font-size:.85rem;
}

.header-cta{display:inline-flex;gap:10px;align-items:center;flex:0 0 auto}

.mobile-nav{
  display:none;
  background:var(--c-bg-dark-2);
  padding:8px 16px 16px;
  border-top:1px solid rgba(255,255,255,.06);
}
.mobile-nav__item{
  display:block;
  padding:14px 12px;
  color:rgba(255,255,255,.85);
  font-weight:700;
  text-transform:uppercase;
  font-size:.9rem;
  letter-spacing:.04em;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.mobile-nav__item.is-active{color:var(--c-primary)}
.mobile-nav__cta{display:flex;flex-direction:column;gap:10px;margin-top:14px}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:linear-gradient(180deg,#0C1D34 0%, #112A4A 60%, #0C1D34 100%);
  color:#fff;
  overflow:hidden;
  padding-bottom:64px;
}
.hero__media{
  display:block;
  width:100%;
  max-height:380px;
  overflow:hidden;
  position:relative;
}
.hero__media img{
  width:100%;
  height:auto;
  max-height:380px;
  object-fit:cover;
  display:block;
  filter:brightness(.7) saturate(1.1);
}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,29,52,0) 40%, rgba(12,29,52,.95) 100%);
  pointer-events:none;
}
.hero__content{
  position:relative;
  margin-top:-90px;
  text-align:center;
  z-index:2;
}
.hero__eyebrow{
  display:inline-block;
  background:rgba(236,98,43,.18);
  border:1px solid rgba(236,98,43,.45);
  color:#fff;
  padding:6px 16px;
  border-radius:var(--radius-pill);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin-bottom:18px;
}
.hero__bonus{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-weight:900;
  margin:0 0 26px;
  text-shadow:0 4px 24px rgba(0,0,0,.45);
}
.hero__bonus-line1{
  font-size:clamp(1.1rem, 3vw, 1.7rem);
  letter-spacing:.18em;
  color:rgba(255,255,255,.75);
  text-transform:uppercase;
}
.hero__bonus-line2{
  font-size:clamp(2.6rem, 8vw, 5.6rem);
  line-height:1;
  letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff 0%,#FFD8C0 50%,#EC622B 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__bonus-line2 strong{color:transparent;background:inherit;-webkit-background-clip:text;background-clip:text}
.hero__bonus-line3{
  font-size:clamp(1.1rem, 3vw, 1.9rem);
  letter-spacing:.08em;
  color:#FFD8C0;
}
.hero__cta{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;
  margin-bottom:18px;
}
.hero__cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}
.hero__cta .btn--ghost:hover{background:rgba(255,255,255,.10);border-color:#fff}
.hero__terms{
  font-size:.82rem;
  color:rgba(255,255,255,.6);
  max-width:560px;margin:0 auto;
}

/* ---------- Category nav (under hero) ---------- */
.cat-nav{
  background:var(--c-bg-alt);
  border-bottom:1px solid var(--c-line);
  position:sticky;top:var(--header-h);z-index:50;
}
.cat-nav__inner{
  display:flex;align-items:center;gap:8px;
  overflow-x:auto;
  padding:14px 24px;
  scrollbar-width:none;
}
.cat-nav__inner::-webkit-scrollbar{display:none}
.cat-nav__item{
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 16px;min-width:90px;
  color:var(--c-text-soft);
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  position:relative;
  transition:color .18s;
}
.cat-nav__item:hover{color:var(--c-text)}
.cat-nav__item.is-active{color:var(--c-accent)}
.cat-nav__item.is-active::before{
  content:"";position:absolute;top:-14px;left:10%;right:10%;height:3px;
  background:var(--c-accent);border-radius:3px;
}
.cat-nav__icon{
  font-size:1.7rem;display:block;line-height:1;
  filter:grayscale(1);opacity:.85;
}
.cat-nav__item.is-active .cat-nav__icon{filter:none;opacity:1}

/* ---------- Sections ---------- */
section{padding:64px 0}
.games,.live,.promos,.providers,.who,.faq{padding:80px 0}
.games--alt{background:var(--c-bg-alt)}
.games--live{background:linear-gradient(180deg,#0C1D34 0%, #102A4A 100%);color:#fff}
.games--live h2,.games--live h3{color:#fff}
.games--live .section-sub,.games--live .section-eyebrow{color:rgba(255,255,255,.7)}

.section-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:32px;flex-wrap:wrap;
}
.section-head--center{text-align:center;justify-content:center}
.section-head--center > div{max-width:760px;margin:0 auto}

.section-eyebrow{
  display:inline-block;
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.18em;
  color:var(--c-primary);
  margin-bottom:10px;
}
.section-eyebrow--hot{color:var(--c-primary)}
.section-eyebrow--live{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(230,57,70,.16);color:#fff;
  padding:6px 12px;border-radius:var(--radius-pill);
  font-size:.72rem;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;background:var(--c-live);display:inline-block;
  box-shadow:0 0 0 0 rgba(230,57,70,.6);
  animation:livePulse 1.5s infinite;
}
@keyframes livePulse{
  0%{box-shadow:0 0 0 0 rgba(230,57,70,.6)}
  70%{box-shadow:0 0 0 10px rgba(230,57,70,0)}
  100%{box-shadow:0 0 0 0 rgba(230,57,70,0)}
}

.section-title{
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  margin:0 0 8px;
  letter-spacing:-.02em;
}
.section-sub{
  font-size:1rem;
  color:var(--c-text-soft);
  max-width:680px;margin:0;
}
.games--live .section-sub{color:rgba(255,255,255,.75)}
.section-cta-link{
  font-weight:800;
  color:var(--c-primary);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-size:.85rem;
}
.games--live .section-cta-link{color:var(--c-primary-2)}
.section-foot{display:flex;justify-content:center;margin-top:36px}

/* ---------- Filter tabs ---------- */
.filter-tabs{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:24px;
}
.filter-tab{
  display:inline-flex;align-items:center;
  padding:10px 18px;
  border-radius:var(--radius-pill);
  background:#fff;
  border:1px solid var(--c-line);
  color:var(--c-text-soft);
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.03em;
  transition:.18s;
}
.filter-tab:hover{border-color:var(--c-text);color:var(--c-text)}
.filter-tab.is-active{
  background:var(--c-bg-dark);color:#fff;border-color:var(--c-bg-dark);
}
.games--live .filter-tab{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#fff}
.games--live .filter-tab.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}

/* ---------- Jackpot strip ---------- */
.jackpot-strip{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
  background:linear-gradient(120deg,#FFB400 0%,var(--c-primary) 50%,#A02E1A 100%);
  color:#fff;
  padding:18px 28px;
  border-radius:var(--radius-lg);
  margin-bottom:28px;
  box-shadow:var(--shadow);
  transition:.2s;
}
.jackpot-strip:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.jackpot-strip__label{
  font-size:.78rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(255,255,255,.85);
}
.jackpot-strip__amount{
  font-size:clamp(1.6rem,4vw,2.6rem);
  font-weight:900;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
.jackpot-strip__cta{
  font-weight:900;text-transform:uppercase;letter-spacing:.06em;
  background:rgba(0,0,0,.22);padding:10px 18px;border-radius:var(--radius-pill);
}

/* ---------- Game cards ---------- */
.games-grid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:18px;
}
.game-card{
  position:relative;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:.2s;
  min-width:0;
  box-shadow:var(--shadow-sm);
}
.games--alt .game-card{background:#fff}
.games--live .game-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
.game-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--c-primary)}

.game-card__media{
  position:relative;
  aspect-ratio: 4 / 3;
  overflow:hidden;
  background:#0C1D34;
}
.game-card__media img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform .35s ease;
}
.game-card:hover .game-card__media img{transform:scale(1.05)}

.game-card__badge{
  position:absolute;top:10px;left:10px;
  background:var(--c-accent);color:#fff;
  font-size:.66rem;font-weight:900;letter-spacing:.1em;
  padding:4px 8px;border-radius:6px;
  z-index:2;text-transform:uppercase;
}
.game-card__badge--hot{background:var(--c-primary)}

.game-card__body{
  padding:14px;
  display:flex;flex-direction:column;gap:6px;flex:1;
}
.game-card__title{
  font-size:.95rem;
  margin:0;
  color:var(--c-text);
  overflow-wrap:anywhere;
}
.games--live .game-card__title{color:#fff}
.game-card__provider{
  font-size:.74rem;color:var(--c-text-muted);
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.games--live .game-card__provider{color:rgba(255,255,255,.55)}
.game-card__actions{
  display:flex;gap:6px;margin-top:auto;padding-top:8px;
}
.game-card__actions .btn{flex:1;min-width:0}

/* ---------- Live tiles ---------- */
.live-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
}
.live-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  min-width:0;
  transition:.2s;
}
.live-card:hover{transform:translateY(-4px);border-color:var(--c-primary);box-shadow:var(--shadow-lg)}
.live-card__media{
  position:relative;
  aspect-ratio:16 / 10;
  overflow:hidden;
  background:#0C1D34;
}
.live-card__media img{width:100%;height:100%;object-fit:cover}
.live-card__live-tag{
  position:absolute;top:12px;left:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(230,57,70,.5);
  color:#fff;
  padding:5px 10px;border-radius:var(--radius-pill);
  font-size:.7rem;font-weight:900;letter-spacing:.1em;
}
.live-card__body{padding:18px;display:flex;flex-direction:column;gap:12px}
.live-card__title{color:#fff;font-size:1.1rem;margin:0}
.live-card__meta{
  display:flex;flex-wrap:wrap;gap:14px;
  font-size:.82rem;color:rgba(255,255,255,.75);
}
.live-card__meta strong{color:#fff}
.lang-flag{display:inline-flex;align-items:center;gap:4px}

/* ---------- Promotions ---------- */
.promos-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:20px;
  margin-bottom:36px;
}
.promo-card{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;flex-direction:column;
  min-width:0;
  transition:.2s;
  box-shadow:var(--shadow-sm);
}
.promo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--c-primary)}
.promo-card--lead{
  grid-column:span 1;
  background:linear-gradient(180deg,#FFE9DC 0%,#FFFFFF 60%);
  border:2px solid var(--c-primary);
}
.promo-card__media{aspect-ratio:16 / 9;overflow:hidden;background:#0C1D34}
.promo-card__media img{width:100%;height:100%;object-fit:cover}
.promo-card__body{padding:22px;display:flex;flex-direction:column;gap:10px;flex:1}
.promo-card__tag{
  display:inline-block;align-self:flex-start;
  background:var(--c-primary);color:#fff;
  font-size:.7rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--radius-pill);
}
.promo-card__title{font-size:1.15rem;margin:0;line-height:1.25}
.promo-card__sub{color:var(--c-text-soft);font-size:.92rem;margin:0}
.promo-card__list{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.promo-card__list li{
  font-size:.85rem;color:var(--c-text-soft);
  padding-left:18px;position:relative;
}
.promo-card__list li::before{
  content:"";position:absolute;left:0;top:7px;
  width:8px;height:8px;background:var(--c-accent);border-radius:50%;
}
.promo-card .btn{margin-top:auto}

.vip-banner{
  display:grid;grid-template-columns:1.4fr 1fr;gap:0;
  background:linear-gradient(120deg,#0C1D34 0%,#1A3868 60%,#0C1D34 100%);
  border-radius:var(--radius-lg);
  overflow:hidden;
  color:#fff;
  box-shadow:var(--shadow);
  transition:.2s;
}
.vip-banner:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.vip-banner__body{padding:36px;display:flex;flex-direction:column;gap:14px}
.vip-banner__eyebrow{
  font-size:.74rem;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--c-primary-2);
}
.vip-banner__title{font-size:clamp(1.6rem,3vw,2.2rem);margin:0;color:#fff}
.vip-banner__text{color:rgba(255,255,255,.78);max-width:540px}
.vip-banner__tiers{
  display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px;
}
.vip-banner__tiers span{
  padding:6px 12px;border-radius:var(--radius-pill);
  background:rgba(255,255,255,.08);
  font-size:.78rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;
}
.vip-banner .btn--primary{align-self:flex-start}
.vip-banner__media{position:relative;min-height:200px}
.vip-banner__media img{width:100%;height:100%;object-fit:cover}

/* ---------- Providers ---------- */
.providers{background:var(--c-bg-alt)}
.providers-strip{
  display:grid;
  grid-template-columns:repeat(8, minmax(0,1fr));
  gap:14px;
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:48px;
  box-shadow:var(--shadow-sm);
}
.provider-logo{
  display:flex;align-items:center;justify-content:center;
  padding:8px;
  border-radius:var(--radius-sm);
  transition:.2s;
  min-width:0;
  filter:grayscale(.6);
  opacity:.78;
}
.provider-logo:hover{filter:grayscale(0);opacity:1;background:var(--c-bg-alt)}
.provider-logo img{
  width:100%;
  max-height:48px;
  object-fit:contain;
}

.seo-block{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  padding:36px clamp(20px,3vw,48px);
  box-shadow:var(--shadow-sm);
}
.seo-block h2{font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 16px;line-height:1.25}
.seo-block h3{font-size:clamp(1.15rem,1.8vw,1.4rem);margin:24px 0 10px;color:var(--c-primary)}
.seo-block p{color:var(--c-text-soft);font-size:1rem;line-height:1.7}
.seo-block ul{display:flex;flex-direction:column;gap:8px;margin:10px 0 16px;padding-left:0}
.seo-block ul li{
  position:relative;padding-left:22px;color:var(--c-text-soft);font-size:.96rem;line-height:1.5;
}
.seo-block ul li::before{
  content:"";position:absolute;left:0;top:9px;width:10px;height:10px;
  background:var(--c-primary);border-radius:50%;
}

/* ---------- Who we are ---------- */
.who{background:#fff}
.who-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:flex-start;
  margin-bottom:48px;
}
.who-text h3{margin:24px 0 8px;font-size:1.2rem;color:var(--c-primary)}
.who-text h3:first-child{margin-top:0}
.who-text p{color:var(--c-text-soft);font-size:1rem;line-height:1.7}
.who-cards{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
.trust-card{
  background:var(--c-bg-alt);
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  overflow:hidden;
  padding:0 0 20px;
  display:flex;flex-direction:column;
  transition:.2s;
}
.trust-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--c-primary)}
.trust-card__media{aspect-ratio:16 / 9;overflow:hidden;background:#0C1D34}
.trust-card__media img{width:100%;height:100%;object-fit:cover}
.trust-card h3{font-size:1.05rem;margin:16px 18px 6px;color:var(--c-text)}
.trust-card p{font-size:.88rem;color:var(--c-text-soft);margin:0 18px;line-height:1.5}

.stats-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
  background:linear-gradient(120deg,#0C1D34 0%,#1A3868 100%);
  border-radius:var(--radius-lg);
  padding:32px;
  color:#fff;
  margin-bottom:32px;
}
.stats-row li{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;
}
.stats-row strong{
  font-size:clamp(1.6rem,3vw,2.4rem);
  color:var(--c-primary-2);
  font-weight:900;letter-spacing:-.02em;
}
.stats-row span{
  font-size:.85rem;color:rgba(255,255,255,.75);
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;
}

/* ---------- FAQ ---------- */
.faq{background:var(--c-bg-alt)}
.faq-list{display:flex;flex-direction:column;gap:14px;max-width:920px;margin:0 auto}
.faq-item{
  background:#fff;
  border:1px solid var(--c-line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.faq-item summary{
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:20px 24px;
  cursor:pointer;
  font-weight:800;
  font-size:1rem;
  color:var(--c-text);
  transition:background .18s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--c-bg-alt)}
.faq-item__chev{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--c-bg-alt);color:var(--c-primary);
  font-size:1.1rem;flex:0 0 32px;
  transition:transform .25s ease;
}
.faq-item[open] .faq-item__chev{transform:rotate(180deg);background:var(--c-primary);color:#fff}
.faq-item__body{
  padding:0 24px 22px;
  color:var(--c-text-soft);
  border-top:1px solid var(--c-line);
}
.faq-item__body h4{margin:18px 0 8px;color:var(--c-primary);font-size:1rem}
.faq-item__body p{margin:12px 0;line-height:1.7;font-size:.97rem}
.faq-item__body ul,.faq-item__body ol{margin:10px 0 14px;padding-left:0;display:flex;flex-direction:column;gap:6px}
.faq-item__body ul li,.faq-item__body ol li{
  position:relative;padding-left:24px;font-size:.94rem;line-height:1.5;
}
.faq-item__body ul li::before{
  content:"";position:absolute;left:4px;top:9px;width:8px;height:8px;
  background:var(--c-accent);border-radius:50%;
}
.faq-item__body ol{counter-reset:faqstep}
.faq-item__body ol li{counter-increment:faqstep}
.faq-item__body ol li::before{
  content:counter(faqstep);position:absolute;left:0;top:1px;
  width:18px;height:18px;border-radius:50%;
  background:var(--c-primary);color:#fff;
  font-size:.7rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}

/* ---------- Footer ---------- */
.site-footer{background:#fff;color:var(--c-text);border-top:1px solid var(--c-line);margin-top:0}
.footer__inner{
  display:grid;grid-template-columns:280px 1fr;gap:48px;
  padding-top:64px;padding-bottom:48px;
}
.footer-brand{display:flex;flex-direction:column;gap:14px}
.footer-tagline{
  font-weight:800;color:var(--c-primary);
  font-size:.95rem;letter-spacing:.04em;line-height:1.3;
  margin:0;
}
.footer-cols{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;
}
.footer-col h4{
  font-size:.82rem;font-weight:900;letter-spacing:.18em;
  text-transform:uppercase;margin:0 0 14px;color:var(--c-text);
}
.footer-col ul{display:flex;flex-direction:column;gap:8px}
.footer-col a{color:var(--c-text-soft);font-size:.92rem;transition:color .18s}
.footer-col a:hover{color:var(--c-primary)}

.footer-payments{border-top:1px solid var(--c-line);background:var(--c-bg-alt)}
.footer-payments__inner{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:22px;padding-bottom:22px;
}
.footer-payments__label{
  font-size:.78rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--c-text-muted);
}
.footer-payments__list{display:flex;flex-wrap:wrap;gap:10px}
.pay-chip{
  display:inline-flex;align-items:center;
  padding:8px 14px;border-radius:8px;
  background:#fff;border:1px solid var(--c-line);
  font-weight:800;font-size:.78rem;letter-spacing:.06em;
  color:var(--c-text-soft);transition:.18s;
}
.pay-chip:hover{border-color:var(--c-primary);color:var(--c-primary)}

.footer-legal{border-top:1px solid var(--c-line);background:#fff}
.footer-legal__inner{
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  padding-top:22px;padding-bottom:22px;
}
.footer-legal__warn{margin:0;color:var(--c-text-soft);font-size:.88rem}
.footer-legal__seals{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.seal{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:var(--c-primary);color:#fff;font-weight:900;font-size:.85rem;
  letter-spacing:.04em;
  box-shadow:var(--shadow-cta);
}
.seal-text{
  font-size:.82rem;color:var(--c-text-soft);font-weight:700;
  padding:6px 10px;border:1px solid var(--c-line);border-radius:var(--radius-pill);
}
.seal-text:hover{color:var(--c-primary);border-color:var(--c-primary)}

.footer-bottom{background:var(--c-bg-dark);color:rgba(255,255,255,.65)}
.footer-bottom__inner{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding-top:18px;padding-bottom:18px;
  font-size:.85rem;
}
.footer-bottom a{color:rgba(255,255,255,.85)}
.footer-bottom a:hover{color:var(--c-primary-2)}

/* ---------- Catfish ---------- */
.catfish{
  position:fixed;left:0;right:0;bottom:0;z-index:200;
  padding:10px 14px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom,0));
  background:linear-gradient(180deg,#FFB400 0%,var(--c-primary) 100%);
  color:#fff;
  box-shadow:0 -10px 24px rgba(12,29,52,.25);
  animation:catfishIn .35s ease;
}
@keyframes catfishIn{from{transform:translateY(100%)}to{transform:translateY(0)}}
.catfish__inner{
  display:flex;align-items:center;gap:14px;
  max-width:calc(100% - 8px);margin:0 auto;
}
.catfish__text{
  display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0;
  overflow:hidden;
}
.catfish__text strong{font-size:.95rem;letter-spacing:.02em;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.catfish__text span{font-size:.78rem;opacity:.9;
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.catfish .btn--primary{
  background:#0C1D34;border-color:#0C1D34;box-shadow:0 6px 14px rgba(0,0,0,.25);
  flex:0 0 auto;
}
.catfish .btn--primary:hover{background:#1A3868;border-color:#1A3868}
.catfish__close{
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.2);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:1.4rem;line-height:1;flex:0 0 34px;
  transition:.18s;
}
.catfish__close:hover{background:rgba(0,0,0,.4);transform:rotate(90deg)}

/* ---------- Exit popup ---------- */
.exit-popup{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  animation:fadeIn .25s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.exit-popup__overlay{
  position:absolute;inset:0;
  background:rgba(12,29,52,.78);
  backdrop-filter:blur(4px);
}
.exit-popup__box{
  position:relative;
  background:linear-gradient(180deg,#0C1D34 0%, #1A3868 100%);
  border:2px solid var(--c-primary);
  border-radius:var(--radius-lg);
  color:#fff;text-align:center;
  padding:48px 28px 32px;
  width:100%;max-width:480px;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  animation:popIn .3s cubic-bezier(.4,1.6,.6,1);
}
@keyframes popIn{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.exit-popup__close{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:1.5rem;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;transition:.18s;
}
.exit-popup__close:hover{background:var(--c-primary);transform:rotate(90deg)}
.exit-popup__eyebrow{
  display:inline-block;
  background:rgba(236,98,43,.2);border:1px solid rgba(236,98,43,.5);
  color:#fff;
  padding:6px 14px;border-radius:var(--radius-pill);
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:16px;
}
.exit-popup__title{
  font-size:clamp(1.4rem,4vw,1.9rem);
  letter-spacing:-.01em;
  margin:0 0 14px;line-height:1.15;
}
.exit-popup__title span{color:var(--c-primary-2);display:inline-block}
.exit-popup p{color:rgba(255,255,255,.78);margin:0 0 22px;font-size:.92rem}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* ---------- ≤ 1180px: collapse some header items ---------- */
@media (max-width: 1180px){
  .header-app-pill{display:none}
  .lang-pill{display:none}
}

/* ---------- ≤ 1024px: tablet ---------- */
@media (max-width: 1024px){
  :root{--space-section:72px}
  .games-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .live-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .providers-strip{grid-template-columns:repeat(4,minmax(0,1fr))}
  .who-grid{grid-template-columns:1fr;gap:28px}
  .footer__inner{grid-template-columns:1fr;gap:32px}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vip-banner{grid-template-columns:1fr}
  .vip-banner__media{min-height:180px;max-height:240px;order:-1}
}

/* ---------- ≤ 860px: collapse desktop nav, show burger ---------- */
@media (max-width: 860px){
  .burger{display:flex}
  .primary-nav{display:none}
  .header-cta .btn--login{display:none}
  .mobile-nav.is-open{display:block}
  .header__inner{gap:12px}
  .logo{flex:1}
  .logo img{height:36px}
}

/* ---------- ≤ 720px: mobile ---------- */
@media (max-width: 720px){
  section,.games,.live,.promos,.providers,.who,.faq{padding:48px 0}
  .container{padding:0 18px}
  .games-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .live-grid{grid-template-columns:1fr;gap:16px}
  .promos-grid{grid-template-columns:1fr;gap:16px}
  .providers-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
  .who-cards{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr;gap:24px}
  .stats-row{grid-template-columns:repeat(2,minmax(0,1fr));padding:24px}
  .section-head{flex-direction:column;align-items:flex-start;gap:8px}
  .section-cta-link{align-self:flex-end}
  .hero__content{margin-top:-60px}
  .hero__cta{flex-direction:column}
  .hero__cta .btn{width:100%}
  .jackpot-strip{flex-direction:column;text-align:center;padding:18px}
  .seo-block{padding:24px 18px}
  .faq-item summary{padding:16px 18px;font-size:.95rem}
  .faq-item__body{padding:0 18px 18px}
  .footer-legal__inner{flex-direction:column;align-items:flex-start;text-align:left}
  .vip-banner__body{padding:24px}
  .promo-card--lead{grid-column:span 1}
  .header-cta .btn--register{padding:10px 14px;font-size:.85rem;min-height:42px}
  .pay-chip{padding:6px 10px;font-size:.72rem}
  .seal{width:38px;height:38px;font-size:.78rem}
  .game-card__title{font-size:.85rem}
  .game-card__provider{font-size:.68rem}
}

/* ---------- ≤ 480px: small mobile ---------- */
@media (max-width: 480px){
  :root{--header-h:64px}
  .header-cta .btn--register{font-size:.78rem;padding:8px 12px;min-height:40px}
  .logo img{height:30px;max-width:100px}
  .footer__inner{padding-top:48px}
  .filter-tabs{gap:6px}
  .filter-tab{font-size:.78rem;padding:8px 12px}
  .game-card__actions{flex-direction:column}
  .game-card__actions .btn{width:100%}
  .hero__bonus-line2{font-size:2.6rem}
  .stats-row{padding:20px 16px;gap:12px}
  .promo-card__body{padding:18px}
  .seo-block{padding:20px 14px}
  .seo-block h2{font-size:1.4rem}
  .seo-block h3{font-size:1.1rem}
  .footer-legal__seals{gap:8px}
}

/* ---------- ≤ 360px: extra small ---------- */
@media (max-width: 360px){
  .header__inner{gap:8px}
  .header-cta .btn--register{padding:8px 10px}
  .games-grid{gap:10px}
  .game-card__body{padding:10px}
  .catfish__text strong{font-size:.82rem}
  .catfish__text span{font-size:.7rem}
}

/* ---------- Reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
}