/* micrxn.com — marketing site
   Brand: white canvas, black type, electric blue accent, geometric sans. */

:root {
  --ink: #06070a;
  --ink-2: #33363f;
  --ink-3: #6b7080;
  --blue: #1b3df5;
  --blue-2: #4f6bff;
  --blue-soft: #eef1ff;
  --paper: #ffffff;
  --paper-2: #f6f7fa;
  --paper-3: #eceff5;
  --line: rgba(6, 7, 10, 0.1);
  --line-soft: rgba(6, 7, 10, 0.06);
  --night: #0a0d17;

  --max: 1200px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 20px;

  --font: "Helvetica Neue", Helvetica, "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ---------- type ---------- */

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.display {
  font-size: clamp(42px, 5.6vw, 82px);
}

.h2 {
  font-size: clamp(32px, 3.9vw, 54px);
}

.h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: -0.028em;
}

.accent { color: var(--blue); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 26px;
}

.eyebrow::before {
  content: "";
  width: 44px;
  height: 1px;
  background: currentColor;
  flex: none;
}

.lede {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.6;
  color: var(--ink-2);
  letter-spacing: -0.008em;
  max-width: 46ch;
}

.rule {
  width: 56px;
  height: 3px;
  background: var(--blue);
  margin: 30px 0;
  border-radius: 2px;
}

/* ---------- layout ---------- */

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

section { position: relative; }

.section {
  padding-block: clamp(88px, 12vw, 168px);
}

.section--tint { background: var(--paper-2); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  /* no backdrop-filter: it wedges weak compositors; a near-opaque wash reads
     the same over this light canvas */
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.nav.is-stuck { border-bottom-color: var(--line-soft); }

/* scroll progress hairline */
.nav::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 2px;
  width: calc(var(--progress, 0) * 100%);
  background: linear-gradient(90deg, var(--blue), var(--blue-2));
}

.nav__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--pad);
  height: 58px;
  display: flex;
  align-items: center;
  gap: 34px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.05em;
}

.logo svg { height: 20px; width: auto; }

.nav__links {
  display: flex;
  gap: 30px;
  margin-left: auto;
  font-size: 13.5px;
  color: var(--ink-2);
}

.nav__links a { transition: color 0.2s var(--ease); }
.nav__links a:hover { color: var(--blue); }

.nav__cta { display: flex; gap: 10px; align-items: center; }

.nav__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}

.nav__toggle span {
  display: block;
  width: 20px;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
}

.nav__toggle span + span { margin-top: 5px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding-inline: 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
    color 0.2s var(--ease), border-color 0.2s var(--ease);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:hover { background: #1330d4; }
.btn--ghost { border-color: var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.35); color: #fff; }
.btn--outline-light:hover { border-color: #fff; }
.btn--sm { height: 34px; padding-inline: 15px; font-size: 13px; }

.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding-top: clamp(70px, 10vw, 120px);
  padding-bottom: clamp(60px, 8vw, 110px);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.hero .display { max-width: none; }

.hero__actions {
  display: flex;
  gap: 12px;
  margin-top: 38px;
  flex-wrap: wrap;
}

.hero__meta {
  display: flex;
  gap: clamp(26px, 4vw, 54px);
  margin-top: 54px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  flex-wrap: wrap;
}

.hero__meta div { font-size: 13px; color: var(--ink-3); }
.hero__meta strong {
  display: block;
  font-size: 26px;
  color: var(--ink);
  letter-spacing: -0.04em;
  margin-bottom: 2px;
}

/* cinematic glass slabs — layered glassmorphism after the brand key visual */

.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1.04;
  width: 100%;
  max-width: 560px;
  margin-left: auto;
  transform: translate3d(0, var(--py, 0px), 0);
  animation: visualIn 1.6s var(--ease) both;
  animation-delay: 0.25s;
}

@keyframes visualIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(46px);
  z-index: 0;
  pointer-events: none;
}

.glow--a {
  inset: 2% -12% 34% 28%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(52, 90, 255, 0.4), transparent 70%);
}

.glow--b {
  inset: 42% 2% -6% 10%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(110, 150, 255, 0.36), transparent 70%);
}

/* refracted light pooling on the floor */
.pool {
  position: absolute;
  left: 4%;
  right: -6%;
  bottom: -5%;
  height: 18%;
  background:
    radial-gradient(38% 90% at 30% 45%, rgba(70, 115, 255, 0.5), transparent 72%),
    radial-gradient(30% 75% at 68% 40%, rgba(140, 175, 255, 0.42), transparent 70%),
    radial-gradient(60% 100% at 50% 50%, rgba(30, 60, 220, 0.18), transparent 75%);
  filter: blur(12px);
  transform: scaleY(0.55);
  z-index: 0;
}

