/* =====================================================
   IPTV UK Pro — Design System v3
   Apple HIG principles applied to existing identity.
   Palette, fonts and type scale preserved.
   ===================================================== */

/* ── DESIGN TOKENS (locked, documented) ──────────────

  SPACING SCALE (4px base, multiples of 4)
  --sp-1:  4px    micro gap (icon + label)
  --sp-2:  8px    tight (list items, inline badges)
  --sp-3:  12px   compact (card inner gap)
  --sp-4:  16px   default (paragraph gap, form field)
  --sp-5:  24px   loose (card padding, section sub-gap)
  --sp-6:  32px   medium section gap
  --sp-7:  48px   section padding small
  --sp-8:  64px   section padding default
  --sp-9:  96px   section padding hero

  CORNER RADIUS (single value everywhere)
  --r:     12px   all cards, buttons, inputs, modals
  --r-sm:   6px   badges, chips, small elements only
  --r-lg:  20px   large hero image, large feature panels

  ELEVATION (3 levels only)
  --elev-0: none                              flat/surface
  --elev-1: 0 1px 4px rgba(0,0,0,.28),        card resting
            0 0 0 1px rgba(255,255,255,.04)
  --elev-2: 0 4px 16px rgba(0,0,0,.40),       card hover
            0 0 0 1px rgba(200,242,58,.14)
  --elev-3: 0 8px 32px rgba(0,0,0,.56),       nav/modal
            0 0 0 1px rgba(255,255,255,.06)

  TRANSITION (single easing, two durations)
  --ease:   cubic-bezier(.25,.46,.45,.94)   ease-out
  --t-fast: 160ms   press/hover state response
  --t-ui:   220ms   layout/position transitions

  TYPE SCALE (locked, no overrides permitted)
  --ts-1:  0.6875rem  (11px)  caption, badge text
  --ts-2:  0.75rem    (12px)  label, meta small
  --ts-3:  0.875rem   (14px)  secondary body, card copy
  --ts-4:  1rem       (16px)  body default
  --ts-5:  1.125rem   (18px)  lead / body-lg
  --ts-6:  1.375rem   (22px)  h4 / card heading
  --ts-7:  clamp(1.25rem, 2vw, 1.75rem)    h3
  --ts-8:  clamp(1.625rem, 3vw, 2.5rem)    h2
  --ts-9:  clamp(2rem, 4.5vw, 3.5rem)      h1
  --ts-10: clamp(3rem, 7vw, 6.5rem)        display / stat

  ICON STROKE WIDTH: 1.75px everywhere, no exceptions.

─────────────────────────────────────────────────────── */

:root {
  /* Palette — unchanged */
  --ink:      #0E1117;
  --ink2:     #111827;
  --surf:     #1A2235;
  --surf2:    #1E293B;
  --bdr:      #253347;
  --bdr-sub:  rgba(255,255,255,.06);  /* subtle divider */
  --lime:     #C8F23A;
  --lime2:    #A8D21A;
  --lime-bg:  rgba(200,242,58,.07);
  --lime-bd:  rgba(200,242,58,.16);
  --lime-fo:  rgba(200,242,58,.40);   /* focus ring */
  --body:     #F5F0E8;
  --muted:    #9BAAC8;
  --dim:      #526070;
  --wa:       #25D366;
  --wa2:      #1EAF54;
  --danger:   #E84545;

  /* Typography — unchanged */
  --serif: 'DM Serif Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, sans-serif;
  --mono:  'Space Mono', monospace;

  /* Spacing scale */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;

  /* Corner radius */
  --r:    12px;
  --r-sm:  6px;
  --r-lg: 20px;

  /* Elevation */
  --elev-1: 0 1px 4px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04);
  --elev-2: 0 4px 16px rgba(0,0,0,.40), 0 0 0 1px rgba(200,242,58,.14);
  --elev-3: 0 8px 32px rgba(0,0,0,.56), 0 0 0 1px rgba(255,255,255,.06);

  /* Motion */
  --ease:   cubic-bezier(.25,.46,.45,.94);
  --t-fast: 160ms;
  --t-ui:   220ms;

  /* Type scale */
  --ts-1:  0.6875rem;
  --ts-2:  0.75rem;
  --ts-3:  0.875rem;
  --ts-4:  1rem;
  --ts-5:  1.125rem;
  --ts-6:  1.375rem;
  --ts-7:  clamp(1.25rem, 2vw, 1.75rem);
  --ts-8:  clamp(1.625rem, 3vw, 2.5rem);
  --ts-9:  clamp(2rem, 4.5vw, 3.5rem);
  --ts-10: clamp(3rem, 7vw, 6.5rem);

  /* Layout */
  --max: 1200px;
  --max-sm: 800px;

  /* Legacy aliases (keep builder happy) */
  --r4:  var(--r-sm);
  --r8:  var(--r);
  --r12: var(--r);
  --r16: var(--r);
  --r24: var(--r-lg);
  --t:   var(--t-ui);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--ts-4);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, textarea, select { font-family: inherit; }

