/* ==========================================================================
   deeep.app — landing page
   Verstka 1:1 with Figma "❖ SDS / Main" (1440 / 810 / 375)
   ========================================================================== */

@font-face {
  font-family: 'Satoshi Variable';
  src: url('assets/fonts/Satoshi-Variable.woff2') format('woff2-variations'),
       url('assets/fonts/Satoshi-Variable.woff2') format('woff2');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi Variable';
  src: url('assets/fonts/Satoshi-VariableItalic.woff2') format('woff2-variations'),
       url('assets/fonts/Satoshi-VariableItalic.woff2') format('woff2');
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- tokens ---------------------------------------------------- */
:root {
  /* colours — color/secure-grey token scale (Figma) */
  --bg-primary:          #0d0d0d;  /* Background/Primary   — secure-grey/95 */
  --surface-secondary:   #0d0d0d;  /* Background/Secondary — secure-grey/95 */
  --fg-secondary:        #121212;  /* Foreground/Secondary — secure-grey/90 */
  --fg-tertiary:         rgba(255, 255, 255, .05); /* Foreground/Tertiary — white/alpha/5 */
  --stroke-primary:      #242424;  /* Stroke/Primary       — secure-grey/80 */
  --text-primary:        #ffffff;  /* Text/Primary  — white/solid */
  --text-tertiary:       rgba(255, 255, 255, .7); /* Text/Tertiary — white/alpha/70 */
  --text-contrast:       #000000;  /* Text/Contrast — black/solid */
  --fg-contrast:         #ffffff;  /* Foreground/Contrast — white/solid */
  --glass-overlay:       rgba(255, 255, 255, .012);
  --glass-shadow:        inset 0 -2px 8px 0 rgba(255, 255, 255, .04),
                         inset 0  2px 8px 0 rgba(255, 255, 255, .04);

  /* radii */
  --r-6: 6px;
  --r-12: 12px;
  --r-24: 24px;
  --r-full: 9999px;

  /* motion */
  --duration-page: .8s;
  --duration-fast: .25s;
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);

  /* layout (desktop 1440) */
  --pad-x: 40px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'Satoshi Variable', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-feature-settings: 'liga' 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
/* brand cyan highlight at half strength — it blends over the dark
   surfaces, so white ink stays the readable choice */
::selection { background: rgba(52, 199, 229, .25); color: #fff; }
img { display: block; max-width: 100%; }
picture { display: contents; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.page {
  max-width: 1440px;
  margin: 0 auto;
  background: var(--bg-primary);
}

.dim { color: var(--text-tertiary); }

/* ---------- icons ----------------------------------------------------- */
.chev  { position: relative; width: 16px; height: 16px; flex: none;
         display: flex; align-items: center; justify-content: center; }
.chev img { width: 4.367px; height: 7.433px; transform: rotate(-90deg); }

.imenu { position: relative; width: 20px; height: 20px; flex: none;
         display: flex; align-items: center; justify-content: center; }
.imenu img { width: 15px; height: 10px; }

.iarrow { position: relative; width: 20px; height: 20px; flex: none; }
.iarrow img { position: absolute; left: 16.67%; top: 26.82%; width: 64.89%; height: 46.36%; }

.icon24 { position: relative; width: 24px; height: 24px; flex: none; overflow: hidden; }
.icon24 img { position: absolute; width: auto; height: auto; }

/* ---------- buttons --------------------------------------------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex: none;
  border-radius: var(--r-24);
  overflow: hidden;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -.5px;
  white-space: nowrap;
  transition: transform .2s var(--ease-out-expo), opacity .2s var(--ease-out-expo);
}
.btn > span { display: flex; align-items: center; padding: 0 2px; }
.btn--sm { padding: 8px 12px; }
.btn--lg { padding: 14px 20px; }

.btn--primary   { background: var(--fg-contrast); color: var(--text-contrast); }
.btn--secondary { background: var(--surface-secondary); color: var(--text-primary);
                  box-shadow: var(--glass-shadow); }
.btn--secondary::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--glass-overlay); pointer-events: none;
}
.btn:hover  { opacity: .9; }
.btn:active { transform: scale(.98); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.page { padding-top: 52px; }
.header {
  position: fixed; inset: 0 0 auto;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px var(--pad-x);
  background: transparent;
  transition: background .3s var(--ease-out-expo), box-shadow .3s var(--ease-out-expo);
}
.header.is-scrolled {
  background: rgba(10, 10, 10, .74);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
}
.header__left  { display: flex; align-items: center; gap: 40px; }
.header__right { display: flex; align-items: center; gap: 8px; }

.logo { display: flex; align-items: center; height: 20px; width: 110px; overflow: hidden; flex: none; }
.logo img { width: 109.091px; height: 19.938px; }

.nav { display: flex; align-items: center; gap: 8px; height: 32px; }
.nav__tab {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 32px; padding: 0 12px;
  font-size: 14px; line-height: 20px; font-weight: 450; letter-spacing: 0;
  color: var(--text-primary); white-space: nowrap;
  border-radius: var(--r-full);
  transition: background .2s var(--ease-out-expo);
}
.nav__tab:hover { background: var(--fg-tertiary); }

/* ---------- Products dropdown  (Figma "Header-v1", 851x344) ------------ */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item.is-open > .nav__tab { background: var(--fg-tertiary); }
.chev img { transition: transform .28s var(--ease-out-expo); }
/* flips through a flat midpoint instead of spinning to the side */
.nav__item.is-open .chev img { transform: rotate(-90deg) scaleY(-1); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  padding-top: 8px;         /* invisible bridge — keeps hover alive over the gap */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px) scale(.975);
  transform-origin: top left;
  transition: opacity .13s cubic-bezier(.22, .61, .36, 1),   /* quick exit */
              transform .13s cubic-bezier(.22, .61, .36, 1),
              visibility 0s linear .13s;
}
.nav__item.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  z-index: 11;              /* the live panel always paints above a closing one */
  transition: opacity .38s var(--ease-out-expo),
              transform .44s var(--ease-out-expo),
              z-index 0s, visibility 0s;
}
/* Menu contents cascade in behind the panel reveal; delays live on the
   open state only, so closing clears them and the menu leaves promptly. */
.dropdown .ditem, .dropdown .dropdown__card {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity .32s var(--ease-out-expo),
              transform .32s var(--ease-out-expo),
              background .18s var(--ease-out-expo);
}
.nav__item.is-open .ditem, .nav__item.is-open .dropdown__card {
  opacity: 1;
  transform: none;
}
.nav__item.is-open .dropdown__list li:nth-child(2) .ditem { transition-delay: .04s, .04s, 0s; }
.nav__item.is-open .dropdown__list li:nth-child(3) .ditem { transition-delay: .08s, .08s, 0s; }
.nav__item.is-open .dropdown__list li:nth-child(4) .ditem { transition-delay: .12s, .12s, 0s; }
.nav__item.is-open .dropdown__list li:nth-child(5) .ditem { transition-delay: .16s, .16s, 0s; }
.nav__item.is-open .dropdown__card { transition-delay: .1s, .1s, 0s; }

.dropdown__panel {
  display: flex;
  gap: 12px;
  width: 851px;
  padding: 12px;
  border-radius: var(--r-24);
  background: var(--fg-secondary);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .64);
}

/* Solutions uses the same menu behaviour and surface as Products, but the
   Figma variant deliberately omits the preview card. */
.dropdown--solutions { left: 0; }
.nav__item.is-open .dropdown--solutions { transform: none; }
.dropdown__panel--solutions { width: 344px; }
.dropdown__panel--solutions .dropdown__list { width: 100%; }
.dropdown__panel--solutions .ditem__sub { white-space: normal; }

.dropdown__list { display: flex; flex-direction: column; width: 232px; flex: none; }
.ditem {
  display: flex;
  flex-direction: column;
  padding: 12px;
  border-radius: var(--r-12);
  transition: background .2s var(--ease-out-expo);
}
.ditem:hover, .ditem.is-active { background: var(--fg-tertiary); }
.ditem:hover .ditem__sub, .ditem.is-active .ditem__sub { color: var(--text-primary); }
.ditem__title {
  font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: -.5px;
  color: var(--text-primary);
}
.ditem__sub {
  font-size: 14px; line-height: 20px; font-weight: 450; letter-spacing: 0;
  color: var(--text-tertiary);
  transition: color .25s var(--ease-out-expo);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.dropdown__card {
  position: relative; flex: 1; height: 320px;
  border-radius: var(--r-12); overflow: hidden;
  background: var(--bg-primary);
}
.dropdown__shot {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s var(--ease-out-expo);
}
.dropdown__shot.is-active { opacity: 1; }

.burger {
  display: none;
  position: relative;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 8px;
  border-radius: var(--r-full);
  background: var(--fg-tertiary);
  box-shadow: var(--glass-shadow);
  flex: none;
}
.mobile-menu { display: none; }
.mobile-break { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding: 264px var(--pad-x) 64px;
}
.hero__top {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 24px;
  width: 100%;
}
.hero__title {
  flex: 1 0 0;
  min-width: 0;
  font-size: 76px;
  line-height: 84px;
  font-weight: 600;
  letter-spacing: -3px;
}
.hero__actions { display: flex; align-items: flex-start; gap: 12px; flex: none; }

/* the box owns the ratio — the media is absolute so its own intrinsic
   ratio can never stretch the layout. It also stays put as a placeholder
   while .hero__frame is pinned to the viewport (see the scroll transition). */
.hero__media { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--bg-primary); }
.hero__clients { display: none; }
.hero__clients-track { display: flex; align-items: center; gap: 40px; width: max-content; will-change: transform;
  animation: trusted-marquee var(--marquee-duration, 30s) linear infinite; }
.hero__clients-group { display: flex; align-items: center; gap: 40px; flex: none; }
.hero__frame { position: absolute; inset: 0; overflow: hidden; border-radius: 20px; }
.hero__frame img,
.hero__frame video { position: absolute; inset: 0; display: block;
                     width: 100%; height: 100%; object-fit: cover; }
.hero__expand, .hero__video-close { display: none; }

/* Sound control for the scroll-driven hero expansion — a glass pill that
   fades in while the video is pinned full-screen (desktop only). Same
   surface language as the scrolled header: translucent dark + blur. */
