/* Home — hero bento and sections from mockup B (+ full-bleed slider from A). */

/* ── hero bento ───────────────────────────────────────────────────────── */
.hero { padding: 28px 0 24px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.t-h1 { grid-column: span 7; grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(160deg, var(--surface-1), var(--surface-0)); }
.t-h1 h1 { font: 700 var(--fs-h1)/1 var(--font-display); font-stretch: 88%; letter-spacing: -.035em; text-wrap: balance; margin: 18px 0 14px; }
.t-h1 h1 em { font-style: normal; color: var(--color-brand); }
.t-h1 p { color: var(--color-muted); max-width: 520px; text-wrap: pretty; font-size: 1.05rem; }
.t-h1 .cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.stats { display: flex; flex-wrap: wrap; gap: 18px 32px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); }

.t-feat { grid-column: span 5; grid-row: span 2; padding: 0; display: flex; flex-direction: column; }
.t-feat .ph { position: relative; height: 190px; overflow: hidden; }
.t-feat .ph img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.t-feat:hover .ph img { transform: scale(1.1); }
.t-feat .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(13 21 26 / .25), var(--surface-1)); }
.t-feat .ph .t-label { position: absolute; top: 18px; left: 20px; z-index: 1; color: #fff; }
.t-feat .body { padding: 0 22px 22px; margin-top: -40px; position: relative; z-index: 1; display: grid; gap: 12px; }
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.vs .tm { display: grid; gap: 2px; text-decoration: none; color: inherit; min-width: 0; }
.vs .tm:last-child { text-align: right; }
.vs .tm b { font: 700 1.2rem/1.1 var(--font-display); letter-spacing: -.02em; }
.vs .tm span { font-size: .8rem; color: var(--color-faint); }
.vs .tm:hover b { color: var(--color-brand); }
.vs .when { font-size: .76rem; font-weight: 700; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); text-align: center; white-space: nowrap; }
.t-feat .more-link { margin-top: 2px; }

.t-live { grid-column: span 4; background: linear-gradient(180deg, color-mix(in oklab, var(--color-live) 10%, var(--surface-1)), var(--surface-1)); }
.live-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.live-teams { font-weight: 600; }
.live-teams span { color: var(--color-muted); font-weight: 400; }
.live-row .score { font-size: 2.2rem; line-height: 1; letter-spacing: -.04em; font-weight: 700; margin-top: 6px; }
.live-row .clock { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 700; color: #FFC2C4; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--tint-live); white-space: nowrap; }
.live-row .clock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-live); animation: blink 1.2s infinite; }
.mom { display: flex; gap: 3px; align-items: end; height: 40px; margin-top: 16px; }
.mom i { flex: 1; height: 100%; border-radius: 2px; background: var(--color-accent); opacity: .8; transform-origin: bottom; transition: transform .6s var(--ease); }
.mom i.h { background: var(--color-brand); }

.t-calc { grid-column: span 4; }
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.calc label { display: grid; gap: 6px; min-width: 0; font-size: .78rem; color: var(--color-faint); }
.calc input { width: 100%; min-width: 0; height: 46px; padding: 0 12px; border-radius: var(--radius-md); background: var(--surface-0); border: 1px solid var(--line-strong); color: var(--color-text); font: 700 1rem var(--font-mono); }
.calc input:focus { outline: none; border-color: var(--color-brand); box-shadow: var(--focus-ring); }
.calc output { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--tint-accent); }
.calc output > span { font-size: .85rem; color: var(--color-muted); }
.calc output b { font: 700 1.4rem var(--font-mono); }
.calc output small { grid-column: 1 / -1; font-size: .76rem; color: var(--color-faint); }

