/* SkyStream static — vanilla CSS */
:root{
  --bg: oklch(0.16 0.04 265);
  --fg: oklch(0.94 0.005 250);
  --card: oklch(0.22 0.035 265);
  --muted: oklch(0.72 0.015 250);
  --border: rgba(255,255,255,0.1);
  --brand-green: oklch(0.68 0.19 142);
  --brand-green-glow: oklch(0.78 0.18 142);
  --brand-blue: oklch(0.42 0.18 268);
  --brand-red: oklch(0.58 0.22 27);
  --font-display: "Space Grotesk","Inter",system-ui,sans-serif;
  --font-sans: "Inter",system-ui,sans-serif;
}
*{box-sizing:border-box;border-color:var(--border);margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background-color:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background-image:
    radial-gradient(60rem 40rem at 80% -10%, color-mix(in oklab, var(--brand-blue) 22%, transparent), transparent 60%),
    radial-gradient(50rem 30rem at -10% 30%, color-mix(in oklab, var(--brand-green) 14%, transparent), transparent 60%),
    radial-gradient(40rem 30rem at 50% 110%, color-mix(in oklab, var(--brand-red) 12%, transparent), transparent 60%);
  background-attachment:fixed;
  min-height:100vh;
  line-height:1.5;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.02em;line-height:1.1}

.container{max-width:80rem;margin:0 auto;padding:0 1rem}
.container-sm{max-width:48rem}
.center{text-align:center}
.mt-sm{margin-top:0.75rem}.mt-md{margin-top:1.25rem}.mt-lg{margin-top:2.5rem}.mt-xl{margin-top:3.5rem}
.small{font-size:0.75rem;color:var(--muted)}
.sub{margin-top:1rem;color:var(--muted);max-width:42rem;margin-left:auto;margin-right:auto}
.sub-sm{margin-top:0.5rem;font-size:0.875rem;color:var(--muted);max-width:42rem}
.eyebrow{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.2em;color:var(--brand-green)}
.h2{margin-top:0.75rem;font-size:1.875rem;font-weight:800}
.h3{font-size:1.5rem;font-weight:800}
.link{text-decoration:underline}
.link:hover{color:#fff}
.c-green{color:var(--brand-green)}
.c-blue{color:oklch(0.62 0.16 240)}
.c-red{color:var(--brand-red)}

@media (min-width:640px){
  .h2{font-size:3rem}
  .h3{font-size:1.875rem}
}

.glass{
  background:color-mix(in oklab, var(--card) 70%, transparent);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in oklab, white 10%, transparent);
}

.btn-primary svg,.btn-outline svg{width:1.1rem;height:1.1rem;flex-shrink:0}
.i{width:1rem;height:1rem;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  padding:0.875rem 1.5rem;border-radius:9999px;
  background:linear-gradient(180deg,var(--brand-green-glow),var(--brand-green));
  color:white;font-weight:600;
  box-shadow:0 8px 24px -8px color-mix(in oklab, var(--brand-green) 70%, transparent),inset 0 1px 0 color-mix(in oklab, white 30%, transparent);
  transition:transform .15s ease,box-shadow .2s ease;cursor:pointer;
}
.btn-primary:hover{transform:translateY(-1px)}
.btn-sm{padding:0.625rem 1rem;font-size:0.875rem}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;
  padding:0.875rem 1.5rem;border-radius:9999px;
  border:1px solid rgba(255,255,255,0.22);
  background:rgba(255,255,255,0.04);color:white;font-weight:600;
  transition:background .2s,border-color .2s;
}
.btn-outline:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.35)}

.chip{display:inline-flex;align-items:center;gap:0.5rem;padding:0.375rem 0.875rem;border-radius:9999px;font-size:0.75rem;font-weight:600;letter-spacing:0.04em}
.chip-red{background:color-mix(in oklab, var(--brand-red) 18%, transparent);border:1px solid color-mix(in oklab, var(--brand-red) 45%, transparent);color:color-mix(in oklab, var(--brand-red) 30%, white)}
.chip-pill{padding:0.375rem 0.75rem;border-radius:9999px;font-size:0.75rem;font-weight:600}
.dot-red{display:inline-block;height:0.5rem;width:0.5rem;border-radius:9999px;background:var(--brand-red)}

@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.55}}
.pulse-soft{animation:pulse-soft 2.4s ease-in-out infinite}

