/* South Eagle Commerce — site v1
   Cores e tipografia seguem a identidade visual v2.
   Regras: âmbar só sobre pinho ou ink; sage só em corpo grande sobre pinho. */

:root{
  --pine:#0E4A38;
  --pine-deep:#0A3527;
  --amber:#F2C14E;
  --bone:#F7F7F5;
  --ink:#12151A;
  --sage:#8FB5A4;
  --line:#DDE3E0;
  --grey:#6E7873;
  --body:#3A423E;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bone);
  color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;}
a{color:inherit;}

.wrap{max-width:1120px;margin:0 auto;padding:0 28px;}

/* ---------- tipografia ---------- */
.wm{
  font-family:Archivo,system-ui,sans-serif;
  font-weight:800;font-variation-settings:'wdth' 118;
  text-transform:uppercase;letter-spacing:-.012em;line-height:.88;
}
h1,h2,h3{font-family:Archivo,system-ui,sans-serif;margin:0;}
h2{
  font-weight:700;font-variation-settings:'wdth' 100;
  font-size:clamp(28px,3.8vw,42px);letter-spacing:-.02em;line-height:1.05;
  text-wrap:balance;
}
h3{font-weight:700;font-size:19px;letter-spacing:-.01em;line-height:1.2;}
p{margin:0;color:var(--body);}
.lead{font-size:20px;max-width:58ch;}
.kicker{
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grey);margin-bottom:18px;
}
.mono{font-family:"JetBrains Mono",ui-monospace,monospace;}

/* ---------- marca ---------- */
.tile{border-radius:22%;display:flex;align-items:center;justify-content:center;flex:none;}
.tile svg{width:62%;height:62%;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;}
.brand .wm{font-size:19px;color:var(--bone);}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:10;
  background:var(--pine);
  border-bottom:1px solid rgba(143,181,164,.18);
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px;}
.nav{display:flex;align-items:center;gap:30px;}
.nav a{
  text-decoration:none;color:var(--bone);font-size:15px;font-weight:500;opacity:.86;
}
.nav a:hover{opacity:1;}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:"Instrument Sans",system-ui,sans-serif;font-weight:600;font-size:15px;
  text-decoration:none;border-radius:6px;padding:12px 20px;line-height:1;
  transition:transform .15s ease, background-color .15s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn-amber{background:var(--amber);color:var(--pine-deep);}
.btn-amber:hover{background:#F5CD6C;}
.btn-ghost{color:var(--bone);border:1px solid rgba(247,247,245,.35);}
.btn-ghost:hover{border-color:var(--bone);}
.nav .btn{opacity:1;color:var(--pine-deep);padding:10px 16px;}
.brand .wm,.btn{white-space:nowrap;}
@media (max-width:820px){.nav a:not(.btn){display:none;}}
@media (max-width:420px){
  .site-header .wrap{padding:0 20px;}
  .brand .wm{font-size:16px;}
}

/* ---------- hero ---------- */
.hero{background:var(--pine);color:var(--bone);padding:104px 0 112px;position:relative;overflow:hidden;}
.hero .wrap{position:relative;z-index:1;}
.hero .kicker{color:var(--sage);}
.hero h1{
  font-weight:800;font-variation-settings:'wdth' 118;text-transform:uppercase;
  font-size:clamp(40px,7.4vw,92px);line-height:.9;letter-spacing:-.015em;
  max-width:14ch;
}
.hero h1 span{color:var(--amber);}
.hero .say{color:var(--sage);font-size:clamp(18px,2vw,21px);max-width:50ch;margin-top:30px;}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;}
.hero-mark{
  position:absolute;right:-6%;bottom:-18%;width:min(62vw,720px);
  opacity:.07;pointer-events:none;
}

