/* ==========================================================================
   CommandAIr marketing site
   Dark, technical, restrained. Brand palette is derived from the logo mark:
   deep navy ground, violet radar sweep, signal blue arrow.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* ground */
  --ink-0: #04060c;
  --ink-1: #070b14;
  --ink-2: #0a1020;
  --ink-3: #101a2e;

  /* lines */
  --line: rgba(150, 172, 214, 0.12);
  --line-2: rgba(150, 172, 214, 0.2);
  --line-3: rgba(150, 172, 214, 0.32);

  /* text */
  --fg: #e9eefa;
  --fg-2: #a6b2c9;
  --fg-3: #8492ad;

  /* brand */
  --violet: #8b6bf0;
  --violet-lt: #b296ff;
  --violet-dp: #7c4de8;
  --blue: #4d8df7;
  --blue-dp: #3b74e8;
  --cyan: #35d6ef;
  --amber: #f2a93b;
  --red: #f2555a;
  --green: #45c98a;

  /* type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;

  /* rhythm */
  --gut: clamp(20px, 4vw, 40px);
  --sec: clamp(76px, 9vw, 148px);
  --w: 1180px;
  --w-wide: 1440px;

  --r-sm: 8px;
  --r: 14px;
  --r-lg: 20px;

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

/* ---------------------------------------------------------------- reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

img {
  height: auto;
}

a {
  color: var(--violet-lt);
  text-decoration-color: rgba(178, 150, 255, 0.4);
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-color: currentColor;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0;
  padding: 0;
}

:focus-visible {
  outline: 2px solid var(--violet-lt);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: rgba(139, 107, 240, 0.35);
  color: #fff;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  background: var(--ink-3);
  color: var(--fg);
  border: 1px solid var(--line-2);
  text-decoration: none;
  transition: top 0.18s var(--ease);
}

.skip:focus {
  top: 12px;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--w);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.wrap-wide {
  max-width: var(--w-wide);
}

section {
  position: relative;
}

.sec {
  padding-block: var(--sec);
}

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--line-2) 18%,
    var(--line-2) 82%,
    transparent
  );
}

/* ---------------------------------------------------------------- type */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 20px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--violet), transparent);
}

.eyebrow--plain::before {
  display: none;
}