@keyframes float-orb{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
.bg-orbs{position:fixed;inset:0;z-index:-10;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:9999px;filter:blur(64px);animation:float-orb 12s ease-in-out infinite}
.orb-1{top:-8rem;right:-8rem;height:28rem;width:28rem;background:color-mix(in oklab,var(--brand-blue) 35%,transparent)}
.orb-2{top:33%;left:-10rem;height:26rem;width:26rem;background:color-mix(in oklab,var(--brand-green) 22%,transparent)}
.orb-3{bottom:0;right:25%;height:22rem;width:22rem;background:color-mix(in oklab,var(--brand-red) 18%,transparent)}

/* Reveal */
.reveal{opacity:0;transform:translateY(32px) scale(0.985);filter:blur(6px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .7s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none;filter:none}
.stagger > .reveal:nth-child(1){transition-delay:0ms}
.stagger > .reveal:nth-child(2){transition-delay:70ms}
.stagger > .reveal:nth-child(3){transition-delay:140ms}
.stagger > .reveal:nth-child(4){transition-delay:210ms}
.stagger > .reveal:nth-child(5){transition-delay:280ms}
.stagger > .reveal:nth-child(6){transition-delay:350ms}

@keyframes hero-fade-up{from{opacity:0;transform:translateY(24px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.hero-rise{opacity:0;animation:hero-fade-up .9s cubic-bezier(.22,1,.36,1) forwards}
.hero-rise:nth-of-type(1){animation-delay:.1s}
.hero-rise:nth-of-type(2){animation-delay:.25s}
.hero-rise:nth-of-type(3){animation-delay:.4s}
.hero-rise:nth-of-type(4){animation-delay:.55s}
.hero-rise:nth-of-type(5){animation-delay:.7s}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:0.75rem 0}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-radius:1rem;padding:0.375rem 1rem}
.logo-link{display:flex;align-items:center;flex-shrink:0}
.logo-img{height:3.5rem;width:auto;filter:drop-shadow(0 4px 18px rgba(60,173,59,.35))}
.nav-links{display:none;align-items:center;gap:1.75rem}
.nav-links a{font-size:0.875rem;color:var(--muted);transition:color .2s}
.nav-links a:hover{color:#fff}
.nav-actions{display:flex;align-items:center;gap:0.5rem}
.nav-cta{display:none}
.menu-btn{height:2.5rem;width:2.5rem;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;border:1px solid rgba(255,255,255,0.15);background:rgba(255,255,255,0.05)}
.mobile-menu{margin-top:0.5rem;border-radius:1rem;padding:1rem;display:grid;gap:0.25rem}
.mobile-menu[hidden]{display:none !important}
.mobile-menu a{padding:0.625rem 0.75rem;border-radius:0.75rem;font-size:0.875rem}
.mobile-menu a:hover{background:rgba(255,255,255,0.05)}

@media (min-width:640px){
  .logo-img{height:4rem}
  .nav-cta{display:inline-flex}
}
@media (min-width:1024px){
  .nav-links{display:flex}
  .menu-btn{display:none}
}

/* Hero */
.hero{position:relative;overflow:hidden;padding:8rem 0 5rem}
.hero-bg{position:absolute;inset:0;z-index:-1}
.hero-bg img{height:100%;width:100%;object-fit:cover;opacity:0.95;transform:scale(1.05)}
.hero-overlay-1{position:absolute;inset:0;background:linear-gradient(to bottom, oklch(0.10 0.04 265/.55), oklch(0.12 0.04 265/.45), var(--bg))}
.hero-overlay-2{position:absolute;inset:0;background:radial-gradient(ellipse at center, transparent 0%, oklch(0.08 0.04 265/.55) 70%, oklch(0.08 0.04 265/.85) 100%)}
.scanlines{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.6) 0px, rgba(255,255,255,.6) 1px, transparent 1px, transparent 3px)}
.hero-content{text-align:center;position:relative}
.hero-title{margin:1.5rem auto 0;max-width:64rem;font-size:2.25rem;font-weight:800;line-height:1.05}
.hero-sub{margin:1.5rem auto 0;max-width:42rem;font-size:1rem;color:var(--muted)}
.hero-actions{margin-top:2rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem}
.hero-actions .btn-primary,.hero-actions .btn-outline{width:100%;max-width:20rem}
.stats-grid{margin:3.5rem auto 0;max-width:48rem;display:grid;grid-template-columns:repeat(2,1fr);gap:0.75rem}
.stat{border-radius:1rem;padding:1rem}
.stat-v{font-family:var(--font-display);font-size:1.5rem;font-weight:800}
.stat-l{margin-top:0.25rem;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--muted)}
.chip.hero-rise{margin:0 auto;display:inline-flex}

@media (min-width:640px){
  .hero{padding:10rem 0 7rem}
  .hero-title{font-size:3.75rem}
  .hero-sub{font-size:1.125rem}
  .hero-actions{flex-direction:row}
  .hero-actions .btn-primary,.hero-actions .btn-outline{width:auto}
  .stats-grid{grid-template-columns:repeat(4,1fr)}
  .stat-v{font-size:1.875rem}
}
@media (min-width:1024px){
  .hero-title{font-size:4.5rem}
}

/* World Cup */
.worldcup{position:relative;padding:3rem 0}
.wc-bg{position:absolute;inset:0;z-index:-1}
.wc-bg img{height:100%;width:100%;object-fit:cover;opacity:.4}
.wc-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,var(--bg),oklch(0.16 0.04 265/.85),var(--bg))}
.wc-stats{margin-top:2.5rem;display:grid;grid-template-columns:1fr;gap:1rem}
.big-card{border-radius:1rem;padding:1.25rem}
.big{font-family:var(--font-display);font-size:2.25rem;font-weight:800}
.big-l{margin-top:0.25rem;font-size:0.875rem;font-weight:600;color:var(--brand-green)}
.big-s{margin-top:0.25rem;font-size:0.75rem;color:var(--muted)}
@media (min-width:640px){
  .worldcup{padding:4rem 0}
  .wc-stats{grid-template-columns:repeat(3,1fr)}
  .big{font-size:3rem}
}

