/* Home page. Sections follow the AlliDesk landing page's language, in Adynic's
   indigo: a band that rides up over the hero, tinted panels that stack as you
   scroll, one dark card, a moving strip of clients, and plain type throughout.
   Hover only ever changes colour; things that move on their own respect
   prefers-reduced-motion. */

.ad-over, .ad-sec, .ad-wrap, .ad-marquee {
  --ad-ink: #14132b;
  --ad-soft: #555470;
  --ad-faint: #8d8ca3;
  --ad-line: #e6e5f0;
  --ad-brand: #4c489d;
  --ad-brand-deep: #37337a;
  --ad-navy: #16143a;
  --ad-sky: #eaf0ff;
  --ad-mint: #e6f6ec;
  --ad-lav: #efebfb;
  --ad-peach: #fff0e6;
  --ad-lemon: #fff7d6;
  --ad-r: 28px;
  --ad-shadow: 0 30px 80px rgba(22, 20, 58, .14);
  --ad-ease-out: cubic-bezier(.165, .84, .44, 1);
  --ad-ease-out-expo: cubic-bezier(.19, 1, .22, 1);
}

/* ---------- Hero holds the first screen; the page rides up over it ----------
   The hero is sticky and fills the screen. As the page scrolls, its content steps
   back (higher, smaller, fainter) and is gone before the next section's content
   reaches it, so the section needs no background of its own and no edge is ever
   drawn between them. --recede (0 to 1) is set from scroll position in home.js,
   so the motion is tied to the scroll rather than timed. */

/* `hidden` would make body a scroll container and break sticky; `clip` trims the
   same horizontal overflow without doing that. */
html body.overflow-x-hidden { overflow-x: clip; }

.hero-stage {
  position: sticky;
  top: var(--hero-top, 0px);
  z-index: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-content: center;
}
.hero-stage.pt-40 { padding-top: 112px; padding-bottom: 56px; }

/* The bundle also writes an inline scale and opacity on #hero-content while scrolling;
   !important keeps this one effect in charge instead of the two fighting. */
.hero-stage > #hero-content {
  --r: var(--recede, 0);
  transform-origin: 50% 30%;
  transform: translateY(calc(var(--r) * -10vh)) scale(calc(1 - var(--r) * .08)) !important;
  /* Holds full strength for the first fifth, so a nudge of the wheel doesn't dim it. */
  opacity: calc((1 - var(--r)) * 1.25) !important;
  transition: none;
}


/* ---------- Layout and type ---------- */

.ad-wrap { max-width: 1232px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .ad-wrap { padding: 0 24px; } }

.ad-sec { position: relative; z-index: 1; padding: 64px 0; color: var(--ad-ink); }
@media (min-width: 768px) { .ad-sec { padding: 96px 0; } }
.ad-sec-tight { padding-top: 32px; }
.ad-sec-last { padding-bottom: 0; }

.ad-over { position: relative; z-index: 1; padding: 96px 0 32px; }
@media (min-width: 768px) { .ad-over { padding-top: 130px; } }

.ad-eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ad-brand);
}

/* The bundle forces every h2 to 30px on phones; these sizes are the page's own. */
.ad-sec h2, .ad-over h2 {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px) !important;
  line-height: 1.06 !important;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: var(--ad-ink);
  text-wrap: balance;
}
.ad-center { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.ad-center p { margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--ad-soft); }

.ad-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  background: var(--ad-lav);
  font-size: 13px;
  font-weight: 600;
  color: var(--ad-brand);
}
.ad-pill i { font-size: 12px; }

/* ---------- Buttons and links ---------- */

.ad-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.ad-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid var(--ad-brand);
  border-radius: 999px;
  background: var(--ad-brand);
  color: #fff;
  font: 600 15px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, transform 120ms var(--ad-ease-out);
}
.ad-btn i { font-size: 13px; transition: transform 180ms var(--ad-ease-out); }
.ad-btn:active { transform: scale(.97); }
.ad-btn-ghost { background: #fff; border-color: var(--ad-line); color: var(--ad-ink); }

.ad-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ad-brand);
  text-decoration: none;
}
.ad-more i { font-size: 12px; transition: transform 180ms var(--ad-ease-out); }

