/* ============================================================
   IPTV Nederland Plus — Elevated Midnight design system
   Premium dark theme · navy + orange · glass + soft glow
   Backward-compatible with all existing page markup.
   ============================================================ */

:root {
  /* Surfaces */
  --bg-primary: #003DA5;
  --bg-secondary: #002d78;
  --bg-elevated: #01285e;
  --surface: rgba(255, 255, 255, 0.07);
  --surface-2: rgba(255, 255, 255, 0.12);
  --glass-bg: rgba(255, 255, 255, 0.06);

  /* Text */
  --text-primary: #f5f8ff;
  --text-secondary: #d3ddf2;
  --text-muted: #a7b6da;

  /* Accent (blue) — CTA buttons stay orange via override */
  --orange-primary: #5B9BFF;
  --orange-light: #85B6FF;
  --orange-dark: #2E6BE6;
  --blue-primary: #5B9BFF;
  --blue-light: #85B6FF;
  --blue-dark: #2E6BE6;
  --red-primary: #ff5d6c;

  /* Lines & effects */
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.22);
  --border-orange: rgba(133, 182, 255, 0.40);
  --border-blue: rgba(133, 182, 255, 0.40);
  --glow-orange: 0 18px 50px -18px rgba(0, 18, 55, 0.6);
  --glow-soft: 0 24px 60px -30px rgba(0, 10, 40, 0.75);

  --grad-orange: linear-gradient(135deg, #4D8CF5, #85B6FF);
  --grad-brand: linear-gradient(120deg, #85B6FF 0%, #4D8CF5 45%, #003DA5 120%);

  /* Geometry */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shell: min(1180px, calc(100% - 2.5rem));

  --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Sora", var(--font-sans);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text-secondary);
  background:
    radial-gradient(1200px 720px at 50% -12%, rgba(133, 182, 255, 0.20), transparent 60%),
    linear-gradient(180deg, rgba(0, 12, 40, 0.10), rgba(0, 12, 40, 0.45)),
    var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button, input { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-primary);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  font-weight: 700;
}

h1 { font-size: clamp(2.3rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1rem; }

::selection { background: rgba(91, 155, 255, 0.3); color: #fff; }

:focus-visible {
  outline: 2px solid var(--orange-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Layout ---------- */
.container { width: var(--shell); margin: 0 auto; }

.section { padding: clamp(3.5rem, 7vw, 6rem) 0; position: relative; }

.section-header { max-width: 760px; margin: 0 auto 0.5rem; text-align: center; }
.section > .container > .eyebrow { display: table; margin: 0 auto 1rem; }

/* Centered layout — match reference design */
.feature-grid article,
.badge-grid article,
.device-grid article {
  text-align: center;
}
.feature-grid article .icon-badge,
.feature-grid article .feature-number,
.badge-grid article .icon-badge,
.device-grid article .icon-badge {
  margin-left: auto; margin-right: auto;
}

.section-title,
.section-header h2 { margin-bottom: 0.6rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange-light);
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border-orange);
  border-radius: 999px;
  background: rgba(91, 155, 255, 0.07);
  margin-bottom: 1rem;
}

/* Dutch-flag eyebrow — darker background, original orange text */
.eyebrow.eyebrow-nl {
  color: var(--orange-light);
  border-color: var(--border-orange);
  background: rgba(9, 11, 22, 0.85);
}

/* Scroll reveal (progressive enhancement) */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease-out, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }
/* Safety net: never let tall article bodies stay hidden if the observer
   can't reach its threshold on short (mobile) viewports. */
.article-content.reveal, .article-hero.reveal { opacity: 1; transform: none; }

/* Breadcrumbs (visible nav matching JSON-LD BreadcrumbList) */
.breadcrumb { width: var(--shell); margin: 0 auto; padding: 1.1rem 0 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin: 0; padding: 0; font-size: 0.85rem; color: var(--text-muted); }
.breadcrumb li { display: flex; align-items: center; gap: 0.45rem; }
.breadcrumb li:not(:last-child)::after { content: "›"; color: var(--text-muted); opacity: 0.7; }
.breadcrumb a { color: var(--text-secondary); transition: color 0.2s ease; }
.breadcrumb a:hover { color: var(--orange-light); }
.breadcrumb [aria-current="page"] { color: var(--text-primary); font-weight: 600; }

/* In-content internal links (keyword anchors) */
.ilink { color: var(--orange-light); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color 0.2s ease; }
.ilink:hover { color: #fff; }

/* IPTV Nederland aanbieder section — alternating media/text layout */
.ina-rows { display: grid; gap: clamp(2.2rem, 5vw, 4rem); margin-top: 2.6rem; }
.ina-row { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
.ina-copy p { margin: 0 0 1rem; line-height: 1.85; }
.ina-copy .button { margin-top: 0.6rem; }
.ina-media { margin: 0; position: relative; }
.ina-media img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-orange);
  box-shadow: var(--glow-soft), 0 0 0 1px rgba(91, 155, 255, 0.12);
}
/* This graphic has its own transparent background and is meant to sit
   directly on the page — the card border/shadow read as a floating box
   around it instead of the artwork blending in. */
.ina-media-bare img { border: none; box-shadow: none; border-radius: 0; }
.ina-row.reverse .ina-media { order: -1; }
@media (max-width: 860px) {
  .ina-row, .ina-row.reverse { grid-template-columns: 1fr; gap: 1.4rem; }
  .ina-row .ina-media, .ina-row.reverse .ina-media { order: -1; }
}

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(7, 8, 15, 0.86);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.site-header.scrolled {
  background: rgba(7, 8, 15, 0.92);
  border-bottom-color: var(--border);
  box-shadow: 0 10px 40px -28px rgba(0, 0, 0, 0.9);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.3rem 0;
}

.brand, .brand-footer {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.12rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-primary);
}
.brand-plus {
  color: #fff;
  background: var(--grad-orange);
  padding: 0.05em 0.42em;
  border-radius: 8px;
  box-shadow: var(--glow-orange);
}

.nav {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.nav a {
  position: relative;
  padding: 0.5rem 0.7rem;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav a:hover { color: var(--text-primary); background: var(--surface); }
.nav a.button { color: #fff; }
.nav a.button:hover { background: var(--grad-orange); }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 0.4rem;
}
.lang-toggle button {
  background: transparent;
  border: 0;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.lang-toggle button.active { background: var(--surface-2); color: var(--text-primary); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem;
  cursor: pointer;
}
.nav-toggle span {
  width: 22px; height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ---------- Buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
  white-space: nowrap;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }

.button-primary {
  background: var(--grad-orange);
  color: #fff;
  box-shadow: var(--glow-orange);
}
.button-primary:hover { box-shadow: 0 22px 60px -16px rgba(91, 155, 255, 0.7); }

.button-secondary {
  background: var(--surface-2);
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.button-secondary:hover { background: var(--surface); border-color: var(--orange-light); }

.button-outline {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}
.button-outline:hover { border-color: var(--orange-light); color: #fff; }

.full-width { display: flex; width: 100%; }

/* ---------- Hero ---------- */
.hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
  position: relative;
  background-image:
    radial-gradient(120% 120% at 50% 0%, rgba(91, 155, 255, 0.10), transparent 55%),
    linear-gradient(180deg, rgba(7, 8, 15, 0.45), rgba(7, 8, 15, 0.72));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Home hero: solid brand-blue background (two-column layout, copy +
   fan photo) instead of a full-bleed photo. */
.hero.hero-home {
  background-image:
    radial-gradient(1100px 620px at 16% 6%, rgba(52, 217, 236, 0.16), transparent 62%),
    radial-gradient(900px 560px at 90% 34%, rgba(255, 106, 26, 0.10), transparent 60%),
    linear-gradient(180deg, var(--d-600) 0%, var(--d-700) 100%);
}

/* Belgium landing page hero (desktop) */
.hero.hero-belgie {
  background-image:
    linear-gradient(180deg, rgba(7, 8, 15, 0.45), rgba(7, 8, 15, 0.72)),
    url("images/belgie-hero-image-desktop.webp");
}

/* Belgium hero panel — premium gradient */
.hero-belgie .hero-panel-box {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(91, 155, 255, 0.16), transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(74, 116, 230, 0.16), transparent 55%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border-color: var(--border-orange);
}
/* Gradient accent block below the "Beste waarde" CTA */
.hero-belgie .trust-badges-mini {
  border: 1px solid var(--border-orange);
  border-radius: 14px;
  margin-top: 1.1rem;
  padding: 1rem 1.1rem;
  background: linear-gradient(135deg, rgba(91, 155, 255, 0.32), rgba(74, 116, 230, 0.32));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 12px 30px -16px rgba(91, 155, 255, 0.5);
}
.hero-belgie .trust-badges-mini .badge-item { color: #fff; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center;
}
.hero-copy { max-width: 760px; margin: 0 auto; text-align: center; }
.hero-copy .hero-actions { justify-content: center; }
.hero-copy .hero-note { justify-content: center; }
.hero-copy .live-indicator { justify-content: center; }

.hero-copy h1 { margin-bottom: 1rem; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.4vw, 1.6rem);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.9rem;
}
.hero-text, .section-header p, .feature-grid article p {
  color: var(--text-secondary);
  font-size: 1.03rem;
}
.hero-text { max-width: 38rem; }

/* Highlighted keywords inside copy */
.kw { color: var(--orange-light); font-weight: 700; }
/* Hero copy sits over a photo on home/Belgium — boost legibility */
.hero-belgie .hero-text { color: #eef1fb; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.hero-belgie .hero-text .kw { color: #ffb27a; }
@media (max-width: 768px) {
  .hero.hero-home { padding: 2rem 0 1.6rem; }
  .hero-home .hero-title { margin-top: 1.2rem; margin-bottom: 0.9rem; }
  .hero-home .hero-text { font-size: 0.9rem; }
  .hero-home .h1-sub { display: block; font-size: 0.74em; margin-top: 0.15em; }
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin: 1.6rem 0 1rem;
}

.hero-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.hero-note::before { content: "★★★★★"; color: var(--orange-light); letter-spacing: 1px; }

.live-indicator {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.live-indicator::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #34d27b;
  box-shadow: 0 0 0 0 rgba(52, 210, 123, 0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 210, 123, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(52, 210, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 210, 123, 0); }
}

.hero-panel { display: grid; gap: 1.1rem; }

.hero-panel-box,
.section,
.glass {
  position: relative;
}

.hero-panel-box {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  box-shadow: var(--glow-soft);
}
.hero-panel-box h2 { font-size: 1.3rem; }
.hero-panel-box ul { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.hero-panel-box li { margin-bottom: 0.4rem; color: var(--text-secondary); }
.hero-panel-box .button { margin-top: 1rem; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
.hero-stats div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
}
.hero-stats strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--text-primary);
}
.hero-stats span { font-size: 0.78rem; color: var(--text-muted); }

.trust-badges-mini {
  display: grid;
  gap: 0.45rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.badge-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--text-secondary); font-weight: 500; }

/* ---------- Feature grid ---------- */
.feature-grid, .badge-grid, .device-grid, .testimonials-grid, .faq-grid {
  display: grid;
  gap: 1.1rem;
}
.feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }

.feature-grid article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.feature-grid article:hover {
  transform: translateY(-4px);
  border-color: var(--border-orange);
  background: var(--surface-2);
}
.feature-grid article h3 { margin-bottom: 0.4rem; }
.feature-grid article a { display: block; }
.feature-grid article a h3 { color: var(--text-primary); }
.feature-grid article a:hover h3 { color: var(--orange-light); }

.feature-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 12px;
  background: rgba(91, 155, 255, 0.14);
  border: 1px solid var(--border-orange);
  color: var(--orange-light);
  font-family: var(--font-display);
  font-weight: 700;
  margin-bottom: 1rem;
}

/* ---------- Split sections ---------- */
.coverage-grid, .diaspora-grid, .fourk-grid, .movies-grid, .service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.coverage-visual, .fourk-visual, .movies-visual, .service-visual {
  display: flex; justify-content: center; align-items: center;
}

.device-mockup, .tv-screen, .video-card {
  position: relative;
  width: 100%;
  min-height: 300px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255, 255, 255, 0.022) 23px 24px),
    radial-gradient(65% 55% at 50% 44%, rgba(74, 116, 230, 0.3), transparent 62%),
    linear-gradient(165deg, rgba(22, 26, 48, 0.96), rgba(8, 9, 16, 0.96));
  border: 1px solid var(--border-strong);
  box-shadow: var(--glow-soft), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 1.1rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* glowing play button */
.device-mockup::before, .tv-screen::before, .video-card::before {
  content: "";
  position: absolute; left: 50%; top: 45%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--grad-orange);
  box-shadow: 0 16px 48px -8px rgba(91, 155, 255, 0.75);
}
.device-mockup::after, .tv-screen::after, .video-card::after {
  content: "";
  position: absolute; left: calc(50% + 4px); top: 45%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-left: 23px solid #fff;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}
@keyframes playpulse {
  0%, 100% { box-shadow: 0 16px 48px -8px rgba(91, 155, 255, 0.6); }
  50% { box-shadow: 0 16px 60px -4px rgba(91, 155, 255, 0.9); }
}

/* ---------- Comparison ---------- */
.comparison { background: linear-gradient(180deg, rgba(11, 13, 24, 0.4), transparent); }
.comparison-table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 1rem;
}
.comparison-table > div {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  text-align: center;
}
.comparison-table h3 { color: var(--text-secondary); font-size: 1.05rem; }
.comparison-table p { font-family: var(--font-display); font-size: 1.6rem; color: var(--text-primary); margin: 0; }
.comparison-table .highlight {
  background: linear-gradient(165deg, rgba(91, 155, 255, 0.16), rgba(91, 155, 255, 0.04));
  border-color: var(--border-orange);
  box-shadow: var(--glow-orange);
}
.comparison-table .highlight h3 { color: var(--orange-light); }
.savings-highlight, .price-highlight, .currency-note {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--orange-light);
}
.currency-note { color: var(--text-muted); font-family: var(--font-sans); font-weight: 400; font-size: 0.9rem; max-width: 60ch; }