.gslab {
  position: absolute;
  width: 66%;
  aspect-ratio: 1;
  z-index: 1;
  transform: translate3d(
    calc(var(--mx, 0) * var(--px, 16px)),
    calc(var(--my, 0) * var(--px, 16px)),
    0
  );
  will-change: transform;
  transition: transform 0.9s var(--ease);
}

.gslab--a { top: -5%; right: -8%; --px: 26px; }
.gslab--b { bottom: -1%; right: 14%; --px: 42px; }

/* glass edge — the slab's bright bevelled side */
.gslab__body {
  position: absolute;
  inset: 0;
  border-radius: 15%;
  transform: rotate(-42deg);
  animation: slabFloat 12s ease-in-out infinite;
  background: linear-gradient(
    155deg,
    #cfdcff 0%,
    #7b98ff 18%,
    #3a5bff 40%,
    #1630c8 62%,
    #2c4bf2 84%,
    #9db4ff 100%
  );
  box-shadow:
    0 80px 130px -45px rgba(10, 26, 140, 0.55),
    0 30px 60px -25px rgba(10, 26, 140, 0.45),
    0 0 80px -12px rgba(60, 100, 255, 0.4);
}

.gslab--b .gslab__body {
  animation-delay: -6s;
  animation-duration: 14s;
}

/* hairline highlight on the outermost edge */
.gslab__body::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 1),
    rgba(190, 210, 255, 0.5) 26%,
    rgba(70, 105, 255, 0.25) 50%,
    rgba(180, 205, 255, 0.7) 76%,
    rgba(255, 255, 255, 0.95)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* flat glass face, set into the bevel */
.gslab__body::after {
  content: "";
  position: absolute;
  inset: 3.2%;
  border-radius: 13.5%;
  background:
    /* specular streak */
    linear-gradient(118deg, transparent 30%, rgba(255, 255, 255, 0.28) 44%, rgba(255, 255, 255, 0.04) 53%, transparent 60%),
    /* top-left sheen */
    linear-gradient(160deg, rgba(220, 232, 255, 0.5) 0%, rgba(140, 170, 255, 0.12) 26%, transparent 44%),
    /* face body: luminous top → deep cobalt bottom */
    linear-gradient(168deg, #6d8fff 0%, #3a5bfa 32%, #1b34e0 58%, #0a1a9e 88%, #14259e 100%);
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.5),
    inset 0 -14px 40px rgba(3, 10, 80, 0.55),
    0 2px 8px rgba(4, 12, 90, 0.45);
}

@keyframes slabFloat {
  0%, 100% { transform: rotate(-42deg) translate3d(0, 0, 0); }
  50% { transform: rotate(-40.5deg) translate3d(0, -16px, 0); }
}

/* ---------- feature rows ---------- */

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(24px, 3vw, 44px);
  margin-top: clamp(44px, 5vw, 66px);
}

.feature__icon {
  width: 26px;
  height: 26px;
  color: var(--blue);
  margin-bottom: 16px;
}

.feature h4 {
  font-size: 16px;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.feature p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---------- layer stack ---------- */

.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.layer {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 34px);
  align-items: center;
  padding: 20px clamp(18px, 2vw, 26px);
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: #fff;
  cursor: default;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease);
}

.layer:hover,
.layer.is-active {
  transform: translateX(8px);
  border-color: rgba(27, 61, 245, 0.35);
  box-shadow: 0 22px 50px -28px rgba(15, 35, 160, 0.5);
}

.layer__name {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.layer__desc { font-size: 14px; color: var(--ink-3); }

.layer__bar {
  grid-column: 1 / -1;
  height: 3px;
  border-radius: 2px;
  background: var(--paper-3);
  overflow: hidden;
}

.layer__bar i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width 0.9s var(--ease);
}

.layer.is-active .layer__bar i { width: 100%; }

/* ---------- agents ---------- */

.agents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.agent {
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  padding: 22px 18px;
  background: #fff;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.agent:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -30px rgba(15, 35, 160, 0.45);
}

.agent svg { width: 22px; height: 22px; color: var(--blue); margin-bottom: 14px; }
.agent h4 { font-size: 15px; margin-bottom: 6px; letter-spacing: -0.02em; }
.agent p { margin: 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }

.gateway {
  margin-top: 22px;
  padding: 26px;
  border-radius: 20px;
  color: #fff;
  background: linear-gradient(135deg, #2c4bff, #0f22b4 60%, #071473);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  box-shadow: 0 40px 80px -40px rgba(15, 35, 160, 0.8);
}

.gateway h3 { font-size: 22px; margin-bottom: 6px; }
.gateway p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); }