.hero__sound {
  position: fixed; z-index: 4; right: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 16px 0 12px;
  border-radius: var(--r-24);
  background: rgba(10, 10, 10, .5);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: var(--glass-shadow), 0 16px 40px rgba(0, 0, 0, .35);
  color: var(--text-primary);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .3s var(--ease-out-expo),
              transform .3s var(--ease-out-expo),
              background .2s var(--ease-out-expo),
              visibility 0s linear .3s;
}
.hero__frame.is-pinned .hero__sound {
  opacity: 1; visibility: visible; transform: none;
  transition-delay: 0s;
}
.hero__sound:hover { background: rgba(10, 10, 10, .72); }
.hero__sound-btn {
  display: grid; place-items: center; width: 24px; height: 24px;
  color: var(--text-primary);
  opacity: .85;
  transition: opacity .2s var(--ease-out-expo);
}
.hero__sound-btn:hover { opacity: 1; }
.hero__sound-btn:focus-visible, .hero__sound-range:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .2); outline-offset: 2px;
}
.hero__sound-btn svg { display: block; }
.hero__sound-cross { display: none; }
.hero__sound.is-muted .hero__sound-wave { display: none; }
.hero__sound.is-muted .hero__sound-cross { display: block; }
.hero__sound-range {
  -webkit-appearance: none; appearance: none;
  --fill: 30%;
  width: 128px; height: 20px; margin: 0;
  background: transparent; cursor: pointer; border: 0; padding: 0;
}
.hero__sound-range::-webkit-slider-runnable-track {
  height: 10px; border-radius: var(--r-full);
  background: linear-gradient(90deg, rgba(255, 255, 255, .95) var(--fill), rgba(255, 255, 255, .18) var(--fill));
}
.hero__sound-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 2px; height: 10px; margin-top: 0;
  border: 0; border-radius: 0; padding: 0;
  background: transparent; box-shadow: none;
}
.hero__sound-range:hover::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, #fff var(--fill), rgba(255, 255, 255, .24) var(--fill));
}
.hero__sound-range::-moz-range-track {
  height: 10px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .18); border: 0;
}
.hero__sound-range::-moz-range-progress {
  height: 10px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .95);
}
.hero__sound-range::-moz-range-thumb {
  width: 2px; height: 10px; border: 0; border-radius: 0; padding: 0;
  background: transparent; box-shadow: none;
}
.hero__sound-range::-moz-range-thumb {
  width: 4px; height: 20px; border: 0; border-radius: var(--r-full);
  background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
@media (max-width: 1199px) { .hero__sound { display: none; } }

/* pinned state — JS drives left/top/width/height, so the CSS insets step aside */
.hero__frame.is-pinned {
  position: fixed;
  inset: auto;
  z-index: 60;
  will-change: left, top, width, height;
}

/* ==========================================================================
   MODULES
   ========================================================================== */
.modules {
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 64px 24px;
  overflow: hidden;
}
.modules__title {
  width: 100%;
  padding: 0 16px;
  font-size: 44px;
  line-height: 44px;
  font-weight: 550;
  letter-spacing: -1px;
}
.modules__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.mcard {
  position: relative;
  isolation: isolate;   /* keeps the z-index:-1 backdrop inside the card */
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  aspect-ratio: 456 / 250;
  padding: 8px;
  border-radius: var(--r-12);
  overflow: hidden;
}
/* Sits behind the label and CTA instead of over them, so those two can stay
   unpositioned — which is what lets the CTA's stretched hit area resolve
   against the card rather than against the CTA's own little box. */
.mcard__bg { position: absolute; inset: 0; z-index: -1;
             border-radius: var(--r-12); overflow: hidden; pointer-events: none; }
.mcard__base { position: absolute; inset: 0; background: var(--fg-tertiary); }
.mcard__img  { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; }
.mcard__video { display: block; border: 0; background: var(--bg-primary); }
.mcard__grad { position: absolute; inset: 0;
               background: linear-gradient(180deg, rgba(0,0,0,0) 66%, rgb(0,0,0) 102%); }

/* per-card image framing, exactly as placed in Figma */
.mcard__img--emails    { inset: auto; top: 0;       left: .07%;    width: 99.86%;  height: 146%;    object-fit: fill; opacity: .5; }

.mcard__label {
  position: relative;
  display: flex; align-items: center;
  height: 36px; padding: 0 12px 0 8px;
  border-radius: var(--r-12);
  font-size: 14px; line-height: 20px; font-weight: 550; letter-spacing: 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, .75);
  transition: color .3s var(--ease-out-expo);
}
.mcard__cta {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 12px;
  border-radius: var(--r-12);
  font-size: 14px; line-height: 20px; font-weight: 550; letter-spacing: 0;
  white-space: nowrap;
  color: rgba(255, 255, 255, .75);
  transition: color .3s var(--ease-out-expo);
}
/* the CTA stretches over the whole card, so the card is one click target */
.mcard__cta[href]::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.mcard:has(.mcard__cta[href]) { cursor: pointer; }
.mcard .iarrow { transition: transform .3s var(--ease-out-expo); }
.mcard--soon .mcard__label,
.mcard--soon .mcard__cta { color: var(--text-tertiary); }

/* ==========================================================================
   TRUSTED BY
   ========================================================================== */
.trusted {
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 64px var(--pad-x);
  overflow: hidden;
}
.trusted__heading { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.trusted__title {
  width: 100%;
  font-size: 44px; line-height: 44px; font-weight: 550; letter-spacing: -1px;
}
/* full-bleed strip: the logos run past the section padding and get clipped
   at the section edges, exactly as the frame shows them */
.trusted__row {
  width: calc(100% + 2 * var(--pad-x));
  margin-inline: calc(-1 * var(--pad-x));
  overflow: hidden;
}
.trusted__track {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  will-change: transform;
  animation: trusted-marquee var(--marquee-duration, 40s) linear infinite;
}
.trusted__group { display: flex; align-items: center; gap: 12px; flex: none; }

@keyframes trusted-marquee {
  to { transform: translateX(calc(-1 * var(--marquee-shift, 0px))); }
}
/* let people actually read a logo they reached for */


.logocard {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex: none;
  width: 432px; height: 432px;
  padding: 4px;
  border-radius: var(--r-12);
  background: var(--fg-secondary);
  overflow: hidden;
}
/* the photo is the hover state — every card starts as flat surface */
.logocard__bg {
  position: absolute; inset: 0;
  border-radius: var(--r-12); overflow: hidden;
  opacity: 0;
  transition: opacity .45s var(--ease-out-expo);
}
.logocard__bg img {
  width: 100%; height: 100%; object-fit: cover; max-width: none;
  transform: scale(1.06);
  transition: transform 1.2s var(--ease-out-expo);
}
.logocard__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .38); }

@media (hover: hover) and (pointer: fine) {
  .logocard:hover .logocard__bg { opacity: 1; }
  .logocard:hover .logocard__bg img { transform: scale(1); }
}

/* Touch equivalent of the hover reveal above — tapping a card (see script.js)
   toggles this class for a few seconds. The marquee itself keeps scrolling;
   only the card's own background fades in, same as the desktop hover. */
.logocard.is-active .logocard__bg { opacity: 1; }
.logocard.is-active .logocard__bg img { transform: scale(1); }

@media (prefers-reduced-motion: reduce) {
  .trusted__track { animation: none; justify-content: center; width: 100%; }
  .logocard__bg, .logocard__bg img { transition: none; }
}

.client { position: relative; height: 84px; width: auto; max-width: none; flex: none; }
.client--abb { height: 83.7px; }

/* ==========================================================================
   FEATURES (Everything your brand needs)
   ========================================================================== */
.features {
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 64px var(--pad-x);
}
.features__heading { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.features__title {
  width: 100%;
  font-size: 44px; line-height: 44px; font-weight: 550; letter-spacing: -1px;
}
.features__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  width: 100%;
  background: var(--stroke-primary);
  border-radius: var(--r-12);
  overflow: hidden;
}
/* outer hairline is drawn inside the box, exactly as in Figma */
.features__grid::after {
  content: '';
  position: absolute; inset: 0;
  border: 1px solid var(--stroke-primary);
  border-radius: var(--r-12);
  pointer-events: none;
}
.fcard {
  order: var(--o-d);
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 20px 33px 20px 20px;
}
.fcard__text { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
.fcard__text h3 {
  font-size: 16px; line-height: 24px; font-weight: 550; letter-spacing: -.5px;
  color: var(--text-primary); white-space: nowrap;
}
.fcard__text p {
  font-size: 16px; line-height: 20px; font-weight: 450; letter-spacing: 0;
  color: var(--text-tertiary);
}

/* ==========================================================================
   GET STARTED
   ========================================================================== */
.started {
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 64px var(--pad-x);
}
.started__heading { width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.started__title { width: 100%; font-size: 44px; line-height: 44px; font-weight: 550; letter-spacing: -1px; }
.started__sub   { width: 100%; font-size: 16px; line-height: 20px; font-weight: 450; letter-spacing: 0;
                  color: var(--text-tertiary); }

.started__grid { display: flex; gap: 12px; width: 100%; border-radius: var(--r-12); }
.scard {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 40px 32px;
  background: var(--fg-tertiary);
  border-radius: var(--r-12);
  overflow: hidden;
}
.scard__num { font-size: 16px; line-height: 20px; font-weight: 450; color: var(--text-tertiary); }
.scard__text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; }
.scard__text h3 { font-size: 20px; line-height: 32px; font-weight: 550; letter-spacing: -1px; white-space: nowrap; }
.scard__text p  { font-size: 16px; line-height: 20px; font-weight: 450; letter-spacing: 0;
                  color: var(--text-tertiary); }

.started__actions { display: flex; align-items: flex-start; gap: 12px; }

/* ==========================================================================
   CONTACT — Figma Contact Form (1580:34483)
   ========================================================================== */
.contact-main { width: 100%; }
.contact-section {
  display: flex;
  align-items: flex-start;
  gap: 200px;
  width: 100%;
  padding: 128px 40px;
}
.contact-section__intro {
  align-self: stretch;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 16px;
  width: 314px;
}
.contact-section__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: var(--r-full);
  background: var(--text-primary);
  color: var(--text-contrast);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -.5px;
}
.contact-section__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}
.contact-section__copy h1 {
  font-size: 44px;
  line-height: 44px;
  font-weight: 550;
  letter-spacing: -1px;
}
.contact-section__copy p {
  font-size: 16px;
  line-height: 20px;
  font-weight: 450;
  color: var(--text-tertiary);
}
.contact-form {
  display: flex;
  flex: 1 0 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}
.contact-form__field > span {
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
  color: var(--text-tertiary);
}
.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--stroke-primary);
  border-radius: 10px;
  outline: 0;
  background: var(--fg-tertiary);
  color: var(--text-primary);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 450;
  letter-spacing: 0;
  transition: border-color .2s var(--ease-out-expo), background .2s var(--ease-out-expo);
}
.contact-form input { height: 48px; }
.contact-form textarea { height: 133px; resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--text-tertiary); opacity: 1; }
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .07);
}
.contact-form__submit { padding-inline: 64px; }

@media (max-width: 1199px) {
  .contact-section { gap: 56px; padding: 96px 20px; }
  .contact-section__intro { width: 314px; padding: 20px 0; }
  .contact-form__submit { padding-inline: 48px; }
}

