:root {
  color-scheme: dark;
  --ink: #f4f7ff;
  --ink-soft: #aeb8ca;
  --ink-muted: #77849b;
  --night: #080d1a;
  --night-deep: #050812;
  --night-card: #0e1627;
  --night-card-strong: #121d32;
  --line: rgba(173, 192, 224, 0.15);
  --line-strong: rgba(173, 192, 224, 0.28);
  --paper: #f4f7fb;
  --paper-warm: #edf2f8;
  --paper-ink: #15213a;
  --paper-muted: #59677f;
  --cyan: #52d7ff;
  --blue: #4c7dff;
  --violet: #aa8cff;
  --amber: #f7c66b;
  --green: #6de0b1;
  --shadow: 0 28px 80px rgba(1, 8, 25, 0.35);
  --radius-lg: 28px;
  --radius-md: 18px;
  --container: 1180px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--night);
  line-height: 1.6;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.22;
  background-image: linear-gradient(rgba(104, 137, 198, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 137, 198, 0.06) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, black, transparent 72%);
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, a { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 4px;
}

.container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--night);
  background: var(--cyan);
  border-radius: 8px;
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus { transform: translateY(0); }

.site-header {
  position: sticky;
  z-index: 10;
  top: 0;
  border-bottom: 1px solid rgba(173, 192, 224, 0.11);
  background: rgba(8, 13, 26, 0.78);
  backdrop-filter: blur(18px);
}

