/* ===========================================================================
   Strong 8K Player — main stylesheet
   ---------------------------------------------------------------------------
   Performance rules this file sticks to, because an IPTV buyer on 4G judges the
   site in the first second:
     • Animation is limited to transform + opacity (compositor only, no layout).
     • backdrop-filter is used on the header and nowhere large — it is the most
       expensive property here.
     • Below-the-fold sections get content-visibility:auto so the browser can skip
       their layout until they approach the viewport.
     • Every motion is disabled wholesale under prefers-reduced-motion.
   The base tokens + header + hero shell are ALSO inlined in header.php so the first
   paint never waits for this file; the duplication is deliberate.
   =========================================================================== */

/* ── Self-hosted variable fonts ─────────────────────────────────────────── */
@font-face{font-family:Inter;src:url(/fonts/inter-var.woff2) format('woff2');
  font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:Sora;src:url(/fonts/sora-var.woff2) format('woff2');
  font-weight:100 800;font-display:swap;font-style:normal}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --bg:#04070E; --bg-2:#080D18; --bg-3:#0C1424;
  --ink:#EAF0FF; --ink-dim:#C3CFE8; --muted:#93A2C4;
  --line:rgba(140,170,255,.14); --line-2:rgba(140,170,255,.26);
  --brand:#3B82F6; --brand-2:#22D3EE; --accent:#A855F7; --gold:#FBBF24;
  --ok:#34D399;
  --grad:linear-gradient(100deg,#22D3EE 0%,#3B82F6 45%,#A855F7 100%);
  --grad-soft:linear-gradient(140deg,rgba(34,211,238,.16),rgba(168,85,247,.16));
  --radius:18px; --radius-lg:26px; --wrap:1180px;
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-glow:0 0 0 1px rgba(59,130,246,.25),0 30px 70px -30px rgba(59,130,246,.55);
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);
  font:400 16px/1.65 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:Sora,Inter,sans-serif;font-weight:700;letter-spacing:-.025em;margin:0}
::selection{background:rgba(59,130,246,.35);color:#fff}

/* The page ground: two fixed radial washes + a very faint grid. Fixed, so it costs
   nothing on scroll — the alternative (a huge animated gradient) repaints forever. */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(900px 600px at 12% -8%, rgba(34,211,238,.16), transparent 62%),
    radial-gradient(1000px 700px at 88% 4%, rgba(168,85,247,.16), transparent 60%),
    radial-gradient(800px 600px at 50% 110%, rgba(59,130,246,.14), transparent 60%),
    var(--bg)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(1100px 700px at 50% 0%,#000 0%,transparent 78%);
          mask-image:radial-gradient(1100px 700px at 50% 0%,#000 0%,transparent 78%)}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 10px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--brand-2);outline-offset:3px;border-radius:6px}

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:60;background:rgba(4,7,14,.72);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease),background .3s var(--ease)}
.site-header.is-stuck{border-bottom-color:var(--line);background:rgba(4,7,14,.9)}
.header-inner{display:flex;align-items:center;gap:18px;min-height:70px}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:Sora,Inter,sans-serif;
  font-weight:700;font-size:1.06rem;letter-spacing:-.02em;white-space:nowrap}
/* The mark is now the gold 8K logo (2026-08-09), so the plate behind it is gold-tinted
   rather than the site's cyan/violet wash — the old tint fought the artwork. */
.brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;flex:none;
  background:linear-gradient(140deg,rgba(251,191,36,.18),rgba(217,119,6,.1));
  border:1px solid rgba(251,191,36,.32);transition:transform .45s var(--ease)}
.brand-mark img{width:27px;height:27px;object-fit:contain}
.brand:hover .brand-mark{transform:translateY(-2px) rotate(-4deg)}
.brand-hi{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-inline:2px}

.site-nav{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-link{position:relative;padding:9px 12px;border-radius:10px;font-size:.925rem;color:var(--ink-dim);
  transition:color .2s,background .2s}
.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:2px;border-radius:2px;
  background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.045)}
