/* ============================================================
   UbidTech — Site Stylesheet
   Built on the UbidTech design system tokens (tokens.css)
   ============================================================ */

/* Inter is loaded once, sitewide, via <link> tags in <head> (see build.py's
   page() helper) rather than an in-stylesheet @import — this is the single
   font family used across every page, weight, and component. */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Base ---------- */
body {
  font-family: var(--font-sans);
  background: var(--color-canvas);
  color: var(--color-ink);
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  font-weight: var(--body-md-weight);
  -webkit-font-smoothing: antialiased;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--space-96);
}
@media (max-width: 900px) {
  .section { padding-block: var(--space-64); }
}

.section-soft { background: var(--color-canvas-soft); }
.section-cream { background: var(--color-cream); }
.section-dark {
  background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-deep) 100%);
  color: var(--color-on-ink);
}
.section-dark .text-secondary { color: var(--color-on-ink-secondary); }

/* ---------- Type ---------- */
.display-xl { font-size: var(--display-xl-size); line-height: var(--display-xl-line); font-weight: var(--display-xl-weight); letter-spacing: var(--display-xl-tracking); }
.display-lg { font-size: var(--display-lg-size); line-height: var(--display-lg-line); font-weight: var(--display-lg-weight); letter-spacing: var(--display-lg-tracking); }
.display-md { font-size: var(--display-md-size); line-height: var(--display-md-line); font-weight: var(--display-md-weight); letter-spacing: var(--display-md-tracking); }
.heading-lg { font-size: var(--heading-lg-size); line-height: var(--heading-lg-line); font-weight: var(--heading-lg-weight); letter-spacing: var(--heading-lg-tracking); }
.heading-md { font-size: var(--heading-md-size); line-height: var(--heading-md-line); font-weight: var(--heading-md-weight); letter-spacing: var(--heading-md-tracking); }
.heading-sm { font-size: var(--heading-sm-size); line-height: var(--heading-sm-line); font-weight: var(--heading-sm-weight); letter-spacing: var(--heading-sm-tracking); }
.body-lg { font-size: var(--body-lg-size); line-height: var(--body-lg-line); font-weight: var(--body-lg-weight); }
.body-md { font-size: var(--body-md-size); line-height: var(--body-md-line); font-weight: var(--body-md-weight); }
.caption { font-size: var(--caption-size); line-height: var(--caption-line); font-weight: var(--caption-weight); letter-spacing: var(--caption-tracking); }

.text-secondary { color: var(--color-text-secondary); }
.text-primary-accent { color: var(--color-primary); }

@media (max-width: 900px) {
  .display-xl { font-size: 42px; line-height: 46px; letter-spacing: -0.03em; }
  .display-lg { font-size: 38px; line-height: 42px; letter-spacing: -0.03em; }
  .display-md { font-size: 32px; line-height: 36px; }
  .heading-lg { font-size: 30px; line-height: 36px; }
  .heading-md { font-size: 26px; line-height: 32px; }
}

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  font-size: var(--micro-size);
  line-height: var(--micro-line);
  font-weight: var(--micro-weight);
  letter-spacing: var(--micro-tracking);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-16);
}
.eyebrow.on-ink { color: var(--color-on-ink-secondary); }
.eyebrow .dot { color: currentColor; opacity: 0.6; }

/* ---------- Buttons ----------
   Restrained, professional hover/press states — a small lift plus a
   shadow/color shift, never a bouncy scale or cursor-chasing pull.
   Every value animated here is transform/opacity/background/shadow only
   (hardware-accelerated). */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  font-size: var(--button-size);
  line-height: var(--button-line);
  font-weight: var(--button-weight);
  letter-spacing: var(--button-tracking);
  border-radius: var(--radius-pill);
  padding: var(--space-12) var(--space-24);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
  transform: translateY(0);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 90ms; }
.btn-sm { padding: var(--space-8) var(--space-16); }

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-primary-deep); box-shadow: var(--shadow-md); }
.btn-primary:active { background: var(--color-primary-deep); box-shadow: var(--shadow-sm); }
.btn-primary:disabled { opacity: 0.4; box-shadow: none; pointer-events: none; }

.btn-secondary {
  background: var(--color-canvas);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}
.btn-secondary:hover { background: var(--color-canvas-soft); border-color: var(--color-primary-deep); color: var(--color-primary-deep); }
.btn-secondary:disabled { opacity: 0.4; pointer-events: none; }

.btn-dark {
  background: var(--color-ink);
  color: var(--color-on-ink);
}
.btn-dark:hover { background: var(--color-ink-deep); box-shadow: var(--shadow-md); }
.btn-dark:disabled { opacity: 0.4; pointer-events: none; }

/* Dark button variant used on section-dark backgrounds needs contrast flip */
.section-dark .btn-dark { background: rgba(255,255,255,0.1); }
.section-dark .btn-dark:hover { background: rgba(255,255,255,0.18); }

.btn-row { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active { transform: none; }
}

/* ---------- Card ----------
   --rx/--ry are set by main.js on pointermove for a subtle tilt; 0 by
   default so the card is flat until JS (and a fine pointer) applies it. */
.card {
  --rx: 0deg;
  --ry: 0deg;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(0) scale(1);
  will-change: transform;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px) scale(1.01);
  transition: box-shadow var(--duration-fast) var(--ease-standard), transform 120ms var(--ease-standard);
}
.card .card-visual {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-canvas-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-24);
  color: var(--color-primary);
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard);
}
.card:hover .card-visual { transform: scale(1.08) rotate(-4deg); background: var(--color-primary); color: var(--color-on-primary); }
.card .card-visual svg { width: 22px; height: 22px; }
.card h3 { font-size: var(--heading-sm-size); line-height: var(--heading-sm-line); font-weight: var(--heading-sm-weight); letter-spacing: var(--heading-sm-tracking); color: var(--color-ink); margin-bottom: var(--space-12); }
.card p { color: var(--color-text-secondary); }
.card .card-meta { display: block; margin-bottom: var(--space-8); }
.card-link { display: inline-flex; align-items: center; gap: var(--space-4); margin-top: var(--space-16); color: var(--color-primary); font-weight: 500; font-size: 14px; }
.card-link svg { width: 16px; height: 16px; flex: 0 0 auto; transition: transform var(--duration-fast) var(--ease-standard); }
.card:hover .card-link svg { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .card, .card:hover, .card .card-visual, .card:hover .card-visual { transform: none !important; }
}

/* ---------- Gradient Mesh ---------- */
.gradient-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  /* A faint technical grid, reminiscent of the product/dashboard mockups
     elsewhere on the site. It's masked to fade out toward the left, where
     headline copy sits, and to build up toward the right, so it reads as
     texture behind the visual side of the hero rather than noise behind
     the text. */
  background-image:
    linear-gradient(rgba(13, 37, 61, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 37, 61, 0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 48%, rgba(0,0,0,0.5) 66%, black 85%, black 100%);
  mask-image: linear-gradient(100deg, transparent 0%, transparent 48%, rgba(0,0,0,0.5) 66%, black 85%, black 100%);
}
@media (max-width: 900px) {
  /* Below this width, hero layouts stack into one column, so there's no
     clear "visual side" left for the grid to build up into — drop it
     rather than risk it sitting under the headline. */
  .gradient-mesh { background-image: none; }
}
.gradient-mesh::before,
.gradient-mesh::after,
.gradient-mesh .mesh-blob {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
  will-change: transform;
}
/* Mesh follows the logo's own gradient: brand-blue (#2F43FC) drifting into
   brand-purple (#C17FFD) along the same diagonal, with --color-primary as
   the bridge tone in between so the blend stays smooth. */
