/* ==========================================================================
   NXSgate — site styles
   Plain CSS, no build step. Edit the tokens in :root to re-theme the site.
   ========================================================================== */

:root {
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", var(--font-sans);
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ink: #0c1321;
  --text: #3b4a5e;
  --muted: #64748b;
  --line: #e3e8ef;
  --line-strong: #cbd5e1;
  --bg: #ffffff;
  --bg-soft: #f6f8fb;

  --brand: #0168fd;
  --brand-hover: #0156d2;
  --brand-ink: #0a3a91;
  --brand-soft: #e6f0ff;

  --navy: #0c1321;
  --navy-line: rgba(255, 255, 255, 0.1);

  --ok: #0f9d58;
  --ok-soft: #e7f6ee;
  --ok-ink: #0b7a43;
  --warn: #d97706;
  --warn-soft: #fef3e2;
  --warn-ink: #b45309;
  --bad: #dc2626;
  --bad-soft: #fdecec;
  --bad-ink: #b91c1c;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(10, 26, 47, 0.06);
  --shadow: 0 1px 2px rgba(10, 26, 47, 0.05), 0 8px 24px -8px rgba(10, 26, 47, 0.12);
  --shadow-lg: 0 2px 4px rgba(10, 26, 47, 0.04), 0 24px 48px -16px rgba(10, 26, 47, 0.22);

  --container: 1200px;
  --gutter: 24px;
  --header-h: 68px;
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.625rem); font-weight: 700; letter-spacing: -0.03em; }
h3 { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); }

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

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

svg.icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: 12px; color: #fff; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Layout ---------- */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 96px 0; }
.section--soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
.section--soft + .section--soft { border-top: 0; }
@media (max-width: 768px) { .section { padding: 64px 0; } }