.nav-link:hover::after,.nav-link.is-active::after{transform:scaleX(1)}
.nav-link.is-active{color:#fff}
.nav-cta{margin-left:8px}

.nav-toggle{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:12px;
  background:rgba(255,255,255,.03);cursor:pointer;padding:0;place-items:center;gap:5px}
.nav-toggle span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);
  transition:transform .3s var(--ease),opacity .2s}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 24px;border-radius:14px;font-weight:600;font-size:.96rem;line-height:1;
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s,color .2s}
.btn-sm{padding:10px 16px;font-size:.9rem;border-radius:11px}
.btn-primary{background:var(--grad);color:#04070E;font-weight:700;
  box-shadow:0 14px 34px -14px rgba(59,130,246,.75)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 46px -16px rgba(59,130,246,.9)}
/* A light sheen crosses the button on hover — pure transform, no repaint of the fill. */
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .75s var(--ease)}
.btn-primary:hover::after{transform:translateX(120%)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--brand-2);color:#fff;
  box-shadow:0 16px 40px -22px rgba(34,211,238,.8)}
.btn-wa{background:#25D366;color:#04140A;font-weight:700}
.btn-wa:hover{transform:translateY(-2px);box-shadow:0 18px 40px -18px rgba(37,211,102,.8)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ── Sections + headings ────────────────────────────────────────────────── */
.section{padding:clamp(56px,7vw,96px) 0;position:relative}
.section + .section{padding-top:0}
.section--alt{background:linear-gradient(180deg,transparent,rgba(8,13,24,.85) 12%,rgba(8,13,24,.85) 88%,transparent);
  padding-block:clamp(56px,7vw,96px)}
/* Skip layout work for sections the user has not scrolled to yet. */
.section--defer{content-visibility:auto;contain-intrinsic-size:auto 720px}
.h2{font-size:clamp(1.6rem,1.2rem + 1.7vw,2.5rem);line-height:1.15;margin:0 0 14px}
.h3{font-size:clamp(1.12rem,1.02rem + .4vw,1.32rem);margin:0 0 8px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.77rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--brand-2);margin:0 0 14px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--grad)}
.lead{color:var(--muted);font-size:clamp(1rem,.96rem + .3vw,1.16rem);margin:0 0 28px;max-width:62ch}
.section-head{max-width:64ch;margin:0 0 clamp(28px,4vw,48px)}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center .lead{margin-inline:auto}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
p{margin:0 0 16px;color:var(--ink-dim)}
.prose p{max-width:70ch}
.prose h2{margin-top:36px}
.prose h3{margin-top:26px}
.prose ul{margin:0 0 18px;padding-left:0}
.prose li{position:relative;padding-left:26px;margin-bottom:10px;color:var(--ink-dim)}
.prose li::before{content:"";position:absolute;left:6px;top:.62em;width:7px;height:7px;border-radius:50%;
  background:var(--grad)}

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(64px,9vw,116px) 0 clamp(48px,7vw,88px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,56px);align-items:center}
.h1{font-size:clamp(2.1rem,1.35rem + 3.2vw,4rem);line-height:1.06;letter-spacing:-.03em;margin:0 0 18px}
.hero .lead{font-size:clamp(1.02rem,.98rem + .35vw,1.22rem)}

/* Aurora: three soft blobs drifting behind the hero. They are blurred ONCE and then
   only translated/scaled, so the blur is not recomputed per frame. */
.aurora{position:absolute;inset:-20% -10% auto -10%;height:130%;z-index:-1;pointer-events:none;filter:blur(64px);opacity:.55}
.aurora i{position:absolute;display:block;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){width:42vw;height:42vw;left:-6%;top:-6%;background:rgba(34,211,238,.5);animation:drift1 22s var(--ease) infinite alternate}
.aurora i:nth-child(2){width:38vw;height:38vw;right:-4%;top:4%;background:rgba(168,85,247,.45);animation:drift2 26s var(--ease) infinite alternate}
.aurora i:nth-child(3){width:34vw;height:34vw;left:38%;top:38%;background:rgba(59,130,246,.45);animation:drift3 30s var(--ease) infinite alternate}
@keyframes drift1{to{transform:translate3d(9%,7%,0) scale(1.14)}}
@keyframes drift2{to{transform:translate3d(-11%,9%,0) scale(1.1)}}
@keyframes drift3{to{transform:translate3d(6%,-9%,0) scale(1.16)}}

