/* ==========================================================================
   Vexora — recriação do mock (img-to-html)
   Regiões do wireframe = classes (.nav .hero .rail .section .card .section2
   .card2 .rail2 .media .section3 .card3). Tags tipadas = utilitárias
   (.h1 .h2 .h3 .t1 .t2 .t3 .btn .btn2 .btn3 .lnk .ico .img).
   Valores amostrados/medidos na reference.png em 1536px.
   ========================================================================== */

:root {
  /* superfícies */
  --bg-page: #020409;
  --bg-hero-edge: #000208;
  --bg-band: #060910;
  --bg-section3: #050d18;
  --bg-card3: #07121d;
  --hairline: #10141d;
  --divider: #232934;
  --border-card3: #15222e;

  /* texto */
  --tx-strong: #ffffff;
  --tx-body: #c7cad3;
  --tx-nav: #c3c7ce;
  --tx-meta: #a5acb4;
  --tx-dim: #90949a;
  --tx-micro: #979ea9;
  --tx-stat: #d8e0ee;

  /* marca */
  --blue-active: #38b0f0;
  --blue-link: #2a86e0;
  --blue-border: #3a82bd;
  --blue-btn-a: #0a66ff;
  --blue-btn-b: #0040d6;
  --blue-btn-c: #001a6a;
  --blue-btn-glow: #0a96ff;

  /* forma */
  --radius-btn: 14px;
  --radius-card: 6px;

  /* tipografia */
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  /* grade do mock */
  --page-w: 1536px;
  --gutter-l: clamp(24px, 7.62vw, 117px);
  --gutter-r: clamp(24px, 7.1vw, 109px);
  --edge: max(0px, calc((100vw - var(--page-w)) / 2)); /* sobra lateral acima de 1536px */
  --hero-h: 548px;
}

/* ---------- reset curto ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg-page); scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg-page);
  color: var(--tx-strong);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--blue-active); outline-offset: 4px; border-radius: 4px; }

.wrap {
  width: 100%;
  max-width: var(--page-w);
  margin: 0 auto;
  padding-left: var(--gutter-l);
  padding-right: var(--gutter-r);
}

/* ==========================================================================
   Tags tipadas
   ========================================================================== */

.h1, .h2 { display: block; text-transform: uppercase; color: var(--tx-strong); }

.h1 { font-size: clamp(23px, 2.19vw, 33.5px); font-weight: 700; line-height: 1.2388; letter-spacing: 0.327em; }
.h2 { font-size: clamp(20px, 1.96vw, 30px); font-weight: 300; line-height: 1.3167; letter-spacing: 0.318em; word-spacing: 6px; }

.h3 { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--tx-strong); }

.t1 { font-size: 14px; font-weight: 400; line-height: 20px; letter-spacing: 0.022em; color: var(--tx-body); }
.t2 { font-size: 11.5px; font-weight: 400; line-height: 17px; letter-spacing: 0.02em; color: var(--tx-dim); }
.t3 { font-size: 13px; font-weight: 400; line-height: 1; letter-spacing: 0.5em; text-transform: uppercase; color: var(--tx-micro); }

/* nav ativo */
.btn {
  position: relative;
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em;
  color: var(--blue-active);
}
.btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px;
  height: 2px; background: var(--blue-active); border-radius: 1px;
}

/* nav inativo */
.lnk { font-size: 11.5px; font-weight: 400; letter-spacing: 0.01em; color: var(--tx-nav); transition: color .2s ease; }
.lnk:hover { color: var(--tx-strong); }

