/* ============================================================
   VOOX IPTV, styles.css
   Dark theme • Voox coral accents • WhatsApp/Telegram CTAs
   ============================================================ */

:root {
  /* Backgrounds */
  --bg: #05060f;
  --bg-alt: #0a0c1a;
  --surface: #101223;
  --surface-2: #151834;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --text: #f4f5fb;
  --muted: #a7abbe;

  /* Brand (Voox coral) */
  --brand: #f24b53;
  --brand-2: #ff7a59;
  --brand-soft: rgba(242, 75, 83, 0.14);

  /* CTA brands */
  --wa: #25d366;
  --wa-hover: #1fbf5c;
  --wa-text: #052e16;
  --tg: #2aabee;
  --tg-hover: #1f9bd8;
  --tg-text: #082f49;

  /* Misc */
  --gold: #fbbf24;
  --grid-line: rgba(255, 255, 255, 0.055);
  --radius: 16px;
  --radius-lg: 22px;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

/* Page colour lives on html so body::before can paint above it (z-index: -1). */
html { background: var(--bg); }

body {
  position: relative;
  font-family: var(--font-body);
  background: transparent;
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Background grid: 1px lines on a 72px pitch, faded out with a radial mask so it
   reads as texture near the top of the page rather than a hard blueprint. */
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1500px;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(900px 560px at 50% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
  mask-image: radial-gradient(900px 560px at 50% 0%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; letter-spacing: -0.01em; }

.container { width: 100%; padding-inline: clamp(20px, 4vw, 64px); margin-inline: auto; }

/* Focus visibility (a11y) */
:focus-visible {
  outline: 3px solid rgba(242, 75, 83, 0.7);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 26px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  font-family: var(--font-head);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  will-change: transform;
}
.btn .ic { width: 20px; height: 20px; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-wa { background: var(--wa); color: var(--wa-text); box-shadow: 0 10px 28px rgba(37, 211, 102, 0.28); }
.btn-wa:hover { background: var(--wa-hover); }

.btn-tg { background: var(--tg); color: var(--tg-text); box-shadow: 0 10px 28px rgba(42, 171, 238, 0.28); }
.btn-tg:hover { background: var(--tg-hover); }

.btn-sm { min-height: 44px; padding: 10px 18px; font-size: 0.92rem; border-radius: 12px; }
.btn-block { width: 100%; min-height: 48px; padding: 12px 16px; font-size: 0.95rem; }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 14px 0;
  transition: background 0.25s ease, box-shadow 0.25s ease, padding 0.25s ease;
}
.site-header.is-scrolled {
  background: rgba(5, 6, 15, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--border), 0 12px 30px rgba(0, 0, 0, 0.35);
  padding: 10px 0;
}
.header-inner { display: flex; align-items: center; gap: 24px; }

.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand-logo { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
.brand-name { font-family: var(--font-head); font-weight: 800; font-size: 1.35rem; letter-spacing: 0.01em; }

.main-nav { display: flex; gap: 28px; margin-left: 12px; }
.main-nav a {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.98rem;
  transition: color 0.2s ease;
  padding: 8px 2px;
}
.main-nav a:hover { color: var(--text); }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Language switch */
.lang-switch {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
}
.lang-btn {
  min-width: 44px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--muted);
  transition: background 0.2s ease, color 0.2s ease;
}
.lang-btn.is-active {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

/* Mobile nav toggle */
.nav-toggle { display: none; width: 44px; height: 44px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border-radius: 10px; }
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 170px 0 90px;
  overflow: hidden;
}
.hero-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
  pointer-events: none;
}
.hero-glow-a { width: 560px; height: 560px; top: -180px; left: -140px; background: rgba(242, 75, 83, 0.35); }
.hero-glow-b { width: 620px; height: 620px; top: 10%; right: -220px; background: rgba(76, 59, 246, 0.3); }

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-soft);
  border: 1px solid rgba(242, 75, 83, 0.35);
  color: #ffb4b9;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 75, 83, 0.55); } 50% { box-shadow: 0 0 0 7px rgba(242, 75, 83, 0); } }

.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; margin-bottom: 20px; }
.grad {
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub { color: var(--muted); font-size: 1.1rem; max-width: 34rem; margin-bottom: 30px; }
.hero-sub strong { color: var(--text); }

.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 26px; }
.hero-trust li { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.92rem; }
.hero-trust .ic { width: 17px; height: 17px; color: var(--wa); }

