/*
  DESIGN BRIEF — LYVEXA
  Primary benchmark: https://decagon.ai/

  Structure: announcement + compact nav → cinematic contained hero → typography-led
  platform statement → tabbed product console → dark sticky capability narrative →
  channel stage → asymmetric technology modules → oversized closing CTA → deep footer.
  Hero: left-weighted headline over an atmospheric pale-lilac scene; no generic neon orbs.
  Visual rhythm: generous light bands interrupted by one near-black section and an inset CTA.
  Components: pill CTAs, large soft radii, thin ink borders, editorial labels, interface diagrams.
  Motion: 700ms fade/translate reveals, calm cubic easing, restrained hover translation.
  Fonts: Manrope display + DM Sans body; rounded geometric, high-contrast hierarchy.
  The palette below is derived from Decagon's black-on-lavender visual logic and adapted
  into Lyvexa's own warmer violet, celadon and coral identity.
*/

:root {
  --color-bg: #f4f3f0;
  --color-bg-alt: #e5e1ff;
  --color-surface: #fbfaf7;
  --color-surface-soft: #eeecff;
  --color-text: #11110f;
  --color-text-muted: #626159;
  --color-accent: #7568ef;
  --color-accent-hover: #5f52dc;
  --color-accent-soft: #cfc9ff;
  --color-coral: #ff8e78;
  --color-mint: #b9e8d4;
  --color-dark: #151515;
  --color-dark-soft: #22221f;
  --color-border: rgba(17, 17, 15, 0.18);
  --color-border-dark: rgba(255, 255, 255, 0.18);
  --font-display: "Manrope", "Arial", sans-serif;
  --font-body: "DM Sans", "Arial", sans-serif;
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-lg: 34px;
  --radius-pill: 999px;
  --space-section: clamp(6rem, 10vw, 10rem);
  --container: 1180px;
  --transition-base: 300ms cubic-bezier(.22, .72, .25, 1);
  --transition-reveal: 700ms cubic-bezier(.2, .75, .25, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--color-text);
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }
button, input { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.container { width: min(calc(100% - 48px), var(--container)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; z-index: 1000; top: 12px; left: 12px; padding: 10px 18px;
  background: #fff; border-radius: var(--radius-pill); transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--color-coral); outline-offset: 3px; }

.eyebrow {
  margin: 0 0 1.25rem; font-family: var(--font-display); font-size: .72rem;
  line-height: 1; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
}
h1, h2, h3 { margin: 0; font-family: var(--font-display); letter-spacing: -.045em; line-height: 1.02; }
h1 { font-size: clamp(3.6rem, 7.4vw, 7.1rem); font-weight: 600; }
h2 { font-size: clamp(2.7rem, 5.5vw, 5.2rem); font-weight: 500; }
h3 { font-size: clamp(1.5rem, 2.2vw, 2.15rem); font-weight: 600; }
p { margin-top: 0; }

.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px;
  padding: .75rem 1.45rem; border: 1px solid var(--color-text); border-radius: var(--radius-pill);
  background: transparent; font-weight: 600; cursor: pointer; transition: transform var(--transition-base),
  background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
}
.button:hover { transform: translateY(-2px); }
.button--dark { color: #fff; background: var(--color-dark); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.button--dark:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.button--ghost { background: rgba(255,255,255,.24); }
.button--ghost:hover { background: rgba(255,255,255,.64); }
.button--light { color: var(--color-dark); background: #fff; border-color: #fff; }
.button--outline { margin-top: 2.25rem; }
.button--small { min-height: 42px; padding: .55rem 1.15rem; font-size: .9rem; }
.text-link {
  display: inline-flex; gap: .7rem; align-items: center; padding: 0 0 .3rem;
  border: 0; border-bottom: 1px solid currentColor; background: transparent; font-weight: 600; cursor: pointer;
}
.text-link span { transition: transform var(--transition-base); }
.text-link:hover span { transform: translate(3px, -3px); }

.announcement {
  display: flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 48px;
  background: var(--color-surface); font-size: .77rem; text-align: center; position: relative;
}
.announcement__close {
  position: absolute; right: 18px; top: 50%; translate: 0 -50%; border: 0; background: none;
  cursor: pointer; font-size: 1.2rem; line-height: 1;
}
.site-header {
  position: absolute; z-index: 100; top: 36px; left: 0; width: 100%;
  transition: background var(--transition-base), box-shadow var(--transition-base);
}
.site-header.is-sticky {
  position: fixed; top: 0; background: rgba(244,243,240,.9);
  box-shadow: 0 1px 0 var(--color-border); backdrop-filter: blur(16px);
}
.nav { min-height: 90px; display: flex; align-items: center; gap: clamp(1.5rem, 4vw, 4.8rem); }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.nav__menu { display: flex; align-items: center; gap: clamp(1.1rem, 2.4vw, 2rem); margin-right: auto; }
.nav__menu a, .nav__contact { font-size: .87rem; font-weight: 500; }
.nav__menu a { position: relative; }
.nav__menu a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform var(--transition-base);
}
.nav__menu a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 1.2rem; }
.nav__toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--color-border); border-radius: 50%; background: transparent; }