.gradient-mesh::before {
  width: 70vw; height: 70vw;
  background: var(--color-brand-blue);
  top: -20%; left: -15%;
  opacity: 0.14;
}
.gradient-mesh::after {
  width: 55vw; height: 55vw;
  background: var(--color-primary);
  top: 8%; right: -10%;
  opacity: 0.08;
}
.gradient-mesh .mesh-blob {
  width: 48vw; height: 48vw;
  background: var(--color-brand-purple);
  bottom: -15%; left: 18%;
  opacity: 0.11;
}
.gradient-mesh .mesh-blob.magenta {
  width: 42vw; height: 42vw;
  background: var(--color-primary-soft);
  bottom: -12%; right: 2%;
  opacity: 0.08;
}
@media (prefers-reduced-motion: no-preference) {
  .gradient-mesh::before { animation: drift1 32s ease-in-out infinite alternate; }
  .gradient-mesh::after { animation: drift2 38s ease-in-out infinite alternate; }
}
@keyframes drift1 { from { transform: translate(0,0); } to { transform: translate(3%, 4%); } }
@keyframes drift2 { from { transform: translate(0,0); } to { transform: translate(-4%, -3%); } }

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  padding-block: var(--space-16);
}
.nav-logo { display: flex; align-items: center; height: 28px; }
.nav-logo img { height: 28px; width: auto; transition: transform var(--duration-fast) var(--ease-standard); }
.nav-logo:hover img { transform: scale(1.04); }
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-32);
}
.nav-links a {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  position: relative;
  padding: var(--space-4) 0;
  transition: color var(--duration-fast) var(--ease-standard);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-pill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-fast) var(--ease-standard);
}
.nav-links a:hover { color: var(--color-primary); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--color-primary); }
.nav-item-dropdown { position: relative; }
.nav-item-dropdown > button { display: flex; align-items: center; gap: var(--space-4); font-size: 15px; font-weight: 500; color: var(--color-ink); }
.nav-item-dropdown > button:hover { color: var(--color-primary); }
.nav-item-dropdown svg { width: 14px; height: 14px; transition: transform var(--duration-fast) var(--ease-standard); }
.nav-item-dropdown:hover svg { transform: rotate(180deg); }
.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-16));
  left: -20px;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-8);
  min-width: 240px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard), visibility var(--duration-fast);
}
.nav-item-dropdown:hover .nav-dropdown,
.nav-item-dropdown:focus-within .nav-dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-ink);
}
.nav-dropdown a:hover { background: var(--color-canvas-soft); color: var(--color-primary); }
.nav-cta { display: flex; align-items: center; gap: var(--space-16); }
.nav-toggle { display: none; }

.nav { transition: box-shadow var(--duration-fast) var(--ease-standard); }
.nav.is-scrolled { box-shadow: 0 6px 24px rgba(13, 37, 61, 0.06); }
.nav-mobile-footer { display: none; }

/* ---------- Mobile nav ----------
   Below 900px the header becomes a floating glass "island" with an ink
   menu button, and the menu opens as a full-screen sheet: large numbered
   links that stagger in, services as a tile grid, and a pinned CTA.
   The glass lives on a ::before layer (not on .nav-inner itself) so the
   fixed-position sheet is still sized to the viewport. */
@media (max-width: 900px) {
  .nav {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: none;
    padding: 10px 12px 0;
  }
  .nav.is-scrolled { box-shadow: none; }
  .nav-inner {
    position: relative;
    z-index: 1;
    max-width: none;
    padding: 8px 8px 8px 18px;
    border-radius: 18px;
  }
  .nav-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.78);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(227, 232, 238, 0.9);
    box-shadow: 0 4px 16px rgba(13, 37, 61, 0.05);
    transition: box-shadow var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
  }
  /* Brand-gradient hairline that appears once the page scrolls */
  .nav-inner::after {
    content: '';
    position: absolute;
    left: 18px; right: 18px; bottom: -1px;
    height: 2px;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-brand-blue), var(--color-primary), var(--color-brand-purple));
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
  }
  .nav.is-scrolled .nav-inner::before { background: rgba(255, 255, 255, 0.9); box-shadow: 0 10px 32px rgba(13, 37, 61, 0.12); }
  .nav.is-scrolled .nav-inner::after { opacity: 1; transform: scaleX(1); }
  .nav.is-open .nav-inner::before { box-shadow: 0 10px 32px rgba(13, 37, 61, 0.1); background: rgba(255, 255, 255, 0.96); }
  .nav.is-open .nav-inner::after { opacity: 0; }

  .nav-logo, .nav-logo img { height: 26px; }
  .nav-cta { gap: var(--space-8); }
  .nav-cta .btn-secondary-desktop { display: none; }

  /* Menu button: ink tile with a two-line burger that morphs into an X */
  .nav-toggle {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--color-ink);
    color: var(--color-on-ink);
    transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  }
  .nav-toggle:hover { background: var(--color-primary); }
  .nav-toggle:active { transform: scale(0.94); }
  .nav-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
  .nav-toggle svg { display: none; }
  .nav-toggle::before,
  .nav-toggle::after {
    content: '';
    position: absolute;
    left: 13px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform var(--duration-base) var(--ease-standard), width var(--duration-base) var(--ease-standard), top var(--duration-base) var(--ease-standard);
  }
  .nav-toggle::before { top: 17px; width: 18px; }
  .nav-toggle::after { top: 25px; width: 12px; }
  .nav-toggle:hover::after { width: 18px; }
  .nav.is-open .nav-toggle { background: var(--color-primary); }
  .nav.is-open .nav-toggle::before { top: 21px; width: 18px; transform: rotate(45deg); }
  .nav.is-open .nav-toggle::after { top: 21px; width: 18px; transform: rotate(-45deg); }

  /* Full-screen sheet */
  .nav-links {
    position: fixed;
    inset: 0;
    z-index: -2;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 96px max(24px, calc((100vw - 640px) / 2)) 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background:
      radial-gradient(420px 360px at 100% 0%, rgba(47, 67, 252, 0.14), transparent 70%),
      radial-gradient(380px 380px at 0% 100%, rgba(193, 127, 253, 0.2), transparent 70%),
      var(--color-canvas);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-base) var(--ease-standard), visibility 0s linear var(--duration-base);
    counter-reset: navitem;
  }
  .nav.is-open .nav-links {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--duration-base) var(--ease-standard), visibility 0s;
  }

  .nav-links > li:not(.nav-mobile-footer) {
    counter-increment: navitem;
    border-bottom: 1px solid var(--color-border);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
  }
  .nav.is-open .nav-links > li { opacity: 1; transform: none; }
  .nav.is-open .nav-links > li:nth-child(1) { transition-delay: 60ms; }
  .nav.is-open .nav-links > li:nth-child(2) { transition-delay: 110ms; }
  .nav.is-open .nav-links > li:nth-child(3) { transition-delay: 160ms; }
  .nav.is-open .nav-links > li:nth-child(4) { transition-delay: 210ms; }
  .nav.is-open .nav-links > li:nth-child(5) { transition-delay: 260ms; }

  .nav-links > li:not(.nav-mobile-footer) > a,
  .nav-item-dropdown > button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 0;
    font-size: 30px;
    line-height: 36px;
    font-weight: 300;
    letter-spacing: -0.02em;
    color: var(--color-ink);
    text-align: left;
  }
  .nav-links > li:not(.nav-mobile-footer) > a::before,
  .nav-item-dropdown > button::before {
    content: counter(navitem, decimal-leading-zero);
    width: 36px;
    flex: 0 0 auto;
    align-self: flex-start;
    padding-top: 4px;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--color-primary);
  }
  /* Swap the desktop underline for a trailing arrow */
  .nav-links > li:not(.nav-mobile-footer) > a::after {
    content: '';
    position: static;
    width: 22px; height: 22px;
    margin-left: auto;
    flex: 0 0 auto;
    border-radius: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17L17 7M8 7h9v9'/%3E%3C/svg%3E") center / contain no-repeat;
    opacity: 0.35;
    transform: none;
    transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
  }
  .nav-links > li:not(.nav-mobile-footer) > a:hover::after,
  .nav-links > li:not(.nav-mobile-footer) > a.active::after { opacity: 1; transform: translate(2px, -2px); }
  .nav-links > li:not(.nav-mobile-footer) > a.active,
  .nav-links > li:not(.nav-mobile-footer) > a:hover,
  .nav-item-dropdown > button:hover { color: var(--color-primary); }

  .nav-item-dropdown svg { width: 22px; height: 22px; margin-left: auto; opacity: 0.5; }
  .nav-item-dropdown:hover svg { transform: none; }
  .nav-item-dropdown.is-open svg { transform: rotate(180deg); opacity: 1; }
  .nav-item-dropdown.is-open > button { color: var(--color-primary); }

  /* Services as a tile grid inside the sheet */
  .nav-dropdown,
  .nav.is-open .nav-dropdown {
    position: static;
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    min-width: 0;
    padding: 0 0 var(--space-16) 36px;
    border: none;
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav.is-open .nav-item-dropdown.is-open .nav-dropdown { display: grid; animation: navTilesIn var(--duration-base) var(--ease-standard); }
  .nav-dropdown a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: var(--space-12) var(--space-16);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 18px;
  }
  .nav-dropdown a::after { display: none; }
  .nav-dropdown a:hover { border-color: var(--color-primary); background: var(--color-canvas); }

  /* Pinned footer: CTA + direct email */
  .nav-mobile-footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin-top: auto;
    padding-top: var(--space-32);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--duration-base) var(--ease-standard) 300ms, transform var(--duration-slow) var(--ease-standard) 300ms;
  }
  /* Standard .btn-primary, full width — restores the base button values
     that the generic .nav-links a rule overrides */
  .nav-links .nav-mobile-footer .btn {
    display: flex;
    width: 100%;
    padding: var(--space-12) var(--space-24);
    font-size: var(--button-size);
    line-height: var(--button-line);
    font-weight: var(--button-weight);
    letter-spacing: var(--button-tracking);
    color: var(--color-on-primary);
  }
  .nav-links .nav-mobile-footer .btn:hover,
  .nav-links .nav-mobile-footer .btn:focus-visible { color: var(--color-on-primary); }
  .nav-links .nav-mobile-footer .btn::before,
  .nav-links .nav-mobile-footer .btn::after { display: none; }
  .nav-mobile-meta {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-12);
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--color-text-secondary);
  }
  .nav-mobile-meta a { color: var(--color-ink); font-weight: 500; }
  .nav-mobile-meta a::after { display: none; }
  .nav-mobile-meta a:hover { color: var(--color-primary); }

  body.nav-open { overflow: hidden; }
}