/* --- TV mockup --- */
.hero-visual { position: relative; }
.tv {
  position: relative;
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}
.tv-screen {
  position: relative;
  aspect-ratio: 16 / 9.6;
  border-radius: 18px;
  border: 10px solid #14151f;
  background: #0b3d1e;
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 60px rgba(242, 75, 83, 0.18);
}
.pitch {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, #0e4d27 0 12.5%, #0b401f 12.5% 25%);
}
.pitch-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255, 255, 255, 0.55); }
.pitch-circle {
  position: absolute; top: 50%; left: 50%; width: 34%; aspect-ratio: 1;
  border: 2px solid rgba(255, 255, 255, 0.55); border-radius: 50%;
  transform: translate(-50%, -50%);
}
.pitch-box { position: absolute; top: 50%; width: 14%; height: 52%; border: 2px solid rgba(255, 255, 255, 0.55); transform: translateY(-50%); }
.pitch-box-l { left: -2px; border-left: 0; }
.pitch-box-r { right: -2px; border-right: 0; }

.scorebug {
  position: absolute; top: 12px; left: 12px;
  display: flex; align-items: center; gap: 8px;
  background: rgba(5, 6, 15, 0.85);
  border: 1px solid var(--border-strong);
  padding: 6px 12px; border-radius: 10px;
  font-family: var(--font-head); font-weight: 700; font-size: 0.8rem;
}
.scorebug .score { color: var(--gold); }
.scorebug .minute { color: var(--brand-2); font-size: 0.75rem; }

.live-chip {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brand); color: #fff;
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.08em;
  padding: 6px 10px; border-radius: 8px;
}
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: pulse 1.4s ease-in-out infinite; }

.quality-chip {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(5, 6, 15, 0.85);
  border: 1px solid var(--border-strong);
  color: var(--gold);
  font-weight: 800; font-size: 0.72rem; letter-spacing: 0.06em;
  padding: 6px 10px; border-radius: 8px;
}

