/* ========== TOKENS ========== */
:root{
  --ink: #16374F;         /* fundo principal — azul de planta técnica */
  --ink-deep: #0F2C41;    /* painéis, header, footer */
  --ink-line: #EAF2F8;    /* "tinta branca" — texto e linhas do desenho */
  --ink-muted: #86ACC8;   /* texto secundário, legendas */
  --grid-line: rgba(234,242,248,0.09);
  --copper: #C1682F;      /* selo / destaque / CTA */
  --copper-dim: #A2551F;

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

  --wrap: 1160px;
  --radius: 3px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}

body{
  margin:0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0/40px 40px,
    var(--ink);
  color:var(--ink-line);
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0 0 .5em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; color:var(--ink-muted); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; }

/* ========== BLUEPRINT FRAME ========== */
.blueprint-frame{ position:fixed; inset:14px; border:1px solid var(--grid-line); pointer-events:none; z-index:5; }
.crop{ position:absolute; width:16px; height:16px; }
.crop--tl{ top:-1px; left:-1px; border-top:2px solid var(--copper); border-left:2px solid var(--copper); }
.crop--tr{ top:-1px; right:-1px; border-top:2px solid var(--copper); border-right:2px solid var(--copper); }
.crop--bl{ bottom:-1px; left:-1px; border-bottom:2px solid var(--copper); border-left:2px solid var(--copper); }
.crop--br{ bottom:-1px; right:-1px; border-bottom:2px solid var(--copper); border-right:2px solid var(--copper); }
.coord{ position:absolute; font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); letter-spacing:.08em; }
.coord--tl{ top:-8px; left:20px; background:var(--ink); padding:0 6px; }
.coord--br{ bottom:-8px; right:20px; background:var(--ink); padding:0 6px; }
@media (max-width:640px){ .blueprint-frame{ display:none; } }

/* ========== HEADER ========== */
.site-header{ position:sticky; top:0; z-index:10; background:rgba(15,44,65,0.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--grid-line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:76px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.logo-mark{ font-family:var(--font-mono); font-size:13px; border:1px solid var(--copper); color:var(--copper); width:32px; height:32px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); }
.logo-text{ font-family:var(--font-display); font-weight:600; font-size:18px; }
.logo-text em{ font-style:normal; color:var(--copper); }

.main-nav{ display:flex; align-items:center; gap:32px; }
.main-nav a{ text-decoration:none; font-size:14.5px; color:var(--ink-muted); transition:color .2s; }
.main-nav a:hover{ color:var(--ink-line); }
.nav-cta{ color:var(--ink-line) !important; border:1px solid var(--copper); padding:8px 16px; border-radius:var(--radius); }
.nav-cta:hover{ background:var(--copper); }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.nav-toggle span{ width:22px; height:2px; background:var(--ink-line); display:block; }

@media (max-width:860px){
  .nav-toggle{ display:flex; }
  .main-nav{
    position:absolute; top:76px; left:0; right:0;
    background:var(--ink-deep); border-bottom:1px solid var(--grid-line);
    flex-direction:column; align-items:flex-start; gap:0;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .main-nav.is-open{ max-height:300px; }
  .main-nav a{ width:100%; padding:16px 24px; border-bottom:1px solid var(--grid-line); }
  .nav-cta{ border:0; }
}

/* ========== EYEBROW ========== */
.eyebrow{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.14em; color:var(--copper); margin:0 0 16px; }

/* ========== HERO ========== */
.hero{ padding:96px 0 80px; }
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:48px; align-items:center; }
.hero h1{ font-size:clamp(2rem, 4vw, 2.9rem); line-height:1.15; color:var(--ink-line); }
.ink-underline{ background:linear-gradient(transparent 70%, rgba(193,104,47,.4) 70%); }
.hero-lede{ font-size:1.05rem; max-width:46ch; }
.hero-actions{ display:flex; gap:14px; margin:28px 0 40px; flex-wrap:wrap; }

.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:var(--radius); font-family:var(--font-body); font-weight:600; font-size:15px; text-decoration:none; transition:transform .15s, background .2s, border-color .2s; }
.btn--primary{ background:var(--copper); color:#0F2C41; border:1px solid var(--copper); }
.btn--primary:hover{ background:var(--copper-dim); border-color:var(--copper-dim); transform:translateY(-1px); }
.btn--ghost{ background:transparent; color:var(--ink-line); border:1px solid var(--grid-line); }
.btn--ghost:hover{ border-color:var(--ink-muted); }

.hero-specs{ display:flex; gap:28px; margin:0; flex-wrap:wrap; }
.hero-specs > div{ border-top:1px solid var(--grid-line); padding-top:10px; min-width:120px; }
.hero-specs dt{ font-family:var(--font-mono); font-size:11px; color:var(--ink-muted); letter-spacing:.06em; margin-bottom:4px; }
.hero-specs dd{ margin:0; font-size:14px; color:var(--ink-line); }

.hero-diagram svg{ width:100%; height:auto; }
.schematic-lines rect, .schematic-lines path{ fill:none; stroke:var(--ink-muted); stroke-width:1.5; }
.schematic-lines circle{ fill:var(--copper); }
.schematic-label{ font-family:var(--font-mono); font-size:11px; fill:var(--ink-muted); letter-spacing:.05em; }

@media (max-width:860px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-diagram{ order:-1; max-width:320px; margin:0 auto; }
}

/* ========== SERVICES ========== */
.services{ padding:88px 0; border-top:1px solid var(--grid-line); }
.services h2, .process h2, .about h2, .contact h2{ font-size:clamp(1.6rem,3vw,2.1rem); color:var(--ink-line); }
.service-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--grid-line); border:1px solid var(--grid-line); margin-top:36px; }
.service-card{ background:var(--ink); padding:28px 24px; }
.service-tag{ display:block; font-family:var(--font-mono); color:var(--copper); font-size:13px; margin-bottom:14px; }
.service-card h3{ font-size:1.05rem; color:var(--ink-line); }
.service-card p{ font-size:14px; margin:0; }