.hero {
  position: relative; min-height: min(900px, calc(100vh - 12px)); margin: 8px;
  overflow: hidden; border-radius: var(--radius-md); background:
  linear-gradient(108deg, #afaaf4 0%, #cfcdfb 48%, #eeecff 75%, #fff 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .34;
  background-image: radial-gradient(rgba(255,255,255,.9) .7px, transparent .8px);
  background-size: 37px 37px; mask-image: linear-gradient(to bottom, transparent 15%, #000 75%);
}
.hero__content {
  position: relative; z-index: 3; padding-top: clamp(12rem, 22vh, 15rem);
  padding-bottom: 9rem;
}
.hero__content > * { max-width: 710px; }
.hero__lede { max-width: 510px; margin: 2rem 0 0; font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.1rem; }
.hero__scene { position: absolute; z-index: 1; inset: 0; }
.hero__horizon {
  position: absolute; left: -5%; bottom: 0; width: 110%; height: 17%;
  background: linear-gradient(8deg, #d39cb9, #f2c8d6 68%, rgba(255,255,255,.4));
  clip-path: polygon(0 34%, 100% 0, 100% 100%, 0 100%);
}
.hero__orb {
  position: absolute; right: 15%; top: 36%; width: clamp(110px, 14vw, 180px); aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle at 36% 30%, #fff, #ffe8dc 35%, #cbbff1 73%, #9e95de);
  box-shadow: 0 0 90px rgba(255,255,255,.78); opacity: .83;
}
.hero__figure { position: absolute; right: 6%; bottom: 6%; width: 130px; height: 290px; opacity: .23; }
.hero__figure-head { position: absolute; top: 0; left: 46px; width: 42px; height: 49px; border-radius: 48%; background: #3a3540; }
.hero__figure-body { position: absolute; top: 42px; left: 20px; width: 96px; height: 245px; border-radius: 45% 45% 12% 12%; background: linear-gradient(#57505b, #29252c); transform: skew(-5deg); }
.hero__signal { position: absolute; right: 10%; top: 26%; width: 260px; opacity: .4; }
.hero__signal path { stroke: #fff; stroke-width: 1.2; stroke-dasharray: 5 8; }
.hero__signal circle { fill: var(--color-coral); stroke: #fff; stroke-width: 2; }
.hero__scroll {
  position: absolute; z-index: 5; left: 50%; bottom: 13px; display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 50%; background: var(--color-bg); font-size: 1.4rem;
  transition: transform var(--transition-base);
}
.hero__scroll:hover { transform: translateY(4px); }

.section-intro { max-width: 820px; }
.section-intro > p:last-child { max-width: 680px; margin: 2rem 0 0; color: var(--color-text-muted); font-size: 1.12rem; }
.section-intro--wide { display: grid; grid-template-columns: 1fr 2fr; max-width: none; align-items: start; }
.section-intro--wide .eyebrow { grid-row: span 2; }
.section-intro--wide > p:last-child { max-width: 580px; }
.platform { padding: var(--space-section) 0; background: var(--color-bg); }
.platform-console {
  margin-top: 4.5rem; overflow: hidden; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 24px 60px rgba(22,20,14,.08);
}
.platform-console__rail { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--color-border); }
.platform-tab {
  display: flex; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem; border: 0;
  border-right: 1px solid var(--color-border); background: transparent; cursor: pointer; text-align: left;
}
.platform-tab:last-child { border-right: 0; }
.platform-tab span { color: var(--color-text-muted); font-size: .75rem; }
.platform-tab.is-active { background: var(--color-dark); color: #fff; }
.platform-tab.is-active span { color: var(--color-mint); }
.platform-console__panel {
  min-height: 500px; display: grid; grid-template-columns: .82fr 1.18fr; gap: 4rem;
  align-items: center; padding: clamp(2rem, 5vw, 5rem);
}
.console-copy h3 { max-width: 450px; font-size: clamp(2rem, 3.2vw, 3.4rem); }
.console-copy > p:not(.eyebrow) { max-width: 430px; margin: 1.5rem 0 2rem; color: var(--color-text-muted); }
.workflow, .metric-map, .experiment {
  padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #f2f0ed; box-shadow: 0 22px 40px rgba(32,29,18,.08);
}
.workflow__top { display: flex; align-items: center; gap: 6px; padding: .45rem .5rem 1rem; font-size: .72rem; }
.workflow__top span { width: 7px; height: 7px; border-radius: 50%; background: #bcb8ae; }
.workflow__top b { margin-left: auto; margin-right: auto; }
.workflow__step {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem;
  padding: 1rem; border: 1px solid rgba(17,17,15,.12); border-radius: var(--radius-sm); background: #fff;
}
.workflow__step i {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-accent-soft); font-style: normal; font-size: .75rem; font-weight: 700;
}
.workflow__step span { display: flex; flex-direction: column; }
.workflow__step small { color: var(--color-text-muted); }
.workflow__step em {
  padding: .25rem .55rem; border-radius: var(--radius-pill); background: #ddf5e9;
  color: #287558; font-size: .68rem; font-style: normal;
}
.workflow__line { width: 1px; height: 18px; margin-left: 31px; background: var(--color-border); }
.metric-map { display: grid; gap: .8rem; }
.metric-map > div { display: grid; grid-template-columns: 1fr auto; gap: .8rem; padding: 1.2rem; background: #fff; border-radius: var(--radius-sm); }
.metric-map b { font-size: 1.4rem; }
.metric-map i { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--color-accent) var(--score), #e6e3dc var(--score)); }
.experiment { padding: 1.5rem; }
.experiment__header { display: flex; justify-content: space-between; padding-bottom: 1.2rem; font-size: .8rem; }
.experiment__header span { color: var(--color-text-muted); }
.experiment__variant { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-top: .7rem; padding: 1.15rem; border-radius: var(--radius-sm); background: #fff; }
.experiment__variant i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e9e6df; font-style: normal; }
.experiment__variant.is-winner { background: #e1f4eb; outline: 1px solid #8bc6aa; }
.experiment__note { padding-top: 1rem; color: #267357; text-align: right; font-size: .8rem; }

.capabilities { padding: var(--space-section) 0; background: var(--color-dark); color: #fff; }
.capabilities__layout { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(4rem, 9vw, 9rem); align-items: start; }
.capabilities__sticky { position: sticky; top: 130px; }
.capabilities__sticky h2 { max-width: 560px; font-size: clamp(2.8rem, 4.4vw, 4.7rem); }
.capabilities__sticky > p:not(.eyebrow) { max-width: 430px; margin: 1.7rem 0 2rem; color: #b5b4ae; }
.capability-list { border-top: 1px solid var(--color-border-dark); }
.capability-row {
  position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 1.2rem;
  min-height: 240px; padding: 2.3rem 0; border-bottom: 1px solid var(--color-border-dark); overflow: hidden;
}
.capability-row::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(117,104,239,.18));
  transform: translateX(-102%); transition: transform 550ms ease;
}
.capability-row:hover::before { transform: translateX(0); }
.capability-row__number { color: #7d7b75; font-size: .75rem; }
.capability-row h3 { margin-bottom: 1rem; }
.capability-row p { max-width: 480px; color: #aaa9a2; }
.capability-row__mark { align-self: end; color: var(--color-mint); font-size: 2.8rem; }

.solutions { padding: var(--space-section) 0; background: var(--color-surface-soft); }
.channel-stage { position: relative; margin-top: 4.2rem; }
.channel-stage__tabs { display: flex; border-bottom: 1px solid var(--color-border); }
.channel-tab {
  flex: 1; padding: 1.2rem; border: 0; border-bottom: 3px solid transparent;
  background: transparent; color: var(--color-text-muted); cursor: pointer; font-weight: 600;
}
.channel-tab.is-active { border-bottom-color: var(--color-text); color: var(--color-text); }
.channel-stage__visual {
  position: relative; min-height: 570px; overflow: hidden; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(145deg, #afa8ec, #d9d4fb 55%, #f1c5c3);
}
.channel-art { display: none; min-height: 570px; padding: 4rem; align-items: center; justify-content: center; }
.channel-art.is-active { display: flex; }
.channel-caption {
  position: absolute; left: 3rem; bottom: 2.5rem; display: flex; flex-direction: column;
  max-width: 390px; padding: 1.25rem 1.4rem; border-radius: var(--radius-md); background: rgba(255,255,255,.74); backdrop-filter: blur(12px);
}
.channel-caption strong { font-family: var(--font-display); font-size: 1.15rem; }
.channel-caption span { margin-top: .3rem; color: var(--color-text-muted); font-size: .9rem; }
.voice-ring {
  position: relative; display: grid; place-items: center; width: 260px; aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,.8); border-radius: 50%; box-shadow: 0 0 0 40px rgba(255,255,255,.12), 0 0 0 80px rgba(255,255,255,.08);
}
.voice-ring span { position: absolute; width: 3px; height: 80px; border-radius: 5px; background: var(--color-text); }
.voice-ring span:nth-child(1) { transform: translateX(-15px) scaleY(.55); }
.voice-ring span:nth-child(2) { transform: scaleY(1.15); }
.voice-ring span:nth-child(3) { transform: translateX(15px) scaleY(.75); }
.voice-ring i { position: absolute; bottom: 48px; padding: 3px 9px; border-radius: 10px; background: var(--color-mint); font-size: .7rem; font-style: normal; }
.chat-stack { width: min(560px, 80%); display: flex; flex-direction: column; gap: 1rem; }
.chat-stack p { width: fit-content; max-width: 80%; margin: 0; padding: 1rem 1.2rem; border-radius: 18px 18px 18px 4px; background: #fff; box-shadow: 0 8px 25px rgba(30,24,40,.1); }
.chat-stack p:nth-child(2) { align-self: flex-end; border-radius: 18px 18px 4px 18px; background: var(--color-dark); color: #fff; }
.mail-card { width: min(570px, 82%); padding: 2.2rem; border-radius: var(--radius-md); background: #fff; box-shadow: 0 22px 50px rgba(30,24,40,.15); }
.mail-card span { display: block; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .8rem; }
.mail-card b { display: block; margin: 1.5rem 0 .8rem; font-family: var(--font-display); font-size: 1.5rem; }
.channel-stage__link { margin-top: 1.4rem; }

.technology { padding: var(--space-section) 0; background: var(--color-bg); }
.technology__headline { display: grid; grid-template-columns: .6fr 1.4fr; align-items: start; margin-bottom: 4rem; }
.technology__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tech-feature { min-height: 360px; padding: 2.2rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.tech-feature--large { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr .8fr; align-items: center; min-height: 520px; background: var(--color-bg-alt); }
.tech-feature > span, .tech-feature--large > div:last-child > span { display: block; margin-bottom: 1.5rem; color: var(--color-text-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .09em; }
.tech-feature p { max-width: 460px; margin: 1.2rem 0 0; color: var(--color-text-muted); }
.tech-feature__icon { margin-bottom: 5rem; font-family: var(--font-display); font-size: 4rem; color: var(--color-accent); }
.trust-graph { position: relative; height: 360px; }
.trust-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.trust-graph path { fill: none; stroke: rgba(17,17,15,.32); stroke-width: 1.2; stroke-dasharray: 5 7; }
.node {
  position: absolute; z-index: 2; padding: .75rem 1rem; border: 1px solid var(--color-border);
  border-radius: var(--radius-pill); background: #fff; font-size: .78rem; box-shadow: 0 9px 20px rgba(20,18,30,.08);
}
.node--a { left: 2%; top: 19%; }
.node--b { left: 36%; top: 49%; background: var(--color-mint); }
.node--c { right: 16%; top: 14%; background: var(--color-coral); }
.node--d { right: 4%; bottom: 17%; background: var(--color-dark); color: #fff; }

.cta { padding: 0 8px 8px; background: var(--color-bg); }
.cta__inner {
  position: relative; min-height: 560px; display: flex; flex-direction: column; justify-content: center;
  overflow: hidden; padding: clamp(2.5rem, 7vw, 6.5rem); border-radius: var(--radius-lg);
  background: linear-gradient(125deg, #bdb7f4, #eeeafd 54%, #ffc4b7);
}
.cta__inner h2 { max-width: 820px; }
.cta__actions { display: flex; gap: .75rem; margin-top: 2.2rem; }
.cta__pulse { position: absolute; right: 7%; top: 50%; width: 230px; aspect-ratio: 1; transform: translateY(-50%); border: 1px solid rgba(255,255,255,.8); border-radius: 50%; }
.cta__pulse::before, .cta__pulse::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; }
.cta__pulse::before { inset: 25px; }
.cta__pulse::after { inset: 58px; }
.cta__pulse span { position: absolute; inset: 82px; border-radius: 50%; background: var(--color-dark); }
.cta__pulse i { position: absolute; top: 45%; left: -25%; width: 150%; height: 1px; background: rgba(17,17,15,.35); rotate: -14deg; }

.footer { padding: 6rem 0 1.5rem; background: var(--color-dark); color: #fff; }
.footer__top { display: grid; grid-template-columns: .85fr 1.15fr; gap: 5rem; }
.footer__brand p { margin-top: 1.5rem; color: #aaa9a2; font-size: 1.05rem; }
.footer__brand img { filter: invert(1); }
.footer__links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.footer__links h3 { margin-bottom: 1.5rem; color: #77766f; font-family: var(--font-body); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
.footer__links a, .footer__links button {
  display: block; width: fit-content; margin: .8rem 0; padding: 0; border: 0;
  background: none; color: #deddd7; font-size: .88rem; cursor: pointer;
}
.footer__links a:hover, .footer__links button:hover { color: var(--color-mint); }
.footer__bottom {
  display: flex; justify-content: space-between; margin-top: 6rem; padding-top: 1.2rem;
  border-top: 1px solid var(--color-border-dark); color: #77766f; font-size: .72rem;
}

.modal {
  position: fixed; z-index: 500; inset: 0; display: grid; place-items: center; padding: 24px;
}
.modal__backdrop { position: absolute; inset: 0; background: rgba(13,13,12,.65); backdrop-filter: blur(8px); }
.modal__panel {
  position: relative; z-index: 1; width: min(590px, 100%); padding: clamp(2rem, 5vw, 4rem);
  border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: 0 30px 90px rgba(0,0,0,.28);
}
.modal__panel h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.modal__panel > p:not(.eyebrow) { margin: 1.5rem 0 2rem; color: var(--color-text-muted); }
.modal__close {
  position: absolute; top: 1.2rem; right: 1.2rem; display: grid; place-items: center;
  width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 50%;
  background: transparent; cursor: pointer; font-size: 1.4rem;
}

.legal-page { background: var(--color-surface); }
.legal-header { padding: 1.2rem 0; border-bottom: 1px solid var(--color-border); }
.legal-header .container { display: flex; align-items: center; justify-content: space-between; }
.legal-header a:last-child { font-size: .88rem; text-decoration: underline; }
.legal-main { width: min(calc(100% - 48px), 780px); margin: 0 auto; padding: 7rem 0; }
.legal-main h1 { margin-bottom: 1rem; font-size: clamp(3rem, 7vw, 5.8rem); }
.legal-main .legal-updated { margin-bottom: 4rem; color: var(--color-text-muted); }
.legal-main h2 { margin: 2.6rem 0 1rem; font-size: 1.7rem; letter-spacing: -.02em; }
.legal-main p, .legal-main li { color: #4f4e48; }
.legal-main a { text-decoration: underline; }
.legal-footer { padding: 1.5rem 0; border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: .8rem; }