/* Self-hosted fonts (latin subset, variable weight). SIL Open Font License. */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('assets/fonts/outfit-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
}

/* ============================================
   SUNAMAX — CSS
   ============================================ */

/* RESET & BASE */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #080C14;
  --bg2:        #0E1525;
  --card:       #111827;
  --card2:      #1A2340;
  --cyan:       #00D4FF;
  --cyan-dim:   #00D4FF33;
  --orange:     #FF6B35;
  --orange-dim: #FF6B3522;
  --white:      #F0F4FF;
  --grey:       #8892A4;
  --border:     #1E2D45;
  --font-display: 'Outfit', sans-serif;
  --font-body:    'Inter', sans-serif;
  --radius:     12px;
  --radius-lg:  20px;
  --transition: 0.25s ease;
}

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 28px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.btn--primary {
  background: var(--orange);
  color: #fff;
}
.btn--primary:hover { background: #ff8255; transform: translateY(-1px); box-shadow: 0 8px 24px #FF6B3540; }
.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--border);
}
.btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn--nav {
  background: var(--orange);
  color: #fff;
  padding: 9px 20px;
  font-size: 14px;
}
.btn--nav:hover { background: #ff8255; }
.btn--lg { padding: 16px 36px; font-size: 17px; }
.btn--full { width: 100%; }

/* Mobile bottom nav bar + "More" sheet (phones only) */
.botbar, .sheet-overlay, .mobile-sheet { display: none; }

/* ============================================
   NAV
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.3s, backdrop-filter 0.3s, border-bottom 0.3s;
}
.nav.scrolled {
  background: rgba(8, 12, 20, 0.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 40px;
}
.nav__logo {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--white);
  letter-spacing: -0.5px;
}
.nav__logo span { color: var(--cyan); }

.nav__links {
  display: flex;
  gap: 32px;
  margin-right: auto;
}
.nav__links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--grey);
  transition: color var(--transition);
}
.nav__links a:hover { color: var(--white); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Language toggle */
.lang-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}
.lang-toggle a {
  color: var(--grey);
  transition: color var(--transition);
}
.lang-toggle a:hover { color: var(--white); }
.lang-toggle a.active { color: var(--cyan); cursor: default; }
.lang-sep { color: var(--border); }

.geo-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition);
}
.geo-pill:hover { border-color: var(--cyan); }
.geo-pill { font-family: var(--font-body); color: var(--white); }
.geo-caret { font-size: 10px; color: var(--grey); margin-left: 1px; line-height: 1; }
.geo-flag { display: inline-flex; align-items: center; }

/* Compact currency selector */
.geo-select { position: relative; }
.geo-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px;
  min-width: 240px;
  display: none;
  flex-direction: column;
  box-shadow: 0 14px 36px #00000075;
  z-index: 120;
}
.geo-menu.open { display: flex; }
.geo-seg {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grey);
  font-weight: 600;
  padding: 4px 8px 6px;
}
.geo-list { display: flex; flex-direction: column; gap: 2px; }
.geo-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition);
}
.geo-row:hover { background: var(--card); }
.geo-row.active { background: var(--cyan-dim); }
.geo-row .opt-code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--white);
  width: 36px;
}
.geo-row.active .opt-code { color: var(--cyan); }
.geo-row .opt-name { font-size: 12px; color: var(--grey); }
.geo-row .yourtag {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--cyan);
  font-weight: 600;
}
.geo-row .yourtag[hidden] { display: none; }
.geo-note {
  font-size: 12px;
  line-height: 1.5;
  color: #FFC773;
  background: var(--orange-dim);
  border: 1px solid #FF6B3544;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
}
.geo-note[hidden] { display: none; }
.geo-foot {
  display: block;
  margin-top: 6px;
  padding: 8px 10px 4px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--cyan);
  font-weight: 500;
  cursor: pointer;
}
.geo-foot:hover { text-decoration: underline; }
.flag-img {
  width: 20px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
  display: inline-block;
  vertical-align: -2px;
  box-shadow: 0 0 0 1px #00000030;
}
.ch-card .flag-img { margin-right: 6px; }

.nav__burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: auto;
}
.nav__burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: all 0.3s;
}