@media (max-width: 480px) {
  .nav-cta .btn-sm { display: none; }
  .nav-links > li:not(.nav-mobile-footer) > a, .nav-item-dropdown > button { font-size: 26px; line-height: 32px; padding: 16px 0; }
  .nav-dropdown, .nav.is-open .nav-dropdown { grid-template-columns: 1fr; padding-left: 36px; }
}

@keyframes navTilesIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .nav-links > li, .nav-mobile-footer { transform: none !important; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding-block: var(--space-128) var(--space-96); overflow: hidden; }
.hero-inner { position: relative; z-index: 1; max-width: 760px; }
.hero-cta { margin-top: var(--space-48); }
.hero-visual-wrap {
  --parallax: 0px;
  position: relative;
  z-index: 1;
  margin-top: var(--space-80);
  transform: translateY(var(--parallax));
  will-change: transform;
}
@media (max-width: 900px) {
  .hero { padding-block: var(--space-64) var(--space-48); }
  .hero-visual-wrap { margin-top: var(--space-48); }
}

/* Hero workspace — a product dashboard in the same card language as the
   service scenes, with floating result chips from each service around it.
   The tabs are a working demo (see initDashboardDemo in main.js). */
.hx { position: relative; }
.hx-glow {
  position: absolute;
  inset: 8% 6% -6%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(83, 58, 253, 0.18), rgba(193, 127, 253, 0.1) 55%, transparent);
  filter: blur(24px);
}
.hx .hx-chip { z-index: 2; }
@media (max-width: 900px) { .hx .hx-chip { display: none; } }

.mockup {
  position: relative;
  border-radius: var(--radius-xl);
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.mockup-bar { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--color-border); background: var(--color-canvas-soft); }
.mockup-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); }
.mockup-crumb { margin-left: var(--space-12); font-size: 12px; color: var(--color-text-secondary); }
.mockup-crumb i { margin: 0 4px; font-style: normal; opacity: 0.6; }
.mockup-crumb b { font-weight: 600; color: var(--color-ink); }
.mockup-search {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto;
  width: 200px;
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-canvas);
  font-size: 12px; color: var(--color-text-secondary);
}
.mockup-search svg { width: 12px; height: 12px; }
.mockup-avatars { display: flex; margin-left: var(--space-8); }
.mockup-avatars i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--color-canvas-soft); background: var(--color-primary); }
.mockup-avatars i + i { margin-left: -7px; background: var(--color-brand-purple); }
.mockup-avatars i:last-child { background: var(--color-ink); }

.mockup-grid { display: grid; grid-template-columns: 184px 1fr; }
.mockup-nav {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-16) var(--space-12);
  border-right: 1px solid var(--color-border);
  background: var(--color-canvas-soft);
}
.mockup-brand { display: flex; align-items: center; gap: var(--space-8); padding: 0 var(--space-8) var(--space-16); font-size: 13px; font-weight: 600; color: var(--color-ink); }
.mockup-brand i { width: 20px; height: 20px; border-radius: 6px; background: linear-gradient(135deg, var(--color-primary), var(--color-brand-purple)); }
.mockup-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: var(--space-8) var(--space-12); border-radius: var(--radius-md);
  font-size: 13px; color: var(--color-text-secondary);
  cursor: pointer; user-select: none; border: none; background: none; width: 100%; text-align: left; font-family: inherit;
  transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.mockup-nav-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mockup-nav-item:hover { color: var(--color-ink); }
.mockup-nav-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.mockup-nav-item.active { background: var(--color-canvas); color: var(--color-ink); font-weight: 500; box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--color-border); }
.mockup-nav-item.active svg { color: var(--color-primary); }
.mockup-panels { min-width: 0; padding: var(--space-24); transition: opacity 180ms var(--ease-standard); }
.mockup-panels.is-updating { opacity: 0.35; }
@media (prefers-reduced-motion: reduce) { .mockup-panels.is-updating { opacity: 1; } }

.mockup-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); margin-bottom: var(--space-16); }
.stat-tile { position: relative; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-16); overflow: hidden; }
.stat-tile .stat-label { font-size: 12px; color: var(--color-text-secondary); }
.stat-tile .stat-value { margin-top: var(--space-4); font-size: 24px; line-height: 30px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink); }
.stat-spark { display: block; width: 100%; height: 22px; margin-top: var(--space-8); overflow: visible; }
.stat-spark path { fill: none; stroke: var(--color-primary); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: 0.8; }

.mockup-main { display: grid; grid-template-columns: 1fr 260px; gap: var(--space-16); }
.mockup-chart, .mockup-insight, .mockup-pipeline { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-16); }
.mockup-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-16); }
.chart-bars {
  display: flex; align-items: flex-end; gap: var(--space-12);
  height: 150px;
  background-image: linear-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 100% 25%;
  background-position: 0 -1px;
}
.chart-bars span {
  flex: 1;
  border-radius: 6px 6px 2px 2px;
  background: rgba(83, 58, 253, 0.18);
  transition: height 500ms var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.chart-bars span.is-peak { background: linear-gradient(180deg, var(--color-brand-purple), var(--color-primary)); }
@media (prefers-reduced-motion: reduce) { .chart-bars span { transition: none; } }
.chart-axis { display: flex; gap: var(--space-12); margin-top: var(--space-8); }
.chart-axis span { flex: 1; text-align: center; font-size: 11px; color: var(--color-text-secondary); }

.mockup-side { display: grid; gap: var(--space-16); align-content: start; }
.mockup-insight { background: linear-gradient(160deg, rgba(83, 58, 253, 0.08), rgba(193, 127, 253, 0.1)); border-color: rgba(83, 58, 253, 0.18); }
.mockup-insight-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-primary); }
.mockup-insight-label svg { width: 14px; height: 14px; }
.mockup-insight p { margin-top: var(--space-8); font-size: 13px; line-height: 20px; color: var(--color-ink); }
.mockup-pipeline .hv-steps { margin-top: var(--space-12); }

@media (max-width: 1100px) {
  .mockup-main { grid-template-columns: 1fr; }
  .mockup-side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .mockup-stats { grid-template-columns: repeat(2, 1fr); }
  .mockup-search { display: none; }
  .mockup-avatars { margin-left: auto; }
}
@media (max-width: 700px) {
  .mockup-grid { grid-template-columns: 1fr; }
  .mockup-nav { display: none; }
  .mockup-panels { padding: var(--space-16); }
  .mockup-side { grid-template-columns: 1fr; }
  .chart-bars, .chart-axis { gap: var(--space-8); }
  .chart-bars { height: 120px; }
}

.data-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-12) 0; border-bottom: 1px solid var(--color-border); font-size: 13px; }
.data-row:last-child { border-bottom: none; }
.data-row .pill-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-canvas-soft); color: var(--color-primary); }

/* ---------- Grid utilities ---------- */
.grid { display: grid; gap: var(--space-24); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
@media (min-width: 901px) and (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); align-items: center; }
.split.reverse { direction: rtl; }
.split.reverse > * { direction: ltr; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--space-32); } .split.reverse { direction: ltr; } }

.section-head { max-width: 640px; margin-bottom: var(--space-64); }
.section-head.center { margin-inline: auto; text-align: center; }