.pill{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 9px;border-radius:999px;
  background:rgba(255,255,255,.045);border:1px solid var(--line-2);font-size:.83rem;color:var(--ink-dim);
  margin:0 0 22px}
.pill b{color:#fff;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);position:relative}
.dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--ok);
  opacity:.6;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.5);opacity:0}}

.hero-points{display:flex;flex-wrap:wrap;gap:10px 20px;margin:26px 0 0}
.hero-points li{display:flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink-dim)}
.tick{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(52,211,153,.14);color:var(--ok);font-size:.7rem;font-weight:700}

/* Hero visual: a stack of glass "screens" that tilt on hover. */
.hero-art{position:relative;aspect-ratio:4/3.2;perspective:1200px}
.screen{position:absolute;border-radius:20px;border:1px solid var(--line-2);
  background:linear-gradient(160deg,rgba(18,26,45,.95),rgba(8,13,24,.95));box-shadow:var(--shadow);
  transition:transform .8s var(--ease)}
.screen-main{inset:4% 4% 20% 8%;padding:14px;display:flex;flex-direction:column;gap:10px;
  transform:rotateY(-9deg) rotateX(4deg)}
.hero-art:hover .screen-main{transform:rotateY(-4deg) rotateX(2deg) translateY(-6px)}
.screen-bar{display:flex;gap:6px;align-items:center}
.screen-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.screen-bar i:first-child{background:#F87171}.screen-bar i:nth-child(2){background:#FBBF24}.screen-bar i:nth-child(3){background:#34D399}
/* Hero "multiscreen" mosaic: one featured match over four small screens. Still pure CSS —
   no image is fetched, which is why the hero costs nothing on 4G. Channel names WRAP rather
   than truncate: the old grid ellipsised them to "Sky Spor…", which is what the owner
   objected to (2026-08-09). --c on each cell drives both the tint and the monogram. */
.mosaic{display:grid;grid-template-rows:1.5fr 1fr;gap:8px;flex:1;min-height:0}
.mos-logo{width:24px;height:24px;flex:none;border-radius:7px;display:grid;place-items:center;
  font-family:Sora,sans-serif;font-weight:800;font-size:.5rem;color:#fff;
  background:linear-gradient(150deg,var(--c),rgba(255,255,255,.06));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.mos-feat{position:relative;overflow:hidden;border-radius:12px;padding:9px 11px;
  border:1px solid rgba(34,211,238,.4);display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(150deg,rgba(34,211,238,.3),rgba(59,130,246,.16),rgba(8,13,24,.85))}
.mos-row{display:flex;align-items:center;gap:7px}
.mos-pill{font-size:.5rem;font-weight:800;letter-spacing:.1em;color:#fff;background:#EF4444;
  border-radius:4px;padding:2px 6px}
.mos-score{margin-left:auto;font-family:Sora,sans-serif;font-weight:800;font-size:.82rem;color:#fff}
.mos-cap em{display:block;font-style:normal;font-family:Sora,sans-serif;font-weight:700;
  font-size:.85rem;line-height:1.2;color:#fff}
.mos-cap small{display:block;font-size:.6rem;line-height:1.3;color:var(--ink-dim)}
.mos-small{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;min-height:0}
.mos-cell{position:relative;overflow:hidden;border-radius:10px;padding:6px;
  border:1px solid var(--line);display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(155deg,color-mix(in srgb,var(--c) 30%,transparent),rgba(8,13,24,.7))}
.mos-cell .mos-logo{position:absolute;top:6px;left:6px;width:19px;height:19px;font-size:.42rem;border-radius:6px}
.mos-cell em{font-style:normal;font-family:Sora,sans-serif;font-weight:700;font-size:.58rem;
  line-height:1.1;color:#fff}
.mos-cell small{font-size:.5rem;line-height:1.2;color:var(--brand-2)}
/* One slow sheen across the featured screen only — six shimmering tiles was noise. */
.mos-feat::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.1) 50%,transparent 58%);
  transform:translateX(-100%);animation:shimmer 5.5s linear infinite}
.mos-row,.mos-cap,.mos-cell em,.mos-cell small{position:relative;z-index:1}
@keyframes shimmer{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}
.screen-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:.58rem;font-weight:700;
  letter-spacing:.1em;color:#F87171}
.screen-live b{width:6px;height:6px;border-radius:50%;background:#F87171;animation:ping 2s ease-out infinite}
.screen-q{font-size:.58rem;font-weight:700;letter-spacing:.08em;color:#04070E;background:var(--grad);
  border-radius:5px;padding:2px 6px}
.screen-now{display:flex;align-items:center;gap:8px;padding-top:2px}
.now-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none}
.now-txt{font-size:.66rem;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.now-bar{margin-left:auto;width:74px;height:4px;border-radius:3px;background:rgba(255,255,255,.12);
  overflow:hidden;flex:none}
.now-bar i{display:block;height:100%;width:46%;border-radius:3px;background:var(--grad);
  animation:progress 9s linear infinite}
@keyframes progress{from{width:18%}to{width:92%}}

.badge-8k{position:absolute;right:2%;bottom:0;padding:12px 18px;border-radius:16px;
  background:rgba(8,13,24,.92);border:1px solid var(--line-2);box-shadow:var(--shadow-glow);
  font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.02em;display:flex;flex-direction:column;gap:2px;
  animation:float 6s ease-in-out infinite}
.badge-8k b{font-size:1.5rem;line-height:1}
.badge-8k span{font-size:.72rem;color:var(--muted);font-weight:500;letter-spacing:.08em;text-transform:uppercase}
@keyframes float{50%{transform:translateY(-10px)}}

/* ── Stats ──────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(36px,5vw,60px)}
.stat{padding:22px 18px;border-radius:var(--radius);background:rgba(255,255,255,.03);
  border:1px solid var(--line);text-align:center;transition:transform .35s var(--ease),border-color .3s}
.stat:hover{transform:translateY(-4px);border-color:var(--line-2)}
.stat b{display:block;font-family:Sora,sans-serif;font-size:clamp(1.4rem,1.1rem + 1.1vw,2rem);
  line-height:1.1;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:6px;font-size:.84rem;color:var(--muted)}

/* ── Cards (gradient border on hover, no layout shift) ──────────────────── */
.grid{display:grid;gap:16px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{position:relative;padding:26px 24px;border-radius:var(--radius-lg);
  background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--line);overflow:hidden;
  transition:transform .4s var(--ease),border-color .35s,box-shadow .4s var(--ease)}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad);opacity:0;transition:opacity .4s;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card:hover::before{opacity:.9}
.card-ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--grad-soft);border:1px solid var(--line-2);font-size:1.25rem}
.card p{margin:0;color:var(--muted);font-size:.95rem}

