/* ============================================================
   InfraCtrl — Design System compartilhado
   Tema claro editorial: bg #f6f7f4, verde #1B8F4E, Inter + JetBrains Mono
   ============================================================ */
:root{
  --bg:#f6f7f4; --bg-alt:#eef0ea; --bg-card:#ffffff; --bg-card2:#f2f3ee;
  --border:#e3e5dd; --border-hi:#d3d6cc;
  --text:#16201a; --text-muted:#57615a; --text-dim:#8b938c;
  --green:#1B8F4E; --green-dim:#17814a; --green-soft:#116C3B;
  --green-glow:rgba(27,143,78,.09);
  --panel:#e9f4ec;
  --red:#cf4437; --amber:#b07a17;
  --font:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --radius:8px; --radius-lg:14px;
  --maxw:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.65;font-size:16.5px;-webkit-font-smoothing:antialiased}
::selection{background:var(--green);color:#fff}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.narrow{max-width:820px;margin:0 auto;padding:0 28px}

/* ---- Logo lockup ---- */
.logo{display:inline-flex;align-items:center}
.logo img{height:38px;width:auto;display:block}

/* ---- Nav ---- */
header.nav{position:sticky;top:0;z-index:60;background:rgba(246,247,244,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
header.nav .in{max-width:var(--maxw);margin:0 auto;padding:15px 28px;display:flex;align-items:center;justify-content:space-between;gap:22px}
header.nav nav{display:flex;gap:24px;font-size:14px}
header.nav nav a{color:var(--text-muted);transition:color .2s}
header.nav nav a:hover,header.nav nav a.active{color:var(--green)}
.navtoggle{display:none;background:none;border:1px solid var(--border-hi);color:var(--text);border-radius:8px;padding:7px 10px;cursor:pointer;font-size:16px}
@media(max-width:900px){
  header.nav nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg-alt);border-bottom:1px solid var(--border);padding:14px 28px;gap:16px}
  header.nav nav.open{display:flex}
  .navtoggle{display:inline-block}
}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff;font-weight:700;padding:11px 20px;border-radius:var(--radius);font-size:14.5px;border:none;cursor:pointer;transition:.2s;font-family:var(--font)}
.btn:hover{background:#17703f;transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border-hi)}
.btn.ghost:hover{border-color:var(--green);color:var(--green);background:transparent;transform:translateY(-1px)}
.btn.block{width:100%;justify-content:center}
.btn.lg{padding:14px 26px;font-size:16px}

/* ---- Sections & headings ---- */
section{padding:76px 0}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--green);font-weight:600}
.eyebrow.center{display:block;text-align:center}
h1{font-size:47px;font-weight:900;letter-spacing:-1.3px;line-height:1.07}
h2{font-size:32px;font-weight:800;letter-spacing:-.7px;line-height:1.12}
h3{font-size:20px;font-weight:700;letter-spacing:-.2px}
.sec-head{text-align:center;max-width:660px;margin:0 auto 46px}
.sec-head h2{margin:14px 0 12px}
.sec-head p{color:var(--text-muted);font-size:18px}
.lead{font-size:19px;color:var(--text-muted)}
p{margin:14px 0}
strong{color:#0b130e;font-weight:700}
@media(max-width:760px){h1{font-size:33px}h2{font-size:26px}section{padding:56px 0}}

/* ---- Grids ---- */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.g3,.g4{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* ---- Cards ---- */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;transition:.25s}
.card.hov:hover{border-color:var(--green-dim);transform:translateY(-3px);box-shadow:0 14px 44px -20px rgba(27,143,78,.16)}
.card .ico{width:46px;height:46px;border-radius:11px;background:var(--green-glow);border:1px solid var(--green-dim);display:flex;align-items:center;justify-content:center;color:var(--green);margin-bottom:16px}
.ico svg{width:22px;height:22px;stroke:var(--green);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.card h3{margin-bottom:8px}
.card p{color:var(--text-muted);font-size:15px;margin:0}
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--green);background:var(--green-glow);border:1px solid var(--green-dim);padding:4px 10px;border-radius:20px}

/* ---- Stats ---- */
.statband{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:640px){.statband{grid-template-columns:1fr 1fr}}
.stat{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 18px;text-align:center}
.stat .n{font-family:var(--mono);font-size:32px;font-weight:800;color:var(--green);letter-spacing:-1px}
.stat .l{font-size:13px;color:var(--text-muted);margin-top:6px}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;padding:96px 0 76px;text-align:center}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(720px 360px at 50% -12%,var(--green-glow),transparent 70%);pointer-events:none}
.hero .in{position:relative}
.hero h1{margin:18px auto 18px;max-width:880px}
.hero .grad{color:var(--green)}
.hero p.lead{max-width:620px;margin:0 auto}
.hero .c- {}
.hero .actions{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.gridbg{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:52px 52px;opacity:.15;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 72%);pointer-events:none}