h1 {
  font-size: clamp(2.05rem, 1.05rem + 3.05vw, 3.95rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
  font-weight: 600;
}

h2 {
  font-size: clamp(1.95rem, 1.15rem + 2.7vw, 3.15rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h3 {
  font-size: clamp(1.12rem, 1.02rem + 0.4vw, 1.32rem);
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.lead {
  font-size: clamp(1.06rem, 1rem + 0.35vw, 1.24rem);
  line-height: 1.62;
  color: var(--fg-2);
  max-width: 62ch;
}

.body {
  color: var(--fg-2);
  max-width: 68ch;
}

code {
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.14em 0.42em;
  border-radius: 5px;
  background: rgba(150, 172, 214, 0.1);
  border: 1px solid var(--line);
  color: #cdd8ee;
  white-space: nowrap;
}

/* an ATT&CK technique id, tinted to match how the console renders them */
code.tech {
  color: #9fe6f5;
  background: rgba(53, 214, 239, 0.09);
  border-color: rgba(53, 214, 239, 0.22);
}

/* Solid colour first so the headline is still readable if background-clip:
   text is unavailable; the gradient only replaces it where it will render. */
.grad {
  color: #cbb9ff;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad {
    background: linear-gradient(100deg, #ece4ff 0%, #bda6ff 46%, #86b0ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* ---------------------------------------------------------------- buttons */
.btn {
  --btn-bg: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--btn-bg);
  color: var(--fg);
  font: inherit;
  font-size: 0.97rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.16s var(--ease), border-color 0.2s var(--ease),
    background-color 0.2s var(--ease), box-shadow 0.24s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  border-color: transparent;
  background: linear-gradient(100deg, var(--violet-dp), var(--blue-dp));
  color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 26px -10px rgba(96, 84, 232, 0.9);
}

.btn--primary:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 12px 34px -10px rgba(96, 84, 232, 1);
  transform: translateY(-1px);
}

.btn--ghost {
  background: rgba(150, 172, 214, 0.05);
}

.btn--ghost:hover {
  border-color: var(--line-3);
  background: rgba(150, 172, 214, 0.09);
  transform: translateY(-1px);
}

.btn--sm {
  min-height: 40px;
  padding: 0 16px;
  font-size: 0.9rem;
}

.btn svg {
  flex: none;
}

/* ---------------------------------------------------------------- header */
.hdr {
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
}

.hdr.is-stuck {
  background: rgba(4, 6, 12, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--line);
}

.hdr__in {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 72px;
  max-width: var(--w-wide);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* The lockup includes its own outline and sits directly on the dark ground. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
  transition: transform 0.24s var(--ease);
}

.brand:hover {
  transform: translateY(-1px);
}

.brand__lockup {
  width: 172px;
  height: auto;
}

@media (max-width: 420px) {
  .brand__lockup {
    width: 132px;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.nav a {
  padding: 9px 13px;
  border-radius: 8px;
  font-size: 0.925rem;
  color: var(--fg-2);
  text-decoration: none;
  transition: color 0.18s var(--ease), background-color 0.18s var(--ease);
}

.nav a:hover {
  color: var(--fg);
  background: rgba(150, 172, 214, 0.07);
}

.hdr__cta {
  margin-left: 12px;
}

.burger {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: rgba(150, 172, 214, 0.05);
  color: var(--fg);
  cursor: pointer;
}

.burger svg {
  width: 20px;
  height: 20px;
}

.burger .x {
  display: none;
}

.burger[aria-expanded="true"] .x {
  display: block;
}

.burger[aria-expanded="true"] .m {
  display: none;
}

.mnav {
  display: none;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 9, 18, 0.97);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 10px var(--gut) 22px;
}

.mnav.is-open {
  display: block;
}

.mnav a {
  display: block;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
  color: var(--fg-2);
  text-decoration: none;
  font-size: 1.02rem;
}

.mnav a:last-of-type {
  border-bottom: 0;
}

.mnav .btn {
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 940px) {
  .nav,
  .hdr__cta {
    display: none;
  }
  .burger {
    display: inline-flex;
  }
}

/* ---------------------------------------------------------------- ambient */
.field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.field__grid {
  position: absolute;
  inset: -10% -10% 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: 0.42;
  -webkit-mask-image: radial-gradient(
    115% 78% at 50% 8%,
    #000 0%,
    rgba(0, 0, 0, 0.5) 42%,
    transparent 76%
  );
  mask-image: radial-gradient(
    115% 78% at 50% 8%,
    #000 0%,
    rgba(0, 0, 0, 0.5) 42%,
    transparent 76%
  );
}

.field__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}

.field__glow--v {
  width: 62vw;
  height: 42vw;
  min-width: 520px;
  top: -14vw;
  left: 50%;
  transform: translateX(-46%);
  background: radial-gradient(
    circle,
    rgba(124, 77, 232, 0.42) 0%,
    rgba(124, 77, 232, 0.12) 44%,
    transparent 70%
  );
}

.field__glow--b {
  width: 54vw;
  height: 34vw;
  min-width: 420px;
  top: 16vw;
  left: -14vw;
  background: radial-gradient(
    circle,
    rgba(59, 116, 232, 0.3) 0%,
    rgba(59, 116, 232, 0.08) 46%,
    transparent 72%
  );
}

/* the slow sweep echoes the radar quadrant in the logo mark */
.field__sweep {
  position: absolute;
  top: -46vw;
  left: 50%;
  width: 128vw;
  height: 128vw;
  margin-left: -64vw;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(139, 107, 240, 0.14) 24deg,
    rgba(77, 141, 247, 0.05) 46deg,
    transparent 66deg,
    transparent 360deg
  );
  -webkit-mask-image: radial-gradient(
    circle,
    transparent 26%,
    #000 44%,
    #000 62%,
    transparent 76%
  );
  mask-image: radial-gradient(
    circle,
    transparent 26%,
    #000 44%,
    #000 62%,
    transparent 76%
  );
  opacity: 0.75;
  animation: sweep 34s linear infinite;
}

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

.field__noise {
  position: absolute;
  inset: 0;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.field__fade {
  position: absolute;
  inset: auto 0 0;
  height: 34vh;
  background: linear-gradient(to bottom, transparent, var(--ink-0));
}

/* ---------------------------------------------------------------- hero */
/* The negative top margin pulls the ambient field up behind the sticky
   header so there is no seam between the header and the hero glow. */
.hero {
  position: relative;
  margin-top: -72px;
  padding-top: calc(72px + clamp(44px, 5.5vw, 86px));
  padding-bottom: clamp(36px, 5vw, 76px);
  isolation: isolate;
}

.hero__in {
  position: relative;
  z-index: 1;
  text-align: center;
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: linear-gradient(
    180deg,
    rgba(150, 172, 214, 0.09),
    rgba(150, 172, 214, 0.03)
  );
  font-family: var(--mono);
  font-size: clamp(0.6rem, 0.5rem + 0.32vw, 0.72rem);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-2);
  margin-bottom: 26px;
  max-width: 100%;
}

/* nowrap only where there is room for the full line */
@media (min-width: 380px) {
  .hero__badge {
    white-space: nowrap;
  }
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(69, 201, 138, 0.16);
  flex: none;
}

.hero h1 {
  margin-inline: auto;
  max-width: 21ch;
}

@media (min-width: 900px) {
  .hero h1 {
    max-width: none;
  }
}

.hero__sub {
  margin: 24px auto 0;
  max-width: 60ch;
  font-size: clamp(1rem, 0.95rem + 0.34vw, 1.19rem);
  line-height: 1.6;
  color: var(--fg-2);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 30px;
}

.hero__note {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--fg-3);
}

/* ------------------------------------------------- app window (chrome) */
.stage {
  position: relative;
  z-index: 1;
  margin-top: clamp(38px, 4.5vw, 68px);
  perspective: 1500px;
  perspective-origin: 50% 0%;
}

.stage__glow {
  position: absolute;
  left: 50%;
  top: 6%;
  width: 86%;
  height: 70%;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(74px);
  background: radial-gradient(
    ellipse at center,
    rgba(124, 77, 232, 0.34),
    rgba(59, 116, 232, 0.14) 46%,
    transparent 72%
  );
  z-index: -1;
}

.win {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: var(--ink-1);
  overflow: hidden;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.05) inset,
    0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 8px 24px -12px rgba(0, 0, 0, 0.8);
  transform-origin: 50% 0%;
}

.win--tilt {
  transform: rotateX(26deg) scale(0.93);
  transition: transform 0.1s linear;
}

.win__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding-inline: 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(
    180deg,
    rgba(150, 172, 214, 0.075),
    rgba(150, 172, 214, 0.02)
  );
}