/* ── Marquee (channel names) ────────────────────────────────────────────── */
.marquee{position:relative;overflow:hidden;padding:18px 0;border-block:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-track{display:flex;gap:14px;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.chip{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);
  font-size:.87rem;color:var(--ink-dim);white-space:nowrap}

/* ── Pricing ────────────────────────────────────────────────────────────── */
/* The six inclusions, printed once above the grid. Repeating them inside all four cards
   was what made the old cards tall and samey — the card now only carries what actually
   decides the sale: the price, the per-month, and what you save. */
.plan-includes{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 30px}
.plan-includes span{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);font-size:.86rem;color:var(--ink-dim)}
.plan-includes i{font-style:normal}

.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
.plan-grid--3{grid-template-columns:repeat(3,1fr)}
.plan-card{position:relative;display:flex;flex-direction:column;padding:28px 22px 24px;
  border-radius:var(--radius-lg);border:1px solid var(--line);
  background:linear-gradient(165deg,rgba(18,26,45,.75),rgba(8,13,24,.75));
  transition:transform .35s var(--ease),border-color .3s,box-shadow .35s var(--ease)}
.plan-card:hover{transform:translateY(-6px);border-color:var(--line-2);box-shadow:var(--shadow)}
/* Gradient BORDER, not a gradient fill. The old popular card was filled edge to edge and its
   own copy sat on top of a mid-tone cyan — legible in a mockup, poor on a phone in daylight. */
.plan-card--popular{border:1.5px solid transparent;
  background:linear-gradient(165deg,rgba(18,26,45,.92),rgba(8,13,24,.92)) padding-box,
             var(--grad) border-box;
  box-shadow:0 30px 70px -34px rgba(59,130,246,.75)}