/* ---------- Capability / ecosystem diagram ---------- */
.ecosystem {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-16);
  margin-top: var(--space-48);
}
.ecosystem-node {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-24) var(--space-16);
  text-align: center;
  background: var(--color-canvas);
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.ecosystem-node:hover { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.ecosystem-node .node-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-16); transition: transform var(--duration-fast) var(--ease-standard); }
.ecosystem-node:hover .node-icon { transform: scale(1.1); }
.ecosystem-node .node-icon svg { width: 18px; height: 18px; }
.ecosystem-node h4 { font-size: 15px; font-weight: 600; margin-bottom: var(--space-8); }
.ecosystem-node p { font-size: 13px; color: var(--color-text-secondary); }
.ecosystem-hub {
  grid-column: 1 / -1;
  order: 99;
}
@media (max-width: 900px) { .ecosystem { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .ecosystem { gap: var(--space-12); } .ecosystem-node { padding: var(--space-16) var(--space-8); } }

/* ---------- Brand idea chain (Idea -> Design -> Build -> Intelligence -> Growth) ---------- */
.idea-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); margin-top: var(--space-32); row-gap: var(--space-12); }
.idea-chain .chain-unit { display: inline-flex; align-items: center; gap: var(--space-8); }
.idea-chain .chain-pill { display: inline-flex; align-items: center; gap: var(--space-8); padding: var(--space-8) var(--space-16); border-radius: var(--radius-pill); border: 1px solid var(--color-border); background: var(--color-canvas); font-size: 13px; font-weight: 600; color: var(--color-ink); white-space: nowrap; }
.idea-chain .chain-pill svg { width: 15px; height: 15px; color: var(--color-primary); }
.idea-chain .chain-arrow { display: inline-flex; color: var(--color-text-secondary); opacity: 0.45; }
.idea-chain .chain-arrow svg { width: 13px; height: 13px; }
.idea-chain .chain-pill.is-final { background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple)); border-color: transparent; color: #fff; }
.idea-chain .chain-pill.is-final svg { color: #fff; }

/* ---------- Journey / process steps ----------
   A single brand-gradient path connects every node (rather than a plain
   gray arrow between each pair), and each node carries an icon instead of
   a bare number — the icon says what the step is, so the row reads on
   its own. Hover lifts a node and fills it with the same gradient. */
.journey {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-64);
}
.journey::before {
  content: '';
  position: absolute;
  left: 24px; right: 24px; top: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-brand-blue), var(--color-brand-purple));
  opacity: 0.3;
}
.journey-step {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-16);
  flex: 1; min-width: 90px; text-align: center;
}
.journey-step .step-dot {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-canvas);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.journey-step .step-dot svg { width: 19px; height: 19px; }
.journey-step:hover .step-dot {
  background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.journey-step span { font-size: 13px; font-weight: 500; color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .journey-step:hover .step-dot { transform: none; } }
@media (max-width: 700px) {
  .journey { flex-direction: column; align-items: flex-start; gap: var(--space-32); margin-top: var(--space-48); }
  .journey::before { left: 24px; top: 24px; right: auto; bottom: 24px; width: 2px; height: auto; background: linear-gradient(180deg, var(--color-brand-blue), var(--color-brand-purple)); }
  .journey-step { flex-direction: row; align-items: center; gap: var(--space-16); text-align: left; min-width: 0; }
  .journey-step:hover .step-dot { transform: none; }
}

/* ---------- Growth phases (Build. Launch. Grow.) ----------
   Three phase cards, each owning two steps. A meter along the bottom of
   every card rises 1/3 → 2/3 → full, so reading across the row draws a
   staircase of growth. The final phase is set on ink to land the story;
   round chevron connectors sit in the gutters to show sequence. */
.growth-phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-24);
  margin-top: var(--space-64);
}
.phase {
  position: relative;
  display: flex; flex-direction: column;
  padding: var(--space-32) var(--space-32) 0;
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: translate var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
/* Hover uses the independent `translate` property so it never fights the
   stagger-reveal `transform`; the reveal delay applies to opacity/transform only. */
html.js .growth-phases[data-stagger] > .phase {
  transition: opacity 550ms var(--ease-standard), transform 550ms var(--ease-standard),
              translate var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
  transition-delay: var(--stagger-delay, 0ms), var(--stagger-delay, 0ms), 0ms, 0ms, 0ms;
}
.phase:hover { translate: 0 -4px; box-shadow: var(--shadow-md); border-color: rgba(83, 58, 253, 0.3); }
.phase + .phase::before {
  content: '';
  position: absolute; z-index: 2;
  left: calc(-1 * var(--space-24) / 2 - 16px); top: 44px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--color-canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23533AFD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E") center / 14px no-repeat;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.phase-label {
  display: flex; align-items: center; gap: var(--space-8);
  font-size: var(--micro-size); line-height: var(--micro-line); font-weight: var(--micro-weight);
  letter-spacing: var(--micro-tracking); text-transform: uppercase;
  color: var(--color-text-secondary);
}
.phase-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; height: 22px; padding: 0 var(--space-8);
  border-radius: var(--radius-pill);
  background: rgba(83, 58, 253, 0.08);
  color: var(--color-primary);
  letter-spacing: 0.02em;
}
.phase-title {
  margin-top: var(--space-16);
  font-size: var(--display-md-size); line-height: var(--display-md-line);
  font-weight: var(--display-md-weight); letter-spacing: var(--display-md-tracking);
  color: var(--color-ink);
}
.phase-desc { margin-top: var(--space-12); color: var(--color-text-secondary); }
.phase-steps {
  display: grid; gap: var(--space-16);
  margin-top: var(--space-24); padding-top: var(--space-24);
  border-top: 1px solid var(--color-border);
}
.phase-steps li { display: flex; align-items: center; gap: var(--space-12); }
.phase-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-canvas-soft);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}
.phase-icon svg { width: 18px; height: 18px; }
.phase:hover .phase-icon {
  background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
  border-color: transparent; color: #fff;
}
.phase-steps strong { display: block; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--color-ink); }
.phase-steps span:not(.phase-icon) { display: block; font-size: var(--caption-size); line-height: var(--caption-line); color: var(--color-text-secondary); }
.phase-meter {
  display: flex; align-items: flex-end;
  height: 72px;
  margin: auto calc(-1 * var(--space-32)) 0;
  padding: var(--space-32) var(--space-32) 0;
  box-sizing: content-box;
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
.phase-meter i {
  display: block; width: 100%;
  height: var(--level, 100%);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: linear-gradient(180deg, rgba(83, 58, 253, 0.32), rgba(193, 127, 253, 0.08));
}

.phase-featured {
  background: linear-gradient(180deg, var(--color-ink) 0%, var(--color-ink-deep) 100%);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}
.phase-featured:hover { border-color: transparent; box-shadow: var(--shadow-lg); }
.phase-featured .phase-label,
.phase-featured .phase-desc,
.phase-featured .phase-steps span:not(.phase-icon) { color: var(--color-on-ink-secondary); }
.phase-featured .phase-num { background: rgba(255, 255, 255, 0.1); color: var(--color-on-ink); }
.phase-featured .phase-title,
.phase-featured .phase-steps strong { color: var(--color-on-ink); }
.phase-featured .phase-title {
  background: linear-gradient(90deg, #fff 0%, var(--color-brand-purple) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.phase-featured .phase-steps { border-top-color: rgba(255, 255, 255, 0.12); }
.phase-featured .phase-icon {
  background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
  border-color: transparent; color: #fff;
}
.phase-featured .phase-meter i { background: linear-gradient(180deg, var(--color-brand-blue), var(--color-brand-purple)); opacity: 0.85; }

@media (prefers-reduced-motion: reduce) { .phase:hover { translate: none; } }
@media (max-width: 960px) {
  .growth-phases { grid-template-columns: 1fr; gap: var(--space-32); margin-top: var(--space-48); max-width: 560px; margin-inline: auto; }
  .phase + .phase::before { left: 50%; top: calc(-1 * var(--space-32) / 2 - 16px); transform: rotate(90deg); margin-left: -16px; }
  .phase-meter { height: 48px; }
  .phase:hover { translate: none; }
}
@media (max-width: 500px) {
  .phase { padding: var(--space-24) var(--space-24) 0; }
  .phase-meter { margin-inline: calc(-1 * var(--space-24)); padding-inline: var(--space-24); padding-top: var(--space-24); }
  .phase-title { font-size: 38px; line-height: 42px; }
}

.process-list { display: flex; flex-direction: column; }
.process-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--space-32);
  padding-block: var(--space-32);
  border-top: 1px solid var(--color-border);
}
.process-item:last-child { border-bottom: 1px solid var(--color-border); }
.process-item .process-num { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; }
.process-item h3 { margin-bottom: var(--space-8); }
.process-item p { color: var(--color-text-secondary); max-width: 480px; }
@media (max-width: 700px) { .process-item { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ---------- Case study framework ---------- */
.case-study {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  margin-bottom: var(--space-24);
  transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.case-study:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.case-study-flow { display: flex; gap: var(--space-8); flex-wrap: wrap; margin-top: var(--space-16); }
.case-study-flow span { font-size: 12px; padding: 4px 12px; border-radius: var(--radius-pill); background: var(--color-canvas-soft); color: var(--color-text-secondary); }
.placeholder-note {
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-32);
  text-align: center;
  color: var(--color-text-secondary);
}

/* ---------- Form ---------- */
.form-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: var(--space-48);
}
@media (max-width: 700px) { .form-card { padding: var(--space-24); } }
.form-field { display: flex; flex-direction: column; gap: var(--space-8); margin-bottom: var(--space-24); }
.form-field label { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.form-field .optional { font-weight: 400; color: var(--color-text-secondary); }
.form-field input, .form-field select, .form-field textarea {
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-12) var(--space-16);
  background: var(--color-canvas-soft);
  font-size: 15px;
  font-family: inherit;
  color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--color-text-secondary); opacity: 0.75; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--color-primary-soft); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--color-primary);
  background: var(--color-canvas);
  box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.12);
  outline: none;
}
.form-field textarea { resize: vertical; min-height: 120px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24); }
@media (max-width: 700px) { .form-row { grid-template-columns: 1fr; } }
.form-actions { display: flex; align-items: center; gap: var(--space-16); flex-wrap: wrap; margin-top: var(--space-8); }
.btn-block { width: 100%; }
.form-note { display: flex; align-items: center; gap: var(--space-8); font-size: 13px; color: var(--color-text-secondary); margin-top: var(--space-16); }
.form-note svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--color-primary); }
#form-success { display: none; padding: var(--space-48); border-radius: var(--radius-lg); background: var(--color-canvas-soft); text-align: center; }
#form-success.show { display: block; }
#form-success .check-badge {
  width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: var(--color-on-primary);
  display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-16);
}
#form-success .check-badge svg { width: 22px; height: 22px; }