/* faixa de dados abaixo do hero */
.facts{background:var(--pine-deep);color:var(--bone);}
.facts .wrap{display:grid;grid-template-columns:repeat(4,1fr);}
.facts .f{padding:26px 22px 26px 0;display:flex;flex-direction:column;gap:6px;}
.facts .f + .f{padding-left:22px;border-left:1px solid rgba(143,181,164,.2);}
.facts .t{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}
.facts .v{font-size:16px;font-weight:500;}
@media (max-width:820px){
  .facts .wrap{grid-template-columns:1fr 1fr;}
  .facts .f,.facts .f + .f{padding:20px 16px 20px 0;border-left:none;}
  .facts .f:nth-child(even){padding-left:16px;border-left:1px solid rgba(143,181,164,.2);}
}

/* ---------- seções ---------- */
section{padding:96px 0;scroll-margin-top:72px;}
section + section{border-top:1px solid var(--line);}
.head{display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;align-items:end;margin-bottom:48px;}
@media (max-width:820px){.head{grid-template-columns:1fr;}}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
@media (max-width:980px){.grid4{grid-template-columns:1fr 1fr;}}
@media (max-width:820px){.grid2,.grid3{grid-template-columns:1fr;}}
@media (max-width:560px){.grid4{grid-template-columns:1fr;}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:30px;
  display:flex;flex-direction:column;gap:14px;
}
.card p{font-size:15.5px;}
.card .ico{
  width:44px;height:44px;border-radius:10px;background:var(--pine);
  display:flex;align-items:center;justify-content:center;margin-bottom:6px;
}
.card .ico svg{width:22px;height:22px;stroke:var(--bone);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* sobre */
.about{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start;}
@media (max-width:820px){.about{grid-template-columns:1fr;gap:36px;}}
.about .stack{display:flex;flex-direction:column;gap:20px;}
.about h2{margin-bottom:6px;}
.panel{
  background:var(--pine);color:var(--bone);border-radius:6px;padding:40px;
  display:flex;flex-direction:column;gap:26px;
}
.panel .row{display:flex;gap:16px;align-items:flex-start;padding-bottom:22px;border-bottom:1px solid rgba(143,181,164,.2);}
.panel .row:last-child{border-bottom:none;padding-bottom:0;}
.panel .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--amber);padding-top:4px;flex:none;width:28px;}
.panel h3{color:var(--bone);font-size:18px;margin-bottom:4px;}
.panel p{color:#C9D9D1;font-size:15.5px;}

/* categorias */
.cats{display:flex;flex-wrap:wrap;gap:10px;}
.cats li{
  list-style:none;background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-size:15px;color:var(--ink);font-weight:500;
}
.cats{margin:0;padding:0;}
.note{font-size:15px;color:var(--grey);margin-top:22px;}

/* processo */
.steps{counter-reset:s;}
.step{border-top:2px solid var(--pine);padding-top:20px;display:flex;flex-direction:column;gap:10px;}
.step .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--pine);letter-spacing:.08em;}
.step p{font-size:15.5px;}

/* contato */
.contact{background:var(--pine);color:var(--bone);border-top:none;}
section + section.contact{border-top:none;}
.contact .kicker{color:var(--sage);}
.contact h2{color:var(--bone);}
.contact .lead{color:var(--sage);margin-top:14px;}
.contact-grid{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:22px;margin-top:48px;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.cbox{
  background:var(--pine-deep);border:1px solid rgba(143,181,164,.2);border-radius:6px;
  padding:28px;display:flex;flex-direction:column;gap:12px;text-decoration:none;
  transition:border-color .15s ease;
}
a.cbox:hover{border-color:var(--amber);}
.cbox .t{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);}
.cbox .v{font-size:19px;font-weight:500;color:var(--bone);line-height:1.4;overflow-wrap:anywhere;}
.cbox .v.email{font-size:clamp(15px,1.6vw,19px);}
.cbox .h{font-size:14px;color:#C9D9D1;margin-top:auto;}

/* ---------- footer ---------- */
footer{background:var(--pine-deep);color:var(--sage);padding:40px 0;}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
footer .brand .wm{font-size:16px;}
footer .meta{display:flex;flex-wrap:wrap;gap:8px 24px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;}
footer a{text-decoration:none;}
footer a:hover{color:var(--bone);}