@media (max-width: 767px) {
  .contact-section {
    flex-direction: column;
    gap: 0;
    padding: 64px 16px;
  }
  .contact-section__intro {
    align-self: auto;
    width: 100%;
    padding: 0;
    gap: 8px;
  }
  .contact-section__tag { display: none; }
  .contact-section__copy { gap: 8px; }
  .contact-section__copy h1 { font-size: 32px; line-height: 36px; }
  .contact-section__copy p { font-size: 14px; line-height: 20px; }
  .contact-form { width: 100%; padding: 20px 0; }
  .contact-form__field > span,
  .contact-form input,
  .contact-form textarea { font-size: 12px; line-height: 14px; }
  .contact-form textarea { height: 120px; }
  .contact-form__submit {
    align-self: center;
    padding: 8px 24px;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 0;
  }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 64px var(--pad-x) 0;
}
.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  column-gap: 200px;
  row-gap: 0;
  width: 100%;
  overflow: hidden;
}
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: none; }
.logo--footer { width: 120px; height: 22px; }
.logo--footer img { width: 120px; height: 21.932px; }
.footer__tagline {
  width: 297px;
  font-size: 14px; line-height: 20px; font-weight: 450; letter-spacing: 0;
  color: var(--text-tertiary);
}
/* columns' titles drop to the tagline's first line: logo height + brand gap */
.footer__cols { display: flex; gap: 24px; flex: 1 0 0; min-width: 0; margin-top: 34px; }
.fcol { flex: 0 1 220px; width: 220px; max-width: 220px; min-width: 0; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.fcol h4 { font-size: 16px; line-height: 24px; font-weight: 550; letter-spacing: -.5px; color: var(--text-primary); }
.fcol ul { display: flex; flex-direction: column; gap: 0; width: 100%; }
.fcol li { display: flex; width: 100%; }
.fcol a {
  /* padding carries the old 8px list gap (4px per side), so the tap
     targets tile the column with no dead rows in between */
  display: block; width: 100%; padding: 6px 0;
  font-size: 16px; line-height: 20px; font-weight: 450; letter-spacing: 0;
  color: var(--text-tertiary); white-space: nowrap;
  /* smooth white reveal — a gentle ease-in-out curve keeps the whole
     fade visible, unlike the near-instant expo used elsewhere */
  transition: color .35s cubic-bezier(.4, 0, .2, 1);
}
.fcol a:hover { color: var(--text-primary); }

.footer__bottom {
  display: flex; align-items: center; gap: 24px;
  width: 100%; height: 68px; padding: 24px 0;
  border-radius: 20px;
}
.footer__bottom p {
  flex: 1 0 0; min-width: 0;
  font-size: 14px; line-height: 20px; font-weight: 450; letter-spacing: 0;
  color: var(--text-tertiary);
}

/* ==========================================================================
   TABLET — 810px frame  (768 … 1199)
   ========================================================================== */
@media (max-width: 1199px) {
  :root { --pad-x: 20px; }

  /* header */
  .page { padding-top: 56px; }
  .header { padding: 16px var(--pad-x); }
  .nav, .header__demo { display: none; }
  .burger { display: flex; }
  .header__left, .header__right { position: relative; z-index: 2; }
  .header.is-menu-open {
    background: var(--bg-primary);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .05);
  }
  .header.is-menu-open .imenu { opacity: 0; }
  .header.is-menu-open .burger::before,
  .header.is-menu-open .burger::after {
    content: ''; position: absolute; width: 16px; height: 1.5px;
    border-radius: 1px; background: var(--text-primary);
  }
  .header.is-menu-open .burger::before { transform: rotate(45deg); }
  .header.is-menu-open .burger::after { transform: rotate(-45deg); }
  .mobile-menu {
    position: fixed; inset: 68px 0 0; z-index: 1;
    display: block; overflow: hidden;
    background: var(--bg-primary); opacity: 0; visibility: hidden;
    transform: translateY(-12px); pointer-events: none;
    transition: opacity .28s var(--ease-out-expo), transform .28s var(--ease-out-expo), visibility 0s linear .28s;
  }
  .header.is-menu-open .mobile-menu {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    transition-delay: 0s, 0s, 0s;
  }
  .mobile-menu__content {
    box-sizing: border-box; width: 100%; max-width: 720px; height: 100%;
    margin: 0 auto; padding: 24px 20px 96px; overflow-y: auto;
  }
  .mobile-menu__group,
  .mobile-menu__pages,
  .mobile-menu__pages a { position: relative; }
  .mobile-menu__group::before,
  .mobile-menu__group:last-of-type::after,
  .mobile-menu__pages a + a::before {
    content: ''; position: absolute; left: 50%; width: 100vw; height: 1px;
    transform: translateX(-50%); background: var(--stroke-primary); pointer-events: none;
  }
  .mobile-menu__group::before,
  .mobile-menu__pages a + a::before { top: 0; }
  .mobile-menu__group:last-of-type::after { bottom: 0; }
  .mobile-menu__group summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 60px; cursor: pointer; list-style: none;
    font-size: 24px; line-height: 28px; font-weight: 550; letter-spacing: -1px;
  }
  .mobile-menu__group summary::-webkit-details-marker { display: none; }
  .mobile-menu__chevron {
    width: 10px; height: 10px; margin-right: 4px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px); transition: transform .2s var(--ease-out-expo);
  }
  .mobile-menu__group[open] .mobile-menu__chevron { transform: rotate(225deg) translate(-2px, -2px); }
  .mobile-menu__links { display: flex; flex-direction: column; gap: 4px; padding: 0 0 20px; }
  .mobile-menu__links a, .mobile-menu__pages a {
    padding: 8px 0; color: var(--text-tertiary);
    font-size: 18px; line-height: 24px; font-weight: 450;
    transition: color .25s var(--ease-out-expo);
  }
  .mobile-menu__links a:hover, .mobile-menu__pages a:hover { color: var(--text-primary); }
  .mobile-menu__pages { display: flex; flex-direction: column; padding: 0; }
  .mobile-menu__pages a {
    display: flex; align-items: center; min-height: 60px; padding: 0;
    color: var(--text-primary); font-size: 24px; line-height: 28px;
    font-weight: 550; letter-spacing: -1px;
  }
  .mobile-menu__demo {
    position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 2;
    width: auto; height: 52px; justify-content: center;
    border-radius: var(--r-full); font-size: 18px; line-height: 24px;
  }
  .mobile-menu__group, .mobile-menu__pages a, .mobile-menu__demo {
    opacity: 0; transform: translateY(14px);
  }
  .header.is-menu-open .mobile-menu__group,
  .header.is-menu-open .mobile-menu__pages a,
  .header.is-menu-open .mobile-menu__demo {
    animation: mobile-menu-item-in .8s var(--ease-out-expo) both;
  }
  /* stagger follows the visual order: Home, groups, trailing pages, demo */
  .header.is-menu-open .mobile-menu__pages--top a { animation-delay: .06s; }
  .header.is-menu-open .mobile-menu__group:nth-of-type(1) { animation-delay: .20s; }
  .header.is-menu-open .mobile-menu__group:nth-of-type(2) { animation-delay: .34s; }
  .header.is-menu-open .mobile-menu__pages:not(.mobile-menu__pages--top) a:nth-child(1) { animation-delay: .48s; }
  .header.is-menu-open .mobile-menu__pages a:nth-child(2) { animation-delay: .62s; }
  .header.is-menu-open .mobile-menu__demo { animation-delay: .62s; }
  body.has-mobile-menu {
    position: fixed; top: var(--mobile-menu-scroll-y, 0); left: 0; right: 0;
    width: 100%; overflow: hidden;
  }
  .header .logo { width: 132px; height: 24px; }
  .header .logo img { width: 132px; height: 23.926px; }
  .btn--sm { height: 36px; }

  /* hero */
  .hero { padding: 40px var(--pad-x); gap: 40px; }
  .hero__top { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 24px; }
  .hero__title { flex: none; width: 100%; font-size: 64px; line-height: 72px; letter-spacing: -3px; }

  /* modules */
  .modules { padding: 64px var(--pad-x); gap: 40px; }
  .modules__title { padding: 0; }
  .modules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcard { aspect-ratio: 379 / 207; }

  /* trusted by */
  .trusted { padding: 40px var(--pad-x); gap: 40px; }
  .logocard { width: 326px; height: 326px; }
  .client, .client--abb { height: 72px; }

  /* features */
  .features { padding: 40px var(--pad-x); gap: 40px; }
  .features__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fcard { order: var(--o-t); padding: 20px; }
  /* the design pins this one description to a narrower measure so it breaks in two */
  .fcard--narrow-desc p { max-width: 250px; }

  /* get started */
  .started { padding: 40px var(--pad-x); gap: 40px; }
  .started__grid { flex-direction: column; }
  .scard { flex: none; width: 100%; padding: 32px; }
  .started__actions { justify-content: center; }

  /* footer */
  .footer { padding: 40px var(--pad-x) 0; gap: 56px; }
  .footer__links { flex-direction: column; row-gap: 56px; column-gap: 0; }
  .footer__brand {
    flex-direction: row; align-items: flex-start; justify-content: space-between;
    gap: 24px; width: 100%;
  }
  .footer__tagline { width: auto; flex: 1 0 0; min-width: 0; text-align: right; }
  .footer__cols { width: 100%; flex: none; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Tablet only: no scroll transition here — the video simply runs edge to edge
   from the start, so it breaks out of the section's side padding.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1199px) {
  .hero__media {
    width: calc(100% + 2 * var(--pad-x));
    margin-inline: calc(-1 * var(--pad-x));
  }
}

