/* Reset, fundo da página, tipografia e acessibilidade. */
*,*::before,*::after{box-sizing:border-box}
html{
  background:var(--bg);
  color-scheme:dark;
  scroll-behavior:smooth;
  scroll-padding-top:104px;
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  color:var(--text);
  font:400 17px/1.65 var(--font-body);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* Fundo fixo: gradiente da marca, brilhos e grade técnica. O fundo sólido fica no
   html: no body ele cobriria estas camadas de z-index negativo. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    linear-gradient(rgba(251,247,244,.04) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(251,247,244,.04) 1px,transparent 1px) 0 0/40px 40px,
    radial-gradient(60vw 50vh at 8% 0%,rgba(63,154,132,.20),transparent 70%),
    radial-gradient(55vw 50vh at 100% 100%,rgba(227,176,33,.09),transparent 70%),
    linear-gradient(160deg,var(--bg) 0%,var(--bg-2) 100%);
}
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  background:var(--grain);
  opacity:.03;
  pointer-events:none;
}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{
  margin:0;
  font-family:var(--font-title);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
}
h1{font-size:clamp(40px,5.4vw,68px)}
h1 em,h2 em{font-style:normal;color:var(--gold)}
h2{font-size:clamp(34px,4.4vw,56px)}
h3{font-size:22px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
p{margin:0}
:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px;border-radius:4px}
.skip-link{
  position:fixed;
  top:-60px;
  left:16px;
  z-index:100;
  padding:10px 16px;
  border-radius:var(--radius-sm);
  background:var(--gold);
  color:var(--bg);
  font-weight:700;
}
.skip-link:focus{top:12px}
.shell{width:min(var(--shell),calc(100% - 48px));margin-inline:auto}
.section{position:relative;padding-block:clamp(72px,10vw,128px)}
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:var(--teal-bright);
  font:500 12px/1.4 var(--font-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:'';
  flex:none;
  width:10px;
  height:12px;
  background:var(--gold);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
}
.lead{color:var(--muted);font-size:18px}
.text-link{
  display:inline-block;
  color:var(--teal-bright);
  font-weight:700;
  transition:color .15s;
}
.text-link:hover{color:var(--text)}

/* Entrada das seções ao rolar (a classe js vem do app.js: sem JS, tudo aparece) */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-visible{opacity:1;transform:none}

@media (max-width:800px){
  body{font-size:16px}
  .lead{font-size:17px}
  .shell{width:calc(100% - 32px)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}
.nowrap{white-space:nowrap}
.svg-defs{position:absolute}