.plan-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  padding:5px 14px;border-radius:999px;background:var(--grad);color:#04070E;
  font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.plan-name{font-size:1.02rem;color:var(--ink-dim);font-weight:600;margin:0 0 12px}
.plan-price{font-family:Sora,sans-serif;font-size:3.1rem;font-weight:800;line-height:1;margin:0;letter-spacing:-.04em}
.plan-price .cur{font-size:1.5rem;vertical-align:top;margin-right:2px;color:var(--muted)}
.plan-pm{margin:8px 0 0;font-size:.9rem;color:var(--muted)}
.plan-was{margin:14px 0 22px;font-size:.86rem;color:var(--muted)}
.plan-was s{opacity:.65}
.plan-save{align-self:flex-start;margin:-12px 0 22px;padding:5px 12px;border-radius:999px;
  background:rgba(52,211,153,.14);border:1px solid rgba(52,211,153,.4);color:var(--ok);
  font-size:.8rem;font-weight:700}
/* Base look for the plan CTA — matches .btn-ghost. It lived inside the block this section
   replaced, and losing it left the three non-popular buttons as bare text. */
.btn-plan{background:rgba(255,255,255,.04);color:var(--ink);border-color:var(--line-2)}
.btn-plan:hover{border-color:var(--brand-2);color:#fff;box-shadow:0 16px 40px -22px rgba(34,211,238,.8)}
/* margin-top:auto and nothing else — an explicit margin-top would beat it and let the
   1-month card (no savings pill) float its button above the other three. */
.plan-card>.btn-plan{margin-top:auto;width:100%;padding-block:14px}
.plan-card--popular .btn-plan{background:var(--grad);color:#04070E;font-weight:700;border-color:transparent}
.plan-note{margin:22px 0 0;text-align:center;font-size:.88rem;color:var(--muted)}

/* ── Steps ──────────────────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.step{position:relative;padding:28px 24px;border-radius:var(--radius-lg);border:1px solid var(--line);
  background:rgba(255,255,255,.03)}
.step::before{counter-increment:s;content:counter(s);position:absolute;top:-16px;left:24px;
  width:38px;height:38px;border-radius:12px;display:grid;place-items:center;font-family:Sora,sans-serif;
  font-weight:700;background:var(--grad);color:#04070E}
.step h3{margin-top:12px}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.faq{display:grid;gap:12px;max-width:900px}
.faq-item{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);
  overflow:hidden;transition:border-color .3s}
.faq-item[open]{border-color:var(--line-2)}
.faq-item summary{cursor:pointer;list-style:none;padding:18px 52px 18px 22px;font-weight:600;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq-a{padding:0 22px 20px;color:var(--muted);font-size:.95rem}
.faq-a p:last-child{margin-bottom:0}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.02)}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{padding:14px 18px;text-align:left;font-size:.93rem;border-bottom:1px solid var(--line)}
th{font-family:Sora,sans-serif;font-weight:600;color:#fff;background:rgba(255,255,255,.03)}
td{color:var(--ink-dim)}
tr:last-child td{border-bottom:none}

/* ── Breadcrumb + CTA + footer ──────────────────────────────────────────── */
.crumbs{padding:18px 0 0;font-size:.84rem;color:var(--muted)}
/* list-style + the UA's default left padding must both go: without them the browser
   prints "1. Home 2. App Downloads" over the trail on every page. */
.crumbs ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a:hover{color:var(--brand-2)}

.cta-inner{text-align:center;padding:clamp(36px,5vw,64px) 24px;border-radius:var(--radius-lg);
  border:1px solid var(--line-2);position:relative;overflow:hidden;
  background:linear-gradient(150deg,rgba(34,211,238,.1),rgba(168,85,247,.1))}
.cta-inner .lead{margin-inline:auto}
.cta-inner .btn-row{justify-content:center}

.site-footer{margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(8,13,24,.9));padding:clamp(40px,5vw,64px) 0 28px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px}
.foot-grid h4{font-size:.86rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px;font-weight:600}
.foot-links{display:grid;gap:9px}
.foot-links a{font-size:.93rem;color:var(--ink-dim);transition:color .2s,transform .2s var(--ease);display:inline-block}
.foot-links a:hover{color:var(--brand-2);transform:translateX(3px)}
.foot-bottom{margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.85rem;color:var(--muted)}

/* Floating WhatsApp button */
.wa-float{position:fixed;right:18px;bottom:18px;z-index:70;width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:#25D366;box-shadow:0 16px 36px -14px rgba(37,211,102,.9);
  transition:transform .3s var(--ease)}
.wa-float:hover{transform:scale(1.08)}
.wa-float::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:ping 2.6s ease-out infinite}

