/* ============================================================
   ZIRIX — Soluções em Monitoramento
   Design system. Committed brand-red on warm paper, light.
   Signature device: the radar ping (logo arcs, alive).
   ============================================================ */

:root {
  /* ---- Color (OKLCH, tinted neutrals, committed red) ---- */
  --red:        oklch(0.575 0.214 21);
  --red-deep:   oklch(0.495 0.196 22);
  --red-ink:    oklch(0.40 0.16 24);
  --red-080:    oklch(0.575 0.214 21 / 0.08);
  --red-014:    oklch(0.575 0.214 21 / 0.14);
  --wave-1:     oklch(0.93 0.046 19);
  --wave-2:     oklch(0.865 0.088 19);
  --wave-3:     oklch(0.76 0.142 20);

  --paper:      oklch(0.989 0.004 40);
  --surface:    oklch(0.967 0.006 44);
  --surface-2:  oklch(0.945 0.008 42);
  --ink:        oklch(0.215 0.018 30);
  --ink-soft:   oklch(0.455 0.016 34);
  --ink-faint:  oklch(0.60 0.012 38);
  --hairline:   oklch(0.895 0.008 40);
  --hairline-2: oklch(0.84 0.010 38);

  --night:      oklch(0.205 0.021 28);
  --night-2:    oklch(0.255 0.024 27);
  --night-line: oklch(0.34 0.022 26);
  --on-night:   oklch(0.965 0.006 60);
  --on-night-soft: oklch(0.76 0.012 50);

  /* ---- Type — Futura (Jost = web fallback clone) ---- */
  --f-display: "Futura PT", "Futura", "Jost", system-ui, sans-serif;
  --f-body: "Futura PT", "Futura", "Jost", system-ui, sans-serif;

  --step--1: clamp(0.78rem, 0.75rem + 0.14vw, 0.86rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.18vw, 1.04rem);
  --step-1:  clamp(1.08rem, 1.02rem + 0.30vw, 1.28rem);
  --step-2:  clamp(1.28rem, 1.18rem + 0.55vw, 1.65rem);
  --step-3:  clamp(1.50rem, 1.34rem + 0.78vw, 2.05rem);
  --step-4:  clamp(1.75rem, 1.50rem + 1.15vw, 2.55rem);
  --step-5:  clamp(2.05rem, 1.65rem + 1.95vw, 3.30rem);

  /* ---- Space ---- */
  --gut: clamp(1.15rem, 0.8rem + 2vw, 2.6rem);
  --bay: clamp(3.6rem, 2.4rem + 5.5vw, 8.2rem);
  --maxw: 1280px;

  /* ---- Form ---- */
  --r: 4px;
  --r-lg: 10px;
  --shadow: 0 1px 2px oklch(0.5 0.05 30 / 0.05),
            0 12px 34px -16px oklch(0.45 0.08 28 / 0.22);
  --shadow-lift: 0 2px 4px oklch(0.5 0.05 30 / 0.06),
            0 26px 60px -26px oklch(0.45 0.10 26 / 0.32);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-q: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}