.t-casino { grid-column: span 4; padding: 0; min-height: 250px; }
.t-casino > .t-label { position: absolute; top: 18px; left: 20px; z-index: 2; color: #fff; }
.t-casino .dots { position: absolute; top: 14px; right: 14px; z-index: 2; }
.cz { position: absolute; inset: 0; display: flex; transition: transform .8s var(--ease); }
.cz__slide { position: relative; flex: 0 0 100%; color: #fff; text-decoration: none; }
.cz__slide img { width: 100%; height: 100%; object-fit: cover; }
.cz__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(13 21 26 / .2), rgb(13 21 26 / .92)); }
.cz__cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; display: flex; justify-content: space-between; align-items: end; gap: 10px; font-size: .84rem; color: var(--color-muted); }
.cz__cap b { display: block; font: 700 1.3rem var(--font-display); color: #fff; }

@media (max-width: 1080px) {
  .t-h1, .t-feat { grid-column: span 12; grid-row: auto; }
  .t-live, .t-calc { grid-column: span 6; }
  .t-casino { grid-column: span 12; min-height: 230px; }
}
@media (max-width: 640px) {
  .t-live, .t-calc { grid-column: span 12; }
  .stats { gap: 14px 24px; }
}

/* ── popular sports shelf ─────────────────────────────────────────────── */
.sport-shelf { grid-auto-columns: minmax(230px, 1fr); }
.sport-card { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; color: #fff; text-decoration: none; background: var(--surface-1); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform var(--dur-slow) var(--ease); min-width: 0; }
.sport-card picture { position: absolute; inset: 0; z-index: -2; }
.sport-card img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.8); transition: transform .9s var(--ease), filter .5s; }
.sport-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(12 19 24 / .1) 30%, rgb(12 19 24 / .94)); }
.sport-card:hover { transform: translateY(-5px); }
.sport-card:hover img { transform: scale(1.08); filter: saturate(1.05); }
.sport-card__i { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgb(13 21 26 / .6); backdrop-filter: blur(6px); color: var(--color-brand); }
.sport-card__idx { position: absolute; top: 18px; left: 18px; font-size: .74rem; letter-spacing: .14em; color: var(--color-muted); }
.sport-card__b { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; gap: 4px; font-size: .88rem; color: var(--color-muted); }
.sport-card__b b { font: 700 1.6rem/1 var(--font-display); font-stretch: 85%; color: #fff; letter-spacing: -.02em; }
.sport-card__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; color: var(--color-brand); font-weight: 600; }
.sport-card--all { background: linear-gradient(160deg, var(--surface-2), var(--surface-0)); }
.sport-card--all::after { display: none; }
@media (max-width: 820px) { .sport-shelf { grid-auto-columns: 70%; } }

/* ── featured matches: full-bleed slider ──────────────────────────────── */
.featured { position: relative; overflow: hidden; isolation: isolate; margin-block: clamp(24px, 4vw, 48px); }
.featured__track { display: flex; transition: transform .9s var(--ease); }
.fslide { position: relative; flex: 0 0 100%; min-height: clamp(460px, 52vw, 600px); display: flex; align-items: flex-end; }
.fslide__bg { position: absolute; inset: 0; z-index: -2; }
.fslide__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 7s linear; }
.fslide.is-on .fslide__bg img { transform: scale(1.02); }
.fslide::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgb(17 26 32 / .92) 0%, rgb(17 26 32 / .45) 55%, rgb(17 26 32 / .2)), linear-gradient(0deg, var(--color-bg) 0%, transparent 45%); }
.fslide__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .9fr); gap: 32px; align-items: end; padding-bottom: 96px; }
.fslide__teams { font: 700 clamp(2rem, 1.2rem + 3vw, 3.8rem)/1 var(--font-display); font-stretch: 85%; letter-spacing: -.035em; margin: 14px 0; text-wrap: balance; }
.fslide__teams a { color: #fff; text-decoration: none; }
.fslide__teams span { color: var(--color-brand); font-weight: 500; }
.fslide__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--color-muted); }
.fslide__meta span { display: inline-flex; align-items: center; gap: 8px; }
.fslide__card { padding: 20px; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--surface-1) 86%, transparent); backdrop-filter: blur(14px); border: 1px solid var(--line); box-shadow: var(--shadow-pop); display: grid; gap: 12px; }
.fslide__text, .fslide__card { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s; }
.fslide.is-on .fslide__text, .fslide.is-on .fslide__card { opacity: 1; transform: none; }
.featured__nav { position: absolute; left: 0; right: 0; bottom: 28px; display: flex; justify-content: space-between; align-items: center; }
.dots--bar button { width: 52px; }
.dots--bar button::before { width: 100%; height: 3px; }
.dots--bar button[aria-current="true"]::before { width: 100%; }
@media (max-width: 820px) {
  .fslide__in { grid-template-columns: 1fr; padding-bottom: 92px; gap: 18px; }
  .fslide { min-height: 560px; }
}

