/* ==========================================================================
   Orbitly homepage — rebuilt from a REA reverse-engineering pass of hubspot.com
   Structure, spacing, motion timings and component behaviour mirror the
   observed site; palette, brand, copy and imagery are original.
   ========================================================================== */

/* ---------- Design tokens (role-mapped from the observed token system) ---------- */
:root {
  /* raw palette */
  --violet-01: #f8f7ff;
  --violet-02: #f3f0ff;
  --violet-03: #ece7ff;
  --violet-04: #ddd5ff;
  --violet-05: #cbbfff;
  --violet-06: #a99bff;
  --violet-07: #8a76ff;
  --violet-08: #5b3df5;
  --violet-09: #4526d9;
  --violet-10: #3418aa;
  --violet-12: #22107a;
  --violet-13: #180b56;
  --aqua-03: #d4f6ef;
  --aqua-06: #6fdcc8;
  --aqua-08: #12a893;
  --aqua-09: #0b8a79;
  --sky-03: #dceeff;
  --sky-05: #a9d3ff;
  --rose-05: #ffc6dc;
  --ink-01: #fbfbfe;
  --ink-02: #f5f4fa;
  --ink-03: #eeedf5;
  --ink-05: #cfcce0;
  --ink-07: #9a96b0;
  --ink-12: #241f3d;
  --ink-13: #17142b;
  --ink-14: #15122a;

  /* semantic roles */
  --background-01: var(--ink-01);
  --background-02: var(--ink-02);
  --background-white: #ffffff;
  --container-01: #ffffff;
  --container-02: rgba(255, 255, 255, 0.46);
  --container-inverse-01: var(--ink-13);
  --text-01: var(--ink-13);
  --text-02: rgba(23, 20, 43, 0.64);
  --text-on-color: #ffffff;
  --text-brand: var(--violet-08);
  --text-placeholder: rgba(23, 20, 43, 0.42);
  --border-01: var(--ink-13);
  --border-02: rgba(23, 20, 43, 0.47);
  --border-03: rgba(23, 20, 43, 0.11);
  --divider-01: rgba(23, 20, 43, 0.11);
  --hover-01: rgba(23, 20, 43, 0.05);
  --hover-02: rgba(23, 20, 43, 0.06);
  --pressed-01: rgba(23, 20, 43, 0.08);
  --focus-01: var(--aqua-09);
  --success-01: #0a8a52;
  --success-bg: #d6f5e4;
  --error-01: #d42a4b;
  --error-bg: #ffe0e6;
  --warning-01: #b7791f;
  --warning-bg: #fff2d6;

  --btn-primary-fill: var(--violet-08);
  --btn-primary-hover: var(--violet-09);
  --btn-primary-pressed: var(--violet-10);
  --btn-primary-text: #ffffff;
  --btn-secondary-fill: #ffffff;
  --btn-secondary-hover: var(--violet-03);
  --btn-secondary-pressed: var(--violet-05);
  --btn-secondary-text: var(--violet-08);
  --btn-secondary-text-hover: var(--violet-09);
  --btn-secondary-text-pressed: var(--violet-10);
  --btn-tertiary-fill: var(--ink-13);
  --btn-tertiary-hover: rgba(23, 20, 43, 0.82);

  --link-underline: var(--violet-08);
  --overlay-nav: rgba(28, 20, 78, 0.5);
  --overlay-modal: rgba(16, 12, 40, 0.72);
  --footer-bg: var(--ink-14);
  --cta-band-bg: var(--violet-13);
  --play-fill: rgba(23, 20, 43, 0.47);

  /* type */
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --fw-book: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* shape + layout */
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-container: 16px;
  --radius-round: 9999px;
  --content-max: 1220px;
  --gutter: 16px;
  --nav-h: 78px;
  --utility-h: 50px;

  /* motion (observed: .35s ease for cards, .3s ease-in-out for carousel/links, .15s linear for buttons) */
  --dur-fast: 0.15s;
  --dur-medium: 0.35s;
  --ease-standard: ease;
  --ease-emphasized: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (min-width: 600px) {
  :root { --gutter: 32px; }
}
@media (max-width: 1080px) {
  :root { --nav-h: 64px; }
}

/* High contrast mode (mirrors the site's accessibility switch) */
html.high-contrast {
  --text-02: rgba(0, 0, 0, 0.86);
  --border-03: rgba(0, 0, 0, 0.5);
  --divider-01: rgba(0, 0, 0, 0.5);
  --btn-primary-fill: #1a0aa8;
  --btn-primary-hover: #000000;
  --btn-primary-pressed: #000000;
  --btn-secondary-text: #1a0aa8;
  --btn-secondary-hover: #dcebff;
  --text-brand: #1a0aa8;
  --link-underline: #1a0aa8;
  --text-01: #000000;
}
html.high-contrast .agents .carousel__slide { opacity: 1 !important; }
html.high-contrast .evfc__play { opacity: 1; }
html.high-contrast a { text-decoration-thickness: 2px; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--background-white);
  color: var(--text-01);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: var(--fw-regular);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.scroll-locked { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
p { margin: 0 0 1rem; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-medium); }
ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--focus-01); outline-offset: 2px; }
[hidden] { display: none !important; }
section[id], #top { scroll-margin-top: calc(var(--nav-h) + 8px); }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
body.menu-open .chat { display: none; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.icon--fill { fill: currentColor; stroke: none; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 1000;
  background: var(--container-01); padding: 8px 14px; border-radius: var(--radius-m);
  box-shadow: 0 2px 8px rgba(0,0,0,.18); font-weight: var(--fw-medium);
  transition: top .1s ease-in;
}
.skip-link:focus { top: 8px; }

/* ---------- Typography ---------- */
.display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-book);
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);
  line-height: 1.07;
  letter-spacing: -0.012em;
  font-optical-sizing: auto;
}
.display-2 {
  font-family: var(--font-display);
  font-weight: var(--fw-book);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.display-3 {
  font-family: var(--font-display);
  font-weight: var(--fw-book);
  font-size: clamp(2rem, 1.7rem + 1vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.008em;
}
.h3 { font-size: 1.5rem; line-height: 1.42; font-weight: var(--fw-medium); }
.h5 { font-size: 1.125rem; line-height: 1.55; font-weight: var(--fw-medium); }
.eyebrow {
  font-size: 0.875rem; line-height: 1.57; font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 1rem;
}
.lead { font-size: 1.125rem; line-height: 1.78; font-weight: var(--fw-book); }
.brand-dot { color: var(--text-brand); }
.text-02 { color: var(--text-02); }

/* ---------- Buttons (observed: radius 8px, bg/color .15s linear) ---------- */
.btn {
  --btn-bg: var(--btn-primary-fill);
  --btn-bg-hover: var(--btn-primary-hover);
  --btn-bg-pressed: var(--btn-primary-pressed);
  --btn-color: var(--btn-primary-text);
  --btn-color-hover: var(--btn-color);
  --btn-color-pressed: var(--btn-color-hover);
  --btn-border: transparent;
  --btn-border-hover: var(--btn-border);
  --btn-pad: 0.75rem 1.5rem;
  --btn-size: 1rem;
  --btn-lh: 1.5;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: var(--btn-pad);
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-m);
  background: var(--btn-bg);
  color: var(--btn-color);
  font-size: var(--btn-size); line-height: var(--btn-lh); font-weight: var(--fw-semibold);
  text-align: center; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) linear, color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.btn:hover, .btn:focus-visible { background: var(--btn-bg-hover); color: var(--btn-color-hover); border-color: var(--btn-border-hover); }
.btn:active { background: var(--btn-bg-pressed); color: var(--btn-color-pressed); }
.btn:disabled, .btn[aria-disabled="true"] {
  background: rgba(23,20,43,.04); color: rgba(23,20,43,.28); border-color: transparent; cursor: not-allowed;
}
.btn--secondary {
  --btn-bg: var(--btn-secondary-fill);
  --btn-bg-hover: var(--btn-secondary-hover);
  --btn-bg-pressed: var(--btn-secondary-pressed);
  --btn-color: var(--btn-secondary-text);
  --btn-color-hover: var(--btn-secondary-text-hover);
  --btn-color-pressed: var(--btn-secondary-text-pressed);
  --btn-border: currentColor;
  --btn-border-hover: var(--btn-secondary-text-hover);
}
.btn--outline-dark {
  --btn-bg: transparent;
  --btn-bg-hover: var(--hover-01);
  --btn-bg-pressed: var(--pressed-01);
  --btn-color: var(--text-01);
  --btn-border: var(--border-01);
}
.btn--outline-light {
  --btn-bg: transparent;
  --btn-bg-hover: rgba(255,255,255,.1);
  --btn-bg-pressed: rgba(255,255,255,.18);
  --btn-color: #ffffff;
  --btn-border: #ffffff;
}
.btn--light {
  --btn-bg: #ffffff;
  --btn-bg-hover: var(--ink-03);
  --btn-bg-pressed: var(--ink-05);
  --btn-color: var(--ink-13);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-bg-hover: var(--hover-01);
  --btn-bg-pressed: var(--pressed-01);
  --btn-color: var(--text-01);
}
.btn--sm { --btn-pad: 0.5rem 1rem; --btn-size: 0.875rem; --btn-lh: 1.57; }
.btn--lg { --btn-pad: 1rem 2.5rem; --btn-size: 1.125rem; --btn-lh: 1.78; }
.btn--block { width: 100%; }
.btn .spinner { width: 18px; height: 18px; }

.cta-group { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.cta-group--center { justify-content: center; }
@media (max-width: 599px) {
  .cta-group .btn--lg { flex-grow: 1; }
}

/* text link — underline in brand colour, offset eases on hover (.3s ease-in-out) */
.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--text-01); font-weight: var(--fw-semibold);
  text-decoration: underline; text-decoration-color: var(--link-underline);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: text-underline-offset .3s ease-in-out;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.text-link:hover, .text-link:focus-visible { text-underline-offset: 2px; }
.text-link--sm { font-size: .875rem; }

.arrow-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: var(--fw-semibold); text-decoration: none; color: var(--text-01);
}
.arrow-link .icon { width: 16px; height: 16px; transition: transform .2s ease-in-out; }

