/* =========================================================
   SETUP TV EXPERT — Design tokens
   Display: Space Grotesk | Body: Inter | Utility: IBM Plex Mono
   ========================================================= */
:root{
  --ink:#0B1220;
  --ink-soft:#121B2E;
  --signal:#2F6FED;
  --signal-dark:#1E4FC4;
  --signal-light:#E8F0FE;
  --amber:#FFB020;
  --amber-dark:#E29200;
  --green:#22C55E;
  --cloud:#F7F9FC;
  --white:#FFFFFF;
  --slate:#4B5768;
  --slate-dark:#111827;
  --line:#E2E8F0;

  --font-display:'Space Grotesk', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --radius:14px;
  --radius-sm:8px;
  --shadow-sm:0 2px 8px rgba(11,18,32,.06);
  --shadow-md:0 12px 32px rgba(11,18,32,.12);
  --shadow-lg:0 24px 60px rgba(11,18,32,.18);
  --container:1180px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--slate);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  color:var(--slate-dark);
  margin:0 0 .5em;
  line-height:1.15;
  letter-spacing:-.01em;
}
p{margin:0 0 1em;}
ul{margin:0; padding:0; list-style:none;}
button{font-family:inherit; cursor:pointer;}
.container{width:100%; max-width:var(--container); margin:0 auto; padding:0 24px;}
.section{padding:88px 0;}
.section-tight{padding:56px 0;}
.section-dark{background:var(--ink); color:#CBD5E1;}
.section-dark h2, .section-dark h3{color:#fff;}
.section-cloud{background:var(--cloud);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  font-weight:500;
}
.eyebrow::before{
  content:'';
  width:22px; height:2px;
  background:var(--amber);
  display:inline-block;
}
.section-head{max-width:640px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
h2{font-size:clamp(28px,4vw,40px);}
.lede{font-size:17px; color:var(--slate);}
.section-dark .lede{color:#9FB0C9;}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px;
  border-radius:999px;
  font-weight:600;
  font-size:15px;
  border:2px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.btn-primary{background:var(--amber); color:var(--ink);}
.btn-primary:hover{background:var(--amber-dark); transform:translateY(-2px); box-shadow:var(--shadow-md);}
.btn-outline{background:transparent; border-color:rgba(255,255,255,.35); color:#fff;}
.btn-outline:hover{border-color:#fff; transform:translateY(-2px);}
.btn-ghost{background:var(--signal-light); color:var(--signal-dark);}
.btn-ghost:hover{background:#dbe7fd; transform:translateY(-2px);}
.btn-block{width:100%;}
.btn-sm{padding:10px 18px; font-size:14px;}
.btn svg{width:18px; height:18px; flex:none;}

/* ================= HEADER ================= */
.topbar{
  background:var(--ink);
  color:#B9C4D6;
  font-family:var(--font-mono);
  font-size:12.5px;
}
.topbar .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:8px; padding-bottom:8px;
  gap:16px;
  flex-wrap:wrap;
}
.topbar a{color:#B9C4D6;}
.topbar a:hover{color:#fff;}
.topbar-links{display:flex; gap:18px; align-items:center;}
.topbar-links .dot{width:6px;height:6px;border-radius:50%;background:var(--green); display:inline-block; margin-right:6px; box-shadow:0 0 0 3px rgba(34,197,94,.2);}

.site-header{
  position:sticky; top:0; z-index:200;
  background:rgba(11,18,32,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-weight:700; font-size:20px;
  color:#fff;
}
.logo .mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(145deg, var(--signal), var(--signal-dark));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 4px rgba(47,111,237,.15);
}
.logo .mark svg{width:20px; height:20px; color:#fff;}
.logo span.sub{display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--amber); font-weight:500; letter-spacing:.08em;}

.nav{display:flex; align-items:center; gap:32px;}
.nav-links{display:flex; gap:28px; align-items:center;}
.nav-links a{
  color:#CBD5E1; font-weight:500; font-size:14.5px;
  padding:8px 0; position:relative;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--amber); transition:width .2s ease;
}
.nav-links a:hover{color:#fff;}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}
.nav-links a.active{color:#fff;}
.header-cta{display:flex; align-items:center; gap:12px;}
.header-cta .call{
  display:flex; align-items:center; gap:8px;
  color:#fff; font-family:var(--font-mono); font-size:14px; font-weight:500;
}
.header-cta .call svg{width:18px;height:18px; color:var(--amber);}
.menu-toggle{
  display:none; background:none; border:none; padding:8px; color:#fff;
}
.menu-toggle svg{width:26px; height:26px;}

@media (max-width:960px){
  .nav-links{
    position:fixed; inset:76px 0 0 0; height:calc(100vh - 76px);
    background:var(--ink); flex-direction:column; align-items:flex-start;
    padding:32px 24px; gap:6px;
    transform:translateX(100%); transition:transform .28s ease;
    overflow-y:auto;
  }
  .nav-links.open{transform:translateX(0);}
  .nav-links a{width:100%; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.08); font-size:17px;}
  .menu-toggle{display:block;}
  .header-cta .call span{display:none;}
  .topbar-links{gap:12px;}
}

/* ================= HERO ================= */
.hero{
  background:radial-gradient(ellipse at top right, rgba(47,111,237,.28), transparent 55%), var(--ink);
  color:#fff;
  padding:76px 0 96px;
  position:relative;
  overflow:hidden;
}
.hero .container{
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero h1{
  color:#fff; font-size:clamp(34px,5vw,56px); margin-bottom:20px;
}
.hero h1 em{
  font-style:normal; color:var(--amber);
  background:linear-gradient(180deg, transparent 62%, rgba(255,176,32,.25) 62%);
}
.hero p.lede{color:#A9B7CC; font-size:18px; max-width:520px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:36px;}
.hero-trust{display:flex; gap:28px; flex-wrap:wrap;}
.hero-trust .item{display:flex; align-items:center; gap:8px; font-size:13.5px; color:#9FB0C9;}
.hero-trust svg{width:18px; height:18px; color:var(--green);}

/* TV mockup — signature element */
.tv-mock{position:relative;}
.tv-frame{
  background:linear-gradient(160deg,#1B2740,#0E1524);
  border-radius:20px;
  padding:14px;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.06);
  position:relative;
}
.tv-screen{
  border-radius:10px;
  aspect-ratio:16/10;
  background:#050810;
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.tv-screen .grid-glow{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(47,111,237,.10) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(47,111,237,.10) 0 1px, transparent 1px 26px);
  opacity:.6;
}
.tv-screen .scanline{
  position:absolute; left:0; right:0; height:40%;
  background:linear-gradient(180deg, rgba(47,111,237,0) 0%, rgba(47,111,237,.35) 50%, rgba(47,111,237,0) 100%);
  animation:scan 3.2s linear infinite;
}
@keyframes scan{0%{top:-40%;} 100%{top:100%;}}
.tv-signal{
  position:relative; z-index:2; text-align:center; color:#fff;
}
.tv-signal .bars{display:flex; gap:5px; align-items:flex-end; justify-content:center; height:46px; margin-bottom:14px;}
.tv-signal .bars i{
  display:block; width:7px; border-radius:3px;
  background:var(--amber);
  animation:eq 1.1s ease-in-out infinite;
}
.tv-signal .bars i:nth-child(1){height:40%; animation-delay:0s;}
.tv-signal .bars i:nth-child(2){height:70%; animation-delay:.12s;}
.tv-signal .bars i:nth-child(3){height:100%; animation-delay:.24s;}
.tv-signal .bars i:nth-child(4){height:55%; animation-delay:.36s;}
.tv-signal .bars i:nth-child(5){height:85%; animation-delay:.48s;}
@keyframes eq{0%,100%{transform:scaleY(.4);} 50%{transform:scaleY(1);}}
.tv-signal .status{font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--green); text-transform:uppercase;}
.tv-stand{width:64px; height:10px; background:#1B2740; margin:0 auto; border-radius:0 0 6px 6px;}
.tv-stand-base{width:120px; height:6px; background:#0E1524; margin:0 auto; border-radius:4px;}
.tv-badge{
  position:absolute; top:-16px; right:18px;
  background:var(--white); color:var(--ink);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  padding:8px 14px; border-radius:999px; box-shadow:var(--shadow-md);
  display:flex; align-items:center; gap:6px;
}
.tv-badge .dot{width:7px; height:7px; border-radius:50%; background:var(--green);}
.float-card{
  position:absolute; bottom:-22px; left:-22px;
  background:#fff; color:var(--slate-dark);
  border-radius:12px; padding:14px 18px;
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:12px;
  max-width:230px;
}
.float-card .icon{width:38px; height:38px; border-radius:8px; background:var(--signal-light); display:flex; align-items:center; justify-content:center; flex:none;}
.float-card .icon svg{width:20px; height:20px; color:var(--signal);}
.float-card strong{display:block; font-size:14px;}
.float-card span{font-size:12px; color:var(--slate);}

@media (max-width:960px){
  .hero .container{grid-template-columns:1fr; gap:48px;}
  .hero{padding:44px 0 72px; text-align:left;}
  .float-card{position:static; margin-top:20px; max-width:none;}
}

/* ================= LOGO / TRUST STRIP ================= */
.trust-strip{padding:28px 0; border-bottom:1px solid var(--line);}
.trust-strip .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px;
}
.trust-strip .label{font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--slate); text-transform:uppercase; flex:none;}
.trust-strip .marks{display:flex; gap:32px; flex-wrap:wrap; align-items:center;}
.trust-strip .marks span{font-family:var(--font-display); font-weight:700; font-size:17px; color:#9AA6B8; letter-spacing:.02em;}

/* ================= FEATURE / SERVICE CARDS ================= */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:28px;}
@media (max-width:960px){.grid-3, .grid-4{grid-template-columns:1fr 1fr;}}
@media (max-width:640px){.grid-3, .grid-4, .grid-2{grid-template-columns:1fr;}}

.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:transparent;}
.card .icon{
  width:52px; height:52px; border-radius:12px;
  background:var(--signal-light); color:var(--signal);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px;
}
.card .icon svg{width:26px; height:26px;}
.card h3{font-size:19px; margin-bottom:10px;}
.card p{font-size:14.5px; margin-bottom:14px;}
.card ul li{
  font-size:13.5px; color:var(--slate); padding:6px 0 6px 26px; position:relative;
}
.card ul li::before{
  content:''; position:absolute; left:0; top:11px; width:14px; height:14px; border-radius:50%;
  background:var(--signal-light);
}
.card ul li::after{
  content:''; position:absolute; left:4.5px; top:15.5px; width:5px; height:5px; border-radius:50%;
  background:var(--signal);
}

.service-card.featured{
  background:linear-gradient(165deg, var(--ink), var(--ink-soft));
  border-color:transparent; color:#CBD5E1;
}
.service-card.featured h3, .service-card.featured{color:#fff;}
.service-card.featured .icon{background:rgba(255,176,32,.15); color:var(--amber);}
.service-card.featured p{color:#9FB0C9;}
.service-card.featured ul li{color:#B9C4D6;}
.service-card.featured ul li::before{background:rgba(255,255,255,.1);}
.service-card.featured ul li::after{background:var(--amber);}

/* ================= WHY US STAT / WORLD BLOCKS ================= */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;}}
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;}
@media (max-width:760px){.stat-row{grid-template-columns:1fr 1fr;}}
.stat{padding:20px 10px;}
.stat .num{font-family:var(--font-mono); font-size:clamp(28px,4vw,40px); font-weight:600; color:var(--amber);}
.stat .lbl{font-size:13px; color:#9FB0C9; margin-top:6px;}

/* ================= PROCESS / "CHANNEL" STEPS ================= */
.process-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative;}
@media (max-width:900px){.process-steps{grid-template-columns:1fr; gap:36px;}}
.process-step{position:relative; padding:0 28px;}
.process-step:first-child{padding-left:0;}
.process-step:last-child{padding-right:0;}
.process-step .ch{
  font-family:var(--font-mono); font-size:13px; color:var(--signal); font-weight:600;
  display:inline-flex; align-items:center; gap:8px; margin-bottom:16px;
  border:1px solid var(--line); padding:6px 12px; border-radius:999px;
}
.process-step .ch::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--green);}
.process-step h3{font-size:19px; margin-bottom:10px;}
.process-step p{font-size:14.5px;}
.process-steps .process-step:not(:last-child)::after{
  content:''; position:absolute; top:14px; right:-2px; width:60px; height:1px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  display:none;
}
@media (min-width:901px){.process-steps .process-step:not(:last-child)::after{display:block;}}

/* ================= PRICING ================= */
.plan-tabs{display:flex; justify-content:center; gap:10px; margin-bottom:44px; flex-wrap:wrap;}
.plan-tab{
  padding:11px 22px; border-radius:999px; border:1px solid var(--line);
  font-weight:600; font-size:14px; background:#fff; color:var(--slate);
}
.plan-tab.active{background:var(--ink); color:#fff; border-color:var(--ink);}
.pricing-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:22px;}
@media (max-width:960px){.pricing-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; display:flex; flex-direction:column; position:relative;
}
.price-card.popular{border-color:var(--signal); box-shadow:0 0 0 4px var(--signal-light);}
.price-card .tag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--amber); color:var(--ink); font-family:var(--font-mono);
  font-size:11px; font-weight:700; padding:5px 14px; border-radius:999px; letter-spacing:.06em;
}
.price-card .period{font-family:var(--font-mono); font-size:12px; color:var(--slate); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;}
.price-card .amount{font-family:var(--font-mono); font-size:34px; font-weight:700; color:var(--slate-dark); margin-bottom:2px;}
.price-card .amount span{font-size:14px; font-weight:500; color:var(--slate);}
.price-card .divider{height:1px; background:var(--line); margin:18px 0;}
.price-card ul{margin-bottom:22px; flex:1;}
.price-card ul li{
  font-size:13.5px; padding:7px 0 7px 24px; position:relative; color:var(--slate);
}
.price-card ul li::before{
  content:'✓'; position:absolute; left:0; top:6px; color:var(--green); font-weight:700; font-size:12px;
}

/* ================= TESTIMONIALS ================= */
.testimonial-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
@media (max-width:900px){.testimonial-grid{grid-template-columns:1fr;}}
.t-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px;}
.t-card .stars{color:var(--amber); font-size:14px; margin-bottom:14px; letter-spacing:2px;}
.t-card p{font-size:14.5px; color:var(--slate-dark); margin-bottom:18px;}
.t-card .who{display:flex; align-items:center; gap:12px;}
.t-card .avatar{
  width:42px; height:42px; border-radius:50%;
  background:var(--signal-light); color:var(--signal-dark);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--font-display);
}
.t-card .who strong{display:block; font-size:14px; color:var(--slate-dark);}
.t-card .who span{font-size:12px; color:var(--slate);}

/* ================= CTA BAND ================= */
.cta-band{
  background:linear-gradient(120deg, var(--signal-dark), var(--signal));
  color:#fff; border-radius:20px; padding:52px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
}
.cta-band h2{color:#fff; margin-bottom:8px; font-size:28px;}
.cta-band p{color:rgba(255,255,255,.85); margin-bottom:0;}
.cta-band .btn-primary{background:#fff; color:var(--signal-dark);}
.cta-band .btn-primary:hover{background:var(--amber); color:var(--ink);}

/* ================= FAQ ================= */
.faq-list{max-width:820px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; padding:22px 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  font-family:var(--font-display); font-size:16.5px; font-weight:600; color:var(--slate-dark);
}
.faq-q svg{width:20px; height:20px; flex:none; color:var(--signal); transition:transform .2s ease;}
.faq-item.open .faq-q svg{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 0 22px; font-size:14.5px; max-width:680px;}
.faq-item.open .faq-a{max-height:400px;}

/* ================= CONTACT ================= */
.contact-wrap{display:grid; grid-template-columns:.9fr 1.1fr; gap:48px;}
@media (max-width:900px){.contact-wrap{grid-template-columns:1fr;}}
.contact-info-card{
  background:var(--ink); color:#fff; border-radius:var(--radius); padding:36px;
}
.contact-info-card h3{color:#fff; font-size:20px;}
.contact-info-card p{color:#9FB0C9; font-size:14.5px;}
.contact-info-row{display:flex; gap:14px; align-items:flex-start; margin-bottom:22px;}
.contact-info-row .icon{
  width:40px; height:40px; border-radius:10px; background:rgba(47,111,237,.18); color:#8FB0FF;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.contact-info-row .icon svg{width:19px; height:19px;}
.contact-info-row strong{display:block; color:#fff; font-size:14.5px; margin-bottom:2px;}
.contact-info-row span, .contact-info-row a{font-size:13.5px; color:#9FB0C9;}
.social-row{display:flex; gap:10px; margin-top:26px;}
.social-row a{
  width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.social-row a:hover{background:var(--signal);}
.social-row svg{width:17px; height:17px;}

.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:36px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:18px;}
.field label{display:block; font-size:13px; font-weight:600; color:var(--slate-dark); margin-bottom:7px;}
.field input, .field select, .field textarea{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-family:inherit; font-size:14.5px; color:var(--slate-dark); background:var(--cloud);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--signal); box-shadow:0 0 0 3px var(--signal-light); background:#fff;
}
.field textarea{resize:vertical; min-height:110px;}
.form-note{font-size:12px; color:var(--slate); margin-top:10px;}

/* ================= FOOTER ================= */
.site-footer{background:var(--ink); color:#93A2BA; padding:64px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:48px;}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}
.footer-grid h4{color:#fff; font-size:14px; letter-spacing:.03em; margin-bottom:18px; font-family:var(--font-display);}
.footer-grid p{font-size:13.5px; color:#8592A8;}
.footer-grid ul li{margin-bottom:11px;}
.footer-grid ul a{font-size:13.5px; color:#93A2BA;}
.footer-grid ul a:hover{color:var(--amber);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.08); padding:22px 0 90px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:#6E7C93;
}
.footer-bottom a{color:#93A2BA;}

/* ================= STICKY MOBILE CTA ================= */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:var(--ink); border-top:1px solid rgba(255,255,255,.08);
  display:none; padding:10px 14px;
  box-shadow:0 -6px 24px rgba(0,0,0,.25);
}
.sticky-cta .row{display:flex; gap:10px;}
.sticky-cta a{flex:1; text-align:center; padding:13px; border-radius:999px; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center; gap:8px;}
.sticky-cta .call{background:var(--amber); color:var(--ink);}
.sticky-cta .wa{background:#25D366; color:#fff;}
.sticky-cta svg{width:17px; height:17px;}
@media (max-width:760px){.sticky-cta{display:block;} body{padding-bottom:74px;}}

/* ================= PAGE HERO (inner pages) ================= */
.page-hero{
  background:radial-gradient(ellipse at top left, rgba(47,111,237,.28), transparent 55%), var(--ink);
  color:#fff; padding:56px 0 60px; text-align:center;
}
.page-hero h1{color:#fff; font-size:clamp(30px,4.5vw,46px); margin-bottom:12px;}
.page-hero .crumb{font-family:var(--font-mono); font-size:12.5px; color:#9FB0C9; letter-spacing:.06em;}
.page-hero .crumb a{color:var(--amber);}
.page-hero p{color:#9FB0C9; max-width:560px; margin:12px auto 0;}

/* ================= UTIL ================= */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.legal p, .legal li{font-size:14.5px; color:var(--slate);}
.legal h2{font-size:22px; margin-top:36px;}
.legal ul{margin:0 0 16px 0; padding-left:0;}
.legal ul li{padding-left:22px; position:relative; margin-bottom:8px;}
.legal ul li::before{content:'—'; position:absolute; left:0; color:var(--signal);}
.legal{max-width:820px; margin:0 auto;}

[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
[data-reveal].in{opacity:1; transform:translateY(0);}

/* =========================================================
   DEVICE ACTIVATION LANDING PAGE (activate.php)
   Minimal chrome, single conversion goal — matches
   Google Ads landing-page best practice.
   ========================================================= */
.mini-header{
  background:var(--ink); border-bottom:1px solid rgba(255,255,255,.06);
  padding:18px 0;
}
.mini-header .container{display:flex; align-items:center; justify-content:space-between;}
.mini-header .call{
  display:flex; align-items:center; gap:8px; color:#fff;
  font-family:var(--font-mono); font-size:14px; font-weight:500;
}
.mini-header .call svg{width:18px; height:18px; color:var(--amber);}

.activate-hero{
  background:radial-gradient(ellipse at top, rgba(47,111,237,.30), transparent 60%), var(--ink);
  padding:64px 0 90px;
  position:relative;
  overflow:hidden;
}
.activate-hero::before{
  content:'';
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 34px);
  pointer-events:none;
}
.activate-wrap{
  max-width:520px; margin:0 auto; position:relative; z-index:2;
  text-align:center;
}
.activate-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:#CBD5E1; font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  padding:8px 16px; border-radius:999px; margin-bottom:22px; text-transform:uppercase;
}
.activate-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.25);}
.activate-hero h1{color:#fff; font-size:clamp(28px,4.4vw,42px); margin-bottom:12px;}
.activate-hero > .container > p{color:#9FB0C9; font-size:16px; max-width:440px; margin:0 auto 40px;}

.activate-card{
  background:#fff; border-radius:20px; padding:40px 36px;
  box-shadow:var(--shadow-lg); text-align:left;
}
.activate-card .step-label{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--signal); font-weight:600; margin-bottom:8px; display:block;
}
.activate-card h2{font-size:20px; margin-bottom:6px;}
.activate-card .hint{font-size:13.5px; color:var(--slate); margin-bottom:26px;}

.code-input-group{display:flex; gap:8px; justify-content:center; margin-bottom:8px;}
.code-input-group input{
  width:44px; height:56px; text-align:center;
  font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--slate-dark);
  border:2px solid var(--line); border-radius:10px; background:var(--cloud);
  text-transform:uppercase;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.code-input-group input:focus{
  outline:none; border-color:var(--signal); box-shadow:0 0 0 4px var(--signal-light); background:#fff;
}
.code-input-group input.filled{border-color:var(--signal); background:#fff;}
@media (max-width:420px){
  .code-input-group{gap:6px;}
  .code-input-group input{width:36px; height:48px; font-size:18px;}
}
.code-caption{font-size:12px; color:var(--slate); text-align:center; margin-bottom:26px;}
.code-caption strong{color:var(--slate-dark);}

.activate-divider{height:1px; background:var(--line); margin:26px 0;}

.activate-card .field label{font-size:13px;}
.activate-card .btn-block{margin-top:6px; padding:16px; font-size:15.5px;}

.activate-trust{
  display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:28px;
}
.activate-trust .item{
  display:flex; align-items:center; gap:7px; font-size:12.5px; color:#9FB0C9;
}
.activate-trust svg{width:16px; height:16px; color:var(--green);}

.device-illustration{
  display:flex; justify-content:center; gap:18px; margin-bottom:34px;
}
.device-illustration .chip{
  width:52px; height:52px; border-radius:12px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  display:flex; align-items:center; justify-content:center; color:#CBD5E1;
}
.device-illustration .chip svg{width:24px; height:24px;}

.help-strip{
  margin-top:32px; text-align:center; color:#9FB0C9; font-size:13.5px;
}
.help-strip a{color:var(--amber); font-weight:600;}

/* Success / redirect confirmation page */
.success-card{
  background:#fff; border-radius:20px; padding:48px 36px; text-align:center;
  box-shadow:var(--shadow-lg);
}
.success-icon{
  width:76px; height:76px; border-radius:50%; margin:0 auto 22px;
  background:rgba(34,197,94,.12); display:flex; align-items:center; justify-content:center;
  animation:pop .5s ease;
}
.success-icon svg{width:36px; height:36px; color:var(--green);}
@keyframes pop{0%{transform:scale(.6); opacity:0;} 100%{transform:scale(1); opacity:1;}}
.success-card h2{font-size:22px; margin-bottom:10px;}
.success-card p{font-size:14.5px; color:var(--slate);}
.success-steps{
  text-align:left; margin:28px 0; display:grid; gap:14px;
}
.success-steps .row{display:flex; gap:12px; align-items:flex-start;}
.success-steps .num{
  width:26px; height:26px; border-radius:50%; background:var(--signal-light); color:var(--signal-dark);
  font-family:var(--font-mono); font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex:none;
}
.success-steps p{margin:0; font-size:13.5px; color:var(--slate-dark);}

/* ===== Verification-required / call-to-activate page ===== */
.alert-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,176,32,.12); border:1px solid rgba(255,176,32,.35);
  color:var(--amber-dark); font-family:var(--font-mono); font-size:12px; letter-spacing:.08em;
  padding:8px 16px; border-radius:999px; margin-bottom:22px; text-transform:uppercase; font-weight:600;
}
.alert-badge .dot{width:6px; height:6px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 3px rgba(255,176,32,.25);}

.alert-icon{
  width:76px; height:76px; border-radius:50%; margin:0 auto 22px;
  background:rgba(255,176,32,.12); display:flex; align-items:center; justify-content:center;
  position:relative;
}
.alert-icon svg{width:34px; height:34px; color:var(--amber-dark);}
.alert-icon::after{
  content:''; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(255,176,32,.35);
  animation:pulse-ring 2s ease-out infinite;
}
@keyframes pulse-ring{
  0%{transform:scale(.9); opacity:1;}
  100%{transform:scale(1.35); opacity:0;}
}

.warning-box{
  background:#FFF8EC; border:1px solid rgba(255,176,32,.4); border-radius:12px;
  padding:16px 18px; margin:22px 0; text-align:left;
  display:flex; gap:12px; align-items:flex-start;
}
.warning-box svg{width:20px; height:20px; color:var(--amber-dark); flex:none; margin-top:1px;}
.warning-box p{margin:0; font-size:13.5px; color:#8a5a05; line-height:1.55;}
.warning-box strong{color:#6b4400;}

.call-cta-big{
  display:flex; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(135deg, var(--amber), var(--amber-dark));
  color:var(--ink); font-family:var(--font-display); font-weight:700; font-size:19px;
  padding:18px 24px; border-radius:14px; width:100%;
  box-shadow:0 10px 28px rgba(255,176,32,.35);
  transition:transform .15s ease, box-shadow .15s ease;
  margin:6px 0;
}
.call-cta-big:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(255,176,32,.45);}
.call-cta-big svg{width:24px; height:24px; flex:none;}
.call-cta-big .sub{display:block; font-family:var(--font-body); font-weight:500; font-size:12px; opacity:.75; margin-top:1px;}

.why-call{
  text-align:left; margin:26px 0 6px; display:grid; gap:12px;
}
.why-call .row{display:flex; gap:12px; align-items:flex-start;}
.why-call .icon-sm{
  width:28px; height:28px; border-radius:8px; background:var(--signal-light); color:var(--signal-dark);
  display:flex; align-items:center; justify-content:center; flex:none;
}
.why-call .icon-sm svg{width:15px; height:15px;}
.why-call p{margin:0; font-size:13.5px; color:var(--slate);}

.no-code-band{
  border-top:1px dashed var(--line); margin-top:30px; padding-top:26px; text-align:center;
}
.no-code-band h3{font-size:16px; margin-bottom:6px;}
.no-code-band p{font-size:13.5px; color:var(--slate); margin-bottom:18px;}

/* Decorative background TV illustration — generic, no branding */
.bg-tv-illustration{
  position:absolute; top:38%; left:50%;
  transform:translate(-50%,-50%);
  width:min(900px, 180vw);
  height:auto;
  opacity:.16;
  pointer-events:none;
  z-index:0;
}
@media (max-width:600px){
  .bg-tv-illustration{
    top:auto; bottom:-40px; left:50%; transform:translateX(-50%);
    width:340px; opacity:.22;
  }
}
.bg-tv-illustration .glow{opacity:.55;}
.activate-hero{position:relative;}
.activate-hero .container{position:relative; z-index:1;}