/* Self-hosted Google Fonts (Inter, Outfit) — latin + latin-ext */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/inter-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/inter-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/inter-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/inter-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/outfit-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/outfit-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/outfit-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/outfit-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/outfit-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/outfit-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/outfit-800-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Outfit';font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/outfit-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* ═══════════════════════════════════════════════════════════
   BEST IPTV CANADA — v5 Premium Light
   Glossy white · minimal · rich feel
   Fonts: Outfit (display) + Inter (body)
═══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — layered whites */
  --bg:            #fbfbfd;
  --bg-alt:        #f5f5f7;
  --surface:       #ffffff;
  --surface-2:     #fdfdfe;
  --border:        rgba(15,15,30,.08);
  --border-strong: rgba(15,15,30,.16);

  /* Text */
  --text:   #0b0b14;
  --muted:  #55556a;
  --muted2: #8b8b9e;

  /* Brand — refined maple red (flat, solid — no gradients) */
  --brand-1: #e0223f;
  --brand-2: #ff6a3d;

  /* Action — conversion green */
  --cta:      #16a34a;
  --cta-dark: #15803d;
  --cta-glow: rgba(22,163,74,.28);

  --gold: #d97706;
  --gold-star: #f59e0b;
  --blue: #0369a1;

  /* Shadows — the glossy system */
  --shadow-sm: 0 1px 2px rgba(15,15,30,.05), 0 2px 8px rgba(15,15,30,.04);
  --shadow-md: 0 2px 4px rgba(15,15,30,.04), 0 12px 32px rgba(15,15,30,.08);
  --shadow-lg: 0 4px 8px rgba(15,15,30,.04), 0 24px 64px rgba(15,15,30,.12);
  --gloss: linear-gradient(180deg,#ffffff 0%,#fafafc 100%);

  --font-display: 'Outfit', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --radius:    14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --header-h:  70px;
  --container: 1160px;
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ─── Reset ─── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; font-size:16px; -webkit-text-size-adjust:100%; overflow-x:clip }
body {
  font-family:var(--font-body); background:var(--bg); color:var(--text);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit }
ul { list-style:none }
.container { width:min(100% - 2rem,var(--container)); margin-inline:auto }
.text-center { text-align:center }
.skip-link { position:absolute; left:-9999px; top:0; z-index:9999; padding:.75rem 1rem; background:var(--brand-1); color:#fff; border-radius:0 0 8px 0; font-weight:700 }
.skip-link:focus { left:0 }

/* ─── Text effects ─── */
.hl { color:var(--brand-1) }

/* ─── Buttons ─── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1rem 2rem; border-radius:999px; font-weight:700; font-size:1rem;
  font-family:var(--font-display); letter-spacing:.01em; line-height:1.2;
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease-out), box-shadow .18s, background .18s, border-color .18s;
}
.btn:focus-visible { outline:3px solid var(--cta); outline-offset:3px }
.btn:active { transform:scale(.97) }

/* Flat dark — primary */
.btn--primary {
  background:var(--text);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn--primary:hover { background:#26262f; box-shadow:var(--shadow-md) }

/* Flat green — primary action */
.btn--cta {
  background:var(--cta);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn--cta:hover { background:var(--cta-dark); box-shadow:var(--shadow-md) }

.btn--outline { background:var(--surface); border-color:var(--border-strong); color:var(--text); box-shadow:var(--shadow-sm) }
.btn--outline:hover { border-color:var(--text); box-shadow:var(--shadow-md) }
.btn--ghost { background:rgba(15,15,30,.05); color:var(--muted) }
.btn--ghost:hover { color:var(--text); background:rgba(15,15,30,.09) }
.btn--block { width:100% }
.btn--sm { padding:.6rem 1.3rem; font-size:.85rem }
.btn--lg { padding:1.15rem 2.5rem; font-size:1.05rem }
.btn--xl { padding:1.3rem 2.9rem; font-size:1.15rem }

.btn__sub { display:block; font-size:.68rem; font-weight:500; opacity:.85; letter-spacing:.02em; text-align:left }


/* ─── Live dot ─── */
.live-dot { width:8px; height:8px; border-radius:50%; background:var(--cta); position:relative; flex-shrink:0; display:inline-block }
.live-dot::after { content:''; position:absolute; inset:-4px; border-radius:50%; background:var(--cta); opacity:.3; animation:live-pulse 2s ease infinite }
@keyframes live-pulse { 0%,100%{transform:scale(1);opacity:.3} 50%{transform:scale(2);opacity:0} }

/* ─── Urgency strip ─── */
.promo-strip { background:linear-gradient(100deg,#0b0b14,#232333); font-size:.86rem; font-weight:600; color:#fff }
.promo-strip__inner { display:flex; align-items:center; justify-content:center; gap:.75rem; padding:.62rem 0; flex-wrap:wrap; text-align:center }
.promo-strip__link { text-decoration:underline; text-underline-offset:3px; font-weight:800; color:#ffd7ae }
.promo-strip .countdown-mini { display:inline-flex; gap:.4rem; font-variant-numeric:tabular-nums; font-weight:800 }
.promo-strip .countdown-mini span { background:rgba(255,255,255,.14); padding:.1rem .5rem; border-radius:6px }

/* ─── Header — white glass ─── */
.site-header { position:sticky; top:0; z-index:200; height:var(--header-h); transition:background .3s, border-color .3s, box-shadow .3s; border-bottom:1px solid transparent; background:transparent }
.site-header.is-scrolled { background:rgba(255,255,255,.85); backdrop-filter:blur(20px) saturate(180%); border-color:var(--border); box-shadow:0 1px 20px rgba(15,15,30,.05) }
.header__row { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:1rem }
.brand { display:flex; align-items:center; gap:.6rem; font-family:var(--font-display); font-weight:800; font-size:1.1rem }
.brand em { font-style:normal; color:var(--brand-1) }
.nav__list { display:flex; gap:.1rem }
.nav__item a { display:block; padding:.5rem .8rem; border-radius:999px; font-size:.88rem; font-weight:600; color:var(--muted); transition:color .2s, background .2s }
.nav__item a:hover,.nav__item.is-active a { color:var(--text); background:rgba(15,15,30,.06) }
.header__actions { display:flex; align-items:center; gap:.6rem }
.lang-btn { padding:.4rem .7rem; border-radius:999px; border:1px solid var(--border-strong); font-size:.8rem; font-weight:700; color:var(--muted); background:var(--surface) }
.lang-btn:hover { color:var(--text); border-color:var(--text) }
.nav-toggle { display:none; flex-direction:column; gap:5px; padding:.5rem; position:relative; z-index:160 }
.nav-toggle span { display:block; width:22px; height:2px; background:var(--text); border-radius:2px }

@media(max-width:960px) {
  .nav { position:fixed; inset:var(--header-h) 0 0; background:rgba(255,255,255,.98); backdrop-filter:blur(24px); padding:2rem 1.5rem; transform:translateX(100%); transition:transform .35s var(--ease-out); border-top:1px solid var(--border); overflow-y:auto; z-index:150 }
  .nav.is-open { transform:translateX(0) }
  .nav__list { flex-direction:column; gap:.25rem }
  .nav__item a { padding:.9rem 1rem; font-size:1.05rem; border-radius:12px }
  .nav-toggle { display:flex }
  .header-cta { display:none }
}

/* ═══════════ HERO ═══════════ */
.hero { position:relative; overflow:hidden; padding:clamp(3.5rem,8vw,6rem) 0 clamp(3rem,7vw,5rem); text-align:center }
.hero__glow {
  position:absolute; left:50%; top:-25%; transform:translateX(-50%);
  width:1300px; height:800px; pointer-events:none;
  background:
    radial-gradient(ellipse 42% 40% at 36% 38%, rgba(224,34,63,.07), transparent 70%),
    radial-gradient(ellipse 42% 40% at 64% 42%, rgba(255,106,61,.06), transparent 70%);
}
.hero__mesh { display:none }
.hero__inner { position:relative; z-index:1; max-width:880px; margin-inline:auto }

.hero__badge {
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem 1.2rem .45rem .7rem; border-radius:999px;
  border:1px solid var(--border); background:var(--surface);
  font-size:.85rem; font-weight:600; color:var(--muted); margin-bottom:1.75rem;
  box-shadow:var(--shadow-sm);
}
.hero__badge strong { color:var(--gold) }

h1.hero__title {
  font-family:var(--font-display);
  font-size:clamp(2.5rem,6.5vw,4.6rem);
  font-weight:800; line-height:1.04; letter-spacing:-.035em;
  margin-bottom:1.4rem; color:var(--text);
}
.hero__desc { font-size:clamp(1.05rem,2.2vw,1.28rem); color:var(--muted); max-width:640px; margin:0 auto 2.25rem; line-height:1.65 }
.hero__desc strong { color:var(--text) }

/* Price anchor */
.price-anchor { display:inline-flex; align-items:baseline; gap:.75rem; flex-wrap:wrap; justify-content:center; margin-bottom:2.25rem }
.price-anchor__old { font-size:1.35rem; color:var(--muted2); text-decoration:line-through; text-decoration-color:var(--brand-1); text-decoration-thickness:2.5px }
.price-anchor__new { font-family:var(--font-display); font-size:clamp(2.75rem,6vw,4rem); font-weight:800; letter-spacing:-.03em; color:var(--brand-1) }
.price-anchor__per { font-size:1.1rem; color:var(--muted) }
.price-anchor__badge { align-self:center; background:var(--brand-1); color:#fff; font-weight:800; font-size:.78rem; padding:.35rem .9rem; border-radius:999px; text-transform:uppercase; letter-spacing:.05em }

.hero__ctas { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; margin-bottom:1.5rem }
.hero__risk { font-size:.85rem; color:var(--muted2) }
.hero__risk strong { color:var(--cta) }

/* Hero split */
.hero--split { text-align:left }
.hero--split .hero__inner { max-width:none; display:grid; grid-template-columns:1fr; gap:3rem; align-items:center }
@media(min-width:1024px){ .hero--split .hero__inner { grid-template-columns:1.05fr .95fr; gap:3.5rem } }
.hero--split .price-anchor,.hero--split .hero__ctas { justify-content:flex-start }
@media(max-width:1023px){
  .hero--split { text-align:center }
  .hero--split .price-anchor,.hero--split .hero__ctas { justify-content:center }
}

/* ─── TV mockup — dark screen on white stage ─── */
.tv { position:relative; filter:drop-shadow(0 30px 60px rgba(15,15,30,.25)) }
.tv__frame { background:#0a0a10; border-radius:18px; padding:9px; border:1px solid rgba(255,255,255,.08) }
.tv__screen {
  border-radius:10px; overflow:hidden; position:relative;
  background:linear-gradient(160deg,#12121e 0%,#0a0a14 60%,#141428 100%);
  aspect-ratio:16/10; display:flex; flex-direction:column;
}
.tv__screen::before {
  content:''; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(5,5,10,.4) 0%, rgba(5,5,10,.55) 55%, rgba(5,5,10,.82) 100%),
    radial-gradient(ellipse 80% 60% at 75% 0%, rgba(224,34,63,.28), transparent 60%),
    radial-gradient(ellipse 70% 50% at 15% 100%, rgba(3,105,161,.2), transparent 60%);
}
.tv__video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; background:#0a0a14;
}
.tv__stand { width:32%; height:9px; margin:0 auto; background:linear-gradient(#1a1a24,#0a0a10); border-radius:0 0 12px 12px }

.app-ui { display:flex; flex-direction:column; height:100%; padding:4.5% 5%; position:relative; z-index:2; color:#fff }
.app-ui__nav { display:flex; align-items:center; gap:.6rem; margin-bottom:5% }
.app-ui__logo { font-family:var(--font-display); font-weight:800; font-size:clamp(.6rem,1.2vw,.8rem); color:#fff }
.app-ui__logo em { font-style:normal; background:linear-gradient(100deg,#ff5470,#ff9560); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.app-ui__pills { display:flex; gap:.35rem; margin-left:auto }
.app-ui__pill { font-size:clamp(.42rem,.9vw,.6rem); font-weight:700; padding:.25em 1em; border-radius:999px; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.16) }
.app-ui__pill--active { background:var(--brand-1); color:#fff; border-color:transparent }
.app-ui__live { display:inline-flex; align-items:center; gap:.45em; font-size:clamp(.44rem,.95vw,.62rem); font-weight:800; letter-spacing:.06em; color:#ff5470; margin-bottom:.5em; text-transform:uppercase }
.app-ui__live::before { content:''; width:.6em; height:.6em; border-radius:50%; background:#ff5470; animation:live-pulse 1.6s ease infinite }
.app-ui__title { font-family:var(--font-display); font-weight:800; font-size:clamp(.9rem,2.2vw,1.5rem); line-height:1.15; letter-spacing:-.02em; margin-bottom:.3em; color:#fff }
.app-ui__meta { font-size:clamp(.44rem,.95vw,.62rem); color:rgba(255,255,255,.55); margin-bottom:auto }
.app-ui__row-label { font-size:clamp(.46rem,1vw,.65rem); font-weight:700; color:rgba(255,255,255,.55); margin-bottom:.6em }
.app-ui__cards { display:grid; grid-template-columns:repeat(5,1fr); gap:3% }
.app-card {
  aspect-ratio:2/2.9; border-radius:8%/6%; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; padding:6%; border:1px solid rgba(255,255,255,.14);
  background-size:cover; background-position:center; background-color:#1a1a24;
}
.app-card span { font-family:var(--font-display); font-weight:800; font-size:clamp(.4rem,.85vw,.58rem); line-height:1.2; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); position:relative; z-index:1 }
.app-card--1 { background-image:url('/assets/images/events/ev-hockey.jpg') }
.app-card--2 { background-image:url('/assets/images/events/ev-ufc.jpg') }
.app-card--3 { background-image:url('/assets/images/events/ev-worldcup.jpg') }
.app-card--4 { background-image:url('/assets/images/events/ev-movies.jpg') }
.app-card--5 { background-image:url('/assets/images/events/ev-f1.jpg') }
.app-card::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.65)) }
.app-card--live::before { content:'LIVE'; position:absolute; top:6%; left:6%; z-index:2; background:#ff453a; color:#fff; font-size:clamp(.32rem,.7vw,.46rem); font-weight:800; padding:.2em .7em; border-radius:999px; letter-spacing:.05em }

.tv__badge {
  position:absolute; top:-1rem; right:-.75rem; z-index:2;
  background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:.6rem .9rem;
  display:flex; align-items:center; gap:.55rem;
  box-shadow:var(--shadow-lg); font-size:.8rem; font-weight:700; color:var(--text);
}
.tv__badge .live-dot { background:#e0223f }
.tv__badge .live-dot::after { background:#e0223f }
.tv__badge-4k {
  position:absolute; bottom:1.5rem; left:-1rem; z-index:2;
  background:var(--brand-1); color:#fff; font-family:var(--font-display);
  font-weight:800; font-size:1rem; padding:.55rem 1rem; border-radius:12px;
  box-shadow:var(--shadow-md);
}
@media(max-width:520px){ .tv__badge{ top:-.75rem; right:0; font-size:.7rem } .tv__badge-4k{ left:0 } }

/* ─── Leagues row (generic sports labels) ─── */
.brands { padding:2.25rem 0; border-block:1px solid var(--border); background:var(--surface) }
.brands__label { text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted2); margin-bottom:1.4rem }
.leagues { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; margin-top:0 }
.league {
  display:flex; align-items:center; gap:.55rem;
  padding:.65rem 1.25rem; border-radius:999px;
  background:var(--gloss); border:1px solid var(--border);
  font-family:var(--font-display); font-weight:800; font-size:.88rem; color:var(--text);
  box-shadow:var(--shadow-sm);
  transition:border-color .2s, transform .2s var(--ease-out), box-shadow .2s;
}
.league:hover { border-color:var(--brand-1); transform:translateY(-2px); box-shadow:var(--shadow-md) }
.league svg { flex-shrink:0 }

/* ─── Trust bar ─── */
.trust-bar { background:var(--bg-alt); border-block:1px solid var(--border); padding:1rem 0 }
.trust-bar__inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1.75rem }
.trust-bar__item { display:flex; align-items:center; gap:.5rem; font-size:.85rem; font-weight:600; color:var(--muted); white-space:nowrap }
.trust-bar__item svg { flex-shrink:0; color:var(--cta) }
.trust-bar__stars { color:var(--gold-star); letter-spacing:1px }

/* ─── Sections ─── */
.section { padding:clamp(4rem,8vw,6.5rem) 0 }
.section--alt { background:var(--bg-alt); border-block:1px solid var(--border) }
.section__eyebrow {
  display:inline-block; font-family:var(--font-display); font-size:.75rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.15em; margin-bottom:.9rem;
  color:var(--brand-1);
}
.section__title { font-family:var(--font-display); font-size:clamp(1.9rem,4.2vw,3rem); font-weight:800; letter-spacing:-.03em; margin-bottom:.9rem; line-height:1.08; color:var(--text) }
.section__desc { color:var(--muted); max-width:580px; margin-bottom:2.5rem; font-size:1.08rem; line-height:1.65 }
.text-center .section__desc { margin-inline:auto }

/* ─── Stats band ─── */
.stats-band { display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; max-width:900px; margin:0 auto }
@media(min-width:768px){ .stats-band { grid-template-columns:repeat(4,1fr) } }
.stats-band__item { text-align:center; padding:1.6rem 1rem; background:var(--gloss); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm) }
.stats-band__num { font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; letter-spacing:-.03em; color:var(--brand-1); font-variant-numeric:tabular-nums }
.stats-band__label { font-size:.82rem; color:var(--muted); margin-top:.3rem; font-weight:600 }

/* ─── Savings calculator ─── */
.calc {
  max-width:760px; margin-inline:auto;
  background:var(--gloss); border:1px solid var(--border); border-radius:var(--radius-xl);
  padding:clamp(1.75rem,4vw,3rem); text-align:center;
  box-shadow:var(--shadow-lg);
}
.calc__label { font-size:1rem; color:var(--muted); margin-bottom:.75rem; font-weight:600 }
.calc__bill { font-family:var(--font-display); font-size:clamp(2.5rem,6vw,3.6rem); font-weight:800; margin-bottom:1.25rem; font-variant-numeric:tabular-nums; color:var(--text) }
.calc input[type=range] { width:100%; max-width:460px; accent-color:var(--brand-1); height:8px; cursor:pointer; margin-bottom:2rem }
.calc__result { display:grid; grid-template-columns:1fr 1fr; gap:1rem; max-width:560px; margin-inline:auto }
@media(max-width:560px){ .calc__result { grid-template-columns:1fr } }
.calc__box { background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.4rem 1rem }
.calc__box-num { font-family:var(--font-display); font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; font-variant-numeric:tabular-nums; color:var(--text) }
.calc__box--save { border-color:rgba(22,163,74,.3); background:rgba(22,163,74,.06) }
.calc__box--save .calc__box-num { color:var(--cta) }
.calc__box-label { font-size:.82rem; color:var(--muted); margin-top:.25rem }
.calc__cta { margin-top:2rem }

/* ─── Bento ─── */
.bento { display:grid; gap:1rem; grid-template-columns:1fr }
@media(min-width:640px){ .bento { grid-template-columns:repeat(2,1fr) } }
@media(min-width:960px){ .bento { grid-template-columns:repeat(3,1fr) } }
.bento__card {
  background:var(--gloss); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1.8rem 1.6rem; box-shadow:var(--shadow-sm);
  transition:border-color .25s, transform .25s var(--ease-out), box-shadow .25s;
  position:relative; overflow:hidden;
}
.bento__card:hover { border-color:rgba(224,34,63,.25); transform:translateY(-4px); box-shadow:var(--shadow-md) }
.bento__card--wide { grid-column:1/-1 }
@media(min-width:960px){ .bento__card--wide { grid-column:span 2 } }
.bento__icon {
  width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background:linear-gradient(135deg,rgba(224,34,63,.08),rgba(255,106,61,.06));
  border:1px solid rgba(224,34,63,.18); margin-bottom:1.1rem; color:var(--brand-1);
}
.bento__card h3 { font-family:var(--font-display); font-size:1.1rem; font-weight:700; margin-bottom:.5rem; color:var(--text) }
.bento__card p { font-size:.92rem; color:var(--muted); line-height:1.65 }

/* ─── Channel chips ─── */
.channel-showcase { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:.65rem }
.channel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.65rem }
.channel-chip {
  padding:.7rem 1rem; background:var(--surface); border:1px solid var(--border);
  border-radius:999px; font-size:.83rem; text-align:center; font-weight:700; color:var(--muted);
  font-family:var(--font-display); box-shadow:var(--shadow-sm);
  transition:border-color .2s, color .2s;
}
.channel-chip:hover { border-color:var(--brand-1); color:var(--text) }
.channel-chip--highlight { border-color:rgba(224,34,63,.3); color:var(--brand-1); background:rgba(224,34,63,.04) }

/* ─── Event posters ─── */
.events { overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.events__track { display:flex; gap:1rem; width:max-content; animation:ticker-scroll 44s linear infinite }
.events:hover .events__track { animation-play-state:paused }
@keyframes ticker-scroll { to { transform:translateX(-50%) } }
.event-card {
  width:200px; aspect-ratio:2/2.8; border-radius:16px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; padding:1.1rem;
  border:1px solid rgba(15,15,30,.1); flex-shrink:0; box-shadow:var(--shadow-md);
  background-size:cover; background-position:center;
  transition:transform .25s var(--ease-out), box-shadow .25s;
}
.event-card:hover { transform:translateY(-6px) scale(1.02); box-shadow:var(--shadow-lg) }
.event-card::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.75)) }
.event-card__tag { position:absolute; top:.8rem; left:.8rem; z-index:2; font-size:.62rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.25rem .7rem; border-radius:999px; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); color:#fff }
.event-card__tag--live { background:#e0223f }
.event-card h3 { position:relative; z-index:1; font-family:var(--font-display); font-weight:800; font-size:1.15rem; line-height:1.15; letter-spacing:-.01em; color:#fff }
.event-card p { position:relative; z-index:1; font-size:.72rem; color:rgba(255,255,255,.75); margin-top:.25rem }
.ev-hockey { background:radial-gradient(ellipse 90% 50% at 50% 100%,rgba(56,189,248,.5),transparent 60%),linear-gradient(200deg,#0b2545 0%,#04101f 55%,#0e3a5f) }
.ev-hockey::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.05) 38px 40px) }
.ev-worldcup { background:radial-gradient(circle at 50% 32%,rgba(34,197,94,.55) 0 18%,transparent 45%),linear-gradient(200deg,#052e16 0%,#02180b 60%,#14532d) }
.ev-worldcup::before { content:''; position:absolute; top:22%; left:50%; transform:translateX(-50%); width:52px; height:52px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#cbd5e1 70%); box-shadow:0 8px 24px rgba(0,0,0,.5) }
.ev-ufc { background:radial-gradient(ellipse 100% 60% at 50% 0%,rgba(245,158,11,.4),transparent 55%),linear-gradient(160deg,#451a03 0%,#1c0a01 60%,#78350f) }
.ev-f1 { background:linear-gradient(115deg,#7f1d1d 0%,#180404 55%,#b91c1c),repeating-linear-gradient(45deg,transparent 0 14px,rgba(255,255,255,.05) 14px 28px) }
.ev-movies { background:radial-gradient(ellipse 80% 55% at 50% 100%,rgba(124,58,237,.5),transparent 60%),linear-gradient(200deg,#2e1065 0%,#0d0521 60%,#4c1d95) }
.ev-nba { background:radial-gradient(circle at 50% 30%,rgba(249,115,22,.5) 0 14%,transparent 40%),linear-gradient(200deg,#431407 0%,#1a0801 60%,#7c2d12) }
.ev-series { background:radial-gradient(ellipse 80% 55% at 50% 0%,rgba(236,72,153,.4),transparent 55%),linear-gradient(160deg,#500724 0%,#170209 60%,#9d174d) }
.ev-nfl { background:radial-gradient(ellipse 90% 50% at 50% 100%,rgba(132,204,22,.35),transparent 55%),linear-gradient(200deg,#1a2e05 0%,#0a1202 60%,#3f6212) }

/* ─── Pricing ─── */
.pricing-grid { display:grid; gap:1.25rem; grid-template-columns:1fr; max-width:1000px; margin-inline:auto }
@media(min-width:768px){ .pricing-grid { grid-template-columns:repeat(3,1fr); align-items:stretch } }
.pricing-card {
  position:relative; background:var(--gloss); border:1px solid var(--border);
  border-radius:var(--radius-xl); padding:2.4rem 1.8rem 1.8rem;
  display:flex; flex-direction:column; text-align:left; box-shadow:var(--shadow-sm);
  transition:transform .25s var(--ease-out), box-shadow .25s, border-color .25s;
}
.pricing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md) }
.pricing-card--featured {
  border:2px solid var(--brand-1);
  box-shadow:var(--shadow-md);
}
.pricing-card--featured:hover { transform:translateY(-4px) }
.pricing-card__badge {
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:var(--brand-1); color:#fff; font-family:var(--font-display);
  font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
  padding:.4rem 1.2rem; border-radius:999px; white-space:nowrap;
}
.pricing-card__save { display:inline-block; align-self:flex-start; background:rgba(22,163,74,.09); border:1px solid rgba(22,163,74,.3); color:var(--cta); font-size:.72rem; font-weight:800; padding:.25rem .7rem; border-radius:999px; margin-bottom:.75rem }
.pricing-card__name { font-family:var(--font-display); font-size:1rem; color:var(--muted); margin-bottom:.35rem; font-weight:700 }
.pricing-card__price { display:flex; align-items:baseline; gap:.3rem; margin-bottom:.25rem }
.pricing-card__amount { font-family:var(--font-display); font-size:3rem; font-weight:800; letter-spacing:-.04em; color:var(--text) }
.pricing-card--featured .pricing-card__amount { color:var(--brand-1) }
.pricing-card__period { font-size:1rem; color:var(--muted) }
.pricing-card__total { font-size:.82rem; color:var(--muted2); margin-bottom:1.5rem }
.pricing-card__features { flex:1; margin-bottom:1.75rem }
.pricing-card__features li { font-size:.88rem; color:var(--muted); padding:.48rem 0 .48rem 1.6rem; position:relative; line-height:1.45; border-bottom:1px solid var(--border) }
.pricing-card__features li:last-child { border-bottom:none }
.pricing-card__features li::before { content:'✓'; position:absolute; left:0; top:.42rem; color:var(--cta); font-weight:800; font-size:.9rem }
.pricing-note { text-align:center; font-size:.85rem; color:var(--muted2); margin-top:1.75rem }
.pricing-note svg { vertical-align:middle; margin-right:.3rem; color:var(--cta) }

.guarantee {
  display:flex; align-items:center; gap:1.25rem; max-width:640px; margin:2.5rem auto 0;
  background:rgba(22,163,74,.05); border:1px solid rgba(22,163,74,.25);
  border-radius:var(--radius-lg); padding:1.4rem 1.6rem; text-align:left;
}
.guarantee svg { flex-shrink:0; color:var(--cta) }
.guarantee h4 { font-family:var(--font-display); font-size:1rem; font-weight:800; margin-bottom:.2rem; color:var(--text) }
.guarantee p { font-size:.87rem; color:var(--muted); line-height:1.55 }

/* ─── Compare table ─── */
.compare-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); box-shadow:var(--shadow-md) }
.compare { width:100%; border-collapse:collapse; font-size:.92rem }
.compare th,.compare td { padding:1.05rem 1.25rem; text-align:left; border-bottom:1px solid var(--border); color:var(--muted) }
.compare th { font-family:var(--font-display); font-weight:700; color:var(--muted2); font-size:.72rem; text-transform:uppercase; letter-spacing:.09em }
.compare tr:last-child td { border-bottom:none }
.compare .hl-row { background:linear-gradient(90deg,rgba(224,34,63,.05),rgba(255,106,61,.03)) }
.compare .hl-row td:first-child { font-weight:800; color:var(--brand-1) }
.compare .hl-row td { color:var(--text); font-weight:600 }

/* ─── Steps ─── */
.steps { display:grid; gap:1.25rem; grid-template-columns:1fr }
@media(min-width:768px){ .steps { grid-template-columns:repeat(3,1fr) } }
.steps--quad { grid-template-columns:1fr }
@media(min-width:640px){ .steps--quad { grid-template-columns:repeat(2,1fr) } }
@media(min-width:1100px){ .steps--quad { grid-template-columns:repeat(4,1fr) } }
.steps--quad .step p { font-size:.88rem }
.step { background:var(--gloss); border:1px solid var(--border); border-radius:var(--radius-xl); padding:2rem 1.6rem; position:relative; box-shadow:var(--shadow-sm); transition:border-color .25s, transform .25s var(--ease-out), box-shadow .25s }
.step:hover { border-color:rgba(224,34,63,.25); transform:translateY(-3px); box-shadow:var(--shadow-md) }
.step__num {
  font-family:var(--font-display); font-size:1rem; font-weight:800; color:#fff;
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-1); margin-bottom:1.1rem;
}
.step h3 { font-family:var(--font-display); font-size:1.12rem; margin-bottom:.5rem; font-weight:700; color:var(--text) }
.step p { font-size:.92rem; color:var(--muted); line-height:1.65 }

/* ─── Testimonials (classic cards) ─── */
.testimonials-grid { display:grid; gap:1.1rem; grid-template-columns:1fr }
@media(min-width:640px){ .testimonials-grid { grid-template-columns:repeat(2,1fr) } }
@media(min-width:960px){ .testimonials-grid { grid-template-columns:repeat(3,1fr) } }
.testimonial { background:var(--gloss); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1.75rem; display:flex; flex-direction:column; box-shadow:var(--shadow-sm) }
.testimonial__stars { color:var(--gold-star); font-size:.95rem; letter-spacing:2px; margin-bottom:.75rem }
.testimonial p { font-size:.92rem; color:var(--muted); line-height:1.7; margin-bottom:1rem; flex:1 }
.testimonial__author { display:flex; align-items:center; gap:.75rem }
.testimonial__avatar { width:42px; height:42px; border-radius:50%; background:var(--brand-1); display:grid; place-items:center; font-weight:800; font-size:.9rem; flex-shrink:0; color:#fff }
.testimonial__name { font-weight:700; font-size:.9rem; color:var(--text) }
.testimonial__city { font-size:.76rem; color:var(--muted2) }

/* ─── WhatsApp chats — light theme (authentic) ─── */
.wa-chats { display:grid; gap:1.1rem; grid-template-columns:1fr }
@media(min-width:640px){ .wa-chats { grid-template-columns:repeat(2,1fr) } }
@media(min-width:960px){ .wa-chats { grid-template-columns:repeat(3,1fr) } }
.wa-chat { border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); background:#efeae2; display:flex; flex-direction:column; box-shadow:var(--shadow-md) }
.wa-chat__header { display:flex; align-items:center; gap:.7rem; padding:.8rem 1rem; background:#f0f2f5; border-bottom:1px solid rgba(15,15,30,.06) }
.wa-chat__avatar { width:36px; height:36px; border-radius:50%; background:var(--brand-1); display:grid; place-items:center; font-weight:800; font-size:.85rem; color:#fff; flex-shrink:0 }
.wa-chat__name { font-weight:700; font-size:.88rem; color:#111b21 }
.wa-chat__status { font-size:.68rem; color:#667781 }
.wa-chat__body { flex:1; padding:1rem; display:flex; flex-direction:column; gap:.55rem; background:#efeae2 }
.wa-msg { max-width:88%; padding:.6rem .8rem; border-radius:10px; font-size:.82rem; line-height:1.5; color:#111b21; position:relative; box-shadow:0 1px 1px rgba(15,15,30,.08) }
.wa-msg--in  { background:#ffffff; align-self:flex-start; border-top-left-radius:2px }
.wa-msg--out { background:#d9fdd3; align-self:flex-end; border-top-right-radius:2px }
.wa-msg__time { display:block; text-align:right; font-size:.6rem; color:#667781; margin-top:.25rem }
.wa-msg--out .wa-msg__time::after { content:' ✓✓'; color:#53bdeb }

/* ─── Rating bar ─── */
.rating-bar { display:flex; align-items:center; gap:2rem; flex-wrap:wrap; padding:1.9rem 2.2rem; background:var(--gloss); border:1px solid var(--border); border-radius:var(--radius-xl); margin-bottom:2rem; box-shadow:var(--shadow-md) }
.rating-bar__score { text-align:center; flex-shrink:0 }
.rating-bar__num { font-family:var(--font-display); font-size:3.75rem; font-weight:800; line-height:1; color:var(--text) }
.rating-bar__stars { color:var(--gold-star); font-size:1.15rem; letter-spacing:2px }
.rating-bar__count { font-size:.8rem; color:var(--muted); margin-top:.25rem }
.rating-bar__breakdown { flex:1; min-width:200px }
.rating-row { display:flex; align-items:center; gap:.6rem; margin-bottom:.35rem }
.rating-row__label { font-size:.8rem; color:var(--muted); width:2.5rem; text-align:right }
.rating-row__bar { flex:1; height:7px; background:rgba(15,15,30,.07); border-radius:999px; overflow:hidden }
.rating-row__fill { height:100%; background:linear-gradient(90deg,#f59e0b,#d97706); border-radius:999px }
.rating-row__pct { font-size:.76rem; color:var(--muted2); width:2.5rem }

/* ─── FAQ ─── */
.faq-list { max-width:740px; margin-inline:auto }
.faq-item { border:1px solid var(--border); border-radius:var(--radius); margin-bottom:.7rem; background:var(--gloss); overflow:hidden; box-shadow:var(--shadow-sm); transition:border-color .25s, box-shadow .25s }
.faq-item.is-open { border-color:rgba(224,34,63,.25); box-shadow:var(--shadow-md) }
.faq-q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.2rem 1.4rem; text-align:left; font-family:var(--font-display); font-weight:700; font-size:1rem; line-height:1.4; color:var(--text) }
.faq-q:focus-visible { outline:2px solid var(--brand-1); outline-offset:-2px }
.faq-q svg { flex-shrink:0; transition:transform .3s var(--ease-out); color:var(--muted2) }
.faq-item.is-open .faq-q svg { transform:rotate(180deg) }
.faq-a { overflow:hidden; height:0 }
.faq-a__inner { padding:0 1.4rem 1.3rem; color:var(--muted); font-size:.94rem; line-height:1.75 }
.faq-a__inner a { color:var(--brand-1); text-decoration:underline; text-underline-offset:2px }

/* ─── CTA band — dark contrast close ─── */
.cta-band {
  position:relative; padding:clamp(3.5rem,7vw,5.5rem) 2rem;
  border-radius:var(--radius-xl); overflow:hidden; text-align:center;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, rgba(224,34,63,.25), transparent 65%),
    radial-gradient(ellipse 70% 100% at 50% 100%, rgba(255,106,61,.15), transparent 65%),
    linear-gradient(160deg,#15151f,#0b0b14);
  border:1px solid rgba(15,15,30,.2);
  box-shadow:var(--shadow-lg);
}
.cta-band h2 { font-family:var(--font-display); font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; margin-bottom:.9rem; letter-spacing:-.02em; color:#fff }
.cta-band p { color:rgba(255,255,255,.65); margin-bottom:2rem; max-width:520px; margin-inline:auto; font-size:1.08rem }
.cta-band__ctas { display:flex; flex-wrap:wrap; gap:1rem; justify-content:center }

/* ─── Page hero (inner pages) ─── */
.page-hero { padding:3.5rem 0 2.75rem; border-bottom:1px solid var(--border); position:relative; overflow:hidden }
.page-hero::before { content:''; position:absolute; left:50%; top:-60%; transform:translateX(-50%); width:900px; height:500px; background:radial-gradient(ellipse, rgba(224,34,63,.06), transparent 70%); pointer-events:none }
.page-hero h1 { font-family:var(--font-display); font-size:clamp(2rem,4.8vw,3.2rem); font-weight:800; letter-spacing:-.03em; margin-bottom:.85rem; position:relative; color:var(--text) }
.page-hero p { color:var(--muted); max-width:640px; font-size:1.08rem; line-height:1.65; position:relative }

/* Photo variant — dramatic dark hero with background photography */
.page-hero--photo {
  padding:clamp(4rem,10vw,7rem) 0;
  background-size:cover; background-position:center;
  border-bottom:none;
}
.page-hero--photo::before { display:none }
.page-hero--photo::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(5,5,10,.55),rgba(5,5,10,.82)); pointer-events:none;
}
.page-hero--photo .container { position:relative; z-index:1 }
.page-hero--photo .section__eyebrow { color:#ff6a5c }
.page-hero--photo h1 { color:#fff }
.page-hero--photo p { color:rgba(255,255,255,.78) }

/* Lifestyle banner — full-bleed photo section with overlay copy */
.lifestyle-banner {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  min-height:340px; display:flex; align-items:center;
  background-size:cover; background-position:center;
  box-shadow:var(--shadow-lg);
}
.lifestyle-banner::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(5,5,10,.82) 0%,rgba(5,5,10,.5) 55%,transparent 100%);
}
.lifestyle-banner__content { position:relative; z-index:1; padding:2.5rem clamp(1.5rem,5vw,4rem); max-width:560px }
.lifestyle-banner__content h2 { font-family:var(--font-display); font-size:clamp(1.6rem,3.5vw,2.4rem); font-weight:800; color:#fff; letter-spacing:-.02em; margin-bottom:.85rem }
.lifestyle-banner__content p { color:rgba(255,255,255,.78); font-size:1.05rem; margin-bottom:1.5rem; line-height:1.6 }

/* Two-column device intro (how-it-works) */
.device-intro { display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:center; margin-bottom:3rem }
@media(min-width:900px){ .device-intro { grid-template-columns:1fr 1fr } }
.device-intro__photo { border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg) }
.device-intro__photo img { width:100%; height:100%; object-fit:cover; display:block }

/* ─── Tabs ─── */
.tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem }
.tab { padding:.6rem 1.25rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); font-size:.87rem; font-weight:700; color:var(--muted); font-family:var(--font-display); box-shadow:var(--shadow-sm); transition:all .2s }
.tab.is-active,.tab:hover { background:var(--brand-1); border-color:transparent; color:#fff }

/* ─── Notice ─── */
.notice { display:flex; align-items:flex-start; gap:.75rem; padding:1.1rem 1.3rem; border-radius:var(--radius); background:rgba(3,105,161,.05); border:1px solid rgba(3,105,161,.2); font-size:.9rem; color:var(--muted); margin-top:1.5rem }
.notice svg { flex-shrink:0; color:var(--blue); margin-top:.1rem }
.notice a { color:var(--blue); text-decoration:underline }

/* ─── Footer ─── */
.site-footer { background:var(--bg-alt); border-top:1px solid var(--border); padding:4rem 0 0 }
.footer__grid { display:grid; gap:2.5rem; grid-template-columns:1fr; padding-bottom:3rem }
@media(min-width:768px){ .footer__grid { grid-template-columns:1.6fr repeat(3,1fr) } }
.footer__brand p { font-size:.88rem; color:var(--muted); margin-top:.75rem; max-width:280px; line-height:1.7 }
.footer__brand-rating { display:flex; align-items:center; gap:.5rem; margin-top:1rem }
.footer__brand-stars { color:var(--gold-star); font-size:.85rem }
.footer__brand-score { font-size:.8rem; color:var(--muted) }
.site-footer h4 { font-family:var(--font-display); font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; color:var(--muted2); margin-bottom:1rem; font-weight:800 }
.site-footer ul li { margin-bottom:.55rem }
.site-footer a { font-size:.88rem; color:var(--muted); transition:color .2s }
.site-footer a:hover { color:var(--text) }
.footer__bottom { border-top:1px solid var(--border); padding:1.25rem 0; font-size:.8rem; color:var(--muted2) }
.footer__bottom-row { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem }

/* ─── WhatsApp float ─── */
.wa-float {
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:90;
  width:60px; height:60px; border-radius:50%; background:#25d366; color:#fff;
  display:grid; place-items:center; box-shadow:0 6px 24px rgba(37,211,102,.45);
  transition:transform .2s var(--ease-out);
}
.wa-float:hover { transform:scale(1.1) }

/* ─── Sticky mobile CTA ─── */
.sticky-cta {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:rgba(255,255,255,.94); backdrop-filter:blur(16px);
  border-top:1px solid var(--border-strong);
  box-shadow:0 -8px 32px rgba(15,15,30,.1);
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transform:translateY(110%); transition:transform .35s var(--ease-out);
}
.sticky-cta.is-visible { transform:translateY(0) }
.sticky-cta__price { line-height:1.2 }
.sticky-cta__price strong { font-family:var(--font-display); font-size:1.25rem; font-weight:800; color:var(--brand-1) }
.sticky-cta__price small { display:block; font-size:.7rem; color:var(--muted2) }
.sticky-cta .btn { flex-shrink:0 }
@media(min-width:961px){ .sticky-cta { display:none } }
body.has-sticky-cta .wa-float { bottom:5.5rem }

/* ─── Cookie bar ─── */
.cookie-bar {
  position:fixed; bottom:1rem; left:1rem; right:1rem; max-width:440px; margin-inline:auto; z-index:80;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:1rem 1.25rem; display:flex; align-items:center; gap:1rem; font-size:.85rem;
  box-shadow:var(--shadow-lg); color:var(--muted);
}
@media(max-width:960px){ .cookie-bar { bottom:5.5rem } }
.cookie-bar[hidden] { display:none }

/* ─── Utilities ─── */
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mb-4{margin-bottom:2rem}

@media(prefers-reduced-motion:reduce) {
  .live-dot::after,.events__track { animation:none }
  * { transition-duration:.01ms !important }
}