/* ===========================================================
   Omnigent — Dark Tech design system
   =========================================================== */

:root {
  /* colors */
  --bg: #000000;
  --card-bg: #0a0a0a;
  --ring: rgba(255, 255, 255, 0.145);
  --text-primary: #ffffff;
  --text-secondary: #e7e7e7;
  --text-muted: #999999;
  --btn-bg: #ffffff;
  --btn-text: #121212;
  --chip-bg: #1f1f1f;
  --accent-blue: #52a8ff;
  --success-green: #62c073;
  --neutral-white: #ededed;

  /* type */
  --font-display: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', ui-monospace, Menlo, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 16px;
  top: 16px;
  background: #fff;
  color: #121212;
  padding: 8px 12px;
  z-index: 999;
}

/* ---------- Buttons ---------- */
.btn-square {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--btn-bg);
  color: var(--btn-text);
  border-radius: 0px;
  border: none;
  font-family: var(--font-display);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.btn-square:hover { opacity: 0.85; }
.btn-square:active { transform: translateY(1px); }

.btn-hero {
  padding: 16px 22px;
  font-size: 20px;
}
.hero .btn-hero {
  background: #121212;
  color: #ffffff;
  border-radius: 999px;
}

.btn-mobile-cta {
  padding: 14px 20px;
  font-size: 18px;
  justify-content: center;
}

/* ---------- Chips (v-chip) ---------- */
.v-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--chip-bg);
  border-radius: 100px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--text-muted);
}
.dot-pass { background: var(--success-green); }
.dot-warn { background: var(--text-muted); }
.dot-fail { background: var(--neutral-white); }
.dot-blue { background: var(--accent-blue); }

.chip-pass, .chip-fail, .chip-warn { color: var(--text-muted); }

/* ---------- Header: floating pill nav, scroll-aware ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 16px 0;
  transition: padding 0.3s ease;
}
.site-header.scrolled { padding: 10px 0; }

.nav-pill {
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 100%;
  padding: 10px clamp(40px, 12vw, 220px);
  border-radius: 22px;
  background: transparent;
  border: 1px solid transparent;
  transition:
    max-width 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    padding 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.48s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.48s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header.scrolled .nav-pill {
  max-width: min(1180px, calc(100vw - 32px));
  padding: 8px 12px;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(32px) saturate(180%);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-wordmark {
  height: 22px;
  width: auto;
  display: block;
  transition: filter 0.3s ease;
}
.site-header.scrolled .logo-wordmark { filter: brightness(0) invert(1); }

.nav-center {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav-center a {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.14px;
  white-space: nowrap;
  padding: 6px 14px;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.65);
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-center a:hover { color: rgb(23, 23, 23); background: rgba(0, 0, 0, 0.05); }
.site-header.scrolled .nav-center a { color: rgba(255, 255, 255, 0.7); }
.site-header.scrolled .nav-center a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.btn-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 22px;
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.14px;
  text-decoration: none;
  white-space: nowrap;
  background: rgb(23, 23, 23);
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.scrolled .btn-nav-cta {
  background: #fff;
  color: rgb(10, 10, 11);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.menu-toggle {
  display: none;
  width: 38px;
  height: 38px;
  background: transparent;
  border: none;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgb(23, 23, 23);
  transition: color 0.15s ease;
}
.site-header.scrolled .menu-toggle { color: rgba(255, 255, 255, 0.85); }
.menu-toggle-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.menu-toggle-lines span {
  width: 18px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  display: block;
  transition: transform 0.25s ease;
}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle-lines span:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* ---------- Mobile full-screen menu ---------- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: #ffffff;
  z-index: 101;
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.35s ease, opacity 0.3s ease, visibility 0.35s;
}
.mobile-menu.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.mobile-menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  flex-shrink: 0;
}
.mobile-menu-close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.6);
}
.mobile-menu-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
}
.mobile-menu-body nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mobile-menu-body nav a {
  display: block;
  text-align: center;
  padding: 10px 32px;
  border-radius: 10px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.2px;
  color: rgba(0, 0, 0, 0.7);
}
.mobile-menu-divider {
  width: calc(100% - 48px);
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 16px 0;
}
.btn-mobile-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  background: #121212;
  color: #fff;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  padding: 0;
  max-width: none;
  margin: 0;
}
.hero-frame {
  position: relative;
  width: 100%;
  height: 100%;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 38%, #eef1fb 62%, #dde6fb 100%);
  background-size: cover;
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,0,0,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 62%, rgba(0,0,0,0.9), transparent 84%);
}

/* Sparkle icon + glow, colors sourced from the brand mark's gradient.
   Top-anchored just below the hero CTA so enlarging only grows downward.
   Explicit ellipse radii (rather than the farthest-corner default) keep
   color visible all the way to the left/right edges of the viewport. */
