/* Ofício Sistemas — landing institucional temporária (paleta Canteiro). HTML estático autônomo. */
:root {
  --grafite: #1c2b33;
  --grafite-esc: #12191f;
  --creme: #f5f3ef;
  --ink: #12191f;
  --ink-soft: #2c3540;
  --ambar: #f2a100;
  --ambar-txt: #8a6400;
  --linha: #2c3a45;
  --mut: #93a0a8;
  --mut-2: #8b96a1;
  --mut-3: #5c6771;
  --wa: #25d366;
  --wa-esc: #06301a;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--grafite);
  font-family: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: var(--ambar-txt); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--ambar); }
::selection { background: var(--ambar); color: var(--grafite); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 44px); }
.narrow { max-width: 820px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 44px); }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace; }
.display { font-family: "Cabinet Grotesk", "Satoshi", sans-serif; font-weight: 800; letter-spacing: -0.02em; }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(20, 31, 38, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linha);
}
.site-header nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.brand-logo img { height: 50px; width: auto; }
.nav-right { display: flex; align-items: center; gap: 20px; }
.nav-link { font-family: "JetBrains Mono", monospace; font-size: 12.5px; letter-spacing: 0.06em; color: #c7d0d6; }
.nav-link:hover { color: var(--ambar); }
.btn-wa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wa);
  color: var(--wa-esc);
  font-weight: 700;
  font-size: 14.5px;
  padding: 10px 18px;
  border-radius: 6px;
}
.btn-wa:hover { background: #1ebe5a; color: var(--wa-esc); }

/* Hero (fundo grafite com grade) */
.hero { position: relative; background: var(--grafite); color: var(--creme); overflow: hidden; }
.hero-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 58px 58px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 22%, transparent 72%);
  mask-image: radial-gradient(120% 90% at 20% 0%, #000 22%, transparent 72%);
}
.hero-inner { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(44px, 6vw, 72px); }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ambar);
  font-weight: 500;
}
.eyebrow span { width: 22px; height: 2px; background: var(--ambar); display: inline-block; }
.hero h1 { font-size: clamp(34px, 5.5vw, 60px); line-height: 1.04; color: var(--creme); margin: 22px 0 0; max-width: 16ch; }
.hero .lead { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: #c7d0d6; margin: 22px 0 0; max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linha);
  color: var(--creme);
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 20px;
  border-radius: 6px;
}
.btn-ghost:hover { border-color: var(--ambar); color: var(--ambar); }
/* variante do botão fantasma para fundos claros (seção creme) */
.btn-ghost.on-light { border-color: #cfc9bb; color: var(--ink); }
.btn-ghost.on-light:hover { border-color: var(--ambar-txt); color: var(--ambar-txt); }

/* Seções claras */
.section-light { background: var(--creme); color: var(--ink); }
.section-light .narrow { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 7vw, 88px); }
.kicker {
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ambar-txt);
  margin: 0 0 12px;
}
h2.display { font-size: clamp(22px, 3vw, 32px); letter-spacing: -0.01em; color: var(--ink); margin: 0 0 18px; }
.section-light h2.display { margin-top: 0; }
.legal h2.display { margin: 40px 0 16px; }
.legal h2.display:first-of-type { margin-top: 0; }
.legal p, .section-light p { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); margin: 0 0 18px; }
.legal .li { display: flex; gap: 12px; margin: 0 0 12px; }
.legal .li b { color: var(--ambar-txt); font-weight: 700; flex: none; }
.legal .li span { font-size: 16.5px; line-height: 1.72; color: var(--ink-soft); }
.dated { font-family: "JetBrains Mono", monospace; font-size: 12.5px; letter-spacing: 0.04em; color: #8a8478; margin: 28px 0 0; }

/* Cards (o que a gente faz) */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 8px; }
.card { border: 1px solid #e2ded4; border-radius: 12px; padding: 22px; background: #fbfaf7; }
.card h3 { font-family: "Cabinet Grotesk", sans-serif; font-weight: 700; font-size: 18px; margin: 0 0 8px; color: var(--ink); }
.card p { font-size: 15px; line-height: 1.6; margin: 0; color: var(--ink-soft); }

/* Footer */
.site-footer { background: var(--grafite-esc); color: var(--mut-2); border-top: 1px solid #223039; }
.site-footer .wrap { padding-top: clamp(48px, 6vw, 72px); }
.footer-top { display: flex; flex-wrap: wrap; gap: 44px; justify-content: space-between; }
.footer-brand { flex: 1 1 300px; max-width: 360px; }
.footer-brand img { height: 36px; width: auto; }
.footer-brand p { font-size: 14.5px; line-height: 1.6; color: var(--mut-2); margin: 20px 0 0; }
.footer-cols { display: flex; flex-wrap: wrap; gap: 44px; }
.footer-col .h { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut-3); margin-bottom: 16px; }
.footer-col .links { display: grid; gap: 11px; font-family: "JetBrains Mono", monospace; font-size: 13px; }
.footer-col .links a { color: #a9b4bd; }
.footer-col .links a:hover { color: var(--creme); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  padding: 22px 0;
  border-top: 1px solid #223039;
  font-family: "JetBrains Mono", monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--mut-3);
}
.footer-bottom a { color: #a9b4bd; }
.footer-bottom a:hover { color: var(--creme); }