body {
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
ul { list-style: none; }
::selection { background: var(--red); color: var(--paper); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-wrap: balance;
}

/* ---- Layout primitives ---- */
.wrap { width: min(100% - 2 * var(--gut), var(--maxw)); margin-inline: auto; }
.bay { padding-block: var(--bay); }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
p { max-width: 68ch; }

.kicker {
  font-family: var(--f-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
}
.kicker::before {
  content: "";
  width: 1.8rem; height: 2px;
  background: var(--red);
  display: inline-block;
}

/* ============================================================
   Radar ping — the signature device (logo, alive)
   ============================================================ */
.radar { position: relative; display: grid; place-items: center; }
.radar__core {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 4px var(--red-014);
  z-index: 2;
}
.radar__ring {
  position: absolute; inset: 50%;
  width: 14px; height: 14px;
  border: 2px solid var(--red);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: ping 4.4s var(--ease-q) infinite;
}
.radar__ring:nth-child(2) { animation-delay: 1.1s; }
.radar__ring:nth-child(3) { animation-delay: 2.2s; }
.radar__ring:nth-child(4) { animation-delay: 3.3s; }
@keyframes ping {
  0%   { opacity: 0.55; transform: translate(-50%, -50%) scale(1); border-color: var(--red); }
  70%  { opacity: 0.12; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(26); border-color: var(--wave-2); }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  --bg: var(--red); --fg: var(--paper);
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--step-0); letter-spacing: 0.01em;
  padding: 0.92em 1.55em;
  background: var(--bg); color: var(--fg);
  border-radius: var(--r);
  transition: transform 0.4s var(--ease), background 0.3s, box-shadow 0.4s var(--ease);
  will-change: transform;
}
.btn svg { width: 1.05em; height: 1.05em; transition: transform 0.4s var(--ease); }
.btn:hover { background: var(--red-deep); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost {
  --bg: transparent; --fg: var(--ink);
  border: 1.5px solid var(--hairline-2);
  padding-block: calc(0.92em - 1.5px); padding-inline: calc(1.55em - 1.5px);
}
.btn--ghost:hover { --bg: transparent; border-color: var(--red); color: var(--red); transform: translateY(-2px); box-shadow: none; }
.btn--on-night { --fg: var(--night); --bg: var(--on-night); }
.btn--on-night:hover { --bg: var(--paper); background: var(--paper); }

.txtlink {
  font-family: var(--f-display); font-weight: 600; color: var(--red);
  display: inline-flex; align-items: center; gap: 0.5em;
  padding-bottom: 2px;
  background: linear-gradient(var(--red), var(--red)) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.5s var(--ease);
}
.txtlink svg { width: 1em; height: 1em; transition: transform 0.4s var(--ease); }
.txtlink:hover { background-size: 100% 1.5px; }
.txtlink:hover svg { transform: translateX(4px); }

/* ============================================================
   Utility bar  (Acesso Clientes — top LEFT, by request)
   ============================================================ */
.ubar {
  background: var(--night);
  color: var(--on-night-soft);
  font-size: var(--step--1);
  border-bottom: 1px solid var(--night-line);
}
.ubar__in {
  display: flex; align-items: stretch;
  justify-content: space-between; gap: 1rem;
  min-height: 44px;
}
.access {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-display); font-weight: 600;
  letter-spacing: 0.03em; color: var(--on-night);
  padding: 0 1.15rem 0 0;
  margin-right: 1.15rem;
  position: relative;
}
.access::after {
  content: ""; position: absolute; right: 0; top: 50%;
  width: 1px; height: 18px; background: var(--night-line);
  transform: translateY(-50%);
}
.access__btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  background: var(--red); color: var(--paper);
  font-family: var(--f-display); font-weight: 600;
  letter-spacing: 0.04em; font-size: var(--step--1);
  padding: 0.5em 1.05em; border-radius: 999px;
  transition: background 0.3s, transform 0.4s var(--ease);
}
.access__btn svg { width: 0.95em; height: 0.95em; }
.access__btn svg.chev { transition: transform 0.3s var(--ease); }
.access[open] .access__btn svg.chev { transform: rotate(180deg); }
.access__btn:hover { background: var(--paper); color: var(--night); transform: translateY(-1px); }