.win__dots {
  display: flex;
  gap: 7px;
  flex: none;
}

.win__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(150, 172, 214, 0.22);
}

.win__title {
  flex: 1;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.win__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(69, 201, 138, 0.3);
  background: rgba(69, 201, 138, 0.09);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: #8fe3ba;
}

@media (max-width: 640px) {
  .win__chip {
    display: none;
  }
}

.win__shot {
  display: block;
  width: 100%;
  height: auto;
}

.cap {
  margin: 20px auto 0;
  max-width: 76ch;
  text-align: center;
  font-size: 0.87rem;
  line-height: 1.6;
  color: var(--fg-3);
}

/* ---------------------------------------------------------------- strip */
.strip {
  border-block: 1px solid var(--line);
  background: linear-gradient(
    180deg,
    rgba(150, 172, 214, 0.035),
    transparent 60%
  );
}

.strip__in {
  padding-block: clamp(44px, 5vw, 72px);
}

.strip__hd {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 34px;
  text-align: center;
}

.strip__grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(4, 1fr);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.strip__cell {
  background: var(--ink-0);
  padding: 26px 24px 28px;
}

.strip__cell h3 {
  font-size: 1rem;
  letter-spacing: -0.012em;
  margin-bottom: 9px;
}

.strip__cell p {
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--fg-3);
}