.hero-icon-glow {
  position: absolute;
  top: 480px;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 1200px;
  background: radial-gradient(
    ellipse 100% 70% at 50% 40%,
    rgba(139, 114, 247, 0.40) 0%,
    rgba(255, 135, 137, 0.30) 40%,
    rgba(255, 180, 43, 0.22) 65%,
    transparent 100%
  );
  filter: blur(110px);
  pointer-events: none;
}
.hero-icon {
  position: absolute;
  top: 480px;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translateX(-50%) rotate(-22deg);
  filter: drop-shadow(0 0 100px rgba(255, 135, 137, 0.32));
  pointer-events: none;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  /* Fades the icon/glow into solid white before the hero's hard edge,
     so the handoff into the next (white) section reads as a dissolve
     rather than a clipped shape. */
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 68%, rgba(255,255,255,1) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  gap: 24px;
  padding: 168px 24px 0;
}
.hero-content .headline-fluid {
  max-width: 780px;
  margin: 0 auto;
  color: #121212;
}
.hero-subtext {
  font-size: 16px;
  color: #55565c;
  max-width: 520px;
  margin: 0 auto;
}
.btn-hero { width: max-content; }

/* ---------- Fluid headline ---------- */
.headline-fluid {
  font-family: var(--font-display);
  font-weight: 500;
  color: #fff;
  font-size: clamp(32px, 3.6vw + 1.2rem, 60px);
  letter-spacing: clamp(-3.36px, -1px - 0.9vw, -1px);
  line-height: 1.05;
  max-width: 920px;
}
.headline-sm {
  font-size: clamp(28px, 2.4vw + 1rem, 44px);
  max-width: 620px;
}

/* ---------- Section shell ---------- */
section {
  padding: 96px 56px;
  max-width: 1360px;
  margin: 0 auto;
}
.section-heading { margin-bottom: 40px; }
.section-sub {
  font-size: 16px;
  color: var(--text-muted);
  margin-top: 12px;
  max-width: 560px;
}

/* ---------- Capabilities (light theme, shares the hero's palette) ---------- */
.capabilities {
  background: #ffffff;
  padding: 0;
  max-width: none;
  margin: 0;
}
.capabilities-inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 120px 56px 160px;
}
.capabilities .section-heading { margin-bottom: 88px; }
.capabilities .section-sub { color: #55565c; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.capabilities .headline-fluid { color: #121212; }

.capability-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 64px;
  row-gap: 64px;
}
.capability .icon-tile {
  --tile-bg: #ece7f8;
  --tile-icon: #121212;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: var(--tile-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.capability .icon-tile svg { width: 34px; height: 34px; }
.capability h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: #121212;
  margin: 0 0 8px;
}
.capability p {
  font-size: 14.5px;
  line-height: 1.55;
  color: #6b6b70;
  max-width: 300px;
  margin: 0;
}

/* ---------- Benefits (light theme, three alternating panels) ---------- */
.benefits {
  background: #ffffff;
  padding: 0;
  max-width: none;
  margin: 0;
}
.benefits-inner {
  max-width: 1040px;
  margin: 0 auto;
  padding: 96px 32px 32px;
}

/* Stacking cards: JS (js-stack-cards in main.js) drives the translateY +
   scale transforms and sets the wrapper's padding-bottom at runtime, so
   the last card gets exactly enough room to release. */
.benefits-stack {
  --stack-cards-gap: 32px;
}

/* Bounds how long the header stays stuck: its own containing block is
   taller than its content, so it keeps releasing capacity for as long as
   the stacked cards take to finish cascading, and both scroll away
   together instead of the cards sliding out from under a still-pinned
   header. The negative margin cancels the extra height visually, so
   the stack still starts right after the header like before. */
