/* A restrained blue-violet grid beneath the light sections. */
body {
  isolation: isolate;
  background: #f7f9ff;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 7% 18%, #9182f529, transparent 43%),
    radial-gradient(ellipse at 97% 49%, #73bff226, transparent 44%),
    radial-gradient(ellipse at 32% 95%, #ad9bfa1c, transparent 45%),
    linear-gradient(#55559b08 1px, transparent 1px),
    linear-gradient(90deg, #55559b08 1px, transparent 1px);
  background-size: auto, auto, auto, 64px 64px, 64px 64px;
}

.header { background: #ffffffdb; }
.hero-visual { background: linear-gradient(145deg, #fffffff2, #efedffd9); }
.principles {
  background: #ffffff8c;
  box-shadow: 0 12px 35px #36437604;
}
.implementation {
  background: linear-gradient(110deg, #f5f4ffb8, #f5fbffb8);
}
.footer { background: #ffffff4d; }

/* Each card changes in three readable stages, then unwinds in reverse. */
.features .feature {
  --feature-active: 0;
  --feature-title: #151827;
  --feature-description: #34394f;
  --feature-copy: #667084;
  --feature-caption: #6b7185;
  --feature-label: #6354ee;
  --feature-number-bg: #eeeafd;
  --feature-number-ink: #6354ee;
  --feature-divider: #e2e5ed;
  --card-pad: 32px;
  position: relative;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  background: #fffffff2;
  border-color: #dce0f0;
  box-shadow: 0 6px 26px #31396605;
  transition: transform .32s ease, box-shadow .32s ease, border-color .32s ease;
}

/* Cancel the original unguarded hover effect on touchscreens. */
.features .feature:hover { transform: none; border-color: #dce0f0; }

.feature-zone {
  position: relative;
  isolation: isolate;
  --phase-delay: var(--exit-delay);
}
.feature-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--zone-surface);
  opacity: var(--feature-active);
  transition: opacity .28s ease var(--phase-delay);
}
.feature-intro {
  --enter-delay: 0ms;
  --exit-delay: 200ms;
  --zone-surface: #171c31;
  padding: var(--card-pad) var(--card-pad) 24px;
}
.feature-functions {
  --enter-delay: 170ms;
  --exit-delay: 100ms;
  --zone-surface: #232a44;
  flex: 1;
  padding: 0 var(--card-pad) 22px;
}
.feature-outcome {
  --enter-delay: 340ms;
  --exit-delay: 0ms;
  --zone-surface: linear-gradient(110deg, #6251e9, #6e5ce5);
  margin-top: auto;
  padding: 18px var(--card-pad) 24px;
}
.feature-intro h3 {
  color: var(--feature-title);
  transition: color .28s ease var(--phase-delay);
}
.feature .feature-intro .task-statement {
  margin: 0;
  color: var(--feature-description);
  transition: color .28s ease var(--phase-delay);
}
.feature .feature-number {
  color: var(--feature-number-ink);
  background: var(--feature-number-bg);
  transition: color .28s ease var(--phase-delay), background-color .28s ease var(--phase-delay);
}
.feature .feature-functions .feature-detail {
  margin: 0;
  padding-top: 22px;
  color: var(--feature-copy);
  border-top-color: var(--feature-divider);
  transition: color .28s ease var(--phase-delay), border-color .28s ease var(--phase-delay);
}
.feature .feature-functions .feature-detail::before {
  color: var(--feature-caption);
  transition: color .28s ease var(--phase-delay);
}
.feature .feature-outcome .feature-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  min-height: 18px;
  color: var(--feature-label);
  transition: color .28s ease var(--phase-delay);
}
.feature-outcome .feature-tag::before {
  content: "";
  flex: 0 0 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: .7;
}

/* Switch each surface and its text together to preserve contrast mid-sequence. */
.feature-zone::after,
.feature-zone *,
.feature-zone *::before { transition-duration: 0s !important; }

/* The same effect is available through keyboard focus, without a fake button. */
.features .feature:focus-visible {
  --feature-active: 1;
  --feature-title: #fff;
  --feature-description: #e2e5f3;
  --feature-copy: #e2e6f5;
  --feature-caption: #c0b8ff;
  --feature-label: #fff;
  --feature-number-bg: #ffffff1a;
  --feature-number-ink: #d5ceff;
  --feature-divider: #ffffff20;
  outline: 3px solid #8879ff;
  outline-offset: 5px;
  border-color: #9f92f0;
  box-shadow: 0 18px 44px #372d7130;
}
.feature:focus-visible .feature-zone { --phase-delay: var(--enter-delay); }

@media (hover: hover) and (pointer: fine) {
  .features .feature:hover {
    --feature-active: 1;
    --feature-title: #fff;
    --feature-description: #e2e5f3;
    --feature-copy: #e2e6f5;
    --feature-caption: #c0b8ff;
    --feature-label: #fff;
    --feature-number-bg: #ffffff1a;
    --feature-number-ink: #d5ceff;
    --feature-divider: #ffffff20;
    transform: translateY(-6px);
    border-color: #9f92f0;
    box-shadow: 0 18px 44px #372d7129, 0 3px 10px #6354ee0d;
  }
  .feature:hover .feature-zone { --phase-delay: var(--enter-delay); }
}

/* Layered illumination stays behind the interface and never dims its text. */
.product-section {
  position: relative;
  isolation: isolate;
  background: #111526;
}
.product-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 24% 62%, #6f50ed21, transparent 51%),
    radial-gradient(ellipse at 89% 53%, #49b1da14, transparent 45%);
}
.interface-stage { position: relative; isolation: isolate; }
.interface-stage::before {
  content: "";
  position: absolute;
  inset: -12px -10px;
  z-index: -1;
  pointer-events: none;
  border-radius: 30px;
  background: linear-gradient(125deg, #8066ff85, #5c69e84d 48%, #55c8e85c);
  filter: blur(34px);
  opacity: .66;
  animation: interface-glow 7s ease-in-out infinite alternate;
}
.interface-stage .demo-window {
  border-color: #b0a4ff80;
  box-shadow:
    0 0 0 1px #a399ff1c,
    0 0 28px #a28bff2b,
    0 0 78px #795bf529,
    0 24px 65px #06081280;
}
.demo-tabs button[aria-selected="true"] {
  box-shadow: 0 0 23px #8b73ff40;
}
.product-section .privacy-caption { position: relative; }

@keyframes interface-glow {
  from { opacity: .5; transform: scale(.99); }
  to { opacity: .83; transform: scale(1.012); }
}

@media (max-width: 1100px) {
  .features .feature { --card-pad: 25px; }
}
@media (max-width: 800px) {
  .features .feature { --card-pad: 28px; }
}
@media (max-width: 560px) {
  body::before { background-size: auto, auto, auto, 48px 48px, 48px 48px; }
  .features .feature { --card-pad: 26px; }
  .feature-intro { padding-bottom: 21px; }
  .feature-functions { padding-bottom: 16px; }
  .feature-outcome { padding-block: 17px 22px; }
  .interface-stage::before { inset: -6px 0; filter: blur(22px); }
  .interface-stage .demo-window { box-shadow: 0 0 24px #a28bff38, 0 14px 45px #06081266; }
}
@media (prefers-reduced-motion: reduce) {
  .features .feature,
  .feature-zone::after,
  .feature-zone *,
  .feature-zone *::before { transition: none !important; }
  .features .feature:hover { transform: none; }
  .interface-stage::before { animation: none; opacity: .66; transform: none; }
}

/* Callback dialog follows the same blue-violet palette as the landing page. */
button.header-contact { font: inherit; font-size: 14px; font-weight: 600; color: inherit; background: #ffffffb8; cursor: pointer; }
.nav-callback { display: none; border: 0; background: transparent; color: #6354ee; font: inherit; font-weight: 600; cursor: pointer; text-align: left; padding: 0; }
@media (max-width: 1100px) {
  .nav-callback { display: block; padding: 14px 0; }
  .header nav { display: none; position: absolute; top: calc(100% - 1px); left: 0; right: 0; padding: 20px; background: #fff; border-bottom: 1px solid var(--line); font-size: 16px; }
  .header nav.open { display: flex; flex-direction: column; gap: 0; }
  .header nav a { padding: 14px 0; }
  .menu-toggle { border: 1px solid var(--line); width: 42px; height: 40px; border-radius: 8px; background: #fff; display: flex; justify-content: center; flex-direction: column; gap: 6px; padding: 11px; }
  .menu-toggle span { display: block; height: 2px; background: var(--ink); width: 18px; }
}
body.callback-open { overflow: hidden; }
.callback-dialog {
  width: min(480px, calc(100% - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 36px;
  border: 1px solid #e0dcfc;
  border-radius: 24px;
  color: #151827;
  background: radial-gradient(ellipse at top right, #ede9ff, transparent 55%), #fff;
  box-shadow: 0 24px 100px #0d123955, 0 0 50px #8873ff22;
  overflow-y: auto;
}
.callback-dialog::backdrop { background: #0e14256b; backdrop-filter: blur(7px); }
.callback-dialog[open] { animation: callback-enter .24s ease both; }
.callback-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #eeecf8; color: #53546d; font-family: inherit; line-height: 1; font-size: 28px; cursor: pointer; }
.callback-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 24px; background: #6553ed; color: #fff; font-size: 26px; box-shadow: 0 6px 24px #6955ed35; }
.callback-heading .eyebrow { font-size: 10px; line-height: 1.6; margin: 0 0 12px; }
.callback-heading h2 { font-size: clamp(27px, 7vw, 34px); letter-spacing: -1px; margin: 0 0 14px; }
.callback-heading > p:last-child { color: #657086; font-size: 15px; line-height: 1.65; margin: 0 0 26px; }
.callback-field { display: block; font-size: 14px; font-weight: 600; margin: 0 0 18px; }
.callback-field input { display: block; width: 100%; margin-top: 9px; padding: 14px 15px; border: 1px solid #d9deed; border-radius: 10px; background: #ffffffde; color: #151827; font: inherit; font-size: 16px; font-weight: 400; }
.callback-field input::placeholder { color: #8990a2; }
.callback-field input:focus { outline: 3px solid #7965ec30; border-color: #7965ec; }
.callback-field small { display: block; margin-top: 7px; font-size: 12px; color: #697185; font-weight: 400; }
.callback-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.65; color: #606a7f; margin: 22px 0; cursor: pointer; }
.callback-consent input { width: 17px; height: 17px; flex-shrink: 0; margin: 2px 0 0; accent-color: #6553ed; }
.callback-submit { width: 100%; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.callback-submit:disabled { opacity: .65; cursor: wait; }
.callback-status { margin: 14px 0 0; color: #a1343a; font-size: 14px; line-height: 1.6; }
.callback-status:empty { display: none; }
.callback-status[data-state="success"] { color: #21624f; padding: 14px; background: #edf7f2; border: 1px solid #cbe4d8; border-radius: 10px; }
.callback-direct { font-size: 12px; color: #687187; text-align: center; line-height: 1.7; margin: 22px 0 0; }
.callback-direct a { color: #3e365f; white-space: nowrap; }
.callback-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@keyframes callback-enter { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) { .callback-dialog { padding: 28px 24px; border-radius: 20px; } }
@media (prefers-reduced-motion: reduce) { .callback-dialog[open] { animation: none; } }