.round-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--container-01); color: var(--text-01);
  transition: background-color .15s linear;
  position: relative;
}
.round-btn::after { content: ""; position: absolute; inset: -4px; }
.round-btn:hover, .round-btn:focus-visible { background: var(--ink-03); }
.round-btn:active { background: var(--ink-05); }
.round-btn .icon { width: 50%; height: 50%; }
.round-btn--sm { width: 32px; height: 32px; }
.round-btn--sm .icon { width: 14px; height: 14px; }

/* tagline chip + dashed rule used by section headers */
.section-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.section-head__rule { flex: 1; height: 0; border-top: 1px dashed var(--border-03); }
.tagline {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .125rem .5rem; border: 1px solid var(--border-03); border-radius: var(--radius-s);
  background: var(--container-01); font-size: .875rem; font-weight: var(--fw-semibold); line-height: 1.75;
}
.tagline .icon { width: 14px; height: 14px; color: var(--text-brand); }
.section-split {
  display: grid; gap: 1rem 2rem; grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .section-split { grid-template-columns: 1fr 1fr; align-items: start; }
  .section-split > p { padding-left: 25%; }
}

.spinner { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ==========================================================================
   Cookie banner (fixed top, dark)
   ========================================================================== */
.cookie-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 400;
  background: var(--ink-12); color: #fff;
  box-shadow: 0 8px 24px rgba(10, 8, 30, .25);
  transform: translateY(-100%);
  transition: transform .4s var(--ease-emphasized);
}
.cookie-banner.is-visible { transform: translateY(0); }
.cookie-banner__inner {
  position: relative; max-width: 1110px; margin-inline: auto;
  padding: 14px 56px 18px var(--gutter);
  font-size: .8125rem; line-height: 1.5;
}
.cookie-banner__inner p { margin: 0 0 12px; }
.cookie-banner__inner a { color: #fff; }
.cookie-banner__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; }
.cookie-banner__actions .btn { min-width: 114px; }
.cookie-banner__manage {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; color: #fff;
  font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; font-size: .875rem;
}
.cookie-banner__close {
  position: absolute; top: 8px; right: 12px; width: 36px; height: 36px;
  border: 0; background: none; color: #fff; display: grid; place-items: center; border-radius: 50%;
}
.cookie-banner__close:hover { background: rgba(255,255,255,.12); }
.cookie-banner__close .icon { width: 18px; height: 18px; stroke-width: 2.5; }

/* ==========================================================================
   Utility nav
   ========================================================================== */
.utility-nav { background: var(--container-01); position: relative; z-index: 75; }
.utility-nav__inner { display: flex; align-items: center; justify-content: space-between; height: var(--utility-h); }
.utility-nav__group { display: flex; align-items: center; gap: 1.75rem; }
.utility-btn, .utility-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 0; border: 0; background: none;
  font-size: .8125rem; font-weight: var(--fw-semibold); line-height: 1.5; text-decoration: none; color: var(--text-01);
  border-radius: var(--radius-s);
}
.utility-btn:hover, .utility-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.utility-btn .icon, .utility-link .icon { width: 14px; height: 14px; }
.utility-btn .chev { width: 14px; height: 14px; transition: transform .2s ease; }
.utility-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* contrast switch */
.contrast-toggle {
  display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 4px 0;
  font-size: .8125rem; font-weight: var(--fw-semibold); line-height: 1.5;
}
.contrast-toggle__track {
  width: 22px; height: 13px; border: 1.5px solid var(--text-01); border-radius: 99px; position: relative;
  transition: background-color .2s ease;
}
.contrast-toggle__thumb {
  position: absolute; top: 1.5px; left: 1.5px; width: 7px; height: 7px; border-radius: 50%; background: var(--text-01);
  transition: transform .2s ease, background-color .2s ease;
}
.contrast-toggle[aria-checked="true"] .contrast-toggle__track { background: var(--text-01); }
.contrast-toggle[aria-checked="true"] .contrast-toggle__thumb { transform: translateX(9px); background: #fff; }

/* dropdowns */
.dropdown { position: relative; }
.dropdown-menu {
  position: absolute; top: calc(100% + 10px); left: -12px; min-width: 210px; z-index: 80;
  background: var(--container-01); border: 1px solid var(--border-03); border-radius: var(--radius-m);
  box-shadow: 0 12px 32px rgba(23, 20, 43, .12); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility 0s .18s;
}
.dropdown-menu--right { left: auto; right: -12px; }
.dropdown.is-open .dropdown-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s ease, transform .18s ease; }
.dropdown-menu::before {
  content: ""; position: absolute; top: -7px; left: 22px; width: 12px; height: 12px;
  background: var(--container-01); border-left: 1px solid var(--border-03); border-top: 1px solid var(--border-03);
  transform: rotate(45deg);
}
.dropdown-menu--right::before { left: auto; right: 22px; }
.dropdown-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  padding: 8px 12px; border: 0; background: none; border-radius: var(--radius-s);
  font-size: .875rem; line-height: 1.5; text-align: left; text-decoration: none; color: var(--text-01);
}
.dropdown-item:hover, .dropdown-item:focus-visible { background: var(--hover-01); }
.dropdown-item .check { width: 16px; height: 16px; color: var(--text-brand); visibility: hidden; }
.dropdown-item[aria-checked="true"] { font-weight: var(--fw-semibold); }
.dropdown-item[aria-checked="true"] .check { visibility: visible; }

/* search */
.site-search { position: relative; display: flex; align-items: center; }
.site-search__toggle {
  width: 32px; height: 32px; display: grid; place-items: center; border: 0; background: none; border-radius: 50%;
}
.site-search__toggle:hover { background: var(--hover-01); }
.site-search__toggle .icon { width: 17px; height: 17px; }
.site-search__field {
  position: absolute; right: 0; top: 50%; translate: 0 -50%;
  width: 0; overflow: hidden; opacity: 0;
  transition: width .3s var(--ease-emphasized), opacity .2s ease;
}
.site-search.is-open .site-search__field { width: 300px; opacity: 1; overflow: visible; }
.site-search__input {
  width: 100%; height: 36px; padding: 0 36px 0 14px;
  border: 1px solid var(--border-02); border-radius: var(--radius-round); background: var(--container-01);
  font-size: .875rem;
}
.site-search__input:focus { outline: 2px solid var(--focus-01); outline-offset: 1px; }
.site-search__close {
  position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 26px; height: 26px;
  display: grid; place-items: center; border: 0; background: none; border-radius: 50%;
}
.site-search__close .icon { width: 14px; height: 14px; }
.site-search__suggestions {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 90;
  background: var(--container-01); border: 1px solid var(--border-03); border-radius: var(--radius-m);
  box-shadow: 0 12px 32px rgba(23,20,43,.12); padding: 6px;
}
.site-search__suggestions li {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-s);
  font-size: .875rem; cursor: pointer;
}
.site-search__suggestions li .icon { width: 14px; height: 14px; color: var(--text-02); }
.site-search__suggestions li[aria-selected="true"], .site-search__suggestions li:hover { background: var(--hover-01); }
.site-search__suggestions mark { background: var(--violet-03); color: inherit; border-radius: 2px; }
.site-search__empty { padding: 10px; font-size: .875rem; color: var(--text-02); }

/* ==========================================================================
   Main nav (sticky after the utility bar scrolls away)
   ========================================================================== */
.main-nav {
  position: sticky; top: 0; z-index: 70;
  background: var(--container-01);
  transition: box-shadow .2s ease;
}
.main-nav.is-stuck { box-shadow: 0 2px 4px rgba(33, 33, 67, .12); }
.main-nav__inner { display: flex; align-items: center; height: var(--nav-h); gap: 2.75rem; }
.main-nav__ctas { margin-left: auto; display: flex; gap: 1rem; }