@media (hover: hover) {
  .ad-btn:hover { background: var(--ad-brand-deep); border-color: var(--ad-brand-deep); }
  .ad-btn-ghost:hover { background: #fff; border-color: var(--ad-ink); color: var(--ad-ink); }
  .ad-btn:hover i, .ad-more:hover i { transform: translateX(3px); }
}
.ad-sec a:focus-visible, .ad-over a:focus-visible, .ad-sec button:focus-visible,
.ad-sec summary:focus-visible, .ad-sec input:focus-visible, .ad-sec select:focus-visible {
  outline: 2px solid var(--ad-brand);
  outline-offset: 3px;
}

/* ---------- Band: rides up over the hero ---------- */

.ad-band {
  display: grid;
  justify-items: center;
  padding: 48px 24px;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-r);
  background: #fff;
  background-image: radial-gradient(90% 120% at 12% 0%, rgba(76, 72, 157, .10), transparent 62%);
  box-shadow: var(--ad-shadow);
  text-align: center;
}
@media (min-width: 768px) { .ad-band { padding: 64px 56px; } }
.ad-band h2 { max-width: 780px; }
.ad-band p { max-width: 620px; margin: 16px 0 0; font-size: 17px; line-height: 1.6; color: var(--ad-soft); }

.ad-band-dark {
  border-color: transparent;
  background: var(--ad-navy);
  background-image: radial-gradient(60% 80% at 80% 0%, rgba(124, 118, 230, .45), transparent 60%);
}
.ad-band-dark h2 { color: #fff; }
.ad-band-dark p { color: rgba(255, 255, 255, .78); }
.ad-band-dark .ad-btn { background: #fff; border-color: #fff; color: var(--ad-navy); }
.ad-band-dark .ad-btn-ghost { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
@media (hover: hover) {
  .ad-band-dark .ad-btn:hover { background: #eef0ff; border-color: #eef0ff; }
  .ad-band-dark .ad-btn-ghost:hover { background: transparent; border-color: #fff; color: #fff; }
}
.ad-band-dark a:focus-visible { outline-color: #fff; }

/* ---------- Service panels ---------- */

.ad-panels { display: grid; gap: 20px; }
.ad-panel {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 28px 20px;
  border-radius: var(--ad-r);
}
@media (min-width: 768px) { .ad-panel { padding: 40px; } }
@media (min-width: 1024px) {
  .ad-panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; padding: 56px; }
  .ad-panel-flip { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .ad-panel-flip .ad-panel-copy { order: 2; }
}
/* On wide screens each panel pins under the header and the next slides over it,
   so they pile like cards. Each stops a little lower than the one before. */
@media (min-width: 1024px) and (min-height: 700px) {
  .ad-panels { gap: 40px; padding-bottom: 40px; }
  .ad-panel { position: sticky; min-height: 520px; box-shadow: 0 -12px 40px rgba(22, 20, 58, .08); }
  .ad-panel:nth-child(1) { top: 104px; }
  .ad-panel:nth-child(2) { top: 120px; }
  .ad-panel:nth-child(3) { top: 136px; }
  .ad-panel:nth-child(4) { top: 152px; }
  .ad-panel:nth-child(5) { top: 168px; }
}
.tint-sky { background: var(--ad-sky); }
.tint-mint { background: var(--ad-mint); }
.tint-lav { background: var(--ad-lav); }
.tint-peach { background: var(--ad-peach); }
.tint-lemon { background: var(--ad-lemon); }

.ad-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
}
.ad-tag i { color: var(--ad-brand); }
.ad-panel h3 { margin: 0; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
.ad-panel-copy > p { margin: 14px 0 18px; font-size: 16px; line-height: 1.6; color: var(--ad-soft); }
.ad-panel-copy ul { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.ad-panel-copy li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.ad-panel-copy li i { margin-top: 4px; font-size: 13px; color: var(--ad-brand); }
.ad-panel-art { min-width: 0; }

/* The picture comes in from its own side, a beat after the copy, once. */
.js-ready .ad-panel .ad-win { opacity: 0; transform: translateX(32px) scale(.98); }
.js-ready .ad-panel-flip .ad-win { transform: translateX(-32px) scale(.98); }
.js-ready .ad-panel.in .ad-win {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ad-ease-out-expo) 120ms, transform 900ms var(--ad-ease-out-expo) 120ms;
}

/* Mock product windows */
.ad-win {
  overflow: hidden;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(22, 20, 58, .06), 0 24px 54px rgba(22, 20, 58, .14);
  font-size: 13px;
  color: var(--ad-ink);
}
.ad-win-bar { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--ad-line); background: #fafafd; }
.ad-win-bar span { width: 10px; height: 10px; border-radius: 50%; background: #dcdbe8; }
.ad-win-bar b { margin-left: 10px; font-size: 12px; font-weight: 600; color: var(--ad-faint); }
.ad-win-body { padding: 16px; }
@media (min-width: 768px) { .ad-win-body { padding: 20px; } }

.ad-table { display: grid; }
.ad-tr {
  display: grid;
  grid-template-columns: 1.8fr .9fr .9fr;
  gap: 10px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--ad-line);
  white-space: nowrap;
}
.ad-tr:last-child { border-bottom: 0; }
/* Phones: two columns, so the names in the first one aren't cut off. */
@media (max-width: 520px) {
  .ad-tr { grid-template-columns: 1.6fr 1fr; }
  .ad-tr > span:nth-child(3) { display: none; }
}
.ad-tr > span { overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 10px; }
.ad-th { padding-top: 0; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ad-faint); }
.ad-tr.is-off { color: var(--ad-faint); }
.ad-toggle { position: relative; flex-shrink: 0; width: 28px; height: 16px; border-radius: 999px; background: #1877f2; }
.ad-toggle::after { content: ""; position: absolute; top: 2px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.is-off .ad-toggle { background: #d4d3e0; }
.is-off .ad-toggle::after { right: auto; left: 2px; }
.ad-ok, .ad-learn { font-weight: 600; }
.ad-ok { color: #16803c; }
.ad-learn { color: #a16207; }
.ad-ok::before, .ad-learn::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.ad-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border: 1px solid var(--ad-line); border-radius: 999px; box-shadow: 0 1px 4px rgba(22, 20, 58, .06); }
.ad-search i { color: var(--ad-faint); font-size: 12px; }
.ad-result { margin-top: 16px; display: grid; gap: 6px; }
.ad-result small { font-size: 12px; color: var(--ad-soft); }
.ad-result small b { color: var(--ad-ink); }
.ad-result strong { font-size: 17px; font-weight: 500; color: #1a0dab; }
.ad-result span { font-size: 13px; color: var(--ad-soft); }
.ad-result.is-ad { padding: 14px; border-radius: 14px; background: #f7f8ff; }
.ad-result i { display: block; height: 10px; width: 40%; border-radius: 6px; background: #ecebf3; }
.ad-result i.w80 { width: 80%; height: 12px; background: #dcdcf5; }
.ad-result i.w70 { width: 70%; height: 12px; background: #dcdcf5; }
.ad-result i.w60 { width: 60%; }
.ad-result i.w50 { width: 50%; }

.ad-pos { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: #f1f0f7; font-size: 12px; }
.ad-pos.is-top { background: var(--ad-brand); color: #fff; }
.ad-up { color: #16803c; font-weight: 600; }
.ad-up i { font-size: 10px; }

.ad-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; }
.ad-cal span { font-size: 11px; font-weight: 600; color: var(--ad-faint); }
.ad-cal i {
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px dashed #dcdbe8;
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
}
.ad-cal i.is-reel { border: 0; background: var(--ad-brand); color: #fff; }
.ad-cal i.is-post { border: 0; background: var(--ad-lav); color: var(--ad-brand); }
.ad-cal i.is-story { border: 0; background: var(--ad-peach); color: #b4540f; }

.ad-funnel { display: grid; gap: 12px; }
.ad-funnel div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; }
.ad-funnel span { font-size: 13px; color: var(--ad-soft); }
.ad-funnel i { display: block; width: var(--w); height: 26px; border-radius: 8px; background: #dcdcf5; }
.ad-funnel i.is-end { background: var(--ad-brand); }

.ad-also { margin: 32px 0 0; text-align: center; font-size: 15px; color: var(--ad-soft); }
.ad-also a { color: var(--ad-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--ad-line); text-underline-offset: 3px; transition: text-decoration-color 150ms ease; }
@media (hover: hover) { .ad-also a:hover { text-decoration-color: var(--ad-brand); } }

/* ---------- Proof ---------- */

.ad-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 920px;
  margin: 0 auto;
}
@media (min-width: 768px) { .ad-stats { grid-template-columns: repeat(4, 1fr); } }
.ad-stats div { display: flex; flex-direction: column; align-items: center; padding: 12px; }
.ad-stats dt { order: 2; margin-top: 6px; font-size: 14px; color: var(--ad-soft); }
.ad-stats dd { margin: 0; font-size: clamp(34px, 4vw, 48px); line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--ad-brand); }

/* Clients drift past on a loop, the platforms we run drift the other way below.
   Time-based motion, so it runs linear; a row pauses under the pointer so a name can
   be read, and both stand still for reduced motion. */
.ad-marquee {
  margin-top: 40px;
  display: grid;
  gap: 14px;
  padding: 10px 0 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ad-marquee-track {
  display: flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: ad-marquee 55s linear infinite;
}
/* The platforms row runs the other way and a little faster, so the two rows never lock step. */
.ad-marquee-row.is-reverse .ad-marquee-track { animation-duration: 42s; animation-direction: reverse; }
.ad-marquee-row:hover .ad-marquee-track { animation-play-state: paused; }
@keyframes ad-marquee { to { transform: translateX(calc(-50% - 7px)); } }

/* Client: initials, name and industry, and the result in its own badge. */
.ad-client {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid var(--ad-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 20, 58, .04), 0 12px 26px -16px rgba(22, 20, 58, .22);
  white-space: nowrap;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ad-avatar {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
}
.ad-avatar.c1 { background: linear-gradient(135deg, #6f6ad8, #4c489d); }
.ad-avatar.c2 { background: linear-gradient(135deg, #f7a531, #e8590c); }
.ad-avatar.c3 { background: linear-gradient(135deg, #ee5b9f, #c0266d); }
.ad-avatar.c4 { background: linear-gradient(135deg, #23c58f, #0b8a5f); }
.ad-avatar.c5 { background: linear-gradient(135deg, #38b2f0, #2856d8); }
.ad-client-text b { display: block; font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--ad-ink); }
.ad-client-text span { display: block; margin-top: 4px; font-size: 13px; color: var(--ad-faint); }
.ad-client-result {
  margin-left: 8px;
  padding: 9px 13px;
  border-radius: 12px;
  background: var(--ad-lav);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ad-brand);
}
.ad-client-result b { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; }

/* Platform: quieter pill so the client names stay the headline. */
.ad-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ad-soft);
  white-space: nowrap;
  transition: border-color 150ms ease, color 150ms ease;
}
.ad-tool i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ad-lav);
  color: var(--ad-brand);
  font-size: 14px;
}
@media (hover: hover) {
  .ad-client:hover { border-color: rgba(76, 72, 157, .45); box-shadow: 0 1px 2px rgba(22, 20, 58, .04), 0 16px 32px -16px rgba(76, 72, 157, .45); }
  .ad-tool:hover { border-color: rgba(76, 72, 157, .45); color: var(--ad-ink); }
}
@media (max-width: 640px) {
  .ad-marquee { gap: 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
  .ad-marquee-track { gap: 10px; }
  .ad-client { gap: 11px; padding: 10px; border-radius: 16px; }
  .ad-avatar { width: 38px; height: 38px; border-radius: 12px; font-size: 12.5px; }
  .ad-client-text b { font-size: 14.5px; }
  .ad-client-text span { font-size: 12px; }
  .ad-client-result { padding: 7px 10px; font-size: 11.5px; }
  .ad-client-result b { font-size: 13.5px; }
  .ad-tool { font-size: 13px; padding: 6px 14px 6px 6px; }
  .ad-tool i { width: 28px; height: 28px; font-size: 12.5px; }
}
.ad-center-link { text-align: center; margin-top: 8px; }

/* ---------- The one dark card ---------- */

.ad-trust {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 36px 24px;
  border-radius: var(--ad-r);
  background: var(--ad-navy);
  background-image: radial-gradient(60% 90% at 0% 0%, rgba(124, 118, 230, .35), transparent 60%);
  color: #fff;
}
@media (min-width: 1024px) { .ad-trust { grid-template-columns: 1fr 1.15fr; gap: 56px; padding: 56px; } }
.ad-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  padding: 6px 13px 6px 10px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}
.ad-trust-pill i { color: #b9b5ff; }
.ad-sec .ad-trust h2 { color: #fff; }
.ad-trust-copy p { max-width: 470px; margin: 18px 0 20px; font-size: 16.5px; line-height: 1.65; color: rgba(255, 255, 255, .72); }
.ad-trust-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; font-weight: 500; color: #fff; text-decoration: none; }
.ad-trust-link i { font-size: 12px; transition: transform 150ms ease; }
@media (hover: hover) { .ad-trust-link:hover i { transform: translateX(3px); } }
.ad-trust a:focus-visible { outline-color: #fff; }

.ad-trust-grid {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 22px;
  background: rgba(255, 255, 255, .035);
}
@media (min-width: 640px) { .ad-trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ad-trust-grid li { display: grid; align-content: start; gap: 6px; padding: 26px 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ad-trust-grid li:last-child { border-bottom: 0; }
@media (min-width: 640px) {
  .ad-trust-grid li:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .1); }
  .ad-trust-grid li:nth-last-child(-n+2) { border-bottom: 0; }
}
.ad-trust-ico { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 10px; border-radius: 12px; background: rgba(185, 181, 255, .14); color: #c9c6ff; font-size: 16px; }
.ad-trust-grid b { font-size: 16px; font-weight: 600; }
.ad-trust-grid li > span:last-child { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .68); }

/* ---------- Steps and the audit form ---------- */

.ad-signup {
  display: grid;
  gap: 40px;
  align-items: start;
  padding: 32px 20px;
  border-radius: var(--ad-r);
  background: var(--ad-lav);
}
@media (min-width: 768px) { .ad-signup { padding: 48px; } }
@media (min-width: 1024px) { .ad-signup { grid-template-columns: 1fr 440px; gap: 56px; padding: 56px; } }
.ad-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 22px; }
.ad-steps li { display: flex; gap: 16px; }
.ad-steps li > b {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--ad-brand);
  color: #fff;
  font-size: 15px;
}
.ad-steps strong { display: block; font-size: 17px; font-weight: 700; }
.ad-steps p { margin: 4px 0 0; font-size: 15px; line-height: 1.55; color: var(--ad-soft); }

.ad-form {
  display: grid;
  padding: 28px 24px;
  border: 1px solid var(--ad-line);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--ad-shadow);
}
@media (min-width: 768px) { .ad-form { padding: 32px; } }
.ad-form h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.ad-form-sub { margin: 6px 0 12px; font-size: 14px; color: var(--ad-soft); }
.ad-form label { margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
.ad-form input, .ad-form select {
  height: 48px;
  padding: 0 14px;
  border: 1px solid #d8d7e6;
  border-radius: 12px;
  background: #fff;
  font: 400 16px/1 Inter, system-ui, sans-serif;
  color: var(--ad-ink);
  transition: border-color 150ms ease;
}
.ad-form input:focus, .ad-form select:focus { border-color: var(--ad-brand); outline: none; box-shadow: 0 0 0 3px rgba(76, 72, 157, .15); }
.ad-form .ad-btn { margin-top: 22px; width: 100%; }
.ad-form .ad-btn[disabled] { opacity: .7; cursor: progress; }
.ad-form-status { margin: 10px 0 0; min-height: 20px; font-size: 14px; color: #b42318; }
.ad-hidden { display: none; }

/* ---------- Software ---------- */

.ad-soft {
  display: grid;
  gap: 32px;
  align-items: center;
  padding: 32px 20px;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-r);
  background: #fff;
  background-image: radial-gradient(80% 120% at 100% 0%, rgba(76, 72, 157, .10), transparent 60%);
}
@media (min-width: 768px) { .ad-soft { padding: 48px; } }
@media (min-width: 1024px) { .ad-soft { grid-template-columns: 1fr 1fr; gap: 56px; padding: 56px; } }
.ad-soft-copy p { margin: 16px 0 24px; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--ad-soft); }
.ad-soft-copy p b { color: var(--ad-ink); }
.ad-soft-mods { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ad-soft-mods li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: 1px solid var(--ad-line);
  border-radius: 999px;
  background: #fafafe;
  font-size: 14.5px;
  font-weight: 500;
}
.ad-soft-mods i { font-size: 13px; color: var(--ad-brand); }

/* ---------- FAQ ---------- */

.ad-faq-grid { display: grid; gap: 32px; }
@media (min-width: 1024px) { .ad-faq-grid { grid-template-columns: 1fr 1.6fr; gap: 64px; } }
.ad-faq-grid > div:first-child p { margin: 16px 0 12px; font-size: 17px; line-height: 1.6; color: var(--ad-soft); }
.ad-faq details { border-bottom: 1px solid var(--ad-line); }
.ad-faq details:first-child { border-top: 1px solid var(--ad-line); }
.ad-faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  transition: color 150ms ease;
}
.ad-faq summary::-webkit-details-marker { display: none; }
.ad-faq summary i { flex-shrink: 0; font-size: 13px; color: var(--ad-faint); transition: transform 180ms cubic-bezier(.645, .045, .355, 1); }
.ad-faq details[open] summary i { transform: rotate(45deg); }
.ad-faq details p { margin: 0 0 20px; max-width: 640px; font-size: 15.5px; line-height: 1.65; color: var(--ad-soft); }
@media (hover: hover) { .ad-faq summary:hover { color: var(--ad-brand); } }

/* The footer's own top gap is enough after the closing band. */
.ad-sec-last + .ft { padding-top: 48px; }

@media (prefers-reduced-motion: reduce) {
  .ad-marquee-track { animation: none; }
  .js-ready .ad-panel .ad-win { opacity: 1; transform: none; transition: none; }
  .ad-sec *, .ad-over * { transition-duration: 0.01ms !important; }
}

/* Keyword line above the home headline, and the headline's own box. */
.hero-kicker {
  display: inline-block;
  margin: 0 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(226, 232, 240, .9);
  font: 600 13px/1.3 Inter, system-ui, sans-serif;
  color: #4c489d;
}
.hero-h1 { margin: 0; font-size: inherit; }
/* The bundle sized the old h1s down on phones; keep the same size now they're spans. */
@media (max-width: 640px) { .hero-h1 > span { font-size: 2.25rem !important; line-height: 2.5rem !important; } }

/* ---------- Hero: the tools we run, floating either side of the headline ----------
   Three layers so each motion owns one property: .hf follows the scroll (steps out to
   its own side as the hero recedes), .hf-in follows the pointer and plays the
   entrance, .hf-tile bobs on its own clock. --d is depth: nearer tiles are bigger,
   travel further with the pointer and bob more. */
.hf-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hf {
  position: absolute;
  left: var(--x);
  top: var(--y);
  /* Nearer tiles leave faster as the hero recedes, so the scroll itself shows depth. */
  transform: translate(-50%, -50%)
    translate(calc(var(--side) * var(--recede, 0) * var(--d) * 110px), calc(var(--recede, 0) * var(--d) * -90px));
  opacity: calc(1 - var(--recede, 0) * 1.6);
}
.hf-in {
  display: block;
  translate: calc(var(--mx, 0) * var(--d) * 16px) calc(var(--my, 0) * var(--d) * 16px);
  /* A long expo tail, so the lean trails the pointer like something with weight. */
  transition: translate 1100ms cubic-bezier(.19, 1, .22, 1);
  animation: hf-enter 700ms cubic-bezier(.19, 1, .22, 1) calc(500ms + var(--i) * 70ms) both;
}
.hf-tile {
  --size: calc(40px + var(--d) * 14px);
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
  border: 1px solid rgba(20, 19, 43, .06);
  border-radius: calc(var(--size) * .3);
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 4px rgba(22, 20, 58, .04), 0 calc(var(--d) * 14px) calc(var(--d) * 26px) -12px rgba(22, 20, 58, .24);
  color: var(--c);
  font-size: calc(var(--size) * .42);
  /* Three sways on three clocks whose lengths share no rhythm, so each tile traces a
     slow loop that never visibly repeats and no two tiles move in step. */
  --sine: cubic-bezier(.37, 0, .63, 1);
  animation:
    hf-rise calc(5.4s + var(--d) * 1.3s) var(--sine) calc(var(--i) * -1.7s) infinite alternate,
    hf-sway calc(7.9s + var(--d) * .9s) var(--sine) calc(var(--i) * -2.3s) infinite alternate,
    hf-tilt calc(9.7s - var(--d) * .8s) var(--sine) calc(var(--i) * -3.1s) infinite alternate;
}
@keyframes hf-enter { from { opacity: 0; scale: .6; } }
@keyframes hf-rise {
  from { transform: translateY(calc(-6px - var(--d) * 8px)); }
  to { transform: translateY(calc(6px + var(--d) * 8px)); }
}
@keyframes hf-sway {
  from { translate: calc(-3px - var(--d) * 5px) 0; }
  to { translate: calc(3px + var(--d) * 5px) 0; }
}
@keyframes hf-tilt {
  from { rotate: calc(var(--side) * -7deg); }
  to { rotate: calc(var(--side) * 5deg); }
}
/* Below desktop the headline fills the width, so only four small tiles stay, tucked
   into the corners above the kicker and beside the partner logos. */
@media (max-width: 1023px) {
  .hf:not(.hf-m) { display: none; }
  .hf-m { left: var(--xm); top: var(--ym); }
  /* Tiles sit close to the headline here, so they sway a shorter distance. */
  .hf-tile { --size: 42px; --d: .5; opacity: .9; }
}
@media (max-width: 640px) {
  .hf-tile { --size: 36px; }
}

/* ---------- Marketing + software: two rings round the mark ---------- */
.st {
  display: grid;
  gap: 40px;
  align-items: center;
  padding: 32px 20px;
  border: 1px solid var(--ad-line);
  border-radius: var(--ad-r);
  background: #fff;
  background-image: radial-gradient(70% 90% at 100% 50%, rgba(76, 72, 157, .09), transparent 65%);
  overflow: hidden;
}
@media (min-width: 768px) { .st { padding: 48px; } }
@media (min-width: 1024px) { .st { grid-template-columns: 1fr 1.05fr; gap: 56px; padding: 56px 64px; } }
.st-copy p { margin: 16px 0 24px; max-width: 520px; font-size: 17px; line-height: 1.6; color: var(--ad-soft); }
.st-legend { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; }
.st-legend li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ad-soft); }
.st-legend b { color: var(--ad-ink); font-weight: 600; }
.st-dot { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; border: 2px dashed rgba(76, 72, 157, .45); }
.st-dot.is-inner { border-style: solid; border-color: var(--ad-brand); }
.st-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }

.st-orbit {
  --spin: 70s;
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  margin: 0 auto;
}
.st-orbit::before {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(76, 72, 157, .16), transparent 70%);
}
/* Rings turn at a constant rate and each icon turns back against its ring, so the
   logos travel round the circle but always stay upright. */
.st-ring {
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1.5px dashed rgba(76, 72, 157, .28);
  animation: st-spin var(--spin) linear infinite;
}
.st-ring.is-inner {
  inset: 26%;
  border: 1.5px solid rgba(76, 72, 157, .22);
  animation-duration: calc(var(--spin) * .7);
  animation-direction: reverse;
}
.st-node { position: absolute; inset: 0; transform: rotate(var(--a)); pointer-events: none; }
.st-ico {
  position: absolute;
  left: 50%;
  top: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  translate: -50% -50%;
  border: 1px solid var(--ad-line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px -10px rgba(22, 20, 58, .3);
  color: var(--c);
  font-size: 22px;
  pointer-events: auto;
}
.st-ico i { rotate: calc(-1 * var(--a)); animation: st-unspin var(--spin) linear infinite; }
.is-inner .st-ico { width: 48px; height: 48px; font-size: 19px; }
.is-inner .st-ico i { animation-duration: calc(var(--spin) * .7); animation-direction: reverse; }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-unspin { to { transform: rotate(-360deg); } }
.st-orbit:hover .st-ring, .st-orbit:hover .st-ico i { animation-play-state: paused; }

.st-core {
  position: absolute;
  inset: 38%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 10px rgba(76, 72, 157, .06), 0 20px 40px -14px rgba(22, 20, 58, .35);
}
.st-core img { width: 42%; height: auto; }
.st-core b { font-size: 14px; font-weight: 800; letter-spacing: -0.01em; color: var(--ad-ink); }
@media (max-width: 640px) {
  .st-ico { width: 44px; height: 44px; font-size: 18px; }
  .is-inner .st-ico { width: 38px; height: 38px; font-size: 15px; }
  .st-core b { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hf-in, .hf-tile, .st-ring, .st-ico i { animation: none; }
  .hf-in { transition: none; }
}
/* Small laptops: the headline reaches further out, so the inner column of tiles steps aside. */
@media (min-width: 1024px) and (max-width: 1279px) { .hf-wide { display: none; } }