.benefits-header-wrap {
  position: relative;
  height: 2005px;
  margin-bottom: -1820px;
}
.benefits-header {
  position: sticky;
  top: 128px;
  z-index: 10;
  text-align: center;
  margin-bottom: 0;
  padding-bottom: 40px;
}
.benefits .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #123a55;
  background: #dceefc;
  border-radius: 100px;
  padding: 7px 16px 7px 12px;
  margin-bottom: 22px;
}
.benefits-header .headline-fluid {
  color: #121212;
  max-width: 900px;
  margin: 0 auto;
}

.benefits .panel {
  position: sticky;
  top: 300px;
  border: 1.5px solid rgba(18, 18, 18, 0.14);
  border-radius: 8px;
  background: #ffffff;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  box-shadow: 0 24px 48px rgba(18, 18, 18, 0.1);
  overflow: hidden;
  transform-origin: center top;
}
.benefits .panel.reverse .text-col { order: 2; }
.benefits .panel.reverse .media-col { order: 1; }

/* Omnigent brand gradient wash + sparkle accent, same palette as the hero/pricing card */
.panel-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 15% 15%, rgba(139, 114, 247, 0.20), transparent 60%),
    radial-gradient(ellipse 90% 70% at 85% 85%, rgba(255, 180, 43, 0.20), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255, 135, 137, 0.15), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.panel-icon {
  position: absolute;
  top: -100px;
  left: -50px;
  width: 190px;
  height: 190px;
  z-index: 0;
  transform: rotate(-18deg);
  opacity: 0.85;
  pointer-events: none;
}
.benefits .panel.reverse .panel-icon { left: auto; right: -50px; }
.benefits .text-col { position: relative; z-index: 1; }

.text-col h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.3;
  color: #121212;
  margin: 0 0 16px;
}
.text-col p {
  font-size: 14.5px;
  line-height: 1.6;
  color: #55565c;
  margin: 0;
  max-width: 380px;
}

.media-col {
  position: relative;
  z-index: 1;
  height: 380px;
  background-image:
    linear-gradient(rgba(18,18,18,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,18,18,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

/* Product screenshots dropped into every panel's media-col */
.media-photo {
  width: 100%;
  max-width: 480px;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 24px 48px rgba(18, 18, 18, 0.18);
  display: block;
}

/* ---------- Integrations grid (light theme) ---------- */
.integrations {
  background: #ffffff;
  padding: 0;
  max-width: none;
  margin: 0;
}
.integrations-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 120px 56px 140px;
}

.integrations .header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 44px;
  gap: 24px;
  flex-wrap: wrap;
}
.integrations .headline-fluid { color: #121212; }
.integrations .subtitle {
  font-size: 16px;
  line-height: 1.55;
  color: #55565c;
  max-width: 480px;
  margin: 12px 0 0;
}
.integrations .discover-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: #121212;
  text-decoration: none;
  white-space: nowrap;
}
.integrations .discover-link:hover { text-decoration: underline; }

.integrations .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid rgba(18, 18, 18, 0.12);
}
.integrations .cell {
  padding: 36px 32px 36px 0;
  border-bottom: 1px solid rgba(18, 18, 18, 0.12);
  padding-left: 32px;
}
.integrations .grid > .cell:not(:nth-child(3n)) {
  border-right: 1px solid rgba(18, 18, 18, 0.12);
  padding-right: 32px;
}
.integrations .grid > .cell:nth-child(3n+1) { padding-left: 0; }

.integrations .icon-tile {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
}
.integrations .icon-tile.bordered { border: 1px solid rgba(18, 18, 18, 0.12); }
.integrations .icon-tile svg,
.integrations .icon-tile img { width: 26px; height: 26px; object-fit: contain; }

.integrations .cell h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: #121212;
  margin: 0 0 8px;
}
.integrations .cell p {
  font-size: 14px;
  line-height: 1.5;
  color: #55565c;
  margin: 0;
  max-width: 260px;
}

/* ---------- What's Included (light theme, stacked action-plan cards) ---------- */
.included {
  background: #ffffff;
  padding: 0;
  max-width: none;
  margin: 0;
}
.included-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 120px 56px 140px;
}