/* ==========================================================================
   MOBILE — 375px frame  (… 767)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --pad-x: 16px; }
  .btn { font-size: 13px; }

  /* header */
  .page { padding-top: 40px; }
  .header { padding: 12px var(--pad-x); }
  .mobile-menu { inset: 60px 0 0; }
  .mobile-menu__content { padding: 20px 16px 88px; }
  .mobile-menu__group summary { min-height: 56px; font-size: 20px; line-height: 24px; letter-spacing: -.5px; }
  .mobile-menu__links a { font-size: 16px; line-height: 20px; }
  .mobile-menu__pages a { min-height: 56px; font-size: 20px; line-height: 24px; letter-spacing: -.5px; }
  .mobile-menu__demo { left: 16px; right: 16px; bottom: 12px; width: auto; height: 48px; font-size: 13px; line-height: 20px; }
  .header .logo { width: 88px; height: 16px; }
  .header .logo img { width: 87.273px; height: 15.95px; }
  .header .btn--sm { height: 36px; font-size: 13px; line-height: 16px; letter-spacing: 0; }

  /* hero */
  .hero { padding: 72px 0 48px; gap: 48px; }
  .hero__media { aspect-ratio: 375 / 210; }
  /* the scroll expansion is desktop-only, so mobile keeps the video square */
  .hero__frame { border-radius: 0; }
  .hero__expand { display: block; position: absolute; inset: 0; z-index: 1; cursor: pointer; }
  .hero__frame.is-fullscreen {
    position: fixed !important; inset: 0 !important; z-index: 400 !important;
    width: auto !important; height: auto !important; background: #000;
  }
  .hero__frame.is-fullscreen .hero__video { object-fit: contain; }
  .hero__frame.is-fullscreen .hero__expand { display: none; }
  .hero__frame.is-fullscreen .hero__video-close {
    position: absolute; top: 16px; right: 16px; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    height: 36px; padding: 0 14px; border-radius: var(--r-full);
    background: rgba(20, 20, 20, .88); color: var(--text-primary);
    font-size: 14px; line-height: 20px; font-weight: 550;
  }
  body.has-video-overlay { overflow: hidden; }
  /* Native Fullscreen API (Android Chrome, etc.): dim the page behind the video. */
  #hero-video:fullscreen { background: #000; }
  #hero-video::backdrop { background: rgba(0, 0, 0, .92); }
  .hero__top { padding: 0 12px; gap: 24px; }
  .hero__title { font-size: 36px; line-height: 40px; letter-spacing: -1.5px; }
  .hero__actions { gap: 8px; align-items: center; }
  .hero__actions .btn--lg { padding: 8px 12px; font-size: 14px; line-height: 20px; letter-spacing: -.5px; }
  .hero__clients { display: block; width: 100%; overflow: hidden; }
  .hero__client-logo { height: 36px; width: auto; opacity: 1; }

  /* trusted by — logos moved into the hero on mobile */
  .trusted { display: none; }

  /* modules */
  .modules { padding: 48px 12px; gap: 24px; }
  .modules__title { padding: 0 4px; font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .modules__grid { grid-template-columns: minmax(0, 1fr); }
  .mcard { aspect-ratio: 351 / 191; }
  .mcard--soon { display: none; }

  /* trusted by */
  .trusted { padding: 48px var(--pad-x); gap: 24px; }
  .trusted__title { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .trusted__track, .trusted__group { gap: 8px; }
  .logocard { width: 148px; height: 200px; }
  .client, .client--abb { height: 43.2px; }

  /* features */
  .features { padding: 48px var(--pad-x); gap: 24px; }
  .features__title { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .features__grid { grid-template-columns: minmax(0, 1fr); }
  .fcard { order: var(--o-m); padding: 16px; }
  .fcard__text h3 { font-size: 14px; line-height: 20px; font-weight: 550; letter-spacing: 0; white-space: normal; }
  .fcard__text p  { font-size: 14px; line-height: 20px; }

  /* get started */
  .started { padding: 48px var(--pad-x); gap: 24px; }
  .started__title { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .started__sub   { font-size: 14px; line-height: 20px; }
  .scard { padding: 16px; gap: 12px; }
  .scard__num { font-size: 14px; line-height: 20px; }
  .scard__text h3 { font-size: 18px; line-height: 24px; letter-spacing: -.5px; white-space: normal; }
  .scard__text p  { font-size: 14px; line-height: 20px; }
  .started__actions { width: 100%; gap: 12px; }
  .started__actions .btn { flex: 1 0 0; min-width: 0; padding: 8px 12px; font-size: 13px; line-height: 20px; }

  /* footer */
  .footer { padding: 48px var(--pad-x) 0; gap: 40px; }
  .footer__links { row-gap: 40px; }
  .footer__brand { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer__tagline { width: 100%; flex: none; text-align: left; font-size: 12px; line-height: 14px; }
  .footer__cols { flex-direction: column; gap: 32px; }
  .fcol { flex: none; width: 100%; max-width: none; gap: 8px; }
  .fcol h4 { font-size: 14px; line-height: 20px; font-weight: 550; letter-spacing: 0; }
  .fcol ul { gap: 0; }
  .fcol a { padding: 6px 0; font-size: 14px; line-height: 20px; }
  .footer__bottom { height: 46px; padding: 16px 0; }
  .footer__bottom p { font-size: 12px; line-height: 14px; }
  .mobile-break { display: block; }
  .mobile-collapse { display: none; }
}

@keyframes mobile-menu-item-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   MOTION — sections enter on scroll (motion/duration/page, easing/out-expo)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity var(--duration-page) var(--ease-out-expo),
              transform var(--duration-page) var(--ease-out-expo);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* The hero owns a position:fixed child during the scroll transition, so it
   must never become a containing block. Its entrance moves the copy instead. */
.hero.reveal { transform: none; will-change: opacity; }
.hero.reveal .hero__top {
  transform: translateY(100px);
  transition: transform var(--duration-page) var(--ease-out-expo);
}
.hero.reveal.is-visible .hero__top { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero.reveal .hero__top { transform: none; transition: none; }
  .btn { transition: none; }
}

/* ==========================================================================
   MODULE PAGE — Hero-v3 / About / Explaination / FAQ / Modules-v2
   Shared by websites.html, images.html, videos.html, slides.html,
   creatives.html. Desktop (1440) values first, overrides further down.
   ========================================================================== */

/* ---------- Hero-v3 --------------------------------------------------- */
.phero {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  padding: 128px 24px;
}
.phero__frame { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; width: 100%; }
.phero__title { width: 100%; font-size: 64px; line-height: 70px; font-weight: 600; letter-spacing: -3px; }
.phero__row { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; }
.phero__actions { display: flex; align-items: flex-start; gap: 12px; }
.phero__media { position: relative; width: 100%; aspect-ratio: 1392 / 763;
                border-radius: var(--r-12); overflow: hidden; background: var(--fg-tertiary); }
.phero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Same backdrop-on-hover as the header tabs: a plate appears, the label keeps
   its full strength instead of dimming the way the filled buttons do. */
.btn--ghost { background: none; color: var(--text-primary); padding: 8px 20px; height: 48px;
              box-shadow: var(--glass-shadow); transition: background .2s var(--ease-out-expo); }
.btn--ghost:hover { background: var(--fg-tertiary); opacity: 1; }

.iplay { position: relative; width: 20px; height: 20px; flex: none; }
.iplay img { position: absolute; left: 33.33%; top: 24.27%; width: 42.19%; height: 51.46%; }

/* ---------- About ----------------------------------------------------- */
.about {
  display: flex; flex-direction: column; align-items: center; gap: 128px;
  padding: 24px 24px 64px;
}
/* Text column scrolls, the visual stays pinned at the middle of the screen and
   swaps as the reading line moves from block to block. The 100vh sticky box is
   what does the centring — it holds no matter how the media height resolves. */
.about__layout { display: flex; align-items: flex-start; gap: 40px; width: 100%; }
/* The scroll track ends with the final text step. The sticky visual is then
   released by the layout boundary instead of continuing through an empty tail. */
.about__blocks { flex: none; width: 530px; display: flex; flex-direction: column;
                 padding: 0; }
.about__block  { display: flex; flex-direction: column; justify-content: center;
                 gap: 40px; width: 100%; min-height: 56vh; }
.about__block--dim { opacity: .4; }

/* The stage is stuck directly rather than centred inside a 100vh box. That box
   only reached its centred position once the section had scrolled past the top
   of the viewport, so the very first block met a visual that was still sitting
   low — the step. Sticking the stage itself clamps it from the first frame.
   `--pin-top` is measured in JS; the calc is the fallback at 822x462. */
.about__visual { position: sticky; top: var(--pin-top, calc(50vh - 231px));
                 height: auto; flex: 1 0 0; min-width: 0; }
.about__stage  { position: relative; width: 100%; aspect-ratio: 16 / 9;
                 border-radius: var(--r-12); overflow: hidden; background: var(--fg-tertiary); }
.about__shot   { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about__static { display: none; }
.about__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.about__head h2 { width: 100%; font-size: 32px; line-height: 40px; font-weight: 550; letter-spacing: -1px; }
.about__head p  { width: 100%; font-size: 16px; line-height: 20px; font-weight: 450; color: var(--text-tertiary); }
.about__list { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.about__list li { display: flex; align-items: center; gap: 12px; width: 100%;
                  font-size: 16px; line-height: 20px; font-weight: 450; color: var(--text-tertiary); }
/* Scroll-driven focus: only the block nearest the reading line stays lit, and
   the pinned visual cross-fades to match. `is-scrolly` is set by the script,
   so with scripting off the section keeps the static state from the template
   — first block lit, first shot on top of the stack. */
.about.is-scrolly .about__block {
  opacity: .4;
  transition: opacity .45s var(--ease-out-expo);
}
.about.is-scrolly .about__block.is-active { opacity: 1; }
.about.is-scrolly .about__shot {
  opacity: 0;
  transform: scale(1.02);
  transition: opacity .55s var(--ease-out-expo), transform .55s var(--ease-out-expo);
}
.about.is-scrolly .about__shot.is-active { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .about.is-scrolly .about__block,
  .about.is-scrolly .about__shot { transition-duration: .01ms; transform: none; }
}

.idone { position: relative; width: 24px; height: 24px; flex: none; overflow: hidden; }
.idone img { position: absolute; inset: 26.56% 17.81% 26.67% 17.76%; width: auto; height: auto; }

/* ---------- Explaination ---------------------------------------------- */
.expl {
  background: var(--bg-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px; padding: 64px var(--pad-x);
}
.expl__title { width: 100%; font-size: 44px; line-height: 44px; font-weight: 550; letter-spacing: -1px; }
.expl__cards { display: flex; align-items: flex-start; gap: 24px; width: 100%; }
.expl__card  { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.expl__media { position: relative; width: 100%; aspect-ratio: 437 / 250;
               border-radius: 6px; overflow: hidden; background: var(--fg-tertiary); }
.expl__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.expl__text  { display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
               width: 100%; padding-right: 32px; }
.expl__text h3 { font-size: 20px; line-height: 32px; font-weight: 550; letter-spacing: -1px; }
.expl__text p  { font-size: 16px; line-height: 20px; font-weight: 450; color: var(--text-tertiary); }

/* ---------- FAQ ------------------------------------------------------- */
.faq {
  background: var(--bg-primary);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 40px; padding: 64px var(--pad-x);
}
.faq__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.faq__head h2 { width: 100%; height: 48px; display: flex; align-items: center;
                font-size: 44px; line-height: 44px; font-weight: 550; letter-spacing: -1px; }
.faq__head p  { width: 100%; font-size: 16px; line-height: 20px; font-weight: 450; color: var(--text-tertiary); }
.faq__grid { display: flex; align-items: flex-start; justify-content: center; gap: 32px; width: 100%; }
.faq__col  { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

.faq__item {
  position: relative; width: 100%;
  background: var(--fg-tertiary);
  border-radius: 20px; overflow: hidden;
  box-shadow: inset 0 -2px 8px 0 rgba(255, 255, 255, .01),
              inset 0  2px 8px 0 rgba(255, 255, 255, .01);
}
.faq__q {
  display: flex; align-items: center; gap: 20px;
  width: 100%; min-height: 64px; padding: 20px;
  font-size: 16px; line-height: 20px; font-weight: 450; letter-spacing: 0;
  color: var(--text-primary); text-align: left; cursor: pointer;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::marker { content: ''; }
.faq__q span:not(.faq__icon) { flex: 1 0 0; min-width: 0; }
.faq__icon { position: relative; width: 24px; height: 24px; flex: none;
             transition: transform .4s cubic-bezier(.4, 0, .2, 1); }
.faq__icon img { width: 100%; height: 100%; }
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr;
          transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1); }
.faq__item[open] .faq__a { grid-template-rows: 1fr; }
/* script.js keeps [open] on while this class collapses the answer, so the
   close direction plays the same transition as the open one. Icon rotation
   and text fade ride the same state classes, so all three stay in sync. */
.faq__item.is-closing .faq__a { grid-template-rows: 0fr; }
.faq__item.is-closing .faq__icon { transform: none; }
/* one rendered frame at 0fr right after [open] lands — gives the opening
   transition its start style (WebKit renders a fresh slot at 1fr otherwise) */
.faq__item.is-opening .faq__a { grid-template-rows: 0fr; }
.faq__item.is-opening .faq__icon { transform: none; }
.faq__a > div { overflow: hidden; opacity: 0;
               transition: opacity .3s cubic-bezier(.4, 0, .2, 1); }
.faq__item[open] .faq__a > div { opacity: 1; }
.faq__item.is-closing .faq__a > div { opacity: 0; }
.faq__item.is-opening .faq__a > div { opacity: 0; }
.faq__a p { padding: 0 20px 20px;
            font-size: 16px; line-height: 20px; font-weight: 450; color: var(--text-tertiary); }

/* ---------- Modules-v2 (Continue exploring) --------------------------- */
.more {
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
  padding: 64px 24px; overflow: hidden;
}
.more__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.more__head h2 { width: 100%; font-size: 44px; line-height: 44px; font-weight: 550; letter-spacing: -1px; }
.more__head p  { width: 100%; font-size: 16px; line-height: 20px; font-weight: 450; color: var(--text-tertiary); }
.more__track {
  display: flex; align-items: flex-start; gap: 12px; width: 100%;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  scroll-behavior: smooth;
}
.more__track::-webkit-scrollbar { display: none; }
.more__track .mcard { flex: none; width: 520px; aspect-ratio: auto; height: 285px; scroll-snap-align: start; }

.more__nav {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  height: 48px; padding: 8px 20px; border-radius: var(--r-24);
  background: var(--surface-secondary); box-shadow: var(--glass-shadow);
}
.more__nav button { display: flex; }
.more__nav button[disabled] { opacity: .2; cursor: default; }
.ichev { position: relative; width: 20px; height: 20px; flex: none; }
.ichev img { position: absolute; inset: 26.77% 37.6% 26.77% 35.1%; width: auto; height: auto; }

/* ---------- tablet ---------------------------------------------------- */
@media (max-width: 1199px) {
  .phero { padding: 40px var(--pad-x); }
  .phero__media { aspect-ratio: 770 / 422; }

  .about { padding: 40px var(--pad-x); gap: 40px; }
  /* No room for a side-by-side pin: the visual sticks under the header and the
     text runs beneath it, so the swap still reads while scrolling. */
  .about__layout { flex-direction: column; gap: 24px; }
  /* The band is what makes the overlap read as intentional: text slides out
     of sight under an opaque edge instead of being clipped mid-line. */
  .about__visual { position: sticky; top: 12px; height: auto; order: 1;
                   flex: none; width: 100%; display: block;
                   padding-bottom: 16px; background: var(--bg-primary); }
  .about__blocks { order: 2; width: 100%; padding: 0; }
  .about__block { gap: 40px; min-height: 0; padding: 40px 0; }
  .about__stage { aspect-ratio: 16 / 9; }

  .about--websites .about__layout { display: none; }
  .about--websites .about__static { display: flex; flex-direction: column; gap: 112px; width: 100%; }
  .about--websites .about__static-item { display: flex; flex-direction: column; gap: 24px; }
  .about--websites .about__static-media { width: 100%; aspect-ratio: 16 / 9;
                                           border-radius: var(--r-12); overflow: hidden; background: var(--fg-tertiary); }
  .about--websites .about__static-media picture,
  .about--websites .about__static-media img { display: block; width: 100%; height: 100%; object-fit: contain; }
  .about--websites .about__static-copy { display: flex; flex-direction: column; gap: 40px; }

  .expl { padding: 40px var(--pad-x); }
  .expl__cards { flex-direction: column; gap: 40px; }
  .expl__card { flex: none; width: 100%; }
  .expl__media { aspect-ratio: 770 / 440; }
  .expl__text { padding-right: 0; }

  .faq { padding: 40px var(--pad-x); gap: 32px; }
  .faq__head h2 { height: auto; }
  .faq__grid { flex-direction: column; gap: 20px; }
  .faq__col { width: 100%; flex: none; }

  .more { padding: 40px var(--pad-x); }
  .more__track .mcard { width: 456px; height: 250px; }
}

/* ---------- mobile ---------------------------------------------------- */
@media (max-width: 767px) {
  .phero { padding: 72px 12px 48px; gap: 40px; }
  .phero__frame { gap: 24px; }
  .phero__title { font-size: 36px; line-height: 40px; letter-spacing: -1.5px; }
  .phero__row { justify-content: flex-start; gap: 12px; flex-wrap: wrap; row-gap: 12px; }
  .phero__actions { gap: 12px; }
  .phero__actions .btn--lg { padding: 8px 12px; font-size: 12px; line-height: 16px; letter-spacing: 0; }
  .phero__watch { padding: 8px 12px; font-size: 12px; line-height: 16px; letter-spacing: 0; height: auto; background: var(--fg-secondary); }
  .phero__media { aspect-ratio: 351 / 192; }

  .about { padding: 24px 12px; gap: 24px; }
  .about__block { gap: 16px; padding: 24px 0; }
  .about__visual { top: 8px; padding-bottom: 12px; }
  .about__stage { aspect-ratio: 16 / 9; }
  .about--websites .about__static { gap: 40px; }
  .about--websites .about__static-item { gap: 16px; }
  .about--websites .about__static-copy { gap: 16px; }
  .about__head h2 { font-size: 20px; line-height: 28px; letter-spacing: -.5px; }
  .about__head p  { font-size: 14px; line-height: 20px; }
  .about__list li { gap: 8px; font-size: 12px; line-height: 14px; }
  .idone { width: 20px; height: 20px; }

  .expl { padding: 72px var(--pad-x); gap: 24px; }
  .expl--websites { padding-top: 72px; padding-bottom: 72px; }
  .expl__title { font-size: 32px; line-height: 36px; }
  .expl__cards { gap: 48px; }
  .expl__media { aspect-ratio: 343 / 196; }
  .expl__text h3 { font-size: 20px; line-height: 28px; letter-spacing: -.5px; }
  .expl__text p  { font-size: 14px; line-height: 20px; }

  .faq { padding: 32px var(--pad-x); gap: 32px; }
  .faq--websites { margin-top: 32px; margin-bottom: 32px; }
  .faq__head h2 { height: auto; font-size: 32px; line-height: 36px; }
  .faq__head p  { font-size: 14px; line-height: 20px; }
  .faq__grid { gap: 12px; }
  .faq__col  { gap: 12px; }
  .faq__q { min-height: 56px; padding: 16px; gap: 12px; font-size: 14px; line-height: 20px; }
  .faq__a p { padding: 0 16px 16px; font-size: 14px; line-height: 20px; }

  .more { padding: 24px 12px; gap: 24px; }
  .more--websites { padding-top: 64px; padding-bottom: 64px; }
  .more__head h2 { font-size: 32px; line-height: 36px; }
  .more__head p  { font-size: 14px; line-height: 20px; }
  .more__track { flex-direction: column; overflow: visible; }
  .more__track .mcard { width: 100%; height: auto; aspect-ratio: 351 / 191; }
  .more__nav { display: none; }
}

/* ==========================================================================
   MODULE CARD — hover
   --------------------------------------------------------------------------
   Pointer devices only: on touch there is no hover, and a sweep that fires
   on tap reads as a glitch. Everything animated here is transform/opacity,
   so it stays on the compositor.
   ========================================================================== */
.mcard__img { transition: transform .7s var(--ease-out-expo); transform-origin: center; }

@media (hover: hover) and (pointer: fine) {
  .mcard:not(.mcard--soon):hover .mcard__img { transform: scale(1.1); }

  .mcard:not(.mcard--soon):hover .mcard__label,
  .mcard:not(.mcard--soon):hover .mcard__cta { color: #fff; }

  .mcard:not(.mcard--soon):hover .iarrow { transform: translateX(3px); }

  /* A subtle tertiary outline identifies the interactive card without tinting it. */
  .mcard:not(.mcard--soon) {
    transition: box-shadow .4s var(--ease-out-expo);
  }
  .mcard:not(.mcard--soon):hover {
    box-shadow: 0 0 0 2px #141414;
  }

  /* keyboard parity — tabbing to the CTA lights the card the same way */
  .mcard:has(.mcard__cta:focus-visible) .mcard__img { transform: scale(1.1); }
  .mcard:has(.mcard__cta:focus-visible) .mcard__label,
  .mcard:has(.mcard__cta:focus-visible) .mcard__cta { color: #fff; }
  .mcard:has(.mcard__cta:focus-visible) {
    box-shadow: 0 0 0 2px #141414;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mcard__img, .mcard .iarrow, .mcard__label, .mcard__cta { transition: none; }
  .mcard:hover .mcard__img { transform: none; }
}

/* ==========================================================================
   SOLUTIONS — composed from the shared Figma section library
   ========================================================================== */
/* `hidden` makes the whole page a scroll container and disables sticky media
   inside the shared Product-style about transition. `clip` keeps horizontal
   artwork contained without stealing the document scroll. */
.page--solution { padding-top: 68px; overflow: clip; }
.solution-section { padding: 64px var(--pad-x); }
.solution-heading { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.solution-heading h2 { max-width: 900px; font-size: 44px; line-height: 48px; font-weight: 550; letter-spacing: -1.5px; }
.solution-heading p { max-width: 780px; color: var(--text-tertiary); font-size: 16px; line-height: 22px; }
.solution-title-break { display: none; }
.solution-eyebrow {
  display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px;
  border: 1px solid var(--stroke-primary); border-radius: var(--r-full);
  background: var(--fg-tertiary); color: var(--text-tertiary);
  font-size: 13px; line-height: 18px;
}

/* Hero-v2: centred copy followed by the product-module mosaic. */
.solution-hero { display: flex; flex-direction: column; gap: 48px; padding: 176px 20px 64px; }
.solution-hero__copy { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; text-align: center; }
.solution-hero__text { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 920px; }
.solution-hero h1 { font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -3px; text-wrap: balance; }
.solution-hero__sub { max-width: 760px; color: var(--text-tertiary); font-size: 18px; line-height: 24px; font-weight: 450; text-wrap: balance; }
.solution-hero__actions { display: flex; gap: 12px; align-items: center; }
.solution-mosaic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 12px; width: 100%; }
.solution-mosaic__row, .solution-mosaic__track, .solution-mosaic__group { display: contents; }
.solution-mosaic__card { position: relative; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-12); background: var(--surface-secondary); }
.solution-mosaic__card img, .solution-mosaic__card video { width: 100%; height: 100%; object-fit: cover; opacity: .9; transition: transform .7s var(--ease-out-expo); }
.solution-mosaic__card-video { display: none; }
@media (min-width: 1200px) {
  /* Desktop mosaic is a static grid (no marquee motion), so play the real
     clips there; mobile/tablet keep the poster frame — see script.js note
     on why autoplaying video inside the marquee reads as jittery.
     Cards without a clip (e.g. marketing "Campaign") keep their image. */
  .solution-mosaic__card:has(.solution-mosaic__card-video) .solution-mosaic__card-img { display: none; }
  .solution-mosaic__card-video { display: block; }
}
.solution-mosaic__card::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.82)); }
.solution-mosaic__card span { position: absolute; z-index: 1; left: 16px; bottom: 14px; font-size: 14px; line-height: 20px; }
/* Marketing hero: media read too dim — full-opacity media and a lighter scrim
   that still keeps the corner labels legible on bright clips. */
.solution-mosaic--marketing .solution-mosaic__card img,
.solution-mosaic--marketing .solution-mosaic__card video { opacity: 1; }
.solution-mosaic--marketing .solution-mosaic__card::after { background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.solution-mosaic__card--feature { grid-column: span 2; grid-row: span 2; }
@media (min-width: 1200px) {
  /* Marketing keeps the feature card on the left. Growth mirrors that rhythm. */
  .solution-mosaic--growth-performance .solution-mosaic__card--feature {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
  }

  /* Content uses two wide stories followed by four compact cards. */
  .solution-mosaic--content { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .solution-mosaic--content .solution-mosaic__card--feature,
  .solution-mosaic--content .solution-mosaic__card:nth-child(2) {
    grid-column: span 2;
    grid-row: auto;
  }
}
@media (hover:hover) and (pointer:fine) { .solution-mosaic__card:hover img { transform: scale(1.035); } }

/* Hero-v5 and Hero-v3 share the same type scale but keep their Figma layouts. */
.solution-hero--split { flex-direction: row; align-items: center; gap: 40px; padding: 256px 24px; }
.solution-hero--split .solution-hero__copy { flex: 1 0 0; align-items: flex-start; text-align: left; }
.solution-hero--split .solution-hero__text { align-items: flex-start; }
.solution-hero--split .solution-hero__media { flex: 0 0 min(823px, 60%); width: min(823px, 60%); }
.solution-hero__media { position: relative; flex: 1 0 0; min-width: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-12); background: var(--fg-tertiary); }
.solution-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.solution-hero__media::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); border-radius: inherit; pointer-events: none; }
.solution-hero--product { padding: 128px 24px; gap: 40px; }
.solution-hero--product .solution-hero__copy { align-items: flex-start; text-align: left; }
.solution-hero--product .solution-hero__text { align-items: flex-start; max-width: 100%; }
.solution-hero--product h1 { max-width: 820px; }
.solution-hero--product .solution-hero__sub { max-width: 1200px; text-wrap: pretty; }
.solution-hero--product .solution-hero__media { flex: none; width: 100%; aspect-ratio: 16 / 9; }

/* Cards-v2 — one large scenario at a time with neighbouring cards peeking in. */
.solution-cards { display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 64px 24px; overflow: hidden; }
.solution-carousel { width: 100%; overflow: hidden; }
.solution-carousel__track { display: flex; gap: 48px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-behavior: smooth; padding: 0; }
.solution-carousel__track::after { content: ''; flex: 0 0 calc(25% - 48px); }
.solution-carousel__track::-webkit-scrollbar { display: none; }
.solution-carousel__slide { position: relative; flex: 0 0 calc(75% - 4px); min-width: 0; scroll-snap-align: start; }
.solution-carousel__media { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-12); background: var(--surface-secondary); }
.solution-carousel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.78); }
.solution-carousel__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.26), transparent 45%); }
.solution-carousel__body { position: relative; display: flex; flex-direction: column; gap: 8px; width: min(720px, 100%); padding: 20px 0 0; }
.solution-carousel__body h4 { font-size: 20px; line-height: 28px; font-weight: 550; letter-spacing: -.5px; }
.solution-carousel__body p { color: var(--text-tertiary); font-size: 18px; line-height: 24px; }
.solution-carousel__controls { align-self: center; display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 48px; padding: 8px 20px; border-radius: var(--r-24); background: var(--surface-secondary); box-shadow: var(--glass-shadow); }
.solution-carousel__arrow { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 0; outline: 0; background: transparent; color: var(--text-primary); transition: opacity .2s ease; }
.solution-carousel__arrow img { width: 5px; height: 9px; }
.solution-carousel__arrow--next img { transform: rotate(180deg); }
.solution-carousel__arrow:hover, .solution-carousel__arrow:active, .solution-carousel__arrow:focus, .solution-carousel__arrow:focus-visible { border: 0; outline: 0; background: transparent; box-shadow: none; }
.solution-carousel__dot:focus { outline: 2px solid rgba(255,255,255,.2); outline-offset: 2px; }
.solution-carousel__arrow:disabled { opacity: .35; }
.solution-carousel__dots { display: flex; gap: 6px; }
.solution-carousel__dot { width: 20px; height: 3px; border-radius: var(--r-full); background: rgba(255,255,255,.14); transition: background .2s, width .2s; }
.solution-carousel__dot.is-active { width: 32px; background: rgba(255,255,255,.8); }