/* Sections */
.section{padding:3rem 0}
@media (min-width:640px){.section{padding:4rem 0}}

/* Grids */
.grid{display:grid;gap:1rem}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}}

/* Feature card */
.feature{border-radius:1.5rem;padding:1.5rem;transition:transform .2s}
.feature:hover{transform:translateY(-4px)}
.feature .ico{display:inline-flex;height:3rem;width:3rem;align-items:center;justify-content:center;border-radius:1rem;background:color-mix(in oklab,var(--brand-green) 15%,transparent);color:var(--brand-green);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--brand-green) 35%,transparent)}
.feature .ico svg{width:1.5rem;height:1.5rem}
.feature h3{margin-top:1.25rem;font-size:1.125rem;font-weight:700}
.feature p{margin-top:0.5rem;font-size:0.875rem;color:var(--muted)}

/* Movies */
.movies-card{position:relative;overflow:hidden;border-radius:1.5rem;border:1px solid rgba(255,255,255,0.1)}
.movies-card img{height:280px;width:100%;object-fit:cover}
.movies-overlay{position:absolute;inset:0;background:linear-gradient(to top,var(--bg),transparent,oklch(0.16 0.04 265/.4))}
.movies-chips{position:absolute;bottom:1rem;left:1rem;display:flex;flex-wrap:wrap;gap:0.5rem}
@media (min-width:640px){.movies-card img{height:460px}.movies-chips{bottom:1.5rem;left:1.5rem}}

/* Pricing */
.toggle{margin:2rem auto 0;display:flex;width:100%;max-width:24rem;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.05);border-radius:9999px;padding:0.25rem;font-size:0.875rem}
.toggle button{flex:1;border-radius:9999px;padding:0.625rem 1rem;font-weight:600;color:var(--muted);transition:all .2s}
.toggle button.active{background:var(--brand-green);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.plan{position:relative;border-radius:1.5rem;padding:1.75rem;display:flex;flex-direction:column}
.plan.popular{box-shadow:0 0 0 1px color-mix(in oklab,var(--brand-green) 60%,transparent),0 20px 60px -20px color-mix(in oklab,var(--brand-green) 50%,transparent);transform:scale(1.02)}
.plan .badge{position:absolute;top:-0.75rem;left:50%;transform:translateX(-50%);background:var(--brand-red);padding:0.25rem 0.75rem;border-radius:9999px;font-size:0.625rem;font-weight:700;text-transform:uppercase;letter-spacing:0.15em;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.plan-tier{font-size:0.875rem;font-weight:600;color:var(--muted)}
.plan-dur{margin-top:0.25rem;font-size:1.5rem;font-weight:700}
.plan-price{margin-top:1rem;display:flex;align-items:flex-end;gap:0.25rem}
.plan-price .p{font-family:var(--font-display);font-size:3rem;font-weight:800;line-height:1}
.plan-price .o{padding-bottom:0.5rem;font-size:0.875rem;color:var(--muted)}
.plan-note{margin-top:0.5rem;font-size:0.75rem;font-weight:600;color:var(--brand-green)}
.plan-list{margin-top:1.5rem;display:flex;flex-direction:column;gap:0.625rem;font-size:0.875rem}
.plan-list li{display:flex;align-items:center;gap:0.5rem}
.plan-list svg{width:1rem;height:1rem;color:var(--brand-green);flex-shrink:0}
.plan .btn-primary{margin-top:1.75rem;width:100%}
.trust-row{margin-top:2rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.5rem 1.5rem;font-size:0.75rem;color:var(--muted)}
.trust-row span{display:inline-flex;align-items:center;gap:0.375rem}
.trust-row svg{width:0.875rem;height:0.875rem;color:var(--brand-green)}
.device-card{overflow:hidden;border-radius:1.5rem;border:1px solid rgba(255,255,255,0.1)}
.device-card img{height:auto;width:100%}

/* Reseller */
.reseller-card{border-radius:1.5rem;padding:1.5rem}
.reseller-card .ico{display:inline-flex;height:2.75rem;width:2.75rem;align-items:center;justify-content:center;border-radius:0.75rem;background:color-mix(in oklab,var(--brand-blue) 25%,transparent);color:oklch(0.78 0.13 240);box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--brand-blue) 55%,transparent)}
.reseller-card h3{margin-top:1.25rem;font-weight:700}
.reseller-card p{margin-top:0.5rem;font-size:0.875rem;color:var(--muted)}
.reseller-cta{overflow:hidden;border-radius:1.5rem;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(to right,oklch(0.32 0.16 268),oklch(0.28 0.14 265),oklch(0.22 0.1 260));padding:1.5rem;display:grid;gap:1.5rem;align-items:center}
@media (min-width:640px){.reseller-cta{padding:2.5rem;grid-template-columns:1fr auto}}