.included .intro {
  display: grid;
  grid-template-columns: 340px 88px 1fr;
  gap: 28px;
  align-items: center;
  margin-bottom: 72px;
}
.included .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #123a55;
  background: #dceefc;
  border-radius: 100px;
  padding: 6px 14px 6px 10px;
  margin-bottom: 18px;
}
.included .check-dot {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #121212;
  color: #fff;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.included .headline-fluid { color: #121212; }
.included .arrow-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #d7f0dd;
  display: flex;
  align-items: center;
  justify-content: center;
}
.included .arrow-circle svg { width: 34px; height: 34px; }
.included .intro-desc {
  font-size: 18px;
  line-height: 1.5;
  color: #121212;
  max-width: 540px;
  margin: 0;
}

.included .cards {
  display: flex;
  flex-direction: column;
  gap: 72px;
  max-width: 760px;
  margin-left: auto;
}
.included .card-stack { position: relative; }
.included .card-stack::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  right: -8px;
  bottom: -8px;
  background: #f7f6f3;
  border: 1px solid rgba(18, 18, 18, 0.12);
  border-radius: 4px;
  z-index: 0;
}
.included .card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 92px 1fr;
  background: #f2f1ee;
  border: 1px solid rgba(18, 18, 18, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.included .icon-block { display: flex; align-items: center; justify-content: center; }
.included .icon-block.blue { background: #cde7fb; }
.included .icon-block.peach { background: #ffd9d3; }
.included .icon-block.yellow { background: #ffe9b8; }
.included .icon-block.purple { background: #e3dbfb; }
.included .icon-block svg { width: 34px; height: 34px; }

.included .card-body { padding: 32px 36px 36px; }
.included .card-body h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  color: #121212;
  margin: 0 0 14px;
}
.included .card-body .desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #55565c;
  margin: 0 0 20px;
}

.included .pill-list { display: flex; flex-direction: column; gap: 10px; }
.included .pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  background: #ffffff;
  border: 1px solid rgba(18, 18, 18, 0.14);
  border-radius: 100px;
  padding: 7px 16px 7px 8px;
  font-size: 13.5px;
  color: #121212;
}
.included .pill-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.4px solid rgba(18, 18, 18, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #55565c;
  flex-shrink: 0;
}

/* ---------- Testimonial ---------- */
.testimonial {
  background: #000000;
  padding: 96px 56px;
  max-width: none;
  margin: 0;
}
.testimonial .grid {
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 48px;
  align-items: stretch;
  min-height: 400px;
}

.testimonial .left-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonial .headline {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.28;
  margin: 0;
}
.testimonial .headline .primary { color: #fff; display: block; }
.testimonial .headline .secondary { color: var(--text-muted); display: block; }

.testimonial .right-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.testimonial .quote-viewport { position: relative; }
/* Without JS the prev/next controls don't work, so every quote stays
   visible and stacked instead of only the "active" one being reachable. */
.testimonial .quote-slide + .quote-slide {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
html.js .testimonial .quote-slide { display: none; }
html.js .testimonial .quote-slide.active {
  display: block;
  animation: testimonialFadeIn 0.35s ease;
}
@keyframes testimonialFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.testimonial .quote {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  max-width: 780px;
}
.testimonial .quote-slide .author { margin-top: 32px; }
.testimonial .footer-row {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-top: 32px;
}
.testimonial .author .name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.testimonial .author .role { font-size: 15px; color: var(--text-muted); }

.testimonial .nav-arrows { display: flex; gap: 10px; }
.testimonial .nav-btn {
  width: 44px;
  height: 44px;
  border-radius: 100px;
  background: #ffffff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #121212;
  padding: 0;
}
.testimonial .nav-btn svg { width: 18px; height: 18px; }
.testimonial .nav-btn:hover { opacity: 0.85; }

/* ---------- FAQ ---------- */
.faq {
  background: #ffffff;
  padding: 0;
  max-width: none;
  margin: 0;
  border-top: 1px solid rgba(18, 18, 18, 0.12);
}
.faq-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 120px 56px 140px;
}
.faq-layout {
  display: flex;
  flex-direction: row;
  gap: 80px;
}

.faq-heading { flex-shrink: 0; width: 360px; }
.faq-heading .headline-fluid { color: #121212; }
.faq-dim { color: rgba(18, 18, 18, 0.35); }
.faq-subtext {
  font-size: 17px;
  line-height: 1.7;
  color: #55565c;
  max-width: 36ch;
  margin: 20px 0 0;
}

.faq-list {
  flex: 1;
  min-width: 0;
  border-top: 1px solid rgba(18, 18, 18, 0.12);
}
.faq-row { border-bottom: 1px solid rgba(18, 18, 18, 0.12); }
.faq-q-wrap { margin: 0; }
.faq-question {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 0;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
}
.faq-q-text {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.4;
  font-size: clamp(16px, 1.4vw, 19px);
  color: #121212;
}
.plus-minus {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 100px;
  background: rgba(18, 18, 18, 0.05);
  color: #121212;
}
.faq-vline {
  transition: transform 240ms cubic-bezier(0.2, 0.7, 0.2, 1), opacity 200ms ease;
  transform-origin: center;
  transform: scaleY(1);
  opacity: 1;
}
.faq-row.open .faq-vline { transform: scaleY(0); opacity: 0; }

.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-row.open .faq-panel { grid-template-rows: 1fr; }
.faq-panel-inner { overflow: hidden; }
.faq-answer {
  font-size: 16px;
  line-height: 1.75;
  color: #55565c;
  max-width: 72ch;
  margin: 0;
  padding-bottom: 24px;
}

/* Scroll-triggered reveal (see Reveal init in main.js). Content is visible
   by default so it's present with or without JavaScript; the hidden
   "waiting to animate in" state only applies once main.js confirms it's
   running by adding .js-reveal to <html>. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}
html.js [data-reveal].revealed { opacity: 1; transform: none; }

/* ---------- Pricing CTA (floating card, Omnigent gradient backdrop) ---------- */
.value-cta {
  background: #ffffff;
  padding: 40px 56px 120px;
  max-width: none;
  margin: 0;
}
.value-card {
  position: relative;
  max-width: 1360px;
  margin: 0 auto;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(18, 18, 18, 0.08);
  box-shadow: 0 24px 60px rgba(18, 18, 18, 0.08);
  overflow: hidden;
  padding: 96px 40px 80px;
  text-align: center;
}
.value-card-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 15% 15%, rgba(139, 114, 247, 0.24), transparent 60%),
    radial-gradient(ellipse 90% 70% at 85% 85%, rgba(255, 180, 43, 0.24), transparent 60%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255, 135, 137, 0.18), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.value-card-icon {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 240px;
  height: 240px;
  transform: rotate(-18deg);
  opacity: 0.9;
  pointer-events: none;
}
.value-card-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto;
}
.value-card-content .headline-fluid { color: #121212; }
.value-subtitle {
  font-size: 15.5px;
  line-height: 1.6;
  color: #55565c;
  max-width: 640px;
  margin: 20px auto 34px;
}
.value-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #121212;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.15s ease;
}
.value-cta-btn:hover { opacity: 0.85; }

/* ---------- Footer ---------- */
.site-footer {
  background: #070707;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: hidden;
}
.footer-main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 40px 20px 32px;
}
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
}

