/* Jogão Bet — site stylesheet (loaded after main.css via site.json "css").
   Motif: "arena" — dark night pitch, diagonal teal/lime slabs, pitch markings (centre circle, halfway line),
   chamfered "ticket" corners on buttons, badges and step numbers. Palette = site.json colors only. */
:root {
  --jg-night: #06151F;
  --jg-navy: #092238;
  --jg-navy-2: #0C2E44;
  --jg-teal: #23C6B4;
  --jg-lime: #B7EE57;
  --jg-ink-on: #06221F;
  --jg-line-dark: rgba(35, 198, 180, .32);
  --jg-chamfer: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --jg-slant: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

/* ---------- Header ---------- */
.site-header { background: var(--jg-night); border-bottom: 1px solid var(--jg-line-dark); backdrop-filter: none; }
.site-header .container { max-width: 1260px; }
.logo { color: #fff; }
.site-nav a { color: rgba(255, 255, 255, .8); }
.site-nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.site-nav a[aria-current="page"] { background: transparent; color: var(--jg-lime); box-shadow: inset 0 -3px 0 var(--jg-lime); border-radius: 0; }
.nav-toggle span { background: #fff; }
.header-cta .btn { min-height: 40px; }
.header-cta .btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .42); background: transparent; }
.header-cta .btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: var(--jg-teal); }
@media (min-width: 901px) and (max-width: 1220px) {
  .site-nav a { padding: 8px 8px; font-size: .88rem; }
  .header-cta .btn--sm { padding: 8px 12px; font-size: .86rem; }
}
@media (max-width: 900px) {
  .site-nav { background: var(--jg-night); border-bottom: 1px solid var(--jg-line-dark); }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--jg-lime); }
  .header-cta .btn { min-height: 44px; }
}

/* ---------- Buttons: chamfered "ticket" corners ---------- */
.btn:not(.btn--ghost):not(.btn--ghost-light) { border-radius: 0; clip-path: var(--jg-chamfer); box-shadow: none; }
.btn--ghost, .btn--ghost-light { border-radius: 6px; }

/* ---------- Hero: night pitch with diagonal slabs ---------- */
.hero-dark .hero {
  background:
    linear-gradient(112deg, transparent 0 57%, rgba(35, 198, 180, .24) 57% 71%, rgba(183, 238, 87, .17) 71% 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .028) 0 1px, transparent 1px 96px),
    radial-gradient(900px 420px at 78% -10%, rgba(35, 198, 180, .32), transparent 65%),
    var(--jg-night);
  border-bottom: 0; padding-bottom: 72px;
}
/* lime → teal stripe along the bottom edge */
.hero-dark .hero { box-shadow: inset 0 -5px 0 var(--jg-teal); }
/* halfway line + centre circle of the pitch */
.hero-dark .hero::before { width: 2px; height: auto; top: 0; bottom: 0; right: 300px; left: auto; border-radius: 0; background: linear-gradient(transparent, rgba(183, 238, 87, .16) 20%, rgba(183, 238, 87, .16) 80%, transparent); }
.hero-dark .hero::after { width: 460px; height: 460px; right: 71px; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); background: none; border: 2px solid rgba(183, 238, 87, .14); }

