:root {
  --grafite: #1F1F1B;
  --carvao: #16160F;
  --preto-fundo: #0E0E0A;
  --areia-clara: #F2EDE4;
  --terracota: #B45F38;
  --terracota-profunda: #9E4E2C;
  --terracota-clara: #D0764A;
  --oliva-profunda: #3F4A38;
  --cinza-cal: #C9BFAC;

  --surface: #F7F4ED;
  --raised: #FFFFFF;
  --text: #1F1F1B;
  --text-soft: #4A473E;
  --muted: #6E6A5E;
  --muted-strong: #3A3830;
  --border: rgba(31, 31, 27, 0.12);
  --border-strong: rgba(31, 31, 27, 0.14);
  --action: #9E4E2C;

  --dark-surface: #16160F;
  --dark-text: #F2EDE4;
  --dark-muted: #A8A296;
  --dark-muted-soft: #8C877A;
  --dark-border: rgba(242, 237, 228, 0.14);
  --dark-action: #D0764A;

  --font-display: 'Sora', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--action); text-decoration: none; }
a:hover { color: var(--grafite); }

img, svg { max-width: 100%; display: block; }

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--surface);
}

.eyebrow {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.16em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ---------- Logo ---------- */
.logo {
  display: flex;
  align-items: center;
  gap: 14px;
  color: inherit;
}
.logo-mark {
  position: relative;
  width: 26px;
  height: 26px;
  flex: none;
}
.logo-mark span { position: absolute; display: block; background: var(--grafite); }
.logo-mark span:nth-child(1) { left: 0; top: 0; width: 7px; height: 26px; }
.logo-mark span:nth-child(2) { left: 9px; top: 0; width: 17px; height: 7px; }
.logo-mark span:nth-child(3) { left: 9px; top: 19px; width: 17px; height: 7px; background: var(--terracota); }
.logo-word {
  display: flex;
  align-items: baseline;
  gap: 9px;
}
.logo-word .taipa {
  position: relative;
  font: 700 20px/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--grafite);
}
.logo-word .taipa .dot {
  position: relative;
  display: inline-block;
}
.logo-word .taipa .dot::after {
  content: '';
  position: absolute;
  left: 1px;
  top: -7px;
  width: 5px;
  height: 5px;
  background: var(--terracota);
}
.logo-word .tech {
  font: 500 20px/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--muted);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 500 14px/1 var(--font-body);
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn-primary {
  background: var(--action);
  color: var(--surface);
  padding: 12px 24px;
}
.btn-primary:hover { background: var(--grafite); color: var(--surface); }
.btn-outline {
  border: 1px solid rgba(31, 31, 27, 0.25);
  color: var(--text);
  padding: 12px 24px;
}
.btn-outline:hover { border-color: var(--grafite); background: rgba(31, 31, 27, 0.05); }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
}
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-ig { font: 500 14px/1 var(--font-body); color: var(--muted-strong); }
.nav-ig:hover { color: var(--action); }
.nav .btn-primary { padding: 12px 24px; font-size: 14px; }

/* ---------- Hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 380px;
  border-bottom: 1px solid var(--border);
}
.hero-content { padding: 112px 64px 104px; }
.hero-brand {
  display: flex;
  align-items: center;
  gap: 26px;
}
.hero-mark {
  position: relative;
  width: 76px;
  height: 76px;
  flex: none;
  overflow: hidden;
}
.hero-mark span { position: absolute; display: block; background: var(--grafite); }
.hero-mark span:nth-child(1) { left: 0; top: 0; width: 19px; height: 76px; }
.hero-mark span:nth-child(2) { left: 24px; top: 0; width: 52px; height: 19px; }
.hero-mark span:nth-child(3) { left: 24px; top: 57px; width: 52px; height: 19px; background: var(--terracota); }
.hero-word { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.hero-word .taipa {
  position: relative;
  font: 700 82px/0.84 var(--font-display);
  letter-spacing: -0.045em;
  color: var(--grafite);
}
.hero-word .taipa .dot { position: relative; display: inline-block; }
.hero-word .taipa .dot::after {
  content: '';
  position: absolute;
  left: 4px;
  top: -25px;
  width: 17px;
  height: 17px;
  background: var(--terracota);
}
.hero-word .tech {
  font: 500 52px/0.84 var(--font-display);
  letter-spacing: -0.03em;
  color: var(--muted);
}
.hero h1 {
  margin: 56px 0 0;
  font: 700 60px/1.1 var(--font-display);
  letter-spacing: -0.04em;
  max-width: 820px;
  text-wrap: pretty;
}
.hero p.lead {
  margin: 30px 0 0;
  max-width: 620px;
  font: 400 20px/1.65 var(--font-body);
  color: var(--text-soft);
  text-wrap: pretty;
}
.hero-actions {
  margin-top: 44px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.hero-actions .btn { padding: 18px 34px; font-size: 16px; }
.hero-note {
  margin-top: 40px;
  font: 400 14px/1.6 var(--font-mono);
  color: var(--muted);
}
.hero-visual {
  background: var(--cinza-cal) url('./assets/hero-team.jpg') center/cover no-repeat;
  position: relative;
  min-height: 420px;
}
.hero-visual::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 84px;
  height: 84px;
  background: var(--oliva-profunda);
}

/* ---------- Section headers ---------- */
.section-head {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 80px;
  align-items: end;
}
.section-head h2 {
  margin: 20px 0 0;
  font: 700 44px/1.1 var(--font-display);
  letter-spacing: -0.04em;
}
.section-head p {
  margin: 0;
  font: 400 17px/1.65 var(--font-body);
  color: var(--text-soft);
}