/* ── LAYOUT ── */
.wrap    { max-width: var(--max);    margin-inline: auto; padding-inline: var(--sp-5); }
.wrap-sm { max-width: var(--max-sm); margin-inline: auto; padding-inline: var(--sp-5); }
.section    { padding-block: var(--sp-8); }
.section-sm { padding-block: var(--sp-7); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ── TYPOGRAPHY — strict scale, zero exceptions ── */
h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--body);
  line-height: 1.15;
  letter-spacing: -.015em;
  overflow-wrap: break-word;
}
h1 { font-size: var(--ts-9); }
h2 { font-size: var(--ts-8); }
h3 { font-size: var(--ts-7); }
h4 { font-size: var(--ts-6); font-family: var(--sans); font-weight: 600; letter-spacing: -.01em; }
p  { color: var(--muted); line-height: 1.75; font-size: var(--ts-4); max-width: 68ch; }
p + p { margin-top: 1em; }
strong { color: var(--body); font-weight: 600; }
small, .text-sm { font-size: var(--ts-2); color: var(--muted); }

/* ── SECTION LABEL — used sparingly, not on every heading ── */
.label {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--ts-2);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lime);
  margin-bottom: var(--sp-4);
}

/* ── FOCUS RING — visible, on-brand, not browser default ── */
:focus-visible {
  outline: 2px solid var(--lime-fo);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
/* Remove focus ring on mouse interaction only */
:focus:not(:focus-visible) { outline: none; }

/* ── BUTTONS — identical corner-radius, padding, weight site-wide ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 13px var(--sp-5);
  border-radius: var(--r);
  font-family: var(--sans);
  font-size: var(--ts-3);
  font-weight: 600;
  line-height: 1;
  min-height: 44px;       /* HIG minimum touch target */
  min-width: 44px;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition:
    background var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease),
    transform var(--t-fast) var(--ease),
    opacity var(--t-fast) var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
/* Press state — physical feel */
.btn:active { transform: scale(.97); }

/* Lime — primary CTA. One per section, not scattered. */
.btn-lime {
  background: var(--lime);
  color: var(--ink);
  border-color: var(--lime);
  font-weight: 700;
}
.btn-lime:hover { background: var(--lime2); border-color: var(--lime2); box-shadow: 0 0 0 4px var(--lime-bd); }

/* WhatsApp */
.btn-wa {
  background: var(--wa);
  color: #fff;
  border-color: var(--wa);
  font-weight: 700;
}
.btn-wa:hover { background: var(--wa2); border-color: var(--wa2); box-shadow: 0 0 0 4px rgba(37,211,102,.20); }

/* Ghost — secondary action, always visually subordinate */
.btn-ghost {
  background: transparent;
  color: var(--body);
  border-color: var(--bdr);
}
.btn-ghost:hover { border-color: var(--muted); background: rgba(255,255,255,.04); }

