/* só a home; variáveis, tipografia base, header e footer vêm de site.css (linkado antes) */
/* status bar/overscroll do Safari em azul até o JS da home rodar; depois ele segue a cor composta do header (preto com o footer na tela) */
html{background:#027FEC}
section{scroll-margin-top:70px}

/* hero */
.hero{padding-top:68px;position:relative;color:#fff;background:linear-gradient(180deg,var(--sky) 0%,#0169D8 55%,var(--sky-d) 100%);overflow:hidden}
.hero .wrap{position:relative;z-index:2;min-height:720px;display:flex;flex-direction:column;justify-content:center;padding-top:48px;padding-bottom:72px}
.scene{position:absolute;z-index:1;right:0;top:0;bottom:0;width:60%;background:url("../images/landing-2026/cena-sala-urna3d-1284w.webp") center 20%/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);mask-image:linear-gradient(90deg,transparent 0,#000 32%)}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,127,236,.9) 0%,rgba(2,127,236,0) 30%)}
.sig{display:flex;align-items:center;gap:12px;font:700 20px/1.1 var(--display)}
.sig img{width:64px;height:64px;border-radius:22.5%;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.hero h1{font-size:clamp(56px,9vw,120px);line-height:.92;font-weight:800;margin:28px 0 22px;max-width:6.4em;text-shadow:0 4px 30px rgba(0,40,100,.25)}
.hero p{font-size:21px;max-width:25em;margin:0 0 30px;color:rgba(255,255,255,.92);font-weight:600}
.badges{display:flex;flex-wrap:wrap;gap:12px}
.badges a{display:block;transition:transform .15s}.badges a:hover{transform:translateY(-2px)}
.badges img{height:54px;width:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}

/* proof strip */
.proof{background:var(--store-yellow);color:var(--ink)}
.proof .wrap{display:flex;justify-content:space-between;gap:24px;padding-top:26px;padding-bottom:26px}
.proof div{display:flex;align-items:baseline;gap:10px}
.proof b{font:800 40px/1 var(--display);letter-spacing:-.03em;white-space:nowrap}
.proof span{font-weight:800;font-size:15px}

/* colour blocks */
.blk{background:var(--c);color:var(--fg,#fff);overflow:hidden}
.blk .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.blk .txt{padding:96px 0}
.blk .kicker{font:700 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.8}
.blk h2{font-size:clamp(42px,6vw,80px);line-height:.94;font-weight:800;text-transform:uppercase;margin:18px 0 22px;letter-spacing:-.01em}
.blk p{margin:0 0 16px;font-size:19px;max-width:28em;opacity:.95}
.blk ul{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.blk li{display:flex;gap:12px;align-items:flex-start;font-weight:700}
.blk li::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;border-radius:6px;background:var(--confirma) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23151618' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:inset 0 -2px 0 rgba(0,0,0,.2)}
.blk .media{display:flex;justify-content:center;gap:20px}
/* card da loja inteiro dentro do bloco: respiro em cima e embaixo, radius nos 4 cantos e sombra para destacar do fundo chapado
   (.bleed-t/.bleed-b só guardam a ordem no mobile: o card de legenda no topo vem antes do texto) */
.poster{width:360px;flex:none}
.bleed-b,.bleed-t{padding:48px 0}
.bleed-b .poster,.bleed-t .poster{border-radius:30px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.poster.shadow{box-shadow:0 30px 60px -20px rgba(0,0,0,.35)}
.note{font-size:15px!important;opacity:.8!important;font-weight:700}
.story{flex:0 1 280px;min-width:0;width:100%;aspect-ratio:886/1920;border-radius:30px;object-fit:cover;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);align-self:center;background:#0b3}

.blk.ink .wrap{grid-template-columns:.9fr 1.1fr}
.blk.ink .media{order:-1;padding:72px 0;justify-content:center;gap:20px}
.live{display:inline-flex;align-items:center;gap:8px;font:700 13px/1 var(--mono);letter-spacing:.12em;padding:9px 12px;border-radius:99px;background:rgba(54,199,91,.16);color:#7CFFA4}
.live i{width:8px;height:8px;border-radius:50%;background:#7CFFA4;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.3}}

/* audiences */
.aud{padding:96px 0 40px}
.aud,.arts{background:var(--paper)}
.aud h2,.arts h2{font-size:clamp(34px,4.4vw,56px);font-weight:800;line-height:1}
.aud .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.aud .grid div{background:#fff;border-radius:22px;padding:24px;border-top:6px solid var(--k)}
.aud b{display:block;font:800 22px/1.15 var(--display);margin-bottom:8px}
.aud span{font-size:16px;color:#474a55}

.arts{padding:56px 0 96px}
.arts .grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.art{position:relative;display:block;border-radius:26px;overflow:hidden;text-decoration:none;color:#fff;aspect-ratio:16/9}
.art img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.art:hover img{transform:scale(1.04)}
.art div{position:absolute;inset:auto 0 0 0;padding:60px 26px 24px;background:linear-gradient(0deg,rgba(21,22,24,.88),rgba(21,22,24,0))}
.art small{font:700 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--store-yellow)}
.art h3{font-size:26px;line-height:1.1;margin-top:8px}

/* CTA urna */
.cta{background:var(--sky-d);padding:96px 0;color:#fff}
.urna{max-width:980px;margin:0 auto;background:linear-gradient(180deg,#F4F4F6,#DCDDE2);border-radius:34px;padding:28px;display:grid;grid-template-columns:1.35fr 1fr;gap:28px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6),inset 0 2px 0 #fff;color:var(--ink)}
.lcd{background:var(--lcd);border:3px solid #2a2b30;border-radius:14px;padding:30px;display:flex;flex-direction:column;justify-content:center;min-height:300px}
.lcd small{font:700 12px/1 var(--mono);letter-spacing:.14em;color:#6b6a5c}
.lcd h2{font:700 clamp(30px,3.6vw,46px)/1.05 var(--mono);letter-spacing:-.02em;margin:14px 0 18px;text-transform:uppercase}
.lcd .count{font:600 15px/1.4 var(--mono);color:#3d4a3f}
.lcd .badges{margin-top:22px}
.lcd .badges img{box-shadow:none}
.pad{background:#1d1e22;border-radius:16px;padding:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:center}
.pad .n{background:#2f3036;color:#fff;border-radius:8px;text-align:center;font:600 22px/1 var(--mono);padding:14px 0;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.pad .n.z{grid-column:2}
.pad .row{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;margin-top:6px}
.pad .keycap{padding:16px 6px;font-size:13px}
.urna-foot{grid-column:1/-1;display:flex;justify-content:space-between;font:700 11px/1 var(--mono);letter-spacing:.14em;color:#7b7d86;padding:0 4px}


@media (max-width:1020px){
  .blk .wrap,.blk.ink .wrap{grid-template-columns:1fr;gap:0}
  .blk .txt{padding:64px 0 40px}
  .blk.ink .media{order:0;padding:0 0 64px}
  .bleed-b{padding:0 0 36px}
  .bleed-t{order:-1;padding:36px 0 0}
  .bleed-t + .txt{padding-top:40px}
  .aud .grid{grid-template-columns:1fr 1fr}
  .urna{grid-template-columns:1fr}
}
/* tablet: a faixa não cabe numa linha abaixo de ~1030px; 3 colunas iguais, número em cima e texto de apoio embaixo */
@media (min-width:641px) and (max-width:1080px){
  .proof .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
  .proof .wrap>div{flex-direction:column;align-items:center;gap:8px;text-align:center}
  .proof span{line-height:1.25;max-width:15em;text-wrap:balance}
}
@media (max-width:640px){
  .hero .wrap{min-height:0;padding-top:28px;padding-bottom:36px}
  .scene{position:relative;width:auto;height:420px;margin:-40px 0 0;background-position:62% 18%;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 30%);mask-image:linear-gradient(180deg,transparent 0,#000 30%)}
  .scene::after{display:none}
  .sig img{width:52px;height:52px}
  .hero h1{margin:22px 0 16px}
  .hero p{font-size:18px}
  .badges img{height:48px}
  .proof .wrap{flex-direction:column;gap:10px;padding-top:20px;padding-bottom:20px}
  .proof b{font-size:32px;min-width:108px}
  .poster{width:270px}
  .story{flex-basis:200px}
  .blk.ink .media{gap:12px;padding-top:48px}
  .urna-foot{flex-direction:column;gap:6px;line-height:1.4}
  .pad .keycap{padding:12px 6px}
  .blk .media{gap:12px}
  .blk p{font-size:17px}
  .aud .grid,.arts .grid{grid-template-columns:1fr}
  .cta{padding:56px 0}
  .urna{padding:14px;border-radius:24px;gap:14px}
  .lcd{padding:22px 18px;min-height:0}
}