:root{
  --navy:#06172d;
  --navy2:#0a2342;
  --mint:#21d99d;
  --cyan:#64d2f7;
  --white:#f8fcff;
  --muted:#b6c7d6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#07182d;color:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

.header{
  position:absolute;z-index:80;left:0;right:0;top:0;height:78px;
  border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(3,13,26,.76),rgba(3,13,26,.10) 82%,transparent);
}
.header__in{width:min(1240px,calc(100% - 38px));height:100%;margin:auto;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:900;letter-spacing:-.045em}
.brand__orb{position:relative;width:31px;height:31px;border:2px solid rgba(100,210,247,.88);border-radius:50%;box-shadow:0 0 16px rgba(100,210,247,.20)}
.brand__orb::after{content:"";position:absolute;right:-5px;bottom:2px;width:8px;height:8px;border-radius:50%;background:#ef4050;box-shadow:0 0 9px rgba(239,64,80,.6)}
.brand em{font-style:normal;color:#ef4050}
.nav{display:flex;align-items:center;gap:24px;color:#d6e2ed;font-size:12px;font-weight:700}
.nav>a:not(.nav__cta){opacity:.84}
.nav__cta{padding:11px 17px;border-radius:10px;background:var(--mint);color:#03271b;font-weight:900}

.hero{
  position:relative;
  min-height:900px;
  overflow:hidden;
  isolation:isolate;
  container-type:inline-size;
  background:
    radial-gradient(circle at 50% 57%,rgba(41,123,193,.24) 0%,rgba(16,53,94,.08) 27%,transparent 49%),
    radial-gradient(circle at 50% 55%,rgba(33,217,157,.07),transparent 35%),
    linear-gradient(180deg,#081c35 0%,#06172c 66%,#07182d 100%);
}
/* Two subtle cosmic layers instead of one flat star field */
.stars-a,.stars-b{
  position:absolute;inset:-6%;pointer-events:none;z-index:0;
  background-repeat:repeat;
}
.stars-a{
  opacity:.38;
  background-image:
    radial-gradient(circle at 14% 22%,rgba(255,255,255,.92) 0 1px,transparent 1.45px),
    radial-gradient(circle at 71% 18%,rgba(255,255,255,.64) 0 1px,transparent 1.45px),
    radial-gradient(circle at 88% 72%,rgba(100,210,247,.65) 0 1px,transparent 1.5px);
  background-size:260px 240px,310px 290px,350px 330px;
  animation:starDriftA 42s linear infinite;
}
.stars-b{
  opacity:.18;
  background-image:
    radial-gradient(circle,rgba(33,217,157,.85) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 1.5px);
  background-size:118px 126px,173px 161px;
  animation:starDriftB 58s linear infinite reverse;
}
@keyframes starDriftA{to{transform:translate3d(28px,14px,0)}}
@keyframes starDriftB{to{transform:translate3d(-22px,18px,0)}}

.hero::before{
  content:"";
  position:absolute;z-index:1;left:50%;top:57%;
  width:min(39cqw,560px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(75,185,242,.12) 0%,rgba(32,217,157,.035) 40%,transparent 70%);
  filter:blur(8px);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;z-index:9;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(5,16,31,.60) 0%,transparent 13%,transparent 87%,rgba(5,16,31,.60) 100%),
    linear-gradient(180deg,rgba(5,16,31,.25) 0%,transparent 22%,transparent 78%,#07182d 99%);
}

.hero__copy{
  position:absolute;z-index:50;left:50%;top:104px;transform:translateX(-50%);
  width:min(720px,calc(100% - 36px));text-align:center;text-shadow:0 3px 24px rgba(0,0,0,.32);
}
.eyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:900;color:#77edc7}
.hero h1{margin:11px 0 0;font-size:clamp(48px,5.15vw,74px);line-height:.95;letter-spacing:-.062em}
.hero h1 span{display:block}
.hero h1 em{
  display:block;font-style:normal;
  background:linear-gradient(94deg,#fff,#7ceacb 52%,#72cef6);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{max-width:610px;margin:16px auto 0;color:#b8c8d7;font-size:14.5px;line-height:1.62}
.hero__actions{display:flex;justify-content:center;gap:10px;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:45px;padding:0 19px;border-radius:10px;font-size:12.5px;font-weight:900}
.btn--primary{background:var(--mint);color:#03271b;box-shadow:0 15px 38px rgba(33,217,157,.16)}
.btn--ghost{border:1px solid rgba(255,255,255,.16);background:rgba(8,30,55,.43);backdrop-filter:blur(10px)}

.stream-stage{
  position:absolute;z-index:10;left:0;right:0;top:250px;bottom:52px;
  overflow:hidden;container-type:inline-size;
}
.stream{
  position:absolute;inset:0 -6%;pointer-events:none;
  perspective:31cqw;
  perspective-origin:50% 57%;
}
.stream__space{position:absolute;inset:0;transform-style:preserve-3d}
.stream-card{
  position:absolute;left:50%;top:57%;
  width:11.8cqw;height:15.8cqw;
  margin-left:-5.9cqw;margin-top:-7.9cqw;
  border-radius:0.8cqw;overflow:hidden;backface-visibility:hidden;
}
.stream-card__shell{
  position:absolute;inset:0;
  border:1px solid rgba(100,210,247,.15);
  border-radius:inherit;
  background:linear-gradient(145deg,rgba(18,52,82,.93),rgba(8,24,43,.94));
  box-shadow:0 22px 58px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.025);
}
.stream-card__logo{
  position:absolute;inset:13% 12% 23%;
  display:grid;place-items:center;padding:8%;
  border-radius:.55cqw;background:rgba(255,255,255,.97);
  box-shadow:inset 0 0 0 1px rgba(6,26,49,.05);
}
.stream-card__logo img{width:100%;height:100%;object-fit:contain}
.stream-card__name{
  position:absolute;left:9%;right:9%;bottom:7%;
  color:#dfeaf3;font-size:clamp(6px,.62cqw,11px);font-weight:760;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}

@keyframes opTvRailRight{0.00%{transform:translate3d(-10.00cqw,0,-164.92cqw) rotateY(-5.00deg)}3.57%{transform:translate3d(-4.12cqw,0,-148.96cqw) rotateY(-5.57deg)}7.14%{transform:translate3d(1.28cqw,0,-134.30cqw) rotateY(-6.14deg)}10.71%{transform:translate3d(6.22cqw,0,-120.83cqw) rotateY(-6.71deg)}14.29%{transform:translate3d(10.73cqw,0,-108.46cqw) rotateY(-7.29deg)}17.86%{transform:translate3d(14.83cqw,0,-97.10cqw) rotateY(-7.86deg)}21.43%{transform:translate3d(18.54cqw,0,-86.66cqw) rotateY(-8.43deg)}25.00%{transform:translate3d(21.88cqw,0,-77.07cqw) rotateY(-9.00deg)}28.57%{transform:translate3d(24.87cqw,0,-68.27cqw) rotateY(-9.57deg)}32.14%{transform:translate3d(27.54cqw,0,-60.18cqw) rotateY(-10.14deg)}35.71%{transform:translate3d(29.90cqw,0,-52.75cqw) rotateY(-10.71deg)}39.29%{transform:translate3d(31.98cqw,0,-45.93cqw) rotateY(-11.29deg)}42.86%{transform:translate3d(33.80cqw,0,-39.66cqw) rotateY(-11.86deg)}46.43%{transform:translate3d(35.37cqw,0,-33.90cqw) rotateY(-12.43deg)}50.00%{transform:translate3d(36.72cqw,0,-28.62cqw) rotateY(-13.00deg)}53.57%{transform:translate3d(37.87cqw,0,-23.76cqw) rotateY(-13.57deg)}57.14%{transform:translate3d(38.83cqw,0,-19.30cqw) rotateY(-14.14deg)}60.71%{transform:translate3d(39.62cqw,0,-15.20cqw) rotateY(-14.71deg)}64.29%{transform:translate3d(40.26cqw,0,-11.44cqw) rotateY(-15.29deg)}67.86%{transform:translate3d(40.77cqw,0,-7.98cqw) rotateY(-15.86deg)}71.43%{transform:translate3d(41.17cqw,0,-4.80cqw) rotateY(-16.43deg)}75.00%{transform:translate3d(41.46cqw,0,-1.89cqw) rotateY(-17.00deg)}78.57%{transform:translate3d(41.68cqw,0,0.79cqw) rotateY(-17.57deg)}82.14%{transform:translate3d(41.82cqw,0,3.25cqw) rotateY(-18.14deg)}85.71%{transform:translate3d(41.92cqw,0,5.51cqw) rotateY(-18.71deg)}89.29%{transform:translate3d(41.97cqw,0,7.59cqw) rotateY(-19.29deg)}92.86%{transform:translate3d(41.99cqw,0,9.50cqw) rotateY(-19.86deg)}96.43%{transform:translate3d(42.00cqw,0,11.25cqw) rotateY(-20.43deg)}100.00%{transform:translate3d(42.00cqw,0,12.86cqw) rotateY(-21.00deg)}}
@keyframes opTvRailLeft{0.00%{transform:translate3d(10.00cqw,0,-164.92cqw) rotateY(5.00deg)}3.57%{transform:translate3d(4.12cqw,0,-148.96cqw) rotateY(5.57deg)}7.14%{transform:translate3d(-1.28cqw,0,-134.30cqw) rotateY(6.14deg)}10.71%{transform:translate3d(-6.22cqw,0,-120.83cqw) rotateY(6.71deg)}14.29%{transform:translate3d(-10.73cqw,0,-108.46cqw) rotateY(7.29deg)}17.86%{transform:translate3d(-14.83cqw,0,-97.10cqw) rotateY(7.86deg)}21.43%{transform:translate3d(-18.54cqw,0,-86.66cqw) rotateY(8.43deg)}25.00%{transform:translate3d(-21.88cqw,0,-77.07cqw) rotateY(9.00deg)}28.57%{transform:translate3d(-24.87cqw,0,-68.27cqw) rotateY(9.57deg)}32.14%{transform:translate3d(-27.54cqw,0,-60.18cqw) rotateY(10.14deg)}35.71%{transform:translate3d(-29.90cqw,0,-52.75cqw) rotateY(10.71deg)}39.29%{transform:translate3d(-31.98cqw,0,-45.93cqw) rotateY(11.29deg)}42.86%{transform:translate3d(-33.80cqw,0,-39.66cqw) rotateY(11.86deg)}46.43%{transform:translate3d(-35.37cqw,0,-33.90cqw) rotateY(12.43deg)}50.00%{transform:translate3d(-36.72cqw,0,-28.62cqw) rotateY(13.00deg)}53.57%{transform:translate3d(-37.87cqw,0,-23.76cqw) rotateY(13.57deg)}57.14%{transform:translate3d(-38.83cqw,0,-19.30cqw) rotateY(14.14deg)}60.71%{transform:translate3d(-39.62cqw,0,-15.20cqw) rotateY(14.71deg)}64.29%{transform:translate3d(-40.26cqw,0,-11.44cqw) rotateY(15.29deg)}67.86%{transform:translate3d(-40.77cqw,0,-7.98cqw) rotateY(15.86deg)}71.43%{transform:translate3d(-41.17cqw,0,-4.80cqw) rotateY(16.43deg)}75.00%{transform:translate3d(-41.46cqw,0,-1.89cqw) rotateY(17.00deg)}78.57%{transform:translate3d(-41.68cqw,0,0.79cqw) rotateY(17.57deg)}82.14%{transform:translate3d(-41.82cqw,0,3.25cqw) rotateY(18.14deg)}85.71%{transform:translate3d(-41.92cqw,0,5.51cqw) rotateY(18.71deg)}89.29%{transform:translate3d(-41.97cqw,0,7.59cqw) rotateY(19.29deg)}92.86%{transform:translate3d(-41.99cqw,0,9.50cqw) rotateY(19.86deg)}96.43%{transform:translate3d(-42.00cqw,0,11.25cqw) rotateY(20.43deg)}100.00%{transform:translate3d(-42.00cqw,0,12.86cqw) rotateY(21.00deg)}}

/* TV is exactly on the stream's vanishing axis and slightly smaller */
.tv-core{
  position:absolute;z-index:24;left:50%;top:57%;
  width:min(21cqw,272px);min-width:215px;
  transform:translate(-50%,-50%);
  filter:drop-shadow(0 28px 54px rgba(0,0,0,.34));
  pointer-events:none;
}
.tv-core::before{
  content:"";position:absolute;z-index:-1;left:50%;top:50%;
  width:142%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(84,200,248,.20),rgba(33,217,157,.06) 43%,transparent 72%);
  filter:blur(10px);
}
.tv-core img{width:100%}

.hero__horizon{
  position:absolute;z-index:30;left:0;right:0;bottom:0;height:125px;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,rgba(7,24,45,.84) 68%,#07182d 100%);
}

.proof{
  position:relative;z-index:35;margin-top:-1px;padding:0 0 38px;
  background:linear-gradient(180deg,#07182d 0%,#07182d 100%);
}
.proof__in{
  width:min(1140px,calc(100% - 38px));margin:auto;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,.085);
}
.proof article{padding:19px 20px;border-right:1px solid rgba(255,255,255,.065)}
.proof article:last-child{border-right:0}
.proof b{display:block;font-size:15px}
.proof span{display:block;margin-top:4px;color:#8ea5b9;font-size:10px;line-height:1.4}

.preview-tag{
  position:fixed;z-index:100;right:15px;bottom:15px;
  padding:8px 11px;border:1px solid rgba(255,255,255,.11);border-radius:999px;
  background:rgba(5,17,32,.80);backdrop-filter:blur(10px);font-size:10px;color:#aabed0;
}

@media(prefers-reduced-motion:reduce){
  .stream-card,.stars-a,.stars-b{animation-play-state:paused!important}
  html{scroll-behavior:auto}
}

@media(max-width:900px){
  .nav>a:not(.nav__cta){display:none}
  .hero{min-height:850px}
  .hero__copy{top:91px}
  .hero h1{font-size:54px}
  .stream-stage{top:320px;bottom:50px}
  .stream{inset:0 -18%;perspective-origin:50% 60%}
  .stream-card{top:60%;width:16cqw;height:21cqw;margin-left:-8cqw;margin-top:-10.5cqw}
  .tv-core{top:60%;width:min(31cqw,255px)}
}
@media(max-width:560px){
  .hero{min-height:790px}
  .hero__copy{top:88px;text-align:left}
  .hero h1{font-size:47px}
  .hero__lead{margin-left:0;margin-right:0}
  .hero__actions{justify-content:flex-start}
  .stream-stage{top:350px}
  .stream{inset:0 -34%;perspective-origin:50% 61%}
  .stream-card{top:61%;width:20cqw;height:26cqw;margin-left:-10cqw;margin-top:-13cqw}
  .tv-core{top:61%;width:min(47cqw,235px)}
  .proof__in{grid-template-columns:repeat(2,1fr)}
}



/* Physical TV interaction: subtle, product-like, not decorative */
.tv-core{
  --tv-rx:0deg;
  --tv-ry:0deg;
  --tv-tx:0px;
  --tv-ty:0px;
  --tv-scale:1;
  --shine-x:50%;
  --shine-y:35%;
  transform:
    translate(-50%,-50%)
    translate3d(var(--tv-tx),var(--tv-ty),0)
    rotateX(var(--tv-rx))
    rotateY(var(--tv-ry))
    scale(var(--tv-scale)) !important;
  transform-style:preserve-3d;
  transform-origin:50% 52%;
  transition:
    transform 240ms cubic-bezier(.16,1,.3,1),
    filter 240ms cubic-bezier(.16,1,.3,1);
  will-change:transform;
}

.tv-core.is-tracking{
  transition:transform 80ms linear,filter 120ms linear;
  --tv-scale:1.008;
  filter:
    drop-shadow(0 31px 58px rgba(0,0,0,.37))
    drop-shadow(0 0 16px rgba(88,201,247,.08));
}

.tv-core img{
  position:relative;
  z-index:2;
  transform:translateZ(8px);
  transition:filter 180ms ease;
}

/* Approximate glass highlight over the TV screen surface */
.tv-core__reflection{
  position:absolute;
  z-index:3;
  left:14%;
  top:12%;
  width:72%;
  height:57%;
  border-radius:8% / 10%;
  pointer-events:none;
  opacity:.28;
  transform:translateZ(12px);
  background:
    radial-gradient(
      circle at var(--shine-x) var(--shine-y),
      rgba(255,255,255,.24) 0%,
      rgba(130,221,255,.11) 15%,
      rgba(255,255,255,.035) 33%,
      transparent 58%
    );
  mix-blend-mode:screen;
  transition:opacity 180ms ease;
  filter:blur(.2px);
}

.tv-core:not(.is-tracking) .tv-core__reflection{
  opacity:.15;
}

/* Very subtle lower contact shadow reacts with the object */
.tv-core::after{
  content:"";
  position:absolute;
  z-index:-2;
  left:50%;
  bottom:-11%;
  width:72%;
  height:10%;
  transform:translateX(-50%) translateZ(-10px);
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.34),transparent 70%);
  filter:blur(9px);
  opacity:.6;
}

@media (prefers-reduced-motion:reduce){
  .tv-core{
    transform:translate(-50%,-50%) !important;
    transition:none !important;
  }
  .tv-core__reflection{
    opacity:.12 !important;
    background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.08) 50%,transparent 62%) !important;
  }
}



:root{
  --site-paper:#f6f7f3;
  --site-paper-2:#edf2ef;
  --site-ink:#152536;
  --site-muted:#677989;
  --site-line:#dce3df;
  --site-mint:#20d99d;
  --site-mint-dark:#0b8265;
  --site-navy:#07182d;
  --site-navy-2:#0a2342;
}
.site-wrap{width:min(1180px,calc(100% - 42px));margin-inline:auto}
.section{position:relative;padding:102px 0;overflow:hidden}
.section-kicker{display:inline-block;color:var(--site-mint-dark);font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.section-heading{margin-bottom:46px}
.section-heading--split{display:grid;grid-template-columns:1fr .78fr;gap:70px;align-items:end}
.section-heading h2,.devices-copy h2,.activation-copy h2,.faq-heading h2{margin:8px 0 0;color:var(--site-ink);font-size:clamp(38px,4.4vw,60px);line-height:.98;letter-spacing:-.055em}
.section-heading p,.devices-copy>p,.activation-copy>p,.faq-heading>p{margin:0;color:var(--site-muted);font-size:15px;line-height:1.7}
.section-heading--dark h2{color:#fff}
.section-heading--dark p{color:#9fb2c4}
.section-heading--dark .section-kicker{color:#6be5bd}

/* Apresentação: editorial, not a wall of cards */
.section--universe{background:var(--site-paper);color:var(--site-ink)}
.universe-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:78px;align-items:start}
.universe-intro{position:sticky;top:110px;padding-top:10px}
.universe-intro>span{color:#809187;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.universe-intro h3{margin:13px 0 0;font-size:35px;line-height:1.02;letter-spacing:-.045em}
.universe-intro p{margin:15px 0 0;color:var(--site-muted);line-height:1.65}
.universe-intro a{display:inline-flex;margin-top:26px;font-size:13px;font-weight:850}
.universe-intro a b{margin-left:7px;color:var(--site-mint-dark)}
.universe-categories{border-top:1px solid var(--site-line)}
.universe-category{position:relative;display:grid;grid-template-columns:50px 54px 1fr 30px;gap:19px;align-items:center;min-height:116px;border-bottom:1px solid var(--site-line);transition:padding .22s ease,background .22s ease}
.universe-category:hover{padding-inline:12px;background:rgba(255,255,255,.55)}
.universe-category__index{color:#89958f;font-size:10px;font-weight:900}
.universe-category__icon{width:46px;height:46px;color:var(--site-mint-dark)}
.universe-category__icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.universe-category__text h3{margin:0;font-size:20px;letter-spacing:-.03em}
.universe-category__text p{margin:6px 0 0;color:var(--site-muted);font-size:12.5px;line-height:1.5}
.universe-category__arrow{color:var(--site-mint-dark);font-weight:900}
.benefit-rows{margin-top:82px;border-top:1px solid var(--site-line)}
.benefit-rows article{display:grid;grid-template-columns:70px 1fr;padding:30px 0;border-bottom:1px solid var(--site-line)}
.benefit-rows article>span{color:#87958d;font-size:10px;font-weight:900}
.benefit-rows small{color:var(--site-mint-dark);font-size:9px;font-weight:900;letter-spacing:.13em}
.benefit-rows h3{margin:7px 0 0;font-size:23px;letter-spacing:-.035em}
.benefit-rows p{max-width:720px;margin:7px 0 0;color:var(--site-muted);line-height:1.62}

/* Catalog: keep the hero DNA but become functional */
.section--catalog{background:var(--site-navy);color:#fff}
.catalog-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:15px;background:#0a213c}
.catalog-filters{display:flex;gap:7px;flex-wrap:wrap}
.catalog-filter{padding:9px 13px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:transparent;color:#c6d5e1;font-size:11px;cursor:pointer}
.catalog-filter.is-active{background:var(--site-mint);border-color:var(--site-mint);color:#03271b;font-weight:900}
.catalog-search{position:relative;width:min(250px,100%)}
.catalog-search input{width:100%;height:38px;padding:0 13px 0 35px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:#07182d;color:#fff;outline:none}
.catalog-search span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#7590a8}
.channel-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:17px}
.channel-card{min-height:126px;padding:15px 12px 12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;border:1px solid rgba(255,255,255,.075);border-radius:14px;background:#0a213c;transition:.2s}
.channel-card:hover{transform:translateY(-3px);background:#0c2949;border-color:rgba(100,210,247,.23)}
.channel-card__logo{width:68px;height:68px;padding:6px;border-radius:11px;background:#fff;display:grid;place-items:center}
.channel-card__logo img{width:100%;height:100%;object-fit:contain}
.channel-card>span{color:#aabfd0;font-size:10px;text-align:center}
.catalog-note{margin:18px 0 0;color:#71889c;font-size:10px}

/* Devices: communication is about freedom, not decorative cards */
.section--devices{background:var(--site-paper-2);color:var(--site-ink)}
.devices-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:85px;align-items:center}
.devices-copy>p{margin-top:16px}
.device-list{margin-top:32px;border-top:1px solid var(--site-line)}
.device-list article{display:grid;grid-template-columns:50px 1fr;gap:17px;padding:20px 0;border-bottom:1px solid var(--site-line)}
.device-list__icon{width:46px;height:46px;border-radius:13px;background:#dff3eb;color:var(--site-mint-dark);display:grid;place-items:center;font-size:13px;font-weight:900}
.device-list h3{margin:1px 0 0;font-size:16px}
.device-list p{margin:5px 0 0;color:var(--site-muted);font-size:12.5px}
.devices-stage{position:relative;min-height:510px}
.device-tv{
  position:absolute;right:0;top:42px;width:86%;height:auto;aspect-ratio:16/9;
  border:9px solid #08131f;border-radius:20px;background:#020914;
  box-shadow:0 28px 60px rgba(20,41,54,.18);overflow:hidden
}
.device-phone{
  position:absolute;left:2%;bottom:15px;width:128px;height:auto;aspect-ratio:9/16;
  border:7px solid #07111c;border-radius:29px;background:#020914;
  box-shadow:0 20px 50px rgba(20,41,54,.22);overflow:hidden
}
.device-phone__notch{
  position:absolute;z-index:3;left:50%;top:8px;transform:translateX(-50%);
  width:38px;height:5px;border-radius:999px;background:#05101b;
  box-shadow:0 1px 4px rgba(0,0,0,.45)
}
.device-tablet{
  position:absolute;right:4%;bottom:4px;width:250px;height:auto;aspect-ratio:3/2;
  border:7px solid #08131f;border-radius:19px;background:#020914;
  transform:rotate(2.5deg);box-shadow:0 18px 44px rgba(20,41,54,.16);overflow:hidden
}
.device-screen{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;background:#020914
}
.device-screen--tv{object-position:center center}
.device-screen--tablet{object-position:center center}
.device-screen--phone{object-position:center center}

/* Activation: strong contrast, one continuous journey */
.section--activation{background:#081c35;color:#fff}
.activation-layout{display:grid;grid-template-columns:.78fr 1.22fr;gap:78px;align-items:start}
.activation-copy{position:sticky;top:110px}
.activation-copy .section-kicker{color:#6be5bd}
.activation-copy h2{color:#fff}
.activation-copy>p{margin-top:17px;color:#9fb2c4}
.activation-steps{position:relative}
.activation-steps::before{content:"";position:absolute;left:24px;top:26px;bottom:26px;width:1px;background:rgba(255,255,255,.13)}
.activation-steps article{position:relative;display:grid;grid-template-columns:50px 1fr;gap:22px;padding:0 0 46px}
.activation-steps article:last-child{padding-bottom:0}
.activation-steps article>span{position:relative;z-index:2;width:50px;height:50px;border-radius:50%;background:#0e335b;border:1px solid rgba(255,255,255,.09);color:#72e9c3;display:grid;place-items:center;font-size:10px;font-weight:900}
.activation-steps small{color:#69dfb9;font-size:9px;font-weight:900;letter-spacing:.12em}
.activation-steps h3{margin:7px 0 0;font-size:22px}
.activation-steps p{margin:7px 0 0;color:#99aec0;line-height:1.6}

/* FAQ: almost no decoration */
.section--faq{background:var(--site-paper);color:var(--site-ink)}
.faq-layout{display:grid;grid-template-columns:.72fr 1.28fr;gap:80px}
.faq-heading>p{margin-top:16px}
.faq-list{border-top:1px solid var(--site-line)}
.faq-list details{border-bottom:1px solid var(--site-line)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;font-weight:820}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary span{width:29px;height:29px;border-radius:50%;background:#dff3eb;color:var(--site-mint-dark);display:grid;place-items:center;transition:transform .2s}
.faq-list details[open] summary span{transform:rotate(45deg)}
.faq-list p{margin:0;padding:0 50px 23px 0;color:var(--site-muted);line-height:1.68}

/* Close by returning to the universe language */
.final-cta{position:relative;padding:83px 0;overflow:hidden;background:#0a2342;color:#fff}
.final-cta__stars{position:absolute;inset:0;opacity:.20;background-image:radial-gradient(circle,#fff 0 1px,transparent 1.4px);background-size:85px 91px}
.final-cta__inner{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:45px;align-items:center}
.final-cta__inner>div>span{color:#6de4bd;font-size:9px;font-weight:900;letter-spacing:.15em}
.final-cta h2{margin:9px 0 0;font-size:clamp(38px,4.3vw,58px);line-height:1;letter-spacing:-.055em}
.final-cta p{margin:14px 0 0;color:#a9bdce}
.final-cta a{min-height:51px;padding:0 21px;border-radius:11px;background:var(--site-mint);color:#03271b;display:inline-flex;align-items:center;font-size:13px;font-weight:900}

.site-footer{padding:58px 0 26px;background:#051326;color:#fff}
.footer-grid{display:grid;grid-template-columns:1.35fr .8fr .8fr .9fr;gap:42px}
.footer-brand__mark{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:900}
.footer-brand__mark>span{width:29px;height:29px;border:2px solid #63cef6;border-radius:50%;position:relative}
.footer-brand__mark>span::after{content:"";position:absolute;right:-5px;bottom:1px;width:8px;height:8px;border-radius:50%;background:#ef4050}
.footer-brand__mark em{font-style:normal;color:#ef4050}
.site-footer h4{margin:0 0 12px;color:#dbe7f0;font-size:10px;letter-spacing:.12em;text-transform:uppercase}
.site-footer p,.site-footer a{display:block;color:#8fa5b8;font-size:11.5px;line-height:1.75}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:34px;padding-top:19px;border-top:1px solid rgba(255,255,255,.065);color:#71889c;font-size:10px}

/* sticky header after hero scroll */
.header.is-sticky{position:fixed;background:rgba(6,23,45,.90);backdrop-filter:blur(14px)}

@media(max-width:1000px){
  .section-heading--split,.universe-layout,.devices-grid,.activation-layout,.faq-layout{grid-template-columns:1fr;gap:48px}
  .universe-intro,.activation-copy{position:static}
  .channel-grid{grid-template-columns:repeat(4,1fr)}
  .devices-stage{min-height:480px}
}
@media(max-width:760px){
  .section{padding:78px 0}
  .section-heading--split{gap:18px}
  .universe-category{grid-template-columns:40px 46px 1fr 24px;gap:13px}
  .universe-category__text p{display:none}
  .channel-grid{grid-template-columns:repeat(3,1fr)}
  .catalog-toolbar{align-items:stretch;flex-direction:column}
  .catalog-search{width:100%}
  .devices-stage{min-height:430px}
  .device-tv{width:92%;height:auto}
  .device-tablet{width:205px;height:auto}
  .final-cta__inner{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .site-wrap{width:min(100% - 30px,1180px)}
  .channel-grid{grid-template-columns:repeat(2,1fr)}
  .benefit-rows article{grid-template-columns:44px 1fr}
  .device-tv{left:8%;right:auto;width:92%;height:auto}
  .device-phone{width:105px;height:auto}
  .device-tablet{right:0;width:180px;height:auto}
  .footer-grid{grid-template-columns:1fr}
}



/* Remove decorative numbering language from editorial sections */
.section-kicker{
  letter-spacing:.11em !important;
  text-transform:none !important;
  font-size:11px !important;
  font-weight:800 !important;
}
.universe-category{
  grid-template-columns:54px 1fr 30px !important;
}
.benefit-rows article{
  grid-template-columns:1fr !important;
}
.benefit-rows article>div{
  max-width:820px;
}
@media(max-width:760px){
  .universe-category{
    grid-template-columns:46px 1fr 24px !important;
  }
}


/* ==========================================================================
   PRODUÇÃO — suporte aos assets dinâmicos do painel sem alterar o layout V4
   ========================================================================== */
.brand__image{
  display:block;
  width:auto;
  max-width:146px;
  max-height:54px;
  object-fit:contain;
}
.footer-brand__image{
  display:block;
  width:auto;
  max-width:150px;
  max-height:58px;
  margin-bottom:16px;
  object-fit:contain;
}
.device-list__icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.universe-category__thumb{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
}
.universe-category__thumb img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.channel-card[hidden]{
  display:none !important;
}
@media(max-width:760px){
  .brand__image{max-width:118px;max-height:44px}
}


/* ==========================================================================
   OPÇÃO TV — CAMADA DE MOVIMENTO SUTIL
   Objetivo: dar vida às seções sem competir com o Hero.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Categorias: resposta física curta e uma linha de seleção.
   -------------------------------------------------------------------------- */
.universe-category{
  overflow:hidden;
  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    padding 220ms cubic-bezier(.16,1,.3,1),
    background-color 220ms ease,
    color 220ms ease !important;
}

.universe-category::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-1px;
  height:2px;
  background:var(--site-mint);
  transition:right 240ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}

.universe-category:hover,
.universe-category:focus-visible{
  transform:translate3d(7px,0,0);
  padding-left:10px !important;
  padding-right:10px !important;
  background:rgba(255,255,255,.62) !important;
}

.universe-category:hover::after,
.universe-category:focus-visible::after{
  right:0;
}

.universe-category__icon,
.universe-category__thumb{
  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    color 220ms ease;
}

.universe-category:hover .universe-category__icon,
.universe-category:hover .universe-category__thumb,
.universe-category:focus-visible .universe-category__icon,
.universe-category:focus-visible .universe-category__thumb{
  transform:translate3d(2px,-2px,0) scale(1.035);
}

.universe-category__arrow{
  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    color 220ms ease;
}

.universe-category:hover .universe-category__arrow,
.universe-category:focus-visible .universe-category__arrow{
  transform:translate3d(4px,-4px,0);
}

/* --------------------------------------------------------------------------
   2. Reveal editorial: uma única entrada, curta e sem bounce.
   -------------------------------------------------------------------------- */
[data-reveal]{
  opacity:0;
  transform:translate3d(0,10px,0);
  transition:
    opacity 420ms cubic-bezier(.16,1,.3,1),
    transform 420ms cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0ms);
}

[data-reveal].is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* --------------------------------------------------------------------------
   3. Benefícios: destaque editorial, sem virar card.
   -------------------------------------------------------------------------- */
.benefit-rows article{
  transition:
    background-color 220ms ease,
    padding-left 220ms cubic-bezier(.16,1,.3,1);
}

.benefit-rows article:hover{
  padding-left:8px;
  background:rgba(255,255,255,.34);
}

/* --------------------------------------------------------------------------
   4. Catálogo: feedback de produto, não efeito decorativo.
   -------------------------------------------------------------------------- */
.channel-card{
  will-change:transform,opacity;
  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    opacity 180ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease !important;
}

.channel-card__logo{
  transition:
    transform 220ms cubic-bezier(.16,1,.3,1),
    box-shadow 220ms ease;
}

.channel-card:hover{
  transform:translate3d(0,-3px,0) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.15);
}

.channel-card:hover .channel-card__logo{
  transform:translate3d(0,-2px,0) scale(1.025);
  box-shadow:0 9px 22px rgba(0,0,0,.14);
}

.channel-card.is-leaving{
  opacity:0;
  transform:scale(.985);
}

.channel-card.is-entering{
  animation:catalogEnter 220ms cubic-bezier(.16,1,.3,1) both;
}

@keyframes catalogEnter{
  from{
    opacity:0;
    transform:translate3d(0,4px,0) scale(.99);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
  }
}

.catalog-filter{
  transition:
    transform 180ms cubic-bezier(.16,1,.3,1),
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

.catalog-filter:hover{
  transform:translate3d(0,-1px,0);
}

.catalog-search{
  transition:transform 180ms cubic-bezier(.16,1,.3,1);
}

.catalog-search:focus-within{
  transform:translate3d(0,-1px,0);
}

/* --------------------------------------------------------------------------
   5. Dispositivos: pequena profundidade física.
   -------------------------------------------------------------------------- */
.devices-stage{
  --device-x:0px;
  --device-y:0px;
  perspective:900px;
}

.device-tv,
.device-phone,
.device-tablet{
  will-change:transform;
  transition:transform 260ms cubic-bezier(.16,1,.3,1);
}

.device-tv{
  transform:translate3d(
    calc(var(--device-x) * .25),
    calc(var(--device-y) * .25),
    0
  );
}

.device-phone{
  transform:translate3d(
    calc(var(--device-x) * .60),
    calc(var(--device-y) * .60),
    20px
  );
}

.device-tablet{
  transform:
    translate3d(
      calc(var(--device-x) * .42),
      calc(var(--device-y) * .42),
      10px
    )
    rotate(2.5deg);
}

.device-screen{
  transform:scale(1.001);
  transform-origin:center center;
  animation:subscriberScreenBreath 14s ease-in-out infinite alternate;
}

@keyframes subscriberScreenBreath{
  from{transform:scale(1.001)}
  to{transform:scale(1.014)}
}

/* --------------------------------------------------------------------------
   6. Ativação: progresso visual real conforme leitura.
   -------------------------------------------------------------------------- */
.activation-steps{
  --activation-progress:0%;
}

.activation-steps::after{
  content:"";
  position:absolute;
  z-index:1;
  left:24px;
  top:26px;
  width:1px;
  height:var(--activation-progress);
  max-height:calc(100% - 52px);
  background:linear-gradient(
    180deg,
    var(--site-mint),
    rgba(100,210,247,.78)
  );
  box-shadow:0 0 12px rgba(32,217,157,.18);
  transition:height 120ms linear;
  pointer-events:none;
}

.activation-steps article>span{
  transition:
    color 220ms ease,
    background-color 220ms ease,
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(.16,1,.3,1);
}

.activation-steps article.is-active>span{
  color:#03271b;
  background:var(--site-mint);
  border-color:var(--site-mint);
  box-shadow:0 0 0 5px rgba(32,217,157,.08);
  transform:scale(1.035);
}

/* --------------------------------------------------------------------------
   7. FAQ: apenas uma confirmação curta de abertura.
   -------------------------------------------------------------------------- */
.faq-list details[open] p{
  animation:faqReveal 210ms cubic-bezier(.16,1,.3,1) both;
}

@keyframes faqReveal{
  from{
    opacity:0;
    transform:translate3d(0,-4px,0);
  }
  to{
    opacity:1;
    transform:translate3d(0,0,0);
  }
}

/* --------------------------------------------------------------------------
   8. CTA final: eco do universo do hero, quase imperceptível.
   -------------------------------------------------------------------------- */
.final-cta__stars{
  animation:ctaStars 9s ease-in-out infinite alternate;
}

@keyframes ctaStars{
  from{opacity:.14}
  to{opacity:.24}
}

.final-cta a{
  transition:
    transform 210ms cubic-bezier(.16,1,.3,1),
    box-shadow 210ms ease !important;
}

.final-cta a:hover,
.final-cta a:focus-visible{
  transform:translate3d(0,-2px,0);
  box-shadow:0 16px 34px rgba(32,217,157,.16);
}

/* --------------------------------------------------------------------------
   Acessibilidade e mobile.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }

  .channel-card,
  .channel-card__logo,
  .universe-category,
  .universe-category__icon,
  .universe-category__thumb,
  .universe-category__arrow,
  .device-tv,
  .device-phone,
  .device-tablet,
  .activation-steps article>span,
  .final-cta a{
    transition:none !important;
  }

  .device-screen,
  .final-cta__stars,
  .faq-list details[open] p{
    animation:none !important;
  }

  .activation-steps::after{
    transition:none !important;
  }
}

@media (max-width:760px){
  .universe-category:hover,
  .universe-category:focus-visible{
    transform:none;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  .devices-stage{
    --device-x:0px !important;
    --device-y:0px !important;
  }

  .device-tv{
    transform:none !important;
  }

  .device-phone{
    transform:none !important;
  }

  .device-tablet{
    transform:rotate(2.5deg) !important;
  }

  .device-screen{
    animation:none;
    transform:none;
  }
}


/* ==========================================================================
   OPÇÃO TV — LINGUAGEM DE HOVER PARA ELEMENTOS INTERATIVOS
   Regra: todo elemento clicável responde; elementos estáticos não fingem
   interatividade.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Menu principal: underline fino e curto.
   -------------------------------------------------------------------------- */
.nav > a:not(.nav__cta){
  position:relative;
  transition:
    color 190ms ease,
    opacity 190ms ease;
}

.nav > a:not(.nav__cta)::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-7px;
  height:2px;
  border-radius:999px;
  background:var(--site-mint, #20d99d);
  transition:right 210ms cubic-bezier(.16,1,.3,1);
}

.nav > a:not(.nav__cta):hover,
.nav > a:not(.nav__cta):focus-visible{
  color:#fff;
  opacity:1;
}

.nav > a:not(.nav__cta):hover::after,
.nav > a:not(.nav__cta):focus-visible::after{
  right:0;
}

/* --------------------------------------------------------------------------
   2. Links editoriais com seta: cor + deslocamento curto da seta.
   -------------------------------------------------------------------------- */
.universe-intro a,
.universe-category,
.final-cta a{
  text-decoration:none;
}

.universe-intro a{
  position:relative;
  color:var(--site-ink);
  transition:
    color 200ms ease,
    transform 200ms cubic-bezier(.16,1,.3,1);
}

.universe-intro a::after{
  content:"";
  position:absolute;
  left:0;
  right:100%;
  bottom:-4px;
  height:1px;
  background:var(--site-mint-dark);
  transition:right 220ms cubic-bezier(.16,1,.3,1);
}

.universe-intro a:hover,
.universe-intro a:focus-visible{
  color:var(--site-mint-dark);
}

.universe-intro a:hover::after,
.universe-intro a:focus-visible::after{
  right:0;
}

.universe-intro a b{
  display:inline-block;
  transition:transform 200ms cubic-bezier(.16,1,.3,1);
}

.universe-intro a:hover b,
.universe-intro a:focus-visible b{
  transform:translate3d(3px,3px,0);
}

/* --------------------------------------------------------------------------
   3. Botões e CTAs: 2px de deslocamento, sem scale exagerado.
   -------------------------------------------------------------------------- */
.btn,
.nav__cta,
.final-cta a{
  transition:
    transform 210ms cubic-bezier(.16,1,.3,1),
    box-shadow 210ms ease,
    border-color 210ms ease,
    background-color 210ms ease,
    color 210ms ease !important;
}

.btn:hover,
.btn:focus-visible,
.nav__cta:hover,
.nav__cta:focus-visible,
.final-cta a:hover,
.final-cta a:focus-visible{
  transform:translate3d(0,-2px,0);
}

.btn--primary:hover,
.btn--primary:focus-visible,
.nav__cta:hover,
.nav__cta:focus-visible,
.final-cta a:hover,
.final-cta a:focus-visible{
  box-shadow:0 14px 30px rgba(32,217,157,.16);
}

.btn--ghost:hover,
.btn--ghost:focus-visible{
  background:rgba(12,41,71,.62);
  border-color:rgba(255,255,255,.28);
}

/* --------------------------------------------------------------------------
   4. Footer: apenas mais contraste. Área utilitária, sem espetáculo.
   -------------------------------------------------------------------------- */
.site-footer a{
  position:relative;
  width:max-content;
  max-width:100%;
  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.site-footer a:hover,
.site-footer a:focus-visible{
  color:#dce9f2;
  opacity:1;
}

/* --------------------------------------------------------------------------
   5. Logo / marca: resposta mínima.
   -------------------------------------------------------------------------- */
.brand{
  transition:opacity 180ms ease;
}

.brand:hover,
.brand:focus-visible{
  opacity:.88;
}

/* --------------------------------------------------------------------------
   6. Evita falsa affordance em cards de canal não clicáveis.
   Eles continuam respondendo à filtragem, mas não "saltam" no hover.
   -------------------------------------------------------------------------- */
.channel-card:hover{
  transform:none !important;
  box-shadow:none !important;
}

.channel-card:hover .channel-card__logo{
  transform:none !important;
  box-shadow:none !important;
}

/* --------------------------------------------------------------------------
   Acessibilidade.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .nav > a:not(.nav__cta),
  .nav > a:not(.nav__cta)::after,
  .universe-intro a,
  .universe-intro a::after,
  .universe-intro a b,
  .btn,
  .nav__cta,
  .final-cta a,
  .site-footer a,
  .brand{
    transition:none !important;
  }

  .btn:hover,
  .btn:focus-visible,
  .nav__cta:hover,
  .nav__cta:focus-visible,
  .final-cta a:hover,
  .final-cta a:focus-visible,
  .universe-intro a:hover b,
  .universe-intro a:focus-visible b{
    transform:none !important;
  }
}

@media (hover:none){
  .nav > a:not(.nav__cta)::after,
  .universe-intro a::after{
    display:none;
  }
}