.nav__mobile {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 16px 24px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.nav__mobile a {
  padding: 12px 0;
  font-size: 16px;
  color: var(--grey);
  border-bottom: 1px solid var(--border);
}
.nav__mobile a:last-child { border-bottom: none; }
.nav__mobile .btn {
  color: #fff;
  padding: 13px 20px;
  border-bottom: none;
  margin-top: 10px;
  justify-content: center;
}
.nav__mobile-lang .lang-toggle a { padding: 0; border-bottom: none; }
.nav__mobile.open { display: flex; }

/* GEO BANNER */
.geo-banner {
  position: fixed;
  bottom: calc(20px + var(--consent-h, 0px)); /* lifted while the cookie question is open */
  left: 50%;
  transform: translateX(-50%);
  background: var(--card2);
  border: 1px solid var(--cyan);
  border-radius: var(--radius);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 99;
  max-width: 560px;
  width: calc(100% - 48px);
  font-size: 14px;
  box-shadow: 0 8px 32px #00000060;
  animation: slideUp 0.4s ease;
}
@keyframes slideUp {
  from { transform: translateX(-50%) translateY(20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}
/* "come back soon" notice shown by contact buttons while the WhatsApp line is not open (script.js, initContactSoon) */
.soon {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 10, 20, 0.72);
}
.soon__box {
  width: 100%;
  max-width: 400px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 22px 18px;
  text-align: center;
}
.soon__title { font-family: var(--font-display); font-size: 20px; line-height: 1.3; margin-bottom: 10px; }
.soon__text { color: var(--grey); font-size: 15px; line-height: 1.6; margin-bottom: 18px; }
.soon__mail { width: 100%; justify-content: center; }
.soon__addr { color: var(--grey); font-size: 13px; margin-top: 8px; user-select: all; }
.soon__close {
  margin-top: 10px;
  padding: 10px 18px;
  background: none;
  border: 0;
  color: var(--grey);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.soon__close:hover, .soon__close:focus-visible { color: var(--white); }

/* cookie question (script.js, initConsent). Both answers are equally easy to give. */
.consent {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  width: calc(100% - 48px);
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 32px #00000060;
  font-size: 13.5px;
  line-height: 1.5;
  color: #c3cde0;
}
.consent__text a { color: var(--cyan); }
.consent__actions { display: flex; gap: 8px; flex-shrink: 0; }
.consent__btn {
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 7px;
  background: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.consent__btn--yes { background: var(--cyan); border-color: var(--cyan); color: var(--bg); }
.geo-banner__btn {
  background: var(--cyan);
  color: var(--bg);
  border: none;
  border-radius: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.geo-banner__close {
  background: none;
  border: none;
  color: var(--grey);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  margin-left: auto;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  padding: 120px 24px 80px;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
/* Full-width ambient video backdrop (shows through the transparent hero, covered by sections below) */
.hero__bg {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.18;
  pointer-events: none;
}
.hero__content, .hero__devices { position: relative; z-index: 1; }
.hero__globe {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  opacity: 0.4;
  pointer-events: none;
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
}
.eyebrow-dot {
  width: 8px; height: 8px;
  background: var(--cyan);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 #00D4FF66; }
  50% { box-shadow: 0 0 0 8px #00D4FF00; }
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -2px;
  margin-bottom: 24px;
}
.hero__title--accent {
  color: var(--cyan);
  display: block;
}
.hero__sub {
  font-size: 18px;
  color: var(--grey);
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 480px;
}
.hero__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.hero__proof {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.proof-item {
  padding: 0 24px;
  text-align: center;
}
.proof-item:first-child { padding-left: 0; }
.proof-item strong {
  display: block;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
}
.proof-item span {
  font-size: 12px;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.proof-divider {
  width: 1px;
  height: 40px;
  background: var(--border);
}

/* Hero mock: a TV whose whole screen is the clip, with a phone beside it playing the same thing */
.hero__devices { display: flex; justify-content: center; align-items: center; }
.tvset { position: relative; width: 520px; max-width: 100%; }
.tvset__tv {
  padding: 6px; /* the bezel */
  border-radius: 14px;
  background: linear-gradient(160deg, #1d2738, #0a0e16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 90px rgba(0, 212, 255, 0.1);
}
.tvset__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: linear-gradient(160deg, #0b1830, #0a1424);
  isolation: isolate;
}
.tvset__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
/* shade at the top and bottom so the logo and the banner read over any clip */
.tvset__screen::after {
  z-index: 2;
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 14, 26, 0.4), transparent 24%, transparent 60%, rgba(6, 14, 26, 0.62));
  pointer-events: none;
}
.tvset__brand {
  position: absolute;
  top: 10px; right: 13px;
  z-index: 3;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.tvset__brand b { color: var(--cyan); }
.tvset__banner {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px;
  border-radius: 8px;
  background: rgba(8, 12, 20, 0.74);
}
.tvset__banner .ch-name { font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.tvset__dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a5a; flex-shrink: 0; animation: pulse-red 2s infinite; }
.tvset__banner.is-vod .tvset__dot { background: var(--cyan); animation: none; }
.tvset__stand { position: relative; width: 34%; height: 15px; margin: 0 auto; }
.tvset__stand::before { content: ''; position: absolute; left: 50%; top: 0; width: 24%; height: 10px; transform: translateX(-50%); background: #131a28; }
.tvset__stand::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 5px; background: linear-gradient(90deg, #0d121c, #212b3d, #0d121c); }
.tvset__phone {
  position: absolute;
  right: -28px; bottom: 26px;
  width: 112px;
  aspect-ratio: 9 / 19;
  padding: 5px;
  border-radius: 22px;
  background: linear-gradient(160deg, #26314a, #0a0e16);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 18px 50px rgba(0, 0, 0, 0.7);
}
.tvset__phone-screen { position: relative; width: 100%; height: 100%; border-radius: 17px; overflow: hidden; background: linear-gradient(160deg, #0b1830, #0a1424); }
/* the phone browses the on-demand library: a slow, endless scroll of covers (the last wall repeats the first, so the loop is seamless) */
.tvset__phone-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  padding: 9px 6px 14px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.3px;
  color: #fff;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.95) 45%, rgba(8, 12, 20, 0));
}
.tvset__feed { display: flow-root; animation: feed-scroll 36s linear infinite; } /* flow-root keeps the last image's margin inside, so the loop point is exact */
.tvset__feed img { width: 100%; height: auto; display: block; margin-bottom: 3px; }
/* six walls: the last two repeat the first two, because the screen shows almost two walls at once.
   The loop restarts after four, at a point where the picture is identical. */
@keyframes feed-scroll { to { transform: translateY(-66.6667%); } }
/* which kind of thing is on right now */
.tvset__cats { display: flex; justify-content: center; gap: 24px; margin-top: 14px; font-size: 13px; color: var(--grey); }
.tvset__cat { position: relative; padding-bottom: 7px; transition: color 0.3s ease; }
.tvset__cat::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--cyan);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.tvset__cat.active { color: #fff; }
.tvset__cat.active::after { transform: scaleX(1); }
@media (min-width: 961px) {
  .tvset__brand { top: 14px; right: 18px; font-size: 16px; }
  .tvset__banner { left: 14px; bottom: 14px; padding: 8px 14px; gap: 9px; }
  .tvset__banner .ch-name { font-size: 15px; }
}

/* ============================================
   DEVICES STRIP
   ============================================ */
.devices-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  background: var(--bg2);
}
.devices-strip__label {
  font-size: 13px;
  color: var(--grey);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 16px;
}
.devices-strip__icons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.device-icon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
}
.device-icon img { width: 18px; height: 18px; flex-shrink: 0; }

/* Condensed "Why SunaMax" strip */
.feature-strip {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 22px 24px;
  background: var(--bg2);
}
.feature-strip__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 28px;
}
.feature-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--grey);
}
.feature-strip__item svg { width: 20px; height: 20px; color: var(--cyan); flex-shrink: 0; }

/* FAQ contact prompt */
.faq__contact {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.faq__contact-text { color: var(--grey); font-size: 15px; }
.faq__contact-text strong { color: var(--white); }
.faq__contact-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ============================================
   SECTIONS SHARED
   ============================================ */
.section { padding: 100px 0; }

.section__header {
  text-align: center;
  margin-bottom: 60px;
}
.section__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
}
.section__sub {
  color: var(--grey);
  margin-top: 12px;
  font-size: 16px;
}

/* ============================================
   FEATURES
   ============================================ */
.features { background: var(--bg); }
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
}
.feature-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: border-color var(--transition), transform var(--transition);
}
.feature-card:hover {
  border-color: var(--cyan);
  transform: translateY(-3px);
}
.feature-card--large {
  grid-column: span 2;
}
.feature-card__icon {
  color: var(--cyan);
  margin-bottom: 16px;
  line-height: 0;
}
.feature-card__icon svg {
  width: 30px;
  height: 30px;
  display: block;
}
.feature-card--large .feature-card__icon svg { width: 34px; height: 34px; }
.feature-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}
.feature-card p {
  color: var(--grey);
  font-size: 14px;
  line-height: 1.7;
}
.feature-card__bar {
  margin-top: 20px;
}
.feature-card__bar span {
  font-size: 12px;
  color: var(--grey);
  display: block;
  margin-bottom: 8px;
}
.bar-fill {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.bar-fill::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--w);
  background: linear-gradient(90deg, var(--cyan), #00ffcc);
  border-radius: 4px;
  animation: barGrow 1.5s ease forwards;
}
@keyframes barGrow {
  from { width: 0; }
  to   { width: var(--w); }
}
.local-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.local-channels span {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
}

/* ============================================
   CHANNELS
   ============================================ */
.channels { background: var(--bg2); }
.channels__tabs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.tab-btn {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  color: var(--grey);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
}
.tab-btn:hover { color: var(--white); border-color: var(--grey); }
.tab-btn.active {
  background: var(--cyan-dim);
  border-color: var(--cyan);
  color: var(--cyan);
}
.channel-panel { display: none; }
.channel-panel.active { display: block; }
.channel-panel.active { animation: panelIn 0.35s ease; }
@keyframes panelIn { from { opacity: 0; } to { opacity: 1; } }

/* auto-rolling shelves (script.js, initAutoRoll): snapping would fight the drift,
   and the looped copies only exist for the phone shelves */
.is-rolling { scroll-snap-type: none !important; }
@media (min-width: 641px) { .roll-clone { display: none !important; } }
.channel-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ch-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #d5deee;
  text-align: center;
  transition: all var(--transition);
  cursor: default;
}
.ch-card:hover {
  border-color: var(--cyan);
  background: var(--cyan-dim);
  color: var(--cyan);
}

/* ============================================
   WATCH — Live TV + On Demand (merged, compact)
   ============================================ */
.watch { background: var(--bg2); padding-top: 56px; padding-bottom: 56px; }
.watch .section__header { margin-bottom: 34px; }
.watch__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px;
  align-items: start;
}
.watch__col-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--grey);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.watch__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff5a5a;
  box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.5);
  animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 90, 90, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(255, 90, 90, 0); }
}
.watch__col { min-width: 0; } /* lets the swipe shelves scroll instead of stretching the column */
/* channel tabs + uniform tile grid (every channel is the same 16:10 tile, logo or name) */
.watch .channels__tabs { margin-bottom: 16px; gap: 6px; }
.watch .tab-btn { padding: 7px 13px; font-size: 12.5px; border-radius: 7px; }
.watch .channel-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
.watch .ch-card {
  aspect-ratio: 16 / 10;
  padding: 6px;
  font-size: 13px;
  line-height: 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.watch .ch-card--logo { padding: 0; overflow: hidden; border-color: rgba(255, 255, 255, 0.1); }
.ch-card--logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* on-demand column */
/* genres are a plain line of text: they describe the library, they are not controls */
.vod__tags { margin-bottom: 16px; font-size: 13px; line-height: 1.5; letter-spacing: 0.2px; color: var(--grey); }
.watch .vod__grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.watch .vod__poster { aspect-ratio: auto; border-radius: 10px; }
.watch .vod__poster-label { font-size: 14px; left: 8px; bottom: 8px; }
.watch .vod__poster-tag { font-size: 9.5px; padding: 3px 8px; top: 7px; right: 7px; }

/* channels from abroad: a framed band under the tiles, not a fifth category tab */
.world {
  margin-top: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: linear-gradient(90deg, rgba(0, 212, 255, 0.06), rgba(0, 212, 255, 0) 70%);
}
.world__label { flex: 0 0 150px; font-size: 12px; line-height: 1.45; color: var(--grey); }
.world__label strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: var(--white); }
.world__flags { display: flex; flex-wrap: wrap; gap: 9px 16px; min-width: 0; font-size: 13px; color: #c3cde0; }
.world__flags span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.world__flags .world__more { color: var(--cyan); font-weight: 600; }

@media (min-width: 961px) {
  /* desktop: two full-width rows. Live TV is one line of eight tiles; On Demand is six large posters. */
  .watch__grid { grid-template-columns: 1fr; gap: 40px; }
  .watch__col { display: grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items: center; }
  .watch__col > * { margin-bottom: 16px; }
  .watch__col > .channels__panels, .watch__col > .world, .watch__col > .vod__grid { grid-column: 1 / -1; margin-bottom: 0; }
  .watch .channels__tabs { justify-content: flex-start; }
  .watch .channel-grid { grid-template-columns: repeat(8, 1fr); gap: 10px; }
  .watch .vod__grid { grid-template-columns: repeat(6, 1fr); gap: 14px; }
  .world { justify-content: space-between; padding: 12px 18px; }
  .world__label { flex: 0 1 auto; display: flex; align-items: baseline; gap: 12px; font-size: 13px; }
  .world__label strong { margin: 0; white-space: nowrap; }
  .world__flags { justify-content: flex-end; gap: 9px 20px; }
}

/* Row of services the one payment replaces (under the pricing intro) */
.replaces {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 24px;
}
.replaces img {
  width: 104px;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: block;
}
.replaces__note { margin-top: 12px; font-size: 11.5px; color: var(--grey); } /* full-strength grey: at 70% it failed the contrast check */

/* ============================================
   PRICING
   ============================================ */
.pricing { background: var(--bg); }
.device-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.toggle-label {
  font-size: 14px;
  color: var(--grey);
}
.toggle-group {
  display: flex;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.toggle-btn {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--grey);
  cursor: pointer;
  transition: all var(--transition);
  font-family: var(--font-body);
}
.toggle-btn.active {
  background: var(--cyan);
  color: var(--bg);
}
/* Free-trial banner above the pricing grid */
.pricing-trial {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(90deg, var(--bg2), var(--card));
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 14px 22px;
  margin-bottom: 32px;
}
.pricing-trial__text { font-size: 14px; color: var(--grey); }
.pricing-trial__text strong { color: var(--white); }
.pricing-trial__btn { padding: 9px 18px; font-size: 13px; white-space: nowrap; }

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  align-items: start;
}
.price-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  position: relative;
  transition: border-color var(--transition), transform var(--transition);
}
.price-card:hover { transform: translateY(-4px); border-color: var(--grey); }
.price-card--popular {
  border-color: var(--cyan);
  background: linear-gradient(160deg, var(--card2), var(--card));
  transform: translateY(-8px);
}
.price-card--popular:hover { border-color: var(--cyan); transform: translateY(-12px); }
.price-card--trial { border-style: dashed; }