/* botões */
.btn2, .btn3 {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 45px; padding: 0 24px;
  border-radius: var(--radius-btn);
  font-size: 11.8px; font-weight: 500; letter-spacing: 0.01em; color: var(--tx-strong);
  white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.btn2 {
  background:
    radial-gradient(120px 40px at 26% 100%, var(--blue-btn-glow) 0%, transparent 100%),
    linear-gradient(90deg, var(--blue-btn-a) 0%, var(--blue-btn-a) 22%, var(--blue-btn-b) 58%, var(--blue-btn-c) 100%);
  box-shadow: 0 0 22px rgba(0, 72, 255, 0.28);
}
.btn2:hover { transform: translateY(-1px); box-shadow: 0 0 30px rgba(0, 96, 255, 0.45); }
.btn3 {
  border: 1px solid var(--blue-border);
  background: rgba(0, 4, 14, 0.35);
}
.btn3:hover { border-color: var(--blue-active); background: rgba(10, 60, 120, 0.25); }

/* réguas curtas */
.rule { display: block; height: 3px; background: var(--tx-strong); border-radius: 1px; }

/* ativos (etapa 4): SVGs em assets/, aplicados por classe */
.ico { display: inline-block; flex: none; width: 30px; height: 30px; background: center / contain no-repeat; }
.ico--logo { width: 47px; height: 41px; background-image: url("logo-v.svg"); filter: drop-shadow(0 3px 7px rgba(0, 90, 255, 0.55)); }
.ico--gear { background-image: url("icon-gear.svg"); filter: drop-shadow(0 0 3px rgba(63, 120, 238, 0.55)); }
.ico--database { background-image: url("icon-database.svg"); filter: drop-shadow(0 0 3px rgba(86, 176, 244, 0.5)); }
.ico--bar-chart { height: 31px; background-image: url("icon-bar-chart.svg"); filter: drop-shadow(0 0 3px rgba(86, 201, 246, 0.5)); }
.ico--people { width: 43px; height: 28px; background-image: url("icon-people.svg"); filter: drop-shadow(0 0 3px rgba(89, 195, 244, 0.5)); }
.ico--monitor { background-image: url("icon-monitor.svg"); }
.ico--shield-lock { background-image: url("icon-shield-lock.svg"); }
.ico--shield-check { background-image: url("icon-shield-check.svg"); }
/* seta: dois arquivos (branca p/ botões, azul p/ links). Máscara CSS foi descartada
   porque o Chromium bloqueia mask-image em file://, e o site precisa abrir localmente. */
.ico--arrow { width: 13px; height: 10px; background-image: url("icon-arrow-right.svg"); transition: transform .2s ease; }
.lnk .ico--arrow { background-image: url("icon-arrow-right-blue.svg"); }
.btn3 .ico--arrow { background-image: url("icon-arrow-right-sky.svg"); }
a:hover > .ico--arrow { transform: translateX(3px); }

/* foto do prédio: recorte do mock ampliado 2x (EDSR) e cobrindo a coluna inteira */
.img { display: block; width: 100%; height: 100%; }
.img--predio { position: absolute; inset: 0; background: url("predio.jpg") 50% 0 / cover no-repeat; }

/* ==========================================================================
   nav
   ========================================================================== */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; }
.nav__row { display: flex; align-items: center; height: 70px; }
.nav__brand { display: inline-flex; align-items: center; gap: 11px; margin-left: -9px; padding-top: 3px; }
.nav__wordmark {
  font-size: 27px; font-weight: 600; line-height: 1; letter-spacing: 0.01em;
  transform: scaleX(1.12); transform-origin: left center;
}
.nav__links { display: flex; align-items: center; gap: 36px; margin-left: clamp(24px, calc(21.36vw - 0.1px), 328px); padding-top: 0; white-space: nowrap; }
.nav__cta { margin-left: auto; width: 219px; height: 44px; padding: 0; margin-top: -1px; font-size: 11.2px; gap: 11px; }

/* ==========================================================================
   hero
   ========================================================================== */
.hero {
  position: relative;
  width: 100%;
  min-height: var(--hero-h);
  background-color: var(--bg-hero-edge);
  background-image: url("hero-bg.jpg");
  background-repeat: no-repeat;
  background-position: center 30%;
  background-size: cover;
  border-bottom: 1px solid var(--hairline);
}
.hero__inner { position: relative; min-height: calc(var(--hero-h) - 1px); padding-top: 104px; }
.hero__eyebrow { font-size: 14px; letter-spacing: 0.386em; }
.hero__title { margin-top: 23px; font-size: inherit; font-weight: inherit; }
.hero__title .h2 { position: relative; top: 0; }
.hero__rule { width: 48px; margin-top: 19px; }
.hero__lead { margin-top: 23px; }
.hero__actions { display: flex; gap: 23px; margin-top: 20px; margin-left: -1px; }
.hero__actions .btn2 { width: 225px; padding: 0; }
.hero__actions .btn3 { width: 223px; padding: 0; }

.rail {
  position: absolute; right: calc(var(--gutter-r) + 1px); top: 420px;
  display: flex; flex-direction: column; gap: 9.5px;
  width: 103px;
}
.rail .t3 { font-size: 12px; letter-spacing: 0.265em; line-height: 12px; }
.rail__rule { width: 35px; margin-top: 7px; }

/* ==========================================================================
   section — pilares
   ========================================================================== */