.gateway__rails { display: flex; flex-direction: column; gap: 8px; }

.rail {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.rail i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7f95ff;
  box-shadow: 0 0 0 4px rgba(127, 149, 255, 0.2);
}

/* ---------- cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  overflow: hidden;
}

.card {
  background: #fff;
  padding: 30px 26px;
  transition: background 0.3s var(--ease);
}

.card:hover { background: var(--blue-soft); }
.card svg { width: 24px; height: 24px; color: var(--blue); margin-bottom: 16px; }
.card h4 { font-size: 15.5px; margin-bottom: 8px; letter-spacing: -0.02em; }
.card p { margin: 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.55; }

/* ---------- stats ---------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: clamp(20px, 3vw, 40px);
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 4vw, 46px);
  margin-top: clamp(44px, 5vw, 70px);
}

.stat b {
  display: block;
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.045em;
  color: var(--blue);
  line-height: 1;
  margin-bottom: 10px;
}

.stat strong { display: block; font-size: 14px; margin-bottom: 6px; }
.stat span { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ---------- dark band ---------- */

.band {
  background: var(--night);
  color: #fff;
  overflow: hidden;
  position: relative;
}

.band::before {
  content: "";
  position: absolute;
  inset: -30% -10% auto 40%;
  height: 120%;
  background: radial-gradient(45% 45% at 50% 50%, rgba(46, 82, 255, 0.4), transparent 70%);
  filter: blur(30px);
  animation: bandDrift 16s ease-in-out infinite alternate;
}

@keyframes bandDrift {
  from { transform: translate3d(-6%, 0, 0) scale(1); }
  to { transform: translate3d(8%, 6%, 0) scale(1.15); }
}

.band .lede { color: rgba(255, 255, 255, 0.66); }
.band .h2 { color: #fff; }
.band .wrap { position: relative; z-index: 1; }
.band .card { background: rgba(255, 255, 255, 0.03); }
.band .card:hover { background: rgba(255, 255, 255, 0.07); }
.band .card h4 { color: #fff; }
.band .card p { color: rgba(255, 255, 255, 0.6); }
.band .card svg { color: var(--blue-2); }
.band .cards { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.1); }

/* ---------- evolve orbit ---------- */

.orbit {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.orbit__ring {
  position: absolute;
  inset: 8%;
  border: 1px dashed rgba(27, 61, 245, 0.3);
  border-radius: 50%;
  animation: spin 40s linear infinite;
}

.orbit__ring--inner { inset: 24%; animation-duration: 26s; animation-direction: reverse; }

@keyframes spin { to { transform: rotate(360deg); } }

.orbit__core {
  width: 34%;
  aspect-ratio: 1;
  border-radius: 22%;
  background: linear-gradient(150deg, #4a6dff, #1b3df5 45%, #0b1c9c);
  box-shadow: 0 30px 60px -24px rgba(15, 35, 160, 0.7),
    inset 0 2px 3px rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
  color: #fff;
  z-index: 1;
}

.orbit__core svg { width: 42%; }

.orbit__node {
  position: absolute;
  text-align: center;
  width: 30%;
  max-width: 168px;
}

.orbit__node b { display: block; font-size: 15px; letter-spacing: -0.02em; color: var(--blue); }
.orbit__node span { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }

.orbit__node--n { top: 0; left: 50%; transform: translateX(-50%); }
.orbit__node--e { right: 0; top: 50%; transform: translateY(-50%); }
.orbit__node--s { bottom: 0; left: 50%; transform: translateX(-50%); }
.orbit__node--w { left: 0; top: 50%; transform: translateY(-50%); }

/* ---------- chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 30px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  background: #fff;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease),
    transform 0.2s var(--ease);
}

.chip:hover { border-color: var(--blue); color: var(--blue); transform: translateY(-2px); }

/* ---------- pipeline ---------- */

.pipeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  counter-reset: step;
}

.step {
  position: relative;
  padding: 24px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 16px;
  background: #fff;
}

.step::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  height: 1px;
  background: var(--line);
}

.step:last-child::after { display: none; }
.step svg { width: 22px; height: 22px; color: var(--blue); margin-bottom: 14px; }
.step b { display: block; font-size: 15px; letter-spacing: -0.02em; margin-bottom: 6px; }
.step span { font-size: 13px; color: var(--ink-3); line-height: 1.5; }

/* ---------- console mockup ---------- */

.console {
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 50px 90px -50px rgba(10, 20, 70, 0.45);
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  font-size: 12px;
}

.console__side {
  background: var(--paper-2);
  border-right: 1px solid var(--line-soft);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.console__brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.04em;
  padding: 4px 8px 14px;
}

.console__brand svg { height: 14px; }

.console__side a {
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}

.console__side a.is-active { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.console__side i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.5; }

.console__main { padding: 18px; display: grid; gap: 12px; }

.console__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.console__top h4 { font-size: 17px; letter-spacing: -0.03em; }

.console__search {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  color: var(--ink-3);
  font-size: 11.5px;
}

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }

.kpi {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 11px 12px;
}

.kpi span { color: var(--ink-3); font-size: 10.5px; }
.kpi b { display: block; font-size: 17px; letter-spacing: -0.04em; margin: 4px 0 2px; }
.kpi em { font-style: normal; font-size: 10.5px; color: #12924f; }
.kpi em.is-down { color: #d0452b; }

.console__row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 10px; }

.panel {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px;
}

.panel h5 { margin: 0 0 10px; font-size: 11.5px; font-weight: 700; letter-spacing: -0.01em; }

.spark { width: 100%; height: 88px; }
.spark path.line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; }
.spark path.area { fill: url(#sparkFill); stroke: none; }

.insights { display: grid; gap: 9px; }

.insight {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.4;
}

.insight svg { width: 13px; height: 13px; flex: none; color: var(--blue); margin-top: 1px; }

/* ---------- integrations ---------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  justify-content: center;
  padding: 34px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: #fff;
  margin-top: 34px;
}

.logos span {
  font-size: clamp(15px, 1.8vw, 21px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink-3);
  opacity: 0.75;
  transition: color 0.25s var(--ease), opacity 0.25s var(--ease);
}

.logos span:hover { color: var(--blue); opacity: 1; }

/* ---------- closing ---------- */

.closing { text-align: center; }
.closing .lede { margin-inline: auto; text-align: center; }

.checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  justify-content: center;
  margin: 38px 0 34px;
  font-size: 15px;
  font-weight: 500;
  color: var(--blue);
}

.checks div { display: flex; align-items: center; gap: 9px; }
.checks svg { width: 17px; height: 17px; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line-soft);
  padding-block: 56px 40px;
  font-size: 13.5px;
  color: var(--ink-3);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 60px);
}

.footer h5 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a:hover { color: var(--blue); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 46px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  font-size: 12.5px;
}

/* ---------- cinematic reveals ---------- */

/* hero entrance: masked line rise for the headline */
/* hidden initial states live in the keyframes' `from`, never in the base rule —
   if animations are disabled (extensions, data-saver), content stays visible */
.line { display: block; overflow: hidden; }

.line > span {
  display: block;
  animation: lineUp 1s var(--ease) backwards;
  animation-delay: var(--d, 0s);
}

@keyframes lineUp {
  from { transform: translateY(115%); }
  to { transform: none; }
}

/* hero entrance: blur-rise for supporting content */
.rise {
  animation: riseIn 1s var(--ease) backwards;
  animation-delay: var(--d, 0s);
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(30px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* section reveal: children stagger in — gated on .js so no-script users
   still see everything (no filter here: transitioning blur on huge blocks
   is a compositor killer) */
.js .reveal:not(.is-in) .wrap > * {
  opacity: 0;
  transform: translateY(44px);
}

.reveal .wrap > * {
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.reveal.is-in .wrap > * { opacity: 1; transform: none; }
.reveal.is-in .wrap > :nth-child(2) { transition-delay: 0.14s; }
.reveal.is-in .wrap > :nth-child(3) { transition-delay: 0.28s; }
.reveal.is-in .wrap > :nth-child(4) { transition-delay: 0.42s; }
.reveal.is-in .wrap > :nth-child(n + 5) { transition-delay: 0.56s; }

/* scroll parallax targets */
[data-speed] { transform: translate3d(0, var(--py, 0px), 0); }

/* ---------- responsive ---------- */

@media (max-width: 1000px) {
  .split, .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero .display { max-width: none; }
  .hero__visual { max-width: 440px; margin-inline: auto; }
  .agents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step::after { display: none; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console { grid-template-columns: minmax(0, 1fr); }
  .console__side { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .console__brand { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console__row { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: block; }
  .nav.is-open .nav__links {
    display: grid;
    position: absolute;
    top: 58px;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    padding: 18px var(--pad) 26px;
    gap: 16px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 16px;
  }
  .layer { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .gateway { grid-template-columns: minmax(0, 1fr); }
  .orbit__node { width: 42%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  .js .reveal:not(.is-in) .wrap > *, .rise, .line > span, .hero__visual {
    opacity: 1;
    transform: none;
    filter: none;
  }
  html { scroll-behavior: auto; }
}