@media (min-width: 1200px) {
  .solution-title-break { display: block; }
  .solution-cards--growth-performance .solution-heading h2,
  .solution-cards--growth-performance .solution-heading p {
    max-width: none;
    white-space: nowrap;
  }
  .solution-cards--product .solution-heading p {
    max-width: none;
    white-space: nowrap;
  }
}

/* Cards-v1: the compact system grid used on the Design & Brand page. */
.solution-system { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; padding: 64px var(--pad-x); }
.solution-system__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 1px; width: 100%; overflow: hidden; border-radius: var(--r-12); background: var(--stroke-primary); }
.solution-system__grid::after { content: ''; position: absolute; inset: 0; border: 1px solid var(--stroke-primary); border-radius: var(--r-12); pointer-events: none; }
.solution-system__card { min-width: 0; min-height: 0; border: 0; }

/* About: reuses the Product-page scroll focus on desktop. The shared
   about--websites fallback turns it into image → text cards below 1200px. */
.solution-about { display: flex; flex-direction: column; align-items: stretch; gap: 96px; padding: 96px 24px; }
.solution-about__intro { max-width: 820px; display: flex; flex-direction: column; gap: 12px; }
.solution-about__intro h2 { font-size: 44px; line-height: 48px; font-weight: 550; letter-spacing: -1.5px; }
.solution-about__intro p { color: var(--text-tertiary); font-size: 18px; line-height: 24px; }