/* Acesso Clientes — dropdown com ZXbus / ZXtrack */
.access summary { list-style: none; cursor: pointer; }
.access summary::-webkit-details-marker { display: none; }
.access__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  box-shadow: var(--shadow-lift);
  padding: 6px;
  z-index: 1300; /* acima do header sticky (z-index:1100) para o dropdown não abrir atrás */
  display: grid;
  gap: 2px;
  animation: access-menu-in 0.25s var(--ease);
}
@keyframes access-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.access__menu a {
  display: grid; gap: 1px;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--ink);
  letter-spacing: 0;
  transition: background 0.2s;
}
.access__menu a:hover { background: var(--surface); }
.access__menu a strong {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ink);
}
.access__menu a span {
  font-size: 0.74rem;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: none;
}
/* Área do Cliente — dropdown à direita (reusa .access, menu alinhado à direita) */
.access--right { margin-right: 0; padding-right: 0; }
.access--right::after { display: none; }
.access--right .access__menu { left: auto; right: 0; }
/* "Área do Cliente" agora é link direto (pílula) — mantém o texto escuro no hover */
.ubar a.access__btn { text-decoration: none; }
.ubar a.access__btn:hover { color: var(--night); }

.ubar__left { display: flex; align-items: center; }
.ubar__right { display: flex; align-items: center; gap: 1.4rem; }
.ubar__right a { display: inline-flex; align-items: center; gap: 0.5em; transition: color 0.25s; }
.ubar__right a:hover { color: var(--on-night); }
.ubar__right svg { width: 1em; height: 1em; opacity: 0.85; }
@media (max-width: 760px) {
  .ubar__right .lbl { display: none; }
  .access::after { display: none; }
  .ubar__in { gap: 0.5rem; }
}

/* ============================================================
   Header / nav
   ============================================================ */
.head {
  position: sticky; top: 0; z-index: 1100;
  background: oklch(0.989 0.004 40 / 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
}
.head.is-stuck {
  border-color: var(--hairline);
  box-shadow: 0 10px 30px -22px oklch(0.4 0.06 28 / 0.4);
}
.head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: clamp(80px, 10vw, 108px);
}
.brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.brand img { height: clamp(48px, 6vw, 72px); width: auto; }
.nav { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2.6rem); }
.nav a {
  font-family: var(--f-display); font-weight: 500;
  font-size: var(--step-0); color: var(--ink-soft);
  position: relative; padding: 0.5rem 0;
  transition: color 0.25s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--red);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav > .btn { display: none; }
.nav a[aria-current="page"].btn { color: var(--paper); }
.head__cta { display: flex; align-items: center; gap: 1rem; }
.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span {
  position: absolute; left: 9px; right: 9px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .head__cta .btn { display: none; }
  .burger { display: block; position: relative; z-index: 1001; }
  .nav {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 360px);
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 0.2rem;
    padding: calc(clamp(80px, 10vw, 108px) + 0.5rem) var(--gut) 2rem;
    background: var(--paper); border-left: 1px solid var(--hairline);
    transform: translateX(100%); transition: transform 0.55s var(--ease);
    box-shadow: var(--shadow-lift);
    z-index: 1000;
    overflow-y: auto; overscroll-behavior: contain;
  }
  /* Backdrop escurecido por trás do menu, fechando a página */
  body.menu-open::before {
    content: ""; position: fixed; inset: 0;
    background: oklch(0.205 0.021 28 / 0.55);
    z-index: 999; backdrop-filter: blur(2px);
  }
  body.menu-open { overflow: hidden; }
  body.menu-open .nav { transform: translateX(0) !important; }
  .nav a { font-size: var(--step-1); padding: 0.75rem 0; width: 100%; }
  .nav a::after { display: none; }
  .nav .btn { display: inline-flex; margin-top: 1.2rem; align-self: stretch; justify-content: center; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero { position: relative; overflow: clip; }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr 1fr;
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
  padding-block: clamp(3rem, 4vw + 1rem, 6rem) clamp(2rem, 3vw, 3.5rem);
}
/* Reduzir o espaço entre o hero e a primeira seção seguinte */
.hero + .bay { padding-top: clamp(1.6rem, 3vw, 3rem); }
.hero__radar {
  position: absolute; top: 50%; right: 4%;
  width: clamp(200px, 26vw, 380px); aspect-ratio: 1;
  transform: translateY(-50%);
  pointer-events: none; opacity: 0.42; z-index: 0;
}
/* No hero da Home (com .hero__grid), reposicionar para o canto superior direito atrás da mídia */
.hero:has(.hero__grid) .hero__radar {
  top: -4%; right: -4%;
  width: min(42vw, 560px);
  transform: none; opacity: 0.5;
}
.hero__grid > * { position: relative; z-index: 1; }
.hero h1 {
  font-size: var(--step-5); font-weight: 700;
  letter-spacing: -0.01em; margin-block: 0.7rem 1.4rem;
}
.hero h1 .accent { color: var(--red); }
.hero .lede { margin-bottom: 2.4rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* Hero media — video slot ready, image fallback */
.hero__media {
  position: relative; border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-lift);
  aspect-ratio: 4 / 5;
}
.hero__media img, .hero__media video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(195deg,
    oklch(0.575 0.214 21 / 0) 40%,
    oklch(0.40 0.16 24 / 0.42) 100%);
}
.hero__tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.7rem;
  margin: 1.1rem; padding: 0.6rem 1rem;
  background: oklch(0.205 0.021 28 / 0.72);
  backdrop-filter: blur(8px);
  border: 1px solid oklch(0.965 0.006 60 / 0.16);
  border-radius: 999px;
  font-family: var(--f-display); font-size: var(--step--1);
  font-weight: 600; letter-spacing: 0.04em; color: var(--on-night);
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--red);
  position: relative; flex-shrink: 0;
}
.live-dot::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1.5px solid var(--red); animation: ping 2.6s var(--ease-q) infinite;
}