/* logo */
.logo {
  display: inline-flex; align-items: center; gap: 1px;
  color: var(--text-brand); text-decoration: none;
  font-weight: 700; font-size: 1.75rem; line-height: 1; letter-spacing: -0.035em;
}
.logo__o { position: relative; width: .72em; height: .72em; border: .14em solid currentColor; border-radius: 50%; margin-right: .03em; }
.logo__orbit { position: absolute; inset: -.3em; border-radius: 50%; animation: orbit 5s linear infinite; animation-play-state: paused; }
.logo__dot { position: absolute; top: 0; left: 50%; width: .24em; height: .24em; margin-left: -.12em; border-radius: 50%; background: var(--aqua-08); }
.logo:hover .logo__orbit, .logo:focus-visible .logo__orbit { animation-play-state: running; }
.logo--light { color: #fff; }
@keyframes orbit { to { transform: rotate(1turn); } }

.primary-nav__list { display: flex; align-items: center; gap: 1.75rem; }
.primary-nav__btn, .primary-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 0; border: 0; background: none;
  font-size: 1.0625rem; font-weight: var(--fw-semibold); line-height: 1.5; text-decoration: none; color: var(--text-01);
}
.primary-nav__btn .chev { width: 16px; height: 16px; transition: transform .2s ease; }
.primary-nav__btn:hover, .primary-nav__link:hover,
.primary-nav__item.is-open > .primary-nav__btn {
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
}
.primary-nav__item.is-open > .primary-nav__btn .chev { transform: rotate(180deg); }

/* mega panels: anchored to the nav bar, 20px inset, white with border */
.mega {
  position: absolute; left: 20px; right: 20px; top: 100%;
  background: var(--container-01); border-top: 1px solid var(--divider-01);
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  box-shadow: 0 24px 48px rgba(23, 20, 43, .14);
  padding: 24px 25px 36px;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s .2s;
  max-height: calc(100vh - var(--nav-h) - 24px); overflow: auto;
}
.primary-nav__item.is-open > .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .2s ease; }
.nav-overlay {
  position: fixed; inset: 0; z-index: 50; background: var(--overlay-nav);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s;
}
.nav-overlay.is-visible { opacity: 1; visibility: visible; transition: opacity .25s ease; }

.mega__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--divider-01); margin-bottom: 24px; }
.mega__title { font-size: 1.125rem; line-height: 1.55; font-weight: var(--fw-semibold); }
.mega__desc { margin: 4px 0 0; font-size: .875rem; color: var(--text-01); }
.mega__head-ctas { display: flex; gap: 16px; }
.mega-card-btn {
  display: inline-flex; align-items: center; gap: 12px; padding: 12px 24px;
  border: 2px solid var(--border-03); border-radius: var(--radius-m); background: var(--container-01);
  font-size: 1.0625rem; font-weight: var(--fw-semibold); text-decoration: none; color: var(--text-01);
  transition: background-color .15s linear, border-color .15s linear;
}
.mega-card-btn:hover { background: var(--hover-01); border-color: var(--border-02); }
.mega-card-btn .icon { width: 24px; height: 24px; color: var(--text-brand); }

.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 24px; }
.mega__grid--3 { grid-template-columns: repeat(3, 1fr); padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--divider-01); }
.mega-item { display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; padding: 10px; border-radius: var(--radius-m); transition: background-color .15s linear; }
.mega-item:hover { background: var(--hover-01); }
.mega-item__icon { width: 26px; height: 26px; color: var(--text-brand); grid-row: span 3; margin-top: 1px; }
.mega-item__title { font-size: 1rem; font-weight: var(--fw-semibold); line-height: 1.6; }
.mega-item__desc { font-size: .875rem; line-height: 1.6; margin: 2px 0 6px; }
.mega-item .text-link { font-size: .875rem; text-underline-offset: 4px; justify-self: start; }

/* solutions: vertical tabs sidebar */
.mega-solutions { display: grid; grid-template-columns: 240px 1fr; gap: 32px; min-height: 372px; }
.mega-side { display: flex; flex-direction: column; gap: 4px; border-right: 1px solid var(--divider-01); padding-right: 24px; }
.mega-side__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 14px; border: 0; border-radius: var(--radius-m); background: none; text-align: left;
  font-size: 1rem; font-weight: var(--fw-semibold); color: var(--text-01);
}
.mega-side__btn .icon { width: 16px; height: 16px; opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .15s ease; }
.mega-side__btn:hover { background: var(--hover-01); }
.mega-side__btn[aria-selected="true"] { background: var(--violet-02); color: var(--violet-09); }
.mega-side__btn[aria-selected="true"] .icon { opacity: 1; transform: none; }
.mega-panel { animation: fadeIn .2s ease; }
.mega-panel__groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 28px; }
.mega-group__title { font-size: .8125rem; font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em; color: var(--text-02); margin: 0 0 6px 10px; }
.mega-card { display: block; padding: 10px; border-radius: var(--radius-m); text-decoration: none; color: var(--text-01); transition: background-color .15s linear, box-shadow .15s linear; }
.mega-card:hover { background: var(--hover-01); box-shadow: 0 0 0 1px var(--border-03); }
.mega-card__title { font-size: .9375rem; font-weight: var(--fw-semibold); line-height: 1.5; }
.mega-card__desc { font-size: .8125rem; line-height: 1.55; color: var(--text-02); margin: 2px 0 0; }
.mega-panel__big { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.mega-panel__big--3 { grid-template-columns: repeat(3, 1fr); }
.mega-bigcard {
  display: flex; flex-direction: column; gap: 8px; padding: 24px; border: 1px solid var(--border-03);
  border-radius: var(--radius-container); text-decoration: none; color: var(--text-01);
  background: linear-gradient(160deg, var(--violet-01), #fff 60%);
  transition: box-shadow .15s linear, background-color .15s linear;
}
.mega-bigcard:hover { box-shadow: 0 0 0 1px var(--border-02); }
.mega-bigcard h3 { font-size: 1.125rem; font-weight: var(--fw-semibold); }
.mega-bigcard p { font-size: .875rem; margin: 0; color: var(--text-02); }
.mega-bigcard .text-link { margin-top: auto; padding-top: 8px; font-size: .875rem; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* resources: columns of links */
.mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; padding: 6px 14px; }
.mega-col__title { font-size: 1.0625rem; font-weight: var(--fw-semibold); margin: 6px 0 14px; }
.mega-col__title:not(:first-child) { margin-top: 26px; }
.mega-col li a {
  display: block; padding: 8px 0; font-size: .9375rem; text-decoration: none; color: var(--text-01);
}
.mega-col li a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--link-underline); }

/* burger + mobile menu */
.burger { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: none; border-radius: var(--radius-m); position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--text-01); border-radius: 2px; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }
.mobile-search-btn { display: none; }