.nav-shell {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #08234c;
  font-size: 15px;
  font-weight: 900;
  background: linear-gradient(135deg, #f7fafc, #89e5ff 64%, #4c7dff);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  box-shadow: 0 0 25px rgba(82, 215, 255, 0.28);
}

.brand-copy { display: grid; line-height: 1.08; }
.brand-copy strong { font-size: 15px; letter-spacing: -0.02em; }
.brand-copy span { color: var(--ink-muted); font-size: 10px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }

.site-nav { display: flex; align-items: center; gap: 26px; color: var(--ink-soft); font-size: 13px; font-weight: 650; }
.site-nav > a:not(.button) { transition: color 160ms ease; }
.site-nav > a:not(.button):hover { color: var(--ink); }

.nav-toggle { display: none; width: 42px; height: 42px; padding: 9px; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: 10px; }
.nav-toggle span { display: block; width: 21px; height: 2px; margin: 4px auto; background: currentColor; border-radius: 2px; }

.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.button:hover { transform: translateY(-2px); }
.button-primary { color: #06142b; background: linear-gradient(135deg, #a9efff, #52d7ff 55%, #75a3ff); box-shadow: 0 12px 30px rgba(82, 215, 255, 0.2); }
.button-primary:hover { box-shadow: 0 16px 36px rgba(82, 215, 255, 0.32); }
.button-ghost { color: var(--ink); background: rgba(255, 255, 255, 0.03); border-color: var(--line-strong); }
.button-ghost:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.45); }
.button-dark { color: #fff; background: #17233b; border-color: #273a5e; }
.button-dark:hover { background: #223558; }
.button-ghost-dark { color: var(--paper-ink); background: transparent; border-color: rgba(21, 33, 58, 0.22); }
.button-ghost-dark:hover { background: rgba(21, 33, 58, 0.06); }
.button-small { min-height: 38px; padding: 0 14px; font-size: 12px; }
.button-nav { color: #ffffff; background: linear-gradient(135deg, #315bd6, #24429d); border-color: rgba(255, 255, 255, 0.42); box-shadow: 0 8px 20px rgba(16, 37, 102, 0.35); }
.button-nav:hover { color: #ffffff; background: linear-gradient(135deg, #456fe8, #3152b9); border-color: rgba(255, 255, 255, 0.75); box-shadow: 0 12px 26px rgba(16, 37, 102, 0.45); }

.section { position: relative; padding: 120px 0; }
.section-grid { position: relative; overflow: hidden; }
.section-grid::after { position: absolute; z-index: -1; top: -240px; right: -180px; width: 680px; height: 680px; content: ""; background: radial-gradient(circle, rgba(76, 125, 255, 0.18), transparent 68%); filter: blur(12px); }
.section-light-grid { color: var(--paper-ink); background-color: var(--paper); background-image: linear-gradient(rgba(39, 67, 112, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(39, 67, 112, 0.05) 1px, transparent 1px); background-size: 56px 56px; }
.section-dark { background: var(--night-deep); }

.hero { padding: 110px 0 92px; background: radial-gradient(circle at 75% 32%, rgba(57, 91, 188, 0.18), transparent 34%), linear-gradient(180deg, #0a1120 0%, var(--night) 100%); }
.hero-grid { display: grid; min-height: 590px; grid-template-columns: minmax(0, 0.91fr) minmax(420px, 1.09fr); align-items: center; gap: 65px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; color: var(--cyan); font-size: 11px; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.eyebrow-dot { width: 7px; height: 7px; background: currentColor; border-radius: 50%; box-shadow: 0 0 0 5px rgba(82, 215, 255, 0.1), 0 0 17px currentColor; }
.hero h1 { max-width: 680px; margin: 0; color: var(--ink); font-size: clamp(46px, 6vw, 78px); font-weight: 760; letter-spacing: -0.075em; line-height: 0.99; }
.hero h1 span { color: transparent; background: linear-gradient(100deg, #eef7ff 5%, var(--cyan) 47%, #8ea6ff 90%); -webkit-background-clip: text; background-clip: text; }
.hero-lede { max-width: 590px; margin: 27px 0 0; color: var(--ink-soft); font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 33px; }
.hero-note { display: flex; align-items: center; gap: 9px; margin: 22px 0 0; color: var(--ink-muted); font-size: 12px; }
.check-mark { display: grid; width: 19px; height: 19px; place-items: center; color: var(--night); font-size: 12px; font-weight: 900; background: var(--green); border-radius: 50%; }

.hero-stage { position: relative; min-height: 510px; display: grid; align-items: center; }
.hero-orbit { position: absolute; border: 1px solid rgba(82, 215, 255, 0.23); border-radius: 50%; transform: rotate(-22deg); }
.hero-orbit-one { top: 8%; left: 4%; width: 92%; height: 74%; }
.hero-orbit-two { top: 18%; left: 17%; width: 73%; height: 59%; border-color: rgba(170, 140, 255, 0.22); transform: rotate(31deg); }
.app-window { position: relative; z-index: 1; width: 100%; overflow: hidden; background: #0d1423; border: 1px solid rgba(165, 190, 239, 0.29); border-radius: 16px; box-shadow: var(--shadow), 0 0 0 8px rgba(30, 53, 91, 0.16); transform: perspective(1600px) rotateY(-6deg) rotateX(2deg); }
.window-bar { display: flex; height: 35px; align-items: center; gap: 12px; padding: 0 13px; color: #8b9cb8; font-size: 9px; background: #121b2c; border-bottom: 1px solid rgba(165, 190, 239, 0.12); }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 6px; height: 6px; background: #36445d; border-radius: 50%; }
.window-dots i:first-child { background: #ec7777; }
.window-dots i:nth-child(2) { background: #e2be63; }
.window-dots i:last-child { background: #6cd59c; }
.window-title { flex: 1; text-align: center; letter-spacing: 0.05em; }
.window-status { display: flex; align-items: center; gap: 5px; color: #92dbb4; }
.window-status b { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.window-content { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background: #111; }
.window-content::after { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(120deg, rgba(82, 215, 255, 0.08), transparent 32%, rgba(4, 11, 23, 0.08)); }
.window-content img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.floating-badge { position: absolute; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 11px; color: var(--ink); background: rgba(14, 23, 40, 0.92); border: 1px solid rgba(170, 196, 240, 0.25); border-radius: 12px; box-shadow: 0 20px 40px rgba(1, 5, 18, 0.45); backdrop-filter: blur(12px); }
.floating-badge strong, .floating-badge small { display: block; }
.floating-badge strong { font-size: 11px; }
.floating-badge small { margin-top: 2px; color: #90a0ba; font-size: 9px; }
.floating-badge-top { top: 7%; right: -4%; }
.floating-badge-bottom { bottom: 7%; left: -5%; }
.badge-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; font-size: 13px; font-weight: 900; }
.badge-icon-blue { color: #8be8ff; background: rgba(82, 215, 255, 0.14); }
.badge-icon-green { color: #88eabc; background: rgba(109, 224, 177, 0.14); }

.signal-bar { color: var(--ink-soft); background: #0b1322; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.signal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 26px 0; }
.signal-item { display: grid; gap: 3px; }
.signal-item strong { color: var(--ink); font-size: 12px; letter-spacing: -0.01em; }
.signal-item span { color: var(--ink-muted); font-size: 11px; line-height: 1.45; }

.section-heading { max-width: 730px; margin-bottom: 47px; }
.section-heading-wide { max-width: 760px; }
.section-heading h2, .split-copy h2, .install-copy h2 { margin: 0; color: inherit; font-size: clamp(34px, 4.5vw, 54px); font-weight: 740; letter-spacing: -0.065em; line-height: 1.06; }
.section-heading p:not(.eyebrow), .split-copy > p:not(.eyebrow) { max-width: 650px; margin: 22px 0 0; color: var(--paper-muted); font-size: 16px; line-height: 1.75; }
.section-dark .section-heading p:not(.eyebrow), .section-dark .split-copy > p:not(.eyebrow) { color: var(--ink-soft); }

.capability-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.capability-card { display: grid; min-height: 238px; align-content: start; gap: 34px; padding: 25px 23px; background: rgba(255, 255, 255, 0.66); border: 1px solid rgba(39, 67, 112, 0.12); border-radius: var(--radius-md); box-shadow: 0 12px 35px rgba(35, 59, 98, 0.06); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.capability-card:hover { border-color: rgba(76, 125, 255, 0.3); box-shadow: 0 20px 45px rgba(35, 59, 98, 0.12); transform: translateY(-5px); }
.capability-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; font-size: 11px; font-weight: 900; letter-spacing: 0.04em; }
.capability-icon-cyan { color: #008ba9; background: rgba(82, 215, 255, 0.2); }
.capability-icon-violet { color: #6849c5; background: rgba(170, 140, 255, 0.2); }
.capability-icon-amber { color: #9d6a0a; background: rgba(247, 198, 107, 0.27); }
.capability-icon-green { color: #08754b; background: rgba(109, 224, 177, 0.23); }
.capability-card h3 { margin: 0; color: var(--paper-ink); font-size: 17px; letter-spacing: -0.03em; }
.capability-card p { margin: 9px 0 0; color: var(--paper-muted); font-size: 13px; line-height: 1.65; }

.database-section { padding-top: 105px; padding-bottom: 105px; }
.database-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.database-card { display: flex; min-height: 208px; flex-direction: column; padding: 23px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(39, 67, 112, 0.12); border-radius: var(--radius-md); box-shadow: 0 12px 35px rgba(35, 59, 98, 0.06); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.database-card:hover { border-color: rgba(76, 125, 255, 0.3); box-shadow: 0 20px 45px rgba(35, 59, 98, 0.12); transform: translateY(-5px); }
.database-card-featured { grid-column: span 2; background: linear-gradient(135deg, rgba(216, 244, 255, 0.95), rgba(235, 233, 255, 0.92)); border-color: rgba(76, 125, 255, 0.2); }
.database-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.database-logo { display: inline-grid; min-width: 48px; height: 40px; padding: 0 8px; place-items: center; color: #164b73; font-size: 11px; font-weight: 950; letter-spacing: 0.04em; background: rgba(82, 215, 255, 0.22); border: 1px solid rgba(82, 160, 220, 0.32); border-radius: 12px; box-shadow: inset 0 0 0 3px rgba(255,255,255,.28), 0 6px 14px rgba(39,67,112,.09); }
.database-logo::before { content: ""; width: 17px; height: 7px; margin-bottom: -8px; border: 2px solid currentColor; border-radius: 50%; opacity: .75; }
.database-logo-db2 { color: #1559a6; background: linear-gradient(145deg, #d7ebff, #a9c9ff); }
.database-logo-nz { color: #057b9b; background: linear-gradient(145deg, #d4f8ff, #8de5ef); }
.database-logo-oracle { color: #a83232; background: linear-gradient(145deg, #ffe4e5, #ffb9bd); }
.database-logo-postgres { color: #2f659c; background: linear-gradient(145deg, #e2efff, #b8d3f7); }
.database-logo-mssql { color: #5e3ca1; background: linear-gradient(145deg, #eee7ff, #cdbbfa); }
.database-logo-mysql { color: #936114; background: linear-gradient(145deg, #fff1cb, #f6cf7e); }
.database-logo-access { color: #9c3e1f; background: linear-gradient(145deg, #ffe5d9, #f6b995); }
.database-logo-files { color: #177052; background: linear-gradient(145deg, #dcf9e9, #a8e3c6); font-size: 9px; }
.database-tag { color: #71809a; font-size: 9px; font-weight: 850; letter-spacing: 0.1em; text-align: right; text-transform: uppercase; }
.database-card h3 { margin: 24px 0 0; color: var(--paper-ink); font-size: 19px; letter-spacing: -0.04em; }
.database-card p { margin: 8px 0 0; color: var(--paper-muted); font-size: 12px; line-height: 1.65; }
.database-card .text-link { margin-top: auto; padding-top: 18px; color: #17679a; }
.database-footnote { margin: 23px 0 0; color: var(--paper-muted); font-size: 11px; }

.workflow-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.workflow-card { display: flex; min-height: 530px; flex-direction: column; overflow: hidden; background: linear-gradient(145deg, rgba(22, 35, 59, 0.85), rgba(12, 21, 37, 0.88)); border: 1px solid rgba(149, 176, 224, 0.17); border-radius: var(--radius-lg); }
.workflow-card-large, .workflow-card-wide { grid-column: 1 / -1; display: grid; min-height: 440px; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); }
.workflow-card-wide { grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr); }
.workflow-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 34px; }
.workflow-number { color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: 0.15em; }
.workflow-copy h3 { max-width: 430px; margin: 19px 0 0; color: var(--ink); font-size: clamp(24px, 3vw, 35px); letter-spacing: -0.055em; line-height: 1.08; }
.workflow-card:not(.workflow-card-large):not(.workflow-card-wide) .workflow-copy h3 { font-size: 27px; }
.workflow-copy p { max-width: 485px; margin: 16px 0 0; color: var(--ink-soft); font-size: 14px; line-height: 1.7; }
.text-link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 25px; color: var(--cyan); font-size: 12px; font-weight: 800; }
.text-link span { transition: transform 160ms ease; }
.text-link:hover span { transform: translateX(4px); }
.media-frame { position: relative; display: flex; min-height: 235px; flex: 1; align-items: center; justify-content: center; overflow: hidden; margin: 0; padding: 17px; background: #090f1c; border-top: 1px solid rgba(149, 176, 224, 0.12); }
.workflow-card-large .media-frame, .workflow-card-wide .media-frame { min-height: 100%; border-top: 0; border-left: 1px solid rgba(149, 176, 224, 0.12); }
.media-frame::before { position: absolute; z-index: 1; inset: 17px; content: ""; pointer-events: none; border: 1px solid rgba(164, 195, 246, 0.19); border-radius: 10px; }
.media-frame img { width: 100%; height: 100%; max-height: 340px; object-fit: cover; object-position: center; border: 1px solid rgba(159, 187, 232, 0.18); border-radius: 10px; box-shadow: 0 19px 45px rgba(0, 0, 0, 0.32); }
.workflow-card-large .media-frame img, .workflow-card-wide .media-frame img { max-height: 390px; }
.media-frame figcaption { position: absolute; right: 28px; bottom: 27px; left: 28px; z-index: 2; padding: 8px 11px; color: #d6e4fa; font-size: 10px; background: rgba(6, 12, 24, 0.78); border: 1px solid rgba(159, 187, 232, 0.18); border-radius: 7px; backdrop-filter: blur(9px); }

.results-section { overflow: hidden; }
.split-section { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr); align-items: center; gap: 80px; }
.check-list { display: grid; gap: 13px; padding: 0; margin: 28px 0 32px; list-style: none; color: var(--paper-muted); font-size: 13px; }
.check-list li { position: relative; padding-left: 26px; }
.check-list li::before { position: absolute; top: 4px; left: 0; display: grid; width: 17px; height: 17px; place-items: center; content: "✓"; color: #0c704a; font-size: 10px; font-weight: 900; background: rgba(109, 224, 177, 0.3); border-radius: 50%; }
.results-stack { position: relative; min-height: 450px; }
.results-window { position: absolute; overflow: hidden; background: #101a2c; border: 1px solid rgba(31, 59, 104, 0.23); border-radius: 15px; box-shadow: 0 28px 65px rgba(38, 62, 105, 0.18); }
.results-window img { width: 100%; height: 100%; object-fit: cover; }
.results-window-back { top: 0; right: 0; width: 84%; transform: rotate(4deg); }
.results-window-front { bottom: 0; left: 0; width: 87%; transform: rotate(-3deg); }

.ai-section { overflow: hidden; }
.ai-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(350px, 0.92fr); align-items: center; gap: 80px; }
.ai-visual { position: relative; }
.ai-glow { position: absolute; top: 15%; left: 11%; width: 70%; height: 65%; background: rgba(170, 140, 255, 0.28); border-radius: 50%; filter: blur(90px); }
.media-frame-ai { min-height: 370px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-md); transform: rotate(-2deg); }
.media-frame-ai::before { inset: 18px; }
.media-frame-ai img { max-height: 430px; }
.privacy-note { display: flex; gap: 14px; margin-top: 28px; padding: 17px; color: #cad4e8; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); border-radius: 13px; }
.privacy-icon { display: grid; width: 26px; height: 26px; flex-shrink: 0; place-items: center; color: var(--violet); background: rgba(170, 140, 255, 0.13); border-radius: 7px; }
.privacy-note strong, .privacy-note span { display: block; }
.privacy-note strong { color: var(--ink); font-size: 12px; }
.privacy-note span { margin-top: 3px; color: var(--ink-soft); font-size: 11px; line-height: 1.55; }

.install-section { padding-top: 92px; padding-bottom: 92px; }
.install-card { display: grid; min-width: 0; grid-template-columns: minmax(0, 0.86fr) minmax(400px, 1.14fr); align-items: center; gap: 50px; padding: 43px; background: linear-gradient(135deg, #dceeff, #f5f7fc 45%, #e6e8ff); border: 1px solid rgba(60, 94, 153, 0.15); border-radius: var(--radius-lg); box-shadow: 0 25px 70px rgba(31, 62, 113, 0.13); }
.install-copy, .install-actions, .command-box { min-width: 0; }
.install-copy h2 { color: var(--paper-ink); }
.install-copy > p:not(.eyebrow) { margin: 18px 0 0; color: var(--paper-muted); font-size: 15px; line-height: 1.7; }
.install-actions { display: grid; gap: 13px; }
.command-box { display: flex; min-height: 53px; align-items: center; gap: 12px; padding: 7px 7px 7px 16px; background: #0c1425; border: 1px solid rgba(25, 55, 104, 0.35); border-radius: 11px; box-shadow: 0 14px 26px rgba(27, 56, 105, 0.12); }
.command-box code { min-width: 0; overflow: auto; flex: 1; color: #a9dff8; font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; font-size: 11px; white-space: nowrap; }
.copy-button { min-height: 36px; padding: 0 12px; color: #b9c9e5; font: inherit; font-size: 11px; font-weight: 800; background: #1b2b49; border: 1px solid #2d4774; border-radius: 8px; cursor: pointer; }
.copy-button:hover { color: #fff; background: #274269; }
.copy-button.is-copied { color: #06142b; background: var(--green); border-color: var(--green); }
.install-buttons { display: flex; flex-wrap: wrap; gap: 10px; }

.site-footer { padding: 42px 0 25px; color: var(--ink-soft); background: #060b16; border-top: 1px solid var(--line); }
.footer-grid { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }
.brand-footer .brand-mark { width: 31px; height: 31px; }
.footer-tagline { margin: 16px 0 0; color: var(--ink-muted); font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; color: #9aa9c2; font-size: 12px; font-weight: 700; }
.footer-links a:hover { color: var(--cyan); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 35px; padding-top: 19px; color: #687690; font-size: 10px; border-top: 1px solid var(--line); }

.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 650ms ease, transform 650ms ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  .hero-grid { gap: 36px; }
  .signal-grid { gap: 17px; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); }
  .split-section, .ai-grid { gap: 50px; }
  .floating-badge-top { right: 0; }
  .floating-badge-bottom { left: 0; }
}

@media (max-width: 820px) {
  .container { width: min(var(--container), calc(100% - 36px)); }
  .nav-toggle { display: block; }
  .site-nav { position: absolute; top: calc(100% + 1px); right: 18px; left: 18px; display: none; align-items: stretch; flex-direction: column; gap: 0; padding: 9px; background: rgba(11, 19, 34, 0.98); border: 1px solid var(--line-strong); border-radius: 13px; box-shadow: var(--shadow); }
  .site-nav.is-open { display: flex; }
  .site-nav > a:not(.button) { padding: 11px 12px; border-radius: 7px; }
  .site-nav > a:not(.button):hover { background: rgba(255, 255, 255, 0.06); }
  .button-nav { margin-top: 6px; }
  .hero { padding-top: 75px; }
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; }
  .hero-copy { max-width: 680px; }
  .hero-stage { min-height: 380px; margin-top: 18px; }
  .signal-grid { grid-template-columns: repeat(2, 1fr); }
  .database-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .database-card-featured { grid-column: span 2; }
  .workflow-card-large, .workflow-card-wide { display: flex; min-height: 0; }
  .workflow-card-large .media-frame, .workflow-card-wide .media-frame { min-height: 300px; border-top: 1px solid rgba(149, 176, 224, 0.12); border-left: 0; }
  .split-section, .ai-grid, .install-card { grid-template-columns: 1fr; }
  .results-stack { min-height: 430px; }
  .install-card { gap: 30px; }
}

@media (max-width: 590px) {
  .container { width: min(var(--container), calc(100% - 28px)); }
  .nav-shell { min-height: 66px; }
  .hero { padding-top: 60px; padding-bottom: 62px; }
  .hero h1 { font-size: clamp(42px, 14vw, 62px); }
  .hero-lede { font-size: 15px; }
  .hero-actions, .install-buttons { align-items: stretch; flex-direction: column; }
  .hero-actions .button, .install-buttons .button { width: 100%; }
  .hero-stage { min-height: 235px; }
  .floating-badge { padding: 8px; }
  .floating-badge strong { font-size: 9px; }
  .floating-badge small { font-size: 8px; }
  .floating-badge-top { top: 2%; right: -3px; }
  .floating-badge-bottom { bottom: 3%; left: -3px; }
  .section { padding: 78px 0; }
  .section-heading h2, .split-copy h2, .install-copy h2 { font-size: 37px; }
  .capability-grid, .workflow-grid { grid-template-columns: 1fr; }
  .database-grid { grid-template-columns: 1fr; }
  .database-card-featured { grid-column: auto; }
  .workflow-card-large, .workflow-card-wide { grid-column: auto; }
  .workflow-copy { padding: 25px; }
  .workflow-copy h3, .workflow-card:not(.workflow-card-large):not(.workflow-card-wide) .workflow-copy h3 { font-size: 25px; }
  .media-frame { min-height: 210px; padding: 11px; }
  .media-frame::before { inset: 11px; }
  .media-frame figcaption { right: 20px; bottom: 20px; left: 20px; }
  .results-stack { min-height: 300px; }
  .install-card { padding: 27px 21px; }
  .command-box { align-items: stretch; flex-direction: column; padding: 12px; }
  .command-box code { width: 100%; padding-bottom: 3px; }
  .copy-button { width: 100%; }
  .footer-grid, .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-links { justify-content: flex-start; gap: 13px 18px; }
}

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