/* ---------- hero (full-bleed photo) ---------- */
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;align-items:center;padding:0;background:var(--bg);}
.hero-mask{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-bg-img{width:100%;height:100%;object-fit:cover;object-position:center 62%;}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(10,14,8,0.93) 0%,rgba(10,14,8,0.76) 34%,rgba(10,14,8,0.34) 64%,rgba(10,14,8,0.06) 100%);
}
.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:34px;width:100%;padding-top:120px;padding-bottom:80px;}
.hero-copy{max-width:640px;}
.hero-tag{color:#8fe8ac;text-shadow:0 1px 12px rgba(0,0,0,0.45);}
.hero-tag .dot{background:#8fe8ac;}
.hero-h1{font-size:clamp(2.6rem,11vw,4.2rem);line-height:0.96;margin:14px 0 18px;color:#fff;}
.hero-h1 .stroke{-webkit-text-stroke:2px var(--line-bright);color:transparent;}
.hero-copy .lead{font-size:1rem;color:rgba(255,255,255,0.88);max-width:48ch;margin-bottom:26px;}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.btn-ghost-dark{background:rgba(255,255,255,0.1);border:1.5px solid rgba(255,255,255,0.4);color:#fff;box-shadow:none;}
.btn-ghost-dark:hover{background:rgba(255,255,255,0.2);transform:translateY(-2px);}
@media(min-width:860px){.hero-inner{padding:140px 0 100px;}}

/* ---------- offers ---------- */
.offer-grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:760px){.offer-grid{grid-template-columns:1fr 1fr;}}
.offer-card{display:block;background:var(--card);border:1px solid var(--card-border);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;}
.offer-card::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .3s;z-index:0;}
.offer-dbbet::before{background:radial-gradient(circle at 100% 0%,rgba(255,52,92,0.10),transparent 60%);}
.offer-skinclub::before{background:radial-gradient(circle at 100% 0%,rgba(92,73,208,0.12),transparent 60%);}
.offer-card:hover::before{opacity:1;}
.offer-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;position:relative;z-index:1;flex-wrap:wrap;}
.offer-logo-wrap{display:inline-flex;align-items:center;background:var(--ink);padding:6px 10px;border-radius:8px;}
.offer-logo{height:15px;width:auto;}
.offer-logo-gem{height:34px;}
.offer-badge{font-size:0.62rem;font-weight:800;letter-spacing:0.08em;color:var(--ink-faint);background:var(--bg-soft);padding:5px 10px;border-radius:999px;}
.offer-card h3{font-size:1.5rem;margin-bottom:10px;position:relative;z-index:1;}
.offer-card p{font-size:0.9rem;color:var(--ink-dim);position:relative;z-index:1;}
.code-inline{background:var(--line-soft);color:var(--line);padding:2px 7px;border-radius:6px;}
.offer-foot{margin-top:20px;position:relative;z-index:1;}
.offer-cta{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:0.82rem;color:var(--ink);}
.offer-cta .arrow{transition:transform .2s;}
.offer-card:hover .offer-cta .arrow{transform:translateX(4px);}

/* ---------- stream ----------
   Player iframe is always embedded; the offline card is an absolutely
   positioned overlay on top of it (z-index layering), so JS only ever
   has to toggle display — flex-direction:column lives in the CSS and
   can't be lost by an inline style overwrite. */
.stream-box{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--ink);box-shadow:var(--shadow-sm);}
#stream-player{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:1;}
.stream-topbar{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px;font-size:0.66rem;letter-spacing:0.06em;color:rgba(255,255,255,0.75);background:linear-gradient(180deg,rgba(10,14,8,0.85),transparent);pointer-events:none;flex-wrap:wrap;}
.stream-status{display:flex;align-items:center;gap:6px;font-weight:700;}
.stream-status .dot{width:6px;height:6px;border-radius:50%;background:#9ca3af;}
.stream-status .dot.is-live{background:var(--line-bright);box-shadow:0 0 0 0 rgba(34,197,94,0.6);animation:livePulse 2s infinite;}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,0.55);}70%{box-shadow:0 0 0 7px rgba(34,197,94,0);}100%{box-shadow:0 0 0 0 rgba(34,197,94,0);}}
#stream-offline-card{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;padding:24px;
  background:radial-gradient(circle at 50% 40%,rgba(34,197,94,0.12),transparent 60%),var(--ink);}
.stream-avatar{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,0.08);color:var(--line-bright);display:flex;align-items:center;justify-content:center;font-family:'Anton',sans-serif;font-size:1.4rem;margin-bottom:12px;}
#stream-offline-card h3{font-size:1.1rem;margin-bottom:6px;color:#fff;}
#stream-offline-card p{font-size:0.85rem;color:rgba(255,255,255,0.62);margin-bottom:20px;max-width:36ch;}

/* ---------- socials ---------- */
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(min-width:700px){.social-grid{grid-template-columns:repeat(4,1fr);}}
.social-card{display:flex;flex-direction:column;justify-content:space-between;gap:18px;background:var(--card);border:1px solid var(--card-border);border-radius:16px;padding:18px;box-shadow:var(--shadow-sm);}
.social-card .top{display:flex;align-items:center;justify-content:space-between;}
.social-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:1rem;}
.social-arrow{color:var(--ink-faint);font-weight:700;transition:transform .2s;}
.social-card:hover .social-arrow{transform:translate(2px,-2px);}
.plat{font-size:0.7rem;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:0.04em;}
.handle{font-size:0.95rem;font-weight:800;}