/* Devices */
.device-tile{display:flex;align-items:center;gap:0.75rem;border-radius:1rem;padding:1rem}
.device-tile .ico{display:inline-flex;height:2.25rem;width:2.25rem;align-items:center;justify-content:center;border-radius:0.75rem;background:rgba(255,255,255,0.05);color:var(--brand-green);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1)}
.device-tile .ico svg{width:1rem;height:1rem}
.device-tile span{font-size:0.875rem;font-weight:600}

/* FAQ */
.faq-list{display:flex;flex-direction:column;gap:0.75rem}
.faq-item{border-radius:1rem;overflow:hidden}
.faq-q{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.25rem;text-align:left;font-weight:600}
.faq-q svg{width:1.25rem;height:1.25rem;color:var(--brand-green);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-q svg{transform:rotate(180deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,opacity .3s ease;opacity:0}
.faq-item.open .faq-a{max-height:400px;opacity:1}
.faq-a p{padding:0 1.25rem 1.25rem;font-size:0.875rem;color:var(--muted)}

/* Final CTA */
.final-cta{overflow:hidden;border-radius:1.5rem;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(135deg,oklch(0.22 0.12 268),oklch(0.2 0.06 265),oklch(0.25 0.18 27/.7));padding:2rem;text-align:center}
@media (min-width:640px){.final-cta{padding:4rem}}
.final-cta .h2{margin-top:1.25rem}
.final-cta .hero-actions{margin-top:2rem}

/* Footer */
.site-footer{padding:2.5rem 0 6rem}
@media (min-width:640px){.site-footer{padding-bottom:2.5rem}}
.footer-divider{height:1px;background:linear-gradient(to right,var(--brand-green),var(--brand-blue),var(--brand-red))}
.footer-grid{margin-top:2.5rem;display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-logo{height:4rem;width:auto}
.ft-h{font-size:0.875rem;font-weight:700}
.footer-grid ul{margin-top:0.75rem;display:flex;flex-direction:column;gap:0.5rem;font-size:0.875rem;color:var(--muted)}
.footer-grid ul a:hover{color:#fff}
.copyright{margin-top:2.5rem;text-align:center;font-size:0.75rem;color:var(--muted)}

/* Floating WhatsApp */
.float-wa{position:fixed;bottom:1.25rem;right:1.25rem;z-index:50;display:inline-flex;height:3.5rem;width:3.5rem;align-items:center;justify-content:center;border-radius:9999px;background:var(--brand-green);color:#fff;box-shadow:0 20px 25px -5px rgba(0,0,0,.5),0 0 0 4px color-mix(in oklab,var(--brand-green) 25%,transparent);transition:transform .2s}
.float-wa:hover{transform:scale(1.05)}
.float-wa svg{width:1.5rem;height:1.5rem}

/* Mobile sticky */
.mobile-sticky{position:fixed;bottom:1rem;left:1rem;z-index:40;padding:0.75rem 1.25rem !important;font-size:0.875rem;opacity:0;transform:translateY(2.5rem);pointer-events:none;transition:all .3s}
.mobile-sticky.show{opacity:1;transform:none;pointer-events:auto}
@media (min-width:640px){.mobile-sticky{display:none}}