/* Explanation cards. */
.solution-explain { display: flex; flex-direction: column; gap: 40px; padding: 96px var(--pad-x); }
.solution-explain__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.solution-explain__card { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.solution-explain__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-12); background: var(--surface-secondary); }
.solution-explain__media img { width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform .7s var(--ease-out-expo); }
.solution-explain__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,.46)); }
.solution-explain__card h3 { font-size: 20px; line-height: 28px; font-weight: 550; letter-spacing: -.5px; }
.solution-explain__card p { color: var(--text-tertiary); font-size: 16px; line-height: 21px; }
@media (hover:hover) and (pointer:fine) { .solution-explain__card:hover img { transform: scale(1.035); } }

/* Advantages: text navigation on the left, one persistent product visual. */
.solution-advantages { display: grid; grid-template-columns: minmax(300px, .72fr) 1.28fr; gap: 32px; padding: 136px var(--pad-x); }
.solution-advantages__content { display: flex; flex-direction: column; justify-content: space-between; gap: 64px; min-width: 0; }
.solution-advantages__list { display: flex; flex-direction: column; }
.solution-advantages__item { padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.14); color: var(--text-tertiary); }
.solution-advantages__item h3 { margin-bottom: 5px; color: var(--text-primary); font-size: 16px; line-height: 22px; font-weight: 550; }
.solution-advantages__item p { font-size: 14px; line-height: 20px; }
.solution-advantages__media { position: relative; aspect-ratio: 16 / 9; align-self: end; overflow: hidden; border-radius: var(--r-12); background: var(--surface-secondary); }
.solution-advantages__media img { width: 100%; height: 100%; object-fit: cover; object-position: 54% center; }
.solution-advantages__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.22), transparent 45%); }

/* CTA from the Figma gradient section. */
.solution-cta { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px; min-height: 604px; padding: 128px var(--pad-x); overflow: hidden; text-align: center; }
.solution-cta__glow { display: block; position: absolute; left: 50%; bottom: -307px; width: 2111.83px; height: 856.38px; transform: translateX(-50%); pointer-events: none; }
.solution-cta__glow img { width: 100%; height: 100%; max-width: none; }
.solution-cta__copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 780px; }
.solution-cta h2 { font-size: 44px; line-height: 46px; font-weight: 550; letter-spacing: -1.5px; text-wrap: balance; }
.solution-cta p { color: var(--text-tertiary); font-size: 16px; line-height: 22px; text-wrap: balance; }
.solution-cta__actions { position: relative; display: flex; gap: 12px; }

@media (max-width: 1199px) {
  .page--solution { padding-top: 68px; }
  .solution-hero { padding: 64px 20px; }
  .solution-hero--split { flex-direction: column; padding: 40px 20px; }
  .solution-hero--split .solution-hero__copy { width: 100%; flex: none; }
  .solution-hero--split .solution-hero__media { width: 100%; flex: none; aspect-ratio: 16 / 9; }
  .solution-hero--product { padding: 40px 20px; }
  .solution-hero h1 { font-size: 56px; line-height: 62px; }
  .solution-mosaic { display: flex; flex-direction: column; gap: 12px; width: calc(100% + 40px); margin-inline: -20px; }
  .solution-mosaic__row { display: block; width: 100%; overflow: hidden; }
  .solution-mosaic__track, .solution-mosaic__group { display: flex; align-items: stretch; gap: 12px; flex: none; width: max-content; }
  .solution-mosaic__track { will-change: transform; animation: trusted-marquee var(--marquee-duration, 34s) linear infinite; }
  .solution-mosaic__track--reverse { animation-direction: reverse; }
  .solution-mosaic__card, .solution-mosaic__card--feature { grid-column: auto; grid-row: auto; flex: none; width: 448px; aspect-ratio: 16 / 9; }
  .solution-carousel__slide { flex-basis: calc(86% - 8px); }
  .solution-carousel__track { gap: 32px; }
  .solution-carousel__track::after { flex-basis: calc(14% - 32px); }
  .solution-system { gap: 40px; padding: 40px var(--pad-x); }
  .solution-system__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-about { gap: 80px; padding-inline: 20px; }
  .solution-explain__grid { grid-template-columns: 1fr; gap: 48px; }
  .solution-explain__media { aspect-ratio: 16 / 9; }
  .solution-advantages { grid-template-columns: 1fr; }
  .solution-advantages__content { gap: 32px; }
  .solution-advantages__media { aspect-ratio: 16 / 9; }
  .solution-cta { min-height: 620px; }
  .solution-cta__glow { bottom: -280px; width: 1412px; height: 905px; }
}