@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .hero__media { aspect-ratio: 16 / 11; order: 2; }
  .hero__radar { width: clamp(180px, 48vw, 300px); opacity: 0.32; }
  .hero:has(.hero__grid) .hero__radar { width: min(70vw, 420px); }
}

/* ============================================================
   Marquee — consortiums / trust strip
   ============================================================ */
.trust {
  border-block: 1px solid var(--hairline);
  background: var(--surface);
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
}
.trust__in { display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); flex-wrap: wrap; }
.trust__lbl {
  font-family: var(--f-display); font-size: var(--step--1);
  font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
.trust__names {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(1.2rem, 3.5vw, 3rem); flex: 1;
}
.trust__names span {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--step-1); color: var(--ink);
  letter-spacing: -0.01em; opacity: 0.62;
  transition: opacity 0.3s, color 0.3s;
}
.trust__names span:hover { opacity: 1; color: var(--red); }
@media (max-width: 760px) {
  .trust__in { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
  .trust__names { gap: 0.6rem 1.5rem; }
  .trust__names span { font-size: var(--step-0); opacity: 0.7; }
}

/* ============================================================
   Section heading block
   ============================================================ */
.shead {
  display: grid; grid-template-columns: 1fr; gap: 1rem;
  max-width: 62ch; margin-bottom: clamp(2.4rem, 5vw, 4rem);
}
.shead h2 { font-size: var(--step-4); }
.shead.split {
  max-width: none;
  grid-template-columns: minmax(0,1fr) minmax(0,0.85fr);
  align-items: end; gap: 2rem 3rem;
}
.shead.split p { justify-self: start; }
@media (max-width: 760px) { .shead.split { grid-template-columns: 1fr; } }

/* ============================================================
   Services — editorial alternating rows
   ============================================================ */
.svc { display: grid; gap: clamp(2.5rem, 6vw, 5.5rem); }
.svc__row {
  display: grid; grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(1.8rem, 5vw, 4.5rem); align-items: center;
}
.svc__row:nth-child(even) .svc__media { order: -1; }
.svc__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 5 / 4; box-shadow: var(--shadow);
}
.svc__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.svc__row:hover .svc__media img { transform: scale(1.04); }
.svc__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, oklch(0.575 0.214 21 / 0.10), oklch(0.40 0.16 24 / 0.30));
  mix-blend-mode: multiply;
}
.svc__no {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--step-1); color: var(--red);
  letter-spacing: 0.04em;
}
.svc__row h3 { font-size: var(--step-3); margin-block: 0.7rem 0.9rem; }
.svc__row p { color: var(--ink-soft); margin-bottom: 1.4rem; }
.spec {
  display: flex; flex-wrap: wrap; gap: 0.6rem 0.7rem; margin-bottom: 1.6rem;
}
.spec li {
  font-family: var(--f-display); font-size: var(--step--1);
  font-weight: 500; color: var(--ink-soft);
  border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 0.4em 0.95em; background: var(--paper);
}
.spec li::before { content: "● "; color: var(--red); font-size: 0.7em; }
@media (max-width: 760px) {
  .svc__row { grid-template-columns: 1fr; gap: 1.6rem; }
  .svc__row:nth-child(even) .svc__media { order: 0; }
}