.tv-stand { width: 90px; height: 26px; margin: 0 auto; background: linear-gradient(#1c1e2c, #12131e); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.tv-base { width: 200px; height: 8px; margin: 0 auto; background: #1c1e2c; border-radius: 999px; }

.float-card {
  position: absolute;
  display: flex; align-items: center; gap: 12px;
  background: rgba(16, 18, 35, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: var(--shadow);
  animation: floaty 5s ease-in-out infinite;
}
.float-card .ic { width: 26px; height: 26px; color: var(--brand-2); }
.float-card strong { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.float-card span { color: var(--muted); font-size: 0.8rem; }
.float-card-a { top: 6%; left: -28px; }
.float-card-b { bottom: 10%; right: -22px; animation-delay: 2.2s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ---------- Sections ---------- */
.section { padding: 96px 0; position: relative; }
/* One continuous page background. Sections no longer alternate shades or carry
   dividing rules, so the backdrop runs unbroken from the hero to the FAQ. The
   footer is the only band deliberately set apart. */
.section-alt { background: transparent; border-block: 0; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.kicker {
  display: inline-block;
  color: var(--brand-2);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
.section-head p { color: var(--muted); margin-top: 14px; }

/* --- Features --- */
/* --- Streaming providers strip --- */
.logo-strip {
  position: relative;
  overflow: hidden;
  margin-bottom: 48px;
  padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Travels left, against the movie strip above it, so the two read as a pair. */
.logo-strip-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  animation: marquee-left 46s linear infinite;
  will-change: transform;
}
@keyframes marquee-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* The logos are square brand tiles, so each chip is a matching rounded square.
   Colours are left untouched: these tiles carry their own backgrounds and read
   correctly against the dark strip. */
.provider {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 68px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  line-height: 1.2;
  padding: 6px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.provider:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 75, 83, 0.45);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.provider img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 0.25s ease;
}
.provider:hover img { opacity: 1; }
/* A chip holding an image loses the padding so square tiles fill it edge to edge. */
.provider:has(img) { padding: 0; }

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.feature-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}
.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(242, 75, 83, 0.45);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4), 0 0 40px rgba(242, 75, 83, 0.1);
}
.feature-ic {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: var(--brand-soft);
  border: 1px solid rgba(242, 75, 83, 0.35);
  border-radius: 14px;
  margin-bottom: 18px;
}
.feature-ic .ic { width: 26px; height: 26px; color: var(--brand-2); }
.feature-card h3 { font-size: 1.08rem; font-weight: 700; margin-bottom: 10px; }
.feature-card p { color: var(--muted); font-size: 0.94rem; }

/* Device chips */
.device-chips {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-top: 44px;
}
.chip {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 9px 18px;
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  cursor: default;
}
.chip:hover { color: var(--text); border-color: rgba(242, 75, 83, 0.45); transform: translateY(-2px); }

/* --- Popular movies marquee (TMDb) --- */
.movies-section { padding: 0 0 30px; }
.movies-marquee {
  position: relative;
  overflow: hidden;
  padding: 4px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.movies-track {
  display: flex;
  align-items: stretch;
  gap: 16px;
  width: max-content;
  animation: marquee-right 70s linear infinite;
  will-change: transform;
}
/* Track holds the list twice; sliding -50% -> 0 scrolls the posters left to right. */
@keyframes marquee-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
.movie-card {
  width: clamp(132px, 12vw, 190px);
  flex: none;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.movie-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(242, 75, 83, 0.18);
}
/* 2:3 is the poster ratio TMDb serves, so art fills the card with no cropping. */
.movie-poster { position: relative; aspect-ratio: 2 / 3; overflow: hidden; background: var(--surface); }
.movie-poster img { width: 100%; height: 100%; object-fit: cover; }
.movie-poster.is-broken { background: linear-gradient(160deg, #1b1e35, #0b0d1c); }

/* --- Pricing --- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;
}
.price-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 34px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.price-card:hover { transform: translateY(-6px); border-color: var(--border-strong); }
.price-card h3 { font-size: 1.05rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }

.price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.price .amount { font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; }
.price .per { color: var(--muted); font-size: 0.9rem; }

.save { color: var(--wa); font-weight: 600; font-size: 0.88rem; margin-bottom: 4px; }

.price-feats { margin: 20px 0 26px; display: grid; gap: 12px; }
.price-feats li { position: relative; padding-left: 28px; color: var(--muted); font-size: 0.95rem; }
.price-feats li::before {
  content: "";
  position: absolute; left: 0; top: 3px;
  width: 17px; height: 17px;
  background: var(--brand-soft);
  border-radius: 50%;
}
.price-feats li::after {
  content: "";
  position: absolute; left: 4.5px; top: 7.5px;
  width: 8px; height: 4.5px;
  border-left: 2px solid var(--brand-2);
  border-bottom: 2px solid var(--brand-2);
  transform: rotate(-45deg);
}

.price-cta { margin-top: auto; display: grid; gap: 10px; }

.is-popular {
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
              linear-gradient(140deg, var(--brand), var(--brand-2)) border-box;
  border: 2px solid transparent;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 60px rgba(242, 75, 83, 0.16);
  transform: scale(1.03);
}
.is-popular:hover { transform: scale(1.03) translateY(-6px); }

.popular-badge, .value-badge {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-head);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 999px;
  white-space: nowrap;
}
.popular-badge { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; box-shadow: 0 8px 24px rgba(242, 75, 83, 0.4); }
.value-badge { background: var(--gold); color: #3b2a00; }

.pricing-note { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 34px; }

/* --- Steps --- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 26px 30px;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.step:hover { transform: translateY(-6px); border-color: rgba(242, 75, 83, 0.45); }
.step-num {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 20px;
  font-family: var(--font-head);
  font-size: 1.4rem; font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(242, 75, 83, 0.35);
}
.step h3 { font-size: 1.12rem; margin-bottom: 10px; }
.step p { color: var(--muted); font-size: 0.94rem; }

/* --- FAQ --- */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.faq-item.is-open {
  border-color: rgba(242, 75, 83, 0.45);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.38), 0 0 34px rgba(242, 75, 83, 0.1);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  padding: 18px 22px;
  min-height: 56px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--text);
  transition: color 0.2s ease;
}
.faq-question:hover { color: var(--brand-2); }
.faq-icon {
  width: 18px;
  height: 18px;
  margin-left: auto;
  flex: none;
  color: var(--muted);
  transition: transform 0.3s ease, color 0.3s ease;
}
.faq-item.is-open .faq-icon { transform: rotate(45deg); color: var(--brand-2); }
/* Animating grid-template-rows 0fr -> 1fr expands to the real content height,
   so no max-height guess is needed and long answers never clip. */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.faq-answer > div {
  overflow: hidden;
  min-height: 0;
  padding: 0 22px;
  color: var(--muted);
  font-size: 0.95rem;
  transition: padding 0.4s ease;
}
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer > div { padding-bottom: 20px; }

/* --- Final CTA --- */
.cta-banner {
  position: relative;
  padding: 110px 0;
  text-align: center;
  overflow: hidden;
  background: transparent;
}
.cta-inner { position: relative; }
.cta-inner h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); font-weight: 800; margin-bottom: 14px; }
.cta-inner p { color: var(--muted); margin-bottom: 32px; font-size: 1.05rem; }
.cta-inner .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
/* The only band with its own shade, so it reads as the end of the page. */
.site-footer {
  border-top: 1px solid var(--border);
  padding: 48px 0 40px;
  background: var(--bg-alt);
}
.footer-inner { display: grid; justify-items: center; gap: 16px; text-align: center; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; }
.footer-brand .brand-logo { width: 36px; height: 36px; }
.footer-links { display: flex; gap: 12px; align-items: center; color: var(--muted); font-size: 0.92rem; }
.footer-links a { transition: color 0.2s ease; padding: 6px 2px; }
.footer-links a:hover { color: var(--text); }
.footer-copy { color: var(--muted); font-size: 0.9rem; }
.footer-disclaimer { color: #6b7086; font-size: 0.78rem; max-width: 620px; line-height: 1.55; }

/* ---------- Floating WhatsApp ---------- */
.wa-float {
  position: fixed;
  right: 22px; bottom: 22px;
  z-index: 40;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: var(--wa);
  color: var(--wa-text);
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(37, 211, 102, 0.4);
  transition: transform 0.2s ease, background 0.2s ease;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float:hover { transform: scale(1.08); background: var(--wa-hover); }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 64px; text-align: center; }
  .hero-sub { margin-inline: auto; }
  .hero-cta, .hero-trust { justify-content: center; }
  .hero-visual { max-width: 560px; margin-inline: auto; width: 100%; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .provider { min-height: 46px; padding: 10px 20px; font-size: 0.88rem; }
}

@media (max-width: 860px) {
  .main-nav {
    position: fixed;
    top: 72px; right: 16px;
    flex-direction: column;
    gap: 4px;
    background: rgba(16, 18, 35, 0.97);
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    padding: 14px;
    min-width: 210px;
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
    z-index: 60;
  }
  .main-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .main-nav a { padding: 12px 14px; border-radius: 10px; }
  .main-nav a:hover { background: var(--surface-2); }
  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .is-popular { transform: none; }
  .is-popular:hover { transform: translateY(-6px); }
  .steps { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .section { padding: 72px 0; }
  .hero { padding: 140px 0 70px; }
  .features-grid { grid-template-columns: 1fr; }
  .faq-question { padding: 16px 18px; font-size: 0.94rem; gap: 12px; }
  .faq-answer > div { padding-inline: 18px; font-size: 0.9rem; }
  .logo-strip { margin-bottom: 34px; }
  .logo-strip-track { gap: 10px; }
  .provider { min-height: 44px; padding: 9px 16px; font-size: 0.82rem; }
  .hero-cta .btn { width: 100%; }
  .float-card-a { left: -6px; }
  .float-card-b { right: -6px; }
  .scorebug { font-size: 0.68rem; }
  .brand-name { font-size: 1.15rem; }
  .movies-track { gap: 10px; }
  .movies-section { padding: 0 0 24px; }
  /* Narrower viewport, so pull the fade in to keep more posters fully visible. */
  .movies-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
  .movies-track { animation-play-state: paused; }
}