/* ============================================================================
   SUN TV — LANDING PAGE STYLES
   Design tokens live in :root. Change the brand colours there and the whole
   page follows.
   ========================================================================= */

:root{
  --ink:#07090E;
  --ink-2:#0C1018;
  --panel:#12172099;
  --panel-solid:#141A24;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --text:#EDF1F8;
  --muted:#95A0B3;
  --sun-1:#FFC42E;
  --sun-2:#FF7A00;
  --red:#F02D36;
  --green:#25D366;
  --sun-grad:linear-gradient(100deg,var(--sun-1),var(--sun-2));
  --radius:16px;
  --radius-lg:24px;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --maxw:1180px;
  --sticky-h:0px;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:20px;
}

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:var(--sticky-h);
}

body.is-locked{overflow:hidden}

img,svg,video{max-width:100%;display:block}
a{color:inherit}

/* --------------------------------------------------------------- HEADINGS */
h1,h2,h3,.display{
  font-family:'Anton','Inter',Impact,sans-serif;
  text-wrap:balance;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.005em;
  line-height:1.02;
  margin:0 0 .45em;
}
h1{font-size:clamp(2rem,6.6vw,4.3rem)}
h2{font-size:clamp(1.7rem,4.9vw,3.2rem)}
h3{font-size:clamp(1.15rem,2.5vw,1.55rem)}
p{margin:0 0 1em}
strong{color:#fff}

.sun-text{
  background:var(--sun-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.red-text{color:var(--red)}

/* ---------------------------------------------------------------- LAYOUT */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.wrap--narrow{max-width:860px}

section{position:relative;padding:clamp(56px,8vw,104px) 0}
.section-alt{background:
  radial-gradient(1200px 500px at 50% -10%,rgba(255,122,0,.07),transparent 65%),
  var(--ink-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.center{text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sun-1);
  border:1px solid rgba(255,196,46,.32);
  background:rgba(255,196,46,.07);
  padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
.lead{font-size:clamp(1rem,2vw,1.18rem);color:var(--muted);max-width:62ch;text-wrap:pretty}
.center .lead{margin-left:auto;margin-right:auto}
.note{font-size:.84rem;color:#6F7A8C;line-height:1.5}

/* ------------------------------------------------------------------ TOPBAR */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(7,9,14,.86);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:62px}
.logo{display:flex;align-items:center;gap:11px;font-family:'Anton',sans-serif;font-size:1.32rem;letter-spacing:.02em;text-decoration:none}
.logo__mark{
  width:40px;height:40px;border-radius:11px;background:var(--sun-grad);
  display:grid;place-items:center;color:#1A1000;font-size:.95rem;flex:0 0 auto;
  box-shadow:0 0 22px rgba(255,140,0,.45);
}
.topbar .btn{padding:11px 18px;font-size:.82rem}

/* ------------------------------------------------------------------ BUTTONS */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Inter',sans-serif;
  font-weight:800;font-size:1rem;letter-spacing:.02em;text-transform:uppercase;
  padding:17px 30px;border-radius:999px;border:0;cursor:pointer;
  text-decoration:none;text-align:center;line-height:1.2;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
.btn:active{transform:translateY(1px) scale(.995)}
.btn--primary{
  background:var(--sun-grad);color:#1A0E00;
  box-shadow:0 14px 34px rgba(255,122,0,.34),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--primary:hover{box-shadow:0 18px 44px rgba(255,122,0,.48);transform:translateY(-2px)}
.btn--ghost{background:rgba(255,255,255,.05);color:var(--text);border:1px solid var(--line-2)}
.btn--ghost:hover{background:rgba(255,255,255,.1)}
.btn--wa{background:var(--green);color:#04310F}
.btn--wa:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(37,211,102,.35)}
.btn--lg{font-size:clamp(1rem,2.4vw,1.28rem);padding:21px 40px;width:auto}
.btn--block{display:flex;width:100%}
.btn__icon{width:20px;height:20px;flex:0 0 auto}

.btn--pulse{animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{
  0%,100%{box-shadow:0 14px 34px rgba(255,122,0,.34),0 0 0 0 rgba(255,140,0,.42)}
  50%{box-shadow:0 14px 34px rgba(255,122,0,.34),0 0 0 18px rgba(255,140,0,0)}
}

.cta-stack{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:28px}
.cta-sub{font-size:.85rem;color:var(--muted)}

/* --------------------------------------------------------------------- HERO */
.hero{
  padding-top:clamp(36px,5vw,64px);
  background:
    radial-gradient(900px 520px at 50% -5%,rgba(255,122,0,.20),transparent 60%),
    radial-gradient(700px 420px at 85% 20%,rgba(255,196,46,.09),transparent 60%),
    var(--ink);
  overflow:hidden;
}
.breaking{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--red);color:#fff;
  font-weight:900;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  padding:8px 16px;border-radius:6px;margin-bottom:22px;
  box-shadow:0 8px 26px rgba(240,45,54,.42);
}
.breaking__dot{width:8px;height:8px;border-radius:50%;background:#fff;animation:blink 1.3s steps(1) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.25}}

.hero h1{margin-bottom:.35em}
.hero__sub{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.05rem,2.7vw,1.7rem);line-height:1.16;
  color:var(--sun-1);max-width:30ch;margin:0 auto 22px;
}
.hero__body{font-size:clamp(1rem,2.1vw,1.2rem);color:#C4CDDC;max-width:52ch;margin:0 auto 6px}
.hero__body strong{color:#fff}

.hero__grid{display:grid;gap:clamp(28px,4vw,48px);align-items:center;text-align:center}

.trust-strip{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;
  margin-top:26px;padding-top:22px;border-top:1px solid var(--line);
}
.trust-strip span{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:600;color:#BAC4D4;letter-spacing:.01em;
}
.tick{color:var(--sun-1);font-weight:900}

/* ------------------------------------------------------------- VIDEO PLAYER */
.player{
  position:relative;width:100%;max-width:980px;margin:0 auto;
  border-radius:var(--radius-lg);overflow:hidden;
  background:#000;border:1px solid var(--line-2);
  box-shadow:var(--shadow),0 0 0 6px rgba(255,255,255,.03);
}
.player::after{
  content:'';position:absolute;inset:0;pointer-events:none;border-radius:var(--radius-lg);
  box-shadow:inset 0 0 90px rgba(255,122,0,.10);
}
.player__ratio{position:relative;width:100%;aspect-ratio:16/9;background:#05070B}
.player__ratio>iframe,.player__ratio>video{position:absolute;inset:0;width:100%;height:100%;border:0}
.player__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.player__overlay{
  position:absolute;inset:0;display:grid;place-items:center;gap:14px;
  background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.66));
  cursor:pointer;border:0;width:100%;padding:0;color:inherit;font:inherit;
}
.player__play{
  width:clamp(64px,11vw,92px);height:clamp(64px,11vw,92px);border-radius:50%;
  background:var(--sun-grad);display:grid;place-items:center;
  box-shadow:0 0 0 12px rgba(255,140,0,.15),0 18px 44px rgba(0,0,0,.55);
  transition:transform .2s ease;
}
.player__overlay:hover .player__play{transform:scale(1.07)}
.player__play svg{width:34%;height:34%;fill:#1A0E00;margin-left:8%}
.player__label{
  font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.06em;
  font-size:clamp(.95rem,2.2vw,1.2rem);color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.8);
}
.player__hint{font-size:.8rem;color:#C9D2E0;letter-spacing:.06em;text-transform:uppercase}
.player__bar{height:4px;background:rgba(255,255,255,.08)}
.player__bar-fill{height:100%;width:0;background:var(--sun-grad);transition:width .35s linear}

.player-wrap{margin-top:clamp(28px,4vw,40px)}

/* -------------------------------------------------------------- HERO MEDIA */
.hero__media{
  border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);position:relative;
}
.hero__media img{width:100%;height:auto}
.hero__media figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#D6DEEA;
}

/* ------------------------------------------------------------------ PROOF */
.proof-row{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(210px,1fr);
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 18px;margin:0 -4px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
}
.proof-row::-webkit-scrollbar{height:7px}
.proof-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}

.grid{display:grid;gap:16px}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}

/* Fixed-column grids: predictable rows, no orphan tiles on the last line */
.grid--r3,.grid--r4{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){
  .grid--r3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--r4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* Text-card variant: needs more room per card than an image tile does */
.grid--t3{grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.grid--t3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:940px){.grid--t3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.shot{
  position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);
  background:var(--panel-solid);border-radius:var(--radius);overflow:hidden;cursor:zoom-in;
  scroll-snap-align:start;color:inherit;font:inherit;text-align:left;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.shot:hover{transform:translateY(-4px);border-color:rgba(255,196,46,.45);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.shot img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;background:#0B0E14}
.shot--wide img{aspect-ratio:16/9}
.shot--square img{aspect-ratio:1/1}
.shot__cap{
  position:absolute;left:0;right:0;bottom:0;padding:26px 12px 11px;
  background:linear-gradient(transparent,rgba(0,0,0,.92));
  font-size:.78rem;font-weight:600;color:#E3E9F3;letter-spacing:.01em;
}
.shot__badge{
  position:absolute;top:10px;left:10px;z-index:2;
  font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-radius:999px;background:rgba(7,9,14,.8);
  border:1px solid var(--line-2);color:#CBD4E2;backdrop-filter:blur(6px);
}
.shot__play{
  position:absolute;inset:0;margin:auto;width:54px;height:54px;border-radius:50%;
  background:rgba(255,122,0,.94);display:grid;place-items:center;pointer-events:none;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.shot__play svg{width:18px;height:18px;fill:#1A0E00;margin-left:3px}

/* Masonry-ish proof wall */
.wall{columns:2;column-gap:14px}
.wall .shot{margin:0 0 14px;break-inside:avoid;display:block}
.wall .shot img{aspect-ratio:auto;height:auto}
@media(min-width:700px){.wall{columns:3}}
@media(min-width:1000px){.wall{columns:4}}

/* ------------------------------------------------------------------- CARDS */
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;height:100%;
  transition:border-color .2s ease,transform .2s ease;
}
.card:hover{border-color:rgba(255,196,46,.35);transform:translateY(-3px)}
.card h3{color:#fff;margin-bottom:.4em}
.card p{color:var(--muted);margin:0;font-size:.96rem}
.card__icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,196,46,.12);border:1px solid rgba(255,196,46,.28);
  font-size:1.35rem;margin-bottom:14px;
}

/* Channel grid */
.chan{
  background:var(--panel-solid);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;position:relative;overflow:hidden;
}
.chan::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:var(--sun-grad)}
.chan h3{font-size:clamp(1.25rem,2.6vw,1.7rem);margin-bottom:.35em;color:#fff}
.chan ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.chan li{
  font-size:.82rem;font-weight:600;color:#C3CCDB;
  border:1px solid var(--line);background:rgba(255,255,255,.04);
  padding:5px 11px;border-radius:999px;
}

/* Evidence / legit grid */
.evidence{display:flex;align-items:flex-start;gap:14px;padding:20px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,255,255,.025)}
.evidence__tick{
  flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.4);
  display:grid;place-items:center;color:var(--green);font-weight:900;font-size:.95rem;
}
.evidence h3{font-size:1rem;letter-spacing:.06em;margin-bottom:.25em}
.evidence p{margin:0;font-size:.9rem;color:var(--muted)}

/* Flow steps */
.flow{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;
}
.flow__step{position:relative;scroll-snap-align:start}
.flow__n{
  position:absolute;top:10px;left:10px;z-index:2;width:28px;height:28px;border-radius:50%;
  background:var(--sun-grad);color:#1A0E00;font-weight:900;font-size:.82rem;
  display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.5);
}

/* Delivery steps banner */
.steps{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 18px;margin-bottom:34px;
}
.steps span{
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.3rem,4vw,2.4rem);color:#fff;
}
.steps i{color:var(--sun-1);font-style:normal;font-size:clamp(1.1rem,3vw,1.8rem)}

/* Checklist (section 12) */
.checklist{list-style:none;margin:0 auto 6px;padding:0;display:grid;gap:11px;max-width:620px;text-align:left}
.checklist li{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;padding:13px 16px;font-weight:600;font-size:.98rem;
}
.checklist li::before{content:'✓';color:var(--green);font-weight:900;flex:0 0 auto}

/* ---------------------------------------------------------------- CAROUSEL */
.carousel{position:relative}
.carousel__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(min(84vw,340px),1fr);
  gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:4px 4px 20px;scroll-behavior:smooth;
}
.carousel__track::-webkit-scrollbar{height:7px}
.carousel__track::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
.tcard{
  scroll-snap-align:center;background:var(--panel-solid);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column;
}
.tcard__media{position:relative;border:0;padding:0;background:#0B0E14;cursor:pointer;width:100%}
.tcard__media img{width:100%;aspect-ratio:16/9;object-fit:cover}
.tcard__body{padding:16px 18px 20px}
.tcard__name{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:1.05rem;margin-bottom:4px;color:#fff}
.tcard__cap{font-size:.9rem;color:var(--muted);margin:0}
.carousel__nav{display:flex;gap:10px;justify-content:center;margin-top:6px}
.carousel__btn{
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(255,255,255,.05);color:#fff;cursor:pointer;display:grid;place-items:center;
  font-size:1.2rem;transition:background .2s ease;
}
.carousel__btn:hover{background:rgba(255,255,255,.14)}

/* --------------------------------------------------------------------- FAQ */
.faq{max-width:780px;margin:0 auto;display:grid;gap:12px}
.faq__item{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.028);overflow:hidden}
.faq__q{
  width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;
  background:none;border:0;color:#fff;cursor:pointer;text-align:left;
  font-family:'Inter',sans-serif;font-weight:700;font-size:1.02rem;padding:19px 20px;
}
.faq__q:hover{background:rgba(255,255,255,.03)}
.faq__sign{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:rgba(255,196,46,.14);color:var(--sun-1);display:grid;place-items:center;font-size:1.1rem;transition:transform .25s ease}
.faq__item.is-open .faq__sign{transform:rotate(45deg)}
.faq__a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq__a p{padding:0 20px 20px;margin:0;color:var(--muted)}

/* ------------------------------------------------------------- STICKY CTA */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,9,14,.93);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-2);
  transform:translateY(120%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
  display:flex;align-items:center;gap:12px;
}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta__text{flex:1;min-width:0;display:none}
.sticky-cta__text strong{display:block;font-size:.92rem;line-height:1.25}
.sticky-cta__text span{font-size:.76rem;color:var(--muted)}
.sticky-cta .btn{flex:1;padding:15px 20px;font-size:.92rem}
@media(min-width:720px){
  .sticky-cta{justify-content:center;gap:20px}
  .sticky-cta__text{display:block;flex:0 1 auto;text-align:right}
  .sticky-cta .btn{flex:0 0 auto}
}

/* --------------------------------------------------------- WHATSAPP FLOAT */
.wa-float{
  position:fixed;right:16px;z-index:65;
  bottom:calc(16px + var(--sticky-h) + env(safe-area-inset-bottom));
  width:56px;height:56px;border-radius:50%;background:var(--green);
  display:grid;place-items:center;box-shadow:0 12px 30px rgba(0,0,0,.45);
  transition:transform .2s ease,bottom .3s ease;
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:30px;height:30px;fill:#fff}
.wa-float::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 0 rgba(37,211,102,.5);animation:pulse-wa 2.4s infinite;
}
@keyframes pulse-wa{70%{box-shadow:0 0 0 16px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}

/* ------------------------------------------------------------------ MODALS */
.modal{
  position:fixed;inset:0;z-index:90;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(3,5,9,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.modal.is-open{display:flex;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal__box{
  position:relative;width:100%;max-width:470px;max-height:92vh;overflow-y:auto;
  background:linear-gradient(180deg,#171D28,#0E1219);
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  padding:30px 26px;box-shadow:var(--shadow);
  animation:pop .26s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes pop{from{transform:translateY(18px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal__box--wide{max-width:min(980px,96vw);padding:0;background:#05070B;overflow:hidden}
.modal__close{
  position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;
  background:rgba(10,13,19,.8);border:1px solid var(--line-2);color:#fff;
  font-size:1.2rem;cursor:pointer;display:grid;place-items:center;line-height:1;
}
.modal__close:hover{background:rgba(255,255,255,.16)}
.modal h2{font-size:clamp(1.45rem,4.5vw,2rem)}
.modal__kicker{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sun-1);font-weight:800;margin-bottom:10px}
.modal p{color:var(--muted);font-size:.95rem}

/* Lightbox */
.lightbox__media{display:grid;place-items:center;background:#05070B;min-height:200px}
.lightbox__media img{max-height:82vh;width:auto;object-fit:contain}
.lightbox__media iframe,.lightbox__media video{width:min(980px,96vw);aspect-ratio:16/9;border:0}
.lightbox__cap{padding:12px 16px;font-size:.86rem;color:#C3CCDB;text-align:center;border-top:1px solid var(--line)}
.lightbox__arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:44px;height:44px;border-radius:50%;background:rgba(10,13,19,.8);
  border:1px solid var(--line-2);color:#fff;font-size:1.3rem;cursor:pointer;
  display:grid;place-items:center;
}
.lightbox__arrow--prev{left:8px}
.lightbox__arrow--next{right:8px}
.lightbox__arrow:hover{background:rgba(255,255,255,.18)}

/* ------------------------------------------------------------------- FORM */
.field{margin-bottom:14px}
.field label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#AEB8C8;margin-bottom:6px}
.field input{
  width:100%;padding:14px 15px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);
  color:#fff;font-family:inherit;font-size:1rem;
}
.field input:focus{outline:none;border-color:var(--sun-1);box-shadow:0 0 0 3px rgba(255,196,46,.16)}
.field input::placeholder{color:#637084}
.field--hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form__error{color:#FF8A8A;font-size:.84rem;min-height:1.2em;margin:4px 0 8px}
.form__legal{font-size:.74rem;color:#6F7A8C;margin:14px 0 0;line-height:1.5}
.form__legal a{color:#95A0B3}
.form-success{text-align:center;display:none}
.form-success.is-shown{display:block}
.form-success__tick{
  width:64px;height:64px;border-radius:50%;margin:0 auto 16px;
  background:rgba(37,211,102,.14);border:1px solid rgba(37,211,102,.45);
  display:grid;place-items:center;color:var(--green);font-size:1.8rem;
}

/* ----------------------------------------------------------------- FOOTER */
.footer{background:var(--ink-2);border-top:1px solid var(--line);padding:52px 0 40px}
.footer__grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.footer__brand .logo{margin-bottom:12px}
.footer p{color:var(--muted);font-size:.92rem}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer ul a{color:var(--muted);text-decoration:none;font-size:.92rem}
.footer ul a:hover{color:var(--sun-1)}
.footer__title{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:800;margin-bottom:14px}
.footer__bottom{
  margin-top:34px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
  font-size:.8rem;color:#6F7A8C;
}

/* ------------------------------------------------------------- ANIMATIONS */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-in{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}

/* ------------------------------------------------------------- BREAKPOINTS */
@media(min-width:900px){
  .hero__grid{grid-template-columns:1.05fr .95fr;text-align:left}
  .hero__grid .cta-stack{align-items:flex-start}
  .hero__sub,.hero__body{margin-left:0}
  .trust-strip{justify-content:flex-start}
  .breaking{margin-bottom:26px}
}
@media(max-width:520px){
  body{font-size:16px}
  .btn{width:100%}
  .topbar .btn{width:auto}
  .wrap{padding:0 16px}
  .wall{columns:2}
}

/* Simple legal / thank-you pages */
.doc{max-width:760px;margin:0 auto;padding:clamp(40px,8vw,80px) 20px}
.doc h1{font-size:clamp(1.8rem,5vw,2.8rem)}
.doc h2{font-size:clamp(1.15rem,3vw,1.5rem);margin-top:1.6em}
.doc p,.doc li{color:#B6C0CF}
.doc a{color:var(--sun-1)}

/* Tighter cards on small phones so 2-up text still reads well */
@media(max-width:560px){
  .card{padding:18px 16px}
  .card__icon{width:38px;height:38px;font-size:1.15rem;margin-bottom:10px}
  .card p{font-size:.9rem}
  .evidence{padding:16px}
}

/* ---------------------------------------------------------- BRAND LOGO */
.logo__mark{overflow:hidden;background:none;box-shadow:0 0 22px rgba(255,140,0,.35);padding:0}
.logo__mark img{width:100%;height:100%;object-fit:cover;display:block}
.footer .logo__mark{box-shadow:none;width:52px;height:52px;border-radius:14px}

/* -------------------------------------------------------- SECTION CTAs */
.section-cta{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  margin-top:clamp(30px,4vw,44px);text-align:center;
}
.section-cta__btn{
  max-width:min(100%,560px);
  text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(.92rem,2.1vw,1.1rem);
  padding:19px 32px;line-height:1.25;
  text-wrap:balance;
}
.section-cta__btn .btn__icon{flex:0 0 auto;transition:transform .2s ease}
.section-cta__btn:hover .btn__icon{transform:translateX(4px)}

/* Testimonial cards that hold a screenshot rather than a video */
.tcard__media--shot img{object-fit:cover;object-position:top center}
.tcard__media--shot .shot__badge{top:auto;bottom:10px;left:10px}
.tcard__cap{font-style:italic;color:#C3CCDB}

/* The lead modal's body copy changes per section - keep the box stable */
#lead-blurb{min-height:3.2em}

/* ---------------------------------------------- READABLE PROOF GALLERIES
   These tiles hold screenshots whose TEXT is the proof, so they must never
   be cropped. Masonry keeps each screenshot whole at its own aspect ratio. */
.wall--proof{columns:2;column-gap:14px}
@media(min-width:760px){.wall--proof{columns:3}}
.wall--proof .shot{margin:0 0 14px;break-inside:avoid;display:block}
.wall--proof .shot img{aspect-ratio:auto;height:auto;object-fit:contain}

/* Horizontal trust strip: letterbox rather than crop */
.proof-row .shot img{object-fit:contain;background:#0B0E14}

/* Testimonial cards: the quote is the message, the screenshot is the receipt */
.tcard__media--shot img{aspect-ratio:4/3;object-fit:contain;background:#0B0E14;object-position:center}

/* Product-walkthrough tiles hold screenshots too - show them whole */
.flow .shot img{aspect-ratio:4/3;object-fit:contain;background:#0B0E14}
.flow__step .shot__cap{background:linear-gradient(transparent,rgba(0,0,0,.95))}

/* The hero image is a tall phone screenshot - cap it so it doesn't dwarf
   the headline, and show the top where the television is. */
.hero__media img{max-height:min(74vh,640px);width:100%;object-fit:cover;object-position:top center}
@media(max-width:899px){.hero__media img{max-height:52vh}}

/* ------------------------------------------------------- HERO VIDEO ---- */
/* The video is the first thing on the page. It plays a silent preview on
   arrival, then stops and asks to be watched properly. */
.hero__player{width:100%}
.player--hero{box-shadow:var(--shadow),0 0 0 6px rgba(255,255,255,.03),0 0 90px rgba(255,122,0,.18)}
.player--hero .player__ratio{aspect-ratio:16/9}
.player--hero .player__overlay{
  background:linear-gradient(180deg,rgba(0,0,0,.30),rgba(0,0,0,.72));
}
.hero__player-note{
  margin:12px 0 0;text-align:center;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);
}
.hero__player-note::before{
  content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--sun-1);margin-right:8px;vertical-align:middle;
  animation:blink 1.4s steps(1) infinite;
}
@media(max-width:899px){
  /* On a phone the video must still be the first thing seen, so the hero
     puts it above the headline rather than below it. */
  .hero__grid{display:flex;flex-direction:column}
  .hero__player{order:-1;margin-bottom:6px}
  .player--hero .player__label{font-size:1rem}
}
/* The old static hero figure is gone; keep the rule harmless if reused */
.hero__media img{max-height:min(74vh,640px)}

/* The click target must sit above the video frame, or a click on the video
   lands on the embed instead of opening the form. */
.player__overlay{z-index:3}
.player__frame--teaser{pointer-events:none}
.player__overlay.is-quiet{background:transparent;cursor:pointer}
.player__overlay.is-quiet > *{opacity:0;pointer-events:none;transition:opacity .2s ease}
.player__overlay.is-quiet:hover > *{opacity:.85}

/* =========================================================================
   THE POST-VIDEO CTA
   Hidden until the visitor has watched enough of the VSL to be warm.
   ========================================================================= */
.post-vsl{
  margin-top:20px;display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease;
}
.post-vsl.is-in{opacity:1;transform:none}
.post-vsl__note{
  margin:0;text-align:center;font-size:.9rem;color:var(--muted);max-width:44ch;
}
.post-vsl .btn{text-transform:uppercase;letter-spacing:.02em}

/* =========================================================================
   PAGE 2 — CHANNEL PICKER
   ========================================================================= */
.page-packages{
  background:
    radial-gradient(900px 520px at 50% -5%,rgba(255,122,0,.18),transparent 60%),
    var(--ink);
  min-height:100vh;
}
.step-pill{
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sun-1);border:1px solid rgba(255,196,46,.32);
  background:rgba(255,196,46,.07);padding:7px 14px;border-radius:999px;
}
.packages{padding:clamp(32px,5vw,64px) 0 clamp(60px,8vw,100px)}
.packages__head{max-width:720px;margin:0 auto clamp(30px,4vw,46px)}
.packages__head h1{font-size:clamp(1.9rem,6vw,3.4rem);margin-bottom:.35em}

.progress-rail{
  margin:26px auto 0;max-width:340px;height:6px;border-radius:99px;
  background:rgba(255,255,255,.08);overflow:hidden;
}
.progress-rail__fill{
  display:block;height:100%;width:50%;border-radius:99px;
  background:var(--sun-grad);transition:width .4s cubic-bezier(.2,.8,.3,1);
}

.pk-group{border:0;margin:0 0 clamp(26px,4vw,38px);padding:0}
.pk-group__title{
  display:flex;align-items:center;gap:10px;padding:0 0 14px;
  font-family:'Anton',sans-serif;text-transform:uppercase;
  font-size:clamp(1.05rem,2.6vw,1.4rem);color:#fff;letter-spacing:.02em;
}
.pk-group__icon{font-size:1.15em;line-height:1}

.pk-grid{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:700px){.pk-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1000px){.pk-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pk-card--wide{grid-column:1/-1}

.pk-card{
  position:relative;display:flex;align-items:flex-start;gap:12px;
  padding:16px 16px 16px 14px;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1.5px solid var(--line);border-radius:14px;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
  min-height:62px;
}
.pk-card:hover{border-color:rgba(255,196,46,.45);transform:translateY(-2px)}
.pk-card:active{transform:translateY(0)}
.pk-card__input{position:absolute;opacity:0;width:1px;height:1px}

.pk-card__box{
  flex:0 0 auto;width:24px;height:24px;border-radius:7px;margin-top:1px;
  border:2px solid var(--line-2);background:rgba(0,0,0,.25);
  display:grid;place-items:center;color:#1A0E00;
  transition:background .18s ease,border-color .18s ease;
}
.pk-card__box svg{width:15px;height:15px;opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease}

.pk-card__text{display:flex;flex-direction:column;gap:3px;min-width:0}
.pk-card__label{font-weight:700;font-size:.98rem;line-height:1.3;color:#EDF1F8}
.pk-card__note{font-size:.82rem;line-height:1.4;color:var(--muted)}

/* Selected state - unmistakable at a glance */
.pk-card.is-on{
  border-color:var(--sun-1);
  background:linear-gradient(180deg,rgba(255,196,46,.14),rgba(255,122,0,.06));
  box-shadow:0 8px 26px rgba(255,140,0,.16);
}
.pk-card.is-on .pk-card__box{background:var(--sun-grad);border-color:transparent}
.pk-card.is-on .pk-card__box svg{opacity:1;transform:scale(1)}
.pk-card.is-on .pk-card__label{color:#fff}
.pk-card__input:focus-visible + .pk-card__box{outline:3px solid rgba(255,196,46,.5);outline-offset:2px}

.packages__actions{
  position:sticky;bottom:0;z-index:5;
  margin-top:clamp(26px,4vw,40px);
  padding:16px 0 calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(transparent,var(--ink) 26%);
}
.packages__count{
  text-align:center;margin-bottom:12px;
  font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);transition:color .2s ease;
}
.packages__count.is-active{color:var(--sun-1)}

.packages__done{max-width:620px;margin:0 auto;text-align:center;padding:clamp(30px,6vw,60px) 0}
.packages__done h2{font-size:clamp(1.6rem,5vw,2.5rem)}

@media(max-width:520px){
  .pk-card{padding:14px 12px;min-height:58px}
  .pk-card__label{font-size:.92rem}
  .pk-grid{gap:10px}
}

/* ---------------------------------------------------- THUMBNAIL ON VIDEO */
.player__poster{opacity:1}
.player__overlay.on-thumb{background:transparent}
.player__overlay.on-thumb > *{opacity:0}
.player__overlay.on-thumb:hover{background:rgba(0,0,0,.12)}

/* -------------------------------------------------------- MINI PLAYER */
/* The hero video detaches into the corner once the hero scrolls away. */
.player__mini-close{display:none}
.player--hero.is-floating{
  position:fixed;z-index:80;right:16px;
  bottom:calc(16px + var(--sticky-h) + env(safe-area-inset-bottom));
  width:min(360px,46vw);border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.7),0 0 0 2px rgba(255,196,46,.55);
  animation:miniIn .3s cubic-bezier(.2,.9,.3,1.1);
}
.player--hero.is-floating::after{border-radius:14px}
.player--hero.is-floating .player__label,
.player--hero.is-floating .player__hint{display:none}
.player--hero.is-floating .player__play{width:46px;height:46px;box-shadow:0 0 0 6px rgba(255,140,0,.18)}
.player--hero.is-floating .player__mini-close{
  display:grid;place-items:center;position:absolute;top:6px;left:6px;z-index:6;
  width:30px;height:30px;border-radius:50%;cursor:pointer;
  background:rgba(14,18,25,.85);border:1px solid var(--line-2);color:#fff;font-size:1.1rem;line-height:1;
}
@keyframes miniIn{from{transform:translateY(24px) scale(.9);opacity:0}to{transform:none;opacity:1}}
/* keep the WhatsApp button clear of the mini player */
body.has-mini .wa-float{bottom:calc(16px + var(--sticky-h) + env(safe-area-inset-bottom) + min(360px,46vw) * .5625 + 16px)}
@media(max-width:520px){
  .player--hero.is-floating{right:10px;width:52vw;bottom:calc(10px + var(--sticky-h) + env(safe-area-inset-bottom))}
  body.has-mini .wa-float{bottom:calc(10px + var(--sticky-h) + 52vw * .5625 + 18px)}
}

/* =========================================================================
   VIDEO PAGE (watch.html) - the video, a few headings, nothing else
   ========================================================================= */
.page-watch{
  background:radial-gradient(1000px 560px at 50% -10%,rgba(255,122,0,.18),transparent 60%),var(--ink);
  min-height:100vh;display:flex;flex-direction:column;
}
.watch-top{display:flex;justify-content:center;padding:16px 16px 4px}
.watch-top .logo{font-size:1.15rem}
.watch{flex:1}
.watch__wrap{max-width:980px;padding-top:clamp(10px,2vw,20px);padding-bottom:40px}
.watch__head{margin-bottom:clamp(14px,2.5vw,24px)}
.watch__head .eyebrow{margin-bottom:12px}
.watch__head h1{font-size:clamp(1.5rem,4.6vw,2.7rem);margin:0 auto;max-width:22ch}

.vp{background:#000;border:1px solid var(--line-2);border-radius:18px;overflow:hidden;
  box-shadow:var(--shadow),0 0 0 6px rgba(255,255,255,.03),0 0 100px rgba(255,122,0,.16)}
.vp__ratio{position:relative;aspect-ratio:16/9;background:#05070B}
.vp__mount,.vp__mount iframe,.vp__mount video,.vp__poster{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp__poster{object-fit:cover;z-index:1}
.vp__mount{z-index:0}
.vp__mount iframe{pointer-events:none}          /* the shield takes every click */
.vp__shield{position:absolute;inset:0;z-index:3;background:transparent;border:0;cursor:pointer;padding:0}

.vp__sound{
  position:absolute;z-index:5;left:50%;bottom:18px;transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;padding:12px 20px;border-radius:999px;cursor:pointer;
  background:var(--sun-grad);color:#1A0E00;border:0;font:800 .95rem/1 'Inter',sans-serif;
  text-transform:uppercase;letter-spacing:.04em;box-shadow:0 10px 30px rgba(0,0,0,.55);white-space:nowrap;
  animation:pulse 2.2s ease-in-out infinite;
}
.vp__sound svg{width:22px;height:22px}

.vp__paused{position:absolute;inset:0;z-index:4;display:grid;place-content:center;justify-items:center;gap:14px;
  background:rgba(4,6,10,.72);cursor:pointer;text-align:center;padding:16px}
.vp__big{width:clamp(64px,11vw,88px);height:clamp(64px,11vw,88px);border-radius:50%;background:var(--sun-grad);
  display:grid;place-items:center;box-shadow:0 0 0 12px rgba(255,140,0,.16)}
.vp__big svg{width:36%;height:36%;fill:#1A0E00;margin-left:8%}
.vp__paused-label{font-family:'Anton',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:#fff;font-size:clamp(.95rem,2.4vw,1.2rem)}

.vp__toast{position:absolute;z-index:6;top:14px;left:50%;transform:translateX(-50%);
  background:rgba(10,13,19,.92);border:1px solid rgba(255,196,46,.5);color:#fff;
  padding:9px 16px;border-radius:999px;font-size:.85rem;font-weight:700;white-space:nowrap;max-width:92%;overflow:hidden;text-overflow:ellipsis}

/* Progress bar: shows position, cannot be dragged. */
.vp__bar{position:relative;height:6px;background:rgba(255,255,255,.1)}
.vp__bar-max{position:absolute;inset:0 auto 0 0;width:0;background:rgba(255,196,46,.28)}
.vp__bar-now{position:absolute;inset:0 auto 0 0;width:0;background:var(--sun-grad);transition:width .25s linear}
.vp__bar-mark{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1px;background:#fff;border-radius:2px;
  box-shadow:0 0 8px rgba(255,255,255,.7)}

.vp__controls{display:flex;align-items:center;gap:4px;padding:8px 10px;background:#0B0E14}
.vp__btn{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;border:0;cursor:pointer;
  background:transparent;color:#DDE3EE}
.vp__btn:hover{background:rgba(255,255,255,.08)}
.vp__btn svg{width:24px;height:24px}
.vp__btn[hidden]{display:none}
#vp-mute.is-muted{color:#FF8A8A}
.vp__time{font-size:.85rem;font-variant-numeric:tabular-nums;color:var(--muted);margin-left:6px}
.vp__spacer{flex:1}
.vp:fullscreen{border-radius:0;display:flex;flex-direction:column;justify-content:center}
.vp:fullscreen .vp__ratio{max-height:calc(100vh - 64px);aspect-ratio:16/9;width:100%}

.watch__resume{margin:12px 0 0;text-align:center;color:var(--sun-1);font-size:.88rem;font-weight:700}
.watch__locked{margin:16px auto 0;text-align:center;font-size:.92rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted)}
.watch__lock{font-size:1.05em}

.unlock{margin:22px auto 0;max-width:620px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px;
  opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.unlock.is-in{opacity:1;transform:none}
.unlock__kicker{margin:0;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--sun-1);font-size:.9rem}
.unlock__btn{text-transform:uppercase;font-size:clamp(1.02rem,3vw,1.3rem);padding:22px 38px;
  background:linear-gradient(100deg,#FF3B30,#FF7A00);color:#fff;box-shadow:0 16px 40px rgba(255,59,48,.4)}
.unlock__note{margin:0;color:var(--muted);font-size:.9rem;max-width:46ch}

.watch__list{margin:clamp(30px,5vw,46px) auto 0;max-width:640px}
.watch__list h2{text-align:center;font-size:clamp(1.15rem,3vw,1.5rem);margin-bottom:16px}

.watch-foot{display:flex;justify-content:center;gap:18px;padding:22px 16px calc(22px + env(safe-area-inset-bottom));
  font-size:.78rem;color:#6F7A8C;border-top:1px solid var(--line)}
.watch-foot a{color:#6F7A8C}
@media(max-width:520px){
  .watch__wrap{padding-left:0;padding-right:0}
  .watch__head{padding:0 16px}
  .vp{border-radius:0;border-left:0;border-right:0}
  .watch__resume,.watch__locked,.unlock,.watch__list{padding:0 16px}
  .unlock__btn{width:100%}
}

/* `hidden` must always win. Without this, any element with a display rule
   (flex, grid) ignores the attribute and shows anyway. */
[hidden]{display:none !important}