/* ---------- Services ---------- */
.services { padding: 96px 64px; border-bottom: 1px solid var(--border); }
.services-grid {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border-strong);
  border: 1px solid var(--border-strong);
}
.service-card {
  background: var(--raised);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  min-height: 230px;
}
.service-chip { width: 38px; height: 9px; }
.service-card h3 {
  margin: 26px 0 0;
  font: 600 21px/1.25 var(--font-display);
  letter-spacing: -0.02em;
}
.service-card p {
  margin: 14px 0 0;
  font: 400 15px/1.6 var(--font-body);
  color: var(--text-soft);
}

/* ---------- Como funciona ---------- */
.process {
  background: var(--dark-surface);
  color: var(--dark-text);
  padding: 96px 64px;
}
.process .eyebrow { color: var(--dark-muted-soft); }
.process .section-head h2 { color: var(--areia-clara); }
.process .section-head p { color: var(--dark-muted); }

.steps {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--dark-border);
  border: 1px solid var(--dark-border);
}
.step {
  background: var(--dark-surface);
  padding: 48px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.step-top { display: flex; justify-content: space-between; align-items: flex-start; }
.step-num { font: 400 13px/1 var(--font-mono); color: var(--dark-muted-soft); }
.step-chip { width: 44px; height: 10px; background: var(--areia-clara); }
.step:nth-child(2) .step-chip { background: var(--dark-action); }
.step h3 {
  margin: 36px 0 0;
  font: 600 28px/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--areia-clara);
}
.step p {
  margin: 18px 0 0;
  font: 400 17px/1.6 var(--font-body);
  color: var(--dark-muted);
}
.step-meta {
  margin-top: auto;
  padding-top: 28px;
  font: 400 13px/1 var(--font-mono);
  color: var(--dark-muted-soft);
}

.features {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding-top: 36px;
  border-top: 1px solid var(--dark-border);
}
.features h3 {
  margin: 0;
  font: 600 17px/1.3 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--areia-clara);
}
.features p {
  margin: 10px 0 0;
  font: 400 15px/1.6 var(--font-body);
  color: var(--dark-muted);
}

/* ---------- Contato ---------- */
.contact {
  padding: 104px 64px;
  position: relative;
  overflow: hidden;
}
.contact-deco-a {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 300px;
  height: 74px;
  background: var(--oliva-profunda);
}
.contact-deco-b {
  position: absolute;
  right: 0;
  bottom: 94px;
  width: 74px;
  height: 160px;
  background: var(--terracota);
}
.contact-inner { position: relative; max-width: 820px; }
.contact h2 {
  margin: 20px 0 0;
  font: 700 52px/1.1 var(--font-display);
  letter-spacing: -0.04em;
  max-width: 620px;
  text-wrap: pretty;
}
.contact-lead {
  margin: 28px 0 0;
  max-width: 560px;
  font: 400 19px/1.7 var(--font-body);
  color: var(--text-soft);
  text-wrap: pretty;
}
.contact-actions {
  margin-top: 48px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.contact-actions .btn-primary { padding: 22px 42px; font-size: 18px; }
.contact-direct {
  font: 400 16px/1.7 var(--font-mono);
  color: var(--muted-strong);
}
.contact-direct a { color: var(--action); }

.contact-meta {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--border-strong);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  max-width: 900px;
}
.contact-meta .label {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  color: var(--muted);
  text-transform: uppercase;
}
.contact-meta .value {
  margin-top: 12px;
  font: 400 15px/1.6 var(--font-body);
  color: var(--muted-strong);
}