.mobile-menu {
  position: fixed; left: 0; right: 0; top: var(--nav-h); bottom: 0; z-index: 69;
  background: var(--container-01); overflow: hidden;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.mobile-menu__level {
  position: absolute; inset: 0; overflow-y: auto; padding: 8px var(--gutter) 120px;
  background: var(--container-01);
  transition: transform .3s ease, visibility 0s;
}
.mobile-menu__level--sub { transform: translateX(100%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; }
.mobile-menu__level--sub.is-active { transform: none; visibility: visible; transition: transform .3s ease; }
.mobile-menu__level--root.is-pushed { transform: translateX(-30%); }
.mobile-menu__item {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 16px 0; border: 0; border-bottom: 1px solid var(--divider-01); background: none;
  font-size: 1.125rem; font-weight: var(--fw-semibold); text-decoration: none; color: var(--text-01); text-align: left;
}
.mobile-menu__item .icon { width: 18px; height: 18px; }
.mobile-menu__back {
  display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 8px; padding: 8px 0; border: 0; background: none;
  font-weight: var(--fw-semibold); color: var(--text-brand);
}
.mobile-menu__back .icon { width: 16px; height: 16px; }
.mobile-menu__heading { font-family: var(--font-display); font-weight: var(--fw-book); font-size: 1.75rem; margin: 4px 0 12px; }
.mobile-menu__links a { display: block; padding: 12px 0; border-bottom: 1px solid var(--divider-01); text-decoration: none; color: var(--text-01); }
.mobile-menu__links a small { display: block; color: var(--text-02); font-size: .8125rem; line-height: 1.4; }
.mobile-menu__utility { display: grid; gap: 4px; margin-top: 20px; }
.mobile-menu__utility a, .mobile-menu__utility button { justify-content: flex-start; font-size: .9375rem; }
.mobile-menu__ctas { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px var(--gutter); background: var(--container-01); border-top: 1px solid var(--divider-01); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; z-index: 2; }

@media (max-width: 1080px) {
  .utility-nav { display: none; }
  .primary-nav, .main-nav__ctas { display: none; }
  .burger { display: block; }
  .mobile-search-btn { display: grid; margin-left: auto; }
  .mobile-search-btn + .burger { margin-left: 4px; }
  .main-nav { box-shadow: 0 2px 4px rgba(33,33,67,.12); }
  .logo { font-size: 1.5rem; }
}
@media (min-width: 1081px) {
  .mobile-menu { display: none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { background: var(--background-white); padding-top: 104px; }
.hero__inner { text-align: center; max-width: 1264px; }
.hero__inner .display-1 { max-width: 1200px; margin-inline: auto; letter-spacing: -0.02em; }
.hero__inner .lead { max-width: 640px; margin: 2rem auto 2.75rem; }
@media (max-width: 899px) {
  .hero { padding-top: 56px; }
  .hero__inner .lead { margin: 1.25rem auto 2rem; font-size: 1rem; line-height: 1.75; }
}

/* Expandable video feature cards — observed: 3 cards, 8px gap, 560px tall,
   hovered/active card -> flex: 0 0 800px, transition flex .35s ease */
.evfc { margin-top: 96px; padding-inline: 16px; }
.evfc__track { display: flex; gap: 8px; height: 560px; }
.evfc__card {
  position: relative; flex: 1 0 0; height: 100%; overflow: hidden; cursor: pointer;
  background: var(--ink-12); color: #fff;
  transition: flex var(--dur-medium) var(--ease-standard);
  outline-offset: 2px;
}
@media (hover: hover) {
  .evfc__track:has(.evfc__card:hover) .evfc__card:hover { flex: 0 0 min(800px, 58%); }
  .evfc__track:has(.evfc__card:hover) .evfc__card:not(:hover):not(.is-active) { flex: 1 0 0; }
}
.evfc__track:has(.evfc__card.is-active) .evfc__card.is-active { flex: 0 0 min(800px, 58%); }
.evfc__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 1.2s ease; }
.evfc__card:hover .evfc__bg { transform: scale(1.06); }
.evfc__gradient { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(188deg, rgba(36, 31, 61, 0) 28%, var(--ink-13) 94%); }
.evfc__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 2rem; display: flex; flex-direction: column; gap: .25rem; }
.evfc__kicker { font-size: .8125rem; font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: rgba(255,255,255,.72); }
.evfc__heading { font-family: var(--font-display); font-weight: var(--fw-book); font-size: 1.875rem; line-height: 1.12; max-width: 420px; }
.evfc__play {
  position: absolute; left: 50%; top: 50%; z-index: 4; translate: -50% -50%;
  width: 6rem; height: 6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--play-fill); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity var(--dur-medium) var(--ease-standard), background-color .2s ease;
  pointer-events: none;
}
.evfc__play .icon { width: 2rem; height: 2rem; color: #fff; margin-left: 4px; }
@media (hover: hover) { .evfc__card:hover .evfc__play { opacity: 1; } }
.evfc__card.is-active .evfc__play { opacity: 1; }
.evfc__preview {
  position: absolute; left: 40px; top: 100px; z-index: 2; width: 400px; height: 275px; padding: 10px;
  border-radius: var(--radius-container); border: 1px solid rgba(255,255,255,.45);
  background: rgba(255, 255, 255, 0.17); backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-medium) var(--ease-standard);
}
@media (hover: hover) { .evfc__card:hover .evfc__preview { opacity: 1; } }
.evfc__card.is-active .evfc__preview { opacity: 1; }
@media (max-width: 1180px) {
  .evfc__preview { width: 340px; height: 240px; left: 28px; top: 70px; }
}

/* mobile: swipeable cards */
@media (max-width: 899px) {
  .evfc { margin-top: 48px; padding-inline: 0; }
  .evfc__track {
    height: auto; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    padding-inline: var(--gutter); gap: 8px; scroll-padding-inline: var(--gutter);
  }
  .evfc__track::-webkit-scrollbar { display: none; }
  .evfc__card { flex: 0 0 82%; height: 320px; scroll-snap-align: start; }
  .evfc__track:has(.evfc__card.is-active) .evfc__card.is-active { flex: 0 0 82%; }
  .evfc__preview { display: none; }
  .evfc__play { opacity: 1; width: 4rem; height: 4rem; }
  .evfc__play .icon { width: 1.4rem; height: 1.4rem; }
  .evfc__heading { font-size: 1.5rem; }
  .evfc__dots { display: flex; }
}
.evfc__dots { display: none; justify-content: center; gap: 8px; padding: 16px 0 0; }
.evfc__dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: 0; background: var(--ink-05); transition: width .25s ease, background-color .25s ease; }
.evfc__dots button[aria-current="true"] { width: 22px; border-radius: 99px; background: var(--text-brand); }

/* ---------- product UI mocks (used in previews, the video player and agent cards) ---------- */
.mock {
  height: 100%; width: 100%; border-radius: var(--radius-m); background: #fff; color: var(--ink-13);
  box-shadow: 0 10px 30px rgba(10, 8, 30, .22); overflow: hidden; display: flex; flex-direction: column;
  font-size: 11px; line-height: 1.4; text-align: left;
}
.mock__bar { display: flex; align-items: center; gap: 5px; padding: 7px 10px; background: var(--ink-02); border-bottom: 1px solid var(--ink-03); }
.mock__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-05); }
.mock__bar b { margin-left: 8px; font-weight: 600; color: var(--ink-07); font-size: 10px; }
.mock__body { flex: 1; padding: 12px; display: flex; flex-direction: column; gap: 9px; position: relative; }
.mock .avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-06), var(--aqua-06)); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 11px; flex: 0 0 auto; }
.mock .pill { margin-left: auto; padding: 2px 8px; border-radius: 99px; background: var(--violet-03); color: var(--violet-09); font-weight: 700; font-size: 10px; }
.rec__head { display: flex; align-items: center; gap: 9px; }
.rec__head b { display: block; font-size: 12px; }
.rec__head small { color: var(--ink-07); font-size: 10px; }
.rec__fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rec__fields li { background: var(--ink-02); border-radius: 6px; padding: 6px 8px; }
.rec__fields span { display: block; color: var(--ink-07); font-size: 9px; }
.rec__fields b { font-size: 11px; }
.rec__timeline { display: grid; gap: 5px; }
.tl-item { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 1px solid var(--ink-03); border-radius: 6px; }
.tl-item::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet-08); flex: 0 0 auto; }
.tl-item:nth-child(2)::before { background: var(--aqua-08); }
.tl-item:nth-child(3)::before { background: #f5a524; }
.tl-item em { margin-left: auto; font-style: normal; color: var(--ink-07); font-size: 9px; }

.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; position: relative; }
.board__col { background: var(--ink-02); border-radius: 7px; padding: 7px; display: flex; flex-direction: column; gap: 6px; }
.board__col h5 { font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-07); font-weight: 700; }
.board__card { background: #fff; border-radius: 6px; padding: 6px 7px; box-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 10px; }
.board__card small { display: block; color: var(--ink-07); font-size: 9px; }
.board__card--moving { position: absolute; top: 34px; left: 7px; width: calc((100% - 16px) / 3 - 14px); border: 1.5px solid var(--violet-08); z-index: 2; }
.mock__stats { display: flex; gap: 8px; }
.mock__stats div { flex: 1; background: var(--violet-01); border-radius: 6px; padding: 5px 8px; }
.mock__stats b { display: block; font-size: 13px; color: var(--violet-09); }
.mock__stats span { font-size: 9px; color: var(--ink-07); }

.chatmock { display: flex; flex-direction: column; gap: 7px; flex: 1; }
.bubble { max-width: 82%; padding: 7px 10px; border-radius: 12px; font-size: 10.5px; }
.bubble--user { align-self: flex-end; background: var(--violet-08); color: #fff; border-bottom-right-radius: 4px; }
.bubble--bot { align-self: flex-start; background: var(--ink-02); border-bottom-left-radius: 4px; }
.bubble--bot ul { margin: 4px 0 0; display: grid; gap: 3px; }
.bubble--bot li { display: flex; justify-content: space-between; gap: 10px; }
.bubble--bot li b { color: var(--violet-09); }
.typing { display: inline-flex; gap: 3px; align-self: flex-start; padding: 8px 10px; background: var(--ink-02); border-radius: 12px; }
.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-07); animation: typingDot 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; }
.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes typingDot { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-3px); opacity: 1; } }
.approval { display: flex; align-items: center; gap: 6px; margin-top: auto; padding: 6px 8px; border-radius: 6px; background: var(--aqua-03); color: var(--aqua-09); font-weight: 700; font-size: 10px; }
.approval .icon { width: 12px; height: 12px; }