/* ---------- Contact (Get in touch) ----------
   One shell holding two panels: a dark ink info panel carrying the brand
   gradient, and the form on white. Reads as a single object rather than
   two loose columns. */
.contact-shell {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.contact-panel {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, var(--color-ink) 0%, var(--color-ink-deep) 100%);
  color: var(--color-on-ink);
  padding: var(--space-48);
}
.contact-panel-glow { position: absolute; inset: 0; pointer-events: none; }
.contact-panel-glow::before,
.contact-panel-glow::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(80px);
}
.contact-panel-glow::before { width: 360px; height: 360px; top: -140px; right: -120px; background: var(--color-brand-blue); opacity: 0.45; }
.contact-panel-glow::after { width: 300px; height: 300px; bottom: -150px; left: -100px; background: var(--color-brand-purple); opacity: 0.28; }
.contact-panel-body { position: relative; z-index: 1; }
.contact-panel .heading-md { color: var(--color-on-ink); }
.contact-panel-lead { color: var(--color-on-ink-secondary); margin-top: var(--space-16); }

.contact-channel {
  display: flex; align-items: center; gap: var(--space-16);
  margin-top: var(--space-32);
  padding: var(--space-16) var(--space-16) var(--space-16) var(--space-16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--color-on-ink);
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard);
}
.contact-channel:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.24); transform: translateY(-2px); }
.contact-channel:focus-visible { outline: 2px solid var(--color-brand-purple); outline-offset: 3px; }
.contact-channel-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--color-brand-blue), var(--color-brand-purple));
}
.contact-channel-icon svg { width: 20px; height: 20px; }
.contact-channel-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.contact-channel-label { font-size: 13px; color: var(--color-on-ink-secondary); }
.contact-channel-value { font-weight: 500; overflow-wrap: anywhere; }
.contact-channel-arrow { width: 18px; height: 18px; flex: 0 0 auto; color: var(--color-on-ink-secondary); transition: transform var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
.contact-channel:hover .contact-channel-arrow { transform: translate(2px, -2px); color: var(--color-on-ink); }

.contact-steps { margin-top: var(--space-48); }
.contact-steps-title {
  font-size: var(--micro-size); line-height: var(--micro-line); font-weight: var(--micro-weight);
  letter-spacing: var(--micro-tracking); text-transform: uppercase;
  color: var(--color-on-ink-secondary); margin-bottom: var(--space-16);
}
.contact-steps ol { list-style: none; margin: 0; padding: 0; }
.contact-steps li {
  display: grid; grid-template-columns: 32px 1fr; gap: var(--space-16);
  padding-block: var(--space-16);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.contact-step-num { font-size: 13px; font-weight: 600; color: var(--color-brand-purple); padding-top: 2px; font-variant-numeric: tabular-nums; }
.contact-steps h4 { font-size: 15px; font-weight: 600; color: var(--color-on-ink); margin-bottom: var(--space-4); }
.contact-steps p { font-size: 14px; line-height: 21px; color: var(--color-on-ink-secondary); }

.contact-form-wrap { padding: var(--space-48); display: flex; flex-direction: column; justify-content: center; }

/* Project-type chips: native radios, styled as pills */
.chip-field { border: 0; padding: 0; min-width: 0; }
.chip-field legend { font-size: 13px; font-weight: 600; color: var(--color-ink); padding: 0; margin-bottom: var(--space-8); }
.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip span {
  display: inline-flex; align-items: center;
  padding: var(--space-8) var(--space-16);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-canvas-soft);
  font-size: 14px; font-weight: 500; color: var(--color-ink);
  transition: border-color var(--duration-fast) var(--ease-standard),
              background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard);
}
.chip:hover span { border-color: var(--color-primary-soft); }
.chip input:checked + span { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.25); }

.contact-shell #form-success { background: transparent; }
.form-honey { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-error {
  margin-bottom: var(--space-16); padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-md); background: #FEF2F2; border: 1px solid #FECACA;
  color: #B42318; font-size: 14px;
}
.form-error[hidden] { display: none; }
.form-field [aria-invalid="true"] { border-color: #D92D20; }

@media (max-width: 1000px) {
  .contact-shell { grid-template-columns: 1fr; }
  .contact-steps ol { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-32); }
}
@media (max-width: 700px) {
  .contact-shell { border-radius: var(--radius-xl); }
  .contact-panel, .contact-form-wrap { padding: var(--space-32) var(--space-24); }
  .contact-steps { margin-top: var(--space-32); }
  .contact-steps ol { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .contact-channel:hover, .contact-channel:hover .contact-channel-arrow { transform: none; }
}
.trust-row { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32); }
.trust-row .tag-pill { cursor: default; }
.trust-row .tag-pill:hover { transform: none; border-color: var(--color-border); color: var(--color-ink); }

/* ---------- Footer ---------- */
.footer { background: var(--color-ink-deep); color: var(--color-on-ink); padding-block: var(--space-80) var(--space-48); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-48); padding-bottom: var(--space-64); }
.footer-brand img { height: 26px; margin-bottom: var(--space-16); }
.footer-brand p { color: var(--color-on-ink-secondary); max-width: 260px; }
.footer h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-on-ink-secondary); margin-bottom: var(--space-16); font-weight: 600; }
.footer-links { display: flex; flex-direction: column; gap: var(--space-12); }
.footer-links a { color: var(--color-on-ink); font-size: 14px; display: inline-block; transition: color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.footer-links a:hover { color: var(--color-primary-soft); transform: translateX(3px); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-32); border-top: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; gap: var(--space-16); }
.footer-bottom p { color: var(--color-on-ink-secondary); font-size: 13px; }
.social-links { display: flex; gap: var(--space-16); }
.social-links a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.15); display: flex; align-items: center; justify-content: center; transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.social-links a:hover { border-color: var(--color-primary-soft); color: var(--color-primary-soft); transform: translateY(-2px); }
.social-links svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }

/* ---------- FAQ accordion ---------- */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-item:first-child { border-top: 1px solid var(--color-border); }
.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: var(--space-24);
  text-align: left;
  font-size: 17px;
  font-weight: 500;
  color: var(--color-ink);
  transition: color var(--duration-fast) var(--ease-standard);
}
.faq-q:hover { color: var(--color-primary); }
.faq-icon { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--color-canvas-soft); display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: transform var(--duration-fast) var(--ease-standard); }
.faq-icon svg { width: 14px; height: 14px; }
.faq-item.is-open .faq-icon { transform: rotate(45deg); background: var(--color-primary); color: var(--color-on-primary); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height var(--duration-base) var(--ease-standard); }
.faq-a p { padding-bottom: var(--space-24); max-width: 560px; }
.faq-item.is-open .faq-a { max-height: 400px; }