.footer-brand {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  gap: 24px;
}
.footer-logo-link { display: inline-flex; align-items: center; }
.footer-logo { height: 19px; width: auto; filter: brightness(0) invert(1); }

.footer-mobile-links { display: flex; flex-direction: column; gap: 8px; }
.footer-heading {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.38);
  margin-bottom: 4px;
}
.footer-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.footer-store-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.footer-store-btn:hover { border-color: rgba(255, 255, 255, 0.28); color: #fff; }

.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  width: 100%;
}
.footer-col .footer-heading { margin-bottom: 20px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a {
  font-size: 13px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-col a:hover { color: rgba(255, 255, 255, 0.9); }

.footer-watermark {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 20px 0;
  text-align: center;
  user-select: none;
  pointer-events: none;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 0.8;
  letter-spacing: -0.03em;
  font-size: clamp(56px, 13vw, 190px);
  color: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  white-space: nowrap;
}

.footer-bottom { max-width: 1240px; margin: 0 auto; padding: 0 20px 32px; }
.footer-bottom-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.footer-legal { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.footer-copyright { font-size: 12px; color: rgba(255, 255, 255, 0.25); }
.footer-copyright strong { font-weight: 600; }
.footer-cookie-btn {
  font-family: var(--font-display);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  padding: 0 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.footer-cookie-btn:hover { color: rgba(255, 255, 255, 0.55); }

.footer-socials { display: flex; align-items: center; gap: 2px; }
.footer-social-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.15s ease, background 0.15s ease;
}
.footer-social-btn svg { width: 15px; height: 15px; }
.footer-social-btn:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.06); }

@media (min-width: 640px) {
  .footer-columns { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 768px) {
  .footer-top { flex-direction: row; justify-content: space-between; gap: 48px; }
  .footer-brand { flex-direction: column; align-items: flex-start; width: 160px; flex-shrink: 0; gap: 32px; }
  .footer-columns { flex: 1; min-width: 0; }
  .footer-bottom-bar { flex-direction: row; justify-content: space-between; align-items: center; }
}
@media (min-width: 1024px) {
  .footer-columns { grid-template-columns: repeat(6, 1fr); }
}

/* ===========================================================
   Responsive
   =========================================================== */
@media (max-width: 900px) {
  .nav-center { display: none; }
  .btn-nav-cta { display: none; }
  .menu-toggle { display: flex; }
  .nav-pill { padding: 8px 16px; }
  .hero-icon-glow { width: 100vw; height: 760px; top: 395px; left: 50%; }
  .hero-icon { width: 460px; height: 460px; top: 395px; left: 50%; }
  section { padding: 64px 24px; }
  .hero-content { padding: 120px 24px 0; }
  .capabilities-inner { padding: 80px 24px 96px; }
  .capability-grid { grid-template-columns: 1fr; row-gap: 44px; }
  .benefits .panel { grid-template-columns: 1fr; }
  .benefits .panel.reverse .text-col { order: 1; }
  .benefits .panel.reverse .media-col { order: 2; }
  /* Panels are much taller when stacked to one column, so the header's
     sticky containing block needs a bigger mobile-specific height to keep
     releasing in sync with the last card (see desktop rule above). */
  .benefits-header-wrap { height: 3055px; margin-bottom: -2870px; }
  .media-col { height: 320px; }
  .panel-icon { width: 110px; height: 110px; top: -95px; left: -30px; opacity: 0.7; }
  .benefits .panel.reverse .panel-icon { left: auto; right: -30px; }
  .benefits-inner { padding: 72px 24px 24px; }
  .integrations-inner { padding: 80px 24px 96px; }
  .integrations .grid { grid-template-columns: repeat(2, 1fr); }
  .integrations .grid > .cell:nth-child(2n) { border-right: none; padding-right: 0; }
  .integrations .grid > .cell:nth-child(2n+1) { padding-left: 0; }
  .included-inner { padding: 80px 24px 96px; }
  .included .intro { grid-template-columns: 1fr; gap: 20px; margin-bottom: 48px; }
  .included .cards { margin-left: 0; max-width: 100%; }
  .included .card { grid-template-columns: 70px 1fr; }
  .testimonial { padding: 48px 24px; }
  .testimonial .grid { grid-template-columns: 1fr; gap: 32px; min-height: auto; }
  .testimonial .headline { font-size: 26px; }
  .testimonial .quote { font-size: 22px; }
  .testimonial .footer-row { margin-top: 24px; }
  .faq-inner { padding: 80px 24px 96px; }
  .faq-layout { flex-direction: column; gap: 40px; }
  .faq-heading { width: 100%; }
  .value-cta { padding: 24px 24px 80px; }
  .value-card { padding: 64px 24px 56px; border-radius: 20px; }
  .value-card-icon { width: 120px; height: 120px; top: -46px; right: -46px; opacity: 0.7; }
  .value-card-content { max-width: 100%; }
}

@media (max-width: 560px) {
  .integrations .grid { grid-template-columns: 1fr; }
  .integrations .grid > .cell {
    border-right: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .integrations .header { flex-direction: column; align-items: flex-start; }
}