/* Winza Bet Ethiopia: site stylesheet (loaded after main.css via site.json "css").
   Dark premium betting interface. Project palette from the brief:
   #120F20 page, #211A34 secondary surface, #2A2240 cards, gold #F6C54E (CTA), purple #C03BF0, pink #F24AA5.
   Mobile (<=1024px): the engine menu becomes a bottom bar Home / Sports / Games / Login / More. */
:root {
  --wz-bg: #120F20;
  --wz-bg-2: #211A34;
  --wz-card: #2A2240;
  --wz-card-2: #332950;
  --wz-gold: #F6C54E;
  --wz-purple: #C03BF0;
  --wz-pink: #F24AA5;
  --wz-text: #FFFFFF;
  --wz-muted: #B8B2C8;
  --wz-link: #F59BD2;
  --wz-line: rgba(255, 255, 255, .09);
  --wz-line-2: rgba(255, 255, 255, .16);
  --wz-grad: linear-gradient(135deg, #C03BF0, #F24AA5);

  --bg: var(--wz-bg);
  --bg-soft: var(--wz-bg-2);
  --tint: #1A1530;
  --tint-strong: var(--wz-card);
  --ink: var(--wz-text);
  --text: #E9E5F2;
  --muted: var(--wz-muted);
  --line: var(--wz-line);
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow: 0 8px 24px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, .45);
  --container: 1200px;
}