/* ---------- Feature list (icon + title + text, no boxed cards) ----------
   Replaces a grid of many identical bordered tiles with an editorial,
   two-column list — more breathing room, one clear rhythm, icon-led. */
.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-48);
  margin-top: var(--space-48);
}
.feature-item {
  display: flex;
  gap: var(--space-16);
  padding-block: var(--space-24);
  border-top: 1px solid var(--color-border);
  transition: transform var(--duration-fast) var(--ease-standard);
}
.feature-list .feature-item:nth-child(1),
.feature-list .feature-item:nth-child(2) { border-top: none; }
.feature-item:hover { transform: translateX(3px); }
.feature-item .feature-icon {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-canvas-soft);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.feature-item .feature-icon svg { width: 19px; height: 19px; }
.feature-item:hover .feature-icon { background: var(--color-primary); color: var(--color-on-primary); transform: scale(1.06); }
.feature-item h3 { font-size: 16px; font-weight: 500; color: var(--color-ink); margin-bottom: var(--space-4); }
.feature-item p { font-size: 14px; color: var(--color-text-secondary); }
@media (max-width: 700px) {
  .feature-list { grid-template-columns: 1fr; column-gap: 0; }
  .feature-list .feature-item:nth-child(2) { border-top: 1px solid var(--color-border); }
}

/* ---------- Tag pills / tech chips ---------- */
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-24); }
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  font-size: 13px;
  font-weight: 500;
  padding: var(--space-8) var(--space-16);
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-canvas);
  color: var(--color-text-secondary);
  transition: border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.tag-pill svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--color-primary); }
.tag-pill:hover { border-color: var(--color-primary); color: var(--color-primary); transform: translateY(-2px); }
.section-dark .tag-pill { border-color: rgba(255,255,255,0.15); color: var(--color-on-ink-secondary); background: transparent; }

/* ---------- Feature checklist ---------- */
.check-list { display: flex; flex-direction: column; gap: var(--space-16); margin-top: var(--space-24); }
.check-list li { display: flex; align-items: flex-start; gap: var(--space-12); }
.check-list .check-icon { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--color-canvas-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.check-list .check-icon svg { width: 12px; height: 12px; }
.section-dark .check-list .check-icon { background: rgba(255,255,255,0.1); color: var(--color-on-ink); }

/* ---------- Comparison table ---------- */
.compare-table { width: 100%; border-collapse: collapse; margin-top: var(--space-48); }
.compare-table th, .compare-table td { padding: var(--space-16) var(--space-24); text-align: left; border-bottom: 1px solid var(--color-border); }
.compare-table th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-secondary); font-weight: 600; }
.compare-table thead th:not(:first-child) { text-align: center; }
.compare-table td:not(:first-child) { text-align: center; }
.compare-table td:first-child { font-weight: 500; color: var(--color-ink); }
.compare-table .col-us { background: var(--color-canvas-soft); }
.compare-table th.col-us { color: var(--color-primary); }
.compare-table .yes { color: var(--color-primary); }
.compare-table .no { color: var(--color-border); }
@media (max-width: 700px) {
  /* A 3-column table can't fit a phone screen readably, even scrollable —
     swiping a table sideways is a poor, easy-to-miss interaction. Instead
     each row becomes a small stacked card: the label, then the two values
     with inline captions so the comparison still reads without a header row. */
  .compare-table, .compare-table thead, .compare-table tbody, .compare-table tr, .compare-table td { display: block; width: 100%; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare-table tr { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-16); margin-bottom: var(--space-12); }
  .compare-table td { padding: var(--space-4) 0 !important; border: none !important; text-align: left !important; }
  .compare-table td:first-child { font-weight: 600; color: var(--color-ink); margin-bottom: var(--space-8); font-size: 15px; }
  .compare-table td:nth-child(2)::before { content: "Typical outsourcing — "; color: var(--color-text-secondary); font-weight: 600; }
  .compare-table td:nth-child(3)::before { content: "UbidTech — "; color: var(--color-primary); font-weight: 600; }
  .compare-table td.col-us { background: none; margin-top: var(--space-8); padding-left: var(--space-12) !important; border-left: 2px solid var(--color-primary) !important; }
}

/* ---------- Industries / logos strip ---------- */
.industries-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-16); margin-top: var(--space-48); }
.industry-tile { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-24); text-align: center; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.industry-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.industry-tile .node-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-canvas-soft); color: var(--color-primary); display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-12); transition: transform var(--duration-fast) var(--ease-standard); }
.industry-tile:hover .node-icon { transform: scale(1.1); }
.industry-tile .node-icon svg { width: 20px; height: 20px; }
.industry-tile span { font-size: 14px; font-weight: 500; }
@media (max-width: 900px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Principle rows (avoids fabricated testimonials/stats) ---------- */
.principle-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-24); margin-top: var(--space-48); }
.principle { padding: var(--space-24) 0; border-top: 1px solid rgba(255,255,255,0.14); }
.principle .principle-icon { width: 40px; height: 40px; border-radius: var(--radius-md); background: rgba(255,255,255,0.08); color: var(--color-on-ink); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-16); }
.principle .principle-icon svg { width: 19px; height: 19px; }
.principle .principle-num { font-size: 13px; color: var(--color-on-ink-secondary); }
.principle h4 { color: var(--color-on-ink); margin-block: var(--space-8); font-size: 20px; font-weight: 400; }
.principle p { color: var(--color-on-ink-secondary); font-size: 14px; }
@media (max-width: 900px) { .principle-row { grid-template-columns: 1fr; } }

/* ---------- Engagement / pricing style cards ---------- */
.engagement-card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-32); display: flex; flex-direction: column; height: 100%; transition: transform var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.engagement-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.engagement-card.featured { border-color: var(--color-primary); box-shadow: var(--shadow-md); position: relative; }
.engagement-card .tag-featured { position: absolute; top: -12px; right: 24px; background: var(--color-primary); color: #fff; font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-pill); }
.engagement-card h3 { margin-bottom: var(--space-8); }
.engagement-card .engagement-desc { color: var(--color-text-secondary); margin-bottom: var(--space-16); }

/* ---------- Timeline (vertical) ----------
   Each step carries an icon in a circle sitting directly on the rail,
   echoing the .journey step-dot language so the two components read as
   one visual system rather than two unrelated list styles. */
.timeline { position: relative; margin-top: var(--space-48); padding-left: var(--space-64); border-left: none; }
.timeline::before { content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(180deg, var(--color-brand-blue), var(--color-brand-purple)); opacity: 0.3; }
.timeline-item { position: relative; padding-bottom: var(--space-48); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .timeline-icon {
  position: absolute; left: -64px; top: 0;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-canvas);
  border: 1.5px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
}
.timeline-item .timeline-icon svg { width: 19px; height: 19px; }
.timeline-item h4 { margin-bottom: var(--space-8); padding-top: var(--space-12); }
.timeline-item p { color: var(--color-text-secondary); max-width: 480px; }
@media (max-width: 500px) {
  .timeline { padding-left: 56px; }
  .timeline::before { left: 19px; }
  .timeline-item .timeline-icon { left: -56px; width: 40px; height: 40px; }
  .timeline-item .timeline-icon svg { width: 16px; height: 16px; }
}

/* ---------- Value/quote band (no fabricated attribution) ---------- */
.value-quote { max-width: 720px; margin: var(--space-48) auto 0; text-align: center; }
.value-quote .quote-mark { color: var(--color-primary); width: 32px; height: 32px; margin: 0 auto var(--space-16); }

/* ---------- Scroll reveal ----------
   Content is visible by default so it never depends on JavaScript running;
   only when the "js" class (set synchronously in <head>) is present do
   [data-reveal] elements start hidden and animate in via main.js.
   Variants (default = fade-up): data-reveal="fade" | "left" | "right" | "scale"
   Only transform + opacity are animated, so this stays hardware-accelerated. */
html.js [data-reveal] {
  opacity: 0;
  transition: opacity 700ms var(--ease-standard), transform 700ms var(--ease-standard);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: transform, opacity;
}
html.js [data-reveal]:not([data-reveal="fade"]):not([data-reveal="left"]):not([data-reveal="right"]):not([data-reveal="scale"]) { transform: translateY(20px); }
html.js [data-reveal="fade"] { transform: none; }
html.js [data-reveal="left"] { transform: translateX(-24px); }
html.js [data-reveal="right"] { transform: translateX(24px); }
html.js [data-reveal="scale"] { transform: scale(0.96); }
html.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Stagger: direct card/tile children of a revealed container animate in sequence. */
html.js .grid [data-reveal-child], html.js [data-stagger] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 550ms var(--ease-standard), transform 550ms var(--ease-standard);
  transition-delay: var(--stagger-delay, 0ms);
}
html.js .is-visible[data-stagger] > *,
html.js [data-stagger].is-visible > * { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-stagger] > * { opacity: 1 !important; transform: none !important; transition-delay: 0ms !important; }
}