/* ---- Testimonial ---- */
.quote{background:var(--panel);border:1px solid var(--green-dim);border-radius:var(--radius-lg);padding:34px 36px;font-size:20px;line-height:1.55;color:#0b130e;font-weight:500}
.quote .who{display:block;margin-top:18px;font-size:14px;color:var(--text-muted);font-weight:400;font-family:var(--mono)}

/* ---- Tech stack (icon + label pills) ---- */
.techrow{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center;justify-content:center}
.techrow .tc{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:14.5px;letter-spacing:.2px;font-weight:500;color:var(--text-muted);border:1px solid var(--border);border-radius:8px;padding:9px 16px 9px 12px;background:var(--bg-card);transition:.2s}
.techrow .tc:hover{border-color:var(--green-dim);color:var(--text);transform:translateY(-1px)}
.techrow .tc img{height:20px;width:20px;object-fit:contain;flex:0 0 auto;filter:brightness(0);opacity:.5;transition:opacity .2s ease}
.techrow .tc:hover img{opacity:.85}

/* ---- Logos marquee (client logos, infinite scroll) ---- */
.logostrip{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.logostrip-track{display:flex;align-items:center;gap:64px;width:max-content;animation:logoscroll 30s linear infinite}
.logostrip:hover .logostrip-track{animation-play-state:paused}
.logostrip-track img{flex:0 0 auto;width:112px;height:38px;object-fit:contain;filter:brightness(0);opacity:.5;transition:opacity .25s ease}
.logostrip-track img:hover{opacity:.85}
@keyframes logoscroll{from{transform:translateX(0)}to{transform:translateX(-33.3334%)}}
@media(prefers-reduced-motion:reduce){.logostrip-track{animation:none}}
@media(max-width:640px){.logostrip-track{gap:40px}.logostrip-track img{width:88px;height:30px}}

/* ---- Prose (articles / legal) ---- */
.prose{font-size:17px;line-height:1.8}
.prose p{margin:18px 0;color:var(--text)}
.prose h2{margin:40px 0 8px;font-size:27px}
.prose h3{margin:30px 0 6px;font-size:20px}
.prose ul,.prose ol{margin:16px 0;padding-left:24px}
.prose li{margin:9px 0}
.prose li::marker{color:var(--green)}
.prose strong{color:#0b130e}
.prose blockquote{border-left:3px solid var(--green);background:var(--bg-alt);padding:14px 22px;margin:22px 0;border-radius:0 8px 8px 0;color:var(--text-muted)}
.prose code{font-family:var(--mono);background:var(--bg-card2);border:1px solid var(--border);padding:1px 6px;border-radius:5px;font-size:.85em;color:var(--green-soft)}
.prose a{color:var(--green-soft);text-decoration:underline;text-underline-offset:3px}

/* ---- CTA band ---- */
.ctaband{background:var(--panel);border:1px solid var(--green-dim);border-radius:var(--radius-lg);padding:52px 40px;text-align:center;position:relative;overflow:hidden}
.ctaband::before{content:"";position:absolute;inset:0;background:radial-gradient(560px 240px at 50% 0,var(--green-glow),transparent 70%)}
.ctaband>*{position:relative}
.ctaband h2{margin-bottom:12px}
.ctaband p{color:var(--text-muted);max-width:540px;margin:0 auto 26px}

/* ---- Footer ---- */
footer.site{border-top:1px solid var(--border);padding:56px 0 34px;margin-top:20px}
footer.site .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:34px;border-bottom:1px solid var(--border)}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h5{font-family:var(--mono);font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-dim);margin-bottom:14px}
footer.site ul{list-style:none}
footer.site li{margin:9px 0}
footer.site a{color:var(--text-muted);font-size:14.5px}
footer.site a:hover{color:var(--green)}
footer.site .about{color:var(--text-muted);font-size:14px;margin:14px 0 0;max-width:280px}
footer.site .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:22px;color:var(--text-dim);font-size:13px}

/* ---- Breadcrumb ---- */
.breadcrumb{font-family:var(--mono);font-size:12px;color:var(--text-dim);letter-spacing:.4px;padding:26px 0 0}
.breadcrumb a{color:var(--text-muted)}
.breadcrumb a:hover{color:var(--green)}

/* ---- Utility ---- */
.center{text-align:center}
.mono{font-family:var(--mono)}
.muted{color:var(--text-muted)}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.divider{border:none;border-top:1px solid var(--border);margin:0}
.note{font-size:13px;color:var(--text-dim);font-style:italic}