/* playing state: looping sequences (paused unless the card is hovered/active or the player runs) */
.mock [data-seq] { opacity: 0; }
.is-playing .mock [data-seq] { animation-duration: 8s; animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: ease; }
.is-playing .mock [data-seq="1"] { animation-name: seq1; }
.is-playing .mock [data-seq="2"] { animation-name: seq2; }
.is-playing .mock [data-seq="3"] { animation-name: seq3; }
.is-playing .mock [data-seq="4"] { animation-name: seq4; }
.is-playing .mock [data-seq="5"] { animation-name: seq5; }
.paused .mock [data-seq], .paused .board__card--moving { animation-play-state: paused !important; }
@keyframes seq1 { 0%, 4% { opacity: 0; transform: translateY(6px); } 10%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes seq2 { 0%, 16% { opacity: 0; transform: translateY(6px); } 22%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes seq3 { 0%, 30% { opacity: 0; transform: translateY(6px); } 36%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes seq4 { 0%, 44% { opacity: 0; transform: translateY(6px); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes seq5 { 0%, 58% { opacity: 0; transform: translateY(6px); } 64%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.is-playing .mock .typing[data-seq="3"] { animation-name: seqTyping; }
@keyframes seqTyping { 0%, 30% { opacity: 0; } 33%, 46% { opacity: 1; } 49%, 100% { opacity: 0; } }
.board__card--moving { opacity: 1 !important; }
.is-playing .board__card--moving { animation: moveCard 8s ease-in-out infinite; }
@keyframes moveCard {
  0%, 12% { transform: translate(0, 0); }
  30%, 46% { transform: translate(calc(100% + 22px), 18px); }
  64%, 86% { transform: translate(calc(200% + 44px), 6px); }
  100% { transform: translate(0, 0); }
}

/* ==========================================================================
   What is + logo marquee
   ========================================================================== */
.whatis { background: var(--background-white); padding: 88px 0 48px; }
.whatis .section-split p { font-size: 1rem; line-height: 1.75; }
.logos { display: flex; align-items: center; gap: 0; margin-top: 64px; }
.logos__title {
  flex: 0 0 auto; width: 328px; padding-right: 20px; margin: 0;
  border-right: 1px solid var(--border-03);
  font-size: 1.0625rem; line-height: 1.65; font-weight: var(--fw-semibold); text-transform: uppercase;
}
.logos__viewport { position: relative; flex: 1; overflow: hidden; height: 70px; margin-left: 60px; }
.logos__viewport::before, .logos__viewport::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 1; pointer-events: none;
}
.logos__viewport::before { left: 0; background: linear-gradient(to right, #fff, transparent); }
.logos__viewport::after { right: 0; background: linear-gradient(to left, #fff, transparent); }
.logos__track {
  display: flex; align-items: center; width: max-content; height: 100%;
  animation: logoScroll var(--marquee-duration, 34s) linear infinite;
}
.logos__viewport:hover .logos__track, .logos.is-paused .logos__track { animation-play-state: paused; }
@keyframes logoScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logo-item { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 0 30px; height: 100%; color: var(--ink-12); opacity: .82; transition: opacity .3s ease-in-out; white-space: nowrap; }
.logo-item:hover { opacity: .55; }
.logo-item svg { width: 24px; height: 24px; }
.logo-item span { font-size: 1.25rem; letter-spacing: -.02em; }
.logos__toggle { flex: 0 0 auto; margin-left: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; }
.logos__toggle:hover { background: var(--hover-01); }
.logos__toggle .icon { width: 14px; height: 14px; }
@media (max-width: 1079px) {
  .logos { flex-wrap: wrap; margin-top: 40px; }
  .logos__title { width: 100%; border: 0; text-align: center; padding: 0 0 8px; font-size: .9375rem; }
  .logos__viewport { margin-left: 0; }
}

/* ==========================================================================
   Platform (sticky sidebar + product cards)
   ========================================================================== */
.platform { background: var(--background-01); padding: 72px 0 64px; }
.platform__grid { display: grid; grid-template-columns: 1fr; row-gap: 2rem; }
@media (min-width: 900px) {
  .platform__grid { grid-template-columns: 1fr 2fr; column-gap: 1.5rem; }
  .platform__side { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; padding-bottom: 1rem; }
}
.platform__side .section-head { margin-bottom: 2.5rem; }
.platform__side p { margin: 1.5rem 0 2rem; }
.platform__cards { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .platform__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card {
  position: relative; background: var(--container-01); border: 1px solid var(--border-03); border-radius: var(--radius-container);
  transition: background-color .15s linear, box-shadow .15s linear;
}
.card--hoverable:hover { background-image: linear-gradient(var(--hover-01), var(--hover-01)); box-shadow: 0 0 0 1px var(--border-03); }
.product-card { display: flex; flex-direction: column; gap: 1rem; padding: 2rem 2rem 1.5rem; cursor: pointer; }
.product-card__head { display: flex; align-items: center; gap: .5rem; }
.product-card__icon { width: 26px; height: 26px; color: var(--text-brand); }
.product-card__title { font-size: 1.125rem; font-weight: var(--fw-semibold); line-height: 1.55; }
.product-card__title sup { font-weight: var(--fw-book); font-size: .6em; }
.product-card hr { border: 0; border-top: 1px dashed var(--border-03); margin: 0; width: 100%; }
.product-card__list { display: flex; flex-direction: column; gap: .25rem; }
.product-card__list li { display: flex; gap: .5rem; font-size: .875rem; line-height: 1.57; font-weight: var(--fw-regular); }
.product-card__list .icon { width: 18px; height: 18px; color: var(--text-brand); margin: 2px 3px; stroke-width: 2; }
.product-card__cta { display: flex; flex-direction: column; gap: 1rem; margin-top: auto; }
.product-card .arrow-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.product-card .arrow-link:hover .icon, .product-card:hover .arrow-link .icon { transform: translateX(5px); }
.badge-beta { display: inline-flex; padding: 0 6px; border-radius: var(--radius-s); background: var(--violet-03); color: var(--violet-09); font-size: .75rem; font-weight: var(--fw-semibold); }

/* ==========================================================================
   AI agents carousel (observed: inactive slides opacity .5 + scale .9,
   transform .3s ease-in-out; infinite; autoplay 3s; pauses on hover/focus)
   ========================================================================== */
.agents {
  position: relative; overflow: hidden; padding: 72px 0 64px;
  background-color: var(--violet-03);
  background-image:
    radial-gradient(60% 80% at 8% 20%, rgba(169, 155, 255, .55), transparent 70%),
    radial-gradient(50% 70% at 78% 30%, rgba(111, 220, 200, .45), transparent 70%),
    radial-gradient(60% 70% at 100% 100%, rgba(169, 211, 255, .6), transparent 70%),
    linear-gradient(257deg, #e7e2ff 0%, #dcefff 50%, #d9f6ef 100%);
}
.agents .section-head { margin-bottom: 2.5rem; }
.icon-tile { width: 64px; height: 64px; border-radius: 12px; background: #fff; display: grid; place-items: center; box-shadow: 0 1px 2px rgba(23,20,43,.06); }
.icon-tile .icon { width: 34px; height: 34px; color: var(--text-brand); }
.agents .section-split { margin-bottom: 4rem; }
.agents .section-split p { margin: 0; }

.carousel { position: relative; display: flex; flex-direction: column; }
.carousel__rail { order: 1; }
.carousel__controls { order: 2; }
.carousel__footer { order: 3; }
@media (min-width: 1080px) { .carousel { padding-inline: 3rem; margin-bottom: 2.5rem; } }
.carousel__rail { overflow: visible; position: relative; touch-action: pan-y; }
@media (min-width: 900px) and (max-width: 1079px) {
  .carousel__rail { clip-path: inset(-20px 100px); margin-inline: -100px; }
}
@media (min-width: 1080px) {
  .carousel__rail { clip-path: inset(-20px 0); }
}
.carousel__train { display: flex; align-items: center; transition: transform .3s ease; will-change: transform; }
.carousel__train.no-anim, .carousel__train.no-anim .carousel__slide { transition: none; }
.carousel__slide { flex: 0 0 auto; padding: 0; user-select: none; }
@media (min-width: 900px) {
  .carousel__slide { opacity: .5; transform: scale(.9); transition: transform .3s ease-in-out, opacity .3s ease-in-out; }
  .carousel__slide.is-active { opacity: 1; transform: scale(1); }
  .carousel__slide.is-left { transform-origin: right; }
  .carousel__slide.is-right { transform-origin: left; }
  .carousel__slide:not(.is-active) { cursor: pointer; }
}
.carousel__controls { display: flex; justify-content: center; gap: 12px; padding-top: 1.5rem; }
@media (min-width: 1080px) {
  .carousel__controls { position: absolute; inset: 50% 0 auto; translate: 0 -50%; justify-content: space-between; padding: 0; pointer-events: none; }
  .carousel__controls .round-btn { pointer-events: auto; }
}
.carousel__footer { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 1.5rem; }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(23,20,43,.25); transition: width .25s ease, background-color .25s ease; }
.carousel__dots button[aria-current="true"] { width: 22px; border-radius: 99px; background: var(--ink-13); }
@media (min-width: 1080px) { .carousel__dots { display: none; } }

.agent-slide {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  height: 100%; padding: 1.5rem 1.5rem 2rem; background: var(--container-01); border-radius: var(--radius-container);
}
.agent-slide__media { width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-container); overflow: hidden; margin-bottom: 1.5rem; position: relative; }
.agent-slide__title { font-size: 1.5rem; line-height: 1.42; font-weight: var(--fw-semibold); margin-bottom: .25rem; }
.agent-slide__desc { margin: 0; font-size: 1rem; line-height: 1.75; }
.agent-slide__link { margin-top: auto; padding-top: 1rem; }
@media (min-width: 900px) {
  .carousel__slide:not(.is-active) .agent-slide__desc { max-height: 3.5rem; overflow: hidden; position: relative; }
  .carousel__slide:not(.is-active) .agent-slide__desc::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.75rem; background: linear-gradient(rgba(255,255,255,0), #fff);
  }
  .carousel__slide:not(.is-active) .agent-slide__link { visibility: hidden; }
}

/* agent mock art */
.agent-art { position: absolute; inset: 0; background: linear-gradient(160deg, var(--violet-01), var(--violet-03)); padding: 7% 0 0 7%; overflow: hidden; }
.agent-art--b { background: linear-gradient(160deg, #f4fbff, var(--sky-03)); }
.agent-art--c { background: linear-gradient(160deg, #f2fcf9, var(--aqua-03)); }
.agent-art__panel { position: absolute; left: 7%; top: 9%; right: -8%; bottom: 0; background: #fff; border-radius: 14px 0 0 0; box-shadow: 0 10px 40px rgba(23,20,43,.12); padding: 7%; text-align: left; }
.agent-art .botmsg { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--violet-12); color: #fff; font-size: 13px; line-height: 1.45; max-width: 92%; }
.agent-art .botmsg b { display: block; font-size: 12px; opacity: .8; }
.agent-art .spark { width: 30px; height: 30px; border-radius: 50%; background: #fff; display: grid; place-items: center; flex: 0 0 auto; color: var(--violet-08); }
.agent-art .spark .icon { width: 16px; height: 16px; }
.agent-art .composer { margin-top: 18px; border: 1.5px solid var(--ink-05); border-radius: 8px; padding: 10px 12px; color: var(--ink-07); font-size: 12px; }
.agent-art .composer__tools { display: flex; gap: 14px; margin-top: 18px; font-weight: 700; color: var(--ink-12); font-size: 12px; }
.agent-art .who { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 12px; font-weight: 700; }
.agent-art .who i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f7b7a3, #f59e7a); }
.agent-art .introcard { display: flex; gap: 12px; align-items: center; }
.agent-art .introcard b { font-size: 15px; line-height: 1.3; }
.agent-art .introcard + p { margin: 12px 0 18px; font-size: 13px; color: var(--ink-12); }
.agent-art .darkbtn { display: inline-block; padding: 9px 16px; border-radius: 6px; background: var(--violet-13); color: #fff; font-size: 13px; }
.agent-art .cursor { position: absolute; width: 26px; height: 26px; color: var(--ink-13); filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.agent-art .propbox { border: 1.5px solid var(--violet-06); border-radius: 8px; padding: 10px 12px; font-size: 12px; color: var(--ink-12); line-height: 1.5; }
.agent-art .propbtn { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; padding: 9px 16px; border-radius: 99px; background: var(--violet-08); color: #fff; font-size: 13px; }
.agent-art .propbtn .icon { width: 13px; height: 13px; }
.agent-art h6 { font-size: 13px; margin-bottom: 10px; color: var(--ink-12); }
.is-active .agent-art .cursor { animation: cursorNudge 2.4s ease-in-out infinite; }
@keyframes cursorNudge { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -5px); } }

.carousel__toggle .icon { width: 12px; height: 12px; }

/* ==========================================================================
   Integrations (rotated icon grid, observed: rotate(15deg))
   ========================================================================== */
.integrations { background: var(--background-01); padding: 64px 0 40px; }
.integrations__card { display: flex; flex-direction: column-reverse; gap: 1.5rem; overflow: hidden; }
@media (min-width: 1080px) { .integrations__card { flex-direction: row; gap: 1rem; } }
.integrations__copy { flex: 1; padding: 0 2rem 2rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
@media (min-width: 900px) { .integrations__copy { padding: 3.5rem 0 3.5rem 5rem; } }
.integrations__copy h2 { font-size: 1.625rem; line-height: 1.35; font-weight: var(--fw-semibold); margin: 1rem 0; max-width: 540px; }
.integrations__art { flex: 1; min-height: 240px; position: relative; overflow: hidden; }
.integrations__lists { position: absolute; left: 50%; top: 50%; display: flex; gap: 2.5rem; transform: rotate(15deg) translate(-50%, -50%); }
.integrations__list { display: grid; grid-template-columns: repeat(3, 82px); gap: 2.5rem; }
.app-tile { width: 82px; height: 82px; border-radius: 20px; display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px rgba(23,20,43,.12); transition: transform .3s ease; }
.app-tile svg { width: 42px; height: 42px; }
.integrations__card:hover .app-tile { transform: rotate(-4deg) scale(1.04); }

/* ==========================================================================
   Case studies (tabs)
   ========================================================================== */
.cases { background: var(--background-01); padding: 56px 0 72px; }
.cases .section-split { margin-bottom: 3rem; }
.cases .section-split p { margin: 0; }
.tabs__list { display: flex; justify-content: center; gap: 0; border-bottom: 1px solid transparent; margin-bottom: 2rem; overflow-x: auto; scrollbar-width: none; }
.tabs__list::-webkit-scrollbar { display: none; }
.tab {
  padding: 8px 16px 8px; border: 0; border-bottom: 4px solid transparent; background: none;
  font-size: 1rem; font-weight: var(--fw-semibold); color: var(--text-02); white-space: nowrap;
  transition: color .2s ease, border-color .2s ease;
}
.tab:hover { color: var(--text-01); }
.tab[aria-selected="true"] { color: var(--text-01); border-bottom-color: var(--text-brand); }
.case-panel { padding: 24px; }
.case-panel.is-entering { animation: fadeIn .35s ease; }
.case__main { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 900px) { .case__main { grid-template-columns: 600px 1fr; gap: 40px; align-items: start; } }
.case__img { width: 100%; aspect-ratio: 600 / 394; object-fit: cover; background: var(--ink-03); }
.case__quote { margin: 0; padding-top: 12px; font-size: 1rem; line-height: 1.75; }
.case__who { margin-top: 1.5rem; }
.case__who b { display: block; font-weight: var(--fw-semibold); }
.case__who span { display: block; font-size: .875rem; margin-bottom: .25rem; }
.case__stats { display: grid; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 600px) { .case__stats { grid-template-columns: 1fr 1fr; } }
.case__stat { text-align: center; padding: 0 16px; }
.case__stat + .case__stat { border-top: 1px solid var(--divider-01); padding-top: 16px; margin-top: 16px; }
@media (min-width: 600px) { .case__stat + .case__stat { border-top: 0; border-left: 1px solid var(--divider-01); padding-top: 0; margin-top: 0; } }
.case__stat b { display: block; font-family: var(--font-display); font-weight: var(--fw-regular); font-size: 2.5rem; line-height: 1.15; }
.case__stat span { font-size: .875rem; }

/* ==========================================================================
   Review badges
   ========================================================================== */
.reviews { background: var(--background-01); padding: 0 0 96px; }
.reviews__inner { display: flex; align-items: center; justify-content: center; gap: 3rem; flex-wrap: wrap; }
.reviews__title { font-size: 1.5rem; font-weight: var(--fw-semibold); line-height: 1.42; }
.reviews__badges { display: flex; gap: 34px; flex-wrap: wrap; justify-content: center; }
.review-badge { width: 70px; transition: transform .25s ease; }
.review-badge:hover { transform: translateY(-4px); }
.review-badge text { font-family: var(--font-sans); }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band { background: var(--cta-band-bg); color: #fff; padding: 64px 0; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; width: 640px; height: 640px; right: -180px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(138, 118, 255, .35), transparent 65%); pointer-events: none;
}
.cta-band h2 { max-width: 1110px; font-size: clamp(2.25rem, 1.6rem + 2.3vw, 3.5rem); line-height: 1.14; margin-bottom: 2.5rem; }
.cta-band .brand-dot { color: var(--aqua-06); }
.cta-band .btn--primary { --btn-bg: var(--violet-07); --btn-bg-hover: var(--violet-06); --btn-bg-pressed: var(--violet-05); }

/* ==========================================================================
   Footer
   ========================================================================== */
.footer { background: var(--footer-bg); color: #fff; padding: 48px 0 56px; }
.footer__cols { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 1081px) {
  .footer__cols { grid-template-columns: 2.2fr 1fr 1fr 1fr; column-gap: 40px; }
  .footer__col--wide { padding-right: 40px; border-right: 1px solid rgba(255,255,255,.18); }
  .footer__col--wide ul { columns: 2; column-gap: 32px; }
}
.footer__heading { margin: 0; }
.footer__toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 6px 0; border: 0; background: none;
  color: #fff; font-size: .9375rem; font-weight: var(--fw-semibold); text-align: left; cursor: default;
}
.footer__toggle .icon { width: 18px; height: 18px; display: none; transition: transform .25s ease; }
.footer__list { padding-top: 14px; }
.footer__list li { break-inside: avoid; }
.footer__list a { display: inline-block; padding: 5px 0; color: rgba(255,255,255,.72); font-size: .8125rem; font-weight: var(--fw-medium); text-decoration: none; }
.footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer__group + .footer__group { margin-top: 28px; }
@media (max-width: 1080px) {
  .footer__group { border-bottom: 1px solid rgba(255,255,255,.16); }
  .footer__group + .footer__group { margin-top: 0; }
  .footer__toggle { padding: 16px 0; cursor: pointer; }
  .footer__toggle .icon { display: block; }
  .footer__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .footer__list { display: grid; grid-template-rows: 0fr; padding-top: 0; transition: grid-template-rows .3s ease; }
  .footer__list > div { overflow: hidden; }
  .footer__toggle[aria-expanded="true"] + .footer__list { grid-template-rows: 1fr; padding-bottom: 12px; }
}
.footer__social { display: flex; align-items: center; gap: 24px; margin-top: 56px; }
.footer__social::before, .footer__social::after { content: ""; flex: 1; border-top: 1px solid rgba(255,255,255,.3); }
.footer__social ul { display: flex; gap: 26px; }
.footer__social a { display: grid; place-items: center; width: 32px; height: 32px; color: rgba(255,255,255,.62); transition: color .2s ease, transform .2s ease; }
.footer__social a:hover { color: #fff; transform: translateY(-2px); }
.footer__social svg { width: 24px; height: 24px; }
@media (max-width: 599px) {
  .footer__social::before, .footer__social::after { display: none; }
  .footer__social ul { width: 100%; justify-content: space-between; gap: 4px; }
}
.footer__bottom { text-align: center; margin-top: 36px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer__copy { font-size: .75rem; color: rgba(255,255,255,.62); margin: 0; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 0; }
.footer__legal li { display: flex; align-items: center; }
.footer__legal li + li::before { content: ""; width: 1px; height: 10px; background: rgba(255,255,255,.4); margin: 0 16px; }
.footer__legal a, .footer__legal button { color: #fff; font-size: .8125rem; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 20px; }
.modal__backdrop { position: absolute; inset: 0; background: var(--overlay-modal); opacity: 0; transition: opacity .25s ease; }
.modal__dialog {
  position: relative; width: min(560px, 100%); max-height: calc(100dvh - 40px); overflow: auto;
  background: var(--container-01); border-radius: var(--radius-container); box-shadow: 0 30px 80px rgba(10,8,30,.35);
  opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .25s ease, transform .3s var(--ease-emphasized);
}
.modal.is-open .modal__backdrop { opacity: 1; }
.modal.is-open .modal__dialog { opacity: 1; transform: none; }
.modal__close {
  position: absolute; top: 12px; right: 12px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: var(--container-01); display: grid; place-items: center; transition: background-color .15s linear;
}
.modal__close:hover { background: var(--ink-03); }
.modal__close .icon { width: 18px; height: 18px; stroke-width: 2.25; }
.modal__body { padding: 40px 40px 32px; }
@media (max-width: 599px) { .modal { padding: 0; align-items: end; } .modal__dialog { border-radius: 16px 16px 0 0; max-height: 94dvh; } .modal__body { padding: 32px 20px 24px; } }
.modal__title { font-family: var(--font-display); font-weight: var(--fw-book); font-size: 2rem; line-height: 1.15; margin-bottom: .5rem; padding-right: 32px; }
.modal__sub { color: var(--text-02); margin-bottom: 1.5rem; }

/* progress */
.steps { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: .8125rem; font-weight: var(--fw-semibold); color: var(--text-02); }
.steps__bar { flex: 1; height: 4px; background: var(--ink-03); border-radius: 99px; overflow: hidden; }
.steps__fill { height: 100%; width: 33%; background: var(--text-brand); border-radius: inherit; transition: width .4s var(--ease-emphasized); }
.form-step { animation: stepIn .35s var(--ease-emphasized); }
.form-step.is-back { animation-name: stepBack; }
@keyframes stepIn { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes stepBack { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }

/* fields */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field__label { font-size: .875rem; font-weight: var(--fw-semibold); }
.field__label .req { color: var(--error-01); }
.field__label .opt { font-weight: var(--fw-regular); color: var(--text-02); }
.input, .select {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--border-02); border-radius: var(--radius-s);
  background: var(--container-01); font-size: 1rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: var(--text-placeholder); }
.input:hover, .select:hover { border-color: var(--border-01); }
.input:focus, .select:focus { outline: none; border-color: var(--violet-08); box-shadow: 0 0 0 3px var(--violet-04); }
.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--error-01); box-shadow: 0 0 0 3px var(--error-bg); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2317142b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field__error { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--error-01); min-height: 0; }
.field__error:empty { display: none; }
.field__hint { font-size: .8125rem; color: var(--text-02); }
.field__hint--warn { color: var(--warning-01); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 479px) { .field-row { grid-template-columns: 1fr; } }
.phone { display: grid; grid-template-columns: 112px 1fr; gap: 8px; }
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 48px; }
.input-wrap__btn { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 36px; height: 36px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; color: var(--text-02); }
.input-wrap__btn:hover { background: var(--hover-01); color: var(--text-01); }
.input-wrap__btn .icon { width: 18px; height: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--border-02); border-radius: 99px;
  background: var(--container-01); font-size: .875rem; font-weight: var(--fw-medium); transition: all .15s ease;
}
.chip:hover { border-color: var(--border-01); background: var(--hover-01); }
.chip[aria-pressed="true"], .chip[aria-checked="true"] { background: var(--violet-08); border-color: var(--violet-08); color: #fff; }
.chip .icon { width: 14px; height: 14px; }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.5; margin: 6px 0 18px; cursor: pointer; }
.check input { appearance: none; flex: 0 0 auto; width: 20px; height: 20px; margin: 0; border: 2px solid var(--border-01); border-radius: var(--radius-s); display: grid; place-items: center; transition: background-color .15s ease; }
.check input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .15s ease; }
.check input:checked { background: var(--violet-08); border-color: var(--violet-08); }
.check input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.check input[aria-invalid="true"] { border-color: var(--error-01); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.form-actions--end { justify-content: flex-end; }
.legal-note { font-size: .75rem; color: var(--text-02); margin: 16px 0 0; }
.legal-note a { color: var(--text-01); }
.divider-or { display: flex; align-items: center; gap: 12px; color: var(--text-02); font-size: .8125rem; margin: 18px 0; }
.divider-or::before, .divider-or::after { content: ""; flex: 1; border-top: 1px solid var(--divider-01); }
.sso { display: grid; gap: 10px; }
.sso .btn .icon { width: 18px; height: 18px; }

.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 4px; }
.strength i { height: 4px; border-radius: 99px; background: var(--ink-03); transition: background-color .25s ease; }
.strength[data-score="1"] i:nth-child(-n+1) { background: var(--error-01); }
.strength[data-score="2"] i:nth-child(-n+2) { background: #f59e0b; }
.strength[data-score="3"] i:nth-child(-n+3) { background: #84cc16; }
.strength[data-score="4"] i { background: var(--success-01); }
.rules { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin-top: 8px; font-size: .8125rem; color: var(--text-02); }
.rules li { display: flex; align-items: center; gap: 6px; }
.rules li .icon { width: 14px; height: 14px; }
.rules li.is-ok { color: var(--success-01); }

/* scheduler */
.dates { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.date-btn { padding: 10px 4px; border: 1px solid var(--border-03); border-radius: var(--radius-m); background: var(--container-01); text-align: center; line-height: 1.3; transition: all .15s ease; }
.date-btn small { display: block; font-size: .75rem; color: var(--text-02); }
.date-btn b { font-size: 1.125rem; }
.date-btn:hover { border-color: var(--border-01); }
.date-btn[aria-pressed="true"] { background: var(--violet-08); border-color: var(--violet-08); color: #fff; }
.date-btn[aria-pressed="true"] small { color: rgba(255,255,255,.8); }
.dates-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-weight: var(--fw-semibold); }
.dates-nav .round-btn { background: var(--ink-02); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 18px; }
.slot { padding: 10px; border: 1px solid var(--violet-06); color: var(--violet-09); border-radius: var(--radius-m); background: var(--container-01); font-weight: var(--fw-semibold); font-size: .875rem; transition: all .15s ease; }
.slot:hover { background: var(--violet-02); }
.slot[aria-pressed="true"] { background: var(--violet-08); color: #fff; border-color: var(--violet-08); }
.tz { font-size: .8125rem; color: var(--text-02); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.tz .icon { width: 14px; height: 14px; }

.success { text-align: center; padding: 8px 0; }
.success__icon { width: 72px; height: 72px; margin: 0 auto 16px; border-radius: 50%; background: var(--success-bg); color: var(--success-01); display: grid; place-items: center; animation: pop .5s var(--ease-emphasized); }
.success__icon .icon { width: 34px; height: 34px; stroke-width: 2.5; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.summary { background: var(--background-02); border-radius: var(--radius-m); padding: 14px 16px; text-align: left; font-size: .875rem; margin: 16px 0 20px; display: grid; gap: 6px; }
.summary div { display: flex; justify-content: space-between; gap: 12px; }
.summary span { color: var(--text-02); }
.setup-list { display: grid; gap: 10px; margin: 18px 0; text-align: left; }
.setup-list li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--text-02); transition: color .3s ease; }
.setup-list li .state { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink-05); display: grid; place-items: center; flex: 0 0 auto; transition: all .3s ease; }
.setup-list li .state .icon { width: 12px; height: 12px; stroke-width: 3; opacity: 0; }
.setup-list li.is-running { color: var(--text-01); }
.setup-list li.is-running .state { border-color: var(--violet-08); border-right-color: transparent; animation: spin .8s linear infinite; }
.setup-list li.is-done { color: var(--text-01); }
.setup-list li.is-done .state { background: var(--success-01); border-color: var(--success-01); color: #fff; animation: none; }
.setup-list li.is-done .state .icon { opacity: 1; }

/* cookie prefs */
.pref { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--divider-01); }
.pref h3 { font-size: 1rem; font-weight: var(--fw-semibold); }
.pref p { font-size: .875rem; color: var(--text-02); margin: 2px 0 0; }
.pref__switch { margin-left: auto; flex: 0 0 auto; }
.switch { position: relative; width: 44px; height: 26px; border-radius: 99px; border: 0; background: var(--ink-05); transition: background-color .2s ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s var(--ease-emphasized); }
.switch[aria-checked="true"] { background: var(--violet-08); }
.switch[aria-checked="true"]::after { transform: translateX(18px); }
.switch:disabled { opacity: .55; cursor: not-allowed; }

/* video modal + fake player */
.modal--video .modal__dialog { width: min(1080px, 100%); background: var(--ink-14); color: #fff; border-radius: var(--radius-container); }
.modal--video .modal__close { background: rgba(255,255,255,.12); color: #fff; }
.modal--video .modal__close:hover { background: rgba(255,255,255,.22); }
.player { position: relative; }
.player__stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-container) var(--radius-container) 0 0; background:
  radial-gradient(70% 90% at 15% 20%, rgba(138,118,255,.55), transparent 60%),
  radial-gradient(60% 80% at 90% 80%, rgba(18,168,147,.45), transparent 60%), #1a1540; }
.player__scene { position: absolute; left: 50%; top: 46%; width: 62%; height: 64%; transform: translate(-50%, -50%); }
.player__scene .mock { font-size: 15px; }
.player__scene .mock__body { padding: 20px; gap: 14px; }
.player__scene .mock .avatar { width: 44px; height: 44px; font-size: 15px; }
.player__scene .rec__head b { font-size: 17px; }
.player__scene .rec__head small, .player__scene .rec__fields span, .player__scene .tl-item em, .player__scene .board__col h5, .player__scene .board__card small { font-size: 12px; }
.player__scene .rec__fields b, .player__scene .board__card, .player__scene .bubble { font-size: 14px; }
.player__scene .mock .pill { font-size: 12px; }
.player__scene .board__card--moving { top: 44px; }
.player__caption {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0; max-width: 80%; padding: 6px 14px; border-radius: 6px;
  background: rgba(10, 8, 30, .72); font-size: .9375rem; text-align: center; transition: opacity .3s ease;
}
.player__big {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 96px; height: 96px; border-radius: 50%; border: 0;
  background: var(--violet-08); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; transform: scale(.9);
}
.player__big .icon { width: 34px; height: 34px; margin-left: 5px; }
.player.is-paused .player__big { opacity: 1; pointer-events: auto; transform: none; }
.player__controls { display: flex; align-items: center; gap: 14px; padding: 12px 18px 16px; }
.player__btn { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: #fff; display: grid; place-items: center; }
.player__btn:hover { background: rgba(255,255,255,.12); }
.player__btn .icon { width: 18px; height: 18px; }
.player__time { font-size: .8125rem; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.8); min-width: 84px; }
.player__progress { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.22); position: relative; cursor: pointer; }
.player__progress:hover { height: 8px; }
.player__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--violet-06); }
.player__fill::after { content: ""; position: absolute; right: -7px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.player__title { padding: 0 18px 18px; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.player__title h2 { font-family: var(--font-display); font-weight: var(--fw-book); font-size: 1.5rem; }
.player__title span { color: rgba(255,255,255,.62); font-size: .875rem; }
@media (max-width: 599px) {
  .modal--video { align-items: center; padding: 10px; }
  .modal--video .modal__dialog { border-radius: 12px; }
  .player__scene { width: 86%; height: 78%; }
  .player__scene .mock { font-size: 11px; }
}

/* ==========================================================================
   Chat widget
   ========================================================================== */
.chat { position: fixed; right: 16px; bottom: 16px; z-index: 300; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.chat__launcher {
  width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--ink-13); color: #fff;
  display: grid; place-items: center; box-shadow: 0 6px 20px rgba(10,8,30,.3); transition: transform .2s ease, background-color .2s ease;
}
.chat__launcher:hover { transform: scale(1.06); background: var(--violet-10); }
.chat__launcher .icon { width: 26px; height: 26px; transition: transform .25s ease, opacity .2s ease; }
.chat__launcher .icon--close { position: absolute; opacity: 0; transform: rotate(-90deg); }
.chat__launcher[aria-expanded="true"] .icon--chat { opacity: 0; transform: rotate(90deg); }
.chat__launcher[aria-expanded="true"] .icon--close { opacity: 1; transform: none; }
.chat__greeting {
  position: relative; width: 250px; padding: 14px 16px; margin-top: 22px; background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(10,8,30,.18);
  font-size: .875rem; line-height: 1.55; font-weight: var(--fw-medium); cursor: pointer;
  animation: greetIn .45s var(--ease-emphasized);
}
.chat__greeting p { margin: 0; }
.chat__greeting .bot-avatar { position: absolute; top: -20px; left: 50%; translate: -50% 0; }
.chat__greeting-close { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; background: none; border-radius: 50%; display: grid; place-items: center; }
.chat__greeting-close:hover { background: var(--hover-01); }
.chat__greeting-close .icon { width: 12px; height: 12px; stroke-width: 2.5; }
@keyframes greetIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.bot-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--violet-07), var(--aqua-08)); color: #fff; display: grid; place-items: center; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.bot-avatar .icon { width: 18px; height: 18px; }
.chat__panel {
  width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 110px)); background: #fff; border-radius: 16px;
  box-shadow: 0 16px 50px rgba(10,8,30,.25); display: flex; flex-direction: column; overflow: hidden;
  transform-origin: bottom right; animation: panelIn .3s var(--ease-emphasized);
}
@keyframes panelIn { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--violet-13); color: #fff; }
.chat__head .bot-avatar { border-color: rgba(255,255,255,.4); }
.chat__head b { display: block; font-size: 1rem; }
.chat__head small { display: flex; align-items: center; gap: 6px; font-size: .75rem; opacity: .85; }
.chat__head small::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3ee08f; }
.chat__head .round-btn { margin-left: auto; background: transparent; color: #fff; }
.chat__head .round-btn:hover { background: rgba(255,255,255,.14); }
.chat__log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--background-01); scroll-behavior: smooth; }
.msg { max-width: 84%; padding: 10px 13px; border-radius: 14px; font-size: .875rem; line-height: 1.5; animation: msgIn .25s ease; }
.msg--bot { align-self: flex-start; background: #fff; border: 1px solid var(--border-03); border-bottom-left-radius: 4px; }
.msg--user { align-self: flex-end; background: var(--violet-08); color: #fff; border-bottom-right-radius: 4px; }
.msg .btn { margin-top: 8px; }
@keyframes msgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.chat__quick { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 10px; background: var(--background-01); }
.chat__quick .chip { font-size: .8125rem; padding: 6px 12px; border-color: var(--violet-06); color: var(--violet-09); }
.chat__quick .chip:hover { background: var(--violet-02); }
.chat__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--divider-01); background: #fff; }
.chat__form .input { height: 42px; border-radius: 99px; font-size: .9375rem; }
.chat__send { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 50%; border: 0; background: var(--violet-08); color: #fff; display: grid; place-items: center; transition: background-color .15s linear; }
.chat__send:hover { background: var(--violet-09); }
.chat__send:disabled { background: var(--ink-05); cursor: not-allowed; }
.chat__send .icon { width: 18px; height: 18px; }
.chat__note { font-size: .6875rem; text-align: center; color: var(--text-02); padding: 0 12px 8px; background: #fff; margin: 0; }

/* toast */
.toast-region { position: fixed; left: 16px; bottom: 16px; z-index: 600; display: grid; gap: 8px; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 10px; max-width: 360px; padding: 12px 16px; border-radius: 10px;
  background: var(--ink-13); color: #fff; font-size: .875rem; box-shadow: 0 10px 30px rgba(10,8,30,.3);
  animation: toastIn .3s var(--ease-emphasized); pointer-events: auto;
}
.toast .icon { width: 18px; height: 18px; color: var(--aqua-06); }
.toast.is-leaving { animation: toastOut .25s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .logos__track { animation: none; }
  .is-playing .mock [data-seq] { opacity: 1; }
  .mock [data-seq] { opacity: 1; }
}