/* ---------- Page transition overlay ---------- */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-canvas);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms var(--ease-standard);
}
.page-transition.is-active { opacity: 1; pointer-events: all; }
body.is-loading { animation: page-fade-in 320ms var(--ease-standard); }
@keyframes page-fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
  body.is-loading { animation: none; }
}

/* ---------- Service hero visual compositions ----------
   Five bespoke, animated abstract scenes (one per service) that replace a
   plain browser-mockup card. Everything animates transform/opacity only. */
.hero-visual { position: relative; height: 380px; }
@media (max-width: 900px) { .hero-visual { height: 320px; } }
@media (max-width: 520px) { .hero-visual { height: 280px; } }

.hv-chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-16);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}
.hv-chip .hv-chip-icon {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: var(--color-canvas-soft);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.hv-chip .hv-chip-icon svg { width: 15px; height: 15px; }

@keyframes hv-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hv-floating { animation: hv-float 5s ease-in-out infinite; will-change: transform; }

.hv-ring {
  position: absolute;
  border: 1.5px dashed var(--color-border);
  border-radius: 50%;
  animation: hv-spin 40s linear infinite;
}
@keyframes hv-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------- Service scenes (card-based) ----------
   Each service hero is one product-style card on a faint dashed ring, with
   two floating result chips. Shared parts: .hv-scene, .hv-card, .hv-kpi,
   .hv-steps. Every loop runs on the same 6s cycle so the pages feel related. */
.hv-scene { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.hv-scene .hv-chip { z-index: 2; }
.hv-scene-ring { top: 50%; left: 50%; width: 340px; height: 340px; margin: -170px 0 0 -170px; }
.hv-card {
  position: relative;
  z-index: 1;
  width: 300px;
  padding: var(--space-16);
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.hv-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); margin-bottom: var(--space-12); }
.hv-card-title { font-size: 13px; font-weight: 600; color: var(--color-ink); }
.hv-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-primary);
}
.hv-live i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.15);
  animation: hv-blink 2s ease-in-out infinite;
}
@keyframes hv-blink { 50% { opacity: 0.35; } }
.hv-kpi { display: flex; align-items: flex-end; justify-content: space-between; }
.hv-kpi-label { display: block; font-size: 12px; color: var(--color-text-secondary); margin-bottom: 2px; }
.hv-kpi strong { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-ink); }
.hv-delta {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: rgba(83, 58, 253, 0.1);
  color: var(--color-primary);
  font-size: 12px; font-weight: 600;
}
.hv-delta svg { width: 12px; height: 12px; }
.hv-card-foot { padding-top: var(--space-12); border-top: 1px solid var(--color-border); }

/* Step tracker (pipeline stages that tick on in sequence) */
.hv-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.hv-step { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); }
.hv-step i {
  position: relative;
  width: 16px; height: 16px; flex: 0 0 auto;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background: var(--color-canvas);
  animation: hv-step-on 6s ease-in-out infinite;
}
.hv-step i::after {
  content: "";
  position: absolute;
  left: 4px; top: 1.5px;
  width: 3.5px; height: 7px;
  border: solid var(--color-on-primary);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg);
}
.hv-step:nth-child(2) i { animation-delay: 0.8s; }
.hv-step:nth-child(3) i { animation-delay: 1.6s; }
@keyframes hv-step-on {
  0%, 12% { background: var(--color-canvas); border-color: var(--color-border); box-shadow: none; }
  22%, 85% { background: var(--color-primary); border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.15); }
  95%, 100% { background: var(--color-canvas); border-color: var(--color-border); box-shadow: none; }
}

@keyframes hv-grow-x {
  0%, 10% { transform: scaleX(0); }
  40%, 88% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}
@keyframes hv-grow-y {
  0%, 10% { transform: scaleY(0); }
  40%, 88% { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
.hv-grid-line { stroke: var(--color-border); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }

/* Digital Marketing — campaign dashboard: growth chart + channel bars */
.hv-mk-chart { display: block; width: 100%; height: 72px; margin: var(--space-12) 0; overflow: visible; }
.hv-mk-line {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  animation: hv-draw 6s ease-in-out infinite;
}
.hv-mk-area { animation: hv-fade 6s ease-in-out infinite; }
@keyframes hv-draw {
  0% { stroke-dashoffset: 100; }
  35%, 85% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes hv-fade {
  0%, 15% { opacity: 0; }
  40%, 85% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
.hv-mk-channels { display: grid; gap: var(--space-8); }
.hv-mk-channels li { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: var(--space-8); font-size: 12px; color: var(--color-text-secondary); }
.hv-mk-channels b {
  position: relative;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-canvas-soft);
  overflow: hidden;
}
.hv-mk-channels b::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--w);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--color-primary), var(--color-brand-purple));
  transform-origin: left center;
  animation: hv-grow-x 6s ease-in-out infinite;
}
.hv-mk-channels li:nth-child(2) b::after { animation-delay: 0.2s; }
.hv-mk-channels li:nth-child(3) b::after { animation-delay: 0.4s; }

/* AI & Analytics — demand forecast: actual bars, then a predicted line + band */
.hv-in-chart { display: block; width: 100%; height: 96px; margin: var(--space-12) 0; overflow: visible; }
.hv-in-bar {
  fill: var(--color-primary);
  opacity: 0.2;
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: hv-grow-y 6s ease-in-out infinite;
}
.hv-in-bar.is-now { opacity: 1; }
.hv-in-bar:nth-of-type(2) { animation-delay: 0.1s; }
.hv-in-bar:nth-of-type(3) { animation-delay: 0.2s; }
.hv-in-bar:nth-of-type(4) { animation-delay: 0.3s; }
.hv-in-bar:nth-of-type(5) { animation-delay: 0.4s; }
.hv-in-bar:nth-of-type(6) { animation-delay: 0.5s; }
.hv-in-band, .hv-in-forecast, .hv-in-dot { opacity: 0; animation: hv-in-reveal 6s ease-in-out infinite; }
.hv-in-band { --to: 0.22; fill: var(--color-brand-purple); }
.hv-in-forecast {
  --to: 1;
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 4 5;
}
.hv-in-dot { --to: 1; fill: var(--color-primary); }
@keyframes hv-in-reveal {
  0%, 38% { opacity: 0; }
  50%, 88% { opacity: var(--to); }
  100% { opacity: 0; }
}
.hv-in-label { font-size: 9px; font-weight: 600; letter-spacing: 0.06em; fill: var(--color-text-secondary); }

/* Software Development — code editor that types itself + CI steps */
.hv-code { padding: 0; overflow: hidden; }
.hv-code-bar {
  display: flex; align-items: center; gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-canvas-soft);
}
.hv-code-bar > span:not([class]) { width: 7px; height: 7px; border-radius: 50%; background: var(--color-border); }
.hv-code-file { margin-left: var(--space-8); font-size: 12px; font-weight: 500; color: var(--color-ink); }
.hv-code-branch {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(83, 58, 253, 0.1);
  color: var(--color-primary);
  font-size: 11px; font-weight: 600;
}
.hv-code-body { padding: var(--space-16); display: grid; gap: 10px; }
.hv-code-line { display: flex; align-items: center; gap: 6px; height: 12px; }
.hv-code-line b { width: 14px; margin-right: 6px; font-size: 10px; font-weight: 500; text-align: right; color: var(--color-text-secondary); opacity: 0.6; }
.hv-code-line .in { width: 14px; flex: 0 0 auto; }
.hv-code-line em {
  display: block;
  width: var(--w);
  height: 7px;
  border-radius: var(--radius-pill);
  background: rgba(13, 37, 61, 0.12);
  clip-path: inset(0 100% 0 0);
  animation: hv-type 6s steps(6, end) infinite;
}
.hv-code-line em.k { background: var(--color-brand-purple); }
.hv-code-line em.f { background: var(--color-primary); }
.hv-code-line em.s { background: rgba(47, 67, 252, 0.45); }
.hv-code-line:nth-child(2) em { animation-delay: 0.3s; }
.hv-code-line:nth-child(3) em { animation-delay: 0.6s; }
.hv-code-line:nth-child(4) em { animation-delay: 0.9s; }
.hv-code-line:nth-child(5) em { animation-delay: 1.2s; }
.hv-code-line:nth-child(6) em { animation-delay: 1.5s; }
@keyframes hv-type {
  0%, 5% { clip-path: inset(0 100% 0 0); }
  15%, 88% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 100% 0 0); }
}
.hv-caret { width: 2px; height: 13px; background: var(--color-primary); animation: hv-caret 1s steps(1) infinite; }
@keyframes hv-caret { 50% { opacity: 0; } }
.hv-code .hv-card-foot { padding: var(--space-12) var(--space-16) var(--space-16); }

