/* ================= 1. Fonts ================= */
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/syne-400-22730bfd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/syne-400-61daa3a3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/syne-400-0f50393e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/syne-400-22730bfd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/syne-400-61daa3a3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/syne-400-0f50393e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* greek */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/syne-400-22730bfd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/syne-400-61daa3a3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/syne-400-0f50393e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/syne-400-22730bfd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/syne-400-61daa3a3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/syne-400-0f50393e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/syne-400-22730bfd.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/syne-400-61daa3a3.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Syne';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/syne-400-0f50393e.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ================= 2. Shared base stylesheet (styles.css) ================= */
/* ==========================================================================
   Zemotify Site — Global styles
   Fonts: Syne only (400 / 500 / 600)
   ========================================================================== */

/* ----- Design tokens ----- */
:root {
  /* Colors (sampled from reference) */
  --cream: #f6f5f1;
  --cream-deep: #f2f2ee;
  --bg: #0b0b0d;
  --dark-panel: #0d0d10;
  --white: #ffffff;
  --text: #131316;
  --text-muted: #4a5565;
  --text-dim: #a6a7ab;
  --text-white: #f5f5f5;
  --text-white-muted: #b9bac1;
  --purple: #920cf7;
  --purple-soft: #7c3aed;
  --purple-light: #8b5cf6;
  --orange: #ff5b1f;
  --lime: #d6ff3e;
  --green: #22a45d;
  --red: #ff0000;
  --indigo: #171a5c;
  --divider: rgba(255, 255, 255, 0.14);
  --card-border: rgba(19, 19, 22, 0.06);
  --dark-card-border: rgba(255, 255, 255, 0.09);

  /* Typography */
  --font-head: "Syne", system-ui, sans-serif;
  --font-body: "Syne", system-ui, sans-serif;

  /* Layout */
  --page-max: 1440px;
  --container: 1200px;
  --gutter: 24px;

  /* Radii */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.3s;
}

/* ----- Reset / base ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background-color: var(--cream);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

b, strong { font-weight: 600; }

/* Page cap lives on <main> so the footer spans the full viewport width */
#main {
  max-width: var(--page-max);
  margin-inline: auto;
}

img {
  display: block;
  max-width: 100%;
}

ul, ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

main {
  flex: 1;
}

/* ----- Layout helpers ----- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: 56px;
}

.section-head {
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: 44px;
}

.section-title {
  font-size: clamp(25px, 2.36vw, 34px);
  line-height: 1.29;
  letter-spacing: -1.2px;
  margin-top: 18px;
}

/* Design uses 55px titles on the big dark section headers */
.section-title--xl {
  font-size: clamp(32px, 3.85vw, 55px);
  line-height: 1.16;
  letter-spacing: -1.8px;
}

.section-title--left { text-align: left; }
.section-title--white { color: var(--text-white); }

.section-sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  margin-top: 16px;
}

.section-sub--left { text-align: left; }
.section-sub--dim { color: var(--text-white-muted); }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
#vision-mission .grid-2 { padding: 0 24px; }
/* ----- Badges / pills ----- */
.badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: var(--r-pill);
}

.badge--light {
  background: var(--white);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
}

.badge--outline {
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--text-white);
}

/* ----- Buttons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 14.5px;
  font-weight: 600;
  padding: 20px 26px;
  border-radius: var(--r-pill);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--sm { padding: 10px 15px; font-size: 13.5px; }

.btn--black {
  background: var(--bg);
  color: var(--text-white);
  box-shadow: 0 10px 26px rgba(11, 11, 13, 0.28);
}
.btn--black:hover { box-shadow: 0 14px 32px rgba(11, 11, 13, 0.36); }

.btn--outline-dark {
  background: transparent;
  border: 1.5px solid var(--text);
  color: var(--text);
}
.btn--outline-dark:hover { background: var(--text); color: var(--white); }

.btn--white {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}

.btn--dark-text { color: var(--text); }

.btn--purple-text { color: var(--purple-soft); }

.btn--glass {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--text-white);
}
.btn--glass:hover { background: rgba(255, 255, 255, 0.2); }

.btn--gradient {
  background: linear-gradient(90deg, #FF5B1F 0%, #5A2BFF 100%);
  color: var(--white);
  box-shadow: 0 12px 30px rgba(150, 60, 180, 0.3);
}
.btn--gradient:hover { box-shadow: 0 16px 38px rgba(150, 60, 180, 0.42); }

.btn--full { width: 100%; }

.btn--youtube {
  background: var(--red);
  color: var(--white);
  box-shadow: 0 0 44px rgba(255, 0, 0, 0.45);
}
.btn--youtube:hover { box-shadow: 0 0 60px rgba(255, 0, 0, 0.6); }

/* Unified hovers on all pages: solid (dark/white) buttons = lift + same shadow;
   transparent/outline buttons = fill + invert text (same as .btn--outline-dark) */
.btn--white:hover { box-shadow: 0 14px 32px rgba(11, 11, 13, 0.36); }
.btn--glass:hover { background: var(--white); color: var(--text); }

/* ----- Text gradients ----- */
.text-gradient-purple {
  background: linear-gradient(90deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.text-lime {
  /* Figma node 400:157: linear-gradient #1D293D→#D6FF3E @106.8deg starting outside the text box;
     visible range across the glyphs is ~34%→100% of that ramp */
  background: linear-gradient(106.8deg, #5b713d 0%, #d6ff3e 52%, #d6ff3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ----- Cards ----- */
.card {
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
}

/* ----- Icon tiles ----- */
.icon-tile {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-tile--orange {
  background: #ffece2;
  color: var(--orange);
}

.icon-tile--white {
  background: var(--white);
  color: var(--text);
  box-shadow: 0 14px 30px rgba(19, 19, 22, 0.1);
  width: 60px;
  height: 60px;
  border-radius: 16px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 16px;
  z-index: 100;
  padding-inline: 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  background: #fcfcfa;
  border-radius: var(--r-pill);
  padding: 10px 14px 10px 16px;
  box-shadow: 0 12px 34px rgba(19, 19, 22, 0.08);
  max-width: 1202px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brand__logo {
  display: block;
  height: 32px;
  width: auto;
  transition: transform var(--dur) var(--ease);
}

.brand:hover .brand__logo { transform: scale(1.05); }

.main-nav__list {
  display: flex;
  align-items: center;
  gap: 23px;
}

.main-nav__link {
  font-size: 14px;
  font-weight: 500;
  color: #0b0b0c;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 0;
  transition: color var(--dur) var(--ease);
}

.main-nav__link:hover { color: var(--purple-soft); }

.main-nav__link--btn svg { transition: transform var(--dur) var(--ease); }
.has-dropdown:hover > .main-nav__link--btn svg,
.has-dropdown:focus-within > .main-nav__link--btn svg,
.has-dropdown.is-open > .main-nav__link--btn svg { transform: rotate(180deg); }

.has-dropdown { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 22px 48px rgba(19, 19, 22, 0.14);
  min-width: 260px;
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.has-dropdown.is-open .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown a {
  display: block;
  font-size: 14.5px;
  padding: 10px 14px;
  border-radius: 9px;
  color: #2a2a2e;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.dropdown a:hover { background: #f4f0ff; color: var(--purple-soft); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  align-items: center;
  background: #f1f0ec;
}

.nav-toggle span {
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative;
  padding-top: 76px;
  padding-bottom: 130px;
  /* Full-bleed: break out of #main's 1440px cap so the banner spans the whole viewport */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* Facet background extracted from the design export (assets/img/hero-bg.jpg) */
  background: var(--cream) url("../img/bg-6c3a712a.webp") top center no-repeat;
  background-size: 100% 100%;
  text-align: center;
  overflow: hidden;
}

.hero-inner { position: relative; }

.hero__title {
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 1.16;
  letter-spacing: -1.8px;
  max-width: 983px;
  margin-inline: auto;
  margin-top: 48px;
}

.hero__sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 704px;
  margin-inline: auto;
  margin-top: 26px;
}

.hero__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 30px;
}

.hero__trusted { margin-top: 61px; }

.hero__trusted-label { font-size: 16px; line-height: 26px; font-weight: 600; color: #4a5565; text-align: center; }

/* Figma 388:5399 — 818px window, 61px tall, 22px logo gap, 280px cream fade masks */
.trusted-marquee {
  position: relative;
  max-width: 818px;
  height: 61px;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.trusted-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: trusted-marquee 36s linear infinite;
}

.trusted-marquee:hover .trusted-track { animation-play-state: paused; }

.trusted-track img { flex: none; width: auto; margin-right: 22px; }

@keyframes trusted-marquee { to { transform: translateX(-50%); } }

.trusted-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 280px;
  pointer-events: none;
  z-index: 1;
}

.trusted-fade--l { left: 0; background: linear-gradient(90deg, var(--cream) 0%, rgba(246, 245, 241, 0) 100%); }
.trusted-fade--r { right: 0; background: linear-gradient(-90deg, var(--cream) 0%, rgba(246, 245, 241, 0) 100%); }

/* Display heights per Figma 388:5403-5411 */
.lg-hongkiat { height: 13px; }
.lg-colorlib { height: 21px; }
.lg-smashing { height: 29px; }
.lg-sitepoint { height: 23px; }
.lg-codeinwp { height: 24px; }
.lg-envato { height: 14px; }
.lg-brainhub { height: 15px; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, 260px);
  justify-content: center;
  gap: 13px;
  /* Straddle the banner's bottom edge: half over the hero, half over the cream below */
  margin-top: -80px;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}

.stat-card {
  background: var(--white);
  border-radius: 12px;
  height: 166px;
  padding: 29px;
  box-shadow: 0 18px 40px rgba(19, 19, 22, 0.05);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 52px rgba(19, 19, 22, 0.09);
}

.stat-card__num {
  font-family: var(--font-head);
  font-size: clamp(40px, 3.85vw, 55px);
  font-weight: 600;
  line-height: 64px;
  display: inline-block;
  background: linear-gradient(90deg, #0B0B0C 0%, #6929C4 41.35%, #5A2BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat-card__num .dark,
.stat-card__num .grad {
  color: inherit;
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}

.stat-card__label {
  font-size: 12px;
  color: #4a5565;
  margin-top: 5px;
  line-height: 20px;
}

/* ==========================================================================
   Challenge
   ========================================================================== */

.challenge-grid { margin-top: 8px; }

.icon-card {
  display: flex;
  gap: 22px;
  padding: 30px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.icon-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 44px rgba(19, 19, 22, 0.08);
}

.icon-card__title { font-size: 21px; margin-bottom: 10px; }

.icon-card__text { font-size: 15.5px; color: var(--text-muted); }

.challenge-more {
  text-align: center;
  margin-top: 44px;
}

.challenge-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  transition: color var(--dur) var(--ease);
}

.challenge-more a:hover { color: var(--purple-soft); }

.challenge-more svg { transition: transform var(--dur) var(--ease); }
.challenge-more a:hover svg { transform: translateY(3px); }

/* ==========================================================================
   Belief
   ========================================================================== */

.belief-grid {
  display: grid;
  grid-template-columns: 1.18fr 1fr 1.45fr;
  gap: 24px;
  align-items: center;
}
.container.belief-grid {
    padding-inline: 0;
}
.belief-copy .section-title { font-size: clamp(24px, 2.36vw, 34px); line-height: 1.29; max-width: 383px; }

/* Orbit graphic */
.orbit {
  position: relative;
  width: min(290px, 78vw);
  aspect-ratio: 1;
  margin-inline: auto;
}

.orbit__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.orbit__ring { transform-origin: 145px 145px; }
.orbit__ring .oring { stroke: rgba(19, 19, 22, 0.42); stroke-width: 1; }
.orbit__ring .odot { fill: #121215; }

.orbit__ring--1 { animation: orbit-spin 64s linear infinite; }
.orbit__ring--2 { animation: orbit-spin 42s linear infinite reverse; }
.orbit__ring--3 { animation: orbit-spin 56s linear infinite; }
.orbit__ring--4 { animation: orbit-spin 78s linear infinite reverse; }
.orbit__ring--5 { animation: orbit-spin 96s linear infinite; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }

.orbit__core {
  position: absolute;
  inset: 26.5%;
  background: radial-gradient(120% 120% at 32% 24%, #1d1d23 0%, #0c0c0f 62%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 24px 55px rgba(11, 11, 13, 0.28);
}

.orbit__num { font-family: var(--font-head); font-size: clamp(28px, 3vw, 38px); font-weight: 600; line-height: 1; }
.orbit__label { font-size: 8.5px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); margin-top: 5px; }

@media (prefers-reduced-motion: reduce) {
  .orbit__ring { animation: none; }
}

/* Features */
.belief-features {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.belief-feature {
  display: flex;
  gap: 27px;
  align-items: center;
}

.belief-feature:nth-child(2) { margin-left: 44px; }
.belief-feature:nth-child(3) { margin-left: 10px; }

.belief-feature__title { font-size: 19px; margin-bottom: 8px; }
.belief-feature__text { font-size: 15.5px; color: var(--text-muted); }

/* ==========================================================================
   Dark panels (shared)
   ========================================================================== */

.panel--dark {
  background: var(--dark-panel);
  border-radius: var(--r-lg);
  color: var(--text-white);
  overflow: hidden;
}

.panel-pad { padding: 60px 0; }

/* Dark panels span nearly the full page width (design: ~30px side gutters at 1440px) */
.section > .container:has(> .panel--dark) {
  max-width: var(--page-max);
  padding-inline: clamp(16px, 2.1vw, 28px);
}

.glow-panel { position: relative; isolation: isolate; overflow: hidden; }

.glow-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(420px 300px at 100% 0%, rgba(255, 91, 30, 0.22), transparent 65%),
    radial-gradient(460px 340px at 0% 100%, rgba(90, 43, 255, 0.28), transparent 65%);
  pointer-events: none;
}

.section-head--on-dark .section-title { color: var(--text-white); font-size: clamp(25px, 2.36vw, 34px); }

/* ==========================================================================
   Trusted (dark)
   ========================================================================== */

.client-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 26px 56px;
  margin-top: 8px;
}

.client-logos li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.42px;
  color: #e7e6e1;
  opacity: 0.92;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.client-logos li:hover { opacity: 1; transform: translateY(-2px); }

.counters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  max-width: 1000px;
  margin: 64px auto 0;
}

.counter { padding-inline: 32px; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.counter:first-child { border-left: none; padding-left: 0; }

.counter__num {
  font-family: var(--font-head);
  font-size: clamp(34px, 3.85vw, 55px);
  font-weight: 600;
  line-height: 64px;
  letter-spacing: -1.8px;
}

.counter__label { font-size: 12px; line-height: 20px; color: var(--white); margin-top: 10px; }

/* Testimonial carousel */
.quote-carousel {
  position: relative;
  margin-top: 72px;
  display: flex;
  align-items: center;
  gap: 5px;
  max-width: 1285px;
  margin-inline: auto;
}

.quote-viewport {
  position: relative;
  flex: 1;
  min-height: 240px;
}

.quote-slide {
  position: absolute;
  /*inset: 0;*/
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--dark-card-border);
  border-radius: var(--r-md);
  padding: 36px 36px;
  opacity: 0;
  transform: translateX(24px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
}

.quote-slide.is-active { opacity: 1; transform: translateX(0); pointer-events: auto; }

.quote-slide blockquote {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  line-height: 35px;
  color: #fafaf6;
}

.quote-person {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.quote-person img,
.quote-person__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.quote-person__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-white);
  font-family: var(--font-head);
  font-weight: 600;
}

.quote-person span { display: flex; flex-direction: column; }
.quote-person strong { font-size: 15px; font-weight: 600; }
.quote-person em { font-style: normal; font-size: 13.5px; color: var(--text-white-muted); }

.quote-nav {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.quote-nav:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.06); }

/* ==========================================================================
   Capabilities
   ========================================================================== */

.cap-card {
  position: relative;
  padding: 29px;
  height: 220px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cap-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px rgba(19, 19, 22, 0.09);
}

.cap-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cap-card__arrow {
  color: var(--text);
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.cap-card:hover .cap-card__arrow { opacity: 1; transform: translate(0, 0); }
/* .cap-card:first-child .cap-card__arrow { opacity: 1; transform: translate(0, 0); } */

.cap-card__title { font-size: 20px; line-height: 30px; letter-spacing: -0.2px; margin-top: 37px; }
.cap-card__text { font-size: 14px; line-height: 21px; color: var(--text-muted); margin-top: 8px; }

/* ==========================================================================
   How We Think (dark)
   ========================================================================== */

.think-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 72px;
  max-width: calc(var(--container) + 48px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.think-copy .section-title { font-size: clamp(28px, 2.8vw, 40px); max-width: 380px; }

/* 55px display titles on the big dark section headers (design: Syne/600 55px lh64 ls-1.8) */
.think-copy .section-title.section-title--xl,
.section-head--on-dark .section-title.section-title--xl {
  font-size: clamp(32px, 3.85vw, 55px);
  line-height: 1.16;
  letter-spacing: -1.8px;
}
.think-copy .section-title.section-title--xl { max-width: 440px; }

.founder {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(64px, 9vw, 128px);
}

.founder img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }

.founder span { display: flex; flex-direction: column; }
.founder strong { font-size: 16px; }
.founder em { font-style: normal; font-size: 14px; color: var(--text-white-muted); }

.think-quote {
  position: relative;
  font-family: var(--font-head);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  margin-top: 28px;
  max-width: 460px;
}

.circled { position: relative; white-space: nowrap; }

.circled::after {
  content: "";
  position: absolute;
  inset: -8px -16px;
  border: 2.5px solid var(--orange);
  border-radius: 50%;
  transform: rotate(-3deg);
}

.think-quote__mark {
  font-size: 90px;
  line-height: 0;
  color: rgba(255, 255, 255, 0.16);
  position: absolute;
  bottom: -21px;
  font-family: var(--font-head);
}

/* Timeline — vertical line is a scroll progress bar: dim track + lime fill driven by --progress (JS) */
.timeline { position: relative; }

.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: rgba(214, 255, 62, 0.18);
}

.timeline::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  width: 2px;
  height: calc((100% - 20px) * var(--progress, 0));
  background: var(--lime);
  transition: height 0.15s linear;
}

.timeline__item { position: relative; padding-left: 48px; }
.timeline__item + .timeline__item { margin-top: 44px; }

.timeline__dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--lime);
  background: var(--dark-panel);
}

.timeline__phase {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--lime);
}

.timeline__title { font-size: 20px; line-height: 30px; letter-spacing: -0.2px; color: #fff; margin-top: 13px; }
.timeline__text { font-size: 16px; line-height: 26px; color: #fff; margin-top: 5px; max-width: 560px; }

/* ==========================================================================
   Endorsements
   ========================================================================== */

.endorsements-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 48px;
}

.endorsements-head .section-title { font-size: clamp(25px, 2.36vw, 34px); }
.endorsements-head .section-sub { max-width: 620px; }

.carousel-navs { display: flex; gap: 12px; flex-shrink: 0; }

.round-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.round-btn:hover { transform: translateY(-2px); }

.round-btn--light {
  background: var(--white);
  border: 1px solid var(--card-border);
  color: var(--text);
}

.round-btn--purple { background: #5A2BFF; color: var(--white); box-shadow: 0 10px 24px rgba(90, 43, 255, 0.35); }

.endorse-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 33px) / 4);
  gap: 11px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.endorse-track::-webkit-scrollbar { display: none; }

.endorse-card {
  position: relative;
  scroll-snap-align: start;
  flex: 0 0 292px;
  width: 292px;
  height: 389px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--bg);
  transition: transform var(--dur) var(--ease);
}

.endorse-card:hover { transform: translateY(-6px); }

.endorse-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.endorse-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 11, 13, 0) 38%, rgba(11, 11, 13, 0.42) 58%, rgba(11, 11, 13, 0.88) 80%, rgba(11, 11, 13, 1) 100%);
}

.endorse-card > * { position: relative; z-index: 1; }

.endorse-card__pill {
  position: absolute;
  top: 19px;
  left: 17px;
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 500;
  color: var(--text-white);
  background: rgba(11, 11, 13, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  padding: 2px 10px;
  border-radius: var(--r-pill);
}

.endorse-card__pill--solid { background: rgba(196, 167, 255, 0.32); border-color: rgba(255, 255, 255, 0.22); }

.endorse-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-inline: 20px;
  padding: 16px 0 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.endorse-card__foot span:first-child { display: flex; flex-direction: column; }
.endorse-card__foot strong { font-size: 16px; line-height: 20px; font-weight: 600; color: var(--text-white); white-space: nowrap; }
.endorse-card__foot em { font-style: normal; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--text-white); white-space: nowrap; }

.endorse-card__co {
  font-family: var(--font-head);
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 600;
  letter-spacing: -0.325px;
  color: var(--text-white);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 4px 12px;
  border-radius: 2px;
  white-space: nowrap;
}

.endorse-card__co--shield { display: inline-flex; align-items: center; gap: 5px; }
.endorse-card__co--shield::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #22c55e;
  clip-path: polygon(50% 0, 100% 25%, 100% 70%, 50% 100%, 0 70%, 0 25%);
}

.endorse-card__co--kayak b {
  display: inline-flex;
  width: 17px;
  height: 17px;
  margin: 0 1px;
  align-items: center;
  justify-content: center;
  background: var(--white);
  color: var(--bg);
  border-radius: 3px;
  font-size: 10px;
}

.endorse-card--purple {
  background: linear-gradient(180deg, #5A2BFF 0%, #6929C4 26%, #2b1152 62%, #0B0B0C 100%);
  justify-content: flex-start;
  padding-top: 64px;
}

.endorse-card--purple::before {
  content: "\201D\201D";
  position: absolute;
  top: 10px;
  right: 18px;
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -6px;
  color: rgba(167, 139, 250, 0.95);
  z-index: 1;
}

.endorse-card--purple::after { display: none; }

.endorse-card__quote {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  padding: 0 37px 0 25px;
  flex: 1;
}

.endorse-card--purple .endorse-card__foot { padding-top: 20px; }

/* ==========================================================================
   Difference
   ========================================================================== */

.diff-list { display: flex; flex-direction: column; gap: 20px; max-width: 1200px; margin-inline: auto; }

.diff-row {
  display: grid;
  grid-template-columns: 37px 1fr auto;
  align-items: center;
  gap: 24px;
  background: var(--white);
  border: 1px solid var(--card-border);
  border-radius: var(--r-md);
  padding: 30px 32px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.diff-row:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(19, 19, 22, 0.07); }

.diff-row__num {
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -1.2px;
  background: linear-gradient(90deg, #6800E4 0%, #9810FA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.diff-row__title { font-size: 20px; line-height: 30px; letter-spacing: -0.2px; margin-bottom: 6px; }
.diff-row__text { font-size: 16px; line-height: 26px; color: var(--text-muted); }

.diff-row__check {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #e6f7ec;
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ==========================================================================
   How We Work (dark)
   ========================================================================== */

#how-we-work .section-head--on-dark .section-title { font-size: clamp(25px, 2.36vw, 34px); }
#how-we-work .section-sub--dim { font-size: 17px; }

/* Figma 646:2619 — three clipped articles: 316 / 535 / 316, 16px gaps, 620 tall, radius 24 */
.models-grid {
  display: flex;
  gap: 16px;
  align-items: stretch;
  max-width: calc(var(--container) + 48px);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.model-card {
  position: relative;
  flex: 0 1 316px;
  height: clamp(430px, 43vw, 620px);
  border-radius: 24px;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--dark-card-border);
  cursor: pointer;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), flex-basis 0.55s var(--ease), border-color 0.55s var(--ease);
}

.model-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(0, 0, 0, 0.4); }

.model-card.is-active {
  flex-basis: 535px;
  border-color: rgba(90, 43, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(90, 43, 255, 0.35), 0 24px 60px rgba(105, 41, 196, 0.35);
}

/* Image layer sits 1px inside the article; the featured card's image (Figma 646:2643)
   is a 730x633 frame clipped by its 535x620 article: shifted up/left, white strip at bottom */
.model-card__media {
  position: absolute;
  inset: 1px;
  border-radius: 23px;
  overflow: hidden;
}

.model-card.is-active .model-card__media {
  inset: -7.4% -20% 0% -16.49%;
  border-radius: 0;
}

.model-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.model-card__media--stretch img { object-fit: fill; }

/* Figma fills: MULTIPLY 0.78 + bottom-dark gradient; side cards add a 25% #090A0F wash */
.model-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, #090a0f 0%, rgba(9, 10, 15, 0.6) 50%, rgba(9, 10, 15, 0.2) 100%),
    rgba(0, 0, 0, 0.22);
}

.model-card:not(.is-active) .model-card__media::after {
  background:
    rgba(9, 10, 15, 0.25),
    linear-gradient(to top, #090a0f 0%, rgba(9, 10, 15, 0.6) 50%, rgba(9, 10, 15, 0.2) 100%),
    rgba(0, 0, 0, 0.22);
}

.model-card__overlay {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 31px 33px;
}

.model-card__pills { display: flex; flex-wrap: wrap; gap: 10px; }
/* Figma card 3 wraps Milestone Guaranteed onto its own row */
.model-card__pills--right { justify-content: flex-end; max-width: 236px; margin-left: auto; }

.glass-pill {
  font-size: 11px;
  line-height: 16.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  padding: 6px 14px;
  border-radius: var(--r-pill);
}

.pill--purple {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  background: linear-gradient(90deg, #6929C4, #5A2BFF);
  padding: 7px 16px;
  border-radius: var(--r-pill);
}

.pill--purple i { width: 7px; height: 7px; border-radius: 50%; background: var(--white); }

.model-card__code {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #a78bfa;
}

.model-card__title {
  font-size: clamp(26px, 2.23vw, 32px);
  line-height: 36px;
  letter-spacing: -0.8px;
  font-weight: 600;
  margin-top: 8px;
  color: var(--text-white);
}

.model-card__desc { font-size: 14px; line-height: 20px; color: #cbd5e1; margin-top: 14px; }

.model-card__stats {
  display: flex;
  gap: 40px;
  margin-top: 15px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.model-card__stat-label {
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #94a3b8;
}

.model-card__stat-value { font-family: var(--font-head); font-size: 18px; line-height: 28px; font-weight: 600; margin-top: 4px; }
.model-card__stat-value--purple { color: #a78bfa; }

.model-card__body .btn { margin-top: 22px; }

/* Design: model-card buttons are full-width pills, text left, arrow right */
.model-card .btn--full {
  justify-content: space-between;
  padding: 9px 22px;
  text-align: left;
}
#how-we-work .model-card .btn--white.btn--full {
    padding: 17px 18px 16px;
}
.models-foot {
  text-align: center;
  font-size: 15px;
  color: var(--text-white-muted);
  margin-top: 56px;
}

.models-foot a {
  display: inline-flex;
  font-family: var(--font-head);
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text-white);
  margin-left: 6px;
}

.models-foot a svg { transition: transform var(--dur) var(--ease); }
.models-foot a:hover svg { transform: translateX(4px); }

/* ==========================================================================
   Stacks
   ========================================================================== */

.stack-strip {
  background: var(--dark-panel);
  border-radius: var(--r-lg);
  margin-inline: clamp(16px, 2.1vw, 30px);
  padding: 48px 0;
  overflow: hidden;
}

/* Edge fades so tiles dissolve into the panel at both ends (glow-panel owns ::before) */
.stack-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(60px, 8vw, 130px);
  z-index: 1;
  pointer-events: none;
}

.stack-fade--l { left: 0; background: linear-gradient(90deg, var(--dark-panel) 25%, transparent); }
.stack-fade--r { right: 0; background: linear-gradient(-90deg, var(--dark-panel) 25%, transparent); }

/* Continuous autoplay marquee — the tile set is duplicated in the markup, so
   translating by exactly half the track loops seamlessly. */
.stack-list {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  animation: stack-marquee 32s linear infinite;
}

.stack-strip:hover .stack-list { animation-play-state: paused; }

@keyframes stack-marquee { to { translate: -50% 0; } }

@media (prefers-reduced-motion: reduce) {
  .stack-list { animation: none; }
}

.stack-tile {
  flex: 0 0 179px;
  height: 115px;
  margin-inline-end: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--dark-card-border);
  border-radius: 12px;
  color: var(--text-white);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.stack-tile:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.28); }

/* ==========================================================================
   Recognition (dark)
   ========================================================================== */

.awards-grid { max-width: 1200px; margin-inline: auto; }

.award-card {
  border: 1px solid var(--dark-card-border);
  border-radius: 12px;
  height: 144px;
  padding: 20px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.award-card:hover { transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.24); }

.award-card svg { margin-bottom: 6px; }
.award-card__title { font-size: 16px; line-height: 26px; }
.award-card__sub { font-size: 12px; line-height: 20px; color: var(--text-white); }

/* ==========================================================================
   Success Stories
   ========================================================================== */

.stories-grid {
  align-items: stretch;
  max-width: 1184px;
  margin-inline: auto;
  gap: 24px;
}

.story-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.story-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(19, 19, 22, 0.1); }

.story-card__media { position: relative; aspect-ratio: 276 / 190; overflow: hidden; }

.story-card__media img {
  width: 100%;
  height: 100%;
  object-fit: fill; /* Figma STRETCH: the 512x352 crops map 1:1 onto the 276x190 media box */
  transition: transform 0.6s var(--ease);
}

.story-card:hover .story-card__media img { transform: scale(1.05); }

.story-card__cat {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text-white);
  background: rgba(11, 11, 13, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  border-radius: var(--r-pill);
}

.story-card__cat i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot, #fff); }

.story-card__body { padding: 20px; display: flex; flex-direction: column; flex: 1; min-height: 281px; }

.story-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--text);
}

.story-card__title { font-size: 16px; line-height: 24px; font-weight: 600; color: #1c1b1b; }

.story-card__tag { font-size: 12px; font-weight: 600; letter-spacing: 0.275px; color: #5000a6; margin-top: 6px; line-height: 16px; }

.story-card__text { font-size: 12px; line-height: 19.5px; color: #4b4454; margin-top: 9px; flex: 1; }

.squad-pill {
  align-self: flex-start;
  font-size: 11px;
  line-height: 17px;
  font-weight: 500;
  color: #7e22ce;
  background: #f1eafe;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  margin-top: auto;
}

.story-card__divider { height: 1px; background: rgba(19, 19, 22, 0.08); margin: 16px 0 0; }

.story-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 17px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: #9810fa;
  background: linear-gradient(90deg, #6800E4 0%, #9810FA 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.story-card__link svg {
  transition: transform var(--dur) var(--ease);
  stroke: #9810fa;
  -webkit-text-fill-color: initial;
}
.story-card__link:hover svg { transform: translateX(5px); }

/* ==========================================================================
   Video carousel (dark)
   ========================================================================== */

.video-carousel {
  max-width: calc(var(--container) + 48px);
  margin: 8px auto 0;
  padding-inline: var(--gutter);
}

.video-track {
  position: relative;
  height: clamp(190px, 23.6vw, 340px);
  overflow: hidden;
}

/* Design fan: center 544×340, inner 381×238 at ±24% of track, outer 272×170 at ±38.6% — all 1.6 aspect */
.video-slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 31.78%;
  aspect-ratio: 1.6;
  translate: -50% -50%;
  border-radius: 14px;
  overflow: hidden;
  z-index: 1;
  transition: left 0.55s var(--ease), width 0.55s var(--ease), opacity 0.55s var(--ease), filter 0.55s var(--ease);
  cursor: pointer;
}

.video-slide[data-dir="1"] { --sign: 1; }
.video-slide[data-dir="-1"] { --sign: -1; }

.video-slide[data-dist="1"] {
  left: calc(50% + var(--sign) * 24%);
  filter: brightness(0.62) saturate(0.92);
  z-index: 3;
}

.video-slide[data-dist="2"] {
  left: calc(50% + var(--sign) * 38.6%);
  width: 22.7%;
  filter: brightness(0.5) saturate(0.9);
  z-index: 2;
}

.video-slide[data-dist="3"] {
  left: calc(50% + var(--sign) * 46%);
  width: 16%;
  opacity: 0;
  pointer-events: none;
}

.video-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--ease); }

.video-slide.is-active {
  left: 50%;
  width: 45.34%;
  z-index: 5;
  border-radius: 16px;
  filter: none;
}

.video-slide.is-active img { object-position: center; }

.video-slide:hover img,
.video-slide:focus-visible img { transform: scale(1.04); }

/* Play buttons (purple circle + orange ring on active, white outline on sides — per design) */
.slide-play {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -58%;
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #5A2BFF;
  display: grid;
  place-items: center;
  color: var(--white);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  z-index: 1;
}

.slide-play::after {
  content: "";
  position: absolute;
  inset: -30%;
  border: 1.5px solid rgba(255, 91, 30, 0.55);
  border-radius: 50%;
}

.slide-play svg { width: 34%; translate: 6% 0; }

.slide-play--outline {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  box-shadow: none;
}

.slide-play--outline::after { display: none; }

.video-slide.is-active .slide-play--outline {
  background: #5A2BFF;
  border: 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.video-slide.is-active .slide-play--outline::after { display: block; }

.video-slide figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 14px;
  text-align: center;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.1px;
  font-weight: 600;
  color: #e7e6e1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.video-slide[data-dist="2"] figcaption { font-size: 13px; line-height: 20px; bottom: 10px; }
.video-slide[data-dist="3"] figcaption { opacity: 0; }

/* ==========================================================================
   Podcasts (dark)
   ========================================================================== */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}

.video-modal[hidden] { display: none; }

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 8, 0.86);
  backdrop-filter: blur(6px);
  animation: modal-fade 0.3s var(--ease) both;
}

.video-modal__dialog {
  position: relative;
  width: min(960px, 92vw);
}

.video-modal__frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6);
  animation: modal-pop 0.35s var(--ease) both;
}

.video-modal__yt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-white);
  font-size: 13.5px;
  font-weight: 600;
  width: fit-content;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.video-modal__yt:hover { background: rgba(255, 91, 30, 0.18); border-color: rgba(255, 91, 30, 0.6); }

/* file:// preview state: replaces the YouTube error screen with an in-house panel */
.video-modal__notice {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: clamp(20px, 4vw, 48px);
  background: radial-gradient(120% 120% at 70% 20%, #16111f 0%, #0b0b0d 60%);
  z-index: 1;
}

.video-modal.is-filepreview .video-modal__notice { display: flex; }

.video-modal__notice h3 { font-family: var(--font-head); font-size: clamp(19px, 2.4vw, 26px); color: var(--text-white); }
.video-modal__notice p { max-width: 560px; font-size: 15px; color: rgba(255, 255, 255, 0.62); }

.video-modal__frame-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--white);
  color: var(--bg);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  z-index: 1;
}

.video-modal__close:hover { transform: rotate(90deg) scale(1.08); background: var(--orange); color: var(--white); }

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-pop { from { opacity: 0; transform: translateY(24px) scale(0.94); } to { opacity: 1; transform: none; } }

@media (max-width: 640px) {
  .video-modal__close { top: 10px; right: 10px; width: 36px; height: 36px; }
}

.pod-grid {
  display: grid;
  grid-template-columns: 1fr 1.429fr;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
  max-width: 1200px;
  margin-inline: auto;
}

.pod-item {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  transition: transform var(--dur) var(--ease);
}

.pod-item:hover { transform: translateY(-4px); }

.pod-item img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pod-item--sm img { aspect-ratio: 485 / 204; }

.pod-item--lg { grid-column: 2; grid-row: 1 / 3; }
.pod-item--lg img { height: 100%; aspect-ratio: auto; }

/* Outer ring + warm glow — an inset shadow would sit under the img and disappear */
.pod-item--lg {
  box-shadow:
    0 0 0 1.5px rgba(255, 91, 30, 0.85),
    0 0 52px rgba(255, 91, 30, 0.22),
    0 22px 54px rgba(0, 0, 0, 0.45);
}

/* Design play buttons: 72px on 485-wide small cards, 103px on the 693-wide big card (14.8%) */
.pod-item .slide-play { width: 14.8%; z-index: 3; }

/* Measured vs design render: small cards ≈ 0.65× source brightness, big card ≈ 0.77× → flat black scrims */
.pod-item::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(9, 10, 15, 0.38);
  pointer-events: none;
}

.pod-item--lg::after { background: rgba(9, 10, 15, 0.36); }

/* Figma image-frame radial glows painted over the big card's image:
   purple rgba(90,43,255,.18) from top-left (r .85, clear at 60%), orange rgba(255,91,31,.25) from below (center y 1.2, r 1.27, clear at 60%) */
.pod-item--lg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(85% 85% at 0% 0%, rgba(90, 43, 255, 0.18) 0%, rgba(0, 0, 0, 0) 51%),
    radial-gradient(127% 127% at 50% 120%, rgba(255, 91, 31, 0.25) 0%, rgba(0, 0, 0, 0) 76%);
}

.pod-cta { text-align: center; margin-top: 48px; }

/* ==========================================================================
   CTA
   ========================================================================== */

.cta { padding-block: 120px; text-align: center; }

.cta__title {
  font-size: clamp(32px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  max-width: 625px;
  margin-inline: auto;
}

.cta .section-sub { max-width: 640px; margin-inline: auto; }

.cta__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background-color: var(--bg);
  color: var(--text-white);
  padding-top: 60px;
  padding-bottom: 60px;
  flex-shrink: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 280px repeat(4, minmax(0, 1fr));
  column-gap: 32px;
  row-gap: 48px;
}

.footer .brand__logo,
.site-footer .brand__logo { height: 34px; }

.footer-tagline { margin-top: 26px; font-size: 14px; line-height: 22px; color: var(--text-white-muted); }

.footer-col__title {
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  color: var(--text-white);
  margin-bottom: 13px;
}

.footer-col__list li { font-size: 14px; line-height: 22px; }
.footer-col__list li + li { margin-top: 12px; }

.footer-link {
  display: inline-block;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-white-muted);
  position: relative;
  transition: color var(--dur) var(--ease);
}

.footer-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: var(--purple-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}

.footer-link:hover,
.footer-link:focus-visible { color: var(--text-white); }

.footer-link:hover::after,
.footer-link:focus-visible::after { transform: scaleX(1); }

.footer-bottom { margin-top: 74px; }
.footer-divider { border: none; border-top: 1px solid var(--divider); }

.footer-copyright {
  text-align: center;
  font-size: 14px;
  line-height: 20px;
  color: var(--text-white-muted);
  margin-top: 32px;
}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  [data-reveal] { opacity: 1; transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Laptop */
@media (max-width: 1180px) {
  /* the belief grid is the section's container, so it owns the page gutter */
  .container.belief-grid { padding-inline: var(--gutter); }
  .models-grid { flex-wrap: wrap; }
  .model-card { flex: 1 1 calc(50% - 8px); height: auto; min-height: 480px; }
  .model-card.is-active { flex-basis: 100%; }
  .model-card.is-active .model-card__media { inset: 1px; border-radius: 23px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .endorse-track { grid-auto-columns: calc((100% - 24px) / 3); }
  .think-grid { gap: 48px; }
}

/* Small laptop / big tablet */
@media (max-width: 1024px) {
  .main-nav { display: none; }
  .nav-toggle { display: inline-flex; }

  .main-nav.is-open {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: var(--gutter);
    right: var(--gutter);
    background: var(--white);
    border-radius: 20px;
    box-shadow: 0 26px 60px rgba(19, 19, 22, 0.16);
    padding: 18px;
    animation: nav-drop 0.3s var(--ease) both;
  }

  @keyframes nav-drop {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .main-nav.is-open .main-nav__list { flex-direction: column; align-items: flex-start; gap: 4px; }
  .main-nav.is-open .main-nav__link { width: 100%; padding: 12px 14px; border-radius: 10px; }
  .main-nav.is-open .has-dropdown { width: 100%; }
  .main-nav.is-open .dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    min-width: 0;
    padding: 0 12px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.35s var(--ease), opacity 0.25s var(--ease), padding 0.35s var(--ease), visibility 0s;
  }
  .main-nav.is-open .has-dropdown.is-open .dropdown {
    max-height: 220px;
    opacity: 1;
    visibility: visible;
    padding: 0 12px 8px;
  }

  .belief-grid { grid-template-columns: 1fr; gap: 56px; }
  .belief-feature:nth-child(2), .belief-feature:nth-child(3) { margin-left: 0; }
  .think-grid { grid-template-columns: 1fr; }
  .counters { grid-template-columns: repeat(2, 1fr); gap: 36px 0; }
  .counter:nth-child(3) { border-left: none; padding-left: 0; }
  .footer-grid { grid-template-columns: 240px repeat(4, minmax(0, 1fr)); column-gap: 24px; }
}

/* Round 26: vertical rhythm locked to Figma heading positions at 1440 */
/* Round 27: dark-panel top/bottom edges locked to design bands (x=100 pixel scan) */
@media (min-width: 1181px) {
  /* Round 27: inter-section rhythm derived from the Figma content boxes — the design
     separates consecutive sections by ~120px (56 section pad + margin + 56 next pad). */
  #challenge { margin-top: 65px; }
  #belief { margin-top: 7px; }
  /* the trusted panel sits 144 (not 120) under the belief content */
  #trusted { margin-top: 32px; }
  #capabilities { margin-top: 8px; }
  #how-we-think { margin-top: 8px; }
  #endorsements { margin-top: 8px; }
  #why-us { margin-top: 9px; }
  #how-we-work { margin-top: 8px; }
  #stacks { margin-top: 9px; }
  #stacks .stack-strip { margin-top: 55px; padding: 60px 0; }
  /* recognition is a panel that starts 22px under the stacks strip in Figma */
  #recognition { margin-top: -90px; }
  #stories { margin-top: 7px; }
  #videos { margin-top: 8px; }
  #podcasts { margin-top: 8px; }
  #cta { margin-top: 8px; padding-bottom: 121px; }

  /* Round 27: Figma head anatomy (frames 2147240195/288/301) — badge box 30px
     (5px pad + 18px line + 1px border), 17px badge→title→sub gaps, 55px head→content.
     Scoped to .page-home so the other verified pages keep their tuned rhythm. */
  body.page-home .badge { padding: 5px 18px; line-height: 18px; }
  /* Figma 34px titles set 44px lines (1.29 auto); pin it so heads are 136/180 tall */
  body.page-home .section-title { line-height: 44px; }
  body.page-home .section-head > :first-child,
  body.page-home .think-copy > :first-child { margin-top: 0; }
  body.page-home .section-title { margin-top: 17px; }
  body.page-home .section-sub { margin-top: 17px; }
  body.page-home .section-head { margin-bottom: 55px; }
  /* the endorsements head is a flex row, not .section-head */
  #endorsements .endorsements-head { margin-bottom: 55px; }
  #how-we-work .section-head { margin-bottom: 64px; }
  /* dark panels: content sits 60 under the panel edge, same 60 below (Figma containers) */
  #trusted .panel-pad, #recognition .panel-pad,
  #videos .panel-pad, #podcasts .panel-pad { padding-top: 60px; padding-bottom: 60px; }
  #how-we-think .panel-pad { padding-top: 60px; padding-bottom: 60px; }
  #how-we-work .panel-pad { padding-top: 60px; padding-bottom: 96px; }
  .models-foot { margin-top: 44px; }
  /* trusted: head→logos 100, logos→counters 52, counters→quote 100 (Figma 388:5455 group) */
  #trusted .section-head { margin-bottom: 100px; }
  .client-logos { margin-top: 0; }
  .counters { margin-top: 52px; padding-block: 16px 15px; }
  .counter__label { margin-top: 5px; }
  .quote-carousel { margin-top: 62px; padding-block: 37px 1px; }
  .quote-viewport { min-height: 206px; }
  /* belief: Figma columns 383/297/467 + 27px gaps in the 1200 container;
     features anchor the section top, copy sits 82 and the orbit 53 below it */
  #belief .belief-grid { align-items: start; grid-template-columns: 383px 297px 467px; column-gap: 27px; max-width: 1201px; margin-inline: auto; }
  #belief .belief-copy { margin-top: 82px; }
  #belief .belief-copy .section-sub { white-space: nowrap; }
  #belief .orbit { width: 297px; margin-top: 53px; }
  #belief .belief-features { margin-top: 0; }
  .belief-feature__text { max-width: 305px; }
  .belief-features { gap: 62px; }
  .belief-feature__title { font-size: 20px; line-height: 30px; margin-bottom: 6px; }
  .belief-feature__text { font-size: 16px; line-height: 26px; }
  .belief-feature:nth-child(2) { margin-left: 76px; }
  .belief-feature:nth-child(3) { margin-left: 0; }
  /* challenge cards are 135 tall: 29 top pad, 20/30 title, 6, 16/26 text, 18 bottom */
  .challenge-grid { margin-top: 0; }
  .icon-card { gap: 18px; padding: 29px 30px 16px; }
  .icon-card__title { font-size: 20px; line-height: 30px; margin-bottom: 6px; }
  .icon-card__text { font-size: 16px; line-height: 26px; }
  .challenge-more { margin-top: 22px; }
  #challenge .section-title { white-space: nowrap; }
  #endorsements .section-sub,
  #why-us .section-sub { white-space: nowrap; max-width: none; }
  .endorse-track { padding-bottom: 0; }
  /* CTA head: 55/64 title (2 lines = 128), 22 to sub, 32 to actions (Figma 11023..11317) */
  .cta__title { line-height: 64px; }
  /* capabilities sub wraps to two lines exactly as the 536px Figma text box */
  #capabilities .section-sub { max-width: 536px; margin-inline: auto; }
  /* why-us rows: 64 content + 28/28 = 120, 12 apart */
  .diff-list { gap: 0; }
  .diff-row { padding: 28px 24px; }
  .diff-list > * + * { margin-top: 12px; }
  /* think column: 118 to founder row, 22 to quote, 26/35 quote, timeline 118 items 24 apart */
  .founder { margin-top: 118px; }
  .founder img { flex-basis: 68px; width: 68px; height: 68px; }
  .think-quote { margin-top: 22px; font-size: 26px; line-height: 35px; }
  .timeline__item + .timeline__item { margin-top: 24px; }
  .timeline__phase { line-height: 18px; }
  .pod-cta { margin-top: 44px; }
  .pod-cta .btn { font-size: 16px; padding: 15px 21px; gap: 8px; }
  body.page-home #cta { padding-top: 56px; }
  /* the CTA head is its own content — the head->body gap would be dead space */
  body.page-home #cta .section-head { margin-bottom: 0; }
  body.page-home .hero { padding-top: 109px; padding-bottom: 129px; }
  body.page-home .hero__title { margin-top: 22px; }
  body.page-home .hero__sub { margin-top: 22px; }
  body.page-home .hero__actions { margin-top: 32px; gap: 8px; }
  body.page-home .hero__trusted { margin-top: 59px; }
  body.page-home #cta .section-sub { margin-top: 22px; }
  body.page-home .cta__title { margin-top: 0; line-height: 64px; }
  body.page-home .cta__actions { margin-top: 32px; gap: 8px; }
  body.page-home .hero__actions .btn,
  body.page-home .cta__actions .btn { font-size: 16px; padding: 15px 21px; gap: 8px; }

  /* Pin display sizes to design px so scrollbar width can't rescale vw clamps */
  .section-title { font-size: 34px; }
  .belief-copy .section-title,
  .section-head--on-dark .section-title,
  .endorsements-head .section-title,
  #how-we-work .section-head--on-dark .section-title { font-size: 34px; }
  .hero__title,
  .section-title--xl,
  .think-copy .section-title,
  .endorsements-head .section-title--xl,
  .cta__title,
  .stat-card__num { font-size: 55px; }
}

@media (min-width: 1280px) {
  .footer-grid { grid-template-columns: 211px 98px 221px 118px 144px; column-gap: 102px; }
  .footer-brand { width: 238px; }
}

/* Tablet */
@media (max-width: 820px) {
  .section { padding-block: 48px; }
  /* the CTA's 64px leading is tuned for the 55px desktop title; at clamped sizes it strands the lines */
  .cta__title { line-height: 1.16; }
  /* dark panels are edge-to-edge on small screens, so their content needs its own inset */
  :root { --panel-inset: 20px; }
  .panel-pad { padding: 48px var(--panel-inset); }
  /* these blocks carry a page gutter of their own for the full-bleed desktop layout */
  .models-grid { padding-inline: 0; }
  /* the scroller keeps its own slide inset, so let it reach the panel edge */
  .video-carousel { margin-inline: calc(var(--panel-inset) * -1); }
  .diff-row { grid-template-columns: 44px 1fr auto; }

  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: 1fr; max-width: min(460px, calc(100% - var(--gutter) * 2)); margin-inline: auto; }
  /* the label only shrink-wraps on desktop; on a full-width card it should sit under the number */
  .stat-card__label { text-align: center; }
  .models-grid { flex-direction: column; max-width: 520px; }
  /* stacked cards have no side-by-side height to match, so let them hug their content */
  .model-card { height: auto; min-height: 0; }
  .model-card__overlay { gap: 30px; }
  .story-card__body { min-height: 0; }
  .pod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  /* the big card still asked for grid column 2, which collapsed its siblings to 0 width */
  .pod-item--lg { grid-column: 1 / -1; grid-row: auto; }
  .pod-item--lg img { aspect-ratio: 16 / 9; height: auto; }
  .pod-item--sm img { aspect-ratio: 16 / 9; }
  .endorse-track { grid-auto-columns: calc((100% - 24px) / 2); }
  .video-track { display: flex; height: auto; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-block: 10px; scrollbar-width: none; }
  .video-track::-webkit-scrollbar { display: none; }
  .video-slide { position: relative; top: auto; left: auto; translate: none; flex: 0 0 64%; width: auto; aspect-ratio: 16 / 10; opacity: 0.55; filter: none; scroll-snap-align: center; }
  .video-slide.is-active { flex-basis: 64%; width: auto; aspect-ratio: 16 / 10; opacity: 1; }
  .video-track .video-slide[data-dist] { left: auto; width: auto; opacity: 0.55; }
  .video-track .video-slide[data-dist="3"] { pointer-events: auto; }
  .video-track .video-slide[data-dist] figcaption { opacity: 1; font-size: 18px; }
  .endorsements-head { flex-direction: column; align-items: flex-start; }
  .quote-slide { padding: 28px; }
  .quote-viewport { min-height: 300px; }
  .stack-strip { margin-inline: var(--gutter); }
  .client-logos { gap: 22px 34px; }
  .client-logos li { font-size: 17px; letter-spacing: 0.2px; gap: 8px; }
  .counters { margin-top: 44px; }
  .quote-carousel { margin-top: 48px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .footer-brand { grid-column: 1 / -1; }

  /* the pill floats over content while scrolling, so let it read as frosted glass */
  .header-inner { background: rgba(252, 252, 250, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
}

/* Mobile */
@media (max-width: 520px) {
  :root { --gutter: 18px; }

  .site-header { top: 10px; }
  .header-inner { padding: 8px 8px 8px 18px; }
  .header-actions .btn--sm { display: none; }

  .section { padding-block: 44px; }
  :root { --panel-inset: 18px; }
  .panel-pad { padding: 40px var(--panel-inset); }
  .section-head { margin-bottom: 40px; }

  .hero { padding-top: 64px; padding-bottom: 90px; }
  .hero__stats { margin-top: -55px; }
  .hero__title { margin-top: 24px; }
  .stat-card { height: auto; min-height: 150px; }
  .trusted-marquee { max-width: 100%; }
  .trusted-fade { width: 48px; }

  .btn { width: 100%; }
  .hero__actions .btn, .cta__actions .btn { width: auto; flex: 1 1 auto; }
  /* a full-bleed red button swamps the panel; let this one size to its label */
  .pod-cta .btn { width: auto; display: inline-flex; }

  .icon-card { flex-direction: column; gap: 16px; padding: 24px; }
  .model-card__overlay { padding: 26px 24px; }
  .diff-row { grid-template-columns: 56px 1fr; padding: 22px; }
  .diff-row__check { display: none; }
  .diff-row__num { font-size: 24px; }

  .endorse-track { grid-auto-columns: 86%; }
  .grid-4 { grid-template-columns: 1fr; }
  .pod-grid { grid-template-columns: 1fr; }

  /* the head already carries its own 40px bottom margin inside the copy column */
  .belief-grid { gap: 28px; }
  .belief-feature { gap: 16px; }
  .belief-feature .icon-tile { width: 52px; height: 52px; border-radius: 14px; }
  .belief-features { gap: 28px; }

  .client-logos { gap: 18px 24px; }
  .client-logos li { font-size: 16px; }
  .counters { grid-template-columns: 1fr 1fr; gap: 26px 0; margin-top: 36px; }
  .counter { padding-inline: 16px; }
  .counter__num { font-size: 30px; line-height: 38px; letter-spacing: -1px; }
  .counter__label { margin-top: 4px; }

  .quote-carousel { gap: 8px; margin-top: 40px; }
  .quote-nav { display: none; }
  .quote-viewport { min-height: 340px; }

  .think-quote { font-size: 19px; line-height: 28px; }
  .think-quote__mark { display: none; }
  .circled::after { inset: -6px -10px; }
  .timeline__item { padding-left: 40px; }
  .timeline__item + .timeline__item { margin-top: 32px; }

  /* these breaks are tuned for the 1440 column widths — on phones they strand words */
  #challenge .section-title br, #belief .section-title br,
  #trusted .section-title br, #how-we-think .section-sub br { display: none; }

  .footer-grid { grid-template-columns: 1fr; row-gap: 32px; }
  .footer-bottom { margin-top: 48px; }
  .footer-copyright { margin-top: 24px; font-size: 14px; }
}

/* ==========================================================================
   Animated gradient sweep — every palette gradient slides smoothly
   ========================================================================== */

.text-lime,
.btn--gradient,
.pill--purple {
  background-size: 220% 100%;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}

.endorse-card--purple {
  background-size: 100% 220%;
  animation: grad-sweep-y 7s ease-in-out infinite alternate;
}

@keyframes grad-sweep-x {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

@keyframes grad-sweep-y {
  from { background-position: 50% 0%; }
  to   { background-position: 50% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .text-gradient-purple,
  .stat-card__num,
  .text-lime,
  .btn--gradient,
  .pill--purple,
  .endorse-card--purple { animation: none; }
}

/* ================= 3. Page design layers ================= */
/* ===== service detail pages: shared layer (sd-*) ===== */
/* ==========================================================================
   Zemotify — Service detail shared layer (DevOps, SaaS, Web & Mobile)
   The parts these three pages share with the earlier service pages: hero
   with watermark + black pill + gradient title, dark marquee band, outline
   section pills, the two-corner dark wash, icon tiles, chips, hairline
   feature rows and the "laptop" CTA card. Same tokens as styles.css.
   Classes are prefixed sd- so the layer can sit unscoped in the site.
   ========================================================================== */

:root {
  --sd-band: #eeebe5;
  --sd-line: #e6e3dc;
  --sd-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
  --sd-wash:
    radial-gradient(55% 90% at 0% 0%, rgba(90, 43, 255, 0.26) 0%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(55% 90% at 100% 100%, rgba(255, 91, 31, 0.2) 0%, rgba(0, 0, 0, 0) 62%),
    #0b0b0c;
}

/* ----- Page rhythm: 120px between sections; tinted bands carry their own padding ----- */
.sd-page > .sd-section { padding-block: 120px 0; }
.sd-page > .sd-band { padding-block: 120px; margin-top: 120px; background: var(--sd-band); }
.sd-page > .sd-section.sd-dark { padding-block: 120px; margin-top: 120px; }
.sd-page > .sd-band + .sd-section,
.sd-page > .sd-dark + .sd-section { padding-top: 120px; }
.sd-page > .sd-section:last-child { padding-bottom: 120px; }

.sd-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 56px;
  line-height: 0;
}
.sd-head .section-title { margin-top: 17px; line-height: 1.3; }
.sd-head .section-sub { margin-top: 14px; line-height: 28px; max-width: 680px; }

/* outline pill (white) — the section label used on every service page */
.sd-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 5px 16px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.sd-pill--black { background: #0b0b0c; border-color: #0b0b0c; color: var(--white); }
.sd-pill--ghost { background: transparent; border-color: rgba(255, 255, 255, 0.5); color: var(--white); }

/* ==========================================================================
   Hero
   ========================================================================== */
.sd-hero {
  position: relative;
  padding: 122px 24px 96px;
  text-align: center;
  overflow: hidden;
  background: var(--cream);
}
.sd-hero__watermark {
  position: absolute;
  top: 58px;
  /* anchored left like the other service pages: the word reads from its start */
  left: -12px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(120px, 19vw, 273px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.075) 0%, rgba(11, 11, 12, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
.sd-hero__inner { position: relative; }
.sd-hero__title {
  display: block;
  width: fit-content;
  margin: 22px auto 0;
  font-size: clamp(36px, 4.4vw, 63px);
  line-height: 1.14;
  letter-spacing: -2px;
  font-weight: 600;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 34%, #6929C4 64%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
.sd-hero__sub {
  max-width: 640px;
  margin: 22px auto 0;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
}
.sd-hero__actions { margin-top: 30px; }
.sd-hero__btn { padding: 17px 22px; font-size: 15px; }
.sd-hero__btn svg { transition: transform var(--dur) var(--ease); }
.sd-hero__btn:hover svg { transform: translate(2px, -2px); }

.sd-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.sd-tags li {
  padding: 6px 15px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #2a2a2e;
}

/* ==========================================================================
   Marquee band — 63px dark strip, same as the other service pages
   ========================================================================== */
.sd-marquee {
  position: relative;
  height: 63px;
  overflow: hidden;
  background: #0b0b0c;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.sd-marquee__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: sd-marquee-x 34s linear infinite;
}
.sd-marquee:hover .sd-marquee__track { animation-play-state: paused; }
.sd-marquee__item {
  display: inline-flex;
  align-items: center;
  padding-right: 48px;
  font-size: 22px;
  line-height: 33px;
  font-weight: 800;
  letter-spacing: 3.52px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
.sd-marquee__item i { font-style: normal; margin-left: 48px; font-size: 18px; letter-spacing: 0; color: var(--orange); }
@keyframes sd-marquee-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.sd-marquee::before,
.sd-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1; pointer-events: none; }
.sd-marquee::before { left: 0; background: linear-gradient(90deg, #0b0b0c, rgba(11, 11, 12, 0)); }
.sd-marquee::after { right: 0; background: linear-gradient(-90deg, #0b0b0c, rgba(11, 11, 12, 0)); }

/* ==========================================================================
   Building blocks
   ========================================================================== */
.sd-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--sd-line);
  border-radius: 14px;
}
.sd-dark { background: var(--sd-wash); color: var(--white); }
.sd-dark .section-title { color: var(--white); }
.sd-dark .section-sub { color: rgba(255, 255, 255, 0.72); }

/* icon tile: 42px rounded square, hairline, dark stroke icon */
.sd-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--sd-line);
  border-radius: 10px;
  background: var(--white);
  color: #110c09;
}
.sd-icon svg { width: 20px; height: 20px; }
.sd-icon--dark { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.16); color: var(--white); }
.sd-icon--orange { background: var(--orange); border-color: var(--orange); color: var(--white); }

/* small chips (white on band, beige on white) */
.sd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sd-chips li {
  padding: 6px 13px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12.5px;
  line-height: 18px;
  color: #2a2a2e;
}
.sd-chips--fill li { border-color: transparent; background: #efebe4; font-size: 13.5px; padding: 7px 14px; }

/* hairline feature rows in a two-column grid: icon · title · text */
.sd-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }
.sd-feature {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sd-line);
}
.sd-feature h3 { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; }
.sd-feature p { margin-top: 4px; font-size: 14.5px; line-height: 23px; color: var(--text-muted); }

/* mono list (command-line flavoured items) */
.sd-mono { font-family: var(--sd-mono); font-size: 13px; line-height: 20px; }

/* ==========================================================================
   Laptop CTA — black lid bar with a camera dot, centred pitch inside
   ========================================================================== */
.sd-cta { display: flex; justify-content: center; }
.sd-laptop {
  position: relative;
  width: 860px;
  max-width: 100%;
  border: 1px solid var(--sd-line);
  border-radius: 12px;
  background: var(--cream);
  box-shadow: 0 70px 120px -60px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  text-align: center;
}
.sd-laptop__bar {
  display: block;
  height: 18px;
  background: radial-gradient(circle 4px at 50% 50%, var(--cream) 98%, #0b0b0c 100%), #0b0b0c;
}
.sd-laptop__inner { padding: 64px 56px 48px; }
.sd-laptop__kicker {
  display: block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #000;
}
.sd-laptop__title {
  margin-top: 14px;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.12;
  letter-spacing: -1.8px;
  font-weight: 600;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
.sd-laptop__sub { max-width: 640px; margin: 18px auto 0; font-size: 18px; line-height: 28px; color: var(--text-muted); }
.sd-laptop__btn {
  display: flex;
  width: min(580px, 100%);
  margin: 34px auto 0;
  justify-content: center;
  font-size: 16px;
  padding: 16px 22px;
  box-shadow: 0 30px 60px -25px rgba(255, 91, 31, 0.7);
}
.sd-laptop__btn:hover { box-shadow: 0 34px 66px -22px rgba(255, 91, 31, 0.8); }
.sd-laptop__btn svg { transition: transform var(--dur) var(--ease); }
.sd-laptop__btn:hover svg { transform: translate(2px, -2px); }
.sd-laptop__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 22px;
  margin-top: 26px;
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sd-laptop__meta li { display: inline-flex; align-items: center; gap: 8px; }
.sd-laptop__meta li::before { content: "✦"; color: var(--orange); letter-spacing: 0; }

/* terminal lines above the CTA title */
.sd-term { display: inline-block; max-width: 100%; text-align: left; font-family: var(--sd-mono); font-size: 14px; line-height: 24px; }
.sd-term__cmd { display: block; color: #6929c4; }
.sd-term__line { display: block; white-space: nowrap; }
.sd-term__out { display: inline-block; vertical-align: bottom; color: #0a8c5a; }

/* ==========================================================================
   Enquiry form (Contact page, case studies) — fields, validation, status
   ========================================================================== */
.co-req { color: #c2410c; }

.co-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; margin-top: 24px; }
.co-field { display: flex; flex-direction: column; min-width: 0; }
.co-field--full { grid-column: 1 / -1; }
.co-field label { font-size: 14px; line-height: 20px; font-weight: 600; color: #131316; }
.co-field input,
.co-field select,
.co-field textarea {
  width: 100%;
  margin-top: 8px;
  padding: 13px 15px;
  border: 1px solid #ddd8ce;
  border-radius: 10px;
  background: #fdfcfa;
  font: inherit;
  font-size: 15px;
  line-height: 22px;
  color: #131316;
  appearance: none;
}
.co-field textarea { resize: vertical; min-height: 150px; }
.co-field ::placeholder { color: #8c8a86; opacity: 1; }
.co-select { position: relative; }
.co-select select { padding-right: 42px; cursor: pointer; }
.co-select svg { position: absolute; right: 16px; top: calc(50% + 4px); width: 14px; height: 7px; translate: 0 -50%; color: #55545a; pointer-events: none; }
.co-help { margin-top: 7px; font-size: 13px; line-height: 19px; color: var(--text-muted); }
.co-err { margin-top: 7px; font-size: 13px; line-height: 19px; font-weight: 600; color: #b42318; }
.co-field.is-invalid input,
.co-field.is-invalid textarea { border-color: #d92d20; background: #fffafa; }
.co-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.co-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 26px; }
.co-submit {
  padding: 16px 26px;
  background: var(--orange);
  color: var(--white);
  font-size: 16px;
  box-shadow: 0 16px 30px -16px rgba(255, 91, 31, 0.9);
}
.co-submit[aria-busy="true"] { cursor: progress; opacity: 0.8; }
.co-form__promise { font-size: 13.5px; line-height: 20px; color: var(--text-muted); }

.co-status {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--sd-line);
  background: #faf8f4;
  font-size: 14.5px;
  line-height: 23px;
  color: #26262b;
}
.co-status:focus { outline: none; }
.co-status strong { display: block; font-size: 15.5px; color: #131316; }
.co-status p + p { margin-top: 6px; }
.co-status a { color: #131316; font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 3px; }
.co-status--handoff { border-color: rgba(124, 58, 237, 0.25); background: #f7f4ff; }
.co-status--ok { border-color: rgba(34, 164, 93, 0.35); background: rgba(34, 164, 93, 0.07); }
.co-status--error { border-color: rgba(217, 45, 32, 0.35); background: #fffafa; }
.co-status__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.co-status__actions button, .co-status__actions a {
  padding: 8px 14px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: var(--white);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #131316;
  text-decoration: none;
  cursor: pointer;
}


@media (max-width: 560px) {
  .co-fields { grid-template-columns: minmax(0, 1fr); }
  .co-field input, .co-field select, .co-field textarea { font-size: 16px; }  /* no iOS zoom on focus */
  .co-submit { width: 100%; justify-content: center; }
}

/* ----- Fields ----- */
.co-field input, .co-field select, .co-field textarea {
  transition: border-color 0.25s var(--zm-ease), box-shadow 0.25s var(--zm-ease), background-color 0.25s var(--zm-ease);
}
.co-field input:hover, .co-field select:hover, .co-field textarea:hover { border-color: #c9c3b8; }
.co-field input:focus, .co-field select:focus, .co-field textarea:focus {
  outline: none;
  border-color: var(--purple-soft);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.12);
}
.co-field label { transition: color 0.25s var(--zm-ease); }
.co-field:focus-within label { color: var(--purple-soft); }
.co-field.is-invalid input:focus, .co-field.is-invalid textarea:focus { border-color: #d92d20; box-shadow: 0 0 0 4px rgba(217, 45, 32, 0.12); }
.co-field.is-valid input, .co-field.is-valid textarea { border-color: rgba(34, 164, 93, 0.55); }
.co-err:not([hidden]) { animation: co-err-in 0.35s var(--zm-ease); }
@keyframes co-err-in { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: none; } }
.co-field.is-shake input, .co-field.is-shake textarea { animation: co-shake 0.4s var(--zm-ease); }
@keyframes co-shake { 20%, 60% { translate: -4px 0; } 40%, 80% { translate: 4px 0; } }

/* ----- Send ----- */
.co-submit svg { transition: transform var(--dur) var(--ease); }
.co-submit:hover { background: #f04a0e; transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(255, 91, 31, 0.95); }
.co-submit:hover svg { transform: translate(2px, -2px); }
.co-submit:active { transform: translateY(0) scale(0.98); }
.co-submit[aria-busy="true"] svg { animation: co-spin 0.9s linear infinite; }
@keyframes co-spin { to { rotate: 360deg; } }
.co-status:not([hidden]) { animation: co-status-in 0.45s var(--zm-ease); }
@keyframes co-status-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: none; } }
.co-status__actions button, .co-status__actions a { transition: border-color 0.25s var(--zm-ease), color 0.25s var(--zm-ease); }
.co-status__actions button:hover, .co-status__actions a:hover { border-color: rgba(124, 58, 237, 0.4); color: var(--purple-soft); }


@media (prefers-reduced-motion: reduce) {
  .co-err:not([hidden]), .co-status:not([hidden]), .co-field.is-shake input, .co-field.is-shake textarea { animation: none; }
  .co-submit[aria-busy="true"] svg { animation: none; }
}

/* ==========================================================================
   Motion — uses the shared reveal system; these are the extras
   ========================================================================== */
html.zm-js .sd-hero__watermark[data-zm-in] { --zm-rd: 1.6s; }

/* icons draw themselves in once their card is visible */
.sd-draw [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--zm-ease) 0.25s; }
.is-visible .sd-draw [pathLength], .is-visible.sd-draw [pathLength],
html:not(.zm-js) .sd-draw [pathLength] { stroke-dashoffset: 0; }

.sd-icon { transition: transform 0.45s var(--zm-ease), background-color 0.3s var(--zm-ease), border-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease); }
.sd-feature h3 { transition: color 0.3s var(--zm-ease); }
.sd-feature:hover h3 { color: var(--purple-soft); }
.sd-feature:hover .sd-icon { transform: rotate(-6deg); background: var(--orange); border-color: var(--orange); color: var(--white); }

.sd-chips li { transition: border-color 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease), translate 0.3s var(--zm-ease); }
.sd-chips li:hover { border-color: rgba(255, 103, 40, 0.45); background: rgba(255, 103, 40, 0.08); translate: 0 -2px; }

/* laptop CTA opens from its lid bar */
html.zm-js .sd-laptop[data-reveal] { --zm-rd: 1.1s; }
html.zm-js .sd-laptop[data-reveal]:not(.is-visible) { transform: none; opacity: 1; clip-path: inset(0 0 100% 0 round 12px); }
html.zm-js .sd-laptop[data-reveal].is-visible { clip-path: inset(0 0 0 0 round 12px); }

/* terminal: the command types out, then the output line, then a blinking caret.
   Each line carries --n (its length in characters) so the mono text types to its own width. */
.sd-term__cmd, .sd-term__out { overflow: hidden; white-space: nowrap; width: calc(var(--n, 40) * 1ch + 2px); max-width: 100%; }
html.zm-js .sd-term .sd-term__cmd,
html.zm-js .sd-term .sd-term__out { width: 0; }
html.zm-js .sd-term.is-visible .sd-term__cmd { animation: sd-type 1.1s steps(var(--n, 40), end) 0.5s forwards; }
html.zm-js .sd-term.is-visible .sd-term__out { animation: sd-type 1.3s steps(var(--n, 40), end) 1.8s forwards; }
@keyframes sd-type { from { width: 0; } to { width: calc(var(--n, 40) * 1ch + 2px); } }
.sd-term__caret {
  display: inline-block;
  width: 9px;
  height: 17px;
  margin-left: 6px;
  vertical-align: -3px;
  background: var(--orange);
  animation: sd-caret 1.05s steps(1) infinite;
}
@keyframes sd-caret { 50% { opacity: 0; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 900px) {
  .sd-features { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .sd-page > .sd-section { padding-top: 88px; }
  .sd-page > .sd-band, .sd-page > .sd-section.sd-dark { margin-top: 88px; padding-block: 88px; }
  .sd-page > .sd-band + .sd-section,
  .sd-page > .sd-dark + .sd-section { padding-top: 88px; }
  .sd-page > .sd-section:last-child { padding-bottom: 88px; }
  .sd-hero { padding: 120px 20px 72px; }
  .sd-hero__watermark { top: 76px; }
  .sd-hero__title { letter-spacing: -1.2px; }
  .sd-head { margin-bottom: 40px; }
  .sd-head .section-sub { font-size: 16px; line-height: 25px; }
  .sd-marquee { height: 54px; }
  .sd-marquee__item { font-size: 17px; letter-spacing: 2.6px; padding-right: 36px; }
  .sd-marquee__item i { margin-left: 36px; }
  .sd-laptop__inner { padding: 44px 22px 34px; }
  .sd-laptop__sub { font-size: 16px; line-height: 25px; }
  .sd-term { font-size: 11.5px; line-height: 20px; }
}
@media (max-width: 480px) {
  .sd-pill { white-space: normal; height: auto; text-align: center; }
  .sd-laptop__meta { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sd-marquee__track { animation: none; }
  .sd-draw [pathLength] { stroke-dashoffset: 0 !important; transition: none; }
  html.zm-js .sd-term .sd-term__cmd, html.zm-js .sd-term .sd-term__out { width: calc(var(--n, 40) * 1ch + 2px) !important; animation: none !important; }
  .sd-term__caret { animation: none; }
  html.zm-js .sd-laptop[data-reveal] { clip-path: none !important; }
}

/* ===== case studies: shared template (cs-*) ===== */
/* ==========================================================================
   Zemotify — Case study template (Figma "Case Study Detail Page", 1440x8362)
   One template for every success story; built on styles.css and the
   service-detail shared layer (sd-*, co-* form). Classes are prefixed cs-.
   ========================================================================== */

.page-case #main { background: #fbf9f7; }
.cs-h2 { font-size: clamp(22px, 2vw, 26px); line-height: 1.3; font-weight: 600; letter-spacing: -0.5px; }
.cs-h2 em, .cs-sub h3 em, .cs-partner__title em, .cs-form__title em { font-style: normal; color: #6a1fe0; }
.cs-form__title em { color: var(--orange); }
.cs-lead { margin-top: 12px; font-size: 16.5px; line-height: 27px; color: var(--text-muted); max-width: 720px; }

/* ----- Hero ----- */
.cs-hero { padding: 112px 0 0; }
.cs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; line-height: 20px; color: var(--text-muted); }
.cs-crumbs a { display: inline-flex; align-items: center; gap: 4px; color: #2a2a2e; font-weight: 600; }
.cs-crumbs a svg { width: 15px; height: 15px; }
.cs-crumbs [aria-current] { color: #131316; }
.cs-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 5px 16px;
  border-radius: 999px;
  background: #ece2ff;
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #4b14b8;
}
.cs-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot, #6a1fe0); }
.cs-hero__title {
  max-width: 760px;
  margin-top: 22px;
  font-size: clamp(34px, 3.9vw, 56px);
  line-height: 1.12;
  letter-spacing: -1.8px;
  font-weight: 600;
  color: #131316;
}
.cs-hero__title mark {
  background: linear-gradient(90deg, #7c3aed, #5a2bff) 0 100% / 100% 4px no-repeat;
  color: #6a1fe0;
  padding-bottom: 2px;
}
.cs-hero__sub { max-width: 680px; margin-top: 22px; font-size: 18px; line-height: 29px; color: var(--text-muted); }

.cs-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
.cs-metric {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 26px;
  border: 1px solid #efe9e4;
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 18px 40px -32px rgba(19, 19, 22, 0.25);
}
.cs-metric__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cs-metric__label { font-size: 11.5px; line-height: 18px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #2a2a2e; }
.cs-metric__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #ece2ff; color: #6a1fe0; }
.cs-metric__icon svg { width: 16px; height: 16px; }
.cs-metric__num { margin-top: 26px; font-size: clamp(30px, 2.6vw, 38px); line-height: 1.1; font-weight: 600; letter-spacing: -1px; color: #131316; white-space: nowrap; }
.cs-metric p { margin-top: 10px; font-size: 13.5px; line-height: 21px; color: var(--text-muted); }

.cs-facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.cs-facts li { padding: 9px 16px; border: 1px solid #efe9e4; border-radius: 12px; background: var(--white); font-size: 15px; line-height: 22px; font-weight: 600; }
.cs-facts span { display: block; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }

.cs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: end; }
.cs-hero__copy { min-width: 0; }
.cs-hero__media {
  position: relative;
  margin: 0;
  aspect-ratio: 512 / 352;
  border-radius: 22px;
  overflow: hidden;
  background: #ebe6e0;
  box-shadow: 0 40px 80px -46px rgba(19, 19, 22, 0.55);
  --zm-radius: 22px;
}
.cs-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.cs-hero__media figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12.5px;
  font-weight: 600;
  color: #131316;
}
.cs-hero__media figcaption i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }

/* ----- Story layout: reading column + sticky aside ----- */
.cs-body { padding: 96px 0 40px; border-top: 1px solid #efe9e4; margin-top: 80px; }
.cs-layout { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 64px; align-items: start; }
.cs-main { min-width: 0; max-width: 780px; }
.cs-sec + .cs-sec { margin-top: 72px; }
.cs-sec { scroll-margin-top: 110px; }

.cs-glance {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 32px;
  margin-top: 20px;
  padding: 32px;
  border-radius: 24px;
  background: #f3efeb;
}
.cs-glance__facts { display: grid; gap: 22px; padding-right: 28px; border-right: 1px solid #ded7cf; align-content: start; }
.cs-glance__facts dt { font-size: 12.5px; line-height: 18px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #55545a; }
.cs-glance__facts dd { margin-top: 8px; font-size: 15.5px; line-height: 23px; font-weight: 600; color: #131316; }
.cs-client { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.cs-client__mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: linear-gradient(135deg, #7c3aed, #5a2bff); color: var(--white); font-size: 13px; }
.cs-client small { flex-basis: 100%; font-size: 13px; font-weight: 500; color: var(--text-muted); }
.cs-dots { display: flex; flex-wrap: wrap; gap: 4px 0; font-weight: 500; }
.cs-dots li:not(:last-child)::after { content: "•"; margin: 0 8px; color: #b0aaa2; }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-chips li { padding: 6px 13px; border-radius: 999px; background: var(--white); font-size: 13.5px; line-height: 20px; font-weight: 600; }
.cs-glance__text p { font-size: 15.5px; line-height: 26px; color: #26262b; }
.cs-glance__text p + p { margin-top: 16px; color: var(--text-muted); }

.cs-prose { margin-top: 16px; }
.cs-prose p { font-size: 16.5px; line-height: 28px; color: #3d4452; }
.cs-prose p + p { margin-top: 18px; }

.cs-challenges { display: grid; gap: 14px; margin-top: 24px; }
.cs-challenge {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 26px 26px 20px;
  border-radius: 18px;
  background: #f3efeb;
}
.cs-challenge__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--white); color: #6a1fe0; }
.cs-challenge__icon svg { width: 18px; height: 18px; }
.cs-challenge h3 { font-size: 17.5px; line-height: 25px; font-weight: 600; }
.cs-challenge p { margin-top: 6px; font-size: 15px; line-height: 25px; color: var(--text-muted); }

.cs-sub { margin-top: 34px; }
.cs-sub h3 { font-size: 18.5px; line-height: 26px; font-weight: 600; }
.cs-sub p { margin-top: 8px; font-size: 16px; line-height: 27px; color: var(--text-muted); }

.cs-bp {
  margin-top: 40px;
  padding: 40px;
  border-radius: 28px;
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(255, 91, 31, 0.18), transparent 60%),
    radial-gradient(60% 70% at 0% 100%, rgba(90, 43, 255, 0.28), transparent 62%),
    #0b0b0c;
  color: var(--white);
  box-shadow: 0 40px 80px -50px rgba(19, 19, 22, 0.6);
}
.cs-bp__kicker { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #b9a2ff; }
.cs-bp__title { margin-top: 8px; font-size: 20px; line-height: 28px; font-weight: 600; }
.cs-bp__sub { margin-top: 6px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 15px; line-height: 24px; color: rgba(255, 255, 255, 0.72); }
.cs-bp__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.cs-bp__card { padding: 18px 18px 22px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.05); }
.cs-bp__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--orange); color: var(--white); }
.cs-bp__icon svg { width: 17px; height: 17px; }
.cs-bp__card h3 { margin-top: 16px; font-size: 16px; line-height: 23px; font-weight: 600; }
.cs-bp__card p { margin-top: 6px; font-size: 13.5px; line-height: 21px; color: rgba(255, 255, 255, 0.7); }

.cs-outcomes { display: grid; gap: 14px; margin-top: 24px; }
.cs-outcomes li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.cs-tick { width: 20px; height: 20px; margin-top: 3px; color: #6a1fe0; }
.cs-outcomes p { font-size: 16px; line-height: 26px; color: #3d4452; }
.cs-outcomes b { font-weight: 600; color: #131316; }
.cs-ostats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 34px; }
.cs-ostat { padding: 24px; border-radius: 16px; background: var(--white); border: 1px solid #efe9e4; }
.cs-ostat strong { display: block; padding-bottom: 16px; border-bottom: 1px solid #ebe5df; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.6px; }
.cs-ostat:nth-child(2) strong { color: #6a1fe0; }
.cs-ostat p { margin-top: 14px; font-size: 15px; line-height: 23px; color: #3d4452; }

.cs-tech { margin-top: 22px; padding: 12px 32px; border-radius: 24px; background: #f3efeb; }
.cs-tech table { width: 100%; border-collapse: collapse; }
.cs-tech tr + tr { border-top: 1px solid #e2dbd3; }
.cs-tech th, .cs-tech td { padding: 18px 0; vertical-align: top; text-align: left; }
.cs-tech th { width: 190px; padding-right: 20px; font-size: 15.5px; line-height: 23px; font-weight: 600; color: #131316; }
.cs-tech td { font-size: 15px; line-height: 23px; color: #3d4452; }

.cs-pending {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  margin-top: 20px;
  padding: 28px;
  border: 1px dashed #d9d0f5;
  border-radius: 20px;
  background: #f8f5ff;
}
.cs-pending__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #ece2ff; color: #6a1fe0; }
.cs-pending__icon svg { width: 21px; height: 21px; }
.cs-pending h3 { font-size: 18.5px; line-height: 26px; font-weight: 600; }
.cs-pending p { margin-top: 8px; font-size: 15.5px; line-height: 25px; color: var(--text-muted); }
.cs-pending__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; font-weight: 600; color: #6a1fe0; }

/* ----- Aside ----- */
.cs-aside { position: sticky; top: 104px; }
.cs-aside__card { padding: 24px; border-radius: 24px; background: var(--white); box-shadow: 0 30px 60px -44px rgba(19, 19, 22, 0.35); border: 1px solid #f0ebe6; }
.cs-toc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; }
.cs-toc__head h2 { font-size: 16px; line-height: 22px; font-weight: 600; }
.cs-share { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 15px; font-weight: 600; color: #6a1fe0; cursor: pointer; }
.cs-share svg { width: 15px; height: 15px; }
.cs-share:focus-visible { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 2px; }
.cs-toc__progress { height: 2px; border-radius: 2px; background: #efe9e4; overflow: hidden; }
.cs-toc__progress i { display: block; height: 100%; background: linear-gradient(90deg, #ff5b1f, #5a2bff); transform: scaleX(0); transform-origin: left; }
.cs-toc ol { display: grid; gap: 2px; margin-top: 14px; }
.cs-toc a {
  position: relative;
  display: block;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: #55545a;
}
.cs-toc a:focus-visible { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 1px; }
.cs-toc a.is-current { color: #131316; font-weight: 600; background: #f6f2ff; }
.cs-toc a.is-current::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: #6a1fe0; }

.cs-team { margin-top: 18px; padding: 18px 16px 16px; border-radius: 16px; background: #f5f1ed; }
.cs-team h3 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: #6a1fe0; }
.cs-team h3 span { font-size: 12px; letter-spacing: 0.4px; text-transform: none; color: var(--text-muted); font-weight: 500; }
.cs-team ul { display: grid; gap: 8px; margin-top: 14px; }
.cs-team li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; line-height: 21px; color: #26262b; }
.cs-team b { font-weight: 600; }
.cs-team__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding: 13px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #6a1fe0, #5a2bff);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 16px 30px -18px rgba(90, 43, 255, 0.9);
}

/* ----- More case studies ----- */
.cs-more { padding: 72px 0 96px; }
.cs-more__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.cs-more__all { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: #131316; }
.cs-more__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
.cs-more__card { position: relative; overflow: hidden; border: 1px solid #efe9e4; border-radius: 18px; background: var(--white); }
.cs-more__card figure { position: relative; height: 180px; overflow: hidden; background: #ebe6e0; }
.cs-more__card img { width: 100%; height: 100%; object-fit: cover; }
.cs-more__cat { position: absolute; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); font-size: 12px; font-weight: 600; }
.cs-more__cat i { width: 7px; height: 7px; border-radius: 50%; background: var(--dot); }
.cs-more__card > div { padding: 18px 20px 22px; }
.cs-more__card h3 { font-size: 19px; line-height: 26px; font-weight: 600; }
.cs-more__card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cs-more__card h3 a:focus-visible { outline: none; }
.cs-more__card:has(a:focus-visible) { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 3px; }
.cs-more__card p { margin-top: 4px; font-size: 14px; line-height: 21px; color: var(--text-muted); }
.cs-more__go { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 14px; font-weight: 600; color: #6a1fe0; }

/* ----- Partnership + enquiry ----- */
.cs-partner { padding: 110px 0; background: #f3efeb; }
.cs-partner__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.cs-kicker { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 2.4px; text-transform: uppercase; color: #6a1fe0; }
.cs-partner__title { margin-top: 10px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.25; font-weight: 600; letter-spacing: -0.6px; }
.cs-partner__sub { margin-top: 14px; max-width: 520px; font-size: 16px; line-height: 26px; color: var(--text-muted); }
.cs-steps { display: grid; gap: 22px; margin-top: 34px; }
.cs-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; }
.cs-steps li > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); font-size: 14px; font-weight: 600; color: #6a1fe0; box-shadow: 0 8px 18px -12px rgba(19, 19, 22, 0.4); }
.cs-steps h3 { font-size: 17px; line-height: 24px; font-weight: 600; }
.cs-steps p { margin-top: 4px; font-size: 15px; line-height: 24px; color: var(--text-muted); }
.cs-trusted { margin-top: 40px; padding-top: 26px; border-top: 1px solid #ddd5cc; }
.cs-trusted > span { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase; color: #3d4452; }
.cs-trusted ul { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; margin-top: 14px; }
.cs-trusted li { font-size: 17px; font-weight: 600; color: #55545a; }

.cs-form { padding: 36px 34px 30px; border-radius: 24px; background: var(--white); box-shadow: 0 40px 80px -50px rgba(19, 19, 22, 0.45); }
.cs-form__title { font-size: 20px; line-height: 28px; font-weight: 600; }
.cs-form__sub { margin-top: 6px; font-size: 15px; line-height: 24px; color: var(--text-muted); }
.cs-form .co-fields { margin-top: 22px; }
.cs-form .co-field textarea { min-height: 110px; }
.cs-check { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 21px; color: #26262b; cursor: pointer; }
.cs-check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: #6a1fe0; }
.cs-form__btn { display: flex; width: 100%; margin-top: 22px; justify-content: center; }
.cs-form__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 16px; font-size: 13.5px; line-height: 20px; color: #3d4452; }
.cs-form__meta li { display: inline-flex; align-items: center; gap: 6px; }
.cs-form__meta svg { width: 14px; height: 14px; color: #6a1fe0; }

/* ----- Closing CTA ----- */
.cs-cta { padding: 110px 0 120px; text-align: center; }
.cs-cta__title {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.15;
  letter-spacing: -1.8px;
  font-weight: 600;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 40%, #6929C4 70%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
.cs-cta__sub { max-width: 600px; margin: 18px auto 0; font-size: 18px; line-height: 28px; color: var(--text-muted); }
.cs-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.cs-cta__actions .btn { padding: 16px 22px; font-size: 15.5px; }
.cs-cta__ghost { background: var(--white); border: 1px solid #e6e3dc; color: #131316; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .cs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .cs-hero__media { max-width: 560px; }
  .cs-layout { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .cs-main { max-width: none; }
  .cs-aside { position: static; order: -1; }
  .cs-aside__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
  .cs-toc__head, .cs-toc__progress, .cs-toc { grid-column: 1; }
  .cs-team { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .cs-partner__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 860px) {
  .cs-glance { grid-template-columns: minmax(0, 1fr); padding: 24px; }
  .cs-glance__facts { padding-right: 0; padding-bottom: 24px; border-right: 0; border-bottom: 1px solid #ded7cf; }
  .cs-bp { padding: 28px 22px; }
  .cs-bp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-ostats { grid-template-columns: minmax(0, 1fr); }
  .cs-more__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-more__card { display: grid; grid-template-columns: 140px minmax(0, 1fr); }
  .cs-more__card figure { height: 100%; min-height: 140px; }
  .cs-aside__card { grid-template-columns: minmax(0, 1fr); }
  .cs-team { grid-column: 1; grid-row: auto; margin-top: 18px; }
}
@media (max-width: 640px) {
  .cs-hero { padding-top: 100px; }
  .cs-hero__title { letter-spacing: -1px; }
  .cs-hero__sub { font-size: 16.5px; line-height: 27px; }
  .cs-metrics { gap: 12px; margin-top: 32px; }
  .cs-metric { padding: 18px 16px 18px; }
  .cs-metric__num { margin-top: 18px; font-size: 26px; }
  .cs-body { padding-top: 64px; margin-top: 56px; }
  .cs-sec + .cs-sec { margin-top: 56px; }
  .cs-challenge { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
  .cs-bp__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-tech { padding: 6px 20px; }
  .cs-tech th, .cs-tech td { display: block; width: auto; padding: 0; }
  .cs-tech th { padding-top: 16px; }
  .cs-tech td { padding: 4px 0 16px; }
  .cs-more__card { grid-template-columns: minmax(0, 1fr); }
  .cs-more__card figure { height: 160px; }
  .cs-partner { padding: 80px 0; }
  .cs-form { padding: 26px 18px 22px; }
  .cs-pending { grid-template-columns: minmax(0, 1fr); padding: 22px; }
}

/* ---------- provisional write-ups (illustrative content, clearly labelled) ---------- */
.cs-provisional {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 20px 22px; margin: 32px 0 56px;
  border: 1px dashed #d9c9ff; border-radius: 16px; background: #f8f4ff;
}
.cs-provisional__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #ece2ff; color: #6a1fe0; }
.cs-provisional__icon svg { width: 20px; height: 20px; }
.cs-provisional h2 { font-size: 15px; line-height: 22px; font-weight: 600; color: #131316; }
.cs-provisional p { margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--text-muted); }
.cs-ostat--pending strong { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #a6a7ab !important; }
.cs-ostat--pending em { font-style: normal; font-size: 11.5px; line-height: 16px; letter-spacing: 0.4px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #f4efff; color: #6a1fe0; white-space: nowrap; }
.cs-facts__status { border-style: dashed !important; border-color: #d9c9ff !important; background: #f8f4ff !important; color: #6a1fe0; }
@media (max-width: 640px) { .cs-provisional { grid-template-columns: minmax(0, 1fr); padding: 18px; } }

/* ==========================================================================
   Zemotify — Case study motion layer
   Story-first: the headline settles in, results count up, the hero image
   opens like the About visuals and drifts slightly, sections read in order
   with the table of contents following along, and every card that leads
   somewhere answers the pointer.
   ========================================================================== */

/* hero: highlighted figures draw their underline after the headline lands */
.cs-hero__title mark { transition: background-size 0.9s var(--zm-ease) 0.7s; }
html.zm-js .cs-hero__title:not(.is-visible) mark { background-size: 0% 4px; }

.cs-metric { transition: transform var(--dur) var(--ease), box-shadow 0.4s var(--zm-ease), border-color 0.4s var(--zm-ease); }
.cs-metric[data-reveal]:hover { transform: translateY(-4px); }
.cs-metric:hover { border-color: rgba(106, 31, 224, 0.25); box-shadow: 0 26px 50px -30px rgba(90, 43, 255, 0.35); }
.cs-metric__icon { transition: transform 0.45s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease); }
.cs-metric:hover .cs-metric__icon { transform: rotate(-8deg); background: #6a1fe0; color: var(--white); }

/* crumbs */
.cs-crumbs a { transition: color 0.3s var(--zm-ease); }
.cs-crumbs a svg { transition: transform 0.3s var(--zm-ease); }
.cs-crumbs a:hover { color: #6a1fe0; }
.cs-crumbs a:hover svg { transform: translateX(-3px); }

/* challenges: icons draw in; a soft lift on hover */
.cs-challenge { transition: background-color 0.35s var(--zm-ease), transform var(--dur) var(--ease); }
.cs-challenge:hover { background: #efe9e3; }
.cs-challenge[data-reveal]:hover { transform: translateX(4px); }
.cs-challenge__icon { transition: transform 0.45s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease); }
.cs-challenge:hover .cs-challenge__icon { transform: rotate(-8deg); background: #6a1fe0; color: var(--white); }

/* blueprint cards cascade after the panel opens */
.cs-bp__card { transition: transform var(--dur) var(--ease), border-color 0.4s var(--zm-ease), background-color 0.4s var(--zm-ease); }
.cs-bp__card[data-reveal]:hover { transform: translateY(-4px); }
.cs-bp__card:hover { border-color: rgba(255, 91, 31, 0.45); background: rgba(255, 255, 255, 0.08); }
.cs-bp__icon { transition: transform 0.45s var(--zm-ease); }
.cs-bp__card:hover .cs-bp__icon { transform: rotate(-8deg) scale(1.05); }

/* outcome ticks draw */
.cs-tick [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--zm-ease) 0.25s; }
.is-visible > .cs-tick [pathLength], html:not(.zm-js) .cs-tick [pathLength] { stroke-dashoffset: 0; }
.cs-ostat { transition: transform var(--dur) var(--ease), box-shadow 0.4s var(--zm-ease); }
.cs-ostat[data-reveal]:hover { transform: translateY(-4px); }
.cs-ostat:hover { box-shadow: 0 26px 50px -34px rgba(19, 19, 22, 0.35); }

.cs-tech tr { transition: background-color 0.3s var(--zm-ease); }
.cs-tech tbody tr:hover th { color: #6a1fe0; }
.cs-tech th { transition: color 0.3s var(--zm-ease); }

/* aside */
.cs-toc a { transition: background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease); }
.cs-toc a:hover { background: #faf7f3; color: #131316; }
.cs-toc__progress i { transition: transform 0.12s linear; }
.cs-share { transition: background-color 0.3s var(--zm-ease); }
.cs-share:hover { background: #f4efff; }
.cs-team__btn svg, .cs-pending__link svg, .cs-more__go svg, .cs-more__all svg { transition: transform var(--dur) var(--ease); }
.cs-team__btn { transition: box-shadow 0.3s var(--zm-ease), transform 0.3s var(--zm-ease); }
.cs-team__btn:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -18px rgba(90, 43, 255, 1); }
.cs-team__btn:hover svg, .cs-pending__link:hover svg, .cs-more__all:hover svg, .cs-more__card:hover .cs-more__go svg { transform: translate(2px, -2px); }

/* more case studies */
.cs-more__card { transition: transform var(--dur) var(--ease), box-shadow 0.4s var(--zm-ease); }
.cs-more__card[data-reveal]:hover { transform: translateY(-6px); }
.cs-more__card:hover { box-shadow: 0 30px 60px -40px rgba(19, 19, 22, 0.45); }
.cs-more__card img { transition: transform 0.9s var(--zm-ease); }
.cs-more__card:hover img { transform: scale(1.05); }
.cs-more__card h3 { transition: color 0.3s var(--zm-ease); }
.cs-more__card:hover h3 { color: #6a1fe0; }

/* partnership steps */
.cs-steps li > span { transition: background-color 0.35s var(--zm-ease), color 0.35s var(--zm-ease), transform 0.35s var(--zm-ease); }
.cs-steps li:hover > span { background: #6a1fe0; color: var(--white); transform: scale(1.06); }
.cs-trusted li { transition: color 0.3s var(--zm-ease); }
.cs-trusted li:hover { color: #131316; }
.cs-cta__ghost:hover { border-color: #131316; }

@media (prefers-reduced-motion: reduce) {
  html.zm-js .cs-hero__title mark { background-size: 100% 4px !important; transition: none; }
  .cs-tick [pathLength] { stroke-dashoffset: 0 !important; }
}

/* ===== about: page design layer (scoped to body.page-about) ===== */
/* ==========================================================================
   Zemotify — About page (Figma node 569:5915, 1440px canvas)
   Layered on top of styles.css; Syne-only typography, shared tokens.
   ========================================================================== */
/* ----- Shared About rhythm: 120px gaps between sections (design auto-layout) ----- */
:where(body.page-about) #main > .section { padding-block: 0; }
:where(body.page-about) #main > .section + .section,
:where(body.page-about) .ab-hero + .section { margin-top: 120px; }
:where(body.page-about) #main > .cta { padding-bottom: 120px; }
:where(body.page-about) .cta .section-head { margin-bottom: 0; }
/* Kill inline-block leading so badges sit flush at the design's y-offsets */
:where(body).page-about .section-head { line-height: 0; }
:where(body).page-about .section-head .badge { line-height: 18px; }
:where(body).page-about .section-head .section-title { margin-top: 12px; line-height: 44px; }
:where(body).page-about .section-head .section-sub { margin-top: 12px; }
:where(body.page-about) .cta .section-sub { margin-top: 22px; }
:where(body.page-about) .cta .cta__actions { margin-top: 32px; }
:where(body).page-about .section-head .badge { padding: 6px 16px; line-height: 18px; }
/* Dark panels: 28px side gutters, 12px radius (design Container 1384x956 r=12) */
:where(body).page-about .panel--dark {
  border-radius: 12px;
}
/* ----- Badges / buttons used only here ----- */
:where(body.page-about) .badge--dark {
  background: var(--bg);
  color: var(--text-white);
  padding: 6px 16px;
  line-height: 18px;
}
:where(body.page-about) .btn--ghost-light {
  background: var(--white);
  border: 1px solid rgba(11, 11, 11, 0.12);
  color: var(--text);
  font-size: 16px;
  line-height: 20px;
  padding: 16px 30px;
  box-shadow: 0 10px 26px rgba(11, 11, 13, 0.06);
}
:where(body.page-about) .btn--ghost-light:hover { box-shadow: 0 14px 32px rgba(11, 11, 13, 0.36); }
/* ==========================================================================
   Hero
   ========================================================================== */
:where(body.page-about) .ab-hero {
  position: relative;
  padding: 126px 24px 68px;
  text-align: center;
  overflow: hidden;
  background: var(--cream);
}
/* Giant watermark behind the hero (Figma: Syne 273px, ls -10.9,
   linear-gradient #0B0B0C 6.7% → transparent, top → bottom) */
:where(body.page-about) .ab-hero__watermark {
  position: absolute;
  top: 125px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(120px, 19vw, 273px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.067) 0%, rgba(11, 11, 12, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
:where(body.page-about) .ab-hero__inner { position: relative; }
:where(body.page-about) .ab-hero__title {
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  margin-top: 22px;
  /* fit-content keeps the .text-gradient-purple ramp sized to the glyphs,
     matching the design's 574px-wide text box */
  display: block;
  width: fit-content;
  margin-inline: auto;
}
:where(body.page-about) .ab-hero__sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 625px;
  margin: 22px auto 0;
}
/* Stats row with gradient hairline dividers */
:where(body.page-about) .ab-stats {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin-top: 32px;
}
:where(body.page-about) .ab-stat { min-width: 120px; padding: 16px 8px; }
:where(body.page-about) .ab-stat__num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 34px;
  line-height: 44px;
  letter-spacing: -1.2px;
  /* Figma: linear-gradient #0B0B0C 0% → #6929C4 41% → #5A2BFF 100% */
  display: inline-block;
  background: linear-gradient(90deg, #0B0B0C 0%, #6929C4 41%, #5A2BFF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:where(body.page-about) .ab-stat__label {
  font-size: 12px;
  line-height: 20px;
  color: var(--text-muted);
  margin-top: 5px;
}
:where(body.page-about) .ab-stats__divider {
  width: 1px;
  height: 58px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.54) 54%, rgba(0, 0, 0, 0) 100%);
}
/* ==========================================================================
   Identity (dark panel)
   ========================================================================== */
:where(body.page-about) .ab-identity {
  display: grid;
  grid-template-columns: 304px 1fr;
  gap: 100px;
  padding: 58.5px 92px;
  align-items: start;
}
:where(body.page-about) .ab-identity__aside { padding-top: 29px; }
:where(body.page-about) .ab-identity__aside .badge--outline {
  border-color: #e6e3dc;
  color: #e6e3dc;
  padding: 6px 16px;
  line-height: 18px;
}
:where(body.page-about) .ab-identity__title {
  font-size: 34px;
  line-height: 44px;
  letter-spacing: -1.2px;
  color: var(--text-white);
  margin-top: 17px;
}
:where(body.page-about) .ab-identity__text {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-white);
  margin-top: 17px;
}
:where(body.page-about) .ab-item {
  display: grid;
  grid-template-columns: 111px 1fr;
  gap: 57px;
  align-items: center;
  padding: 44px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
:where(body.page-about) .ab-item:first-child { border-top: 0; }
:where(body.page-about) .ab-item__num {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 78px;
  line-height: 96px;
  letter-spacing: -2.71px;
  display: inline-block;
  margin: -21px 0 0 0;
}
/* 02–04: white → 15% white vertical fade (Figma gradient) */
:where(body.page-about) .ab-item__num--fade {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.15) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:where(body.page-about) .ab-item__body h3 {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: var(--text-white);
}
:where(body.page-about) .ab-item__body p {
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 18px;
}
/* ==========================================================================
   Vision & Mission
   ========================================================================== */
:where(body.page-about) .ab-vm .section-head { margin-bottom: 59px; }
:where(body.page-about) .ab-vm-card {
  background: var(--white);
  border: 1px solid rgba(11, 11, 11, 0.08);
  border-radius: 12px;
  padding: 32px 30px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(body.page-about) .ab-vm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(19, 19, 22, 0.08);
}
:where(body.page-about) .ab-vm-card__icon { width: 32px; height: 32px; }
:where(body.page-about) .ab-vm-card__label {
  font-size: 12px !important;
  line-height: 26px !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: #c2410c !important;
  margin-top: 12px !important;
  font-family: var(--font-head) !important;
}
:where(body.page-about) .ab-vm-card h3 {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: var(--text);
  margin-top: 15px;
}
:where(body.page-about) .ab-vm-card > p {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-muted);
  margin-top: 12px;
}
/* ==========================================================================
   Our Values
   ========================================================================== */
:where(body.page-about) .ab-values {
  background: var(--white);
  padding-block: 100px !important;
  margin-top: 120px !important;
}
:where(body.page-about) .ab-values .section-head { margin-bottom: 55px; }
:where(body.page-about) #values .section-head .section-sub {
    margin-top: 19px;
}
:where(body.page-about) .ab-value-card {
  background: var(--cream);
  border-radius: 12px;
  padding: 32px 30px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(body.page-about) .ab-value-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(19, 19, 22, 0.07);
}
:where(body.page-about) .ab-value-card h3 {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: var(--text);
}
:where(body.page-about) .ab-value-card p {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-muted);
  margin-top: 10px;
}
/* ==========================================================================
   Meet The Team
   ========================================================================== */
:where(body.page-about) .ab-team .section-head { /*padding-top: 14px;*/ margin-bottom: 40px; }
:where(body.page-about) #team .section-title { margin-block: 17px; }
:where(body.page-about) .ab-team__grid { max-width: 1152px; margin-inline: auto; }
:where(body.page-about) #team .section-head {max-width: 775px;}
/* Diagonal-striped placeholder (Figma: #F6F5F1 / #EFEDE6 ramp at 45°) */
:where(body.page-about) .ab-member__photo {
  aspect-ratio: 1;
  border-radius: 12px;
  border: 1px dashed rgba(11, 11, 11, 0.28);
  background: repeating-linear-gradient(135deg, #f6f5f1 0 10px, #efede6 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
:where(body.page-about) .ab-member__photo span {
  font-size: 12px;
  line-height: 18px;
  color: #7a7770;
}
:where(body.page-about) .ab-member__name {
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  color: var(--text);
  margin-top: 16px;
}
:where(body.page-about) .ab-member__role {
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
}
:where(body.page-about) .ab-team__cta {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
/* ==========================================================================
   Founder (dark panel)
   ========================================================================== */
:where(body.page-about) .ab-founder {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 384px;
  gap: 134px;
  padding: 115px 92px;
  align-items: center;
}
:where(body.page-about) .ab-founder__content {
  padding-bottom: 20px;
}
:where(body.page-about) .ab-founder__quote-mark {
  position: absolute;
  top: 0;
  left: 0;
  width: 183px;
  height: 113px;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
:where(body.page-about) .ab-founder__wave {
  position: absolute;
  left: -208px;
  bottom: -58px;
  width: 459px;
  height: 557px;
  pointer-events: none;
}
:where(body.page-about) .ab-founder__label {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
}
:where(body.page-about) .ab-founder__quote {
  font-size: 26px;
  line-height: 40.3px;
  font-style: italic;
  font-weight: 400;
  color: var(--text-white);
  margin-top: 18px;
}
:where(body.page-about) .ab-founder__note {
  font-size: 18px;
  line-height: 26.4px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 22px;
}
:where(body.page-about) .ab-founder__person img {
  width: 384px;
  height: 402px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
:where(body.page-about) .ab-founder__name {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: var(--text-white);
  margin-top: 12px;
}
:where(body.page-about) .ab-founder__role {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: 8px;
}
/* ==========================================================================
   Life At Zemotify — photo fan + gallery
   ========================================================================== */
:where(body.page-about) .ab-life .section-head { margin-bottom: 55px; }
:where(body.page-about) #life .section-title {
    margin: 14px 0 17px;
}
:where(body.page-about) .ab-fan {
  position: relative;
  max-width: var(--page-max);
  margin-inline: auto;
  height: 1208px;
}
:where(body.page-about) .ab-fan__text {
  position: absolute;
  font-weight: 500;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  text-align: center;
  margin: 0;
}
:where(body.page-about) .ab-fan__text--1 {
  width: 721px;
  left: 50%;
  transform: translateX(-50%);
  top: 74px;
  color: var(--text-muted);
}
:where(body.page-about) .ab-fan__purple { color: #6800e4; }
:where(body.page-about) .ab-fan__text--2 {
  width: 778px;
  left: 50%;
  transform: translateX(-50%);
  top: 942px;
  color: var(--text-muted);
}
:where(body.page-about) .ab-fan__photo {
  position: absolute;
  border-radius: 10px;
  object-fit: cover;
}
:where(body.page-about) .ab-fan__photo--1 { width: 207px; height: 207px; right: 33px;  top: 0; }
:where(body.page-about) .ab-fan__photo--2 { width: 207px; height: 207px; left: 32px;   top: 106px; }
:where(body.page-about) .ab-fan__photo--3 { width: 124px; height: 124px; right: 33px;  top: 359px; }
:where(body.page-about) .ab-fan__photo--4 { width: 124px; height: 124px; left: 32px;   top: 532px; }
:where(body.page-about) .ab-fan__photo--group { width: 795px; height: 396px; left: 50%; transform: translateX(-50%); top: 446px; }
:where(body.page-about) .ab-fan__line {
  position: absolute;
  top: 842px;
  width: 1px;
  height: 100px;
  background: rgba(11, 11, 11, 0.16);
}
:where(body.page-about) .ab-fan__line--l { left: calc(50% - 316px + 82px); }
:where(body.page-about) .ab-fan__line--r { left: calc(50% + 316px - 82px); }
/* Gallery: JS-driven auto-scroll marquee (6 photos, 335x396, 17px gaps) */
:where(body.page-about) .ab-gallery-wrap {
  position: relative;
  margin-top: 70px;
  overflow: hidden;
}
:where(body.page-about) .ab-gallery {
  display: flex;
  gap: 17px;
  width: max-content;
}
:where(body.page-about) .ab-gallery img {
  width: 335px;
  height: 396px;
  object-fit: cover;
  border-radius: 10px;
  flex: none;
  user-select: none;
  -webkit-user-drag: none;
}
/* ==========================================================================
   Origins
   ========================================================================== */
:where(body.page-about) .ab-origins {
  background: var(--white);
  padding-block: 100px !important;
  margin-top: 120px !important;
}
:where(body.page-about) #origins .is-visible:first-child {
    padding: 0px 0 19px 24px;
}
:where(body.page-about) #origins .badge {
    padding: 5px 15px;
}
:where(body.page-about) .ab-origins__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
:where(body.page-about) .ab-origins .section-title {
  margin-top: 12px;
  font-size: 34px;
  line-height: 44px;
  letter-spacing: -1.2px;
  text-align: left;
}
:where(body.page-about) .ab-origins .section-sub {
  margin-top: 12px;
  font-size: 18px;
  line-height: 30px;
  text-align: left;
}
:where(body.page-about) .ab-origins__visual {
  aspect-ratio: 560 / 342;
}
/* ==========================================================================
   CTA
   ========================================================================== */
:where(body.page-about) .ab-cta__title {
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
}
:where(body.page-about) #cta .section-sub {
    margin-top: 22px;
}
/* About CTA buttons: Figma Link 148x56 / 194x56, pad 15/21, text 16/26 */
:where(body).page-about .cta .cta__actions { gap: 7px; }
:where(body).page-about .cta .btn {
  font-size: 16px;
  line-height: 26px;
  padding: 15px 21px;
  gap: 8px;
}
/* ==========================================================================
   Responsive — tablet
   ========================================================================== */
@media (max-width: 1180px) {
:where(body.page-about) .ab-identity { grid-template-columns: 1fr; gap: 56px; padding: 48px 40px; }
:where(body.page-about) .ab-identity__aside { padding-top: 0; }
:where(body.page-about) .ab-item { grid-template-columns: 84px 1fr; gap: 32px; padding: 36px 0; }
:where(body.page-about) .ab-item__num { font-size: 56px; line-height: 70px; letter-spacing: -2px; }
:where(body.page-about) .ab-founder { grid-template-columns: 1fr; gap: 56px; padding: 72px 48px; }
:where(body.page-about) .ab-founder__person img { width: 100%; height: auto; }
:where(body.page-about) .ab-fan__photo--3,
:where(body.page-about) .ab-fan__photo--4 { display: none; }
:where(body.page-about) .ab-fan__photo--1 { right: 24px; width: 160px; height: 160px; }
:where(body.page-about) .ab-fan__photo--2 { left: 24px; width: 160px; height: 160px; }
:where(body.page-about) .ab-fan__text--1 { width: min(721px, calc(100% - 380px)); }
:where(body.page-about) .ab-fan__text--2 { width: min(778px, calc(100% - 80px)); }
:where(body.page-about) .ab-fan__photo--group { width: min(795px, calc(100% - 80px)); }
:where(body.page-about) .ab-fan__line { display: none; }
}
/* ==========================================================================
   Responsive — mobile
   ========================================================================== */
@media (max-width: 767px) {
:where(body.page-about) #main > .section + .section,
:where(body.page-about) .ab-hero + .section { margin-top: 72px; }
:where(body.page-about) .ab-hero { padding: 120px 20px 48px; }
:where(body.page-about) .ab-hero__watermark { top: 96px; }
:where(body.page-about) .ab-hero__title { line-height: 1.16; }
:where(body.page-about) .ab-hero__sub { margin-top: 18px; }
:where(body.page-about) .ab-stats { flex-direction: column; gap: 28px; }
:where(body.page-about) .ab-stats__divider { display: none; }
:where(body.page-about) .ab-identity { padding: 36px 20px; }
:where(body.page-about) .ab-item { grid-template-columns: 1fr; gap: 8px; padding: 32px 0; }
:where(body.page-about) .ab-item__num { font-size: 48px; line-height: 60px; }
:where(body.page-about) .ab-item__body h3 { font-size: 22px; line-height: 30px; }
:where(body.page-about) .ab-values,
:where(body.page-about) .ab-origins { padding-block: 64px !important; }
:where(body.page-about) .ab-founder { padding: 48px 20px; }
:where(body.page-about) .ab-founder__quote { font-size: 20px; line-height: 32px; }
:where(body.page-about) .ab-founder__note { font-size: 16px; }
:where(body.page-about) .ab-founder__quote-mark { width: 120px; height: 74px; }
/* Fan collapses to a simple stacked column */
:where(body.page-about) .ab-fan { height: auto; display: flex; flex-direction: column; align-items: center; gap: 28px; padding-inline: 20px; }
:where(body.page-about) .ab-fan__text { position: static; width: 100%; transform: none; font-size: 20px; line-height: 30px; }
:where(body.page-about) .ab-fan__photo { position: static; width: min(100%, 420px); height: auto; transform: none; }
:where(body.page-about) .ab-fan__photo--1 { order: -1; }
:where(body.page-about) .ab-fan__photo--group { order: 1; width: 100%; }
:where(body.page-about) .ab-gallery img { width: 260px; height: 308px; }
:where(body.page-about) .ab-gallery-wrap { margin-top: 56px; }
:where(body.page-about) .ab-origins__grid { grid-template-columns: 1fr; gap: 40px; }
:where(body.page-about) .ab-cta__title { line-height: 1.16; }
}
/* ----- Reduced motion: gallery auto-scroll is skipped in js/about.js ----- */
/* ===== how-we-work: page design layer (scoped to body.page-hww) ===== */
/* ==========================================================================
   Zemotify — How We Work page (Figma node 388:5494, 1440px canvas)
   Layered on top of styles.css; Syne-only typography, shared tokens.
   ========================================================================== */
/* ----- Page rhythm: 120px gaps between sections (design auto-layout) ----- */
:where(body.page-hww) #main > .section { padding-block: 0; }
:where(body.page-hww) #main > .section + .section,
:where(body.page-hww) .hww-hero + .section { margin-top: 120px; }
:where(body.page-hww) #main > .cta {   margin-top: 120px 0 !important; padding-block: 0 65px; }
:where(body.page-hww) .cta .section-head { margin-bottom: 0; }
:where(body.page-hww) .cta .section-sub { margin-top: 22px; max-width: 471px; margin-inline: auto; }
:where(body.page-hww) .cta .cta__actions { margin-top: 32px; }
/* Kill inline-block leading so badges sit flush at the design's y-offsets */
:where(body).page-hww .section-head { line-height: 0; max-width: none; }
:where(body).page-hww .section-head .badge { line-height: 18px; }
:where(body).page-hww .section-head .section-title { margin-top: 17px; line-height: 44px; }
:where(body).page-hww .section-head .section-sub { margin-top: 17px; line-height: 28px; }
:where(body).page-hww .section-head { margin-bottom: 55px; }
:where(body.page-hww) .badge { padding: 6px 16px; }
:where(body.page-hww) .badge--dark {
  background: var(--bg);
  color: var(--text-white);
  padding: 6px 16px;
  line-height: 18px;
}
/* Design badges on light sections: white fill + #E6E3DC hairline */
:where(body).page-hww .badge--light {
  padding: 5px 16px;
  background: var(--white);
  border: 1px solid #e6e3dc;
  color: var(--text-muted);
}
/* Dark-section badges: fill hidden in design, #E6E3DC hairline only */
:where(body).page-hww .badge--outline {
  padding: 5px 16px;
  background: transparent;
  border: 1px solid rgba(230, 227, 220, 0.55);
  color: #e6e3dc;
}
/* Dark panels: 28px side gutters, 12px radius (design Container 1384xH r=12) */
:where(body).page-hww .section > .container:has(> .panel--dark) { padding-inline: 28px; }
:where(body).page-hww .panel--dark { border-radius: 12px; }
/* Design uses pure white for sub-copy on dark panels, not the muted token */
:where(body.page-hww) .section-sub--white { color: var(--white); }
/* Shared pill used by the model cards and the dark model rows */
:where(body.page-hww) .hww-pill {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 5px 16px;
  border-radius: var(--r-pill);
}
/* ==========================================================================
   Hero
   ========================================================================== */
:where(body.page-hww) .hww-hero {
  position: relative;
  padding: 122px 24px 104px;
  text-align: center;
  overflow: hidden;
  background: var(--cream);
}
/* Giant watermark behind the hero (Figma: Syne 273px, ls -10.93,
   linear-gradient #0B0B0C 7% → transparent, top → bottom) */
:where(body.page-hww) .hww-hero__watermark {
  position: absolute;
  top: 61px;
  left: -120px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(120px, 19vw, 273px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.067) 0%, rgba(11, 11, 12, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
:where(body.page-hww) .hww-hero__inner { position: relative; }
:where(body.page-hww) .hww-hero__title {
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  margin-top: 22px;
  display: block;
  width: fit-content;
  margin-inline: auto;
  /* Figma 388:5526 — 91deg ramp, black held to 30% then purple */
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-hww) .hww-hero__sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 551px;
  margin: 22px auto 0;
}
/* ==========================================================================
   Engagement Models
   ========================================================================== */
:where(body.page-hww) .hww-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
:where(body.page-hww) .hww-mcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  padding: 25px 33px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(body.page-hww) .hww-mcard:hover { transform: translateY(-6px); box-shadow: 0 26px 54px rgba(11, 11, 13, 0.1); }
:where(body.page-hww) .hww-mcard__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid #e6e3dc;
  color: #0b0b0c;
}
:where(body.page-hww) .hww-mcard__icon--grad {
  border: none;
  color: var(--white);
  background: linear-gradient(135deg, #FF5B1F 0%, #5A2BFF 100%);
  box-shadow: 0 10px 30px -10px rgba(255, 91, 31, 0.6);
}
:where(body.page-hww) .hww-mcard__title {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  margin-top: 22px;
  color: #0b0b0c;
}
:where(body.page-hww) .hww-mcard__rule {
  border: none;
  border-top: 1px solid rgba(11, 11, 12, 0.05);
  margin: 21px 0;
}
:where(body.page-hww) .hww-mcard__best {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: #0b0b0c;
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
:where(body.page-hww) .hww-mcard__text {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-muted);
  margin-top: 0;
}
:where(body.page-hww) .hww-mcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
:where(body.page-hww) .hww-mcard__tags li {
  padding: 2px 12px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.08);
  border: 0.5px solid #e6e3dc;
  color: #0b0b0c;
  font-size: 12px;
  line-height: 20px;
}
:where(body.page-hww) .hww-mcard__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin-top: 28px;
  padding: 14px 21px;
  border-radius: var(--r-pill);
  border: 1px solid #e6e3dc;
  background: var(--white);
  color: #0b0b0c;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.55);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(body.page-hww) .hww-mcard__btn svg { transition: transform var(--dur) var(--ease); }
:where(body.page-hww) .hww-mcard__btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(11, 11, 13, 0.36); }
:where(body.page-hww) .hww-mcard__btn:hover svg { transform: translate(3px, -3px); }
/* Featured card — dark panel with the two design radial glows */
:where(body.page-hww) .hww-mcard--dark {
  background:
    radial-gradient(65% 65% at 80% -10%, rgba(255, 91, 31, 0.18) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(65% 65% at 0% 100%, rgba(90, 43, 255, 0.22) 0%, rgba(0, 0, 0, 0) 60%),
    #0b0b0c;
  border-color: #e6e3dc;
}
:where(body.page-hww) .hww-mcard--dark .hww-mcard__title { color: var(--white); }
:where(body.page-hww) .hww-mcard--dark .hww-mcard__rule { border-top-color: rgba(255, 255, 255, 0.08); }
:where(body.page-hww) .hww-mcard--dark:hover { box-shadow: 0 26px 60px rgba(11, 11, 13, 0.45); }
:where(body.page-hww) .hww-mcard__popular {
  position: absolute;
  top: 11px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  background: rgba(214, 255, 61, 0.08);
  border: 1px solid rgba(214, 255, 61, 0.25);
  color: #d6ff3d;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
:where(body.page-hww) .hww-mcard__best--dark {
  background: rgba(255, 255, 255, 0.08);
  color: #e6e3dc;
}
:where(body.page-hww) .hww-mcard__text--dark { color: rgba(255, 255, 255, 0.8); }
:where(body.page-hww) .hww-mcard__tags--dark li {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.1);
  color: #e6e3dc;
}
:where(body.page-hww) .hww-mcard__btn--lime {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.16);
  color: #d6ff3e;
  box-shadow: none;
}
:where(body.page-hww) .hww-mcard__btn--lime:hover { background: #d6ff3e; color: #0b0b0c; box-shadow: 0 14px 32px rgba(11, 11, 13, 0.36); }
/* ==========================================================================
   What You Get From Day One (dark panel)
   ========================================================================== */
:where(body.page-hww) .hww-dayone { padding: 60px 131px; }
:where(body.page-hww) .hww-dayone .section-head { margin-bottom: 55px; }
:where(body.page-hww) .hww-dayone__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 0 55px;
}
:where(body.page-hww) .hww-dayone__item {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 22px;
}
:where(body.page-hww) .hww-dayone__item:nth-child(2),
:where(body.page-hww) .hww-dayone__item:nth-child(4) { margin-bottom: 0; }
:where(body.page-hww) .hww-dayone__item > div {
  padding-bottom: 22px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
:where(body.page-hww) .hww-dayone__item:nth-child(2) > div,
:where(body.page-hww) .hww-dayone__item:nth-child(4) > div { padding-bottom: 0; box-shadow: none; }
:where(body.page-hww) .hww-dayone__icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(255, 91, 31, 0.18) 0%, rgba(90, 43, 255, 0.18) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--white);
}
:where(body.page-hww) .hww-dayone__title {
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.1px;
  color: var(--white);
}
:where(body.page-hww) .hww-dayone__text {
  font-size: 15px;
  line-height: 24px;
  color: #bdbcb6;
  margin-top: 8px;
}
/* ==========================================================================
   The Strategic Advantage (comparison table)
   ========================================================================== */
:where(body.page-hww) .hww-cmp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 0 12px;
}
:where(body.page-hww) #how-we-work .section-title {
    margin-top: 18px;
}
:where(body.page-hww) #how-we-work .section-head {
    margin-bottom: 52px;
}
:where(body.page-hww) .hww-cmp__head {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 9px 28px;
  border: 1px solid #e6e3dc;
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: var(--white);
}
:where(body.page-hww) .hww-cmp__head--bad {
  background: #c83333;
  border-top-left-radius: 12px;
}
:where(body.page-hww) .hww-cmp__head--good {
  background: #00c277;
  border-top-right-radius: 12px;
}
:where(body.page-hww) .hww-cmp__cell {
  padding: 28px 20px 28px 28px;
  border: 1px solid #e6e3dc;
  margin-top: -1px;
}
:where(body.page-hww) .hww-cmp__cell--bad {
  background: rgba(0, 0, 0, 0.03);
  border-color: #d7d7d7;
}
:where(body.page-hww) .hww-cmp__cell--good { background: var(--white); }
:where(body.page-hww) .hww-cmp__cell--last { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
:where(body.page-hww) .hww-cmp__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
:where(body.page-hww) .hww-cmp__icon--bad {
  background: linear-gradient(135deg, #FFF0F0 0%, #FDE0E0 100%);
  border: 1px solid rgba(200, 51, 51, 0.18);
  color: #c83333;
}
:where(body.page-hww) .hww-cmp__icon--good {
  background: linear-gradient(135deg, rgba(10, 180, 100, 0.12) 0%, rgba(10, 180, 100, 0.3) 100%);
  border: 1px solid rgba(10, 180, 100, 0.18);
  color: #00c277;
}
:where(body.page-hww) .hww-cmp__title {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: #0b0b0c;
  margin-top: 18px;
}
:where(body.page-hww) .hww-cmp__text {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-muted);
  margin-top: 6px;
}
/* ==========================================================================
   How We Work — dark panel with the three model rows
   ========================================================================== */
:where(body.page-hww) .hww-models--dark { padding: 89px 87px 190px; }
:where(body.page-hww) .hww-models--dark .section-head { margin-bottom: 55px; }
:where(body.page-hww) .hww-mrow { position: relative; display: flex; flex-direction: column; gap: 55px; }
/* Centre spine: hairline gradient plus the lime segment at its head.
   The lime segment is the scroll progress head: --axis-p (0-1, set by main.js) is
   the fraction of the row stack that has passed the viewport mid-line, so the fill
   starts when the section top reaches half the screen and reaches the full spine
   length when its bottom does. It starts at the design's 110.86px head. */
:where(body.page-hww) .hww-mrow__axis {
  position: absolute;
  top: 0;
  bottom: -3px;
  left: 49.3%;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.12) 12%, rgba(255, 255, 255, 0.12) 88%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}
:where(body.page-hww) .hww-mrow__axis i {
  position: absolute;
  top: 0;
  left: -3px;
  width: 6px;
  height: max(111px, calc(var(--axis-p, 0) * 100%));
  border-radius: var(--r-pill);
  background: #d6ff3e;
  box-shadow: 0 4px 21px rgba(105, 41, 196, 0.9);
}
:where(body.page-hww) .hww-mrow__body {
  display: grid;
  min-height: 548px;
  grid-template-columns: 531px 567px;
  justify-content: space-between;
  align-items: center;
  column-gap: 112px;
}
:where(body.page-hww) .hww-mrow__body--flip .hww-diagram { grid-column: 2; grid-row: 1; }
:where(body.page-hww) .hww-mrow__body--flip .hww-mrow__text { grid-column: 1; grid-row: 1; }
:where(body.page-hww) .hww-diagram { align-self: start; width: 531px; max-width: 100%; }
:where(body.page-hww) .hww-diagram svg { display: block; width: 100%; height: auto; }
:where(body.page-hww) .hww-diagram text { font-family: var(--font-head); font-weight: 400; letter-spacing: 0.7px; }
:where(body.page-hww) .hww-mrow__pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--white);
  color: var(--white);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
:where(body.page-hww) .hww-mrow__title {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: var(--white);
  margin-top: 22px;

  max-width: 541px;}
:where(body.page-hww) .hww-mrow__desc {
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
  margin-top: 12px;
  max-width: 480px;
}
:where(body.page-hww) .hww-mrow__text { display: flex; flex-direction: column; margin: 13px 0 0 0;}
:where(body.page-hww) .hww-mrow__text .hww-specs { margin-top: 55px; }
:where(body.page-hww) .hww-specs li {
  display: flex;
  align-items: flex-start;
  gap: 33px;
  padding-bottom: 22px;
  margin-bottom: 18px;
}
:where(body.page-hww) .hww-specs li + li { border-top: 1px solid rgba(255, 255, 255, 0.08); }
:where(body.page-hww) .hww-specs li:last-child { margin-bottom: 0; }
:where(body.page-hww) .hww-specs__key {
  flex: none;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 15px;
  border-radius: var(--r-pill);
  background: rgba(214, 255, 61, 0.08);
  border: 1px solid rgba(214, 255, 61, 0.25);
  color: #d6ff3d;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
:where(body.page-hww) .hww-specs__val {
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.8);
}
/* ==========================================================================
   Our Delivery Process
   ========================================================================== */
:where(body.page-hww) .hww-steps { position: relative; display: flex; flex-direction: column; gap: 22px; }
/* Gradient rail behind the number badges (design 2x504 at x=174) */
:where(body.page-hww) .hww-steps::before {
  content: "";
  position: absolute;
  top: 42px;
  left: 54px;
  width: 2px;
  height: 504px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #FF5B1F 15%, #5A2BFF 85%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.35;
  pointer-events: none;
}
:where(body.page-hww) .hww-step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 54px 364px minmax(0, 1fr);
  align-items: center;
  column-gap: 32px;
  padding: 0 28px 0 29px;
  min-height: 100px;
  background: var(--white);
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:where(body.page-hww) .hww-step:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -32px rgba(11, 11, 13, 0.28); }
:where(body.page-hww) .hww-step--active {
  border: 0.5px solid #ff5b1f;
  box-shadow: 0 30px 60px -40px rgba(255, 91, 31, 0.15);
}
:where(body.page-hww) .hww-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, #FF5B1F 0%, #5A2BFF 100%);
  box-shadow: 0 14px 30px -12px rgba(255, 91, 31, 0.5), 0 0 0 4px rgba(255, 91, 31, 0.12);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: -0.5px;
}
:where(body.page-hww) .hww-step__title {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  color: #0b0b0c;
}
:where(body.page-hww) .hww-step__text {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
}
:where(body.page-hww) .hww-step__tick {
  flex: none;
  width: 1px;
  height: 18px;
  background: rgba(0, 0, 0, 0.55);
}
/* ==========================================================================
   Communication & Visibility (dark panel + dashboard mock)
   ========================================================================== */
/* ==========================================================================
   Communication & Visibility (dark panel + dashboard mock)
   ========================================================================== */
/* All three dark panels are #0B0B0C in the design, not the shared --dark-panel.
   Their corner glows are ellipses sized in the panel's own box (Figma normalises
   the handles), and each stop fades toward transparent BLACK, so CSS needs
   intermediate stops — a plain two-stop rgba ramp interpolates premultiplied
   and comes out far too hot. */
:where(body).page-hww .panel--dark { background: #0b0b0c; }
:where(body).page-hww .glow-panel::before {
  background:
    radial-gradient(86.7% 78.1% at 80% -10%,
      rgba(255, 91, 31, 0.18) 0%, rgba(204, 73, 25, 0.144) 12%,
      rgba(153, 55, 19, 0.108) 24%, rgba(102, 36, 12, 0.072) 36%,
      rgba(51, 18, 6, 0.036) 48%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(65% 65.1% at 0% 100%,
      rgba(90, 43, 255, 0.22) 0%, rgba(72, 34, 204, 0.176) 12%,
      rgba(54, 26, 153, 0.132) 24%, rgba(36, 17, 102, 0.088) 36%,
      rgba(18, 9, 51, 0.044) 48%, rgba(0, 0, 0, 0) 60%);
}
/* Node 388:5701 is shorter, so its ellipse radii differ from 5604 / 3012. */
:where(body.page-hww) .hww-comm.glow-panel::before {
  background:
    radial-gradient(86.7% 68.8% at 80% -10%,
      rgba(255, 91, 31, 0.18) 0%, rgba(204, 73, 25, 0.144) 12%,
      rgba(153, 55, 19, 0.108) 24%, rgba(102, 36, 12, 0.072) 36%,
      rgba(51, 18, 6, 0.036) 48%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(65% 57.3% at 0% 100%,
      rgba(90, 43, 255, 0.22) 0%, rgba(72, 34, 204, 0.176) 12%,
      rgba(54, 26, 153, 0.132) 24%, rgba(36, 17, 102, 0.088) 36%,
      rgba(18, 9, 51, 0.044) 48%, rgba(0, 0, 0, 0) 60%);
}
:where(body.page-hww) .hww-comm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
  padding: 60px 92px;
}
:where(body.page-hww) .hww-comm__copy { flex: 0 1 483px; }
:where(body.page-hww) .hww-comm__copy .badge { margin-bottom: 17px; }
:where(body.page-hww) .hww-comm__title {
  font-size: clamp(26px, 2.36vw, 34px);
  line-height: 44px;
  letter-spacing: -1.2px;
  color: var(--white);
}
:where(body.page-hww) .hww-comm__sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--white);
  margin-top: 17px;
  max-width: 427px;
}
:where(body.page-hww) .hww-comm__lead {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.3px;
  color: var(--white);
  margin-top: 55px;
}
:where(body.page-hww) .hww-comm__list { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
:where(body.page-hww) .hww-comm__list li {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}
:where(body.page-hww) .hww-comm__bullet {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1D293D 0%, #5A2BFF 100%);
}
/* Dashboard card */
:where(body.page-hww) .hww-dash {
  flex: none;
  width: 653px;
  max-width: 100%;
  padding: 25px 25px 24px 33px;
  border-radius: 22px;
  border: 0.5px solid rgba(230, 227, 220, 0.2);
  background:
    linear-gradient(180deg, rgba(15, 15, 18, 0.5) 0%, rgba(22, 22, 26, 0.5) 100%),
    /* 143.6deg, not `to bottom right`: the design's axis is (x/W + y/H)/2, which
       passes through the same two corners but with different iso-line spacing. */
    linear-gradient(143.6deg,
      rgba(255, 91, 31, 0.4) 0%, rgba(191, 68, 23, 0.3) 12.5%,
      rgba(127, 46, 16, 0.2) 25%, rgba(64, 23, 8, 0.1) 37.5%,
      rgba(0, 0, 0, 0) 50%,
      rgba(3, 64, 39, 0.075) 62.5%, rgba(5, 128, 79, 0.15) 75%,
      rgba(8, 191, 118, 0.225) 87.5%, rgba(10, 255, 157, 0.3) 100%),
    var(--bg);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
:where(body.page-hww) .hww-dash__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
:where(body.page-hww) .hww-dash__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: var(--white);
}
:where(body.page-hww) .hww-dash__meta {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.48px;
  color: #8a8a92;
  margin-top: 4px;
}
:where(body.page-hww) .hww-dash__chips { display: flex; gap: 8px; }
:where(body.page-hww) .hww-dash__chip {
  padding: 6px 11px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfcec9;
  font-size: 11px;
  font-weight: 600;
  line-height: 17px;
  letter-spacing: 0.55px;
}
:where(body.page-hww) .hww-dash__chip--ok {
  background: rgba(10, 255, 157, 0.12);
  border-color: rgba(10, 255, 157, 0.3);
  color: #0aff9d;
}
:where(body.page-hww) .hww-dash__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 12px;
  margin-top: 18px;
  padding: 14px 15px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
:where(body.page-hww) .hww-dash__stat {
  display: block;
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: -0.5px;
  color: var(--white);
}
:where(body.page-hww) .hww-dash__stats span {
  display: block;
  font-size: 11px;
  line-height: 17px;
  letter-spacing: 0.44px;
  margin-top: -3px;
  color: #8a8a92;
}
:where(body.page-hww) .hww-dash__rows { display: flex; flex-direction: column; gap: 9px; margin-top: 18px; }
:where(body.page-hww) .hww-dash__rows li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 196px 80px;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
:where(body.page-hww) .hww-dash__task {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: #e6e5df;
}
:where(body.page-hww) .hww-dash__track {
  height: 6px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
:where(body.page-hww) .hww-dash__track i {
  display: block;
  height: 100%;
  width: var(--w, 50%);
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, #1D293D 0%, #5A2BFF 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.1s var(--ease) 0.15s;
}
:where(body.page-hww) [data-reveal].is-visible .hww-dash__track i { transform: scaleX(1); }
:where(body.page-hww) .hww-dash__status {
  justify-self: end;
  width: 80px;
  padding: 4px 0;
  border-radius: var(--r-pill);
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 16px;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.06);
  color: #8a8a92;
}
:where(body.page-hww) .hww-dash__status--done { background: rgba(10, 255, 157, 0.12); color: #0aff9d; }
:where(body.page-hww) .hww-dash__status--active { background: rgba(255, 91, 31, 0.14); color: var(--white); }
:where(body.page-hww) .hww-dash__status--review { background: rgba(214, 255, 61, 0.12); color: #d6ff3d; }
/* ==========================================================================
   CTA
   ========================================================================== */
:where(body.page-hww) .hww-cta__title {
  font-size: clamp(32px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  color: #0b0b0c;
}
:where(body.page-hww) #cta .section-sub {
  margin-top: 23px;
}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
:where(body.page-hww) .hww-dayone { padding: 60px 64px; }
:where(body.page-hww) .hww-models--dark { padding: 72px 56px 120px; }
:where(body.page-hww) .hww-mrow__body { grid-template-columns: minmax(0, 1fr) minmax(0, 550px); column-gap: 56px; }
:where(body.page-hww) .hww-comm { padding: 60px 48px; }
:where(body.page-hww) .hww-step { grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.05fr); }
}
@media (max-width: 1180px) {
:where(body.page-hww) .hww-comm__copy { flex-basis: 420px; }
:where(body.page-hww) .hww-dash { width: 100%; }
}
@media (max-width: 1024px) {
:where(body.page-hww) #main > .section + .section,
:where(body.page-hww) .hww-hero + .section { margin-top: 88px; }
:where(body.page-hww) #main > .cta { margin-top: 88px; padding-bottom: 88px; }
:where(body.page-hww) .hww-mrow { gap: 64px; }
:where(body.page-hww) .hww-mrow__axis { display: none; }
:where(body.page-hww) .hww-mrow__body,
:where(body.page-hww) .hww-mrow__body--flip { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 40px; justify-items: start; }
:where(body.page-hww) .hww-mrow__body--flip .hww-diagram,
:where(body.page-hww) .hww-mrow__body--flip .hww-mrow__text { grid-column: 1; grid-row: auto; }
:where(body.page-hww) .hww-diagram { width: 100%; max-width: 440px; }
:where(body.page-hww) .hww-mrow__text { max-width: 560px; }
:where(body.page-hww) .hww-comm { flex-direction: column; align-items: stretch; gap: 48px; }
:where(body.page-hww) .hww-comm__copy { flex-basis: auto; max-width: 620px; }
}
@media (max-width: 900px) {
:where(body.page-hww) .hww-cards { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
:where(body.page-hww) .hww-dayone__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; gap: 0; }
:where(body.page-hww) .hww-dayone__item { margin-bottom: 0; }
:where(body.page-hww) .hww-dayone__item:nth-child(-n+3) > div { padding-bottom: 22px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
:where(body.page-hww) .hww-dayone__item:nth-child(2) > div,
:where(body.page-hww) .hww-dayone__item:nth-child(4) > div { padding-bottom: 0; box-shadow: none; }
:where(body.page-hww) .hww-dayone__item:nth-child(n+2) { margin-top: 22px; }
}
@media (max-width: 820px) {
:where(body.page-hww) .hww-hero { padding: 72px 24px 76px; }
:where(body.page-hww) .hww-hero__watermark { top: 34px; left: -70px; }
:where(body.page-hww) .hww-dayone { padding: 48px 28px; }
:where(body.page-hww) .hww-models--dark { padding: 56px 28px 72px; }
:where(body.page-hww) .hww-comm { padding: 48px 28px; }
:where(body.page-hww) .hww-cmp { grid-template-columns: minmax(0, 1fr); }
:where(body.page-hww) .hww-cmp__head--bad { border-radius: 12px 12px 0 0; }
:where(body.page-hww) .hww-cmp__head--good { border-radius: 0; margin-top: -1px; }
:where(body.page-hww) .hww-cmp__cell--last { border-radius: 0; }
:where(body.page-hww) .hww-cmp__cell--good.hww-cmp__cell--last { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
:where(body.page-hww) .hww-step { grid-template-columns: 54px minmax(0, 1fr); column-gap: 24px; padding: 22px 24px; min-height: 0; }
:where(body.page-hww) .hww-step__text { grid-column: 2; margin-top: 10px; font-size: 16px; line-height: 26px; gap: 12px; }
:where(body.page-hww) .hww-steps::before { display: none; }
}
@media (max-width: 520px) {
:where(body.page-hww) .hww-hero__title { line-height: 1.16; }
:where(body.page-hww) .hww-hero__sub { font-size: 16px; line-height: 26px; }
:where(body.page-hww) .hww-mcard { padding: 24px 22px; }
:where(body.page-hww) .hww-mcard__title { font-size: 24px; line-height: 32px; }
:where(body.page-hww) .hww-specs li { flex-direction: column; align-items: flex-start; gap: 10px; }
:where(body.page-hww) .hww-dash__rows li { grid-template-columns: minmax(0, 1fr) 80px; row-gap: 12px; }
:where(body.page-hww) .hww-dash__task { grid-column: 1; grid-row: 1; }
:where(body.page-hww) .hww-dash__status { grid-column: 2; grid-row: 1; width: auto; }
:where(body.page-hww) .hww-dash__track { grid-column: 1 / -1; grid-row: 2; }
:where(body.page-hww) .hww-dash__head { flex-wrap: wrap; gap: 12px; }
:where(body.page-hww) .hww-dash__chips { margin-left: 0; }
:where(body.page-hww) .hww-dash__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; padding: 14px 12px; }
:where(body.page-hww) .hww-dash__stat { font-size: 24px; line-height: 32px; }
:where(body.page-hww) .hww-dayone__item { align-items: flex-start; gap: 18px; }
:where(body.page-hww) .hww-cta__title { line-height: 1.16; }
}
@media (prefers-reduced-motion: reduce) {
:where(body.page-hww) .hww-hero__title { animation: none; }
:where(body.page-hww) .hww-dash__track i { transition: none; transform: scaleX(1); }
}
/* ===== services: page design layer (scoped to body.page-svc) ===== */
/* ==========================================================================
   Zemotify — Services page (Figma node 569:7488, 1440x3736 canvas)
   Layered on top of styles.css; Syne-only typography, shared tokens.
   ========================================================================== */
/* ----- Page rhythm: 120px gaps between sections (design auto-layout) ----- */
:where(body.page-svc) #main > .section { padding-block: 0; }
:where(body.page-svc) .svc-hero + .section,
:where(body.page-svc) #main > .section + .section { margin-top: 120px; }
:where(body).page-svc #main > .cta { margin-top: 150px; padding-block: 0 125px; }
/* Kill inline-block leading so badges sit flush at the design's y-offsets */
:where(body).page-svc .section-head { line-height: 0; max-width: none; margin-bottom: 55px; }
:where(body).page-svc .section-head .badge { line-height: 18px; }
:where(body).page-svc .section-head .section-title { margin-top: 17px; line-height: 44px; }
:where(body).page-svc .section-head .section-sub { margin-top: 17px; line-height: 28px; }
:where(body).page-svc .badge { padding: 6px 16px; }
:where(body.page-svc) .badge--dark {
  background: var(--bg);
  color: var(--white);
  padding: 6px 16px;
  line-height: 18px;
}
/* Design badges on light sections: white fill + #E6E3DC hairline */
:where(body).page-svc .badge--light {
  padding: 5px 16px;
  background: var(--white);
  border: 1px solid #e6e3dc;
  color: var(--text-muted);
}
/* Dark-panel badge: fill hidden in design, #E6E3DC hairline only */
:where(body).page-svc .badge--outline {
  padding: 5px 16px;
  background: transparent;
  border: 1px solid rgba(230, 227, 220, 0.55);
  color: #e6e3dc;
}
/* Design uses pure white for sub-copy on dark panels, not the muted token */
:where(body.page-svc) .section-sub--white { color: var(--white); }
/* ==========================================================================
   Hero — 482px band, watermark + black pill + gradient title
   ========================================================================== */
:where(body.page-svc) .svc-hero {
  position: relative;
  padding: 129px 24px 96px;
  text-align: center;
  overflow: hidden;
  background: var(--cream);
  border-bottom: 1px solid #e6e3dc;
}
/* Figma 569:7490 — Syne 273px, ls -0.04em, vertical fade #0B0B0C 7% → 0 */
:where(body.page-svc) .svc-hero__watermark {
  position: absolute;
  top: 95px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(120px, 19vw, 273px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.07) 0%, rgba(11, 11, 12, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
:where(body.page-svc) .svc-hero__inner { position: relative; }
/* Figma 569:7498 — 90deg ramp, black held to 30% then purple → blue */
:where(body.page-svc) .svc-hero__title {
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  margin-top: 22px;
  display: block;
  width: fit-content;
  margin-inline: auto;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-svc) .svc-hero__sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 625px;
  margin: 22px auto 0;
}
/* ==========================================================================
   Services grid — 3 x 2 cards, 387x585 (Figma 569:7518 Container)
   ========================================================================== */
:where(body.page-svc) .svc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 19px 20px;
}
:where(body.page-svc) .svc-card {
  display: flex;
  flex-direction: column;
  min-height: 585px;
  background: var(--white);
  border: 1px solid rgba(11, 11, 12, 0.1);
  border-radius: 12px;
  padding: 32px;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}
:where(body.page-svc) .svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgba(11, 11, 13, 0.1);
  border-color: rgba(255, 91, 31, 0.35);
}
:where(body.page-svc) .svc-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #f6f5f1;
  border: 1px solid rgba(11, 11, 12, 0.1);
  color: #c2410c;
  margin-bottom: 22px;
}
:where(body.page-svc) .svc-card__title {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: #0b0b0c;
}
:where(body.page-svc) .svc-card__for {
  margin-top: 12px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
}
:where(body.page-svc) .svc-card__body {
  margin-top: 24px;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-muted);
}
/* Feature rows sit on a flex track and distribute evenly (design GRID) */
:where(body.page-svc) .svc-card__list {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 11px;
  margin-top: 35px;
}
:where(body.page-svc) .svc-card__list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: #000;
}
:where(body.page-svc) .svc-card__list li::before {
  content: "\203A";
  position: absolute;
  left: 0;
  font-weight: 400;
  color: var(--orange);
}
:where(body.page-svc) .svc-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  color: #0b0b0c;
  transition: color var(--dur) var(--ease);
}
:where(body.page-svc) .svc-card__link svg { transition: transform var(--dur) var(--ease); }
:where(body.page-svc) .svc-card__link:hover { color: var(--purple-soft); }
:where(body.page-svc) .svc-card__link:hover svg { transform: translate(2px, -2px); }
/* ==========================================================================
   Technology stack — dark panel with corner glows (Figma 569:7808 Container)
   ========================================================================== */
/* Panel spans the page with 28px gutters (design Container 1384x694 r=12) */
:where(body).page-svc .section > .container:has(> .svc-panel) {
  max-width: var(--page-max);
  padding-inline: 28px;
}
/* #0B0B0C base + purple glow anchored bottom-left, orange top-right */
:where(body.page-svc) .svc-panel {
  padding: 60px 92px;
  border-radius: 12px;
  background:
    radial-gradient(900px 425px at 0% 100%, rgba(90, 43, 255, 0.22), transparent 60%),
    radial-gradient(1200px 509px at 80% -10%, rgba(255, 91, 31, 0.18), transparent 60%),
    #0b0b0c;
}
:where(body.page-svc) .svc-tech {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 25px;
}
:where(body.page-svc) .svc-tech__col {
  /* 25/24 + 1px border = the design's 26/25 inset inside the 383x281 box */
  padding: 25px 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
:where(body.page-svc) .svc-tech__col:hover {
  border-color: rgba(214, 255, 62, 0.35);
  transform: translateY(-4px);
}
:where(body.page-svc) .svc-tech__head {
  font-size: 34px;
  line-height: 44px;
  letter-spacing: -1.2px;
  font-weight: 600;
  color: var(--lime);
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 22px;
}
:where(body.page-svc) .svc-tech__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:where(body.page-svc) .svc-tech__list li {
  display: flex;
  align-items: center;
  height: 43px;
  padding-inline: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
}
/* Figma 569:7841 — the React chip is lime-tinted */
:where(body.page-svc) .svc-tech__list li.is-featured {
  background: rgba(214, 255, 61, 0.08);
  border-color: rgba(214, 255, 61, 0.25);
}
/* ==========================================================================
   CTA — gradient headline + orange/purple pill (Figma 569:7789)
   ========================================================================== */
:where(body.page-svc) .svc-cta { text-align: center; }
/* Figma 569:7795 renders with the same 4-stop ramp as the hero title */
:where(body.page-svc) .svc-cta__title {
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  font-weight: 600;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-svc) .svc-cta__sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 470px;
  margin: 22px auto 0;
}
:where(body.page-svc) .svc-cta__actions {
  display: flex;
  justify-content: center;
  margin-top: 27px;
}
/* Figma: pad 15/21, 16px label, warm glow 0 30 60 -25 rgba(255,91,31,.7) */
:where(body.page-svc) .svc-cta__btn {
  font-size: 16px;
  padding: 15px 21px;
  box-shadow: 0 30px 60px -25px rgba(255, 91, 31, 0.7);
}
:where(body.page-svc) .svc-cta__btn:hover { box-shadow: 0 34px 66px -22px rgba(255, 91, 31, 0.8); }
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
:where(body.page-svc) .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(body.page-svc) .svc-card { min-height: 0; }
:where(body.page-svc) .svc-card__list { min-height: 0; }
:where(body.page-svc) .svc-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(body.page-svc) .svc-panel { padding: 56px 40px; }
}
@media (max-width: 768px) {
:where(body.page-svc) .svc-hero { padding: 96px 24px 72px; }
:where(body.page-svc) .svc-hero__watermark { top: 62px; }
:where(body.page-svc) .svc-hero__title { line-height: 1.16; }
:where(body.page-svc) .svc-cta__title { line-height: 1.16; }
:where(body.page-svc) .svc-grid { grid-template-columns: minmax(0, 1fr); }
:where(body.page-svc) .svc-card { min-height: 0; }
:where(body.page-svc) .svc-panel { padding: 48px 24px; }
:where(body.page-svc) #main > .section,
:where(body.page-svc) .svc-hero + .section { margin-top: 88px; }
:where(body).page-svc #main > .cta { margin-top: 110px; padding-bottom: 88px; }
}
@media (max-width: 520px) {
:where(body.page-svc) .svc-tech { grid-template-columns: minmax(0, 1fr); }
:where(body.page-svc) .svc-card { padding: 24px; }
:where(body.page-svc) .svc-card__title { font-size: 24px; line-height: 32px; }
}
/* ===== startup: page design layer (scoped to body.page-su) ===== */
/* ==========================================================================
   Zemotify — Startup MVP page (Figma node 418:546, 1440x5375)
   Layered on top of styles.css; Syne-only typography, shared tokens.
   ========================================================================== */
/* ----- Page rhythm: 120px gaps between sections (design auto-layout) ----- */
:where(body.page-su) #main > .section { padding-block: 0; }
:where(body.page-su) .su-process,
:where(body.page-su) .su-deliverables,
:where(body.page-su) .su-scaling,
:where(body.page-su) .su-stack,
:where(body.page-su) .su-cta { margin-top: 120px; }
/* Kill inline-block leading so badges sit flush at the design's y-offsets */
:where(body).page-su .section-head { line-height: 0; max-width: none; }
:where(body).page-su .section-head .section-title { margin-top: 17px; line-height: 44px; }
:where(body).page-su .section-head .section-sub { margin-top: 17px; line-height: 28px; }
/* The design renders every page text node with a Title-case transform
   ("Next.js" -> "Next.Js"), so capitalize at the CSS layer, not in markup. */
:where(body).page-su .su-hero__title,
:where(body).page-su .su-hero__sub,
:where(body).page-su .section-title,
:where(body).page-su .section-sub,
:where(body).page-su .su-phase__text,
:where(body).page-su .su-chip__label,
:where(body).page-su .su-del-card__body h3,
:where(body).page-su .su-del-card__body p,
:where(body).page-su .su-scale-card h3,
:where(body).page-su .su-scale-card p,
:where(body).page-su .su-scale-list li,
:where(body).page-su .su-acc__label,
:where(body).page-su .su-console__title,
:where(body).page-su .su-console__sub,
:where(body).page-su .su-console__label { text-transform: capitalize; }
:where(body.page-su) .su-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 55px;
}
/* Design pills: 12/500 ls1.5 in a 30px white box with #E6E3DC hairline */
:where(body.page-su) .su-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 30px;
  padding: 5px 16px;
  line-height: 18px;
  border: 1px solid #e6e3dc;
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
/* ==========================================================================
   Hero — 617px band: watermark + black rocket badge + 4-stop gradient title
   ========================================================================== */
:where(body.page-su) .su-hero {
  position: relative;
  /* design rocket badge sits at page-y 163; the sticky header reserves 62px above */
  padding: 101px 24px 83px;
  text-align: center;
  overflow: hidden;
  background: var(--cream);
}
/* Figma 418:554 — watermark: design box is 273px in a condensed face; sized to 190px
   so Syne reproduces the same visible extent ("STARTUP" ends at the badge edge) */
:where(body.page-su) .su-hero__watermark {
  position: absolute;
  top: 105px;
  /* design text box starts at page x -16, not centered */
  left: -16px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(96px, 13.2vw, 190px);
  line-height: 1.29;
  letter-spacing: -0.04em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.07) 0%, rgba(11, 11, 12, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
:where(body.page-su) .su-hero__inner { position: relative; }
/* Figma 418:577 — 207px black disc, rocket icon + "Startup MVP" */
:where(body.page-su) .su-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 19px;
  width: 207px;
  height: 207px;
  margin-inline: auto;
  border-radius: 50%;
  background: #110c09;
  color: #faf6f1;
}
:where(body.page-su) .su-badge__text {
  font-size: 28px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0px;
}
/* Figma 418:585 — 91deg ramp, black held to 30% then purple → blue */
:where(body.page-su) .su-hero__title {
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  font-weight: 600;
  margin-top: 22px;
  display: block;
  width: fit-content;
  margin-inline: auto;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-su) .su-hero__sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 551px;
  margin: 22px auto 0;
}
/* ==========================================================================
   Marquee band — 63px dark strip, startup phrases loop
   ========================================================================== */
:where(body.page-su) .su-marquee {
  position: relative;
  height: 63px;
  overflow: hidden;
  background: #0b0b0c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* full-bleed: strip spans edge-to-edge at any viewport (design 1440x63) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
:where(body.page-su) .su-marquee__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: su-marquee-x 30s linear infinite;
}
:where(body.page-su) .su-marquee:hover .su-marquee__track { animation-play-state: paused; }
:where(body.page-su) .su-marquee__item {
  display: inline-flex;
  align-items: center;
  padding-right: 48px;
  font-size: 22px;
  line-height: 33px;
  font-weight: 800; /* design: Syne/800 — kept exact for the slider strip */
  letter-spacing: 3.52px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
:where(body.page-su) .su-marquee__item i {
  font-style: normal;
  margin-left: 48px;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--orange);
}
@keyframes su-marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Edge fades (Figma 80px #0B0B0C masks) */
:where(body.page-su) .su-marquee::before,
:where(body.page-su) .su-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}
:where(body.page-su) .su-marquee::before { left: 0; background: linear-gradient(90deg, #0b0b0c, rgba(11, 11, 12, 0)); }
:where(body.page-su) .su-marquee::after { right: 0; background: linear-gradient(-90deg, #0b0b0c, rgba(11, 11, 12, 0)); }
/* ==========================================================================
   Build process — three stacked dark phase cards (1022px)
   ========================================================================== */
:where(body.page-su) .su-phases {
  width: 1022px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
:where(body.page-su) .su-phase {
  display: flex;
  flex-direction: column;
  padding: 39px 40px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #0b0b0c;
}
:where(body.page-su) .su-phase--deeper { background: #0a0704; }
:where(body.page-su) .su-phase__kicker {
  display: block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
:where(body.page-su) .su-phase__title {
  margin-top: 4px;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: #f9f4ee;
  text-transform: uppercase;
}
:where(body.page-su) .su-phase__text {
  margin-top: 12px;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 768px;
}
:where(body.page-su) .su-chips {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
:where(body.page-su) .su-chip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
}
:where(body.page-su) .su-chip__num {
  flex: none;
  font-size: 12px;
  line-height: 16px;
  color: #ff6728;
}
:where(body.page-su) .su-chip__label {
  font-size: 14px;
  line-height: 22px;
  font-weight: 500;
  color: #f9f4ee;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* ==========================================================================
   Core deliverables — 2x2 light cards, first one orange-framed
   ========================================================================== */
:where(body.page-su) .su-del-grid {
  display: grid;
  grid-template-columns: repeat(2, 459px);
  justify-content: center;
  gap: 22px;
}
:where(body.page-su) .su-del-card {
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  min-height: 267px;
  padding: 49px 40px;
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  background: #fdfbf8;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    gap: 33px;
}
:where(body.page-su) .su-del-card:hover { border-color: rgba(255, 91, 31, 0.4); box-shadow: 0 36px 66px -28px rgba(255, 103, 40, 0.28); }
:where(body.page-su) .su-del-card:hover { transform: translateY(-4px); }
:where(body.page-su) .su-del-card--featured {
  box-shadow: 0 30px 60px -30px rgba(255, 103, 40, 0.15);
}
:where(body.page-su) .su-del-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  background: #efebe4;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:where(body.page-su) .su-del-card__icon svg { transition: stroke var(--dur) var(--ease); }
:where(body.page-su) .su-del-card:hover .su-del-card__icon { background: #0b0b0c; border-color: #0b0b0c; }
:where(body.page-su) .su-del-card:hover .su-del-card__icon svg { stroke: #ffffff; }
:where(body.page-su) .su-del-card__icon--dark { background: #000000; }
:where(body.page-su) .su-del-card--featured:hover .su-del-card__icon { background: #efebe4; border-color: #e6e3dc; }
:where(body.page-su) .su-del-card--featured:hover .su-del-card__icon svg { stroke: #110c09; }
:where(body.page-su) .su-del-card__body h3 {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: #0b0b0c;
}
:where(body.page-su) .su-del-card__body p {
  margin-top: 5px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
}
:where(body.page-su) .su-del-card__icon + .su-del-card__body { margin-top: 0px; }
/* ==========================================================================
   Post-MVP scaling — orbit rings + three dark cards (384px)
   ========================================================================== */
:where(body.page-su) .su-scaling { position: relative; }
/* Figma 418:547 — 288px concentric hairline rings, glowing core dot */
:where(body.page-su) .su-orbit {
  position: absolute;
  left: 0;
  top: -18px;
  width: 288px;
  height: 288px;
  pointer-events: none;
}
:where(body.page-su) .su-orbit__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(17, 12, 9, 0.08);
}
:where(body.page-su) .su-orbit__ring--1 { width: 299px; height: 299px; border-color: rgba(17, 12, 9, 0.09); }
:where(body.page-su) .su-orbit__ring--2 { width: 241px; height: 241px; }
:where(body.page-su) .su-orbit__ring--3 { width: 192px; height: 192px; }
:where(body.page-su) .su-orbit__ring--4 { width: 132px; height: 132px; border-color: rgba(255, 103, 40, 0.28); }
:where(body.page-su) .su-orbit__dot {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #110c09;
  box-shadow: 0 0 30px 6px rgba(255, 103, 40, 0.45);
  animation: su-orbit-pulse 3.2s ease-in-out infinite alternate;
}
@keyframes su-orbit-pulse {
  from { box-shadow: 0 0 22px 4px rgba(255, 103, 40, 0.35); }
  to   { box-shadow: 0 0 36px 9px rgba(255, 103, 40, 0.6); }
}
:where(body.page-su) .su-scale-grid {
  display: grid;
  grid-template-columns: repeat(3, 384px);
  justify-content: center;
  gap: 24px;
}
:where(body.page-su) .su-scale-card {
  padding: 36px 29px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  background: #0a0704;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:where(body.page-su) .su-scale-card:hover { transform: translateY(-4px); border-color: rgba(255, 91, 31, 0.45); }
:where(body.page-su) .su-scale-card h3 {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.3px;
  font-weight: 600;
  color: #f9f4ee;
}
:where(body.page-su) .su-scale-card > p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 22px;
  color: rgba(255, 255, 255, 0.8);
}
:where(body.page-su) .su-scale-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
}
:where(body.page-su) .su-scale-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--white);
}
:where(body.page-su) .su-scale-list__dash { color: #ff6728; }
/* ==========================================================================
   Tech stack — 2x2 accordion cards (548px)
   ========================================================================== */
:where(body.page-su) .su-stack-grid {
  display: grid;
  grid-template-columns: repeat(2, 548px);
  justify-content: center;
  align-items: start;
  gap: 24px;
}
:where(body.page-su) .su-acc {
  padding: 1px;
  border: 1px solid #e6e3dc;
  border-radius: 14px;
  background: #fdfbf8;
  overflow: hidden;
}
:where(body.page-su) .su-acc__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 11px 20px;
  border: 0;
  border-bottom: 1px solid rgba(17, 12, 9, 0.12);
  background: rgba(239, 235, 228, 0.6);
  font-family: var(--font-head);
  font-size: 20px;
  line-height: 28px;
  letter-spacing: -0.2px;
  font-weight: 600;
  text-transform: uppercase;
  color: #0b0b0c;
  cursor: pointer;
  text-align: left;
}
:where(body.page-su) .su-acc__chev {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(17, 12, 9, 0.12);
  border-radius: 4px;
  background: #fdfbf8;
  transition: transform var(--dur) var(--ease);
}
:where(body.page-su) .su-acc--closed .su-acc__chev { transform: rotate(-90deg); }
:where(body.page-su) .su-acc--closed .su-acc__list { display: none; }
:where(body.page-su) .su-acc__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  box-sizing: border-box;
  min-height: 49px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(17, 12, 9, 0.12);
}
:where(body.page-su) .su-acc__list li:last-child { border-bottom: 0; }
:where(body.page-su) .su-acc__num {
  width: 17px;
  flex: none;
  font-size: 14px;
  line-height: 20px;
  color: #5c534d;
}
:where(body.page-su) .su-acc__dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ff6728;
}
:where(body.page-su) .su-acc__label {
  font-size: 16px;
  line-height: 20px;
  color: #0b0b0c;
}
/* ==========================================================================
   CTA — launch console card (680x797)
   ========================================================================== */
:where(body.page-su) .su-cta {
  display: flex;
  justify-content: center;
  /* design keeps the 120px rhythm before the footer */
  margin-bottom: 120px;
  margin-top: 120px !important;
}
:where(body.page-su) .su-console {
  position: relative;
  width: 680px;
  max-width: calc(100% - 48px);
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  box-shadow: 0 64px 80px -60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  background: var(--cream);
}
/* 18px black bar with the 8px "hole" punched out of the centre */
:where(body.page-su) .su-console__bar {
  display: block;
  height: 18px;
  background:
    radial-gradient(circle 4px at 50% 50%, var(--cream) 98%, #0b0b0c 100%),
    #0b0b0c;
}
:where(body.page-su) .su-console__inner {
  /* border-inclusive design offsets: 75px/50px from the outer edges */
  padding: 57px 49px 25px;
  text-align: center;
}
:where(body.page-su) .su-console__kicker {
  display: block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #000000;
}
:where(body.page-su) .su-console__title {
  margin-top: 12px;
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  font-weight: 600;
  color: #000000;
}
/* Gradient words: #0B0B0C → #6929C4 → #5A2BFF, one ramp per word */
:where(body.page-su) .su-grad-word {
  background: linear-gradient(90deg, #0B0B0C 0%, #6929C4 40%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-su) .su-console__sub {
  margin-top: 12px;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
}
:where(body.page-su) .su-console__list {
  margin-top: 93px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:where(body.page-su) .su-console__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  box-sizing: border-box;
  min-height: 57px;
  padding: 16px 0;
  border-bottom: 1px dashed #e6e3dc;
}
:where(body.page-su) .su-console__list li:last-child { border-bottom: 0; }
:where(body.page-su) .su-console__label {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
}
/* Orange leader line fading out toward the check icon */
:where(body.page-su) .su-console__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #ff5b1f 0%, rgba(153, 55, 19, 0) 100%);
}
:where(body.page-su) .su-console__check { flex: none; }
:where(body.page-su) .su-console__btn {
  display: flex;
  width: 100%;
  margin-top: 38px;
  justify-content: center;
  font-size: 16px;
  padding: 15px 21px;
  box-shadow: 0 30px 60px -25px rgba(255, 91, 31, 0.7);
}
:where(body.page-su) .su-console__btn:hover { box-shadow: 0 34px 66px -22px rgba(255, 91, 31, 0.8); }
:where(body.page-su) .su-console__status {
  margin-top: 28px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
:where(body.page-su) .su-del-grid { grid-template-columns: repeat(2, minmax(0, 459px)); }
:where(body.page-su) .su-stack-grid { grid-template-columns: repeat(2, minmax(0, 548px)); }
:where(body.page-su) .su-scale-grid { grid-template-columns: repeat(3, minmax(0, 384px)); }
}
@media (max-width: 1024px) {
:where(body.page-su) .su-orbit { display: none; }
:where(body.page-su) .su-chips { flex-wrap: wrap; }
:where(body.page-su) .su-chip { flex: 1 1 calc(50% - 6px); }
:where(body.page-su) .su-scale-grid { grid-template-columns: repeat(2, minmax(0, 384px)); }
}
@media (max-width: 768px) {
:where(body.page-su) .su-hero { padding: 130px 24px 64px; }
:where(body.page-su) .su-hero__watermark { top: 80px; }
:where(body.page-su) .su-hero__title,
:where(body.page-su) .su-console__title { line-height: 1.16; }
:where(body.page-su) #main > .section { margin-top: 88px; }
:where(body.page-su) .su-badge { width: 170px; height: 170px; }
:where(body.page-su) .su-del-grid { grid-template-columns: minmax(0, 1fr); }
:where(body.page-su) .su-stack-grid { grid-template-columns: minmax(0, 1fr); }
:where(body.page-su) .su-scale-grid { grid-template-columns: minmax(0, 1fr); }
:where(body.page-su) .su-phase { padding: 28px 22px; }
:where(body.page-su) .su-console__inner { padding: 40px 24px 24px; }
:where(body.page-su) .su-console__list { margin-top: 56px; }
}
@media (max-width: 520px) {
:where(body.page-su) .su-chip { flex: 1 1 100%; }
:where(body.page-su) .su-console__list li { flex-wrap: wrap; }
:where(body.page-su) .su-console__line { display: none; }
:where(body.page-su) .su-console__check { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
:where(body.page-su) .su-hero__title,
:where(body.page-su) .su-grad-word { animation: none; }
:where(body.page-su) .su-marquee__track { animation: none; }
:where(body.page-su) .su-orbit__dot { animation: none; }
}
/* ===== ecommerce: page design layer (scoped to body.page-ec) ===== */
/* ==========================================================================
   Zemotify — E-Commerce Solutions page (Figma node 411:3016, 1440x5468)
   Layered on top of styles.css; Syne-only typography, shared tokens.
   ========================================================================== */
/* ----- Page rhythm: 120px gaps between sections (design auto-layout) ----- */
:where(body.page-ec) #main > .section { padding-block: 0; }
:where(body.page-ec) .ec-hero + .ec-marquee + .section,
:where(body.page-ec) #main > .section + .section,
:where(body.page-ec) .ec-stack + .section { margin-top: 120px; }
/* Kill inline-block leading so badges sit flush at the design's y-offsets */
:where(body).page-ec .section-head { line-height: 0; max-width: none; }
:where(body).page-ec .section-head .section-title { margin-top: 17px; line-height: 44px; }
:where(body).page-ec .section-head .section-sub { margin-top: 17px; line-height: 28px; }
/* Design pills: 12/500 ls1.5 in a 30px box (pad 6/16 with 1px borders baked in) */
:where(body.page-ec) .ec-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: 30px;
  padding: 5px 16px;
  line-height: 18px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}
:where(body.page-ec) .ec-pill--black {
  background: #0b0b0c;
  color: var(--white);
}
:where(body.page-ec) .ec-pill--outline-light {
  border: 1px solid #e6e3dc;
  color: #e6e3dc;
}
:where(body.page-ec) .ec-pill--outline-dark {
  background: var(--white);
  border: 1px solid #e6e3dc;
  color: var(--text-muted);
}
/* ==========================================================================
   Hero — 482px band: watermark + black pill + 4-stop gradient title
   ========================================================================== */
:where(body.page-ec) .ec-hero {
  position: relative;
  /* Design badge sits at page-y 184; the sticky header reserves 62px above */
  padding: 122px 24px 104px;
  text-align: center;
  overflow: hidden;
  background: var(--cream);
}
/* Figma 411:3017 — Syne 273px, ls -0.04em, vertical fade #0B0B0C 7% → 0 */
:where(body.page-ec) .ec-hero__watermark {
  position: absolute;
  top: 63px;
  /* design text box starts at page x -12, not centered */
  left: -12px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(120px, 19vw, 273px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.07) 0%, rgba(11, 11, 12, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
:where(body.page-ec) .ec-hero__inner { position: relative; }
/* Figma 411:3044 — 91deg ramp, black held to 30% then purple → blue */
:where(body.page-ec) .ec-hero__title {
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  margin-top: 22px;
  display: block;
  width: fit-content;
  margin-inline: auto;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-ec) .ec-hero__sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 551px;
  margin: 22px auto 0;
}
/* ==========================================================================
   Marquee band — 63px dark strip, "E-COMMERCE SOLUTIONS ✦" loop
   ========================================================================== */
:where(body.page-ec) .ec-marquee {
  position: relative;
  height: 63px;
  overflow: hidden;
  background: #0b0b0c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  /* full-bleed: strip spans edge-to-edge at any viewport (design 1440x63) */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
:where(body.page-ec) .ec-marquee__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: ec-marquee-x 30s linear infinite;
}
:where(body.page-ec) .ec-marquee:hover .ec-marquee__track { animation-play-state: paused; }
:where(body.page-ec) .ec-marquee__item {
  display: inline-flex;
  align-items: center;
  padding-right: 48px;
  font-size: 22px;
  line-height: 33px;
  font-weight: 800; /* design: Syne/800 — kept exact for the slider strip */
  letter-spacing: 3.52px;
  color: var(--white);
  white-space: nowrap;
}
:where(body.page-ec) .ec-marquee__item i {
  font-style: normal;
  margin-left: 48px;
  font-size: 18px;
  color: var(--orange);
}
@keyframes ec-marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
/* Edge fades (Figma 80px #0B0B0C masks) */
:where(body.page-ec) .ec-marquee::before,
:where(body.page-ec) .ec-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}
:where(body.page-ec) .ec-marquee::before { left: 0; background: linear-gradient(90deg, #0b0b0c, rgba(11, 11, 12, 0)); }
:where(body.page-ec) .ec-marquee::after { right: 0; background: linear-gradient(-90deg, #0b0b0c, rgba(11, 11, 12, 0)); }
/* ==========================================================================
   Shopify Partner card + What We Build list — 588 / 42 / 562 grid
   ========================================================================== */
:where(body.page-ec) .ec-status__grid {
  display: grid;
  grid-template-columns: 588px 562px;
  justify-content: center;
  gap: 42px;
  align-items: stretch;
}
:where(body.page-ec) .ec-status__card {
  position: relative;
  display: flex;
  flex-direction: column;
  /* design offsets are border-inclusive: 41px/34px from the outer edge */
  padding: 40px 31px 33px;
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(65% 65% at 0% 100%, rgba(90, 43, 255, 0.17) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(65% 65% at 80% -10%, rgba(255, 91, 31, 0.1) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(128.8deg, rgba(255, 91, 31, 0.5) 0%, rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, 0) 58%, rgba(90, 43, 255, 0.42) 100%),
    #0b0b0c;
}
:where(body.page-ec) .ec-status__card > .ec-pill { align-self: flex-start; }
:where(body.page-ec) .ec-status__body { margin-top: 134px; }
:where(body.page-ec) .ec-status__title {
  font-size: clamp(44px, 5.2vw, 75px);
  line-height: 64px;
  letter-spacing: -1.8px;
  font-weight: 600;
  color: var(--white);
  text-transform: uppercase;
}
:where(body.page-ec) .ec-status__text {
  margin-top: 22px;
  font-size: 18px;
  line-height: 28px;
  color: rgba(255, 255, 255, 0.8);
  max-width: 490px;
}
/* 200px hairline ring clipped at the card's bottom-right corner */
:where(body.page-ec) .ec-status__ring {
  position: absolute;
  right: -21px;
  bottom: -19px;
  width: 200px;
  height: 200px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
:where(body.page-ec) .ec-build {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.25);
  padding: 36px 33px 31px;
}
:where(body.page-ec) .ec-build__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e6e3dc;
}
:where(body.page-ec) .ec-build__heading {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  font-weight: 600;
  color: #0b0b0c;
  text-transform: uppercase;
}
:where(body.page-ec) .ec-build__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 18px;
}
:where(body.page-ec) .ec-build__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 4px;
  border-bottom: 1px dashed #e6e3dc;
}
:where(body.page-ec) .ec-build__item:last-child { border-bottom: 0; }
:where(body.page-ec) .ec-build__item h3 {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  font-weight: 600;
  color: #0b0b0c;
}
/* Green status chip: 30px circle, Shopify-green tint + glow */
:where(body.page-ec) .ec-check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(10, 180, 100, 0.12);
  border: 1px solid rgba(10, 180, 100, 0.3);
  box-shadow: 0 0 14px -2px rgba(10, 180, 100, 0.4);
}
:where(body.page-ec) .ec-tag {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 30px;
  padding: 5px 16px;
  border: 1px solid #e6e3dc;
  border-radius: 999px;
  background: var(--white);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
/* ==========================================================================
   Headless-commerce stack — #EFECE5 band, diagram + 4 dark cards
   ========================================================================== */
:where(body.page-ec) .ec-stack {
  margin-top: 120px;
  padding: 60px 120px;
  background: #efece5;
  overflow: hidden;
}
:where(body.page-ec) .ec-stack__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
}
:where(body.page-ec) .ec-stack__img {
  width: 478px;
  height: 478px;
  flex: none;
  object-fit: cover;
  /* Figma paints this rectangle with blend=DARKEN over the #EFECE5 band */
  mix-blend-mode: darken;
}
:where(body.page-ec) .ec-stack__cards {
  display: grid;
  grid-template-columns: repeat(2, 282px);
  gap: 22px 24px;
}
:where(body.page-ec) .ec-stack__col {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
:where(body.page-ec) .ec-scard {
  display: flex;
  flex-direction: column;
  height: 181px;
  padding: 28px;
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  background:
    radial-gradient(65% 65% at 0% 100%, rgba(90, 43, 255, 0.17) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(65% 65% at 80% -10%, rgba(255, 91, 31, 0.12) 0%, rgba(0, 0, 0, 0) 60%),
    #0b0b0c;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
:where(body.page-ec) .ec-scard:hover { transform: translateY(-4px); border-color: rgba(255, 91, 31, 0.45); }
/* First card carries the design's diagonal orange wash + warm outer glow */
:where(body.page-ec) .ec-scard--glow {
  background:
    radial-gradient(65% 65% at 0% 100%, rgba(90, 43, 255, 0.17) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(65% 65% at 80% -10%, rgba(255, 91, 31, 0.12) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(122.7deg, rgba(255, 91, 31, 0.45) 0%, rgba(0, 0, 0, 0) 30%),
    #0b0b0c;
  box-shadow: 0 40px 80px -40px rgba(255, 91, 31, 0.45);
}
:where(body.page-ec) .ec-scard__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
:where(body.page-ec) .ec-scard__copy { margin-top: 22px; }
:where(body.page-ec) .ec-scard__copy h3 {
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  font-weight: 600;
  color: var(--white);
}
:where(body.page-ec) .ec-scard__copy p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 21px;
  color: rgba(255, 255, 255, 0.8);
}
/* ==========================================================================
   Other platforms — 1178px hairline rows
   ========================================================================== */
:where(body.page-ec) .ec-platforms .section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 55px;
}
:where(body.page-ec) .ec-plat {
  width: 1178px;
  max-width: 100%;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
:where(body.page-ec) .ec-plat__row {
  display: grid;
  grid-template-columns: 421px 709px;
  align-items: start;
  padding: 44px 24px 43px;
}
:where(body.page-ec) .ec-plat__row--framed { border-top: 1px solid #e6e3dc; border-bottom: 1px solid #e6e3dc; padding-top: 43px; }
:where(body.page-ec) .ec-plat__row:not(.ec-plat__row--framed) { border-bottom: 1px solid #e6e3dc; }
:where(body.page-ec) .ec-plat__label {
  display: flex;
  align-items: center;
  height: 112px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #0b0b0c;
}
:where(body.page-ec) .ec-plat__body h3,
:where(body.page-ec) .ec-plat__sub h3 {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: #0b0b0c;
}
:where(body.page-ec) .ec-plat__body p,
:where(body.page-ec) .ec-plat__sub p {
  margin-top: 22px;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-muted);
}
:where(body.page-ec) .ec-plat__stack { display: flex; flex-direction: column; gap: 32px; }
:where(body.page-ec) .ec-plat__sub { padding-bottom: 19px; border-bottom: 1px solid #e6e3dc; }
:where(body.page-ec) .ec-plat__sub:last-child { padding-bottom: 20px; border-bottom: 0; }
/* ==========================================================================
   Integrations — dark panel with two rotated cards + dashed doodle
   ========================================================================== */
:where(body).page-ec .section > .container:has(> .ec-int-panel) {
  max-width: var(--page-max);
  padding-inline: 28px;
}
/* #0B0B0C base + purple glow bottom-left, orange top-right (same recipe as svc-panel) */
:where(body.page-ec) .ec-int-panel {
  padding: 60px 92px;
  border-radius: 12px;
  background:
    radial-gradient(900px 425px at 0% 100%, rgba(90, 43, 255, 0.22), transparent 60%),
    radial-gradient(1200px 509px at 80% -10%, rgba(255, 91, 31, 0.13), transparent 60%),
    #0b0b0c;
}
:where(body.page-ec) .ec-int-panel .section-head .section-title {
  font-size: 34px; /* design: 34px even on the dark panel, not the 44px home-page ramp */
}
:where(body.page-ec) .ec-int-panel .section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 55px;
}
/* Dark-panel badge: fill hidden in design, #E6E3DC hairline only */
:where(body).page-ec .badge--outline {
  box-sizing: border-box;
  height: 30px;
  line-height: 18px;
  padding: 5px 16px;
  background: transparent;
  border: 1px solid rgba(230, 227, 220, 0.55);
  color: #e6e3dc;
}
:where(body.page-ec) .section-sub--white { color: var(--white); }
:where(body.page-ec) .ec-int-cards {
  position: relative;
  height: 418px;
}
:where(body.page-ec) .ec-int-card {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  padding: 33px;
  border: 0.5px solid rgba(230, 227, 220, 0.2);
  border-radius: 22px;
  background: linear-gradient(180deg, #0f0f12 0%, #16161a 100%);
}
:where(body.page-ec) .ec-int-card--a {
  left: 55px;
  top: 17px;
  width: 489px;
  min-height: 397px;
  transform: rotate(-1.85deg);
  /* diagonal orange→green wash over the dark base (alphas fitted to the design export) */
  background:
    linear-gradient(143.6deg, rgba(255, 91, 31, 0.16) 0%, rgba(0, 0, 0, 0) 50%, rgba(10, 255, 157, 0.15) 100%),
    linear-gradient(180deg, #0d0d0f 0%, #111114 100%);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.6);
}
:where(body.page-ec) .ec-int-card--b {
  right: 27px;
  top: 17px;
  width: 505px;
  min-height: 418px;
  transform: rotate(4.47deg);
  background: linear-gradient(180deg, #0d0d0f 0%, #111114 100%);
  box-shadow:
    0 40px 80px -40px rgba(0, 0, 0, 1),
    0 40px 80px -40px rgba(255, 91, 31, 0.5);
}
:where(body.page-ec) .ec-int-doodle {
  position: absolute;
  left: 558px;
  top: 94px;
  width: 109px;
  height: 109px;
  z-index: 2;
}
:where(body.page-ec) .ec-cat-pill {
  align-self: center;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  height: 30px;
  line-height: 18px;
  padding: 5px 16px;
  border: 1px solid var(--orange);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffae90;
  white-space: nowrap;
}
:where(body.page-ec) .ec-int-card__body { margin-top: 61px; }
:where(body.page-ec) .ec-int-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
:where(body.page-ec) .ec-int-tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 47px;
  height: 47px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: linear-gradient(143.6deg, rgba(255, 91, 31, 0.2) 0%, rgba(90, 43, 255, 0.2) 100%);
}
:where(body.page-ec) .ec-int-card__head h3 {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: var(--white);
}
:where(body.page-ec) .ec-int-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
:where(body.page-ec) .ec-int-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}
:where(body.page-ec) .ec-int-list li:last-child { border-bottom: 0; }
/* ==========================================================================
   CTA — receipt card (680x740) with till-drawer bar
   ========================================================================== */
:where(body.page-ec) .ec-cta {
  display: flex;
  justify-content: center;
  /* design keeps the 120px rhythm before the footer */
  margin-bottom: 120px;
}
:where(body.page-ec) .ec-receipt {
  position: relative;
  width: 680px;
  max-width: calc(100% - 48px);
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  box-shadow: 0 60px 110px -58px rgba(0, 0, 0, 0.33);
  overflow: hidden;
}
/* 18px black bar with the 8px "hole" punched out of the centre */
:where(body.page-ec) .ec-receipt__bar {
  display: block;
  height: 18px;
  background:
    radial-gradient(circle 4px at 50% 50%, var(--cream) 98%, #0b0b0c 100%),
    #0b0b0c;
}
:where(body.page-ec) .ec-receipt__inner {
  /* border-inclusive design offsets: 57px/40px from the outer edges */
  padding: 56px 49px 39px;
  text-align: center;
}
:where(body.page-ec) .ec-receipt__kicker {
  display: block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #000000;
}
:where(body.page-ec) .ec-receipt__title {
  margin-top: 12px;
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  font-weight: 600;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-ec) .ec-receipt__sub {
  margin-top: 12px;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
}
:where(body.page-ec) .ec-receipt__list {
  margin-top: 93px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:where(body.page-ec) .ec-receipt__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-bottom: 1px dashed #e6e3dc;
}
:where(body.page-ec) .ec-receipt__list li:last-child { border-bottom: 0; }
:where(body.page-ec) .ec-receipt__label {
  font-size: 14px;
  line-height: 22px;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
}
/* Orange leader line fading out toward the INCLUDED tag */
:where(body.page-ec) .ec-receipt__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #ff5b1f 0%, rgba(153, 55, 19, 0) 100%);
}
:where(body.page-ec) .ec-receipt__inc {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
  white-space: nowrap;
}
:where(body.page-ec) .ec-receipt__btn {
  display: flex;
  width: 100%;
  margin-top: 38px;
  justify-content: center;
  font-size: 16px;
  padding: 15px 21px;
  box-shadow: 0 30px 60px -25px rgba(255, 91, 31, 0.7);
}
:where(body.page-ec) .ec-receipt__btn:hover { box-shadow: 0 34px 66px -22px rgba(255, 91, 31, 0.8); }
:where(body.page-ec) .ec-receipt__thanks {
  margin-top: 28px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1240px) {
:where(body.page-ec) .ec-status__grid { grid-template-columns: minmax(0, 588px) minmax(0, 562px); }
:where(body.page-ec) .ec-plat__row { grid-template-columns: 320px minmax(0, 1fr); }
:where(body.page-ec) .ec-plat__label { height: 38px; }
}
@media (max-width: 1024px) {
:where(body.page-ec) .ec-status__grid { grid-template-columns: minmax(0, 1fr); }
:where(body.page-ec) .ec-stack { padding: 60px 40px; }
:where(body.page-ec) .ec-stack__row { flex-direction: column; }
:where(body.page-ec) .ec-stack__img { width: min(478px, 100%); height: auto; }
:where(body.page-ec) .ec-int-panel { padding: 56px 40px; }
:where(body.page-ec) .ec-plat__row { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 36px 20px; }
:where(body.page-ec) .ec-plat__label { height: auto; }
}
@media (max-width: 768px) {
:where(body.page-ec) .ec-hero { padding: 150px 24px 80px; }
:where(body.page-ec) .ec-hero__watermark { top: 70px; }
:where(body.page-ec) .ec-hero__title,
:where(body.page-ec) .ec-receipt__title { line-height: 1.16; }
:where(body.page-ec) #main > .section { margin-top: 88px; }
:where(body.page-ec) .ec-stack { margin-top: 88px; padding: 48px 24px; }
:where(body.page-ec) .ec-stack__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(body.page-ec) .ec-int-cards { height: auto; }
:where(body.page-ec) .ec-int-card { position: static; width: auto; transform: none; margin-top: 24px; padding: 24px 20px; }
:where(body.page-ec) .ec-int-card--a { margin-top: 0; }
:where(body.page-ec) .ec-int-card__body { margin-top: 28px; }
:where(body.page-ec) .ec-int-card__head { flex-direction: column; align-items: center; text-align: center; gap: 14px; }
:where(body.page-ec) .ec-int-doodle { display: none; }
:where(body.page-ec) .ec-receipt__inner { padding: 40px 24px 32px; }
:where(body.page-ec) .ec-receipt__list { margin-top: 56px; }
}
@media (max-width: 520px) {
:where(body.page-ec) .ec-stack__cards { grid-template-columns: minmax(0, 1fr); }
:where(body.page-ec) .ec-scard { height: auto; min-height: 160px; }
:where(body.page-ec) .ec-status__title { line-height: 1.05; }
:where(body.page-ec) .ec-build__item { flex-wrap: wrap; }
:where(body.page-ec) .ec-receipt__list li { flex-wrap: wrap; }
:where(body.page-ec) .ec-receipt__line { display: none; }
:where(body.page-ec) .ec-receipt__inc { margin-left: auto; }
}
/* ===== data-intelligence: page design layer (scoped to body.page-di) ===== */
/* ==========================================================================
   Zemotify — Data Intelligence page (Figma node 426:1078)
   Layered on top of styles.css; Syne-only typography, shared tokens.
   Flow-based layout: sections own their vertical rhythm with natural
   padding and margins — no fixed heights, no absolutely-positioned blocks.
   ========================================================================== */
/* ----- Page rhythm ----- */
:where(body.page-di) #main > .section { padding-block: 0; }
:where(body.page-di) .di-why,
:where(body.page-di) .di-do,
:where(body.page-di) .di-journey,
:where(body.page-di) .di-tech,
:where(body.page-di) .di-sources,
:where(body.page-di) .di-uc,
:where(body.page-di) .di-story,
:where(body.page-di) .di-extract {
  margin-top: 120px;
}
:where(body.page-di) .di-cta { margin-top: 120px; margin-bottom: 120px; }
:where(body.page-di) .di-journey { margin-top: 120px; }
:where(body.page-di) .di-tech { margin-top: 150px; }
:where(body.page-di) .di-sources { margin-top: 121px; }
:where(body.page-di) .di-story { margin-top: 120px; }
/* Shared centered section head */
:where(body.page-di) .di-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 59px;
}
:where(body.page-di) .di-do .di-head { margin-bottom: 83px; }
:where(body.page-di) .di-journey .di-head { margin-bottom: 89px; }
:where(body).page-di .section-head { max-width: none; }
:where(body).page-di .section-head .section-title { margin-top: 17px; line-height: 44px; }
:where(body).page-di .section-head .section-sub { margin-top: 15px; line-height: 26px; }
/* The design renders every text node Title-cased, so capitalize at the CSS layer. */
:where(body).page-di .section-title,
:where(body).page-di .section-sub,
:where(body).page-di .di-hero__title,
:where(body).page-di .di-hero__sub,
:where(body).page-di .di-stat__label,
:where(body).page-di .di-why__body h3,
:where(body).page-di .di-why__body p,
:where(body).page-di .di-banner__text,
:where(body).page-di .di-do__copy h3,
:where(body).page-di .di-do__copy p,
:where(body).page-di .di-step__copy h3,
:where(body).page-di .di-step__copy p,
:where(body).page-di .di-tech-card h3,
:where(body).page-di .di-tech-card li,
:where(body).page-di .di-uc__copy h3,
:where(body).page-di .di-uc__copy p,
:where(body).page-di .di-story__name,
:where(body).page-di .di-story__role,
:where(body).page-di .di-extract__copy h3,
:where(body).page-di .di-extract__copy p,
:where(body).page-di .di-receipt__sub {
  text-transform: capitalize;
}
/* ==========================================================================
   Shared building blocks
   ========================================================================== */
:where(body.page-di) .di-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 15px;
  background: var(--white);
  border: 1px solid #e6e3dc;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(body.page-di) .di-pill--dark {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e6e3dc;
}
:where(body.page-di) .section-title--white { color: var(--white); }
:where(body.page-di) .section-sub--white { color: rgba(255, 255, 255, 0.72); }
/* Dark cards share the two-corner gradient wash from the design */
:where(body.page-di) .di-dark-card {
  background:
    radial-gradient(65% 65.1% at 0% 100%, rgba(90, 43, 255, 0.22) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(86.7% 78.1% at 80% -10%, rgba(255, 91, 31, 0.18) 0%, rgba(0, 0, 0, 0) 60%),
    #0b0b0c;
}
/* ==========================================================================
   Hero
   ========================================================================== */
:where(body.page-di) .di-hero {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  border-bottom: 1px solid #e6e3dc;
  text-align: center;
  padding: 126px 24px 66px;
}
:where(body.page-di) .di-hero__inner { position: relative; z-index: 1; }
:where(body.page-di) .di-hero__watermark {
  position: absolute;
  top: 63px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(96px, 13.2vw, 190px);
  line-height: 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  text-transform: capitalize;
  background: linear-gradient(180deg, rgba(11, 11, 12, 0.07) 0%, rgba(11, 11, 12, 0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  pointer-events: none;
}
:where(body.page-di) .di-hero__badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 16px;
  background: #0b0b0c;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
}
:where(body.page-di) .di-hero__title {
  margin-top: 22px;
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  font-weight: 600;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-di) .di-hero__sub {
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
  max-width: 685px;
  margin: 22px auto 0;
}
:where(body.page-di) .di-stats {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  margin-top: 32px;
}
:where(body.page-di) .di-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding-block: 16px;
  text-align: center;
}
:where(body.page-di) .di-stat__num {
  font-size: 34px;
  line-height: 44px;
  font-weight: 700;
  letter-spacing: -1.2px;
  background: linear-gradient(91deg, #0B0B0C 0%, #6929C4 41%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-di) .di-stat__label { max-width: 112px; font-size: 12px; line-height: 20px; color: var(--text-muted); }
:where(body.page-di) .di-stats__sep {
  width: 1px;
  height: 58px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 54%, rgba(0, 0, 0, 0) 100%);
}
/* ==========================================================================
   Marquee band
   ========================================================================== */
:where(body.page-di) .di-marquee {
  position: relative;
  height: 63px;
  overflow: hidden;
  background: #0b0b0c;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
:where(body.page-di) .di-marquee__track {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: di-marquee-x 30s linear infinite;
}
:where(body.page-di) .di-marquee:hover .di-marquee__track { animation-play-state: paused; }
:where(body.page-di) .di-marquee__item {
  display: inline-flex;
  align-items: center;
  padding-right: 48px;
  font-size: 22px;
  line-height: 33px;
  font-weight: 800;
  letter-spacing: 3.52px;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
}
:where(body.page-di) .di-marquee__item i {
  font-style: normal;
  margin-left: 48px;
  font-size: 18px;
  letter-spacing: 0;
  color: var(--orange);
}
@keyframes di-marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
:where(body.page-di) .di-marquee::before,
:where(body.page-di) .di-marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 1;
  pointer-events: none;
}
:where(body.page-di) .di-marquee::before { left: 0; background: linear-gradient(90deg, #0b0b0c, rgba(11, 11, 12, 0)); }
:where(body.page-di) .di-marquee::after { right: 0; background: linear-gradient(-90deg, #0b0b0c, rgba(11, 11, 12, 0)); }
/* ==========================================================================
   Why data intelligence matters
   ========================================================================== */
:where(body.page-di) .di-why__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
:where(body.page-di) .di-why__card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 22px;
  min-height: 296px;
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  background:
    linear-gradient(153deg, rgba(255, 91, 31, 0.45) 0%, rgba(255, 91, 31, 0) 31%),
    radial-gradient(65% 65.1% at 0% 100%, rgba(90, 43, 255, 0.22) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(86.7% 78.1% at 80% -10%, rgba(255, 91, 31, 0.18) 0%, rgba(0, 0, 0, 0) 60%),
    #0b0b0c;
}
:where(body.page-di) .di-why__body { display: flex; flex-direction: column; gap: 8px; max-width: 518px; }
:where(body.page-di) .di-why__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
}
:where(body.page-di) .di-why__body h3 {
  font-size: 34px;
  line-height: 44px;
  letter-spacing: -1.2px;
  font-weight: 600;
  color: #ffffff;
}
:where(body.page-di) .di-why__body p {
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}
:where(body.page-di) .di-banner {
  display: flex;
  align-items: center;
  gap: 45px;
  min-height: 156px;
  margin-top: 22px;
  padding: 14px 149px 14px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    radial-gradient(65% 65.1% at 0% 100%, rgba(90, 43, 255, 0.22) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(86.7% 78.1% at 80% -10%, rgba(255, 91, 31, 0.18) 0%, rgba(0, 0, 0, 0) 60%),
    #0b0b0c;
}
:where(body.page-di) .di-banner__accent {
  flex: 0 0 auto;
  width: 5px;
  height: 126px;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(180deg, #ff5b1f, #5a2bff);
  box-shadow: 0 0 20px rgba(255, 91, 31, 0.6);
}
:where(body.page-di) .di-banner__text {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: var(--white);
  max-width: 1000px;
}
/* ==========================================================================
   What we do — numbered list on warm band
   ========================================================================== */
:where(body.page-di) .di-do { background: #efece5; }
:where(body.page-di) .di-do__inner { padding: 60px 222px; }
:where(body.page-di) .di-do__list {
  display: flex;
  flex-direction: column;
}
:where(body.page-di) .di-do__list > li {
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding: 29px 48px;
  box-shadow: inset 0 0 0 1px #e6e3dc;
}
:where(body.page-di) .di-do__list > li:nth-child(3) { padding-block: 32px; }
:where(body.page-di) .di-do__list > li:nth-child(4) { padding-block: 22px; }
:where(body.page-di) .di-do__copy { max-width: 760px; }
:where(body.page-di) .di-do__row--wash {
  background: linear-gradient(90deg, rgba(255, 91, 31, 0.05), rgba(255, 91, 31, 0) 70%);
}
:where(body.page-di) .di-do__num {
  flex: 0 0 68px;
  font-size: 55px;
  line-height: 64px;
  letter-spacing: -1.8px;
  font-weight: 600;
  background: linear-gradient(135deg, #ff5b1f, #5a2bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:where(body.page-di) .di-do__copy h3 {
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: #0b0b0c;
}
:where(body.page-di) .di-do__copy p {
  margin-top: 12px;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-muted);
}
/* ==========================================================================
   End-to-end journey
   ========================================================================== */
:where(body.page-di) .di-journey { background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%); }
:where(body.page-di) .di-journey__cards {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
:where(body.page-di) .di-journey__arc { position: absolute; }
:where(body.page-di) .di-journey__arc--1 { left: 331px; top: -30px; }
:where(body.page-di) .di-journey__arc--2 { left: 775px; top: 306px; }
:where(body.page-di) .di-step {
  min-height: 303px;
  box-sizing: border-box;
  padding: 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  background: var(--white);
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  box-shadow: 0 30px 70px -50px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
:where(body.page-di) .di-step:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -30px rgba(0, 0, 0, 0.18); }
:where(body.page-di) .di-step--glow { box-shadow: 0 0 80px -40px rgba(255, 91, 31, 0.24); }
:where(body.page-di) .di-step--glow:hover { box-shadow: 0 24px 44px -30px rgba(0, 0, 0, 0.18), 0 0 80px -40px rgba(255, 91, 31, 0.3); }
:where(body.page-di) .di-step__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
:where(body.page-di) .di-step__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0b0b0c, #1f1f24);
  border: 1px solid rgba(255, 91, 31, 0.3);
  box-shadow: inset 0 0 24px rgba(255, 91, 31, 0.15), 0 14px 30px -12px rgba(0, 0, 0, 0.4);
}
:where(body.page-di) .di-step__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
:where(body.page-di) .di-step__kicker {
  display: block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--orange);
}
:where(body.page-di) .di-step__titleblock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
:where(body.page-di) .di-step__copy h3 {
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.3px;
  font-weight: 600;
  color: #0b0b0c;
}
:where(body.page-di) .di-step__copy p {
  font-size: 16px;
  line-height: 26px;
  color: #4a5565;
}
/* ==========================================================================
   Technologies we use — dark card grid on warm band
   ========================================================================== */
:where(body.page-di) .di-tech { background: linear-gradient(180deg, #ffffff 0%, var(--cream) 100%); }
:where(body.page-di) .di-tech__inner { padding: 60px 128px; }
:where(body.page-di) .di-tech__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
:where(body.page-di) .di-tech-card {
  min-height: 326px;
  box-sizing: border-box;
  padding: 31px 31px 30px;
  background: #0d0d10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
:where(body.page-di) .di-tech-card h3 {
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.3px;
  font-weight: 600;
  color: #f9f4ee;
}
:where(body.page-di) .di-tech-card ul {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
:where(body.page-di) .di-tech-card li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 15px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
  transition: background 0.2s ease, border-color 0.2s ease;
}
:where(body.page-di) .di-tech-card li:hover { background: rgba(255, 91, 31, 0.08); border-color: rgba(255, 91, 31, 0.5); }
:where(body.page-di) .di-tech-card__mark { font-size: 13.5px; font-weight: 700; color: var(--orange); }
/* ==========================================================================
   Data sources — dark panel + logo tiles
   ========================================================================== */
:where(body.page-di) .di-sources__panel {
  margin: 0 28px;
  padding: 60px 92px;
  border-radius: 12px;
  background:
    radial-gradient(65% 65.1% at 0% 100%, rgba(90, 43, 255, 0.22) 0%, rgba(0, 0, 0, 0) 60%),
    radial-gradient(86.7% 78.1% at 80% -10%, rgba(255, 91, 31, 0.18) 0%, rgba(0, 0, 0, 0) 60%),
    #0b0b0c;
}
:where(body.page-di) .di-sources__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 12px;
}
:where(body.page-di) .di-logo-tile {
  width: 136px;
  height: 136px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
:where(body.page-di) .di-logo-tile:hover { transform: translateY(-3px); border-color: rgba(255, 91, 31, 0.5); box-shadow: 0 0 30px -10px rgba(255, 91, 31, 0.5); }
:where(body.page-di) .di-logo-tile img { width: 126px; height: 126px; object-fit: contain; }
:where(body.page-di) .di-logo-tile--text {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white);
}
/* ==========================================================================
   Use cases
   ========================================================================== */
:where(body.page-di) .di-uc__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
:where(body.page-di) .di-uc__card {
  min-height: 245px;
  box-sizing: border-box;
  padding: 34px 32px 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
:where(body.page-di) .di-uc__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border-radius: 12px;
  background: linear-gradient(135deg, #ff5b1f, #5a2bff);
  box-shadow: 0 10px 30px -10px rgba(255, 91, 31, 0.6);
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.3px;
  font-weight: 700;
  color: var(--white);
}
:where(body.page-di) .di-uc__copy h3 {
  margin-top: 22px;
  font-size: 24px;
  line-height: 34px;
  letter-spacing: -0.3px;
  font-weight: 600;
  color: var(--white);
}
:where(body.page-di) .di-uc__copy p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 26px;
  color: rgba(255, 255, 255, 0.8);
}
/* ==========================================================================
   Client success stories
   ========================================================================== */
:where(body.page-di) .di-story { background: #ffffff; }
:where(body.page-di) .di-story__inner { padding: 80px 120px; }
:where(body.page-di) .di-story .di-head { margin-bottom: 48px; }
:where(body.page-di) .di-story__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 55px;
  font-size: 16px;
  line-height: 34px;
  font-weight: 600;
  color: #0b0b0c;
}
:where(body.page-di) .di-story__stars {
  font-size: 22.46px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 1.8px;
  color: #ffb000;
}
:where(body.page-di) .di-story__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
:where(body.page-di) .di-story__card {
  display: flex;
  flex-direction: column;
  min-height: 451px;
  padding: 33px 31px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
:where(body.page-di) .di-story__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}
:where(body.page-di) .di-story__tag {
  display: inline-flex;
  height: 28px;
  align-items: center;
  padding: 0 12px;
  background: rgba(255, 91, 31, 0.15);
  border: 1px solid rgba(255, 91, 31, 0.4);
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffb497;
}
:where(body.page-di) .di-story__stars--sm { font-size: 14px; font-weight: 400; letter-spacing: 2px; }
/* Metric is a centred vertical stack: big number over its label, boxed by
   dashed hairlines top and bottom (Figma 426:1602). */
:where(body.page-di) .di-story__metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: 19px 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
}
:where(body.page-di) .di-story__num {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -1.92px;
  font-weight: 700;
  color: var(--lime);
}
:where(body.page-di) .di-story__metric-label {
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}
:where(body.page-di) .di-story__card blockquote {
  flex: 1;
  margin-top: 32px;
  font-size: 15px;
  line-height: 24px;
  font-style: italic;
  color: #e5e4df;
}
:where(body.page-di) .di-story__author {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 32px;
  padding-top: 18px;
}
:where(body.page-di) .di-story__author::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12) 50%, rgba(255, 255, 255, 0));
}
:where(body.page-di) .di-story__name { font-size: 16px; line-height: 26px; font-weight: 600; color: var(--white); }
:where(body.page-di) .di-story__role { font-size: 12px; line-height: 20px; font-weight: 400; color: rgba(255, 255, 255, 0.8); }
/* ==========================================================================
   Effortless data extraction
   ========================================================================== */
:where(body.page-di) .di-extract__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
:where(body.page-di) .di-extract__card {
  min-height: 280px;
  box-sizing: border-box;
  padding: 49px 39px;
  background: #fdfbf8;
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
:where(body.page-di) .di-extract__card:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -34px rgba(0, 0, 0, 0.18); }
:where(body.page-di) .di-extract__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fff5ee, #fde7d6);
  border: 1px solid rgba(255, 91, 31, 0.25);
}
:where(body.page-di) .di-extract__copy h3 {
  margin-top: 32px;
  font-size: 28px;
  line-height: 38px;
  letter-spacing: -0.5px;
  font-weight: 600;
  color: #0b0b0c;
}
:where(body.page-di) .di-extract__copy p {
  margin-top: 12px;
  font-size: 14px;
  line-height: 22px;
  color: var(--text-muted);
}
/* ==========================================================================
   CTA — consultation receipt
   ========================================================================== */
:where(body.page-di) .di-cta { display: flex; justify-content: center; }
:where(body.page-di) .di-receipt {
  width: 680px;
  max-width: calc(100% - 48px);
  border: 1px solid #e6e3dc;
  border-radius: 12px;
  box-shadow: 0 60px 120px -50px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}
:where(body.page-di) .di-receipt__bar {
  display: block;
  height: 18px;
  background:
    radial-gradient(circle 4px at 50% 50%, var(--cream) 98%, #0b0b0c 100%),
    #0b0b0c;
}
:where(body.page-di) .di-receipt__inner { padding: 54px 49px; text-align: center; }
:where(body.page-di) .di-receipt__kicker {
  display: block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #000000;
}
:where(body.page-di) .di-receipt__title {
  margin-top: 12px;
  font-size: clamp(34px, 3.85vw, 55px);
  line-height: 64px;
  letter-spacing: -1.8px;
  font-weight: 600;
  color: #0b0b0c;
}
:where(body.page-di) .di-receipt__title-grad {
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-di) .di-receipt__sub {
  margin-top: 12px;
  font-size: 18px;
  line-height: 28px;
  color: var(--text-muted);
}
:where(body.page-di) .di-receipt__btn {
  display: flex;
  width: 100%;
  margin-top: 27px;
  justify-content: center;
  font-size: 16px;
  padding: 15px 21px;
  box-shadow: 0 30px 60px -25px rgba(255, 91, 31, 0.7);
}
:where(body.page-di) .di-receipt__btn:hover { box-shadow: 0 34px 66px -22px rgba(255, 91, 31, 0.8); }
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1160px) {
:where(body.page-di) .di-do__inner,
:where(body.page-di) .di-tech__inner { padding: 60px 48px; }
:where(body.page-di) .di-story__inner { padding: 64px 48px; }
:where(body.page-di) .di-sources__panel { margin: 0 16px; padding: 48px 40px; }
:where(body.page-di) .di-journey__arc { display: none; }
}
@media (max-width: 900px) {
:where(body.page-di) .di-why__grid { grid-template-columns: 1fr; }
:where(body.page-di) .di-tech__grid { grid-template-columns: 1fr; }
:where(body.page-di) .di-uc__grid,
:where(body.page-di) .di-story__grid,
:where(body.page-di) .di-extract__grid { grid-template-columns: 1fr; }
:where(body.page-di) .di-journey__cards { grid-template-columns: 1fr; }
:where(body.page-di) .di-do__inner,
:where(body.page-di) .di-tech__inner,
:where(body.page-di) .di-story__inner { padding: 48px 24px; }
:where(body.page-di) .di-sources__panel { padding: 40px 24px; }
:where(body.page-di) .di-do__list > li { gap: 24px; padding: 24px 20px; }
:where(body.page-di) .di-do__num { flex-basis: 70px; }
:where(body.page-di) .di-why,
:where(body.page-di) .di-do,
:where(body.page-di) .di-journey,
:where(body.page-di) .di-tech,
:where(body.page-di) .di-sources,
:where(body.page-di) .di-uc,
:where(body.page-di) .di-story,
:where(body.page-di) .di-extract { margin-top: 80px; }
:where(body.page-di) .di-cta { margin-top: 80px; margin-bottom: 80px; }
:where(body.page-di) .di-banner__text { font-size: 24px; line-height: 34px; }
}
@media (max-width: 640px) {
:where(body.page-di) .di-hero { padding: 92px 20px 48px; }
:where(body.page-di) .di-hero__watermark { display: none; }
:where(body.page-di) .di-hero__title { font-size: 30px; line-height: 40px; letter-spacing: -1px; }
:where(body.page-di) .di-hero__sub { font-size: 16px; line-height: 26px; }
:where(body.page-di) .di-stats { flex-direction: column; align-items: center; gap: 8px; margin-top: 24px; }
:where(body.page-di) .di-stat { padding-block: 4px; }
:where(body.page-di) .di-stats__sep { width: 58px; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.54), rgba(0, 0, 0, 0)); }
:where(body.page-di) .di-banner { gap: 18px; padding: 28px 22px 28px 20px; }
:where(body.page-di) .di-banner__accent { height: 64px; }
:where(body.page-di) .di-banner__text { font-size: 20px; line-height: 30px; letter-spacing: -0.3px; }
:where(body.page-di) .di-do__list > li { flex-direction: column; align-items: flex-start; gap: 8px; min-height: 0; }
:where(body.page-di) .di-sources__grid { justify-content: center; }
:where(body.page-di) .di-receipt__inner { padding: 40px 24px; }
:where(body.page-di) .di-pill,
:where(body.page-di) .di-hero__badge { height: auto; min-height: 30px; padding-top: 8px; padding-bottom: 8px; line-height: 1.25; }
:where(body.page-di) .di-receipt__btn { white-space: normal; font-size: 15px; line-height: 1.3; padding: 14px 18px; }
:where(body.page-di) .di-why,
:where(body.page-di) .di-do,
:where(body.page-di) .di-journey,
:where(body.page-di) .di-tech,
:where(body.page-di) .di-sources,
:where(body.page-di) .di-uc,
:where(body.page-di) .di-story,
:where(body.page-di) .di-extract { margin-top: 64px; }
:where(body.page-di) .di-cta { margin-top: 64px; margin-bottom: 64px; }
}
@media (prefers-reduced-motion: reduce) {
:where(body.page-di) .di-marquee__track { animation: none; }
:where(body.page-di) .di-hero__title,
:where(body.page-di) .di-stat__num,
:where(body.page-di) .di-receipt__title-grad { animation: none; }
:where(body.page-di) .di-step,
:where(body.page-di) .di-uc__card,
:where(body.page-di) .di-extract__card,
:where(body.page-di) .di-logo-tile,
:where(body.page-di) .di-tech-card li { transition: none; }
}
/* ===== devops: page design layer (scoped to body.page-do) ===== */
/* ==========================================================================
   Zemotify — DevOps & Infrastructure page (Figma, 1440x5631)
   Built on styles.css + the service-detail shared layer (sd-*).
   ========================================================================== */
/* ----- Pipeline strip under the hero: commit → observe ----- */
:where(body.page-do) .do-pipe {
  background: var(--sd-band);
  border-top: 1px solid var(--sd-line);
}
:where(body.page-do) .do-pipe__list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-block: 32px 30px;
  text-align: center;
}
/* the line the stops sit on */
:where(body.page-do) .do-pipe__list::before {
  content: "";
  position: absolute;
  top: 41px;
  left: calc(var(--gutter) + 10%);
  right: calc(var(--gutter) + 10%);
  height: 1px;
  background: #d9d5cc;
}
:where(body.page-do) .do-pipe__stop { position: relative; display: flex; flex-direction: column; align-items: center; }
:where(body.page-do) .do-pipe__dot {
  position: relative;
  width: 19px;
  height: 19px;
  border: 1.5px solid #0b0b0c;
  border-radius: 50%;
  background: var(--sd-band);
}
:where(body.page-do) .do-pipe__dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: #0b0b0c; }
:where(body.page-do) .do-pipe__stop--live .do-pipe__dot { border-color: var(--orange); }
:where(body.page-do) .do-pipe__stop--live .do-pipe__dot::after { background: var(--orange); }
:where(body.page-do) .do-pipe__stop strong { margin-top: 14px; font-size: 16px; line-height: 22px; font-weight: 600; }
:where(body.page-do) .do-pipe__stop > span:last-child {
  margin-top: 6px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* ----- Deploy day: two columns, paired line for line ----- */
:where(body.page-do) .do-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
:where(body.page-do) .do-compare__col { padding: 30px 32px 32px; border-radius: 14px; }
:where(body.page-do) .do-compare__col--now { background: #f8f6f2; }
:where(body.page-do) .do-compare__label {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(body.page-do) .do-compare__col--should .do-compare__label { color: rgba(255, 255, 255, 0.6); }
:where(body.page-do) .do-compare__list { margin-top: 18px; }
:where(body.page-do) .do-compare__list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 4px 8px;
  margin-inline: -8px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
}
:where(body.page-do) .do-compare__col--now li { color: #33333a; }
:where(body.page-do) .do-compare__col--now li::before { content: ""; flex: none; width: 14px; height: 1px; background: #c9c5bc; }
:where(body.page-do) .do-compare__col--should li { color: rgba(255, 255, 255, 0.9); }
:where(body.page-do) .do-tick { flex: none; width: 22px; height: 22px; }
:where(body.page-do) .do-tick circle { fill: #22a45d; }
:where(body.page-do) .do-tick path { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* ----- What we automate: five gated stages + the IaC base ----- */
:where(body.page-do) .do-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
:where(body.page-do) .do-stage { display: flex; flex-direction: column; padding: 28px 26px 24px; border-radius: 14px; }
:where(body.page-do) .do-stage__kicker {
  display: block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(body.page-do) .do-stage__title { margin-top: 12px; font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; }
:where(body.page-do) .do-stage__list { margin-top: 14px; color: #33333a; }
:where(body.page-do) .do-stage__list li { position: relative; padding: 4px 0 4px 16px; }
:where(body.page-do) .do-stage__list li::before { content: "›"; position: absolute; left: 0; top: 3px; color: var(--orange); font-weight: 700; }
:where(body.page-do) .do-stage__gate {
  position: relative;
  margin-top: auto;
  padding-top: 16px;
  font-size: 13px;
  line-height: 20px;
  color: #26262b;
}
:where(body.page-do) .do-stage__list + .do-stage__gate { margin-top: 18px; }
:where(body.page-do) .do-stage__gate::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--sd-line);
}
:where(body.page-do) .do-stage__gate b { font-weight: 600; color: var(--orange); }
:where(body.page-do) .do-stage--base { border: 1px solid rgba(255, 255, 255, 0.08); }
:where(body.page-do) .do-stage--base .do-stage__kicker { color: rgba(255, 255, 255, 0.6); }
:where(body.page-do) .do-stage--base .do-stage__list { color: rgba(255, 255, 255, 0.82); }
:where(body.page-do) .do-stage--base .do-stage__gate { color: rgba(255, 255, 255, 0.82); }
:where(body.page-do) .do-stage--base .do-stage__gate::before { background: rgba(255, 255, 255, 0.14); }
/* ----- Observability: the monitoring board ----- */
:where(body.page-do) .do-board {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  background: rgba(8, 8, 10, 0.55);
  overflow: hidden;
}
:where(body.page-do) .do-board__row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 0.9fr) minmax(0, 2.4fr);
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 8px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 14px;
  line-height: 20px;
  color: rgba(255, 255, 255, 0.86);
}
:where(body.page-do) .do-board__row--head {
  min-height: 48px;
  border-top: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
:where(body.page-do) .do-board__svc { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--white); }
:where(body.page-do) .do-board__row .sd-mono { font-size: 12px; color: rgba(255, 255, 255, 0.58); }
:where(body.page-do) .do-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
:where(body.page-do) .do-dot--warn { background: var(--orange); }
:where(body.page-do) .do-board__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
:where(body.page-do) .do-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(body.page-do) .do-board__row { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.8fr) minmax(0, 0.9fr); }
:where(body.page-do) .do-board__row > :last-child { grid-column: 1 / -1; margin-top: -6px; }
:where(body.page-do) .do-board__row--head > :last-child { display: none; }
}
@media (max-width: 768px) {
:where(body.page-do) .do-pipe__list { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: 26px 22px; }
:where(body.page-do) .do-pipe__list::before { top: 35px; }
:where(body.page-do) .do-pipe__stop strong { font-size: 13px; }
:where(body.page-do) .do-pipe__stop > span:last-child { font-size: 9.5px; letter-spacing: 1px; }
:where(body.page-do) .do-compare { grid-template-columns: minmax(0, 1fr); }
:where(body.page-do) .do-compare__col { padding: 24px 22px; }
:where(body.page-do) .do-compare__list li { font-size: 15px; }
:where(body.page-do) .do-stages { grid-template-columns: minmax(0, 1fr); }
:where(body.page-do) .do-board__row--head { display: none; }
:where(body.page-do) .do-board__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: 14px 18px;
  }
:where(body.page-do) .do-board__row > :nth-child(2) { text-align: right; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
:where(body.page-do) .do-board__row > :nth-child(3)::before { content: "p95 "; color: rgba(255, 255, 255, 0.45); }
:where(body.page-do) .do-board__row > :nth-child(4)::before { content: "errors "; color: rgba(255, 255, 255, 0.45); }
:where(body.page-do) .do-board__row > :nth-child(3),
:where(body.page-do) .do-board__row > :nth-child(4) { font-size: 13px; }
:where(body.page-do) .do-board__row > :nth-child(4) { text-align: right; }
:where(body.page-do) .do-board__row > :last-child { grid-column: 1 / -1; margin-top: 2px; }
:where(body.page-do) .do-board__foot { padding: 14px 18px; }
}
@media (max-width: 420px) {
:where(body.page-do) .do-pipe__stop > span:last-child { display: none; }
}
/* ===== saas: page design layer (scoped to body.page-saas) ===== */
/* ==========================================================================
   Zemotify — SaaS Platforms page (Figma, 1440x6846)
   Built on styles.css + the service-detail shared layer (sd-*).
   ========================================================================== */
/* ----- Hero: the five layers, stacked and narrowing like a cross-section ----- */
:where(body.page-saas) .saas-stack { max-width: 980px; margin: 34px auto 0; }
:where(body.page-saas) .saas-stack ol { display: flex; flex-direction: column; align-items: center; gap: 8px; }
:where(body.page-saas) .saas-stack li { width: calc(100% - var(--i, 0) * 60px); }
:where(body.page-saas) .saas-stack li:nth-child(2) { --i: 1; }
:where(body.page-saas) .saas-stack li:nth-child(3) { --i: 2; }
:where(body.page-saas) .saas-stack li:nth-child(4) { --i: 3; }
:where(body.page-saas) .saas-stack li:nth-child(5) { --i: 4; }
:where(body.page-saas) .saas-stack a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(124, 58, 237, 0.75);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.35);
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #5a2bff;
}
:where(body.page-saas) .saas-stack__n { color: #131316; letter-spacing: 1.4px; }
:where(body.page-saas) .saas-stack .is-hot a { border-color: rgba(255, 91, 31, 0.8); background: rgba(255, 91, 31, 0.07); color: var(--orange); }
:where(body.page-saas) .saas-stack .is-hot .saas-stack__n { color: var(--orange); }
/* ----- The shape of the problem: platform card + three tenants ----- */
:where(body.page-saas) .saas-tenancy__grid { display: grid; grid-template-columns: 318px minmax(0, 1fr); gap: 42px; align-items: start; }
:where(body.page-saas) .saas-platform { padding: 24px 24px 26px; }
:where(body.page-saas) .saas-platform h3 { margin-top: 22px; font-size: 24px; line-height: 30px; font-weight: 600; }
:where(body.page-saas) .saas-platform__sub { margin-top: 6px; font-size: 14.5px; line-height: 22px; color: var(--text-muted); }
:where(body.page-saas) .saas-platform__list { margin-top: 18px; display: grid; gap: 12px; }
:where(body.page-saas) .saas-platform__list div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: 14px; line-height: 21px; }
:where(body.page-saas) .saas-platform__list dt { font-weight: 600; color: #131316; }
:where(body.page-saas) .saas-platform__list dd { color: var(--text-muted); }
:where(body.page-saas) .saas-tenants__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
:where(body.page-saas) .saas-tenant {
  padding: 18px 20px 20px;
  border: 1px solid var(--sd-line);
  border-radius: 12px;
  background: #faf8f4;
}
:where(body.page-saas) .saas-tenant h3 { font-size: 17px; line-height: 24px; font-weight: 600; }
:where(body.page-saas) .saas-tenant p { margin-top: 6px; min-height: 40px; font-size: 13px; line-height: 20px; color: var(--text-muted); }
:where(body.page-saas) .saas-tenant__meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 16px; }
:where(body.page-saas) .saas-tenant__meter i { height: 5px; border-radius: 3px; background: #ebe7df; }
:where(body.page-saas) .saas-tenant__meter i:first-child { background: #0b0b0c; }
:where(body.page-saas) .saas-tenant--ent { border-color: var(--orange); background: var(--white); }
:where(body.page-saas) .saas-tenant--ent .saas-tenant__meter i:first-child { background: var(--orange); }
:where(body.page-saas) .saas-boundary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
:where(body.page-saas) .saas-boundary::before,
:where(body.page-saas) .saas-boundary::after { content: ""; flex: 1; height: 1px; background: #d9d5cc; }
:where(body.page-saas) .saas-tenancy__note { margin-top: 34px; max-width: 760px; font-size: 16.5px; line-height: 27px; color: var(--text-muted); }
/* ----- Five layers: tablist + panel ----- */
:where(body.page-saas) .saas-layers__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
:where(body.page-saas) .saas-tabs { display: grid; gap: 10px; }
:where(body.page-saas) .saas-tab {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 22px 26px 22px 22px;
  border: 1px solid var(--sd-line);
  border-radius: 12px;
  background: var(--white);
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
}
:where(body.page-saas) .saas-tab__n { font-size: 12px; letter-spacing: 1px; color: var(--text-muted); }
:where(body.page-saas) .saas-tab__copy strong { display: block; font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -0.2px; }
:where(body.page-saas) .saas-tab__copy span { display: block; margin-top: 2px; font-size: 14px; line-height: 21px; color: var(--text-muted); }
:where(body.page-saas) .saas-tab__dot { width: 11px; height: 11px; border: 1px solid #d9d5cc; border-radius: 50%; }
/* selected tab: the page's dark wash */
:where(body.page-saas) .saas-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--sd-wash);
  opacity: 0;
}
:where(body.page-saas) .saas-tab[aria-selected="true"] { border-color: #0b0b0c; color: var(--white); }
:where(body.page-saas) .saas-tab[aria-selected="true"]::before { opacity: 1; }
:where(body.page-saas) .saas-tab[aria-selected="true"] .saas-tab__n { color: rgba(255, 255, 255, 0.7); }
:where(body.page-saas) .saas-tab[aria-selected="true"] .saas-tab__copy span { color: rgba(255, 255, 255, 0.72); }
:where(body.page-saas) .saas-tab[aria-selected="true"] .saas-tab__dot { border-color: var(--orange); background: var(--orange); }
:where(body.page-saas) .saas-tab:focus-visible { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 3px; }
:where(body.page-saas) .saas-panels { padding: 30px 30px 32px; background: #faf8f4; min-height: 100%; }
:where(body.page-saas) .saas-panel:focus-visible { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 8px; border-radius: 6px; }
:where(body.page-saas) .saas-panel__n { display: block; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); }
:where(body.page-saas) .saas-panel h3 { margin-top: 6px; font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.6px; }
:where(body.page-saas) .saas-panel__lead { margin-top: 14px; font-size: 16px; line-height: 26px; color: var(--text-muted); }
:where(body.page-saas) .saas-panel h4 {
  margin-top: 22px;
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(body.page-saas) .saas-panel ul { margin-top: 8px; display: grid; gap: 7px; }
:where(body.page-saas) .saas-panel li { position: relative; padding-left: 16px; font-size: 14.5px; line-height: 22px; color: #1b1b20; }
:where(body.page-saas) .saas-panel li::before { content: ""; position: absolute; left: 1px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: #131316; }
:where(body.page-saas) .saas-panel h4 + ul li::before { background: var(--orange); }
:where(body.page-saas) .saas-panel h4 ~ h4 + ul li::before { background: #131316; }
/* ----- Account model: nested containment ----- */
:where(body.page-saas) .saas-nest { padding: 34px; }
:where(body.page-saas) .saas-nest__box { border: 1px solid var(--sd-line); border-radius: 12px; padding: 18px 18px 18px; background: #faf8f4; }
:where(body.page-saas) .saas-nest__box--ws { margin-top: 16px; background: var(--white); }
:where(body.page-saas) .saas-nest__box--members { margin-top: 16px; background: #faf8f4; }
:where(body.page-saas) .saas-nest__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
:where(body.page-saas) .saas-nest__head h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
:where(body.page-saas) .saas-nest__head p { margin-top: 2px; font-size: 14px; line-height: 21px; color: var(--text-muted); }
:where(body.page-saas) .saas-nest__tag {
  flex: none;
  padding: 4px 12px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 11px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #2a2a2e;
  white-space: nowrap;
}
:where(body.page-saas) .saas-roles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
:where(body.page-saas) .saas-roles li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 13.5px;
  line-height: 20px;
}
:where(body.page-saas) .saas-roles li::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: #ebe7df; box-sizing: border-box; }
:where(body.page-saas) .saas-roles li.is-on::before { background: var(--white); border: 5px solid var(--orange); }
/* ----- Billing: case → handling rows ----- */
:where(body.page-saas) .saas-cases { border-top: 1px solid #d9d5cc; }
:where(body.page-saas) .saas-case {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 40px;
  padding: 28px 0;
  border-bottom: 1px solid #d9d5cc;
}
:where(body.page-saas) .saas-case h3 { font-size: 19px; line-height: 27px; font-weight: 600; letter-spacing: -0.2px; }
:where(body.page-saas) .saas-case p { font-size: 15.5px; line-height: 25px; color: var(--text-muted); }
/* ----- Public API: endpoint console + features ----- */
:where(body.page-saas) .saas-api__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: center; }
:where(body.page-saas) .saas-console {
  border-radius: 14px;
  background: #0b0b0c;
  color: var(--white);
  overflow: hidden;
  padding-bottom: 26px;
}
:where(body.page-saas) .saas-console__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11.5px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
:where(body.page-saas) .saas-console__bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); }
:where(body.page-saas) .saas-console__bar span { margin-left: 10px; }
:where(body.page-saas) .saas-console__rows li {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
:where(body.page-saas) .saas-console__rows code { font-family: var(--sd-mono); font-size: 13.5px; color: rgba(255, 255, 255, 0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:where(body.page-saas) .saas-console__rows em { font-style: normal; font-size: 11.5px; color: rgba(255, 255, 255, 0.45); }
:where(body.page-saas) .saas-verb { display: grid; place-items: center; height: 28px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: 1.4px; }
:where(body.page-saas) .saas-verb--get { background: rgba(34, 164, 93, 0.16); color: #4ade80; }
:where(body.page-saas) .saas-verb--post { background: rgba(255, 91, 31, 0.18); color: #ff8a5c; }
:where(body.page-saas) .saas-verb--del { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.7); }
:where(body.page-saas) .saas-api__features { display: grid; gap: 4px; }
:where(body.page-saas) .saas-api__feature { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 16px; padding: 14px 12px; margin-inline: -12px; border-radius: 12px; }
:where(body.page-saas) .saas-api__feature h3 { font-size: 19px; line-height: 26px; font-weight: 600; }
:where(body.page-saas) .saas-api__feature p { margin-top: 3px; font-size: 14px; line-height: 22px; color: var(--text-muted); }
/* ----- Operational reliability: four dark cards ----- */
:where(body.page-saas) .saas-rel__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
:where(body.page-saas) .saas-rel__card {
  padding: 26px 26px 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
:where(body.page-saas) .saas-rel__card h3 { margin-top: 24px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--white); }
:where(body.page-saas) .saas-rel__card p { margin-top: 10px; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, 0.72); }
:where(body.page-saas) .saas-laptop { width: 930px; }
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
:where(body.page-saas) .saas-tenancy__grid { grid-template-columns: minmax(0, 1fr); }
:where(body.page-saas) .saas-layers__grid { grid-template-columns: minmax(0, 1fr); }
:where(body.page-saas) .saas-rel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(body.page-saas) .saas-api__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
:where(body.page-saas) .saas-stack li { width: calc(100% - var(--i, 0) * 16px); }
:where(body.page-saas) .saas-stack a { height: 38px; padding: 0 12px; font-size: 10.5px; letter-spacing: 1.2px; }
:where(body.page-saas) .saas-tenants__row { grid-template-columns: minmax(0, 1fr); }
:where(body.page-saas) .saas-tenant p { min-height: 0; }
:where(body.page-saas) .saas-tab { padding: 16px 16px; grid-template-columns: 24px minmax(0, 1fr) 12px; gap: 10px; }
:where(body.page-saas) .saas-tab__copy strong { font-size: 16.5px; line-height: 23px; }
:where(body.page-saas) .saas-tab__copy span { font-size: 13px; line-height: 19px; }
:where(body.page-saas) .saas-panels { padding: 24px 20px; }
:where(body.page-saas) .saas-panel h3 { font-size: 23px; line-height: 29px; }
:where(body.page-saas) .saas-nest { padding: 14px; }
:where(body.page-saas) .saas-nest__box { padding: 14px; }
:where(body.page-saas) .saas-nest__head { flex-direction: column; gap: 10px; }
:where(body.page-saas) .saas-case { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 22px 0; }
:where(body.page-saas) .saas-case h3 { font-size: 17.5px; }
:where(body.page-saas) .saas-case p { font-size: 15px; }
:where(body.page-saas) .saas-console__rows li { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 11px 12px; }
:where(body.page-saas) .saas-console__rows em { display: none; }
:where(body.page-saas) .saas-console__rows code { font-size: 12px; }
:where(body.page-saas) .saas-rel__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
:where(body.page-saas) .saas-stack__n { display: none; }
:where(body.page-saas) .saas-stack a { justify-content: center; }
}
/* ===== web-mobile: page design layer (scoped to body.page-wm) ===== */
/* ==========================================================================
   Zemotify — Web & Mobile Development page (Figma, 1440x6405)
   Built on styles.css + the service-detail shared layer (sd-*).
   ========================================================================== */
/* ----- Architecture: three surfaces wired to one core ----- */
:where(body.page-wm) .wm-surfaces { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
:where(body.page-wm) .wm-surface { padding: 26px 26px 28px; }
:where(body.page-wm) .wm-surface h3 { margin-top: 20px; font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; }
:where(body.page-wm) .wm-surface p { margin-top: 8px; font-size: 14.5px; line-height: 23px; color: var(--text-muted); }
:where(body.page-wm) .wm-surface__list { margin-top: 16px; display: grid; gap: 8px; }
:where(body.page-wm) .wm-surface__list li { position: relative; padding-left: 15px; font-size: 14px; line-height: 21px; color: #26262b; }
:where(body.page-wm) .wm-surface__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
:where(body.page-wm) .wm-wires { display: block; width: 100%; height: 70px; overflow: visible; }
:where(body.page-wm) .wm-wire { fill: none; stroke: #d6d1c7; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
:where(body.page-wm) .wm-wire--core { stroke: var(--orange); }
:where(body.page-wm) .wm-core {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 26px 30px;
  border-radius: 14px;
}
:where(body.page-wm) .wm-core__title { flex: none; display: flex; flex-direction: column; max-width: 280px; }
:where(body.page-wm) .wm-core__title span {
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
:where(body.page-wm) .wm-core__title strong { margin-top: 4px; font-size: 22px; line-height: 30px; font-weight: 600; }
:where(body.page-wm) .wm-core__chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-left: auto; }
:where(body.page-wm) .wm-core__chips li {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
}
/* ----- Process: four handoffs on a centre line ----- */
:where(body.page-wm) .wm-steps { position: relative; display: grid; gap: 56px; }
:where(body.page-wm) .wm-steps::before,
:where(body.page-wm) .wm-steps::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  bottom: 22px;
  width: 2px;
  margin-left: -1px;
  background: #d9d5cc;
}
/* progress: fills as you read (initSteps writes --zm-progress) */
:where(body.page-wm) .wm-steps::after { background: linear-gradient(180deg, #ff5b1f, #5a2bff); transform-origin: top; transform: scaleY(var(--zm-progress, 0)); }
:where(body.page-wm) .wm-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
:where(body.page-wm) .wm-step__main { grid-column: 1; text-align: right; }
:where(body.page-wm) .wm-step__node { grid-column: 2; grid-row: 1; }
:where(body.page-wm) .wm-step__hand { grid-column: 3; grid-row: 1; }
:where(body.page-wm) .wm-step--flip .wm-step__main { grid-column: 3; text-align: left; }
:where(body.page-wm) .wm-step--flip .wm-step__hand { grid-column: 1; text-align: right; }
:where(body.page-wm) .wm-step__main h3 { font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.5px; }
:where(body.page-wm) .wm-step__main p { margin-top: 10px; font-size: 16px; line-height: 26px; color: var(--text-muted); }
:where(body.page-wm) .wm-step__main .sd-chips { margin-top: 14px; justify-content: flex-end; }
:where(body.page-wm) .wm-step--flip .wm-step__main .sd-chips { justify-content: flex-start; }
:where(body.page-wm) .wm-step__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1.5px solid #0b0b0c;
  border-radius: 50%;
  background: var(--sd-band);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
:where(body.page-wm) .wm-step__hand { padding-top: 8px; font-size: 14px; line-height: 22px; color: var(--text-muted); }
:where(body.page-wm) .wm-step__hand b { font-weight: 600; color: #131316; }
/* ----- What we build: offering × surface matrix ----- */
:where(body.page-wm) .wm-matrix { overflow: hidden; }
:where(body.page-wm) .wm-matrix table { width: 100%; border-collapse: collapse; table-layout: fixed; }
:where(body.page-wm) .wm-matrix thead th {
  padding: 18px 22px;
  background: #faf8f4;
  border-bottom: 1px solid var(--sd-line);
  text-align: left;
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-muted);
}
:where(body.page-wm) .wm-matrix thead th:first-child { width: 31%; }
:where(body.page-wm) .wm-matrix tbody tr + tr { border-top: 1px solid var(--sd-line); }
:where(body.page-wm) .wm-matrix tbody th,
:where(body.page-wm) .wm-matrix tbody td { padding: 22px; vertical-align: top; text-align: left; }
:where(body.page-wm) .wm-matrix tbody th strong { display: block; font-size: 18px; line-height: 25px; font-weight: 600; }
:where(body.page-wm) .wm-matrix tbody th span { display: block; margin-top: 6px; font-size: 13px; line-height: 20px; font-weight: 400; color: var(--text-muted); }
:where(body.page-wm) .wm-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #9a9690;
}
:where(body.page-wm) .wm-mark::before { content: ""; flex: none; width: 18px; height: 18px; border: 1px solid #d9d5cc; border-radius: 50%; box-sizing: border-box; }
:where(body.page-wm) .wm-mark--yes { color: #131316; }
:where(body.page-wm) .wm-mark--yes::before {
  border: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / 12px no-repeat,
    #22a45d;
}
/* ----- Targets: what we hold ourselves to ----- */
:where(body.page-wm) .wm-targets__list { border-top: 1px solid #d9d5cc; }
:where(body.page-wm) .wm-target {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
  align-items: center;
  gap: 32px;
  padding: 30px 4px;
  border-bottom: 1px solid #d9d5cc;
}
:where(body.page-wm) .wm-target h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
:where(body.page-wm) .wm-target p { font-size: 15px; line-height: 25px; color: var(--text-muted); }
:where(body.page-wm) .wm-target__value { justify-self: end; font-size: clamp(22px, 2vw, 27px); line-height: 34px; font-weight: 600; letter-spacing: -0.4px; white-space: nowrap; }
:where(body.page-wm) .wm-target__value em { font-style: normal; color: var(--orange); }
/* ----- Typical stack ----- */
:where(body.page-wm) .wm-stack__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
:where(body.page-wm) .wm-stack__card { padding: 26px 26px 28px; }
:where(body.page-wm) .wm-stack__card h3 { font-size: 21px; line-height: 28px; font-weight: 600; }
:where(body.page-wm) .wm-stack__card p { margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--text-muted); }
:where(body.page-wm) .wm-stack__card .sd-chips { margin-top: 18px; }
/* ----- Next step: three starting points ----- */
:where(body.page-wm) .wm-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
:where(body.page-wm) .wm-path { position: relative; display: flex; flex-direction: column; padding: 38px 30px 34px; min-height: 420px; }
:where(body.page-wm) .wm-path + .wm-path { border-left: 1px solid var(--sd-line); }
:where(body.page-wm) .wm-path--featured { background: #faf8f4; }
:where(body.page-wm) .wm-path__kicker { display: block; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: #2a2a2e; }
:where(body.page-wm) .wm-path h3 { margin-top: 18px; font-size: 21px; line-height: 30px; font-weight: 600; letter-spacing: -0.2px; }
:where(body.page-wm) .wm-path p { margin-top: 14px; font-size: 14.5px; line-height: 23px; color: var(--text-muted); }
:where(body.page-wm) .wm-path__link {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 36px;
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  color: #131316;
}
:where(body.page-wm) .wm-path__link span { max-width: 130px; }
/* the whole column is the link's hit area */
:where(body.page-wm) .wm-path__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
:where(body.page-wm) .wm-path__link:focus-visible { outline: none; }
:where(body.page-wm) .wm-path:has(.wm-path__link:focus-visible) { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: -4px; }
:where(body.page-wm) .wm-path__arrow { width: 104px; height: 104px; flex: none; color: #0b0b0c; }
:where(body.page-wm) .wm-path--featured .wm-path__link,
:where(body.page-wm) .wm-path--featured .wm-path__arrow { color: var(--orange); }
:where(body.page-wm) .wm-next__foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 32px; }
:where(body.page-wm) .wm-next__foot p { font-size: 16px; line-height: 24px; color: var(--text-muted); }
:where(body.page-wm) .wm-next__btn { padding: 17px 22px; font-size: 16px; }
:where(body.page-wm) .wm-next__btn svg { transition: transform var(--dur) var(--ease); }
:where(body.page-wm) .wm-next__btn:hover svg { transform: translate(2px, -2px); }
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
:where(body.page-wm) .wm-core { flex-wrap: wrap; }
:where(body.page-wm) .wm-core__chips { justify-content: flex-start; margin-left: 0; width: 100%; }
:where(body.page-wm) .wm-path__arrow { width: 76px; height: 76px; }
}
@media (max-width: 860px) {
:where(body.page-wm) .wm-surfaces { grid-template-columns: minmax(0, 1fr); }
:where(body.page-wm) .wm-wires { display: none; }
:where(body.page-wm) .wm-core { margin-top: 22px; }
:where(body.page-wm) .wm-paths { grid-template-columns: minmax(0, 1fr); }
:where(body.page-wm) .wm-path { min-height: 0; }
:where(body.page-wm) .wm-path + .wm-path { border-left: 0; border-top: 1px solid var(--sd-line); }
:where(body.page-wm) .wm-path__arrow { width: 56px; height: 56px; }
:where(body.page-wm) .wm-target { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 20px; }
:where(body.page-wm) .wm-target p { grid-column: 1 / -1; grid-row: 2; }
:where(body.page-wm) .wm-target__value { grid-row: 1; grid-column: 2; }
}
@media (max-width: 768px) {
:where(body.page-wm) .wm-steps { gap: 36px; }
:where(body.page-wm) .wm-steps::before,
:where(body.page-wm) .wm-steps::after { left: 21px; }
:where(body.page-wm) .wm-step,
:where(body.page-wm) .wm-step--flip { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 16px; }
:where(body.page-wm) .wm-step__node { grid-column: 1; grid-row: 1 / span 2; }
:where(body.page-wm) .wm-step__main,
:where(body.page-wm) .wm-step--flip .wm-step__main { grid-column: 2; grid-row: 1; text-align: left; }
:where(body.page-wm) .wm-step__hand,
:where(body.page-wm) .wm-step--flip .wm-step__hand { grid-column: 2; grid-row: 2; text-align: left; padding-top: 0; }
:where(body.page-wm) .wm-step__main .sd-chips { justify-content: flex-start; }
:where(body.page-wm) .wm-step__main h3 { font-size: 22px; line-height: 28px; }
:where(body.page-wm) .wm-step__main p { font-size: 15px; line-height: 24px; }
/* matrix → one card per offering */
:where(body.page-wm) .wm-matrix table,
:where(body.page-wm) .wm-matrix tbody,
:where(body.page-wm) .wm-matrix tr,
:where(body.page-wm) .wm-matrix th,
:where(body.page-wm) .wm-matrix td { display: block; width: auto; }
:where(body.page-wm) .wm-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:where(body.page-wm) .wm-matrix tbody tr { padding: 18px 18px 14px; }
:where(body.page-wm) .wm-matrix tbody th { padding: 0 0 10px; }
:where(body.page-wm) .wm-matrix tbody td { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px dashed var(--sd-line); }
:where(body.page-wm) .wm-matrix tbody td::before {
    content: attr(data-label);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
  }
:where(body.page-wm) .wm-core__title strong { font-size: 19px; line-height: 26px; }
:where(body.page-wm) .wm-stack__grid { grid-template-columns: minmax(0, 1fr); }
:where(body.page-wm) .wm-next__foot { flex-direction: column; align-items: flex-start; }
}
/* ===== careers: page design layer (scoped to body.page-careers) ===== */
/* ==========================================================================
   Zemotify — Teams & Careers page (Figma, 1440x3950)
   Built on styles.css + the service-detail shared layer (sd-*).
   ========================================================================== */
/* ----- Hero: the design sets the title in capitals ----- */
:where(body.page-careers) .ca-hero__title { text-transform: uppercase; letter-spacing: -1.4px; }
:where(body.page-careers) .ca-hero__quote { max-width: 720px; font-size: 18.5px; }
:where(body.page-careers) .ca-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 26px;
  margin-top: 30px;
}
:where(body.page-careers) .ca-hero__link {
  position: relative;
  font-size: 15px;
  font-weight: 600;
  color: #131316;
  padding-block: 4px;
}
:where(body.page-careers) .ca-hero__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--orange);
  transform-origin: left;
}
:where(body.page-careers) .ca-hero + .sd-page > .sd-section:first-child { border-top: 1px solid var(--sd-line); }
/* ----- Culture: three numbered values ----- */
:where(body.page-careers) .ca-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
:where(body.page-careers) .ca-value { padding: 30px 30px 34px; overflow: hidden; }
:where(body.page-careers) .ca-value__n {
  display: block;
  font-family: var(--sd-mono);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--orange);
}
:where(body.page-careers) .ca-value h3 { margin-top: 18px; font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.6px; }
:where(body.page-careers) .ca-value p { margin-top: 12px; font-size: 15.5px; line-height: 25px; color: var(--text-muted); }
/* ----- Benefits: six perks ----- */
:where(body.page-careers) .ca-perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
:where(body.page-careers) .ca-perk { padding: 28px 28px 30px; }
:where(body.page-careers) .ca-perk__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: rgba(255, 91, 31, 0.08);
  color: var(--orange);
}
:where(body.page-careers) .ca-perk__icon svg { width: 22px; height: 22px; }
:where(body.page-careers) .ca-perk h3 { margin-top: 20px; font-size: 19.5px; line-height: 27px; font-weight: 600; letter-spacing: -0.2px; }
:where(body.page-careers) .ca-perk p { margin-top: 8px; font-size: 15px; line-height: 24px; color: var(--text-muted); }
/* ----- Open roles ----- */
:where(body.page-careers) .ca-roles__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; line-height: 0; }
:where(body.page-careers) .ca-roles__head .section-title { margin-top: 17px; line-height: 1.3; }
:where(body.page-careers) .ca-roles__head .section-sub { margin-top: 12px; line-height: 28px; }
:where(body.page-careers) .ca-roles__pill { gap: 9px; }
:where(body.page-careers) .ca-live { width: 7px; height: 7px; border-radius: 50%; background: #22a45d; }
:where(body.page-careers) .ca-roles__all { flex: none; padding: 13px 18px; font-size: 14.5px; }
:where(body.page-careers) .ca-jobs { margin-top: 44px; border-top: 1px solid var(--sd-line); }
:where(body.page-careers) .ca-job {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--sd-line);
}
/* hover surface sits just outside the row, so the dividers stay straight */
:where(body.page-careers) .ca-job::before {
  content: "";
  position: absolute;
  inset: 6px -16px;
  z-index: -1;
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 18px 40px -30px rgba(19, 19, 22, 0.35);
  opacity: 0;
}
:where(body.page-careers) .ca-job__avatar {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #efeae2, #d7d1c7);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
:where(body.page-careers) .ca-job__avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
:where(body.page-careers) .ca-job h3 { font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
:where(body.page-careers) .ca-job__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
:where(body.page-careers) .ca-job__meta li {
  padding: 3px 11px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12.5px;
  line-height: 18px;
  color: #2a2a2e;
}
:where(body.page-careers) .ca-job__apply {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 14px 28px -14px rgba(255, 91, 31, 0.8);
}
/* the whole row applies (the button stays the visible target) */
:where(body.page-careers) .ca-job__apply::after { content: ""; position: absolute; inset: 6px -16px; border-radius: 14px; }
:where(body.page-careers) .ca-job__apply:focus-visible { outline: none; }
:where(body.page-careers) .ca-job:has(.ca-job__apply:focus-visible) { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 2px; }
:where(body.page-careers) .ca-jobs__note { margin-top: 18px; font-size: 13.5px; line-height: 21px; color: var(--text-muted); }
/* ----- How to apply: copyable email + subject ----- */
:where(body.page-careers) .ca-laptop { width: 820px; }
:where(body.page-careers) .ca-steps { display: grid; gap: 10px; max-width: 560px; margin: 30px auto 0; text-align: left; }
:where(body.page-careers) .ca-step {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 12px 12px 18px;
  border: 1px solid var(--sd-line);
  border-radius: 14px;
  background: var(--white);
}
:where(body.page-careers) .ca-step__label { font-size: 11.5px; line-height: 18px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-muted); }
:where(body.page-careers) .ca-email {
  justify-self: start;
  font-size: clamp(18px, 2vw, 24px);
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: #131316;
  background: linear-gradient(90deg, var(--orange), var(--orange)) 0 100% / 100% 2px no-repeat;
  overflow-wrap: anywhere;
}
:where(body.page-careers) .ca-subject {
  justify-self: start;
  padding: 6px 12px;
  border-radius: 8px;
  background: #f1ebff;
  font-family: var(--sd-mono);
  font-size: 13.5px;
  line-height: 20px;
  color: #2a1a5e;
}
:where(body.page-careers) .ca-copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: #faf8f4;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #2a2a2e;
  cursor: pointer;
}
:where(body.page-careers) .ca-copy svg { width: 14px; height: 14px; }
:where(body.page-careers) .ca-copy:focus-visible { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 2px; }
:where(body.page-careers) .ca-copy.is-copied { border-color: rgba(34, 164, 93, 0.45); background: rgba(34, 164, 93, 0.08); color: #157a43; }
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
:where(body.page-careers) .ca-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
:where(body.page-careers) .ca-values { grid-template-columns: minmax(0, 1fr); }
:where(body.page-careers) .ca-roles__head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
:where(body.page-careers) .ca-perks { grid-template-columns: minmax(0, 1fr); }
:where(body.page-careers) .ca-value h3 { font-size: 23px; line-height: 29px; }
:where(body.page-careers) .ca-job { grid-template-columns: 56px minmax(0, 1fr); gap: 14px 16px; padding: 20px 0; }
:where(body.page-careers) .ca-job::before,
:where(body.page-careers) .ca-job__apply::after { inset: 4px -10px; }
:where(body.page-careers) .ca-job__avatar { width: 56px; height: 56px; }
:where(body.page-careers) .ca-job h3 { font-size: 18px; line-height: 25px; }
:where(body.page-careers) .ca-job__apply { grid-column: 2; justify-self: start; padding: 11px 18px; font-size: 14px; }
:where(body.page-careers) .ca-step { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 12px 12px 14px; }
:where(body.page-careers) .ca-step__label { grid-column: 1 / -1; }
:where(body.page-careers) .ca-email { font-size: 17px; line-height: 26px; }
:where(body.page-careers) .ca-subject { font-size: 12px; }
}
/* ===== contact: page design layer (scoped to body.page-contact) ===== */
/* ==========================================================================
   Zemotify — Contact page (Figma, 1440x3940)
   Built on styles.css + the service-detail shared layer (sd-*).
   ========================================================================== */
:where(body.page-contact) .co-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ----- Hero: the three contact facts sit right under the promise ----- */
:where(body.page-contact) .co-hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
:where(body.page-contact) .co-hero__facts li {
  padding: 7px 15px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: var(--white);
  font-size: 13.5px;
  line-height: 20px;
  color: #2a2a2e;
}
:where(body.page-contact) .co-hero__facts a { color: #131316; font-weight: 600; }
:where(body.page-contact) .co-hero + .sd-page > .sd-section:first-child { border-top: 1px solid var(--sd-line); }
/* ----- Form + aside ----- */
:where(body.page-contact) .co-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; align-items: start; }
:where(body.page-contact) .co-form { padding: 36px 32px 32px; }
:where(body.page-contact) .co-form__kicker,
:where(body.page-contact) .co-card__kicker {
  display: block;
  font-size: 12px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #c2410c;
}
:where(body.page-contact) .co-form__req { margin-top: 6px; font-size: 13px; line-height: 20px; color: var(--text-muted); }
/* aside */
:where(body.page-contact) .co-aside { display: grid; gap: 22px; position: sticky; top: 110px; }
:where(body.page-contact) .co-card { padding: 28px 28px 30px; }
:where(body.page-contact) .co-detail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; margin-top: 18px; }
:where(body.page-contact) .co-detail + .co-detail { padding-top: 18px; border-top: 1px solid var(--sd-line); }
:where(body.page-contact) .co-detail__main { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.2px; color: #131316; overflow-wrap: anywhere; }
:where(body.page-contact) .co-detail__sub { grid-column: 1; font-size: 13.5px; line-height: 20px; color: var(--text-muted); }
:where(body.page-contact) .co-copy {
  grid-row: 1 / span 2;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--sd-line);
  border-radius: 999px;
  background: #faf8f4;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: #2a2a2e;
  cursor: pointer;
}
:where(body.page-contact) .co-copy svg { width: 13px; height: 13px; }
:where(body.page-contact) .co-copy.is-copied { border-color: rgba(34, 164, 93, 0.45); background: rgba(34, 164, 93, 0.08); color: #157a43; }
:where(body.page-contact) .co-next { margin-top: 12px; }
:where(body.page-contact) .co-next li {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--sd-line);
  font-size: 16px;
  line-height: 23px;
  font-weight: 600;
}
:where(body.page-contact) .co-next li:last-child { border-bottom: 0; padding-bottom: 0; }
:where(body.page-contact) .co-next span { font-family: var(--sd-mono); font-size: 13px; font-weight: 400; color: #c2410c; }
:where(body.page-contact) .co-card--quiet h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
:where(body.page-contact) .co-card--quiet p { margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--text-muted); }
:where(body.page-contact) .co-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 11px 20px;
  border: 1px solid #d9d5cc;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 600;
  color: #131316;
}
/* ----- Global delivery (dark) ----- */
:where(body.page-contact) .co-global__head { max-width: 820px; line-height: 0; }
:where(body.page-contact) .co-global__head .section-title { margin-top: 17px; line-height: 1.3; }
:where(body.page-contact) .co-global__lead { margin-top: 18px; font-size: clamp(20px, 2vw, 26px); line-height: 1.4; font-weight: 600; letter-spacing: -0.4px; color: var(--white); }
:where(body.page-contact) .co-global__head .section-sub { margin-top: 12px; line-height: 28px; }
:where(body.page-contact) .co-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 48px; }
:where(body.page-contact) .co-stat {
  padding: 26px 26px 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}
:where(body.page-contact) .co-stat__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; background: var(--orange); color: var(--white); }
:where(body.page-contact) .co-stat__icon svg { width: 21px; height: 21px; }
:where(body.page-contact) .co-stat__label { display: block; margin-top: 28px; font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); }
:where(body.page-contact) .co-stat__value { display: block; margin-top: 6px; font-size: 24px; line-height: 32px; font-weight: 600; color: var(--white); white-space: nowrap; }
/* ----- Delivery timeline ----- */
:where(body.page-contact) .co-steps { position: relative; max-width: 760px; margin-inline: auto; }
:where(body.page-contact) .co-steps::before,
:where(body.page-contact) .co-steps::after {
  content: "";
  position: absolute;
  left: 103px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: #e2ddd4;
}
:where(body.page-contact) .co-steps::after { background: linear-gradient(180deg, #ff5b1f, #5a2bff); transform-origin: top; transform: scaleY(var(--zm-progress, 0)); }
:where(body.page-contact) .co-step {
  position: relative;
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 44px;
  padding: 26px 0;
  border-bottom: 1px solid var(--sd-line);
}
:where(body.page-contact) .co-step:last-child { border-bottom: 0; }
:where(body.page-contact) .co-step::before {
  content: "";
  position: absolute;
  left: 98px;
  top: 34px;
  width: 12px;
  height: 12px;
  border: 2px solid #c9c4ba;
  border-radius: 50%;
  background: var(--cream);
  z-index: 1;
}
:where(body.page-contact) .co-step__when { padding-top: 2px; font-family: var(--sd-mono); font-size: 13.5px; line-height: 22px; color: #c2410c; }
:where(body.page-contact) .co-step h3 { font-size: 21px; line-height: 28px; font-weight: 600; letter-spacing: -0.3px; }
:where(body.page-contact) .co-step p { margin-top: 6px; font-size: 15.5px; line-height: 25px; color: var(--text-muted); }
/* ----- Closing CTA ----- */
:where(body.page-contact) .co-cta__inner { text-align: center; }
:where(body.page-contact) .co-cta__title {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1.15;
  letter-spacing: -1.8px;
  font-weight: 600;
  background: linear-gradient(91deg, #0B0B0C 0%, #0B0B0C 30%, #6929C4 65%, #5A2BFF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-sweep-x 5s ease-in-out infinite alternate;
}
:where(body.page-contact) .co-cta__sub { max-width: 600px; margin: 18px auto 0; font-size: 18px; line-height: 28px; color: var(--text-muted); }
:where(body.page-contact) .co-cta__btn { margin-top: 30px; padding: 17px 24px; font-size: 16px; }
/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
:where(body.page-contact) .co-grid { grid-template-columns: minmax(0, 1fr); }
:where(body.page-contact) .co-aside { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
:where(body.page-contact) .co-card--quiet { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
:where(body.page-contact) .co-stats { grid-template-columns: minmax(0, 1fr); }
:where(body.page-contact) .co-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
:where(body.page-contact) .co-form { padding: 26px 18px 22px; }
:where(body.page-contact) .co-card { padding: 22px 20px 24px; }
:where(body.page-contact) .co-steps::before,
:where(body.page-contact) .co-steps::after { left: 7px; top: 30px; }
:where(body.page-contact) .co-step { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 22px 0 22px 30px; }
:where(body.page-contact) .co-step::before { left: 2px; top: 28px; }
:where(body.page-contact) .co-step h3 { font-size: 19px; }
}
/* ================= 4. Shared motion & interaction core ================= */
/* ==========================================================================
   Zemotify — Motion & Interaction Layer (CORE — shared by every page)
   Loaded after the base stylesheet. Re-uses the existing tokens (--ease,
   --orange, --purple-soft, --lime …) and the existing data-reveal / is-visible
   contract, so nothing here replaces the original design — it extends it.

   Motion scale
     micro (hover / press)  : 180–280ms
     reveal (entrances)     : 650–800ms, 70ms stagger, max ~420ms total delay
     signature (circle)     : 5.6s loop
   ========================================================================== */

:root {
  --zm-ease: var(--ease, cubic-bezier(0.22, 1, 0.36, 1));
  --zm-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --zm-micro: 0.24s;
  --zm-focus: #7c3aed;
  --zm-focus-dark: #d6ff3e;
}

/* ----------------------------------------------------------------------------
   1. Reveal system
   Hidden states only apply when JS is running (html.zm-js), so content can
   never stay invisible if the script fails or is blocked.
   ---------------------------------------------------------------------------- */

html:not(.zm-js) [data-reveal] { opacity: 1 !important; transform: none !important; }

html.zm-js [data-reveal] {
  --zm-rd: 0.75s;
  --zm-d: 0s;
  transition:
    opacity var(--zm-rd) var(--zm-ease) var(--zm-d),
    transform var(--zm-rd) var(--zm-ease) var(--zm-d),
    clip-path var(--zm-rd) var(--zm-ease) var(--zm-d),
    filter 0.3s var(--zm-ease),
    box-shadow 0.3s var(--zm-ease),
    border-color 0.3s var(--zm-ease),
    background-color 0.3s var(--zm-ease),
    color 0.3s var(--zm-ease);
}

/* once the entrance has played, hover/press transitions get their snappy timing back */
html.zm-js [data-reveal].zm-settled { --zm-rd: 0.3s; --zm-d: 0s; }
html.zm-js [data-reveal="slow"]:not(.zm-settled) { --zm-rd: 1.15s; }

html.zm-js [data-reveal]:not(.is-visible)          { opacity: 0; transform: translate3d(0, 24px, 0); }
html.zm-js [data-reveal="left"]:not(.is-visible)   { transform: translate3d(-28px, 0, 0); }
html.zm-js [data-reveal="right"]:not(.is-visible)  { transform: translate3d(28px, 0, 0); }
html.zm-js [data-reveal="scale"]:not(.is-visible)  { transform: scale(0.92); }
html.zm-js [data-reveal="fade"]:not(.is-visible)   { transform: none; }
html.zm-js [data-reveal="panel"]:not(.is-visible)  { transform: translate3d(0, 30px, 0) scale(0.985); }
html.zm-js [data-reveal="slow"]:not(.is-visible)   { transform: translate3d(0, 16px, 0); }

/* Headline mask: the line rises out of its own box */
html.zm-js [data-reveal="mask"]:not(.is-visible) {
  transform: translate3d(0, 16px, 0);
  clip-path: inset(100% 0 0 0);
}
html.zm-js [data-reveal="mask"].is-visible { clip-path: inset(-30% -8% -30% -8%); }

/* Image curtain: the frame opens from a smaller rounded window while the
   picture settles from a slight zoom. Set --zm-radius to match the element. */
html.zm-js [data-reveal="image"] { --zm-rd: 1s; }
html.zm-js [data-reveal="image"]:not(.is-visible) {
  transform: scale(1.04);
  clip-path: inset(10% 8% 10% 8% round var(--zm-radius, 12px));
}
html.zm-js [data-reveal="image"].is-visible { clip-path: inset(0 0 0 0 round var(--zm-radius, 12px)); }

/* Soft reveal — for elements that already own a transform (centred with
   translateX(-50%), rotated art, etc.). Animates opacity + the individual
   translate / scale properties, so the element's own transform is untouched.
   JS toggles .is-in; offsets can be tuned per component. */
html.zm-js [data-zm-in] {
  --zm-rd: 1s;
  transition:
    opacity var(--zm-rd) var(--zm-ease) var(--zm-d, 0s),
    translate var(--zm-rd) var(--zm-ease) var(--zm-d, 0s),
    scale var(--zm-rd) var(--zm-ease) var(--zm-d, 0s),
    box-shadow 0.4s var(--zm-ease);
}
html.zm-js [data-zm-in].zm-settled { --zm-rd: 0.45s; --zm-d: 0s; }
html.zm-js [data-zm-in]:not(.is-in) { opacity: 0; translate: 0 28px; }

/* Scroll parallax (JS writes --zm-par). After a soft reveal settles, follow
   the scroll closely instead of easing behind it. Pages can override. */
[data-zm-parallax] { translate: 0 calc(var(--zm-par, 0) * 1px); }
html.zm-js [data-zm-in][data-zm-parallax].zm-settled {
  transition: opacity 0.45s var(--zm-ease), translate 0.12s linear, scale 0.45s var(--zm-ease);
}

/* Highlighter — a lime marker stroke that draws under a key phrase in a
   revealed headline (homepage "Partners", About "Product Engineers"). */
.zm-mark {
  background: linear-gradient(transparent 60%, rgba(214, 255, 62, 0.85) 60%, rgba(214, 255, 62, 0.85) 92%, transparent 92%) no-repeat;
  background-size: 0% 100%;
  transition: background-size 0.9s var(--zm-ease) 0.45s;
  padding-inline: 2px;
  margin-inline: -2px;
}
.section-title.is-visible .zm-mark,
html:not(.zm-js) .zm-mark { background-size: 100% 100%; }

/* Line group: children of [data-reveal-children] cascade in once the parent
   is revealed — for paragraphs / list items that belong to one entrance. */
html.zm-js [data-reveal-children] > * {
  transition: opacity 0.7s var(--zm-ease), transform 0.7s var(--zm-ease);
  transition-delay: calc(var(--zm-i, 0) * 90ms + 120ms);
}
html.zm-js [data-reveal-children]:not(.is-visible) > * { opacity: 0; transform: translate3d(0, 14px, 0); }
/* once the group has settled, hover feedback on its items responds immediately */
html.zm-js [data-reveal-children].zm-settled > * { transition-delay: 0s; }



/* ----------------------------------------------------------------------------
   2. Global interaction states — CTAs, focus, header, nav
   ---------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--zm-focus);
  outline-offset: 3px;
}

.panel--dark a:focus-visible,
.panel--dark button:focus-visible,
.panel--dark [tabindex]:focus-visible,
.stack-strip :focus-visible,
.site-footer a:focus-visible { outline-color: var(--zm-focus-dark); }

/* Buttons: default → hover (lift + arrow nudge) → pressed (settle + slight squeeze) */
.btn {
  transition:
    transform var(--zm-micro) var(--zm-ease),
    box-shadow var(--zm-micro) var(--zm-ease),
    background-color var(--zm-micro) var(--zm-ease),
    color var(--zm-micro) var(--zm-ease),
    border-color var(--zm-micro) var(--zm-ease);
}
.btn svg { transition: transform var(--zm-micro) var(--zm-ease); }
.btn:hover svg { transform: translate(2px, -2px); }
.btn--youtube:hover svg { transform: scale(1.08); }
.btn:active { transform: translateY(0) scale(0.97); transition-duration: 0.08s; }
.btn:active svg { transform: none; }
.btn:focus-visible { outline: 2px solid var(--zm-focus); outline-offset: 3px; }
.panel--dark .btn:focus-visible { outline-color: var(--zm-focus-dark); }
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  pointer-events: none;
}

/* A single light sweep across the two primary button styles on hover */
.btn--black,
.btn--gradient { position: relative; overflow: hidden; isolation: isolate; }
.btn--black::after,
.btn--gradient::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.75s var(--zm-ease);
  pointer-events: none;
}
.btn--black:hover::after,
.btn--gradient:hover::after { transform: translateX(120%); }

/* Round carousel buttons */
.round-btn,
.quote-nav { transition: transform var(--zm-micro) var(--zm-ease), box-shadow var(--zm-micro) var(--zm-ease), background-color var(--zm-micro) var(--zm-ease), border-color var(--zm-micro) var(--zm-ease), color var(--zm-micro) var(--zm-ease), opacity var(--zm-micro) var(--zm-ease); }
.round-btn svg,
.quote-nav svg { transition: transform var(--zm-micro) var(--zm-ease); }
.round-btn--light:hover { border-color: rgba(124, 58, 237, 0.35); color: var(--purple-soft); box-shadow: 0 10px 22px rgba(19, 19, 22, 0.08); }
.round-btn--purple:hover { box-shadow: 0 14px 30px rgba(90, 43, 255, 0.45); }
#endorse-prev:hover svg,
.quote-nav--prev:hover svg { transform: translateX(-2px); }
#endorse-next:hover svg,
.quote-nav--next:hover svg { transform: translateX(2px); }
.round-btn:active,
.quote-nav:active { transform: scale(0.93); transition-duration: 0.08s; }
.round-btn:disabled { opacity: 0.38; cursor: default; transform: none; box-shadow: none; }

/* Header gains depth once the page scrolls */
.header-inner { transition: box-shadow 0.35s var(--zm-ease), background-color 0.35s var(--zm-ease); }
.site-header.is-scrolled .header-inner { box-shadow: 0 16px 40px rgba(19, 19, 22, 0.12); }

@media (min-width: 1025px) {
  .main-nav__link:not(.main-nav__link--btn) { position: relative; }
  .main-nav__link:not(.main-nav__link--btn)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 1.5px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.28s var(--zm-ease);
  }
  .main-nav__link:not(.main-nav__link--btn):hover::after,
  .main-nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
  .main-nav__link[aria-current="page"] { color: var(--purple-soft); }

  /* dropdown items cascade in */
  .dropdown li { opacity: 0; transform: translateY(4px); transition: opacity 0.22s var(--zm-ease), transform 0.28s var(--zm-ease); }
  .has-dropdown:hover .dropdown li,
  .has-dropdown:focus-within .dropdown li,
  .has-dropdown.is-open .dropdown li { opacity: 1; transform: none; }
  .dropdown li:nth-child(2) { transition-delay: 0.025s; }
  .dropdown li:nth-child(3) { transition-delay: 0.05s; }
  .dropdown li:nth-child(4) { transition-delay: 0.075s; }
  .dropdown li:nth-child(5) { transition-delay: 0.1s; }
  .dropdown li:nth-child(6) { transition-delay: 0.125s; }
  .dropdown li:nth-child(7) { transition-delay: 0.15s; }
}

/* ----------------------------------------------------------------------------
   Services mega dropdown — keeps the site's dropdown (white card, centred
   under "Services", fades/rises in) but lists the six service categories
   with their All Services icons, plus an All Services entry and the
   engagement models. Built on the existing .dropdown open/close rules.
   ---------------------------------------------------------------------------- */
.has-dropdown.zm-suppress .dropdown { opacity: 0 !important; visibility: hidden !important; pointer-events: none; }
.has-dropdown.zm-suppress > .main-nav__link--btn svg { transform: none !important; }

.dropdown.zm-mega {
  width: min(680px, calc(100vw - 48px));
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 6px;
}
/* invisible bridge across the 12px gap so the pointer can travel from
   the button into the panel without the hover dropping */
.dropdown.zm-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.zm-mega__all { grid-column: 1 / -1; margin-bottom: 6px; }
.dropdown .zm-mega__all > a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--cream);
  border: 1px solid #ece9e2;
  color: var(--text);
}
.zm-mega__all-copy { flex: 1; min-width: 0; }
.zm-mega__kicker { display: block; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--orange); }
.zm-mega__all strong { display: block; margin-top: 2px; font-size: 16px; line-height: 22px; font-weight: 600; }
.zm-mega__all-desc { display: block; margin-top: 2px; font-size: 12.5px; line-height: 18px; color: var(--text-muted); }
.zm-mega__go {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--text);
  color: var(--white);
  transition: transform var(--zm-micro) var(--zm-ease), background-color var(--zm-micro) var(--zm-ease);
}
.dropdown .zm-mega__all > a:hover { background: #f4f0ff; border-color: rgba(124, 58, 237, 0.2); color: var(--text); }
.dropdown .zm-mega__all > a:hover .zm-mega__go { background: var(--purple-soft); transform: translate(2px, -2px); }
.dropdown .zm-mega__all > a[aria-current="page"] { background: #f4f0ff; border-color: rgba(124, 58, 237, 0.25); }
.dropdown .zm-mega__all > a[aria-current="page"] .zm-mega__go { background: var(--purple-soft); }

.dropdown .zm-mega__svc > a {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
}
.zm-mega__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--cream);
  border: 1px solid rgba(11, 11, 12, 0.08);
  color: #c2410c;
  transition: background-color var(--zm-micro) var(--zm-ease), color var(--zm-micro) var(--zm-ease), transform 0.35s var(--zm-ease), border-color var(--zm-micro) var(--zm-ease);
}
.zm-mega__icon svg { width: 19px; height: 19px; }
.zm-mega__name { display: block; font-size: 14.5px; line-height: 20px; font-weight: 600; color: var(--text); transition: color var(--zm-micro) var(--zm-ease); }
.zm-mega__for { display: block; margin-top: 2px; font-size: 12px; line-height: 17px; color: var(--text-muted); }
.dropdown .zm-mega__svc > a:hover,
.dropdown .zm-mega__svc > a:focus-visible { background: #f7f4ff; }
.dropdown .zm-mega__svc > a:hover .zm-mega__name,
.dropdown .zm-mega__svc > a[aria-current="page"] .zm-mega__name { color: var(--purple-soft); }
.dropdown .zm-mega__svc > a:hover .zm-mega__icon { background: var(--orange); border-color: var(--orange); color: var(--white); transform: rotate(-6deg); }
.dropdown .zm-mega__svc > a[aria-current="page"] { background: #f4f0ff; }
.dropdown .zm-mega__svc > a[aria-current="page"] .zm-mega__icon { background: var(--orange); border-color: var(--orange); color: var(--white); }

.zm-mega__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 6px;
  padding: 12px 12px 4px;
  border-top: 1px solid #efece6;
}
.zm-mega__foot-label { flex-basis: 100%; margin: 0 0 2px 2px; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-muted); }
.dropdown .zm-mega__foot a {
  display: inline-flex;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #e6e3dc;
  font-size: 12px;
  line-height: 18px;
  color: var(--text);
}
.dropdown .zm-mega__foot a:hover { border-color: rgba(124, 58, 237, 0.35); background: #f7f4ff; color: var(--purple-soft); }

@media (min-width: 1025px) {
  .dropdown.zm-mega li:nth-child(8) { transition-delay: 0.175s; }
  .dropdown.zm-mega li:nth-child(9) { transition-delay: 0.2s; }
}

/* mobile menu: the mega panel becomes a compact single-column accordion */
@media (max-width: 1024px) {
  /* the longer Services list can outgrow short screens: the open menu scrolls inside itself */
  .main-nav.is-open { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
  .main-nav.is-open .dropdown.zm-mega { width: auto; display: grid; grid-template-columns: minmax(0, 1fr); }
  .main-nav.is-open .has-dropdown.is-open .dropdown.zm-mega { max-height: 900px; }
  .zm-mega__for, .zm-mega__all-desc { display: none; }
  .dropdown .zm-mega__svc > a { align-items: center; padding: 8px 10px; }
  .zm-mega__icon { width: 32px; height: 32px; }
  .dropdown .zm-mega__svc > a { grid-template-columns: 32px minmax(0, 1fr); }
  .dropdown.zm-mega::before { display: none; }
}

/* Toast (ZM.toast) — brief polite status messages */
.zm-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 1200;
  max-width: min(440px, calc(100vw - 32px));
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--text-white);
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(11, 11, 13, 0.3);
  translate: -50% 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--zm-ease), translate 0.3s var(--zm-ease);
}
.zm-toast.is-on { opacity: 1; translate: -50% 0; }


/* Hero logo strip: individual logos respond, the strip pauses (existing) */
.trusted-track img { opacity: 0.74; transition: opacity var(--zm-micro) var(--zm-ease); }
.trusted-track img:hover { opacity: 1; }

/* ----------------------------------------------------------------------------
   3. Shared carousel furniture — dots + scroll progress
   ---------------------------------------------------------------------------- */

.zm-dots { display: flex; justify-content: center; gap: 2px; margin-top: 18px; }
.zm-dot {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  transition: width 0.35s var(--zm-ease);
}
.zm-dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
  transition: width 0.35s var(--zm-ease), background-color 0.35s var(--zm-ease);
}
.zm-dot:hover::before { background: rgba(255, 255, 255, 0.6); }
.zm-dot[aria-current="true"] { width: 36px; }
.zm-dot[aria-current="true"]::before { width: 26px; background: var(--lime); }

.zm-progress {
  position: relative;
  height: 3px;
  margin-top: 22px;
  border-radius: 3px;
  background: rgba(19, 19, 22, 0.08);
  overflow: hidden;
}
.zm-progress > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #6929c4, #5a2bff);
  transition: transform 0.15s linear;
}

/* ----------------------------------------------------------------------------
   4. Final CTA glow (any page ending on #cta)
   ---------------------------------------------------------------------------- */

#cta { position: relative; isolation: isolate; }
#cta::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 90vw);
  height: 420px;
  translate: -50% -50%;
  z-index: -1;
  background:
    radial-gradient(closest-side at 35% 50%, rgba(255, 91, 31, 0.1), transparent),
    radial-gradient(closest-side at 65% 50%, rgba(90, 43, 255, 0.12), transparent);
  filter: blur(10px);
  pointer-events: none;
}

/* ----------------------------------------------------------------------------
   5. Reduced motion (core)
   ---------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .zm-mark { background-size: 100% 100% !important; }
  html.zm-js [data-zm-in] { opacity: 1 !important; translate: none !important; scale: none !important; transition: none !important; }
  html.zm-js [data-reveal-children] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.zm-js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
  }
}

/* ================= 5. Page motion layers ================= */
/* ===== home: motion layer (scoped to body.page-home) ===== */
/* ==========================================================================
   Zemotify — Homepage motion layer
   Load after zemotify-motion.css (core). Homepage sections only.
   ========================================================================== */
/* Model cards also animate flex-basis, so they get their own transition list */
html.zm-js :where(body.page-home) .model-card[data-reveal] {
  transition:
    opacity var(--zm-rd) var(--zm-ease) var(--zm-d),
    transform var(--zm-rd) var(--zm-ease) var(--zm-d),
    flex-basis 0.6s var(--zm-ease),
    border-color 0.45s var(--zm-ease),
    box-shadow 0.45s var(--zm-ease);
}
/* The base sheet declares `[data-reveal].is-visible { transform: translateY(0) }`
   after the card hover rules, which silently cancelled every hover lift on
   revealed cards. Re-assert the hover transforms with enough specificity. */
/* stat cards are informational: a quiet acknowledgement, never a "click me" lift */
:where(body.page-home) .stat-card { cursor: default; }
:where(body.page-home) .stat-card[data-reveal]:hover { transform: translateY(-2px); box-shadow: 0 22px 46px rgba(19, 19, 22, 0.07); }
:where(body.page-home) .stat-card__num [data-count] { font-variant-numeric: tabular-nums; }
:where(body.page-home) .cap-card[data-reveal]:hover { transform: translateY(-6px); }
:where(body.page-home) .story-card[data-reveal]:hover,
:where(body.page-home) .story-card[data-reveal]:focus-within { transform: translateY(-6px); }
:where(body.page-home) .diff-row[data-reveal]:hover { transform: translateY(-3px); }
:where(body.page-home) .award-card[data-reveal]:hover { transform: translateY(-5px); }
:where(body.page-home) .pod-item[data-reveal]:hover { transform: translateY(-4px); }
:where(body.page-home) .model-card[data-reveal]:hover { transform: translateY(-4px); }
/* ----------------------------------------------------------------------------
   3. Challenge — "The Traditional Vendor Model Is Broken"
   A soft contrasting surface, a 2×2 grid joined by hairlines that meet at a
   "broken link" node, and cards whose dashed baseline becomes whole on hover.
   ---------------------------------------------------------------------------- */
:where(body.page-home) #challenge { position: relative; isolation: isolate; }
:where(body.page-home) #challenge::before {
  content: "";
  position: absolute;
  inset: 0 clamp(12px, 2.1vw, 28px);
  z-index: -1;
  border-radius: 28px;
  border: 1px solid rgba(19, 19, 22, 0.05);
  background:
    radial-gradient(560px 320px at 88% 6%, rgba(255, 91, 31, 0.09), transparent 70%),
    radial-gradient(620px 360px at 8% 96%, rgba(90, 43, 255, 0.08), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.25));
  pointer-events: none;
}
/* faint dot grid, faded toward the edges */
:where(body.page-home) #challenge::after {
  content: "";
  position: absolute;
  inset: 0 clamp(12px, 2.1vw, 28px);
  z-index: -1;
  border-radius: 28px;
  background-image: radial-gradient(circle at 1px 1px, rgba(19, 19, 22, 0.09) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 55%, #000 30%, transparent 100%);
  pointer-events: none;
}
:where(body.page-home) #challenge .badge { display: inline-flex; align-items: center; gap: 8px; }
:where(body.page-home) #challenge .badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 91, 31, 0.16);
}
/* "Broken" — brand gradient word with a split underline that draws in */
:where(body.page-home) .zm-broken {
  position: relative;
  display: inline-block;
  background: linear-gradient(90deg, #ff5b1f 0%, #5a2bff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:where(body.page-home) .zm-broken::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff5b1f 0 44%, transparent 44% 56%, #5a2bff 56% 100%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--zm-ease) 0.55s;
}
:where(body.page-home) .section-title.is-visible .zm-broken::after,
html:not(.zm-js) :where(body.page-home) .zm-broken::after { transform: scaleX(1); }
:where(body.page-home) #challenge .challenge-grid { position: relative; isolation: isolate; gap: 20px; }
/* hairline connectors in the grid gutters */
:where(body.page-home) #challenge .challenge-grid::before,
:where(body.page-home) #challenge .challenge-grid::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  transition: transform 1.1s var(--zm-ease) 0.15s;
}
:where(body.page-home) #challenge .challenge-grid::before {
  left: -24px;
  right: -24px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(19, 19, 22, 0.16) 14%, rgba(19, 19, 22, 0.16) 86%, transparent);
}
:where(body.page-home) #challenge .challenge-grid::after {
  top: -28px;
  bottom: -28px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(19, 19, 22, 0.16) 14%, rgba(19, 19, 22, 0.16) 86%, transparent);
}
@supports selector(:has(*)) {
html.zm-js :where(body.page-home) #challenge .challenge-grid:not(:has(.challenge-node.is-visible))::before { transform: scaleX(0); }
html.zm-js :where(body.page-home) #challenge .challenge-grid:not(:has(.challenge-node.is-visible))::after { transform: scaleY(0); }
}
:where(body.page-home) .challenge-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid rgba(19, 19, 22, 0.08);
  box-shadow: 0 10px 26px rgba(19, 19, 22, 0.1);
  display: grid;
  place-items: center;
  color: var(--orange);
  z-index: 2;
}
:where(body.page-home) .challenge-node::before {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 91, 31, 0.38);
}
:where(body.page-home) .challenge-node svg { transition: transform 0.6s var(--zm-ease), color 0.3s var(--zm-ease); }
@media (hover: hover) {
:where(body.page-home) #challenge .challenge-grid:hover .challenge-node svg { transform: rotate(45deg); color: var(--purple-soft); }
}
/* Cards */
:where(body.page-home) #challenge .icon-card {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(19, 19, 22, 0.07);
  background: linear-gradient(180deg, #ffffff 0%, #fdfcf9 100%);
  padding: 30px 72px 34px 30px;
  box-shadow: 0 1px 0 rgba(19, 19, 22, 0.02), 0 14px 34px -22px rgba(19, 19, 22, 0.22);
}
/* dashed "broken" baseline … */
:where(body.page-home) #challenge .icon-card::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255, 91, 31, 0.32) 0 10px, transparent 10px 18px);
}
/* … that becomes one continuous brand line on hover */
:where(body.page-home) #challenge .icon-card::after {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff5b1f, #5a2bff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--zm-ease);
}
:where(body.page-home) .icon-card__index {
  position: absolute;
  top: 26px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: rgba(19, 19, 22, 0.34);
  transition: color 0.3s var(--zm-ease);
}
:where(body.page-home) .icon-card__index i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 91, 31, 0.14);
  transition: background-color 0.35s var(--zm-ease), box-shadow 0.35s var(--zm-ease);
}
:where(body.page-home) #challenge .icon-card .icon-tile { transition: transform 0.4s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), box-shadow 0.3s var(--zm-ease); }
:where(body.page-home) #challenge .icon-card .icon-card__title { transition: color 0.3s var(--zm-ease); }
:where(body.page-home) #challenge .icon-card:hover,
:where(body.page-home) #challenge .icon-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(255, 91, 31, 0.26);
  box-shadow: 0 1px 0 rgba(19, 19, 22, 0.02), 0 28px 56px -24px rgba(19, 19, 22, 0.28);
}
:where(body.page-home) #challenge .icon-card:hover::after { transform: scaleX(1); }
:where(body.page-home) #challenge .icon-card:hover .icon-tile {
  background: var(--orange);
  color: var(--white);
  transform: rotate(-6deg) scale(1.04);
  box-shadow: 0 10px 22px rgba(255, 91, 31, 0.3);
}
:where(body.page-home) #challenge .icon-card:hover .icon-card__index { color: rgba(19, 19, 22, 0.7); }
:where(body.page-home) #challenge .icon-card:hover .icon-card__index i { background: var(--purple-soft); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.18); }
/* focus one challenge at a time */
@media (hover: hover) and (pointer: fine) {
:where(body.page-home) #challenge .challenge-grid:has(.icon-card:hover) .icon-card.is-visible:not(:hover) { opacity: 0.55; filter: saturate(0.5); }
}
/* CTA: "Here's How Zemotify Solves Each Of These" */
:where(body.page-home) #challenge .challenge-more a {
  gap: 12px;
  padding: 10px 10px 10px 22px;
  border: 1px solid rgba(19, 19, 22, 0.12);
  border-radius: var(--r-pill);
  background: var(--white);
  box-shadow: 0 10px 24px -14px rgba(19, 19, 22, 0.25);
  transition: color var(--zm-micro) var(--zm-ease), border-color var(--zm-micro) var(--zm-ease), box-shadow var(--zm-micro) var(--zm-ease), transform var(--zm-micro) var(--zm-ease);
}
:where(body.page-home) #challenge .challenge-more a svg {
  width: 30px;
  height: 30px;
  padding: 7px;
  border-radius: 50%;
  background: var(--text);
  color: var(--white);
  transition: transform 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease);
}
:where(body.page-home) #challenge .challenge-more a:hover {
  color: var(--purple-soft);
  border-color: rgba(124, 58, 237, 0.35);
  box-shadow: 0 16px 32px -14px rgba(124, 58, 237, 0.35);
  transform: translateY(-2px);
}
:where(body.page-home) #challenge .challenge-more a:hover svg { background: var(--purple-soft); transform: translateY(3px); }
:where(body.page-home) #challenge .challenge-more a:active { transform: scale(0.97); transition-duration: 0.08s; }
/* ----------------------------------------------------------------------------
   4. Belief
   ---------------------------------------------------------------------------- */
/* "Partners" gets a lime highlighter stroke, "Vendors" a quiet strike */
:where(body.page-home) .zm-strike { position: relative; display: inline-block; }
:where(body.page-home) .zm-strike::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 56%;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  opacity: 0.75;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--zm-ease) 1.2s;
}
:where(body.page-home) .section-title.is-visible .zm-strike::after,
html:not(.zm-js) :where(body.page-home) .zm-strike::after { transform: scaleX(1); }
/* orbit rings fade in one after another */
:where(body.page-home) .orbit__ring { transition: opacity 0.9s var(--zm-ease); }
html.zm-js :where(body.page-home) .orbit:not(.is-visible) .orbit__ring { opacity: 0; }
:where(body.page-home) .orbit__ring--2 { transition-delay: 0.1s; }
:where(body.page-home) .orbit__ring--3 { transition-delay: 0.2s; }
:where(body.page-home) .orbit__ring--4 { transition-delay: 0.3s; }
:where(body.page-home) .orbit__ring--5 { transition-delay: 0.4s; }
:where(body.page-home) .orbit__core { transition: transform 0.5s var(--zm-ease), box-shadow 0.5s var(--zm-ease); }
:where(body.page-home) .orbit:hover .orbit__core { transform: scale(1.04); box-shadow: 0 30px 64px rgba(11, 11, 13, 0.34); }
:where(body.page-home) .belief-feature .icon-tile { transition: transform 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-home) .belief-feature__title { transition: color 0.3s var(--zm-ease); }
:where(body.page-home) .belief-feature:hover .icon-tile {
  transform: translateY(-4px) rotate(-4deg);
  color: var(--purple-soft);
  box-shadow: 0 20px 36px rgba(124, 58, 237, 0.18);
}
:where(body.page-home) .belief-feature:hover .belief-feature__title { color: var(--purple-soft); }
/* ----------------------------------------------------------------------------
   5. Trusted (dark)
   ---------------------------------------------------------------------------- */
:where(body.page-home) #trusted .client-logos {
  max-width: 1000px;
  margin-inline: auto;
  padding-block: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
:where(body.page-home) #trusted .client-logos li svg { transition: color 0.3s var(--zm-ease), transform 0.4s var(--zm-ease); }
:where(body.page-home) #trusted .client-logos li.is-visible { opacity: 0.8; }
:where(body.page-home) #trusted .client-logos li.is-visible:hover { opacity: 1; transform: translateY(-2px); }
:where(body.page-home) #trusted .client-logos li:hover svg { color: var(--lime); transform: rotate(-8deg); }
@media (hover: hover) {
:where(body.page-home) #trusted .client-logos:hover li.is-visible:not(:hover) { opacity: 0.42; }
}
/* testimonial slider: slides enter from the side they come from */
:where(body.page-home) .quote-slide { left: 0; right: 0; top: 0; }
:where(body.page-home) .quote-slide[data-pos="before"] { transform: translateX(-24px); }
:where(body.page-home) .quote-slide[data-pos="after"] { transform: translateX(24px); }
:where(body.page-home) .quote-viewport { transition: min-height 0.4s var(--zm-ease); touch-action: pan-y; }
/* count-up spans are inline-blocks; keep "$500M+" on one line */
:where(body.page-home) .counter__num,
:where(body.page-home) .orbit__num { white-space: nowrap; }
/* ----------------------------------------------------------------------------
   6. What We Build
   ---------------------------------------------------------------------------- */
:where(body.page-home) .cap-card { overflow: hidden; isolation: isolate; border-color: rgba(19, 19, 22, 0.06); }
:where(body.page-home) .cap-card > * { position: relative; z-index: 1; }
/* pointer-following light */
:where(body.page-home) .cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), rgba(146, 12, 247, 0.075), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--zm-ease);
  pointer-events: none;
}
/* top accent line */
:where(body.page-home) .cap-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 1;
  background: linear-gradient(90deg, #ff5b1f, #5a2bff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--zm-ease);
}
:where(body.page-home) .cap-card .icon-tile { transition: transform 0.4s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), box-shadow 0.3s var(--zm-ease); }
:where(body.page-home) .cap-card__title,
:where(body.page-home) .cap-card__text { transition: color 0.3s var(--zm-ease); }
:where(body.page-home) .cap-card:hover { border-color: rgba(124, 58, 237, 0.2); }
:where(body.page-home) .cap-card:hover::before { opacity: 1; }
:where(body.page-home) .cap-card:hover::after { transform: scaleX(1); }
:where(body.page-home) .cap-card:hover .icon-tile {
  background: var(--orange);
  color: var(--white);
  transform: translateY(-2px) rotate(-5deg);
  box-shadow: 0 10px 22px rgba(255, 91, 31, 0.28);
}
:where(body.page-home) .cap-card:hover .cap-card__title { color: var(--purple-soft); }
:where(body.page-home) .cap-card:hover .cap-card__text { color: #2f3744; }
/* each card opens its service page: the title link stretches over the whole card */
:where(body.page-home) .cap-card { position: relative; cursor: pointer; }
:where(body.page-home) .cap-card > .cap-card__link { position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
:where(body.page-home) .cap-card__link:focus-visible { outline: none; }
:where(body.page-home) .cap-card:has(.cap-card__link:focus-visible) { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 3px; }
:where(body.page-home) .cap-card:has(.cap-card__link:focus-visible) .cap-card__arrow { opacity: 1; transform: none; }
:where(body.page-home) .cap-card:active { transform: translateY(-3px) scale(0.99); }
/* the arrow is the "this opens something" cue: faint at rest, full on hover/focus */
:where(body.page-home) .cap-card__arrow { opacity: 0.35; transform: translate(-3px, 3px); transition: opacity 0.35s var(--zm-ease), transform 0.35s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-home) .cap-card:hover .cap-card__arrow { color: var(--purple-soft); }
@media (hover: none) {
:where(body.page-home) .cap-card__arrow { opacity: 0.8; transform: none; }
}
:where(body.page-home) .zm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ----------------------------------------------------------------------------
   7. How We Think (dark)
   ---------------------------------------------------------------------------- */
:where(body.page-home) #how-we-think .glow-panel::before {
  inset: -12%;
  animation: zm-drift 22s ease-in-out infinite alternate;
}
@keyframes zm-drift {
  from { transform: translate3d(-3%, 2%, 0); }
  to   { transform: translate3d(3%, -2%, 0); }
}
:where(body.page-home) .founder img { transition: box-shadow 0.8s var(--zm-ease) 0.35s; box-shadow: 0 0 0 2px rgba(214, 255, 62, 0); }
:where(body.page-home) .founder.is-visible img,
html:not(.zm-js) :where(body.page-home) .founder img { box-shadow: 0 0 0 2px rgba(214, 255, 62, 0.55), 0 0 0 7px rgba(214, 255, 62, 0.08); }
/* Signature: the circle around "business goals" draws itself, rests, fades, redraws */
:where(body.page-home) .circled::after { display: none; }
:where(body.page-home) .circled__svg {
  position: absolute;
  left: -16px;
  top: -8px;
  width: calc(100% + 32px);
  height: calc(100% + 20px);
  overflow: visible;
  transform: rotate(-3deg);
  pointer-events: none;
}
:where(body.page-home) .circled__path {
  fill: none;
  stroke: var(--orange);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
:where(body.page-home) .think-quote.is-visible .circled__path { animation: zm-circle 5.6s var(--zm-ease-io) 0.5s infinite; }
html:not(.zm-js) :where(body.page-home) .circled__path { stroke-dashoffset: 0; }
@keyframes zm-circle {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  30%  { stroke-dashoffset: 0; opacity: 1; }
  80%  { stroke-dashoffset: 0; opacity: 1; }
  92%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
@media (max-width: 520px) {
:where(body.page-home) .circled__svg { left: -10px; top: -9px; width: calc(100% + 20px); height: calc(100% + 18px); }
}
/* timeline dots light up as the scroll progress reaches them */
:where(body.page-home) .timeline__dot { transition: background-color 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease); }
:where(body.page-home) .timeline__item.is-reached .timeline__dot { background: var(--lime); box-shadow: 0 0 0 5px rgba(214, 255, 62, 0.12); }
:where(body.page-home) .timeline__title { transition: color 0.3s var(--zm-ease); }
:where(body.page-home) .timeline__item:hover .timeline__title { color: var(--lime); }
/* ----------------------------------------------------------------------------
   8. Endorsements — default: portrait + name plate. Active (hover, focus, tap,
   or the resting card): a purple layer rises from the bottom edge and the
   endorsement settles in above the name plate. One card is active at a time.
   ---------------------------------------------------------------------------- */
:where(body.page-home) .endorse-card { cursor: pointer; isolation: isolate; transition: transform 0.6s var(--zm-ease), box-shadow 0.6s var(--zm-ease); }
:where(body.page-home) .endorse-card:focus-visible { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 3px; }
:where(body.page-home) .endorse-card img { transition: transform 1.1s var(--zm-ease), filter 0.8s var(--zm-ease); }
:where(body.page-home) .endorse-card.is-active img { transform: scale(1.06); filter: saturate(0.7) brightness(0.75); }
/* portrait slot when no photo is supplied */
:where(body.page-home) .endorse-card > .endorse-card__monogram {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  place-items: center;
  padding-bottom: 70px;
  background: radial-gradient(circle at 50% 36%, #34313f 0%, #17161c 52%, #0b0b0d 100%);
  font-family: var(--font-head);
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -3px;
  color: rgba(255, 255, 255, 0.82);
}
:where(body.page-home) .endorse-card > .endorse-card__pill { position: absolute; z-index: 4; transition: background-color 0.5s var(--zm-ease), border-color 0.5s var(--zm-ease); }
:where(body.page-home) .endorse-card.is-active .endorse-card__pill { background: rgba(196, 167, 255, 0.28); border-color: rgba(255, 255, 255, 0.24); }
:where(body.page-home) .endorse-card > .endorse-card__foot { z-index: 4; }
:where(body.page-home) .endorse-card > .endorse-card__reveal {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 56px 22px 96px;
  background:
    linear-gradient(180deg, rgba(90, 43, 255, 0.95) 0%, rgba(105, 41, 196, 0.95) 28%, rgba(43, 17, 82, 0.97) 64%, #0b0b0c 100%);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.8s cubic-bezier(0.65, 0, 0.15, 1);
}
/* the rising edge carries a thin light so the motion reads as a layer, not a fade */
:where(body.page-home) .endorse-card__reveal::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(214, 255, 62, 0.9), transparent);
  opacity: 0;
  transition: opacity 0.5s var(--zm-ease) 0.35s;
}
/* closing quotation marks, as in the approved purple card */
:where(body.page-home) .endorse-card__reveal::after {
  content: "\201D\201D";
  position: absolute;
  top: 12px;
  right: 18px;
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -6px;
  line-height: 1;
  color: rgba(167, 139, 250, 0.95);
}
:where(body.page-home) .endorse-card.is-active > .endorse-card__reveal { clip-path: inset(0 0 0 0); }
:where(body.page-home) .endorse-card.is-active .endorse-card__reveal::before { opacity: 0; }
:where(body.page-home) .endorse-card__reveal > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.35s var(--zm-ease), transform 0.5s var(--zm-ease);
}
:where(body.page-home) .endorse-card.is-active .endorse-card__reveal > * { opacity: 1; transform: none; transition-duration: 0.55s, 0.7s; }
:where(body.page-home) .endorse-card.is-active .endorse-card__reveal > :nth-child(1) { transition-delay: 0.22s; }
:where(body.page-home) .endorse-card.is-active .endorse-card__reveal > :nth-child(2) { transition-delay: 0.3s; }
:where(body.page-home) .endorse-card.is-active .endorse-card__reveal > :nth-child(3) { transition-delay: 0.38s; }
:where(body.page-home) .endorse-card__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--lime);
}
:where(body.page-home) .endorse-card__label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); }
:where(body.page-home) .endorse-card .endorse-card__quote {
  flex: none;
  margin: 0;
  padding: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.94);
}
:where(body.page-home) .endorse-card__context {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--white);
}
:where(body.page-home) .endorse-card__context span { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: rgba(255, 255, 255, 0.7); }
:where(body.page-home) .endorse-card[data-reveal].is-active,
:where(body.page-home) .endorse-card[data-reveal]:hover { transform: translateY(-6px); }
:where(body.page-home) .endorse-card.is-active { box-shadow: 0 26px 50px -18px rgba(19, 19, 22, 0.5), 0 0 0 1px rgba(146, 12, 247, 0.35); }
@media (prefers-reduced-motion: reduce) {
:where(body.page-home) .endorse-card > .endorse-card__reveal { transition: none; }
:where(body.page-home) .endorse-card__reveal > * { transition: none !important; transform: none !important; }
:where(body.page-home) .endorse-card img { transition: none; }
}
/* ----------------------------------------------------------------------------
   9. Why Us — numbered rows
   ---------------------------------------------------------------------------- */
:where(body.page-home) .diff-row { position: relative; overflow: hidden; }
:where(body.page-home) .diff-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #6800e4, #9810fa);
  transform: scaleY(0);
  transition: transform 0.4s var(--zm-ease);
}
:where(body.page-home) .diff-row:hover::before { transform: scaleY(1); }
:where(body.page-home) .diff-row:hover { border-color: rgba(124, 58, 237, 0.18); }
:where(body.page-home) .diff-row__check { transition: background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), transform 0.4s var(--zm-ease); }
:where(body.page-home) .diff-row:hover .diff-row__check { background: var(--green); color: var(--white); transform: scale(1.06); }
:where(body.page-home) .diff-row__check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s var(--zm-ease) 0.4s; }
:where(body.page-home) .diff-row.is-visible .diff-row__check path,
html:not(.zm-js) :where(body.page-home) .diff-row__check path { stroke-dashoffset: 0; }
/* ----------------------------------------------------------------------------
   10. How We Work — expanding model cards
   ---------------------------------------------------------------------------- */
:where(body.page-home) .model-card__media { transition: inset 0.6s var(--zm-ease), border-radius 0.6s var(--zm-ease); }
:where(body.page-home) .model-card__media img { transition: transform 0.9s var(--zm-ease); }
:where(body.page-home) .model-card__media--stretch img { object-fit: cover; }
/* the off-centre crop in the design belongs to the featured image only */
:where(body.page-home) .model-card.is-active:not(:nth-child(2)) .model-card__media { inset: 1px; border-radius: 23px; }
:where(body.page-home) .model-card:hover .model-card__media img { transform: scale(1.03); }
:where(body.page-home) .model-card:hover { transform: translateY(-4px); }
:where(body.page-home) .model-card:not(.is-active):hover { border-color: rgba(255, 255, 255, 0.28); }
:where(body.page-home) .model-card:focus-visible { outline: 2px solid var(--zm-focus-dark); outline-offset: 4px; }
/* description + stats collapse on compact cards, open on the expanded one */
:where(body.page-home) .model-card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.55s var(--zm-ease), opacity 0.3s var(--zm-ease);
}
:where(body.page-home) .model-card__reveal > div { min-height: 0; overflow: hidden; }
:where(body.page-home) .model-card.is-active .model-card__reveal { grid-template-rows: 1fr; opacity: 1; transition-delay: 0.12s, 0.22s; }
@keyframes zm-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
:where(body.page-home) .model-card.is-active .model-card__body > * { animation: zm-rise 0.55s var(--zm-ease) backwards; }
:where(body.page-home) .model-card.is-active .model-card__body > :nth-child(2) { animation-delay: 0.06s; }
:where(body.page-home) .model-card.is-active .model-card__body > :nth-child(3) { animation-delay: 0.12s; }
:where(body.page-home) .model-card.is-active .model-card__body > :nth-child(4) { animation-delay: 0.18s; }
:where(body.page-home) .model-card.is-active .model-card__pills { animation: zm-rise 0.55s var(--zm-ease) backwards; }
:where(body.page-home) .models-foot a { transition: color var(--zm-micro) var(--zm-ease); }
:where(body.page-home) .models-foot a:hover { color: var(--lime); }
/* tablet / mobile: no hover-expansion, so every card shows everything */
@media (max-width: 1180px) {
:where(body.page-home) .model-card__reveal { grid-template-rows: 1fr; opacity: 1; }
:where(body.page-home) .model-card.is-active:not(:nth-child(2)) .model-card__media { inset: 1px; }
}
/* ----------------------------------------------------------------------------
   11. Stacks, Recognition, Stories
   ---------------------------------------------------------------------------- */
:where(body.page-home) .stack-tile svg { transition: color 0.3s var(--zm-ease), transform 0.4s var(--zm-ease); }
:where(body.page-home) .stack-tile:hover { border-color: rgba(214, 255, 62, 0.4); }
:where(body.page-home) .stack-tile:hover svg { color: var(--lime); transform: translateY(-2px); }
:where(body.page-home) .award-card { transition: transform 0.3s var(--zm-ease), border-color 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease); }
:where(body.page-home) .award-card svg { transition: transform 0.45s var(--zm-ease); }
:where(body.page-home) .award-card:hover { background-color: rgba(255, 255, 255, 0.03); }
:where(body.page-home) .award-card:hover svg { transform: translateY(-3px) scale(1.08); }
:where(body.page-home) .story-card__title { transition: color 0.3s var(--zm-ease); }
:where(body.page-home) .story-card__head svg { transition: transform 0.35s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-home) .story-card:hover .story-card__title { color: var(--purple-soft); }
:where(body.page-home) .story-card:hover .story-card__head svg { transform: translate(2px, -2px); color: var(--purple-soft); }
:where(body.page-home) .story-card:focus-within { transform: translateY(-6px); box-shadow: 0 26px 50px rgba(19, 19, 22, 0.1); }
:where(body.page-home) .story-card__link { position: relative; }
:where(body.page-home) .story-card__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 24px;
  bottom: -3px;
  height: 1px;
  background: linear-gradient(90deg, #6800e4, #9810fa);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--zm-ease);
}
:where(body.page-home) .story-card__link:hover::after { transform: scaleX(1); }
/* ----------------------------------------------------------------------------
   12. Videos ("Built For Impact") + Podcasts
   ---------------------------------------------------------------------------- */
:where(body.page-home) .video-track .video-slide:not(.is-active):hover,
:where(body.page-home) .video-track .video-slide:not(.is-active):focus-visible { filter: brightness(0.85) saturate(1); }
:where(body.page-home) .video-slide:focus-visible { outline: 2px solid var(--zm-focus-dark); outline-offset: 3px; }
:where(body.page-home) .slide-play { transition: scale 0.35s var(--zm-ease), background-color 0.3s var(--zm-ease); }
:where(body.page-home) .slide-play::after { transition: transform 0.5s var(--zm-ease), opacity 0.5s var(--zm-ease); }
:where(body.page-home) .video-slide.is-active:hover .slide-play,
:where(body.page-home) .pod-item:hover .slide-play { scale: 1.08; }
:where(body.page-home) .video-slide.is-active:hover .slide-play::after { transform: scale(1.12); }
:where(body.page-home) .video-slide.zm-wrap { transition: none !important; }
:where(body.page-home) .zm-vctrl { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
:where(body.page-home) .zm-vbtn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-white);
  display: inline-grid;
  place-items: center;
  transition: background-color var(--zm-micro) var(--zm-ease), border-color var(--zm-micro) var(--zm-ease), transform var(--zm-micro) var(--zm-ease);
}
:where(body.page-home) .zm-vbtn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(214, 255, 62, 0.5); }
:where(body.page-home) .zm-vbtn:active { transform: scale(0.93); }
:where(body.page-home) .zm-vctrl .zm-dots { margin-top: 0; }
:where(body.page-home) .pod-item img { transition: transform 0.8s var(--zm-ease); }
:where(body.page-home) .pod-item:hover img { transform: scale(1.04); }
:where(body.page-home) .pod-item:focus-visible { outline: 2px solid var(--zm-focus-dark); outline-offset: 4px; }
/* ----------------------------------------------------------------------------
   14. Responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 820px) {
:where(body.page-home) .challenge-node,
:where(body.page-home) #challenge .challenge-grid::before,
:where(body.page-home) #challenge .challenge-grid::after { display: none; }
:where(body.page-home) #challenge .challenge-grid { gap: 16px; }
}
@media (max-width: 520px) {
:where(body.page-home) #challenge .icon-card { padding: 24px 22px 28px; }
:where(body.page-home) #challenge .icon-card::before,
:where(body.page-home) #challenge .icon-card::after { left: 22px; right: 22px; }
:where(body.page-home) .icon-card__index { top: 24px; right: 22px; }
:where(body.page-home) #challenge .challenge-more a { width: auto; white-space: normal; text-align: left; font-size: 15px; }
}
/* ----------------------------------------------------------------------------
   15. Reduced motion — content is shown immediately, loops stop
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
/* the base stylesheet's 0.01ms rule makes infinite marquees flicker — stop them instead */
:where(body.page-home) .trusted-track,
:where(body.page-home) .stack-list,
:where(body.page-home) #how-we-think .glow-panel::before { animation: none !important; }
:where(body.page-home) .trusted-marquee,
:where(body.page-home) .stack-strip { overflow-x: auto; scrollbar-width: none; }
:where(body.page-home) .circled__path { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
:where(body.page-home) .zm-strike::after,
:where(body.page-home) .zm-broken::after { transform: scaleX(1) !important; }
:where(body.page-home) .diff-row__check path { stroke-dashoffset: 0 !important; }
:where(body.page-home) .model-card.is-active .model-card__body > *,
:where(body.page-home) .model-card.is-active .model-card__pills { animation: none !important; }
html.zm-js :where(body.page-home) .orbit:not(.is-visible) .orbit__ring { opacity: 1; }
}
/* ===== about: motion layer (scoped to body.page-about) ===== */
/* ==========================================================================
   Zemotify — About page motion layer
   Load after zemotify-motion.css (core). Adds motion to the finalized About
   design; it does not change layout, content or the hero treatment.
   ========================================================================== */
/* Layout rule in about.css was keyed to the animation class
   (#origins .is-visible:first-child), so the copy jumped when it revealed.
   Same padding, keyed to structure instead. */
:where(body.page-about) #origins .ab-origins__grid > :first-child { padding: 0 0 19px 24px; }
/* …and that old selector would now also catch the badge once it reveals */
:where(body.page-about) #origins .badge.is-visible:first-child { padding: 5px 15px; }
/* ----------------------------------------------------------------------------
   Hero — the watermark rises in behind the copy, then drifts on scroll
   ---------------------------------------------------------------------------- */
:where(body.page-about) .ab-hero__watermark { translate: 0 calc(var(--zm-par, 0) * 1px); }
html.zm-js :where(body.page-about) .ab-hero__watermark[data-zm-in] { --zm-rd: 1.6s; }
html.zm-js :where(body.page-about) .ab-hero__watermark[data-zm-in]:not(.is-in) { translate: 0 56px; }
/* after the entrance, follow the scroll-linked parallax closely */
html.zm-js :where(body.page-about) .ab-hero__watermark[data-zm-in].zm-settled { transition: translate 0.12s linear; }
:where(body.page-about) .ab-stat__num { white-space: nowrap; transition: transform 0.35s var(--zm-ease); }
:where(body.page-about) .ab-stat:hover .ab-stat__num { transform: translateY(-3px); }
/* gradient hairlines draw from the centre */
html.zm-js :where(body.page-about) .ab-stats__divider[data-reveal]:not(.is-visible) { transform: scaleY(0); opacity: 0; }
/* ----------------------------------------------------------------------------
   Identity — numbered list, one row in focus at a time
   ---------------------------------------------------------------------------- */
:where(body.page-about) .ab-item { position: relative; }
:where(body.page-about) .ab-item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--lime), rgba(214, 255, 62, 0) 70%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--zm-ease);
}
:where(body.page-about) .ab-item:first-child::before { top: 0; }
:where(body.page-about) .ab-item__num { transition: transform 0.45s var(--zm-ease); }
:where(body.page-about) .ab-item__body h3,
:where(body.page-about) .ab-item__body p { transition: color 0.3s var(--zm-ease); }
:where(body.page-about) .ab-item:hover::before { transform: scaleX(1); }
:where(body.page-about) .ab-item:hover .ab-item__num { transform: translateX(6px); }
:where(body.page-about) .ab-item:hover .ab-item__body p { color: rgba(255, 255, 255, 0.95); }
/* Scroll-led focus: the row crossing the reading line becomes current —
   its numeral lights lime (01's original treatment travels down the list),
   copy brightens, and the aside meter tracks progress. */
:where(body.page-about) .ab-identity { overflow: clip; }
/* clip (not hidden) so the aside can stick */
:where(body.page-about) .ab-item__num { position: relative; }
:where(body.page-about) .ab-item__num::after {
  content: attr(data-num);
  position: absolute;
  inset: 0;
  background: linear-gradient(106.8deg, #5b713d 0%, #d6ff3e 52%, #d6ff3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transition: opacity 0.6s var(--zm-ease);
}
:where(body.page-about) .ab-item__num.text-lime { transition: opacity 0.6s var(--zm-ease), transform 0.45s var(--zm-ease); }
:where(body.page-about) .ab-item__body h3 { transition: color 0.5s var(--zm-ease), opacity 0.5s var(--zm-ease); }
:where(body.page-about) .ab-item__body p { transition: color 0.5s var(--zm-ease); }
html.zm-js :where(body.page-about) [data-zm-steps] .ab-item:not(.is-current) .ab-item__body p { color: rgba(255, 255, 255, 0.55); }
html.zm-js :where(body.page-about) [data-zm-steps] .ab-item:not(.is-current) .ab-item__body h3 { opacity: 0.72; }
html.zm-js :where(body.page-about) [data-zm-steps] .ab-item:not(.is-current) .ab-item__num.text-lime { opacity: 0.35; }
:where(body.page-about) .ab-item.is-current .ab-item__num::after { opacity: 1; }
:where(body.page-about) .ab-item.is-current::before { transform: scaleX(1); }
:where(body.page-about) .ab-item.is-current .ab-item__body p { color: rgba(255, 255, 255, 0.92); }
:where(body.page-about) .ab-identity__meter {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.45);
}
:where(body.page-about) .ab-identity__count { color: var(--lime); min-width: 2ch; }
:where(body.page-about) .ab-identity__track {
  position: relative;
  flex: 0 1 140px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
:where(body.page-about) .ab-identity__track i {
  position: absolute;
  inset: 0;
  background: var(--lime);
  transform-origin: left;
  transform: scaleX(var(--zm-progress, 0));
  transition: transform 0.15s linear;
}
@media (min-width: 1181px) {
:where(body.page-about) .ab-identity__aside { position: sticky; top: 132px; }
}
html:not(.zm-js) :where(body.page-about) .ab-identity__meter { display: none; }
/* ----------------------------------------------------------------------------
   Vision & Mission — icons draw themselves in
   ---------------------------------------------------------------------------- */
:where(body.page-about) .ab-vm-card { position: relative; overflow: hidden; }
:where(body.page-about) .ab-vm-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff5b1f, #5a2bff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--zm-ease);
}
:where(body.page-about) .ab-vm-card__tile { transition: transform 0.45s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), box-shadow 0.3s var(--zm-ease); }
:where(body.page-about) .ab-vm-card__tile [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--zm-ease) 0.4s; }
:where(body.page-about) .ab-vm-card.is-visible .ab-vm-card__tile [pathLength],
html:not(.zm-js) :where(body.page-about) .ab-vm-card__tile [pathLength] { stroke-dashoffset: 0; }
/* eye blinks once, target dot pulses once — small, content-matched responses */
:where(body.page-about) .zm-eye { transform-origin: 12px 12px; transform-box: view-box; }
:where(body.page-about) .zm-target-dot { transform-origin: 12px 12px; transform-box: view-box; }
:where(body.page-about) .ab-vm-card:hover .zm-eye { animation: zm-blink 0.5s var(--zm-ease-io); }
:where(body.page-about) .ab-vm-card:hover .zm-target-dot { animation: zm-pulse 0.7s var(--zm-ease); }
@keyframes zm-blink { 0%, 100% { transform: scaleY(1); } 45% { transform: scaleY(0.12); } }
@keyframes zm-pulse { 0% { transform: scale(1); } 40% { transform: scale(2.2); } 100% { transform: scale(1); } }
:where(body.page-about) .ab-vm-card h3 { transition: color 0.3s var(--zm-ease); }
:where(body.page-about) .ab-vm-card:hover { border-color: rgba(194, 65, 12, 0.22); }
:where(body.page-about) .ab-vm-card:hover::after { transform: scaleX(1); }
:where(body.page-about) .ab-vm-card:hover .ab-vm-card__tile {
  background: var(--orange);
  color: var(--white);
  transform: translateY(-2px) rotate(-6deg);
  box-shadow: 0 10px 22px rgba(255, 91, 31, 0.28);
}
:where(body.page-about) .ab-vm-card:hover h3 { color: var(--purple-soft); }
/* ----------------------------------------------------------------------------
   Values
   ---------------------------------------------------------------------------- */
:where(body.page-about) .ab-value-card { position: relative; overflow: hidden; }
:where(body.page-about) .ab-value-card::before {
  content: "";
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #ff5b1f, #5a2bff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--zm-ease);
}
/* Each value gets a homepage-family icon tile; hover (or, on touch, the card
   in the reading line) brings the card forward, fills the tile and redraws
   the icon. */
:where(body.page-about) .ab-value-card {
  border: 1px solid transparent;
  transition: transform 0.35s var(--zm-ease), box-shadow 0.35s var(--zm-ease), background-color 0.35s var(--zm-ease), border-color 0.35s var(--zm-ease), opacity 0.35s var(--zm-ease);
}
:where(body.page-about) .ab-value-card .icon-tile { margin-bottom: 22px; transition: transform 0.45s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), box-shadow 0.3s var(--zm-ease); }
:where(body.page-about) .ab-value-card [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--zm-ease) 0.35s; }
:where(body.page-about) .ab-value-card.is-visible [pathLength],
html:not(.zm-js) :where(body.page-about) .ab-value-card [pathLength] { stroke-dashoffset: 0; }
:where(body.page-about) .ab-value-card h3 { transition: color 0.3s var(--zm-ease); }
:where(body.page-about) .ab-value-card:hover,
:where(body.page-about) .ab-value-card.is-current {
  background: var(--white);
  border-color: rgba(124, 58, 237, 0.16);
}
:where(body.page-about) .ab-value-card:hover::before,
:where(body.page-about) .ab-value-card.is-current::before { transform: scaleX(1); }
:where(body.page-about) .ab-value-card:hover h3,
:where(body.page-about) .ab-value-card.is-current h3 { color: var(--purple-soft); }
:where(body.page-about) .ab-value-card:hover .icon-tile,
:where(body.page-about) .ab-value-card.is-current .icon-tile {
  background: var(--orange);
  color: var(--white);
  transform: rotate(-6deg);
  box-shadow: 0 10px 22px rgba(255, 91, 31, 0.28);
}
:where(body.page-about) .ab-value-card:hover [pathLength] { animation: zm-redraw 0.9s var(--zm-ease); }
@keyframes zm-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media (hover: hover) and (pointer: fine) {
:where(body.page-about) .ab-values__grid:hover .ab-value-card.is-visible:not(:hover) { opacity: 0.6; }
}
/* the reading-line "current" state is the touch / narrow-screen equivalent of hover */
@media (hover: hover) and (pointer: fine) and (min-width: 821px) {
:where(body.page-about) .ab-value-card.is-current:not(:hover) { background: var(--cream); border-color: transparent; }
:where(body.page-about) .ab-value-card.is-current:not(:hover)::before { transform: scaleX(0); }
:where(body.page-about) .ab-value-card.is-current:not(:hover) h3 { color: var(--text); }
:where(body.page-about) .ab-value-card.is-current:not(:hover) .icon-tile { background: #ffece2; color: var(--orange); transform: none; box-shadow: none; }
}
/* ----------------------------------------------------------------------------
   Team + Origins placeholders
   ---------------------------------------------------------------------------- */
:where(body.page-about) .ab-member__photo {
  transition: transform 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease), border-color 0.3s var(--zm-ease);
}
:where(body.page-about) .ab-member__name { transition: color 0.3s var(--zm-ease); }
:where(body.page-about) .ab-member:hover .ab-member__photo,
:where(body.page-about) .ab-origins__visual:hover {
  border-color: rgba(124, 58, 237, 0.4);
  box-shadow: 0 18px 40px -20px rgba(19, 19, 22, 0.25);
}
:where(body.page-about) .ab-member:hover .ab-member__photo { transform: translateY(-4px); }
:where(body.page-about) .ab-member:hover .ab-member__name { color: var(--purple-soft); }
/* ----------------------------------------------------------------------------
   Founder — slower, deliberate sequence
   ---------------------------------------------------------------------------- */
:where(body.page-about) .ab-founder__quote-mark { transition: opacity 1.2s var(--zm-ease) 0.3s, transform 1.2s var(--zm-ease) 0.3s; }
html.zm-js :where(body.page-about) .ab-founder:not(.is-visible) .ab-founder__quote-mark { opacity: 0; transform: translate(-14px, -14px) scale(0.9); }
:where(body.page-about) .ab-founder__wave { animation: zm-wave 16s ease-in-out infinite alternate; }
@keyframes zm-wave {
  from { translate: 0 0; }
  to   { translate: 14px -18px; }
}
:where(body.page-about) .ab-founder__person { --zm-radius: 12px; }
:where(body.page-about) .ab-founder__person img { transition: box-shadow 0.5s var(--zm-ease), border-color 0.5s var(--zm-ease); }
:where(body.page-about) .ab-founder__person:hover img { border-color: rgba(255, 91, 31, 0.45); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.6); }
/* ----------------------------------------------------------------------------
   Life — the photo fan assembles piece by piece as it scrolls in.
   These pieces are absolutely positioned and centred with transform, so they
   use the core soft reveal (data-zm-in → .is-in), which animates the
   individual translate / scale properties and leaves transform untouched.
   ---------------------------------------------------------------------------- */
html.zm-js :where(body.page-about) .ab-fan__photo:not(.is-in) { scale: 0.92; }
html.zm-js :where(body.page-about) .ab-fan__photo--1:not(.is-in) { translate: 36px -16px; }
html.zm-js :where(body.page-about) .ab-fan__photo--2:not(.is-in) { translate: -36px 16px; }
html.zm-js :where(body.page-about) .ab-fan__photo--3:not(.is-in) { translate: 28px 18px; }
html.zm-js :where(body.page-about) .ab-fan__photo--4:not(.is-in) { translate: -28px 18px; }
html.zm-js :where(body.page-about) .ab-fan__photo--group:not(.is-in) { translate: 0 48px; scale: 0.96; }
html.zm-js :where(body.page-about) .ab-fan__line:not(.is-in) { translate: none; scale: 1 0; }
:where(body.page-about) .ab-fan__line { transform-origin: top; }
:where(body.page-about) .ab-fan__photo.is-in:hover { scale: 1.03; box-shadow: 0 24px 50px -22px rgba(19, 19, 22, 0.45); }
:where(body.page-about) .ab-fan__photo--group.is-in:hover { scale: 1.015; }
:where(body.page-about) .ab-fan__purple {
  background: linear-gradient(transparent 88%, rgba(104, 0, 228, 0.18) 88%) no-repeat;
  background-size: 0% 100%;
  transition: background-size 1.2s var(--zm-ease) 0.5s;
}
:where(body.page-about) .ab-fan__text--1.is-in .ab-fan__purple,
html:not(.zm-js) :where(body.page-about) .ab-fan__purple { background-size: 100% 100%; }
/* Scroll-led reading: words move from a quiet tone to full ink as the
   paragraph passes through the reading zone; the purple lead-in keeps its
   brand colour. The side photos drift at different rates in step with it. */
:where(body.page-about) .ab-fan__text.zm-scrolltext-ready .zm-word { color: rgba(74, 85, 101, 0.34); transition: color 0.45s var(--zm-ease); }
:where(body.page-about) .ab-fan__text.zm-scrolltext-ready .zm-word.is-lit { color: var(--text); }
:where(body.page-about) .ab-fan__text.zm-scrolltext-ready .ab-fan__purple .zm-word { color: rgba(104, 0, 228, 0.3); }
:where(body.page-about) .ab-fan__text.zm-scrolltext-ready .ab-fan__purple .zm-word.is-lit { color: #6800e4; }
:where(body.page-about) .ab-fan__text.zm-scrolltext-done .ab-fan__purple { background-size: 100% 100%; }
:where(body.page-about) .ab-fan__text--1.is-in .ab-fan__purple { background-size: 0% 100%; }
:where(body.page-about) .ab-fan__text--1.zm-scrolltext-done .ab-fan__purple { background-size: 100% 100%; }
:where(body.page-about) .ab-fan__photo[data-zm-parallax] { translate: 0 calc(var(--zm-par, 0) * 1px); }
html.zm-js :where(body.page-about) .ab-fan__photo[data-zm-parallax].zm-settled {
  transition: opacity 0.45s var(--zm-ease), translate 0.14s linear, scale 0.45s var(--zm-ease), box-shadow 0.4s var(--zm-ease);
}
:where(body.page-about) .ab-fan__line { transition: scale 1s var(--zm-ease), opacity 1s var(--zm-ease); }
@media (max-width: 767px) {
:where(body.page-about) .ab-fan__photo[data-zm-parallax] { translate: none; }
}
/* Gallery marquee (driven by the core script's [data-zm-marquee]) */
:where(body.page-about) .ab-gallery-wrap { touch-action: pan-y; }
:where(body.page-about) .ab-gallery-wrap.is-dragging { cursor: grabbing !important; }
:where(body.page-about) .ab-gallery { will-change: transform; }
:where(body.page-about) .ab-gallery img { transition: opacity 0.35s var(--zm-ease), transform 0.45s var(--zm-ease), box-shadow 0.45s var(--zm-ease); }
@media (hover: hover) and (pointer: fine) {
:where(body.page-about) .ab-gallery-wrap:not(.is-dragging) .ab-gallery:hover img:not(:hover) { opacity: 0.7; }
:where(body.page-about) .ab-gallery-wrap:not(.is-dragging) .ab-gallery img:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgba(19, 19, 22, 0.5); }
}
/* ----------------------------------------------------------------------------
   Origins — an engineering-drawing treatment: blueprint grid behind the
   visual, registration marks that draw in around it, a build line along the
   copy, and the headline's key phrase marked like the homepage.
   ---------------------------------------------------------------------------- */
:where(body.page-about) #origins { position: relative; isolation: isolate; overflow: clip; }
:where(body.page-about) #origins::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(124, 58, 237, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 58, 237, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 40% 70% at 74% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 40% 70% at 74% 50%, #000 20%, transparent 75%);
  pointer-events: none;
}
:where(body.page-about) #origins .ab-origins__grid > :first-child { position: relative; }
:where(body.page-about) #origins .ab-origins__grid > :first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 19px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #ff5b1f, #5a2bff);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.1s var(--zm-ease) 0.2s;
}
:where(body.page-about) #origins .ab-origins__grid > .is-visible:first-child::before,
html:not(.zm-js) :where(body.page-about) #origins .ab-origins__grid > :first-child::before { transform: scaleY(1); }
:where(body.page-about) .ab-origins__visual {
  position: relative;
  translate: 0 calc(var(--zm-par, 0) * 1px);
}
:where(body.page-about) .ab-origins__corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--orange);
  border-style: solid;
  border-width: 0;
  transition: transform 0.6s var(--zm-ease), opacity 0.6s var(--zm-ease);
}
:where(body.page-about) .ab-origins__corner--tl { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
:where(body.page-about) .ab-origins__corner--tr { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
:where(body.page-about) .ab-origins__corner--bl { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
:where(body.page-about) .ab-origins__corner--br { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
html.zm-js :where(body.page-about) .ab-origins__visual:not(.is-visible) .ab-origins__corner { opacity: 0; }
html.zm-js :where(body.page-about) .ab-origins__visual:not(.is-visible) .ab-origins__corner--tl { transform: translate(14px, 14px); }
html.zm-js :where(body.page-about) .ab-origins__visual:not(.is-visible) .ab-origins__corner--tr { transform: translate(-14px, 14px); }
html.zm-js :where(body.page-about) .ab-origins__visual:not(.is-visible) .ab-origins__corner--bl { transform: translate(14px, -14px); }
html.zm-js :where(body.page-about) .ab-origins__visual:not(.is-visible) .ab-origins__corner--br { transform: translate(-14px, -14px); }
:where(body.page-about) .ab-origins__visual.is-visible .ab-origins__corner { transition-delay: 0.55s; }
:where(body.page-about) .ab-origins__visual:hover .ab-origins__corner--tl { transform: translate(-4px, -4px); }
:where(body.page-about) .ab-origins__visual:hover .ab-origins__corner--tr { transform: translate(4px, -4px); }
:where(body.page-about) .ab-origins__visual:hover .ab-origins__corner--bl { transform: translate(-4px, 4px); }
:where(body.page-about) .ab-origins__visual:hover .ab-origins__corner--br { transform: translate(4px, 4px); }
:where(body.page-about) .ab-origins__visual:hover .ab-origins__corner { transition-delay: 0s; }
html.zm-js :where(body.page-about) .ab-origins__visual.is-visible.zm-settled { transition: translate 0.14s linear, box-shadow 0.4s var(--zm-ease), border-color 0.3s var(--zm-ease); }
@media (max-width: 767px) {
:where(body.page-about) .ab-origins__visual { translate: none; }
:where(body.page-about) .ab-origins__corner { width: 16px; height: 16px; }
:where(body.page-about) .ab-origins__corner--tl,
:where(body.page-about) .ab-origins__corner--tr { top: 9px; }
:where(body.page-about) .ab-origins__corner--bl,
:where(body.page-about) .ab-origins__corner--br { bottom: 9px; }
:where(body.page-about) .ab-origins__corner--tl,
:where(body.page-about) .ab-origins__corner--bl { left: 9px; }
:where(body.page-about) .ab-origins__corner--tr,
:where(body.page-about) .ab-origins__corner--br { right: 9px; }
}
/* ----------------------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(body.page-about) .ab-founder__wave { animation: none; }
:where(body.page-about) .ab-hero__watermark { translate: none !important; opacity: 1 !important; transition: none; }
:where(body.page-about) .ab-vm-card__tile [pathLength],
:where(body.page-about) .ab-value-card [pathLength] { stroke-dashoffset: 0 !important; }
:where(body.page-about) .zm-eye,
:where(body.page-about) .zm-target-dot { animation: none !important; }
:where(body.page-about) .ab-fan__purple { background-size: 100% 100% !important; }
:where(body.page-about) .ab-fan__text .zm-word { color: inherit !important; }
:where(body.page-about) .ab-fan__photo[data-zm-parallax] { translate: none !important; }
html.zm-js :where(body.page-about) .ab-founder:not(.is-visible) .ab-founder__quote-mark { opacity: 1; transform: none; }
:where(body.page-about) .ab-gallery-wrap { overflow-x: auto !important; scrollbar-width: none; }
:where(body.page-about) .ab-origins__visual { translate: none !important; }
:where(body.page-about) .ab-origins__corner { opacity: 1 !important; transform: none !important; }
:where(body.page-about) #origins .ab-origins__grid > :first-child::before { transform: scaleY(1) !important; }
}
/* ===== how-we-work: motion layer (scoped to body.page-hww) ===== */
/* ==========================================================================
   Zemotify — How We Work page motion layer
   Load after zemotify-motion.css (core). Adds motion and interaction to the
   finalized How We Work design; layout, copy and the hero treatment are kept.
   ========================================================================== */
/* ----------------------------------------------------------------------------
   Hero — same watermark behaviour as About (rise in, drift with scroll)
   ---------------------------------------------------------------------------- */
:where(body.page-hww) .hww-hero__watermark { translate: 0 calc(var(--zm-par, 0) * 1px); }
html.zm-js :where(body.page-hww) .hww-hero__watermark[data-zm-in] { --zm-rd: 1.6s; }
html.zm-js :where(body.page-hww) .hww-hero__watermark[data-zm-in]:not(.is-in) { translate: -40px 0; }
html.zm-js :where(body.page-hww) .hww-hero__watermark[data-zm-in].zm-settled { transition: translate 0.12s linear; }
/* ----------------------------------------------------------------------------
   Engagement model cards — homepage tile behaviour on the light cards,
   a lime-lit tile on the featured card; buttons get press + focus states
   ---------------------------------------------------------------------------- */
:where(body.page-hww) .hww-mcard__icon { transition: transform 0.45s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), border-color 0.3s var(--zm-ease), box-shadow 0.3s var(--zm-ease); }
:where(body.page-hww) .hww-mcard__icon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--zm-ease) 0.35s; }
:where(body.page-hww) .hww-mcard.is-visible .hww-mcard__icon [pathLength],
html:not(.zm-js) :where(body.page-hww) .hww-mcard__icon [pathLength] { stroke-dashoffset: 0; }
:where(body.page-hww) .hww-mcard__title { transition: color 0.3s var(--zm-ease); }
:where(body.page-hww) .hww-mcard__tags li { transition: background-color 0.3s var(--zm-ease), border-color 0.3s var(--zm-ease); }
:where(body.page-hww) .hww-mcard:not(.hww-mcard--dark):hover { border-color: rgba(255, 91, 31, 0.35); }
:where(body.page-hww) .hww-mcard:not(.hww-mcard--dark):hover .hww-mcard__icon {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  transform: rotate(-6deg);
  box-shadow: 0 10px 22px rgba(255, 91, 31, 0.3);
}
:where(body.page-hww) .hww-mcard:not(.hww-mcard--dark):hover .hww-mcard__title { color: var(--purple-soft); }
:where(body.page-hww) .hww-mcard--dark:hover .hww-mcard__icon { transform: rotate(-6deg) scale(1.04); }
:where(body.page-hww) .hww-mcard--dark:hover { border-color: rgba(214, 255, 62, 0.45); }
:where(body.page-hww) .hww-mcard--dark:hover .hww-mcard__tags li { border-color: rgba(214, 255, 62, 0.25); }
:where(body.page-hww) .hww-mcard__btn { position: relative; overflow: hidden; }
:where(body.page-hww) .hww-mcard__btn:active { transform: scale(0.97); transition-duration: 0.08s; }
:where(body.page-hww) .hww-mcard__btn:focus-visible { outline: 2px solid var(--zm-focus); outline-offset: 3px; }
:where(body.page-hww) .hww-mcard--dark .hww-mcard__btn:focus-visible { outline-color: var(--zm-focus-dark); }
/* ----------------------------------------------------------------------------
   Day One — icons draw in, items respond on hover
   ---------------------------------------------------------------------------- */
:where(body.page-hww) .hww-dayone__icon { transition: transform 0.45s var(--zm-ease), border-color 0.3s var(--zm-ease), box-shadow 0.3s var(--zm-ease), background 0.3s var(--zm-ease); }
:where(body.page-hww) .hww-dayone__icon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--zm-ease) 0.3s; }
:where(body.page-hww) .hww-dayone__item.is-visible .hww-dayone__icon [pathLength],
html:not(.zm-js) :where(body.page-hww) .hww-dayone__icon [pathLength] { stroke-dashoffset: 0; }
:where(body.page-hww) .hww-dayone__title { transition: color 0.3s var(--zm-ease); }
:where(body.page-hww) .hww-dayone__item:hover .hww-dayone__icon {
  transform: translateY(-3px) rotate(-5deg);
  border-color: rgba(214, 255, 62, 0.45);
  box-shadow: 0 14px 30px -12px rgba(90, 43, 255, 0.6);
}
:where(body.page-hww) .hww-dayone__item:hover .hww-dayone__title { color: var(--lime); }
/* ----------------------------------------------------------------------------
   Strategic Advantage — read pair by pair. The pair at the reading line is
   current: the broken-model cell takes a red edge, the Zemotify cell answers
   with a green edge and a redrawn check. Pairs already read keep their answer
   lit while the broken-model title is quietly struck through.
   ---------------------------------------------------------------------------- */
:where(body.page-hww) .hww-cmp__cell { position: relative; transition: background-color 0.45s var(--zm-ease), box-shadow 0.45s var(--zm-ease), opacity 0.45s var(--zm-ease); }
:where(body.page-hww) .hww-cmp__cell .hww-cmp__icon { transition: transform 0.45s var(--zm-ease), box-shadow 0.45s var(--zm-ease); }
:where(body.page-hww) .hww-cmp__cell--good [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 0; }
:where(body.page-hww) .hww-cmp__title { position: relative; width: fit-content; transition: color 0.4s var(--zm-ease); }
:where(body.page-hww) .hww-cmp__cell--bad .hww-cmp__title {
  background: linear-gradient(rgba(200, 51, 51, 0.7), rgba(200, 51, 51, 0.7)) no-repeat 0 58% / 0% 1.5px;
  transition: background-size 0.7s var(--zm-ease), color 0.4s var(--zm-ease);
}
html.zm-js :where(body.page-hww) .hww-cmp[data-zm-steps] .hww-cmp__cell--bad.is-current { box-shadow: inset 3px 0 0 #c83333; }
html.zm-js :where(body.page-hww) .hww-cmp[data-zm-steps] .hww-cmp__cell--bad.is-current .hww-cmp__icon { transform: rotate(-8deg); }
html.zm-js :where(body.page-hww) .hww-cmp[data-zm-steps] .hww-cmp__cell--bad.is-current + .hww-cmp__cell--good { box-shadow: inset -3px 0 0 #00c277, 0 18px 40px -26px rgba(0, 194, 119, 0.55); z-index: 1; }
html.zm-js :where(body.page-hww) .hww-cmp[data-zm-steps] .hww-cmp__cell--bad.is-current + .hww-cmp__cell--good .hww-cmp__icon { transform: scale(1.08); box-shadow: 0 8px 20px -8px rgba(0, 194, 119, 0.7); }
html.zm-js :where(body.page-hww) .hww-cmp[data-zm-steps] .hww-cmp__cell--bad.is-current + .hww-cmp__cell--good [pathLength] { animation: zm-redraw 0.8s var(--zm-ease); }
html.zm-js :where(body.page-hww) .hww-cmp[data-zm-steps] .hww-cmp__cell--bad.is-past .hww-cmp__title { background-size: 100% 1.5px; color: #6b6f78; }
@keyframes zm-redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
:where(body.page-hww) .hww-cmp__cell--good:hover { background: #fbfffd; }
:where(body.page-hww) .hww-cmp__cell--good:hover .hww-cmp__icon { transform: scale(1.08); }
:where(body.page-hww) .hww-cmp__cell--bad:hover .hww-cmp__icon { transform: rotate(-8deg); }
/* ----------------------------------------------------------------------------
   How We Work rows — the lime spine follows scroll (restores the
   main.js behaviour via the shared step tracker), each diagram builds itself
   in, and only the row being read animates its process.
   ---------------------------------------------------------------------------- */
:where(body.page-hww) .hww-mrow { --axis-p: var(--zm-progress, 0); }
:where(body.page-hww) .hww-mrow__axis i { transition: height 0.18s linear; }
html:not(.zm-js) :where(body.page-hww) .hww-mrow { --axis-p: 1; }
:where(body.page-hww) .hww-diagram svg > * { transition: opacity 0.6s var(--zm-ease), translate 0.7s var(--zm-ease); transition-delay: calc(var(--i, 0) * 45ms + 150ms); }
html.zm-js :where(body.page-hww) .hww-diagram:not(.is-visible) svg > * { opacity: 0; translate: 0 8px; }
/* text side reads as the row becomes current */
:where(body.page-hww) .hww-mrow__body { transition: opacity 0.5s var(--zm-ease); }
html.zm-js :where(body.page-hww) .hww-mrow[data-zm-steps] .hww-mrow__body:not(.is-current) .hww-mrow__text { opacity: 0.55; }
:where(body.page-hww) .hww-mrow__text { transition: opacity 0.5s var(--zm-ease); }
:where(body.page-hww) .hww-mrow__pill { transition: background-color 0.4s var(--zm-ease), color 0.4s var(--zm-ease), border-color 0.4s var(--zm-ease); }
:where(body.page-hww) .hww-mrow__body.is-current .hww-mrow__pill { background: var(--lime); border-color: var(--lime); color: #0b0b0c; }
:where(body.page-hww) .hww-specs__key { transition: background-color 0.3s var(--zm-ease), border-color 0.3s var(--zm-ease); }
:where(body.page-hww) .hww-specs li:hover .hww-specs__key { background: rgba(214, 255, 61, 0.18); border-color: rgba(214, 255, 61, 0.5); }
:where(body.page-hww) .hww-specs__val { transition: color 0.3s var(--zm-ease); }
:where(body.page-hww) .hww-specs li:hover .hww-specs__val { color: var(--white); }
/* 01 — embedded: dashed connectors carry a slow flow while current */
:where(body.page-hww) .hww-mrow__body.is-current .hww-diagram--embed g[stroke-dasharray] { animation: zm-dash-flow 1.6s linear infinite; }
@keyframes zm-dash-flow { to { stroke-dashoffset: -21.56; } }
/* 02 — pod: the three roles light in turn while current */
:where(body.page-hww) .hww-diagram--pod g rect { transition: stroke 0.4s var(--zm-ease); }
:where(body.page-hww) .hww-mrow__body.is-current .hww-diagram--pod g rect { animation: zm-node 4.5s var(--zm-ease) infinite; }
:where(body.page-hww) .hww-mrow__body.is-current .hww-diagram--pod g rect:nth-child(2) { animation-delay: 1.5s; }
:where(body.page-hww) .hww-mrow__body.is-current .hww-diagram--pod g rect:nth-child(3) { animation-delay: 3s; }
/* 03 — pipeline: Design → Build → Test → Ship light in sequence */
:where(body.page-hww) .hww-mrow__body.is-current .hww-diagram--pipeline g:nth-of-type(4) rect { animation: zm-node 4.8s var(--zm-ease) infinite; }
:where(body.page-hww) .hww-mrow__body.is-current .hww-diagram--pipeline g:nth-of-type(4) rect:nth-child(2) { animation-delay: 1.2s; }
:where(body.page-hww) .hww-mrow__body.is-current .hww-diagram--pipeline g:nth-of-type(4) rect:nth-child(3) { animation-delay: 2.4s; }
:where(body.page-hww) .hww-mrow__body.is-current .hww-diagram--pipeline g:nth-of-type(4) rect:nth-child(4) { animation-delay: 3.6s; }
@keyframes zm-node {
  0%, 30%, 100% { stroke: rgba(255, 255, 255, 0.12); }
  8%, 20%      { stroke: #d6ff3e; }
}
/* ----------------------------------------------------------------------------
   Delivery process — the active step travels with scroll; the rail fills
   ---------------------------------------------------------------------------- */
:where(body.page-hww) .hww-steps::after {
  content: "";
  position: absolute;
  top: 42px;
  left: 54px;
  width: 2px;
  height: 504px;
  background: linear-gradient(180deg, #ff5b1f 0%, #5a2bff 100%);
  transform-origin: top;
  transform: scaleY(var(--zm-progress, 0));
  transition: transform 0.18s linear;
  pointer-events: none;
  z-index: 0;
}
html:not(.zm-js) :where(body.page-hww) .hww-steps::after { display: none; }
:where(body.page-hww) .hww-step { transition: transform 0.3s var(--zm-ease), box-shadow 0.45s var(--zm-ease), border-color 0.45s var(--zm-ease), opacity 0.45s var(--zm-ease); }
:where(body.page-hww) .hww-step__num { transition: filter 0.45s var(--zm-ease), transform 0.45s var(--zm-ease); }
:where(body.page-hww) .hww-step__tick { transition: transform 0.45s var(--zm-ease), background-color 0.45s var(--zm-ease); }
/* .is-current reproduces the design's .hww-step--active, now driven by scroll */
:where(body.page-hww) .hww-step.is-current {
  border: 0.5px solid #ff5b1f;
  box-shadow: 0 30px 60px -40px rgba(255, 91, 31, 0.35);
}
:where(body.page-hww) .hww-step.is-current .hww-step__num { transform: scale(1.06); }
:where(body.page-hww) .hww-step.is-current .hww-step__tick { background: var(--orange); transform: scaleY(1.4); }
html.zm-js :where(body.page-hww) .hww-steps[data-zm-steps] .hww-step:not(.is-current):not(.is-past) .hww-step__num { filter: grayscale(0.9); opacity: 0.55; }
:where(body.page-hww) .hww-step__num { transition: filter 0.45s var(--zm-ease), transform 0.45s var(--zm-ease), opacity 0.45s var(--zm-ease); }
/* ----------------------------------------------------------------------------
   Communication & Visibility — list cascades, dashboard comes alive
   ---------------------------------------------------------------------------- */
:where(body.page-hww) .hww-comm__bullet [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.8s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 90ms + 450ms); }
:where(body.page-hww) .hww-comm__list.is-visible .hww-comm__bullet [pathLength],
html:not(.zm-js) :where(body.page-hww) .hww-comm__bullet [pathLength] { stroke-dashoffset: 0; }
:where(body.page-hww) .hww-comm__list li { transition: color 0.3s var(--zm-ease); }
:where(body.page-hww) .hww-comm__list li:hover { color: var(--white); }
:where(body.page-hww) .hww-comm__bullet { transition: transform 0.35s var(--zm-ease); }
:where(body.page-hww) .hww-comm__list li:hover .hww-comm__bullet { transform: scale(1.1); }
:where(body.page-hww) .hww-dash { transition: box-shadow 0.5s var(--zm-ease), border-color 0.5s var(--zm-ease); }
:where(body.page-hww) .hww-dash:hover { border-color: rgba(230, 227, 220, 0.35); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7); }
:where(body.page-hww) .hww-dash__stat { white-space: nowrap; }
/* the count-up span sits inside the number — keep it out of the label rule */
:where(body.page-hww) .hww-dash__stats .hww-dash__stat span[data-count] { font: inherit; letter-spacing: inherit; line-height: inherit; color: inherit; margin: 0; }
:where(body.page-hww) .hww-dash__rows li { transition: background-color 0.3s var(--zm-ease), border-color 0.3s var(--zm-ease), opacity 0.6s var(--zm-ease), translate 0.6s var(--zm-ease); }
:where(body.page-hww) .hww-dash__rows li:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); }
html.zm-js :where(body.page-hww) .hww-dash:not(.is-visible) .hww-dash__rows li { opacity: 0; translate: 0 10px; }
:where(body.page-hww) .hww-dash__rows li:nth-child(2) { transition-delay: 0s, 0s, 0.08s, 0.08s; }
:where(body.page-hww) .hww-dash__rows li:nth-child(3) { transition-delay: 0s, 0s, 0.16s, 0.16s; }
:where(body.page-hww) .hww-dash__rows li:nth-child(4) { transition-delay: 0s, 0s, 0.24s, 0.24s; }
:where(body.page-hww) .hww-dash__rows li:nth-child(5) { transition-delay: 0s, 0s, 0.32s, 0.32s; }
:where(body.page-hww) .hww-dash__track i { transition-delay: 0.45s; }
:where(body.page-hww) .hww-dash__rows li:nth-child(2) .hww-dash__track i { transition-delay: 0.53s; }
:where(body.page-hww) .hww-dash__rows li:nth-child(3) .hww-dash__track i { transition-delay: 0.61s; }
:where(body.page-hww) .hww-dash__rows li:nth-child(4) .hww-dash__track i { transition-delay: 0.69s; }
:where(body.page-hww) .hww-dash__rows li:nth-child(5) .hww-dash__track i { transition-delay: 0.77s; }
/* "On Track" carries a quiet live indicator */
:where(body.page-hww) .hww-dash__chip--ok { display: inline-flex; align-items: center; gap: 6px; }
:where(body.page-hww) .hww-dash__chip--ok::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0aff9d;
  animation: zm-live 2.4s ease-in-out infinite;
}
@keyframes zm-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 255, 157, 0.5); }
  50%      { box-shadow: 0 0 0 5px rgba(10, 255, 157, 0); }
}
/* ----------------------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(body.page-hww) .hww-hero__watermark { translate: none !important; opacity: 1 !important; }
:where(body.page-hww) .hww-mcard__icon [pathLength],
:where(body.page-hww) .hww-dayone__icon [pathLength],
:where(body.page-hww) .hww-comm__bullet [pathLength] { stroke-dashoffset: 0 !important; }
:where(body.page-hww) .hww-diagram svg > * { opacity: 1 !important; translate: none !important; }
:where(body.page-hww) .hww-diagram *,
:where(body.page-hww) .hww-cmp *,
:where(body.page-hww) .hww-dash__chip--ok::before { animation: none !important; }
:where(body.page-hww) .hww-dash__rows li { opacity: 1 !important; translate: none !important; }
}
/* ===== services: motion layer (scoped to body.page-svc) ===== */
/* ==========================================================================
   Zemotify — All Services page motion layer
   A service-discovery grid: each card is one clear target (the whole card
   follows its link), focuses on hover, and opens its feature list.
   ========================================================================== */
/* hero watermark — same rise-and-drift as About / How We Work */
html.zm-js :where(body.page-svc) .svc-hero__watermark[data-zm-in] { --zm-rd: 1.6s; }
/* ----------------------------------------------------------------------------
   Service cards
   ---------------------------------------------------------------------------- */
:where(body.page-svc) .svc-card { position: relative; isolation: isolate; overflow: hidden; }
/* the card's own link covers the card, so the whole card is one target */
:where(body.page-svc) .svc-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
:where(body.page-svc) .svc-card__link:focus-visible { outline: none; }
:where(body.page-svc) .svc-card:has(.svc-card__link:focus-visible) { outline: 2px solid var(--zm-focus); outline-offset: 3px; }
/* top accent + pointer light, matching the homepage capability cards */
:where(body.page-svc) .svc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 91, 31, 0.07), transparent 70%);
  opacity: 0;
  transition: opacity 0.35s var(--zm-ease);
  pointer-events: none;
}
:where(body.page-svc) .svc-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff5b1f, #5a2bff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--zm-ease);
}
:where(body.page-svc) .svc-card:hover::before { opacity: 1; }
:where(body.page-svc) .svc-card:hover::after { transform: scaleX(1); }
:where(body.page-svc) .svc-card__icon { transition: transform 0.45s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), border-color 0.3s var(--zm-ease), box-shadow 0.3s var(--zm-ease); }
:where(body.page-svc) .svc-card__icon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--zm-ease) 0.3s; }
:where(body.page-svc) .svc-card.is-visible .svc-card__icon [pathLength],
html:not(.zm-js) :where(body.page-svc) .svc-card__icon [pathLength] { stroke-dashoffset: 0; }
:where(body.page-svc) .svc-card:hover .svc-card__icon {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--white);
  transform: rotate(-6deg);
  box-shadow: 0 10px 22px rgba(255, 91, 31, 0.3);
}
:where(body.page-svc) .svc-card__title { transition: color 0.3s var(--zm-ease); }
:where(body.page-svc) .svc-card:hover .svc-card__title { color: var(--purple-soft); }
:where(body.page-svc) .svc-card__list li { transition: color 0.3s var(--zm-ease), translate 0.35s var(--zm-ease); }
:where(body.page-svc) .svc-card__list li::before { transition: translate 0.35s var(--zm-ease); }
:where(body.page-svc) .svc-card:hover .svc-card__list li { translate: 4px 0; }
:where(body.page-svc) .svc-card:hover .svc-card__list li:nth-child(2) { transition-delay: 0.03s; }
:where(body.page-svc) .svc-card:hover .svc-card__list li:nth-child(3) { transition-delay: 0.06s; }
:where(body.page-svc) .svc-card:hover .svc-card__list li:nth-child(4) { transition-delay: 0.09s; }
:where(body.page-svc) .svc-card:hover .svc-card__list li:nth-child(5) { transition-delay: 0.12s; }
:where(body.page-svc) .svc-card__link { position: static; }
:where(body.page-svc) .svc-card:hover .svc-card__link { color: var(--purple-soft); }
:where(body.page-svc) .svc-card:hover .svc-card__link svg { transform: translate(2px, -2px); }
/* one service in focus at a time */
@media (hover: hover) and (pointer: fine) {
:where(body.page-svc) .svc-grid:has(.svc-card:hover) .svc-card.is-visible:not(:hover) { opacity: 0.6; }
}
/* deep links from the Services menu land on a card: brief highlight */
:where(body.page-svc) .svc-card.zm-target { animation: zm-svc-target 1.8s var(--zm-ease); }
@keyframes zm-svc-target {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0); }
  25%      { box-shadow: 0 0 0 4px rgba(255, 91, 31, 0.35); }
}
/* ----------------------------------------------------------------------------
   Technology stack panel
   ---------------------------------------------------------------------------- */
:where(body.page-svc) .svc-tech__head { transition: color 0.3s var(--zm-ease); }
:where(body.page-svc) .svc-tech__list li { transition: background-color 0.3s var(--zm-ease), border-color 0.3s var(--zm-ease), translate 0.3s var(--zm-ease); }
:where(body.page-svc) .svc-tech__list li:hover { background: rgba(214, 255, 61, 0.08); border-color: rgba(214, 255, 61, 0.3); translate: 3px 0; }
:where(body.page-svc) .svc-tech__col:hover .svc-tech__head { color: var(--white); }
/* ----------------------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
:where(body.page-svc) .svc-card__icon [pathLength] { stroke-dashoffset: 0 !important; }
:where(body.page-svc) .svc-card.zm-target { animation: none; }
:where(body.page-svc) .svc-card:hover .svc-card__list li { translate: none; }
}
/* ===== startup: motion layer (scoped to body.page-su) ===== */
/* ==========================================================================
   Zemotify — Startup MVP page motion layer
   The build process reads phase by phase; the launch console runs its
   checklist when it comes into view.
   ========================================================================== */
html.zm-js :where(body.page-su) .su-hero__watermark[data-zm-in] { --zm-rd: 1.6s; }
html.zm-js :where(body.page-su) .su-hero__watermark[data-zm-in]:not(.is-in) { translate: -40px 0; }
/* rocket badge lifts off on hover */
:where(body.page-su) .su-badge { transition: transform 0.5s var(--zm-ease), box-shadow 0.5s var(--zm-ease); }
:where(body.page-su) .su-badge svg { transition: transform 0.6s var(--zm-ease); }
:where(body.page-su) .su-badge:hover { box-shadow: 0 24px 50px -20px rgba(255, 91, 31, 0.55); }
:where(body.page-su) .su-badge:hover svg { transform: translate(3px, -5px); }
/* ----------------------------------------------------------------------------
   Build process — the phase at the reading line is current
   ---------------------------------------------------------------------------- */
:where(body.page-su) .su-phase { position: relative; overflow: hidden; transition: border-color 0.45s var(--zm-ease), box-shadow 0.45s var(--zm-ease), opacity 0.45s var(--zm-ease); }
:where(body.page-su) .su-phase::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #ff5b1f, #5a2bff);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.6s var(--zm-ease);
}
:where(body.page-su) .su-phase__kicker { transition: color 0.4s var(--zm-ease); }
:where(body.page-su) .su-phase.is-current { border-color: rgba(255, 91, 31, 0.35); box-shadow: 0 30px 60px -40px rgba(255, 91, 31, 0.45); }
:where(body.page-su) .su-phase.is-current::before { transform: scaleY(1); }
:where(body.page-su) .su-phase.is-current .su-phase__kicker { color: var(--orange); }
html.zm-js :where(body.page-su) .su-phases[data-zm-steps] .su-phase:not(.is-current) .su-chip { opacity: 0.7; }
:where(body.page-su) .su-chip { transition: border-color 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease), opacity 0.4s var(--zm-ease), translate 0.3s var(--zm-ease); }
:where(body.page-su) .su-chip:hover { border-color: rgba(255, 103, 40, 0.45); background: rgba(255, 103, 40, 0.08); translate: 0 -2px; }
/* ----------------------------------------------------------------------------
   Deliverables — icons draw in
   ---------------------------------------------------------------------------- */
:where(body.page-su) .su-del-card__icon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--zm-ease) 0.3s, stroke var(--dur) var(--ease); }
:where(body.page-su) .su-del-card.is-visible .su-del-card__icon [pathLength],
html:not(.zm-js) :where(body.page-su) .su-del-card__icon [pathLength] { stroke-dashoffset: 0; }
:where(body.page-su) .su-del-card h3 { transition: color 0.3s var(--zm-ease); }
:where(body.page-su) .su-del-card:hover h3 { color: var(--purple-soft); }
/* ----------------------------------------------------------------------------
   Post-MVP scaling — the orbit rings settle in; a satellite circles slowly
   ---------------------------------------------------------------------------- */
:where(body.page-su) .su-orbit__ring { transition: opacity 1s var(--zm-ease), scale 1.1s var(--zm-ease); }
html.zm-js :where(body.page-su) .su-orbit:not(.is-in) .su-orbit__ring { opacity: 0; scale: 0.7; }
:where(body.page-su) .su-orbit__ring--2 { transition-delay: 0.1s; }
:where(body.page-su) .su-orbit__ring--3 { transition-delay: 0.2s; }
:where(body.page-su) .su-orbit__ring--4 { transition-delay: 0.3s; }
html.zm-js :where(body.page-su) .su-orbit[data-zm-in]:not(.is-in) { translate: none; }
:where(body.page-su) .su-orbit__ring--2::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -4px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: #ff6728;
  box-shadow: 0 0 10px rgba(255, 103, 40, 0.6);
}
:where(body.page-su) .su-orbit__ring--2 { animation: zm-orbit 28s linear infinite; }
@keyframes zm-orbit { to { rotate: 360deg; } }
:where(body.page-su) .su-scale-list li { transition: translate 0.3s var(--zm-ease); }
:where(body.page-su) .su-scale-card:hover .su-scale-list li { translate: 4px 0; }
:where(body.page-su) .su-scale-card:hover .su-scale-list li + li { transition-delay: 0.05s; }
/* ----------------------------------------------------------------------------
   Tech stack accordions — the design's toggles now open and close smoothly
   ---------------------------------------------------------------------------- */
:where(body.page-su) .su-acc__panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.45s var(--zm-ease), opacity 0.3s var(--zm-ease);
}
:where(body.page-su) .su-acc__panel > .su-acc__list { min-height: 0; overflow: hidden; }
:where(body.page-su) .su-acc.su-acc--closed .su-acc__list { display: block; }
:where(body.page-su) .su-acc--closed .su-acc__panel { grid-template-rows: 0fr; opacity: 0; }
:where(body.page-su) .su-acc__head { transition: background-color 0.3s var(--zm-ease); }
:where(body.page-su) .su-acc__head:hover { background: rgba(239, 235, 228, 1); }
:where(body.page-su) .su-acc__head:focus-visible { outline: 2px solid var(--zm-focus); outline-offset: -2px; }
:where(body.page-su) .su-acc__list li { transition: background-color 0.3s var(--zm-ease); }
:where(body.page-su) .su-acc__list li:hover { background: rgba(255, 103, 40, 0.05); }
:where(body.page-su) .su-acc__dot { transition: transform 0.3s var(--zm-ease); }
:where(body.page-su) .su-acc__list li:hover .su-acc__dot { transform: scale(1.6); }
/* ----------------------------------------------------------------------------
   Launch console — checklist runs when the console appears
   ---------------------------------------------------------------------------- */
:where(body.page-su) .su-console__line { transform-origin: left; transition: transform 0.8s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 120ms + 400ms); }
html.zm-js :where(body.page-su) .su-console__list:not(.is-visible) .su-console__line { transform: scaleX(0); }
:where(body.page-su) .su-console__check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 120ms + 800ms); }
:where(body.page-su) .su-console__list.is-visible .su-console__check path,
html:not(.zm-js) :where(body.page-su) .su-console__check path { stroke-dashoffset: 0; }
:where(body.page-su) .su-console__list li > * { --zm-i: inherit; }
:where(body.page-su) .su-console__status::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #0a8c5a;
  vertical-align: 1px;
  animation: zm-live-dot 2.4s ease-in-out infinite;
}
@keyframes zm-live-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(10, 140, 90, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(10, 140, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
:where(body.page-su) .su-orbit__ring--2,
:where(body.page-su) .su-console__status::before { animation: none !important; }
:where(body.page-su) .su-del-card__icon [pathLength],
:where(body.page-su) .su-console__check path { stroke-dashoffset: 0 !important; }
html.zm-js :where(body.page-su) .su-console__list .su-console__line { transform: none !important; }
html.zm-js :where(body.page-su) .su-orbit .su-orbit__ring { opacity: 1 !important; scale: none !important; }
}
/* ===== ecommerce: motion layer (scoped to body.page-ec) ===== */
/* ==========================================================================
   Zemotify — E-Commerce Solutions page motion layer
   Commerce-appropriate restraint: checklists tick, the stack assembles, the
   tilted integration cards settle on hover, the order receipt prints.
   ========================================================================== */
html.zm-js :where(body.page-ec) .ec-hero__watermark[data-zm-in] { --zm-rd: 1.6s; }
html.zm-js :where(body.page-ec) .ec-hero__watermark[data-zm-in]:not(.is-in) { translate: -40px 0; }
/* ----------------------------------------------------------------------------
   Shopify Partner card + What We Build
   ---------------------------------------------------------------------------- */
:where(body.page-ec) .ec-status__card { transition: box-shadow 0.5s var(--zm-ease), border-color 0.5s var(--zm-ease); }
:where(body.page-ec) .ec-status__card:hover { box-shadow: 0 40px 80px -40px rgba(90, 43, 255, 0.45); }
:where(body.page-ec) .ec-status__ring { transition: transform 0.8s var(--zm-ease), border-color 0.5s var(--zm-ease); }
:where(body.page-ec) .ec-status__ring svg { transition: stroke-opacity 0.5s var(--zm-ease); }
:where(body.page-ec) .ec-status__card:hover .ec-status__ring { transform: scale(1.12) rotate(-8deg); border-color: rgba(255, 255, 255, 0.22); }
:where(body.page-ec) .ec-status__card:hover .ec-status__ring svg { stroke-opacity: 0.6; }
:where(body.page-ec) .ec-check path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 90ms + 350ms); }
:where(body.page-ec) .ec-build__list.is-visible .ec-check path,
html:not(.zm-js) :where(body.page-ec) .ec-check path { stroke-dashoffset: 0; }
:where(body.page-ec) .ec-build__item { transition: background-color 0.3s var(--zm-ease), padding 0.35s var(--zm-ease); border-radius: 8px; }
:where(body.page-ec) .ec-build__item:hover { background: #faf8f4; padding-inline: 12px 8px; }
:where(body.page-ec) .ec-build__item h3 { transition: color 0.3s var(--zm-ease); }
:where(body.page-ec) .ec-build__item:hover h3 { color: var(--purple-soft); }
:where(body.page-ec) .ec-tag { transition: border-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-ec) .ec-build__item:hover .ec-tag { border-color: rgba(10, 140, 90, 0.4); color: #0a8c5a; }
/* ----------------------------------------------------------------------------
   Headless stack — icons draw, the diagram opens like the About visuals
   ---------------------------------------------------------------------------- */
:where(body.page-ec) .ec-stack__img { --zm-radius: 0px; }
:where(body.page-ec) .ec-scard__icon [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--zm-ease) 0.3s; }
:where(body.page-ec) .ec-scard.is-visible .ec-scard__icon [pathLength],
html:not(.zm-js) :where(body.page-ec) .ec-scard__icon [pathLength] { stroke-dashoffset: 0; }
:where(body.page-ec) .ec-scard__icon { transition: transform 0.4s var(--zm-ease); }
:where(body.page-ec) .ec-scard:hover .ec-scard__icon { transform: rotate(-6deg) scale(1.06); }
/* ----------------------------------------------------------------------------
   Other platforms — the row at the reading line is current
   ---------------------------------------------------------------------------- */
:where(body.page-ec) .ec-plat__row { position: relative; transition: background-color 0.45s var(--zm-ease); }
:where(body.page-ec) .ec-plat__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #ff5b1f, #5a2bff 60%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--zm-ease);
}
:where(body.page-ec) .ec-plat__label,
:where(body.page-ec) .ec-plat__body h3,
:where(body.page-ec) .ec-plat__sub h3 { transition: color 0.4s var(--zm-ease); }
:where(body.page-ec) .ec-plat__row.is-current::before { transform: scaleX(1); }
:where(body.page-ec) .ec-plat__row.is-current .ec-plat__label { color: var(--orange); }
:where(body.page-ec) .ec-plat__row:hover { background: rgba(255, 255, 255, 0.55); }
:where(body.page-ec) .ec-plat__sub:hover h3,
:where(body.page-ec) .ec-plat__row:hover .ec-plat__body h3 { color: var(--purple-soft); }
/* ----------------------------------------------------------------------------
   Integrations — tilted cards keep their tilt; on hover they settle level
   (the extra `rotate` property cancels the design's transform rotation)
   ---------------------------------------------------------------------------- */
:where(body.page-ec) .ec-int-card { transition: rotate 0.6s var(--zm-ease), translate 0.6s var(--zm-ease), box-shadow 0.5s var(--zm-ease), opacity 1s var(--zm-ease); }
html.zm-js :where(body.page-ec) .ec-int-card[data-zm-in]:not(.is-in) { translate: 0 40px; }
html.zm-js :where(body.page-ec) .ec-int-card--b[data-zm-in]:not(.is-in) { translate: 0 60px; }
:where(body.page-ec) .ec-int-card--a:hover { rotate: 1.85deg; translate: 0 -6px; z-index: 3; }
:where(body.page-ec) .ec-int-card--b:hover { rotate: -4.47deg; translate: 0 -6px; z-index: 3; }
:where(body.page-ec) .ec-int-list li { transition: opacity 0.6s var(--zm-ease), translate 0.6s var(--zm-ease); }
html.zm-js :where(body.page-ec) .ec-int-card:not(.is-in) .ec-int-list li { opacity: 0; translate: 10px 0; }
:where(body.page-ec) .ec-int-list li:nth-child(1) { transition-delay: 0.45s; }
:where(body.page-ec) .ec-int-list li:nth-child(2) { transition-delay: 0.55s; }
:where(body.page-ec) .ec-int-list li:nth-child(3) { transition-delay: 0.65s; }
:where(body.page-ec) .ec-int-list li svg { transition: translate 0.3s var(--zm-ease); }
:where(body.page-ec) .ec-int-list li:hover svg { translate: 3px 0; }
:where(body.page-ec) .ec-int-doodle { animation: zm-doodle 6s ease-in-out infinite alternate; }
@keyframes zm-doodle { from { rotate: -6deg; } to { rotate: 6deg; } }
@media (max-width: 768px) {
:where(body.page-ec) .ec-int-card--a:hover,
:where(body.page-ec) .ec-int-card--b:hover { rotate: none; }
}
/* ----------------------------------------------------------------------------
   Receipt CTA — prints from the top bar, then the line items tick
   ---------------------------------------------------------------------------- */
html.zm-js :where(body.page-ec) .ec-receipt[data-reveal] { --zm-rd: 1.1s; }
html.zm-js :where(body.page-ec) .ec-receipt[data-reveal]:not(.is-visible) { transform: none; opacity: 1; clip-path: inset(0 0 100% 0 round 12px); }
html.zm-js :where(body.page-ec) .ec-receipt[data-reveal].is-visible { clip-path: inset(0 0 0 0 round 12px); }
:where(body.page-ec) .ec-receipt__line { transform-origin: left; transition: transform 0.8s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 140ms + 700ms); }
html.zm-js :where(body.page-ec) .ec-receipt__list:not(.is-visible) .ec-receipt__line { transform: scaleX(0); }
:where(body.page-ec) .ec-receipt__inc path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 140ms + 1050ms); }
:where(body.page-ec) .ec-receipt__list.is-visible .ec-receipt__inc path,
html:not(.zm-js) :where(body.page-ec) .ec-receipt__inc path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
:where(body.page-ec) .ec-int-doodle { animation: none; }
:where(body.page-ec) .ec-check path,
:where(body.page-ec) .ec-scard__icon [pathLength],
:where(body.page-ec) .ec-receipt__inc path { stroke-dashoffset: 0 !important; }
html.zm-js :where(body.page-ec) .ec-receipt__list .ec-receipt__line { transform: none !important; }
html.zm-js :where(body.page-ec) .ec-int-card .ec-int-list li { opacity: 1 !important; translate: none !important; }
}
/* ===== data-intelligence: motion layer (scoped to body.page-di) ===== */
/* ==========================================================================
   Zemotify — Data Intelligence page motion layer
   Data-flavoured but quiet: figures count up, the journey arcs draw between
   steps, the source grid fills in, the banner reads as you scroll.
   ========================================================================== */
html.zm-js :where(body.page-di) .di-hero__watermark[data-zm-in] { --zm-rd: 1.6s; }
html.zm-js :where(body.page-di) .di-stats__sep[data-reveal]:not(.is-visible) { transform: scaleY(0); }
:where(body.page-di) .di-stat__num { white-space: nowrap; }
/* ----------------------------------------------------------------------------
   Why it matters
   ---------------------------------------------------------------------------- */
:where(body.page-di) .di-why__icon [pathLength],
:where(body.page-di) .di-step__icon [pathLength],
:where(body.page-di) .di-extract__icon [pathLength] {
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--zm-ease) 0.3s;
}
:where(body.page-di) .is-visible .di-why__icon [pathLength],
:where(body.page-di) .is-visible .di-step__icon [pathLength],
:where(body.page-di) .is-visible .di-extract__icon [pathLength],
html:not(.zm-js) :where(body.page-di) .di-why__icon [pathLength],
html:not(.zm-js) :where(body.page-di) .di-step__icon [pathLength],
html:not(.zm-js) :where(body.page-di) .di-extract__icon [pathLength] { stroke-dashoffset: 0; }
:where(body.page-di) .di-why__card { transition: border-color 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease); }
:where(body.page-di) .di-why__card:hover { border-color: rgba(255, 91, 31, 0.35); box-shadow: 0 30px 60px -40px rgba(255, 91, 31, 0.5); }
:where(body.page-di) .di-why__icon { transition: transform 0.45s var(--zm-ease); }
:where(body.page-di) .di-why__card:hover .di-why__icon { transform: rotate(-6deg) scale(1.06); }
:where(body.page-di) .di-banner__accent { transform-origin: center; transition: transform 0.9s var(--zm-ease) 0.3s; }
html.zm-js :where(body.page-di) .di-banner:not(.is-visible) .di-banner__accent { transform: scaleY(0); }
:where(body.page-di) .di-banner__text.zm-scrolltext-ready .zm-word { color: rgba(255, 255, 255, 0.28); transition: color 0.45s var(--zm-ease); }
:where(body.page-di) .di-banner__text.zm-scrolltext-ready .zm-word.is-lit { color: var(--white); }
/* ----------------------------------------------------------------------------
   What we do — the numbered service at the reading line is current
   ---------------------------------------------------------------------------- */
:where(body.page-di) .di-do__list > li { position: relative; transition: background-color 0.5s var(--zm-ease); }
:where(body.page-di) .di-do__list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16%;
  bottom: 16%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #ff5b1f, #5a2bff);
  transform: scaleY(0);
  transition: transform 0.5s var(--zm-ease);
}
:where(body.page-di) .di-do__num { transition: transform 0.5s var(--zm-ease), opacity 0.5s var(--zm-ease); transform-origin: left center; }
:where(body.page-di) .di-do__copy h3 { transition: color 0.4s var(--zm-ease); }
:where(body.page-di) .di-do__list > li.is-current::before { transform: scaleY(1); }
:where(body.page-di) .di-do__list > li.is-current .di-do__num { transform: scale(1.06); }
html.zm-js :where(body.page-di) .di-do__list[data-zm-steps] > li:not(.is-current) .di-do__num { opacity: 0.45; }
:where(body.page-di) .di-do__list > li:hover .di-do__copy h3 { color: var(--purple-soft); }
/* ----------------------------------------------------------------------------
   Journey — arcs draw between steps once the step before them is in
   ---------------------------------------------------------------------------- */
:where(body.page-di) .di-journey__arc { transition: clip-path 1s var(--zm-ease) 0.35s; clip-path: inset(-10% -10% -10% -10%); }
html.zm-js :where(body.page-di) .di-journey__arc[data-zm-in] { transition: clip-path 1.1s var(--zm-ease) var(--zm-d, 0s), opacity 0.4s var(--zm-ease) var(--zm-d, 0s); }
html.zm-js :where(body.page-di) .di-journey__arc[data-zm-in]:not(.is-in) { translate: none; opacity: 1; clip-path: inset(-10% 110% -10% -10%); }
:where(body.page-di) .di-step__icon { transition: transform 0.45s var(--zm-ease), box-shadow 0.45s var(--zm-ease); }
:where(body.page-di) .di-step:hover .di-step__icon { transform: rotate(-6deg) scale(1.06); }
:where(body.page-di) .di-step__kicker { transition: color 0.3s var(--zm-ease); }
:where(body.page-di) .di-step:hover .di-step__kicker { color: var(--orange); }
/* ----------------------------------------------------------------------------
   Technologies, sources, use cases
   ---------------------------------------------------------------------------- */
:where(body.page-di) .di-tech-card__mark { display: inline-block; transition: translate 0.3s var(--zm-ease); }
:where(body.page-di) .di-tech-card li:hover .di-tech-card__mark { translate: 3px 0; }
/* 24 source tiles fill in quickly, row by row */
html.zm-js :where(body.page-di) .di-sources__grid[data-reveal-children] > * { transition-delay: calc(var(--zm-i, 0) * 28ms + 150ms); }
:where(body.page-di) .di-logo-tile img { transition: transform 0.4s var(--zm-ease), filter 0.4s var(--zm-ease); }
:where(body.page-di) .di-logo-tile:hover img { transform: scale(1.06); }
@media (hover: hover) and (pointer: fine) {
:where(body.page-di) .di-sources__grid:hover .di-logo-tile:not(:hover) img { filter: saturate(0.4); }
}
:where(body.page-di) .di-uc__badge { transition: transform 0.4s var(--zm-ease), background-color 0.4s var(--zm-ease); }
:where(body.page-di) .di-uc__card { transition: transform var(--dur) var(--ease), border-color 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease); }
:where(body.page-di) .di-uc__card:hover { border-color: rgba(255, 91, 31, 0.35); box-shadow: 0 30px 60px -40px rgba(255, 91, 31, 0.45); }
:where(body.page-di) .di-uc__card[data-reveal]:hover { transform: translateY(-4px); }
:where(body.page-di) .di-uc__card:hover .di-uc__badge { transform: scale(1.08); }
/* ----------------------------------------------------------------------------
   Client stories — stars fill, figures count up
   ---------------------------------------------------------------------------- */
:where(body.page-di) .di-story__stars { display: inline-block; transition: clip-path 1.1s var(--zm-ease) 0.4s; clip-path: inset(0 0 0 0); }
html.zm-js :where(body.page-di) :not(.is-visible) > .di-story__top .di-story__stars,
html.zm-js :where(body.page-di) .di-story__rating:not(.is-visible) .di-story__stars { clip-path: inset(0 100% 0 0); }
:where(body.page-di) .di-story__num { white-space: nowrap; }
:where(body.page-di) .di-story__card { transition: transform var(--dur) var(--ease), border-color 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease); }
:where(body.page-di) .di-story__card:hover { border-color: rgba(214, 255, 62, 0.35); box-shadow: 0 30px 60px -40px rgba(214, 255, 62, 0.35); }
:where(body.page-di) .di-story__card[data-reveal]:hover { transform: translateY(-4px); }
:where(body.page-di) .di-extract__icon { transition: transform 0.45s var(--zm-ease); }
:where(body.page-di) .di-extract__card:hover .di-extract__icon { transform: rotate(-6deg) scale(1.06); }
/* ----------------------------------------------------------------------------
   Receipt CTA — prints from its top bar like the E-commerce receipt
   ---------------------------------------------------------------------------- */
html.zm-js :where(body.page-di) .di-receipt[data-reveal] { --zm-rd: 1.1s; }
html.zm-js :where(body.page-di) .di-receipt[data-reveal]:not(.is-visible) { transform: none; opacity: 1; clip-path: inset(0 0 100% 0 round 12px); }
html.zm-js :where(body.page-di) .di-receipt[data-reveal].is-visible { clip-path: inset(0 0 0 0 round 12px); }
@media (prefers-reduced-motion: reduce) {
:where(body.page-di) .di-why__icon [pathLength],
:where(body.page-di) .di-step__icon [pathLength],
:where(body.page-di) .di-extract__icon [pathLength] { stroke-dashoffset: 0 !important; }
:where(body.page-di) .di-journey__arc,
:where(body.page-di) .di-story__stars { clip-path: none !important; }
html.zm-js :where(body.page-di) .di-banner .di-banner__accent { transform: none !important; }
:where(body.page-di) .di-banner__text .zm-word { color: inherit !important; }
}
/* ===== devops: motion layer (scoped to body.page-do) ===== */
/* ==========================================================================
   Zemotify — DevOps & Infrastructure motion layer
   Calm and operational: a release travels the pipeline strip, the two
   Thursdays pair line for line, each stage's gate draws in, the board's
   status lights breathe, and the review command types itself out.
   ========================================================================== */
/* ----------------------------------------------------------------------------
   Pipeline strip — one release travels commit → observe, then Observe stays live
   ---------------------------------------------------------------------------- */
:where(body.page-do) .do-pipe__list::after {
  content: "";
  position: absolute;
  top: 38px;
  left: calc(var(--gutter) + 10%);
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(255, 91, 31, 0.18), 0 0 14px rgba(255, 91, 31, 0.7);
  opacity: 0;
}
:where(body.page-do) .do-pipe__list.is-visible::after { animation: do-run 6.5s cubic-bezier(0.45, 0, 0.25, 1) 0.8s infinite; }
@keyframes do-run {
  0%   { left: calc(var(--gutter) + 10%); opacity: 0; }
  6%   { opacity: 1; }
  80%  { left: calc(100% - var(--gutter) - 10%); opacity: 1; }
  88%, 100% { left: calc(100% - var(--gutter) - 10%); opacity: 0; }
}
:where(body.page-do) .do-pipe__stop--live .do-pipe__dot { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0.4); animation: do-live 2.4s ease-in-out infinite; }
@keyframes do-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0.35); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 91, 31, 0); }
}
:where(body.page-do) .do-pipe__stop strong { transition: color 0.3s var(--zm-ease); }
:where(body.page-do) .do-pipe__stop:hover strong { color: var(--purple-soft); }
:where(body.page-do) .do-pipe__dot { transition: transform 0.35s var(--zm-ease); }
:where(body.page-do) .do-pipe__stop:hover .do-pipe__dot { transform: scale(1.15); }
/* ----------------------------------------------------------------------------
   Deploy day — hovering a line on either side picks out its counterpart
   ---------------------------------------------------------------------------- */
:where(body.page-do) .do-compare__list li { transition: background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-do) .do-compare__col--now li { text-decoration: line-through; text-decoration-color: transparent; text-decoration-thickness: 1px; transition: text-decoration-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease); }
:where(body.page-do) .do-compare__col--now li:hover { text-decoration-color: rgba(255, 91, 31, 0.8); color: var(--text-muted); }
:where(body.page-do) .do-compare__col--should li:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
:where(body.page-do) .do-compare:has(.do-compare__col--now li:nth-child(1):hover) .do-compare__col--should li:nth-child(1),
:where(body.page-do) .do-compare:has(.do-compare__col--now li:nth-child(2):hover) .do-compare__col--should li:nth-child(2),
:where(body.page-do) .do-compare:has(.do-compare__col--now li:nth-child(3):hover) .do-compare__col--should li:nth-child(3),
:where(body.page-do) .do-compare:has(.do-compare__col--now li:nth-child(4):hover) .do-compare__col--should li:nth-child(4),
:where(body.page-do) .do-compare:has(.do-compare__col--now li:nth-child(5):hover) .do-compare__col--should li:nth-child(5) { background: rgba(255, 255, 255, 0.08); color: var(--white); }
:where(body.page-do) .do-compare:has(.do-compare__col--should li:nth-child(1):hover) .do-compare__col--now li:nth-child(1),
:where(body.page-do) .do-compare:has(.do-compare__col--should li:nth-child(2):hover) .do-compare__col--now li:nth-child(2),
:where(body.page-do) .do-compare:has(.do-compare__col--should li:nth-child(3):hover) .do-compare__col--now li:nth-child(3),
:where(body.page-do) .do-compare:has(.do-compare__col--should li:nth-child(4):hover) .do-compare__col--now li:nth-child(4),
:where(body.page-do) .do-compare:has(.do-compare__col--should li:nth-child(5):hover) .do-compare__col--now li:nth-child(5) { text-decoration-color: rgba(255, 91, 31, 0.8); color: var(--text-muted); }
}
:where(body.page-do) .do-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.55s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 70ms + 450ms); }
:where(body.page-do) .do-tick circle { transform-origin: center; transform-box: fill-box; transition: transform 0.45s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 70ms + 300ms); }
html.zm-js :where(body.page-do) .do-compare__list:not(.is-visible) .do-tick circle { transform: scale(0.4); }
:where(body.page-do) .do-compare__list.is-visible .do-tick path,
html:not(.zm-js) :where(body.page-do) .do-tick path { stroke-dashoffset: 0; }
/* ----------------------------------------------------------------------------
   Stages — gate rule draws in; hover lifts the card and warms the rule
   ---------------------------------------------------------------------------- */
:where(body.page-do) .do-stage { transition: transform var(--dur) var(--ease), box-shadow 0.4s var(--zm-ease), border-color 0.4s var(--zm-ease); }
:where(body.page-do) .do-stage[data-reveal]:hover { transform: translateY(-4px); }
:where(body.page-do) .do-stage:hover { box-shadow: 0 30px 60px -40px rgba(255, 91, 31, 0.45); border-color: rgba(255, 91, 31, 0.3); }
:where(body.page-do) .do-stage__gate::before { transform-origin: left; transition: transform 0.8s var(--zm-ease) 0.45s, background-color 0.4s var(--zm-ease); }
html.zm-js :where(body.page-do) .do-stage:not(.is-visible) .do-stage__gate::before { transform: scaleX(0); }
:where(body.page-do) .do-stage:hover .do-stage__gate::before { background: linear-gradient(90deg, #ff5b1f, #5a2bff); }
:where(body.page-do) .do-stage__kicker { transition: color 0.3s var(--zm-ease); }
:where(body.page-do) .do-stage:hover .do-stage__kicker { color: var(--orange); }
:where(body.page-do) .do-stage__list li { transition: translate 0.3s var(--zm-ease); }
:where(body.page-do) .do-stage:hover .do-stage__list li { translate: 3px 0; }
:where(body.page-do) .do-stage:hover .do-stage__list li:nth-child(2) { transition-delay: 0.03s; }
:where(body.page-do) .do-stage:hover .do-stage__list li:nth-child(3) { transition-delay: 0.06s; }
@media (hover: hover) and (pointer: fine) {
:where(body.page-do) .do-stages:has(.do-stage:hover) .do-stage.is-visible:not(:hover) { opacity: 0.72; }
}
/* ----------------------------------------------------------------------------
   Monitoring board — status lights breathe; the degraded row draws the eye
   ---------------------------------------------------------------------------- */
:where(body.page-do) .do-dot { animation: do-breathe 2.8s ease-in-out infinite; }
:where(body.page-do) .do-board__rows li:nth-child(2) .do-dot { animation-delay: 0.5s; }
:where(body.page-do) .do-board__rows li:nth-child(4) .do-dot { animation-delay: 1s; }
:where(body.page-do) .do-board__rows li:nth-child(5) .do-dot { animation-delay: 1.5s; }
@keyframes do-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
}
:where(body.page-do) .do-dot--warn { animation: do-breathe-warn 1.6s ease-in-out infinite; }
@keyframes do-breathe-warn {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0.6); }
  50%      { box-shadow: 0 0 0 6px rgba(255, 91, 31, 0); }
}
:where(body.page-do) .do-board__rows .do-board__row { transition: background-color 0.3s var(--zm-ease); }
:where(body.page-do) .do-board__rows .do-board__row:hover { background: rgba(255, 255, 255, 0.04); }
:where(body.page-do) .do-board__row--warn { background: linear-gradient(90deg, rgba(255, 91, 31, 0.08), rgba(255, 91, 31, 0) 60%); }
@media (prefers-reduced-motion: reduce) {
:where(body.page-do) .do-pipe__list::after { display: none; }
:where(body.page-do) .do-pipe__stop--live .do-pipe__dot,
:where(body.page-do) .do-dot,
:where(body.page-do) .do-dot--warn { animation: none !important; }
:where(body.page-do) .do-tick path { stroke-dashoffset: 0 !important; }
html.zm-js :where(body.page-do) .do-compare__list .do-tick circle { transform: none !important; }
html.zm-js :where(body.page-do) .do-stage .do-stage__gate::before { transform: none !important; }
}
/* ===== saas: motion layer (scoped to body.page-saas) ===== */
/* ==========================================================================
   Zemotify — SaaS Platforms motion layer
   Structural, not showy: the layer stack in the hero is a way into the
   five-layer explorer, tenants fill their meters, the containment boxes
   settle inside each other, billing cases read one at a time, and hovering
   an API principle lights the endpoints it governs.
   ========================================================================== */
/* ----------------------------------------------------------------------------
   Hero layer stack — the hovered layer takes the highlight
   ---------------------------------------------------------------------------- */
:where(body.page-saas) .saas-stack a { transition: border-color 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), translate 0.35s var(--zm-ease); }
:where(body.page-saas) .saas-stack__n { transition: color 0.3s var(--zm-ease); }
:where(body.page-saas) .saas-stack a:hover,
:where(body.page-saas) .saas-stack a:focus-visible { border-color: rgba(255, 91, 31, 0.8); background: rgba(255, 91, 31, 0.07); color: var(--orange); translate: 0 -2px; }
:where(body.page-saas) .saas-stack a:hover .saas-stack__n,
:where(body.page-saas) .saas-stack a:focus-visible .saas-stack__n { color: var(--orange); }
@media (hover: hover) and (pointer: fine) {
:where(body.page-saas) .saas-stack:has(a:hover) .is-hot a:not(:hover) { border-color: rgba(124, 58, 237, 0.75); background: rgba(255, 255, 255, 0.35); color: #5a2bff; }
:where(body.page-saas) .saas-stack:has(a:hover) .is-hot a:not(:hover) .saas-stack__n { color: #131316; }
}
/* the stack assembles from the top layer down, each narrower bar settling in */
html.zm-js :where(body.page-saas) .saas-stack [data-reveal-children] > * { transform-origin: center; }
html.zm-js :where(body.page-saas) .saas-stack [data-reveal-children]:not(.is-visible) > * { transform: scaleX(0.94) translateY(8px); }
/* ----------------------------------------------------------------------------
   Tenancy — meters fill, the boundary rule draws out from the centre
   ---------------------------------------------------------------------------- */
:where(body.page-saas) .saas-tenant { transition: border-color 0.35s var(--zm-ease), box-shadow 0.35s var(--zm-ease), translate 0.35s var(--zm-ease), background-color 0.35s var(--zm-ease); }
:where(body.page-saas) .saas-tenant:hover { translate: 0 -4px; border-color: rgba(255, 91, 31, 0.55); background: var(--white); box-shadow: 0 24px 50px -36px rgba(255, 91, 31, 0.5); }
:where(body.page-saas) .saas-tenant__meter i:first-child { transform-origin: left; transition: transform 0.8s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 120ms + 500ms); }
html.zm-js :where(body.page-saas) .saas-tenants__row:not(.is-visible) .saas-tenant__meter i:first-child { transform: scaleX(0); }
:where(body.page-saas) .saas-boundary::before { transform-origin: right; }
:where(body.page-saas) .saas-boundary::after { transform-origin: left; }
:where(body.page-saas) .saas-boundary::before,
:where(body.page-saas) .saas-boundary::after { transition: transform 0.9s var(--zm-ease) 0.2s; }
html.zm-js :where(body.page-saas) .saas-boundary:not(.is-visible)::before,
html.zm-js :where(body.page-saas) .saas-boundary:not(.is-visible)::after { transform: scaleX(0); }
:where(body.page-saas) .saas-platform__list div { transition: translate 0.3s var(--zm-ease); }
:where(body.page-saas) .saas-platform:hover .saas-platform__list div { translate: 3px 0; }
:where(body.page-saas) .saas-platform:hover .sd-icon { transform: rotate(-6deg); background: var(--orange); border-color: var(--orange); color: var(--white); }
/* ----------------------------------------------------------------------------
   Five layers — the selected tab takes the dark wash; the panel re-reads in
   ---------------------------------------------------------------------------- */
:where(body.page-saas) .saas-tab { transition: border-color 0.35s var(--zm-ease), color 0.35s var(--zm-ease), translate 0.35s var(--zm-ease), box-shadow 0.35s var(--zm-ease); }
:where(body.page-saas) .saas-tab::before { transition: opacity 0.4s var(--zm-ease); }
:where(body.page-saas) .saas-tab__n,
:where(body.page-saas) .saas-tab__copy span { transition: color 0.35s var(--zm-ease); }
:where(body.page-saas) .saas-tab__dot { transition: background-color 0.3s var(--zm-ease), border-color 0.3s var(--zm-ease), transform 0.35s var(--zm-ease); }
:where(body.page-saas) .saas-tab[aria-selected="false"]:hover { border-color: #cfcabe; translate: 4px 0; }
:where(body.page-saas) .saas-tab[aria-selected="false"]:hover .saas-tab__dot { border-color: var(--orange); }
:where(body.page-saas) .saas-tab[aria-selected="true"] { box-shadow: 0 26px 50px -34px rgba(11, 11, 12, 0.6); }
:where(body.page-saas) .saas-tab[aria-selected="true"] .saas-tab__dot { animation: saas-dot 2.4s ease-in-out infinite; }
@keyframes saas-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 91, 31, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 91, 31, 0); }
}
:where(body.page-saas) .saas-panel.is-active > * { animation: saas-panel-in 0.5s var(--zm-ease) both; }
:where(body.page-saas) .saas-panel.is-active > :nth-child(2) { animation-delay: 0.04s; }
:where(body.page-saas) .saas-panel.is-active > :nth-child(3) { animation-delay: 0.08s; }
:where(body.page-saas) .saas-panel.is-active > :nth-child(n+4) { animation-delay: 0.13s; }
@keyframes saas-panel-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } }
/* ----------------------------------------------------------------------------
   Account model — boxes settle inside each other; roles respond
   ---------------------------------------------------------------------------- */
html.zm-js :where(body.page-saas) .saas-nest__box[data-zm-in]:not(.is-in) { translate: 0 16px; }
:where(body.page-saas) .saas-nest__box { transition: border-color 0.35s var(--zm-ease), box-shadow 0.35s var(--zm-ease); }
:where(body.page-saas) .saas-nest__box:hover:not(:has(.saas-nest__box:hover)) { border-color: rgba(124, 58, 237, 0.35); box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.06); }
:where(body.page-saas) .saas-roles li { transition: border-color 0.3s var(--zm-ease), translate 0.3s var(--zm-ease); }
:where(body.page-saas) .saas-roles li:hover { border-color: rgba(255, 91, 31, 0.45); translate: 0 -2px; }
/* ----------------------------------------------------------------------------
   Billing — the case at the reading line is current
   ---------------------------------------------------------------------------- */
:where(body.page-saas) .saas-case::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #ff5b1f, #5a2bff 55%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--zm-ease);
}
:where(body.page-saas) .saas-case h3 { transition: color 0.4s var(--zm-ease), translate 0.4s var(--zm-ease); }
:where(body.page-saas) .saas-case.is-current::before { transform: scaleX(1); }
:where(body.page-saas) .saas-case.is-current h3 { translate: 6px 0; }
:where(body.page-saas) .saas-case:hover h3 { color: var(--purple-soft); }
/* ----------------------------------------------------------------------------
   Public API — a principle lights the endpoints it governs
   ---------------------------------------------------------------------------- */
:where(body.page-saas) .saas-console__rows li { transition: background-color 0.3s var(--zm-ease), opacity 0.3s var(--zm-ease); }
:where(body.page-saas) .saas-console__rows li:hover { background: rgba(255, 255, 255, 0.04); }
:where(body.page-saas) .saas-api__feature { transition: background-color 0.3s var(--zm-ease); }
:where(body.page-saas) .saas-api__feature:hover { background: rgba(255, 255, 255, 0.7); }
:where(body.page-saas) .saas-api__feature:hover .sd-icon { transform: rotate(-6deg); background: var(--orange); border-color: var(--orange); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
:where(body.page-saas) .saas-api__grid:has(.saas-api__feature:hover) .saas-console__rows.is-visible li { opacity: 0.35; }
:where(body.page-saas) .saas-api__grid:has([data-api-key="shapes"]:hover) .saas-console__rows.is-visible li[data-api="shapes"],
:where(body.page-saas) .saas-api__grid:has([data-api-key="keys"]:hover) .saas-console__rows.is-visible li[data-api="keys"],
:where(body.page-saas) .saas-api__grid:has([data-api-key="hooks"]:hover) .saas-console__rows.is-visible li[data-api="hooks"],
:where(body.page-saas) .saas-api__grid:has([data-api-key="docs"]:hover) .saas-console__rows.is-visible li { opacity: 1; background: rgba(255, 91, 31, 0.08); }
}
/* ----------------------------------------------------------------------------
   Reliability cards
   ---------------------------------------------------------------------------- */
:where(body.page-saas) .saas-rel__card { transition: transform var(--dur) var(--ease), border-color 0.4s var(--zm-ease), background-color 0.4s var(--zm-ease); }
:where(body.page-saas) .saas-rel__card[data-reveal]:hover { transform: translateY(-4px); }
:where(body.page-saas) .saas-rel__card:hover { border-color: rgba(255, 91, 31, 0.4); background: rgba(255, 255, 255, 0.06); }
:where(body.page-saas) .saas-rel__card:hover .sd-icon { transform: rotate(-6deg); background: var(--orange); border-color: var(--orange); }
@media (prefers-reduced-motion: reduce) {
:where(body.page-saas) .saas-panel.is-active > * { animation: none !important; }
:where(body.page-saas) .saas-tab[aria-selected="true"] .saas-tab__dot { animation: none; }
html.zm-js :where(body.page-saas) .saas-tenants__row .saas-tenant__meter i:first-child,
html.zm-js :where(body.page-saas) .saas-boundary::before,
html.zm-js :where(body.page-saas) .saas-boundary::after { transform: none !important; }
html.zm-js :where(body.page-saas) .saas-stack [data-reveal-children] > * { transform: none !important; }
}
/* ===== web-mobile: motion layer (scoped to body.page-wm) ===== */
/* ==========================================================================
   Zemotify — Web & Mobile Development motion layer
   The architecture diagram wires itself to the shared core (and a hovered
   surface shows its line carrying traffic), the four handoffs fill a
   progress line as you read, the matrix ticks in, targets count up, and the
   three starting points answer the pointer with their arrows.
   ========================================================================== */
/* ----------------------------------------------------------------------------
   Architecture — wires draw down into the core
   ---------------------------------------------------------------------------- */
:where(body.page-wm) .wm-wire { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.9s var(--zm-ease), stroke 0.3s var(--zm-ease); }
:where(body.page-wm) .wm-wire--core { transition-delay: 0.7s; }
:where(body.page-wm) .wm-wires.is-in .wm-wire,
html:not(.zm-js) :where(body.page-wm) .wm-wire { stroke-dashoffset: 0; }
html.zm-js :where(body.page-wm) .wm-wires[data-zm-in]:not(.is-in) { translate: none; }
@media (hover: hover) and (pointer: fine) {
:where(body.page-wm) .wm-arch__diagram:has([data-surface="web"]:hover) .wm-wire--web,
:where(body.page-wm) .wm-arch__diagram:has([data-surface="pwa"]:hover) .wm-wire--pwa,
:where(body.page-wm) .wm-arch__diagram:has([data-surface="mobile"]:hover) .wm-wire--mobile {
    stroke: var(--orange);
    stroke-dasharray: 0.025 0.015;
    animation: wm-flow 1.2s linear infinite;
  }
}
@keyframes wm-flow { to { stroke-dashoffset: -0.08; } }
:where(body.page-wm) .wm-surface { transition: transform var(--dur) var(--ease), border-color 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease); }
:where(body.page-wm) .wm-surface[data-reveal]:hover { transform: translateY(-4px); }
:where(body.page-wm) .wm-surface:hover { border-color: rgba(255, 91, 31, 0.35); box-shadow: 0 30px 60px -40px rgba(255, 91, 31, 0.45); }
:where(body.page-wm) .wm-surface:hover .sd-icon { transform: rotate(-6deg); background: var(--orange); border-color: var(--orange); color: var(--white); }
:where(body.page-wm) .wm-surface h3 { transition: color 0.3s var(--zm-ease); }
:where(body.page-wm) .wm-surface:hover h3 { color: var(--purple-soft); }
:where(body.page-wm) .wm-surface__list li { transition: translate 0.3s var(--zm-ease); }
:where(body.page-wm) .wm-surface:hover .wm-surface__list li { translate: 3px 0; }
:where(body.page-wm) .wm-surface:hover .wm-surface__list li:nth-child(2) { transition-delay: 0.03s; }
:where(body.page-wm) .wm-surface:hover .wm-surface__list li:nth-child(3) { transition-delay: 0.06s; }
:where(body.page-wm) .wm-core__chips li { transition: border-color 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease); }
:where(body.page-wm) .wm-core__chips li:hover { border-color: rgba(255, 91, 31, 0.7); background: rgba(255, 91, 31, 0.1); }
/* ----------------------------------------------------------------------------
   Process — the handoff at the reading line is current
   ---------------------------------------------------------------------------- */
:where(body.page-wm) .wm-steps::after { transition: transform 0.15s linear; }
:where(body.page-wm) .wm-step__node { transition: border-color 0.4s var(--zm-ease), color 0.4s var(--zm-ease), background-color 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease); }
:where(body.page-wm) .wm-step.is-past .wm-step__node { background: #0b0b0c; border-color: #0b0b0c; color: var(--white); }
:where(body.page-wm) .wm-step.is-current .wm-step__node { border-color: var(--orange); color: var(--orange); background: var(--white); box-shadow: 0 0 0 6px rgba(255, 91, 31, 0.1); }
:where(body.page-wm) .wm-step__main h3 { transition: color 0.4s var(--zm-ease); }
:where(body.page-wm) .wm-step__hand { transition: color 0.4s var(--zm-ease); }
:where(body.page-wm) .wm-step.is-current .wm-step__hand { color: #26262b; }
html.zm-js :where(body.page-wm) .wm-steps[data-zm-steps] .wm-step:not(.is-current) .wm-step__main p { opacity: 0.8; }
:where(body.page-wm) .wm-step__main p { transition: opacity 0.4s var(--zm-ease); }
/* ----------------------------------------------------------------------------
   Matrix — marks tick in row by row
   ---------------------------------------------------------------------------- */
:where(body.page-wm) .wm-matrix tbody tr { transition: background-color 0.3s var(--zm-ease); }
:where(body.page-wm) .wm-matrix tbody tr:hover { background: #fcfbf8; }
:where(body.page-wm) .wm-matrix tbody tr:hover th strong { color: var(--purple-soft); }
:where(body.page-wm) .wm-matrix tbody th strong { transition: color 0.3s var(--zm-ease); }
:where(body.page-wm) .wm-mark--yes::before { transition: transform 0.45s var(--zm-ease); transition-delay: calc(var(--zm-i, 0) * 90ms + 350ms); }
html.zm-js :where(body.page-wm) .wm-matrix tbody:not(.is-visible) .wm-mark--yes::before { transform: scale(0); }
/* ----------------------------------------------------------------------------
   Targets — rows respond; figures count up (data-count)
   ---------------------------------------------------------------------------- */
:where(body.page-wm) .wm-target { transition: background-color 0.3s var(--zm-ease); }
:where(body.page-wm) .wm-target:hover { background: rgba(255, 255, 255, 0.55); }
:where(body.page-wm) .wm-target h3 { transition: color 0.3s var(--zm-ease); }
:where(body.page-wm) .wm-target:hover h3 { color: var(--purple-soft); }
/* ----------------------------------------------------------------------------
   Stack cards + starting points
   ---------------------------------------------------------------------------- */
:where(body.page-wm) .wm-stack__card { transition: border-color 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease); }
:where(body.page-wm) .wm-stack__card:hover { border-color: rgba(255, 91, 31, 0.3); box-shadow: 0 26px 50px -38px rgba(255, 91, 31, 0.45); }
:where(body.page-wm) .wm-path { transition: background-color 0.35s var(--zm-ease); }
:where(body.page-wm) .wm-path:hover { background: #fbf9f5; }
:where(body.page-wm) .wm-path__arrow { transition: transform 0.5s var(--zm-ease), color 0.35s var(--zm-ease); }
:where(body.page-wm) .wm-path:hover .wm-path__arrow { transform: translate(6px, -6px); color: var(--orange); }
:where(body.page-wm) .wm-path__link span { transition: color 0.35s var(--zm-ease); }
:where(body.page-wm) .wm-path:hover .wm-path__link span { color: var(--orange); }
@media (hover: hover) and (pointer: fine) {
:where(body.page-wm) .wm-paths:has(.wm-path:hover) .wm-path--featured:not(:hover) { background: transparent; }
:where(body.page-wm) .wm-paths:has(.wm-path:hover) .wm-path--featured:not(:hover) .wm-path__arrow,
:where(body.page-wm) .wm-paths:has(.wm-path:hover) .wm-path--featured:not(:hover) .wm-path__link span { color: #131316; }
}
/* arrows draw in when the row appears */
:where(body.page-wm) .wm-path__arrow path { stroke-dasharray: 1; stroke-dashoffset: 0; }
html.zm-js :where(body.page-wm) .wm-paths:not(.is-visible) .wm-path__arrow path { stroke-dashoffset: 1; }
:where(body.page-wm) .wm-path__arrow path { transition: stroke-dashoffset 0.9s var(--zm-ease) 0.5s; }
@media (prefers-reduced-motion: reduce) {
:where(body.page-wm) .wm-wire { stroke-dashoffset: 0 !important; animation: none !important; }
html.zm-js :where(body.page-wm) .wm-matrix tbody .wm-mark--yes::before { transform: none !important; }
html.zm-js :where(body.page-wm) .wm-paths .wm-path__arrow path { stroke-dashoffset: 0 !important; }
}
/* ===== careers: motion layer (scoped to body.page-careers) ===== */
/* ==========================================================================
   Zemotify — Teams & Careers motion layer
   Human and calm: values and perks arrive in sequence and answer the
   pointer, the open roles behave like one big target each, and the
   application details can be copied with clear feedback.
   ========================================================================== */
/* hero secondary link: underline draws back in on hover */
:where(body.page-careers) .ca-hero__link::after { transition: transform 0.45s var(--zm-ease); }
:where(body.page-careers) .ca-hero__link:hover::after { transform: scaleX(0.35); }
:where(body.page-careers) .ca-hero__link:focus-visible { outline: 2px solid var(--zm-focus, #7c3aed); outline-offset: 4px; border-radius: 4px; }
/* ----- Values ----- */
:where(body.page-careers) .ca-value::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #ff5b1f, #5a2bff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--zm-ease);
}
:where(body.page-careers) .ca-value { transition: transform var(--dur) var(--ease), box-shadow 0.4s var(--zm-ease); }
:where(body.page-careers) .ca-value[data-reveal]:hover { transform: translateY(-4px); }
:where(body.page-careers) .ca-value:hover { box-shadow: 0 30px 60px -42px rgba(90, 43, 255, 0.45); }
:where(body.page-careers) .ca-value:hover::before { transform: scaleX(1); }
:where(body.page-careers) .ca-value h3 { transition: color 0.3s var(--zm-ease); }
:where(body.page-careers) .ca-value:hover h3 { color: var(--purple-soft); }
/* ----- Perks ----- */
:where(body.page-careers) .ca-perk { transition: transform var(--dur) var(--ease), border-color 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease), opacity 0.4s var(--zm-ease); }
:where(body.page-careers) .ca-perk[data-reveal]:hover { transform: translateY(-4px); }
:where(body.page-careers) .ca-perk:hover { border-color: rgba(255, 91, 31, 0.3); box-shadow: 0 30px 60px -40px rgba(255, 91, 31, 0.45); }
:where(body.page-careers) .ca-perk__icon { transition: transform 0.45s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-careers) .ca-perk:hover .ca-perk__icon { transform: rotate(-6deg); background: var(--orange); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
:where(body.page-careers) .ca-perks:has(.ca-perk:hover) .ca-perk.is-visible:not(:hover) { opacity: 0.7; }
}
/* ----- Open roles ----- */
:where(body.page-careers) .ca-live { animation: ca-live 2.4s ease-in-out infinite; }
@keyframes ca-live {
  0%, 100% { box-shadow: 0 0 0 0 rgba(34, 164, 93, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(34, 164, 93, 0); }
}
:where(body.page-careers) .ca-job::before { transition: opacity 0.35s var(--zm-ease); }
:where(body.page-careers) .ca-job:hover::before { opacity: 1; }
:where(body.page-careers) .ca-job__avatar { transition: transform 0.5s var(--zm-ease); }
:where(body.page-careers) .ca-job:hover .ca-job__avatar { transform: scale(1.06) rotate(-3deg); }
:where(body.page-careers) .ca-job h3 { transition: color 0.3s var(--zm-ease); }
:where(body.page-careers) .ca-job:hover h3 { color: var(--purple-soft); }
:where(body.page-careers) .ca-job__apply { transition: background-color 0.3s var(--zm-ease), box-shadow 0.3s var(--zm-ease), transform 0.3s var(--zm-ease); }
:where(body.page-careers) .ca-job__apply svg { transition: transform 0.3s var(--zm-ease); }
:where(body.page-careers) .ca-job:hover .ca-job__apply { background: #f04a0e; box-shadow: 0 18px 34px -14px rgba(255, 91, 31, 0.9); }
:where(body.page-careers) .ca-job:hover .ca-job__apply svg { transform: translate(2px, -2px); }
:where(body.page-careers) .ca-job__apply:active { transform: scale(0.97); }
:where(body.page-careers) .ca-roles__all svg { transition: transform var(--dur) var(--ease); }
:where(body.page-careers) .ca-roles__all:hover svg { transform: translate(2px, -2px); }
/* ----- How to apply ----- */
:where(body.page-careers) .ca-step { transition: border-color 0.3s var(--zm-ease), box-shadow 0.3s var(--zm-ease); }
:where(body.page-careers) .ca-step:hover { border-color: rgba(124, 58, 237, 0.3); box-shadow: 0 12px 30px -22px rgba(90, 43, 255, 0.4); }
:where(body.page-careers) .ca-email { transition: background-size 0.45s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-careers) .ca-email:hover { color: var(--purple-soft); background-size: 0% 2px; background-position: 100% 100%; }
:where(body.page-careers) .ca-copy { transition: border-color 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), transform 0.2s var(--zm-ease); }
:where(body.page-careers) .ca-copy:hover { border-color: rgba(124, 58, 237, 0.35); color: var(--purple-soft); }
:where(body.page-careers) .ca-copy:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) {
:where(body.page-careers) .ca-live { animation: none; }
}
/* ===== contact: motion layer (scoped to body.page-contact) ===== */
/* ==========================================================================
   Zemotify — Contact page motion layer
   Mostly feedback rather than motion: fields respond to focus and to
   errors, the send button acknowledges the press, the timeline fills as
   you read, and the closing call to action jumps straight to the form.
   ========================================================================== */
/* ----- Aside ----- */
:where(body.page-contact) .co-card { transition: border-color 0.4s var(--zm-ease), box-shadow 0.4s var(--zm-ease); }
:where(body.page-contact) .co-card:hover { border-color: rgba(255, 91, 31, 0.25); box-shadow: 0 26px 50px -38px rgba(255, 91, 31, 0.45); }
:where(body.page-contact) .co-detail__main[href] { background: linear-gradient(90deg, var(--orange), var(--orange)) 0 100% / 0% 1.5px no-repeat; transition: background-size 0.4s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-contact) .co-detail__main[href]:hover { background-size: 100% 1.5px; color: var(--purple-soft); }
:where(body.page-contact) .co-copy { transition: border-color 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease), transform 0.2s var(--zm-ease); }
:where(body.page-contact) .co-copy:hover { border-color: rgba(124, 58, 237, 0.35); color: var(--purple-soft); }
:where(body.page-contact) .co-copy:active { transform: scale(0.96); }
:where(body.page-contact) .co-next li { transition: translate 0.3s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-contact) .co-next li:hover { translate: 4px 0; color: var(--purple-soft); }
:where(body.page-contact) .co-ghost { transition: border-color 0.3s var(--zm-ease), background-color 0.3s var(--zm-ease), color 0.3s var(--zm-ease); }
:where(body.page-contact) .co-ghost span { display: inline-block; transition: transform 0.3s var(--zm-ease); }
:where(body.page-contact) .co-ghost:hover { border-color: #131316; background: #131316; color: var(--white); }
:where(body.page-contact) .co-ghost:hover span { transform: translateX(3px); }
:where(body.page-contact) .co-hero__facts a { transition: color 0.3s var(--zm-ease); }
:where(body.page-contact) .co-hero__facts a:hover { color: var(--purple-soft); }
/* ----- Global delivery ----- */
:where(body.page-contact) .co-stat { transition: transform var(--dur) var(--ease), border-color 0.4s var(--zm-ease), background-color 0.4s var(--zm-ease); }
:where(body.page-contact) .co-stat[data-reveal]:hover { transform: translateY(-4px); }
:where(body.page-contact) .co-stat:hover { border-color: rgba(255, 91, 31, 0.4); background: rgba(255, 255, 255, 0.06); }
:where(body.page-contact) .co-stat__icon { transition: transform 0.45s var(--zm-ease); }
:where(body.page-contact) .co-stat:hover .co-stat__icon { transform: rotate(-6deg) scale(1.05); }
/* ----- Timeline: the step at the reading line is current ----- */
:where(body.page-contact) .co-steps::after { transition: transform 0.15s linear; }
:where(body.page-contact) .co-step::before { transition: border-color 0.35s var(--zm-ease), background-color 0.35s var(--zm-ease), box-shadow 0.35s var(--zm-ease); }
:where(body.page-contact) .co-step.is-past::before { border-color: #0b0b0c; background: #0b0b0c; }
:where(body.page-contact) .co-step.is-current::before { border-color: var(--orange); background: var(--white); box-shadow: 0 0 0 5px rgba(255, 91, 31, 0.12); }
:where(body.page-contact) .co-step h3 { transition: color 0.35s var(--zm-ease); }
:where(body.page-contact) .co-step.is-current h3 { color: #131316; }
html.zm-js :where(body.page-contact) .co-steps[data-zm-steps] .co-step:not(.is-current):not(.is-past) h3 { color: #5c5b60; }
/* ----- CTA ----- */
:where(body.page-contact) .co-cta__btn svg { transition: transform var(--dur) var(--ease); }
:where(body.page-contact) .co-cta__btn:hover svg { transform: translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) {

}
/* ================= 6. Site preview shell ================= */
/* ----------------------------------------------------------------------------
   Site preview shell — page transitions, active nav on small screens
   ---------------------------------------------------------------------------- */
#main { transition: opacity 0.17s var(--zm-ease); }
#main.zm-leaving { opacity: 0; }
#main.zm-entering { animation: zm-page-in 0.5s var(--zm-ease) both; }
@keyframes zm-page-in { from { opacity: 0; } to { opacity: 1; } }

.main-nav__link[aria-current="page"] { color: var(--purple-soft); }

.zm-noscript { padding: 120px 24px; text-align: center; font-size: 18px; }

@media (prefers-reduced-motion: reduce) {
  #main, #main.zm-entering { transition: none; animation: none; }
}

/* ================= 7. Shared footer + floating prompt ================= */
/* ==========================================================================
   Zemotify — shared shell: footer + floating conversation prompt
   One implementation for every page. Uses the existing tokens only
   (--bg, --lime, --purple-light, --orange, --text-white-muted, --ease …).
   ========================================================================== */

#main:focus { outline: none; }

/* ---------------------------------------------------------------- footer */
.site-footer.zm-foot { padding-top: 72px; padding-bottom: 32px; }

.zm-foot__grid {
  display: grid;
  grid-template-columns: minmax(200px, 1.15fr) 1.15fr 0.8fr 0.8fr minmax(220px, 1.1fr);
  gap: 48px 40px;
}
.zm-foot__brand .brand__logo { height: 34px; width: auto; }
.zm-foot__brand .footer-tagline { margin-top: 20px; max-width: 220px; }

.zm-foot__title {
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-white);
  margin-bottom: 18px;
}
.zm-foot__list { display: grid; gap: 12px; }
.zm-foot__list li { font-size: 14px; line-height: 22px; }
.zm-foot__all { color: var(--text-white) !important; font-weight: 600; }
.site-footer .footer-link[aria-current="page"] { color: var(--lime); }
.site-footer .footer-link[aria-current="page"]::after { transform: scaleX(1); background-color: var(--lime); }

.zm-foot__contact .footer-link { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.zm-foot__contact svg { flex-shrink: 0; opacity: 0.7; }
.zm-foot__contact .footer-link::after { left: 26px; width: calc(100% - 26px); }
.zm-foot__note { margin-top: 22px; font-size: 13.5px; line-height: 21px; color: var(--text-white-muted); max-width: 240px; }
.zm-foot__btn { margin-top: 14px; }

.zm-foot__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--divider);
}
.zm-foot__bottom .footer-copyright { margin: 0; text-align: left; }
.zm-foot__top {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--divider);
  border-radius: 999px;
  background: none;
  color: var(--text-white-muted);
  font: inherit;
  font-size: 13px;
  line-height: 18px;
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.zm-foot__top svg { transition: transform var(--dur) var(--ease); }
.zm-foot__top:hover, .zm-foot__top:focus-visible { color: var(--text-white); border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.04); }
.zm-foot__top:hover svg { transform: translateY(-2px); }
.site-footer button:focus-visible { outline: 2px solid var(--zm-focus-dark); outline-offset: 3px; }

@media (max-width: 1100px) {
  .zm-foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .zm-foot__brand { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 32px; }
  .zm-foot__brand .footer-tagline { margin-top: 0; max-width: none; }
  .zm-foot__reach { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0 32px;
                    padding: 24px 28px; border: 1px solid var(--dark-card-border); border-radius: 16px; background: #121216; }
  .zm-foot__reach .zm-foot__title { grid-column: 1 / -1; }
  .zm-foot__reach .zm-foot__contact { grid-auto-flow: column; justify-content: start; gap: 24px; }
  .zm-foot__note { margin-top: 0; max-width: none; }
  .zm-foot__btn { margin-top: 0; }
}
@media (max-width: 760px) {
  .zm-foot__reach { grid-template-columns: 1fr; gap: 14px; }
  .zm-foot__reach .zm-foot__contact { grid-auto-flow: row; gap: 12px; }
  .zm-foot__reach .zm-foot__title { margin-bottom: 0; }
}
@media (max-width: 640px) {
  .site-footer.zm-foot { padding-top: 56px; }
  .zm-foot__grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; }
  .zm-foot__brand { display: block; }
  .zm-foot__brand .footer-tagline { margin-top: 16px; }
  .zm-foot__grid > nav:first-of-type { grid-column: 1 / -1; }
  .zm-foot__grid > nav:first-of-type .zm-foot__list { grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .zm-foot__reach { padding: 22px 20px; }
  .zm-foot__btn { justify-content: center; width: 100%; }
  .zm-foot__bottom { flex-direction: column-reverse; align-items: flex-start; margin-top: 44px; }
}

/* ------------------------------------------------- floating conversation prompt */
.zm-fcta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1100;                       /* below the toast (1200) and modal */
  width: min(392px, calc(100vw - 32px));
  opacity: 0;
  transform: translate3d(0, 16px, 0) scale(0.98);
  transform-origin: 100% 100%;
  transition: opacity 0.35s var(--zm-ease), transform 0.5s var(--zm-ease);
  pointer-events: none;
}
.zm-fcta[hidden] { display: none; }
.zm-fcta.is-on { opacity: 1; transform: none; pointer-events: auto; }
.zm-fcta.is-leaving { transform: translate3d(24px, 0, 0); transition-duration: 0.3s; }

.zm-fcta__card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 4px 14px;
  padding: 14px 14px 14px 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border: 1px solid rgba(19, 19, 22, 0.08);
  box-shadow: 0 24px 60px -24px rgba(19, 19, 22, 0.35), 0 2px 6px rgba(19, 19, 22, 0.05);
  transition: box-shadow 0.3s var(--zm-ease), transform 0.3s var(--zm-ease);
}
.zm-fcta__card:hover { transform: translateY(-2px); box-shadow: 0 30px 70px -26px rgba(90, 43, 255, 0.4), 0 2px 6px rgba(19, 19, 22, 0.05); }

.zm-fcta__mark {
  position: relative;
  grid-row: span 2;
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  color: var(--white);
  background: linear-gradient(135deg, #FF5B1F 0%, #5A2BFF 100%);
}
.zm-fcta__mark svg { width: 20px; height: 20px; }
.zm-fcta__mark i {                      /* "we're here" status dot */
  position: absolute; right: -3px; top: -3px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--lime);
  border: 2px solid var(--white);
}
.zm-fcta.is-on .zm-fcta__mark i::after {   /* one gentle ping on arrival, never looping */
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--lime);
  animation: zm-fcta-ping 1.4s var(--zm-ease) 0.4s 2 both;
}
@keyframes zm-fcta-ping { from { transform: scale(1); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }

.zm-fcta__copy { min-width: 0; grid-column: 2; grid-row: 1; margin: 0; }
.zm-fcta__kicker { display: block; font-size: 12.5px; line-height: 18px; color: var(--text-muted); }
.zm-fcta__title { display: block; font-family: var(--font-head); font-size: 16px; line-height: 22px; font-weight: 600; color: var(--text); }

.zm-fcta__go {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 14px; line-height: 20px; font-weight: 600;
  color: var(--white);
  background: var(--bg);
  transition: background-color 0.25s var(--zm-ease), box-shadow 0.25s var(--zm-ease);
}
.zm-fcta__go svg { transition: transform 0.25s var(--zm-ease); }
.zm-fcta__go:hover, .zm-fcta__go:focus-visible { background: #5A2BFF; box-shadow: 0 10px 24px -10px rgba(90, 43, 255, 0.8); }
.zm-fcta__go:hover svg, .zm-fcta__go:focus-visible svg { transform: translate(2px, -2px); }
.zm-fcta__go:active { transform: scale(0.98); }

.zm-fcta__close {
  grid-column: 3; grid-row: 1;
  align-self: start;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; border-radius: 10px;
  background: #f2f2ee;
  color: var(--text);
  cursor: pointer;
  transition: background-color 0.2s var(--zm-ease), transform 0.2s var(--zm-ease);
}
.zm-fcta__close:hover, .zm-fcta__close:focus-visible { background: #e6e3dc; }
.zm-fcta__close:active { transform: scale(0.92); }

/* phones: a slim bar along the bottom edge; one line of copy, the action and close */
@media (max-width: 640px) {
  .zm-fcta { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: auto; transform-origin: 50% 100%; }
  .zm-fcta.is-leaving { transform: translate3d(0, 24px, 0); }
  .zm-fcta__card { grid-template-columns: auto 1fr auto auto; padding: 10px; gap: 10px; border-radius: 16px; }
  .zm-fcta__mark { grid-row: auto; width: 36px; height: 36px; border-radius: 11px; }
  .zm-fcta__mark svg { width: 17px; height: 17px; }
  .zm-fcta__title { display: none; }
  .zm-fcta__kicker { font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--text); }
  .zm-fcta__go { grid-column: 3; grid-row: 1; margin-top: 0; padding: 8px 14px; font-size: 13.5px; }
  .zm-fcta__close { grid-column: 4; align-self: center; width: 32px; height: 32px; }
  body.zm-fcta-on .zm-toast { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  .zm-fcta, .zm-fcta.is-leaving { transform: none !important; transition: none; }
  .zm-fcta__card:hover { transform: none; }
  .zm-fcta.is-on .zm-fcta__mark i::after { animation: none; }
}
@media print { .zm-fcta { display: none !important; } }