/* ==========================================================================
   Stahltek · Base
   Reset leve, tipografia global, acessibilidade e utilitários de layout.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-h) + var(--space-5));
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  margin:0;
  line-height:var(--leading-tight);
  letter-spacing:-0.01em;
  text-wrap:balance;
}
p{margin:0;}
a{color:inherit;}
img,svg,iframe{max-width:100%;display:block;}
img{height:auto;background:var(--surface-2);}
ul{margin:0;padding:0;list-style:none;}

/* --- Acessibilidade ------------------------------------------------------ */
:focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
:focus:not(:focus-visible){outline:none;}

.skip-link{
  position:absolute;left:var(--space-4);top:-100px;z-index:100;
  background:var(--brand);color:var(--brand-on);
  padding:12px 20px;border-radius:var(--radius);
  font-weight:600;font-size:var(--text-sm);text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:var(--space-3);}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}

/* --- Layout -------------------------------------------------------------- */
.wrap{
  width:100%;max-width:var(--container);
  margin-inline:auto;padding-inline:var(--gutter);
}

section{padding-block:var(--section-y);}

.section-alt{
  background:var(--bg-soft);
  border-block:1px solid var(--line);
}

/* --- Tipografia utilitária ----------------------------------------------- */
.mono{font-family:var(--font-mono);}

.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  color:var(--brand);
  display:inline-block;
}

.sec-head{max-width:62ch;margin-bottom:var(--space-7);}
.sec-head h2{font-size:var(--text-2xl);font-weight:700;margin-top:var(--space-3);}
.sec-head p{color:var(--ink-2);margin-top:var(--space-4);font-size:var(--text-base);}

/* --- Revelação em scroll -------------------------------------------------- */
.reveal{
  opacity:0;transform:translateY(16px);
  transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible{opacity:1;transform:none;}
[data-stagger]{transition-delay:calc(var(--i, 0) * 90ms);}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;}
}