.section { background: var(--bg-band); border-bottom: 1px solid var(--hairline); }
.section__grid {
  display: grid; grid-template-columns: 311fr 307fr 314fr 378fr;
  height: 146px; padding-top: 22px; padding-bottom: 24px;
}
.card { display: flex; align-items: flex-start; min-width: 0; padding: 9px 0 0 clamp(16px, 3.65vw, 56px); border-left: 1px solid var(--divider); }
.card:first-child { border-left: 0; padding-left: clamp(0px, 3.52vw, 54px); }
.card .ico { margin-top: 7px; margin-right: clamp(14px, 2.74vw, 42px); }
.card:first-child .ico { margin-right: clamp(14px, 2.61vw, 40px); }
.card:nth-child(3) .ico { margin-right: clamp(14px, 3vw, 46px); }
.card--wide { padding-left: clamp(16px, 4.11vw, 63px); }
.card--wide .ico { margin-top: 8px; margin-right: clamp(14px, 3.13vw, 48px); }
.card .h3 { font-size: 14px; }
.card .t2 { margin-top: 8px; letter-spacing: 0.035em; }

/* ==========================================================================
   section2 — números
   ========================================================================== */
.section2 { background: var(--bg-page); }
.section2__grid {
  --pad: clamp(18px, 4.5vw, 69px);
  display: grid; grid-template-columns: 226fr 291fr 293fr 377fr auto;
  align-items: start; height: 118px; padding-top: 27px;
}
.card2 { display: flex; flex-direction: column; height: 62px; min-width: 0; padding-left: var(--pad); border-left: 1px solid var(--divider); }
.card2:first-child { padding-left: 0; border-left: 0; }
.card2:nth-child(3) { padding-left: calc(var(--pad) - 2px); }
.card2:nth-child(4) { padding-left: calc(var(--pad) - 5px); }
.card2 .h3 { font-size: clamp(30px, 2.61vw, 40px); font-weight: 400; line-height: 41px; letter-spacing: 0.01em; color: var(--tx-stat); }
.card2 .t2 { margin-top: 2px; font-size: 12.3px; letter-spacing: 0.03em; color: var(--tx-meta); }