@media (max-width: 767px) {
  .page--solution { padding-top: 60px; }
  .solution-section, .solution-cards, .solution-system, .solution-explain, .solution-advantages { padding: 64px 16px; }
  /* The advantages media is reordered above its heading (order:-1) at this
     width, so the section's own top padding reads as a second, redundant
     gap right after the previous section's bottom padding — halve it. */
  .solution-advantages { padding-top: 32px; }
  .solution-heading h2, .solution-about__intro h2 { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .solution-heading p, .solution-about__intro p { font-size: 14px; line-height: 20px; }
  .solution-hero { gap: 40px; padding: 64px 12px; }
  .solution-hero__copy, .solution-hero--split .solution-hero__copy, .solution-hero--product .solution-hero__copy { align-items: flex-start; text-align: left; }
  .solution-hero__text, .solution-hero--split .solution-hero__text, .solution-hero--product .solution-hero__text { align-items: flex-start; gap: 12px; }
  .solution-hero h1 { font-size: 36px; line-height: 40px; letter-spacing: -1.5px; text-wrap: pretty; }
  .solution-hero__sub { font-size: 14px; line-height: 20px; text-wrap: pretty; }
  .solution-hero__actions .btn--lg { padding: 8px 12px; font-size: 14px; line-height: 20px; letter-spacing: -.5px; }
  .solution-mosaic { display: flex; flex-direction: column; gap: 8px; width: calc(100% + 24px); margin-inline: -12px; }
  .solution-mosaic__row { display: block; width: 100%; overflow: hidden; }
  .solution-mosaic__track, .solution-mosaic__group { display: flex; align-items: stretch; gap: 8px; flex: none; width: max-content; }
  .solution-mosaic__track { will-change: transform; animation: trusted-marquee var(--marquee-duration, 26s) linear infinite; }
  .solution-mosaic__track--reverse { animation-direction: reverse; }
  .solution-mosaic__card, .solution-mosaic__card--feature { grid-column: auto; grid-row: auto; flex: none; width: 308px; aspect-ratio: 16 / 9; }
  .solution-hero--split { padding: 64px 12px; }
  .solution-hero--split .solution-hero__media, .solution-hero--product .solution-hero__media { aspect-ratio: 16 / 9; border-radius: 6px; }
  .solution-carousel { width: 100%; margin-left: 0; }
  .solution-carousel__track { gap: 24px; padding: 0; }
  .solution-carousel__track::after { display: none; }
  .solution-carousel__slide { flex-basis: 100%; }
  .solution-carousel__body { width: 100%; padding: 16px 0 0; }
  .solution-carousel__body h4 { font-size: 20px; line-height: 28px; }
  .solution-carousel__body p { font-size: 15px; line-height: 21px; }
  .solution-carousel__controls { gap: 12px; padding-inline: 16px; }
  .solution-carousel__dot { width: 14px; }
  .solution-carousel__dot.is-active { width: 28px; }
  .solution-system__grid { grid-template-columns: 1fr; }
  .solution-system { gap: 24px; padding: 48px var(--pad-x); }
  .solution-about { gap: 36px; padding: 64px 12px; }
  .solution-about__intro { gap: 8px; }
  .solution-explain__grid { gap: 40px; }
  .solution-explain__media { aspect-ratio: 16 / 9; }
  .solution-explain__card p { font-size: 14px; line-height: 20px; }
  .solution-advantages__media { aspect-ratio: 16 / 9; border-radius: var(--r-6); order: -1; }
  /* Marketing and Design & Brand: media stays below the heading/subheading
     block on mobile instead of being lifted above the section. */
  .solution-advantages--media-last .solution-advantages__media { order: 0; }
  .solution-cta { min-height: 560px; padding: 120px 16px; gap: 24px; }
  .solution-cta__glow { bottom: -316px; width: 964px; height: 864px; }
  .solution-cta h2 { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .solution-cta p { font-size: 14px; line-height: 20px; }
  .solution-cta__actions .btn--lg { padding: 8px 12px; font-size: 14px; line-height: 20px; letter-spacing: -.5px; }
}

/* ==========================================================================
   ABOUT / BRAND DNA PAGE — Hero-v5 + Explaination icon badges
   ========================================================================== */
/* this hero uses its own side-padding scale (24 / 20 / 12), not the shared
   --pad-x rhythm the rest of the page follows — that's what the source has */
.dnahero {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 64px 24px;
}
.dnahero__col {
  flex: 1 0 0; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 40px;
}
.dnahero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.dnahero__title { width: 100%; font-size: 64px; line-height: 70px; font-weight: 600; letter-spacing: -3px; }
.dnahero__sub   { width: 100%; font-size: 18px; line-height: 24px; font-weight: 550; letter-spacing: -.5px;
                  color: var(--text-tertiary); }

.dnahero__media {
  position: relative; flex: 1 0 0; min-width: 0;
  aspect-ratio: 676 / 370;
  border-radius: var(--r-12);
  overflow: hidden;
  background: var(--fg-tertiary);
  display: flex; align-items: center; justify-content: center;
}
.dnahero__glyph { width: 62%; height: 62%; }
.dnahero__glyph circle { transition: opacity .3s var(--ease-out-expo); }

/* Explaination cards on this page carry an icon badge instead of a photo —
   there's nothing to screenshot for "why AI needs context", so the card
   media doubles as a labeled concept marker. */
.expl__media--icon { display: flex; align-items: center; justify-content: center; }
.expl__badge {
  position: relative;
  width: 64px; height: 64px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .06);
}
.expl__badge .icon24 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* ---------- tablet ------------------------------------------------------ */
@media (max-width: 1199px) {
  .dnahero { flex-direction: column; padding: 40px var(--pad-x); }
  .dnahero__media { flex: none; width: 100%; aspect-ratio: 770 / 421; }
}

/* ---------- mobile -------------------------------------------------------- */
@media (max-width: 767px) {
  .dnahero { padding: 40px 12px 80px; gap: 40px; }
  .dnahero__col { gap: 24px; }
  .dnahero__copy { gap: 12px; }
  .dnahero__title { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .dnahero__sub { font-size: 14px; line-height: 20px; font-weight: 450; letter-spacing: 0; }
  .dnahero__media { aspect-ratio: 351 / 192; border-radius: 6px; }
  .dnahero__cta.btn--lg { padding: 8px 12px; font-size: 13px; line-height: 16px; letter-spacing: 0;
                          border-radius: var(--r-12); }

  .expl__badge { width: 48px; height: 48px; }
}

/* ==========================================================================
   HOW IT WORKS — Figma node 2333:46713
   ========================================================================== */
.page--hiw { padding-top: 68px; }
.hiw-flow { display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.hiw-placeholder { background: var(--fg-tertiary); overflow: hidden; }

.hiw-hero {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 128px 24px;
}
.hiw-hero__content {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}
.hiw-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; }
.hiw-hero__copy h1 { width: 100%; font-size: 64px; line-height: 70px; font-weight: 600; letter-spacing: -3px; }
.hiw-hero__copy p { width: 100%; color: var(--text-tertiary); font-size: 18px; line-height: 24px; font-weight: 550; letter-spacing: -.5px; }
.hiw-hero__media { flex: 1 0 0; min-width: 0; aspect-ratio: 676 / 370; border-radius: 12px; }

.hiw-explain {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 64px 40px;
}
.hiw-explain > h2,
.hiw-feature__head h2,
.hiw-table > h2,
.hiw-cta h2 { font-size: 44px; line-height: 44px; font-weight: 550; letter-spacing: -1px; }
.hiw-explain > h2 { width: 100%; }
.hiw-explain__cards { display: flex; align-items: flex-start; gap: 24px; width: 100%; }
.hiw-explain__card { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hiw-explain__media { width: 100%; aspect-ratio: 437 / 250; border-radius: 12px; }
.hiw-explain__text { display: flex; flex-direction: column; gap: 4px; width: 100%; padding-right: 32px; }
.hiw-explain__text h3 { font-size: 20px; line-height: 32px; font-weight: 550; letter-spacing: -1px; }
.hiw-explain__text p { color: var(--text-tertiary); font-size: 16px; line-height: 20px; font-weight: 450; }

.hiw-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 64px 24px;
}
.hiw-feature__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
.hiw-feature__head p { color: var(--text-tertiary); font-size: 16px; line-height: 20px; font-weight: 450; }
.hiw-feature__media { width: 100%; aspect-ratio: 1392 / 761; border-radius: 12px; }
.hiw-showcase .hiw-feature__media--video { width: calc(100% + 48px); margin-inline: -24px; border-radius: 0; }
.hiw-feature__media--video { position: relative; display: grid; place-items: center; background: var(--bg-primary); }
.hiw-feature__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hiw-feature__play {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%;
  background: var(--fg-contrast); color: var(--text-contrast); cursor: pointer;
  transition: transform .2s var(--ease-out-expo), opacity .2s var(--ease-out-expo);
}
.hiw-feature__play::before {
  content: ''; width: 0; height: 0; margin-left: 4px;
  border-top: 9px solid transparent; border-bottom: 9px solid transparent; border-left: 14px solid currentColor;
}
.hiw-feature__play:hover { transform: scale(1.06); }
.hiw-feature__media--video.is-playing .hiw-feature__play { opacity: 0; pointer-events: none; }

.hiw-table {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  padding: 32px 40px;
}
.hiw-table > h2 { width: 100%; }
/* overflow-y (not overflow: hidden) clips the table's rounded corners here —
   keeping the table itself free of "overflow != visible" is required so the
   frozen columns' position: sticky resolves against this scroller, not the table. */
.hiw-table__scroll { width: 100%; overflow-x: auto; overflow-y: hidden; border-radius: 12px; scrollbar-width: none; }
.hiw-table__scroll::-webkit-scrollbar { display: none; }
.hiw-table table {
  width: 100%;
  max-width: 1360px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--stroke-primary);
  border-radius: 12px;
  font-size: 16px;
  line-height: 20px;
  font-weight: 450;
}
.hiw-table th,
.hiw-table td {
  height: 64.55px;
  padding: 20px 32px 20px 20px;
  border-right: 1px solid var(--stroke-primary);
  border-bottom: 1px solid var(--stroke-primary);
  text-align: left;
  vertical-align: middle;
  font-weight: 450;
}
.hiw-table tr > :last-child { border-right: 0; }
.hiw-table tbody tr:last-child > * { border-bottom: 0; }
.hiw-table thead th { color: var(--text-tertiary); background: var(--fg-tertiary); font-weight: 400; line-height: 24px; letter-spacing: -.5px; }
.hiw-table tbody th { color: var(--text-primary); font-weight: 400; line-height: 24px; letter-spacing: -.5px; }
.hiw-table tr > :nth-child(2) { color: #d9f8ff; background: rgba(52, 190, 229, .07); border-color: rgba(52, 190, 229, .12); }
.hiw-table thead tr > :nth-child(2) { color: #7cddf5; background: rgba(52, 190, 229, .16); }
.hiw-table tbody tr:nth-child(4) > * { height: 81px; }
/* Frozen (position: sticky) columns only apply on the mobile layout below —
   that's the only breakpoint where the table still scrolls horizontally.
   Desktop and tablet are fluid (see .hiw-table table) so all 8 columns
   already fit without scrolling, and sticky offsets tuned for mobile's
   fixed 96/120px columns would misalign fluid ones. */

.hiw-cta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 200px 40px;
  overflow: hidden;
}
.hiw-cta__glow {
  display: block;
  position: absolute;
  left: 50%;
  bottom: -307px;
  width: 2111.83px;
  height: 856.38px;
  transform: translateX(-50%);
  pointer-events: none;
}
.hiw-cta__glow img { width: 100%; height: 100%; max-width: none; }
.hiw-cta__copy { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; text-align: center; }
.hiw-cta__copy p { color: var(--text-tertiary); font-size: 16px; line-height: 20px; font-weight: 450; }
.hiw-cta__actions { position: relative; display: flex; align-items: flex-start; gap: 12px; }

@media (max-width: 1199px) {
  .page--hiw { padding-top: 68px; }

  .hiw-hero { flex-direction: column; align-items: center; padding: 40px 20px; }
  .hiw-hero__content { flex: none; width: 100%; }
  .hiw-hero__media { flex: none; width: 100%; aspect-ratio: 770 / 421; }

  .hiw-source { padding: 40px 20px; gap: 16px; }
  .hiw-explain { padding: 40px 20px; }
  .hiw-explain__cards { flex-direction: column; gap: 40px; }
  .hiw-explain__card { flex: none; width: 100%; }
  .hiw-explain__media { aspect-ratio: 770 / 440; }
  .hiw-explain__text { padding-right: 0; }

  .hiw-table { padding: 32px 20px; }
  /* Table is fluid now (see base rule) — no forced-narrow scroller here,
     columns shrink with the viewport instead of triggering horizontal scroll. */
  .hiw-table th,
  .hiw-table td { padding: 14px 12px; font-size: 14px; line-height: 18px; }
  .hiw-table thead th,
  .hiw-table tbody th { line-height: 18px; }

  .hiw-showcase { padding: 40px 20px; gap: 16px; }
  .hiw-showcase .hiw-feature__media--video { width: calc(100% + 40px); margin-inline: -20px; }
  .hiw-feature__media { aspect-ratio: 770 / 422; }

  .hiw-cta { padding: 256px 20px; }
  .hiw-cta__glow { bottom: -280px; width: 1412px; height: 905px; }
}

@media (max-width: 767px) {
  .page--hiw { padding-top: 60px; }

  .hiw-hero { gap: 40px; padding: 40px 12px 24px; }
  .hiw-hero__content { gap: 24px; }
  .hiw-hero__copy { gap: 12px; }
  .hiw-hero__copy h1 { font-size: 32px; line-height: 36px; letter-spacing: -1px; }
  .hiw-hero__copy p { font-size: 14px; line-height: 20px; font-weight: 450; letter-spacing: 0; }
  .hiw-hero__media { aspect-ratio: 351 / 192; border-radius: 6px; order: -1; }
  .hiw-hero__cta.btn--lg { padding: 8px 12px; }

  .hiw-explain > h2,
  .hiw-cta h2,
  .hiw-feature__head h2,
  .hiw-table > h2 { font-size: 28px; line-height: 32px; letter-spacing: -1px; }

  .hiw-source { padding: 40px 12px 48px; gap: 12px; }
  .hiw-showcase .hiw-feature__media--video { width: calc(100% + 24px); margin-inline: -12px; }
  .hiw-feature__head p { font-size: 14px; line-height: 20px; }
  .hiw-feature__media { aspect-ratio: 351 / 192; border-radius: 6px; }
  .hiw-feature__play { width: 48px; height: 48px; }
  .hiw-feature__play::before { margin-left: 3px; border-top-width: 7px; border-bottom-width: 7px; border-left-width: 11px; }

  .hiw-explain { gap: 24px; padding: 48px 16px; }
  .hiw-explain__cards { gap: 32px; }
  .hiw-explain__card { gap: 16px; }
  .hiw-explain__media { aspect-ratio: 770 / 440; border-radius: 6px; }
  .hiw-explain__text h3 { font-size: 20px; line-height: 28px; letter-spacing: -.5px; }
  .hiw-explain__text h3 { white-space: nowrap; }
  .hiw-explain__text p { font-size: 14px; line-height: 20px; }

  .hiw-table { gap: 24px; padding: 48px 0; }
  .hiw-table > h2 { padding: 0 16px; }
  .hiw-table__scroll { width: 100vw; border-radius: 0; }
  .hiw-table table { width: 936px; font-size: 14px; line-height: 20px; border-radius: 0; }
  .hiw-table table col:first-child { width: 96px; }
  .hiw-table th,
  .hiw-table td { width: 120px; height: 60.25px; padding: 20px 16px; }
  .hiw-table tr > :first-child { width: 96px; }
  .hiw-table thead th,
  .hiw-table tbody th { line-height: 20px; letter-spacing: 0; }
  .hiw-table tbody tr:nth-child(2) > * { height: 81px; }
  .hiw-table tbody tr:nth-child(4) > * { height: 81px; }

  /* Frozen columns — Capability + deeep.app stay put while the rest scrolls.
     Mobile is the only breakpoint where the table still overflows (desktop
     and tablet shrink to fit instead), and the only one with fixed-pixel
     column widths for the sticky `left` offsets below to line up with.
     Backgrounds are layered over an opaque base so scrolled-past columns
     never show through the semi-transparent tint underneath. */
  .hiw-table tr > :first-child,
  .hiw-table tr > :nth-child(2) {
    position: sticky;
    z-index: 2;
    transform: translateZ(0);
  }
  .hiw-table tr > :first-child { left: 0; z-index: 3; }
  .hiw-table tr > :nth-child(2) {
    left: 96px;
    /* Shadow on BOTH sides: right guards the seam with the scrolling column
       3 (unchanged); left plugs any compositor/subpixel hairline against
       column 1 — safe because column 1 sits at a higher z-index and always
       paints over this left extension, so it never shows a mismatched color. */
    box-shadow: -2px 0 0 0 var(--bg-primary), 2px 0 0 0 var(--bg-primary);
  }
  .hiw-table thead tr > :first-child { background: linear-gradient(var(--fg-tertiary), var(--fg-tertiary)), var(--bg-primary); }
  .hiw-table tbody tr > :first-child { background: var(--bg-primary); }
  .hiw-table thead tr > :nth-child(2) { background: linear-gradient(rgba(52, 190, 229, .16), rgba(52, 190, 229, .16)), var(--bg-primary); box-shadow: -2px 0 0 0 var(--bg-primary), 2px 0 0 0 #081e25; }
  .hiw-table tbody tr > :nth-child(2) { background: linear-gradient(rgba(52, 190, 229, .07), rgba(52, 190, 229, .07)), var(--bg-primary); box-shadow: -2px 0 0 0 var(--bg-primary), 2px 0 0 0 #040d10; }

  .hiw-showcase { padding: 48px 12px 24px; gap: 12px; }

  .hiw-cta { gap: 24px; padding: 152px 16px; }
  .hiw-cta__glow { bottom: -316px; width: 964px; height: 864px; }
  .hiw-cta__copy p { font-size: 14px; line-height: 20px; }
  .hiw-cta__actions { width: 100%; }
  .hiw-cta__actions .btn { flex: 1 0 0; min-width: 0; padding: 8px 12px; }
}

/* ==========================================================================
   GLOBAL CONTENT MEDIA CONTRACT
   --------------------------------------------------------------------------
   Product screenshots are supplied as 1440x810 artwork. Every reusable
   screenshot container keeps that exact 16:9 geometry at every breakpoint,
   and media uses `contain` so no source pixels are cropped.
   Icons, logos, avatars and decorative glows are intentionally excluded.
   ========================================================================== */
.dropdown__card,
.hero__media,
.mcard,
.phero__media,
.about__stage,
.about--websites .about__static-media,
.expl__media,
.more__track .mcard,
.solution-mosaic__card,
.solution-hero__media,
.solution-hero--split .solution-hero__media,
.solution-hero--product .solution-hero__media,
.solution-carousel__media,
.solution-explain__media,
.solution-advantages__media,
.dnahero__media,
.hiw-hero__media,
.hiw-explain__media,
.hiw-feature__media {
  aspect-ratio: 16 / 9;
  height: auto;
}

.dropdown__shot,
.hero__frame img,
.hero__frame video,
.mcard__img,
.phero__media img,
.about__shot,
.about--websites .about__static-media img,
.expl__media img,
.solution-mosaic__card img,
.solution-hero__media img,
.solution-carousel__media img,
.solution-explain__media img,
.solution-advantages__media img,
.hiw-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.mcard__img--emails {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Mobile screenshots share one corner treatment across every page. */
@media (max-width: 767px) {
  .dropdown__card,
  .mcard,
  .mcard__bg,
  .logocard,
  .logocard__bg,
  .phero__media,
  .about__stage,
  .about--websites .about__static-media,
  .expl__media,
  .solution-mosaic__card,
  .solution-hero__media,
  .solution-carousel__media,
  .solution-explain__media,
  .solution-advantages__media,
  .dnahero__media,
  .hiw-hero__media,
  .hiw-explain__media,
  .hiw-feature__media {
    border-radius: 6px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .mcard:hover .mcard__img,
  .solution-mosaic__card:hover img,
  .solution-explain__card:hover img {
    transform: none;
  }
}

/* ==========================================================================
   WATCH DEMO — promo video modal (desktop/tablet). Mobile skips this box
   entirely and plays the same video through the OS-native fullscreen
   player instead (see script.js), matching the homepage hero pattern.
   ========================================================================== */
body.has-video-overlay { overflow: hidden; }
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.video-modal.is-open { display: flex; }
.video-modal__backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  cursor: default;
}
.video-modal__box {
  position: relative;
  width: 100%;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 120px rgba(0, 0, 0, .5);
}
.video-modal__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.video-modal__close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  height: 36px; padding: 0 14px; border-radius: var(--r-full);
  background: rgba(20, 20, 20, .88); color: var(--text-primary);
  font-size: 14px; line-height: 20px; font-weight: 550;
}

/* ---------- Custom player bar (modal + inline showcase) ----------
   Every label inherits the site grotesque from body; native controls
   would render in whatever the engine's closed shadow root picks. */
.vplayer {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  padding: 26px 12px 10px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .45) 45%, rgba(0, 0, 0, .7));
  transition: opacity .3s var(--ease-out-expo);
}
.vplayer.is-idle { opacity: 0; }
.vplayer__btn {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--r-full);
  background: transparent; color: rgba(255, 255, 255, .92); cursor: pointer;
  transition: background .18s var(--ease-out-expo), color .18s var(--ease-out-expo);
}
.vplayer__btn:hover { background: rgba(255, 255, 255, .14); }
.vplayer__icon { width: 18px; height: 18px; display: none; }
.vplayer__icon--play { display: block; }
.vplayer.is-playing .vplayer__icon--play { display: none; }
.vplayer.is-playing .vplayer__icon--pause { display: block; }
.vplayer__icon--sound { display: block; }
.vplayer.is-muted .vplayer__icon--sound { display: none; }
.vplayer.is-muted .vplayer__icon--muted { display: block; }
.vplayer__icon--expand { display: block; }
.vplayer.is-fs .vplayer__icon--expand { display: none; }
.vplayer.is-fs .vplayer__icon--shrink { display: block; }
.vplayer__time {
  flex: none; padding: 0 4px;
  font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0;
  font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .92);
  white-space: nowrap;
}
.vplayer__timeline {
  display: flex; align-items: center; flex: 1 0 0; min-width: 0;
  height: 22px; cursor: pointer; touch-action: none; outline: none;
}
.vplayer__track {
  position: relative; width: 100%; height: 4px; border-radius: 2px;
  background: rgba(255, 255, 255, .22); overflow: visible;
}
.vplayer__buffered {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 2px; background: rgba(255, 255, 255, .34);
}
.vplayer__played {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  border-radius: 2px; background: #fff;
}
.vplayer__thumb {
  position: absolute; right: -6px; top: 50%; width: 12px; height: 12px;
  transform: translateY(-50%) scale(.5); border-radius: var(--r-full);
  background: #fff; opacity: 0;
  transition: opacity .18s var(--ease-out-expo), transform .18s var(--ease-out-expo);
}
.vplayer__timeline:hover .vplayer__thumb,
.vplayer__timeline:focus-visible .vplayer__thumb { opacity: 1; transform: translateY(-50%) scale(1); }