.section-head { max-width: 720px; margin-bottom: 56px; }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .lead { margin-inline: auto; }
.section-head .lead { margin-bottom: 0; }
@media (max-width: 768px) { .section-head { margin-bottom: 40px; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.lead { font-size: 1.1875rem; line-height: 1.6; color: var(--text); max-width: 40em; }
@media (max-width: 640px) { .lead { font-size: 1.0625rem; } }

.split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px;
  align-items: center;
}
.split--reverse .split__media { order: -1; }
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split--reverse .split__media { order: 0; }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: 600 0.9375rem/1 var(--font-sans);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.btn svg { width: 18px; height: 18px; transition: transform 0.15s; }
.btn:hover svg { transform: translateX(2px); }
.btn--sm { height: 38px; padding: 0 14px; font-size: 0.875rem; border-radius: 9px; }
.btn--lg { height: 52px; padding: 0 24px; font-size: 1rem; }

.btn--primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 1px 2px rgba(1, 104, 253, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn--primary:hover { background: var(--brand-hover); color: #fff; }

.btn--secondary { background: #fff; color: var(--ink); border-color: var(--line-strong); }
.btn--secondary:hover { border-color: var(--ink); color: var(--ink); }

.btn--light { background: #fff; color: var(--navy); }
.btn--light:hover { background: var(--brand-soft); color: var(--navy); }

/* A light navy tint keeps the white text readable when a bright ribbon of the
   aurora passes behind the button. */
.btn--outline-light { background: rgba(5, 11, 38, 0.3); color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.btn--outline-light:hover { border-color: #fff; color: #fff; }

.btn[disabled] { opacity: 0.6; cursor: progress; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s, background-color 0.2s;
}
.site-header.is-scrolled,
.site-header.is-open { border-bottom-color: var(--line); }

/* Home: the header sits transparent on the dark hero until the page scrolls
   or the mobile menu opens. */
.site-header--overlay:not(.is-scrolled, .is-open) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.site-header--overlay:not(.is-scrolled, .is-open) .brand,
.site-header--overlay:not(.is-scrolled, .is-open) .nav__links a,
.site-header--overlay:not(.is-scrolled, .is-open) .nav__plain { color: #fff; }
.site-header--overlay:not(.is-scrolled, .is-open) .nav__links a:hover,
.site-header--overlay:not(.is-scrolled, .is-open) .nav__plain:hover { background: rgba(255, 255, 255, 0.1); }
.site-header--overlay:not(.is-scrolled, .is-open) .nav__toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}
.site-header--overlay:not(.is-scrolled, .is-open) :focus-visible { outline-color: #fff; }

.nav { display: flex; align-items: center; height: var(--header-h); gap: 40px; }

.brand { display: inline-flex; align-items: center; flex: none; padding: 12px 0; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand__logo { width: auto; height: 20px; overflow: visible; }
@media (max-width: 380px) { .brand__logo { height: 17px; } }

/* Animated header logo.
   Intro: the two chevrons glide in from either side and lock at the gate, then
   the letters settle in. It plays once per browser session: an inline script
   in <head> adds .logo-intro and removes it when the intro is done.
   Hover/focus: the gate briefly opens and closes. */
.brand__logo path { transform-box: fill-box; transform-origin: center; }

.logo-intro .brand .logo-x--blue { animation: logo-in-left 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.logo-intro .brand .logo-x--navy { animation: logo-in-right 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both; }
.logo-intro .brand .logo-n { animation: logo-settle-n 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; }
.logo-intro .brand .logo-rest { animation: logo-settle-rest 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.66s both; }

.brand:hover .logo-x--blue,
.brand:focus-visible .logo-x--blue { animation: logo-gate-left 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
.brand:hover .logo-x--navy,
.brand:focus-visible .logo-x--navy { animation: logo-gate-right 0.7s cubic-bezier(0.65, 0, 0.35, 1); }

@keyframes logo-in-left {
  from { opacity: 0; transform: translateX(-85%); }
  to { opacity: 1; transform: none; }
}
@keyframes logo-in-right {
  from { opacity: 0; transform: translateX(85%); }
  to { opacity: 1; transform: none; }
}
@keyframes logo-settle-n {
  from { opacity: 0; transform: translateX(18%); }
  to { opacity: 1; transform: none; }
}
@keyframes logo-settle-rest {
  from { opacity: 0; transform: translateX(-3%); }
  to { opacity: 1; transform: none; }
}
@keyframes logo-gate-left {
  0%, 100% { transform: none; }
  45% { transform: translateX(-12%); }
}
@keyframes logo-gate-right {
  0%, 100% { transform: none; }
  45% { transform: translateX(12%); }
}

.nav__menu { display: flex; align-items: center; flex: 1; gap: 24px; }

.nav__links { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav__links a,
.nav__plain {
  display: block;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--text);
  font-weight: 500;
  font-size: 0.9375rem;
}
.nav__links a:hover,
.nav__plain:hover { color: var(--ink); background: var(--bg-soft); }
.nav__links a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--bg-soft); }

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

.nav__toggle {
  display: none;
  margin-left: auto;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.nav__toggle svg { width: 20px; height: 20px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

/* The full nav needs about 1000px; below 1024px it folds into the menu button. */
@media (max-width: 1023px) {
  .nav__toggle { display: inline-flex; }
  .nav__menu {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px var(--gutter) 20px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .site-header.is-open .nav__menu { display: flex; }
  .nav__links { flex-direction: column; }
  .nav__links a, .nav__plain { padding: 12px; font-size: 1rem; }
  .nav__actions { margin: 4px 0 0; flex-direction: column; align-items: stretch; }
  .nav__actions .btn { height: 46px; font-size: 0.9375rem; }
}

/* ---------- Home hero ----------
   Full-height dark hero on the aurora background (see "Aurora background"
   below). The header sits on top of it (.site-header--overlay), hence the
   negative top margin. */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: clamp(640px, 100vh, 1000px);
  min-height: clamp(640px, 100svh, 1000px);
  margin-top: calc(var(--header-h) * -1 - 1px); /* header height + its 1px border */
  padding-top: calc(var(--header-h) + 64px);
  background: #050b26;
  color: #c9d5f0;
  text-align: center;
}

.hero__inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 88px;
}
.hero h1 {
  max-width: 13em;
  margin: 0 auto 24px;
  color: #fff;
  font-size: clamp(2.5rem, 1.3rem + 4.6vw, 4.75rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
}
.hero .lead { max-width: 44em; margin: 0 auto; color: rgba(236, 241, 255, 0.92); }
.hero :focus-visible { outline-color: #fff; }

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero .hero__ctas { justify-content: center; margin-top: 36px; }

.hero__points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  list-style: none;
  padding: 0;
  margin: 36px 0 0;
  font-size: 0.9375rem;
  color: rgba(236, 241, 255, 0.84);
}
.hero__points li { display: flex; align-items: center; gap: 8px; }
.hero__points svg { width: 18px; height: 18px; color: #5cc8ff; }

@media (max-width: 640px) {
  .hero { padding-top: calc(var(--header-h) + 48px); }
  .hero__inner { padding-bottom: 56px; }
}
@media (max-width: 520px) {
  .hero__ctas .btn { width: 100%; }
}

/* ---------- Aurora background ----------
   The animated dark-blue background of the home hero and every CTA band.
   main.js fills each [data-aurora] element with four soft glows, two blurred
   light ribbons (inline SVG) and comets of light travelling along them, and
   pauses it while it is off screen. Everything moves with CSS transforms or
   stroke-dashoffset, so it stays smooth. Its parent needs `isolation: isolate`. */

.aurora {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: radial-gradient(ellipse 85% 75% at 50% 42%, #0a3ccc 0%, #072a92 32%, #06185a 62%, #050b26 100%);
}
.aurora::before,
.aurora::after { content: ""; position: absolute; inset: 0; z-index: 1; }
/* Fine grain, which also hides gradient banding. */
.aurora::after {
  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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.09;
  mix-blend-mode: soft-light;
}
/* Hero: darken the top (header) and bottom (industry strip). */
.aurora--hero::before {
  background: linear-gradient(180deg, rgba(5, 11, 38, 0.6) 0%, rgba(5, 11, 38, 0) 20%, rgba(5, 11, 38, 0) 68%, rgba(5, 11, 38, 0.75) 100%);
}
/* CTA band: brightest behind the buttons, darker behind the text. */
.aurora--band {
  background: radial-gradient(ellipse 75% 140% at 76% 50%, #0a3ccc 0%, #072a92 30%, #06185a 62%, #050b26 100%);
}
.aurora--band::before { background: linear-gradient(90deg, rgba(5, 11, 38, 0.55) 0%, rgba(5, 11, 38, 0) 60%); }
/* Stacked layout: the buttons sit at the bottom, so darken there instead. */
@media (max-width: 768px) {
  .aurora--band::before { background: linear-gradient(180deg, rgba(5, 11, 38, 0.3) 0%, rgba(5, 11, 38, 0) 40%, rgba(5, 11, 38, 0.5) 100%); }
}

.aurora__glow {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
  animation: 24s ease-in-out infinite alternate;
}
.aurora__glow--1 {
  width: max(62vw, 520px); aspect-ratio: 1;
  left: -16vw; top: -24vw;
  background: radial-gradient(closest-side, rgba(1, 104, 253, 0.9), rgba(1, 104, 253, 0));
  animation-name: glow-1;
}
.aurora__glow--2 {
  width: max(56vw, 460px); aspect-ratio: 1;
  right: -18vw; top: -8vw;
  background: radial-gradient(closest-side, rgba(104, 62, 255, 0.7), rgba(104, 62, 255, 0));
  animation-name: glow-2;
  animation-duration: 31s;
}
.aurora__glow--3 {
  width: max(50vw, 420px); aspect-ratio: 1;
  left: 16vw; bottom: -30vw;
  background: radial-gradient(closest-side, rgba(0, 170, 255, 0.55), rgba(0, 170, 255, 0));
  animation-name: glow-3;
  animation-duration: 27s;
}
.aurora__glow--4 {
  width: max(40vw, 320px); aspect-ratio: 3 / 2;
  left: 30vw; top: 2vw;
  background: radial-gradient(closest-side, rgba(140, 190, 255, 0.28), rgba(140, 190, 255, 0));
  animation-name: glow-4;
  animation-duration: 19s;
}

.aurora__light {
  position: absolute;
  left: -10%; top: -10%;
  width: 120%; height: 120%;
  max-width: none;
  will-change: transform;
  animation: light-a 13s ease-in-out infinite alternate;
}
.aurora__light--b { mix-blend-mode: screen; animation-name: light-b; animation-duration: 17s; }

@keyframes glow-1 { to { transform: translate3d(18vw, 10vw, 0) scale(1.15); } }
@keyframes glow-2 { to { transform: translate3d(-14vw, 12vw, 0) scale(0.9); } }
@keyframes glow-3 { to { transform: translate3d(16vw, -8vw, 0) scale(1.2); } }
@keyframes glow-4 { to { transform: translate3d(-8vw, 5vw, 0) scale(1.3); } }
@keyframes light-a {
  from { transform: translate3d(-4%, 2%, 0) rotate(-2deg); }
  to { transform: translate3d(4%, -3%, 0) rotate(2deg) scale(1.06); }
}
@keyframes light-b {
  from { transform: translate3d(3%, -2%, 0) scale(1.05); }
  to { transform: translate3d(-4%, 3%, 0) rotate(-3deg); }
}

/* Light travelling along the ribbons. Each comet is a small streak that rides
   its ribbon's curve with a CSS motion path (main.js sets offset-path to the
   curve scaled to this layer), so it moves like a transform and nothing gets
   repainted. Each run starts and ends off screen, with a fade at both ends. */
.aurora__comet {
  position: absolute;
  left: 0; top: 0;
  width: 150px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(140, 196, 255, 0), rgba(191, 224, 255, 0.55) 65%, #fff);
  offset-anchor: 100% 50%;
  offset-rotate: auto;
  opacity: 0;
  will-change: transform, opacity;
  animation: comet var(--dur, 6s) linear var(--delay, 0s) infinite;
}
/* The glowing head */
.aurora__comet::after {
  content: "";
  position: absolute;
  right: -4px; top: 50%;
  width: 10px; height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 8px 3px rgba(150, 200, 255, 0.75), 0 0 22px 6px rgba(80, 150, 255, 0.35);
}
/* --from / --to: the on-screen stretch of the curve, set by main.js. */
@keyframes comet {
  0% { offset-distance: var(--from, 0%); opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: var(--to, 100%); opacity: 0; }
}

.aurora.is-paused .aurora__glow,
.aurora.is-paused .aurora__light,
.aurora.is-paused .aurora__comet { animation-play-state: paused; }

/* Lighter aurora for phones and tablets (main.js adds .aurora--lite there).
   Blending big moving layers is what makes phones stutter, so the four glows
   are painted once into the background instead, with no blend modes and no
   grain. The ribbons still drift and the comets still run. */
.aurora--lite::after { display: none; }
.aurora--lite .aurora__light--b { mix-blend-mode: normal; }
.aurora--hero.aurora--lite {
  background:
    radial-gradient(circle at 8% 6%, rgba(1, 104, 253, 0.7), rgba(1, 104, 253, 0) 48%),
    radial-gradient(circle at 96% 28%, rgba(104, 62, 255, 0.5), rgba(104, 62, 255, 0) 46%),
    radial-gradient(circle at 40% 100%, rgba(0, 170, 255, 0.35), rgba(0, 170, 255, 0) 45%),
    radial-gradient(ellipse 85% 75% at 50% 42%, #0a3ccc 0%, #072a92 32%, #06185a 62%, #050b26 100%);
}
.aurora--band.aurora--lite {
  background:
    radial-gradient(circle at 12% 0%, rgba(1, 104, 253, 0.55), rgba(1, 104, 253, 0) 55%),
    radial-gradient(circle at 92% 70%, rgba(104, 62, 255, 0.45), rgba(104, 62, 255, 0) 50%),
    radial-gradient(ellipse 75% 140% at 76% 50%, #0a3ccc 0%, #072a92 30%, #06185a 62%, #050b26 100%);
}

/* ---------- Window mockups (console, tables) ---------- */

.window {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-size: 0.8125rem;
}
.window__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
.window__dots { display: flex; gap: 6px; flex: none; }
.window__dots i { width: 10px; height: 10px; border-radius: 50%; background: #d5dbe4; }
.window__title { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.window__meta { margin-left: auto; color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.window__scroll { overflow-x: auto; }
@media (max-width: 480px) {
  .window__dots { display: none; }
  .window__bar { padding: 10px 14px; }
}
.window__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--muted);
}
.window__foot strong { color: var(--ink); }

/* ---------- Industry strip ---------- */

.strip { padding: 22px 0; background: var(--bg-soft); border-block: 1px solid var(--line); }
.strip__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px 40px; }
.strip p {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.strip ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; list-style: none; margin: 0; padding: 0; }
.strip li { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #475569; letter-spacing: -0.01em; }

/* Inside the home hero */
.strip--dark { background: rgba(5, 11, 38, 0.35); border-block: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.strip--dark p { color: rgba(222, 231, 252, 0.6); }
.strip--dark li { color: rgba(255, 255, 255, 0.88); }

/* ---------- Cards ---------- */

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) { .cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards, .cards--2, .cards--4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.card:hover { border-color: #c7d3ee; box-shadow: var(--shadow); }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 0.9375rem; margin-bottom: 16px; }
.card > :last-child { margin-bottom: 0; }

.card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand);
}
.card__icon svg { width: 22px; height: 22px; }

.card__link {
  margin-top: auto;
  margin-bottom: -10px; /* the padding enlarges the tap area without moving the text */
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9375rem;
}
.card__link svg { width: 16px; height: 16px; transition: transform 0.15s; }
.card__link:hover svg { transform: translateX(3px); }

/* Coming-soon cards (Download, Docs): icon and badge share the top row, and
   format chips sit at the bottom so they line up across a row of cards. */
.card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.card__head .card__icon { margin-bottom: 0; }
/* A product image in place of the icon (white render on a white card). */
.card__media { display: block; width: calc(100% + 24px); max-width: none; height: auto; margin: -12px -12px 8px; }
.card > .chips:last-child { margin-top: auto; }

.card__list { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 8px; font-size: 0.875rem; }
.card__list li { display: flex; gap: 8px; align-items: flex-start; }
.card__list svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--brand); }

/* ---------- Steps & pipeline ---------- */

.steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.step__num {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: #fff;
  font: 600 0.8125rem/1 var(--font-mono);
  color: var(--brand);
}
.step h3 { margin: 6px 0 4px; font-size: 1.0625rem; }
.step p { margin: 0; font-size: 0.9375rem; }

.pipeline {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.pipe {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-soft);
  font-weight: 600;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.3;
}
.pipe small { display: block; margin-top: 2px; font-weight: 500; font-size: 0.8125rem; color: var(--muted); }
.pipe__icon {
  flex: none;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 9px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--brand);
}
.pipe__icon svg { width: 18px; height: 18px; }
.pipe--brand { background: var(--brand); border-color: var(--brand); color: #fff; }
.pipe--brand small { color: rgba(255, 255, 255, 0.78); }
.pipe--brand .pipe__icon { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.2); color: #fff; }

.pipe-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pipe-row .pipe { flex-direction: column; justify-content: center; gap: 2px; padding: 14px 8px; text-align: center; background: #fff; }

.pipe-connector { position: relative; height: 28px; }
.pipe-connector::before {
  content: "";
  position: absolute;
  left: 50%; top: 3px; bottom: 7px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(to bottom, var(--brand) 50%, transparent 0) 0 0 / 2px 8px repeat-y;
  animation: flow 0.8s linear infinite;
}
.pipe-connector::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 1px;
  margin-left: -5px;
  border: 5px solid transparent;
  border-top: 6px solid var(--brand);
  border-bottom: 0;
}

.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.outcome { padding: 11px 8px; border-radius: 10px; text-align: center; font-weight: 600; font-size: 0.875rem; }
.outcome--ok { background: var(--ok-soft); color: var(--ok-ink); }
.outcome--bad { background: var(--bad-soft); color: var(--bad-ink); }
.outcome--log { background: var(--brand-soft); color: var(--brand-ink); }

@media (max-width: 520px) {
  .pipeline { padding: 16px; }
  .pipe-row .pipe, .outcome { font-size: 0.8125rem; }
}

/* ---------- Checklists & badges ---------- */

.checklist { list-style: none; margin: 24px 0 32px; padding: 0; display: grid; gap: 14px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.checklist svg { width: 20px; height: 20px; margin-top: 2px; color: var(--brand); }
.checklist strong { color: var(--ink); font-weight: 600; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge--ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge--bad { background: var(--bad-soft); color: var(--bad-ink); }
.badge--warn { background: var(--warn-soft); color: var(--warn-ink); }
.badge--brand { background: var(--brand-soft); color: var(--brand-ink); }
.badge--neutral { background: #f1f5f9; color: #475569; }

/* ---------- Data tables inside mockups ---------- */

.data-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.data-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.data-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table th:first-child, .data-table td:first-child { padding-left: 18px; }
.data-table .wrap { white-space: normal; }

/* Phones: each row becomes a small card. The first cell (name) and last cell
   (status badge) share the top line, the cells in between go underneath. */
@media (max-width: 560px) {
  .data-table thead { display: none; }
  .data-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .data-table tr:last-child { border-bottom: 0; }
  .data-table td,
  .data-table td:first-child { padding: 0; border: 0; white-space: normal; }
  .data-table td:first-child { flex: 1 1 0; min-width: 0; order: 1; font-weight: 600; }
  .data-table td:last-child { order: 2; }
  .data-table tr::after { content: ""; flex-basis: 100%; order: 3; }
  .data-table td:not(:first-child):not(:last-child) { order: 4; font-size: 0.75rem; color: var(--muted); }
}

/* Zone policy matrix (home) */
.zone-matrix { width: 100%; min-width: 420px; table-layout: fixed; border-collapse: separate; border-spacing: 6px; padding: 8px 10px 2px; font-size: 0.8125rem; }
.zone-matrix th {
  padding: 4px 2px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.zone-matrix thead th:first-child { width: 92px; text-align: left; text-transform: none; letter-spacing: 0; font-weight: 500; }
.zone-matrix tbody th { text-align: left; color: var(--ink); padding-right: 8px; }
.zone-matrix td { padding: 0; }
.z {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}
.z--inspect { background: var(--brand-soft); color: var(--brand-ink); }
.z--allow { background: var(--ok-soft); color: var(--ok-ink); }
.z--limit { background: var(--warn-soft); color: var(--warn-ink); }
.z--deny { background: #f1f5f9; color: #64748b; }
.z--self { background: repeating-linear-gradient(135deg, #f8fafc 0 5px, #eef2f6 5px 10px); color: #94a3b8; }
.zone-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: 0.75rem;
  color: var(--muted);
}
.zone-legend span { display: inline-flex; align-items: center; gap: 6px; }
.zone-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* Phones: shrink the matrix so all five zones fit without scrolling. */
@media (max-width: 560px) {
  .zone-matrix { min-width: 0; border-spacing: 3px; padding: 6px 6px 2px; }
  .zone-matrix thead th:first-child { width: 50px; font-size: 0.625rem; white-space: normal; line-height: 1.3; }
  .zone-matrix th { font-size: 0.625rem; letter-spacing: 0.02em; }
  .zone-matrix tbody th { padding-right: 2px; }
  .z { height: 30px; border-radius: 6px; font-size: 0.6875rem; }
  .zone-legend { padding: 12px 14px; gap: 6px 14px; }
}

/* Zone list (product) */
.zone-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; vertical-align: 1px; }
.data-table .muted { color: var(--muted); }
.data-table .mono { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); }

.app { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.app__avatar {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
}

.risk { display: inline-flex; gap: 3px; vertical-align: middle; }
.risk i { width: 6px; height: 14px; border-radius: 2px; background: #e2e8f0; }
.risk--1 i:nth-child(-n+1),
.risk--2 i:nth-child(-n+2) { background: #16a34a; }
.risk--3 i:nth-child(-n+3) { background: #f59e0b; }
.risk--4 i:nth-child(-n+4),
.risk--5 i:nth-child(-n+5) { background: #dc2626; }

/* Threat analysis timeline */
.timeline { list-style: none; margin: 0; padding: 20px 20px 4px; }
.timeline li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; padding-bottom: 20px; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 13px; top: 30px; bottom: 2px;
  width: 2px;
  background: var(--line);
}
.timeline li:last-child::before { display: none; }
.timeline__dot {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  color: var(--muted);
}
.timeline__dot svg { width: 14px; height: 14px; stroke-width: 2.25; }
.timeline__dot--ok { background: var(--ok-soft); border-color: #bfe6cf; color: var(--ok); }
.timeline__dot--warn { background: var(--warn-soft); border-color: #f8d9a8; color: var(--warn); }
.timeline__dot--bad { background: var(--bad-soft); border-color: #f6c4c4; color: var(--bad); }
.timeline strong { display: block; color: var(--ink); font-size: 0.875rem; line-height: 1.4; }
.timeline .detail { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; }
.timeline time { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); padding-top: 4px; }

/* Decryption rules list */
.rules { list-style: none; margin: 0; padding: 4px 0; }
.rules li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--line);
}
.rules li:last-child { border-bottom: 0; }
.rules li > span:first-child { color: var(--ink); font-weight: 500; }
.meter { width: 120px; height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }

/* Topology diagram */
.topology-card { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.topology { width: 100%; height: auto; font-family: var(--font-sans); }
.topology .node rect { fill: #fff; stroke: var(--line-strong); }
.topology .node--hq rect { fill: var(--brand); stroke: var(--brand); }
.topology .node text { font-size: 12px; font-weight: 600; fill: var(--ink); text-anchor: middle; }
.topology .node .sub { font-size: 10.5px; font-weight: 500; fill: var(--muted); }
.topology .node--hq text { fill: #fff; }
.topology .node--hq .sub { fill: rgba(255, 255, 255, 0.78); }
.topology .link { fill: none; stroke: var(--brand); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0.6; animation: dash 1.2s linear infinite; }
.topology .label rect { fill: var(--brand-soft); }
.topology .label text { font-size: 10px; font-weight: 600; fill: var(--brand-ink); text-anchor: middle; }

/* Code block */
.code {
  overflow: hidden;
  background: var(--navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  color: #c9d3e6;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
}
.code__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--navy-line);
  color: #8898b5;
  font-size: 0.75rem;
}
.code__bar .window__dots i { background: #26365a; }
.code pre { margin: 0; padding: 18px 20px; overflow-x: auto; }
.code code { font-family: inherit; }
@media (max-width: 520px) {
  .code { font-size: 0.6875rem; }
  .code pre { padding: 14px 16px; }
  .topology-card { padding: 6px; }
}
.tok-k { color: #7aa2ff; }
.tok-s { color: #7ee2b8; }
.tok-c { color: #6b7a99; }
.tok-a { color: #f5c77e; }

/* ---------- CTA band ---------- */

/* Sits on the aurora background (see "Aurora background"). */
.cta-band { position: relative; isolation: isolate; overflow: hidden; padding: 96px 0; background: #050b26; color: rgba(236, 241, 255, 0.86); }
.cta-band__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 32px; }
.cta-band h2 { color: #fff; max-width: 18em; }
.cta-band p { margin: 0; max-width: 36em; font-size: 1.0625rem; }
.cta-band :focus-visible { outline-color: #fff; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 768px) { .cta-band { padding: 64px 0; } }
@media (max-width: 520px) { .cta-band__actions, .cta-band__actions .btn { width: 100%; } }

/* ---------- Footer ---------- */

.site-footer { padding: 64px 0 32px; background: var(--navy); border-top: 1px solid var(--navy-line); color: #9aa8c2; font-size: 0.9375rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 40px; }
.footer__brand p { margin: 16px 0 20px; max-width: 22em; }
.footer__title { margin: 0 0 14px; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a:not(.btn):not(.brand) { color: #9aa8c2; }
.site-footer a:not(.btn):not(.brand):hover { color: #fff; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--navy-line);
  font-size: 0.875rem;
}
.footer__bottom p { margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sub-page hero ---------- */

.page-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 0 72px;
  background: linear-gradient(180deg, #f5f8fd 0%, #fff 100%);
  border-bottom: 1px solid var(--line);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(15, 42, 122, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 42, 122, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 60% 100% at 80% 0%, #000 20%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 100% at 80% 0%, #000 20%, transparent 70%);
  pointer-events: none;
}
.page-hero .container { position: relative; }
.page-hero h1 { font-size: clamp(2rem, 1.3rem + 2.8vw, 3.25rem); max-width: 16em; margin-bottom: 18px; }
.page-hero .lead { max-width: 44em; margin-bottom: 0; }
.page-hero--center { text-align: center; }
.page-hero--center h1, .page-hero--center .lead { margin-inline: auto; }
.page-hero--center .hero__ctas { justify-content: center; }
@media (max-width: 768px) { .page-hero { padding: 56px 0 48px; } }

/* ---------- Product sub-navigation ---------- */

.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.subnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.subnav ul::-webkit-scrollbar { display: none; }
.subnav a {
  display: block;
  padding: 14px 12px;
  border-bottom: 2px solid transparent;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.subnav a:hover { color: var(--ink); }
.subnav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }

/* Phones and tablets: the frosted-glass blur behind the sticky header and this
   sub-nav has to be recalculated on every scroll frame, so use solid white
   instead. (The home header stays transparent over the hero until it scrolls.) */
@media (max-width: 820px), (pointer: coarse) {
  .site-header, .subnav { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header { background: rgba(255, 255, 255, 0.98); }
  .subnav { background: #fff; }
}

.product-page [id] { scroll-margin-top: calc(var(--header-h) + 56px); }

.feature { padding: 96px 0; }
.feature--soft { background: var(--bg-soft); border-block: 1px solid var(--line); }
@media (max-width: 768px) { .feature { padding: 64px 0; } }

/* ---------- Spec table ---------- */

.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.spec { width: 100%; min-width: 860px; border-collapse: collapse; font-size: 0.9375rem; }
.spec th, .spec td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec thead th { background: var(--bg-soft); font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); }
.spec thead th small { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 500; color: var(--muted); }
.spec tbody th { font-size: 0.875rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.spec td { font-variant-numeric: tabular-nums; }
.spec tbody tr:last-child > * { border-bottom: 0; }

/* Appliance lineup render (product models). The render sits on white, and
   multiply blends that white into the section's grey. Keep it off .reveal:
   the fade-in would briefly show the white box. */
.lineup { margin: 0 0 36px; }
.lineup img { display: block; width: 100%; max-width: 980px; height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.lineup figcaption { margin-top: 2px; text-align: center; font-size: 0.8125rem; color: var(--muted); }

/* Shown on small screens above tables that scroll sideways. */
.table-hint { display: none; margin: 0 0 10px; font-size: 0.8125rem; color: var(--muted); }

/* Phones: keep the spec names pinned while the models scroll sideways. */
@media (max-width: 640px) {
  .table-hint { display: block; }
  .spec { min-width: 700px; font-size: 0.875rem; }
  .spec th, .spec td { padding: 12px 14px; }
  .spec tbody th,
  .spec thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 132px;
    min-width: 132px;
    white-space: normal;
    background: #fff;
    box-shadow: 1px 0 0 var(--line);
  }
  .spec thead th:first-child { background: var(--bg-soft); }
}
.note { margin: 14px 0 0; font-size: 0.8125rem; color: var(--muted); }

/* ---------- Chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg-soft);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}

/* ---------- Pricing ---------- */

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 32px;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.billing-toggle button {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font: 600 0.875rem/1 var(--font-sans);
  color: var(--muted);
  cursor: pointer;
}
.billing-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.billing-toggle .save { margin-left: 6px; color: var(--ok); font-weight: 700; }
.billing-toggle button[aria-pressed="true"] .save { color: #7ee2b8; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
@media (max-width: 960px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; } }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.plan--featured { border: 2px solid var(--brand); padding: 31px; box-shadow: var(--shadow-lg); }
.plan__badge {
  position: absolute;
  top: -13px; left: 30px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
}
.plan__badge--soon { display: inline-flex; align-items: center; gap: 6px; }
.plan__badge--soon::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 1.8s ease-in-out infinite;
}
.plan__badge--dark { background: var(--ink); }
.plan__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font: 600 0.75rem/1.4 var(--font-mono);
  letter-spacing: 0.02em;
  vertical-align: 3px;
}
.plan__amount.plan__amount--soon { font-size: 1.625rem; line-height: 2.75rem; letter-spacing: -0.02em; }
.plans-note { margin-top: 24px; text-align: center; }

/* "Coming soon" pill in the pricing hero */
.soon-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 14px;
  border: 1px solid #cfe0ff;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-ink);
  font-size: 0.8125rem;
  font-weight: 600;
}
.soon-pill__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  animation: soon-ping 2s ease-out infinite;
}
@keyframes soon-ping {
  0% { box-shadow: 0 0 0 0 rgba(1, 104, 253, 0.45); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(1, 104, 253, 0); }
}
.plan h3 { margin: 0 0 6px; font-size: 1.25rem; }
.plan__desc { margin: 0; min-height: 3.2em; color: var(--muted); font-size: 0.9375rem; }
.plan__price { display: flex; align-items: baseline; gap: 6px; margin: 20px 0 4px; }
.plan__amount { font-family: var(--font-display); font-size: 2.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.plan__unit { color: var(--muted); font-size: 0.875rem; }
.plan__billing { margin: 0; min-height: 1.6em; color: var(--muted); font-size: 0.8125rem; }
.plan .btn { width: 100%; margin: 24px 0; }
.plan__includes { margin: 0 0 12px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.plan .checklist { margin: 0; gap: 10px; font-size: 0.9375rem; }
.plan .checklist svg { width: 18px; height: 18px; }

.compare { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.9375rem; }
.compare th, .compare td { padding: 14px 18px; border-bottom: 1px solid var(--line); text-align: center; }
.compare th:first-child, .compare td:first-child { text-align: left; }
.compare thead th { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); background: #fff; }
.compare thead th small { display: block; margin-top: 2px; font-family: var(--font-sans); font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.compare tbody th { font-weight: 500; color: var(--text); }
.compare .group th {
  padding-top: 12px; padding-bottom: 12px;
  background: var(--bg-soft);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.compare td { color: var(--ink); font-weight: 500; }
.compare .yes svg { width: 20px; height: 20px; margin: 0 auto; color: var(--brand); stroke-width: 2.25; }
.compare .no { color: #b6c2d2; }
.compare tbody tr:last-child > * { border-bottom: 0; }

/* Phones: fit all three plans on screen instead of scrolling sideways. */
@media (max-width: 640px) {
  .compare { min-width: 0; table-layout: fixed; font-size: 0.8125rem; }
  .compare th, .compare td { padding: 12px 2px; overflow-wrap: break-word; }
  .compare th:first-child, .compare td:first-child { width: 31%; padding-left: 14px; }
  .compare thead th { font-size: 0.75rem; line-height: 1.25; }
  .compare thead th small { font-size: 0.6875rem; }
  .compare .group th { padding-left: 14px; }
  .compare .yes svg { width: 18px; height: 18px; }
}

/* ---------- FAQ ---------- */

.faq { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 10px; height: 10px;
  margin: 6px 4px 0 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 11px; }
.faq summary:hover { color: var(--brand); }
.faq details p { margin: 0; padding: 0 40px 22px 0; }

/* ---------- About ---------- */

.mission {
  position: relative;
  padding: 40px;
  background: var(--navy);
  border-radius: var(--radius-lg);
  color: #b9c4da;
  overflow: hidden;
}
.mission::after {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  right: -120px; bottom: -160px;
  background: radial-gradient(closest-side, rgba(1, 104, 253, 0.4), transparent);
}
.mission .eyebrow { color: #8fb0ff; }
.mission blockquote {
  position: relative;
  z-index: 1;
  margin: 0 0 20px;
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: #fff;
}
.mission p { position: relative; z-index: 1; margin: 0; }
@media (max-width: 520px) { .mission { padding: 28px; } }

/* ---------- Contact ---------- */

.contact-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1fr); } }

.form-card { padding: 36px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.form-card h2 { font-size: 1.5rem; margin-bottom: 6px; }
.form-card > p { color: var(--muted); }
@media (max-width: 520px) { .form-card { padding: 24px 20px; } }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; margin-top: 24px; }
.field--full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }

.field label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
.field .optional { font-weight: 400; color: var(--muted); }
.input, .select, .textarea {
  width: 100%;
  padding: 11px 12px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input::placeholder, .textarea::placeholder { color: #94a3b8; }
.textarea { min-height: 132px; resize: vertical; }
.select {
  appearance: none;
  padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(1, 104, 253, 0.15); }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--bad); }
.field.has-error .input:focus,
.field.has-error .select:focus,
.field.has-error .textarea:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); }
.field__error { margin: 6px 0 0; font-size: 0.8125rem; color: var(--bad); }
.field__error:empty { display: none; }

.consent { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; font-size: 0.875rem; color: var(--text); }
.consent input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }
.field.has-error .consent { color: var(--bad-ink); }

.form-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.form-footer p { margin: 0; font-size: 0.8125rem; color: var(--muted); }
.form-status { margin: 12px 0 0; font-size: 0.875rem; color: var(--bad); }
.form-status:empty { display: none; }
@media (max-width: 520px) { .form-footer .btn { width: 100%; } }

.form-success { padding: 32px 8px; text-align: center; }
.form-success:focus { outline: none; }
.form-success__icon {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
}
.form-success__icon svg { width: 26px; height: 26px; stroke-width: 2.25; }
.form-success h2 { font-size: 1.5rem; }
.form-success p { max-width: 28em; margin-inline: auto; color: var(--muted); }

.contact-side { display: grid; gap: 16px; }
.contact-card { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.contact-card .card__icon { margin: 0; }
.contact-card h3 { margin: 0 0 2px; font-size: 1rem; }
.contact-card p { margin: 0 0 6px; font-size: 0.875rem; color: var(--muted); }
.contact-card a { font-weight: 600; font-size: 0.9375rem; word-break: break-word; }

.next-steps { padding: 24px; background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); }
.next-steps h3 { font-size: 1rem; margin-bottom: 14px; }
.next-steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: step; }
.next-steps li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; font-size: 0.9375rem; counter-increment: step; }
.next-steps li::before {
  content: counter(step);
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-strong);
  font: 600 0.75rem/1 var(--font-mono);
  color: var(--brand);
}
.next-steps strong { display: block; color: var(--ink); }

/* ---------- Legal pages (privacy, terms) ---------- */

.legal-date { margin: 18px 0 0; font-size: 0.875rem; color: var(--muted); }
.prose { max-width: 720px; }
.prose h2 { margin: 48px 0 12px; font-size: 1.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 28px 0 8px; font-size: 1.0625rem; }
.prose p, .prose ul { margin: 0 0 14px; }
.prose ul { padding-left: 1.25em; }
.prose li { margin-bottom: 6px; }
.prose li::marker { color: var(--brand); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose code {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-soft);
  font-family: var(--font-mono);
  font-size: 0.875em;
}

/* ---------- 404 ---------- */

.notfound { padding: 120px 0; text-align: center; }
.notfound__code { font-family: var(--font-mono); font-weight: 600; color: var(--brand); margin-bottom: 12px; }
.notfound .lead { margin-inline: auto; }
.notfound .hero__ctas { justify-content: center; }

/* ---------- Reveal on scroll ---------- */

.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Animations ---------- */

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes flow { to { background-position: 0 8px; } }
@keyframes dash { to { stroke-dashoffset: -12; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .aurora__glow, .aurora__light { animation: none !important; }
  .aurora__comets { display: none; }
}