.strip__ico {
  width: 22px;
  height: 22px;
  margin-bottom: 16px;
  color: var(--violet-lt);
}

@media (max-width: 900px) {
  .strip__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

/* ---------------------------------------------------------------- sec hd */
.hd {
  max-width: 74ch;
}

.hd .lead {
  margin-top: 22px;
}

/* ---------------------------------------------------------------- split */
.split {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(36px, 5vw, 76px);
  align-items: center;
}

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

.plainlist {
  list-style: none;
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

.plainlist li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  align-items: start;
  color: var(--fg-2);
  font-size: 0.98rem;
  line-height: 1.55;
}

.plainlist svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--violet-lt);
}

/* ---------------------------------------------------------------- pipeline */
.pipe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: clamp(32px, 5vw, 84px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}

.pipe__steps {
  display: grid;
  gap: clamp(56px, 12vh, 132px);
  padding-block: 8vh 12vh;
  /* grid items default to min-width:auto, which would let the pre-formatted
     envelope block push the whole column wider than its track */
  min-width: 0;
}

.pipe__steps > * {
  min-width: 0;
}

/* Inactive steps are de-emphasised but must stay readable: 0.62 keeps body
   copy above 4.5:1 on the near-black ground, which 0.4 did not. */
.step {
  position: relative;
  padding-left: 34px;
  opacity: 0.62;
  transition: opacity 0.45s var(--ease);
}

.step.is-active {
  opacity: 1;
}

.step::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: -26px;
  width: 1px;
  background: var(--line);
}

.pipe__steps .step:last-child::before {
  display: none;
}

.step::after {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  background: var(--ink-0);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease),
    background-color 0.4s var(--ease);
}

.step.is-active::after {
  border-color: var(--violet-lt);
  background: var(--violet);
  box-shadow: 0 0 0 4px rgba(139, 107, 240, 0.18);
}

.step__no {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  transition: color 0.4s var(--ease);
}

.step.is-active .step__no {
  color: var(--violet-lt);
}

.step h3 {
  margin: 10px 0 12px;
  font-size: clamp(1.28rem, 1.1rem + 0.75vw, 1.65rem);
  letter-spacing: -0.028em;
}

.step p {
  color: var(--fg-2);
  font-size: 1rem;
  line-height: 1.66;
  max-width: 52ch;
}

.step p + p {
  margin-top: 14px;
}

/* sticky visual column */
.pipe__stage {
  position: sticky;
  top: 108px;
  height: min(66vh, 560px);
}

/* The frame is a transparent viewport, not a box. Each pane floats its own
   card inside it, so a wide short crop does not sit marooned in dead space. */
.pipe__frame {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.pipe__frame::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92%;
  height: 76%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(60px);
  background: radial-gradient(
    ellipse at center,
    rgba(124, 77, 232, 0.16),
    rgba(59, 116, 232, 0.06) 52%,
    transparent 74%
  );
  pointer-events: none;
}

/* Flex, not grid: a percentage max-height on a grid item only resolves when
   the row is definitely sized, so the tall crop would overflow the frame. */
.pipe__pane {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}

.pipe__pane.is-on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.pipe__pane img,
.pipe__pane .env {
  width: auto;
  max-width: 100%;
  max-height: calc(100% - 40px);
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: var(--ink-1);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 26px 60px -28px rgba(0, 0, 0, 0.95);
}

.pipe__pane .env {
  width: 100%;
  overflow: auto;
}

.pipe__tag {
  flex: none;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  border: 1px solid var(--line);
  background: rgba(150, 172, 214, 0.05);
  padding: 4px 10px;
  border-radius: 6px;
}

/* Wide layout uses the sticky visual column, so the per-step image is
   redundant and hidden. Below the breakpoint the sticky column goes away and
   each step carries its own screenshot instead. Declared in this order so the
   media query wins. */
.step__shot {
  display: none;
}