/* Size variants */
.btn-sm { padding: 9px var(--sp-4); font-size: var(--ts-2); min-height: 36px; }
.btn-lg { padding: 15px 30px; font-size: var(--ts-4); min-height: 52px; }
.btn-full { width: 100%; }

/* ── NAVIGATION ── */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(14,17,23,.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--bdr-sub);
  box-shadow: var(--elev-3);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  gap: var(--sp-5);
}
.nav-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--serif);
  font-size: var(--ts-5);
  color: var(--body);
  letter-spacing: -.02em;
}
.nav-logo-text span { color: var(--lime); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  justify-content: center;
}
.nav-links a {
  padding: 7px var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--ts-3);
  color: var(--muted);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.nav-links a:hover { color: var(--body); background: rgba(255,255,255,.06); }
.nav-links a.active { color: var(--body); }
.nav-cta { flex-shrink: 0; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: var(--sp-2);
  border-radius: var(--r-sm);
  transition: background var(--t-fast) var(--ease);
}
.hamburger:hover { background: rgba(255,255,255,.06); }
.hamburger span {
  display: block;
  width: 20px;
  height: 1.75px;
  background: var(--body);
  border-radius: 2px;
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
  transform-origin: center;
}
.hamburger.open span:nth-child(1) { transform: translateY(6.75px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-6.75px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  background: var(--ink2);
  border-bottom: 1px solid var(--bdr-sub);
  /* Full-height scroll in landscape */
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--ts-4);
  color: var(--muted);
  min-height: 44px;
  transition: color var(--t-fast), background var(--t-fast);
  border-bottom: 1px solid var(--bdr-sub);
}
.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a:hover { color: var(--body); background: rgba(255,255,255,.05); }

/* Prevent body scroll when nav open */
html.nav-open { overflow: hidden; }

/* ── CARDS — consistent everywhere ── */
.card {
  background: var(--surf);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r);
  padding: var(--sp-5);
  box-shadow: var(--elev-1);
  transition:
    box-shadow var(--t-ui) var(--ease),
    border-color var(--t-ui) var(--ease),
    transform var(--t-ui) var(--ease);
}
.card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
}
.card-lime { border-color: var(--lime-bd); }

/* ── PLAN CARDS ── */
.plan-card {
  background: var(--surf);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.plan-card:hover {
  box-shadow: var(--elev-2);
  transform: translateY(-2px);
}
.plan-card.featured {
  border-color: var(--lime-bd);
  background: linear-gradient(160deg, rgba(200,242,58,.05) 0%, var(--surf) 50%);
  box-shadow: 0 0 0 1px rgba(200,242,58,.22), 0 8px 32px rgba(0,0,0,.4);
}
.plan-name {
  font-family: var(--sans);
  font-size: var(--ts-2);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.plan-price {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--body);
  line-height: 1;
}
.plan-price sup { font-size: var(--ts-5); vertical-align: top; margin-top: .3em; }
.plan-once { font-size: var(--ts-1); color: var(--muted); margin-top: var(--sp-1); line-height: 1.5; }
.plan-feat { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.plan-feat li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--ts-3);
  color: var(--body);
  line-height: 1.4;
}
/* Consistent icon stroke */
.plan-feat li svg { flex-shrink: 0; color: var(--lime); stroke-width: 1.75; }

/* ── CHIP / BADGE ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 4px var(--sp-3);
  background: var(--lime-bg);
  border: 1px solid var(--lime-bd);
  border-radius: var(--r-sm);
  font-family: var(--sans);
  font-size: var(--ts-2);
  font-weight: 700;
  color: var(--lime);
  letter-spacing: .04em;
}

/* ── FEATURE GRID ── */
.feat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-4);
}
.feat-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--surf);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r);
  box-shadow: var(--elev-1);
  transition: border-color var(--t-ui) var(--ease);
}
.feat-item:hover { border-color: var(--lime-bd); }
.feat-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--lime-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--lime);
}
/* Consistent icon stroke in features */
.feat-icon svg { stroke-width: 1.75; }
.feat-item h4 { margin-bottom: var(--sp-1); font-size: var(--ts-5); }
.feat-item p { font-size: var(--ts-3); max-width: none; }