/* SaaS Products — app window: sidebar, MRR, growth bars, plan mix */
.hv-app { display: grid; grid-template-columns: 44px 1fr; padding: 0; overflow: hidden; }
.hv-app-side {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-12);
  padding: var(--space-16) 0;
  background: var(--color-canvas-soft);
  border-right: 1px solid var(--color-border);
}
.hv-app-side .logo { width: 20px; height: 20px; margin-bottom: var(--space-4); border-radius: 6px; background: linear-gradient(135deg, var(--color-primary), var(--color-brand-purple)); }
.hv-app-side i { width: 18px; height: 18px; border-radius: 5px; background: var(--color-border); }
.hv-app-side i.on { background: rgba(83, 58, 253, 0.18); box-shadow: inset 0 0 0 1.5px var(--color-primary); }
.hv-app-main { min-width: 0; padding: var(--space-16); }
.hv-app-bars { display: flex; align-items: flex-end; gap: 6px; height: 72px; margin: var(--space-12) 0; }
.hv-app-bars span {
  flex: 1;
  height: var(--h);
  border-radius: 4px 4px 2px 2px;
  background: rgba(83, 58, 253, 0.2);
  transform-origin: center bottom;
  animation: hv-grow-y 6s ease-in-out infinite;
}
.hv-app-bars span:last-child { background: linear-gradient(180deg, var(--color-brand-purple), var(--color-primary)); }
.hv-app-bars span:nth-child(2) { animation-delay: 0.08s; }
.hv-app-bars span:nth-child(3) { animation-delay: 0.16s; }
.hv-app-bars span:nth-child(4) { animation-delay: 0.24s; }
.hv-app-bars span:nth-child(5) { animation-delay: 0.32s; }
.hv-app-bars span:nth-child(6) { animation-delay: 0.4s; }
.hv-app-bars span:nth-child(7) { animation-delay: 0.48s; }
.hv-app-bars span:nth-child(8) { animation-delay: 0.56s; }
.hv-plan { display: flex; gap: 2px; height: 8px; border-radius: var(--radius-pill); overflow: hidden; }
.hv-plan span { width: var(--w); background: var(--c); transform-origin: left center; animation: hv-grow-x 6s ease-in-out infinite; }
.hv-legend { display: flex; gap: var(--space-12); margin-top: var(--space-8); font-size: 11px; color: var(--color-text-secondary); }
.hv-legend span { display: inline-flex; align-items: center; gap: 5px; }
.hv-legend span::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--c); }

/* Creative & Design — design canvas: toolbar, selected logo, type, palette */
.hv-tools { display: flex; gap: 4px; }
.hv-tools i {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  color: var(--color-text-secondary);
}
.hv-tools i.on { background: var(--color-primary); color: var(--color-on-primary); }
.hv-tools svg { width: 13px; height: 13px; }
.hv-art {
  position: relative;
  height: 150px;
  margin-bottom: var(--space-12);
  border-radius: var(--radius-md);
  background-color: var(--color-canvas-soft);
  background-image: radial-gradient(var(--color-border) 1px, transparent 1px);
  background-size: 12px 12px;
  overflow: hidden;
}
.hv-logo { position: absolute; top: 30px; left: 30px; width: 84px; height: 84px; }
.hv-logo .c { position: absolute; top: 0; left: 0; width: 58px; height: 58px; border-radius: 50%; background: var(--color-primary); }
.hv-logo .s {
  position: absolute; right: 0; bottom: 0;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--color-brand-purple);
  mix-blend-mode: multiply;
  animation: hv-logo-turn 6s ease-in-out infinite;
}
@keyframes hv-logo-turn {
  0%, 20% { transform: rotate(0deg); }
  45%, 80% { transform: rotate(45deg); }
  100% { transform: rotate(0deg); }
}
.hv-select { position: absolute; inset: -8px; border: 1.5px dashed var(--color-primary); border-radius: 4px; }
.hv-select i { position: absolute; width: 7px; height: 7px; background: var(--color-canvas); border: 1.5px solid var(--color-primary); border-radius: 2px; }
.hv-select i:nth-child(1) { top: -4px; left: -4px; }
.hv-select i:nth-child(2) { top: -4px; right: -4px; }
.hv-select i:nth-child(3) { bottom: -4px; left: -4px; }
.hv-select i:nth-child(4) { bottom: -4px; right: -4px; }
.hv-type { position: absolute; top: 28px; right: 22px; width: 96px; }
.hv-type strong { display: block; font-size: 44px; line-height: 48px; font-weight: 600; letter-spacing: -0.03em; color: var(--color-ink); }
.hv-type span { display: block; height: 6px; margin-top: 8px; border-radius: var(--radius-pill); background: rgba(13, 37, 61, 0.12); }
.hv-type span + span { width: 70%; }
.hv-pointer {
  position: absolute;
  z-index: 1;
  display: flex; align-items: flex-start;
  animation: hv-pointer-path 6s ease-in-out infinite;
}
.hv-pointer svg { width: 16px; height: 16px; color: var(--color-ink); }
.hv-pointer span {
  margin: 12px 0 0 -2px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: var(--color-on-ink);
  font-size: 10px; font-weight: 600;
}
@keyframes hv-pointer-path {
  0%, 100% { top: 112px; left: 128px; }
  30% { top: 96px; left: 104px; }
  55% { top: 104px; left: 104px; }
  80% { top: 116px; left: 180px; }
}
.hv-swatches { display: flex; align-items: center; gap: var(--space-8); }
.hv-swatches span {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(13, 37, 61, 0.08);
  animation: hv-pop 6s ease-in-out infinite;
}
.hv-swatches span:nth-child(2) { animation-delay: 0.1s; }
.hv-swatches span:nth-child(3) { animation-delay: 0.2s; }
.hv-swatches span:nth-child(4) { animation-delay: 0.3s; }
.hv-swatches span:nth-child(5) { animation-delay: 0.4s; }
.hv-swatches small { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--color-text-secondary); }
@keyframes hv-pop {
  0%, 8% { transform: scale(0.6); opacity: 0; }
  20%, 88% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.6); opacity: 0; }
}

/* No room beside the card on phones, so the chips would cover its content */
@media (max-width: 640px) {
  .hv-scene .hv-chip { display: none; }
}
@media (max-width: 520px) {
  .hv-card { width: 270px; }
  .hv-scene-ring { width: 290px; height: 290px; margin: -145px 0 0 -145px; }
  .hv-type { width: 76px; right: 14px; }
  .hv-type strong { font-size: 36px; line-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .hv-live i, .hv-step i, .hv-mk-line, .hv-mk-area, .hv-mk-channels b::after,
  .hv-in-bar, .hv-in-band, .hv-in-forecast, .hv-in-dot, .hv-code-line em, .hv-caret,
  .hv-app-bars span, .hv-plan span, .hv-logo .s, .hv-pointer, .hv-swatches span {
    animation: none !important;
  }
  .hv-in-band { opacity: 0.22; }
  .hv-in-forecast, .hv-in-dot { opacity: 1; }
  .hv-code-line em { clip-path: none; }
  .hv-step i { background: var(--color-primary); border-color: var(--color-primary); }
  .hv-pointer { top: 112px; left: 128px; }
  .hv-floating, .hv-ring {
    animation: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 900px) {
  .hero-visual { transform: scale(0.82); transform-origin: top center; }
}

/* ---------- Page hero (non-home pages) ---------- */
.page-hero { position: relative; padding-block: var(--space-96) var(--space-64); overflow: hidden; }
.page-hero-inner { position: relative; z-index: 1; max-width: 760px; }
@media (max-width: 900px) { .page-hero { padding-block: var(--space-64) var(--space-48); } }

/* Utility */
.mt-8 { margin-top: var(--space-8); }
.mt-16 { margin-top: var(--space-16); }
.mt-24 { margin-top: var(--space-24); }
.mt-32 { margin-top: var(--space-32); }
.mt-48 { margin-top: var(--space-48); }
.mt-64 { margin-top: var(--space-64); }
.max-w-content { max-width: 640px; }
.text-center { text-align: center; }