@media (max-width: 940px) {
  .pipe {
    grid-template-columns: 1fr;
  }
  .pipe__stage {
    display: none;
  }
  .pipe__steps {
    gap: 48px;
    padding-block: 0;
  }
  .step {
    opacity: 1;
  }
  .step__shot {
    display: block;
    margin-top: 22px;
    border-radius: 10px;
    border: 1px solid var(--line-2);
    overflow: hidden;
    background: var(--ink-1);
  }
  .step__shot img {
    width: 100%;
  }
}

/* ------------------------------------------------- untrusted envelope */
.env {
  width: 100%;
  font-family: var(--mono);
  font-size: clamp(0.62rem, 0.5rem + 0.42vw, 0.79rem);
  line-height: 1.75;
  text-align: left;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, rgba(10, 16, 32, 0.9), rgba(7, 11, 20, 0.9));
  padding: 18px 18px 20px;
  overflow-x: auto;
  color: var(--fg-2);
}

.env b {
  color: var(--amber);
  font-weight: 500;
}

.env .u {
  color: #f0868b;
}

.env .c {
  color: var(--fg-3);
}

.env .k {
  color: var(--cyan);
}

/* ---------------------------------------------------------------- cards */
.cards {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, 1fr);
  /* dense backfills the hole a span-2 card leaves at the 2-column breakpoint.
     Safe here because nothing inside a card is focusable. */
  grid-auto-flow: dense;
  margin-top: clamp(40px, 5vw, 66px);
}