/* ── Scroll reveal (JS adds .is-in) ─────────────────────────────────────── */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal:nth-child(2){transition-delay:.06s}
.reveal:nth-child(3){transition-delay:.12s}
.reveal:nth-child(4){transition-delay:.18s}
/* No JS? Never leave the content invisible. */
.no-js .reveal{opacity:1;transform:none}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  /* width:100% is load-bearing. margin-inline:auto makes a block grid item shrink-to-fit,
     and every child of .hero-art is position:absolute — so fit-content resolved to ZERO.
     The panel collapsed to 0x0 and its absolutely-positioned tiles spilled over the hero
     text on every phone. Measured, not guessed: getBoundingClientRect() returned 0x0. */
  /* Taller than desktop's ratio on purpose: the mosaic has a caption + four cells to fit
     into a box only ~350px wide, and 4/2.9 crushed the featured caption into the cells. */
  .hero-art{width:100%;max-width:520px;margin-inline:auto;order:-1;aspect-ratio:4/3.5}
  .screen-main{inset:3% 3% 22% 3%}
  .mos-cap em{font-size:.78rem}
  .badge-8k{padding:9px 14px}
  .badge-8k b{font-size:1.25rem}
  .badge-8k span{font-size:.62rem}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .plan-grid{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  /* margin-left:auto has to move to the toggle here. .site-nav carries it on desktop, but
     below this breakpoint the nav becomes position:fixed — out of flow, so its auto margin
     pushes nothing, and the burger ended up glued to the logo text with 123px of dead space
     to its right. Measured at 390px: left=223 instead of right-aligned. */
  .nav-toggle{display:grid;margin-left:auto}
  .site-nav{position:fixed;inset:70px 0 auto;display:grid;gap:4px;padding:16px 20px 24px;
    background:rgba(4,7,14,.98);border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .28s,transform .28s var(--ease)}
  .site-nav.is-open{opacity:1;transform:none;pointer-events:auto}
  .nav-link{padding:12px 14px}
  .nav-cta{margin:8px 0 0;justify-content:center}
  .grid-3,.steps,.plan-grid--3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:620px){
  .grid-4,.grid-2,.plan-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row .btn{flex:1 1 auto}
  .plan-price{font-size:2.6rem}
}

/* ── Touch sizing ───────────────────────────────────────────────────────────
   Measured with CDP at 390x844, not eyeballed. Everything below was under the
   44px target: footer links were 25px tall (113 of them across the site), the
   logo 38px, the nav WhatsApp button 39px, the copy buttons 29px. Only
   STANDALONE controls are padded — links inside a paragraph are deliberately
   left alone, because forcing 44px on them wrecks the line-height of the copy. */
@media (max-width:860px){
  .foot-links a{display:flex;align-items:center;min-height:44px;padding:2px 0}
  .foot-links{gap:0}
  .brand{min-height:44px}
  .nav-cta{min-height:44px}
  .nav-link{min-height:44px;display:flex;align-items:center}
  .copy-btn{min-height:40px;padding:9px 16px}
  .faq-item summary{min-height:44px;display:flex;align-items:center;gap:10px}
  /* 12.3px is below the readable floor on a phone; the eyebrow is a real label,
     not decoration, and it sits above every section heading on the site. */
  .eyebrow{font-size:.82rem}
}

/* ── Motion / contrast preferences ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{body::before,body::after,.site-header,.wa-float,.site-footer{display:none}}

/* ── App download cards (/8kiptv-download) ──────────────────────────────────
   The cards are flex columns so the "Download APK" button sits on the same line
   across a row however long the description runs — a ragged button row reads as
   a broken grid on a page whose whole job is that one button. */