.price-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyan);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 20px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.price-card__badge--gold {
  background: linear-gradient(90deg, #FFD700, #FFA500);
}
.price-card h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--grey);
}
.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.price-currency {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--grey);
}
.price-amount {
  font-family: var(--font-display);
  font-size: clamp(38px, 3.4vw, 52px);
  font-weight: 900;
  line-height: 1;
  color: var(--white);
}
.price-period {
  font-size: 14px;
  color: var(--grey);
}
.price-card__meta {
  font-size: 12px;
  color: var(--grey);
  margin-top: 6px;
}
.price-card__permonth {
  display: inline-block;
  margin-top: 12px;
  background: var(--cyan-dim);
  color: var(--cyan);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.price-card__saving {
  font-size: 12px;
  color: #5DCAA5;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 20px;
}
.price-card__features {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
  margin-top: 20px;
}
.price-card__features li {
  font-size: 14px;
  color: var(--grey);
}
.price-card__features li::first-letter { color: var(--cyan); }
.pricing__note {
  text-align: center;
  margin-top: 32px;
  font-size: 13px;
  color: var(--grey);
}

/* ============================================
   HOW IT WORKS
   ============================================ */
.how { background: var(--bg2); padding-top: 64px; padding-bottom: 64px; }
.how .section__header { margin-bottom: 34px; }
.how__steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 28px;
}
.how-step {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  flex: 1;
  max-width: 280px;
}
.how-step__num {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  color: var(--cyan);
  opacity: 0.3;
  margin-bottom: 6px;
  line-height: 1;
}
.how-step h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 7px;
}
.how-step p {
  color: var(--grey);
  font-size: 13px;
  line-height: 1.6;
}
.how-step__arrow {
  font-size: 24px;
  color: var(--border);
  padding: 0 16px;
  flex-shrink: 0;
}
.how__apps { text-align: center; }
.how__apps p {
  font-size: 14px;
  color: var(--grey);
  margin-bottom: 16px;
}
.app-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.app-tag {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
}