/* ---------- Rodapé ---------- */
.footer {
  background: var(--preto-fundo);
  color: var(--dark-muted);
  padding: 44px 64px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-mark { position: relative; width: 22px; height: 22px; flex: none; }
.footer-mark span { position: absolute; display: block; background: var(--areia-clara); }
.footer-mark span:nth-child(1) { left: 0; top: 0; width: 6px; height: 22px; }
.footer-mark span:nth-child(2) { left: 8px; top: 0; width: 14px; height: 6px; }
.footer-mark span:nth-child(3) { left: 8px; top: 16px; width: 14px; height: 6px; background: var(--terracota); }
.footer-locale {
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.footer-links {
  display: flex;
  align-items: center;
  gap: 26px;
  font: 400 12px/1 var(--font-mono);
  color: #5E5A50;
  flex-wrap: wrap;
}
.footer-links a { color: var(--dark-muted); }
.footer-links a:hover { color: var(--areia-clara); }

/* ---------- Treelinks (navegadores in-app) ---------- */
.treelinks {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: var(--dark-surface);
}
.treelinks[hidden] { display: none; }
.treelinks-card {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.treelinks-mark {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
}
.treelinks-mark span { position: absolute; display: block; background: var(--areia-clara); }
.treelinks-mark span:nth-child(1) { left: 0; top: 0; width: 13px; height: 52px; }
.treelinks-mark span:nth-child(2) { left: 16px; top: 0; width: 36px; height: 13px; }
.treelinks-mark span:nth-child(3) { left: 16px; top: 39px; width: 36px; height: 13px; background: var(--terracota); }
.treelinks-word {
  margin-top: 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.treelinks-word .taipa {
  position: relative;
  font: 700 32px/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--areia-clara);
}
.treelinks-word .taipa .dot { position: relative; display: inline-block; }
.treelinks-word .taipa .dot::after {
  content: '';
  position: absolute;
  left: 1px;
  top: -11px;
  width: 8px;
  height: 8px;
  background: var(--terracota);
}
.treelinks-word .tech {
  font: 500 32px/1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--dark-muted);
}
.treelinks-lead {
  margin: 18px 0 0;
  max-width: 320px;
  font: 400 15px/1.6 var(--font-body);
  color: var(--dark-muted);
}
.treelinks-links {
  margin-top: 36px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.treelinks-link {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border: 1px solid var(--dark-border);
  border-radius: 4px;
  background: transparent;
  color: var(--areia-clara);
  font: 500 15px/1 var(--font-body);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.treelinks-link:hover { border-color: var(--dark-action); color: var(--areia-clara); }
.treelinks-link-primary {
  background: var(--dark-action);
  border-color: var(--dark-action);
  color: var(--carvao);
}
.treelinks-link-primary:hover { background: var(--terracota-clara); color: var(--carvao); }
.treelinks-link-ghost {
  color: var(--dark-muted);
  border-color: transparent;
}
.treelinks-link-ghost:hover { color: var(--areia-clara); border-color: var(--dark-border); }
.treelinks-footer {
  margin-top: 40px;
  font: 400 12px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--dark-muted-soft);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav { padding: 0 32px; }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { min-height: 260px; order: -1; }
  .hero-content { padding: 64px 32px 72px; }
  .hero h1 { font-size: 46px; }
  .services, .process, .contact { padding: 72px 32px; }
  .section-head { grid-template-columns: 1fr; gap: 24px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr 1fr; gap: 32px; }
  .contact-meta { grid-template-columns: 1fr 1fr; }
  .footer { padding: 36px 32px; }
}

@media (max-width: 640px) {
  .nav { padding: 0 20px; height: auto; min-height: 76px; }
  .nav-ig { display: none; }
  .hero-content { padding: 48px 20px 56px; }
  .hero-brand { gap: 16px; }
  .hero-mark { width: 52px; height: 52px; }
  .hero-mark span:nth-child(1) { width: 13px; height: 52px; }
  .hero-mark span:nth-child(2) { left: 16px; width: 36px; height: 13px; }
  .hero-mark span:nth-child(3) { left: 16px; top: 39px; width: 36px; height: 13px; }
  .hero-word .taipa { font-size: 48px; }
  .hero-word .tech { font-size: 30px; }
  .hero h1 { font-size: 34px; margin-top: 40px; }
  .hero p.lead { font-size: 17px; }
  .hero-actions .btn { padding: 15px 24px; font-size: 15px; flex: 1 1 auto; text-align: center; }
  .services, .process, .contact { padding: 56px 20px; }
  .section-head h2 { font-size: 32px; }
  .services-grid { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; gap: 28px; }
  .step { padding: 32px; }
  .contact h2 { font-size: 34px; }
  .contact-deco-a, .contact-deco-b { display: none; }
  .contact-meta { grid-template-columns: 1fr; }
  .contact-actions { gap: 20px; }
  .contact-actions .btn-primary { padding: 18px 30px; font-size: 16px; width: 100%; }
  .footer { flex-direction: column; align-items: flex-start; padding: 32px 20px; }
  .footer-links { gap: 16px 22px; }
}