/* ========================================
   DESIGN TOKENS
   Palette and scale mirror the Veyra reference.
   Swap --purple-500 / --purple-950 to re-brand.
======================================== */

:root {
  --font-heading: "Manrope", Arial, sans-serif;
  --font-body: "Inter", Arial, sans-serif;

  --ink: #070628;
  --ink-secondary: #0e1534;
  --white: #fafafa;
  --purple-950: #0c003f;
  --purple-500: #7a5cff;
  --surface-subtle: #f3f3f3;

  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-36: 36px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-96: 96px;
  --space-112: 112px;
  --space-120: 120px;
  --space-144: 144px;
  --space-160: 160px;

  --radius-4xs: 10px;
  --radius-3xs: 12px;
  --radius-xs: 16px;
  --radius-sm: 20px;
  --radius-round: 9999px;
}


/* ========================================
   RESET
======================================== */

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

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--white);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

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

html { scroll-behavior: smooth; }


/* ========================================
   GLOBAL LAYOUT
======================================== */

.container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--space-144);
}


/* ========================================
   BUTTONS
======================================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-10);
  border: 0;
  border-radius: var(--radius-4xs);
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 2px solid var(--purple-500); outline-offset: 3px; }

.button-small {
  min-height: 40px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
}

.button-medium,
.button-large {
  min-height: 52px;
  padding: 16px 20px;
  font-size: 18px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.1px;
}

.button-purple {
  color: var(--white);
  background: var(--purple-500);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  z-index: 10;
}

.button-purple:hover { background: #876eff; }

.button-light {
  color: #0c0b13;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(12, 0, 63, 0.12);
  z-index: 10;
}

.arrow {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}


/* ========================================
   HERO
======================================== */

.hero {
  position: relative;
  width: 100%;
  min-height: 1300px;
  overflow: hidden;
  isolation: isolate;

  background: linear-gradient(
    180deg,
    var(--purple-950) 0%,
    #281579 20%,
    var(--purple-500) 50%,
    #d9d3ff 76%,
    var(--white) 100%
  );
}

/* Full-width white fade so the hero dissolves into the page */
.hero::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  content: "";
  pointer-events: none;

  background: linear-gradient(
    180deg,
    rgba(250, 250, 250, 0) 0%,
    rgba(250, 250, 250, 0) 64%,
    var(--white) 93%
  );
}


/* ========================================
   NAVBAR
======================================== */

.site-header {
  position: relative;
  z-index: 20;
  height: 84px;
  border-bottom: 1px solid rgba(250, 250, 250, 0.12);
}

.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  height: 84px;
}

.brand {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-8);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: -0.4px;
}

.brand-mark {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(145deg, #ffffff, #c9bcff);
  box-shadow: inset -6px 0 0 -1px rgba(122, 92, 255, 0.85);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-28);
  color: rgba(250, 250, 250, 0.7);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.nav-links a,
.sign-in { transition: color 180ms ease; }

.nav-links a:hover,
.nav-links a:focus-visible,
.sign-in:hover,
.sign-in:focus-visible { color: var(--white); }

.nav-actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-16);
}

.sign-in {
  color: rgba(250, 250, 250, 0.7);
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
}

.menu-toggle {
  display: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-4xs);
  background: rgba(250, 250, 250, 0.12);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.menu-toggle span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--white);
}


/* ========================================
   HERO CONTENT
======================================== */

.hero-content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-112);
  text-align: center;
}

.hero-title {
  max-width: 800px;
  margin: 0;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: -2px;
}

.hero-description {
  max-width: 620px;
  margin: var(--space-28) 0 0;
  color: rgba(250, 250, 250, 0.7);
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  margin-top: var(--space-28);
}


/* ========================================
   HERO VISUAL — devices in place of the orb
======================================== */

.orb-wrap {
  position: absolute;
  z-index: 2;
  top: 612px;
  left: 50%;
  width: min(1100px, 92vw);
  transform: translateX(-50%);
  pointer-events: none;
}

.orb-glow {
  position: absolute;
  top: -120px;
  left: 50%;
  width: 780px;
  height: 640px;
  transform: translateX(-50%);
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.55), transparent 62%);
  filter: blur(8px);
}

.hero-devices {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 28px;
}

.device-main { z-index: 2; }

.device-side {
  z-index: 1;
  margin-top: 58px;
  opacity: 0.92;
}

.hero-devices .device-side:first-child { transform: rotate(-4deg); }
.hero-devices .device-side:last-child { transform: rotate(4deg); }


/* ========================================
   DEVICE MOCKUP
======================================== */

.device {
  width: 268px;
  height: 548px;
  flex: 0 0 auto;
  padding: 10px;
  border-radius: 38px;
  background: #0b0a16;
  box-shadow: 0 30px 70px -20px rgba(12, 0, 63, 0.55);
}

.screen {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  height: 100%;
  flex-direction: column;
  border-radius: 29px;
  background: var(--white);
  color: var(--ink-secondary);
}

.notch {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: 96px;
  height: 20px;
  transform: translateX(-50%);
  border-radius: 0 0 12px 12px;
  background: #0b0a16;
}

