:root {
  --bg: #07090d;
  --panel: rgba(16, 20, 28, 0.8);
  --panel-2: rgba(21, 26, 36, 0.92);
  --text: #f6f8fb;
  --muted: #9aa4b5;
  --line: rgba(255,255,255,.09);
  --accent: #64f5b4;
  --accent-2: #6fa8ff;
  --warm: #ffb84d;
  --shadow: 0 30px 90px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 15% 0%, rgba(111,168,255,.10), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(100,245,180,.08), transparent 24%),
    var(--bg);
  font-family: Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.noise { position: fixed; inset: 0; pointer-events:none; opacity:.035; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }
.bg-grid { position: fixed; inset: 0; pointer-events:none; opacity:.22; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 80%); }
.bg-orb { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(100px); pointer-events:none; opacity:.12; }
.orb-a { top: 20%; left: -14%; background: var(--accent-2); animation: drift 13s ease-in-out infinite alternate; }
.orb-b { top: 50%; right: -12%; background: var(--accent); animation: drift 16s ease-in-out infinite alternate-reverse; }

.site-header { position: sticky; top: 0; z-index: 15; display:flex; justify-content:space-between; align-items:center; max-width: 1240px; margin:0 auto; padding: 18px 24px; backdrop-filter: blur(16px); }
.site-header::before { content:""; position:absolute; inset: 0 24px; background: rgba(7,9,13,.66); border:1px solid var(--line); border-radius: 18px; z-index:-1; }
.brand { display:flex; align-items:center; gap: 11px; }
.brand-mark { width: 40px; height: 40px; border-radius: 13px; display:grid; place-items:center; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; font-weight:800; letter-spacing: .05em; background: linear-gradient(145deg, var(--accent), #248f6d); color:#05100b; transform: rotate(-4deg); box-shadow: 0 10px 30px rgba(100,245,180,.18); }
.brand-copy { display:flex; flex-direction:column; line-height:1; }
.brand-copy strong { font-family:'Barlow Condensed'; font-size: 19px; letter-spacing:.05em; }
.brand-copy small { color:var(--muted); font-size:8px; letter-spacing:.28em; margin-top:4px; }
.nav { display:flex; align-items:center; gap: 9px; font-size:13px; color:#cbd1db; }
.nav a { padding: 10px 13px; border-radius:10px; transition:.25s ease; }
.nav a:hover { background: rgba(255,255,255,.06); color:#fff; }
.nav-cta { border:1px solid var(--line); }

.hero { min-height: 690px; max-width: 1240px; margin:0 auto; padding: 74px 24px 80px; display:grid; grid-template-columns:1.03fr .97fr; align-items:center; gap: 48px; position:relative; }
.hero-copy { max-width: 690px; }
.eyebrow { display:flex; align-items:center; gap:8px; font-size:11px; font-weight:800; letter-spacing:.21em; color: var(--accent); text-transform:uppercase; }
.live-dot { width:8px; height:8px; border-radius:50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(100,245,180,.09), 0 0 18px var(--accent); animation: pulse 1.7s ease-in-out infinite; }
h1, h2, h3 { font-family:'Barlow Condensed', sans-serif; margin:0; text-transform:uppercase; letter-spacing:-.02em; }
h1 { font-size: clamp(70px, 10vw, 124px); line-height:.8; margin: 16px 0 24px; font-weight:800; }
h1 em, h2 em { color: var(--accent); font-style:normal; }
.hero-copy > p { color:var(--muted); font-size:16px; line-height:1.75; max-width:600px; }
.hero-actions { display:flex; flex-wrap:wrap; gap: 12px; margin-top:30px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius: 13px; padding: 14px 18px; font-size:13px; font-weight:800; transition: .25s ease; }
.button-primary { color:#06110c; background: linear-gradient(135deg, var(--accent), #7affc4); box-shadow: 0 18px 40px rgba(100,245,180,.16); }
.button-primary:hover { transform:translateY(-3px) scale(1.01); box-shadow: 0 24px 50px rgba(100,245,180,.22); }
.button-ghost { border:1px solid var(--line); background:rgba(255,255,255,.025); color:#e4e8ee; }
.button-ghost:hover { transform:translateY(-2px); background:rgba(255,255,255,.06); }
.play { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:rgba(6,17,12,.16); font-size:10px; }
.hero-meta { display:flex; gap:28px; margin-top: 48px; }
.hero-meta div { display:flex; flex-direction:column; gap:4px; }
.hero-meta strong { font-family:'Barlow Condensed'; font-size:18px; color:#fff; }
.hero-meta span { font-size:11px; color:#768091; text-transform:uppercase; letter-spacing:.12em; }

.hero-visual { position:relative; min-height:500px; display:grid; place-items:center; }
.broadcast-card { width:min(100%, 570px); aspect-ratio: 1.06; border-radius: 28px; padding: 24px; position:relative; overflow:hidden; background: linear-gradient(145deg, rgba(28,34,46,.96), rgba(10,13,18,.98)); border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow); transform: rotate(3deg); animation: floatCard 5.6s ease-in-out infinite; }
.broadcast-card::after { content:""; position:absolute; width:260px; height:260px; right:-110px; bottom:-130px; border-radius:50%; background: radial-gradient(circle, rgba(100,245,180,.34), transparent 68%); }
.card-topline, .broadcast-bottom { display:flex; justify-content:space-between; align-items:center; font-size:9px; font-weight:800; letter-spacing:.18em; color:#7f8998; }
.card-topline span:first-child { color:var(--accent); }
.scoreboard { height: 72%; display:grid; grid-template-columns: 1fr .8fr 1fr; align-items:center; gap:10px; }
.team { display:flex; flex-direction:column; align-items:center; gap:12px; font-family:'Barlow Condensed'; font-weight:700; letter-spacing:.08em; font-size:17px; }
.team-logo { width:92px; height:92px; border-radius:26px; display:grid; place-items:center; font-size:46px; background: linear-gradient(145deg, #f6fbff, #8191a5); color:#101721; transform:skewY(-3deg); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 18px 35px rgba(0,0,0,.28); }
.team-logo.alt { background: linear-gradient(145deg, #73f5c0, #2b9f79); color:#07120e; }
.score-wrap { display:flex; flex-direction:column; align-items:center; gap:6px; }
.score-wrap span { font-size:9px; letter-spacing:.2em; color:var(--accent); font-weight:800; }
.score-wrap strong { font-family:'Barlow Condensed'; font-size:44px; }
.score-wrap small { font-size:8px; letter-spacing:.18em; color:#7f8998; }
.scanline { position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg, transparent, rgba(100,245,180,.5), transparent); animation: scan 4s linear infinite; }
.broadcast-bottom { border-top:1px solid var(--line); padding-top:18px; }
.broadcast-bottom i { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:6px; }
.floating-pill { position:absolute; z-index:2; border:1px solid rgba(255,255,255,.12); background:rgba(11,15,20,.84); backdrop-filter:blur(12px); border-radius:999px; padding:10px 13px; font-size:9px; font-weight:800; letter-spacing:.15em; box-shadow:var(--shadow); }
.pill-one { top:14%; right:5%; color:var(--accent); transform:rotate(8deg); animation: floatSmall 4.3s ease-in-out infinite; }
.pill-two { bottom:17%; left:2%; color:#ffdc9b; transform:rotate(-8deg); animation: floatSmall 4.8s ease-in-out infinite reverse; }
.speed-lines { position:absolute; inset:10% 0 0 14%; z-index:-1; opacity:.4; background: repeating-linear-gradient(155deg, transparent 0 38px, rgba(111,168,255,.12) 39px 40px, transparent 41px 76px); mask-image: radial-gradient(circle at 55% 50%, black, transparent 72%); }

.ticker { overflow:hidden; border-block:1px solid var(--line); background:#0b0e14; }
.ticker-track { display:flex; width:max-content; animation: marquee 26s linear infinite; gap:22px; padding:13px 0; font-family:'Barlow Condensed'; font-size:14px; letter-spacing:.12em; color:#7e899a; }
.ticker-track span:nth-of-type(odd) { color:#d7dde7; }
.ticker-track b { color:var(--accent); }

.section { max-width:1240px; margin:0 auto; padding:110px 24px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.section-heading h2, .about h2, .final-cta h2 { font-size:clamp(54px,6vw,88px); line-height:.86; margin-top:14px; }
.text-link { color:#aab3c1; font-size:12px; font-weight:700; border-bottom:1px solid #313846; padding-bottom:6px; }
.text-link:hover { color:#fff; border-color:var(--accent); }

.stream-feature { display:grid; grid-template-columns:1.12fr .88fr; min-height:460px; border:1px solid var(--line); background:linear-gradient(145deg, rgba(20,25,34,.86), rgba(8,11,15,.8)); border-radius:26px; overflow:hidden; box-shadow:var(--shadow); }
.feature-art { position:relative; min-height:460px; display:grid; place-items:center; overflow:hidden; background: radial-gradient(circle at 35% 30%, rgba(111,168,255,.2), transparent 38%), radial-gradient(circle at 72% 70%, rgba(100,245,180,.14), transparent 36%), #0a0d12; }
.art-lines { position:absolute; inset:-10%; transform:rotate(-8deg); background:repeating-linear-gradient(90deg, transparent 0 70px, rgba(255,255,255,.05) 71px 72px); }
.art-center { position:relative; text-align:center; transform:rotate(-4deg); }
.art-kicker, .art-bottom { display:block; color:#8b96a8; font-size:9px; font-weight:800; letter-spacing:.28em; }
.art-center strong { display:block; font-family:'Barlow Condensed'; font-size:clamp(82px,11vw,144px); line-height:.76; margin:16px 0; color:#fff; text-shadow: 0 0 70px rgba(111,168,255,.18); }
.art-center strong::first-line { color:var(--accent); }
.art-bottom { color:var(--accent); }
.feature-copy { padding:52px; display:flex; flex-direction:column; justify-content:center; }
.mini-live { font-size:10px; font-weight:800; letter-spacing:.18em; color:var(--accent); display:flex; gap:9px; align-items:center; }
.feature-copy h3 { font-size:clamp(42px,4.5vw,64px); line-height:.87; margin:18px 0; }
.feature-copy p { color:var(--muted); line-height:1.75; font-size:14px; max-width:470px; }
.wide { width:fit-content; margin-top:16px; }
.trust-row { margin-top:18px; display:flex; gap:8px; color:#6f7887; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }

.quick-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:14px; }
.quick-card { position:relative; min-height:165px; padding:24px; border-radius:20px; border:1px solid var(--line); background:rgba(255,255,255,.025); overflow:hidden; transition:.3s ease; }
.quick-card:hover { transform:translateY(-7px); background:rgba(255,255,255,.05); border-color:rgba(100,245,180,.28); }
.quick-number { position:absolute; right:19px; top:17px; font-size:10px; color:#525c6b; font-weight:800; }
.quick-icon { width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#07120d; background:var(--accent); font-weight:800; margin-bottom:25px; }
.quick-card strong { display:block; font-family:'Barlow Condensed'; font-size:28px; text-transform:uppercase; }
.quick-card small { display:block; color:#7e8795; font-size:11px; margin-top:3px; }
.arrow { position:absolute; right:19px; bottom:19px; font-size:14px; color:#c4cbd5; }

.about { display:grid; grid-template-columns:.2fr .9fr .9fr; gap:45px; align-items:center; position:relative; }
.about-stamp { width:92px; height:92px; border:1px solid rgba(100,245,180,.32); border-radius:50%; display:grid; place-items:center; font-family:'Barlow Condensed'; font-size:29px; color:var(--accent); transform:rotate(-11deg); box-shadow:0 0 0 10px rgba(100,245,180,.035), 0 0 60px rgba(100,245,180,.07); }
.about-copy p { max-width:600px; color:var(--muted); line-height:1.8; font-size:15px; margin-top:25px; }
.stats { display:grid; gap:12px; }
.stats div { border-top:1px solid var(--line); padding:16px 0; display:flex; align-items:baseline; justify-content:space-between; gap:20px; }
.stats strong { font-family:'Barlow Condensed'; font-size:38px; }
.stats span { font-size:10px; font-weight:700; color:#717b8a; letter-spacing:.13em; text-transform:uppercase; }

.final-cta { padding-top:50px; padding-bottom:60px; }
.final-cta-inner { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:55px; border-radius:26px; border:1px solid rgba(100,245,180,.18); background:radial-gradient(circle at 80% 50%, rgba(100,245,180,.09), transparent 35%), linear-gradient(135deg, rgba(20,27,34,.96), rgba(9,13,17,.96)); overflow:hidden; position:relative; }
.final-cta-inner::before { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.03) 50%, transparent 65%); transform:translateX(-100%); animation: sheen 5s ease-in-out infinite; }
.final-cta h2 { font-size:clamp(54px,6vw,88px); position:relative; }
.final-cta .eyebrow { position:relative; }
.final-cta .button { position:relative; }

.site-footer { max-width:1240px; padding:0 24px 35px; margin:0 auto; display:flex; justify-content:space-between; color:#5e6775; font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }

.reveal { opacity:0; transform:translateY(22px); transition:opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity:1; transform:none; }
.reveal-delay { transition-delay:.15s; }

@keyframes pulse { 0%,100%{ box-shadow:0 0 0 5px rgba(100,245,180,.08),0 0 15px rgba(100,245,180,.4);} 50%{ box-shadow:0 0 0 8px rgba(100,245,180,.03),0 0 25px rgba(100,245,180,.7);} }
@keyframes drift { to { transform:translate3d(90px,-50px,0) scale(1.1); } }
@keyframes floatCard { 0%,100%{ transform:rotate(3deg) translateY(0);} 50%{ transform:rotate(1.3deg) translateY(-10px);} }
@keyframes floatSmall { 0%,100%{ margin-top:0;} 50%{ margin-top:-9px;} }
@keyframes scan { 0%{ top:0; opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{top:100%; opacity:0;} }
@keyframes marquee { to { transform:translateX(-50%); } }
@keyframes sheen { 0%,55%{ transform:translateX(-100%);} 70%,100%{ transform:translateX(100%);} }

@media (max-width:900px){
  .hero { grid-template-columns:1fr; min-height:auto; padding-top:55px; }
  .hero-visual { min-height:460px; }
  .stream-feature { grid-template-columns:1fr; }
  .feature-copy { padding:38px; }
  .quick-grid { grid-template-columns:1fr; }
  .about { grid-template-columns:1fr; gap:28px; }
  .about-stamp { width:70px; height:70px; font-size:23px; }
  .stats { margin-top:10px; }
  .final-cta-inner { padding:40px 30px; flex-direction:column; align-items:flex-start; }
}
@media (max-width:640px){
  .site-header { padding:12px 14px; }
  .site-header::before { inset:0 14px; }
  .nav a:not(.nav-cta) { display:none; }
  .hero { padding:60px 18px 55px; gap:30px; }
  h1 { font-size:19vw; }
  .hero-meta { gap:18px; flex-wrap:wrap; }
  .broadcast-card { transform:rotate(1.8deg); padding:18px; border-radius:20px; }
  .team-logo { width:68px; height:68px; font-size:34px; border-radius:19px; }
  .team { font-size:13px; }
  .score-wrap strong { font-size:34px; }
  .floating-pill { display:none; }
  .section { padding:80px 18px; }
  .section-heading { align-items:flex-start; flex-direction:column; }
  .section-heading h2 { font-size:64px; }
  .feature-art { min-height:320px; }
  .feature-copy { padding:28px; }
  .feature-copy h3 { font-size:48px; }
  .about h2 { font-size:64px; }
  .site-footer { padding-inline:18px; flex-direction:column; gap:8px; }
}

/* ============================================================
   TIP JAR  —  append to the bottom of styles.css
   Only 6 new rules. Everything else reuses your existing
   .section / .section-heading / .eyebrow / .quick-grid /
   .quick-card / .quick-number / .arrow / .reveal classes.
   ============================================================ */

.tipjar .tip-copy {
  max-width: 62ch;
  margin: 0 0 clamp(30px, 4vw, 46px);
}

.tipjar .tip-copy p {
  margin: 0 0 1.05em;
}

/* Accent bar picks up whatever variable your theme already defines;
   falls back to the current text color if none of them exist. */
.tipjar .tip-note {
  border-left: 3px solid var(--accent, var(--red, var(--brand, var(--primary, currentColor))));
  padding: 0.15em 0 0.15em 1.2em;
  margin-top: clamp(20px, 2.6vw, 30px);
  line-height: 1.62;
}

.tipjar .tip-note strong {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Swap the glyph icon for a logo without disturbing .quick-card layout */
.tipjar .quick-icon.tip-icon {
  display: block;
  line-height: 0;
}

.tipjar .quick-icon.tip-icon svg {
  width: 34px;
  height: 34px;
  display: block;
}

.tipjar .tip-fine {
  max-width: 62ch;
  margin: clamp(26px, 3.2vw, 38px) 0 0;
  font-size: 0.82rem;
  line-height: 1.6;
  opacity: 0.62;
}