.app-card{display:flex;flex-direction:column}
.app-card>p:not(.app-badges):not(.app-url){flex:1 0 auto}
.app-badges{display:flex;flex-wrap:wrap;gap:8px;margin:.5rem 0 .9rem}
.chip-size{background:rgba(34,211,238,.12);border-color:rgba(34,211,238,.34);color:var(--brand-2)}
.app-url{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;
  padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.03)}
.app-url-label{flex:1 0 100%;font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.app-url code{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;font-size:.86rem;color:var(--ink-dim)}
.copy-btn{flex:0 0 auto;cursor:pointer;padding:7px 14px;border-radius:999px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink);
  font:600 .8rem/1 Inter,system-ui,sans-serif;transition:background .2s,color .2s,border-color .2s}
.copy-btn:hover{background:rgba(59,130,246,.16);border-color:var(--brand)}
.copy-btn.is-copied{background:rgba(52,211,153,.16);border-color:var(--ok);color:var(--ok)}
.app-card .btn-plan{margin-top:auto}
@media (max-width:620px){
  .app-url{padding:10px 12px}
  .copy-btn{flex:1 0 auto}
}

/* Must live at the END of the file: the .app-* block above is declared after the
   responsive section, so an override placed up there loses on source order alone. */
@media (max-width:860px){
  .app-url-label{font-size:.82rem}
}

/* ── Hero artwork background (homepage) ─────────────────────────────────────
   Owner picked this over the CSS panel on 2026-08-09. The image is the site's only
   above-the-fold download, so: WebP, two widths, and a preload in header.php. It is
   decorative — a background, not an <img> — so nothing is announced to a screen reader. */
.hero--art{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;background:url(/images/hero-art-1600.webp) center/cover no-repeat;opacity:.55}
/* Two scrims. The horizontal one carries the headline: the artwork is bright gold exactly
   where the copy sits, and without it the lead paragraph fails contrast outright. The
   vertical one fades the bottom so the section joins the page instead of cutting off. */
.hero-scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(4,7,14,.94) 0%,rgba(4,7,14,.82) 42%,rgba(4,7,14,.42) 70%,rgba(4,7,14,.55) 100%),
             linear-gradient(180deg,rgba(4,7,14,.5) 0%,transparent 25%,rgba(4,7,14,.92) 100%)}
.hero--art .wrap{position:relative;z-index:2}
.hero-logo{display:grid;place-items:center}
/* display:contents so the <img> stays the grid item. Without it the <picture> wrapper
   becomes the item and the width rules below resolve against IT, not the column —
   the mark drifted left and oversized on phones the moment <picture> was introduced. */
.hero-logo picture{display:contents}
.hero-logo img{width:min(320px,72%);height:auto;filter:drop-shadow(0 18px 44px rgba(251,191,36,.45));
  animation:float 7s ease-in-out infinite}
.hero-tagline{display:block;margin-top:14px;text-align:center;font-family:Sora,sans-serif;
  font-weight:700;letter-spacing:.22em;text-transform:uppercase;font-size:.74rem;color:var(--gold)}
@media (max-width:1000px){
  /* 900px file is 41 KB against 110 KB — worth the extra rule on a phone. The scrim also
     flips to vertical, because the copy sits UNDER the logo here, not beside it. */
  /* 18 KB against the desktop file's 110 KB. It sits under a heavy scrim at .55 opacity,
     so the extra compression is invisible — measured, the phone LCP drops ~0.3s for it. */
  .hero-bg{background-image:url(/images/hero-art-600.webp);opacity:.55;background-position:50% 22%}
  .hero-scrim{background:linear-gradient(180deg,rgba(4,7,14,.28) 0%,rgba(4,7,14,.62) 30%,rgba(4,7,14,.9) 55%,rgba(4,7,14,.95) 100%)}
  /* Owner's call (08-09): on a phone the mark goes BELOW the copy, so the headline and
     the Buy Now button own the first screen instead of a logo. No `order` — the DOM
     already has the text first, so this is simply letting it fall in source order. */
  .hero-logo{margin-top:30px}
  .hero-logo img{width:min(240px,55%)}
  .hero-tagline{font-size:.82rem}
}
@media (prefers-reduced-motion:reduce){.hero-logo img{animation:none}}