/* ── TRUST STRIP ── */
.trust-strip {
  background: var(--ink2);
  border-block: 1px solid var(--bdr-sub);
  padding-block: var(--sp-4);
}
.trust-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--ts-3);
  color: var(--muted);
}
.trust-item svg { stroke-width: 1.75; }
.trust-item strong { color: var(--body); font-size: var(--ts-3); }

/* ── STATS — display numbers ── */
.stat-num {
  font-family: var(--serif);
  font-size: var(--ts-10);
  font-weight: 400;
  color: var(--body);
  line-height: .88;
}
.stat-num .lime { color: var(--lime); }
.stat-label {
  font-size: var(--ts-2);
  color: var(--muted);
  margin-top: var(--sp-2);
  line-height: 1.55;
  max-width: 22ch;
}

/* ── HERO ── */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--sp-9) var(--sp-8);
  display: flex;
  align-items: center;
  min-height: 600px;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 65% 50%, rgba(200,242,58,.04) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 85%, rgba(200,242,58,.03) 0%, transparent 50%);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  position: relative;
  width: 100%;
}
.hero-left { max-width: 580px; }
.hero-right { position: relative; }
.hero-img-wrap {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--elev-3);
}
.hero-img-wrap img {
  width: 100%;
  height: 440px;
  object-fit: cover;
  display: block;
}
.hero-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(14,17,23,.25) 0%, transparent 55%);
  border-radius: var(--r-lg);
  pointer-events: none;
}
/* Hero float card — single animated element, purposeful */
.hero-float {
  position: absolute;
  bottom: calc(-1 * var(--sp-4));
  left: calc(-1 * var(--sp-5));
  background: var(--surf2);
  border: 1px solid var(--lime-bd);
  border-radius: var(--r);
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  box-shadow: var(--elev-3);
  /* Subtle float — one motion moment */
  animation: hero-float 5s var(--ease) infinite;
}
@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.hero-float-num { font-family: var(--mono); font-size: var(--ts-6); font-weight: 700; color: var(--lime); line-height: 1; }
.hero-float-txt { font-size: var(--ts-2); color: var(--muted); line-height: 1.4; }
.hero-h1 { margin-bottom: var(--sp-5); }
.hero-desc { font-size: var(--ts-4); color: var(--muted); margin-bottom: var(--sp-6); max-width: 52ch; }
.hero-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.hero-trust { display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap; }
.hero-trust-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--ts-2); color: var(--muted); }
.hero-trust-item svg { color: var(--lime); stroke-width: 1.75; }

/* ── HOW IT WORKS ── */
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
.hiw-step {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r);
  box-shadow: var(--elev-1);
}
.hiw-num {
  font-family: var(--mono);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  color: var(--lime-bd);
  line-height: 1;
  margin-bottom: var(--sp-4);
}
.hiw-step h3 { margin-bottom: var(--sp-2); }
.hiw-step p { font-size: var(--ts-3); line-height: 1.75; }

/* ── COMPARISON TABLE ── */
.compare-table { width: 100%; border-collapse: collapse; }
.compare-table th, .compare-table td {
  padding: var(--sp-4) var(--sp-4);
  text-align: left;
  font-size: var(--ts-3);
  border-bottom: 1px solid var(--bdr-sub);
}
.compare-table th {
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--ts-2);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-block: var(--sp-4);
}
.compare-table td { color: var(--body); }
.compare-table td:nth-child(2) { color: var(--lime); font-weight: 600; }
.compare-table td:nth-child(3) { color: var(--muted); }
.compare-table tr:last-child td { border-bottom: none; }