.hero-dark .hero h1 { color: #fff; }
.hero-dark .hero h1::after { content: ""; display: block; width: 84px; height: 6px; margin-top: 18px; background: linear-gradient(90deg, var(--jg-lime), var(--jg-teal)); clip-path: var(--jg-slant); }
.hero-dark .hero__lead { color: rgba(255, 255, 255, .84); }
.hero-dark .hero__lead a { color: var(--jg-lime); text-decoration-color: rgba(183, 238, 87, .5); }
.hero-dark .hero__lead a:hover { color: #fff; }
.hero-dark .hero__note { color: rgba(255, 255, 255, .62); }

/* badges: slanted tags, first one lime */
.hero-dark .badge { border: 0; border-radius: 0; clip-path: var(--jg-slant); padding: 6px 16px; background: rgba(35, 198, 180, .2); color: #E6FBF8; letter-spacing: .03em; text-transform: uppercase; font-size: .74rem; }
.hero-dark .badge:first-child { background: var(--jg-lime); color: var(--jg-ink-on); }

/* highlights: staircase of scoreboard plates */
.hero-dark .hero__panel { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 12px; }
.hero-dark .highlight { background: linear-gradient(90deg, rgba(35, 198, 180, .17), rgba(255, 255, 255, .03)); border: 1px solid var(--jg-line-dark); border-left: 4px solid var(--jg-lime); border-radius: 4px 14px 14px 4px; }
.hero-dark .highlight__icon { background: var(--jg-teal); color: var(--jg-ink-on); border-radius: 0; clip-path: var(--jg-chamfer); }
.hero-dark .highlight__label { color: var(--jg-lime); }
.hero-dark .highlight__value { color: #fff; font-size: 1.16rem; }
@media (min-width: 901px) {
  .hero-dark .highlight:nth-child(2) { margin-left: 28px; }
  .hero-dark .highlight:nth-child(3) { margin-left: 56px; }
}

/* screenshot in hero: offset teal/lime "plates" behind it */
.hero-dark .hero__media { position: relative; display: flex; justify-content: center; padding: 10px 36px 36px 10px; }
.hero-dark .hero__media .shot { border: 0; border-radius: 16px; box-shadow: 14px 14px 0 var(--jg-teal), 28px 28px 0 rgba(183, 238, 87, .45); }

/* Home: giant outlined brand watermark instead of the halfway line */
.style-hero-home .hero::before { content: "JOGÃO"; right: auto; left: -8px; top: auto; bottom: -.18em; width: auto; height: auto; background: none; font-size: clamp(110px, 17vw, 250px); font-weight: 900; line-height: 1; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px rgba(183, 238, 87, .2); white-space: nowrap; }

/* Reclame Aqui: scoreboard numbers */
.style-hero-score .highlight { border-left-color: var(--jg-teal); }
.style-hero-score .highlight__value { font-size: 1.9rem; font-weight: 900; color: var(--jg-lime); letter-spacing: -.02em; line-height: 1.1; }
.style-hero-score .hero::after { border-style: dashed; }

/* É confiável: document-like plates, calmer, lime only on the label */
.style-hero-trust .hero { background:
    linear-gradient(112deg, transparent 0 62%, rgba(35, 198, 180, .1) 62% 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 34px),
    var(--jg-night); }
.style-hero-trust .highlight { border-left-color: var(--jg-teal); background: rgba(255, 255, 255, .05); }
.style-hero-trust .highlight__value { font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* App: screenshot inside a phone bezel */
.style-hero-app .hero__media .shot { max-height: 520px; border: 9px solid #0E2533; border-radius: 34px; box-shadow: 0 0 0 2px var(--jg-teal), 18px 18px 0 rgba(183, 238, 87, .4); }

/* Login: lock-screen grid */
.style-hero-login .hero { background:
    radial-gradient(circle at 80% 50%, rgba(35, 198, 180, .22), transparent 45%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 48px),
    var(--jg-night); }
.style-hero-login .hero::after { border-radius: 28px; width: 380px; height: 380px; right: 110px; transform: translateY(-50%) rotate(45deg); }

/* Bonus: big percent watermark */
.style-hero-bonus .hero::before { content: "%"; right: 120px; left: auto; top: 50%; bottom: auto; transform: translateY(-50%); width: auto; height: auto; background: none; font-size: 380px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 3px rgba(183, 238, 87, .14); }
.style-hero-bonus .hero::after { display: none; }

/* Cassino: tilted game card */
.style-hero-casino .hero__media .shot { transform: rotate(3deg); max-height: 440px; box-shadow: -14px 14px 0 var(--jg-lime), -28px 28px 0 rgba(35, 198, 180, .5); }
.style-hero-casino .hero__media { padding: 10px 10px 36px 36px; }

@media (max-width: 900px) {
  .hero-dark .hero::before, .hero-dark .hero::after { opacity: .5; }
  .style-hero-bonus .hero::before { font-size: 240px; right: -20px; }
  .style-hero-home .hero::before { bottom: -.12em; }
}
@media (max-width: 700px) {
  .hero-dark .hero { padding-bottom: 46px; }
  .hero-dark .hero::after { width: 300px; height: 300px; right: -120px; }
  .hero-dark .hero::before { right: 30px; }
  .hero-dark .hero__media { padding: 4px 22px 22px 4px; }
  .hero-dark .hero__media .shot { box-shadow: 8px 8px 0 var(--jg-teal), 16px 16px 0 rgba(183, 238, 87, .45); }
  .style-hero-casino .hero__media { padding: 4px 4px 22px 22px; }
  .style-hero-casino .hero__media .shot { box-shadow: -8px 8px 0 var(--jg-lime), -16px 16px 0 rgba(35, 198, 180, .5); }
  .style-hero-app .hero__media .shot { max-height: 380px; border-width: 7px; border-radius: 26px; box-shadow: 0 0 0 2px var(--jg-teal), 10px 10px 0 rgba(183, 238, 87, .4); }
  .style-hero-score .highlight__value { font-size: 1.5rem; }
  .style-hero-home .hero::before { font-size: 96px; }
}

/* ---------- Cards ---------- */
.feature { border: 1px solid var(--line); border-top: 3px solid var(--jg-teal); border-radius: 4px 4px 14px 14px; }
.feature__icon { background: var(--jg-navy); color: var(--jg-lime); border-radius: 0; clip-path: var(--jg-chamfer); }
/* dark "game tiles" variant: "style": "tiles" on a feature_grid */
.style-tiles .feature { background: linear-gradient(160deg, var(--jg-navy-2), var(--jg-navy)); border: 0; border-bottom: 3px solid var(--jg-lime); border-radius: 14px 14px 4px 4px; box-shadow: var(--shadow); }
.style-tiles .feature:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.style-tiles .feature h3 { color: #fff; }
.style-tiles .feature p { color: rgba(255, 255, 255, .74); }
.style-tiles .feature a { color: var(--jg-lime); }
.style-tiles .feature__icon { background: var(--jg-teal); color: var(--jg-ink-on); }
.style-tiles .feature { transition: transform .2s, box-shadow .2s; }

/* facts: plates with a teal edge */
.fact { border-left: 4px solid var(--jg-teal); border-radius: 4px 14px 14px 4px; }
.fact__icon { background: var(--jg-navy); color: var(--jg-teal); }

/* content cards */
.panel { border-top: 4px solid var(--jg-teal); border-radius: 4px 4px 14px 14px; }
.prose li::marker { color: var(--jg-teal); }
.split__media .shot { box-shadow: 10px 10px 0 rgba(35, 198, 180, .3); }

/* ---------- Tables: navy scoreboard header ---------- */
.data-table thead th, .prose th { background: var(--jg-navy); color: #fff; }
.prose th { font-size: .82rem; letter-spacing: .03em; }
.table-wrap { border-top: 3px solid var(--jg-teal); }
.cell-icon { background: rgba(35, 198, 180, .14); color: var(--jg-navy); }
.data-table tbody tr:hover { background: rgba(35, 198, 180, .06); }

/* ---------- Steps: lime chamfered numbers on a dashed track ---------- */
.steps::before { background: none; border-left: 2px dashed rgba(35, 198, 180, .55); width: 0; }
.step__num, .band .step__num, .band--tint .step__num { background: var(--jg-lime); color: var(--jg-ink-on); border-radius: 0; clip-path: var(--jg-chamfer); box-shadow: none; font-weight: 900; }
.step__icon { background: var(--jg-navy); color: var(--jg-teal); }

/* ---------- Brand summary: dark aside ---------- */
.summary { border-top: 4px solid var(--jg-teal); }
.summary__aside { background: linear-gradient(160deg, var(--jg-navy-2), var(--jg-night)); border-left: 0; }
.summary__hl-icon { background: var(--jg-lime); color: var(--jg-ink-on); box-shadow: none; }
.summary__hl-label { color: var(--jg-teal); }
.summary__hl-value { color: #fff; }
.summary__aside .note { color: rgba(255, 255, 255, .65); }

/* ---------- FAQ ---------- */
.faq details { border-left: 4px solid var(--line); border-radius: 4px var(--radius-sm) var(--radius-sm) 4px; }
.faq details[open] { border-left-color: var(--jg-teal); }
.faq summary::after { border-color: var(--jg-teal); }

/* ---------- CTA banner: striped pitch ---------- */
.cta {
  background:
    repeating-linear-gradient(112deg, rgba(183, 238, 87, .06) 0 16px, transparent 16px 32px),
    linear-gradient(120deg, var(--jg-navy) 0%, var(--jg-night) 55%, #0A3A42 100%);
  border-left: 6px solid var(--jg-lime); border-radius: 6px 18px 18px 6px;
}
.cta__note { color: var(--jg-lime); opacity: 1; }

/* ---------- Footer: pitch-night block with brand row, pill nav and 18+ plate ---------- */
.site-footer { position: relative; overflow: hidden; margin-top: 56px; padding: 44px 0 30px; color: #A9BDC6;
  background: radial-gradient(700px 300px at 100% 0%, rgba(35, 198, 180, .16), transparent 70%), var(--jg-night);
  box-shadow: inset 0 5px 0 var(--jg-teal); }
.site-footer::after { content: ""; position: absolute; right: -140px; bottom: -200px; width: 420px; height: 420px; border-radius: 50%; border: 2px solid rgba(183, 238, 87, .1); pointer-events: none; }
.site-footer .container { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 44px; align-items: start; }
.site-footer .container::before { content: "Jogão Bet"; grid-column: 1 / -1; display: flex; align-items: center; min-height: 34px; padding-left: 44px;
  background: url("../img/favicon.svg") no-repeat left center / 34px 34px; color: #fff; font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; }
.footer-nav { grid-column: 1 / -1; gap: 8px; margin: 0 0 6px; }
.footer-nav a { display: block; padding: 7px 15px; border: 1px solid var(--jg-line-dark); border-radius: 999px; color: #DFF7F3; text-decoration: none; font-size: .88rem; }
.footer-nav a:hover { background: var(--jg-teal); border-color: var(--jg-teal); color: var(--jg-ink-on); }
.site-footer .container > p:not(.footer-rg):not(.footer-copy) { margin: 0; padding: 16px 18px; border-radius: 12px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); line-height: 1.6; }
.footer-rg { display: flex; gap: 14px; align-items: center; margin: 0; padding: 16px 18px; border: 1px solid rgba(183, 238, 87, .3); border-radius: 12px; background: rgba(183, 238, 87, .05); color: #D5E4E9; line-height: 1.55; }
.footer-rg::before { content: "18+"; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; background: var(--jg-lime); color: var(--jg-ink-on); font-weight: 900; font-size: 1.05rem; clip-path: var(--jg-chamfer); }
.footer-copy { grid-column: 1 / -1; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); color: #6F8792; font-size: .84rem; }
@media (max-width: 800px) {
  .site-footer .container { grid-template-columns: 1fr; }
}

/* ---------- Sticky mobile CTA in brand colours ---------- */
@media (max-width: 700px) {
  .sticky-cta { background: rgba(6, 21, 31, .97); border-top: 2px solid var(--jg-teal); }
  .sticky-cta__text span { color: rgba(255, 255, 255, .7); }
}

/* ---------- Header with buttons: burger menu already below 1100px (7 nav items + 2 buttons) ---------- */
@media (min-width: 901px) and (max-width: 1100px) {
  .site-header .nav-toggle { display: block; order: 3; }
  .site-header .header-cta { margin-left: auto; }
  .site-header .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--jg-night); border-bottom: 1px solid var(--jg-line-dark); box-shadow: var(--shadow); }
  .site-header .site-nav.is-open { display: block; }
  .site-header .site-nav ul { flex-direction: column; padding: 8px 20px 14px; }
  .site-header .site-nav a { padding: 12px; font-size: .95rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--jg-lime); }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}