@media (max-width: 980px) {
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

.card {
  position: relative;
  padding: 28px 26px 30px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: linear-gradient(
    180deg,
    rgba(150, 172, 214, 0.045),
    rgba(150, 172, 214, 0.012)
  );
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  transition: border-color 0.28s var(--ease), transform 0.28s var(--ease),
    background-color 0.28s var(--ease);
  overflow: hidden;
}

.card:hover {
  border-color: var(--line-3);
  transform: translateY(-3px);
}

.card__ico {
  width: 24px;
  height: 24px;
  color: var(--violet-lt);
  margin-bottom: 18px;
}

.card h3 {
  margin-bottom: 11px;
}

.card p {
  color: var(--fg-2);
  font-size: 0.955rem;
  line-height: 1.62;
}

.card--wide {
  grid-column: span 2;
}

@media (max-width: 640px) {
  .card--wide {
    grid-column: span 1;
  }
}

.card__shot {
  margin-top: 22px;
  border-radius: 9px;
  border: 1px solid var(--line);
  overflow: hidden;
}

.card__meta {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pill {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  padding: 4px 9px;
  border-radius: 6px;
  border: 1px solid var(--line-2);
  background: rgba(150, 172, 214, 0.06);
  color: var(--fg-3);
}

/* ---------------------------------------------------------------- diagram */
.diagram {
  margin-top: clamp(40px, 5vw, 66px);
  padding: clamp(20px, 3vw, 40px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: radial-gradient(
      110% 90% at 50% 0%,
      rgba(124, 77, 232, 0.08),
      transparent 62%
    ),
    linear-gradient(180deg, rgba(150, 172, 214, 0.03), transparent);
}

/* The topology needs room to stay legible, so on narrow screens it scrolls
   inside its own region rather than shrinking into illegibility. The region
   is focusable so it can be reached and scrolled from the keyboard. */
.diagram__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding-bottom: 4px;
}

.diagram__scroll:focus-visible {
  outline: 2px solid var(--violet-lt);
  outline-offset: 4px;
}

.diagram svg {
  width: 100%;
  min-width: 700px;
  height: auto;
}

.diagram__hint {
  display: none;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.diagram__hint svg {
  width: 14px;
  min-width: 0;
  height: 14px;
  flex: none;
}

@media (max-width: 780px) {
  .diagram__hint {
    display: flex;
  }
}

.dg-box {
  fill: rgba(150, 172, 214, 0.035);
  stroke: var(--line-2);
  stroke-width: 1;
}

.dg-box--in {
  fill: rgba(124, 77, 232, 0.06);
  stroke: rgba(139, 107, 240, 0.32);
}

.dg-box--edge {
  fill: rgba(59, 116, 232, 0.06);
  stroke: rgba(77, 141, 247, 0.34);
}

.dg-node {
  fill: #0c1322;
  stroke: var(--line-3);
  stroke-width: 1;
}

.dg-t {
  fill: var(--fg);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
}

.dg-s {
  fill: var(--fg-3);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.dg-lbl {
  fill: var(--fg-3);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dg-line {
  stroke: var(--line-3);
  stroke-width: 1.5;
  fill: none;
}

.dg-flow {
  stroke: var(--violet-lt);
  stroke-width: 1.75;
  fill: none;
  stroke-dasharray: 7 9;
  stroke-linecap: round;
}

.js .dg-flow {
  animation: dash 1.6s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -32;
  }
}

.dg-block {
  stroke: var(--red);
  stroke-width: 1.5;
  fill: none;
  stroke-dasharray: 4 6;
  opacity: 0.7;
}

.dg-x {
  stroke: var(--red);
  stroke-width: 2;
  stroke-linecap: round;
}

.diagram__key {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 0.86rem;
  color: var(--fg-3);
}

.diagram__key span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.diagram__key i {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  flex: none;
}

.k-flow {
  background: var(--violet-lt);
}

.k-block {
  background: repeating-linear-gradient(
    90deg,
    var(--red) 0 4px,
    transparent 4px 8px
  );
}

/* ---------------------------------------------------------------- spec */
.spec {
  margin-top: clamp(40px, 5vw, 62px);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.spec__row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}

.spec__row:last-child {
  border-bottom: 0;
}

.spec__row:nth-child(odd) {
  background: rgba(150, 172, 214, 0.022);
}

.spec__row dt {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.spec__row dd {
  margin: 0;
  color: var(--fg-2);
  font-size: 0.98rem;
  line-height: 1.6;
}

@media (max-width: 760px) {
  .spec__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px;
  }
}

/* ------------------------------------------------------- deployment modes */
.modes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: clamp(40px, 5vw, 66px);
}

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

.mode {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: radial-gradient(
      120% 100% at 6% 0%,
      rgba(77, 141, 247, 0.1),
      transparent 56%
    ),
    linear-gradient(180deg, rgba(150, 172, 214, 0.045), rgba(150, 172, 214, 0.012));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  transition: border-color 0.28s var(--ease), transform 0.28s var(--ease);
}

.mode--alt {
  background: radial-gradient(
      120% 100% at 6% 0%,
      rgba(124, 77, 232, 0.13),
      transparent 56%
    ),
    linear-gradient(180deg, rgba(150, 172, 214, 0.045), rgba(150, 172, 214, 0.012));
}

.mode:hover {
  border-color: var(--line-3);
  transform: translateY(-3px);
}

.mode__hd {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 22px;
}

.mode__ico {
  width: 40px;
  height: 40px;
  flex: none;
  padding: 8px;
  border-radius: 11px;
  border: 1px solid var(--line-2);
  background: rgba(150, 172, 214, 0.06);
  color: var(--violet-lt);
}

.mode__kicker {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 4px;
}

.mode__hd h3 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  letter-spacing: -0.028em;
}

.mode > p {
  color: var(--fg-2);
  font-size: 1rem;
  line-height: 1.64;
}

/* the list absorbs the height difference so both cards' footers line up */
.mode__list {
  list-style: none;
  display: grid;
  gap: 11px;
  margin-top: 22px;
  margin-bottom: auto;
}

.mode__list li {
  position: relative;
  padding-left: 22px;
  color: var(--fg-2);
  font-size: 0.95rem;
  line-height: 1.55;
}

.mode__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--violet);
}

.mode .card__meta {
  padding-top: 24px;
}

.mode__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 6px 0;
  align-self: flex-start;
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--violet-lt);
  text-decoration: none;
}

.mode__link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------------------------------------------------------------- faq */
.faq {
  margin-top: clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
  max-width: 900px;
}

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 24px 4px;
  cursor: pointer;
  list-style: none;
  font-size: clamp(1.02rem, 0.98rem + 0.28vw, 1.16rem);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--fg);
  transition: color 0.2s var(--ease);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary:hover {
  color: var(--violet-lt);
}