/* ---------- Base ---------- */
body { background: var(--wz-bg); color: var(--text); }
a { color: var(--wz-link); }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--wz-gold); outline-offset: 2px; }
h1, h2, h3 { color: #fff; }
h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.section { padding: 30px 0; }
.intro { color: var(--wz-muted); }
.prose li::marker { color: var(--wz-pink); }
.prose strong { color: #fff; }
.band--soft { background: var(--wz-bg-2); }
.band--tint { background: linear-gradient(180deg, #1C1631, #171228); border-top: 1px solid var(--wz-line); border-bottom: 1px solid var(--wz-line); }

/* ---------- Buttons ---------- */
.btn { border-radius: 10px; box-shadow: 0 6px 18px rgba(246, 197, 78, .22); }
.btn:hover { filter: brightness(1.06); }
.btn--ghost { color: #fff; border-color: var(--wz-line-2); background: rgba(255, 255, 255, .03); box-shadow: none; }
.btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--wz-purple); }

/* ---------- Header ---------- */
.site-header { background: rgba(18, 15, 32, .94); border-bottom: 1px solid var(--wz-line); backdrop-filter: saturate(1.3) blur(8px); }
.header__inner { min-height: 64px; }
.logo { color: #fff; gap: 10px; font-weight: 900; letter-spacing: .04em; font-size: 1.12rem; flex-wrap: wrap; row-gap: 0; }
.logo span { background: linear-gradient(90deg, #fff 0 55%, var(--wz-gold)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo img { border-radius: 9px; }

@media (min-width: 1025px) {
  .site-nav { margin-left: auto; }
  .site-nav ul { align-items: center; gap: 2px; }
  .site-nav a { color: rgba(255, 255, 255, .78); font-size: .92rem; padding: 8px 11px; }
  .site-nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
  .site-nav a[aria-current="page"] { color: #fff; background: transparent; box-shadow: inset 0 -2px 0 var(--wz-pink); border-radius: 0; }
  /* Login / Register live in the header buttons (headerCta); the menu items stay in the mobile bar and footer */
  .site-nav li:nth-child(8), .site-nav li:nth-child(9) { display: none; }
}

/* ---------- Mobile bottom navigation (built from the engine menu) ---------- */
@media (max-width: 1024px) {
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  /* backdrop-filter would make the header the containing block of the fixed bar */
  .site-header { backdrop-filter: none; background: var(--wz-bg); }
  .site-nav, .site-nav.is-open {
    display: block; position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 45;
    background: rgba(24, 19, 42, .98); border-top: 1px solid var(--wz-line-2); border-bottom: 0; box-shadow: 0 -10px 30px rgba(0, 0, 0, .45);
    padding: 0 0 env(safe-area-inset-bottom);
  }
  .site-nav ul { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 0; }
  .site-nav li { grid-row: 1; min-width: 0; }
  .site-nav li:nth-child(4), .site-nav li:nth-child(5), .site-nav li:nth-child(6), .site-nav li:nth-child(7), .site-nav li:nth-child(9) { display: none; }
  .site-nav a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 62px; padding: 6px 2px; border-radius: 0; font-size: .72rem; font-weight: 700; color: var(--wz-muted); text-align: center; line-height: 1.15;
  }
  .site-nav a::before {
    content: ""; width: 22px; height: 22px; background: currentColor;
    -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
  }
  .site-nav a:hover { background: rgba(255, 255, 255, .04); color: #fff; }
  .site-nav a[aria-current="page"] { color: var(--wz-gold); background: transparent; box-shadow: inset 0 3px 0 var(--wz-gold); }
  .site-nav.is-open a[aria-current="page"] { box-shadow: none; }
  /* "More" sheet: the five remaining items open as a row above the bar */
  .site-nav.is-open li:nth-child(4), .site-nav.is-open li:nth-child(5), .site-nav.is-open li:nth-child(6), .site-nav.is-open li:nth-child(7), .site-nav.is-open li:nth-child(9) { display: block; grid-row: 1; }
  .site-nav.is-open li:nth-child(-n+3), .site-nav.is-open li:nth-child(8) { grid-row: 2; }
  .site-nav.is-open li:nth-child(8) { grid-column: 4; }
  .site-nav.is-open ul { border-top: 0; }
  .site-nav.is-open li:nth-child(n+4):not(:nth-child(8)) a { background: var(--wz-bg-2); border-bottom: 1px solid var(--wz-line); color: #fff; }

  .nav-toggle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    position: fixed; right: 0; bottom: env(safe-area-inset-bottom); z-index: 46; width: 20%; height: 62px; padding: 0; border-radius: 0; color: var(--wz-muted);
  }
  .nav-toggle span { width: 20px; height: 2px; margin: 2px 0; background: currentColor; }
  .nav-toggle::after { content: "More"; margin-top: 5px; font: 700 .72rem/1 var(--font); }
  .nav-toggle[aria-expanded="true"] { color: var(--wz-gold); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
  .header__inner { min-height: 58px; }
}
/* icons for the bar (24px stroke, same style as the engine icon set) */
.site-nav li:nth-child(1) a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.site-nav li:nth-child(2) a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5l4 2.9-1.5 4.6h-5L8 10.4zM12 3v4.5M16 10.4l4.3-1.4M14.5 15l2.7 3.7M9.5 15l-2.7 3.7M8 10.4L3.7 9'/%3E%3C/svg%3E"); }
.site-nav li:nth-child(3) a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.site-nav li:nth-child(4) a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M5 12v8h14v-8M12 8v12M12 8c-1.2-2.6-5-3.2-5-1.2S10 8 12 8zm0 0c1.2-2.6 5-3.2 5-1.2S14 8 12 8z'/%3E%3C/svg%3E"); }
.site-nav li:nth-child(5) a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='2.5' width='10' height='19' rx='2'/%3E%3Cpath d='M11 18h2'/%3E%3C/svg%3E"); }
.site-nav li:nth-child(6) a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h14a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h11v3'/%3E%3Cpath d='M20 12h-4a1.5 1.5 0 0 0 0 3h4'/%3E%3C/svg%3E"); }
.site-nav li:nth-child(7) a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14v-2a8 8 0 0 1 16 0v2'/%3E%3Crect x='3' y='14' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='14' width='4' height='6' rx='1.5'/%3E%3C/svg%3E"); }
.site-nav li:nth-child(8) a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.site-nav li:nth-child(9) a { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 21c0-4 3.1-6 7-6 1.4 0 2.6.2 3.6.7M18 14v6M15 17h6'/%3E%3C/svg%3E"); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs ol { color: var(--wz-muted); }
.breadcrumbs a { color: var(--wz-muted); }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }

/* ---------- Hero ---------- */
.hero-dark .hero {
  background:
    radial-gradient(700px 380px at 88% 0%, rgba(192, 59, 240, .42), transparent 62%),
    radial-gradient(520px 300px at 70% 110%, rgba(242, 74, 165, .28), transparent 65%),
    linear-gradient(180deg, #17122A, var(--wz-bg));
  border-bottom: 1px solid var(--wz-line);
  padding: 68px 0 52px;
}
.hero-dark .hero::before { width: 380px; height: 380px; right: 4%; top: 50%; transform: translateY(-50%); background: none; border: 1px solid rgba(246, 197, 78, .14); }
.hero-dark .hero::after { width: 260px; height: 260px; right: calc(4% + 60px); left: auto; top: 50%; bottom: auto; transform: translateY(-50%); background: none; border: 1px dashed rgba(255, 255, 255, .1); }
.hero-dark .hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.25rem); letter-spacing: -.025em; }
.hero-dark .hero h1::after { content: ""; display: block; width: 72px; height: 5px; margin-top: 16px; border-radius: 3px; background: linear-gradient(90deg, var(--wz-gold), var(--wz-pink), var(--wz-purple)); }
.hero-dark .hero__lead { color: rgba(255, 255, 255, .84); max-width: 600px; }
.hero-dark .badge { background: rgba(255, 255, 255, .06); border-color: var(--wz-line-2); color: #fff; }
.hero-dark .badge:last-child { background: rgba(246, 197, 78, .12); border-color: rgba(246, 197, 78, .4); color: var(--wz-gold); }
.hero-dark .hero__panel { background: rgba(33, 26, 52, .72); border: 1px solid var(--wz-line-2); border-radius: 18px; padding: 12px; box-shadow: var(--shadow-lg); backdrop-filter: blur(4px); }
.highlight, .hero-dark .highlight { background: var(--wz-card); border: 1px solid var(--wz-line); }
.highlight__icon, .hero-dark .highlight__icon { background: var(--wz-grad); color: #fff; }
.highlight__label { color: var(--wz-muted); }
.highlight__value { color: #fff; }
.hero-dark .highlight:first-child { border-color: rgba(246, 197, 78, .35); }
.hero-dark .highlight:first-child .highlight__icon { background: var(--wz-gold); color: var(--wz-bg); }

/* page motifs */
.style-hero-home .hero::before { content: "WINZA"; right: -10px; top: auto; bottom: -.2em; transform: none; width: auto; height: auto; border: 0; border-radius: 0; font-size: clamp(110px, 18vw, 260px); font-weight: 900; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px rgba(192, 59, 240, .2); }
.style-hero-home .hero::after { display: none; }
.style-hero-sports .hero::before { border-radius: 0; width: 2px; height: auto; top: 0; bottom: 0; right: 28%; transform: none; border: 0; background: linear-gradient(transparent, rgba(255, 255, 255, .1), transparent); }
.style-hero-sports .hero::after { width: 300px; height: 300px; right: calc(28% - 149px); border-style: solid; border-color: rgba(255, 255, 255, .08); }
.style-hero-login .hero::before, .style-hero-register .hero::before { border-radius: 40px; transform: translateY(-50%) rotate(45deg); }
.style-hero-bonus .hero::before { content: "%"; border: 0; width: auto; height: auto; right: 6%; font-size: 360px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 3px rgba(246, 197, 78, .14); }
.style-hero-bonus .hero::after { display: none; }
.style-hero-pay .hero::before { content: "ETB"; border: 0; width: auto; height: auto; right: 4%; font-size: 200px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 2px rgba(192, 59, 240, .2); }
.style-hero-pay .hero::after { display: none; }
.style-hero-app .hero__panel { max-width: 320px; justify-self: center; border-radius: 36px; padding: 26px 14px; border: 2px solid var(--wz-line-2); box-shadow: 0 0 0 8px #1B1530, var(--shadow-lg); }
.style-hero-games .hero::before { border-radius: 24px; transform: translateY(-50%) rotate(12deg); border-color: rgba(242, 74, 165, .22); }
.style-hero-games .hero::after { border-radius: 18px; transform: translateY(-50%) rotate(-8deg); }

@media (max-width: 900px) {
  .hero-dark .hero::before, .hero-dark .hero::after { opacity: .45; }
  .style-hero-bonus .hero::before { font-size: 220px; right: -20px; }
  .style-hero-pay .hero::before { font-size: 120px; right: -10px; top: 20%; }
  .style-hero-app .hero__panel { max-width: none; border-radius: 22px; box-shadow: var(--shadow-lg); padding: 12px; }
}
@media (max-width: 700px) {
  .hero-dark .hero { padding: 54px 0 34px; }
  .hero-dark .hero h1 { font-size: 2.1rem; }
  .hero__lead { font-size: 1.02rem; }
  .style-hero-home .hero::before { font-size: 96px; bottom: -.12em; }
}

/* ---------- Cards ---------- */
.fact, .feature, .step__card, .pc, .verdict, .summary, .panel, .toc, .faq details, .related {
  background: var(--wz-card); border: 1px solid var(--wz-line); box-shadow: var(--shadow-sm);
}
.band .fact, .band .feature, .band .step__card { background: var(--wz-card); }
.feature { position: relative; border-radius: var(--radius); transition: transform .18s, border-color .18s, box-shadow .18s; }
.feature:hover { border-color: rgba(192, 59, 240, .5); box-shadow: var(--shadow); }
.feature p { color: var(--wz-muted); }
.feature__icon, .fact__icon, .step__icon, .cell-icon { background: rgba(192, 59, 240, .16); color: #E7A6FF; }
.feature__icon { font-size: .82rem; font-weight: 900; letter-spacing: .02em; color: #fff; background: var(--wz-grad); }
.fact { border-left: 3px solid var(--wz-purple); }
.facts dt { color: var(--wz-muted); }
.facts dd { color: #fff; }
.fact__note { color: var(--wz-muted); }
.panel { border-top: 3px solid var(--wz-pink); }
.callout { background: rgba(192, 59, 240, .1); border-left-color: var(--wz-purple); }

/* Quick access tiles: the whole card is the link */
.style-quick .features { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.style-quick .feature { padding: 18px 18px 18px 74px; min-height: 92px; }
.style-quick .feature__icon { position: absolute; left: 16px; top: 18px; margin: 0; width: 44px; height: 44px; }
.style-quick .feature h3 { font-size: 1.02rem; margin-bottom: .2em; }
.style-quick .feature p { font-size: .9rem; line-height: 1.45; }
.style-quick .feature a { color: var(--wz-muted); text-decoration: none; }
.style-quick .feature a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.style-quick .feature:hover { transform: translateY(-2px); border-color: var(--wz-gold); }
.style-quick .feature:hover h3 { color: var(--wz-gold); }
.style-quick .feature:has(a:focus-visible) { outline: 3px solid var(--wz-gold); outline-offset: 2px; }
.style-quick .feature a:focus-visible { outline: 0; }

/* Sports cards */
.style-sport .features { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.style-sport .feature { padding: 18px; background: linear-gradient(160deg, var(--wz-card), #221B37); }
.style-sport .feature:first-child { border-color: rgba(246, 197, 78, .4); }
.style-sport .feature:first-child .feature__icon { background: var(--wz-gold); color: var(--wz-bg); }

/* Competition chips */
.style-chips .prose > ul { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; list-style: none; max-width: none; margin-bottom: 1.1em; }
.style-chips .prose > ul li { margin: 0; padding: 10px 16px 10px 40px; position: relative; border-radius: 12px; background: var(--wz-bg-2); border: 1px solid var(--wz-line-2); color: #fff; font-weight: 700; font-size: .95rem; }
.style-chips .prose > ul li::before { content: ""; position: absolute; left: 14px; top: 50%; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 19%), var(--wz-grad); }
.style-chips .prose > ul li:nth-child(3)::before { background: radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 19%), linear-gradient(135deg, #2FA35A 33%, var(--wz-gold) 33% 66%, #D9443C 66%); }
.style-chips .prose > ul li:nth-child(4)::before { background: radial-gradient(circle at 35% 35%, #fff 0 18%, transparent 19%), linear-gradient(135deg, var(--wz-gold), #E07A1F); }
.style-chips .section { padding-top: 0; }

/* Sports category bar (horizontal scroll on mobile) */
.style-sportbar .section { padding: 18px 0 4px; }
.style-sportbar .prose > ul { display: flex; gap: 8px; padding: 0 0 6px; margin: 0; list-style: none; max-width: none; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.style-sportbar .prose > ul li { margin: 0; flex: none; }
.style-sportbar .prose > ul a { display: block; padding: 10px 18px; border-radius: 999px; background: var(--wz-bg-2); border: 1px solid var(--wz-line-2); color: #fff; text-decoration: none; font-weight: 700; font-size: .92rem; white-space: nowrap; }
.style-sportbar .prose > ul li:first-child a { background: var(--wz-gold); color: var(--wz-bg); border-color: var(--wz-gold); }
.style-sportbar .prose > ul a:hover { border-color: var(--wz-pink); }

/* League crests */
.style-league .features { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.style-league .feature { padding: 16px 16px 16px 76px; min-height: 84px; }
.style-league .feature__icon { position: absolute; left: 16px; top: 16px; margin: 0; width: 46px; height: 46px; border-radius: 50%; font-size: .8rem; }
.style-league .feature:nth-child(3) .feature__icon { background: linear-gradient(135deg, #2FA35A 33%, var(--wz-gold) 33% 66%, #D9443C 66%); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.style-league .feature:nth-child(6) .feature__icon { background: linear-gradient(135deg, var(--wz-gold), #E07A1F); color: var(--wz-bg); }
.style-league .feature h3 { font-size: 1rem; margin-bottom: .15em; }
.style-league .feature p { font-size: .9rem; }

/* Market tiles: gold monospace labels */
.style-markets .features { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.style-markets .feature__icon { width: auto; min-width: 56px; padding: 0 10px; height: 36px; border-radius: 8px; background: rgba(246, 197, 78, .12); border: 1px solid rgba(246, 197, 78, .35); color: var(--wz-gold); font: 800 .9rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; margin-bottom: 12px; }

/* Game tiles: abstract CSS artwork per category */
.style-games .features { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.style-games .feature { overflow: hidden; padding: 112px 18px 18px; }
.style-games .feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 96px; background: var(--art, var(--wz-grad)); border-bottom: 1px solid var(--wz-line); }
.style-games .feature__icon { position: absolute; left: 18px; top: 26px; margin: 0; width: 46px; height: 46px; background: rgba(18, 15, 32, .55); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(2px); }
.style-games .feature:hover { transform: translateY(-2px); }
.style-games .feature:nth-child(1) { --art: linear-gradient(160deg, transparent 0 58%, rgba(246, 197, 78, .9) 58% 61%, transparent 61%), radial-gradient(120px 80px at 85% 20%, rgba(246, 197, 78, .45), transparent 70%), linear-gradient(135deg, #3A1D5C, #C03BF0); }
.style-games .feature:nth-child(2) { --art: radial-gradient(circle at 70% 40%, #fff 0 9px, transparent 10px), radial-gradient(circle at 84% 64%, var(--wz-gold) 0 9px, transparent 10px), radial-gradient(circle at 58% 70%, var(--wz-pink) 0 9px, transparent 10px), linear-gradient(135deg, #2A1748, #7A2BB0); }
.style-games .feature:nth-child(3) { --art: repeating-linear-gradient(90deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 26px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .14) 0 2px, transparent 2px 26px), linear-gradient(135deg, #5B1C4A, #F24AA5); }
.style-games .feature:nth-child(4) { --art: radial-gradient(circle at 78% 50%, transparent 0 22px, rgba(255, 255, 255, .35) 23px 25px, transparent 26px), linear-gradient(90deg, transparent 0 77%, rgba(255, 255, 255, .35) 77% 78%, transparent 78%), linear-gradient(135deg, #14402F, #2FA35A); }
.style-games .feature:nth-child(5) { --art: repeating-conic-gradient(from 0deg at 82% 50%, rgba(246, 197, 78, .55) 0 15deg, transparent 15deg 30deg), linear-gradient(135deg, #3B1530, #8E2A6B); }
.style-games .feature:nth-child(6) { --art: linear-gradient(115deg, transparent 0 48%, rgba(246, 197, 78, .8) 48% 52%, transparent 52%), linear-gradient(135deg, #1F1A4A, #C03BF0); }

/* Keno / Bingo duo */
.style-duo .features { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.style-duo .feature { padding: 26px; border-top: 3px solid var(--wz-pink); }
.style-duo .feature:last-child { border-top-color: var(--wz-gold); }
.style-duo .feature p { font-size: 1rem; }

/* Payment method cards */
.style-pay .features { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.style-pay .feature { padding: 18px; }
.style-pay .feature h3 { font-size: 1.05rem; }

/* Bonus conditions: compact */
.style-conditions .features { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.style-conditions .feature { padding: 18px; }

/* Promo panel (first deposit offer) */
.style-promo .facts { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.style-promo .fact { background: linear-gradient(150deg, #3A1D5C, var(--wz-card)); border: 1px solid rgba(192, 59, 240, .45); border-left: 3px solid var(--wz-gold); }
.style-promo .fact__icon { background: var(--wz-gold); color: var(--wz-bg); }
.style-promo .facts dd { font-size: 1.6rem; font-weight: 900; color: var(--wz-gold); letter-spacing: -.01em; }
.style-promo .note { display: inline-block; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px dashed var(--wz-line-2); color: #fff; }

/* Mobile card + agent card */
.style-mobile .panel { background: radial-gradient(420px 220px at 100% 0%, rgba(192, 59, 240, .28), transparent 70%), var(--wz-card); padding-left: 120px; position: relative; }
.style-mobile .panel::before { content: ""; position: absolute; left: 36px; top: 34px; width: 56px; height: 96px; border-radius: 12px; border: 3px solid rgba(255, 255, 255, .5); background: linear-gradient(180deg, transparent 0 16%, rgba(192, 59, 240, .5) 16% 40%, rgba(242, 74, 165, .4) 40% 62%, rgba(246, 197, 78, .5) 62% 84%, transparent 84%); }
.style-agent-card .panel { background: linear-gradient(150deg, #1A1530, var(--wz-card)); border: 1px solid var(--wz-line-2); border-top: 3px solid var(--wz-gold); padding-left: 104px; position: relative; }
.style-agent-card .panel::before { content: ""; position: absolute; left: 34px; top: 34px; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, #fff 0 7px, transparent 8px), radial-gradient(ellipse 14px 10px at 50% 86%, #fff 0 98%, transparent 100%), var(--wz-grad); }
@media (max-width: 700px) {
  .style-mobile .panel { padding-left: 20px; padding-top: 128px; }
  .style-mobile .panel::before { left: 20px; top: 22px; }
  .style-agent-card .panel { padding-left: 20px; padding-top: 88px; }
  .style-agent-card .panel::before { left: 20px; top: 24px; }
}

/* Brand name variations: quiet strip */
.style-variations .prose { padding: 18px 22px; border-radius: var(--radius); border: 1px dashed var(--wz-line-2); background: rgba(255, 255, 255, .02); }
.style-variations .prose h2 { font-size: 1.15rem; }
.style-variations .prose p { margin: 0; color: var(--wz-muted); font-size: .95rem; }

/* ---------- Steps ---------- */
.steps::before { background: linear-gradient(var(--wz-purple), var(--wz-pink), transparent); opacity: .5; }
.step__num, .band .step__num, .band--tint .step__num { background: var(--wz-gold); color: var(--wz-bg); box-shadow: 0 0 0 5px var(--wz-bg); }
.band--soft .step__num { box-shadow: 0 0 0 5px var(--wz-bg-2); }
.band--tint .step__num { box-shadow: 0 0 0 5px #1B1530; }
.step__card p { color: var(--wz-muted); }

/* ---------- Tables ---------- */
.table-wrap { background: var(--wz-card); border-color: var(--wz-line); }
.compare thead th, .data-table thead th, .prose th { background: var(--wz-bg-2); color: #fff; }
.compare tbody tr:nth-child(even), .data-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .02); }
.prose table { border-color: var(--wz-line); }

/* ---------- FAQ ---------- */
.faq details { border-radius: 12px; }
.faq details[open] { border-color: rgba(192, 59, 240, .5); }
.faq summary { color: #fff; }
.faq summary:hover { background: rgba(255, 255, 255, .04); }
.faq summary::after { border-color: var(--wz-gold); }
.faq__answer p { color: #DCD6E8; }

/* ---------- Notice ---------- */
.notice { color: var(--text); }
.notice--info, .notice--important { background: rgba(192, 59, 240, .1); border-color: rgba(192, 59, 240, .4); }
.notice--info .notice__icon, .notice--important .notice__icon { color: #E7A6FF; }
.notice--warning { background: rgba(246, 197, 78, .08); border-color: rgba(246, 197, 78, .4); }
.notice--warning .notice__icon { color: var(--wz-gold); }
.notice__title { color: #fff; }

/* ---------- CTA banner ---------- */
.cta {
  background:
    radial-gradient(500px 220px at 100% 0%, rgba(246, 197, 78, .18), transparent 70%),
    radial-gradient(500px 260px at 0% 100%, rgba(242, 74, 165, .3), transparent 70%),
    linear-gradient(120deg, #3A1D5C, #211A34 60%);
  border: 1px solid rgba(192, 59, 240, .4);
}
.cta__note { color: var(--wz-muted); opacity: 1; }

/* ---------- Footer ---------- */
.site-footer { background: #0D0A18; border-top: 1px solid var(--wz-line); color: var(--wz-muted); padding: 40px 0 30px; }
.site-footer .container { display: grid; gap: 16px; }
.site-footer .container::before { content: "WINZA BET"; display: flex; align-items: center; min-height: 32px; padding-left: 42px; background: url("../img/favicon.svg") no-repeat left center / 32px 32px; color: #fff; font-weight: 900; letter-spacing: .04em; }
.footer-nav { margin: 0; gap: 8px; }
.footer-nav a { display: block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--wz-line-2); text-decoration: none; color: #fff; font-size: .88rem; }
.footer-nav a:hover { border-color: var(--wz-gold); color: var(--wz-gold); }
.site-footer .container > p { margin: 0; line-height: 1.6; }
.site-footer .container > p:not(.footer-rg):not(.footer-copy) { padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid var(--wz-line); }
.site-footer .container > p a { color: #fff; font-weight: 700; }
.footer-rg { display: flex; gap: 14px; align-items: center; border-color: rgba(246, 197, 78, .3); background: rgba(246, 197, 78, .04); padding: 14px 16px; }
.footer-rg::before { content: "21+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--wz-gold); color: var(--wz-gold); font-weight: 900; }
.footer-copy { color: #7D7690; font-size: .84rem; }

@media (max-width: 700px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .section { padding: 24px 0; }
  .style-quick .features, .style-sport .features, .style-games .features, .style-pay .features { grid-template-columns: 1fr 1fr; gap: 10px; }
  .style-quick .feature { padding: 64px 14px 14px; min-height: 0; }
  .style-quick .feature__icon { left: 14px; top: 14px; width: 38px; height: 38px; }
  .style-quick .feature p { font-size: .84rem; }
  .style-sport .feature, .style-pay .feature { padding: 14px; }
  .style-sport .feature p, .style-pay .feature p, .style-games .feature p { font-size: .84rem; line-height: 1.45; }
  .style-games .feature { padding: 92px 14px 14px; }
  .style-games .feature::before { height: 78px; }
  .style-games .feature__icon { top: 16px; left: 14px; }
  .feature h3 { font-size: 1rem; }
}
@media (max-width: 340px) {
  .style-quick .features, .style-sport .features, .style-games .features, .style-pay .features { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .style-promo .facts { grid-template-columns: 1fr 1fr; }
  .style-promo .facts dd { font-size: 1.3rem; }
}
/* pages without a hero (service pages): breadcrumbs back in the normal flow */
.hero-dark .breadcrumbs:has(+ main > .page-head:first-child) { position: static; }

/* ---------- Header buttons (headerCta -> /play.html) ---------- */
.header-cta { margin-left: 16px; }
.header-cta .btn { min-height: 40px; border-radius: 10px; }
.header-cta .btn--ghost { color: #fff; border-color: var(--wz-line-2); background: rgba(255, 255, 255, .03); }
.header-cta .btn--ghost:hover { border-color: var(--wz-purple); background: rgba(255, 255, 255, .08); }
@media (max-width: 1024px) {
  .site-header--cta .header__inner { flex-wrap: nowrap; }
  /* main.css sets top: 100% for headers with buttons; keep the bar pinned to the bottom */
  .site-header--cta .site-nav, .site-header--cta .site-nav.is-open { top: auto; }
  .header-cta { order: 0; width: auto; margin-left: auto; padding: 0; gap: 6px; }
  .header-cta .btn { flex: none; min-height: 38px; padding: 7px 12px; font-size: .86rem; }
}
@media (max-width: 360px) {
  .logo { font-size: .98rem; }
  .header-cta .btn { padding: 6px 10px; font-size: .8rem; }
}