/* ── TESTIMONIALS ── */
.testi-card {
  background: var(--surf);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t-ui) var(--ease);
}
.testi-card:hover { box-shadow: var(--elev-2); }
.testi-stars { color: var(--lime); letter-spacing: 2px; font-size: var(--ts-4); }
.testi-text { font-size: var(--ts-4); color: var(--body); line-height: 1.75; font-style: italic; flex: 1; }
.testi-author { display: flex; align-items: center; gap: var(--sp-3); }
.testi-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surf2);
  overflow: hidden;
  flex-shrink: 0;
}
.testi-name { font-size: var(--ts-3); font-weight: 600; color: var(--body); }
.testi-meta { font-size: var(--ts-2); color: var(--muted); line-height: 1.5; }

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid var(--bdr-sub); }
.faq-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) 0;
  text-align: left;
  font-family: var(--sans);
  font-size: var(--ts-4);
  font-weight: 600;
  color: var(--body);
  background: none;
  border: none;
  cursor: pointer;
  min-height: 44px;
}
.faq-icon { flex-shrink: 0; color: var(--lime); transition: transform 220ms var(--ease); stroke-width: 1.75; }
.faq-btn[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.faq-body { max-height: 0; overflow: hidden; transition: max-height 320ms var(--ease); }
.faq-inner { padding: var(--sp-1) 0 var(--sp-5); font-size: var(--ts-3); color: var(--muted); line-height: 1.8; }
.faq-inner a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }

/* ── BLOG CARDS ── */
.blog-card {
  background: var(--surf);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.blog-card:hover { box-shadow: var(--elev-2); transform: translateY(-2px); border-color: var(--lime-bd); }
.blog-thumb { aspect-ratio: 16/9; overflow: hidden; }
.blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.blog-cat { font-size: var(--ts-1); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lime); }
.blog-title { font-family: var(--serif); font-size: var(--ts-6); line-height: 1.28; color: var(--body); }
.blog-excerpt { font-size: var(--ts-3); color: var(--muted); flex: 1; }
.blog-link { font-size: var(--ts-3); color: var(--lime); font-weight: 600; margin-top: auto; display: inline-flex; align-items: center; gap: var(--sp-1); }
.blog-link svg { stroke-width: 1.75; }

/* ── DEVICE CARDS ── */
.device-card {
  background: var(--surf);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  text-align: center;
  box-shadow: var(--elev-1);
  transition: box-shadow var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease), transform var(--t-ui) var(--ease);
}
.device-card:hover { box-shadow: var(--elev-2); border-color: var(--lime-bd); transform: translateY(-2px); }
.device-img-wrap { height: 80px; display: flex; align-items: center; justify-content: center; }
.device-img-wrap img { max-height: 80px; object-fit: contain; }
.device-card h4 { font-family: var(--sans); font-size: var(--ts-4); font-weight: 700; color: var(--body); }
.device-card p { font-size: var(--ts-3); color: var(--muted); max-width: none; }

/* ── CHANNEL TILES ── */
.channel-tile {
  aspect-ratio: 16/9;
  border-radius: var(--r);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--sp-4);
  transition: transform var(--t-ui) var(--ease);
  box-shadow: var(--elev-1);
}
.channel-tile:hover { transform: scale(1.02); }
.channel-tile-label {
  position: relative;
  z-index: 1;
  font-family: var(--sans);
  font-weight: 700;
  font-size: var(--ts-4);
  color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}

/* ── SPORT TAGS ── */
.sport-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-3);
  background: var(--surf);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r-sm);
  font-size: var(--ts-3);
  font-weight: 600;
  color: var(--muted);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  min-height: 44px;
}
.sport-tag:hover { border-color: var(--lime-bd); color: var(--lime); }
.sport-tag svg { stroke-width: 1.75; }

/* ── PAY BADGE ── */
.pay-badge {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surf);
  border: 1px solid var(--bdr-sub);
  border-radius: var(--r);
  font-size: var(--ts-3);
  color: var(--muted);
  box-shadow: var(--elev-1);
}
.pay-badge svg { color: var(--lime); flex-shrink: 0; stroke-width: 1.75; }