/* ============================================
   FAQ
   ============================================ */
.faq { background: var(--bg); }
.faq__list {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition);
}
.faq-item.open { border-color: var(--cyan); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: none;
  border: none;
  color: var(--white);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}
.faq-chevron {
  font-size: 20px;
  color: var(--cyan);
  flex-shrink: 0;
  transition: transform var(--transition);
}
.faq-item.open .faq-chevron { transform: rotate(45deg); }
.faq-a {
  padding: 0 24px;
  max-height: 0;
  overflow: hidden;
  color: var(--grey);
  font-size: 14px;
  line-height: 1.8;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-a {
  max-height: 300px;
  padding: 0 24px 20px;
}

/* ============================================
   CTA BAND
   ============================================ */
.cta-band {
  background: linear-gradient(135deg, #0a1830, #071220);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 100px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, #00D4FF18, transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.cta-band__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
  z-index: 0;
  pointer-events: none;
}
.cta-band .container { position: relative; z-index: 2; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .tvset__video, .cta-band__video, .hero__bg { display: none; }
  .tvset__feed { animation: none; }
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 16px;
}
.cta-band p {
  color: var(--grey);
  font-size: 18px;
  margin-bottom: 36px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 64px 0 40px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  margin-bottom: 48px;
}
.footer__brand p {
  color: var(--grey);
  font-size: 14px;
  margin-top: 12px;
  max-width: 260px;
}
.footer__social {
  display: flex;
  gap: 16px;
  margin-top: 20px;
}
.footer__social a {
  font-size: 13px;
  color: var(--grey);
  transition: color var(--transition);
}
.footer__social a:hover { color: var(--cyan); }
.footer__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer__col-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey);
  margin-bottom: 16px;
}
.footer__col a {
  display: block;
  font-size: 14px;
  color: var(--grey);
  margin-bottom: 10px;
  transition: color var(--transition);
}
.footer__col a:hover { color: var(--white); }
.footer__bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.footer__bottom p {
  font-size: 13px;
  color: var(--grey);
}
.footer__disclaimer { font-size: 12px; }

/* ============================================
   VALUE BAND — "Do the math."
   ============================================ */
.replace-band {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: clamp(56px, 8vw, 96px) 24px;
}
.replace-band__inner { text-align: center; }
.replace-band__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 14px;
}
.replace-band__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--white);
}
.replace-band__sub {
  max-width: 620px;
  margin: 18px auto 0;
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.6;
  color: var(--grey);
}

/* ============================================
   REVIEWS
   ============================================ */
.reviews { background: var(--bg2); }
.reviews__rating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 8px 18px;
}
.reviews__stars { color: #FFC773; font-size: 15px; letter-spacing: 2px; }
.reviews__score { font-size: 14px; color: var(--grey); }
.reviews__score strong { color: var(--white); }
.reviews__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-card__stars { color: #FFC773; font-size: 14px; letter-spacing: 2px; }
.review-card__text { color: #b8c2d6; font-size: 14px; line-height: 1.7; flex: 1; }
.review-card__author { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--grey); font-weight: 500; }

/* ============================================
   PAYMENT METHODS
   ============================================ */
.pricing__pay { text-align: center; margin-top: 40px; }
.pricing__pay-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--grey);
  margin-bottom: 16px;
}
.pay-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pay-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  min-width: 82px;
}
.pay-item img { width: 26px; height: 26px; opacity: 0.9; }
.pay-item span { font-size: 12px; color: var(--grey); }

/* ============================================
   VOD / ON DEMAND
   ============================================ */
.vod { background: var(--bg); }
.vod__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.vod__poster {
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: transform var(--transition);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.vod__poster:hover { transform: translateY(-4px); }
.vod__poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55));
  pointer-events: none;
}
/* a poster opens the free-trial chat: on hover it says so (the wording comes from data-cta, so each language has its own) */
.vod__poster::after {
  content: attr(data-cta) ' \2192';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  text-align: center;
  background: rgba(8, 12, 20, 0.72);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.25;
  opacity: 0;
  transition: opacity var(--transition);
  z-index: 2;
}
.vod__poster:hover::after, .vod__poster:focus-visible::after { opacity: 1; }
@media (hover: none) { .vod__poster::after { display: none; } .vod__poster:hover { transform: none; } }
/* posters with real artwork: a wall of four covers (assets/posters, 524 x 648) shown whole at every size,
   with the caption in a strip under it, so nothing is cropped or covered */
