:root{
  --bg:#0E0B07;
  --surface:#1F1709;
  --ink:#F7F4EC;
  --ink-dim:rgba(247,244,236,.76);
  --ink-faint:rgba(247,244,236,.5);
  --line:rgba(247,244,236,.15);
  --yellow:#FFC939;
  --yellow-hi:#FFD660;
  --yellow-ink:#17110A;
  --gutter:clamp(20px,5vw,56px);
  --maxw:1200px;
  --f-display:'Anton','Impact','Arial Narrow',sans-serif;
  --f-label:'Bebas Neue','Oswald','Arial Narrow',sans-serif;
  --f-body:'Oswald','Arial Narrow',system-ui,sans-serif;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--f-body);font-weight:300;font-size:1.0625rem;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

/* ---------- tipografia ---------- */
.eyebrow{
  font-family:var(--f-label);font-weight:400;font-size:1.15rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--yellow);
}
.eyebrow::before{
  content:"";display:inline-block;width:28px;height:3px;background:var(--yellow);
  margin-right:12px;vertical-align:middle;transform:translateY(-1px);
}
.h1,.h2,.step h3,.pillars h3{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
}
.h1{
  font-size:clamp(2.9rem,15vw,4.4rem);line-height:1;letter-spacing:.005em;
  text-wrap:balance;
}
.h1 span{display:block}
.h1 mark{
  background:linear-gradient(var(--yellow),var(--yellow)) 0 .235em/100% 1.03em no-repeat;
  color:var(--yellow-ink);padding:0 .12em;margin-left:.04em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.h2{
  font-size:clamp(2.4rem,7vw,4.2rem);line-height:1.02;margin:.35em 0 .45em;text-wrap:balance;
}

/* ---------- botões ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:58px;padding:0 28px;border-radius:4px;border:2px solid var(--yellow);
  background:var(--yellow);color:var(--yellow-ink);
  font-family:var(--f-label);font-weight:400;font-size:1.4rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;text-align:center;line-height:1.1;
  box-shadow:0 12px 30px -14px rgba(255,201,57,.6);
  transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease;
}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn:hover{transform:translateY(-2px);background:var(--yellow-hi);border-color:var(--yellow-hi)}
.btn--sm{min-height:42px;padding:0 16px;font-size:1.05rem;box-shadow:none}
.btn--block{width:100%}
.btn--dark{background:var(--yellow-ink);border-color:var(--yellow-ink);color:var(--yellow);box-shadow:none}
.btn--dark:hover{background:#000;border-color:#000}
.btn--ghost{background:transparent;border-color:var(--yellow-ink);color:var(--yellow-ink);box-shadow:none}
.btn--ghost:hover{background:var(--yellow-ink);border-color:var(--yellow-ink);color:var(--yellow)}

/* ---------- topo ---------- */
.top{position:absolute;inset:0 0 auto 0;z-index:5}
.top__in{
  max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:calc(18px + env(safe-area-inset-top)) var(--gutter) 0;
}
.top__brand img{width:clamp(56px,14vw,68px)}

/* ---------- hero ---------- */
.hero{
  position:relative;isolation:isolate;display:flex;overflow:hidden;background:var(--bg);
  min-height:max(100svh,640px);
}
.hero__media{position:absolute;inset:0;z-index:-1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:50% 57%}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(14,11,7,.92) 0%,rgba(14,11,7,.6) 24%,rgba(14,11,7,0) 44%),
    linear-gradient(to top,rgba(14,11,7,.97) 0%,rgba(14,11,7,.82) 24%,rgba(14,11,7,0) 50%);
}
.hero__inner{
  position:relative;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:calc(116px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
}
.lead{font-size:1.2rem;line-height:1.5;font-weight:300;color:var(--ink);max-width:34ch}
.lead strong{font-weight:500;color:var(--yellow)}
.hero__foot{display:grid;gap:16px;justify-items:start}
.hero__foot .btn{width:100%}
.hero__note{font-size:.9rem;color:var(--ink-faint);font-weight:400}

/* ---------- faixa de credenciais ---------- */
.proof{background:var(--surface);border-block:1px solid var(--line)}
.proof ul{
  list-style:none;max-width:var(--maxw);margin:0 auto;padding:20px var(--gutter);
  display:grid;gap:8px 40px;
}
.proof li{
  font-family:var(--f-label);font-size:1.1rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);
}
.proof b{color:var(--yellow);font-weight:400;font-size:1.3em;letter-spacing:.06em;margin-right:.3em}

/* ---------- seções ---------- */
.sec{padding:clamp(64px,10vw,120px) 0}
.sec__lede,.why__text{font-size:1.15rem;line-height:1.6;color:var(--ink-dim);max-width:46ch}
.sec__lede mark{background:var(--yellow);color:var(--yellow-ink);padding:0 .25em;font-weight:500}