/* ── CTA BAND ── */
.cta-band {
  background: var(--ink2);
  border-block: 1px solid var(--bdr-sub);
  padding-block: var(--sp-8);
  text-align: center;
}
.cta-band h2 { margin-bottom: var(--sp-4); }
.cta-band p { color: var(--muted); font-size: var(--ts-4); max-width: 52ch; margin-inline: auto; margin-bottom: var(--sp-6); }
.cta-band-btns { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
.site-footer {
  background: var(--ink2);
  border-top: 1px solid var(--bdr-sub);
  padding-block: var(--sp-8) var(--sp-6);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}
.footer-brand p { font-size: var(--ts-3); color: var(--muted); margin-top: var(--sp-4); max-width: 36ch; line-height: 1.75; }
.footer-col h5 {
  font-family: var(--sans);
  font-size: var(--ts-2);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--sp-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col a { font-size: var(--ts-3); color: var(--muted); transition: color var(--t-fast) var(--ease); min-height: 36px; display: flex; align-items: center; }
.footer-col a:hover { color: var(--body); }
.footer-bottom {
  border-top: 1px solid var(--bdr-sub);
  padding-top: var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  font-size: var(--ts-2);
  color: var(--dim);
}
.footer-bottom a { color: var(--dim); min-height: 44px; display: inline-flex; align-items: center; }
.footer-bottom a:hover { color: var(--muted); }

/* ── SCROLL REVEAL — single orchestrated reveal per element ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
}
[data-reveal].revealed { opacity: 1; transform: none; }

/* ── UTILITY ── */
.text-center { text-align: center; }
.lime { color: var(--lime); }
.muted { color: var(--muted); }

/* Spacing utilities — sp scale only */
.mt-8  { margin-top: var(--sp-2); }  /* 8px */
.mt-12 { margin-top: var(--sp-3); }  /* 12px */
.mt-16 { margin-top: var(--sp-4); }  /* 16px */
.mt-24 { margin-top: var(--sp-5); }  /* 24px */
.mt-32 { margin-top: var(--sp-6); }  /* 32px */
.mt-48 { margin-top: var(--sp-7); }  /* 48px */
.mb-8  { margin-bottom: var(--sp-2); }
.mb-12 { margin-bottom: var(--sp-3); }
.mb-16 { margin-bottom: var(--sp-4); }
.mb-24 { margin-bottom: var(--sp-5); }
.mb-32 { margin-bottom: var(--sp-6); }
.mb-48 { margin-bottom: var(--sp-7); }

/* Grid helpers */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }
.grid-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-4); }
.grid-plan-all { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }

/* ── ACCESSIBILITY ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero-float { animation: none !important; }
}

/* ── RESPONSIVE — mobile first, then widen ──────────────────

  Breakpoints:
  -- below 1100px: wide tablet / narrow desktop
  -- below 900px:  tablet / hamburger nav
  -- below 700px:  large phone portrait
  -- below 520px:  standard phone portrait (375–414px)
  -- below 380px:  small phone (320–360px)
  -- landscape at <500px height: special treatment

──────────────────────────────────────────────────────────── */