.faq summary .plus {
  margin-left: auto;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--fg-3);
  transition: transform 0.3s var(--ease), color 0.2s var(--ease);
}

.faq details[open] summary .plus {
  transform: rotate(45deg);
  color: var(--violet-lt);
}

.faq .ans {
  padding: 0 44px 26px 4px;
  color: var(--fg-2);
  font-size: 0.99rem;
  line-height: 1.68;
  max-width: 74ch;
}

.faq .ans p + p {
  margin-top: 13px;
}

/* ---------------------------------------------------------------- cta */
.cta {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.cta__in {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: clamp(80px, 10vw, 150px);
}

.cta__glow {
  position: absolute;
  left: 50%;
  bottom: -18%;
  width: 78vw;
  height: 52vw;
  min-width: 620px;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(96px);
  background: radial-gradient(
    circle,
    rgba(124, 77, 232, 0.3),
    rgba(59, 116, 232, 0.1) 48%,
    transparent 72%
  );
  pointer-events: none;
}

/* ---------------------------------------------------------------- footer */
.ftr {
  border-top: 1px solid var(--line);
  padding-block: 52px 60px;
  background: var(--ink-0);
}

.ftr__top {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-start;
  justify-content: space-between;
}

.ftr__brand {
  max-width: 40ch;
}

.ftr__brand p {
  margin-top: 16px;
  font-size: 0.9rem;
  color: var(--fg-3);
  line-height: 1.6;
}

.ftr__cols {
  display: flex;
  gap: clamp(34px, 6vw, 72px);
  flex-wrap: wrap;
}

.ftr__col h4 {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
  margin-bottom: 14px;
}

.ftr__col ul {
  list-style: none;
  display: grid;
  gap: 2px;
}

/* padded so each link clears the 24px minimum target size */
.ftr__col a {
  display: inline-block;
  padding: 5px 0;
  color: var(--fg-2);
  text-decoration: none;
  font-size: 0.93rem;
}

.ftr__col a:hover {
  color: var(--fg);
}

.ftr__btm {
  margin-top: 46px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--fg-3);
}

/* ---------------------------------------------------------------- reveal */
.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------- reduced motion */
@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;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .field__sweep,
  .js .dg-flow {
    animation: none;
  }

  .win--tilt {
    transform: none !important;
  }

  .step {
    opacity: 1;
  }

  .field__glow {
    transform: translateX(-46%) !important;
  }

  .field__glow--b {
    transform: none !important;
  }
}

/* ============================================================ contact form
   Replaces the mailto CTAs. No address appears in the markup, so scrapers
   have nothing to harvest, and Netlify handles delivery. */
.contact-form {
  margin: 40px auto 0;
  max-width: 720px;
  text-align: left;
}

/* The honeypot. Positioned off-screen rather than display:none, because a bot
   that parses CSS can skip a hidden field, and Netlify needs it submitted
   empty by real browsers. aria-hidden and tabindex=-1 keep it away from
   assistive tech and the tab order. */
.contact-bot-field {
  height: 1px;
  left: -10000px;
  margin: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.contact-form__row {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr 1fr;
}

.contact-form label {
  display: block;
  margin-bottom: 18px;
}

.contact-form label > span {
  color: var(--fg-2);
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}

.contact-form input,
.contact-form textarea {
  background: rgba(7, 11, 20, 0.72);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--fg);
  font: inherit;
  padding: 12px 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  width: 100%;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--fg-3);
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  border-color: var(--violet-lt);
  box-shadow: 0 0 0 3px rgba(178, 150, 255, 0.22);
  outline: none;
}

.contact-form textarea {
  resize: vertical;
}

.contact-form__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 16px 20px;
  margin-top: 6px;
}

.contact-form__note {
  color: var(--fg-3);
  font-size: 0.86rem;
  margin: 0;
  max-width: 34ch;
}

@media (max-width: 720px) {
  .contact-form__row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}