/* Compact service teaser grid (home) — breakpoint-free, NOT identical cards */
.svc-list { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.svc-list a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.3rem, 3vw, 2rem) clamp(1.3rem, 3vw, 2.2rem);
  background: var(--paper); transition: background 0.35s;
}
.svc-list a:hover { background: var(--surface); }
.svc-list .n {
  font-family: var(--f-display); font-weight: 700; color: var(--red);
  font-size: var(--step-1); letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.svc-list .t { display: grid; gap: 0.2rem; }
.svc-list .t strong { font-family: var(--f-display); font-size: var(--step-2); font-weight: 700; letter-spacing: -0.015em; }
.svc-list .t span { color: var(--ink-soft); font-size: var(--step-0); }
.svc-list .arr { color: var(--ink-faint); transition: transform 0.45s var(--ease), color 0.3s; }
.svc-list a:hover .arr { color: var(--red); transform: translateX(6px); }
.svc-list svg { width: 1.4rem; height: 1.4rem; }
@media (max-width: 620px) {
  .svc-list a { grid-template-columns: auto 1fr; }
  .svc-list .arr { display: none; }
}

/* ============================================================
   Sistemas — ZX Bus / ZX Track flagship blocks
   ============================================================ */
.systems {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  overflow: hidden;
}
.sys {
  position: relative; overflow: clip;
  background: var(--paper);
  padding: clamp(1rem, 1.6vw, 1.6rem);
  display: flex; flex-direction: column;
  transition: background 0.4s;
}
.sys:hover { background: var(--surface); }
.sys > * { position: relative; z-index: 1; }
.sys .sys__radar {
  position: absolute; right: -22%; top: -24%;
  width: 56%; aspect-ratio: 1; opacity: 0.3;
  pointer-events: none; z-index: 0;
}
.sys__tag {
  font-family: var(--f-display); font-size: var(--step--1);
  font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red);
  display: block;
  margin-bottom: 0.5rem;
}
.sys__tag--wide { margin-bottom: 1.95rem; }
.sys__name {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--step-4); letter-spacing: -0.01em;
  margin: 0.7rem 0 0.7rem;
}
.sys__name b { color: var(--red); font-weight: 700; }
.sys__name--text {
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0.4rem 0 0.9rem;
  height: clamp(48px, 6vw, 60px);
  display: flex; align-items: center;
}
.sys__logo {
  display: block; width: auto;
  height: clamp(28px, 4vw, 40px);
  margin: 0.85rem 0 1rem;
}
/* System wordmark logo as a section heading */
.syslogo-h { line-height: 0; margin: 0 0 0.4rem; }
.syslogo {
  display: block; width: auto;
  height: clamp(38px, 6.5vw, 60px);
}
.sys p { color: var(--ink-soft); margin-bottom: 1.4rem; max-width: 42ch; }
.sys ul { display: grid; gap: 0.55rem; margin-bottom: 1.8rem; }
.sys li {
  display: flex; gap: 0.65rem; align-items: baseline;
  font-size: var(--step-0); color: var(--ink);
}
.sys li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex-shrink: 0; transform: translateY(-1px);
}
.sys .txtlink { margin-top: auto; white-space: nowrap; align-self: flex-start; }
/* 5th featured card: spans the full grid row */
.sys--wide { grid-column: 1 / -1; }
.sys--wide ul { grid-template-columns: 1fr; gap: 0.55rem; }
@media (max-width: 860px) {
  .systems { grid-template-columns: 1fr; }
  .sys--wide ul { grid-template-columns: 1fr; }
}