/* Wide tablet / narrow desktop */
@media (max-width: 1100px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-plan-all { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet — hamburger, single column hero */
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero { padding-block: var(--sp-8) var(--sp-7); min-height: auto; }
  .hero-right { display: none; }
  .hero-left { max-width: 100%; }
  .hiw-steps { grid-template-columns: 1fr; }
  .section { padding-block: var(--sp-7); }
}

/* Large phone portrait */
@media (max-width: 700px) {
  .grid-3 { grid-template-columns: 1fr; }
  .grid-plan-all { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
  .trust-inner { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
}

/* Standard phone portrait — 375px to 520px */
@media (max-width: 520px) {
  :root {
    --sp-5: 20px;   /* tighten card padding slightly */
    --sp-8: 52px;   /* tighten section spacing */
    --sp-9: 64px;
  }
  .wrap, .wrap-sm { padding-inline: var(--sp-4); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .nav-inner { height: 56px; }
  .hero { padding-block: var(--sp-7) var(--sp-6); }
  .hero-trust { gap: var(--sp-3); }
  .hero-float { display: none; }   /* too cramped on small screens */
  .hiw-step { padding: var(--sp-5); }
  .plan-card { padding: var(--sp-5) var(--sp-4); }
  .feat-item { flex-direction: column; gap: var(--sp-3); }
}

/* Small phone — 320px to 374px */
@media (max-width: 374px) {
  :root { --sp-5: 16px; }
  .wrap, .wrap-sm { padding-inline: var(--sp-4); }
  .btn-lg { padding: 13px var(--sp-5); font-size: var(--ts-3); }
  .grid-5 { grid-template-columns: 1fr 1fr; }
}

/* ── LANDSCAPE PHONES (short viewport, ≤500px tall) ──
   These break most: nav too tall, hero forces scroll,
   mobile menu cuts off. Fix everything here.         */
@media (max-height: 500px) and (orientation: landscape) {
  /* Nav: reduce height so it doesn't eat the screen */
  .nav-inner { height: 48px; }
  .mobile-menu { max-height: calc(100dvh - 48px); }

  /* Hero: no min-height, compact padding */
  .hero {
    min-height: auto;
    padding-block: var(--sp-6) var(--sp-5);
    align-items: flex-start;
  }

  /* Show hero grid in landscape even on small devices */
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }

  /* Keep right col hidden — image not needed in tight landscape */
  .hero-right { display: none; }

  /* Compress section spacing */
  .section { padding-block: var(--sp-6); }
  .section-sm { padding-block: var(--sp-5); }

  /* Plan cards scroll horizontally in landscape */
  .grid-plan-all {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-2);  /* scrollbar breathing room */
  }
  .plan-card { scroll-snap-align: start; }

  /* HIW steps side-by-side in landscape */
  .hiw-steps { grid-template-columns: repeat(3, 1fr); }
}

/* Extra-short landscape (iPhone SE landscape = 375px tall) */
@media (max-height: 420px) and (orientation: landscape) {
  .hero { padding-block: var(--sp-5) var(--sp-4); }
  .nav-inner { height: 44px; }
  .mobile-menu { max-height: calc(100dvh - 44px); }
  .hero-ctas { flex-direction: row; gap: var(--sp-2); }
  .hero-ctas .btn { flex: 1; min-width: 0; }
}

/* ── ZERO HORIZONTAL SCROLL — global guarantee ── */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
.wrap, .wrap-sm { overflow-x: hidden; }

/* Overflow-x on any wide table/grid container */
.compare-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ══ MOBILE-FIRST RESPONSIVE GRID SYSTEM (appended) ══ */

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE LAYOUT CLASSES
   All grids defined here, never in inline styles.
   Mobile-first: single column by default, expand on wider screens.
───────────────────────────────────────────────────────────── */

/* Stats row: 4 columns on desktop, 2 on tablet, 1 on phone */
.grid-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-6);
  text-align: center;
}

/* Channel tiles: 5 across desktop, 3 tablet, 2 phone */
.grid-channels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

/* Sports: asymmetric 5fr/4fr desktop, stacked mobile */
.grid-sports {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: var(--sp-8);
  align-items: center;
}

/* Two equal columns — payment, contact, grid-2 generic */
.grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: start;
}

/* FAQ: 2fr label / 3fr content */
.grid-faq {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: var(--sp-8);
  align-items: start;
}

/* About / EEAT: 3fr content / 2fr sidebar */
.grid-about {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-8);
  align-items: start;
}

/* Device cards: image left + text right */
.grid-device-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-5);
  align-items: start;
}

/* Plan cards: 3 col desktop */
.grid-plan-all {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

/* Generic grids */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); }