/* ---------- Badge / channel / device grids ---------- */
.badge-grid, .channel-badges, .device-grid, .payment-badges, .trust-badges, .service-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.6rem;
}
.badge-grid span, .channel-badges span, .device-grid span,
.payment-badges span, .trust-badges span, .service-stats span {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.badge-grid span:hover, .channel-badges span:hover, .device-grid span:hover {
  border-color: var(--orange-light);
  color: var(--text-primary);
  transform: translateY(-2px);
}
.channel-badges { margin-top: 0; }

/* ---------- Pricing ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
  margin: 2.2rem 0 1.4rem;
  align-items: stretch;
}
.pricing-card {
  position: relative;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.6rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.pricing-card:hover { transform: translateY(-5px); border-color: var(--border-strong); }
.card-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pricing-card > strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.85rem;
  color: var(--text-primary);
  margin: 0.5rem 0 0.3rem;
}
.pricing-card > p { color: var(--text-muted); font-size: 0.9rem; }
.pricing-card ul { list-style: none; padding: 0; margin: 1rem 0 1.4rem; display: grid; gap: 0.55rem; }
.pricing-card li { position: relative; padding-left: 1.6rem; color: var(--text-secondary); font-size: 0.92rem; }
.pricing-card li::before {
  content: "✓";
  position: absolute; left: 0;
  color: var(--orange-light);
  font-weight: 700;
}
.pricing-card .button { margin-top: auto; }
.pricing-card.popular { border-color: var(--border-blue); box-shadow: 0 24px 60px -34px rgba(74, 116, 230, 0.7); }
.pricing-card.best-value {
  border-color: var(--border-orange);
  box-shadow: var(--glow-orange);
  background: linear-gradient(170deg, rgba(91, 155, 255, 0.12), rgba(255, 255, 255, 0.02));
}
.pricing-card.popular::after, .pricing-card.best-value::after {
  position: absolute;
  top: -0.8rem; right: 1.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pricing-card.popular::after { content: "Populair"; background: var(--blue-light); color: #fff; }
.pricing-card.best-value::after { content: "Beste deal"; background: var(--grad-orange); color: #fff; }

/* ---------- Testimonials ---------- */
.testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 2rem; }
.testimonials-grid article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.testimonials-grid article::before {
  content: "★★★★★";
  display: block;
  color: var(--orange-light);
  letter-spacing: 2px;
  margin-bottom: 0.7rem;
}
.testimonials-grid p { color: var(--text-secondary); font-style: italic; }
.testimonials-grid strong { color: var(--text-primary); font-size: 0.9rem; }

/* --- Testimonials with real avatar photos + trust stats bar --- */
.eyebrow-icon { display: inline-flex; align-items: center; gap: 0.4rem; }
.eyebrow-icon svg { width: 14px; height: 14px; flex: 0 0 auto; }
.testimonials-sub { text-align: center; color: var(--text-secondary); margin-top: 0.3rem; }
.testimonials-photo .t-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  object-fit: cover; flex: 0 0 auto;
}
.testimonials-photo .t-meta strong { display: inline-flex; align-items: center; gap: 0.35rem; }
.t-verified { width: 15px; height: 15px; flex: 0 0 auto; }
.stats-card-compact { margin-top: 2.4rem; padding: 32px 30px; }
.stats-card-compact .stats-inner { grid-template-columns: repeat(3, 1fr); gap: 30px 24px; }
@media (max-width: 640px) {
  .stats-card-compact { padding: 26px 20px; }
  .stats-card-compact .stats-inner { grid-template-columns: 1fr; gap: 20px; }
}

/* --- Testimonials: single-row infinite marquee, never stops --- */
.testimonials-row {
  overflow: hidden;
  margin-top: 2rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}
.testimonials-grid.testimonials-track {
  display: flex;
  width: max-content;
  margin-top: 0;
  gap: 1.3rem;
  will-change: transform;
  animation: testimonials-scroll 62s linear infinite;
}
.testimonials-row:hover .testimonials-track { animation-play-state: paused; }
.testimonials-track article { width: min(360px, 84vw); flex: 0 0 auto; }
@keyframes testimonials-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-track { animation: none; }
}

/* ---------- FAQ ---------- */
.faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
.faq-grid article {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  transition: border-color 0.2s ease;
}
.faq-grid article:hover { border-color: var(--border-strong); }
.faq-grid h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.faq-grid p { margin: 0; font-size: 0.95rem; }

/* ---------- Trust signals ---------- */
.trust-signals { position: relative; }
.section-title { text-align: center; max-width: 820px; margin: 0 auto 2rem; }
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.trust-card {
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.trust-card:hover { transform: translateY(-4px); border-color: var(--border-orange); }
.trust-icon { font-size: 2rem; margin-bottom: 0.6rem; }
.trust-card h3 { font-size: 1.12rem; margin-bottom: 0.6rem; }
.trust-card p { font-size: 0.9rem; color: var(--text-muted); margin: 0.4rem 0; line-height: 1.5; }
.trust-card p strong { color: var(--text-secondary); font-weight: 600; }

.service-stats span { background: var(--surface-2); }

/* ---------- Final CTA ---------- */
.final-cta-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 2rem;
  align-items: center;
  background: linear-gradient(150deg, rgba(91, 155, 255, 0.12), rgba(43, 86, 198, 0.12));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  padding: clamp(1.8rem, 4vw, 3rem);
}
.final-cta-grid h2 { margin-bottom: 0.6rem; }
.trust-badges { margin-top: 0; }

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(7, 8, 15, 0.6);
  padding: clamp(2.5rem, 5vw, 4rem) 0 2rem;
  margin-top: 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 2fr 1.2fr;
  gap: 2.5rem;
}
.brand-footer { font-size: 1.05rem; margin-bottom: 0.6rem; }
.site-footer p { color: var(--text-muted); font-size: 0.9rem; }
.footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.footer-links h4 { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.8rem; }
.footer-links a { display: block; color: var(--text-secondary); font-size: 0.92rem; padding: 0.25rem 0; transition: color 0.2s ease; }
.footer-links a:hover { color: var(--orange-light); }
.footer-newsletter form { display: flex; gap: 0.5rem; margin-top: 0.8rem; }
.footer-newsletter input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
}
.footer-newsletter input::placeholder { color: var(--text-muted); }
.footer-newsletter button {
  background: var(--grad-orange);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  font-weight: 600;
  cursor: pointer;
}
.footer-copy {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.footer-partners {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  line-height: 1.7;
  max-width: 920px;
  margin: 0.7rem auto 0;
}
.footer-partners a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; }
.footer-partners a:hover { color: var(--orange-light); text-decoration-color: var(--orange-light); }

/* ---------- Cookie banner + mobile bar ---------- */
.cookie-banner {
  position: fixed;
  bottom: 1rem; left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100% - 2rem));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(11, 13, 24, 0.96);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  box-shadow: var(--glow-soft);
}
.cookie-banner strong { color: var(--text-primary); display: block; }
.cookie-banner p { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--text-muted); }
.cookie-banner button {
  background: var(--grad-orange);
  color: #fff; border: 0;
  border-radius: 999px;
  padding: 0.65rem 1.3rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.mobile-bottom-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 70;
  padding: 0.5rem 0.8rem calc(0.5rem + env(safe-area-inset-bottom));
  background: #05080f;
  border-top: 1px solid var(--border);
}
.mobile-bottom-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  width: 100%;
  padding: 0.5rem 1rem;
  border-radius: 14px;
  line-height: 1.25;
  text-align: center;
  background: linear-gradient(135deg, var(--orange-primary), var(--orange-light));
  color: #fff;
  box-shadow: 0 10px 26px -10px rgba(91, 155, 255, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.mbb-top {
  font-size: 0.72rem;
  font-weight: 600;
  opacity: 0.95;
  letter-spacing: 0.01em;
}
.mbb-top strong { font-weight: 800; }
.mbb-cta {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* ============================================================
   Long-form article template (blog posts)
   ============================================================ */
.article-hero { padding-bottom: 2rem; }
.quick-stats { display: grid; gap: 0.7rem; margin-top: 1rem; }
.quick-stats div {
  display: flex; flex-direction: column;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: rgba(91, 155, 255, 0.07);
  border: 1px solid var(--border-orange);
  font-size: 0.95rem;
  color: var(--text-primary);
}
.quick-stats div span { color: var(--text-muted); font-size: 0.85rem; }

.article-content { padding-top: 2.5rem; }
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 2.8rem;
  align-items: start;
}
.article-main { max-width: 760px; min-width: 0; font-size: 1.04rem; line-height: 1.8; }
.article-main h2 { font-size: 1.65rem; margin: 2.6rem 0 1rem; scroll-margin-top: 96px; }
.article-main h3 { font-size: 1.22rem; margin: 1.9rem 0 0.7rem; }
.article-main p { margin: 0 0 1.1rem; }
.article-main ul { margin: 0 0 1.3rem; padding-left: 1.3rem; }
.article-main li { margin-bottom: 0.55rem; }
.article-main a { color: var(--orange-light); text-decoration: underline; text-underline-offset: 3px; }
.article-main table { width: 100%; border-collapse: collapse; margin: 1.6rem 0; font-size: 0.95rem; }
.article-main table th { color: var(--text-primary); }
.article-cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.6rem; }

.article-meta { font-size: 0.9rem; color: var(--text-muted); margin: 0 0 1.1rem; letter-spacing: 0.01em; }
.key-takeaways {
  background: rgba(43, 86, 198, 0.10);
  border: 1px solid var(--border-blue);
  border-left: 4px solid var(--c-orange, var(--orange-primary));
  border-radius: var(--radius);
  padding: 1.4rem 1.6rem;
  margin: 0 0 2.2rem;
}
.key-takeaways h2 { font-size: 1.2rem; margin: 0 0 0.8rem; }
.key-takeaways ul { margin: 0; padding-left: 1.2rem; }
.key-takeaways li { margin-bottom: 0.5rem; }

/* Auto-generated table of contents (see scripts.js) — a native <details>
   so it's collapsible and keyboard-accessible with zero extra JS. */
.article-toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.5rem;
  margin: 0 0 2.2rem;
}
.article-toc summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-cyan, var(--orange-light));
  padding: 0.2rem 0;
}
.article-toc summary::-webkit-details-marker { display: none; }
.article-toc summary::before {
  content: "▸"; display: inline-block; margin-right: 0.5rem;
  transition: transform 0.2s ease;
}
.article-toc[open] summary::before { transform: rotate(90deg); }
.article-toc ol {
  margin: 0.9rem 0 0;
  padding-left: 1.3rem;
  columns: 2;
  column-gap: 2rem;
}
.article-toc li { margin-bottom: 0.5rem; break-inside: avoid; font-size: 0.95rem; }
.article-toc a {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-strong);
}
.article-toc a:hover { color: var(--c-cyan, var(--orange-light)); border-bottom-color: var(--c-cyan, var(--orange-light)); }
@media (max-width: 560px) {
  .article-toc ol { columns: 1; }
}

.article-sidebar { position: sticky; top: 96px; display: grid; gap: 1.2rem; }
.sidebar-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem;
}
.sidebar-box h3 { font-size: 1.05rem; margin-bottom: 0.7rem; }
.sidebar-box ul { margin: 0; padding-left: 0; list-style: none; }
.sidebar-box.trust { background: rgba(43, 86, 198, 0.12); border-color: var(--border-blue); }

.related-articles { border-top: 1px solid var(--border); }
.article-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2rem; }
.article-card {
  display: block;
  padding: 1.6rem;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.article-card:hover { transform: translateY(-3px); border-color: var(--border-orange); }
.article-card h3 { margin-bottom: 0.5rem; }
.article-card p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }

/* ---------- Blog index cards ---------- */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
  margin-top: 2.2rem;
}
.post-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.post-card:hover { transform: translateY(-5px); border-color: var(--border-orange); }
.post-card .tag {
  align-self: flex-start;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange-light);
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border-orange);
  border-radius: 999px;
  margin-bottom: 1rem;
}
.post-card h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.post-card p { color: var(--text-muted); font-size: 0.92rem; flex: 1; }
.post-card .read-more { color: var(--orange-light); font-weight: 600; font-size: 0.9rem; margin-top: 0.6rem; }