/* ── live casino ──────────────────────────────────────────────────────── */
.lc-hero { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.lc-tile { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; isolation: isolate; color: var(--color-muted); text-decoration: none; border: 1px solid var(--line); }
.lc-tile picture { position: absolute; inset: 0; z-index: -2; }
.lc-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.lc-tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgb(12 19 24 / .92)); }
.lc-tile:hover img { transform: scale(1.06); }
.lc-tile span { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: .86rem; }
.lc-tile b { display: block; font: 700 1.3rem var(--font-display); color: #fff; }
@media (max-width: 820px) { .lc-hero { grid-template-columns: 1fr; } .lc-tile { aspect-ratio: 16 / 8; } }

/* ── promotions ───────────────────────────────────────────────────────── */
.promo { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; padding: 28px; border-radius: var(--radius-lg); border: 1px dashed var(--line-strong); background: var(--surface-0); }
.promo h2 { font: 700 var(--fs-h3)/1.2 var(--font-display); margin: 10px 0 8px; }
.promo p { color: var(--color-muted); max-width: 720px; }

/* ── payments ─────────────────────────────────────────────────────────── */
.pay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.pay { display: grid; gap: 6px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--line); transition: transform var(--dur-base) var(--ease), border-color var(--dur-base); }
.pay:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.pay__logo { height: 44px; display: flex; align-items: center; margin-bottom: 6px; }
.pay__logo img { height: 34px; width: auto; padding: 5px 9px; border-radius: 8px; background: #fff; }
.pay b { font-size: 1.02rem; }
.pay__type { font-size: .82rem; color: var(--color-faint); margin-bottom: 4px; }
.pay__row { display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--line); font-size: .86rem; color: var(--color-muted); }
.pay__row .ok, .pay__row .no { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.pay__row .ok { color: var(--color-success); }
.pay__row .no { color: var(--color-faint); }

/* ── about bento ──────────────────────────────────────────────────────── */
.about-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.about-bento .tile { display: grid; gap: 8px; align-content: start; }
.about-bento .tile > .icon { width: 28px; height: 28px; color: var(--color-brand); margin-bottom: 6px; }
.about-bento b { font: 700 1.15rem var(--font-display); }
.about-bento p { color: var(--color-muted); font-size: .94rem; }
.ab-op { background: linear-gradient(160deg, var(--surface-2), var(--surface-1)); }
@media (max-width: 900px) { .about-bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .about-bento { grid-template-columns: 1fr; } }

/* ── RG band ──────────────────────────────────────────────────────────── */
.rg-band { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(22px, 3vw, 36px); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--tint-accent), var(--surface-1) 60%); border: 1px solid color-mix(in oklab, var(--color-accent) 35%, transparent); }
.rg-band__age { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--color-brand); color: var(--color-brand); font-weight: 700; font-size: 1.2rem; }
.rg-band h2 { font: 700 var(--fs-h2)/1.05 var(--font-display); font-stretch: 90%; letter-spacing: -.03em; margin-bottom: 8px; }
.rg-band p { color: var(--color-muted); max-width: 640px; }
@media (max-width: 820px) { .rg-band { grid-template-columns: 1fr; } .rg-band .btn { white-space: normal; } }

/* ── regulation ───────────────────────────────────────────────────────── */
.reg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.reg-grid > div { padding: 20px; border-radius: var(--radius-lg); background: var(--surface-1); border: 1px solid var(--line); }
.reg-grid dt { display: flex; align-items: center; gap: 8px; font: 700 .72rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--color-faint); }
.reg-grid dt .icon { color: var(--color-brand); width: 18px; height: 18px; }
.reg-grid dd:not(.reg-note) { margin: 10px 0 6px; font: 700 1.1rem/1.3 var(--font-display); }
.reg-grid .reg-note { margin: 0; font-size: .86rem; color: var(--color-muted); }

/* narrow cards: labelled prices stack instead of breaking words (320–400) */
.fslide__card .odds2, .fslide__card .odds3, .t-feat .odds2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr)); }
@media (max-width: 480px) { .dots--bar button { width: 30px; } }