@media (max-width: 767px) {
  .video-modal { display: none !important; }
}

/* ==========================================================================
   Cookie banner — brought over from deeep.com (same copy, palette and
   geometry), shown until accepted, remembered in localStorage.
   ========================================================================== */
.cookie-banner[hidden] { display: none; }
.cookie-banner {
  position: fixed; right: 16px; bottom: 16px; z-index: 1000;
  display: flex; flex-direction: column; gap: 12px;
  width: 460px; max-width: calc(100vw - 32px);
  padding: 16px;
  border-radius: var(--r-24);
  background: rgba(10, 10, 10, .6);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  box-shadow: var(--glass-shadow), 0 16px 40px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo);
}
.cookie-banner.is-open { opacity: 1; transform: none; }
.cookie-banner__text { font-size: 14px; line-height: 20px; color: #fafafa; text-wrap: pretty; }
.cookie-banner__text a { color: #fafafa; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.cookie-banner__text a:hover { text-decoration-thickness: 2px; }
.cookie-banner__ok {
  align-self: flex-end;
  padding: 8px 20px; border: 0; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .08); color: var(--text-primary);
  font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 550; letter-spacing: -.25px;
  cursor: pointer;
  transition: background .2s var(--ease-out-expo), opacity .2s var(--ease-out-expo);
  opacity: .9;
}
.cookie-banner__ok:hover { background: rgba(255, 255, 255, .14); opacity: 1; }
@media (max-width: 767px) {
  .cookie-banner { left: 16px; width: auto; }
}

/* ==========================================================================
   Hover wave — entries snap in fast, exits fade 3x longer. Sweeping the
   cursor across a button row leaves a soft trailing ripple behind it.
   (transition-duration on the resting state drives the exit; the :hover
   state's shorter one drives the entry.)
   ========================================================================== */
/* Wave is a footer-only flourish: header tabs and buttons keep their
   original snappy in/out hover. */
.fcol a {
  transition-duration: .45s;
  transition-delay: .1s;                /* barely a hold… */
  transition-timing-function: cubic-bezier(.35, .25, .9, .5);   /* …dim starts right away, then drops away sharply */
}
.fcol a:hover {
  transition-duration: .12s;
  transition-delay: 0s;
  transition-timing-function: var(--ease-out-expo);   /* instant-feeling snap */
}
/* .hero__sound is deliberately excluded from the wave: its hide/show
   transition (opacity + visibility) must stay snappy so the pill leaves
   with the video on a fast scroll, not a second later. */

/* ==========================================================================
   Large screens (2560 / 3840). The whole island scales up as one piece:
   typography, cards, header, controls — everything keeps the 1440 design's
   proportions, just rendered larger. script.js divides its scroll-pin
   geometry by the same factor (see pageZoom()).
   ========================================================================== */
@media (min-width: 2000px) {
  .page { zoom: 1.4; }
  :root { --z: 1.4; }
  /* One shared side margin: the island fills the scaled viewport, so every
     section aligns with the fixed header's own padding instead of floating
     on island margins. */
  .page { max-width: none; }
  .phero, .about, .more,
  .hiw-hero, .hiw-feature, .hiw-source, .hiw-explain, .hiw-table,
  .hiw-showcase, .hiw-cta,
  .solution-hero, .solution-hero--split, .solution-hero--product,
  .solution-cards, .solution-about { padding-inline: var(--pad-x); }
  /* Strips bleed to the screen edge again, not the container edge */
  .hero__clients { width: calc(100% + 2 * var(--pad-x)); margin-inline: calc(-1 * var(--pad-x)); }
  .hiw-showcase .hiw-feature__media--video { width: calc(100% + 2 * var(--pad-x)); margin-inline: calc(-1 * var(--pad-x)); }
  /* Hero top pads were doubled for the 1x 1440 layout; zoom already
     enlarges them, so the doubling is backed out here */
  .phero { padding-top: 64px; }
  .hiw-hero { padding-top: 64px; }
  .solution-hero { padding-top: 88px; }
  .solution-hero--split { padding-top: 128px; }
  .solution-hero--product { padding-top: 64px; }
}
@media (min-width: 2400px) { .page { zoom: 1.7; } :root { --z: 1.7; } }
@media (min-width: 3000px) { .page { zoom: 2.05; } :root { --z: 2.05; } }
@media (min-width: 3600px) { .page { zoom: 2.45; } :root { --z: 2.45; } }

/* Viewport units inside a zoomed subtree still resolve on the visual
   viewport, so they inflate by the zoom factor — divide them back to keep
   the scrolly pacing the 1x layout was tuned for. */
.about__block { min-height: calc(56vh / var(--z, 1)); }
.about__visual { top: var(--pin-top, calc(50vh / var(--z, 1) - 231px)); }