/* ---------- Responsive ---------- */
@media (max-width: 992px) {
  .hero-grid { grid-template-columns: 1fr; }
  .feature-grid, .testimonials-grid, .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .coverage-grid, .diaspora-grid, .fourk-grid, .movies-grid, .service-grid { grid-template-columns: 1fr; }
  .fourk-visual { order: 2; }
  .article-grid { grid-template-columns: minmax(0, 1fr); }
  .article-sidebar { position: static; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
  .article-grid-3 { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: 68px 0 auto 0;
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    padding: 0.6rem 1.1rem calc(1.4rem + env(safe-area-inset-bottom));
    background: #05080f;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 24px 50px -20px rgba(0, 0, 0, 0.85);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  /* Full-width tap rows with subtle dividers */
  .nav > a {
    padding: 0.95rem 0.5rem;
    font-size: 1.02rem;
    border-radius: 10px;
    border-bottom: 1px solid var(--border);
  }
  .nav > a:last-of-type { border-bottom: 0; }
  .nav a.button { margin-top: 0.7rem; padding: 0.95rem 1.3rem; font-size: 1rem; }
  .lang-toggle { margin: 0.5rem 0 0; align-self: flex-start; }

  /* Hamburger → X animation */
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Lock background scroll while the menu is open */
  body.nav-open { overflow: hidden; }

  .feature-grid, .testimonials-grid, .trust-grid, .pricing-grid,
  .comparison-table, .faq-grid, .article-grid-3 { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .final-cta-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-links { grid-template-columns: repeat(3, 1fr); }
  .mobile-bottom-bar { display: block; }
  body { padding-bottom: 4.5rem; }
  .cookie-banner {
    left: 0.7rem;
    right: 0.7rem;
    width: auto;
    transform: none;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    gap: 0.8rem;
    bottom: calc(4.8rem + env(safe-area-inset-bottom));
  }
  .cookie-banner > div { width: 100%; }
  .cookie-banner button { width: 100%; padding: 0.85rem 1.3rem; }
}

@media (max-width: 480px) {
  .footer-links { grid-template-columns: 1fr 1fr; }
  .pricing-card > strong { font-size: 1.6rem; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Premium layer — aurora, brand mark, progress, a11y
   ============================================================ */

/* Static glow layer behind content (no animation/blur for performance) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(91, 155, 255, 0.12), transparent 62%),
    radial-gradient(44% 44% at 82% 28%, rgba(74, 116, 230, 0.14), transparent 62%);
}

/* Brand logo mark */
.brand-mark { display: inline-flex; align-items: center; }
.brand-mark svg {
  display: block;
  width: 28px; height: 28px;
  border-radius: 8px;
  box-shadow: 0 6px 18px -6px rgba(91, 155, 255, 0.6);
}

/* Scroll progress bar */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 100%;
  z-index: 100;
  background: linear-gradient(90deg, var(--c-cyan), var(--c-blue) 55%, var(--c-orange));
  box-shadow: 0 0 12px rgba(52, 217, 236, 0.55);
  /* Driven by transform, not width — width animates layout every frame. */
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
  pointer-events: none;
}

/* Skip to content (a11y) */
.skip-link {
  position: fixed;
  top: -64px; left: 1rem;
  z-index: 200;
  background: var(--orange-primary);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-weight: 600;
  box-shadow: var(--glow-orange);
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

/* Gradient accent on key numbers */
.hero-stats strong, .comparison-table .highlight p {
  background: linear-gradient(120deg, #ffd9bf, #85B6FF 60%, #4D8CF5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Subtle top hairline on sections for rhythm */
.section + .section { border-top: 1px solid rgba(255, 255, 255, 0.04); }

/* Refined card glow on hover for premium feel */
.trust-card:hover, .pricing-card:hover, .post-card:hover, .feature-grid article:hover {
  box-shadow: 0 28px 64px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px var(--border-orange);
}

/* Brand image logo (header) */
.brand-logo {
  display: block;
  height: 58px;
  width: auto;
}
@media (max-width: 768px) { .brand-logo { height: 50px; } }
@media (max-width: 380px) { .brand-logo { height: 44px; } }

/* ============================================================
   Inspired components — icons, stats strip, category & device
   grids, deal/countdown, avatars, FAQ accordion
   ============================================================ */

/* Icon badge (feature/trust/category cards) */
.icon-badge {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(91, 155, 255, 0.12);
  border: 1px solid var(--border-orange);
  color: var(--orange-light);
  margin-bottom: 1.1rem;
}
.icon-badge svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.trust-card .icon-badge { background: rgba(91, 155, 255, 0.12); border-color: var(--border-orange); color: var(--orange-light); margin-left: auto; margin-right: auto; }

/* Stats strip */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
}
.stats-strip .stat {
  text-align: center;
  padding: 1.6rem 1rem;
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.stats-strip .num {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.3rem);
  font-weight: 800;
  background: linear-gradient(120deg, #ffd9bf, #85B6FF 60%, #4D8CF5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stats-strip .lbl { display: block; color: var(--text-muted); font-size: 0.85rem; margin-top: 0.2rem; }

/* Category cards grid */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.cat-card {
  display: block;
  padding: 1.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--border);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.cat-card:hover { transform: translateY(-4px); border-color: var(--border-orange); }
.cat-card h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.cat-card p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

/* Device tiles with icons */
.device-tiles { margin-top: 2rem; }
.device-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.device-track .dup { display: none; }
.device-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  padding: 1.4rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.device-tile:hover { transform: translateY(-3px); border-color: var(--border-orange); }
.device-tile svg { width: 30px; height: 30px; stroke: var(--orange-light); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.device-tile span { font-size: 0.88rem; color: var(--text-secondary); font-weight: 500; }

/* Deal banner + countdown (pricing) */
.deal-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.8rem 1.4rem;
  margin: 0 auto 2rem;
  max-width: 720px;
  padding: 1rem 1.4rem;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(91, 155, 255, 0.16), rgba(74, 116, 230, 0.12));
  border: 1px solid var(--border-orange);
  text-align: center;
}
.deal-banner .deal-tag {
  font-family: var(--font-display); font-weight: 800; letter-spacing: 0.04em;
  color: var(--orange-light); text-transform: uppercase; font-size: 0.85rem;
}
.deal-banner .deal-text { color: var(--text-secondary); font-size: 0.9rem; }
.countdown { display: inline-flex; gap: 0.4rem; align-items: center; }
.countdown b {
  font-family: var(--font-display); font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 0.3rem 0.55rem; min-width: 2.3rem; text-align: center;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.countdown span { color: var(--text-muted); font-size: 0.8rem; }
.pricing-card .save-badge {
  position: absolute; top: -0.8rem; left: 1.4rem;
  background: #34d27b; color: #06210f;
  font-family: var(--font-display); font-weight: 800; font-size: 0.68rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.28rem 0.7rem; border-radius: 999px;
}
.guarantee-line { text-align: center; color: var(--text-muted); font-size: 0.9rem; margin-top: 1.2rem; }

/* Testimonials — avatar + flag */
.t-head { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; }
.t-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; flex: 0 0 auto;
  font-family: var(--font-display); font-weight: 700; color: #fff;
  background: var(--grad-orange);
}
.t-meta { display: flex; flex-direction: column; line-height: 1.3; }
.t-meta strong { color: var(--text-primary); font-size: 0.92rem; }
.t-meta span { color: var(--text-muted); font-size: 0.82rem; }
.testimonials-grid article strong { font-size: 0.9rem; }

/* FAQ accordion */
.faq-accordion { margin-top: 2rem; max-width: 860px; }
details.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.8rem;
  padding: 0 1.4rem;
  transition: border-color 0.2s ease;
}
details.faq-item[open] { border-color: var(--border-orange); }
details.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.15rem 0;
  font-family: var(--font-display); font-weight: 600; color: var(--text-primary);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: "+"; color: var(--orange-light); font-size: 1.5rem; line-height: 1;
  transition: transform 0.2s ease;
}
details.faq-item[open] summary::after { content: "–"; }
details.faq-item p { margin: 0 0 1.15rem; color: var(--text-secondary); }

@media (max-width: 768px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }

  /* Single-row auto-sliding device marquee on mobile */
  .device-tiles {
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .device-track {
    display: flex;
    width: max-content;
    gap: 0;
    grid-template-columns: none;
    animation: device-scroll 22s linear infinite;
  }
  .device-track .dup { display: flex; }
  .device-tile {
    flex: 0 0 auto;
    width: 132px;
    margin-right: 0.9rem;
  }
  @keyframes device-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .device-track { animation: none; }
}

/* Belgium provider comparison table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 2rem 0 1rem; border-radius: var(--radius); }
.be-table {
  width: 100%; min-width: 560px;
  border-collapse: collapse;
  background: #012a63;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: 0.95rem;
}
.be-table th, .be-table td {
  padding: 0.95rem 1.1rem; text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.be-table thead th {
  font-family: var(--font-display); color: var(--text-primary);
  background: rgba(33, 70, 139, 0.18);
  font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase;
}
.be-table tbody tr:last-child td { border-bottom: 0; }
.be-table td:first-child { color: var(--text-primary); font-weight: 600; }
.be-row-highlight { background: rgba(91, 155, 255, 0.12); }
.be-row-highlight td { color: var(--text-primary); }
.be-row-highlight td:first-child { box-shadow: inset 3px 0 0 var(--orange-primary); }
.badge-best {
  display: inline-block; margin-left: 0.5rem;
  background: var(--red-primary); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.62rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 999px; vertical-align: middle;
}

/* Section media image (e.g. België dekking) */
.section-media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
  box-shadow: var(--glow-soft);
  margin: 0.5rem 0 1.8rem;
}
/* This graphic has its own transparent background and is meant to sit
   directly on the page — no card border/shadow, same treatment as the
   other transparent PNG cutouts used elsewhere on the homepage. */
.section-media-bare { border: none; box-shadow: none; border-radius: 0; }

/* IPTV uitleg + 3-stappen (reuses .coverage-grid / .feature-grid / .be-table) */
.accent { color: var(--orange-primary); }

.hl-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .hl-grid { grid-template-columns: minmax(0, 1fr); } }
.hl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.hl-card:hover { border-color: var(--border-orange); transform: translateY(-3px); }
.hl-card .icon-badge { width: 48px; height: 48px; margin: 0 auto 0.9rem; }
.hl-card h3 { font-size: 1.02rem; margin-bottom: 0.25rem; }
.hl-card p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }

/* IPTV vs traditionele TV — column highlight, sticky first col, badge */
.be-table .col-iptv { background: rgba(91, 155, 255, 0.12); color: var(--text-primary); }
.be-table thead th.col-iptv { background: rgba(91, 155, 255, 0.22); }
.be-table thead th.col-trad { background: rgba(174, 28, 40, 0.16); }
.be-table.sticky-first th:first-child,
.be-table.sticky-first td:first-child { position: sticky; left: 0; background: #012a63; }

/* On phones: let comparison tables reflow to fit instead of side-scrolling */
@media (max-width: 600px) {
  .table-scroll { overflow-x: visible; margin: 1.4rem 0 0.6rem; }
  .be-table { min-width: 0; font-size: 0.8rem; table-layout: fixed; }
  .be-table th, .be-table td { padding: 0.6rem 0.5rem; }
  .be-table thead th { font-size: 0.64rem; letter-spacing: 0.01em; }
  .be-table th, .be-table td { overflow-wrap: anywhere; }
  /* Sticky first column is unnecessary once the table fits — disable it */
  .be-table.sticky-first th:first-child,
  .be-table.sticky-first td:first-child { position: static; background: transparent; }
  /* "Winnaar" / "Beste keuze" chips drop under the header label */
  .be-table thead th .badge-win,
  .be-table td .badge-best { display: block; width: max-content; margin: 0.3rem 0 0; }
}
.badge-win {
  display: inline-block; margin-left: 0.45rem;
  background: var(--grad-orange); color: #fff;
  font-family: var(--font-display); font-weight: 700; font-size: 0.6rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 999px; vertical-align: middle;
}

/* 3-step blok */
.step-card { background: #012a63; border-top: 3px solid var(--orange-primary); position: relative; }
.step-num { font-family: var(--font-display); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; color: var(--orange-primary); line-height: 1; margin: 0.2rem 0 0.3rem; }
@media (min-width: 769px) {
  .steps-grid .step-card:not(:last-child)::after {
    content: ""; position: absolute; top: 40%;
    right: -0.95rem; width: 1.1rem;
    border-top: 2px dashed var(--border-orange);
  }
}

/* Premium "Beste IPTV Nederland 4K" section (scoped) */
#iptv-nederland-4k, #iptv-sport-nederland { padding: 100px 0; }
.text-gradient {
  background: linear-gradient(120deg, #85B6FF, #4D8CF5);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.iptv4k-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: 2rem;
}
.iptv4k-grid > div p { color: var(--text-secondary); }
.q4k-side { display: grid; gap: 1.2rem; }
.section-image-placeholder {
  width: 100%; height: 300px;
  background: #012a63;
  border: 2px dashed rgba(91, 155, 255, 0.3);
  border-radius: var(--radius);
  display: grid; place-items: center;
  text-align: center; padding: 1rem;
  color: var(--text-muted); font-size: 0.9rem;
}
.q4k-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem;
  position: relative;
}
.q4k-stats::before {
  content: ""; position: absolute; inset: -18%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(91, 155, 255, 0.05), transparent 70%);
}
.q4k-card {
  background: #012a63;
  border: 1px solid rgba(91, 155, 255, 0.15);
  border-radius: var(--radius);
  padding: 1.4rem 1rem; text-align: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.q4k-card:hover { background: rgba(33, 70, 139, 0.18); border-color: var(--blue-primary); transform: translateY(-3px); }
.q4k-num {
  display: block;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.1; color: #fff;
}
.q4k-lbl { display: block; color: var(--text-muted); font-size: 0.82rem; margin-top: 0.35rem; }
.q4k-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem;
  margin-top: 2.4rem;
}
.q4k-badges span {
  background: #012a63;
  border: 1px solid rgba(91, 155, 255, 0.3);
  color: var(--orange-light);
  padding: 0.55rem 1.05rem; border-radius: 999px;
  font-size: 0.85rem; font-weight: 500;
}
.q4k-cta { text-align: center; margin-top: 2rem; }
@media (max-width: 900px) {
  .iptv4k-grid { grid-template-columns: 1fr; }
  .iptv4k-grid .q4k-side { order: -1; }
}
@media (max-width: 768px) { #iptv-nederland-4k, #iptv-sport-nederland { padding: 60px 0; } }

/* Sports section (reuses .be-table/.col-iptv/.col-trad/.badge-win/.savings-highlight/.trust-badges) */
.sport-figure {
  margin: 2rem auto 0;
  max-width: 860px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9), var(--glow-orange);
}
.sport-figure img { display: block; width: 100%; height: auto; }
.leagues { display: grid; gap: 0.7rem; margin: 1.6rem 0; }
.league-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.league-track { display: flex; flex-wrap: nowrap; gap: 0.7rem; width: max-content; will-change: transform; }
/* fallback if JS is off: simple auto-scroll */
.league-row.no-js { overflow-x: auto; scrollbar-width: none; }
.league-row.no-js::-webkit-scrollbar { display: none; }
.league-track span {
  flex: 0 0 auto; white-space: nowrap;
  display: inline-flex; align-items: center;
  background: #012a63; border: 1px solid var(--border-orange); color: #fff;
  padding: 0.55rem 1rem; border-radius: 999px; font-size: 0.88rem; font-weight: 500;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.league-track span:hover { border-color: var(--orange-light); box-shadow: var(--glow-orange); }
.sport-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; margin-top: 1.6rem; }
.sport-feat {
  background: #012a63; border: 1px solid var(--border); border-left: 3px solid var(--orange-primary);
  border-radius: 12px; padding: 0.8rem 1rem; font-size: 0.9rem; color: var(--text-secondary);
}
.sport-feat strong { color: #fff; font-weight: 600; }
.sport-cta { text-align: center; margin-top: 2.6rem; }
.sport-buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1rem 0; }
.sport-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem; color: var(--text-muted); font-size: 0.88rem; }
@media (max-width: 560px) { .sport-feats { grid-template-columns: 1fr; } }

/* ============================================================
   4-tier subscription plans (prijzen)
   ============================================================ */
.note-box {
  max-width: 760px; margin: 1.6rem auto 0; text-align: center;
  background: linear-gradient(135deg, rgba(91, 155, 255, 0.12), rgba(74, 116, 230, 0.10));
  border: 1px solid var(--border-orange); border-radius: var(--radius);
  padding: 1rem 1.3rem; color: var(--text-secondary); font-size: 0.92rem;
}

/* Premium currency note */
.note-box.premium {
  position: relative; overflow: hidden;
  max-width: 880px; margin: 2rem auto 0; text-align: left;
  display: flex; align-items: center; gap: 1.3rem;
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(91, 155, 255, 0.20), transparent 52%),
    radial-gradient(130% 160% at 100% 100%, rgba(74, 116, 230, 0.20), transparent 52%),
    linear-gradient(140deg, rgba(17, 20, 36, 0.94), rgba(9, 11, 22, 0.94));
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.8rem;
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.note-box.premium::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(255, 141, 69, 0.6), rgba(74, 116, 230, 0.5), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
.note-box.premium::after {
  content: ""; position: absolute; top: -60%; left: -20%; width: 50%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.07), transparent);
  transform: rotate(18deg); pointer-events: none;
  animation: note-sheen 7s ease-in-out infinite;
}
@keyframes note-sheen { 0%, 60% { left: -30%; opacity: 0; } 75% { opacity: 1; } 100% { left: 130%; opacity: 0; } }
.note-icon {
  flex-shrink: 0; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px; font-size: 1.5rem;
  background: linear-gradient(135deg, rgba(91, 155, 255, 0.28), rgba(74, 116, 230, 0.28));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.note-content { position: relative; z-index: 1; }
.note-lead {
  font-family: var(--font-display); font-weight: 700; font-size: 1.08rem;
  color: var(--text-primary); margin: 0 0 0.7rem;
}
.note-lead strong { color: var(--orange-light); }
.note-currencies { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.cur-chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
  padding: 0.35rem 0.75rem; border-radius: 999px; color: #fff;
  background: linear-gradient(135deg, rgba(91, 155, 255, 0.18), rgba(74, 116, 230, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.cur-chip:last-child { color: var(--orange-light); }
.note-sub { color: var(--text-secondary); font-size: 0.9rem; margin: 0; line-height: 1.5; }
@media (max-width: 560px) {
  .note-box.premium { flex-direction: column; text-align: center; padding: 1.4rem 1.2rem; }
  .note-currencies { justify-content: center; }
}
.countdown-wrap { text-align: center; margin: 2rem 0 0; }
.countdown-title { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); margin-bottom: 0.9rem; }
.countdown-boxes { display: inline-flex; gap: 0.8rem; }
.cd-box { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0.8rem 1.1rem; min-width: 76px; }
.cd-num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; color: #fff; line-height: 1; }
.cd-unit { display: block; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.35rem; }

.plans {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem; margin: 2.6rem 0 1.5rem; align-items: start;
}
.plan {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.7rem 1.4rem;
}
.plan.is-popular { border-color: var(--border-orange); box-shadow: var(--glow-orange); }
.plan.is-best { border-color: rgba(52, 210, 123, 0.45); box-shadow: 0 24px 60px -34px rgba(52, 210, 123, 0.6); background: linear-gradient(180deg, rgba(52, 210, 123, 0.10), rgba(255, 255, 255, 0.012)); }
.plan.is-lifetime { border-color: var(--border-orange); box-shadow: var(--glow-orange); background: linear-gradient(180deg, rgba(91, 155, 255, 0.10), rgba(255, 255, 255, 0.012)); }
.plan-badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.32rem 0.9rem; border-radius: 999px; border: 1px solid transparent;
}
.plan-badge.pop  { background: rgba(91, 155, 255, 0.18); color: var(--orange-light); border-color: var(--border-orange); }
.plan-badge.best { background: rgba(52, 210, 123, 0.18); color: #5fe39a; border-color: rgba(52, 210, 123, 0.5); }
.plan-badge.life { background: rgba(91, 155, 255, 0.18); color: var(--orange-light); border-color: var(--border-orange); }
.plan-label { font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--text-primary); letter-spacing: 0.04em; text-transform: uppercase; }
.plan-sub { color: var(--text-muted); font-size: 0.84rem; margin: 0.15rem 0 0.9rem; }
.plan-price { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1; }
.plan.is-best .plan-price { color: #5fe39a; }
.plan.is-lifetime .plan-price { background: linear-gradient(120deg, #ffd9bf, #85B6FF 60%, #4D8CF5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-permonth {
  align-self: flex-start; margin: 0.8rem 0 0.5rem; padding: 0.3rem 0.7rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border); font-size: 0.8rem; font-weight: 600; color: var(--text-primary);
}
.plan-note { color: var(--text-muted); font-size: 0.84rem; min-height: 1.1rem; margin: 0 0 0.2rem; }
.plan-cta { margin: 1.1rem 0; }
.plan-cta .button { width: 100%; }
.plan-divider { border: 0; border-top: 1px solid var(--border); margin: 0.2rem 0 1.1rem; }
.plan-feat-head { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orange-light); margin: 0 0 1rem; }
.plan.is-best .plan-feat-head { color: #5fe39a; }
.plan-feats { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.plan-feats li { position: relative; padding-left: 1.6rem; font-size: 0.88rem; color: var(--text-secondary); }
.plan-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--orange-light); font-weight: 700; }
.plan.is-best .plan-feats li::before { color: #5fe39a; }

.moneyback {
  display: flex; gap: 1.1rem; align-items: flex-start;
  max-width: 780px; margin: 1.8rem auto 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
}
.moneyback .mb-icon { font-size: 1.8rem; line-height: 1; }
.moneyback h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.moneyback p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.secure-line { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin-top: 1.4rem; }

@media (max-width: 980px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } .cd-box { min-width: 64px; padding: 0.7rem 0.9rem; } .moneyback { flex-direction: column; gap: 0.7rem; } }

/* Plan CTA refinement + "pop & float" the yearly (Beste waarde) plan */
.plan-cta .button {
  width: 100%;
  padding: 0.95rem 1.1rem;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.plan.is-best .plan-cta .button {
  background: linear-gradient(135deg, #1f9d57, #34d27b);
  color: #04210f;
  box-shadow: 0 18px 46px -16px rgba(52, 210, 123, 0.65);
}
.plan.is-best .plan-cta .button:hover { box-shadow: 0 24px 58px -14px rgba(52, 210, 123, 0.85); }

/* Highlight the yearly plan without breaking the grid (all cards equal height, top-aligned) */
.plans { align-items: stretch; }
.plan.is-best {
  box-shadow: 0 24px 60px -30px rgba(52, 210, 123, 0.55), 0 0 0 1px rgba(52, 210, 123, 0.45);
}

/* ============================================================
   Premium mobile polish
   ============================================================ */
/* In-page anchors land below the sticky header */
:target { scroll-margin-top: 84px; }
section[id], [id^="3months"], [id="6months"], [id="annual"], [id="lifetime"] { scroll-margin-top: 84px; }

@media (max-width: 768px) {
  .section { padding: clamp(2.6rem, 9vw, 3.6rem) 0; }
  .hero {
    padding: 2.6rem 0 2.2rem;
    background-size: cover;
    background-position: center center;
  }
  .hero.hero-belgie {
    background-image:
      linear-gradient(180deg, rgba(7, 8, 15, 0.48), rgba(7, 8, 15, 0.78)),
      url("images/belgie-hero-image-mobile.webp");
  }
  .hero-belgie .hero-panel { max-width: 460px; margin: 0 auto; width: 100%; }
  .hero-belgie .hero-panel-box { padding: 1.3rem 1.1rem; }
  .hero-belgie .hero-panel-box h2 { font-size: 1.15rem; }
  .hero-belgie .trust-badges-mini { gap: 0.55rem; }
  .hero-belgie .badge-item { justify-content: center; }
  h1 { font-size: clamp(1.95rem, 8vw, 2.5rem); }
  .hero-copy h1 { font-size: clamp(1.6rem, 6.4vw, 2.05rem); }
  h2 { font-size: clamp(1.45rem, 6vw, 1.9rem); }
  .hero-text, .section-header p { font-size: 0.98rem; }
  .container { width: min(1180px, calc(100% - 1.8rem)); }

  /* comfortable full-width tap targets */
  .hero-actions .button, .article-cta .button, .q4k-cta .button { width: 100%; }
  .hero-actions, .article-cta { flex-direction: column; }
  .button { padding: 0.9rem 1.3rem; }

  /* pricing on mobile */
  .plan { padding: 1.5rem 1.3rem; }
  .plan-price { font-size: 2.3rem; }
  .countdown-title { font-size: 0.95rem; }
  .note-box { font-size: 0.88rem; padding: 0.9rem 1.1rem; }

  /* 4K stats stay readable */
  .q4k-num { font-size: 1.25rem; }
  .q4k-badges { gap: 0.5rem; }
  .q4k-badges span, .badge-grid span, .channel-badges span, .device-grid span { font-size: 0.8rem; padding: 0.5rem 0.9rem; }

  /* tables never push the page wide */
  .table-scroll { margin-left: -0.2rem; margin-right: -0.2rem; }

  /* footer breathes */
  .footer-grid { gap: 2rem; }
}

@media (max-width: 420px) {
  .q4k-stats { grid-template-columns: 1fr 1fr; gap: 0.7rem; }
  .q4k-card { padding: 1.1rem 0.7rem; }
  .countdown-boxes { gap: 0.55rem; }
  .cd-box { min-width: 58px; padding: 0.65rem 0.7rem; }
  .cd-num { font-size: 1.6rem; }
  .plan-price { font-size: 2.1rem; }
}

/* ============================================================
   Stats card (one large dark card) + count-up
   ============================================================ */
.stats-card {
  background: #012a63;
  border: 1px solid rgba(91, 155, 255, 0.12);
  border-radius: 24px;
  padding: 48px 40px;
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 38px 24px;
}
.stat-cell { text-align: center; }
.stat-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #85B6FF, #4D8CF5, #2E6BE6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.stat-label { display: block; color: #b8bfd4; font-size: 0.88rem; font-weight: 400; margin-top: 6px; }
@media (max-width: 992px) { .stats-inner { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
  .stats-card { padding: 32px 22px; }
  .stats-inner { gap: 26px 14px; }
  .stat-value { font-size: clamp(1.45rem, 6vw, 1.85rem); }
  .stat-label { font-size: 0.82rem; }
}

/* WhatsApp floating button (injected by scripts.js) */
.wa-float {
  position: fixed; right: 20px; bottom: 88px;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; display: grid; place-items: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
  z-index: 998; transition: transform 0.3s ease;
}
.wa-float:hover { transform: scale(1.08); }
.wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  animation: waPulse 3s ease-out infinite;
}
@keyframes waPulse {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (min-width: 769px) { .wa-float { bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .wa-float::after { animation: none; } }

/* "Waarom" feature cards — centered layout + gold icon (match reference) */
.why .feature-grid article {
  text-align: center;
  padding: 2.4rem 1.7rem;
}
.why .feature-grid article:hover {
  border-color: var(--border-orange);
  box-shadow: 0 28px 64px -34px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(91, 155, 255, 0.25);
}
.why .icon-badge {
  width: 64px; height: 64px;
  margin: 0 auto 1.3rem;
  border-radius: 18px;
  border: 0;
  background: var(--grad-orange);
  box-shadow: var(--glow-orange);
}
.why .icon-badge svg { width: 30px; height: 30px; stroke: #ffffff; stroke-width: 2; }
.why .feature-grid article h3 { margin-bottom: 0.5rem; }
.why .feature-grid article p { color: var(--text-secondary); }

/* ============================================================
   Mobile polish — touch ergonomics, overflow safety, fluid type
   ============================================================ */

/* Snappier taps: remove the grey iOS flash, keep a subtle press cue */
a, button, summary, .button, .plan, .post-card, .article-card {
  -webkit-tap-highlight-color: transparent;
}
.button:active, .mobile-bottom-bar a:active, .nav > a:active { transform: scale(0.97); }

/* Never allow long words / URLs to force horizontal scroll */
h1, h2, h3, h4, p, a, li, td, th { overflow-wrap: break-word; word-break: break-word; }

@media (max-width: 768px) {
  /* Comfortable touch targets (Apple/Google min ~44px) */
  .button { min-height: 48px; }
  .nav-toggle { min-width: 46px; min-height: 46px; align-items: center; justify-content: center; }
  .lang-toggle button { min-height: 40px; }
  .faq-item summary { min-height: 48px; display: flex; align-items: center; }
  .footer-links a { display: inline-block; padding: 0.3rem 0; }

  /* Stack the newsletter field + button so both are full-width & tappable */
  .footer-newsletter form { flex-direction: column; }
  .footer-newsletter input, .footer-newsletter button { width: 100%; }
  .footer-newsletter button { min-height: 48px; }

  /* Tighten oversized vertical rhythm on phones */
  .section-header { margin-bottom: 0.25rem; }
  .hero-panel-box { padding: 1.2rem 1.1rem; }

  /* Tables stay inside a swipe container instead of breaking layout */
  .table-scroll { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  :root { --shell: min(1180px, calc(100% - 1.6rem)); }
  h1 { font-size: clamp(1.95rem, 8.5vw, 2.4rem); }
  h2 { font-size: clamp(1.5rem, 6.2vw, 1.95rem); }
  .hero-text { font-size: 1rem; }
  .eyebrow { font-size: 0.72rem; }
  .plan { padding: 1.4rem 1.25rem; }
  .plan-price { font-size: 2.4rem; }
  /* Single-column stat blocks read better than cramped 2-up on tiny screens */
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .cookie-banner { left: 0.6rem; right: 0.6rem; }
}

@media (max-width: 360px) {
  .hero-actions .button { font-size: 0.92rem; }
  .plan-price { font-size: 2.2rem; }
}

/* ============================================================
   Centered cards — consistent icon + text alignment site-wide
   ============================================================ */
.cat-card,
.post-card,
.article-card,
.testimonials-grid article {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cat-card .icon-badge { margin-left: auto; margin-right: auto; }
.post-card .tag { align-self: center; }
.testimonials-grid .t-head { justify-content: center; }

/* Image-on-top stacked media section (Marokkaanse / Turkse kanalen) */
.media-stack { max-width: 820px; margin: 0 auto; text-align: center; }
.media-stack .section-header { margin-top: 0.2rem; }
.ina-media.stacked { max-width: 760px; margin: 1.8rem auto 0; }

/* Hero rating badge (replaces plain note + live indicator) */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.7rem;
  padding: 0.65rem 1.15rem 0.65rem 1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-orange);
  box-shadow: 0 10px 30px -18px rgba(91, 155, 255, 0.6);
}
.rating-stars { color: var(--orange-light); letter-spacing: 2px; font-size: 1.02rem; line-height: 1; }
.rating-score { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; color: #fff; line-height: 1; }
.rating-score small { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; }
.rating-meta { text-align: left; font-size: 0.8rem; color: var(--text-secondary); line-height: 1.3; }
.rating-meta strong { color: var(--text-primary); font-weight: 700; }
@media (max-width: 380px) {
  .rating-badge { gap: 0.6rem; padding: 0.6rem 0.9rem; }
  .rating-score { font-size: 1.25rem; }
  .rating-meta { font-size: 0.74rem; }
}

/* Intro paragraph moved below the hero (keeps hero clean) */
.intro-text { max-width: 760px; margin: 0 auto; text-align: center; font-size: 1.05rem; color: var(--text-secondary); }


/* ============================================================
   Brand CTA — keep orange on primary buttons (blue theme)
   ============================================================ */
.button-primary,
.mobile-bottom-bar a {
  background: linear-gradient(135deg, #FF6A1A, #FF8D45);
  box-shadow: 0 16px 42px -16px rgba(255, 106, 26, 0.6);
  color: #fff;
}
.button-primary:hover { box-shadow: 0 22px 56px -14px rgba(255, 106, 26, 0.85); }


/* ============================================================
   UI/UX polish pass — alignment, rhythm, hierarchy
   Fixes: off-centre blocks, orphaned left-aligned CTAs,
   ragged centred prose, uneven card baselines.
   ============================================================ */

/* --- Hero: tighter rhythm + real call to action --- */
.hero-home .hero-text { margin: 1.6rem auto 0; max-width: 62ch; }
.hero-home .hero-visual { margin: 2rem auto 0; max-width: 480px; }
.hero-home .hero-visual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 55px rgba(0, 8, 28, 0.55)); }

/* Desktop: copy left, fan photo right, instead of one centered column */
@media (min-width: 992px) {
  .hero-home .hero-grid {
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
  }
  .hero-home .hero-copy {
    text-align: left;
    margin: 0;
    max-width: 620px;
  }
  /* Calmer, more spacious title — the old clamp(2.3rem, 5vw, 3.6rem)
     packed 4 tight lines into this column; this reads closer to the
     reference's lighter, airier headline. */
  .hero-home .hero-copy h1 {
    font-size: clamp(2rem, 3.1vw, 2.75rem);
    line-height: 1.18;
    letter-spacing: -0.01em;
  }
  .hero-home .hero-title { font-size: clamp(1.05rem, 1.6vw, 1.3rem); }
  .hero-home .hero-copy .hero-actions,
  .hero-home .hero-copy .hero-trust,
  .hero-home .hero-copy .hero-note,
  .hero-home .hero-copy .live-indicator { justify-content: flex-start; }
  .hero-home .hero-text {
    margin: 1.2rem 0 0;
    max-width: 54ch;
    font-size: 1.08rem;
    line-height: 1.75;
  }
  .hero-home .hero-visual { margin: 0; max-width: none; }
}

.hero-home .hero-actions {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  justify-content: center; margin-top: 2rem;
}
.hero-trust {
  list-style: none; margin: 1.5rem auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.5rem 1.5rem;
  color: #dfe6f8; font-size: 0.88rem;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.65);
}
.hero-trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero-trust li::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(133, 182, 255, 0.22);
  box-shadow: inset 0 0 0 1px rgba(133, 182, 255, 0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23bcd4ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 10px 10px; background-position: center; background-repeat: no-repeat;
}

/* --- FAQ accordion was pinned left inside a wide container --- */
.faq-accordion { margin-inline: auto; }

/* --- Orphaned CTAs under centred sections --- */
.comparison > .container,
.devices > .container > div:last-child,
.blog-preview > .container > div:last-child,
.trust-signals > .container > div:last-child:not(.trust-grid) { text-align: center; }
.comparison .savings-highlight { margin: 1.4rem 0 1.6rem; }

/* --- Long prose reads better ragged-right than centred --- */
#iptv-sport-nederland .article-main { text-align: left !important; }
#iptv-kopen .container > div,
#iptv-suppliers .container > div,
#iptv-sport-nederland .article-main { color: var(--text-secondary); }
#iptv-kopen .container > div p + p,
#iptv-suppliers .container > div p + p { margin-top: 1rem; }

/* --- Two-column media rows: keep columns optically centred --- */
.movies-grid, .iptv4k-grid, .coverage-grid, .diaspora-grid { align-items: center; }

/* --- Trust cards: centred icon + heading, left-aligned body copy --- */
.trust-card { text-align: left; align-items: stretch; }
.trust-card h3 { text-align: center; }
.trust-card .icon-badge { align-self: center; }
.trust-card p { margin: 0.55rem 0 0; }

/* --- Testimonials: equal baselines, warmer stars --- */
.testimonials-grid article { display: flex; flex-direction: column; }
.testimonials-grid article p { flex: 1 1 auto; margin: 0; }
.testimonials-grid article::before {
  color: #ffc247; letter-spacing: 3px; font-size: 0.95rem;
}
.t-head { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }

/* --- Comparison table: make the winner unmistakable --- */
.comparison-table { align-items: stretch; }
.comparison-table > div { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; }
.comparison-table .highlight p { font-size: 2rem; color: var(--orange-light); }

/* --- Sport feature list: on-theme, no clashing green --- */
.sport-feat { display: flex; align-items: center; gap: 0.55rem; line-height: 1.45; }

/* --- Section header rhythm: header should breathe before its grid --- */
.section-header { margin-bottom: 2.2rem; }
.section-header:last-child { margin-bottom: 0; }
.section-header p { color: var(--text-secondary); }

@media (max-width: 768px) {
  .hero-home .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-home .hero-actions .button { width: 100%; }
  .hero-trust { gap: 0.45rem 1rem; font-size: 0.82rem; }
  .trust-card { text-align: center; }
  .trust-card p { text-align: center; }
}

/* Sport feature list — real check glyph instead of an emoji */
.sport-feat::before {
  content: ""; width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(91, 155, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(133, 182, 255, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385B6FF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}



/* Sport trust row — consistent check glyph */
.sport-trust span { display: inline-flex; align-items: center; gap: 0.45rem; }
.sport-trust span::before {
  content: ""; width: 16px; height: 16px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(91, 155, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(133, 182, 255, 0.5);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385B6FF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  background-size: 10px 10px; background-position: center; background-repeat: no-repeat;
}

/* Mobile hero: `.container { width: 100% }` was overriding the shell width,
   letting the hero copy and buttons run edge-to-edge. */
@media (max-width: 768px) {
  .hero-home > .container { width: var(--shell); }
  .hero-home .hero-actions { margin-top: 1.5rem; }
  .hero-home .hero-text { margin-bottom: 0; }
}

/* Currency note-box: was near-black against the blue page — bring it on-theme */
.note-box.premium {
  background:
    radial-gradient(130% 160% at 0% 0%, rgba(133, 182, 255, 0.22), transparent 52%),
    radial-gradient(130% 160% at 100% 100%, rgba(91, 155, 255, 0.18), transparent 52%),
    linear-gradient(140deg, #01306f, #01245a);
  box-shadow: 0 30px 70px -36px rgba(0, 14, 44, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ============================================================
   COLOUR SYSTEM v2 — depth, hue variety and gradients
   The page was one flat sheet of #003DA5. This layer adds an
   accent family, banded section backgrounds, a mesh-gradient
   base and per-component hue rotation.
   ============================================================ */

:root {
  /* Accent family */
  --c-blue:    #5B9BFF;
  --c-blue-lt: #8FC0FF;
  --c-cyan:    #34D9EC;
  --c-cyan-dk: #12A8C2;
  --c-violet:  #A98CFF;
  --c-amber:   #FFC15A;
  --c-orange:  #FF6A1A;
  --c-orange-lt: #FF9E45;
  --c-green:   #3FDD8C;
  --c-rose:    #FF5F7A;

  /* Depth stops */
  --d-900: #001233;
  --d-800: #00194a;
  --d-700: #002163;
  --d-600: #002b80;
  --d-500: #003DA5;

  /* Signature gradients */
  --g-aqua:   linear-gradient(135deg, var(--c-cyan), var(--c-blue));
  --g-sky:    linear-gradient(135deg, var(--c-blue-lt), var(--c-blue) 55%, #2E6BE6);
  --g-sunset: linear-gradient(135deg, var(--c-orange), var(--c-amber));
  --g-violet: linear-gradient(135deg, var(--c-violet), var(--c-blue));
  --g-mint:   linear-gradient(135deg, var(--c-green), var(--c-cyan));
  --g-rose:   linear-gradient(135deg, var(--c-rose), var(--c-violet));
  --g-hero:   linear-gradient(100deg, var(--c-blue-lt) 0%, var(--c-cyan) 42%, var(--c-blue) 78%);
}

/* --- Mesh base: several hues bled into the navy instead of one flat fill --- */
/* The mesh lives on its own fixed, composited layer. `background-attachment:
   fixed` on <body> forces a full-viewport repaint on every scroll frame — it
   was the main cause of scroll jank. A fixed pseudo-element is promoted to
   its own layer instead and costs nothing to scroll past. */
body { background: var(--d-600); }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 12% 4%,   rgba(52, 217, 236, 0.13), transparent 62%),
    radial-gradient(1000px 700px at 88% 16%,  rgba(169, 140, 255, 0.12), transparent 64%),
    radial-gradient(1200px 700px at 50% 46%,  rgba(91, 155, 255, 0.14), transparent 66%),
    radial-gradient(900px  600px at 8%  78%,  rgba(255, 106, 26, 0.07), transparent 62%),
    radial-gradient(1000px 640px at 92% 96%,  rgba(52, 217, 236, 0.09), transparent 64%),
    linear-gradient(180deg, var(--d-500) 0%, var(--d-600) 34%, var(--d-700) 68%, var(--d-800) 100%);
  transform: translateZ(0);
}

/* --- Section banding.
       No hairline rule between sections — a 1px line of a different colour
       reads as a seam. Bands fade in and out at their own edges instead, so
       one section melts into the next. --- */
.section { position: relative; }
.section + .section { border-top: none; }
.section:nth-of-type(even):not(.is-light) {
  background: linear-gradient(180deg,
    rgba(0, 12, 44, 0) 0%,
    rgba(0, 12, 44, 0.24) 22%,
    rgba(0, 12, 44, 0.24) 78%,
    rgba(0, 12, 44, 0) 100%);
}

/* --- Eyebrow pills: gradient text on a gradient hairline --- */
.eyebrow {
  position: relative;
  border-color: transparent;
  background: var(--g-aqua);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(52, 217, 236, 0.32), inset 0 0 40px rgba(52, 217, 236, 0.07);
}

/* --- Headline gradient: three stops, wider hue travel --- */
.text-gradient {
  background: var(--g-hero);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* --- Feature / trust / category icon badges cycle through the accent family --- */
.feature-grid article .icon-badge,
.trust-grid .trust-card .icon-badge,
.cat-card .icon-badge {
  border: 0;
  color: #04122e;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.7);
}
.feature-grid article:nth-child(6n + 1) .icon-badge,
.trust-grid .trust-card:nth-child(6n + 1) .icon-badge,
.cat-card:nth-child(6n + 1) .icon-badge { background: var(--g-sky); }
.feature-grid article:nth-child(6n + 2) .icon-badge,
.trust-grid .trust-card:nth-child(6n + 2) .icon-badge,
.cat-card:nth-child(6n + 2) .icon-badge { background: var(--g-aqua); }
.feature-grid article:nth-child(6n + 3) .icon-badge,
.trust-grid .trust-card:nth-child(6n + 3) .icon-badge,
.cat-card:nth-child(6n + 3) .icon-badge { background: var(--g-sunset); }
.feature-grid article:nth-child(6n + 4) .icon-badge,
.trust-grid .trust-card:nth-child(6n + 4) .icon-badge,
.cat-card:nth-child(6n + 4) .icon-badge { background: var(--g-violet); }
.feature-grid article:nth-child(6n + 5) .icon-badge,
.trust-grid .trust-card:nth-child(6n + 5) .icon-badge,
.cat-card:nth-child(6n + 5) .icon-badge { background: var(--g-mint); }
.feature-grid article:nth-child(6n + 6) .icon-badge,
.trust-grid .trust-card:nth-child(6n + 6) .icon-badge,
.cat-card:nth-child(6n + 6) .icon-badge { background: var(--g-rose); }
.icon-badge svg { stroke: currentColor; stroke-width: 2; }

/* --- Cards: glass surface + a coloured edge that lights up on hover --- */
.feature-grid article,
.trust-card,
.testimonials-grid article,
.device-tile,
.comparison-table > div,
details.faq-item {
  position: relative;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.02)),
    rgba(0, 20, 60, 0.35);
  overflow: hidden;
}
.feature-grid article::after,
.trust-card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  opacity: 0; transition: opacity 0.28s ease;
}
.feature-grid article:nth-child(6n + 1)::after,
.trust-card:nth-child(6n + 1)::after { background: var(--g-sky); }
.feature-grid article:nth-child(6n + 2)::after,
.trust-card:nth-child(6n + 2)::after { background: var(--g-aqua); }
.feature-grid article:nth-child(6n + 3)::after,
.trust-card:nth-child(6n + 3)::after { background: var(--g-sunset); }
.feature-grid article:nth-child(6n + 4)::after,
.trust-card:nth-child(6n + 4)::after { background: var(--g-violet); }
.feature-grid article:nth-child(6n + 5)::after,
.trust-card:nth-child(6n + 5)::after { background: var(--g-mint); }
.feature-grid article:nth-child(6n + 6)::after,
.trust-card:nth-child(6n + 6)::after { background: var(--g-rose); }
.feature-grid article:hover::after,
.trust-card:hover::after { opacity: 1; }

/* --- Stats: each figure gets its own hue, tabular and bright --- */
.stats-card {
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(52, 217, 236, 0.16), transparent 55%),
    radial-gradient(120% 150% at 100% 100%, rgba(169, 140, 255, 0.16), transparent 55%),
    linear-gradient(150deg, #01235c, #011a45);
  border: 1px solid rgba(133, 182, 255, 0.20);
  box-shadow: 0 40px 90px -50px rgba(0, 8, 30, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.stat-cell:nth-child(4n + 1) .stat-value { background-image: var(--g-sky); }
.stat-cell:nth-child(4n + 2) .stat-value { background-image: var(--g-aqua); }
.stat-cell:nth-child(4n + 3) .stat-value { background-image: var(--g-mint); }
.stat-cell:nth-child(4n + 4) .stat-value { background-image: var(--g-sunset); }

/* --- Pills and badges: gentle gradient instead of flat fill --- */
.badge-grid span, .channel-badges span, .device-grid span,
.payment-badges span, .trust-badges span, .q4k-badges span,
.league-track span {
  background: linear-gradient(160deg, rgba(52, 217, 236, 0.14), rgba(91, 155, 255, 0.08));
  border-color: rgba(133, 182, 255, 0.30);
}
.league-track span:hover,
.badge-grid span:hover, .channel-badges span:hover {
  border-color: rgba(52, 217, 236, 0.6);
  box-shadow: 0 10px 26px -14px rgba(52, 217, 236, 0.6);
}

/* --- Secondary / outline buttons: gradient hairline --- */
.button-secondary {
  background:
    linear-gradient(rgba(0, 20, 60, 0.5), rgba(0, 20, 60, 0.5)) padding-box,
    var(--g-aqua) border-box;
  border: 1px solid transparent;
}
.button-secondary:hover {
  background:
    linear-gradient(rgba(4, 40, 100, 0.72), rgba(4, 40, 100, 0.72)) padding-box,
    var(--g-aqua) border-box;
  box-shadow: 0 16px 40px -20px rgba(52, 217, 236, 0.7);
}
.button-outline:hover { border-color: var(--c-cyan); color: #fff; }

/* --- Links inside prose: cyan, not the body blue --- */
.ilink, .article-main a, details.faq-item a {
  color: var(--c-cyan);
  text-decoration-color: rgba(52, 217, 236, 0.45);
}
.ilink:hover, .article-main a:hover, details.faq-item a:hover { color: var(--c-blue-lt); }

/* --- Comparison: the two rivals cool down, our card warms up --- */
.comparison-table > div:not(.highlight) p { color: var(--text-secondary); }
.comparison-table .highlight {
  background:
    radial-gradient(120% 150% at 50% 0%, rgba(255, 106, 26, 0.18), transparent 60%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(0, 20, 60, 0.4);
  border-color: rgba(255, 158, 69, 0.45);
  box-shadow: 0 26px 60px -32px rgba(255, 106, 26, 0.55);
}
.comparison-table .highlight h3 { color: var(--c-amber); }
.comparison-table .highlight p {
  background: var(--g-sunset);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* --- Footer: settle into the deepest stop --- */
.site-footer {
  background: linear-gradient(180deg, var(--d-800), var(--d-900));
  border-top: 1px solid rgba(133, 182, 255, 0.14);
}

@media (prefers-reduced-motion: no-preference) {
  .feature-grid article, .trust-card, .device-tile {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  }
}

/* --- Page shell settles to the deepest stop (no blue gap past the footer) --- */
html { background: var(--d-900); }

/* --- Plan cards: each tier owns a hue, top-edge accent, warmer price ramp ---
   NB: `#3months` / `#6months` are invalid CSS (an ID selector cannot start
   with a digit), so these use attribute selectors. No overflow:hidden here —
   it clipped the badges that overhang the card's top edge. */
.plan { position: relative; }
.plan::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.plan[id="3months"]::before { background: var(--g-aqua); }
.plan[id="6months"]::before { background: var(--g-sunset); }
.plan#annual::before        { background: var(--g-mint); }
.plan#lifetime::before      { background: var(--g-violet); }

.plan[id="3months"] .plan-price,
.plan[id="6months"] .plan-price,
.plan.is-best .plan-price,
.plan.is-lifetime .plan-price {
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.plan[id="3months"] .plan-price { background-image: var(--g-aqua); }
.plan[id="6months"] .plan-price { background-image: var(--g-sunset); }
.plan.is-best .plan-price       { background-image: var(--g-mint); }
.plan.is-lifetime .plan-price   { background-image: var(--g-violet); }

.plan[id="3months"] { border-color: rgba(52, 217, 236, 0.28); }
.plan.is-popular { border-color: rgba(255, 158, 69, 0.42); box-shadow: 0 24px 60px -34px rgba(255, 106, 26, 0.5); background: linear-gradient(180deg, rgba(255, 106, 26, 0.09), rgba(255, 255, 255, 0.012)); }
.plan.is-lifetime { border-color: rgba(169, 140, 255, 0.42); box-shadow: 0 24px 60px -34px rgba(169, 140, 255, 0.5); background: linear-gradient(180deg, rgba(169, 140, 255, 0.10), rgba(255, 255, 255, 0.012)); }

.plan-badge.pop  { background: rgba(255, 106, 26, 0.18); color: var(--c-orange-lt); border-color: rgba(255, 158, 69, 0.5); }
.plan-badge.life { background: rgba(169, 140, 255, 0.18); color: var(--c-violet); border-color: rgba(169, 140, 255, 0.5); }
.plan[id="3months"] .plan-feat-head { color: var(--c-cyan); }
.plan.is-popular .plan-feat-head { color: var(--c-orange-lt); }
.plan.is-lifetime .plan-feat-head { color: var(--c-violet); }
.plan[id="3months"] .plan-feats li::before { color: var(--c-cyan); }
.plan.is-popular .plan-feats li::before { color: var(--c-orange-lt); }
.plan.is-lifetime .plan-feats li::before { color: var(--c-violet); }

/* --- Countdown boxes pick up the urgency hue --- */
.cd-box {
  background: linear-gradient(160deg, rgba(255, 106, 26, 0.14), rgba(0, 20, 60, 0.5));
  border-color: rgba(255, 158, 69, 0.32);
}
.cd-box strong, .cd-num { color: var(--c-amber); }

/* --- Sport feature rows: cycle the left rule so the block isn't monotone --- */
.sport-feat:nth-child(4n + 1) { border-left-color: var(--c-blue); }
.sport-feat:nth-child(4n + 2) { border-left-color: var(--c-cyan); }
.sport-feat:nth-child(4n + 3) { border-left-color: var(--c-orange-lt); }
.sport-feat:nth-child(4n + 4) { border-left-color: var(--c-green); }

/* --- Testimonial avatars cycle too --- */
.testimonials-grid article:nth-child(6n + 1) .t-avatar { background: var(--g-sky); }
.testimonials-grid article:nth-child(6n + 2) .t-avatar { background: var(--g-aqua); }
.testimonials-grid article:nth-child(6n + 3) .t-avatar { background: var(--g-sunset); }
.testimonials-grid article:nth-child(6n + 4) .t-avatar { background: var(--g-violet); }
.testimonials-grid article:nth-child(6n + 5) .t-avatar { background: var(--g-mint); }
.testimonials-grid article:nth-child(6n + 6) .t-avatar { background: var(--g-rose); }
.t-avatar { color: #04122e; }

/* --- FAQ: cyan marker, gradient edge when open --- */
details.faq-item[open] {
  border-color: rgba(52, 217, 236, 0.38);
  box-shadow: 0 20px 46px -30px rgba(52, 217, 236, 0.55);
}
details.faq-item summary::after { color: var(--c-cyan); }

/* Plan badges overhang the card's top edge — keep them above the accent bar */
.plan::before { z-index: 1; }
.plan-badge { z-index: 3; }
.plan > *:not(::before) { position: relative; }

/* Badges sit on top of the tier accent bar — they need an opaque backing,
   otherwise the bar reads straight through their 18%-alpha fill. */
.plan-badge.pop {
  background: linear-gradient(rgba(255, 106, 26, 0.22), rgba(255, 106, 26, 0.22)), #052a63;
}
.plan-badge.best {
  background: linear-gradient(rgba(63, 221, 140, 0.22), rgba(63, 221, 140, 0.22)), #052a63;
}
.plan-badge.life {
  background: linear-gradient(rgba(169, 140, 255, 0.24), rgba(169, 140, 255, 0.24)), #052a63;
}

/* --- Non-photo heroes were washing to near-black over the blue page.
       Give them the same mesh treatment as the body. (.hero-belgie has its
       own photo background above — must stay excluded or this later,
       equal-specificity rule clobbers it.) --- */
.hero:not(.hero-home):not(.hero-belgie) {
  background-image:
    radial-gradient(900px 520px at 14% 8%,  rgba(52, 217, 236, 0.16), transparent 62%),
    radial-gradient(900px 560px at 88% 20%, rgba(169, 140, 255, 0.15), transparent 62%),
    radial-gradient(1100px 620px at 50% 0%, rgba(91, 155, 255, 0.18), transparent 66%),
    linear-gradient(180deg, rgba(0, 20, 62, 0.35), rgba(0, 14, 46, 0.55));
}
.hero:not(.hero-home):not(.hero-belgie) .hero-panel-box {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(52, 217, 236, 0.16), transparent 58%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(0, 22, 66, 0.45);
  border-color: rgba(133, 182, 255, 0.28);
}
.hero-stats > div {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(0, 22, 66, 0.42);
  border-color: rgba(133, 182, 255, 0.22);
}
.hero-stats > div:nth-child(4n + 1) strong { background-image: var(--g-sky); }
.hero-stats > div:nth-child(4n + 2) strong { background-image: var(--g-aqua); }
.hero-stats > div:nth-child(4n + 3) strong { background-image: var(--g-mint); }
.hero-stats > div:nth-child(4n + 4) strong { background-image: var(--g-sunset); }
.hero-stats > div strong {
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Breadcrumb bar picks up the page tint rather than sitting as a grey strip */
.breadcrumb a { color: var(--c-cyan); }

/* --- Blog cards: cycle the category tag hue, warm the read-more --- */
.post-card { position: relative; overflow: hidden; }
.post-card::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  opacity: 0; transition: opacity 0.28s ease;
}
.post-card:nth-child(6n + 1) .tag, .post-card:nth-child(6n + 1)::after { --tg: var(--g-sky); }
.post-card:nth-child(6n + 2) .tag, .post-card:nth-child(6n + 2)::after { --tg: var(--g-aqua); }
.post-card:nth-child(6n + 3) .tag, .post-card:nth-child(6n + 3)::after { --tg: var(--g-sunset); }
.post-card:nth-child(6n + 4) .tag, .post-card:nth-child(6n + 4)::after { --tg: var(--g-violet); }
.post-card:nth-child(6n + 5) .tag, .post-card:nth-child(6n + 5)::after { --tg: var(--g-mint); }
.post-card:nth-child(6n + 6) .tag, .post-card:nth-child(6n + 6)::after { --tg: var(--g-rose); }
.post-card::after { background: var(--tg, var(--g-sky)); }
.post-card:hover::after { opacity: 1; }
.post-card .tag {
  background: var(--tg, var(--g-sky));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  border-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(133, 182, 255, 0.30);
}
.post-card .read-more { color: var(--c-cyan); }


/* ============================================================
   LIGHT SECTIONS — inverted bands
   Alternating light bands break up the dark blue and give the
   page a rhythm. Everything inside inverts: text, cards, pills,
   borders and secondary buttons. Primary CTAs stay orange.
   ============================================================ */

:root {
  --lt-bg:       #F1F6FF;
  --lt-bg-2:     #E2ECFD;
  --lt-surface:  #FFFFFF;
  --lt-raise:    #F7FAFF;
  --lt-heading:  #06183C;
  --lt-text:     #3A4C74;
  --lt-muted:    #6E7FA4;
  --lt-border:   #D3E0F7;
  --lt-border-2: #B9CCEE;
  --lt-brand:    #003DA5;
  --lt-brand-2:  #0A56D6;
  --lt-shadow:   0 18px 44px -26px rgba(4, 26, 74, 0.35);
  --lt-shadow-2: 0 26px 60px -28px rgba(4, 26, 74, 0.42);
}

.section.is-light {
  /* Flat base, not a vertical ramp — two light sections in a row must
     merge into one band instead of showing a seam at the join. */
  background:
    radial-gradient(760px 420px at 10% 12%, rgba(52, 217, 236, 0.13), transparent 60%),
    radial-gradient(820px 460px at 92% 88%, rgba(0, 61, 165, 0.08), transparent 62%),
    var(--lt-bg);
}
.section.section-light { color: var(--lt-text); }
/* Hairline where a light band meets a dark one */
/* Dark <-> light boundaries are blended, never ruled.
   Each transition is painted by the section that comes *after* it, so two
   light bands in a row (comparison -> devices) still merge with no seam. */
.section:not(.is-light) + .is-light::before,
.is-light + .section:not(.is-light)::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: clamp(70px, 9vw, 130px);
  pointer-events: none;
  z-index: 0;
}
/* dark -> light: the blue bleeds down and dissolves into the light band */
.section:not(.is-light) + .is-light::before {
  background: linear-gradient(180deg,
    rgba(0, 27, 82, 0.55) 0%,
    rgba(0, 33, 99, 0.22) 45%,
    rgba(0, 33, 99, 0) 100%);
}
/* light -> dark: a short, low-opacity lift so the join reads as a fade
   rather than a milky haze over the top of the blue section */
.is-light + .section:not(.is-light)::before {
  height: clamp(48px, 6vw, 90px);
  background: linear-gradient(180deg,
    rgba(226, 238, 255, 0.24) 0%,
    rgba(210, 226, 252, 0.07) 40%,
    rgba(200, 220, 250, 0) 100%);
}
/* Keep content clear of the blend zone */
.section:not(.is-light) + .is-light > .container,
.is-light + .section:not(.is-light) > .container { position: relative; z-index: 1; }
/* .vod's poster wall is positioned absolute against the *section*, not its
   .container, so it can bleed edge to edge. The rule above forces
   position:relative onto any .container that follows a light section —
   when .vod lands there (as it now does on the homepage), that
   accidentally turns its .container into the containing block instead,
   trapping the posters inside the 1180px shell instead of the full-width
   section. #films-series is the one place this always needs to lose. */
#films-series > .container { position: static; z-index: auto; }

.section-light h1, .section-light h2, .section-light h3,
.section-light h4, .section-light .section-title,
.section-light strong, .section-light b { color: var(--lt-heading); }
.section-light p, .section-light li, .section-light span,
.section-light .section-header p { color: var(--lt-text); }
.section-light .plan-sub, .section-light .plan-note,
.section-light .guarantee-line, .section-light .t-meta span,
.section-light .stat-label, .section-light small { color: var(--lt-muted); }

/* Eyebrow: solid brand blue on a light chip */
.section-light .eyebrow {
  background: rgba(0, 61, 165, 0.07);
  -webkit-text-fill-color: var(--lt-brand);
  color: var(--lt-brand);
  box-shadow: inset 0 0 0 1px rgba(0, 61, 165, 0.22);
}
.section-light .text-gradient {
  background: linear-gradient(120deg, var(--lt-brand-2), #12A8C2 70%, var(--lt-brand));
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Cards invert to white with a soft lift */
.section-light .feature-grid article,
.section-light .trust-card,
.section-light .testimonials-grid article,
.section-light .device-tile,
.section-light .comparison-table > div,
.section-light .post-card,
.section-light .plan,
.section-light .hero-panel-box,
.section-light details.faq-item {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow);
  backdrop-filter: none;
}
.section-light .feature-grid article:hover,
.section-light .trust-card:hover,
.section-light .post-card:hover,
.section-light .device-tile:hover {
  box-shadow: var(--lt-shadow-2);
  border-color: var(--lt-border-2);
}

/* Pills and badges */
.section-light .badge-grid span, .section-light .channel-badges span,
.section-light .device-grid span, .section-light .payment-badges span,
.section-light .trust-badges span, .section-light .q4k-badges span,
.section-light .plan-permonth, .section-light .cd-box {
  background: var(--lt-raise);
  border-color: var(--lt-border);
  color: var(--lt-text);
}

/* Links */
.section-light a:not(.button) { color: var(--lt-brand-2); }
.section-light a:not(.button):hover { color: var(--lt-brand); }
.section-light .read-more { color: var(--lt-brand-2); }

/* Buttons: primary keeps its orange, secondary/outline go brand blue */
.section-light .button-secondary {
  background: var(--lt-brand);
  border: 1px solid var(--lt-brand);
  color: #fff;
}
.section-light .button-secondary:hover {
  background: var(--lt-brand-2);
  border-color: var(--lt-brand-2);
  box-shadow: 0 16px 38px -20px rgba(0, 61, 165, 0.65);
}
.section-light .button-outline {
  background: transparent;
  border: 1px solid var(--lt-border-2);
  color: var(--lt-brand);
}
.section-light .button-outline:hover { border-color: var(--lt-brand); background: rgba(0, 61, 165, 0.05); }

/* Pricing inside a light band */
.section-light .plan-label { color: var(--lt-heading); }
.section-light .plan-price { -webkit-text-fill-color: initial; color: var(--lt-heading); background: none; }
.section-light .plan[id="3months"] .plan-price { color: #0E90A8; }
.section-light .plan[id="6months"] .plan-price { color: #E2560A; }
.section-light .plan.is-best .plan-price { color: #12945A; }
.section-light .plan.is-lifetime .plan-price { color: #6B4BE0; }
.section-light .plan.is-popular { border-color: rgba(226, 86, 10, 0.42); }
.section-light .plan.is-best { border-color: rgba(18, 148, 90, 0.45); background: linear-gradient(180deg, rgba(18, 148, 90, 0.05), #fff 40%); }
.section-light .plan.is-lifetime { border-color: rgba(107, 75, 224, 0.38); background: linear-gradient(180deg, rgba(107, 75, 224, 0.05), #fff 40%); }
.section-light .plan[id="3months"] .plan-feat-head { color: #0E90A8; }
.section-light .plan.is-popular .plan-feat-head { color: #E2560A; }
.section-light .plan.is-best .plan-feat-head { color: #12945A; }
.section-light .plan.is-lifetime .plan-feat-head { color: #6B4BE0; }
.section-light .plan-feats li { color: var(--lt-text); }
.section-light .plan-feats li::before { color: var(--lt-brand-2); }
.section-light .plan[id="3months"] .plan-feats li::before { color: #0E90A8; }
.section-light .plan.is-popular .plan-feats li::before { color: #E2560A; }
.section-light .plan.is-best .plan-feats li::before { color: #12945A; }
.section-light .plan.is-lifetime .plan-feats li::before { color: #6B4BE0; }
.section-light .plan-divider { border-color: var(--lt-border); }
.section-light .plan-badge.pop  { background: #E2560A; color: #fff; border-color: #E2560A; }
.section-light .plan-badge.best { background: #12945A; color: #fff; border-color: #12945A; }
.section-light .plan-badge.life { background: #6B4BE0; color: #fff; border-color: #6B4BE0; }
.section-light .plan.is-best .plan-cta .button { background: linear-gradient(135deg, #12945A, #2FBE7C); }
.section-light .note-box.premium {
  background: linear-gradient(150deg, #ffffff, #F2F7FF);
  border: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow-2);
}
.section-light .note-box.premium::before { display: none; }
.section-light .cd-box strong, .section-light .cd-num { color: #E2560A; }

/* Comparison inside a light band */
.section-light .comparison-table .highlight {
  background: linear-gradient(180deg, #FFF3EA, #fff 60%);
  border-color: rgba(226, 86, 10, 0.4);
  box-shadow: 0 22px 50px -30px rgba(226, 86, 10, 0.5);
}
.section-light .comparison-table .highlight h3 { color: #E2560A; }
.section-light .comparison-table .highlight p {
  background: none; -webkit-text-fill-color: initial; color: #E2560A;
}
.section-light .savings-highlight, .section-light .price-highlight { color: var(--lt-brand); }

/* Testimonials inside a light band */
.section-light .testimonials-grid article::before { color: #F2A61E; }
.section-light .t-head { border-top-color: var(--lt-border); }
.section-light .t-meta strong { color: var(--lt-heading); }
.section-light .stats-card .stat-value { color: transparent; -webkit-text-fill-color: transparent; }
.section-light .stats-card .stat-label { color: #b8bfd4; }

/* Blog cards inside a light band */
.section-light .post-card .tag {
  -webkit-text-fill-color: var(--lt-brand);
  color: var(--lt-brand);
  background: rgba(0, 61, 165, 0.07);
  box-shadow: inset 0 0 0 1px rgba(0, 61, 165, 0.2);
}

/* Devices / trust icons keep their gradients but need a light chip behind */
.section-light .device-tile svg { stroke: var(--lt-brand-2); }
.section-light .icon-badge { box-shadow: 0 12px 26px -14px rgba(4, 26, 74, 0.5); }

/* FAQ inside a light band */
.section-light details.faq-item summary { color: var(--lt-heading); }
.section-light details.faq-item summary::after { color: var(--lt-brand-2); }
.section-light details.faq-item[open] {
  border-color: rgba(0, 61, 165, 0.3);
  box-shadow: 0 20px 46px -30px rgba(0, 61, 165, 0.45);
}

/* Hero stats / panels inside a light band */
.section-light .hero-stats > div {
  background: var(--lt-surface); border-color: var(--lt-border);
}
.section-light .hero-stats > div strong {
  background: none; -webkit-text-fill-color: initial; color: var(--lt-brand);
}

/* Component-level colours (e.g. `.feature-grid article p`) outrank the
   generic `.section-light p`, so restate them with the section element
   in the selector to raise specificity. */
.section.section-light p,
.section.section-light li,
.section.section-light .feature-grid article p,
.section.section-light .trust-card p,
.section.section-light .testimonials-grid p,
.section.section-light .post-card p,
.section.section-light details.faq-item p,
.section.section-light .device-tile span,
.section.section-light .section-header p,
.section.section-light .comparison-table h3 { color: var(--lt-text); }

.section.section-light h1, .section.section-light h2,
.section.section-light h3, .section.section-light h4,
.section.section-light .section-title,
.section.section-light .feature-grid article h3,
.section.section-light .trust-card h3,
.section.section-light .post-card h3,
.section.section-light .plan-label,
.section.section-light .t-meta strong { color: var(--lt-heading); }

.section.section-light .trust-card p strong,
.section.section-light .feature-grid article p strong,
.section.section-light p strong { color: var(--lt-heading); }

.section.section-light .plan-sub,
.section.section-light .plan-note,
.section.section-light .guarantee-line,
.section.section-light .t-meta span,
.section.section-light .currency-note,
.section.section-light .cd-box span { color: var(--lt-muted); }

.section.section-light .comparison-table > div p { color: var(--lt-heading); }
.section.section-light .comparison-table .highlight p { color: #E2560A; }
.section.section-light .testimonials-grid p { font-style: italic; }

/* Odds and ends that were still styled for a dark backdrop */
.section.section-light .cur-chip {
  background: #EDF3FF;
  border: 1px solid var(--lt-border);
  color: var(--lt-brand);
  box-shadow: none;
}
.section.section-light .cur-chip:last-child { color: var(--lt-brand-2); }
.section.section-light .note-icon {
  background: linear-gradient(150deg, #E4EDFF, #D3E1FB);
  border-color: var(--lt-border);
}
.section.section-light .note-lead { color: var(--lt-heading); }
.section.section-light .note-lead strong { color: var(--lt-brand-2); }
.section.section-light .note-sub { color: var(--lt-text); }

.section.section-light .moneyback {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow);
}
.section.section-light .moneyback h3 { color: var(--lt-heading); }
.section.section-light .moneyback p,
.section.section-light .secure-line { color: var(--lt-text); }

.section.section-light .countdown-wrap > p,
.section.section-light .cd-label { color: var(--lt-heading); }
.section.section-light .cd-box {
  background: var(--lt-surface);
  border: 1px solid var(--lt-border);
  box-shadow: var(--lt-shadow);
}

/* Marquee tracks and rows inside a light band */
.section.section-light .league-track span,
.section.section-light .device-track .device-tile {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}
.section.section-light .sport-feat {
  background: var(--lt-surface);
  border-color: var(--lt-border);
  color: var(--lt-text);
}
.section.section-light .sport-feat strong { color: var(--lt-heading); }

/* Sections that put the eyebrow, heading and body straight into the
   container (no .section-header wrapper) had a centred eyebrow above
   left-aligned copy. Keep the whole block centred. */
.section > .container > .eyebrow ~ h2,
.section > .container > .eyebrow ~ h3,
.section > .container > .eyebrow ~ p { text-align: center; }
.section > .container > .eyebrow ~ p { max-width: 760px; margin-left: auto; margin-right: auto; }
.section > .container > .eyebrow ~ .badge-grid,
.section > .container > .eyebrow ~ .device-grid,
.section > .container > .eyebrow ~ .channel-badges,
.section > .container > .eyebrow ~ .payment-badges { justify-content: center; }


/* ============================================================
   MOTION & PERFORMANCE POLISH
   ============================================================ */

/* Staggered reveal inside grids — reads as designed rather than random.
   Delays are small so nothing ever feels like it is arriving late. */
.feature-grid > .reveal:nth-child(2),
.trust-grid > .reveal:nth-child(2),
.testimonials-grid > .reveal:nth-child(2),
.plans > .reveal:nth-child(2) { transition-delay: 0.06s; }
.feature-grid > .reveal:nth-child(3),
.trust-grid > .reveal:nth-child(3),
.testimonials-grid > .reveal:nth-child(3),
.plans > .reveal:nth-child(3) { transition-delay: 0.12s; }
.feature-grid > .reveal:nth-child(4),
.trust-grid > .reveal:nth-child(4),
.testimonials-grid > .reveal:nth-child(4),
.plans > .reveal:nth-child(4) { transition-delay: 0.18s; }
.feature-grid > .reveal:nth-child(n + 5),
.trust-grid > .reveal:nth-child(n + 5),
.testimonials-grid > .reveal:nth-child(n + 5) { transition-delay: 0.22s; }

/* Hover lift: transform + shadow only, both composited */
.feature-grid article, .trust-card, .post-card, .device-tile, .plan {
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.28s ease, border-color 0.28s ease;
}
.post-card:hover, .plan:hover { transform: translateY(-4px); }

/* Visible, on-brand focus ring for keyboard users */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 2px solid var(--c-cyan);
  outline-offset: 3px;
  border-radius: 6px;
}
.section-light a:focus-visible, .section-light button:focus-visible,
.section-light summary:focus-visible { outline-color: var(--lt-brand-2); }

/* Images fade in once decoded instead of popping in line by line */
img { background-color: rgba(255, 255, 255, 0.03); }
.section-light img { background-color: rgba(4, 26, 74, 0.05); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; }
  .scroll-progress { transition: none; }
}


/* ============================================================
   Light background, dark contents (pricing section)
   `.is-light` without `.section-light`: the band goes white but the
   plan cards, note box, countdown and money-back box keep their dark
   glass styling. Only the copy sitting directly on the background is
   re-coloured, otherwise it would be white on white.
   ============================================================ */
.is-light:not(.section-light) .section-header h2,
.is-light:not(.section-light) > .container > h2 { color: var(--lt-heading); }

.is-light:not(.section-light) .section-header p,
.is-light:not(.section-light) .countdown-wrap > p,
.is-light:not(.section-light) .guarantee-line,
.is-light:not(.section-light) .secure-line,
.is-light:not(.section-light) .currency-note { color: var(--lt-text); }

.is-light:not(.section-light) .countdown-wrap > p strong,
.is-light:not(.section-light) .section-header p strong { color: var(--lt-heading); }

.is-light:not(.section-light) > .container > .eyebrow {
  background: rgba(0, 61, 165, 0.07);
  -webkit-text-fill-color: var(--lt-brand);
  color: var(--lt-brand);
  box-shadow: inset 0 0 0 1px rgba(0, 61, 165, 0.22);
}

/* Dark cards need a warmer shadow to sit convincingly on white */
.is-light:not(.section-light) .plan,
.is-light:not(.section-light) .note-box.premium,
.is-light:not(.section-light) .moneyback,
.is-light:not(.section-light) .cd-box {
  box-shadow: 0 26px 60px -30px rgba(2, 20, 60, 0.55);
}
.is-light:not(.section-light) .plan.is-popular {
  box-shadow: 0 26px 60px -30px rgba(255, 106, 26, 0.55);
}
.is-light:not(.section-light) .plan.is-best {
  box-shadow: 0 26px 60px -30px rgba(18, 148, 90, 0.55);
}
.is-light:not(.section-light) .plan.is-lifetime {
  box-shadow: 0 26px 60px -30px rgba(107, 75, 224, 0.5);
}

/* These components are translucent by design — they borrow the dark page
   behind them. Over a light band they wash out and their white text
   disappears, so give them an explicit opaque navy base. */
.is-light:not(.section-light) .plan {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015)),
    #02245c;
  border-color: rgba(133, 182, 255, 0.20);
}
.is-light:not(.section-light) .plan.is-popular {
  background: linear-gradient(180deg, rgba(255, 106, 26, 0.15), rgba(255, 255, 255, 0.015)), #02245c;
}
.is-light:not(.section-light) .plan.is-best {
  background: linear-gradient(180deg, rgba(63, 221, 140, 0.14), rgba(255, 255, 255, 0.015)), #02245c;
}
.is-light:not(.section-light) .plan.is-lifetime {
  background: linear-gradient(180deg, rgba(169, 140, 255, 0.15), rgba(255, 255, 255, 0.015)), #02245c;
}
.is-light:not(.section-light) .cd-box {
  background: linear-gradient(160deg, rgba(255, 106, 26, 0.16), #02245c);
  border-color: rgba(255, 158, 69, 0.30);
}
.is-light:not(.section-light) .moneyback {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)), #02245c;
  border-color: rgba(133, 182, 255, 0.20);
}
.is-light:not(.section-light) .plan-permonth,
.is-light:not(.section-light) .cur-chip {
  background: rgba(255, 255, 255, 0.10);
}

/* Blog index cards: thumbnail images bleeding to the card's rounded top */
.post-card .post-thumb {
  display: block;
  margin: -1.6rem -1.6rem 1rem;
  width: calc(100% + 3.2rem);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.post-card .post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }


/* ============================================================
   VOD showcase — films & series poster wall
   Poster marquee is CSS-only (composited transform, same pattern
   as .device-track) so it costs nothing to scroll past.
   ============================================================ */
.vod {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 10% 15%, rgba(52, 217, 236, 0.16), transparent 62%),
    radial-gradient(800px 480px at 90% 85%, rgba(169, 140, 255, 0.14), transparent 62%),
    linear-gradient(160deg, #01235c 0%, #011a40 55%, #010f28 100%);
}
.vod-layout { display: flex; flex-direction: column; gap: 1.8rem; }
.vod-head { max-width: 640px; }
.vod-head h2 {
  font-size: clamp(1.85rem, 4.2vw, 2.85rem);
  line-height: 1.08;
  margin: 0;
}
.vod-kicker { display: block; font-size: 0.6em; margin-top: 0.4rem; }
.vod-body { max-width: 620px; }
.vod-body > p {
  color: var(--text-secondary);
  font-size: 1.03rem;
  line-height: 1.75;
  margin: 0 0 1.6rem;
}
.vod-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.3rem; }
.vod-price { color: var(--text-muted); font-size: 0.95rem; }
.vod-price strong {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--c-amber);
}
.vod-badges { margin-top: 1.5rem; }

/* --- poster wall --- */
.vod-posters { display: grid; gap: 0.85rem; }
.vod-row {
  overflow: hidden;
  /* Fixed-width fade, not a percentage of the row — a %-based fade
     shrinks with the row on narrow screens until it's slicing through
     a single poster instead of softening the edge. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.vod-track {
  display: flex;
  width: max-content;
  gap: 0.85rem;
  will-change: transform;
  animation: vod-scroll 90s linear infinite;
}
.vod-track-reverse { animation-direction: reverse; animation-duration: 112s; }
.vod-row:hover .vod-track { animation-play-state: paused; }
.vod-track picture { display: block; flex: 0 0 auto; }
.vod-track img {
  display: block;
  width: clamp(92px, 11vw, 158px);
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.95);
}
@keyframes vod-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Desktop: posters become the full-bleed backdrop, copy sits over them */
@media (min-width: 992px) {
  .vod { padding-block: clamp(4.5rem, 7vw, 7rem); }
  .vod-layout { gap: 1.5rem; }
  .vod-posters {
    position: absolute;
    inset: 0;
    z-index: 0;
    align-content: center;
    gap: 1rem;
  }
  /* Bigger posters on desktop so the wall fills the band edge to edge */
  .vod-track img { width: clamp(150px, 13vw, 188px); }
  /* Desktop posters run up to 188px — the 56px fade used on smaller
     layouts was too narrow to read as a fade at this size and looked
     like a hard-cropped edge instead. Widen it to roughly one poster
     so the outermost poster visibly dissolves rather than snapping
     from transparent to opaque. */
  .vod-row {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 190px, #000 calc(100% - 190px), transparent);
    mask-image: linear-gradient(90deg, transparent, #000 190px, #000 calc(100% - 190px), transparent);
  }
  /* Scrim keeps the copy readable over the artwork */
  .vod-posters::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      rgba(1, 20, 50, 0.97) 0%,
      rgba(1, 23, 58, 0.90) 38%,
      rgba(1, 23, 58, 0.48) 62%,
      rgba(1, 23, 58, 0.10) 100%
    );
  }
  .vod-head, .vod-body { position: relative; z-index: 2; max-width: 600px; }
}

@media (prefers-reduced-motion: reduce) {
  .vod-track { animation: none; }
}

/* The poster wall (z-index 0) would otherwise paint over the section-boundary
   fade, leaving a hard edge where a light band meets this section. Lift the
   fade above the posters but keep it under the copy. */
.is-light + .vod::before,
.section:not(.is-light) + .vod::before { z-index: 1; }