.vod__poster--art {
  display: grid;
  grid-template: "art art" auto "label tag" auto / minmax(0, 1fr) auto;
  align-items: center;
  background: #0b0e12;
}
.vod__poster--art::before { display: none; }
.vod__poster-img { grid-area: art; width: 100%; height: auto; display: block; }
.vod__poster--art .vod__poster-label { grid-area: label; position: static; padding: 8px 11px 9px; }
.vod__poster--art .vod__poster-tag { grid-area: tag; position: static; margin-right: 9px; }
.vod__poster-label {
  position: absolute;
  left: 12px;
  bottom: 11px;
  z-index: 1;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.vod__poster-tag {
  position: absolute;
  top: 9px;
  right: 9px;
  z-index: 1;
  background: rgba(6, 14, 26, 0.65);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #eaf2ff;
  text-transform: uppercase;
}
.vod__poster.p1 { background: linear-gradient(160deg, #1d9e75, #0a342c); }
.vod__poster.p2 { background: linear-gradient(160deg, #378add, #042c53); }
.vod__poster.p3 { background: linear-gradient(160deg, #d85a30, #4a1b0c); }
.vod__poster.p4 { background: linear-gradient(160deg, #7f77dd, #26215c); }
.vod__poster.p5 { background: linear-gradient(160deg, #d4537e, #4b1528); }
.vod__poster.p6 { background: linear-gradient(160deg, #ba7517, #412402); }

/* ============================================
   LEGAL / CONTENT PAGES
   ============================================ */
.legal {
  padding: 140px 0 90px;
  background: var(--bg);
  min-height: 70vh;
}
.legal__inner { max-width: 820px; }
.legal__eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.legal__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -1px;
  margin: 12px 0 8px;
}
.legal__updated {
  color: var(--grey);
  font-size: 14px;
  margin-bottom: 40px;
}
.legal__body { color: #b8c2d6; font-size: 15px; }
.legal__body h2 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--white);
  margin: 36px 0 12px;
}
.legal__body h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--white);
  margin: 24px 0 8px;
}
.legal__body p { margin-bottom: 16px; line-height: 1.8; }
.legal__body ul { margin: 0 0 16px 22px; }
.legal__body li { margin-bottom: 8px; line-height: 1.7; }
.legal__body a { color: var(--cyan); }
.notfound__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.legal__body .notfound__actions a.btn--primary { color: #fff; }
.legal__body .notfound__actions a.btn--ghost { color: var(--white); }
.legal__body a:hover { text-decoration: underline; }

/* setup guides (setup/<device>/): the legal-page layout plus numbered steps */
.guide__lead { color: #b8c2d6; font-size: 17px; line-height: 1.7; margin-bottom: 28px; max-width: 640px; }
.guide__need { padding: 4px 22px 8px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.guide__need h2 { margin-top: 18px; }
.legal__body a[data-wa] { cursor: pointer; }
.guide__steps { list-style: none; counter-reset: step; margin: 0; }
.guide__steps > li { counter-increment: step; position: relative; padding: 0 0 6px 58px; margin-bottom: 18px; }
.guide__steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--cyan-dim);
  color: var(--cyan);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
}
.guide__steps h3 { margin: 6px 0 8px; font-size: 18px; }
.guide__tip { padding: 12px 16px; border-left: 3px solid var(--cyan); background: var(--card); border-radius: 0 8px 8px 0; font-size: 14px; }
.guide__more { margin-top: 36px; }
.guide__cta { margin-top: 28px; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); }
.guide__cta h2 { margin: 0 0 4px; }
.guide__cta p { margin: 0; }
.legal__body .guide__cta a.btn--primary { color: #fff; text-decoration: none; }
/* review aids for a page that is not public yet */
.draft-flag { margin-bottom: 28px; padding: 12px 16px; border: 1px dashed #ffc773; border-radius: var(--radius); color: #ffd9a0; font-size: 14px; line-height: 1.6; }
.todo { background: rgba(255, 199, 115, 0.2); color: #ffd9a0; padding: 1px 5px; border-radius: 4px; }
.legal__body strong { color: var(--white); }
.legal__note {
  margin-top: 40px;
  padding: 16px 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--grey);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 960px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 100px;
  }
  .hero__sub { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .hero__proof { justify-content: center; }
  .hero__devices { display: flex; margin-top: 32px; }
  .tvset { width: 100%; max-width: 440px; }
  .tvset__phone { display: none; }
  .features__grid { grid-template-columns: 1fr; }
  .feature-card--large { grid-column: span 1; }
  .pricing__grid { grid-template-columns: repeat(2, 1fr); }
  .price-card--popular { transform: none; }
  .how__steps { flex-direction: column; align-items: stretch; }
  .how-step__arrow { text-align: center; transform: rotate(90deg); padding: 8px 0; }
  .how-step { max-width: 100%; }
  .footer__top { grid-template-columns: 1fr; gap: 40px; }
  .channel-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: repeat(2, 1fr); }
  .vod__grid { grid-template-columns: repeat(4, 1fr); }
  .watch__grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 640px) {
  /* perks strip: two short rows instead of three tall ones */
  .feature-strip { padding: 14px 12px; }
  .feature-strip__row { gap: 8px 16px; }
  .feature-strip__item { font-size: 12.5px; gap: 6px; }
  .feature-strip__item svg { width: 16px; height: 16px; }
  .nav__links { display: none; }
  .nav__right .btn--nav { display: none; }
  .nav__right .lang-toggle { display: none; }
  .nav__right { gap: 10px; margin-left: auto; }
  .pricing__grid { grid-template-columns: 1fr; }
  .hero__proof { gap: 16px; }
  .proof-divider { display: none; }
  .proof-item { padding: 0 8px; }
  .how__steps { gap: 16px; }
  .channel-grid { grid-template-columns: repeat(2, 1fr); }
  .reviews__grid { grid-template-columns: 1fr; }
  .vod__grid { grid-template-columns: repeat(3, 1fr); }
  .geo-banner { flex-wrap: wrap; bottom: calc(84px + var(--consent-h, 0px)); }
  .consent { bottom: 84px; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px; }
  .consent__actions { justify-content: flex-end; }
  .footer__links { grid-template-columns: repeat(2, 1fr); }

  /* pricing: compact, and move the trial banner below the plans */
  .pricing .container { display: flex; flex-direction: column; }
  .pricing .section__header { order: 1; margin-bottom: 22px; }
  .pricing .device-toggle { order: 2; margin-bottom: 18px; }
  .pricing__grid { order: 3; }
  .pricing-trial { order: 4; margin: 24px 0 0; }
  .pricing__note { order: 5; }
  .pricing__pay { order: 6; }

  /* features: 2 columns to halve the section height */
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card--large { grid-column: span 1; }
  .feature-card--large:last-child { grid-column: span 2; }
  .feature-card { padding: 22px 18px; }

  /* watch section: swipeable shelves with big tiles instead of shrinking everything to fit */
  .watch .channels__tabs,
  .watch .channel-grid,
  .watch .vod__grid {
    overflow-x: auto;
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .watch .channels__tabs::-webkit-scrollbar,
  .watch .channel-grid::-webkit-scrollbar,
  .watch .vod__grid::-webkit-scrollbar { display: none; }
  .watch .channels__tabs { flex-wrap: nowrap; justify-content: flex-start; }
  .watch .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 9px 11px; font-size: 13.5px; } /* four tabs fit a phone without scrolling */
  .watch .channel-grid {
    grid-template-columns: none;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    grid-auto-columns: 46%;
    gap: 10px;
    scroll-snap-type: x mandatory;
  }
  .watch .ch-card { scroll-snap-align: start; font-size: 15px; }
  .watch .vod__grid { display: flex; gap: 10px; scroll-snap-type: x mandatory; }
  .watch .vod__poster { flex: 0 0 56%; border-radius: 12px; scroll-snap-align: start; } /* one and a half posters on screen */
  .watch .vod__poster-label { font-size: 15px; left: 12px; bottom: 12px; }
  .watch .vod__poster-tag { font-size: 10px; padding: 3px 9px; top: 9px; right: 9px; }
  .watch .vod__poster--art .vod__poster-label { padding: 9px 12px 10px; }

  /* channels from abroad: label on top, flags rolling in one line underneath */
  .world { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 0 14px 16px; }
  .world__label { flex: none; padding-right: 16px; }
  .world__flags { flex-wrap: nowrap; gap: 18px; overflow-x: auto; scrollbar-width: none; }
  .world__flags::-webkit-scrollbar { display: none; }
  .world__flags span:last-child { padding-right: 18px; }

  /* services row: swipe instead of shrinking */
  .pricing .section__header { min-width: 0; }
  .replaces {
    justify-content: flex-start;
    overflow-x: auto;
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .replaces::-webkit-scrollbar { display: none; }
  .replaces img { flex: 0 0 30%; width: 30%; scroll-snap-align: start; }

  /* reviews: one swipeable row instead of a tall stack */
  .reviews__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    margin-inline: -24px;
    padding-inline: 24px;
    scroll-padding-inline: 24px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .reviews__grid::-webkit-scrollbar { display: none; }
  /* the scroll-reveal fade is switched off here: it lags the swipe */
  .review-card { flex: 0 0 82%; scroll-snap-align: start; padding: 20px; opacity: 1 !important; transform: none !important; }

  /* tighter vertical rhythm on phones */
  .section { padding: 60px 0; }
  .section__header { margin-bottom: 40px; }
  .cta-band { padding: 64px 24px; }
  .hero { padding-top: 96px; padding-bottom: 50px; }
  body { padding-bottom: 78px; }

  /* bottom bar: one trial button, always on screen, a quiet link to the plans, and the menu button */
  .botbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: rgba(14, 21, 37, 0.97);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px));
  }
  .botbar__cta { flex: 1; min-width: 0; justify-content: center; padding: 14px 12px; font-size: 16px; }
  .botbar__plans { padding: 10px 4px; font-size: 14.5px; font-weight: 600; color: var(--white); white-space: nowrap; }

  .botbar__menu {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px; height: 46px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    color: var(--white);
    cursor: pointer;
  }

  /* menu sheet */
  .sheet-overlay {
    display: block;
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 210;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .sheet-overlay.open { opacity: 1; pointer-events: auto; }
  .mobile-sheet {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 220;
    background: var(--bg2);
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    padding: 8px 22px calc(22px + env(safe-area-inset-bottom, 0px));
    transform: translateY(110%);
    transition: transform 0.28s ease;
    max-height: 80vh; overflow-y: auto;
  }
  .mobile-sheet.open { transform: translateY(0); }
  .mobile-sheet__grip { width: 40px; height: 4px; background: var(--border); border-radius: 4px; margin: 8px auto 14px; }
  /* the three main places, as a row of tiles at the top of the sheet */
  .mobile-sheet__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
  .mobile-sheet__nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 6px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--white);
  }
  .mobile-sheet__nav svg { color: var(--cyan); }
  .mobile-sheet__row {
    display: block;
    padding: 15px 0;
    font-size: 16px;
    color: var(--white);
    border-bottom: 1px solid var(--border);
  }
  .mobile-sheet__lang { padding: 15px 0; border-bottom: 1px solid var(--border); }
  .mobile-sheet__lang .lang-toggle { font-size: 16px; justify-content: flex-start; }
  .mobile-sheet__legal { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 18px 0 4px; }
  .mobile-sheet__legal a { font-size: 13px; color: var(--grey); }
}

/* SCROLLBAR */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--grey); }

/* ============================================
   CLEAN VARIANT: no third-party logos or cover art.
   Photos are free stock (assets/clean/CREDITS.md). One photo per category:
   beside the Live TV genres, on each On Demand poster, and on the hero phone's cards.
   ============================================ */
/* Live TV: the category's photo on the left, its genres as a plain list on the right.
   The genres are a list to read, not buttons: no boxes, no hover; a highlight walks through them instead. */
.watch .channel-grid {
  position: relative;
  overflow: hidden;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 22px;
  align-content: center;
  min-height: 190px;
  padding: 22px 30px 22px 60%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  background: #0e1626;
}
.watch .channel-grid::before {
  content: '';
  position: absolute;
  inset: 0 42% 0 0;
  background: var(--fade-x, linear-gradient(90deg, rgba(14, 22, 38, 0) 80%, #0e1626 100%)), var(--photo) center / cover no-repeat;
}
/* Entertainment and Kids show four photos side by side; the last one sits under the fade, so the least important goes last */
#tab-sports .channel-grid { --photo: url('assets/clean/live-sports.webp'); }
#tab-entertainment .channel-grid { --photo: url('assets/clean/live-entertainment.webp'); }
#tab-news .channel-grid { --photo: url('assets/clean/live-news.webp'); }
#tab-kids .channel-grid { --photo: url('assets/clean/live-kids.webp'); }
.genre {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.3;
  color: #9eaac0;
  cursor: default;
  animation: genre-on 3.6s linear infinite;
}
.genre::before {
  content: '';
  flex-shrink: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0.3;
  animation: genre-dot 3.6s linear infinite;
  animation-delay: inherit;
}
@keyframes genre-on { 0%, 22%, 100% { color: #9eaac0; } 5%, 14% { color: #fff; } }
@keyframes genre-dot { 0%, 22%, 100% { opacity: 0.3; transform: scale(1); } 5%, 14% { opacity: 1; transform: scale(1.5); } }
.genre:nth-child(1) { animation-delay: 0.00s; }
.genre:nth-child(2) { animation-delay: 0.42s; }
.genre:nth-child(3) { animation-delay: 0.84s; }
.genre:nth-child(4) { animation-delay: 1.26s; }
.genre:nth-child(5) { animation-delay: 1.68s; }
.genre:nth-child(6) { animation-delay: 2.10s; }
.genre:nth-child(7) { animation-delay: 2.52s; }
.genre:nth-child(8) { animation-delay: 2.94s; }
@media (prefers-reduced-motion: reduce) { .genre, .genre::before { animation: none; } .genre { color: #d5deee; } }
@media (max-width: 640px) {
  /* phones: the photo on top, the eight genres in two columns under it; nothing to swipe */
  .watch .channel-grid {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px 14px;
    margin-inline: 0;
    min-height: 0;
    padding: 158px 18px 16px;
    overflow: hidden;
  }
  .watch .channel-grid::before { inset: 0 0 auto 0; height: 150px; background: var(--fade-y, linear-gradient(180deg, rgba(14, 22, 38, 0) 55%, #0e1626 100%)), var(--photo) center / cover no-repeat; }
  .genre { font-size: 15px; padding: 8px 0; }
  /* four side-by-side photos are too many for a phone's width: these two categories use a three-photo strip here */
  #tab-entertainment .channel-grid { --photo: url('assets/clean/live-entertainment-m.webp'); }
  #tab-kids .channel-grid { --photo: url('assets/clean/live-kids-m.webp'); }
}

/* pricing: the trial offer leads the section, and glows once when the top-bar button brings the visitor to it */
.pricing-trial { border-style: solid; border-color: rgba(0, 212, 255, 0.35); background: linear-gradient(90deg, rgba(0, 212, 255, 0.1), rgba(0, 212, 255, 0.02)); }
.pricing-trial__text { font-size: 15px; color: #c3cde0; }
.pricing-trial.is-flash { animation: trial-flash 1.8s ease-out; }
@keyframes trial-flash { 0%, 35% { box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.55), 0 0 34px rgba(0, 212, 255, 0.35); } 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); } }
@media (prefers-reduced-motion: reduce) { .pricing-trial.is-flash { animation: none; } }

/* hero: the trial button opens the trial chat, and this line says what the visitor is agreeing to */
.hero__actions { margin-bottom: 14px; }
.hero__note { margin-bottom: 38px; font-size: 13.5px; color: var(--grey); }

/* hero phone: ten category cards (six, then the first four again); the loop restarts after six */
.feed-card {
  display: flex;
  align-items: flex-end;
  height: 74px;
  margin: 0 6px 6px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #111827 center / cover no-repeat;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  white-space: nowrap;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}
.feed-card.p1 { background-image: linear-gradient(180deg, rgba(8, 12, 20, 0) 35%, rgba(8, 12, 20, 0.85)), url('assets/clean/vod-movies.webp'); }
.feed-card.p2 { background-image: linear-gradient(180deg, rgba(8, 12, 20, 0) 35%, rgba(8, 12, 20, 0.85)), url('assets/clean/vod-tv.webp'); }
.feed-card.p3 { background-image: linear-gradient(180deg, rgba(8, 12, 20, 0) 35%, rgba(8, 12, 20, 0.85)), url('assets/clean/vod-anime.webp'); }
.feed-card.p4 { background-image: linear-gradient(180deg, rgba(8, 12, 20, 0) 35%, rgba(8, 12, 20, 0.85)), url('assets/clean/vod-kdrama.webp'); }
.feed-card.p5 { background-image: linear-gradient(180deg, rgba(8, 12, 20, 0) 35%, rgba(8, 12, 20, 0.85)), url('assets/clean/vod-docs.webp'); }
.feed-card.p6 { background-image: linear-gradient(180deg, rgba(8, 12, 20, 0) 35%, rgba(8, 12, 20, 0.85)), url('assets/clean/vod-kids.webp'); }
.tvset__feed { padding-top: 34px; animation-name: feed-scroll-cards; animation-duration: 26s; }
@keyframes feed-scroll-cards { to { transform: translateY(calc(-6 * 80px)); } }

/* ============================================
   APPLE DESIGN PASS (local demo)
   Controls answer the press itself, floating bars are translucent materials that content scrolls under,
   letter spacing follows text size, and motion steps back for visitors who ask for less of it.
   Every rule here overrides one above: delete this block to get the previous look back.
   ============================================ */
:root {
  --ease-fluid:     cubic-bezier(0.32, 0.72, 0, 1);
  --material:       rgba(10, 15, 26, 0.72);    /* thin: bars that content scrolls under */
  --material-thick: rgba(14, 21, 37, 0.88);    /* thick: sheets and menus, which sit higher */
  --hairline:       rgba(255, 255, 255, 0.09); /* light catching the top edge of a material */
}
/* demo switch (?font=system): the device's own font instead of Outfit and Inter */
.font-system {
  --font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ── 1. Response: the press itself gets the feedback, within a tenth of a second ── */
a, button { -webkit-tap-highlight-color: transparent; }
.btn {
  transition: transform 100ms ease-out, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.tab-btn, .toggle-btn, .geo-pill, .geo-row, .botbar__menu, .botbar__plans, .mobile-sheet__nav a, .consent__btn, .soon__close {
  transition: transform 100ms ease-out, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:active, .tab-btn:active, .toggle-btn:active, .geo-pill:active, .botbar__menu:active, .botbar__plans:active,
.mobile-sheet__nav a:active, .consent__btn:active, .soon__close:active { transform: scale(0.97); }
.vod__poster:active { transform: scale(0.98); transition-duration: 100ms; }
.faq-q, .mobile-sheet__row, .nav__links a, .footer a { transition: opacity 100ms ease-out, color 0.2s ease; }
.faq-q:active, .mobile-sheet__row:active, .geo-row:active { opacity: 0.6; }
/* A finger has no hover: without this, a tapped button keeps its hover look until something else is tapped. */
@media (hover: none) {
  .btn--primary:hover { background: var(--orange); box-shadow: none; transform: none; }
  .btn--primary:active { transform: scale(0.97); }
  .btn--nav:hover { background: var(--orange); }
  .btn--ghost:hover { border-color: var(--border); color: var(--white); }
  .tab-btn:hover:not(.active) { color: var(--grey); border-color: var(--border); }
  .vod__poster:hover { transform: none; }
  .vod__poster:active { transform: scale(0.98); }
}

/* ── 2. Materials: bars and sheets are translucent layers, with a soft edge where content passes under ── */
.nav.scrolled {
  background: var(--material);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 0;
}
.nav::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 20px;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(180deg, rgba(8, 12, 20, 0.5), rgba(8, 12, 20, 0));
  transition: opacity 0.3s ease;
}
.nav.scrolled::after { opacity: 1; }

/* currency menu: grows out of the pill that opens it and goes back the same way */
.geo-menu {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
  transform-origin: calc(100% - 30px) 0;
  /* solid on purpose: it hangs from a translucent bar, and one see-through layer on another turns unreadable */
  background: var(--card2);
  border-color: var(--hairline);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  transition: opacity 0.16s ease, transform 0.24s var(--ease-fluid), visibility 0s linear 0.24s;
}
.geo-menu.open { visibility: visible; opacity: 1; pointer-events: auto; transform: none; transition-delay: 0s; }

/* cookie question: a floating material */
.consent {
  background: var(--material-thick);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border-color: var(--hairline);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  color: #d6deee;
}

/* contact notice: the page dims and blurs behind it, and the box grows from the button that was pressed (script.js sets the origin) */
.soon {
  background: rgba(6, 10, 20, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color 0.24s ease, backdrop-filter 0.24s ease, -webkit-backdrop-filter 0.24s ease;
}
.soon.is-in {
  background: rgba(6, 10, 20, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.soon__box {
  opacity: 0;
  transform: scale(0.9);
  border-color: var(--hairline);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  transition: opacity 0.18s ease, transform 0.26s var(--ease-fluid);
}
.soon.is-in .soon__box { opacity: 1; transform: none; }

/* ── 3. Type: spacing follows size. Big headings tighten in proportion, small capitals open up, lines break evenly ── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.hero__title { letter-spacing: -0.035em; line-height: 1.02; text-wrap: balance; }
.section__title, .cta-band h2, .replace-band__title, .legal__title { letter-spacing: -0.022em; line-height: 1.08; text-wrap: balance; }
.nav__logo { letter-spacing: -0.02em; }
.section__eyebrow { letter-spacing: 0.14em; }
.hero__sub, .section__sub, .cta-band p, .faq-a, .how-step p, .review-card p { text-wrap: pretty; }

/* ── 4. FAQ: an answer opens to its own height, at one pace, and can be reversed halfway ── */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  max-height: none;
  padding: 0 24px;
  transition: grid-template-rows 0.4s var(--ease-fluid);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; max-height: none; padding: 0 24px; }
.faq-a__inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.3s ease; }
.faq-a__inner::after { content: ''; display: block; height: 20px; }
.faq-item.open .faq-a__inner { opacity: 1; }
.faq-chevron { transition: transform 0.4s var(--ease-fluid); }

/* ── 5. Plan toggle: the highlight slides between the options (script.js moves it) ── */
.toggle-group.has-thumb { position: relative; }
.toggle-thumb {
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 0;
  border-radius: 7px;
  background: var(--cyan);
  will-change: transform;
}
.toggle-group.has-thumb .toggle-btn { position: relative; z-index: 1; }
.toggle-group.has-thumb .toggle-btn.active { background: transparent; }

@media (max-width: 640px) {
  /* bottom bar: content scrolls under it */
  .botbar {
    background: var(--material);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid var(--hairline);
  }
  /* menu sheet: script.js moves it with a spring, so no timed transition here. It is 60px taller than it looks,
     with the spare part below the screen edge, so the small bounce after a throw never shows a gap. */
  .sheet-overlay { transition: none; }
  .mobile-sheet {
    bottom: -60px;
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    max-height: calc(80vh + 60px);
    background: rgba(14, 21, 37, 0.94);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-top: 1px solid var(--hairline);
    transition: none;
    will-change: transform;
    overscroll-behavior: contain;
  }
  .mobile-sheet.open, .mobile-sheet.is-live { box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.5); }
  /* the grip: easier to see, and a much bigger area to grab than the bar itself */
  .mobile-sheet__grip { position: relative; width: 36px; height: 5px; background: rgba(255, 255, 255, 0.28); touch-action: none; }
  .mobile-sheet__grip::before { content: ''; position: absolute; inset: -16px -130px -14px; }
  .mobile-sheet__row, .mobile-sheet__lang { border-bottom-color: var(--hairline); }

  /* While the hero's trial button is on screen the bar does not repeat it (script.js adds .botbar--quiet):
     the orange button folds away and "See plans" takes its place, then they swap back on scroll. */
  .botbar__cta {
    flex: 1 1 0;
    overflow: hidden;
    transition: flex-grow 0.35s var(--ease-fluid), padding 0.35s var(--ease-fluid), margin 0.35s var(--ease-fluid),
                opacity 0.2s ease, visibility 0s, transform 100ms ease-out, background-color 0.2s ease;
  }
  .botbar__plans {
    flex: 0 1 auto;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 8px;
    transition: flex-grow 0.35s var(--ease-fluid), padding 0.35s var(--ease-fluid), border-color 0.25s ease, transform 100ms ease-out;
  }
  .botbar--quiet .botbar__cta {
    flex-grow: 0;
    padding-left: 0; padding-right: 0;
    margin-right: -12px;            /* takes back the gap it no longer needs */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s, 0s, 0s, 0s, 0.35s, 0s, 0s;
  }
  .botbar--quiet .botbar__plans { flex-grow: 1; padding: 13px 12px; border-color: var(--border); }
}
@media (prefers-reduced-motion: reduce) {
  .botbar__cta, .botbar__plans { transition: none; }
}

/* ── 6. Less motion, less transparency, more contrast: each is its own request ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .tab-btn:active, .toggle-btn:active, .geo-pill:active, .botbar__menu:active, .botbar__plans:active,
  .mobile-sheet__nav a:active, .consent__btn:active, .soon__close:active, .vod__poster:active { transform: none; opacity: 0.75; }
  .btn--primary:hover, .price-card:hover, .vod__poster:hover { transform: none; }
  .geo-menu, .soon__box { transform: none; }
  .faq-a, .faq-chevron { transition: none; }
  .channel-panel.active { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px) {
  /* the sheet cross-fades instead of sliding */
  .mobile-sheet { transform: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0s linear 0.2s; }
  .mobile-sheet.open { opacity: 1; visibility: visible; transition-delay: 0s; }
  .sheet-overlay { transition: opacity 0.2s ease; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav.scrolled, .botbar, .mobile-sheet, .consent { background: var(--bg2); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .soon, .soon.is-in { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .soon.is-in { background: rgba(6, 10, 20, 0.86); }
}
@media (prefers-contrast: more) {
  :root { --grey: #b4bfd2; --border: #5d6b85; --hairline: #5d6b85; }
  .nav.scrolled, .botbar, .mobile-sheet, .consent { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .nav.scrolled { border-bottom: 1px solid var(--border); }
  .nav::after { display: none; }
}

/* ============================================
   PHONE FIRST SCREEN
   One idea per line, and the picture before the pitch: headline, one sentence, the TV, the trial button.
   The hero's text and the TV live in two boxes; on phones the text box is dissolved (display: contents)
   so its pieces and the TV can be put in one order.
   ============================================ */
/* the line above the headline: part of the main heading, set small */
.hero__kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
}
.hero__sub-phone { display: none; }
@media (max-width: 960px) {
  .hero__kicker { justify-content: center; }
}
@media (max-width: 640px) {
  .hero { display: grid; grid-template-columns: 1fr; gap: 0; min-height: 0; align-content: start; padding-top: 92px; padding-bottom: 44px; }
  .hero__content { display: contents; }
  .hero__content > * { position: relative; z-index: 1; }
  .hero__title { order: 1; margin-bottom: 14px; font-size: clamp(40px, 12vw, 50px); }
  .hero__kicker { margin-bottom: 14px; font-size: 12px; }
  .hero__sub { order: 2; margin-bottom: 20px; font-size: 16px; line-height: 1.5; }
  .hero__sub-wide { display: none; }
  .hero__sub-phone { display: inline; }
  .hero__devices { order: 3; margin-top: 0; margin-bottom: 22px; }
  .tvset__cats { display: none; }          /* the label on the TV screen already says what is playing */
  .hero__actions { order: 4; margin-bottom: 10px; }
  .hero__actions .btn--primary { width: 100%; }
  .hero__actions .btn--ghost { display: none; }   /* the menu already has Setup Guide */
  .hero__note { order: 5; margin-bottom: 30px; }
  /* the four figures: one compact row instead of three and one */
  .hero__proof { order: 6; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 6px; align-items: start; }
  .proof-divider { display: none; }
  .proof-item, .proof-item:first-child { padding: 0; }
  .proof-item strong { font-size: 21px; }
  .proof-item span { display: block; font-size: 10px; letter-spacing: 0.04em; line-height: 1.3; }
}
/* short phones: tighten up so the trial button still clears the bottom bar */
@media (max-width: 640px) and (max-height: 700px) {
  .hero { padding-top: 84px; }
  .hero__title { font-size: clamp(36px, 11vw, 44px); margin-bottom: 10px; }
  .hero__kicker { margin-bottom: 10px; }
  .hero__sub { margin-bottom: 14px; font-size: 15px; }
  .hero__devices { margin-bottom: 14px; }
}

/* The TV's still picture: an ordinary image under the video. It shows until the video has its first frame
   (the video starts after the page has loaded), and stays when the video is switched off for reduced motion. */
.tvset__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }

/* Phones, top of the page: the plans button is outlined in cyan and shows the 3-month plan's monthly price with the
   plan named under it (script.js, updatePlansPrice). Once the trial button is back in the bar it is the short "See plans". */
.botbar__plans-long { display: none; }
@media (max-width: 640px) {
  .botbar--quiet .botbar__plans { border-color: rgba(0, 212, 255, 0.55); background: rgba(0, 212, 255, 0.06); color: var(--cyan); }
  .botbar--quiet .botbar__plans.has-price { padding-top: 6px; padding-bottom: 6px; }
  .botbar--quiet .botbar__plans.has-price .botbar__plans-short { display: none; }
  .botbar--quiet .botbar__plans.has-price .botbar__plans-long { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
  .botbar__plans-long b { font-size: 16px; font-weight: 700; }
  .botbar__plans-long small { margin-top: 1px; font-size: 11.5px; font-weight: 500; color: var(--grey); }
}
/* the card the plans button lands on lights up for a moment, so the price the visitor tapped is the one they see */
.price-card.is-flash { animation: trial-flash 1.8s ease-out; }
@media (prefers-reduced-motion: reduce) { .price-card.is-flash { animation: none; } }