/* 06-abertura: Primeira seção (hero) com o símbolo GRAVIS. */

/* =========================================================
   HERO
   ========================================================= */
.hero{
  min-height:100svh;
  padding:calc(var(--nav-h) + clamp(48px, 8vw, 112px)) 0 0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.hero > .wrap{width:100%;}
.hero-grid{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:center;
}
.hero h1{max-width:15ch;font-size:clamp(2.5rem, 1.1rem + 4.1vw, 5.25rem);}
/* "escolha óbvia" nunca quebra; o complemento entra menor, como segunda voz do título */
.hero h1 .accent{white-space:nowrap;}
.hero h1 .h1-sub{font-size:.5em;letter-spacing:-.015em;}
.hero .lede{color:#d9d9d9;margin-top:clamp(24px, 3vw, 36px);max-width:46ch;}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:clamp(28px, 3.4vw, 44px);}

.proofs{list-style:none;margin:clamp(36px, 4.4vw, 56px) 0 0;padding:0;display:grid;gap:12px;max-width:44ch;}
.proofs li{display:flex;gap:14px;align-items:baseline;color:#cdcdcd;font-size:var(--t-small);}
.proofs li::before{content:"";flex:0 0 8px;height:8px;background:var(--red);transform:translateY(-1px);}
.hero-mark{width:100%;max-width:560px;justify-self:end;overflow:visible;}
.hero-mark .orbit{fill:none;stroke:var(--white);stroke-width:6;}
.hero-foot{
  margin-top:clamp(48px, 7vw, 96px);
  border-top:1px solid var(--line-on-dark);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:18px 0 22px;
  color:var(--muted-on-dark);
}
.scroll-cue{display:inline-flex;align-items:center;gap:12px;}
.scroll-cue i{display:block;width:1px;height:28px;background:currentColor;transform-origin:top;animation:cue 2.4s var(--ease-inout) infinite;}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top;}45%{transform:scaleY(1);transform-origin:top;}55%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-mark{order:-1;max-width:260px;justify-self:start;margin-left:-8px;}
}