.steps{display:grid;gap:44px}
.steps__list{list-style:none;display:grid}
.step{display:grid;gap:16px 28px;padding:30px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.graus{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;width:max-content;
  border:1px solid var(--line);border-radius:3px;background:#0A0805;
}
.graus i{display:block;width:5px;height:20px;border-radius:1px;background:rgba(247,244,236,.14)}
.graus[data-n="1"] i:nth-child(-n+1),
.graus[data-n="2"] i:nth-child(-n+2),
.graus[data-n="3"] i:nth-child(-n+3),
.graus[data-n="4"] i{background:var(--yellow)}
.step__lbl{font-family:var(--f-label);font-size:1.05rem;letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.step h3{font-size:clamp(1.7rem,4.4vw,2.3rem);line-height:1.05;margin:.12em 0 .3em}
.step p:last-child{color:var(--ink-dim);max-width:52ch;font-size:1.05rem}

.sec--why{background:var(--surface)}
.why{display:grid;gap:52px}
.pillars{list-style:none;display:grid;gap:0}
.pillars li{position:relative;padding:28px 0 30px;border-top:1px solid var(--line)}
.pillars li::before{content:"";position:absolute;top:-2px;left:0;width:36px;height:4px;background:var(--yellow)}
.pillars h3{font-size:clamp(1.55rem,3.6vw,2rem);line-height:1.05;margin-bottom:.4em}
.pillars p{color:var(--ink-dim);font-size:1.05rem;max-width:34ch}

/* ---------- chamada final ---------- */
.cta{background:var(--yellow);color:var(--yellow-ink)}
.cta :focus-visible{outline-color:var(--yellow-ink)}
.cta__grid{display:grid;gap:40px;padding-block:clamp(56px,9vw,104px)}
.h2--dark{color:var(--yellow-ink);font-size:clamp(2.7rem,9vw,5.2rem);margin-top:0}
.cta__copy p{font-weight:400;font-size:1.15rem;max-width:44ch}
.cta__logo{width:104px;margin-top:32px}
.cta__actions{display:grid;gap:14px;align-content:center}
.cta__phone{font-family:var(--f-label);font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;margin-top:6px;text-align:center}

/* ---------- rodapé ---------- */
.foot{padding:52px 0 calc(52px + env(safe-area-inset-bottom));font-size:.95rem;color:var(--ink-dim)}
.foot__in{display:grid;gap:28px}
.foot img{width:104px}
.foot__line{font-weight:400;margin-bottom:14px}
.foot a{text-underline-offset:3px}
.foot small{display:block;max-width:78ch;color:var(--ink-faint);font-size:.85rem;line-height:1.65;font-weight:400}

/* ---------- botão fixo (mobile) ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  padding:26px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(14,11,7,.96) 55%,rgba(14,11,7,0));
  transform:translateY(110%);visibility:hidden;transition:transform .28s ease,visibility 0s linear .28s;
}
.sticky.is-on{transform:none;visibility:visible;transition:transform .28s ease}

/* ---------- ≥ 600px ---------- */
@media (min-width:600px){
  .step{grid-template-columns:104px 1fr}
  .pillars{grid-template-columns:1fr 1fr;column-gap:44px}
  .proof ul{grid-template-columns:repeat(3,auto);justify-content:space-between}
  .hero__foot .btn{width:auto}
}

/* ---------- desktop ≥ 960px ---------- */
@media (min-width:960px){
  .hero{min-height:max(min(100svh,940px),680px)}
  .hero__media{left:auto;width:54%}
  .hero__media img{object-position:50% 56%}
  .hero__media::after{
    background:
      linear-gradient(to right,var(--bg) 0%,rgba(14,11,7,.72) 14%,rgba(14,11,7,0) 44%),
      linear-gradient(to bottom,rgba(14,11,7,.7) 0%,rgba(14,11,7,0) 18%),
      linear-gradient(to top,var(--bg) 0%,rgba(14,11,7,0) 20%);
  }
  .hero__inner{justify-content:center;gap:44px;padding-top:120px;padding-bottom:80px}
  .hero__head,.hero__foot{max-width:min(600px,47%)}
  .h1{font-size:clamp(3.4rem,6.6vw,6.2rem)}
  .lead{font-size:1.3rem}
  .steps{grid-template-columns:5fr 7fr;gap:88px;align-items:start}
  .steps .sec__head{position:sticky;top:48px}
  .why{grid-template-columns:5fr 7fr;gap:88px;align-items:start}
  .cta__grid{grid-template-columns:7fr 5fr;gap:80px;align-items:center}
  .foot__in{grid-template-columns:auto 1fr;gap:64px;align-items:start}
  .sticky{display:none}
}

/* ---------- movimento ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero__media img{animation:fade 1.2s ease both}
  .hero__head>*,.hero__foot>*{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero__head>:nth-child(2){animation-delay:.1s}
  .hero__foot>:nth-child(1){animation-delay:.22s}
  .hero__foot>:nth-child(2){animation-delay:.3s}
  .hero__foot>:nth-child(3){animation-delay:.38s}
}
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
@keyframes fade{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .btn,.sticky{transition:none}
}