.rail2 {
  display: flex; flex-direction: column; gap: 9.3px;
  width: 123px; height: 63px; margin-top: -3px; padding: 3px 0 0 17px;
  border-left: 1px solid var(--hairline);
}
.rail2 .t3 { font-size: 10.5px; letter-spacing: 0.254em; line-height: 8px; color: #949595; }

/* ==========================================================================
   media + section3 — soluções
   ========================================================================== */
.split { display: grid; grid-template-columns: minmax(0, calc(var(--edge) + min(38.48vw, 591px))) minmax(0, 1fr); background: var(--bg-section3); }
.media { position: relative; min-height: 211px; overflow: hidden; background: linear-gradient(180deg, #050b14 0%, var(--bg-section3) 100%); }
.media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(5, 11, 20, 0.85) 100%), linear-gradient(90deg, transparent 88%, rgba(5, 13, 24, 0.6) 100%); pointer-events: none; }
.section3 { padding: 32px calc(var(--gutter-r) + var(--edge)) 44px clamp(24px, 2.93vw, 45px); background: linear-gradient(180deg, var(--bg-section3) 0%, #050b14 100%); }
.section3__eyebrow { font-size: 10.5px; letter-spacing: 0.29em; padding-top: 2px; }
.section3__head { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 12px; }
.section3__title { font-size: inherit; font-weight: inherit; }
.section3 .h2 { font-size: clamp(17px, 1.44vw, 22px); line-height: 1.2273; word-spacing: 0; letter-spacing: 0.239em; font-weight: 300; }
.section3__all { display: inline-flex; align-items: center; gap: 12px; margin: 0 4px -3px 0; gap: 10px; color: var(--blue-link); font-size: 12px; letter-spacing: 0.068em; }
.section3__all:hover { color: var(--blue-active); }
.section3__lead { margin-top: 10px; font-size: 12.45px; line-height: 17.5px; letter-spacing: 0.02em; color: #c2c8cf; }

.section3__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 26px; margin-left: -1px; }
.card3 {
  display: flex; flex-direction: column; align-items: flex-start;
  min-height: 176px; padding: 22px 22px 20px;
  background: var(--bg-card3); border: 1px solid var(--border-card3); border-radius: var(--radius-card);
  transition: border-color .2s ease, transform .2s ease;
}
.card3:hover { border-color: var(--blue-border); transform: translateY(-2px); }
.card3 > .ico { width: 26px; height: 26px; }
.card3 .h3 { margin-top: 18px; }
.card3 .t2 { margin-top: 8px; }
.card3 .lnk { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 16px; color: var(--blue-link); font-size: 12.5px; }
.card3 .lnk:hover { color: var(--blue-active); }

/* ==========================================================================
   footer (suposição — não existe no mock; usa o mesmo sistema)
   ========================================================================== */
.footer { background: var(--bg-page); border-top: 1px solid var(--hairline); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr auto; gap: 48px; padding-top: 56px; padding-bottom: 48px; }
.footer__brand .t2 { margin-top: 18px; }
.footer__col, .footer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer .t3 { font-size: 11px; letter-spacing: 0.4em; margin-bottom: 6px; }
.footer__legal { display: flex; align-items: center; justify-content: space-between; padding-top: 22px; padding-bottom: 26px; border-top: 1px solid var(--hairline); }
.footer__legal .t3 { margin: 0; font-size: 10.5px; color: #949595; }

/* ==========================================================================
   Responsivo (fora do mock: decisões minhas, mesmo sistema visual)
   >=1536 idêntico ao mock · 1200–1535 fluido · <1200 tablet · <700 celular
   ========================================================================== */

/* botão do menu: só aparece abaixo de 1200px */
.nav__toggle {
  display: none; margin-left: auto; width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--blue-border); border-radius: var(--radius-btn);
  background: rgba(0, 4, 14, 0.35); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--tx-strong); border-radius: 1px; transition: transform .2s ease, opacity .2s ease; }
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 1320px) {
  .nav__links { gap: 26px; }
  .card2 .t2 { font-size: 11.5px; letter-spacing: 0.01em; }
  .rail2 { display: none; }
  .section2__grid { grid-template-columns: 226fr 291fr 293fr 300fr; }
  .section3__head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section3__lead br { display: none; }
}

@media (max-width: 1199px) {
  /* nav vira painel */
  .nav__toggle { display: inline-flex; order: 3; margin-left: 14px; }
  .nav__cta { margin-left: auto; }
  .nav__links {
    position: absolute; top: 70px; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px var(--gutter-l) 20px;
    background: rgba(2, 4, 9, 0.97); border-bottom: 1px solid var(--hairline);
    display: none;
  }
  .nav--open .nav__links { display: flex; }
  .nav__links a { width: 100%; padding: 14px 0; font-size: 14px; border-bottom: 1px solid var(--hairline); }
  .nav__links a:last-child { border-bottom: 0; }
  .btn::after { display: none; }

  /* hero: texto por cima da arte, com véu escuro para leitura */
  .hero { min-height: 0; background-position: 78% top; }
  .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 2, 8, 0.92) 0%, rgba(0, 2, 8, 0.7) 45%, rgba(0, 2, 8, 0.15) 100%); }
  .hero__inner { min-height: 0; padding-bottom: 56px; }
  .rail { display: none; }

  /* faixas em 2 x 2 */
  .section__grid { grid-template-columns: 1fr 1fr; height: auto; row-gap: 28px; padding-top: 32px; padding-bottom: 32px; }
  .card, .card:first-child, .card--wide { padding-left: 0; border-left: 0; }
  .card .ico, .card:first-child .ico, .card:nth-child(3) .ico, .card--wide .ico { margin-right: 20px; }
  .ico--people { width: 30px; }
  .section2__grid { grid-template-columns: 1fr 1fr; height: auto; row-gap: 28px; padding-top: 32px; padding-bottom: 32px; }
  .card2, .card2:nth-child(3), .card2:nth-child(4) { padding-left: 0; border-left: 0; }

  /* soluções: foto em cima, conteúdo embaixo */
  .split { grid-template-columns: 1fr; }
  .media { min-height: 0; aspect-ratio: 16 / 7; }
  .section3 { padding: 36px var(--gutter-r) 44px var(--gutter-l); }
  .section3__cards { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; }
  .footer__legal { flex-wrap: wrap; gap: 12px 24px; }
}

@media (max-width: 699px) {
  .nav__cta { display: none; }
  .nav__toggle { margin-left: auto; }
  .nav__wordmark { font-size: 23px; }
  .ico--logo { width: 40px; height: 35px; }

  .hero::before { background: linear-gradient(180deg, rgba(0, 2, 8, 0.55) 0%, rgba(0, 2, 8, 0.82) 100%); }
  .hero__inner { padding-top: 96px; padding-bottom: 44px; }
  .hero__eyebrow { font-size: 11px; letter-spacing: 0.26em; line-height: 1.6; }
  .h1 { letter-spacing: 0.24em; }
  .h2 { letter-spacing: 0.2em; word-spacing: 2px; }
  .hero__lead br { display: none; }
  .hero__actions { flex-direction: column; gap: 12px; margin-left: 0; }
  .hero__actions .btn2, .hero__actions .btn3 { width: 100%; height: 48px; font-size: 13px; }

  .section__grid { grid-template-columns: 1fr; row-gap: 24px; }
  .section3__lead { font-size: 13px; line-height: 1.5; }
  .section3 .h2 { letter-spacing: 0.18em; }
  .section3__cards { grid-template-columns: 1fr; }
  .card3 { min-height: 0; }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__legal { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer__legal .t3 { letter-spacing: 0.2em; line-height: 1.6; }
}

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