:root{
  --ink       : #06080E;
  --accent    : #FF6A2B;
  --accent-2  : #22D3EE;
  --text      : #FFFFFF;
  --text-dim  : rgba(255,255,255,.72);
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-text   : 'Inter Tight', ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*, *::before, *::after{ box-sizing:border-box }
html, body{ margin:0; padding:0 }
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--font-text);
}
img{ max-width:100%; display:block }

a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* ---------- Hero ---------- */

.hero{
  position:relative; isolation:isolate; overflow:hidden;
  /* height fixa, não min-height: o hero já corta (overflow:hidden) o que
     não couber, então nunca pode ficar mais alto que a viewport. Com
     min-height, um reflow bobo de altura (ex.: troca de webfont assim que
     carrega, com métricas um pixel diferentes da fonte de fallback) fazia a
     página passar da altura da tela, aparecia scrollbar do nada e a imagem
     "pulava" pra esquerda. */
  height:100svh;
  display:grid;
}
.hero__base, .hero__base img, .hero__cyber, .hero__cyber img, .hero__wipe, .hero__wipe img, .hero__reveal, .hero__glow{
  position:absolute; inset:0; width:100%; height:100%;
}
.hero__base img, .hero__cyber img, .hero__wipe img{ object-fit:cover; object-position:50% 45% }
@media (min-aspect-ratio:1/1){
  .hero__base img, .hero__cyber img, .hero__wipe img{ object-position:70% 50% }
}
.hero__cyber{ opacity:0; transition:opacity 400ms ease; pointer-events:none }
.hero__cyber.is-visible{ opacity:1 }
.hero__wipe{ pointer-events:none }
.hero__reveal{ z-index:0; pointer-events:none; border-radius:inherit }
.hero__glow  { z-index:1; pointer-events:none; border-radius:inherit }

.hero__scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(to top,   rgba(6,8,14,.78) 0%, rgba(6,8,14,.35) 32%, transparent 60%),
    linear-gradient(to right, rgba(6,8,14,.45) 0%, transparent 45%);
}

.hero__content{
  position:relative; z-index:3;
  align-self:end; justify-self:start;
  max-width:min(46rem, 92%);
  padding:clamp(1.5rem, 5vw, 4rem);
  padding-bottom:max(clamp(2rem,7vh,5rem), env(safe-area-inset-bottom));
  color:var(--text);
  /* hero é pra ler como imagem, não como página de texto: sem cursor de
     seleção, sem poder selecionar. O CTA reverte isso pra si mesmo abaixo. */
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
}
.hero__eyebrow{
  margin:0 0 .75rem;
  font-size:.875rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-dim);
}
.hero__title{
  margin:0;
  font-family:var(--font-display);
  font-size:clamp(2.25rem, 6.2vw, 5.25rem);
  line-height:.98; letter-spacing:-.02em; font-weight:600;
  text-wrap:balance;
}
@media (min-width:641px){
  /* telas de desktop têm folga de sobra pra essa frase curta numa linha só
     (mesmo com a fonte de fallback, antes da webfont carregar) — só o
     mobile continua livre pra quebrar como precisar. */
  .hero__title{ white-space:nowrap }
}
.hero__sub{
  margin:1rem 0 0;
  font-size:clamp(1rem,1.6vw,1.25rem);
  max-width:44ch; opacity:.85;
}
.hero__services{
  margin:.85rem 0 0;
  font-size:.8125rem;
  letter-spacing:.06em;
  color:var(--text-dim);
}

.hero__ctas{ margin-top:1.75rem; display:flex; gap:1rem }
.hero__cta{
  display:inline-block;
  font-family:var(--font-text);
  font-weight:600;
  text-decoration:none;
  padding:.85em 1.6em;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
}
.hero__cta--primary{
  background:var(--accent);
  color:var(--ink);
}

.hero__hint{
  position:absolute; z-index:3;
  left:clamp(1.5rem, 5vw, 4rem);
  bottom:clamp(.75rem, 2vh, 1.5rem);
  margin:0;
  font-size:12px;
  color:var(--text);
  opacity:.55;
  pointer-events:none;
  transition:opacity .2s ease;
}
.hero__hint--hidden{ opacity:0 }

.hero__toggle{
  position:absolute; z-index:3;
  left:clamp(1.5rem, 5vw, 4rem);
  bottom:clamp(.75rem, 2vh, 1.5rem);
  font-family:var(--font-text);
  font-size:.8125rem;
  font-weight:600;
  color:var(--text);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:.5em 1.1em;
  cursor:pointer;
}
.hero__toggle[hidden]{ display:none }

.hero__invert{
  position:absolute; z-index:3;
  right:clamp(1.5rem, 5vw, 4rem);
  top:clamp(.75rem, 2vh, 1.5rem);
  font-family:var(--font-text);
  font-size:.8125rem;
  font-weight:600;
  color:var(--text);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  border-radius:999px;
  padding:.5em 1.1em;
  cursor:pointer;
  animation:hero-invert-pulse 2s ease-in-out infinite;
}
.hero__invert[hidden]{ display:none }
.hero__invert-label{ display:inline-block }

@keyframes hero-invert-pulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(255,255,255,.65); transform:scale(1) }
  50%{ box-shadow:0 0 0 10px rgba(255,255,255,0); transform:scale(1.06) }
}
@media (prefers-reduced-motion: reduce){
  .hero__invert{ animation:none }
}