@media (max-width:900px){ .service-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .service-grid{ grid-template-columns:1fr; } }

/* ========== PROCESS ========== */
.process{ padding:88px 0; border-top:1px solid var(--grid-line); }
.process-list{ list-style:none; margin:36px 0 0; padding:0; display:grid; gap:0; }
.process-list li{ display:flex; gap:24px; padding:24px 0; border-top:1px solid var(--grid-line); }
.process-list li:last-child{ border-bottom:1px solid var(--grid-line); }
.process-index{ font-family:var(--font-mono); color:var(--copper); font-size:14px; padding-top:2px; min-width:32px; }
.process-list h3{ font-size:1.05rem; color:var(--ink-line); margin-bottom:6px; }
.process-list p{ margin:0; font-size:14.5px; }

/* ========== ABOUT ========== */
.about{ padding:88px 0; border-top:1px solid var(--grid-line); }
.about-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:56px; }
.spec-sheet{ border:1px solid var(--grid-line); padding:8px 0; height:fit-content; }
.spec-sheet div{ display:flex; justify-content:space-between; padding:14px 20px; border-bottom:1px solid var(--grid-line); font-size:14px; }
.spec-sheet div:last-child{ border-bottom:none; }
.spec-sheet dt{ color:var(--ink-muted); font-family:var(--font-mono); font-size:12.5px; }
.spec-sheet dd{ margin:0; color:var(--ink-line); text-align:right; }

@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; } }

/* ========== CONTACT ========== */
.contact{ padding:88px 0 110px; border-top:1px solid var(--grid-line); }
.contact-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:56px; }
.contact-form{ display:flex; flex-direction:column; gap:18px; }
.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink-muted); letter-spacing:.04em; }
.field input, .field textarea{
  background:var(--ink-deep); border:1px solid var(--grid-line); color:var(--ink-line);
  padding:12px 14px; border-radius:var(--radius); font-family:var(--font-body); font-size:14.5px; resize:vertical;
}
.field input:focus, .field textarea:focus{ border-color:var(--copper); }
.contact-form .btn{ align-self:flex-start; border:none; cursor:pointer; }
.form-status{ font-size:13.5px; min-height:1.2em; color:var(--copper); }

@media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }

/* ========== FOOTER ========== */
.site-footer{ border-top:1px solid var(--grid-line); padding:28px 0; }
.footer-inner{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-muted); flex-wrap:wrap; gap:8px; }