/* Anchor offset under sticky header */
[id] { scroll-margin-top: clamp(78px, 11vw, 108px); }

/* ============================================================
   Tiers — modalidades de contratação
   ============================================================ */
/* Wideband — banner full-width entre seções (foto 16:9) */
.wideband {
  margin-block: clamp(1.8rem, 4vw, 3rem);
  margin-inline: auto;
  max-width: 80%;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.wideband img {
  width: 100%; height: auto;
  display: block;
}

.tiers {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--hairline); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); overflow: hidden;
  margin-top: clamp(1.8rem, 4vw, 3rem);
}
.tiers.two { grid-template-columns: repeat(2, 1fr); }
.tiers.centered { max-width: 820px; margin-inline: auto; }
.tiers.one { grid-template-columns: 1fr; max-width: 395px; margin-inline: 0; }
.tiers.one.centered { max-width: 395px; margin-inline: auto; }
.tier {
  background: var(--paper); padding: clamp(1.5rem, 3.4vw, 2.2rem);
  display: flex; flex-direction: column; transition: background 0.35s;
}
.tier:hover { background: var(--surface); }
.tier__lvl {
  font-family: var(--f-display); font-size: var(--step--1);
  font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--red);
}
.tier__name {
  font-family: var(--f-display); font-weight: 700;
  font-size: var(--step-2); margin: 0 0 0.7rem; letter-spacing: -0.01em;
}
.tier > p { color: var(--ink-soft); font-size: var(--step-0); margin-bottom: 1.15rem; }
.tier ul { display: grid; gap: 0.55rem; margin-top: auto; }
.tier li {
  display: flex; gap: 0.6rem; font-size: var(--step--1);
  color: var(--ink); line-height: 1.45;
}
.tier li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--red); flex-shrink: 0; margin-top: 0.5em;
}
@media (max-width: 820px) {
  .tiers, .tiers.two { grid-template-columns: 1fr; }
}

/* Two-column feature list */
.feat2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.6rem 2.5rem; margin-top: 1.5rem;
}
.feat2 li {
  display: flex; gap: 0.65rem; align-items: baseline;
  color: var(--ink); padding: 0.55rem 0;
  border-bottom: 1px solid var(--hairline);
}
.feat2 li::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); flex-shrink: 0; transform: translateY(-1px);
}
.feat2 li b { font-family: var(--f-display); font-weight: 600; }
@media (max-width: 620px) { .feat2 { grid-template-columns: 1fr; } }

/* ============================================================
   Night band — telemetry readout
   ============================================================ */
.night {
  background:
    radial-gradient(120% 90% at 88% 12%, oklch(0.575 0.214 21 / 0.16), transparent 55%),
    var(--night);
  color: var(--on-night);
  position: relative; overflow: clip;
}
.night h2, .night h3 { color: var(--on-night); }
.night .lede { color: var(--on-night-soft); }
.night .kicker { color: var(--wave-3); }
.night .kicker::before { background: var(--wave-3); }
.night__radar { position: absolute; left: -10%; bottom: -30%; width: min(50vw, 540px); aspect-ratio: 1; opacity: 0.4; pointer-events: none; }
.night__radar .radar__ring { border-color: var(--wave-3); }
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--night-line);
  border: 1px solid var(--night-line); border-radius: var(--r-lg);
  overflow: hidden; margin-top: clamp(2rem, 5vw, 3.5rem);
  position: relative; z-index: 1;
}
.stat { background: var(--night); padding: clamp(1.6rem, 4vw, 2.6rem); }
.stat__n {
  font-family: var(--f-display); font-weight: 800;
  font-size: var(--step-4); letter-spacing: -0.02em;
  color: var(--on-night); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 0.12em;
}
.stat__n em { font-style: normal; color: var(--red); font-size: 0.55em; font-weight: 700; }
.stat__l { color: var(--on-night-soft); font-size: var(--step--1); margin-top: 0.5rem; letter-spacing: 0.02em; }