/* Hero */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: center;
  position: relative;
  width: 100%;
}

/* Footer */
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--sp-8);
  margin-bottom: var(--sp-8);
}

/* HIW 3 steps */
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}

/* ─── TABLET (≤ 1100px) ─── */
@media (max-width: 1100px) {
  .grid-stats    { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); }
  .grid-channels { grid-template-columns: repeat(3, 1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
  .grid-plan-all { grid-template-columns: repeat(2, 1fr); }
  .grid-4        { grid-template-columns: repeat(2, 1fr); }
  .grid-5        { grid-template-columns: repeat(3, 1fr); }
}

/* ─── HAMBURGER / WIDE PHONE / SMALL TABLET (≤ 900px) ─── */
@media (max-width: 900px) {
  .hero-grid     { grid-template-columns: 1fr; }
  .hero-right    { display: none; }
  .hiw-steps     { grid-template-columns: 1fr; }
  .grid-sports   { grid-template-columns: 1fr; gap: var(--sp-5); }
  .grid-faq      { grid-template-columns: 1fr; gap: var(--sp-5); }
  .grid-about    { grid-template-columns: 1fr; gap: var(--sp-5); }
  .grid-2col     { grid-template-columns: 1fr; gap: var(--sp-4); }
  .grid-stats    { grid-template-columns: repeat(2, 1fr); }
  .grid-channels { grid-template-columns: repeat(3, 1fr); }
  .grid-plan-all { grid-template-columns: repeat(2, 1fr); }
  .grid-3        { grid-template-columns: 1fr; }
  .grid-4        { grid-template-columns: repeat(2, 1fr); }
  .grid-5        { grid-template-columns: repeat(2, 1fr); }
}

/* ─── PHONE PORTRAIT (≤ 600px) ─── */
@media (max-width: 600px) {
  .grid-stats    { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .grid-channels { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  .grid-plan-all { grid-template-columns: 1fr; }
  .grid-2        { grid-template-columns: 1fr; }
  .grid-3        { grid-template-columns: 1fr; }
  .grid-4        { grid-template-columns: 1fr; }
  .grid-5        { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hero-ctas     { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; width: 100%; }
  .hero-trust    { flex-direction: column; gap: var(--sp-3); }
  .trust-inner   { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}

/* ─── SMALL PHONE (≤ 390px) ─── */
@media (max-width: 390px) {
  .grid-stats    { grid-template-columns: repeat(2, 1fr); }
  .grid-channels { grid-template-columns: repeat(2, 1fr); }
  .grid-5        { grid-template-columns: repeat(2, 1fr); }
  .wrap, .wrap-sm { padding-inline: var(--sp-4); }
}

/* ─── DEVICE CARD ROWS (image + text) ─── */
@media (max-width: 600px) {
  .grid-device-row {
    grid-template-columns: 1fr;
  }
  .grid-device-row .device-img-box {
    display: flex;
    justify-content: center;
  }
}

/* ─── LANDSCAPE PHONES (≤ 500px tall) ─── */
@media (max-height: 500px) and (orientation: landscape) {
  .nav-inner  { height: 48px; }
  .mobile-menu { max-height: calc(100dvh - 48px); }
  .hero       { min-height: auto; padding-block: var(--sp-6) var(--sp-5); }
  .hero-grid  { grid-template-columns: 1fr; }
  .section    { padding-block: var(--sp-6); }
  .grid-plan-all {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--sp-2);
  }
  .plan-card  { scroll-snap-align: start; }
  .hiw-steps  { grid-template-columns: repeat(3, 1fr); }
}

/* ─── ZERO HORIZONTAL SCROLL GUARANTEE ─── */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}
/* Every container must stay within viewport */
.wrap, .wrap-sm, section, article, header, footer, main, nav {
  max-width: 100%;
  box-sizing: border-box;
}
/* Images always scale */
img {
  max-width: 100%;
  height: auto;
}
/* Tables scroll inside their box, never force page scroll */
.compare-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}