.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 34px 16px 12px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
}

.app-bar .fab {
  display: flex;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--purple-500);
  color: var(--white);
  font-size: 15px;
  line-height: 1;
}


/* Shelf grid */

.shelf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 4px 14px 14px;
}

.cover {
  position: relative;
  display: flex;
  aspect-ratio: 2 / 3;
  align-items: flex-end;
  padding: 6px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(7, 6, 40, 0.28);
}

.cover span {
  color: rgba(255, 255, 255, 0.94);
  font-size: 8px;
  font-weight: 500;
  line-height: 1.15;
}

.cover .qty {
  position: absolute;
  top: 4px;
  right: 4px;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(7, 6, 40, 0.62);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.c1 { background: linear-gradient(160deg, #4b2fa8, #2a1560); }
.c2 { background: linear-gradient(160deg, #7a5cff, #3a23a0); }
.c3 { background: linear-gradient(160deg, #8a5a2e, #5c3a18); }
.c4 { background: linear-gradient(160deg, #2f3a7c, #1b2052); }
.c5 { background: linear-gradient(160deg, #7a2e5a, #4e1a34); }
.c6 { background: linear-gradient(160deg, #2e5c52, #17352f); }


/* Scan screen */

.viewfinder {
  position: relative;
  display: flex;
  overflow: hidden;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 8px 14px;
  border-radius: var(--radius-xs);
  background: #101018;
}

.reticle { position: relative; width: 160px; height: 100px; }

.reticle i {
  position: absolute;
  width: 22px;
  height: 22px;
  border-width: 0;
  border-style: solid;
  border-color: rgba(250, 250, 250, 0.9);
}

.reticle i:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-radius: 6px 0 0 0; }
.reticle i:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-radius: 0 6px 0 0; }
.reticle i:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-radius: 0 0 0 6px; }
.reticle i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-radius: 0 0 6px 0; }

.scanline {
  position: absolute;
  top: 50%;
  right: 6%;
  left: 6%;
  height: 2px;
  background: var(--purple-500);
  box-shadow: 0 0 10px 1px var(--purple-500);
  animation: sweep 2.4s ease-in-out infinite;
}

@keyframes sweep {
  0%, 100% { top: 12%; }
  50% { top: 82%; }
}

.scan-caption {
  padding: 12px 0 22px;
  color: rgba(14, 21, 52, 0.6);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.scan-caption b {
  color: var(--ink-secondary);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-weight: 500;
}


/* Result screen */

.result {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 8px 18px 18px;
}

.result-cover {
  width: 80px;
  height: 120px;
  margin: 4px auto 14px;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(7, 6, 40, 0.32);
}

.chip {
  align-self: center;
  margin-bottom: 12px;
  padding: 4px 10px;
  border-radius: var(--radius-round);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.chip.warn { background: #efe9ff; color: #4b2fa8; }

.result h4 {
  margin: 0 0 2px;
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}

.result .by {
  margin: 0 0 14px;
  color: rgba(14, 21, 52, 0.6);
  font-size: 12px;
  text-align: center;
}

.edition-note {
  margin-bottom: 16px;
  padding: 9px 11px;
  border: 1px solid rgba(14, 21, 52, 0.12);
  border-radius: var(--radius-4xs);
  background: var(--surface-subtle);
  color: rgba(14, 21, 52, 0.7);
  font-size: 11px;
  line-height: 16px;
  text-align: center;
}

.edition-note b { color: var(--ink-secondary); font-weight: 500; }

.stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 4px 0 6px;
}

.stepper .sbtn {
  display: flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(14, 21, 52, 0.18);
  border-radius: 50%;
  font-size: 17px;
}

.stepper .count {
  min-width: 20px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.stepper-label {
  margin: 0 0 18px;
  color: rgba(14, 21, 52, 0.55);
  font-size: 11px;
  text-align: center;
}

.primary-btn {
  margin-top: auto;
  padding: 12px;
  border-radius: var(--radius-3xs);
  background: var(--purple-500);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
}


/* ========================================
   CAPABILITY MARQUEE
======================================== */

.trusted {
  position: relative;
  z-index: 12;
  width: 100%;
  margin-top: 772px;
}

.trusted-title {
  margin: 0;
  color: #0c0b13;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  text-align: center;
}

.logo-marquee {
  --logo-gap: 64px;
  --marquee-duration: 30s;

  position: relative;
  width: 100%;
  margin-top: var(--space-40);
  overflow: hidden;

  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.logo-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee var(--marquee-duration) linear infinite;
  will-change: transform;
}

.logo-group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--logo-gap);
  padding-right: var(--logo-gap);
}

.client-logo {
  display: flex;
  min-width: 112px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: rgba(14, 21, 52, 0.45);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.4px;
  white-space: nowrap;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ========================================
   SHARED SECTION LABEL + HEADING
======================================== */

.section-label {
  display: flex;
  align-items: center;
  margin: 0;
  gap: var(--space-4);
  color: var(--purple-500);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.section-label span {
  margin-right: var(--space-4);
  font-size: 10px;
  line-height: 12px;
}

.section-label-center { justify-content: center; }

.section-heading-center {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.section-heading h2 {
  margin: var(--space-16) 0 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -1.2px;
}

.section-heading > p:last-child {
  max-width: 580px;
  margin: var(--space-16) auto 0;
  color: rgba(14, 21, 52, 0.6);
  font-size: 16px;
  line-height: 28px;
}


/* ========================================
   ABOUT
======================================== */

.about-section {
  padding: var(--space-96) 0;
  background: var(--white);
}

.about-content { width: 100%; text-align: center; }

.about-statement {
  max-width: 1100px;
  margin: var(--space-16) auto 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -1.2px;
}


/* ========================================
   BENEFITS
======================================== */

.benefits-section {
  padding: var(--space-96) 0 var(--space-160);
  background: var(--white);
}

.benefits-heading {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: var(--space-96);
}

.benefits-heading h2 {
  margin: var(--space-16) 0 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -1.2px;
}

.benefits-intro {
  max-width: 360px;
  margin: 0 0 2px;
  color: rgba(14, 21, 52, 0.6);
  font-size: 16px;
  line-height: 28px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-64);
}

.benefit-card {
  position: relative;
  display: flex;
  min-height: 400px;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-28);
  border: 1px solid rgba(14, 21, 52, 0.2);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.benefit-copy { position: relative; z-index: 2; min-height: 128px; }

.benefit-copy h3 {
  margin: 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.3px;
}

.benefit-copy p {
  margin: var(--space-16) 0 0;
  color: rgba(14, 21, 52, 0.7);
  font-size: 16px;
  line-height: 28px;
}

.card-art {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 58%;
}

/* Benefit 1 — the instant verdict: a pulse resolving to a dot */
.art-instant {
  background:
    radial-gradient(circle at 50% 52%, rgba(122, 92, 255, 0.85) 0 9px, transparent 10px),
    radial-gradient(circle at 50% 52%, transparent 0 34px, rgba(122, 92, 255, 0.22) 35px 36px, transparent 37px),
    radial-gradient(circle at 50% 52%, transparent 0 62px, rgba(122, 92, 255, 0.12) 63px 64px, transparent 65px),
    linear-gradient(160deg, #e9e9ee, #f6f6f9);
}

/* Benefit 2 — two editions, one entry */
.art-editions {
  background:
    linear-gradient(115deg, transparent 46%, rgba(122, 92, 255, 0.28) 46% 54%, transparent 54%),
    radial-gradient(ellipse at 32% 50%, rgba(75, 47, 168, 0.5) 0 26px, transparent 27px),
    radial-gradient(ellipse at 68% 50%, rgba(122, 92, 255, 0.45) 0 26px, transparent 27px),
    linear-gradient(160deg, #e9e9ee, #f6f6f9);
}

/* Benefit 3 — offline: signal bars struck through */
.art-offline {
  background:
    linear-gradient(90deg,
      transparent 0 38%,
      rgba(14, 21, 52, 0.14) 38% 41%,
      transparent 41% 45%,
      rgba(14, 21, 52, 0.14) 45% 48%,
      transparent 48% 52%,
      rgba(122, 92, 255, 0.45) 52% 55%,
      transparent 55% 59%,
      rgba(122, 92, 255, 0.6) 59% 62%,
      transparent 62%),
    linear-gradient(160deg, #e9e9ee, #f6f6f9);
  background-position: 0 40%, 0 0;
  background-size: 100% 42%, 100% 100%;
  background-repeat: no-repeat;
}


/* ========================================
   FEATURES BENTO
======================================== */

.features-section {
  padding: var(--space-96) 0;
  background: var(--white);
}

.feature-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-64);
}

.feature-card {
  position: relative;
  display: flex;
  min-height: 520px;
  min-width: 0;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-28);
  border: 1px solid rgba(14, 21, 52, 0.08);
  border-radius: var(--radius-sm);
  background: #dedede;
}

.feature-bento .feature-card:nth-child(1) { grid-column: span 7; }
.feature-bento .feature-card:nth-child(2) { grid-column: span 5; }
.feature-bento .feature-card:nth-child(3) { grid-column: span 5; }
.feature-bento .feature-card:nth-child(4) { grid-column: span 7; }

.feature-visual {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(14, 21, 52, 0.08);
  border-radius: var(--radius-3xs);
}

/* Scan → match */
.feature-visual-scan {
  background:
    radial-gradient(circle at 72% 32%, rgba(122, 92, 255, 0.5), transparent 26%),
    radial-gradient(circle at 60% 24%, rgba(255, 255, 255, 0.9), transparent 38%),
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      rgba(14, 21, 52, 0.16) 6px 8px,
      transparent 8px 12px,
      rgba(14, 21, 52, 0.1) 12px 15px),
    linear-gradient(145deg, #d7d7dc, #ececf3);
  background-size: auto, auto, 60% 26%, auto;
  background-position: 0 0, 0 0, 18% 30%, 0 0;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Shelf + wishlist */
.feature-visual-shelf {
  background:
    linear-gradient(90deg,
      rgba(122, 92, 255, 0.4) 0 12%,
      rgba(75, 47, 168, 0.35) 12% 24%,
      rgba(14, 21, 52, 0.14) 24% 36%,
      rgba(122, 92, 255, 0.28) 36% 48%,
      transparent 48%),
    linear-gradient(135deg, #e1e1e5, #f0f0f2);
  background-size: 100% 34%, auto;
  background-position: 0 24%, 0 0;
  background-repeat: no-repeat, no-repeat;
}

/* Quantity stepper */
.feature-visual-count {
  background:
    radial-gradient(circle at 30% 34%, rgba(14, 21, 52, 0.12) 0 22px, transparent 23px),
    radial-gradient(circle at 70% 34%, rgba(14, 21, 52, 0.12) 0 22px, transparent 23px),
    radial-gradient(circle at 50% 34%, rgba(122, 92, 255, 0.45) 0 30px, transparent 31px),
    linear-gradient(145deg, #e3e3e7, #f1f1f4);
}

/* Outbox / sync */
.feature-visual-sync {
  background:
    linear-gradient(180deg, transparent 47%, rgba(122, 92, 255, 0.28) 47% 50%, transparent 50%),
    radial-gradient(circle at 22% 48%, rgba(122, 92, 255, 0.55) 0 10px, transparent 11px),
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.95) 0 10px, transparent 11px),
    radial-gradient(circle at 78% 48%, rgba(75, 47, 168, 0.5) 0 10px, transparent 11px),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(14, 21, 52, 0.05) 54px 55px),
    #e5e5e8;
}

.feature-card-copy {
  position: relative;
  z-index: 1;
  margin-top: auto;
}

.feature-card-copy h3 {
  margin: 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
}

.feature-card-copy p {
  max-width: 460px;
  margin: var(--space-12) 0 0;
  color: rgba(14, 21, 52, 0.65);
  font-size: 14px;
  line-height: 22px;
}


/* ========================================
   INTEGRATION
======================================== */

.integration-section { padding: var(--space-64) 0; background: var(--white); }

.integration-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 620px;
  align-items: center;
  gap: var(--space-64);
}

.integration-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.integration-copy h2 {
  max-width: 480px;
  margin: var(--space-16) 0 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -1.2px;
}

.integration-copy p:not(.section-label) {
  max-width: 470px;
  margin: var(--space-20) 0 0;
  color: rgba(14, 21, 52, 0.6);
  font-size: 16px;
  line-height: 28px;
}

.integration-button { margin-top: var(--space-48); }

.integration-placeholder {
  display: flex;
  min-height: 620px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(14, 21, 52, 0.08);
  border-radius: var(--radius-sm);
  background: linear-gradient(160deg, #e6e6ea, #f4f4f7);
}

.isbn-flow {
  display: flex;
  width: 100%;
  max-width: 380px;
  flex-direction: column;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-28);
}

.flow-row { display: flex; width: 100%; gap: var(--space-12); }

.flow-node {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-16);
  border: 1px solid rgba(14, 21, 52, 0.1);
  border-radius: var(--radius-3xs);
  background: #ffffff;
  text-align: center;
}

.flow-node span {
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 500;
}

.flow-node em {
  color: rgba(14, 21, 52, 0.5);
  font-size: 11px;
  font-style: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.flow-scan span { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

.flow-cache {
  border-color: rgba(122, 92, 255, 0.4);
  background: linear-gradient(180deg, #ffffff, #f1edff);
}

.flow-line {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, rgba(122, 92, 255, 0.7), rgba(122, 92, 255, 0.15));
}


/* ========================================
   HOW IT WORKS
======================================== */

.how-section { padding: var(--space-96) 0; background: var(--white); }

.how-list {
  display: grid;
  gap: var(--space-16);
  margin-top: var(--space-64);
}

.how-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 380px;
  overflow: hidden;
  align-items: center;
  gap: var(--space-48);
  padding: var(--space-48);
  border: 1px solid rgba(14, 21, 52, 0.12);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.how-card:nth-child(even) .how-card-copy { order: 2; }

.how-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-20);
  border-radius: var(--radius-3xs);
  background: var(--purple-500);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
}

.how-card-copy h3 {
  margin: 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 400;
  line-height: 36px;
  letter-spacing: -0.6px;
}

.how-card-copy > p {
  max-width: 420px;
  margin: var(--space-12) 0 var(--space-20);
  color: rgba(14, 21, 52, 0.6);
  font-size: 16px;
  line-height: 28px;
}

.how-card-copy ul {
  display: grid;
  gap: var(--space-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

.how-card-copy li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 22px;
}

.how-card-copy li::before {
  position: absolute;
  top: 8px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--purple-500);
  content: "";
}

.how-card-placeholder {
  height: 100%;
  min-height: 280px;
  border: 1px solid rgba(14, 21, 52, 0.08);
  border-radius: var(--radius-xs);
  background: #dedede;
}

.art-step-1 {
  background:
    repeating-linear-gradient(90deg,
      rgba(75, 47, 168, 0.45) 0 14px,
      transparent 14px 20px,
      rgba(122, 92, 255, 0.4) 20px 30px,
      transparent 30px 36px),
    linear-gradient(160deg, #e4e4e9, #f2f2f5);
  background-size: 100% 46%, auto;
  background-position: 0 50%, 0 0;
  background-repeat: no-repeat, no-repeat;
}

.art-step-2 {
  background:
    linear-gradient(180deg, transparent 49%, rgba(122, 92, 255, 0.75) 49% 51%, transparent 51%),
    repeating-linear-gradient(90deg,
      rgba(14, 21, 52, 0.22) 0 4px,
      transparent 4px 9px,
      rgba(14, 21, 52, 0.16) 9px 12px,
      transparent 12px 18px),
    linear-gradient(160deg, #e4e4e9, #f2f2f5);
  background-size: 100% 100%, 54% 34%, auto;
  background-position: 0 0, 23% 33%, 0 0;
  background-repeat: no-repeat;
}

.art-step-3 {
  background:
    radial-gradient(circle at 50% 44%, rgba(122, 92, 255, 0.55) 0 46px, transparent 47px),
    radial-gradient(circle at 50% 44%, transparent 0 66px, rgba(122, 92, 255, 0.18) 67px 68px, transparent 69px),
    linear-gradient(160deg, #e4e4e9, #f2f2f5);
}

.art-step-4 {
  background:
    radial-gradient(circle at 24% 50%, rgba(122, 92, 255, 0.5) 0 14px, transparent 15px),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 14px, transparent 15px),
    radial-gradient(circle at 76% 50%, rgba(75, 47, 168, 0.5) 0 14px, transparent 15px),
    linear-gradient(180deg, transparent 49%, rgba(14, 21, 52, 0.12) 49% 50.5%, transparent 50.5%),
    linear-gradient(160deg, #e4e4e9, #f2f2f5);
}


/* ========================================
   USE CASES
======================================== */

.use-cases-section { padding: var(--space-96) 0; background: var(--white); }

.use-cases-heading {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: end;
  gap: var(--space-96);
}

.use-cases-heading h2 {
  margin: var(--space-16) 0 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -1.2px;
}

.use-cases-description {
  max-width: 360px;
  margin: 0 0 2px;
  color: rgba(14, 21, 52, 0.6);
  font-size: 16px;
  line-height: 28px;
}

.use-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-64);
}

.use-case-card {
  display: flex;
  min-height: 320px;
  flex-direction: column;
  padding: var(--space-28);
  border: 1px solid rgba(14, 21, 52, 0.12);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.use-case-icon {
  display: flex;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  margin-bottom: auto;
  border-radius: var(--radius-3xs);
  background: #ffffff;
  font-size: 24px;
}

.use-case-card h3 {
  margin: var(--space-28) 0 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: -0.3px;
}

.use-case-card p {
  margin: var(--space-12) 0 0;
  color: rgba(14, 21, 52, 0.65);
  font-size: 15px;
  line-height: 26px;
}


/* ========================================
   STATS BAND
======================================== */

.stats-section { padding: var(--space-48) 0 var(--space-96); background: var(--white); }

.stats-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--space-64);
  border-radius: var(--radius-sm);
  color: var(--white);
  background: linear-gradient(160deg, #17075a 0%, #3b23a8 55%, #5f45d9 100%);
}

.stats-card::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, rgba(0, 0, 0, 0.85) 45%, transparent 100%);
  mask-image: radial-gradient(circle at center, #000 0%, rgba(0, 0, 0, 0.85) 45%, transparent 100%);
}

.stats-card > * { position: relative; z-index: 1; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-40);
  margin-top: var(--space-48);
}

.stat { display: flex; flex-direction: column; gap: var(--space-12); text-align: center; }

.stat-value {
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 400;
  line-height: 70px;
  letter-spacing: -2.5px;
}

.stat-label {
  margin-inline: auto;
  max-width: 220px;
  color: rgba(250, 250, 250, 0.85);
  font-size: 14px;
  line-height: 22px;
}


/* ========================================
   PRICING
======================================== */

.pricing-section { padding: var(--space-96) 0; background: var(--white); }

.pricing-heading { max-width: 720px; }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-16);
  margin-top: var(--space-64);
}

.pricing-card {
  display: flex;
  min-height: 596px;
  flex-direction: column;
  padding: var(--space-16);
  border: 1px solid rgba(14, 21, 52, 0.2);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.pricing-summary {
  display: flex;
  min-height: 286px;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-16);
  border-radius: var(--radius-3xs);
  color: var(--ink-secondary);
  background: #ffffff;
}

.pricing-summary h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.2px;
}

.price-row { display: flex; align-items: baseline; gap: var(--space-10); }

.price {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 400;
  line-height: 64px;
  letter-spacing: -2.5px;
}

.price-period { color: rgba(7, 6, 40, 0.6); font-size: 16px; line-height: 28px; }

.pricing-description {
  max-width: 250px;
  margin: var(--space-28) 0 0;
  font-size: 14px;
  line-height: 20px;
}

.pricing-summary-growth {
  color: var(--white);
  /* End stop kept darker than the reference so the small print below it
     still clears contrast against white text. */
  background: linear-gradient(180deg, #17075a 0%, #3b23a8 55%, #6a4fe6 100%);
}

.pricing-summary-growth .price-period,
.pricing-summary-growth .pricing-description { color: rgba(250, 250, 250, 0.88); }

.pricing-features {
  display: grid;
  gap: var(--space-16);
  margin: var(--space-36) 0 var(--space-28);
  padding: 0;
  list-style: none;
}

.pricing-features li {
  position: relative;
  min-height: 24px;
  padding-left: 28px;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 20px;
}

.pricing-features li::before {
  position: absolute;
  top: 2px;
  left: 0;
  width: 16px;
  height: 16px;
  content: "";
  background: var(--ink-secondary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM7.53044 11.9697C7.23755 11.6768 6.76268 11.6768 6.46978 11.9697C6.17689 12.2626 6.17689 12.7374 6.46978 13.0303L9.46978 16.0303C9.76268 16.3232 10.2376 16.3232 10.5304 16.0303L17.5304 9.03033C17.8233 8.73744 17.8233 8.26256 17.5304 7.96967C17.2375 7.67678 16.7627 7.67678 16.4698 7.96967L10.0001 14.4393L7.53044 11.9697Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 1.25C6.06294 1.25 1.25 6.06294 1.25 12C1.25 17.9371 6.06294 22.75 12 22.75C17.9371 22.75 22.75 17.9371 22.75 12C22.75 6.06294 17.9371 1.25 12 1.25ZM7.53044 11.9697C7.23755 11.6768 6.76268 11.6768 6.46978 11.9697C6.17689 12.2626 6.17689 12.7374 6.46978 13.0303L9.46978 16.0303C9.76268 16.3232 10.2376 16.3232 10.5304 16.0303L17.5304 9.03033C17.8233 8.73744 17.8233 8.26256 17.5304 7.96967C17.2375 7.67678 16.7627 7.67678 16.4698 7.96967L10.0001 14.4393L7.53044 11.9697Z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.pricing-button {
  align-self: flex-start;
  margin-top: auto;
  color: var(--white);
  background: var(--ink-secondary);
}

.pricing-button:hover { background: #1c254d; }

.pricing-card-growth .pricing-button { background: var(--purple-500); }
.pricing-card-growth .pricing-button:hover { background: #876eff; }


/* ========================================
   FAQ
======================================== */

.faq-section { padding: var(--space-96) 0; background: var(--white); }

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 552px;
  align-items: start;
  gap: var(--space-96);
}

.faq-copy h2 {
  max-width: 420px;
  margin: var(--space-16) 0 0;
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -1.2px;
}

.faq-description {
  max-width: 380px;
  margin: var(--space-16) 0 0;
  color: rgba(14, 21, 52, 0.6);
  font-size: 16px;
  line-height: 28px;
}

.faq-list { display: grid; gap: var(--space-12); }

.faq-item {
  overflow: hidden;
  border: 1px solid rgba(14, 21, 52, 0.12);
  border-radius: var(--radius-xs);
  background: var(--surface-subtle);
}

.faq-heading { margin: 0; }

.faq-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  padding: var(--space-24) var(--space-28);
  border: 0;
  background: transparent;
  color: var(--ink-secondary);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
}

.faq-trigger:focus-visible { outline: 2px solid var(--purple-500); outline-offset: -2px; }

.faq-question { font-size: 17px; font-weight: 500; line-height: 26px; }

.faq-icon { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }

.faq-icon::before,
.faq-icon::after {
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1.5px;
  background: var(--ink-secondary);
  content: "";
  transition: transform 220ms ease;
}

.faq-icon::after { transform: rotate(90deg); }

.faq-trigger[aria-expanded="true"] .faq-icon::after { transform: rotate(0deg); }

.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }

.faq-answer-inner { overflow: hidden; }

.faq-answer p {
  margin: 0;
  padding: 0 var(--space-28) var(--space-24);
  color: rgba(14, 21, 52, 0.65);
  font-size: 15px;
  line-height: 26px;
}


/* ========================================
   CTA
======================================== */

.cta-section { padding: var(--space-96) 0 var(--space-160); background: var(--white); }

.cta-card {
  position: relative;
  display: flex;
  min-height: 460px;
  isolation: isolate;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-64);
  border-radius: var(--radius-sm);
  color: var(--white);
  text-align: center;
  background: linear-gradient(180deg, #17075a 0%, #4630bd 48%, #a78cff 100%);
}

.cta-card::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0%, rgba(0, 0, 0, 0.85) 45%, transparent 100%);
  mask-image: radial-gradient(circle at center, #000 0%, rgba(0, 0, 0, 0.85) 45%, transparent 100%);
}

.cta-card > * { position: relative; z-index: 1; }

.cta-label { color: var(--white); }

.cta-card h2 {
  max-width: 760px;
  margin: var(--space-24) 0 0;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 400;
  line-height: 52px;
  letter-spacing: -1.2px;
}

.cta-description {
  max-width: 640px;
  margin: var(--space-20) 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  line-height: 30px;
}


/* ========================================
   FOOTER
======================================== */

.site-footer { background: var(--white); }

.footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-64);
  padding: var(--space-96) 0 var(--space-120);
  border-top: 1px solid rgba(14, 21, 52, 0.1);
}

.footer-brand { max-width: 360px; }

.brand-dark { color: var(--ink-secondary); }

.brand-dark .brand-mark {
  background: linear-gradient(145deg, #4b2fa8, #7a5cff);
  box-shadow: inset -6px 0 0 -1px rgba(250, 250, 250, 0.7);
}

.footer-description {
  margin: var(--space-20) 0 0;
  color: rgba(14, 21, 52, 0.6);
  font-size: 15px;
  line-height: 26px;
}

.footer-navigation { display: flex; gap: var(--space-96); }

.footer-column-title {
  margin: 0 0 var(--space-20);
  color: var(--ink-secondary);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.footer-links { display: grid; gap: var(--space-12); margin: 0; padding: 0; list-style: none; }

.footer-links a {
  color: rgba(14, 21, 52, 0.6);
  font-size: 15px;
  line-height: 24px;
  transition: color 180ms ease;
}

.footer-links a:hover { color: var(--ink-secondary); }

.footer-bottom-inner { padding-bottom: var(--space-40); }

.footer-watermark-wrap { overflow: hidden; }

.footer-watermark {
  display: block;
  color: rgba(14, 21, 52, 0.06);
  font-family: var(--font-heading);
  font-size: clamp(80px, 17vw, 240px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -6px;
  text-align: center;
  user-select: none;
}

.footer-copyright {
  margin: var(--space-28) 0 0;
  color: rgba(14, 21, 52, 0.5);
  font-size: 13px;
  text-align: center;
}


/* ========================================
   SCROLL ENTRANCE MOTION
======================================== */

.motion-text,
.motion-ui,
.motion-fade-up,
.motion-object {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 600ms ease,
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-text.is-visible,
.motion-ui.is-visible,
.motion-fade-up.is-visible,
.motion-object.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggering inside a grid */
.benefit-grid .motion-fade-up:nth-child(2),
.feature-bento .motion-fade-up:nth-child(2),
.stats-grid .motion-fade-up:nth-child(2) { transition-delay: 120ms; }

.benefit-grid .motion-fade-up:nth-child(3),
.feature-bento .motion-fade-up:nth-child(3),
.stats-grid .motion-fade-up:nth-child(3) { transition-delay: 240ms; }

.feature-bento .motion-fade-up:nth-child(4),
.stats-grid .motion-fade-up:nth-child(4) { transition-delay: 360ms; }

/* About statement: words light up as it enters */
.magic-text .magic-word {
  color: #d8d8dc;
  transition: color 420ms ease;
}

.magic-text .magic-word.is-lit { color: var(--ink-secondary); }

/* Hero buttons */
.hero-button { opacity: 0; transform: translateY(32px); }

.hero-button.is-visible {
  animation: riseIn 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-actions .hero-button:nth-child(1).is-visible { animation-delay: 300ms; }
.hero-actions .hero-button:nth-child(2).is-visible { animation-delay: 520ms; }

.integration-button { opacity: 0; transform: translateY(32px); }
.integration-button.is-visible { animation: riseIn 650ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards; }

@keyframes riseIn {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Sequential card entrances */
.pricing-entrance,
.use-case-entrance,
.zoom-card { opacity: 0; }

.pricing-entrance { translate: 0 32px; }

.pricing-entrance.is-visible {
  animation: cardIn 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pricing-entrance:nth-child(2).is-visible { animation-delay: 180ms; }
.pricing-entrance:nth-child(3).is-visible { animation-delay: 360ms; }

.use-case-entrance { translate: 0 32px; }

.use-case-entrance.is-visible {
  animation: cardIn 650ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.use-case-entrance:nth-child(2).is-visible { animation-delay: 150ms; }
.use-case-entrance:nth-child(3).is-visible { animation-delay: 300ms; }

@keyframes cardIn {
  from { opacity: 0; translate: 0 32px; }
  to { opacity: 1; translate: 0 0; }
}

/* How-it-works oversized zoom entrance */
.zoom-card {
  transform: scale(1.06) translateY(40px);
  transition:
    opacity 700ms ease,
    transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}

.zoom-card.is-visible { opacity: 1; transform: scale(1) translateY(0); }

/* Interactive cards — subtle depth response */
.interactive-card,
.tilt-card {
  transition:
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms ease;
}

.interactive-card.is-visible:hover,
.tilt-card.is-visible:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -24px rgba(12, 0, 63, 0.35);
}


/* ========================================
   RESPONSIVE — COMPACT DESKTOP
======================================== */

@media (max-width: 1360px) {
  .container { padding-inline: var(--space-64); }
  .faq-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-64); }
}

@media (max-width: 1100px) {
  .hero { min-height: 1210px; }
  .hero-title { font-size: 52px; line-height: 58px; letter-spacing: -1.4px; }
  .device { width: 236px; height: 484px; border-radius: 32px; }
  .screen { border-radius: 24px; }
  .orb-wrap { top: 560px; }
  .trusted { margin-top: 700px; }

  .about-statement,
  .section-heading h2,
  .benefits-heading h2,
  .use-cases-heading h2,
  .integration-copy h2,
  .faq-copy h2,
  .cta-card h2 { font-size: 36px; line-height: 44px; letter-spacing: -0.9px; }

  .benefits-heading,
  .use-cases-heading { gap: var(--space-40); }

  .feature-bento .feature-card { grid-column: span 6 !important; min-height: 440px; }

  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-28); }
  .stat-value { font-size: 48px; line-height: 54px; }
}


/* ========================================
   RESPONSIVE — TABLET
======================================== */

@media (max-width: 900px) {
  .container { padding-inline: var(--space-28); }

  .nav-links { display: none; }
  .sign-in { display: none; }
  .menu-toggle { display: flex; }

  .navbar { grid-template-columns: 1fr auto; }

  /* Toggled panel drops below the 84px header bar */
  .nav-links.is-open {
    position: absolute;
    z-index: 30;
    top: 84px;
    right: var(--space-28);
    left: var(--space-28);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-12);
    border: 1px solid rgba(250, 250, 250, 0.16);
    border-radius: var(--radius-xs);
    background: rgba(12, 0, 63, 0.92);
    backdrop-filter: blur(12px);
  }

  .nav-links.is-open a {
    padding: var(--space-12) var(--space-16);
    border-radius: var(--radius-4xs);
    font-size: 16px;
  }

  .nav-links.is-open a:hover { background: rgba(250, 250, 250, 0.08); }

  .hero { min-height: 1240px; }
  .hero-content { padding-top: var(--space-64); }
  .hero-title { font-size: 42px; line-height: 50px; }
  .hero-description { font-size: 16px; line-height: 28px; }
  .hero-actions { flex-direction: column; width: 100%; max-width: 320px; }
  .hero-actions .button { width: 100%; }

  .orb-wrap { top: 596px; }
  .hero-devices .device-side { display: none; }
  .trusted { margin-top: 738px; }

  .benefits-heading,
  .use-cases-heading { grid-template-columns: 1fr; align-items: start; gap: var(--space-24); }

  .benefit-grid,
  .use-cases-grid,
  .pricing-grid { grid-template-columns: 1fr; }

  .feature-bento { grid-template-columns: 1fr; }
  .feature-bento .feature-card { grid-column: auto !important; }

  .integration-layout { grid-template-columns: 1fr; min-height: 0; gap: var(--space-40); }
  .integration-placeholder { min-height: 420px; }

  .how-card { grid-template-columns: 1fr; padding: var(--space-28); gap: var(--space-28); }
  .how-card:nth-child(even) .how-card-copy { order: 0; }
  .how-card-placeholder { min-height: 220px; }

  .faq-layout { grid-template-columns: 1fr; gap: var(--space-40); }

  .footer-top { flex-direction: column; padding-bottom: var(--space-56); }
  .footer-navigation { flex-wrap: wrap; gap: var(--space-40); }

  .benefits-section { padding-bottom: var(--space-96); }
  .cta-section { padding-bottom: var(--space-96); }
}


/* ========================================
   RESPONSIVE — MOBILE
======================================== */

@media (max-width: 560px) {
  .hero { min-height: 1180px; }
  .hero-title { font-size: 36px; line-height: 44px; letter-spacing: -1px; }
  .device { width: 224px; height: 460px; }
  .orb-wrap { top: 566px; }
  .trusted { margin-top: 684px; }

  .about-statement,
  .section-heading h2,
  .benefits-heading h2,
  .use-cases-heading h2,
  .integration-copy h2,
  .faq-copy h2,
  .cta-card h2 { font-size: 30px; line-height: 38px; letter-spacing: -0.6px; }

  .about-section,
  .features-section,
  .how-section,
  .use-cases-section,
  .pricing-section,
  .faq-section { padding-block: var(--space-64); }

  .cta-card { padding: var(--space-40) var(--space-28); }
  .stats-card { padding: var(--space-40) var(--space-28); }
  .stats-grid { grid-template-columns: 1fr; }
  .price { font-size: 44px; line-height: 52px; }
  .faq-trigger { padding: var(--space-20); }
  .faq-answer p { padding: 0 var(--space-20) var(--space-20); }
  .footer-navigation { gap: var(--space-28); }
  .footer-column { min-width: 132px; }
}


/* ========================================
   ACCESSIBILITY
======================================== */

@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;
  }

  .motion-text,
  .motion-ui,
  .motion-fade-up,
  .motion-object,
  .hero-button,
  .integration-button,
  .pricing-entrance,
  .use-case-entrance,
  .zoom-card {
    opacity: 1;
    transform: none;
    translate: none;
  }

  .magic-text .magic-word { color: var(--ink-secondary); }
}