/* ============================================================
   Feature split (about / value)
   ============================================================ */
.split2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 6vw, 5rem); align-items: center;
}
.split2__media { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift); aspect-ratio: 4/5; }
.split2__media img, .split2__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split2__media::after { content:""; position:absolute; inset:0; background: linear-gradient(200deg, transparent 50%, oklch(0.40 0.16 24 / 0.34)); }
.split2__media--shot { background: var(--surface); box-shadow: var(--shadow); aspect-ratio: auto; }
.split2__media--shot img { position: relative; inset: auto; width: 100%; height: auto; object-fit: contain; padding: clamp(0.5rem, 1.4vw, 1rem); display: block; }
.split2__media--shot::after { display: none; }
@media (max-width: 820px) { .split2 { grid-template-columns: 1fr; } .split2__media:not(.split2__media--shot) { aspect-ratio: 16/11; } }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: clamp(1.5rem, 4vw, 2.6rem); align-items: start; }
.pillar { display: grid; grid-template-rows: auto auto 1fr; gap: 0.6rem; }
.pillar__i { width: 40px; height: 40px; color: var(--red); margin-bottom: 0.5rem; }
.pillar__i svg { width: 100%; height: 100%; }
.pillar h3 { font-size: var(--step-2); align-self: end; min-height: 2.2em; display: flex; align-items: flex-end; }
.pillar p { color: var(--ink-soft); font-size: var(--step-0); max-width: 38ch; }

/* Numbered process / values list */
.steps { display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.step {
  display: grid; grid-template-columns: 4.5rem 1fr; gap: clamp(1rem,3vw,2.4rem);
  padding: clamp(1.6rem,4vw,2.6rem) 0; border-bottom: 1px solid var(--hairline);
  align-items: start;
}
.step__n { font-family: var(--f-display); font-weight: 700; color: var(--red); font-size: var(--step-2); font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--step-2); margin-bottom: 0.5rem; }
.step p { color: var(--ink-soft); }

/* ============================================================
   Clients
   ============================================================ */
/* Logo marquee — clientes que confiam na Zirix */
.logobar {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  padding-block: clamp(0.9rem, 1.6vw, 1.3rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logobar__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(3.4rem, 7vw, 7rem);
  animation: logo-scroll 115s linear infinite;
  will-change: transform;
}
.logobar:hover .logobar__track { animation-play-state: paused; }
.logobar__item {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.logobar__item img {
  height: clamp(111px, 16.5vw, 186px);
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease);
}
.logobar__item:hover img { opacity: 1; filter: grayscale(0.15); }
@keyframes logo-scroll {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .logobar { -webkit-mask-image: none; mask-image: none; }
  .logobar__track { animation: none; width: 100%; flex-wrap: wrap; justify-content: center; gap: clamp(1.6rem,4vw,3rem); }
  .logobar__dup { display: none; }
}

.quote {
  font-family: var(--f-display); font-weight: 600;
  font-size: var(--step-3); line-height: 1.32; letter-spacing: -0.02em;
  color: var(--ink); max-width: 22ch;
}
.quote .mk { color: var(--red); }
.quote__by { font-family: var(--f-body); font-weight: 400; font-size: var(--step-0); color: var(--ink-soft); margin-top: 1.4rem; letter-spacing: 0; }

/* ============================================================
   Contact
   ============================================================ */
.contact { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem,6vw,5rem); }
.contact > * { min-width: 0; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
.cinfo { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-lg); overflow: hidden; align-self: start; }
.cinfo > a, .cinfo > div {
  display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.85rem; align-items: center;
  background: var(--paper); padding: clamp(0.85rem,2vw,1.15rem) clamp(1rem,2.4vw,1.4rem);
  transition: background 0.3s;
}
.cinfo a:hover { background: var(--surface); }
.cinfo svg { width: 1.2rem; height: 1.2rem; color: var(--red); }
.cinfo .k { font-family: var(--f-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.cinfo .v { font-family: var(--f-display); font-size: var(--step-0); font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.cinfo .cell { display: grid; gap: 0.1rem; min-width: 0; }
.cinfo > a, .cinfo > div { min-width: 0; }

.form { display: grid; gap: 1.1rem; min-width: 0; }
.field { display: grid; gap: 0.45rem; min-width: 0; }
.field label { font-family: var(--f-display); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--hairline-2); border-radius: var(--r);
  padding: 0.85em 1em; width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-080);
}
.form .btn { width: fit-content; margin-top: 0.4rem; }
.formrow { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.formrow > * { min-width: 0; }
@media (max-width: 540px) { .formrow { grid-template-columns: 1fr; } }

/* ============================================================
   CTA band
   ============================================================ */
.cta {
  position: relative; overflow: clip;
  background:
    radial-gradient(120% 130% at 12% 0%, oklch(0.575 0.214 21 / 0.20), transparent 60%),
    var(--night);
  color: var(--on-night); border-radius: var(--r-lg);
  padding: clamp(2.6rem, 7vw, 5.5rem);
  display: grid; grid-template-columns: 1fr auto; gap: 2rem;
  align-items: center;
}
.cta h2 { color: var(--on-night); font-size: var(--step-4); max-width: 18ch; }
.cta p { color: var(--on-night-soft); margin-top: 0.8rem; }
.cta__radar { position: absolute; right: -4%; top: -40%; width: min(38vw, 420px); aspect-ratio: 1; opacity: 0.5; pointer-events: none; }
.cta__radar .radar__ring { border-color: var(--wave-3); }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* ============================================================
   Footer
   ============================================================ */
.foot { background: var(--night); color: var(--on-night-soft); }
.foot__top {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem;
  padding-block: clamp(3rem, 6vw, 5rem);
}
.foot img { height: 40px; width: auto; margin-bottom: 1.3rem; }
.foot__col h4 { color: var(--on-night); font-size: var(--step--1); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; margin-bottom: 1.2rem; }
.foot__col a, .foot__col p { display: block; color: var(--on-night-soft); font-size: var(--step-0); padding: 0.32rem 0; transition: color 0.25s; max-width: 30ch; }
.foot__col a:hover { color: var(--on-night); }
.foot__brandcol p { color: var(--on-night-soft); }
.foot__social { display: flex; gap: 0.7rem; margin-top: 1.3rem; }
.foot__social a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--night-line); border-radius: 50%;
  transition: border-color 0.3s, background 0.3s, color 0.3s;
}
.foot__social a:hover { background: var(--red); border-color: var(--red); color: var(--paper); }
.foot__social svg { width: 1.05rem; height: 1.05rem; }
.foot__bot {
  border-top: 1px solid var(--night-line);
  padding-block: 1.6rem;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem;
  font-size: var(--step--1);
}
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__top { grid-template-columns: 1fr; gap: 2rem; } }

/* ============================================================
   Reveal on scroll
   ============================================================ */
[data-rise] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-rise].in { opacity: 1; transform: none; }
[data-rise][data-d="1"] { transition-delay: 0.08s; }
[data-rise][data-d="2"] { transition-delay: 0.16s; }
[data-rise][data-d="3"] { transition-delay: 0.24s; }
[data-rise][data-d="4"] { transition-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
  [data-rise] { opacity: 1; transform: none; }
}

/* small helpers */
.mt-s { margin-top: 1.4rem; }
.mt-m { margin-top: 2.4rem; }
.center { text-align: center; }
.eyebrow-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.5rem; }