/* ==========================================================================
   horatos.ai · Global Styles
   The cosmic language made visible.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --black: #0A0A0A;
  --black-deep: #050505;
  --white: #FFFFFF;
  --off-white: #F7F7F7;
  --teal: #00B2A9;
  --muted: #6B7280;
  --border: #E5E7EB;
  --border-strong: rgba(0, 0, 0, 0.08);

  --bg: var(--white);
  --bg-alt: var(--off-white);
  --fg: var(--black);
  --fg-muted: var(--muted);
  --card-bg: var(--white);
  --card-border: var(--border);
  --header-bg: rgba(255, 255, 255, 0.8);
  --header-border: rgba(0, 0, 0, 0.05);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --container: 1200px;
  --container-narrow: 760px;

  --header-h: 64px;
}

[data-theme='dark'] {
  --bg: #0A0A0A;
  --bg-alt: #111111;
  --fg: #FFFFFF;
  --fg-muted: #8B8F98;
  --card-bg: #111111;
  --card-border: #1F1F1F;
  --border: #1F1F1F;
  --border-strong: rgba(255, 255, 255, 0.1);
  --header-bg: rgba(10, 10, 10, 0.75);
  --header-border: rgba(255, 255, 255, 0.06);
}

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

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg);
  background: var(--bg);
  transition: background 300ms var(--ease), color 300ms var(--ease);
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, details:focus-visible > summary {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -10000px;
  top: 8px;
  z-index: 1000;
  background: var(--black);
  color: #fff;
  padding: 8px 16px;
  border-radius: 8px;
}
.skip-link:focus { left: 8px; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); color: var(--fg); }

h1 {
  font-size: clamp(44px, 6.4vw, 84px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  text-wrap: balance;
}

h2 {
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 600;
  letter-spacing: -0.028em;
  line-height: 1.1;
  text-wrap: balance;
}

h3 {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

p { margin: 0; }

.body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 680px;
  margin-bottom: 24px;
}

.caption {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
}
.caption::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--teal);
  display: inline-block;
  opacity: 0.6;
}
.caption--teal { color: var(--teal); }

.subline {
  font-size: 17px;
  color: var(--fg-muted);
  max-width: 560px;
  margin-bottom: 0;
  line-height: 1.6;
}

.teal { color: var(--teal); }
.greek {
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 300;
}

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.container--narrow { max-width: var(--container-narrow); }
.center { text-align: center; }

.section {
  padding: 120px 0;
  position: relative;
  z-index: 1;
  background: var(--bg);
  transition: background 300ms var(--ease);
}
.section.alt-bg { background: var(--bg-alt); }
.section.dark {
  background: var(--black);
  color: #fff;
}
.section.dark h2, .section.dark h3 { color: #fff; }
.section.dark .caption { color: rgba(255,255,255,0.55); }

@media (max-width: 1023px) {
  .section { padding: 80px 0; }
}
@media (max-width: 767px) {
  .section { padding: 60px 0; }
  .container { padding: 0 24px; }
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}
@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; gap: 48px; }
}

.section__footer-link {
  margin-top: 64px;
  text-align: center;
}

/* ---------- Cosmos canvas (background) ---------- */
.cosmos {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-h);
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--header-border);
  transition: box-shadow 300ms var(--ease), background 300ms var(--ease), border-color 300ms var(--ease);
}
.site-header--scrolled { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }

.site-header__inner {
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  padding: 0 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--fg);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.site-header__wordmark { display: inline-block; }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 8px;
}

.nav-link {
  position: relative;
  font-size: 14px;
  font-weight: 450;
  color: var(--fg-muted);
  padding: 6px 0;
  background: none;
  border: none;
  transition: color 200ms var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-link:hover { color: var(--fg); }
.nav-link--active { color: var(--fg); }
.nav-link--active::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
}
.nav-link__chevron { font-size: 10px; opacity: 0.7; }

.nav-dropdown { position: relative; }
.nav-dropdown__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 520px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.08);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 250ms var(--ease), transform 250ms var(--ease), visibility 250ms;
  pointer-events: none;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.nav-dropdown__caption {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.nav-dropdown__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}
.nav-dropdown__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 2px 10px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  transition: background 200ms var(--ease);
  color: var(--fg);
}
.nav-dropdown__item:hover { background: var(--bg-alt); }
.nav-dropdown__dot {
  grid-row: span 2;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal);
  align-self: center;
}
.nav-dropdown__name { font-size: 14px; font-weight: 500; }
.nav-dropdown__desc { font-size: 12px; color: var(--fg-muted); line-height: 1.4; }

.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-toggle {
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  transition: all 200ms var(--ease);
}
.theme-toggle:hover { border-color: var(--fg); }
.theme-toggle__icon { transition: opacity 200ms var(--ease), transform 300ms var(--ease); }
.theme-toggle__icon--sun { display: none; }
[data-theme='dark'] .theme-toggle__icon--sun { display: block; }
[data-theme='dark'] .theme-toggle__icon--moon { display: none; }

.mobile-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
}
.mobile-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--fg);
  transition: transform 300ms var(--ease);
}

@media (max-width: 1024px) {
  .site-header__nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .site-header__actions .cta--small { display: none; }
}

/* Mobile overlay */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: var(--black);
  color: #fff;
  z-index: 200;
  transform: translateY(-100%);
  transition: transform 400ms var(--ease);
  display: flex;
  flex-direction: column;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
}
.mobile-overlay--open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.mobile-overlay__close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 32px;
  line-height: 1;
}
.mobile-overlay__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.mobile-overlay__nav a {
  font-size: 24px;
  font-weight: 300;
  line-height: 48px;
  color: #fff;
  letter-spacing: -0.01em;
}
.mobile-overlay__cta { padding-bottom: 32px; text-align: center; }

/* ---------- Buttons · Apple-polish ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background 400ms var(--ease), color 400ms var(--ease), border-color 400ms var(--ease), transform 400ms var(--ease), box-shadow 400ms var(--ease);
  border: 1px solid transparent;
  line-height: 1;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* subtle inner highlight */
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms var(--ease);
  z-index: -1;
}
.cta:hover::before { opacity: 1; }
.cta--primary {
  background: var(--black);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(0, 178, 169, 0);
}
.cta--primary:hover {
  background: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 178, 169, 0.32), 0 0 0 3px rgba(0, 178, 169, 0.12);
}
.cta--primary:active { transform: translateY(0); }
[data-theme='dark'] .cta--primary { background: #fff; color: var(--black); }
[data-theme='dark'] .cta--primary:hover { background: var(--teal); color: #fff; }

.cta--secondary {
  background: transparent;
  border-color: var(--border);
  color: var(--fg);
}
.cta--secondary:hover {
  border-color: var(--fg);
  transform: translateY(-1px);
}

.cta--outline-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
.cta--outline-light:hover {
  border-color: var(--teal);
  color: var(--teal);
  transform: translateY(-2px);
}

.cta--small { padding: 10px 20px; font-size: 13px; }
.cta--full { width: 100%; justify-content: center; }

.cta-arrow { transition: transform 400ms var(--ease); display: inline-block; }
.cta:hover .cta-arrow { transform: translateX(4px); }

.text-link {
  color: var(--fg);
  font-weight: 500;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 200ms var(--ease);
}
.text-link:hover { color: var(--teal); }
.text-link .arrow, .service-card__link .arrow, .service-row__arrow, .arrow {
  transition: transform 400ms var(--ease);
  display: inline-block;
}
.text-link:hover .arrow, a:hover .arrow { transform: translateX(4px); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--fg-muted);
  margin-bottom: 16px;
  transition: color 200ms var(--ease);
}
.back-link:hover { color: var(--fg); }
.back-link .arrow { transition: transform 400ms var(--ease); }
.back-link:hover .arrow { transform: translateX(-4px); }
.back-link--light { color: rgba(255, 255, 255, 0.6); }
.back-link--light:hover { color: #fff; }

/* ---------- Four-dot divider ---------- */
.four-dot-divider {
  display: flex;
  justify-content: center;
  padding: 40px 0 20px;
  color: var(--fg);
  opacity: 0.2;
  position: relative;
  z-index: 1;
}

/* ---------- Reveal animation ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- HERO (home) · fashion-editorial opening ---------- */
.hero--home {
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 96px 32px 120px;
  text-align: center;
  overflow: hidden;
}
/* subtle radial glow behind the headline · quiet, precise, cosmic */
.hero--home::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 900px;
  height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(0, 178, 169, 0.06), transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: heroGlowPulse 8s var(--ease) infinite;
}
@keyframes heroGlowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
}
[data-theme='dark'] .hero--home::before {
  background: radial-gradient(closest-side, rgba(0, 178, 169, 0.14), transparent 70%);
}

.hero__inner {
  max-width: 960px;
  width: 100%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__logo {
  color: var(--fg);
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

/* Eyebrow · editorial label above the headline */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--card-bg);
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease) 100ms, transform 500ms var(--ease) 100ms;
}
.hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.18);
  animation: eyebrowPulse 2.4s var(--ease) infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(0, 178, 169, 0); }
}

/* THE HEADLINE · "Be Seen." as a gravitational statement */
.hero__headline {
  font-size: clamp(72px, 14vw, 184px);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: 0.92;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.22em;
}
.hero__headline-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px) scale(1.02);
  filter: blur(10px);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out),
    filter 900ms var(--ease-out);
  position: relative;
}
.hero__headline-word[data-word="1"] { transition-delay: 250ms; }
.hero__headline-word[data-word="2"] { transition-delay: 450ms; }
.hero--loaded .hero__headline-word {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.hero__headline-dot {
  display: inline-block;
  color: var(--teal);
  transform: translateY(-0.04em);
  transition: transform 400ms var(--ease);
}
.hero--loaded .hero__headline-dot {
  animation: headlineDot 1200ms var(--ease) 1400ms forwards;
}
@keyframes headlineDot {
  0%   { transform: translateY(-0.04em) scale(1); }
  30%  { transform: translateY(-0.04em) scale(1.35); }
  70%  { transform: translateY(-0.04em) scale(1.35); }
  100% { transform: translateY(-0.04em) scale(1); }
}
.hero__headline-space { display: inline-block; width: 0; }

/* Teal rule between headline and subline */
.hero__rule {
  width: 56px;
  height: 2px;
  background: var(--teal);
  margin: 40px auto 32px;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: opacity 600ms var(--ease) 1000ms, transform 700ms var(--ease) 1000ms;
}
.hero--loaded .hero__rule {
  opacity: 1;
  transform: scaleX(1);
}

.hero__subline {
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
  color: var(--fg-muted);
  max-width: 640px;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 700ms var(--ease) 1100ms, transform 700ms var(--ease) 1100ms;
}
.hero__subline em {
  font-style: normal;
  color: var(--fg);
  font-weight: 500;
}

.hero__ctas {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease) 1250ms, transform 600ms var(--ease) 1250ms;
}

/* Hero meta row · Greek etymology as a whisper */
.hero__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 48px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms var(--ease) 1450ms, transform 700ms var(--ease) 1450ms;
  flex-wrap: wrap;
  justify-content: center;
}
.hero__meta em { font-style: italic; color: var(--fg); font-weight: 500; }
.hero__meta-item { display: inline-flex; align-items: center; gap: 8px; }
.hero__meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: eyebrowPulse 2.4s var(--ease) infinite;
}
.hero__meta-sep { opacity: 0.4; }

.hero--loaded .hero__eyebrow,
.hero--loaded .hero__subline,
.hero--loaded .hero__ctas,
.hero--loaded .hero__meta {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 767px) {
  .hero--home { padding: 72px 20px 96px; }
  .hero__headline { font-size: clamp(56px, 16vw, 84px); letter-spacing: -0.04em; }
  .hero__eyebrow { font-size: 10px; padding: 5px 12px 5px 8px; }
  .hero__meta { font-size: 11px; gap: 8px; margin-top: 36px; }
  .hero__meta-sep { display: none; }
}

.hero__scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 600ms var(--ease) 1700ms;
}
.hero--loaded .hero__scroll-indicator { opacity: 0.55; }
.hero__scroll-indicator.is-hidden { opacity: 0 !important; }
.hero__scroll-indicator::before {
  content: '';
  width: 16px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 100px;
  display: block;
  position: relative;
}
.hero__scroll-indicator .scroll-dot {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 4px;
  background: var(--fg);
  border-radius: 1px;
  animation: scrollDot 1.8s var(--ease) infinite;
}
.hero__scroll-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
@keyframes scrollDot {
  0% { transform: translate(-50%, 0); opacity: 1; }
  60% { transform: translate(-50%, 10px); opacity: 0; }
  100% { transform: translate(-50%, 0); opacity: 0; }
}

/* ---------- Logo animation ---------- */
.logo-mark--animated .dot {
  opacity: 0;
  transform: scale(0);
  transform-origin: center;
  transform-box: fill-box;
}
.hero--loaded .logo-mark--animated .dot-1 { animation: logoDot 400ms var(--ease) 200ms forwards; }
.hero--loaded .logo-mark--animated .dot-2 { animation: logoDot 400ms var(--ease) 550ms forwards; }
.hero--loaded .logo-mark--animated .dot-3 { animation: logoDot 400ms var(--ease) 900ms forwards; }
.hero--loaded .logo-mark--animated .dot-4 { animation: logoDot 400ms var(--ease) 1250ms forwards; }
.hero--loaded .logo-mark--animated .logo-constellation {
  animation: logoConstellation 1200ms var(--ease) 1650ms forwards;
}
@keyframes logoDot {
  to { opacity: 1; transform: scale(1); }
}
@keyframes logoConstellation {
  0% { opacity: 0; }
  20% { opacity: 0.35; }
  60% { opacity: 0.35; }
  100% { opacity: 0; }
}

/* ---------- Stats ---------- */
.stats {
  padding: 88px 0;
  background: var(--bg-alt);
  position: relative;
  z-index: 1;
  transition: background 300ms var(--ease);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
@media (max-width: 767px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  text-align: left;
  padding: 8px 32px;
  position: relative;
}
.stat + .stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--border);
}
@media (max-width: 767px) {
  .stat { padding: 24px 20px; }
  .stat + .stat::before { display: none; }
  .stat:nth-child(3)::before,
  .stat:nth-child(4)::before {
    content: '';
    position: absolute;
    left: 20%;
    right: 20%;
    top: 0;
    height: 1px;
    background: var(--border);
    width: auto;
  }
}
.stat__index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--teal);
  margin-bottom: 14px;
  font-weight: 500;
}
.stat__number {
  font-family: var(--font-mono);
  font-size: clamp(44px, 5.2vw, 64px);
  font-weight: 300;
  color: var(--fg);
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
  margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.stat__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin-bottom: 6px;
  line-height: 1.3;
}
.stat__detail {
  font-size: 12px;
  color: var(--fg-muted);
  line-height: 1.5;
  letter-spacing: 0;
}

/* ---------- MANIFESTO · What Horatos Means ---------- */
.section--manifesto {
  padding: 140px 0 120px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}
.section--manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(0, 178, 169, 0.04), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(0, 178, 169, 0.04), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
[data-theme='dark'] .section--manifesto::before {
  background:
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(0, 178, 169, 0.08), transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 70%, rgba(0, 178, 169, 0.08), transparent 60%);
}
.section--manifesto > .container { position: relative; z-index: 1; }

.manifesto__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 64px;
}
.manifesto__eyebrow-line {
  flex: 0 0 64px;
  height: 1px;
  background: var(--border);
}

.manifesto__grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 96px;
  align-items: center;
  margin-bottom: 120px;
}
@media (max-width: 900px) {
  .manifesto__grid { grid-template-columns: 1fr; gap: 64px; }
}

/* Left column · word anatomy */
.manifesto__word { position: relative; }
.manifesto__greek {
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 40px;
}
.manifesto__greek-letters {
  display: block;
  font-family: 'Inter', serif;
  font-weight: 300;
  font-size: clamp(64px, 7vw, 104px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
}
.manifesto__greek-translit {
  display: inline-block;
  margin-top: 20px;
  margin-right: 12px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--teal);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.manifesto__greek-pos {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
  font-style: italic;
}

.manifesto__definition {
  display: flex;
  gap: 20px;
  font-size: 18px;
  line-height: 1.65;
  color: var(--fg);
  padding: 14px 0;
}
.manifesto__definition + .manifesto__definition {
  border-top: 1px dashed var(--border);
}
.manifesto__def-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--teal);
  font-weight: 500;
  padding-top: 3px;
}
.manifesto__def-text em {
  font-style: italic;
  color: var(--fg-muted);
  font-weight: 400;
}

/* Right column · diagram */
.manifesto__logo-diagram {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.manifesto__diagram-frame {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 0;
  position: relative;
  background:
    linear-gradient(var(--border), var(--border)) center / 1px 100% no-repeat,
    linear-gradient(var(--border), var(--border)) center / 100% 1px no-repeat,
    var(--card-bg);
  transition: background 300ms var(--ease);
}
/* corner brackets */
.manifesto__diagram-frame::before,
.manifesto__diagram-frame::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--teal);
  border-style: solid;
  border-width: 0;
}
.manifesto__diagram-frame::before {
  top: -1px; left: -1px;
  border-top-width: 2px;
  border-left-width: 2px;
}
.manifesto__diagram-frame::after {
  bottom: -1px; right: -1px;
  border-bottom-width: 2px;
  border-right-width: 2px;
}
.manifesto__svg {
  width: 100%;
  height: 100%;
  display: block;
  color: var(--fg);
}
.manifesto__dot {
  transform-origin: center;
  transform-box: fill-box;
  animation: manifestoDot 4s var(--ease) infinite;
}
.manifesto__dot--sm { animation-delay: 1.5s; }
.manifesto__dot--lg:nth-of-type(4) { animation-delay: 2s; }
@keyframes manifestoDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.88; }
}
.manifesto__lines line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: manifestoLine 3.2s var(--ease) 0.6s forwards;
}
.manifesto__lines line:nth-child(2) { animation-delay: 0.9s; }
.manifesto__lines line:nth-child(3) { animation-delay: 1.2s; }
.manifesto__lines line:nth-child(4) { animation-delay: 1.5s; }
.manifesto__lines line:nth-child(5) { animation-delay: 1.8s; }
@keyframes manifestoLine {
  to { stroke-dashoffset: 0; }
}
.manifesto__diagram-caption {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  text-align: center;
}

/* Three pillars */
.manifesto__pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 100px;
}
@media (max-width: 900px) {
  .manifesto__pillars { grid-template-columns: 1fr; }
}
.manifesto__pillar {
  padding: 48px 40px;
  background: var(--bg);
  position: relative;
  transition: background 400ms var(--ease), transform 400ms var(--ease);
}
.manifesto__pillar:hover {
  background: var(--bg-alt);
}
.manifesto__pillar-icon {
  color: var(--teal);
  margin-bottom: 24px;
  opacity: 0.9;
  transition: transform 500ms var(--ease-out);
}
.manifesto__pillar:hover .manifesto__pillar-icon {
  transform: rotate(6deg) scale(1.06);
}
.manifesto__pillar-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.12em;
  font-weight: 500;
  margin-bottom: 8px;
}
.manifesto__pillar-title {
  font-size: clamp(24px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--fg);
  margin: 0 0 16px;
}
.manifesto__pillar-body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-muted);
  margin: 0;
}

/* The promise */
.manifesto__promise {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
}
.manifesto__promise-rule {
  width: 1px;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--teal));
  margin: 0 auto 40px;
}
.manifesto__promise-text {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}
.manifesto__promise-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}
.manifesto__promise-body em {
  font-style: normal;
  color: var(--teal);
  font-weight: 500;
  position: relative;
}
.manifesto__promise-body em::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: var(--teal);
  opacity: 0.4;
}
.manifesto__promise-sig {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 40px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.manifesto__promise-sig svg { color: var(--teal); }

/* ---------- Shift section ---------- */
.shift__visual {
  display: flex;
  justify-content: center;
}
.shift__visual canvas {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1 / 1;
  height: auto;
}

/* ---------- Service cards grid ---------- */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
@media (max-width: 900px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .service-grid { grid-template-columns: 1fr; gap: 16px; } }

.service-card {
  position: relative;
  display: block;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 36px 32px;
  transition: border-color 400ms var(--ease), transform 400ms var(--ease), box-shadow 400ms var(--ease);
  overflow: hidden;
  color: var(--fg);
  isolation: isolate;
}
.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width 500ms var(--ease), left 500ms var(--ease);
}
/* Ambient teal halo on hover */
.service-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 18px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0, 178, 169, 0) 0%, rgba(0, 178, 169, 0.4) 50%, rgba(0, 178, 169, 0) 100%);
  -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 500ms var(--ease);
  pointer-events: none;
  z-index: -1;
}
.service-card:hover {
  border-color: transparent;
  transform: translateY(-6px);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 178, 169, 0.2);
}
[data-theme='dark'] .service-card:hover {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 178, 169, 0.3);
}
.service-card:hover::before {
  width: 100%;
  left: 0;
}
.service-card:hover::after { opacity: 1; }
.service-card .service-icon {
  color: var(--fg);
  margin-bottom: 24px;
  transition: transform 500ms var(--ease-out), color 400ms var(--ease);
}
.service-card:hover .service-icon {
  color: var(--teal);
  transform: rotate(-4deg) scale(1.05);
}
.service-card h3 {
  margin-bottom: 12px;
  transition: color 300ms var(--ease);
}
.service-card:hover h3 { color: var(--teal); }
.service-card p {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}
.service-card__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 200ms var(--ease);
}
.service-card:hover .service-card__link { color: var(--teal); }
.service-card--static:hover { transform: none; }

/* ---------- Quote section · cinematic dark moment (base) ---------- */
/* NOTE: refined styles live at line ~2880 (v3) and ~3890 (v4).
   The legacy decorative pseudo-elements are disabled here to avoid
   the double-quote glyph bug previously visible on the homepage. */
.quote__inner { text-align: center; position: relative; z-index: 2; }
.section--quote {
  padding: 180px 0;
  position: relative;
  overflow: hidden;
}
.section--quote::before,
.section--quote::after { content: none !important; }
.section--quote blockquote em,
.section--quote blockquote .q-accent {
  font-style: normal;
  color: var(--teal);
}
.quote__mark {
  display: flex;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- Industries ---------- */
.industry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px;
  margin-top: 56px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.industry-card {
  background: var(--bg);
  padding: 36px 32px;
  transition: background 400ms var(--ease), transform 400ms var(--ease);
  position: relative;
}
.industry-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width 400ms var(--ease);
}
.industry-card:hover {
  background: var(--bg-alt);
}
.industry-card:hover::before { width: 40%; }
.industry-card h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.012em;
}
.industry-card p {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.55;
}
.industry__footnote {
  margin: 64px auto 0;
  max-width: 520px;
  text-align: center;
  font-size: 17px;
  color: var(--fg-muted);
}

/* ---------- Team preview ---------- */
.team-preview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 48px;
  position: relative;
}
.team-preview::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 12.5%;
  right: 12.5%;
  height: 1px;
  border-top: 1px dashed var(--border);
  z-index: 0;
}
.team-preview__card {
  position: relative;
  z-index: 1;
  text-align: center;
  background: var(--bg-alt);
  padding-top: 0;
}
.team-preview__photo {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--fg-muted);
  transition: all 400ms var(--ease);
}
.team-preview__card:hover .team-preview__photo {
  filter: grayscale(0);
  border-color: var(--teal);
  color: var(--teal);
  transform: scale(1.03);
}
.team-preview__name { font-size: 16px; font-weight: 500; }
.team-preview__title { font-size: 13px; color: var(--fg-muted); margin-top: 2px; }

/* LinkedIn icon – Home page team preview */
.team-preview__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 10px;
  border-radius: 6px;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--border);
  transition: all 300ms var(--ease);
  text-decoration: none;
}
.team-preview__linkedin:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 178, 169, .3);
}
.team-preview__linkedin svg { display: block; flex-shrink: 0; }
@media (max-width: 900px) {
  .team-preview { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .team-preview::before { display: none; }
}

/* ---------- Partners strip ---------- */
.partners-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 24px 0;
  font-size: 18px;
  font-weight: 500;
  color: var(--fg);
}
.partners-strip__item { transition: color 200ms var(--ease); }
.partners-strip__item:hover { color: var(--teal); }
.partners-strip__dot { color: var(--teal); }

/* ---------- Final CTA · crescendo ---------- */
.section--final-cta {
  padding: 180px 0 160px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.final-cta__field {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.final-cta__dot {
  position: absolute;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.12;
  filter: blur(1px);
  animation: ctaDrift 14s var(--ease) infinite;
}
.final-cta__dot--1 { width: 180px; height: 180px; top: 12%; left: 8%; }
.final-cta__dot--2 { width: 120px; height: 120px; top: 70%; left: 15%; animation-delay: -3s; }
.final-cta__dot--3 { width: 220px; height: 220px; top: 20%; right: 6%; animation-delay: -6s; }
.final-cta__dot--4 { width: 90px; height: 90px; top: 75%; right: 18%; animation-delay: -9s; }
@keyframes ctaDrift {
  0%, 100% { transform: translate(0, 0); opacity: 0.1; }
  50% { transform: translate(20px, -30px); opacity: 0.18; }
}
.section--final-cta > .container { position: relative; z-index: 1; }

.final-cta__caption {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 32px;
}
.final-cta__caption-line {
  width: 40px;
  height: 1px;
  background: var(--teal);
}

.final-cta__headline {
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.02;
  text-align: center;
  margin: 0 auto 32px;
  max-width: 900px;
  text-wrap: balance;
}
.final-cta__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 44px;
}
.final-cta__whisper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 56px;
  font-size: 12px;
  color: var(--fg-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.final-cta__whisper-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: eyebrowPulse 2.4s var(--ease) infinite;
}

/* ---------- Page hero (internal pages) ---------- */
.page-hero {
  padding: 132px 0 88px;
  background: var(--bg);
  position: relative;
  z-index: 1;
  transition: background 300ms var(--ease);
}
.page-hero--dark { background: var(--black); color: #fff; }
.page-hero--dark h1 { color: #fff; }
.page-hero--dark .caption { color: rgba(255,255,255,0.55); }
.page-hero h1 {
  font-weight: 700;
  letter-spacing: -0.04em;
}
.page-hero__lede {
  font-size: clamp(18px, 1.4vw, 21px);
  color: var(--fg-muted);
  max-width: 680px;
  margin-top: 28px;
  line-height: 1.65;
}
.page-hero__lede--light { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 767px) { .page-hero { padding: 84px 0 48px; } }

/* ---------- Origin timeline ---------- */
.origin-timeline {
  position: relative;
  padding-left: 40px;
}
.origin-timeline::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.timeline-node {
  position: relative;
  padding-bottom: 40px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.timeline-node:last-child { padding-bottom: 0; }
.timeline-node.is-visible { opacity: 1; transform: translateY(0); }
.timeline-dot {
  position: absolute;
  left: -40px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--teal);
}
.timeline-node.is-visible .timeline-dot {
  background: var(--teal);
  transition: background 400ms var(--ease) 400ms;
}
.timeline-label { font-size: 20px; font-weight: 400; color: var(--fg); }

/* ---------- Team cards (about) ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-card__title { white-space: normal; }
}
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

.team-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: border-color 400ms var(--ease), transform 400ms var(--ease);
}
.team-card:hover { border-color: var(--fg); transform: translateY(-4px); }
.team-card__photo {
  width: 120px;
  height: 120px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--fg-muted);
  transition: border-color 400ms var(--ease), transform 400ms var(--ease);
}
.team-card:hover .team-card__photo {
  filter: grayscale(0);
  color: var(--teal);
  transform: scale(1.03);
}
.team-card__name { font-size: 20px; font-weight: 500; }
.team-card__rule {
  width: 2px;
  height: 16px;
  background: var(--teal);
  margin: 12px auto;
}
.team-card__title {
  font-size: 13px;
  color: var(--fg-muted);
  margin-bottom: 16px;
  white-space: nowrap;
}
.team-card__bio { font-size: 14px; line-height: 1.6; color: var(--fg-muted); text-align: left; }

/* LinkedIn icon – About page team cards */
.team-card__linkedin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: auto;
  padding-top: 16px;
  border-radius: 8px;
  color: var(--fg-muted);
  background: transparent;
  border: 1px solid var(--border);
  transition: all 300ms var(--ease);
  text-decoration: none;
}
.team-card__linkedin:hover {
  background: var(--teal);
  color: #fff;
  border-color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 178, 169, .3);
}
.team-card__linkedin svg { display: block; flex-shrink: 0; }

.footnote {
  margin: 48px auto 0;
  max-width: 600px;
  text-align: center;
  font-size: 17px;
  color: var(--fg-muted);
}

/* ---------- Values grid (2x2, yin-yang diagonal) ---------- */
.values-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 48px;
  max-width: 900px;
}
.value-card {
  background: var(--bg-alt);
  border-radius: 16px;
  transition: background 300ms var(--ease);
}
.value-card--large { padding: 48px; }
.value-card--small { padding: 36px; }
.value-card h3 { font-size: 28px; font-weight: 500; margin-bottom: 10px; }
.value-card p { font-size: 15px; color: var(--fg-muted); line-height: 1.6; }
@media (max-width: 767px) {
  .values-grid { grid-template-columns: 1fr; }
  .value-card--large, .value-card--small { padding: 32px; }
}

/* ---------- Ecosystem cards ---------- */
.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 900px) { .ecosystem-grid { grid-template-columns: 1fr; } }
.ecosystem-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  transition: border-color 400ms var(--ease), transform 400ms var(--ease);
}
.ecosystem-card:hover { border-color: var(--fg); transform: translateY(-4px); }
.ecosystem-card h3 { margin-bottom: 16px; }
.ecosystem-card p {
  font-size: 15px;
  color: var(--fg-muted);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ---------- Orbital diagram ---------- */
.orbital {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 40px auto;
  max-width: 600px;
}
.orbital__svg {
  width: 100%;
  height: auto;
  max-width: 600px;
}

/* ---------- Service list rows ---------- */
.service-list {
  border-top: 1px solid var(--border);
}
.service-row {
  display: grid;
  grid-template-columns: auto 220px 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--fg);
  transition: background 300ms var(--ease), padding-left 300ms var(--ease);
}
.service-row:hover { background: var(--bg); padding-left: 24px; }
.service-row__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--teal);
  font-weight: 500;
}
.service-row__name {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.service-row__desc { font-size: 15px; color: var(--fg-muted); line-height: 1.5; }
.service-row__arrow {
  font-size: 20px;
  color: var(--fg-muted);
  transition: transform 400ms var(--ease), color 200ms var(--ease);
}
.service-row:hover .service-row__arrow { transform: translateX(6px); color: var(--teal); }
@media (max-width: 768px) {
  .service-row {
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 16px;
    padding: 20px 12px;
  }
  .service-row__num { grid-row: 1; grid-column: 1; }
  .service-row__name { grid-row: 1; grid-column: 2; font-size: 18px; }
  .service-row__arrow { grid-row: 1; grid-column: 3; }
  .service-row__desc { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
}

/* ---------- Service detail pages: steps / accordion ---------- */
.body-rich { margin-top: 32px; }

.accordion__item {
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.accordion__item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  font-weight: 500;
}
.accordion__item summary::-webkit-details-marker { display: none; }
.accordion__icon {
  width: 16px;
  height: 16px;
  position: relative;
  flex-shrink: 0;
}
.accordion__icon::before, .accordion__icon::after {
  content: '';
  position: absolute;
  background: var(--fg);
  transition: transform 300ms var(--ease);
}
.accordion__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}
.accordion__icon::after {
  left: 50%;
  top: 0;
  height: 100%;
  width: 1.5px;
  transform: translateX(-50%);
}
.accordion__item[open] .accordion__icon::after { transform: translateX(-50%) rotate(90deg); }
.accordion__body {
  padding: 0 0 24px;
  max-width: 720px;
}
.accordion__body p { font-size: 16px; line-height: 1.7; color: var(--fg-muted); }

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step {
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
}
.step__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--teal);
  margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--fg-muted); line-height: 1.6; }

/* Vertical process (GEO) */
.vertical-process {
  position: relative;
  padding-left: 40px;
  margin-top: 40px;
}
.vertical-process::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.vp__item {
  position: relative;
  padding-bottom: 48px;
}
.vp__item:last-child { padding-bottom: 0; }
.vp__dot {
  position: absolute;
  left: -40px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px var(--bg);
}
.vp__step {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.vp__content h3 { margin-bottom: 8px; }
.vp__content p { font-size: 15px; color: var(--fg-muted); line-height: 1.7; max-width: 640px; }

/* Metrics scroll */
.metrics-scroll {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
@media (max-width: 900px) { .metrics-scroll { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .metrics-scroll {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    padding-bottom: 16px;
  }
  .metric-card { flex: 0 0 85%; scroll-snap-align: start; }
}
.metric-card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
}
.metric-card h3 { font-size: 16px; font-weight: 500; margin-bottom: 6px; }
.metric-card p { font-size: 13px; color: var(--fg-muted); line-height: 1.5; }

/* FAQ */
.faq { margin-top: 32px; }

/* ---------- Case studies ---------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 767px) { .case-grid { grid-template-columns: 1fr; } }
.case-card {
  position: relative;
  padding: 40px 36px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  transition: border-color 400ms var(--ease), transform 400ms var(--ease);
  overflow: hidden;
}
.case-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--teal);
  transition: width 400ms var(--ease), left 400ms var(--ease);
}
.case-card:hover { border-color: var(--fg); transform: translateY(-4px); }
.case-card:hover::before { width: 100%; left: 0; }
.case-card__tag {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.case-card__headline { font-size: 24px; font-weight: 500; line-height: 1.25; margin-bottom: 12px; }
.case-card__desc { font-size: 15px; color: var(--fg-muted); line-height: 1.6; margin-bottom: 20px; }
.case-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pill {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--bg-alt);
  border-radius: 100px;
  color: var(--fg-muted);
}
.case-card__overlay {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 100px;
}

/* ---------- Insights ---------- */
.filter-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 48px;
  border-bottom: 1px solid var(--border);
}
.filter-btn {
  background: transparent;
  border: none;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--fg-muted);
  position: relative;
  transition: color 200ms var(--ease);
}
.filter-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: var(--teal);
  transition: width 300ms var(--ease);
}
.filter-btn:hover { color: var(--fg); }
.filter-btn--active { color: var(--fg); }
.filter-btn--active::after { width: 24px; }

.insights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .insights-grid { grid-template-columns: 1fr; } }

.insight-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 24px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: var(--card-bg);
  transition: opacity 300ms var(--ease), transform 400ms var(--ease), border-color 400ms var(--ease), box-shadow 400ms var(--ease);
  text-decoration: none;
  color: var(--fg);
  position: relative;
}
.insight-card.is-hidden { display: none; }
a.insight-card { cursor: pointer; }
a.insight-card:hover,
.insight-card--published:hover {
  border-color: var(--fg);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}
[data-theme='dark'] a.insight-card:hover {
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}
.insight-card--soon {
  opacity: 0.88;
}
.insight-card__soon {
  position: absolute;
  top: 36px;
  left: 36px;
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.insight-card__image {
  aspect-ratio: 16 / 9;
  background: var(--bg-alt);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
  color: var(--fg-muted);
  position: relative;
  transition: transform 500ms var(--ease-out);
}
.insight-card--published:hover .insight-card__image {
  transform: scale(1.015);
}
.insight-card__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.insight-card__tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
}
.insight-card__readtime {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}
.insight-card__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 4px 0 8px;
  color: var(--fg);
  transition: color 200ms var(--ease);
  text-wrap: balance;
}
.insight-card:hover .insight-card__title { color: var(--teal); }
.insight-card__date { font-size: 12px; color: var(--fg-muted); margin-bottom: 10px; font-family: var(--font-mono); letter-spacing: 0.02em; }
.insight-card__excerpt {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.55;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex-grow: 1;
}
.insight-card .text-link {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
}
.insights-grid--related { margin-top: 48px; }

/* ---------- ARTICLE PAGE ---------- */
.page--article {
  padding-top: 0;
}
.article-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  z-index: 40;
  pointer-events: none;
}
.article-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--teal), var(--teal));
  transition: width 150ms linear;
}

.article { padding-bottom: 120px; position: relative; }
.article__hero {
  padding: 96px 0 56px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.article__breadcrumbs {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 32px;
}
.article__breadcrumbs a { color: var(--fg-muted); transition: color 200ms var(--ease); }
.article__breadcrumbs a:hover { color: var(--teal); }
.article__meta-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.article__tag {
  padding: 4px 10px;
  background: rgba(0, 178, 169, 0.1);
  color: var(--teal);
  border-radius: 100px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
}
.article__dot { opacity: 0.4; }
.article__title {
  font-size: clamp(40px, 5.6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.04;
  margin: 0 0 24px;
  color: var(--fg);
  text-wrap: balance;
}
.article__subtitle {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--fg-muted);
  margin: 0 0 40px;
  max-width: 720px;
  text-wrap: pretty;
}
.article__author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 24px;
  border-top: 1px dashed var(--border);
}
.article__author-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  flex: 0 0 auto;
}
.article__author-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.article__author-role { font-size: 12px; color: var(--fg-muted); font-family: var(--font-mono); letter-spacing: 0.02em; }
.article__author-info { flex: 1; }
.article__index {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.1em;
}

/* TL;DR */
.article__tldr { padding-top: 48px; }
.article__tldr-box {
  background: var(--bg-alt);
  border-left: 2px solid var(--teal);
  padding: 28px 32px;
  border-radius: 2px;
}
.article__tldr-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
  font-weight: 600;
}
.article__tldr-list {
  margin: 0;
  padding-left: 20px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
}
.article__tldr-list li { margin-bottom: 10px; }
.article__tldr-list li::marker { color: var(--teal); }

/* TOC */
.article__toc {
  padding: 48px 0 16px;
}
.article__toc-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 20px;
}
.article__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 32px;
  counter-reset: none;
}
@media (max-width: 640px) {
  .article__toc-list { grid-template-columns: 1fr; }
}
.article__toc-list li { border-top: 1px solid var(--border); }
.article__toc-list a {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  color: var(--fg);
  font-size: 15px;
  font-weight: 500;
  transition: color 200ms var(--ease), padding-left 200ms var(--ease);
}
.article__toc-list a:hover {
  color: var(--teal);
  padding-left: 4px;
}
.article__toc-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.08em;
  font-weight: 600;
  flex: 0 0 28px;
}

/* Body */
.article__body { padding-top: 40px; }
.article__section {
  padding: 56px 0;
  border-top: 1px solid var(--border);
  scroll-margin-top: 96px;
}
.article__section:first-child { border-top: none; padding-top: 16px; }
.article__section-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--teal);
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: 12px;
}
.article__section-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.article__h2 {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: 0 0 28px;
  color: var(--fg);
  text-wrap: balance;
}
.article__prose {
  font-size: 17px;
  line-height: 1.78;
  color: var(--fg);
}
.article__prose > * + * { margin-top: 24px; }
.article__prose p { max-width: 100%; }
.article__prose em { font-style: italic; color: var(--fg); font-weight: 500; }
.article__prose strong { font-weight: 700; color: var(--fg); }
.article__prose a { color: var(--teal); border-bottom: 1px solid rgba(0, 178, 169, 0.3); transition: border-color 200ms var(--ease); }
.article__prose a:hover { border-bottom-color: var(--teal); }
.article__prose code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-alt);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
  color: var(--fg);
}
.article__prose ul, .article__prose ol {
  margin-left: 0;
  padding-left: 24px;
}
.article__prose ul li, .article__prose ol li { margin-bottom: 10px; }
.article__prose ul li::marker { color: var(--teal); }
.article__prose ol li::marker { color: var(--teal); font-family: var(--font-mono); font-weight: 500; }
.article__prose h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.015em;
  color: var(--fg);
}

/* Article table */
.article-table {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 8px 0;
}
.article-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.article-table th, .article-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.article-table th {
  background: var(--bg-alt);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
}
.article-table tr:last-child td { border-bottom: none; }
.article-table td:first-child { font-weight: 600; color: var(--fg); }

/* Article steps */
.article-steps {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin: 8px 0;
}
.article-step {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 20px;
  padding: 24px;
  background: var(--bg-alt);
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: border-color 400ms var(--ease);
}
.article-step:hover { border-color: var(--teal); }
.article-step__num {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 300;
  color: var(--teal);
  letter-spacing: -0.02em;
  line-height: 1;
}
.article-step h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--fg);
}
.article-step p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--fg-muted); }

/* Article list (prettier ordered list) */
.article-list {
  padding-left: 0;
  list-style: none;
  counter-reset: alist;
}
.article-list li {
  counter-increment: alist;
  padding-left: 42px;
  position: relative;
  margin-bottom: 16px;
}
.article-list li::before {
  content: counter(alist, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding-top: 3px;
}

/* Metric list */
.article-metric-list {
  list-style: none;
  padding: 0;
  margin: 8px 0;
  display: grid;
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.article-metric-list li {
  background: var(--bg);
  padding: 18px 22px;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Timeline */
.article-timeline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 8px 0;
}
.article-tl-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 24px;
  padding: 20px 24px;
  background: var(--bg);
  align-items: center;
}
@media (max-width: 640px) {
  .article-tl-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 20px; }
}
.article-tl-wk {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 0.1em;
  font-weight: 600;
  text-transform: uppercase;
}
.article-tl-row p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg); }

/* Code block */
.article-code {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
  color: var(--fg);
  margin: 8px 0;
}
.article-code code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

/* Signature + closing */
.article__closing {
  padding: 72px 0 40px;
  border-top: 1px solid var(--border);
  margin-top: 32px;
}
.article__signature {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  margin-bottom: 48px;
  color: var(--teal);
}
.article__sig-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
}
.article__sig-role {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.article__closing-cta {
  padding: 40px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 16px;
  text-align: center;
}
.article__closing-cta h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.article__closing-cta p {
  color: var(--fg-muted);
  margin-bottom: 24px;
  font-size: 15px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}
.article__closing-cta .final-cta__buttons { margin-top: 0; }

.article__related {
  padding-top: 80px;
  border-top: 1px solid var(--border);
}

@media (max-width: 767px) {
  .article__hero { padding: 72px 0 40px; }
  .article__body { padding-top: 24px; }
  .article__section { padding: 40px 0; }
  .article-step { grid-template-columns: 48px 1fr; padding: 20px; gap: 14px; }
  .article-step__num { font-size: 22px; }
  .article__tldr-box { padding: 24px 22px; }
  .article__closing-cta { padding: 28px 22px; }
}

/* ---------- Partners page ---------- */
.partner-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: start;
  max-width: 960px;
  margin: 0 auto;
}
.partner-block__mark { color: var(--fg); }
.partner-block h2 { margin-bottom: 8px; }
.partner-block .subline { margin-bottom: 24px; }
.partner-block .body { max-width: 640px; margin-bottom: 24px; }
@media (max-width: 768px) { .partner-block { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 64px;
  align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 48px; } }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.contact-form label { display: flex; flex-direction: column; gap: 6px; }
.contact-form label span {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--fg);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 200ms var(--ease);
  resize: vertical;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: var(--fg); outline: none; }
.form-full { width: 100%; }
.form-status { font-size: 14px; margin-top: 4px; min-height: 20px; }
.form-status.is-success { color: var(--teal); }
.form-status.is-error { color: #d4183d; }

.contact-aside { padding: 32px; background: var(--bg-alt); border-radius: 16px; }
.contact-aside__name { font-size: 20px; font-weight: 500; margin: 0; }
.contact-aside__role { font-size: 14px; color: var(--fg-muted); margin-top: 2px; margin-bottom: 24px; }
.contact-details { display: flex; flex-direction: column; gap: 14px; }
.contact-item { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.contact-item__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.contact-item a:hover { color: var(--teal); }
.contact-aside__note { margin-top: 24px; font-size: 13px; color: var(--fg-muted); }
.contact-footnote { margin-top: 64px; text-align: center; color: var(--fg-muted); font-size: 15px; }

/* ---------- Legal pages ---------- */
.legal-content h2 {
  font-size: 22px;
  font-weight: 500;
  margin: 40px 0 12px;
  color: var(--fg);
}
.legal-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-muted);
  margin-bottom: 16px;
  max-width: 720px;
}
.legal-content a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover { color: var(--teal); }

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  background: var(--black-deep);
  color: #fff;
  padding: 80px 0 32px;
  overflow: hidden;
  margin-top: 0;
}
.footer-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
}
.site-footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}
.site-footer__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 64px;
}
.site-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
}
.site-footer__tagline {
  color: rgba(255, 255, 255, 0.45);
  font-size: 15px;
  letter-spacing: 0.01em;
}
.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  margin-bottom: 64px;
}
@media (max-width: 900px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (max-width: 500px) { .site-footer__cols { grid-template-columns: 1fr; gap: 32px; } }
.site-footer__col-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer ul a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  transition: color 200ms var(--ease);
}
.site-footer ul a:hover { color: var(--teal); }
.site-footer__bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
}
.site-footer__links { display: flex; gap: 12px; }
.site-footer__links a { color: rgba(255, 255, 255, 0.6); }
.site-footer__links a:hover { color: var(--teal); }

/* ---------- Misc utilities ---------- */
.arrow { display: inline-block; transition: transform 400ms var(--ease); }

/* Headline curtain reveal (subtle) */
.reveal-text {
  display: inline-block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: -webkit-mask-position 900ms var(--ease), mask-position 900ms var(--ease);
}
.reveal-text.is-visible { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* ===========================================================================
   APRIL 2026 · WOW-POLISH v3
   Philosophy quote refined · Ecosystem showcase · Cinematic Final CTA ·
   Industries closing · About wow · Values manifesto · Footer masthead ·
   Cookie banner · Legal tables · Mobile overlay footer
   =========================================================================== */

/* ---------- Philosophy quote · bolder cinematic ---------- */
.section--quote { position: relative; overflow: hidden; }
.quote__glyph {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(240px, 34vw, 540px);
  line-height: 1;
  color: rgba(255, 255, 255, 0.035);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.quote__inner { position: relative; z-index: 2; }
.quote__text--bold {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.025em;
  font-size: clamp(30px, 5.5vw, 68px);
  line-height: 1.12;
  font-style: normal;
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.96);
}
.quote__text--bold .quote__line {
  display: block;
  margin: 0 0 18px;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
}
.is-visible .quote__text--bold .quote__line--1,
.section--quote.is-visible .quote__line--1 { opacity: 1; transform: none; transition-delay: 80ms; }
.is-visible .quote__text--bold .quote__line--2,
.section--quote.is-visible .quote__line--2 { opacity: 1; transform: none; transition-delay: 360ms; }
.quote__text--bold .quote__word {
  display: inline-block;
  font-weight: 700;
  position: relative;
}
.quote__text--bold .quote__word--strike {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 178, 169, 0.55);
  text-decoration-thickness: 3px;
}
.quote__text--bold .quote__word--new {
  color: var(--teal);
  position: relative;
}
.quote__text--bold .quote__word--new::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 3px;
  background: var(--teal);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 900ms var(--ease-out) 700ms;
}
.section--quote.is-visible .quote__text--bold .quote__word--new::after { transform: scaleX(1); }
.quote__text--bold .quote__word--teal {
  color: var(--teal);
  font-weight: 800;
  text-shadow: 0 0 24px rgba(0, 178, 169, 0.35);
}

/* ---------- Industries closing · bigger, magnetic ---------- */
.industry__closing {
  margin-top: 96px;
  text-align: center;
  position: relative;
}
.industry__closing-rule {
  width: 1px;
  height: 64px;
  margin: 0 auto 32px;
  background: linear-gradient(to bottom, transparent, var(--border));
}
.industry__closing-kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 24px;
}
.industry__closing-text {
  font-size: clamp(28px, 4.2vw, 52px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 900px;
  margin: 0 auto;
  color: var(--fg);
}
.industry__closing-strong {
  display: inline-block;
  font-weight: 700;
  color: var(--fg);
  position: relative;
}
.industry__closing-strong::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  background: var(--teal);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms var(--ease-out) 200ms;
}
.reveal.is-visible .industry__closing-strong::after,
.industry__closing.reveal.is-visible .industry__closing-strong::after { transform: scaleX(1); }
.industry__closing-em {
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
}
.industry__closing-dots {
  margin-top: 40px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.industry__closing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background 300ms var(--ease);
}
.industry__closing-dots span:nth-child(2n) { background: var(--teal); opacity: 0.6; }

/* ---------- Ecosystem showcase (homepage) ---------- */
.section--ecosystem { padding: 140px 0; }
.eco-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}
@media (max-width: 1024px) { .eco-showcase { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .eco-showcase { grid-template-columns: 1fr; } }
.eco-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 28px 32px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  overflow: hidden;
  transition: transform 500ms var(--ease), border-color 500ms var(--ease), box-shadow 500ms var(--ease), background 500ms var(--ease);
  min-height: 320px;
}
.eco-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(0, 178, 169, 0.08), transparent 60%);
  opacity: 0;
  transition: opacity 600ms var(--ease);
  pointer-events: none;
}
.eco-card:hover {
  transform: translateY(-6px);
  border-color: rgba(0, 178, 169, 0.4);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 178, 169, 0.1);
}
.eco-card:hover::before { opacity: 1; }
.eco-card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.eco-card__logo {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border-radius: 12px;
  margin-bottom: 20px;
  color: var(--fg);
  transition: background 400ms var(--ease), transform 400ms var(--ease);
}
.eco-card:hover .eco-card__logo {
  background: rgba(0, 178, 169, 0.12);
  color: var(--teal);
  transform: rotate(-3deg) scale(1.05);
}
.eco-card__name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}
.eco-card__role {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.eco-card__desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0 0 24px;
  flex: 1;
}
.eco-card__link {
  font-size: 13px;
  font-weight: 500;
  color: var(--teal);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.eco-card__link .arrow { transition: transform 400ms var(--ease); }
.eco-card:hover .eco-card__link .arrow { transform: translateX(4px); }
.eco-card--inhouse {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.eco-card--inhouse .eco-card__num { color: var(--teal); }
.eco-card--inhouse .eco-card__logo {
  background: rgba(0, 178, 169, 0.15);
  color: var(--teal);
}
.eco-card--inhouse .eco-card__role { color: rgba(255, 255, 255, 0.55); }
[data-theme="dark"] .eco-card--inhouse .eco-card__role,
html:not([data-theme]) .eco-card--inhouse .eco-card__role { color: rgba(255, 255, 255, 0.55); }
.eco-card--inhouse .eco-card__desc { color: rgba(255, 255, 255, 0.72); }
.eco-card--inhouse:hover {
  background: #000;
  border-color: var(--teal);
  box-shadow: 0 24px 48px rgba(0, 178, 169, 0.2);
}

/* ---------- Final CTA · cinematic crescendo ---------- */
.final-cta--cinematic {
  position: relative;
  overflow: hidden;
  padding: 160px 0 140px;
  text-align: center;
}
.final-cta__center {
  position: relative;
  z-index: 3;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}
.final-cta__orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(92vw, 1000px);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.final-cta__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  opacity: 0.4;
  animation: ctaRingSpin 60s linear infinite;
}
.final-cta__ring--1 { inset: 10%; animation-duration: 80s; }
.final-cta__ring--2 { inset: 22%; animation-duration: 60s; animation-direction: reverse; border-color: rgba(0, 178, 169, 0.25); }
.final-cta__ring--3 { inset: 34%; animation-duration: 45s; border-style: dashed; opacity: 0.3; }
.final-cta__pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 460px;
  height: 460px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 178, 169, 0.12) 0%, transparent 65%);
  animation: ctaPulse 6s ease-in-out infinite;
  border-radius: 50%;
}
@keyframes ctaRingSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ctaPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.5; }
  50%      { transform: translate(-50%, -50%) scale(1.15); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .final-cta__ring, .final-cta__pulse { animation: none; }
}
.final-cta__caption {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
}
.final-cta__caption-line {
  width: 40px;
  height: 1px;
  background: var(--teal);
  opacity: 0.6;
}
.final-cta__headline--xl {
  font-size: clamp(44px, 8vw, 104px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0 0 32px;
  color: var(--fg);
}
.final-cta__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.is-visible .final-cta__word { opacity: 1; transform: none; }
.is-visible .final-cta__word:nth-child(1)  { transition-delay: 60ms; }
.is-visible .final-cta__word:nth-child(3)  { transition-delay: 180ms; }
.is-visible .final-cta__word:nth-child(5)  { transition-delay: 300ms; }
.is-visible .final-cta__word:nth-child(7)  { transition-delay: 480ms; }
.is-visible .final-cta__word:nth-child(9)  { transition-delay: 600ms; }
.is-visible .final-cta__word:nth-child(11) { transition-delay: 720ms; }
.final-cta__word--glow {
  text-shadow: 0 0 24px rgba(0, 178, 169, 0.28);
}
.final-cta__lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 680px;
  margin: 0 auto 40px;
}
.final-cta__lede strong { color: var(--fg); font-weight: 600; }
.final-cta__buttons {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.final-cta__whisper {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
  font-family: var(--font-mono);
}
.final-cta__whisper-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(0, 178, 169, 0.6);
  animation: ctaSignal 2s ease-in-out infinite;
}
@keyframes ctaSignal {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
.final-cta__field { position: absolute; inset: 0; z-index: 1; }
.final-cta__dot--5 { top: 72%; left: 82%; animation-delay: 1.2s; }
.final-cta__dot--6 { top: 28%; left: 86%; animation-delay: 2.1s; }

/* ---------- Footer · masthead + contact pills ---------- */
.site-footer {
  background: var(--black);
  color: rgba(255, 255, 255, 0.72);
  padding: 100px 0 48px;
  position: relative;
  overflow: hidden;
}
.site-footer__inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.site-footer__masthead {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 64px;
  padding-bottom: 56px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) { .site-footer__masthead { grid-template-columns: 1fr; gap: 40px; } }
.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 24px;
}
.site-footer__brand .logo-mark { color: #fff; }
.site-footer__brand-name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.site-footer__description {
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.62);
  max-width: 620px;
  margin: 0 0 24px;
}
.site-footer__description strong { color: #fff; font-weight: 500; }
.site-footer__greek {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.03);
}
.site-footer__greek-letters {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--teal);
}
.site-footer__greek-meaning { font-size: 13px; color: rgba(255, 255, 255, 0.5); }

.site-footer__contact {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.site-footer__contact-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 4px;
}
.site-footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.contact-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  background: rgba(255, 255, 255, 0.02);
  transition: border-color 300ms var(--ease), background 300ms var(--ease), transform 300ms var(--ease);
}
.contact-pill:hover {
  border-color: rgba(0, 178, 169, 0.5);
  background: rgba(0, 178, 169, 0.08);
  transform: translateY(-2px);
}
.contact-pill__role {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.contact-pill__email {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.contact-pill:hover .contact-pill__email { color: var(--teal); }
.site-footer__cta {
  align-self: flex-start;
  margin-top: 8px;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding-bottom: 48px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@media (max-width: 900px) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (max-width: 500px) { .site-footer__cols { grid-template-columns: 1fr; gap: 32px; } }
.site-footer__col-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 16px;
}
.site-footer__cols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.site-footer__cols a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.62);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.site-footer__cols a:hover { color: var(--teal); }

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.4);
}
.site-footer__bottom-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-footer__bottom-sep { color: rgba(255, 255, 255, 0.2); }
.site-footer__bottom-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
}
.site-footer__signal {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 6px rgba(0, 178, 169, 0.6);
  animation: ctaSignal 2s ease-in-out infinite;
}

/* ---------- About · Why We Exist ---------- */
.section--why {
  position: relative;
  padding: 140px 0;
  overflow: hidden;
}
.why__bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 3%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 3%, transparent) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 40%, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 40%, transparent 75%);
  pointer-events: none;
  opacity: 0.6;
}
.why__head {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 80px;
  position: relative;
  z-index: 2;
}
.why__title {
  font-size: clamp(40px, 6.5vw, 84px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 16px 0 24px;
}
.why__title-em {
  font-style: italic;
  color: var(--teal);
  font-weight: 400;
}
.why__lede {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 640px;
  margin: 0 auto;
}
.why__split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 80px;
  position: relative;
  z-index: 2;
}
@media (max-width: 1000px) { .why__split { grid-template-columns: 1fr; gap: 64px; } }
.why__narrative { display: flex; flex-direction: column; gap: 56px; }
.why__chapter { position: relative; padding-left: 80px; }
@media (max-width: 600px) { .why__chapter { padding-left: 0; } }
.why__chapter-num {
  position: absolute;
  left: 0;
  top: 4px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--teal);
  font-weight: 500;
}
@media (max-width: 600px) { .why__chapter-num { position: static; display: block; margin-bottom: 8px; } }
.why__chapter-title {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 14px;
  color: var(--fg);
}
.why__chapter-body {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-muted);
  margin: 0;
  max-width: 560px;
}
.why__chapter-body em { color: var(--fg); font-style: normal; font-weight: 500; }

.why__timeline {
  position: sticky;
  top: 100px;
  align-self: start;
  padding: 32px 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--fg) 2%, var(--bg));
}
@media (max-width: 1000px) { .why__timeline { position: relative; top: 0; } }
.why__timeline-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 24px;
}
.why__timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}
.why__timeline-list::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: linear-gradient(to bottom, var(--teal), transparent);
  opacity: 0.35;
}
.why__timeline-item {
  position: relative;
  padding-left: 40px;
  min-height: 44px;
}
.why__timeline-dot {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--teal);
  transition: background 300ms var(--ease), box-shadow 300ms var(--ease);
}
.why__timeline-item.is-visible .why__timeline-dot {
  background: var(--teal);
  box-shadow: 0 0 0 4px rgba(0, 178, 169, 0.15);
}
.why__timeline-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}
.why__timeline-head {
  font-size: 15px;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.35;
  margin-bottom: 4px;
}
.why__timeline-detail {
  font-size: 13px;
  color: var(--fg-muted);
  line-height: 1.5;
}
.why__timeline-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-muted);
  font-style: italic;
}

/* ---------- About · Values (Four words we live by) ---------- */
.section--values { padding: 140px 0; }
.values__title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 16px 0 20px;
  max-width: 820px;
}
.values__lede {
  font-size: 17px;
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 640px;
  margin: 0 0 64px;
}
.values-stage {
  display: flex;
  flex-direction: column;
}
.value-row {
  position: relative;
  display: grid;
  grid-template-columns: 80px 280px 1fr;
  gap: 40px;
  align-items: baseline;
  padding: 44px 0;
  transition: background 400ms var(--ease);
}
@media (max-width: 900px) {
  .value-row { grid-template-columns: 1fr; gap: 12px; padding: 36px 0; }
}
.value-row__rule {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--border);
  transform-origin: left;
  transform: scaleX(1);
}
.value-row::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--teal);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 700ms var(--ease-out);
}
.value-row:hover::after { transform: scaleX(1); }
.value-row__num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--teal);
  letter-spacing: 0.12em;
  font-weight: 500;
}
.value-row__word {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.value-row__word-text {
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--fg);
}
.value-row__word-verb {
  font-size: 14px;
  font-style: italic;
  color: var(--muted);
  font-family: Georgia, 'Times New Roman', serif;
}
.value-row__body {
  font-size: 16px;
  line-height: 1.72;
  color: var(--fg-muted);
  max-width: 640px;
  margin: 0;
}
.value-row:hover .value-row__word-text { color: var(--teal); }
.values__closing {
  margin-top: 56px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--fg-muted);
  font-style: italic;
  padding: 14px 20px;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: color-mix(in srgb, var(--teal) 4%, transparent);
}
.values__closing-mark { display: inline-flex; color: var(--teal); }

/* ---------- Mobile overlay footer ---------- */
.mobile-overlay__footer {
  margin-top: auto;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
}
.mobile-overlay__footer a { color: var(--teal); text-decoration: none; font-size: 14px; }

/* ---------- Cookie consent banner ---------- */
.cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: 24px;
  z-index: 1000;
  max-width: 780px;
  margin: 0 auto;
  background: var(--black);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 178, 169, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out);
}
.cookie-banner.is-visible { opacity: 1; transform: translateY(0); }
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
}
@media (max-width: 780px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; }
  .cookie-banner__inner {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 20px;
  }
  .cookie-banner__actions { flex-direction: row; justify-content: flex-end; }
}
.cookie-banner__icon {
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(0, 178, 169, 0.12);
  flex-shrink: 0;
}
.cookie-banner__title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.005em;
}
.cookie-banner__text {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.55;
  margin: 0;
}
.cookie-banner__text a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.cookie-banner__actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .cta--secondary {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.cookie-banner .cta--secondary:hover { border-color: #fff; }

/* ---------- Legal (Cookies/Privacy/Terms) enhancements ---------- */
.legal-content h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 40px 0 12px;
}
.legal-content p { font-size: 15.5px; line-height: 1.72; color: var(--fg-muted); margin: 0 0 16px; }
.legal-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.legal-list {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legal-list li {
  position: relative;
  padding: 12px 16px 12px 32px;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg));
  border-left: 2px solid var(--teal);
  border-radius: 0 6px 6px 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: 14px;
  top: 22px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
}
.legal-list li strong { color: var(--fg); font-weight: 600; }
.legal-table {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: 16px 0 32px;
  font-size: 14px;
}
.legal-table__row {
  display: grid;
  grid-template-columns: 1.2fr 2.4fr 0.8fr;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  line-height: 1.55;
  color: var(--fg-muted);
}
@media (max-width: 720px) {
  .legal-table__row { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
}
.legal-table__row:last-child { border-bottom: 0; }
.legal-table__row--head {
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
}
.legal-table__row strong { color: var(--fg); font-weight: 600; }

/* ---------- Hero subline inline-em tightening (ensure proper spacing) ---------- */
.hero__subline em {
  font-style: italic;
  color: var(--teal);
  font-weight: 500;
}

/* ---------- Form pending status ---------- */
.form-status.is-pending { color: var(--teal); }
.form-status a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }



/* ===========================================================================
   APRIL 2026 v4 · Philosophy fix · Hero subline polish · Editorial footer
   =========================================================================== */

/* Philosophy quote: missing decorative layers (bug fix) */
.quote__bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 85%);
  pointer-events:none;z-index:0;
}
.quote__orb{
  position:absolute;border-radius:50%;filter:blur(80px);
  pointer-events:none;z-index:0;opacity:.55;
  animation: quoteOrb 14s ease-in-out infinite;
}
.quote__orb--1{ width:540px;height:540px; top:-120px; left:-120px;
  background: radial-gradient(circle, rgba(0,178,169,.45), transparent 70%); }
.quote__orb--2{ width:620px;height:620px; bottom:-180px; right:-160px;
  background: radial-gradient(circle, rgba(120,80,255,.22), transparent 70%);
  animation-delay:-7s;
}
@keyframes quoteOrb{ 0%,100%{ transform:translate(0,0) scale(1); opacity:.5; } 50%{ transform:translate(40px,-30px) scale(1.08); opacity:.7; } }

.quote__kicker{
  display:inline-flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:11px;font-weight:500;
  letter-spacing:.28em;text-transform:uppercase;
  color: rgba(0,178,169,.85);
  margin-bottom:40px;
}
.quote__kicker-line{ display:block;width:40px;height:1px;background:rgba(0,178,169,.5); }

.quote__footer{
  margin-top:64px; display:flex;flex-direction:column;align-items:center;gap:16px;
}
.quote__footer .quote__mark{ margin:0; color:rgba(255,255,255,.55); }
.quote__attribution{ margin-top:0; }
.quote__attr-label{ font-family:var(--font-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);font-weight:500; }
.quote__attr-role{ font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-top:6px; }

/* Hero subline typography */
.hero__sub{ max-width: 780px; margin: 0 auto; }
.hero__subline.hero__subline--lede{
  font-family: var(--font-sans);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400; line-height: 1.35;
  letter-spacing: -0.022em; color: var(--fg);
  margin: 0 0 18px; text-wrap: balance;
}
.hero__sub-strong{
  font-weight: 600; color: var(--fg);
  background: linear-gradient(120deg, var(--fg) 0%, var(--fg) 50%, var(--teal) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.024em;
}
.hero__subline.hero__subline--detail{
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.3vw, 17.5px);
  font-weight: 350; line-height: 1.7;
  color: var(--fg-muted);
  margin: 0 auto 28px; max-width: 640px;
  text-wrap: pretty;
}
.hero__sub-em{ font-style: normal; font-weight: 500; color: var(--fg); position: relative; }
.hero__sub-em::after{
  content:''; position:absolute; left:0; right:0; bottom:-2px;
  height:1px; background: var(--teal); opacity:.55;
  transform-origin: left; transform: scaleX(0);
  transition: transform 700ms var(--ease-out);
}
.hero--loaded .hero__sub-em::after{ transform: scaleX(1); transition-delay: 1.2s; }
.hero--loaded .hero__sub-em:nth-of-type(2)::after{ transition-delay: 1.4s; }
.hero--loaded .hero__sub-em:nth-of-type(3)::after{ transition-delay: 1.6s; }
.hero__sub-em--teal{ color: var(--teal); font-weight: 700; }
.hero__sub-em--teal::after{ background: var(--teal); opacity:1; height:2px; }

.hero__sub-chips{
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:center;gap:6px;
  margin-top: 20px;
  max-width: 100%;
  overflow-x: visible;
}
.hero__sub-chip{
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 10px 5px 6px; border-radius: 100px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  white-space: nowrap;
  flex-shrink: 0;
  opacity: 0; transform: translateY(6px);
  transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out), border-color 240ms, color 240ms, box-shadow 240ms;
}
.hero__sub-chip img{
  width: 14px; height: 14px; display: block; flex-shrink: 0;
  /* White rounded plate keeps every brand mark legible in both themes */
  background: #FFFFFF;
  border-radius: 4px;
  padding: 2px;
  box-sizing: content-box;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
}
[data-theme="dark"] .hero__sub-chip img{
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.3);
}
.hero--loaded .hero__sub-chip{ opacity:1; transform:none; }
.hero--loaded .hero__sub-chip:nth-child(1){ transition-delay:1.00s; }
.hero--loaded .hero__sub-chip:nth-child(2){ transition-delay:1.08s; }
.hero--loaded .hero__sub-chip:nth-child(3){ transition-delay:1.16s; }
.hero--loaded .hero__sub-chip:nth-child(4){ transition-delay:1.24s; }
.hero--loaded .hero__sub-chip:nth-child(5){ transition-delay:1.32s; }
.hero--loaded .hero__sub-chip:nth-child(6){ transition-delay:1.40s; }
.hero--loaded .hero__sub-chip:nth-child(7){ transition-delay:1.48s; }
.hero__sub-chip:hover{ border-color: var(--teal); color: var(--fg); box-shadow: 0 6px 18px rgba(0,178,169,0.15); }

/* EDITORIAL FOOTER v4 */
.site-footer.site-footer--editorial{
  background: linear-gradient(180deg, #050505 0%, #0A0A0A 45%, #111 100%);
  color: #F7F7F7; position: relative; padding: 0; border-top: none; overflow: hidden;
}
.site-footer--editorial::before{
  content:''; position:absolute; inset:0 0 auto 0; height:1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0,178,169,.6) 30%, rgba(0,178,169,.6) 70%, transparent 100%);
}
.site-footer--editorial::after{
  content:''; position:absolute; inset:-20% -20% 0 -20%;
  background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(0,178,169,.08), transparent 60%);
  pointer-events:none; z-index:0;
}
.site-footer--editorial .footer-canvas{ position:absolute; inset:0; z-index:0; opacity:.25; }
.site-footer--editorial .site-footer__inner{
  position:relative; z-index:2;
  max-width: 1280px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

.footer-hero{ padding: clamp(80px, 10vw, 140px) 0 clamp(56px, 6vw, 80px); text-align: center; position: relative; }
.footer-hero__rule{ width: 1px; height: 64px; margin: 0 auto 32px; background: linear-gradient(to bottom, transparent, rgba(0,178,169,.6), transparent); }
.footer-hero__kicker{ display:inline-flex; align-items:center; gap:10px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: rgba(0,178,169,.85); margin-bottom: 28px; }
.footer-hero__dot{ width:6px;height:6px;border-radius:50%;background: var(--teal); box-shadow: 0 0 12px rgba(0,178,169,.8); animation: footerPulse 2.4s infinite; }
@keyframes footerPulse{ 0%,100%{ opacity:1 } 50%{ opacity:.4 } }
.footer-hero__headline{
  font-family: var(--font-sans);
  font-size: clamp(56px, 10vw, 140px);
  font-weight: 300; letter-spacing: -0.04em; line-height: .95;
  margin: 0 0 20px; color: #fff;
}
.footer-hero__word{ display: inline-block; }
.footer-hero__word--accent{
  background: linear-gradient(135deg, #fff 0%, #fff 45%, var(--teal) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  font-weight: 500;
}
.footer-hero__period{ color: var(--teal); -webkit-text-fill-color: var(--teal); }
.footer-hero__sub{ font-size: clamp(15px, 1.4vw, 17px); font-weight: 350; color: rgba(255,255,255,.6); letter-spacing: -0.01em; max-width: 560px; margin: 0 auto 32px; }
.footer-hero__cta{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; font-weight:500; letter-spacing:-0.01em;
  color: #0A0A0A; background: #fff;
  padding: 14px 24px; border-radius: 100px;
  text-decoration: none;
  transition: all 280ms var(--ease-out);
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 20px 40px rgba(0,0,0,.35);
}
.footer-hero__cta:hover{ background: var(--teal); color: #fff; transform: translateY(-2px); box-shadow: 0 30px 60px rgba(0,178,169,.35); }
.footer-hero__cta .cta-arrow{ transition: transform 280ms var(--ease-out); }
.footer-hero__cta:hover .cta-arrow{ transform: translateX(4px); }

.footer-main{ display:grid; grid-template-columns: 1.3fr 1fr; gap: 64px; padding: 64px 0 56px; border-top: 1px solid rgba(255,255,255,.08); }
.footer-brand{ display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:#fff; margin-bottom: 28px; }
.footer-brand__mark{ color: var(--teal); display:inline-flex; }
.footer-brand__wordmark{ font-family: var(--font-sans); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.footer-brand__description{ font-family: var(--font-sans); font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.62); max-width: 580px; margin: 0 0 28px; letter-spacing: -0.005em; font-weight: 350; }
.footer-brand__description strong{ color:#fff; font-weight:500; }
.footer-brand__origin{ display:inline-flex; align-items:center; gap:14px; padding: 10px 18px; border-radius: 100px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.footer-brand__greek{ font-family: Georgia, serif; font-size: 22px; color: var(--teal); font-weight: 400; }
.footer-brand__origin-meaning{ font-size:12px; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.footer-brand__origin-meaning i{ color: rgba(255,255,255,.75); font-style: italic; }

.footer-main__contact{ padding-left: 40px; border-left: 1px solid rgba(255,255,255,.08); }
.footer-contact__label{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(0,178,169,.85); margin-bottom: 20px; font-weight: 500; }
.footer-contact__list{ list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 2px; }
.footer-contact__row{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding: 14px 18px; margin: 0 -18px; border-radius: 10px;
  text-decoration:none; color: rgba(255,255,255,.8);
  transition: all 220ms var(--ease-out);
}
.footer-contact__row:hover{ background: rgba(0,178,169,.06); color:#fff; transform: translateX(4px); }
.footer-contact__role{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); font-weight: 500; }
.footer-contact__row:hover .footer-contact__role{ color: rgba(0,178,169,.9); }
.footer-contact__email{ font-family: var(--font-sans); font-weight: 500; font-size: 14.5px; letter-spacing: -0.01em; color: inherit; }
.footer-contact__at{ color: var(--teal); }
.footer-contact__linkedin{ padding-top: 20px; border-top: 1px solid rgba(255,255,255,.06); }
.footer-contact__linkedin a{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color: rgba(255,255,255,.6); text-decoration:none; transition: color 200ms; }
.footer-contact__linkedin a:hover{ color: var(--teal); }

.footer-cols{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 48px; padding: 48px 0; border-top: 1px solid rgba(255,255,255,.08); }
.footer-col__title{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: rgba(255,255,255,.45); font-weight: 500; margin-bottom: 18px; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 10px; }
.footer-col a, .footer-col .footer-link-btn{
  font-size: 14px; color: rgba(255,255,255,.7); text-decoration:none;
  transition: color 200ms, transform 200ms;
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer; text-align: left;
  letter-spacing: -0.005em;
}
.footer-col a:hover, .footer-col .footer-link-btn:hover{ color: var(--teal); transform: translateX(3px); display:inline-block; }
.arrow-ext{ opacity:.5; font-size: 11px; margin-left: 2px; }

.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap: 16px; padding: 32px 0 48px; border-top: 1px solid rgba(255,255,255,.08); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.4); text-transform: uppercase; }
.footer-bottom__sep{ opacity:.4; margin: 0 4px; }
.footer-bottom__signal{ display:inline-block; width:6px; height:6px; border-radius:50%; background: var(--teal); box-shadow: 0 0 10px rgba(0,178,169,.8); margin-right: 8px; animation: footerPulse 2.4s infinite; }
.footer-bottom__left, .footer-bottom__right{ display:inline-flex; align-items:center; }

@media (max-width: 960px){
  .footer-main{ grid-template-columns: 1fr; gap: 40px; }
  .footer-main__contact{ padding-left: 0; border-left: none; border-top: 1px solid rgba(255,255,255,.08); padding-top: 32px; }
  .footer-cols{ grid-template-columns: repeat(2, 1fr); gap: 32px; }
}
@media (max-width: 560px){
  .footer-cols{ grid-template-columns: 1fr; }
  .footer-hero__headline{ font-size: clamp(48px, 16vw, 80px); }
}

/* Header: shift nav right */
.site-header__inner{ justify-content: space-between; }
.site-header__nav{ margin-left: auto; margin-right: 20px; }
@media (max-width: 960px){ .site-header__nav{ margin-right: 0; } }

/* Prevent CF email obfuscation */
[data-no-cf-email] .__cf_email__ { display: none !important; }
a.__cf_email__{ display:none !important; }



/* ===========================================================================
   SERVICE DETAIL PAGES v4  ·  wow + conversion + clarity
   =========================================================================== */

/* ---- SVC HERO ---- */
.svc-hero{
  position:relative; padding: clamp(100px, 12vw, 160px) 0 clamp(64px, 8vw, 96px);
  overflow:hidden;
}
.svc-hero__bg{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.svc-hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 50% at 20% 20%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 20% 20%, #000 0%, transparent 80%);
}
.svc-hero__orb{
  position:absolute; width: 580px; height: 580px; top:-180px; right:-160px;
  border-radius: 50%; filter: blur(80px);
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 30%, transparent), transparent 70%);
  animation: svcOrbFloat 18s ease-in-out infinite;
}
@keyframes svcOrbFloat{ 0%,100%{ transform: translate(0,0) scale(1); opacity: .7 } 50%{ transform: translate(-40px,40px) scale(1.08); opacity: 1 } }

.svc-hero .container{ position:relative; z-index: 2; }
.svc-hero__eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--fg-muted);
  margin: 24px 0 28px;
}
.svc-hero__num{ color: var(--teal); font-weight: 600; }
.svc-hero__sep{ width: 36px; height: 1px; background: var(--border); }
.svc-hero__headline{
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(44px, 7vw, 92px);
  line-height: 1.02; letter-spacing: -0.035em;
  color: var(--fg); margin: 0 0 28px; max-width: 920px;
  text-wrap: balance;
}
.svc-hero__lede{
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.6;
  color: var(--fg-muted); max-width: 720px;
  margin: 0 0 24px; font-weight: 350;
  text-wrap: pretty;
}
.svc-hero__promise{
  display:inline-flex; align-items:flex-start; gap: 12px;
  padding: 16px 22px; border-radius: 14px;
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 22%, transparent);
  font-size: 14.5px; line-height: 1.6; color: var(--fg);
  max-width: 640px; margin: 0 0 32px;
  font-weight: 400;
}
.svc-hero__promise-mark{ color: var(--teal); font-size: 18px; line-height: 1.5; flex-shrink: 0; }
.svc-hero__outcomes{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0; margin: 40px 0 32px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.svc-outcome{
  padding: 24px 24px 24px 0;
  border-right: 1px solid var(--border);
}
.svc-outcome:last-child{ border-right: 0; }
.svc-outcome__value{
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(32px, 4.5vw, 48px); letter-spacing: -0.035em;
  color: var(--fg); line-height: 1;
  background: linear-gradient(135deg, var(--fg) 0%, var(--teal) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.svc-outcome__label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-muted); margin-top: 10px;
  line-height: 1.4;
}
.svc-hero__ctas{ display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 720px){
  .svc-outcome{ padding: 18px 12px 18px 0; }
}

/* ---- AUDIENCE ---- */
.svc-audience__grid{
  display:flex; flex-wrap:wrap; gap: 10px; margin-top: 28px;
}
.svc-audience__pill{
  padding: 10px 18px; border-radius: 100px;
  background: var(--bg-alt); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 450; color: var(--fg);
  letter-spacing: -0.005em;
  transition: border-color 200ms, background 200ms, transform 200ms;
}
.svc-audience__pill:hover{
  border-color: var(--teal);
  background: color-mix(in srgb, var(--teal) 5%, var(--bg-alt));
  transform: translateY(-2px);
}

/* ---- SECTION SHAPES ---- */
.svc-section .rich-copy p{ font-size: 17px; line-height: 1.75; max-width: 760px; }
.svc-section .rich-copy p + p{ margin-top: 18px; }
.svc-section .rich-copy strong{ color: var(--fg); font-weight: 500; background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--teal) 22%, transparent) 62%); padding: 0 2px; }
.svc-section .rich-copy em{ font-style: italic; color: var(--teal); font-weight: 500; }

.problem-pills{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.problem-pill{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  padding: 8px 14px; border-radius: 8px;
  background: color-mix(in srgb, var(--fg) 5%, transparent);
  border: 1px solid var(--border);
  color: var(--fg-muted);
}

/* ---- DIFF ROWS ---- */
.svc-diff{ margin-top: 28px; border-top: 1px solid var(--border); }
.svc-diff__row{
  display:grid; grid-template-columns: 160px 1fr; gap: 40px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}
.svc-diff__label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-muted);
  font-weight: 500;
}
.svc-diff__them{ color: var(--fg-muted); font-size: 16px; line-height: 1.6; }
.svc-diff__row--us{
  background: color-mix(in srgb, var(--teal) 5%, transparent);
  margin: 0 -20px; padding: 24px 20px;
}
.svc-diff__row--us .svc-diff__label{ color: var(--teal); }
.svc-diff__us{ color: var(--fg); font-size: 16px; line-height: 1.6; font-weight: 450; }
@media (max-width: 720px){
  .svc-diff__row{ grid-template-columns: 1fr; gap: 8px; }
}

/* ---- DELIVERABLES ---- */
.svc-deliverables{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0; margin-top: 32px;
  border-top: 1px solid var(--border);
  border-left: 1px solid var(--border);
}
.svc-deliverable{
  padding: 32px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative;
  transition: background 260ms;
}
.svc-deliverable:hover{ background: color-mix(in srgb, var(--teal) 3%, transparent); }
.svc-deliverable__check{
  width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 15%, transparent);
  color: var(--teal); display:flex; align-items:center; justify-content:center;
  font-weight: 700; font-size: 14px;
  margin-bottom: 16px;
}
.svc-deliverable h3{
  font-size: 18px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg); margin: 0 0 10px;
}
.svc-deliverable p{ font-size: 14.5px; line-height: 1.6; color: var(--fg-muted); }

/* ---- TIGHT LIST ---- */
.tight-list{ list-style: none; padding: 0; margin: 20px 0; }
.tight-list li{
  position: relative; padding-left: 22px; margin: 10px 0;
  font-size: 16px; line-height: 1.6; color: var(--fg-muted);
}
.tight-list li::before{
  content: ''; position: absolute; left: 0; top: 10px;
  width: 10px; height: 1px; background: var(--teal);
}
.tight-list li strong{ color: var(--fg); font-weight: 500; }
.tight-list--ordered{ counter-reset: li; }
.tight-list--ordered li{ padding-left: 36px; }
.tight-list--ordered li::before{ content: counter(li, decimal-leading-zero); counter-increment: li;
  position: absolute; left: 0; top: 0; width: 24px; height: auto; background: none;
  font-family: var(--font-mono); font-size: 11px; color: var(--teal); font-weight: 600; letter-spacing: .08em;
}

/* ---- PROCESS TIMELINE ---- */
.svc-process__timeline{
  margin-top: 40px;
  border-left: 1px solid var(--border);
  padding-left: 32px; margin-left: 8px;
  position: relative;
}
.svc-process__step{
  display:grid; grid-template-columns: 56px 1fr; gap: 24px;
  padding: 24px 0;
  position: relative;
}
.svc-process__step::before{
  content:''; position: absolute; left: -40px; top: 32px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--teal);
  box-shadow: 0 0 0 4px var(--bg), 0 0 16px color-mix(in srgb, var(--teal) 50%, transparent);
}
.svc-process__num{
  font-family: var(--font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .16em; color: var(--teal);
  padding-top: 4px;
}
.svc-process__content h3{
  font-size: 20px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--fg); margin: 0 0 8px;
}
.svc-process__content p{ font-size: 15.5px; line-height: 1.65; color: var(--fg-muted); max-width: 680px; }

/* ---- RELATED SERVICES ---- */
.svc-related__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px; margin-top: 40px;
}
.svc-related__card{
  display:block; padding: 28px; border: 1px solid var(--border); border-radius: 12px;
  text-decoration: none; color: var(--fg); background: var(--bg);
  transition: all 280ms var(--ease-out);
  position: relative; overflow: hidden;
}
.svc-related__card::before{
  content:''; position: absolute; inset:0;
  background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 50%);
  opacity: 0; transition: opacity 300ms;
}
.svc-related__card:hover{ border-color: var(--teal); transform: translateY(-4px); box-shadow: 0 20px 40px color-mix(in srgb, var(--fg) 10%, transparent); }
.svc-related__card:hover::before{ opacity: 1; }
.svc-related__card-name{
  font-size: 18px; font-weight: 500; letter-spacing: -0.015em;
  margin-bottom: 8px; position: relative;
}
.svc-related__card-desc{
  font-size: 14px; line-height: 1.55; color: var(--fg-muted);
  margin-bottom: 18px; position: relative;
}
.svc-related__card-link{
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--teal); font-weight: 500;
  position: relative;
}

/* ---- FINAL CTA (service) ---- */
.svc-final{ padding: clamp(80px, 10vw, 140px) 0; text-align:center; }
.svc-final__kicker{
  display:inline-flex; align-items:center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 20px;
}
.svc-final__kicker::before, .svc-final__kicker::after{
  content:''; width: 32px; height: 1px; background: color-mix(in srgb, var(--teal) 40%, transparent);
}
.svc-final__headline{
  font-size: clamp(40px, 6vw, 72px); font-weight: 300; letter-spacing: -0.03em;
  line-height: 1.05; margin: 0 auto 20px; max-width: 880px; text-wrap: balance;
}
.svc-final__sub{
  font-size: clamp(16px, 1.4vw, 19px); color: var(--fg-muted); max-width: 620px;
  margin: 0 auto 32px; line-height: 1.6;
}
.svc-final__whisper{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--fg-muted); margin-top: 32px; opacity: .6;
}

/* ---- GTM MARKET CARDS ---- */
.svc-markets{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; margin-top: 32px; background: var(--border); border: 1px solid var(--border); }
.svc-market-card{ padding: 24px; background: var(--bg); position: relative; }
.svc-market-card__flag{
  display:inline-flex; align-items:center; justify-content:center;
  width: 36px; height: 36px; border-radius: 8px;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal); font-family: var(--font-mono); font-weight: 600; font-size: 11px;
  letter-spacing: .1em; margin-bottom: 14px;
}
.svc-market-card__name{ font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
.svc-market-card p{ font-size: 13.5px; line-height: 1.55; color: var(--fg-muted); }


/* ===========================================================================
   WEB DESIGN PAGE  ·  live wow demonstrations
   =========================================================================== */

.page--web-design{ position: relative; }

/* WD hero */
.wd-hero{
  position: relative; overflow: hidden;
  padding: clamp(96px, 12vw, 160px) 0 clamp(96px, 10vw, 140px);
  background: var(--bg);
}
.wd-hero__bg{ position: absolute; inset:0; pointer-events: none; z-index: 0; }
.wd-hero__grid{
  position: absolute; inset:0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 85%);
}
.wd-hero__gradient{
  position: absolute; border-radius: 50%; filter: blur(100px);
}
.wd-hero__gradient--1{
  width: 700px; height: 700px; top: -200px; left: -160px;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 28%, transparent), transparent 60%);
  animation: wdFloat1 22s ease-in-out infinite;
}
.wd-hero__gradient--2{
  width: 620px; height: 620px; bottom: -220px; right: -140px;
  background: radial-gradient(circle, color-mix(in srgb, #8B5CF6 24%, transparent), transparent 60%);
  animation: wdFloat2 26s ease-in-out infinite;
}
@keyframes wdFloat1{ 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(60px,40px) } }
@keyframes wdFloat2{ 0%,100%{ transform: translate(0,0) } 50%{ transform: translate(-40px,-60px) } }

.wd-hero__sparkles{ position:absolute; inset:0; pointer-events:none; }
.wd-sparkle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: var(--teal); opacity: 0;
  box-shadow: 0 0 10px var(--teal);
  animation: wdSparkle 6s ease-in-out infinite;
}
.wd-sparkle--1{ top: 20%; left: 15%; animation-delay: 0s; }
.wd-sparkle--2{ top: 35%; right: 20%; animation-delay: -1s; }
.wd-sparkle--3{ top: 50%; left: 45%; animation-delay: -2s; }
.wd-sparkle--4{ top: 65%; left: 25%; animation-delay: -3s; }
.wd-sparkle--5{ top: 80%; right: 15%; animation-delay: -4s; }
.wd-sparkle--6{ top: 12%; left: 60%; animation-delay: -.5s; }
.wd-sparkle--7{ top: 40%; right: 35%; animation-delay: -1.5s; }
.wd-sparkle--8{ top: 70%; left: 70%; animation-delay: -2.5s; }
.wd-sparkle--9{ top: 25%; right: 50%; animation-delay: -3.5s; }
.wd-sparkle--10{ top: 85%; right: 45%; animation-delay: -4.5s; }
.wd-sparkle--11{ top: 55%; right: 8%; animation-delay: -5s; }
.wd-sparkle--12{ top: 18%; left: 35%; animation-delay: -5.5s; }
.wd-sparkle--13{ top: 78%; left: 55%; animation-delay: -1.2s; }
.wd-sparkle--14{ top: 45%; left: 8%; animation-delay: -3.2s; }
@keyframes wdSparkle{ 0%,100%{ opacity: 0; transform: scale(.5); } 50%{ opacity: .9; transform: scale(1.4); } }

.wd-hero .container{ position: relative; z-index: 2; }
.wd-hero__eyebrow{
  display:inline-flex; align-items:center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--fg-muted);
  margin: 24px 0 32px;
}
.wd-hero__num{ color: var(--teal); font-weight: 600; }
.wd-hero__sep{ width: 40px; height: 1px; background: var(--border); }

.wd-hero__headline{
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(56px, 10vw, 128px);
  line-height: .98; letter-spacing: -0.045em;
  color: var(--fg); margin: 0 0 32px; max-width: 960px;
}
.wd-hero__line{ display: block; }
.wd-hero__line--glow{
  background: linear-gradient(120deg, var(--fg) 0%, var(--teal) 50%, var(--fg) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500; font-style: italic;
  animation: wdShine 6s ease-in-out infinite;
}
@keyframes wdShine{ 0%,100%{ background-position: 0% 50%; } 50%{ background-position: 100% 50%; } }

.wd-hero__lede{
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.6;
  color: var(--fg-muted); max-width: 720px;
  margin: 0 0 40px; font-weight: 350;
}
.wd-hero__ctas{ display:flex; gap: 12px; flex-wrap: wrap; }
.wd-hero__scroll-hint{
  position: absolute; bottom: -50px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items:center; gap: 10px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--fg-muted); opacity: .5;
}
.wd-hero__scroll-line{
  display:block; width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--fg-muted), transparent);
  animation: wdScroll 2s ease-in-out infinite;
}
@keyframes wdScroll{ 0%,100%{ transform-origin: top; transform: scaleY(.5); } 50%{ transform: scaleY(1); } }

/* WD showcase */
.wd-showcase{ padding: clamp(80px, 8vw, 120px) 0; }
.wd-showcase__grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px; margin-top: 48px;
}
.wd-showcase__card{
  position: relative;
  padding: 40px 32px 36px;
  border-radius: 18px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 400ms var(--ease-out), border-color 400ms, box-shadow 400ms;
  cursor: default;
}
.wd-showcase__card:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: var(--teal);
  box-shadow: 0 30px 80px color-mix(in srgb, var(--teal) 20%, transparent);
}
.wd-showcase__eyeglow{
  position: absolute; pointer-events: none;
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 18%, transparent), transparent 60%);
  top: 50%; left: 50%; transform: translate(-50%, -50%) scale(.3);
  opacity: 0; transition: opacity 500ms, transform 700ms;
}
.wd-showcase__card:hover .wd-showcase__eyeglow{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
.wd-showcase__chip{
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--teal); font-weight: 500;
  padding: 6px 10px; border-radius: 6px;
  background: color-mix(in srgb, var(--teal) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 25%, transparent);
  margin-bottom: 18px;
  position: relative;
}
.wd-showcase__card h3{
  font-size: 22px; font-weight: 500; letter-spacing: -0.02em;
  color: var(--fg); margin: 0 0 12px;
  position: relative;
}
.wd-showcase__card p{
  font-size: 14.5px; line-height: 1.65; color: var(--fg-muted);
  position: relative;
}

/* WD performance meters */
.wd-perf__meters{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px; margin-top: 48px; align-items: center;
}
.wd-perf__meter{
  display: flex; align-items: center; gap: 20px;
}
.wd-perf__ring{
  position: relative;
  width: 120px; height: 120px;
  flex-shrink: 0;
  color: var(--fg-muted);
}
.wd-perf__value{
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 300; font-size: 32px;
  letter-spacing: -0.02em; color: var(--fg);
}
.wd-perf__name{ font-size: 17px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 4px; }
.wd-perf__note{ font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); }
.wd-perf__note-row{ margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--border); text-align: center; }
.wd-perf__note-row p{ font-size: 15px; color: var(--fg-muted); max-width: 640px; margin: 0 auto; line-height: 1.6; }

/* WD build grid bordered */
.service-grid.service-grid--bordered{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0; border-top: 1px solid var(--border); border-left: 1px solid var(--border); margin-top: 40px;
}
.service-grid.service-grid--bordered .service-card--static{
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 28px; border-radius: 0; background: var(--bg); transition: background 280ms;
}
.service-grid.service-grid--bordered .service-card--static:hover{
  background: color-mix(in srgb, var(--teal) 3%, var(--bg));
}

/* WD design system */
.wd-system__grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; margin-top: 48px; }
.wd-system__col h3{ font-size: 14px; font-family: var(--font-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--teal); font-weight: 500; margin-bottom: 20px; }
.wd-type-sample{ margin-bottom: 14px; }
.wd-type-sample--display{ font-family: var(--font-sans); font-weight: 300; font-size: 48px; letter-spacing: -0.035em; line-height: 1; }
.wd-type-sample--body{ font-size: 16px; line-height: 1.7; color: var(--fg-muted); font-weight: 350; }
.wd-type-sample--mono{ font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; color: var(--fg-muted); }
.wd-system__swatches{ display:flex; flex-direction: column; gap: 8px; }
.wd-swatch{
  padding: 16px 18px; border-radius: 10px;
  display:flex; justify-content:space-between; align-items:center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 500;
  transition: transform 240ms;
}
.wd-swatch:hover{ transform: translateX(4px); }
.wd-motion-demo{
  display:flex; flex-direction: column; gap: 10px; margin-bottom: 20px;
  padding: 24px 0;
}
.wd-motion-bar{
  height: 3px; background: var(--teal); border-radius: 2px; transform-origin: left;
  animation: wdBar 4s ease-in-out infinite;
}
.wd-motion-bar--1{ width: 60%; animation-delay: 0s; }
.wd-motion-bar--2{ width: 80%; animation-delay: -.4s; }
.wd-motion-bar--3{ width: 45%; animation-delay: -.8s; }
.wd-motion-bar--4{ width: 70%; animation-delay: -1.2s; }
@keyframes wdBar{ 0%,100%{ opacity: .4; transform: scaleX(.4); } 50%{ opacity: 1; transform: scaleX(1); } }
.wd-motion-note{ font-size: 13px; line-height: 1.55; color: var(--fg-muted); }


/* ===========================================================================
   APRIL 2026 v5 · Philosophy block · MAX cinematic bold + attention effects
   =========================================================================== */

/* Override the base weight/size to be dramatically bolder & larger.
   Uses higher specificity to beat earlier rules without !important spam. */
.section--quote .quote__text.quote__text--bold{
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 88px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #fff;
  max-width: 1120px;
  text-wrap: balance;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}

/* Spacing between the two lines */
.section--quote .quote__text--bold .quote__line{
  display:block;
  margin: 0 0 28px;
  opacity: 0;
  transform: translateY(32px);
  filter: blur(6px);
  transition:
    opacity 1100ms cubic-bezier(.22,1,.36,1),
    transform 1100ms cubic-bezier(.22,1,.36,1),
    filter 1100ms cubic-bezier(.22,1,.36,1);
}
.section--quote.is-visible .quote__text--bold .quote__line--1{
  opacity: 1; transform: none; filter: blur(0);
  transition-delay: 120ms;
}
.section--quote.is-visible .quote__text--bold .quote__line--2{
  opacity: 1; transform: none; filter: blur(0);
  transition-delay: 520ms;
}

/* Regular emphasis words: pop against the line on reveal */
.section--quote .quote__text--bold .quote__word{
  display: inline-block;
  font-weight: 900;
  position: relative;
  color: #fff;
  will-change: transform, opacity;
}

/* OLD (strikethrough) — fades in muted, then a teal line slashes through */
.section--quote .quote__text--bold .quote__word--strike{
  color: rgba(255,255,255,.42);
  text-decoration: none; /* we animate our own strike */
  position: relative;
}
.section--quote .quote__text--bold .quote__word--strike::after{
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  top: 52%;
  height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--teal) 15%, var(--teal) 85%, transparent 100%);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 700ms cubic-bezier(.65,0,.35,1) 900ms;
  box-shadow: 0 0 20px rgba(0,178,169,.55);
}
.section--quote.is-visible .quote__text--bold .quote__word--strike::after{
  transform: scaleX(1);
}

/* NEW (teal w/ glow + underline sweep) — the pivotal word */
.section--quote .quote__text--bold .quote__word--new{
  color: #19d6cd;
  text-shadow:
    0 0 24px rgba(0,178,169,.55),
    0 0 60px rgba(0,178,169,.28);
  animation: philoNewPulse 3.2s ease-in-out 1400ms infinite;
}
.section--quote .quote__text--bold .quote__word--new::after{
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1000ms cubic-bezier(.22,1,.36,1) 1100ms;
  box-shadow: 0 0 24px rgba(0,178,169,.75);
}
.section--quote.is-visible .quote__text--bold .quote__word--new::after{
  transform: scaleX(1);
}
@keyframes philoNewPulse{
  0%,100%{ text-shadow: 0 0 24px rgba(0,178,169,.45), 0 0 60px rgba(0,178,169,.22); }
  50%    { text-shadow: 0 0 36px rgba(0,178,169,.85), 0 0 90px rgba(0,178,169,.45); }
}

/* CHOSEN (teal · climax word) — largest glow + shimmer sweep */
.section--quote .quote__text--bold .quote__word--teal{
  color: #1fe6dc;
  font-weight: 900;
  letter-spacing: -0.03em;
  text-shadow:
    0 0 28px rgba(0,178,169,.75),
    0 0 80px rgba(0,178,169,.4),
    0 0 140px rgba(0,178,169,.25);
  background: linear-gradient(
    100deg,
    #1fe6dc 0%,
    #7fffef 45%,
    #1fe6dc 55%,
    #1fe6dc 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: philoShimmer 4s ease-in-out 1600ms infinite;
}
@keyframes philoShimmer{
  0%,100%{ background-position: 0% 50%; }
  50%    { background-position: 100% 50%; }
}

/* Individual-word entrance stagger inside line 2 for dramatic reveal */
.section--quote .quote__text--bold .quote__line--2 .quote__word{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms cubic-bezier(.22,1,.36,1),
              transform 700ms cubic-bezier(.22,1,.36,1);
}
.section--quote.is-visible .quote__text--bold .quote__line--2 .quote__word{
  opacity: 1; transform: none;
}
.section--quote.is-visible .quote__text--bold .quote__line--2 .quote__word:nth-of-type(1){ transition-delay: 760ms; }
.section--quote.is-visible .quote__text--bold .quote__line--2 .quote__word:nth-of-type(2){ transition-delay: 920ms; }
.section--quote.is-visible .quote__text--bold .quote__line--2 .quote__word:nth-of-type(3){ transition-delay: 1080ms; }
.section--quote.is-visible .quote__text--bold .quote__line--2 .quote__word:nth-of-type(4){ transition-delay: 1260ms; }

/* Stronger kicker: small shimmer + animated lines */
.section--quote .quote__kicker{
  position: relative;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 700ms var(--ease-out) 80ms, transform 700ms var(--ease-out) 80ms;
}
.section--quote.is-visible .quote__kicker{ opacity: 1; transform: none; }
.section--quote .quote__kicker-line{
  width: 56px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,178,169,.8), transparent);
}

/* Footer mark: soft scale-in */
.section--quote .quote__footer{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 900ms var(--ease-out) 1400ms, transform 900ms var(--ease-out) 1400ms;
}
.section--quote.is-visible .quote__footer{ opacity: 1; transform: none; }

/* Extra breathing padding on the quote section */
.section--quote{ padding: 200px 0 220px; }
@media (max-width: 760px){
  .section--quote{ padding: 120px 0 140px; }
  .section--quote .quote__text.quote__text--bold{
    font-size: clamp(30px, 8.5vw, 46px);
    line-height: 1.12;
    letter-spacing: -0.025em;
  }
  .section--quote .quote__text--bold .quote__line{ margin-bottom: 18px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .section--quote .quote__text--bold .quote__word--new,
  .section--quote .quote__text--bold .quote__word--teal{ animation: none !important; }
  .section--quote .quote__text--bold .quote__line,
  .section--quote .quote__text--bold .quote__line--2 .quote__word,
  .section--quote .quote__kicker,
  .section--quote .quote__footer{
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===========================================================================
   APRIL 2026 v6 · Floating actions · Service hero v2 · AI chips · Contact routes
   Insight thumbnails · Mobile polish · Footer social link
   =========================================================================== */

/* ---------- Floating WhatsApp button ---------- */
.float-whatsapp{
  position: fixed;
  left: 20px; bottom: 24px;
  z-index: 80;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px;
  background: #25D366;
  color: #fff;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  letter-spacing: -0.005em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 12px 32px rgba(37, 211, 102, 0.35), 0 2px 6px rgba(0,0,0,.2);
  transform: translateY(0);
  transition: transform 220ms var(--ease-out), box-shadow 220ms var(--ease-out), opacity 220ms var(--ease-out);
  opacity: 0; pointer-events: none;
}
.float-whatsapp.is-ready{ opacity: 1; pointer-events: auto; }
.float-whatsapp:hover{
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 18px 40px rgba(37, 211, 102, 0.5), 0 4px 12px rgba(0,0,0,.25);
  color: #fff;
}
.float-whatsapp:active{ transform: translateY(-1px) scale(1.01); }
.float-whatsapp__icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.18);
  border-radius: 50%;
  position: relative;
}
.float-whatsapp__pulse{
  position: absolute;
  inset: -2px;
  border-radius: 999px;
  background: transparent;
  box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
  animation: waPulse 2.6s ease-out infinite;
  pointer-events: none;
}
@keyframes waPulse{
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}
.float-whatsapp__label{ white-space: nowrap; }

@media (max-width: 600px){
  .float-whatsapp{ padding: 10px; gap: 0; }
  .float-whatsapp__label{ display: none; }
}

/* ---------- Back to top ---------- */
.back-to-top{
  position: fixed;
  right: 20px; bottom: 24px;
  z-index: 80;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(0,178,169,0.45);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--teal);
  border-radius: 50%;
  cursor: pointer;
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out), border-color 180ms, background 180ms;
  box-shadow: 0 8px 24px rgba(0,0,0,.2), 0 0 0 0 rgba(0,178,169,0);
}
[data-theme="dark"] .back-to-top{
  background: rgba(10,10,10,0.55);
  border-color: rgba(0,178,169,0.55);
}
.back-to-top.is-visible{ opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover{
  background: rgba(0,178,169,0.1);
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(0,178,169,0.25), 0 0 0 4px rgba(0,178,169,0.08);
}
.back-to-top:focus-visible{
  outline: 2px solid var(--teal); outline-offset: 4px;
}
.back-to-top__mark{
  position: absolute;
  opacity: 0.3;
  transition: opacity 200ms;
}
.back-to-top__arrow{
  display: inline-flex;
  position: relative; z-index: 2;
}
.back-to-top:hover .back-to-top__mark{ opacity: 0.55; }

@media (max-width: 600px){
  .back-to-top{ width: 44px; height: 44px; right: 16px; bottom: 88px; }
  .float-whatsapp{ left: 16px; bottom: 16px; }
}

/* ---------- Service hero v2 (bolder, shared across all service pages) ---------- */
.svc-hero{
  position: relative;
  padding: 160px 0 80px;
  overflow: hidden;
  isolation: isolate;
}
.svc-hero__bg{
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.svc-hero__grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,178,169,0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,178,169,0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 90%);
}
.svc-hero__orb{
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  pointer-events: none;
  animation: svcOrb 14s ease-in-out infinite;
}
.svc-hero__orb--1{ width: 560px; height: 560px; top: -160px; left: -140px; background: radial-gradient(circle, rgba(0,178,169,0.48), transparent 70%); }
.svc-hero__orb--2{ width: 640px; height: 640px; bottom: -220px; right: -180px; background: radial-gradient(circle, rgba(120,80,255,0.22), transparent 70%); animation-delay: -7s; }
@keyframes svcOrb{
  0%,100%{ transform: translate(0,0) scale(1); }
  50%    { transform: translate(40px,-30px) scale(1.08); }
}
/* Per-service hero tinting */
.svc-hero--geo .svc-hero__orb--1,
.svc-hero--aeo .svc-hero__orb--1{ background: radial-gradient(circle, rgba(0,178,169,0.55), transparent 70%); }
.svc-hero--aeo .svc-hero__orb--2{ background: radial-gradient(circle, rgba(74,154,255,0.28), transparent 70%); }
.svc-hero--ppc .svc-hero__orb--1{ background: radial-gradient(circle, rgba(255,179,71,0.42), transparent 70%); }
.svc-hero--ppc .svc-hero__orb--2{ background: radial-gradient(circle, rgba(255,64,129,0.28), transparent 70%); }
.svc-hero--content .svc-hero__orb--1{ background: radial-gradient(circle, rgba(168,85,247,0.42), transparent 70%); }
.svc-hero--gtm .svc-hero__orb--1{ background: radial-gradient(circle, rgba(74,222,128,0.38), transparent 70%); }
.svc-hero--seo .svc-hero__orb--1{ background: radial-gradient(circle, rgba(0,178,169,0.55), transparent 70%); }

/* Sparkles */
.svc-hero__sparkles{ position: absolute; inset: 0; pointer-events: none; }
.svc-sparkle{
  position: absolute; width: 4px; height: 4px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0,178,169,0.8);
  opacity: 0;
  animation: sparkle 6s ease-in-out infinite;
}
.svc-sparkle--1 { top:12%; left:8%;  animation-delay: 0s; }
.svc-sparkle--2 { top:22%; left:88%; animation-delay: 1.2s; }
.svc-sparkle--3 { top:40%; left:12%; animation-delay: 2.4s; }
.svc-sparkle--4 { top:55%; left:82%; animation-delay: 0.8s; }
.svc-sparkle--5 { top:68%; left:18%; animation-delay: 3.2s; }
.svc-sparkle--6 { top:75%; left:72%; animation-delay: 4s; }
.svc-sparkle--7 { top:28%; left:42%; animation-delay: 2s; }
.svc-sparkle--8 { top:48%; left:58%; animation-delay: 3.6s; }
.svc-sparkle--9 { top:8%;  left:52%; animation-delay: 1.6s; }
.svc-sparkle--10{ top:85%; left:48%; animation-delay: 2.8s; }
.svc-sparkle--11{ top:35%; left:72%; animation-delay: 4.4s; }
.svc-sparkle--12{ top:60%; left:40%; animation-delay: 5s; }
@keyframes sparkle{
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 0.9; transform: scale(1.2); }
}

.svc-hero .container{ position: relative; z-index: 2; }
.svc-hero__eyebrow{
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal);
  margin: 20px 0 28px;
}
.svc-hero__num{ opacity: 0.8; }
.svc-hero__sep{ width: 28px; height: 1px; background: rgba(0,178,169,0.5); }

/* BOLD HERO HEADLINE, matches homepage 'Be Seen.' energy */
.svc-hero__headline,
.svc-hero__headline--bold{
  font-family: var(--font-sans);
  font-size: clamp(44px, 7.5vw, 108px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--fg);
  text-wrap: balance;
  max-width: 1100px;
  margin: 0;
}
.svc-hero__headline .svc-hero__line{
  display: block;
}
.svc-hero__headline .svc-hero__line--accent{
  background: linear-gradient(100deg, var(--teal) 0%, #7fffef 50%, var(--teal) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: svcHeroShimmer 5s ease-in-out infinite;
}
@keyframes svcHeroShimmer{
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.svc-hero__lede{
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.55;
  max-width: 720px;
  color: var(--fg-muted);
  margin: 28px 0 40px;
  font-weight: 400;
}

/* Hero CTA row */
.svc-hero__ctas{
  display: inline-flex; gap: 14px; flex-wrap: wrap;
  margin-top: 12px;
}

/* ---------- Hero visuals ---------- */
.svc-hero__visual{
  margin: 40px 0 48px;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0,178,169,0.04), rgba(0,0,0,0.0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: 820px;
}
[data-theme="dark"] .svc-hero__visual{
  background: linear-gradient(135deg, rgba(0,178,169,0.06), rgba(255,255,255,0.015));
  border-color: rgba(255,255,255,0.08);
}
.svc-visual__title{
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 20px;
}

/* === AI chips ring (GEO / AEO) ==================================== */
.svc-visual--ai .svc-visual__ring{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  position: relative;
}
.ai-chip{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.6);
  transition: transform 260ms var(--ease-out), border-color 200ms, box-shadow 200ms;
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .ai-chip{ background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); }
.ai-chip::before{
  content: '';
  position: absolute; inset: -1px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,178,169,0.25), transparent 60%);
  opacity: 0;
  transition: opacity 200ms;
  z-index: -1;
}
.ai-chip:hover{
  transform: translateY(-3px);
  border-color: rgba(0,178,169,0.5);
  box-shadow: 0 14px 30px rgba(0,178,169,0.18);
}
.ai-chip:hover::before{ opacity: 1; }
.ai-chip__icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--fg);
  flex-shrink: 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}
.ai-chip__icon img{ width: 22px; height: 22px; display: block; }
[data-theme="dark"] .ai-chip__icon{
  background: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 2px 6px rgba(0,0,0,0.3);
}
.ai-chip__label{
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--fg);
}
.svc-visual__core{
  display: none;
}
@media (max-width: 600px){
  .svc-visual--ai .svc-visual__ring{ grid-template-columns: repeat(2, 1fr); }
  .ai-chip__label{ font-size: 12px; }
}

/* === PPC channel bars =========================================== */
.ppc-channels{
  display: flex; flex-direction: column; gap: 12px;
}
.ppc-chan{
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 14px;
}
.ppc-chan__dot{
  display: none;
}
.ppc-chan__name{
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 600;
  color: var(--c, var(--teal));
  letter-spacing: 0.05em;
}
.ppc-chan__bar{
  display: block;
  height: 8px;
  background: rgba(0,0,0,0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
[data-theme="dark"] .ppc-chan__bar{ background: rgba(255,255,255,0.06); }
.ppc-chan__fill{
  display: block; height: 100%;
  background: var(--c, var(--teal));
  border-radius: 999px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: ppcFill 1.6s cubic-bezier(.22,1,.36,1) forwards;
  box-shadow: 0 0 12px color-mix(in srgb, var(--c, #00b2a9) 45%, transparent);
}
.ppc-chan--1 .ppc-chan__fill{ animation-delay: 0.1s; --w: 0.92; }
.ppc-chan--2 .ppc-chan__fill{ animation-delay: 0.2s; --w: 0.84; }
.ppc-chan--3 .ppc-chan__fill{ animation-delay: 0.3s; --w: 0.76; }
.ppc-chan--4 .ppc-chan__fill{ animation-delay: 0.4s; --w: 0.68; }
.ppc-chan--5 .ppc-chan__fill{ animation-delay: 0.5s; --w: 0.58; }
.ppc-chan--6 .ppc-chan__fill{ animation-delay: 0.6s; --w: 0.48; }
@keyframes ppcFill{
  to { transform: scaleX(var(--w, 0.7)); }
}

/* === Content layered stack ====================================== */
.content-stack{
  display: flex; flex-direction: column; gap: 8px;
  perspective: 800px;
}
.content-layer{
  padding: 14px 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(255,255,255,0.5);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.08em; font-weight: 600;
  color: var(--fg);
  transform-origin: center top;
  transform: translateX(var(--tx, 0)) rotate(var(--r, 0deg));
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  transition: transform 300ms var(--ease-out);
}
[data-theme="dark"] .content-layer{ background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); }
.content-layer--1{ --tx: 0px;   --r: 0deg; }
.content-layer--2{ --tx: 18px;  --r: 0.6deg; }
.content-layer--3{ --tx: 34px;  --r: 1.1deg; }
.content-layer--4{ --tx: 52px;  --r: 1.6deg; background: rgba(0,178,169,0.08); color: var(--teal); border-color: rgba(0,178,169,0.3); }
.svc-visual--content:hover .content-layer{ transform: translateX(0) rotate(0); }

/* === GTM orbit ================================================== */
.gtm-orbit{
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 2 / 1;
  margin: 0 auto;
}
.gtm-orbit__ring{
  position: absolute;
  left: 50%; top: 50%;
  border: 1px dashed rgba(0,178,169,0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: gtmRingSpin 30s linear infinite;
}
.gtm-orbit__ring--1{ width: 80%;  aspect-ratio: 2/1; }
.gtm-orbit__ring--2{ width: 60%;  aspect-ratio: 2/1; animation-duration: 20s; animation-direction: reverse; }
.gtm-orbit__ring--3{ width: 40%;  aspect-ratio: 2/1; animation-duration: 15s; }
@keyframes gtmRingSpin{ to { transform: translate(-50%, -50%) rotate(360deg); } }

.gtm-orbit__core{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,178,169,0.2), transparent 70%);
  border: 1px solid rgba(0,178,169,0.5);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--teal);
}
.gtm-orbit__satellite{
  position: absolute;
  padding: 6px 12px;
  border: 1px solid rgba(0,178,169,0.35);
  border-radius: 999px;
  background: rgba(255,255,255,0.7);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}
[data-theme="dark"] .gtm-orbit__satellite{ background: rgba(10,10,10,0.7); }
.gtm-orbit__satellite--1{ top: 10%;  left: 10%; }
.gtm-orbit__satellite--2{ top: 10%;  right: 10%; }
.gtm-orbit__satellite--3{ bottom: 10%; left: 18%; }
.gtm-orbit__satellite--4{ bottom: 10%; right: 18%; }

/* === SEO foundation stack ======================================= */
.seo-stack{
  display: flex; flex-direction: column; gap: 6px;
}
.seo-block{
  padding: 14px 18px;
  border-left: 3px solid var(--teal);
  background: rgba(0,178,169,0.04);
  border-radius: 0 10px 10px 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 12px; align-items: center;
  transition: transform 220ms;
}
.seo-block:hover{ transform: translateX(4px); background: rgba(0,178,169,0.08); }
[data-theme="dark"] .seo-block{ background: rgba(0,178,169,0.07); }
.seo-block__k{
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal);
}
.seo-block__d{
  font-family: var(--font-sans);
  font-size: 13px; color: var(--fg-muted);
}
.seo-block--1{ opacity: 0.6; }
.seo-block--2{ opacity: 0.72; }
.seo-block--3{ opacity: 0.85; }
.seo-block--4{ opacity: 1; border-left-width: 5px; font-weight: 700; }

/* ---------- Contact page: hero + route cards ---------- */
.contact-hero{
  position: relative; overflow: hidden;
  padding: 120px 0 60px;
}
.contact-hero__bg{
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.contact-hero__grid{
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(0,178,169,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,178,169,0.06) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 30%, transparent 90%);
}
.contact-hero__orb{
  position: absolute; border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
}
.contact-hero__orb--1{ width: 480px; height: 480px; top: -160px; left: -100px; background: radial-gradient(circle, rgba(0,178,169,0.5), transparent 70%); }
.contact-hero__orb--2{ width: 520px; height: 520px; bottom: -200px; right: -120px; background: radial-gradient(circle, rgba(120,80,255,0.22), transparent 70%); }
.contact-hero .container{ position: relative; z-index: 2; }
.contact-hero__headline{
  font-family: var(--font-sans);
  font-size: clamp(44px, 7.5vw, 108px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.04em;
  margin: 16px 0 24px;
}
.contact-hero__accent{
  background: linear-gradient(100deg, var(--teal) 0%, #7fffef 50%, var(--teal) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: svcHeroShimmer 5s ease-in-out infinite;
}
.contact-hero__meta{
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  display: inline-flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.contact-hero__dot{
  display: inline-block;
  width: 8px; height: 8px;
  background: #4ade80;
  border-radius: 50%;
  margin-right: 8px;
  box-shadow: 0 0 8px rgba(74,222,128,0.6);
  animation: dotPulse 2.2s ease-in-out infinite;
}
@keyframes dotPulse{
  0%,100%{ box-shadow: 0 0 6px rgba(74,222,128,0.4); }
  50%    { box-shadow: 0 0 14px rgba(74,222,128,0.9); }
}
.contact-hero__sep{ opacity: 0.4; }

.contact-routes-section h2{
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.contact-routes{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.contact-route{
  display: flex; flex-direction: column;
  padding: 28px 24px 24px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--fg);
  text-decoration: none;
  transition: transform 260ms var(--ease-out), border-color 200ms, box-shadow 200ms;
  position: relative;
  overflow: hidden;
}
.contact-route::before{
  content: '';
  position: absolute; left: 0; top: 0; right: 0;
  height: 3px;
  background: var(--c, var(--teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.contact-route:hover{
  transform: translateY(-4px);
  border-color: var(--c, var(--teal));
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
}
.contact-route:hover::before{ transform: scaleX(1); }
[data-theme="dark"] .contact-route:hover{ box-shadow: 0 16px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,178,169,0.3); }
.contact-route--services{ --c: #00b2a9; }
.contact-route--partners{ --c: #a855f7; }
.contact-route--founder { --c: #4a9aff; }
.contact-route--whatsapp{ --c: #25D366; }

.contact-route__head{
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-bottom: 20px;
}
.contact-route__tag{
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c, var(--teal));
  background: color-mix(in srgb, var(--c, #00b2a9) 14%, transparent);
  padding: 4px 10px;
  border-radius: 999px;
}
.contact-route__ico{
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: color-mix(in srgb, var(--c, #00b2a9) 10%, transparent);
  color: var(--c, var(--teal));
  border-radius: 10px;
}
.contact-route__title{
  font-size: 18px; font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  color: var(--fg);
}
.contact-route__desc{
  font-size: 14px; color: var(--fg-muted);
  line-height: 1.5;
  margin: 0 0 18px;
  flex: 1;
}
.contact-route__email{
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  color: var(--fg);
  word-break: break-all;
}
.contact-route__sla{
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-muted);
  margin: 4px 0 16px;
}
.contact-route__cta{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px; font-weight: 600;
  color: var(--c, var(--teal));
  margin-top: auto;
}
.contact-route__cta .arrow{
  transition: transform 200ms;
}
.contact-route:hover .contact-route__cta .arrow{ transform: translateX(4px); }

/* Contact form additions */
.form-hp{
  position: absolute !important;
  left: -9999px; top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.form-note{
  font-size: 12px; color: var(--fg-muted);
  line-height: 1.5;
  margin-top: 16px;
}
.contact-aside__card{
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg);
  margin-bottom: 16px;
}
.contact-aside__card--alt{
  background: rgba(0,178,169,0.04);
  border-color: rgba(0,178,169,0.25);
}
[data-theme="dark"] .contact-aside__card--alt{ background: rgba(0,178,169,0.07); }
.contact-aside__kicker{
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.contact-aside__bullets{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  font-size: 14px; color: var(--fg);
  line-height: 1.5;
}
.contact-aside__bullets li{
  padding-left: 20px;
  position: relative;
}
.contact-aside__bullets li::before{
  content: '';
  position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px;
  border: 1px solid var(--teal);
  border-radius: 50%;
}

/* ---------- Insight thumbnail defaults ---------- */
.insight-thumb{
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}
.insight-card__image{
  aspect-ratio: 5 / 3;
  overflow: hidden;
  position: relative;
  background: var(--bg-subtle);
  border-radius: 8px;
}
.insight-card__image .insight-thumb{
  transition: transform 600ms var(--ease-out);
}
.insight-card--published:hover .insight-card__image .insight-thumb{
  transform: scale(1.04);
}

/* ---------- Footer social bottom ---------- */
.footer-bottom__right{
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--fg-muted);
}
.footer-bottom__social{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--fg-muted);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 0.05em;
  transition: color 160ms;
}
.footer-bottom__social:hover{ color: var(--teal); }
.footer-bottom__social svg{ color: currentColor; }

/* ---------- Mobile responsive polish ---------- */
@media (max-width: 760px){
  .svc-hero{ padding: 110px 0 60px; }
  .svc-hero__headline,
  .svc-hero__headline--bold{
    font-size: clamp(36px, 10vw, 56px);
    line-height: 1.04;
  }
  .svc-hero__lede{ font-size: 16px; }
  .svc-hero__ctas{ flex-direction: column; align-items: stretch; }
  .svc-hero__ctas > *{ width: 100%; justify-content: center; }
  .svc-hero__visual{ padding: 20px; margin-top: 32px; }
  .svc-visual--ai .svc-visual__ring{ grid-template-columns: 1fr 1fr; }
  .ai-chip{ padding: 10px; gap: 8px; }
  .ai-chip__label{ font-size: 11px; }
  .seo-block{ grid-template-columns: 110px 1fr; font-size: 12px; }
  .ppc-chan{ grid-template-columns: 96px 1fr; }

  .contact-hero{ padding: 96px 0 40px; }
  .contact-hero__headline{ font-size: clamp(36px, 11vw, 56px); }
  .contact-routes{ grid-template-columns: 1fr; }

  .mobile-overlay__nav a{ font-size: 28px; }
}

/* Tighter section padding on phones */
@media (max-width: 600px){
  .section{ padding: 64px 0; }
  .svc-hero{ padding: 96px 0 40px; }
  .svc-hero__headline{ font-size: 40px; }
  h1{ letter-spacing: -0.02em; }
  .industry-grid{ grid-template-columns: 1fr !important; }
  .stat-grid, .metrics-scroll{ grid-template-columns: 1fr !important; }
}

/* Ensure mobile menu overlay covers screen + close on link click */
.mobile-overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mobile-overlay.is-open,
.mobile-overlay.mobile-overlay--open{ transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ---------- Ensure links inside overlay are tap-friendly ---------- */
.mobile-overlay__nav a{
  display: block;
  padding: 14px 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}


/* ===========================================================================
   v6 · WhatsApp button (brand-themed, smaller) + Back-to-top refinement
   =========================================================================== */
/* Override earlier float-whatsapp rules with brand-teal theme + compact size */
.float-whatsapp{
  padding: 8px 14px 8px 8px !important;
  background: linear-gradient(135deg, var(--teal, #00b2a9) 0%, #007c77 100%) !important;
  color: #fff !important;
  box-shadow: 0 8px 22px rgba(0, 178, 169, 0.28), 0 2px 6px rgba(0,0,0,.18) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.005em !important;
  gap: 8px !important;
  left: auto !important;
  right: 20px !important;
  bottom: 88px !important;        /* Sits above the back-to-top button */
  border: 1px solid rgba(255,255,255,0.08);
}
.float-whatsapp:hover{
  box-shadow: 0 14px 32px rgba(0, 178, 169, 0.42), 0 4px 10px rgba(0,0,0,.22) !important;
}
.float-whatsapp__icon{
  width: 26px !important;
  height: 26px !important;
  background: rgba(255,255,255,0.16) !important;
}
.float-whatsapp__icon svg{ width: 16px; height: 16px; }
.float-whatsapp__pulse{
  animation: waPulseTeal 2.8s ease-out infinite !important;
}
@keyframes waPulseTeal{
  0%   { box-shadow: 0 0 0 0 rgba(0,178,169,0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(0,178,169,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,178,169,0); }
}
.float-whatsapp__label{ font-size: 12px; }
@media (max-width: 640px){
  .float-whatsapp{
    right: 14px !important;
    bottom: 76px !important;
    padding: 8px !important;
  }
  .float-whatsapp__label{ display: none !important; }
  .back-to-top{ right: 14px !important; bottom: 20px !important; }
}

/* ===========================================================================
   v6 · MOBILE MENU, fully polished
   =========================================================================== */
/* Hamburger icon: upgrade to 3 bars with animated transform on open */
.mobile-menu-btn{
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  gap: 5px;
  transition: background 180ms var(--ease);
  touch-action: manipulation;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  z-index: 10000;
}
.mobile-menu-btn:hover{ background: var(--fg-subtle, rgba(0,0,0,0.04)); }
.mobile-menu-btn span{
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--fg);
  transition: transform 320ms var(--ease), opacity 200ms var(--ease), background 200ms var(--ease);
  transform-origin: center;
  pointer-events: none; /* clicks always hit the button itself */
}
.mobile-menu-btn[aria-expanded="true"] span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.mobile-menu-btn[aria-expanded="true"] span:nth-child(2){
  transform: translateY(-0px) rotate(-45deg);
}

/* Make sure mobile menu shows at the right breakpoint and is visible on dark header */
[data-theme="dark"] .mobile-menu-btn span{ background: #fff; }

/* Overlay: smoother enter, proper safe-area padding, structured nav + CTA */
.mobile-overlay{
  background: radial-gradient(ellipse 80% 60% at 50% 20%, rgba(0,178,169,0.18), transparent 60%), #050505 !important;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: blur(6px);
}
.mobile-overlay__close{
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  width: 44px;
  height: 44px;
  font-size: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  transition: background 180ms var(--ease), transform 180ms var(--ease);
}
.mobile-overlay__close:hover{
  background: rgba(255,255,255,0.12);
  transform: rotate(90deg);
}
.mobile-overlay__nav{
  gap: 4px;
  padding-top: 64px;
  padding-bottom: 24px;
  justify-content: flex-start;
  align-items: stretch;
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.mobile-overlay__nav a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4px;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  color: rgba(255,255,255,0.95);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  letter-spacing: -0.02em;
  transition: color 180ms var(--ease), padding 180ms var(--ease);
  position: relative;
}
.mobile-overlay__nav a::after{
  content: "→";
  font-size: 18px;
  font-weight: 300;
  color: var(--teal, #00b2a9);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 220ms var(--ease), transform 220ms var(--ease);
}
.mobile-overlay__nav a:hover::after,
.mobile-overlay__nav a:active::after,
.mobile-overlay__nav a:focus::after{
  opacity: 1; transform: translateX(0);
}
.mobile-overlay__nav a:hover{ color: var(--teal, #00b2a9); padding-left: 8px; }
.mobile-overlay__footer{
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
  padding: 18px 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: rgba(255,255,255,0.55);
  font-size: 13px;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-overlay__footer a{
  color: rgba(255,255,255,0.88);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-sans);
  font-size: 14px;
}
.mobile-overlay__cta{
  padding-top: 8px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  max-width: 520px;
  margin: 0 auto;
  width: 100%;
}
.mobile-overlay__cta .cta{
  display: flex;
  justify-content: center;
  width: 100%;
}
/* Slight stagger animation on nav items when menu opens */
.mobile-overlay--open .mobile-overlay__nav a{
  animation: mobileNavIn 420ms var(--ease) both;
}
.mobile-overlay--open .mobile-overlay__nav a:nth-child(1){ animation-delay: 80ms; }
.mobile-overlay--open .mobile-overlay__nav a:nth-child(2){ animation-delay: 140ms; }
.mobile-overlay--open .mobile-overlay__nav a:nth-child(3){ animation-delay: 200ms; }
.mobile-overlay--open .mobile-overlay__nav a:nth-child(4){ animation-delay: 260ms; }
.mobile-overlay--open .mobile-overlay__nav a:nth-child(5){ animation-delay: 320ms; }
@keyframes mobileNavIn{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Body scroll lock helper */
body.menu-open{ overflow: hidden; }

/* ===========================================================================
   v6 · SERVICES PAGE, rich grid + system + CTA
   =========================================================================== */
.page--services .page-hero--dark{
  background: #050505;
  color: #fff;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}
.page--services .page-hero--dark::before{
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 60% at 20% 10%, rgba(0,178,169,0.18), transparent 60%),
    radial-gradient(ellipse 50% 50% at 80% 90%, rgba(0,178,169,0.10), transparent 60%);
  pointer-events: none;
}
.page--services .page-hero--dark .container{ position: relative; z-index: 1; }
.page--services .page-hero h1{
  font-size: clamp(44px, 7vw, 96px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.02;
  margin: 24px 0 20px;
  max-width: 1000px;
}
.page--services .page-hero h1 em{ font-style: normal; }
.page--services .page-hero__lede{
  max-width: 780px;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  color: rgba(255,255,255,0.75);
  font-weight: 300;
}
.page--services .page-hero__lede strong{
  color: #fff;
  font-weight: 600;
}
.page--services .page-hero__meta{
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin-top: 28px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.page--services .page-hero__meta .hero__meta-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal, #00b2a9);
  box-shadow: 0 0 10px rgba(0,178,169,0.6);
  display: inline-block;
  margin-right: 8px;
}

/* System strip */
.services-system{ padding: 120px 0 60px; }
.services-system__head{
  text-align: center;
  max-width: 780px;
  margin: 0 auto 48px;
}
.services-system__head .eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--teal, #00b2a9); margin-bottom: 18px;
}
.services-system__head .eyebrow__line{
  width: 32px; height: 1px; background: var(--teal, #00b2a9);
}
.services-system__head h2{
  font-size: clamp(28px, 4vw, 52px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin-bottom: 16px;
}
.services-system__head p{
  color: var(--fg-muted, rgba(0,0,0,0.6));
  font-size: 17px;
  line-height: 1.65;
}
.services-system__orbital{ margin-top: 40px; }

/* Rich service grid */
.services-grid-section{ padding: 80px 0 120px; }
.services-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 1024px){ .services-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .services-grid{ grid-template-columns: 1fr; } }

.service-card{
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px;
  min-height: 340px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 280ms var(--ease-out), border-color 280ms var(--ease-out), box-shadow 280ms var(--ease-out), background 280ms var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}
.service-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal, #00b2a9), transparent);
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
}
.service-card::after{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 0%), rgba(0,178,169,0.10), transparent 50%);
  opacity: 0;
  transition: opacity 280ms var(--ease-out);
  pointer-events: none;
  z-index: 0;
}
.service-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,178,169,0.45);
  box-shadow: 0 16px 40px rgba(0, 178, 169, 0.10), 0 2px 6px rgba(0,0,0,0.04);
}
.service-card:hover::before{ opacity: 1; }
.service-card:hover::after{ opacity: 1; }
.service-card > *{ position: relative; z-index: 1; }

[data-theme="dark"] .service-card{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
[data-theme="dark"] .service-card:hover{
  background: rgba(255,255,255,0.05);
  border-color: rgba(0,178,169,0.45);
}

.service-card__top{
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 20px;
}
.service-card__num{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--fg-muted, rgba(0,0,0,0.45));
}
.service-card__icon{
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--teal, #00b2a9);
  background: rgba(0,178,169,0.08);
  border-radius: 12px;
  transition: transform 400ms var(--ease-out), background 280ms var(--ease-out);
}
.service-card:hover .service-card__icon{
  transform: rotate(-6deg) scale(1.05);
  background: rgba(0,178,169,0.16);
}
.service-card__body{ flex: 1; }
.service-card__name{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.service-card__tagline{
  font-size: 14px;
  font-weight: 500;
  color: var(--teal, #00b2a9);
  margin-bottom: 14px;
  letter-spacing: -0.005em;
}
.service-card__desc{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-muted, rgba(0,0,0,0.68));
  margin-bottom: 18px;
}
.service-card__outcomes{
  list-style: none;
  padding: 0; margin: 0 0 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.service-card__outcomes li{
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--fg, #111);
  font-weight: 500;
}
[data-theme="dark"] .service-card__outcomes li{ color: rgba(255,255,255,0.85); }
.service-card__tick{
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,178,169,0.14);
  color: var(--teal, #00b2a9);
  flex-shrink: 0;
}
.service-card__foot{
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  padding-top: 16px;
  margin-top: auto;
}
[data-theme="dark"] .service-card__foot{ border-top-color: rgba(255,255,255,0.08); }
.service-card__cta{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--teal, #00b2a9);
  letter-spacing: 0.005em;
  transition: gap 200ms var(--ease);
}
.service-card__cta .arrow{ transition: transform 200ms var(--ease); }
.service-card:hover .service-card__cta .arrow{ transform: translateX(4px); }

/* Why integrated strip */
.services-why{
  padding: 100px 0;
  background: var(--bg-alt, #fafafa);
}
[data-theme="dark"] .services-why{ background: rgba(255,255,255,0.015); }
.services-why__grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 960px){ .services-why__grid{ grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (max-width: 560px){ .services-why__grid{ grid-template-columns: 1fr; } }
.services-why__block{
  position: relative;
  padding: 28px 4px;
  border-top: 1px solid var(--border, rgba(0,0,0,0.08));
}
.services-why__k{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--teal, #00b2a9);
  margin-bottom: 14px;
}
.services-why__block h4{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
}
.services-why__block p{
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-muted, rgba(0,0,0,0.65));
}
[data-theme="dark"] .services-why__block{ border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .services-why__block p{ color: rgba(255,255,255,0.65); }

/* Final CTA polish, ensure subline + headline align correctly */
.section--final-cta .subline{
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.6;
  color: var(--fg-muted, rgba(0,0,0,0.7));
}
[data-theme="dark"] .section--final-cta .subline{ color: rgba(255,255,255,0.7); }
.section--final-cta .final-cta__buttons{ justify-content: center; }

/* ===========================================================================
   v6 · AI CHIP icons (GEO/AEO hero) with per-chip accent color
   =========================================================================== */
.ai-chip{
  --chip-accent: var(--teal, #00b2a9);
  border-color: rgba(255,255,255,0.12);
}
.ai-chip:hover{
  border-color: color-mix(in srgb, var(--chip-accent) 55%, transparent);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--chip-accent) 20%, transparent);
}
.ai-chip__icon{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
}
.ai-chip:hover .ai-chip__icon{
  background: color-mix(in srgb, var(--chip-accent) 15%, transparent);
}

/* ===========================================================================
   v6 · ARTICLE SHARE BAR, social + print + share-to-AI
   =========================================================================== */
.article__share{
  margin: 72px 0 24px;
  padding: 32px;
  border-radius: 20px;
  border: 1px solid var(--border, rgba(0,0,0,0.08));
  background: var(--surface, #fff);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  position: relative;
}
[data-theme="dark"] .article__share{
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
@media (max-width: 768px){
  .article__share{ grid-template-columns: 1fr; padding: 24px; gap: 28px; }
}
.article__share-col--ai{
  padding-left: 32px;
  border-left: 1px solid var(--border, rgba(0,0,0,0.08));
}
@media (max-width: 768px){
  .article__share-col--ai{
    padding-left: 0;
    padding-top: 24px;
    border-left: none;
    border-top: 1px solid var(--border, rgba(0,0,0,0.08));
  }
}
[data-theme="dark"] .article__share-col--ai{ border-left-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .article__share-col--ai{ border-top-color: rgba(255,255,255,0.08); }
.article__share-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-muted, rgba(0,0,0,0.55));
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 10px;
}
.article__share-label--ai{ color: var(--teal, #00b2a9); }
.share-ai-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal, #00b2a9);
  box-shadow: 0 0 10px rgba(0,178,169,0.6);
  animation: shareAiDot 2.2s ease-in-out infinite;
}
@keyframes shareAiDot{ 0%,100%{opacity:.6;} 50%{opacity:1;} }

.article__share-row{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.share-btn{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border, rgba(0,0,0,0.12));
  background: var(--surface, #fff);
  color: var(--fg, #111);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-decoration: none;
  transition: transform 180ms var(--ease-out), border-color 180ms var(--ease-out), background 180ms var(--ease-out), box-shadow 180ms var(--ease-out);
}
[data-theme="dark"] .share-btn{
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.9);
}
.share-btn:hover{ transform: translateY(-1px); }
.share-btn__icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
}
.share-btn__label{ white-space: nowrap; }

/* Per-network accent on hover */
.share-btn--linkedin:hover{ border-color: #0A66C2; color: #0A66C2; }
.share-btn--x:hover{ border-color: #111; color: #111; }
[data-theme="dark"] .share-btn--x:hover{ border-color: #fff; color: #fff; }
.share-btn--fb:hover{ border-color: #1877F2; color: #1877F2; }
.share-btn--wa:hover{ border-color: #25D366; color: #25D366; }
.share-btn--copy:hover, .share-btn--print:hover{ border-color: var(--teal, #00b2a9); color: var(--teal, #00b2a9); }
.share-btn--copied{
  background: rgba(0,178,169,0.10) !important;
  border-color: var(--teal, #00b2a9) !important;
  color: var(--teal, #00b2a9) !important;
}

/* AI share buttons with gradient accent */
.share-btn--ai{
  background: linear-gradient(180deg, var(--surface, #fff) 0%, var(--surface, #fff) 100%);
  border-color: rgba(0,178,169,0.22);
}
[data-theme="dark"] .share-btn--ai{
  background: rgba(0,178,169,0.05);
  border-color: rgba(0,178,169,0.25);
}
.share-ai--chatgpt:hover{ border-color: #10A37F; color: #10A37F; box-shadow: 0 8px 20px rgba(16,163,127,0.18); }
.share-ai--gemini:hover{ border-color: #9168C0; color: #9168C0; box-shadow: 0 8px 20px rgba(145,104,192,0.18); }
.share-ai--perplexity:hover{ border-color: #20B8CD; color: #20B8CD; box-shadow: 0 8px 20px rgba(32,184,205,0.18); }
.share-ai--claude:hover{ border-color: #CC785C; color: #CC785C; box-shadow: 0 8px 20px rgba(204,120,92,0.18); }
.share-ai--google:hover{ border-color: #4285F4; color: #4285F4; box-shadow: 0 8px 20px rgba(66,133,244,0.18); }

.article__share-hint{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg-muted, rgba(0,0,0,0.55));
  font-style: italic;
}
[data-theme="dark"] .article__share-hint{ color: rgba(255,255,255,0.55); }

/* Hide share bar in print mode */
@media print{
  .article__share, .site-header, .site-footer, .float-whatsapp, .back-to-top,
  .cookie-banner, .article-progress, .article__toc{ display: none !important; }
  body{ background: #fff !important; color: #000 !important; }
  .article__prose, .article__body{ max-width: 100% !important; }
}

/* ===========================================================================
   v6 · Insight-card image, branded gradient thumbnails for Related Thinking
   =========================================================================== */
.insight-card__image .insight-thumb{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 12px;
}
.insights-grid--related .insight-card__image{
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 16px;
}

/* === Nav Dropdown Footer · View all services ======================== */
.nav-dropdown__footer {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 12px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0,178,169,0.08), rgba(0,178,169,0.02));
  border: 1px solid rgba(0,178,169,0.25);
  color: var(--fg);
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
.nav-dropdown__footer:hover {
  border-color: var(--teal);
  box-shadow: 0 10px 28px rgba(0,178,169,0.18);
  transform: translateY(-1px);
}
.nav-dropdown__footer-label { font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.nav-dropdown__footer-sub { font-size: 11.5px; color: var(--fg-muted); line-height: 1.4; grid-column: 1; }
.nav-dropdown__footer-arrow {
  grid-row: span 2; font-size: 18px; color: var(--teal); font-weight: 600;
  transition: transform 220ms var(--ease);
}
.nav-dropdown__footer:hover .nav-dropdown__footer-arrow { transform: translateX(4px); }

/* === Mobile Overlay · Services sublist ============================= */
.mobile-overlay__sublist {
  display: flex; flex-direction: column;
  margin: -8px 0 8px 14px;
  padding-left: 12px;
  border-left: 1px solid var(--border);
  gap: 10px;
}
.mobile-overlay__sublist a {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--fg-muted) !important;
  text-decoration: none;
  padding: 2px 0 !important;
  line-height: 1.3 !important;
}
.mobile-overlay__sublist a:hover,
.mobile-overlay__sublist a:focus {
  color: var(--teal) !important;
}
.mobile-overlay__sublist a::after { display: none !important; }
.mobile-overlay__hint {
  font-size: 0.6em;
  color: var(--teal);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: 8px;
  opacity: 0.8;
  font-weight: 500;
}

@media (max-width: 900px) {
  .nav-dropdown__panel { width: 92vw; max-width: 520px; }
}

/* === Team photos (real portraits) =================================== */
.team-preview__photo,
.team-card__photo {
  position: relative;
  overflow: hidden;
}
.team-preview__photo img,
.team-card__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Subtle, editorial cooling, pairs with brand teal */
  filter: grayscale(0.9) contrast(1.02);
  transition: filter 500ms var(--ease), transform 500ms var(--ease);
  z-index: 1;
}
.team-preview__photo span,
.team-card__photo span,
.team-preview__initials,
.team-card__initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  color: var(--fg-muted);
  z-index: 0;
  /* Remain as fallback behind the <img> if it fails to load */
}
.team-preview__card:hover .team-preview__photo img,
.team-card:hover .team-card__photo img {
  filter: grayscale(0) contrast(1.05) saturate(1.02);
  transform: scale(1.04);
}
.team-preview__photo,
.team-card__photo {
  background: var(--bg-alt);
  filter: none;
}

/* === Hero v7 · UI tightening ======================================== */
/* Small uppercase label above the AI-platform chips */
.hero__sub-chips-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-subtle, rgba(0,0,0,0.42));
  margin-top: 14px;
  margin-bottom: 10px;
  opacity: 0;
  transition: opacity 700ms var(--ease-out);
  transition-delay: 0.9s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.hero__sub-chips-label::before,
.hero__sub-chips-label::after {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: currentColor;
  opacity: 0.35;
}
[data-theme="dark"] .hero__sub-chips-label { color: rgba(255,255,255,0.35); }
.hero--loaded .hero__sub-chips-label { opacity: 1; }

/* Tighten chip ring: a little more breathing room above */
.hero__sub-chips { margin-top: 14px; max-width: 820px; margin-left: auto; margin-right: auto; }

/* Slightly softer detail line so keywords pop more */
.hero__subline.hero__subline--detail {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.65;
  max-width: 660px;
}

/* Emphasise the 3 keywords more legibly (accessibility for low-tech readers) */
.hero__sub-em {
  font-weight: 600;
  color: var(--fg);
  padding: 0 2px;
}
.hero__sub-em--teal {
  color: var(--teal);
  font-weight: 700;
}

/* Hero meta: allow wrap on mobile, clean separator dots */
.hero__meta {
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
  padding: 0 16px;
}

@media (max-width: 640px) {
  .hero__subline.hero__subline--lede { font-size: clamp(20px, 5.6vw, 26px); }
  .hero__subline.hero__subline--detail {
    font-size: 15px; line-height: 1.6;
    padding: 0 4px;
  }
  .hero__sub-chips-label { font-size: 9.5px; letter-spacing: 0.2em; }
  .hero__sub-chips-label::before,
  .hero__sub-chips-label::after { width: 18px; }
  .hero__sub-chip { font-size: 10px; padding: 5px 10px 5px 6px; gap: 5px; }
  .hero__sub-chip img { width: 14px; height: 14px; }
  .hero__meta-sep:nth-of-type(3) { display: none; }
}

/* === Hero chips · one-row desktop, wrap on tablet/mobile ============ */
/* Desktop: single row with compact sizing */
@media (min-width: 1024px) {
  .hero__sub-chips {
    flex-wrap: nowrap;
    gap: 8px;
  }
  .hero__sub-chip {
    font-size: 10.5px;
    padding: 6px 12px 6px 7px;
    gap: 6px;
  }
  .hero__sub-chip img { width: 16px; height: 16px; }
}
/* Tablet / narrow desktop: allow wrap */
@media (max-width: 1023px) {
  .hero__sub-chips { flex-wrap: wrap; }
}

/* ===================================================================== */
/* AUTHOR PAGE — Brian Ho                                                */
/* Editorial profile design, McKinsey-meets-New-Yorker.                  */
/* ===================================================================== */

.page--author { background: var(--bg, #0A0A0A); color: var(--fg, #F7F7F7); }

/* === HERO ============================================================ */
.author-hero {
  position: relative;
  padding: clamp(80px, 14vw, 160px) 0 clamp(48px, 8vw, 96px);
  overflow: hidden;
}
.author-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,178,169,0.10), transparent 50%),
    radial-gradient(circle at 88% 75%, rgba(0,178,169,0.06), transparent 55%);
  pointer-events: none;
}
.author-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
@media (max-width: 900px) {
  .author-hero__grid { grid-template-columns: 1fr; }
}
.author-hero__copy { max-width: 620px; }
.author-hero__kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #00B2A9;
  margin-bottom: 18px;
}
.author-hero__name {
  font-family: 'Inter', sans-serif;
  font-size: clamp(56px, 9vw, 112px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.035em;
  margin: 0 0 18px;
}
.author-hero__role {
  font-size: 15px;
  letter-spacing: 0.04em;
  color: rgba(247,247,247,0.7);
  margin-bottom: 28px;
  font-weight: 500;
}
.author-hero__lede {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.6;
  color: rgba(247,247,247,0.85);
  margin: 0 0 32px;
}
.author-hero__actions {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 28px;
}
.author-hero__contacts {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(247,247,247,0.55);
  letter-spacing: 0.04em;
}
.author-hero__contacts a {
  color: rgba(247,247,247,0.75);
  text-decoration: none;
  transition: color 240ms cubic-bezier(.2,.8,.2,1);
}
.author-hero__contacts a:hover { color: #00B2A9; }

.author-hero__portrait {
  display: flex; justify-content: center; align-items: center;
  perspective: 1400px;
}
.author-hero__portrait-stage {
  position: relative;
  width: min(100%, 480px);
  aspect-ratio: 1 / 1;
  display: flex; align-items: flex-end; justify-content: center;
  transform-style: preserve-3d;
}
/* Soft teal radial glow behind the cutout */
.author-hero__portrait-glow {
  position: absolute;
  inset: 8% 8% 4% 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 55%, rgba(0,178,169,0.45) 0%, rgba(0,178,169,0.18) 32%, rgba(0,178,169,0) 65%),
    radial-gradient(circle at 60% 80%, rgba(255,107,53,0.18) 0%, rgba(255,107,53,0) 50%);
  filter: blur(28px);
  z-index: 1;
  animation: portrait-glow 8s ease-in-out infinite alternate;
  transform: translateZ(-40px);
}
@keyframes portrait-glow {
  0%   { transform: translateZ(-40px) scale(0.92); opacity: 0.85; }
  100% { transform: translateZ(-40px) scale(1.06); opacity: 1; }
}

/* Three concentric rotating rings */
.author-hero__portrait-rings {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  transform: translateZ(-20px);
}
.author-hero__portrait-rings span {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,178,169,0.18);
  box-shadow: inset 0 0 60px rgba(0,178,169,0.05);
}
.author-hero__portrait-rings span:nth-child(1) {
  inset: 6% 6% 6% 6%;
  border-color: rgba(0,178,169,0.22);
  border-style: dashed;
  animation: ring-rotate 32s linear infinite;
}
.author-hero__portrait-rings span:nth-child(2) {
  inset: 16% 16% 16% 16%;
  border-color: rgba(247,247,247,0.08);
  animation: ring-rotate 48s linear reverse infinite;
}
.author-hero__portrait-rings span:nth-child(3) {
  inset: 0 0 0 0;
  border-color: rgba(255,107,53,0.10);
  border-style: dotted;
  animation: ring-rotate 64s linear infinite;
}
@keyframes ring-rotate {
  to { transform: rotate(360deg); }
}

/* The cutout image itself — floats above stage with subtle bob */
.author-hero__portrait-cutout {
  position: relative;
  z-index: 3;
  width: 96%;
  height: auto;
  display: block;
  filter:
    drop-shadow(0 30px 40px rgba(0,0,0,0.45))
    drop-shadow(0 60px 80px rgba(0,178,169,0.18))
    contrast(1.04) saturate(1.02);
  animation: portrait-float 7s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
@keyframes portrait-float {
  0%   { transform: translateY(0) rotate(-0.4deg); }
  100% { transform: translateY(-10px) rotate(0.4deg); }
}

/* Reduced motion — kill bob, keep glow static */
@media (prefers-reduced-motion: reduce) {
  .author-hero__portrait-cutout,
  .author-hero__portrait-glow,
  .author-hero__portrait-rings span {
    animation: none !important;
  }
}

.author-hero__portrait-mark {
  position: absolute;
  bottom: 6%; right: 4%;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
  z-index: 4;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,0.6);
}

/* Light theme tuning */
[data-theme='light'] .author-hero__portrait-glow {
  background:
    radial-gradient(circle at 50% 55%, rgba(0,178,169,0.30) 0%, rgba(0,178,169,0.10) 32%, rgba(0,178,169,0) 65%),
    radial-gradient(circle at 60% 80%, rgba(255,107,53,0.10) 0%, rgba(255,107,53,0) 50%);
}
[data-theme='light'] .author-hero__portrait-rings span:nth-child(1) { border-color: rgba(0,178,169,0.30); }
[data-theme='light'] .author-hero__portrait-rings span:nth-child(2) { border-color: rgba(10,10,10,0.10); }
[data-theme='light'] .author-hero__portrait-rings span:nth-child(3) { border-color: rgba(255,107,53,0.18); }
[data-theme='light'] .author-hero__portrait-cutout {
  filter:
    drop-shadow(0 24px 32px rgba(10,10,10,0.18))
    drop-shadow(0 48px 64px rgba(0,178,169,0.14))
    contrast(1.04) saturate(1.02);
}

/* === STATS STRIP ===================================================== */
.author-stats {
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 40px 0;
}
.author-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 720px) {
  .author-stats__grid { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; }
}
.author-stats__cell { text-align: left; }
.author-stats__num {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: clamp(32px, 4.5vw, 56px);
  line-height: 1;
  letter-spacing: -0.025em;
  color: #00B2A9;
  margin-bottom: 10px;
}
.author-stats__label {
  font-size: 12px;
  color: rgba(247,247,247,0.6);
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* === PHILOSOPHY ====================================================== */
.author-philosophy {
  padding: clamp(80px, 12vw, 140px) 0;
}
.author-philosophy__heading {
  font-family: 'Inter', sans-serif;
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 18px 0 36px;
  max-width: 24ch;
}
.author-philosophy__body p {
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.75;
  color: rgba(247,247,247,0.78);
  margin: 0 0 18px;
  max-width: 62ch;
}

/* === EXPERTISE ======================================================= */
.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 48px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 900px) { .expertise-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .expertise-grid { grid-template-columns: 1fr; } }
.expertise-card {
  background: var(--bg, #0A0A0A);
  padding: 32px 28px 36px;
  transition: background 360ms cubic-bezier(.2,.8,.2,1);
}
.expertise-card:hover { background: rgba(255,255,255,0.02); }
.expertise-card__num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(247,247,247,0.4);
  letter-spacing: 0.18em;
  margin-bottom: 16px;
}
.expertise-card__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: #fff;
}
.expertise-card__body {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(247,247,247,0.72);
  margin: 0;
}

/* === CAREER LIST ===================================================== */
.career-list {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
}
.career-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.career-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.08); }
@media (max-width: 720px) {
  .career-item { grid-template-columns: 1fr; gap: 8px; }
}
.career-item__period {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: rgba(247,247,247,0.55);
  letter-spacing: 0.06em;
  padding-top: 4px;
}
.career-item__title {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 4px;
}
.career-item__org {
  font-size: 13px;
  color: #00B2A9;
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.career-item__detail {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(247,247,247,0.72);
  margin: 0;
  max-width: 64ch;
}

/* === ARTICLES BY AUTHOR ============================================== */
.author-articles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: 48px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 720px) { .author-articles { grid-template-columns: 1fr; } }

.author-article-card {
  background: var(--bg, #0A0A0A);
  padding: 28px 28px 32px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: background 280ms cubic-bezier(.2,.8,.2,1), transform 280ms cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.author-article-card:hover {
  background: rgba(255,255,255,0.025);
}
.author-article-card:hover .author-article-card__cta { color: #00B2A9; }
.author-article-card__num {
  position: absolute;
  top: 22px; right: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(247,247,247,0.3);
  letter-spacing: 0.15em;
}
.author-article-card__meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: rgba(247,247,247,0.55);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.author-article-card__cat { color: #00B2A9; text-transform: uppercase; }
.author-article-card__dot { color: rgba(247,247,247,0.3); }
.author-article-card__title {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: #fff;
}
.author-article-card__excerpt {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(247,247,247,0.7);
  margin: 0 0 18px;
}
.author-article-card__cta {
  font-size: 13px;
  font-weight: 500;
  color: rgba(247,247,247,0.85);
  letter-spacing: 0.02em;
  transition: color 240ms cubic-bezier(.2,.8,.2,1);
}

/* === ARTICLE AUTHOR LINK (in article hero, all blog posts) =========== */
.article__author--link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: opacity 240ms cubic-bezier(.2,.8,.2,1);
  display: flex;
  align-items: center;
  gap: 16px;
}
.article__author--link:hover { opacity: 0.78; }
.article__author--link:hover .article__author-name { color: #00B2A9; }
.article__author--link .article__author-avatar {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  width: 48px; height: 48px;
  flex-shrink: 0;
}
.article__author--link .article__author-avatar img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.article__author--link .article__author-avatar span {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 240ms;
}
/* Show initials only if image fails (broken image fallback) */
.article__author--link .article__author-avatar img[src=""] + span,
.article__author--link .article__author-avatar img:not([src]) + span { opacity: 1; }
.article__author-name { transition: color 240ms cubic-bezier(.2,.8,.2,1); }
.article__author-arrow {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 400;
  margin-left: 6px;
  opacity: 0.5;
}

/* === Light theme tweaks for author page ============================== */
[data-theme='light'] .page--author {
  background: #F7F7F7;
  color: #0A0A0A;
}
[data-theme='light'] .page--author .section,
[data-theme='light'] .page--author .author-hero,
[data-theme='light'] .page--author .author-philosophy,
[data-theme='light'] .page--author .final-cta {
  background: #F7F7F7;
  color: #0A0A0A;
}
[data-theme='light'] .author-hero__name,
[data-theme='light'] .author-philosophy__heading,
[data-theme='light'] .page--author .section h2,
[data-theme='light'] .page--author .final-cta h2,
[data-theme='light'] .expertise-card__title,
[data-theme='light'] .author-article-card__title,
[data-theme='light'] .career-item__title {
  color: #0A0A0A;
}
[data-theme='light'] .author-hero__role,
[data-theme='light'] .author-hero__lede,
[data-theme='light'] .page--author .subline,
[data-theme='light'] .author-philosophy__body p,
[data-theme='light'] .career-item__detail,
[data-theme='light'] .expertise-card__body,
[data-theme='light'] .author-article-card__excerpt {
  color: rgba(10,10,10,0.72);
}
[data-theme='light'] .author-hero__contacts,
[data-theme='light'] .author-hero__contacts a,
[data-theme='light'] .career-item__period,
[data-theme='light'] .expertise-card__num,
[data-theme='light'] .author-article-card__num,
[data-theme='light'] .author-article-card__meta,
[data-theme='light'] .author-article-card__dot,
[data-theme='light'] .author-article-card__cta,
[data-theme='light'] .author-stats__label {
  color: rgba(10,10,10,0.62);
}
[data-theme='light'] .author-hero__contacts a:hover,
[data-theme='light'] .author-article-card:hover .author-article-card__cta,
[data-theme='light'] .career-item__org,
[data-theme='light'] .author-article-card__cat {
  color: #008F88;
}
[data-theme='light'] .author-stats,
[data-theme='light'] .career-item,
[data-theme='light'] .career-item:last-child {
  border-color: rgba(10,10,10,0.10);
}
[data-theme='light'] .expertise-grid,
[data-theme='light'] .author-articles {
  background: rgba(10,10,10,0.08);
  border-color: rgba(10,10,10,0.08);
}
[data-theme='light'] .expertise-card,
[data-theme='light'] .author-article-card {
  background: #FFFFFF;
}
[data-theme='light'] .expertise-card:hover,
[data-theme='light'] .author-article-card:hover {
  background: #F2FBFA;
}
[data-theme='light'] .author-hero__portrait-mark {
  background: rgba(255,255,255,0.86);
  color: #0A0A0A;
  border-color: rgba(10,10,10,0.10);
  box-shadow: 0 12px 24px -10px rgba(10,10,10,0.28);
}

/* === Team card with profile link (about page) ======================== */
.team-card__links {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  flex-wrap: wrap;
}
.team-card__profile {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: #00B2A9;
  text-decoration: none;
  font-weight: 500;
  transition: gap 240ms cubic-bezier(.2,.8,.2,1);
}
.team-card__profile:hover { gap: 10px; }
.team-card__name a {
  color: inherit; text-decoration: none;
  transition: color 240ms cubic-bezier(.2,.8,.2,1);
}
.team-card__name a:hover { color: #00B2A9; }
a.team-card__photo, a.team-preview__photo {
  display: block; cursor: pointer;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
a.team-card__photo:hover, a.team-preview__photo:hover {
  transform: translateY(-2px);
}
.team-preview__name a {
  color: inherit; text-decoration: none;
  transition: color 240ms cubic-bezier(.2,.8,.2,1);
}
.team-preview__name a:hover { color: #00B2A9; }

/* ============================================================================
   APRIL 2026 v6 · /services/web-design · 3D + creative effects
   ============================================================================ */

/* ── Page-level 3D context ─────────────────────────────────────────────── */
.wd-3d {
  perspective: 1600px;
  perspective-origin: 50% 30%;
}

/* ── HERO: layered parallax background ─────────────────────────────────── */
.wd-hero {
  transform-style: preserve-3d;
}

/* Animated mesh gradient layer behind everything */
.wd-hero__mesh {
  position: absolute; inset: -10%;
  background:
    radial-gradient(circle at 18% 24%, color-mix(in srgb, var(--teal) 22%, transparent), transparent 42%),
    radial-gradient(circle at 82% 18%, color-mix(in srgb, #8B5CF6 18%, transparent), transparent 45%),
    radial-gradient(circle at 50% 88%, color-mix(in srgb, #FF6B35 14%, transparent), transparent 48%);
  filter: blur(60px);
  opacity: 0.7;
  animation: wd-mesh-drift 28s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes wd-mesh-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(-30px, 20px, 0) rotate(2deg) scale(1.04); }
  100% { transform: translate3d(40px, -10px, 0) rotate(-1.5deg) scale(0.98); }
}

/* Subtle film-grain noise on top */
.wd-hero__noise {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
  z-index: 1;
}

/* Light rays radiating from top */
.wd-hero__rays {
  position: absolute; top: -10%; left: 50%;
  width: 1200px; height: 800px;
  transform: translateX(-50%);
  pointer-events: none; z-index: 0;
  opacity: 0.5;
}
.wd-hero__rays span {
  position: absolute;
  top: 0; left: 50%;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--teal) 60%, transparent), transparent 70%);
  transform-origin: top center;
  animation: wd-ray-pulse 6s ease-in-out infinite;
}
.wd-hero__rays span:nth-child(1) { transform: translateX(-50%) rotate(-22deg); animation-delay: 0s; }
.wd-hero__rays span:nth-child(2) { transform: translateX(-50%) rotate(-8deg);  animation-delay: -1.5s; }
.wd-hero__rays span:nth-child(3) { transform: translateX(-50%) rotate(8deg);   animation-delay: -3s; }
.wd-hero__rays span:nth-child(4) { transform: translateX(-50%) rotate(22deg);  animation-delay: -4.5s; }
@keyframes wd-ray-pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.7; }
}

/* Floating depth orbs (parallax target) */
.wd-hero__orbs { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wd-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  box-shadow: 0 0 80px currentColor;
  opacity: 0.55;
}
.wd-hero__orb--a {
  top: 22%; left: 8%;
  width: 18px; height: 18px;
  color: var(--teal);
  background: radial-gradient(circle at 35% 35%, #fff, var(--teal) 60%);
  animation: wd-orb-bob 9s ease-in-out infinite alternate;
}
.wd-hero__orb--b {
  top: 68%; right: 10%;
  width: 14px; height: 14px;
  color: #FF6B35;
  background: radial-gradient(circle at 35% 35%, #fff, #FF6B35 60%);
  animation: wd-orb-bob 11s ease-in-out infinite alternate-reverse;
}
.wd-hero__orb--c {
  top: 42%; right: 28%;
  width: 10px; height: 10px;
  color: #8B5CF6;
  background: radial-gradient(circle at 35% 35%, #fff, #8B5CF6 60%);
  animation: wd-orb-bob 7s ease-in-out infinite alternate;
}
@keyframes wd-orb-bob {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(20px, -30px, 0) scale(1.2); }
}

/* Generic 3D parallax layer (hooked by JS for mouse-tracked depth) */
.wd-3d-layer {
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}

/* ── HERO browser mock-up: the 3D showpiece ─────────────────────────── */
.wd-mock {
  margin: 56px auto 0;
  max-width: 920px;
  perspective: 1800px;
}
.wd-mock__stage {
  position: relative;
  transform: rotateX(18deg) rotateY(-6deg) rotateZ(-1deg);
  transform-style: preserve-3d;
  transition: transform 900ms cubic-bezier(.22,1,.36,1);
}
.wd-mock:hover .wd-mock__stage {
  transform: rotateX(8deg) rotateY(-2deg) rotateZ(0deg) translateY(-6px);
}
.wd-mock__frame {
  position: relative;
  background: linear-gradient(180deg, #161616 0%, #0E0E0E 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 60px 120px -30px rgba(0,0,0,0.7),
    0 100px 180px -40px rgba(0,178,169,0.22),
    0 0 0 1px rgba(0,178,169,0.05);
  transform: translateZ(40px);
}
.wd-mock__chrome {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wd-mock__dot {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
}
.wd-mock__dot--r { background: #FF5F57; }
.wd-mock__dot--y { background: #FEBC2E; }
.wd-mock__dot--g { background: #28C840; }
.wd-mock__url {
  margin-left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(247,247,247,0.5);
  background: rgba(255,255,255,0.04);
  padding: 5px 14px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.wd-mock__body {
  padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 16px;
  background:
    radial-gradient(circle at 80% 0%, rgba(0,178,169,0.10), transparent 40%),
    radial-gradient(circle at 0% 100%, rgba(139,92,246,0.08), transparent 50%),
    #0E0E0E;
}
.wd-mock__row {
  height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(247,247,247,0.18) 0%, rgba(247,247,247,0.06) 100%);
}
.wd-mock__row--xl { height: 28px; width: 78%; background: linear-gradient(90deg, var(--teal), rgba(0,178,169,0.3)); }
.wd-mock__row--lg { width: 56%; }
.wd-mock__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-top: 8px;
}
.wd-mock__grid span {
  height: 64px; border-radius: 8px;
  background: linear-gradient(135deg, rgba(0,178,169,0.18), rgba(247,247,247,0.04));
  border: 1px solid rgba(255,255,255,0.06);
}
.wd-mock__grid span:nth-child(2) { background: linear-gradient(135deg, rgba(255,107,53,0.18), rgba(247,247,247,0.04)); }
.wd-mock__grid span:nth-child(3) { background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(247,247,247,0.04)); }
.wd-mock__cta {
  display: flex; gap: 10px; margin-top: 14px;
}
.wd-mock__btn {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  padding: 9px 16px; border-radius: 6px;
  background: var(--teal); color: #fff;
  border: 1px solid var(--teal);
}
.wd-mock__btn--ghost {
  background: transparent;
  color: rgba(247,247,247,0.7);
  border-color: rgba(255,255,255,0.12);
}
/* Animated sheen sweeping across mock */
.wd-mock__sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.08) 48%, transparent 60%);
  transform: translateX(-100%);
  pointer-events: none;
  animation: wd-sheen 6s ease-in-out infinite;
}
@keyframes wd-sheen {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.wd-mock__shadow {
  position: absolute; bottom: -40px; left: 6%; right: 6%;
  height: 80px;
  background: radial-gradient(ellipse, rgba(0,178,169,0.25), rgba(0,0,0,0.5) 50%, transparent 80%);
  filter: blur(24px);
  border-radius: 50%;
  z-index: -1;
  transform: translateZ(-50px);
}

/* ── SHOWCASE 3D tilt cards ──────────────────────────────────────────── */
.wd-showcase__grid {
  perspective: 1400px;
}
.wd-tilt {
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(.2,.8,.2,1), box-shadow 480ms;
  will-change: transform;
}
.wd-tilt__inner {
  position: relative;
  transform-style: preserve-3d;
  z-index: 1;
}
.wd-tilt__pop {
  transition: transform 480ms cubic-bezier(.2,.8,.2,1);
  transform: translateZ(0);
}
.wd-tilt:hover .wd-tilt__pop[data-pop="14"] { transform: translateZ(14px); }
.wd-tilt:hover .wd-tilt__pop[data-pop="20"] { transform: translateZ(20px); }
.wd-tilt:hover .wd-tilt__pop[data-pop="36"] { transform: translateZ(36px); }

/* Animated gradient border on showcase cards */
.wd-showcase__border {
  position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; opacity: 0;
  background: conic-gradient(
    from var(--bx, 0deg),
    var(--teal),
    #8B5CF6,
    #FF6B35,
    var(--teal)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  padding: 1px;
  transition: opacity 600ms;
  animation: wd-bx 6s linear infinite;
}
@property --bx {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes wd-bx { to { --bx: 360deg; } }
.wd-tilt:hover .wd-showcase__border { opacity: 1; }

/* Diagonal sheen on hover */
.wd-tilt__shine {
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.06) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform 900ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  border-radius: 18px;
}
.wd-tilt:hover .wd-tilt__shine {
  transform: translateX(110%);
}

/* Corner accent */
.wd-showcase__corner {
  position: absolute; bottom: 16px; right: 16px;
  width: 28px; height: 28px;
  border-right: 1px solid color-mix(in srgb, var(--teal) 50%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--teal) 50%, transparent);
  opacity: 0; transform: translate(-6px, -6px);
  transition: opacity 480ms, transform 480ms cubic-bezier(.2,.8,.2,1);
}
.wd-tilt:hover .wd-showcase__corner { opacity: 1; transform: translate(0, 0); }

/* Override base hover (we use 3D tilt now via JS) */
.wd-showcase__card.wd-tilt:hover {
  transform: translateY(-6px) scale(1.01); /* fallback when no JS */
}
.wd-3d.is-tilt-active .wd-showcase__card.wd-tilt:hover {
  transform: none; /* JS handles transform */
}

/* ── PERFORMANCE METERS 3D rings ────────────────────────────────────── */
.wd-perf {
  perspective: 1200px;
}
.wd-perf__meters {
  perspective: 1200px;
}
.wd-perf__meter {
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
}
.wd-perf__meter:hover { transform: translateZ(10px) rotateX(-3deg); }

.wd-perf__ring--3d {
  position: relative;
  transform-style: preserve-3d;
}
.wd-perf__halo {
  position: absolute; inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 28%, transparent), transparent 60%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 480ms;
  z-index: 0;
}
.wd-perf__meter:hover .wd-perf__halo { opacity: 1; }

.wd-perf__orbit {
  position: absolute;
  inset: -8%;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--teal) 35%, transparent);
  pointer-events: none;
  animation: wd-orbit 18s linear infinite;
  opacity: 0.4;
}
.wd-perf__orbit--2 {
  inset: -16%;
  border-style: dotted;
  border-color: color-mix(in srgb, var(--teal) 22%, transparent);
  animation-duration: 28s;
  animation-direction: reverse;
}
@keyframes wd-orbit { to { transform: rotate(360deg); } }

.wd-perf__progress {
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--teal) 60%, transparent));
}

.wd-perf__value {
  text-shadow: 0 0 20px color-mix(in srgb, var(--teal) 30%, transparent);
}

/* ── BUILD GRID — 3D lift on hover ──────────────────────────────────── */
.service-grid--bordered {
  perspective: 1800px;
}
.service-grid--bordered .service-card--static {
  position: relative;
  transition:
    background 280ms,
    transform 480ms cubic-bezier(.2,.8,.2,1),
    box-shadow 480ms;
  transform-style: preserve-3d;
}
.service-grid--bordered .service-card--static::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--teal) 8%, transparent), transparent 50%);
  opacity: 0;
  transition: opacity 480ms;
  pointer-events: none;
}
.service-grid--bordered .service-card--static:hover {
  transform: translateZ(8px);
  box-shadow:
    0 20px 40px -20px rgba(0,0,0,0.4),
    0 1px 0 color-mix(in srgb, var(--teal) 40%, transparent) inset;
  z-index: 2;
}
.service-grid--bordered .service-card--static:hover::before { opacity: 1; }

/* ── DESIGN SYSTEM — 3D card columns + flip swatches ─────────────────── */
.wd-system__grid--3d {
  perspective: 1600px;
}
.wd-system__col--card {
  position: relative;
  padding: 32px 28px;
  background: color-mix(in srgb, var(--fg) 2%, var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), box-shadow 600ms, border-color 600ms;
  transform-style: preserve-3d;
}
.wd-system__col--card:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-1deg);
  border-color: color-mix(in srgb, var(--teal) 50%, var(--border));
  box-shadow:
    0 30px 60px -25px rgba(0,0,0,0.4),
    0 1px 0 color-mix(in srgb, var(--teal) 30%, transparent) inset;
}

/* 3D type sample */
.wd-type-3d {
  background: linear-gradient(180deg, var(--fg) 0%, color-mix(in srgb, var(--fg) 60%, transparent) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 1px 0 color-mix(in srgb, var(--teal) 12%, transparent);
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
  display: inline-block;
}
.wd-system__col--card:hover .wd-type-3d {
  transform: translateZ(12px) scale(1.02);
}

/* Flip swatches */
.wd-system__swatches--flip {
  perspective: 1000px;
}
.wd-swatch--3d {
  position: relative;
  height: 56px;
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1);
  cursor: default;
  border-radius: 10px;
}
.wd-swatch--3d:hover { transform: rotateX(180deg); }
.wd-swatch__face {
  position: absolute; inset: 0;
  border-radius: 10px;
  padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 8px 16px -8px rgba(0,0,0,0.3);
}
.wd-swatch__face--back {
  transform: rotateX(180deg);
  filter: brightness(0.85);
}
.wd-swatch__use {
  font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: none;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  width: 100%;
}

/* Motion curve viz */
.wd-motion-curve {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  color: var(--fg-muted);
}
.wd-motion-curve__active {
  animation: wd-curve-draw 4s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes wd-curve-draw {
  0%   { stroke-dashoffset: 300; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.wd-motion-curve__label {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--fg-muted);
}

/* (Removed broken wd-process__timeline--3d — replaced by .wd-process__stepper below) */

/* ── FINAL CTA — 3D mesh background ─────────────────────────────────── */
.wd-final--3d {
  position: relative;
  overflow: hidden;
}
.wd-final__bg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.wd-final__mesh {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}
.wd-final__mesh--1 {
  top: -20%; left: -10%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 32%, transparent), transparent 60%);
  animation: wd-final-1 20s ease-in-out infinite alternate;
}
.wd-final__mesh--2 {
  bottom: -30%; right: -10%;
  width: 700px; height: 700px;
  background: radial-gradient(circle, color-mix(in srgb, #8B5CF6 26%, transparent), transparent 60%);
  animation: wd-final-2 24s ease-in-out infinite alternate;
}
.wd-final__mesh--3 {
  top: 30%; left: 50%; transform: translateX(-50%);
  width: 500px; height: 500px;
  background: radial-gradient(circle, color-mix(in srgb, #FF6B35 20%, transparent), transparent 60%);
  animation: wd-final-3 28s ease-in-out infinite alternate;
}
@keyframes wd-final-1 { 0%{ transform: translate(0,0) } 100%{ transform: translate(80px, 60px) } }
@keyframes wd-final-2 { 0%{ transform: translate(0,0) } 100%{ transform: translate(-100px, -40px) } }
@keyframes wd-final-3 { 0%{ transform: translateX(-50%) translateY(0) } 100%{ transform: translateX(-50%) translateY(-50px) } }

.wd-final__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 3%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 3%, transparent) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, #000 0%, transparent 80%);
  opacity: 0.6;
}
.wd-final--3d .container { position: relative; z-index: 2; }
.wd-final--3d .svc-final__headline {
  text-shadow: 0 0 60px color-mix(in srgb, var(--teal) 18%, transparent);
}

/* ── REDUCED MOTION — kill everything but keep visual hierarchy ───── */
@media (prefers-reduced-motion: reduce) {
  .wd-hero__mesh,
  .wd-hero__rays span,
  .wd-hero__orb,
  .wd-mock__sheen,
  .wd-perf__orbit,
  .wd-motion-curve__active,
  .wd-final__mesh,
  .wd-tilt__shine,
  .wd-showcase__border {
    animation: none !important;
  }
  .wd-mock__stage,
  .wd-mock:hover .wd-mock__stage,
  .wd-tilt:hover,
  .wd-perf__meter:hover,
  .wd-system__col--card:hover,
  .wd-swatch--3d:hover,
  .service-grid--bordered .service-card--static:hover {
    transform: none !important;
  }
  .wd-tilt:hover .wd-tilt__pop[data-pop] { transform: none !important; }
}

/* ── MOBILE — soften 3D for smaller screens ──────────────────────────── */
@media (max-width: 720px) {
  .wd-3d { perspective: 1000px; }
  .wd-system__col--card:hover,
  .wd-perf__meter:hover {
    transform: none;
  }
}

/* ============================================================================
   APRIL 2026 v7 · /services/web-design v2 — split hero, value props, templates,
                                              pricing, fixed process stepper
   ============================================================================ */

/* ── HERO V2 — split layout with orbital visual ──────────────────────── */
.wd-hero--v2 {
  padding: clamp(96px, 12vw, 140px) 0 clamp(72px, 8vw, 100px);
  min-height: auto;
}
.wd-hero__split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-top: 32px;
}
@media (max-width: 980px) {
  .wd-hero__split { grid-template-columns: 1fr; gap: 56px; }
  .wd-hero__visual { order: -1; }
}

.wd-hero__copy { position: relative; z-index: 2; }
.wd-hero__headline--v2 {
  font-size: clamp(44px, 6.5vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  margin: 24px 0 28px;
  font-weight: 300;
  max-width: 640px;
}
.wd-hero__line--sub {
  display: block;
  font-size: clamp(20px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--fg-muted);
  margin-top: 8px;
}
.wd-hero__lede--v2 {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  margin: 0 0 32px;
  max-width: 540px;
}
.wd-hero__lede--v2 strong {
  color: var(--teal);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.wd-hero__bullets {
  list-style: none; padding: 0;
  margin: 32px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.wd-hero__bullets li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-muted);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.wd-hero__check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--teal) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 40%, transparent);
  color: var(--teal);
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}

/* ── ORBITAL — 3D animated centerpiece ──────────────────────────────── */
.wd-hero__visual {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  min-height: 520px;
}
.wd-orbital {
  position: relative;
  width: clamp(360px, 38vw, 520px);
  aspect-ratio: 1 / 1;
  perspective: 1400px;
  transform-style: preserve-3d;
}

/* Central core */
.wd-orbital__core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 38%; aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--teal) 30%, var(--bg)) 0%, var(--bg) 70%);
  border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--border));
  box-shadow:
    0 0 60px color-mix(in srgb, var(--teal) 28%, transparent),
    0 30px 60px -20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  animation: wd-orb-core-bob 6s ease-in-out infinite alternate;
}
@keyframes wd-orb-core-bob {
  from { transform: translate(-50%, -50%) translateZ(0); }
  to   { transform: translate(-50%, -50%) translateZ(20px); }
}
.wd-orbital__core-inner {
  display: flex; flex-direction: column; align-items: center;
  gap: 8px;
  color: var(--teal);
}
.wd-orbital__core-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}
.wd-orbital__core-pulse {
  position: absolute;
  inset: -20%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--teal) 18%, transparent), transparent 60%);
  animation: wd-orb-pulse 3s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes wd-orb-pulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* Orbit rings */
.wd-orbital__ring {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px dashed color-mix(in srgb, var(--teal) 22%, transparent);
}
.wd-orbital__ring--1 {
  width: 65%; aspect-ratio: 1;
  animation: wd-orb-ring-spin 32s linear infinite;
}
.wd-orbital__ring--2 {
  width: 88%; aspect-ratio: 1;
  border-style: dotted;
  border-color: color-mix(in srgb, var(--fg) 8%, transparent);
  animation: wd-orb-ring-spin 48s linear reverse infinite;
}
@keyframes wd-orb-ring-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Orbit nodes (chips on ring 1) */
.wd-orbital__node,
.wd-orbital__metric {
  position: absolute;
  top: 50%; left: 50%;
  transform-origin: 0 0;
  transform: translate(-50%, -50%) rotate(var(--a)) translateX(50%) rotate(calc(-1 * var(--a)));
  /* counter-rotate to keep label upright while ring spins */
}
.wd-orbital__ring--1 .wd-orbital__node {
  animation: wd-orb-node-counter 32s linear infinite;
  animation-direction: reverse;
}
.wd-orbital__ring--2 .wd-orbital__metric {
  animation: wd-orb-node-counter 48s linear infinite;
}
@keyframes wd-orb-node-counter {
  /* Empty — applied via the rotate calc + parent rotation */
  to { transform: translate(-50%, -50%) rotate(var(--a)) translateX(50%) rotate(calc(-1 * var(--a))) rotate(360deg); }
}
.wd-orbital__chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--bg) 95%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--border));
  color: var(--teal);
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.wd-orbital__node--code .wd-orbital__chip { color: #FF6B35; border-color: color-mix(in srgb, #FF6B35 40%, var(--border)); }
.wd-orbital__node--seo  .wd-orbital__chip { color: #8B5CF6; border-color: color-mix(in srgb, #8B5CF6 40%, var(--border)); }
.wd-orbital__node--geo  .wd-orbital__chip { color: #3B82F6; border-color: color-mix(in srgb, #3B82F6 40%, var(--border)); }

/* Metrics on ring 2 */
.wd-orbital__metric {
  display: flex; flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.4);
  min-width: 70px;
}
.wd-orbital__metric-num {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--teal);
  line-height: 1;
}
.wd-orbital__metric-lbl {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
}

/* Outer decorative ring */
.wd-orbital__outer {
  position: absolute;
  top: 50%; left: 50%;
  width: 100%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent);
  pointer-events: none;
}
.wd-orbital__outer span {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 12px var(--teal);
  animation: wd-orb-tick 8s linear infinite;
}
.wd-orbital__outer span:nth-child(1) { top: -4px; left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.wd-orbital__outer span:nth-child(2) { top: 50%; right: -4px; transform: translateY(-50%); background: #FF6B35; box-shadow: 0 0 12px #FF6B35; animation-delay: -2.5s; }
.wd-orbital__outer span:nth-child(3) { bottom: -4px; left: 50%; transform: translateX(-50%); background: #8B5CF6; box-shadow: 0 0 12px #8B5CF6; animation-delay: -5s; }
@keyframes wd-orb-tick {
  0%, 90% { opacity: 1; }
  100%    { opacity: 0.3; }
}

/* Color tokens floating in corners */
.wd-orbital__tokens {
  position: absolute; inset: 0;
  pointer-events: none;
}
.wd-orbital__token {
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 8px;
  box-shadow: 0 8px 20px -6px rgba(0,0,0,0.4);
  animation: wd-orb-token 5s ease-in-out infinite alternate;
}
.wd-orbital__token--1 { top: 8%;  left: 6%;  animation-delay: 0s; }
.wd-orbital__token--2 { top: 14%; right: 8%; animation-delay: -1.2s; }
.wd-orbital__token--3 { bottom: 12%; left: 8%; animation-delay: -2.4s; }
.wd-orbital__token--4 { bottom: 8%;  right: 6%; animation-delay: -3.6s; }
@keyframes wd-orb-token {
  0%   { transform: translateY(0) rotate(-2deg); }
  100% { transform: translateY(-8px) rotate(2deg); }
}

/* ── VALUE PROPS — Singapore positioning ───────────────────────────── */
.wd-value { padding: clamp(80px, 9vw, 120px) 0; }
.wd-value__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 56px;
}
@media (max-width: 1100px) { .wd-value__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .wd-value__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
@media (max-width: 460px)  { .wd-value__grid { grid-template-columns: 1fr; } }

.wd-value__card {
  position: relative;
  padding: 28px 24px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: transform 400ms cubic-bezier(.2,.8,.2,1), border-color 400ms, box-shadow 400ms;
  overflow: hidden;
}
.wd-value__card::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--teal), transparent 70%);
  opacity: 0;
  transition: opacity 400ms;
}
.wd-value__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--teal) 50%, var(--border));
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.3);
}
.wd-value__card:hover::before { opacity: 1; }

.wd-value__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--teal) 8%, var(--bg-alt));
  border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--border));
  color: var(--teal);
  font-size: 20px;
  margin-bottom: 16px;
}
.wd-value__chip {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--teal) 8%, transparent);
  margin-bottom: 12px;
}
.wd-value__card h3 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  line-height: 1.25;
}
.wd-value__card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0;
}

/* ── TEMPLATE GALLERY ───────────────────────────────────────────────── */
.wd-templates {
  padding: clamp(80px, 9vw, 120px) 0;
}
.wd-templates__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  margin-top: 56px;
}
.wd-template-card {
  position: relative;
  display: block;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), border-color 500ms, box-shadow 500ms;
}
.wd-template-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--accent, var(--teal)) 50%, var(--border));
  box-shadow:
    0 30px 60px -25px rgba(0,0,0,0.4),
    0 0 0 1px color-mix(in srgb, var(--accent, var(--teal)) 20%, transparent);
}
.wd-template-card__preview {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.wd-template-card__chrome {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--fg) 4%, var(--bg));
  border-bottom: 1px solid var(--border);
}
.wd-template-card__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--fg) 18%, transparent);
}
.wd-template-card__url {
  margin-left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.wd-template-card__art {
  position: relative;
  width: 100%; height: 100%;
  background: var(--c2, #fff);
  color: var(--c1, #0A0A0A);
  padding: 16px;
  overflow: hidden;
  transition: transform 700ms cubic-bezier(.22,1,.36,1);
}
.wd-template-card:hover .wd-template-card__art {
  transform: scale(1.04);
}

/* Mini-preview templates */
.wd-mini {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  gap: 8px;
  font-family: var(--font-sans);
}
.wd-mini__nav {
  display: flex; gap: 4px; align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--c1, #000) 8%, transparent);
}
.wd-mini__nav span {
  width: 24px; height: 4px; border-radius: 2px;
  background: color-mix(in srgb, var(--c1, #000) 30%, transparent);
}
.wd-mini__nav span:first-child {
  width: 32px; height: 5px;
  background: var(--c1, #000);
}
.wd-mini__hero-text {
  font-size: clamp(20px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 12px 0 6px;
  color: var(--c1, #000);
}
.wd-mini__row {
  height: 4px;
  width: 80%;
  background: color-mix(in srgb, var(--c1, #000) 18%, transparent);
  border-radius: 2px;
}
.wd-mini__row--short { width: 50%; }
.wd-mini__bar {
  height: 6px; width: 100%;
  background: var(--c3);
  border-radius: 3px;
  margin-top: 8px;
}
.wd-mini__grid-3 {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 10px;
}
.wd-mini__grid-3 span {
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--c1, #000) 10%, transparent);
  border-radius: 4px;
}
.wd-mini__grid-3 span:nth-child(1) { background: var(--c3); }

.wd-mini--commerce .wd-mini__products {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 10px;
}
.wd-mini--commerce .wd-mini__product {
  aspect-ratio: 3 / 4;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1) 40%, var(--c2)), var(--c3));
  border-radius: 4px;
}

.wd-mini--saas .wd-mini__pricing {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-top: 12px;
}
.wd-mini--saas .wd-mini__pricing span {
  height: 60px;
  background: color-mix(in srgb, var(--c1) 6%, var(--c2));
  border: 1px solid color-mix(in srgb, var(--c1) 12%, transparent);
  border-radius: 4px;
}
.wd-mini--saas .wd-mini__pricing--feat {
  background: color-mix(in srgb, var(--c3) 12%, var(--c2)) !important;
  border: 1px solid var(--c3) !important;
  transform: scale(1.05);
}

.wd-mini--professional .wd-mini__column {
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.wd-mini--professional .wd-mini__seal {
  margin-top: auto;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 2px solid var(--c3);
  align-self: flex-end;
}

.wd-mini--restaurant .wd-mini__hero-img {
  height: 80px;
  width: 100%;
  background: linear-gradient(135deg, var(--c1) 0%, var(--c3) 60%, var(--c1) 100%);
  border-radius: 6px;
  margin-top: 8px;
}
.wd-mini--restaurant .wd-mini__menu {
  display: flex; flex-direction: column; gap: 4px; margin-top: 8px;
}
.wd-mini--restaurant .wd-mini__menu span {
  height: 4px;
  background: color-mix(in srgb, var(--c1) 18%, transparent);
  border-radius: 2px;
}
.wd-mini--restaurant .wd-mini__menu span:nth-child(2) { width: 70%; }
.wd-mini--restaurant .wd-mini__menu span:nth-child(3) { width: 55%; }

.wd-mini--portfolio .wd-mini__work {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  margin-top: 10px;
}
.wd-mini--portfolio .wd-mini__work span {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, var(--c3), var(--c1));
  border-radius: 4px;
}
.wd-mini--portfolio .wd-mini__work span:nth-child(2) { background: linear-gradient(135deg, var(--c1), var(--c3)); }
.wd-mini--portfolio .wd-mini__work span:nth-child(3) { background: linear-gradient(135deg, var(--c3), var(--c2)); }
.wd-mini--portfolio .wd-mini__work span:nth-child(4) { background: linear-gradient(135deg, var(--c1), var(--c3)); }

/* Sheen sweep on hover */
.wd-template-card__sheen {
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.18) 50%, transparent 62%);
  transform: translateX(-110%);
  transition: transform 900ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.wd-template-card:hover .wd-template-card__sheen { transform: translateX(110%); }

/* Card meta */
.wd-template-card__meta {
  padding: 22px 22px 24px;
}
.wd-template-card__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.wd-template-card__num {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--accent, var(--teal));
  font-weight: 600;
}
.wd-template-card__name {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  flex: 1;
}
.wd-template-card__arrow {
  font-size: 18px;
  color: var(--accent, var(--teal));
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
}
.wd-template-card:hover .wd-template-card__arrow { transform: translateX(6px); }

.wd-template-card__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: 12px;
}
.wd-template-card__tag {
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0 0 16px;
}
.wd-template-card__palette {
  display: flex; gap: 6px;
}
.wd-template-card__palette span {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.wd-templates__note {
  margin-top: 56px;
  padding: 24px 28px;
  background: color-mix(in srgb, var(--teal) 4%, var(--bg-alt));
  border: 1px solid color-mix(in srgb, var(--teal) 18%, var(--border));
  border-left: 3px solid var(--teal);
  border-radius: 8px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.wd-templates__note strong { color: var(--fg); font-weight: 600; }

/* ── PRICING TIERS ──────────────────────────────────────────────────── */
.wd-pricing { padding: clamp(80px, 9vw, 120px) 0; }
.wd-pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 56px;
  align-items: stretch;
}
@media (max-width: 980px) { .wd-pricing__grid { grid-template-columns: 1fr; gap: 16px; } }

.wd-pricing__card {
  position: relative;
  display: flex; flex-direction: column;
  padding: 36px 32px 32px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: transform 480ms cubic-bezier(.2,.8,.2,1), border-color 480ms, box-shadow 480ms;
}
.wd-pricing__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--teal) 30%, var(--border));
  box-shadow: 0 28px 56px -28px rgba(0,0,0,0.3);
}
.wd-pricing__card--featured {
  background: linear-gradient(180deg, color-mix(in srgb, var(--teal) 6%, var(--bg)) 0%, var(--bg) 100%);
  border: 1px solid color-mix(in srgb, var(--teal) 40%, var(--border));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -30px color-mix(in srgb, var(--teal) 25%, transparent);
  transform: translateY(-8px);
}
.wd-pricing__card--featured:hover {
  transform: translateY(-12px);
}
.wd-pricing__badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: 5px 14px;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border-radius: 100px;
  white-space: nowrap;
}

.wd-pricing__head {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.wd-pricing__name {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 12px;
}
.wd-pricing__price {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 8px;
}
.wd-pricing__currency {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.06em;
}
.wd-pricing__amount {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(40px, 4vw, 56px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fg);
}
.wd-pricing__sub {
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.02em;
}

.wd-pricing__for {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0 0 24px;
}
.wd-pricing__features {
  list-style: none;
  padding: 0; margin: 0 0 28px;
  flex: 1;
}
.wd-pricing__features li {
  position: relative;
  padding: 10px 0 10px 26px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--fg-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 4%, transparent);
}
.wd-pricing__features li:last-child { border-bottom: none; }
.wd-pricing__features li::before {
  content: '';
  position: absolute;
  left: 0; top: 16px;
  width: 14px; height: 1px;
  background: var(--teal);
}
.wd-pricing__features li:first-child {
  font-weight: 500;
  color: var(--fg);
}
.wd-pricing__features li:first-child::before { display: none; }
.wd-pricing__features li:first-child { padding-left: 0; }

.wd-pricing__cta { margin-top: auto; }
.wd-pricing__cta .cta { width: 100%; justify-content: center; }

.wd-pricing__compare {
  margin-top: 56px;
  padding: 24px 28px;
  background: color-mix(in srgb, var(--fg) 3%, var(--bg-alt));
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--fg-muted);
}
.wd-pricing__compare strong { color: var(--teal); font-weight: 600; }
.wd-pricing__compare-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
  margin-right: 8px;
}

/* ── PROCESS STEPPER (clean rebuild — no broken timeline) ───────────── */
.wd-process { padding: clamp(80px, 9vw, 120px) 0; }
.wd-process__stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 64px;
}
@media (max-width: 1100px) { .wd-process__stepper { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; } }
@media (max-width: 560px)  { .wd-process__stepper { grid-template-columns: 1fr; gap: 16px; } }

/* Horizontal progress line behind markers (desktop only) */
.wd-process__progress {
  position: absolute;
  top: 18px; /* aligned to marker dot */
  left: 8%; right: 8%;
  height: 2px;
  background: color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 2px;
  z-index: 0;
}
.wd-process__progress-fill {
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--teal) 0%, color-mix(in srgb, var(--teal) 40%, transparent) 100%);
  border-radius: inherit;
  animation: wd-process-fill 3s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: 400ms;
}
@keyframes wd-process-fill { to { width: 100%; } }

@media (max-width: 1100px) { .wd-process__progress { display: none; } }

.wd-process__step {
  position: relative;
  z-index: 1;
  display: flex; flex-direction: column;
  gap: 16px;
  padding: 0;
}

.wd-process__marker {
  position: relative;
  display: flex; align-items: center; gap: 10px;
}
.wd-process__marker-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--teal);
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 16px color-mix(in srgb, var(--teal) 40%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.06);
  position: relative;
}
.wd-process__marker-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px var(--teal);
}
.wd-process__marker-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--teal);
  font-weight: 600;
}

.wd-process__body {
  padding: 0;
}
.wd-process__dur {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
  margin-bottom: 8px;
}
.wd-process__step h3 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: 0 0 10px;
  line-height: 1.25;
}
.wd-process__step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-muted);
  margin: 0;
}

/* ── TEMPLATE PREVIEW PAGE ──────────────────────────────────────────── */
.page--template-preview { --accent: var(--teal); }

.tpl-hero {
  position: relative;
  padding: clamp(80px, 10vw, 120px) 0 clamp(48px, 6vw, 72px);
  overflow: hidden;
}
.tpl-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tpl-hero__gradient {
  position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 60%);
  filter: blur(80px);
}
.tpl-hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--fg) 4%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 30%, #000 0%, transparent 80%);
}
.tpl-hero .container { position: relative; z-index: 2; }
.tpl-hero__head { margin-top: 24px; max-width: 880px; }
.tpl-hero__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: 16px;
}
.tpl-hero__title {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 16px;
}
.tpl-hero__title-accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 400;
}
.tpl-hero__tag {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 350;
  color: var(--fg-muted);
  line-height: 1.4;
  margin: 0;
  max-width: 720px;
}

/* Live preview stage */
.tpl-preview { padding-top: 32px; padding-bottom: clamp(80px, 9vw, 120px); }
.tpl-preview__stage {
  position: relative;
  perspective: 2000px;
  margin-top: 32px;
}
.tpl-preview__device {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  background: #1A1A1A;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 60px 120px -30px rgba(0,0,0,0.7),
    0 100px 180px -40px color-mix(in srgb, var(--accent) 18%, transparent);
}
.tpl-preview__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #222 0%, #1A1A1A 100%);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tpl-preview__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
}
.tpl-preview__dot:nth-child(1) { background: #FF5F57; }
.tpl-preview__dot:nth-child(2) { background: #FEBC2E; }
.tpl-preview__dot:nth-child(3) { background: #28C840; }
.tpl-preview__url {
  margin-left: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.04);
  padding: 5px 14px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.tpl-preview__viewport {
  min-height: 480px;
  position: relative;
}
.tpl-preview__shadow {
  position: absolute;
  bottom: -40px; left: 6%; right: 6%;
  height: 80px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 20%, transparent), rgba(0,0,0,0.4) 50%, transparent 80%);
  filter: blur(28px);
  border-radius: 50%;
  z-index: -1;
}

/* ── TPL LIVE — per-template miniature designs ──────────────────────── */
.tpl-live {
  width: 100%;
  min-height: 480px;
  padding: clamp(28px, 4vw, 48px);
  font-family: var(--font-sans);
  position: relative;
}
.tpl-live__nav {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(127,127,127,0.18);
  margin-bottom: 32px;
}
.tpl-live__logo {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.tpl-live__nav-links {
  display: flex; gap: 24px;
  font-size: 13px;
  font-weight: 500;
  opacity: 0.7;
}
@media (max-width: 720px) { .tpl-live__nav-links { display: none; } }

.tpl-live__h1 {
  font-size: clamp(32px, 5.5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 16px 0 16px;
}
.tpl-live__h1--big {
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 800;
  letter-spacing: -0.05em;
}
.tpl-live__h1--serif {
  font-size: clamp(30px, 4.8vw, 56px);
}
.tpl-live__lede {
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  max-width: 540px;
  margin: 0 0 28px;
}
.tpl-live__cta-row {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-bottom: 32px;
}
.tpl-live__cta,
.tpl-live__cta-ghost {
  display: inline-flex;
  align-items: center;
  padding: 12px 22px;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: default;
}
.tpl-live__cta-ghost {
  background: transparent;
  border: 1px solid;
}

/* Editorial-specific */
.tpl-live--editorial .tpl-live__h1 {
  font-size: clamp(56px, 9vw, 110px);
  font-weight: 200;
}
.tpl-live--editorial .tpl-live__work-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 24px;
}
.tpl-live--editorial .tpl-live__work-grid > div {
  aspect-ratio: 4 / 5;
  border-radius: 4px;
}

/* Commerce-specific */
.tpl-live--commerce .tpl-live__hero-banner {
  padding: 28px;
  border-radius: 12px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  min-height: 140px;
  display: flex; align-items: center;
}
.tpl-live--commerce .tpl-live__banner-h {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.tpl-live--commerce .tpl-live__products-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.tpl-live--commerce .tpl-live__product-img {
  aspect-ratio: 3 / 4;
  border-radius: 8px;
  margin-bottom: 8px;
}
.tpl-live--commerce .tpl-live__product-name {
  font-size: 13px; font-weight: 500;
  margin-bottom: 2px;
}
.tpl-live--commerce .tpl-live__product-price {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* SaaS-specific */
.tpl-live--saas .tpl-live__pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}
.tpl-live--saas .tpl-live__pricing-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-top: 24px;
}
.tpl-live--saas .tpl-live__price-card {
  padding: 20px;
  border: 1px solid;
  border-radius: 10px;
}
.tpl-live--saas .tpl-live__price-card--featured {
  transform: scale(1.04);
}
.tpl-live--saas .tpl-live__price-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
}
.tpl-live--saas .tpl-live__price-amt {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tpl-live--saas .tpl-live__price-amt::before { content: '$'; opacity: 0.5; font-size: 16px; margin-right: 2px; }

/* Professional-specific */
.tpl-live--professional .tpl-live__pro-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  font-weight: 500;
  margin-bottom: 12px;
}
.tpl-live--professional .tpl-live__credentials {
  display: flex; gap: 24px; flex-wrap: wrap;
  padding-top: 20px;
  border-top: 1px solid rgba(127,127,127,0.18);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  margin-top: 24px;
}

/* Restaurant-specific */
.tpl-live--restaurant {
  padding: 0;
}
.tpl-live--restaurant .tpl-live__nav {
  padding: 28px clamp(28px, 4vw, 48px);
  margin-bottom: 0;
  border-bottom: none;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 2;
  color: #fff !important;
}
.tpl-live--restaurant .tpl-live__nav-links { color: #fff; opacity: 0.85; }
.tpl-live--restaurant .tpl-live__hero-img-large {
  position: relative;
  min-height: 360px;
  display: flex; align-items: flex-end;
  padding: clamp(28px, 4vw, 48px);
  margin: 0;
}
.tpl-live--restaurant .tpl-live__hero-overlay {
  position: relative;
  z-index: 2;
  max-width: 540px;
}
.tpl-live--restaurant .tpl-live__hero-overlay .tpl-live__h1 {
  font-size: clamp(32px, 5vw, 56px);
  margin: 0 0 16px;
}
.tpl-live--restaurant .tpl-live__menu-strip {
  display: flex; gap: 24px;
  padding: 20px clamp(28px, 4vw, 48px);
  border-top: 1px solid rgba(127,127,127,0.2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Portfolio-specific */
.tpl-live--portfolio .tpl-live__work-grid--four {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
  margin: 16px 0 24px;
}
.tpl-live--portfolio .tpl-live__work-grid--four > div {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
}

/* ── TPL SPEC GRID ──────────────────────────────────────────────────── */
.tpl-spec { padding: clamp(80px, 9vw, 120px) 0; }
.tpl-spec__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.tpl-spec__cell {
  padding: 28px 24px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.tpl-spec__cell h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 18px;
}
.tpl-spec__palette {
  display: flex; flex-direction: column; gap: 12px;
}
.tpl-spec__swatch {
  display: flex; align-items: center; gap: 14px;
}
.tpl-spec__swatch-chip {
  width: 36px; height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}
.tpl-spec__swatch-name {
  font-size: 14px; font-weight: 500;
  margin-bottom: 2px;
}
.tpl-spec__swatch-hex {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.tpl-spec__type {
  margin: 0;
}
.tpl-spec__type dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 500;
  margin-bottom: 6px;
}
.tpl-spec__type dd {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--fg);
}
.tpl-spec__pages,
.tpl-spec__best {
  list-style: none; padding: 0; margin: 0;
}
.tpl-spec__pages li,
.tpl-spec__best li {
  padding: 10px 0;
  font-size: 14px;
  color: var(--fg);
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 5%, transparent);
}
.tpl-spec__pages li:last-child,
.tpl-spec__best li:last-child { border-bottom: none; }

/* ── TPL OTHERS — browse other templates ────────────────────────────── */
.tpl-others { padding-top: clamp(72px, 8vw, 100px); padding-bottom: clamp(80px, 9vw, 120px); }
.tpl-others__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 48px;
}
.tpl-others__card {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  padding: 24px 20px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1), border-color 360ms;
}
.tpl-others__card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent, var(--teal)) 50%, var(--border));
}
.tpl-others__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--accent, var(--teal));
  font-weight: 600;
}
.tpl-others__name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.tpl-others__cat {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  color: var(--fg-muted);
  text-transform: uppercase;
}
.tpl-others__arrow {
  position: absolute;
  top: 22px; right: 18px;
  color: var(--accent, var(--teal));
  font-size: 16px;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
.tpl-others__card:hover .tpl-others__arrow { transform: translateX(4px); }

/* ── REDUCED MOTION fallback for new components ─────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .wd-orbital__core,
  .wd-orbital__core-pulse,
  .wd-orbital__ring--1,
  .wd-orbital__ring--2,
  .wd-orbital__token,
  .wd-orbital__outer span,
  .wd-process__progress-fill,
  .wd-template-card__sheen {
    animation: none !important;
  }
}

/* ==========================================================================
   WEB DESIGN PAGE V3 (SME-focused, single-pricing) + sub-service landing pages
   ========================================================================== */

/* ---------- Hero v3: connect-the-dots canvas + price strip ---------- */
.wd-v3 .wd-hero--v3 {
  position: relative;
  min-height: 88vh;
  padding: 96px 0 72px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.wd-v3 .wd-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  margin-top: 32px;
}
.wd-v3 .wd-hero__headline--v3 {
  font-size: clamp(40px, 6vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin: 16px 0 24px;
}
.wd-v3 .wd-hero__line {
  display: block;
}
.wd-v3 .wd-hero__line--glow {
  background: linear-gradient(110deg, var(--teal, #00B2A9) 0%, #7CFFEE 50%, var(--teal, #00B2A9) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.wd-v3 .wd-hero__line--sub {
  font-size: 0.55em;
  font-weight: 400;
  opacity: 0.65;
  letter-spacing: -0.015em;
  margin-top: 8px;
}
.wd-v3 .wd-hero__lede--v3 {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.6;
  max-width: 56ch;
  margin: 0 0 28px;
  opacity: 0.85;
}
.wd-v3 .wd-hero__lede--v3 strong {
  color: var(--teal, #00B2A9);
  font-weight: 600;
}

/* Price strip — 3-block hero anchor */
.wd-v3 .wd-hero__price-strip {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 16px 24px;
  border: 1px solid rgba(0, 178, 169, 0.25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.06) 0%, rgba(0, 178, 169, 0.02) 100%);
  margin-bottom: 28px;
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .wd-v3 .wd-hero__price-strip {
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.12) 0%, rgba(0, 178, 169, 0.04) 100%);
  border-color: rgba(0, 178, 169, 0.35);
}
.wd-v3 .wd-hero__price-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 18px;
}
.wd-v3 .wd-hero__price-from {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.55;
  font-weight: 500;
  margin-bottom: 4px;
}
.wd-v3 .wd-hero__price-amount {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--teal, #00B2A9);
}
.wd-v3 .wd-hero__price-divider {
  width: 1px;
  background: rgba(0, 178, 169, 0.2);
  margin: 4px 0;
}
.wd-v3 .wd-hero__ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.wd-v3 .wd-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.wd-v3 .wd-hero__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.85;
}
.wd-v3 .wd-hero__check {
  color: var(--teal, #00B2A9);
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Connect-the-dots stage (replaces orbital) */
.wd-v3 .wd-shift-stage {
  position: relative;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1.1;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wd-v3 .wd-shift-canvas {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 1 / 1;
  display: block;
  filter: drop-shadow(0 20px 60px rgba(0, 178, 169, 0.18));
}
.wd-v3 .wd-shift-stage__caption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.6;
  font-weight: 500;
}
.wd-v3 .wd-shift-stage__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--teal, #00B2A9);
}
.wd-v3 .wd-shift-stage__metrics {
  display: flex;
  gap: 18px;
  margin-top: 24px;
  padding: 14px 18px;
  border: 1px solid rgba(0, 178, 169, 0.18);
  border-radius: 12px;
  background: rgba(0, 178, 169, 0.04);
}
.wd-v3 .wd-shift-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 64px;
}
.wd-v3 .wd-shift-metric__num {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--teal, #00B2A9);
  line-height: 1;
  margin-bottom: 4px;
}
.wd-v3 .wd-shift-metric__lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.55;
}

@media (max-width: 960px) {
  .wd-v3 .wd-hero__split { grid-template-columns: 1fr; }
  .wd-v3 .wd-hero__bullets { grid-template-columns: 1fr; }
  .wd-v3 .wd-hero__price-strip { width: 100%; flex-wrap: wrap; }
  .wd-v3 .wd-hero__price-block { flex: 1 1 33%; min-width: 90px; padding: 0 10px; }
  .wd-v3 .wd-shift-stage { max-width: 360px; }
}

/* ---------- STORY (problems we solve) ---------- */
.wd-story h2 { font-size: clamp(32px, 4vw, 52px); }
.wd-story__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.wd-story__card {
  position: relative;
  padding: 32px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  background: var(--surface, #fff);
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1), border-color 380ms, box-shadow 380ms;
}
[data-theme="dark"] .wd-story__card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.wd-story__card:hover {
  transform: translateY(-4px);
  border-color: var(--teal, #00B2A9);
  box-shadow: 0 20px 48px rgba(0, 178, 169, 0.12);
}
.wd-story__icon {
  font-size: 32px;
  margin-bottom: 16px;
  display: block;
  line-height: 1;
}
.wd-story__card h3 {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.35;
}
.wd-story__card p {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.75;
  margin: 0;
}

/* ---------- SOLUTION (what we do differently) ---------- */
.wd-solution h2 { font-size: clamp(32px, 4vw, 52px); }
.wd-solution__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.wd-solution__card {
  position: relative;
  padding: 32px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 16px;
  background: var(--surface, #fff);
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1), border-color 380ms, box-shadow 380ms;
  overflow: hidden;
}
[data-theme="dark"] .wd-solution__card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.wd-solution__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--teal, #00B2A9), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 480ms cubic-bezier(.22, 1, .36, 1);
}
.wd-solution__card:hover {
  transform: translateY(-4px);
  border-color: var(--teal, #00B2A9);
  box-shadow: 0 20px 48px rgba(0, 178, 169, 0.12);
}
.wd-solution__card:hover::before { transform: scaleX(1); }
.wd-solution__num {
  position: absolute;
  top: 28px;
  right: 28px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  opacity: 0.35;
  font-variant-numeric: tabular-nums;
}
.wd-solution__icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 16px;
  color: var(--teal, #00B2A9);
}
.wd-solution__chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(0, 178, 169, 0.1);
  color: var(--teal, #00B2A9);
  margin-bottom: 12px;
}
.wd-solution__card h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  line-height: 1.3;
}
.wd-solution__card p {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.78;
  margin: 0;
}

/* ---------- SERVICES (6 sub-services) ---------- */
.wd-services h2 { font-size: clamp(32px, 4vw, 52px); }
.wd-services__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.wd-services__card {
  position: relative;
  display: block;
  padding: 28px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 18px;
  background: var(--surface, #fff);
  text-decoration: none;
  color: inherit;
  transition: transform 420ms cubic-bezier(.22, 1, .36, 1), border-color 420ms, box-shadow 420ms;
  overflow: hidden;
}
[data-theme="dark"] .wd-services__card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.wd-services__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 100% 0%, var(--accent, #00B2A9) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.wd-services__card:hover {
  transform: translateY(-6px);
  border-color: var(--accent, #00B2A9);
  box-shadow: 0 24px 64px color-mix(in srgb, var(--accent, #00B2A9) 18%, transparent);
}
.wd-services__card:hover::before { opacity: 0.08; }
.wd-services__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.wd-services__icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent, #00B2A9) 12%, transparent);
  color: var(--accent, #00B2A9);
  flex-shrink: 0;
}
.wd-services__num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  opacity: 0.4;
  font-variant-numeric: tabular-nums;
}
.wd-services__name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.wd-services__kw {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.5;
  margin-bottom: 14px;
  font-weight: 500;
}
.wd-services__tag {
  font-size: 14px;
  line-height: 1.55;
  opacity: 0.78;
  margin: 0 0 16px;
}
.wd-services__for {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  margin-bottom: 16px;
  border-top: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  font-size: 12px;
}
[data-theme="dark"] .wd-services__for { border-top-color: rgba(255, 255, 255, 0.06); }
.wd-services__for-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
  font-weight: 500;
}
.wd-services__for-value {
  opacity: 0.85;
}
.wd-services__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent, #00B2A9);
}
.wd-services__cta .arrow {
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}
.wd-services__card:hover .wd-services__cta .arrow { transform: translateX(4px); }

/* ---------- ICP (who we serve) ---------- */
.wd-icp h2 { font-size: clamp(32px, 4vw, 52px); }
.wd-icp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 48px;
}
.wd-icp__card {
  padding: 24px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  background: var(--surface, #fff);
  transition: transform 380ms, border-color 380ms;
}
[data-theme="dark"] .wd-icp__card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.wd-icp__card:hover {
  transform: translateY(-3px);
  border-color: var(--teal, #00B2A9);
}
.wd-icp__icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 12px;
}
.wd-icp__card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.wd-icp__card p {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.72;
  margin: 0;
}

/* ---------- SINGLE PRICING V3 ---------- */
.wd-price-v3 h2 { font-size: clamp(32px, 4vw, 52px); }
.wd-price-v3__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 48px;
  margin: 56px 0 48px;
  padding: 48px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.04) 0%, transparent 60%);
  position: relative;
  overflow: hidden;
}
[data-theme="dark"] .wd-price-v3__hero {
  border-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.08) 0%, rgba(255, 255, 255, 0.02) 60%);
}
.wd-price-v3__hero::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(closest-side, rgba(0, 178, 169, 0.18), transparent);
  pointer-events: none;
}
.wd-price-v3__main {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wd-price-v3__from {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.6;
  font-weight: 500;
  margin-bottom: 8px;
}
.wd-price-v3__amount {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}
.wd-price-v3__currency {
  font-size: 22px;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: -0.01em;
}
.wd-price-v3__num {
  font-size: clamp(56px, 8vw, 96px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, var(--teal, #00B2A9), #7CFFEE);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.wd-price-v3__unit {
  font-size: 18px;
  font-weight: 500;
  opacity: 0.7;
}
.wd-price-v3__sub {
  font-size: 14px;
  opacity: 0.7;
  letter-spacing: 0.01em;
}
.wd-price-v3__includes {
  position: relative;
}
.wd-price-v3__includes h3 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  opacity: 0.6;
  font-weight: 500;
  margin: 0 0 16px;
}
.wd-price-v3__includes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
}
.wd-price-v3__includes li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.88;
}
.wd-price-v3__includes li span {
  color: var(--teal, #00B2A9);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Add-ons */
.wd-price-v3__addons {
  margin-top: 48px;
}
.wd-price-v3__addons-head {
  text-align: center;
  margin-bottom: 28px;
}
.wd-price-v3__addons-head h3 {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.wd-price-v3__addons-head p {
  font-size: 14px;
  opacity: 0.65;
  margin: 0;
}
.wd-price-v3__addons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.wd-price-v3__addon {
  padding: 20px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  background: var(--surface, #fff);
  transition: border-color 320ms, transform 320ms;
}
[data-theme="dark"] .wd-price-v3__addon {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.wd-price-v3__addon:hover {
  border-color: var(--teal, #00B2A9);
  transform: translateY(-2px);
}
.wd-price-v3__addon-name {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.wd-price-v3__addon-price {
  font-size: 13px;
  color: var(--teal, #00B2A9);
  font-weight: 500;
  margin-bottom: 6px;
}
.wd-price-v3__addon-desc {
  font-size: 13px;
  opacity: 0.7;
  line-height: 1.5;
}

.wd-price-v3__cta {
  text-align: center;
  margin-top: 40px;
}
.wd-price-v3__note {
  margin: 14px 0 0;
  font-size: 13px;
  opacity: 0.6;
}
.wd-price-v3__compare {
  margin-top: 32px;
  padding: 20px 24px;
  border-left: 3px solid var(--teal, #00B2A9);
  background: rgba(0, 178, 169, 0.04);
  border-radius: 0 10px 10px 0;
  font-size: 14px;
  line-height: 1.65;
  opacity: 0.88;
}
.wd-price-v3__compare-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--teal, #00B2A9);
  margin-bottom: 4px;
}

@media (max-width: 860px) {
  .wd-price-v3__hero { grid-template-columns: 1fr; padding: 32px; gap: 32px; }
  .wd-price-v3__includes ul { grid-template-columns: 1fr; }
}

/* ---------- HOW IT WORKS (24h timeline) ---------- */
.wd-how h2 { font-size: clamp(32px, 4vw, 52px); }
.wd-how__stepper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 56px;
}
.wd-how__progress {
  position: absolute;
  top: 28px;
  left: 8%;
  width: 84%;
  height: 1px;
  background: var(--border, rgba(0, 0, 0, 0.1));
}
.wd-how__progress-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--teal, #00B2A9), transparent);
  transform-origin: left;
  transform: scaleX(0.4);
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.wd-how:hover .wd-how__progress-fill { transform: scaleX(1); }
.wd-how__step {
  position: relative;
  text-align: center;
  padding-top: 60px;
}
.wd-how__marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface, #fff);
  border: 2px solid var(--border, rgba(0, 0, 0, 0.1));
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 380ms cubic-bezier(.22, 1, .36, 1);
}
[data-theme="dark"] .wd-how__marker { background: #0A0A0A; border-color: rgba(255, 255, 255, 0.15); }
.wd-how__marker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--teal, #00B2A9);
  box-shadow: 0 0 0 6px rgba(0, 178, 169, 0.15);
}
.wd-how__marker-num {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0;
  transition: opacity 320ms;
}
.wd-how__step:hover .wd-how__marker {
  border-color: var(--teal, #00B2A9);
  transform: translateX(-50%) scale(1.08);
}
.wd-how__step:hover .wd-how__marker-dot { opacity: 0; }
.wd-how__step:hover .wd-how__marker-num { opacity: 1; }
.wd-how__dur {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--teal, #00B2A9);
  background: rgba(0, 178, 169, 0.1);
  padding: 4px 10px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.wd-how__step h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.wd-how__step p {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.72;
  margin: 0;
  padding: 0 8px;
}

@media (max-width: 880px) {
  .wd-how__stepper { grid-template-columns: 1fr; gap: 24px; }
  .wd-how__progress { display: none; }
  .wd-how__step { text-align: left; padding-top: 0; padding-left: 76px; min-height: 70px; }
  .wd-how__marker { left: 0; transform: translateX(0); top: 0; }
  .wd-how__step:hover .wd-how__marker { transform: scale(1.08); }
  .wd-how__step h3 { padding: 0; }
  .wd-how__step p { padding: 0; }
}

/* ---------- SUB-SERVICE PAGES ---------- */
.wd-sub .wd-hero__line--glow {
  background: linear-gradient(110deg, var(--wd-accent, var(--teal, #00B2A9)) 0%, color-mix(in srgb, var(--wd-accent, var(--teal, #00B2A9)) 60%, white) 50%, var(--wd-accent, var(--teal, #00B2A9)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.wd-sub .wd-shift-canvas {
  filter: drop-shadow(0 20px 60px color-mix(in srgb, var(--wd-accent, #00B2A9) 25%, transparent));
}
.wd-sub .wd-shift-stage__dot {
  background: var(--wd-accent, var(--teal, #00B2A9));
}
.wd-sub .wd-shift-metric__num {
  color: var(--wd-accent, var(--teal, #00B2A9));
}

/* Good for list */
.wd-goodfor h2 { font-size: clamp(28px, 3.5vw, 44px); }
.wd-goodfor__list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px 24px;
}
.wd-goodfor__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
  padding: 16px 20px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  border-radius: 12px;
  background: var(--surface, #fff);
  transition: border-color 320ms, transform 320ms;
}
[data-theme="dark"] .wd-goodfor__item {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.06);
}
.wd-goodfor__item:hover {
  border-color: var(--wd-accent, var(--teal, #00B2A9));
  transform: translateX(4px);
}
.wd-goodfor__check {
  color: var(--wd-accent, var(--teal, #00B2A9));
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.wd-goodfor__note {
  margin-top: 32px;
  font-size: 14px;
  opacity: 0.7;
  text-align: center;
}
.wd-goodfor__note a {
  color: var(--wd-accent, var(--teal, #00B2A9));
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Other services cross-link */
.wd-others h2 { font-size: clamp(28px, 3.5vw, 44px); }
.wd-others__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.wd-others__card {
  position: relative;
  display: block;
  padding: 24px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  background: var(--surface, #fff);
  text-decoration: none;
  color: inherit;
  transition: transform 320ms, border-color 320ms, box-shadow 320ms;
}
[data-theme="dark"] .wd-others__card {
  background: rgba(255, 255, 255, 0.02);
  border-color: rgba(255, 255, 255, 0.08);
}
.wd-others__card:hover {
  transform: translateY(-3px);
  border-color: var(--accent, var(--teal, #00B2A9));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent, var(--teal, #00B2A9)) 14%, transparent);
}
.wd-others__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.wd-others__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, var(--teal, #00B2A9)) 12%, transparent);
  color: var(--accent, var(--teal, #00B2A9));
}
.wd-others__num {
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.4;
  font-weight: 500;
}
.wd-others__card h3 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
.wd-others__card p {
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.75;
  margin: 0 0 14px;
}
.wd-others__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent, var(--teal, #00B2A9));
}
.wd-others__cta .arrow {
  transition: transform 320ms;
}
.wd-others__card:hover .wd-others__cta .arrow { transform: translateX(3px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wd-v3 *, .wd-v3 *::before, .wd-v3 *::after {
    animation: none !important;
    transition: none !important;
  }
  .wd-v3 .wd-hero__line--glow { -webkit-text-fill-color: var(--teal, #00B2A9); color: var(--teal, #00B2A9); }
}

/* ==========================================================================
   WEB DESIGN V3.1 — POLISH PASS: balanced grids + cosmos + visualisation
   ========================================================================== */

/* ---------- Hero: cosmos canvas (real connect-the-dots) ---------- */
.wd-v3 .wd-hero__bg { isolation: isolate; }
.wd-v3 .wd-cosmos {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 40%, transparent 100%);
}
.wd-v3 .wd-hero__mesh,
.wd-v3 .wd-hero__grid,
.wd-v3 .wd-hero__gradient,
.wd-v3 .wd-hero__noise,
.wd-v3 .wd-hero__orbs {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.wd-v3 .container { position: relative; z-index: 2; }

/* Hero floating depth orbs — soft glow, slow drift */
.wd-v3 .wd-hero__orbs { z-index: 0; }
.wd-v3 .wd-hero__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
  will-change: transform;
}
.wd-v3 .wd-hero__orb--1 {
  width: 420px; height: 420px;
  top: -10%; left: -8%;
  background: radial-gradient(circle, var(--wd-accent, var(--teal, #00B2A9)) 0%, transparent 70%);
  animation: wdOrbDrift1 28s ease-in-out infinite;
}
.wd-v3 .wd-hero__orb--2 {
  width: 360px; height: 360px;
  bottom: -12%; right: -8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--wd-accent, var(--teal, #00B2A9)) 75%, white) 0%, transparent 70%);
  animation: wdOrbDrift2 34s ease-in-out infinite;
}
.wd-v3 .wd-hero__orb--3 {
  width: 280px; height: 280px;
  top: 40%; right: 30%;
  background: radial-gradient(circle, #FF6B35 0%, transparent 70%);
  opacity: 0.18;
  animation: wdOrbDrift3 22s ease-in-out infinite;
}
[data-theme="light"] .wd-v3 .wd-hero__orb { opacity: 0.28; }
[data-theme="light"] .wd-v3 .wd-hero__orb--3 { opacity: 0.1; }
@keyframes wdOrbDrift1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(40px,-30px) scale(1.1); }
}
@keyframes wdOrbDrift2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-50px,40px) scale(0.95); }
}
@keyframes wdOrbDrift3 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(-30px,-50px) scale(1.15); }
}

/* ---------- BALANCED GRIDS (no orphan cards) ---------- */

/* Story = 4 cards → 4×1 (desktop) / 2×2 (tablet) / 1×4 (mobile) */
.wd-story__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 1140px) { .wd-story__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .wd-story__grid { grid-template-columns: 1fr; } }

/* Solution = 6 cards → 3×2 / 2×3 / 1×6 */
.wd-solution__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 1080px) { .wd-solution__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .wd-solution__grid { grid-template-columns: 1fr; } }

/* Services = 6 cards → 3×2 / 2×3 / 1×6 */
.wd-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 48px;
}
@media (max-width: 1080px) { .wd-services__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .wd-services__grid { grid-template-columns: 1fr; } }

/* ICP = 8 cards → 4×2 / 2×4 / 1×8 */
.wd-icp__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
@media (max-width: 1140px) { .wd-icp__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .wd-icp__grid { grid-template-columns: 1fr; } }

/* Templates = 6 → 3×2 / 2×3 / 1×6 (already has its own rule but force balance) */
.wd-templates__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
@media (max-width: 1080px) { .wd-templates__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .wd-templates__grid { grid-template-columns: 1fr; } }

/* Others (sub-service cross-link) = 5 cards → 5×1 → 3+2 unbalanced.
   Use 5 columns on wide, then go straight to 1 column for clarity. */
.wd-others__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  margin-top: 40px;
}
@media (max-width: 1240px) { .wd-others__grid { grid-template-columns: repeat(3, 1fr); } /* still 3+2, but visually fine when each card is denser */ }
@media (max-width: 800px)  { .wd-others__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .wd-others__grid { grid-template-columns: 1fr; } }

/* Add-ons = 6 cards → 3×2 / 2×3 / 1×6 */
.wd-price-v3__addons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) { .wd-price-v3__addons-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .wd-price-v3__addons-grid { grid-template-columns: 1fr; } }

/* Includes = 10 items → 2×5 (already 2-col, ensure stable) */
.wd-price-v3__includes ul {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 720px) { .wd-price-v3__includes ul { grid-template-columns: 1fr; } }

/* Goodfor = 4 items → 2×2 */
.wd-goodfor__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
  margin: 40px 0 0;
  list-style: none;
  padding: 0;
}
@media (max-width: 720px) { .wd-goodfor__list { grid-template-columns: 1fr; } }

/* ---------- ENHANCED CARD VISUALS ---------- */

/* Story cards: glow corner, animated underline, illustration backdrop */
.wd-story__card {
  position: relative;
  overflow: hidden;
}
.wd-story__card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 32px; right: 32px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--teal, #00B2A9), transparent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
}
.wd-story__card:hover::after { transform: scaleX(1); }
.wd-story__icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.12), rgba(255, 107, 53, 0.04));
  border-radius: 14px;
  font-size: 28px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 107, 53, 0.18);
  transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
}
.wd-story__card:hover .wd-story__icon { transform: scale(1.08) rotate(-4deg); }

/* Solution cards: glowing number, accent shine sweep, animated icon ring */
.wd-solution__card {
  position: relative;
  overflow: hidden;
}
.wd-solution__card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(115deg, transparent 30%, rgba(0, 178, 169, 0.08) 50%, transparent 70%);
  transition: left 800ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.wd-solution__card:hover::after { left: 100%; }
.wd-solution__icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 178, 169, 0.1);
  border: 1px solid rgba(0, 178, 169, 0.25);
  font-size: 22px;
  margin-bottom: 16px;
  transition: transform 380ms, background 380ms;
}
.wd-solution__card:hover .wd-solution__icon {
  background: rgba(0, 178, 169, 0.18);
  transform: rotate(8deg) scale(1.06);
}
.wd-solution__num {
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(180deg, var(--teal, #00B2A9), transparent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.7;
}

/* Services cards: animated illustration mockup at top */
.wd-services__card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
}
.wd-services__viz {
  position: relative;
  height: 120px;
  margin: -28px -28px 20px;
  overflow: hidden;
  border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent, #00B2A9) 8%, transparent), transparent);
}
[data-theme="dark"] .wd-services__viz {
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.wd-services__viz::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--accent, #00B2A9) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--accent, #00B2A9) 14%, transparent) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 30%, transparent 70%);
  opacity: 0.6;
}
.wd-services__viz svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.wd-services__viz .wd-viz-line {
  fill: none;
  stroke: var(--accent, #00B2A9);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
}
.wd-services__viz .wd-viz-dot {
  fill: var(--accent, #00B2A9);
}
.wd-services__viz .wd-viz-glow {
  fill: var(--accent, #00B2A9);
  filter: blur(6px);
  opacity: 0.4;
}
.wd-services__head { padding: 0; margin-bottom: 14px; }
.wd-services__icon-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent, #00B2A9) 14%, transparent);
  color: var(--accent, #00B2A9);
  flex-shrink: 0;
}

/* ICP cards: subtle gradient shift + glowing icon ring */
.wd-icp__card {
  position: relative;
  overflow: hidden;
}
.wd-icp__card::before {
  content: '';
  position: absolute;
  top: -50%; right: -50%;
  width: 100%; height: 100%;
  background: radial-gradient(closest-side, rgba(0, 178, 169, 0.18), transparent);
  opacity: 0;
  transition: opacity 480ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.wd-icp__card:hover::before { opacity: 1; }
.wd-icp__icon {
  position: relative;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(0, 178, 169, 0.08);
  border: 1px solid rgba(0, 178, 169, 0.18);
  font-size: 22px;
  margin-bottom: 14px;
  transition: transform 380ms, border-color 380ms;
}
.wd-icp__card:hover .wd-icp__icon {
  border-color: var(--teal, #00B2A9);
  transform: scale(1.08) rotate(-6deg);
}

/* ---------- POLISHED PRICE BLOCK: animated digit scale-in + visual chrome ---------- */
.wd-price-v3__hero {
  position: relative;
  overflow: hidden;
}
.wd-price-v3__hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 178, 169, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 178, 169, 0.05) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(135deg, #000 0%, transparent 60%);
  -webkit-mask-image: linear-gradient(135deg, #000 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.wd-price-v3__main, .wd-price-v3__includes { position: relative; z-index: 1; }

/* Animated counter: digits jump in */
.wd-price-v3__num {
  display: inline-block;
  animation: wdNumIn 1100ms cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes wdNumIn {
  0%   { transform: translateY(28px); opacity: 0; filter: blur(8px); }
  100% { transform: translateY(0); opacity: 1; filter: blur(0); }
}

/* Add-ons: subtle gradient hover + accent dot */
.wd-price-v3__addon {
  position: relative;
  overflow: hidden;
}
.wd-price-v3__addon::before {
  content: '';
  position: absolute;
  top: 16px; right: 16px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--teal, #00B2A9);
  box-shadow: 0 0 0 4px rgba(0, 178, 169, 0.15);
}

/* ---------- HOW STEPPER: visual flourishes (animated dots, icon glow, depth) ---------- */
.wd-how__stepper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 56px;
  position: relative;
}
@media (max-width: 1080px) {
  .wd-how__stepper { grid-template-columns: repeat(5, 1fr); }
}
.wd-how__step {
  position: relative;
  text-align: center;
  padding-top: 60px;
}
.wd-how__marker::after {
  content: '';
  position: absolute;
  inset: -12px;
  border: 1px dashed rgba(0, 178, 169, 0.3);
  border-radius: 50%;
  opacity: 0;
  animation: wdMarkerSpin 8s linear infinite;
  transition: opacity 320ms;
}
.wd-how__step:hover .wd-how__marker::after { opacity: 1; }
@keyframes wdMarkerSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ---------- SUB-SERVICE accent override on cosmos ---------- */
.wd-sub .wd-cosmos {
  /* Cosmos lineColor is set via JS data-accent — we just brighten the canvas */
  filter: saturate(1.1);
}

/* Tweak hero bullets list on sub-service to be 2-column for breathing */
.wd-v3 .wd-hero__bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 600px) {
  .wd-v3 .wd-hero__bullets { grid-template-columns: 1fr; }
}

/* ---------- SECTION DIVIDER: animated dashed connector line between sections ---------- */
.wd-v3 .section { position: relative; }
.wd-v3 .wd-story::before,
.wd-v3 .wd-services::before,
.wd-v3 .wd-icp::before,
.wd-v3 .wd-templates::before,
.wd-v3 .wd-how::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 64px;
  background: linear-gradient(180deg, transparent, var(--teal, #00B2A9), transparent);
  opacity: 0.3;
}

/* ---------- PROCESS STEPPER: visualisation icons inside each marker ---------- */
.wd-how__step--01 .wd-how__marker-dot { background: var(--teal, #00B2A9); }
.wd-how__step--02 .wd-how__marker-dot { background: var(--teal, #00B2A9); opacity: 0.85; }
.wd-how__step--03 .wd-how__marker-dot { background: var(--teal, #00B2A9); opacity: 1; box-shadow: 0 0 0 6px rgba(0, 178, 169, 0.25), 0 0 24px rgba(0, 178, 169, 0.5); }
.wd-how__step--04 .wd-how__marker-dot { background: color-mix(in srgb, var(--teal, #00B2A9) 80%, white); }
.wd-how__step--05 .wd-how__marker-dot { background: color-mix(in srgb, var(--teal, #00B2A9) 70%, white); }

/* "LIVE" badge on day-1 step */
.wd-how__step--03::after {
  content: 'LIVE';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--teal, #00B2A9);
  background: var(--surface, #fff);
  padding: 3px 8px;
  border-radius: 10px;
  border: 1px solid rgba(0, 178, 169, 0.4);
  animation: wdLivePulse 2.4s ease-in-out infinite;
}
[data-theme="dark"] .wd-how__step--03::after { background: #0A0A0A; }
@keyframes wdLivePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 178, 169, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(0, 178, 169, 0); }
}

/* ---------- FAQ polish: connecting line on left ---------- */
.svc-faq .accordion__item {
  position: relative;
  padding-left: 8px;
}
.svc-faq .accordion__item::before {
  content: '';
  position: absolute;
  left: 0; top: 24px; bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg, transparent, rgba(0, 178, 169, 0.3), transparent);
  opacity: 0;
  transition: opacity 320ms;
}
.svc-faq .accordion__item[open]::before { opacity: 1; }

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  .wd-hero__orb { animation: none !important; }
  .wd-how__marker::after { animation: none !important; }
  .wd-how__step--03::after { animation: none !important; }
  .wd-price-v3__num { animation: none !important; }
}

/* ==========================================================================
   ENHANCED VIZ — animated connect-the-dots drawing on service card hover
   ========================================================================== */
.wd-services__viz .wd-viz-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: wdLineDraw 2400ms cubic-bezier(.22, 1, .36, 1) 200ms both;
}
@keyframes wdLineDraw {
  0%   { stroke-dashoffset: 600; opacity: 0; }
  20%  { opacity: 0.55; }
  100% { stroke-dashoffset: 0; opacity: 0.55; }
}
.wd-services__viz .wd-viz-dot {
  opacity: 0;
  animation: wdDotPop 600ms cubic-bezier(.22, 1, .36, 1) both;
}
.wd-services__viz .wd-viz-dot:nth-child(3)  { animation-delay: 400ms; }
.wd-services__viz .wd-viz-dot:nth-child(5)  { animation-delay: 700ms; }
.wd-services__viz .wd-viz-dot:nth-child(7)  { animation-delay: 1000ms; }
.wd-services__viz .wd-viz-dot:nth-child(9)  { animation-delay: 1300ms; }
.wd-services__viz .wd-viz-dot:nth-child(11) { animation-delay: 1600ms; }
.wd-services__viz .wd-viz-dot:nth-child(13) { animation-delay: 1900ms; }
@keyframes wdDotPop {
  0%   { opacity: 0; transform: scale(0); transform-origin: center; }
  60%  { opacity: 1; transform: scale(1.6); }
  100% { opacity: 1; transform: scale(1); }
}
.wd-services__card:hover .wd-services__viz .wd-viz-line {
  animation: wdLineDraw 1200ms cubic-bezier(.22, 1, .36, 1) both;
}

/* Ensure new mini icon style exists when used in cards */
.wd-services__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

@media (prefers-reduced-motion: reduce) {
  .wd-services__viz .wd-viz-line,
  .wd-services__viz .wd-viz-dot {
    animation: none !important;
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

/* ==========================================================================
   POLISHED HERO — additional finishing touches
   ========================================================================== */

/* Soft scrollable shimmer on the hero gradient layer */
.wd-v3 .wd-hero__gradient--1 {
  animation: wdGradPan 18s ease-in-out infinite alternate;
}
@keyframes wdGradPan {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
  100% { transform: translate3d(2%, 1%, 0) scale(1.04); }
}

/* Hero CTA button glow halo on hover */
.wd-v3 .cta-button.primary {
  position: relative;
  z-index: 1;
}
.wd-v3 .cta-button.primary::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, var(--wd-accent, var(--teal, #00B2A9)), transparent 50%, var(--wd-accent, var(--teal, #00B2A9)));
  filter: blur(14px);
  opacity: 0;
  z-index: -1;
  transition: opacity 320ms cubic-bezier(.22, 1, .36, 1);
}
.wd-v3 .cta-button.primary:hover::after { opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
  .wd-v3 .wd-hero__gradient--1 { animation: none; }
}

/* ===========================================================================
   SEO PAGE · Horatos visibility command centre
   =========================================================================== */
.page--svc-seo{
  --seo-teal: #00B2A9;
  --seo-orange: #FF6B35;
  --seo-purple: #8B5CF6;
}
.page--svc-seo .svc-hero{
  min-height: 92vh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 18% 12%, rgba(0,178,169,0.20), transparent 34%),
    radial-gradient(circle at 84% 18%, rgba(139,92,246,0.16), transparent 38%),
    radial-gradient(circle at 70% 82%, rgba(255,107,53,0.12), transparent 36%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 86%, var(--teal) 14%));
}
.page--svc-seo .svc-hero::after{
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 220px;
  background: linear-gradient(180deg, transparent, var(--bg));
  pointer-events: none;
  z-index: 1;
}
.page--svc-seo .svc-hero__grid{
  opacity: 0.52;
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 35%, #000 0 42%, transparent 78%);
}
.page--svc-seo .svc-hero__headline{
  max-width: 1100px;
  font-size: clamp(50px, 8.5vw, 124px);
  line-height: 0.92;
  letter-spacing: -0.07em;
}
.page--svc-seo .svc-hero__line{ display: block; }
.page--svc-seo .svc-hero__line--accent{
  background: linear-gradient(90deg, var(--fg) 0%, var(--teal) 38%, var(--seo-purple) 70%, var(--seo-orange) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 42px rgba(0,178,169,0.16);
}
.page--svc-seo .svc-hero__lede{
  max-width: 880px;
  font-size: clamp(18px, 2vw, 24px);
}
.page--svc-seo .svc-hero__promise{
  max-width: 940px;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--teal) 35%, var(--border));
  border-radius: 24px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 10%, transparent), transparent 58%),
    color-mix(in srgb, var(--card-bg) 92%, var(--teal) 8%);
  box-shadow: 0 24px 80px rgba(0,178,169,0.11);
}
.page--svc-seo .svc-hero__outcomes{
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(0,178,169,0.10), transparent 45%),
    var(--card-bg);
  box-shadow: 0 28px 90px color-mix(in srgb, var(--fg) 10%, transparent);
}
.page--svc-seo .svc-outcome__value{
  background: linear-gradient(135deg, var(--teal), var(--seo-purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero command-centre visual */
.seo-command{
  max-width: 1120px;
  padding: clamp(22px, 4vw, 44px);
  border-radius: 36px;
  border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--border));
  background:
    radial-gradient(circle at 24% 24%, rgba(0,178,169,0.18), transparent 34%),
    radial-gradient(circle at 86% 18%, rgba(139,92,246,0.14), transparent 30%),
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 92%, var(--teal) 8%), var(--card-bg));
  box-shadow: 0 30px 100px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}
.seo-command::before{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,0.13) 48%, transparent 58%);
  transform: translateX(-120%);
  animation: seoSheen 7.5s ease-in-out infinite;
  pointer-events: none;
}
.seo-command__stage{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr);
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
}
.seo-command__radar{
  position: relative;
  min-height: 460px;
  border-radius: 32px;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,178,169,0.18) 0 2px, transparent 3px 100%),
    radial-gradient(circle at 50% 50%, rgba(0,178,169,0.10), transparent 52%);
}
.seo-command__ring,
.seo-command__beam{
  position: absolute;
  inset: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  pointer-events: none;
}
.seo-command__ring--1{ width: 150px; height: 150px; border: 1px solid rgba(0,178,169,0.32); }
.seo-command__ring--2{ width: 270px; height: 270px; border: 1px dashed rgba(0,178,169,0.34); animation: seoSpin 36s linear infinite; }
.seo-command__ring--3{ width: 390px; height: 390px; border: 1px solid color-mix(in srgb, var(--fg) 12%, transparent); animation: seoSpinReverse 58s linear infinite; }
.seo-command__beam{
  width: 390px;
  height: 390px;
  background: conic-gradient(from 0deg, rgba(0,178,169,0.0), rgba(0,178,169,0.20), rgba(0,178,169,0.0) 18% 100%);
  animation: seoSpin 12s linear infinite;
  opacity: 0.85;
}
.seo-command__core{
  position: absolute;
  left: 50%; top: 50%;
  width: 126px; height: 126px;
  transform: translate(-50%, -50%);
  border-radius: 32px;
  display: grid;
  place-items: center;
  gap: 4px;
  color: var(--teal);
  background: color-mix(in srgb, var(--bg) 88%, var(--teal) 12%);
  border: 1px solid rgba(0,178,169,0.35);
  box-shadow: 0 0 40px rgba(0,178,169,0.24), inset 0 0 28px rgba(0,178,169,0.10);
  animation: seoFloat 6s ease-in-out infinite;
}
.seo-command__core span{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
}
.seo-command__node{
  position: absolute;
  width: 154px;
  padding: 13px 14px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--teal) 26%, var(--border));
  background: color-mix(in srgb, var(--card-bg) 90%, var(--teal) 10%);
  box-shadow: 0 18px 46px rgba(0,0,0,0.11);
  backdrop-filter: blur(14px);
  transition: transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}
.seo-command__node:hover{ transform: translateY(-6px); border-color: var(--teal); box-shadow: 0 24px 62px rgba(0,178,169,0.20); }
.seo-command__node-num{
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  color: var(--teal);
  font-size: 10px;
  letter-spacing: 0.16em;
}
.seo-command__node strong{ display: block; font-size: 15px; letter-spacing: -0.02em; }
.seo-command__node small{ display: block; margin-top: 3px; color: var(--fg-muted); font-size: 11px; line-height: 1.35; }
.seo-command__node--1{ left: 3%; top: 13%; }
.seo-command__node--2{ right: 5%; top: 10%; }
.seo-command__node--3{ left: 4%; bottom: 13%; }
.seo-command__node--4{ right: 7%; bottom: 12%; }
.seo-command__node--5{ left: 50%; bottom: 0; transform: translateX(-50%); }
.seo-command__node--5:hover{ transform: translateX(-50%) translateY(-6px); }
.seo-command__terminal{
  border-radius: 26px;
  padding: 18px;
  background: #050505;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 26px 70px rgba(0,0,0,0.28);
}
.seo-command__terminal-top{
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,0.56);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.seo-command__terminal-top span{ width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.seo-command__terminal-top span:nth-child(2){ background: var(--seo-orange); }
.seo-command__terminal-top span:nth-child(3){ background: var(--seo-purple); margin-right: 6px; }
.seo-command__terminal-row{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  font-family: var(--font-mono);
  font-size: 13px;
}
.seo-command__terminal-row:last-child{ border-bottom: 0; }
.seo-command__terminal-row b{ color: rgba(255,255,255,0.72); font-weight: 500; }
.seo-command__terminal-row span{ color: var(--teal); }

/* SEO shift + proof */
.seo-shift{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: start;
}
.seo-shift__copy p{ max-width: 820px; }
.seo-shift__proof{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  border: 1px solid var(--border);
  background: var(--border);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 28px 80px color-mix(in srgb, var(--fg) 8%, transparent);
}
.seo-proof{
  min-height: 128px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    radial-gradient(circle at 88% 18%, rgba(0,178,169,0.12), transparent 32%),
    var(--card-bg);
}
.seo-proof__value{
  display: block;
  color: var(--teal);
  font-size: clamp(38px, 5vw, 66px);
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 0.95;
}
.seo-proof__label{
  margin-top: 10px;
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.45;
}
.seo-signal-pills{
  grid-column: 1 / -1;
}

/* Capabilities */
.seo-capability-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 34px;
}
.seo-capability-card{
  position: relative;
  min-height: 310px;
  padding: 28px;
  border-radius: 28px;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 96%, var(--teal) 4%), var(--card-bg));
  transition: transform 320ms var(--ease), border-color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.seo-capability-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(0,178,169,0.15), transparent 42%),
    radial-gradient(circle at var(--mx, 70%) var(--my, 20%), rgba(0,178,169,0.18), transparent 26%);
  opacity: 0;
  transition: opacity 320ms var(--ease);
}
.seo-capability-card:hover{
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--teal) 70%, var(--border));
  box-shadow: 0 28px 82px rgba(0,178,169,0.14);
}
.seo-capability-card:hover::before{ opacity: 1; }
.seo-capability-card__num{
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  color: var(--teal);
  font-size: 11px;
  letter-spacing: 0.18em;
  margin-bottom: 40px;
}
.seo-capability-card h3,
.seo-capability-card p{ position: relative; z-index: 1; }
.seo-capability-card h3{
  font-size: clamp(22px, 2.3vw, 34px);
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin-bottom: 16px;
}
.seo-capability-card p{ color: var(--fg-muted); font-size: 15px; line-height: 1.65; }
.seo-capability-card__glow{
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,178,169,0.28), transparent 70%);
  filter: blur(6px);
}

/* SEO operating system */
.seo-os{
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(26px, 5vw, 72px);
  align-items: center;
  margin-top: 34px;
}
.seo-os__diagram{
  position: relative;
  min-height: 500px;
  border-radius: 36px;
  border: 1px solid color-mix(in srgb, var(--teal) 24%, var(--border));
  background:
    radial-gradient(circle at 50% 50%, rgba(0,178,169,0.18), transparent 48%),
    linear-gradient(180deg, color-mix(in srgb, var(--card-bg) 92%, var(--teal) 8%), var(--card-bg));
  overflow: hidden;
}
.seo-os__diagram::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0,178,169,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,178,169,0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(circle at 50% 50%, #000, transparent 76%);
}
.seo-os__core{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 152px;
  height: 152px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: color-mix(in srgb, var(--bg) 88%, var(--teal) 12%);
  border: 1px solid rgba(0,178,169,0.36);
  box-shadow: 0 0 54px rgba(0,178,169,0.24);
  z-index: 2;
}
.seo-os__core span{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg);
  text-transform: uppercase;
}
.seo-os__orbit{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px dashed rgba(0,178,169,0.34);
  z-index: 1;
}
.seo-os__orbit--1{ width: 260px; height: 260px; animation: seoSpin 44s linear infinite; }
.seo-os__orbit--2{ width: 390px; height: 390px; animation: seoSpinReverse 70s linear infinite; border-style: solid; opacity: 0.46; }
.seo-os__pulse{
  position: absolute;
  z-index: 3;
  padding: 10px 13px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--fg);
  background: color-mix(in srgb, var(--card-bg) 88%, var(--teal) 12%);
  border: 1px solid rgba(0,178,169,0.32);
  box-shadow: 0 16px 44px rgba(0,178,169,0.14);
}
.seo-os__pulse--1{ left: 12%; top: 18%; }
.seo-os__pulse--2{ right: 10%; top: 22%; }
.seo-os__pulse--3{ left: 13%; bottom: 18%; }
.seo-os__pulse--4{ right: 12%; bottom: 16%; }
.seo-os__cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.seo-os-card{
  min-height: 210px;
  padding: 24px;
  border-radius: 26px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  transition: transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 280ms var(--ease);
}
.seo-os-card:hover{
  transform: translateY(-6px);
  border-color: var(--teal);
  box-shadow: 0 20px 64px rgba(0,178,169,0.13);
}
.seo-os-card span{
  display: block;
  margin-bottom: 22px;
  color: var(--teal);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.seo-os-card h3{ font-size: 24px; letter-spacing: -0.035em; margin-bottom: 10px; }
.seo-os-card p{ color: var(--fg-muted); font-size: 14.5px; line-height: 1.6; }

.seo-diff{
  border: 1px solid var(--border);
  border-radius: 28px;
  overflow: hidden;
  background: var(--card-bg);
}
.seo-diff .svc-diff__row{ padding: 28px; }
.seo-diff .svc-diff__row--us{
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--teal) 13%, transparent), transparent 62%),
    color-mix(in srgb, var(--card-bg) 94%, var(--teal) 6%);
}
.seo-deliverables .seo-deliverable{
  border-radius: 26px;
  overflow: hidden;
}
.seo-deliverables .seo-deliverable::after{
  content: "";
  position: absolute;
  inset: auto 18px 18px auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,178,169,0.20), transparent 70%);
  opacity: 0;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.seo-deliverables .seo-deliverable:hover::after{ opacity: 1; transform: scale(1.6); }

@keyframes seoSpin{ to{ transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes seoSpinReverse{ to{ transform: translate(-50%, -50%) rotate(-360deg); } }
@keyframes seoFloat{
  0%, 100%{ transform: translate(-50%, -50%) translateY(0); }
  50%{ transform: translate(-50%, -50%) translateY(-10px); }
}
@keyframes seoSheen{
  0%, 45%{ transform: translateX(-120%); }
  75%, 100%{ transform: translateX(120%); }
}

[data-theme="dark"] .seo-command,
[data-theme="dark"] .seo-os__diagram,
[data-theme="dark"] .seo-capability-card,
[data-theme="dark"] .seo-os-card,
[data-theme="dark"] .seo-proof{
  box-shadow: 0 28px 90px rgba(0,178,169,0.09);
}

@media (max-width: 1024px){
  .seo-command__stage,
  .seo-shift,
  .seo-os{ grid-template-columns: 1fr; }
  .seo-capability-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-command__radar{ min-height: 420px; }
}
@media (max-width: 720px){
  .page--svc-seo .svc-hero{ min-height: auto; }
  .page--svc-seo .svc-hero__headline{ font-size: clamp(42px, 13vw, 68px); }
  .seo-command{ border-radius: 26px; padding: 18px; }
  .seo-command__radar{ min-height: 520px; }
  .seo-command__ring--3,
  .seo-command__beam{ width: 300px; height: 300px; }
  .seo-command__ring--2{ width: 215px; height: 215px; }
  .seo-command__node{ width: 138px; padding: 11px 12px; }
  .seo-command__node--1{ left: 0; top: 10%; }
  .seo-command__node--2{ right: 0; top: 9%; }
  .seo-command__node--3{ left: 0; bottom: 14%; }
  .seo-command__node--4{ right: 0; bottom: 13%; }
  .seo-capability-grid,
  .seo-os__cards{ grid-template-columns: 1fr; }
  .seo-capability-card{ min-height: auto; }
  .seo-os__diagram{ min-height: 420px; }
  .seo-os__orbit--2{ width: 310px; height: 310px; }
}
@media (prefers-reduced-motion: reduce){
  .seo-command::before,
  .seo-command__ring,
  .seo-command__beam,
  .seo-command__core,
  .seo-os__orbit{ animation: none !important; }
}

/* ==========================================================================
   v7 · BRIGHT-INTERFACE REFINEMENTS
   --------------------------------------------------------------------------
   Horatos now ships with a single, bright interface. The night/dark mode
   has been retired. This block tightens the day-mode visuals: text
   contrast, border weight, micro-typography, and hover affordances —
   the small things that quietly add up to a sharper, more confident feel.
   Scoped at the global :root so the entire site benefits from the same
   refinements, while the homepage-only tweaks live under .page--home.
   ========================================================================== */

/* ---- 1. Lift the global tokens for clarity (light only) ---- */
:root {
  /* Text contrast: lift muted from #6B7280 → #4B5563 (WCAG AA at 17px). */
  --muted: #4B5563;
  --fg-muted: #4B5563;
  /* Borders: keep them quiet but present. */
  --border: #E6E7EB;
  --border-strong: rgba(10, 10, 10, 0.10);
  /* Header glass: a touch more white, slightly stronger hairline. */
  --header-bg: rgba(255, 255, 255, 0.86);
  --header-border: rgba(10, 10, 10, 0.08);
}

/* The cinematic dark sections (.section.dark, .page-hero--dark, the final-CTA
   field, the philosophy quote) remain as intentional editorial contrast.
   They are not "night mode" — they are accent islands inside the bright
   interface. Their copy stays white, so we override the lifted muted token
   back to a soft white where needed. */
.section.dark,
.page-hero--dark,
.final-cta--cinematic,
.section--quote {
  --fg-muted: rgba(255, 255, 255, 0.70);
}
.section.dark .body,
.section.dark .subline,
.section--quote .body,
.section--quote .subline,
.final-cta--cinematic .subline,
.final-cta--cinematic .final-cta__lede {
  color: rgba(255, 255, 255, 0.78);
}

/* ---- 2. Body & paragraph: better reading weight ---- */
body {
  color: var(--fg);
  /* Slightly tighter tracking on body — feels more confident. */
  letter-spacing: -0.005em;
}
.body {
  color: #3F4754;          /* darker than --fg-muted, lighter than --fg */
  font-weight: 400;
}
.subline {
  color: #4B5563;
}

/* ---- 3. Headings: sharper black, tighter tracking ---- */
h1, h2, h3, h4 { color: #0A0A0A; }
h2 { letter-spacing: -0.030em; }
h3 { letter-spacing: -0.018em; }

/* ---- 4. Eyebrow caption: more readable but still discreet ---- */
.caption {
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.20em;
}
.caption::before { opacity: 0.75; }

/* ---- 5. Hero — micro polish ---- */
.hero__eyebrow {
  color: #1F2937;          /* was muted, now clearly readable */
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(10, 10, 10, 0.08);
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.02);
}
.hero__subline.hero__subline--lede {
  color: #1F2937;          /* main lede gains contrast */
  font-weight: 500;
}
.hero__subline.hero__subline--detail {
  color: #4B5563;          /* secondary stays softer */
}
.hero__subline em { color: #0A0A0A; font-weight: 600; }
.hero__meta { color: #4B5563; }
.hero__meta em { color: #0A0A0A; }

/* Hero radial glow — a touch more present so the bright canvas feels alive. */
.hero--home::before {
  background: radial-gradient(closest-side, rgba(0, 178, 169, 0.085), transparent 70%);
}

/* Hero AI-platform chips: clearer pill in the bright interface. */
.hero__sub-chip {
  background: #FFFFFF;
  border-color: rgba(10, 10, 10, 0.10);
  color: #1F2937;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.03);
}
.hero__sub-chips-label { color: #6B7280; }

/* ---- 6. Stats bar — sharper numbers, quieter rule ---- */
.stat__number { color: #0A0A0A; font-weight: 700; }
.stat__label  { color: #1F2937; font-weight: 600; }
.stat__detail { color: #4B5563; }
.stat__index  { color: var(--teal); opacity: 0.9; }

/* ---- 7. Service cards on home — crisper border + warmer hover ---- */
.page--home .service-card {
  background: #FFFFFF;
  border: 1px solid #E6E7EB;
  transition:
    transform 350ms var(--ease),
    border-color 250ms var(--ease),
    box-shadow 350ms var(--ease);
}
.page--home .service-card:hover {
  border-color: rgba(0, 178, 169, 0.45);
  transform: translateY(-3px);
  box-shadow:
    0 12px 28px rgba(10, 10, 10, 0.06),
    0 0 0 1px rgba(0, 178, 169, 0.10);
}
.page--home .service-card h3 { color: #0A0A0A; }
.page--home .service-card p  { color: #4B5563; }
.page--home .service-card__link {
  color: var(--teal);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ---- 8. Industry cards — same crispness ---- */
.page--home .industry-card,
.page--home .industry-card--rich {
  background: #FFFFFF;
  border: 1px solid #E6E7EB;
}
.page--home .industry-card:hover,
.page--home .industry-card--rich:hover {
  border-color: rgba(0, 178, 169, 0.40);
  box-shadow: 0 10px 24px rgba(10, 10, 10, 0.05);
}
.page--home .industry-card h3 { color: #0A0A0A; }
.page--home .industry-card p  { color: #4B5563; }
.page--home .industry-card__num { color: var(--teal); opacity: 0.85; }

/* ---- 9. Manifesto block — better legibility ---- */
.page--home .manifesto__greek-letters { color: #0A0A0A; }
.page--home .manifesto__greek-translit { color: var(--teal); font-weight: 600; }
.page--home .manifesto__greek-pos      { color: #6B7280; }
.page--home .manifesto__def-num        { color: var(--teal); font-weight: 700; }
.page--home .manifesto__def-text       { color: #1F2937; }
.page--home .manifesto__pillar-title   { color: #0A0A0A; }
.page--home .manifesto__pillar-body    { color: #4B5563; }
.page--home .manifesto__promise-label  { color: var(--teal); font-weight: 700; letter-spacing: 0.06em; }
.page--home .manifesto__promise-body   { color: #1F2937; }

/* ---- 10. Section captions on home — tighter teal ---- */
.page--home .caption {
  color: var(--teal);
}

/* ---- 11. CTA buttons — tiny weight bump for confidence ---- */
.cta { font-weight: 600; }
.cta--primary {
  background: #0A0A0A;
  color: #FFFFFF;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.16);
}
.cta--primary:hover {
  background: var(--teal);
  box-shadow: 0 12px 28px rgba(0, 178, 169, 0.28), 0 0 0 3px rgba(0, 178, 169, 0.10);
}
.cta--secondary {
  border-color: rgba(10, 10, 10, 0.16);
  color: #0A0A0A;
}
.cta--secondary:hover {
  border-color: #0A0A0A;
  background: #0A0A0A;
  color: #FFFFFF;
}

/* ---- 12. Header — slightly more presence on white ---- */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
}
.site-header__nav .nav-link {
  color: #1F2937;
  font-weight: 500;
}
.site-header__nav .nav-link:hover { color: #0A0A0A; }
.site-header__nav .nav-link--active { color: #0A0A0A; font-weight: 600; }

/* ---- 13. Footer-link / arrow refinements on home ---- */
.page--home .text-link {
  color: #0A0A0A;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 178, 169, 0.35);
  transition: border-color 220ms var(--ease), color 220ms var(--ease);
}
.page--home .text-link:hover {
  color: var(--teal);
  border-bottom-color: var(--teal);
}

/* ---- 14. The Shift section — visual frame quietly defined ---- */
.page--home .section--shift .shift__visual {
  background: linear-gradient(180deg, #FAFAFB 0%, #F4F5F7 100%);
  border: 1px solid #E6E7EB;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.02);
}

/* ---- 15. Ecosystem cards — clearer card affordance ---- */
.page--home .eco-card {
  background: #FFFFFF;
  border: 1px solid #E6E7EB;
  transition: transform 320ms var(--ease), border-color 240ms var(--ease), box-shadow 320ms var(--ease);
}
.page--home .eco-card:hover {
  border-color: rgba(0, 178, 169, 0.40);
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(10, 10, 10, 0.06);
}
.page--home .eco-card__name { color: #0A0A0A; }
.page--home .eco-card__role { color: var(--teal); font-weight: 600; }
.page--home .eco-card__desc { color: #4B5563; }

/* ---- 16. Team preview — name & title contrast ---- */
.page--home .team-preview__name  { color: #0A0A0A; font-weight: 600; }
.page--home .team-preview__name a { color: #0A0A0A; }
.page--home .team-preview__name a:hover { color: var(--teal); }
.page--home .team-preview__title { color: #4B5563; }

/* ---- 17. Selection colour, the small detail people don't notice ---- */
::selection { background: rgba(0, 178, 169, 0.20); color: #0A0A0A; }

/* ---- 18. Focus rings — thinner, calmer, still accessible ---- */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---- 19. Hide any lingering theme-toggle markup defensively ---- */
.theme-toggle { display: none !important; }

/* ---- 20. Smoother section transition borders on white ---- */
.page--home .section + .section { border-top: 1px solid transparent; }
.page--home .section.alt-bg {
  background: linear-gradient(180deg, #FAFAFB 0%, #F7F7F8 100%);
  border-top: 1px solid rgba(10, 10, 10, 0.04);
  border-bottom: 1px solid rgba(10, 10, 10, 0.04);
}


/* ==========================================================================
   v8 · APPLE-GRADE POLISH (homepage)
   --------------------------------------------------------------------------
   Layered depth, cinematic motion, type as architecture, quiet luxury.
   Apple builds presence through 5 levers, each handled below in turn:
     1. Whitespace & rhythm
     2. Material & depth (glass, gradient hairlines, elevation)
     3. Cinematic motion (parallax, magnetic CTAs, headline shimmer)
     4. Type as architecture
     5. Micro-details (scroll-progress, hairline reveals, spotlight cursor)
   This layer sits on top of v7 so we never break earlier work — only
   refine what the eye actually catches.
   ========================================================================== */

/* ---- 1. SCROLL-PROGRESS BAR ──────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 300;
  background: transparent;
  pointer-events: none;
}
.scroll-progress__bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg,
    rgba(0, 178, 169, 0) 0%,
    var(--teal) 12%,
    var(--teal) 85%,
    rgba(0, 178, 169, 0.6) 100%);
  transform-origin: left;
  transition: width 80ms linear;
  box-shadow: 0 0 12px rgba(0, 178, 169, 0.45);
}

/* ---- 2. HEADER · scroll morph (Apple sticky pattern) ─────────────────── */
.site-header {
  transition:
    background 320ms var(--ease),
    border-color 320ms var(--ease),
    backdrop-filter 320ms var(--ease),
    box-shadow 320ms var(--ease),
    height 320ms var(--ease);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(10, 10, 10, 0.06);
  -webkit-backdrop-filter: saturate(200%) blur(22px);
  backdrop-filter: saturate(200%) blur(22px);
  box-shadow:
    0 1px 0 rgba(10, 10, 10, 0.03),
    0 8px 24px -16px rgba(10, 10, 10, 0.10);
}
.site-header.is-scrolled .site-header__inner { height: 56px; }

/* ---- 3. HERO · cinematic depth ─────────────────────────────────────── */

/* 3a. Replace the single radial glow with a layered aurora */
.page--home .hero--home::before {
  background:
    radial-gradient(closest-side, rgba(0, 178, 169, 0.10), transparent 70%);
  filter: blur(8px);
}
.page--home .hero--home::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 18% 30%, rgba(0, 178, 169, 0.07), transparent 55%),
    radial-gradient(ellipse 50% 50% at 82% 70%, rgba(255, 107, 53, 0.05), transparent 55%),
    radial-gradient(ellipse 70% 40% at 50% 110%, rgba(0, 178, 169, 0.06), transparent 60%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  animation: heroAuroraFade 1800ms var(--ease-out) 250ms forwards;
}
@keyframes heroAuroraFade {
  to { opacity: 1; }
}

/* 3b. Hero parallax — JS sets --hero-y on the inner */
.page--home .hero__inner {
  will-change: transform;
  transform: translate3d(0, var(--hero-y, 0), 0);
}

/* 3c. Logo gets a quiet floating motion */
.page--home .hero__logo {
  animation: heroLogoFloat 6s ease-in-out infinite;
}
@keyframes heroLogoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* 3d. Eyebrow — frosted glass pill */
.page--home .hero__eyebrow {
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  backdrop-filter: saturate(180%) blur(10px);
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(10, 10, 10, 0.04);
  transition: transform 400ms var(--ease), box-shadow 400ms var(--ease);
}
.page--home .hero__eyebrow:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 16px rgba(10, 10, 10, 0.06);
}

/* 3e. THE HEADLINE · gradient + shimmer (the Apple "Hello" move) */
.page--home .hero__headline {
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.88;
  background: linear-gradient(180deg, #0A0A0A 0%, #1F2937 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page--home .hero__headline-word {
  position: relative;
  background: inherit;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Slow shimmer sweeps once after entrance */
.page--home .hero--loaded .hero__headline-word::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 35%,
    rgba(0, 178, 169, 0.55) 48%,
    rgba(0, 178, 169, 0) 62%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: headlineShimmer 2400ms var(--ease) 1200ms 1;
  pointer-events: none;
}
@keyframes headlineShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -100% 0; }
}
/* The teal period is its own punctuation moment */
.page--home .hero__headline-dot {
  -webkit-text-fill-color: var(--teal);
  color: var(--teal);
  text-shadow: 0 0 24px rgba(0, 178, 169, 0.45);
}

/* 3f. Hero rule — animated gradient hairline */
.page--home .hero__rule {
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  position: relative;
}
.page--home .hero__rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow:
    0 0 0 3px rgba(0, 178, 169, 0.18),
    0 0 16px rgba(0, 178, 169, 0.45);
  animation: heroRuleDot 2.6s var(--ease) infinite;
}
@keyframes heroRuleDot {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.25); opacity: 0.7; }
}

/* 3g. AI-platform chips — frosted, lifted, stagger reveal */
.page--home .hero__sub-chips {
  perspective: 600px;
}
.page--home .hero__sub-chip {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  backdrop-filter: saturate(180%) blur(8px);
  border: 1px solid rgba(10, 10, 10, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 1px 2px rgba(10, 10, 10, 0.03),
    0 0 0 0 rgba(0, 178, 169, 0);
  transition:
    transform 350ms var(--ease),
    box-shadow 350ms var(--ease),
    border-color 350ms var(--ease);
}
.page--home .hero__sub-chip:hover {
  transform: translateY(-2px) scale(1.02);
  border-color: rgba(0, 178, 169, 0.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 8px 18px rgba(10, 10, 10, 0.06),
    0 0 0 3px rgba(0, 178, 169, 0.10);
}

/* 3h. CTA buttons — magnetic + press feel */
.page--home .hero__ctas .cta {
  position: relative;
  overflow: hidden;
  transition:
    transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 320ms var(--ease),
    background 320ms var(--ease);
}
.page--home .hero__ctas .cta::after {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  left: var(--cta-x, 50%);
  top: var(--cta-y, 50%);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.22), transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: transform 500ms var(--ease-out), opacity 500ms var(--ease);
}
.page--home .hero__ctas .cta:hover::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}
.page--home .hero__ctas .cta--primary {
  background: linear-gradient(180deg, #1A1A1A 0%, #0A0A0A 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 2px rgba(10, 10, 10, 0.20),
    0 8px 18px -8px rgba(10, 10, 10, 0.30);
}
.page--home .hero__ctas .cta--primary:hover {
  background: linear-gradient(180deg, #00C9BE 0%, #00B2A9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 16px 32px -10px rgba(0, 178, 169, 0.45),
    0 0 0 4px rgba(0, 178, 169, 0.08);
  transform: translateY(-2px) scale(1.02);
}
.page--home .hero__ctas .cta--primary:active { transform: translateY(0) scale(0.98); }
.page--home .hero__ctas .cta--secondary {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(10, 10, 10, 0.14);
}
.page--home .hero__ctas .cta--secondary:hover {
  background: #0A0A0A;
  border-color: #0A0A0A;
  color: #FFFFFF;
  transform: translateY(-2px) scale(1.02);
}
.page--home .hero__ctas .cta--secondary:active { transform: translateY(0) scale(0.98); }

/* 3i. Scroll indicator — refined chevron */
.page--home .hero__scroll-indicator {
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
}
.page--home .hero__scroll-indicator.is-hidden {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

/* ---- 4. STATS · glass row with shimmering numbers ─────────────────── */
.page--home .stats {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
  border-top: 1px solid rgba(10, 10, 10, 0.05);
  border-bottom: 1px solid rgba(10, 10, 10, 0.05);
  padding: 96px 0;
  position: relative;
}
.page--home .stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 60% at 0% 50%, rgba(0, 178, 169, 0.04), transparent 60%),
    radial-gradient(ellipse 40% 60% at 100% 50%, rgba(0, 178, 169, 0.04), transparent 60%);
  pointer-events: none;
}
.page--home .stat {
  padding: 12px 32px;
  transition: transform 400ms var(--ease);
}
.page--home .stat:hover { transform: translateY(-2px); }
.page--home .stat + .stat::before {
  background: linear-gradient(180deg, transparent, rgba(10, 10, 10, 0.10), transparent);
  width: 1px;
}
.page--home .stat__number {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.04em;
  background: linear-gradient(180deg, #0A0A0A 0%, #2A2A2A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page--home .stat__index {
  letter-spacing: 0.20em;
  font-weight: 600;
}

/* ---- 5. SERVICE / INDUSTRY / ECOSYSTEM cards · spotlight cursor ─── */

/* The "spotlight" — a teal radial that follows the cursor inside the card.
   JS sets --mx / --my as the cursor position in % within the card. */
.page--home .service-card,
.page--home .industry-card,
.page--home .industry-card--rich,
.page--home .eco-card,
.page--home .manifesto__pillar {
  position: relative;
  isolation: isolate;
  background: #FFFFFF;
  border: 1px solid rgba(10, 10, 10, 0.06);
  border-radius: 18px;
  transition:
    transform 420ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 320ms var(--ease),
    box-shadow 420ms var(--ease);
  overflow: hidden;
}
.page--home .service-card::before,
.page--home .industry-card::before,
.page--home .eco-card::before,
.page--home .manifesto__pillar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(0, 178, 169, 0.10),
    transparent 45%
  );
  opacity: 0;
  transition: opacity 320ms var(--ease);
  pointer-events: none;
  z-index: 0;
}
.page--home .service-card:hover::before,
.page--home .industry-card:hover::before,
.page--home .eco-card:hover::before,
.page--home .manifesto__pillar:hover::before {
  opacity: 1;
}
.page--home .service-card > *,
.page--home .industry-card > *,
.page--home .eco-card > *,
.page--home .manifesto__pillar > * {
  position: relative;
  z-index: 1;
}

/* Gradient hairline border on hover (Apple's Pro hover trick) */
.page--home .service-card,
.page--home .industry-card,
.page--home .eco-card {
  background-clip: padding-box;
}
.page--home .service-card:hover,
.page--home .industry-card--rich:hover,
.page--home .eco-card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(0, 178, 169, 0.30),
    0 18px 40px -16px rgba(10, 10, 10, 0.16),
    0 4px 12px -8px rgba(0, 178, 169, 0.20);
}
.page--home .industry-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(0, 178, 169, 0.25),
    0 14px 32px -16px rgba(10, 10, 10, 0.14);
}

/* Service card — refined icon motion + chip-like number */
.page--home .service-card {
  padding: 40px 32px 36px;
}
.page--home .service-card .service-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.06), rgba(10, 10, 10, 0.02));
  border: 1px solid rgba(10, 10, 10, 0.05);
  margin-bottom: 24px;
  transition:
    background 400ms var(--ease),
    border-color 400ms var(--ease),
    transform 500ms var(--ease-out),
    color 400ms var(--ease);
}
.page--home .service-card:hover .service-icon {
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.16), rgba(0, 178, 169, 0.04));
  border-color: rgba(0, 178, 169, 0.35);
  color: var(--teal);
  transform: rotate(-4deg) scale(1.06);
}

/* Service card top hairline */
.page--home .service-card::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(0, 178, 169, 0) 30%,
    rgba(0, 178, 169, 0.6) 50%,
    rgba(0, 178, 169, 0) 70%,
    transparent 100%);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 600ms var(--ease);
  z-index: 2;
}
.page--home .service-card:hover::after {
  transform: scaleX(1);
}

/* Industry-card refinement */
.page--home .industry-card,
.page--home .industry-card--rich {
  padding: 32px 28px;
}
.page--home .industry-card__icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.05), rgba(10, 10, 10, 0.02));
  border: 1px solid rgba(10, 10, 10, 0.05);
  margin-bottom: 20px;
  transition: all 320ms var(--ease);
}
.page--home .industry-card:hover .industry-card__icon {
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.14), rgba(0, 178, 169, 0.04));
  border-color: rgba(0, 178, 169, 0.30);
  color: var(--teal);
}
.page--home .industry-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--teal);
  font-weight: 600;
  margin-bottom: 12px;
}
.page--home .industry-card__arrow {
  position: absolute;
  bottom: 24px;
  right: 28px;
  font-size: 18px;
  color: rgba(10, 10, 10, 0.25);
  transition: color 280ms var(--ease), transform 280ms var(--ease);
}
.page--home .industry-card:hover .industry-card__arrow {
  color: var(--teal);
  transform: translateX(4px);
}

/* Ecosystem card refinement — same treatment, slightly bigger */
.page--home .eco-card {
  padding: 36px 32px;
}
.page--home .eco-card__logo {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.08), rgba(10, 10, 10, 0.02));
  border: 1px solid rgba(10, 10, 10, 0.05);
  margin-bottom: 24px;
  color: var(--teal);
  transition: all 360ms var(--ease);
}
.page--home .eco-card:hover .eco-card__logo {
  transform: scale(1.05) rotate(-3deg);
  background: linear-gradient(135deg, rgba(0, 178, 169, 0.18), rgba(0, 178, 169, 0.05));
  border-color: rgba(0, 178, 169, 0.35);
}
.page--home .eco-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--teal);
  opacity: 0.9;
  font-weight: 600;
}

/* ---- 6. MANIFESTO · refined glass tiles ────────────────────────────── */
.page--home .manifesto__pillar {
  padding: 40px 32px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAFB 100%);
}
.page--home .manifesto__pillar:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(0, 178, 169, 0.25),
    0 20px 44px -18px rgba(10, 10, 10, 0.16);
}
.page--home .manifesto__pillar-icon {
  color: var(--teal);
  transition: transform 600ms var(--ease-out);
}
.page--home .manifesto__pillar:hover .manifesto__pillar-icon {
  transform: scale(1.06);
}
.page--home .manifesto__pillar-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  color: var(--teal);
  font-weight: 600;
}

/* Manifesto diagram tile */
.page--home .manifesto__diagram-frame {
  background: linear-gradient(180deg, #FAFAFB 0%, #F4F5F7 100%);
  border: 1px solid rgba(10, 10, 10, 0.05);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.page--home .manifesto__diagram-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 50% at 30% 30%, rgba(0, 178, 169, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 70%, rgba(0, 178, 169, 0.06), transparent 60%);
  pointer-events: none;
}

/* Promise block — quiet hero quote */
.page--home .manifesto__promise {
  text-align: center;
  margin-top: 80px;
  padding-top: 56px;
  position: relative;
}
.page--home .manifesto__promise-rule {
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent, rgba(0, 178, 169, 0.55), transparent);
  margin: 0 auto 32px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.page--home .manifesto__promise-text {
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.5;
  letter-spacing: -0.018em;
  max-width: 720px;
  margin: 0 auto 32px;
  color: #0A0A0A;
  font-weight: 500;
}

/* ---- 7. SECTION CAPTION · animated dot pulse ───────────────────────── */
.page--home .caption {
  font-weight: 600;
  letter-spacing: 0.20em;
}
.page--home .caption::before {
  width: 28px;
  background: linear-gradient(90deg, transparent, var(--teal));
  opacity: 1;
}

/* ---- 8. SECTION HEADINGS · larger Apple-style display scale ──────── */
.page--home .section h2,
.page--home .stats + .section h2 {
  letter-spacing: -0.034em;
  line-height: 1.04;
}
.page--home .section .subline {
  font-size: 19px;
  line-height: 1.55;
  margin-top: 16px;
}

/* ---- 9. FOUR-DOT DIVIDER · refined break ───────────────────────────── */
.page--home .four-dot-divider {
  padding: 32px 0;
  display: flex;
  justify-content: center;
  color: rgba(10, 10, 10, 0.18);
  position: relative;
}
.page--home .four-dot-divider::before,
.page--home .four-dot-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10, 10, 10, 0.10));
}
.page--home .four-dot-divider::before { right: calc(50% + 24px); }
.page--home .four-dot-divider::after  { left:  calc(50% + 24px); transform: scaleX(-1); }

/* ---- 10. THE SHIFT · diagram tile ──────────────────────────────────── */
.page--home .section--shift .shift__visual {
  background: linear-gradient(180deg, #FAFAFB 0%, #F4F5F7 100%);
  border: 1px solid rgba(10, 10, 10, 0.05);
  border-radius: 20px;
  padding: 32px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 1px 2px rgba(10, 10, 10, 0.02);
}
.page--home .section--shift .shift__visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 30% 30%, rgba(0, 178, 169, 0.06), transparent 60%),
    radial-gradient(ellipse 50% 50% at 70% 70%, rgba(0, 178, 169, 0.04), transparent 60%);
  pointer-events: none;
}

/* ---- 11. TEAM PREVIEW · portrait depth ─────────────────────────────── */
.page--home .team-preview__photo {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 6px 16px -6px rgba(10, 10, 10, 0.18);
  transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 420ms var(--ease);
}
.page--home .team-preview__card:hover .team-preview__photo {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 28px -8px rgba(10, 10, 10, 0.22),
    0 0 0 3px rgba(0, 178, 169, 0.16);
}

/* ---- 12. FINAL CTA · refined hero crescendo ────────────────────────── */
.page--home .final-cta--cinematic {
  position: relative;
}
.page--home .final-cta__headline,
.page--home .final-cta__headline--xl {
  letter-spacing: -0.045em;
  line-height: 0.96;
}
.page--home .final-cta__word--glow {
  position: relative;
  background: linear-gradient(180deg, #00D9CE 0%, #00B2A9 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 40px rgba(0, 178, 169, 0.30);
}
.page--home .final-cta__lede {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.6;
  max-width: 580px;
  margin: 32px auto 40px;
}
/* Refine the orbital rings — tighter glow */
.page--home .final-cta__ring {
  border-color: rgba(0, 178, 169, 0.18);
}
.page--home .final-cta__pulse {
  box-shadow:
    0 0 0 0 rgba(0, 178, 169, 0.50),
    0 0 32px rgba(0, 178, 169, 0.45);
}
.page--home .final-cta__buttons .cta--primary {
  background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F2 100%);
  color: #0A0A0A;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 6px 18px rgba(0, 0, 0, 0.18);
}
.page--home .final-cta__buttons .cta--primary:hover {
  background: linear-gradient(180deg, #00C9BE 0%, #00B2A9 100%);
  color: #FFFFFF;
  transform: translateY(-2px) scale(1.02);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 16px 36px -10px rgba(0, 178, 169, 0.55);
}

/* ---- 13. UNIVERSAL · graceful scrollbar (WebKit) ───────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(10, 10, 10, 0.14);
  border-radius: 6px;
  border: 2px solid #FFFFFF;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 10, 10, 0.22);
}

/* ---- 14. REVEAL · finer ease + slight blur drop ────────────────────── */
.page--home .reveal {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(6px);
  transition:
    opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: opacity, transform, filter;
}
.page--home .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ---- 15. MOBILE · keep the depth, lighten the cost ─────────────────── */
@media (max-width: 767px) {
  .page--home .hero--home::after { opacity: 0.6; }
  .page--home .service-card,
  .page--home .industry-card,
  .page--home .eco-card,
  .page--home .manifesto__pillar { padding: 28px 24px; }
  .page--home .stat__number { font-size: clamp(36px, 12vw, 48px); }
  .page--home .reveal { filter: none; }
}

/* ---- 16. REDUCED MOTION · respect user preference ──────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page--home .hero__logo,
  .page--home .hero--loaded .hero__headline-word::after,
  .page--home .hero__rule::after,
  .page--home .hero--home::after,
  .page--home .reveal { animation: none !important; }
  .page--home .reveal { opacity: 1; transform: none; filter: none; }
  .page--home .hero__inner { transform: none !important; }
}

/* ==========================================================================
   v9 · APPLE DESIGN DIRECTOR PASS · Homepage refinement
   --------------------------------------------------------------------------
   What this layer fixes (each tiny — collectively a different feeling):
     A. Hero composition: tighter rhythm, type as architecture, calm canvas
     B. Eyebrow: from pill to editorial line + dot
     C. Headline anchor: period weight, optical alignment
     D. Sub-line: editorial measure, clear hierarchy
     E. Plexus particles: dimmed near the type, reads as atmosphere not noise
     F. Cookie banner: light glass card, not dark slab
     G. Chat bubble: quieter resting state, animates in late
     H. Stats: tabular figures, monospace, larger
     I. Cards: softer elevation, refined hover
     J. Section bridges: hairline transitions
   Scoped to .page--home (and a few global tweaks marked).
   ========================================================================== */

/* ─── A. HERO · tighter composition ─────────────────────────────────────── */
.page--home .hero--home {
  /* keep generous breathing room but compose it */
  padding: 96px 24px 120px;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 768px) {
  .page--home .hero--home {
    padding: 72px 20px 88px;
    min-height: auto;
  }
}

/* Inner column: cap measure for editorial calm, tighten gaps */
.page--home .hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 980px;
  margin: 0 auto;
  gap: 0; /* we set explicit margins on each item */
}

/* Logo sits closer to eyebrow, smaller silhouette feels more refined */
.page--home .hero__logo {
  margin: 0 0 28px;
  width: 88px;
  height: 88px;
}
.page--home .hero__logo svg { width: 100%; height: 100%; }

/* ─── B. EYEBROW · editorial line + dot (kill the pill) ─────────────────── */
.page--home .hero__eyebrow {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6B7280;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 32px;
}
.page--home .hero__eyebrow:hover {
  transform: none;
  box-shadow: none !important;
  color: #1F2937;
}
.page--home .hero__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.18);
  animation: heroEyebrowPulse 2.4s var(--ease) infinite;
}
@keyframes heroEyebrowPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(0,178,169,0.18); }
  50%      { box-shadow: 0 0 0 6px rgba(0,178,169,0.06); }
}
.page--home .hero__eyebrow-text {
  display: inline-block;
}

/* ─── C. HEADLINE · optical refinement ─────────────────────────────────── */
.page--home .hero__headline {
  margin: 0;
  font-size: clamp(72px, 12vw, 168px);
  letter-spacing: -0.055em;
  line-height: 0.86;
  font-weight: 700;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1;
}
.page--home .hero__headline-space {
  /* tighten word-gap visually  */
  display: inline-block;
  width: 0.18em;
}
/* Period sits on the baseline as a physical dot, glow-anchored to the right */
.page--home .hero__headline-dot {
  display: inline-block;
  margin-left: -0.04em;
  font-size: 0.95em;
  vertical-align: baseline;
  text-shadow:
    0 0 28px rgba(0, 178, 169, 0.55),
    0 0 56px rgba(0, 178, 169, 0.20);
}
.page--home .hero--loaded .hero__headline-dot {
  animation: heroDotIn 900ms var(--ease-out) 700ms both,
             heroDotPulse 3.6s var(--ease) 2200ms infinite;
}
@keyframes heroDotIn {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes heroDotPulse {
  0%, 100% { text-shadow: 0 0 28px rgba(0,178,169,0.55), 0 0 56px rgba(0,178,169,0.20); }
  50%      { text-shadow: 0 0 36px rgba(0,178,169,0.75), 0 0 80px rgba(0,178,169,0.30); }
}

/* ─── D. SUB-LINE · editorial measure, clearer hierarchy ────────────────── */
.page--home .hero__rule {
  margin: 36px 0 28px;
}
.page--home .hero__sub {
  max-width: 640px;
  margin: 0 auto;
}
.page--home .hero__subline.hero__subline--lede {
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: #0A0A0A;
  margin: 0 0 16px;
}
.page--home .hero__subline.hero__subline--lede em {
  color: var(--teal);
  font-style: normal;
  font-weight: 600;
}
.page--home .hero__subline.hero__subline--detail {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: 0;
  color: #4B5563;
  margin: 0 0 32px;
  max-width: 560px;
}

/* Platform chips label · more discrete */
.page--home .hero__sub-chips-label {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9CA3AF;
  margin: 0 0 14px;
}

/* Chips · finer, smaller, less shouting */
.page--home .hero__sub-chip {
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(10, 10, 10, 0.07);
  color: #1F2937;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 1px 2px rgba(10,10,10,0.03);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
.page--home .hero__sub-chip img { width: 16px; height: 16px; }
.page--home .hero__sub-chip:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 178, 169, 0.40);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 6px 16px rgba(0, 178, 169, 0.14);
}

/* CTAs · more breathing room before, anchored bottom of hero */
.page--home .hero__ctas { margin: 36px 0 0; gap: 12px; }
.page--home .hero__meta {
  margin-top: 28px;
  font-size: 11px;
  color: #9CA3AF;
  letter-spacing: 0.04em;
}
.page--home .hero__meta em { color: #1F2937; }

/* Scroll indicator · more discrete */
.page--home .hero__scroll-indicator { opacity: 0; transition: opacity 600ms var(--ease) 1.6s; }
.page--home .hero--loaded .hero__scroll-indicator { opacity: 0.45; }
.page--home .hero__scroll-indicator:hover { opacity: 0.85 !important; }

/* ─── E. PLEXUS · dim around type, treat as atmosphere ─────────────────── */
/* Vignette mask that softens the cosmos canvas in the center column */
.page--home .hero--home::before {
  /* Apply the existing teal radial PLUS a center-mask vignette via box-shadow */
  background:
    radial-gradient(ellipse 38% 28% at 50% 48%, rgba(255,255,255,0.92), rgba(255,255,255,0) 70%),
    radial-gradient(closest-side, rgba(0, 178, 169, 0.08), transparent 70%);
  filter: blur(6px);
}

/* Gentle white falloff at top & bottom for clean section bridges */
.page--home .hero--home {
  background:
    linear-gradient(180deg, #FFFFFF 0%, rgba(255,255,255,0) 12%, rgba(255,255,255,0) 88%, #FFFFFF 100%),
    var(--bg, #FFFFFF);
}

/* ─── F. COOKIE BANNER · light glass, not dark slab ─────────────────────── */
.cookie-banner__inner {
  background: rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: saturate(200%) blur(24px);
          backdrop-filter: saturate(200%) blur(24px);
  border: 1px solid rgba(10, 10, 10, 0.08) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 18px 60px -20px rgba(10, 10, 10, 0.18),
    0 6px 18px -8px rgba(10, 10, 10, 0.08) !important;
  color: #1F2937 !important;
  border-radius: 18px !important;
}
.cookie-banner__inner h2,
.cookie-banner__inner strong { color: #0A0A0A !important; }
.cookie-banner__inner p,
.cookie-banner__inner span { color: #4B5563 !important; }
.cookie-banner__inner a { color: var(--teal) !important; }
.cookie-banner__icon {
  background: rgba(0, 178, 169, 0.10) !important;
  color: var(--teal) !important;
  border: 1px solid rgba(0, 178, 169, 0.20) !important;
}
/* Defer cookie banner appearance until after hero animations settle */
.cookie-banner {
  transition: opacity 500ms var(--ease) 1500ms, transform 500ms var(--ease) 1500ms !important;
}

/* ─── G. CHAT BUBBLE · calm resting, late entrance ──────────────────────── */
.float-whatsapp {
  background: rgba(0, 178, 169, 0.96) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 8px 24px -6px rgba(0, 178, 169, 0.30),
    0 4px 10px -2px rgba(10, 10, 10, 0.10) !important;
  transition:
    transform 320ms var(--ease),
    box-shadow 320ms var(--ease),
    opacity 600ms var(--ease) 2400ms !important;
}
.float-whatsapp__pulse { animation: floatChatPulse 3.2s var(--ease) infinite !important; opacity: 0.6 !important; }
@keyframes floatChatPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%      { transform: scale(1.4); opacity: 0; }
}
.float-whatsapp:hover {
  transform: translateY(-3px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.20) inset,
    0 14px 36px -8px rgba(0, 178, 169, 0.45),
    0 6px 16px -4px rgba(10, 10, 10, 0.14) !important;
}

/* ─── H. STATS · tabular numerals, taller ───────────────────────────────── */
.page--home .stats {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
  border-top: 1px solid rgba(10, 10, 10, 0.05);
  border-bottom: 1px solid rgba(10, 10, 10, 0.05);
}
.page--home .stat__index {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--teal);
  font-weight: 500;
  margin-bottom: 14px;
}
.page--home .stat__number {
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  font-variant-numeric: tabular-nums lining-nums;
  font-size: clamp(48px, 5.6vw, 72px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #0A0A0A 0%, #2A2A2A 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 12px;
}
.page--home .stat__label {
  font-size: 14px;
  font-weight: 600;
  color: #0A0A0A;
  letter-spacing: -0.005em;
  margin-bottom: 6px;
}
.page--home .stat__detail {
  font-size: 13px;
  font-weight: 400;
  color: #6B7280;
  line-height: 1.55;
}

/* ─── I. CARDS · refined elevation, tighter spotlights ──────────────────── */
.page--home .service-card,
.page--home .industry-card,
.page--home .eco-card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 1px 2px rgba(10, 10, 10, 0.025);
  transition:
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 360ms var(--ease),
    border-color 360ms var(--ease);
}
.page--home .service-card:hover,
.page--home .industry-card:hover,
.page--home .eco-card:hover {
  transform: translateY(-4px);
  border-color: rgba(0, 178, 169, 0.32);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 22px 48px -22px rgba(10, 10, 10, 0.18),
    0 8px 18px -8px rgba(0, 178, 169, 0.18);
}

/* Service card title: optical type tightening */
.page--home .service-card h3,
.page--home .industry-card h3 {
  letter-spacing: -0.018em;
}

/* ─── J. SECTION BRIDGES · hairline transitions ─────────────────────────── */
.page--home section + section { position: relative; }
.page--home .stats + .section--manifesto::before,
.page--home .section--manifesto + section::before,
.page--home .services-overview + section::before,
.page--home .industries + section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10,10,10,0.10), transparent);
}

/* ─── K. SECTION-CAPTION · refined kicker (the “Apple kicker”) ──────────── */
.page--home .section-caption,
.page--home .manifesto__eyebrow {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
}

/* ─── L. ALT-BG · subtle dual-stop gradient ─────────────────────────────── */
.page--home .alt-bg {
  background:
    linear-gradient(180deg, #FAFBFC 0%, #F5F6F8 100%) !important;
  border-top: 1px solid rgba(10, 10, 10, 0.04);
  border-bottom: 1px solid rgba(10, 10, 10, 0.04);
}

/* ─── M. PLATFORM CHIP LABEL line · subtle hairline emphasis ────────────── */
.page--home .hero__sub-chips-label::before,
.page--home .hero__sub-chips-label::after {
  background: linear-gradient(90deg, transparent, rgba(10,10,10,0.10), transparent) !important;
  height: 1px !important;
}

/* ─── N. RESPONSIVE refinements ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .page--home .hero__logo { width: 72px; height: 72px; margin: 0 0 22px; }
  .page--home .hero__eyebrow { font-size: 10px; letter-spacing: 0.16em; margin-bottom: 24px; }
  .page--home .hero__headline { font-size: clamp(56px, 16vw, 88px); letter-spacing: -0.045em; line-height: 0.92; }
  .page--home .hero__rule { margin: 28px 0 22px; }
  .page--home .hero__subline.hero__subline--lede { font-size: 17px; line-height: 1.45; }
  .page--home .hero__subline.hero__subline--detail { font-size: 14px; }
  .page--home .hero__ctas { margin-top: 28px; flex-direction: column; width: 100%; }
  .page--home .hero__ctas .cta { width: 100%; justify-content: center; }
  .page--home .hero__sub-chips-label { font-size: 9px; }
  .page--home .stat__number { font-size: clamp(40px, 12vw, 56px); }
}

/* ─── O. REDUCED-MOTION · respect always ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .page--home .hero__logo,
  .page--home .hero__headline-dot,
  .page--home .hero__eyebrow-dot,
  .float-whatsapp__pulse {
    animation: none !important;
  }
}

/* ==========================================================================
   v10 · HOMEPAGE UI RESCUE · May 2026
   Fixes reported homepage roughness: fold balance, headline spacing, mobile
   crowding, chip wrapping, CTA visibility, stats density, and persistent blur.
   ========================================================================== */

.page--home .hero--home {
  min-height: calc(100svh - var(--header-h));
  padding: clamp(48px, 7vh, 72px) 24px clamp(56px, 7vh, 84px);
  align-items: center;
}

.page--home .hero__inner {
  max-width: min(1040px, calc(100vw - 48px));
}

.page--home .hero__logo {
  width: clamp(64px, 6vw, 76px);
  height: clamp(64px, 6vw, 76px);
  margin-bottom: clamp(18px, 2.4vh, 24px);
}

.page--home .hero__eyebrow {
  margin-bottom: clamp(18px, 2.6vh, 24px);
}

.page--home .hero__headline {
  width: 100%;
  gap: 0 0.08em;
  font-size: clamp(76px, 11vw, 154px);
  line-height: 0.9;
  letter-spacing: -0.058em;
}

.page--home .hero__headline-space {
  display: none;
  width: 0;
}

.page--home .hero__headline-word {
  filter: blur(4px);
}

.page--home .hero--loaded .hero__headline-word {
  filter: blur(0);
}

.page--home .hero__rule {
  margin: clamp(22px, 3vh, 30px) 0 clamp(18px, 2.6vh, 24px);
}

.page--home .hero__sub {
  max-width: 700px;
}

.page--home .hero__subline.hero__subline--lede {
  max-width: 680px;
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.42;
}

.page--home .hero__subline.hero__subline--detail {
  max-width: 640px;
  margin-bottom: 20px;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
}

.page--home .hero__sub-chips-label {
  margin-bottom: 10px;
}

.page--home .hero__sub-chips {
  max-width: 760px;
  margin-top: 0;
  gap: 8px;
  justify-content: center;
}

.page--home .hero__sub-chip {
  min-height: 32px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: nowrap;
}

.page--home .hero__ctas {
  margin-top: clamp(22px, 3vh, 30px);
}

.page--home .hero__meta {
  margin-top: 18px;
  font-size: 10.5px;
}

.page--home .hero__scroll-indicator {
  bottom: 16px;
}

.page--home .stats {
  padding: clamp(52px, 6vw, 72px) 0;
}

.page--home .stat {
  padding: 10px clamp(18px, 2.5vw, 28px);
}

.page--home .stat__number {
  font-size: clamp(42px, 4.6vw, 60px);
}

@media (max-width: 900px) {
  .page--home .hero--home {
    min-height: auto;
    padding: 52px 20px 64px;
  }

  .page--home .hero__headline {
    font-size: clamp(64px, 14vw, 104px);
  }

  .page--home .hero__meta {
    display: none;
  }

  .page--home .stats__grid {
    gap: 1px;
    background: rgba(10, 10, 10, 0.06);
    border: 1px solid rgba(10, 10, 10, 0.06);
    border-radius: 24px;
    overflow: hidden;
  }

  .page--home .stat {
    background: #fff;
    padding: 22px 20px;
  }

  .page--home .stat::before {
    display: none !important;
  }
}

@media (max-width: 560px) {
  .page--home .hero--home {
    padding: 34px 16px 44px;
  }

  .page--home .hero__inner {
    max-width: 100%;
  }

  .page--home .hero__logo {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
  }

  .page--home .hero__eyebrow {
    max-width: 100%;
    margin-bottom: 16px;
    font-size: 9px;
    letter-spacing: 0.13em;
    line-height: 1.35;
  }

  .page--home .hero__headline {
    font-size: clamp(62px, 18vw, 76px);
    line-height: 0.92;
    gap: 0 0.04em;
  }

  .page--home .hero__rule {
    width: 44px;
    margin: 20px 0 16px;
  }

  .page--home .hero__subline.hero__subline--lede {
    font-size: 16px;
    line-height: 1.42;
    margin-bottom: 10px;
  }

  .page--home .hero__subline.hero__subline--detail {
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  .page--home .hero__sub-chips-label {
    margin-bottom: 8px;
    font-size: 8px;
    letter-spacing: 0.16em;
    white-space: nowrap;
  }

  .page--home .hero__sub-chips {
    width: 100%;
    max-width: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding: 0 4px 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }

  .page--home .hero__sub-chips::-webkit-scrollbar {
    display: none;
  }

  .page--home .hero__sub-chip {
    flex: 0 0 auto;
    min-height: 30px;
    padding: 5px 9px 5px 6px;
    font-size: 10px;
  }

  .page--home .hero__sub-chip img {
    width: 14px;
    height: 14px;
  }

  .page--home .hero__ctas {
    margin-top: 18px;
    gap: 10px;
  }

  .page--home .hero__ctas .cta {
    min-height: 44px;
    padding: 12px 16px;
    font-size: 14px;
  }

  .page--home .hero__scroll-indicator {
    display: none;
  }

  .page--home .stats {
    padding: 40px 0;
  }

  .page--home .stats__grid {
    grid-template-columns: 1fr 1fr;
    border-radius: 18px;
  }

  .page--home .stat {
    padding: 18px 14px;
  }

  .page--home .stat__index {
    margin-bottom: 8px;
    font-size: 9px;
  }

  .page--home .stat__number {
    font-size: clamp(32px, 10vw, 40px);
    margin-bottom: 8px;
  }

  .page--home .stat__label {
    font-size: 12px;
    line-height: 1.25;
  }

  .page--home .stat__detail {
    font-size: 11px;
    line-height: 1.35;
  }

  .cookie-banner {
    left: 12px !important;
    right: 12px !important;
    bottom: 12px !important;
  }
}

/* v10.1 · final homepage polish after visual QA */
.page--home .hero__headline {
  gap: 0 0.16em;
}

.cookie-banner {
  max-width: 680px;
  bottom: 16px;
}

.cookie-banner__inner {
  gap: 16px !important;
  padding: 14px 16px !important;
}

.cookie-banner__icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 10px !important;
}

.cookie-banner__title {
  font-size: 14px !important;
  margin-bottom: 2px !important;
}

.cookie-banner__text {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.cookie-banner .cta {
  min-height: 38px !important;
  padding: 9px 13px !important;
  font-size: 12px !important;
}

@media (max-width: 560px) {
  .page--home .hero__sub {
    width: 100%;
    max-width: 100%;
  }

  .page--home .hero__headline {
    gap: 0 0.12em;
  }

  .cookie-banner__inner {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  .cookie-banner__icon {
    display: none !important;
  }

  .cookie-banner__title {
    font-size: 13px !important;
  }

  .cookie-banner__text {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
  }

  .cookie-banner__actions {
    gap: 8px !important;
  }

  .cookie-banner .cta {
    flex: 1 1 0;
    justify-content: center;
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: 11.5px !important;
  }
}

/* ==========================================================================
   v11 · GPT IMAGE 2 / APPLE ART DIRECTOR HOMEPAGE
   Translates the approved GPT Image 2 mockup into production CSS: asymmetric
   hero, orbital AI-platform visual, premium whitespace, and card-like stats.
   ========================================================================== */

.page--home .hero--gpt2 {
  min-height: calc(100svh - var(--header-h));
  padding: clamp(56px, 7.4vh, 86px) 24px clamp(52px, 7vh, 82px);
  text-align: left;
  background:
    radial-gradient(ellipse 44% 46% at 78% 42%, rgba(0, 178, 169, 0.12), transparent 62%),
    radial-gradient(ellipse 36% 38% at 8% 18%, rgba(32, 184, 205, 0.06), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 74%, #F7F8FA 100%);
}

.page--home .hero--gpt2::before {
  width: min(920px, 68vw);
  height: min(920px, 68vw);
  left: 76%;
  top: 45%;
  background:
    radial-gradient(closest-side, rgba(0, 178, 169, 0.14), rgba(0, 178, 169, 0.04) 46%, transparent 72%);
  filter: blur(18px);
  opacity: 0.95;
}

.page--home .hero--gpt2::after {
  background:
    linear-gradient(rgba(10, 10, 10, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 10, 10, 0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 78% 62% at 74% 42%, #000 0%, transparent 72%);
  opacity: 0.65;
}

.page--home .hero--gpt2 .hero__inner {
  max-width: min(1240px, calc(100vw - 48px));
  width: 100%;
}

.page--home .hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr);
  align-items: center;
  gap: clamp(44px, 6vw, 96px);
  width: 100%;
}

.page--home .hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 610px;
}

.page--home .hero--gpt2 .hero__logo {
  width: clamp(56px, 5.2vw, 74px);
  height: clamp(56px, 5.2vw, 74px);
  justify-content: flex-start;
  margin: 0 0 22px;
  color: #0A0A0A;
}

.page--home .hero--gpt2 .hero__eyebrow {
  margin: 0 0 clamp(18px, 2.4vh, 24px);
  color: #4B5563;
  background: rgba(255, 255, 255, 0.76);
}

.page--home .hero--gpt2 .hero__headline {
  justify-content: flex-start;
  width: auto;
  max-width: 650px;
  gap: 0 0.13em;
  font-size: clamp(80px, 8.8vw, 138px);
  line-height: 0.88;
  letter-spacing: -0.062em;
  text-align: left;
}

.page--home .hero--gpt2 .hero__rule {
  margin: clamp(24px, 3vh, 34px) 0 clamp(18px, 2.4vh, 26px);
  transform-origin: left;
}

.page--home .hero--gpt2 .hero__sub {
  max-width: 560px;
}

.page--home .hero--gpt2 .hero__subline {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.page--home .hero--gpt2 .hero__subline--lede {
  max-width: 540px;
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.34;
  font-weight: 550;
  letter-spacing: -0.02em;
  color: #111827;
}

.page--home .hero--gpt2 .hero__subline--detail {
  max-width: 560px;
  margin-top: 14px;
  margin-bottom: 0;
  font-size: clamp(14.5px, 1.08vw, 16px);
  line-height: 1.62;
  color: #5B6472;
}

.page--home .hero--gpt2 .hero__ctas {
  justify-content: flex-start;
  margin-top: clamp(26px, 3.5vh, 36px);
}

.page--home .hero--gpt2 .hero__meta {
  justify-content: flex-start;
  margin-top: 26px;
  padding: 0;
  gap: 9px 12px;
  color: #6B7280;
}

.page--home .hero__visual {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(420px, 48vw, 590px);
}

.page--home .hero-orbit {
  position: relative;
  width: min(540px, 42vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.96) 0 17%, rgba(255,255,255,0.58) 18% 28%, transparent 29%),
    radial-gradient(circle at 50% 50%, rgba(0,178,169,0.08), transparent 58%);
  filter: drop-shadow(0 28px 60px rgba(10, 10, 10, 0.10));
}

.page--home .hero-orbit::before,
.page--home .hero-orbit::after {
  content: '';
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 1px solid rgba(0, 178, 169, 0.22);
  animation: orbitSpin 24s linear infinite;
}

.page--home .hero-orbit::after {
  inset: 20%;
  border-color: rgba(10, 10, 10, 0.07);
  border-style: dashed;
  animation-duration: 32s;
  animation-direction: reverse;
}

.page--home .hero-orbit__halo {
  position: absolute;
  inset: var(--orbit-inset, 0);
  border-radius: 50%;
  border: 1px solid rgba(10, 10, 10, 0.055);
  pointer-events: none;
}

.page--home .hero-orbit__halo--outer { --orbit-inset: 0; }
.page--home .hero-orbit__halo--mid { --orbit-inset: 16%; border-color: rgba(0, 178, 169, 0.17); }
.page--home .hero-orbit__halo--inner { --orbit-inset: 32%; border-color: rgba(10, 10, 10, 0.06); }

.page--home .hero-orbit__axis {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 178, 169, 0.28), transparent);
  transform: rotate(var(--axis-rotate, 0deg));
}

.page--home .hero-orbit__axis--one { --axis-rotate: 28deg; }
.page--home .hero-orbit__axis--two { --axis-rotate: -34deg; }

.page--home .hero-orbit__center {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: clamp(150px, 13vw, 188px);
  height: clamp(150px, 13vw, 188px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border-radius: 42px;
  color: #0A0A0A;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(10, 10, 10, 0.07);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 24px 70px -28px rgba(10, 10, 10, 0.24),
    0 0 0 10px rgba(255,255,255,0.42);
}

.page--home .hero-orbit__center span {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6B7280;
}

.page--home .hero-orbit__chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 13px 8px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #18212F;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(10, 10, 10, 0.075);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 14px 34px -18px rgba(10, 10, 10, 0.24);
  animation: platformFloat 6.8s ease-in-out infinite;
}

.page--home .hero-orbit__chip img { width: 18px; height: 18px; }
.page--home .hero-orbit__chip--chatgpt { left: 4%; top: 20%; animation-delay: -0.4s; }
.page--home .hero-orbit__chip--google { right: -4%; top: 16%; animation-delay: -1.6s; }
.page--home .hero-orbit__chip--perplexity { left: -6%; top: 54%; animation-delay: -2.8s; }
.page--home .hero-orbit__chip--claude { right: 3%; top: 50%; animation-delay: -3.6s; }
.page--home .hero-orbit__chip--gemini { left: 18%; bottom: 4%; animation-delay: -4.4s; }
.page--home .hero-orbit__chip--copilot { right: 15%; bottom: 8%; animation-delay: -5.2s; }

@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes platformFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

.page--home .stats--gpt2 {
  padding: clamp(42px, 5vw, 64px) 0;
  background:
    linear-gradient(180deg, #F7F8FA 0%, #FFFFFF 100%);
}

.page--home .stats--gpt2 .stats__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  background: transparent;
  border: 0;
  overflow: visible;
}

.page--home .stats--gpt2 .stat {
  min-height: 210px;
  padding: 26px 24px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border: 1px solid rgba(10, 10, 10, 0.065);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.92) inset,
    0 18px 42px -30px rgba(10, 10, 10, 0.24);
}

.page--home .stats--gpt2 .stat::before { display: none; }
.page--home .stats--gpt2 .stat__number { font-size: clamp(38px, 4.4vw, 58px); }
.page--home .stats--gpt2 .stat__label { max-width: 13em; }

@media (max-width: 1100px) {
  .page--home .hero__layout {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .page--home .hero__content {
    align-items: center;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
  }

  .page--home .hero--gpt2 .hero__logo,
  .page--home .hero--gpt2 .hero__ctas,
  .page--home .hero--gpt2 .hero__meta {
    justify-content: center;
  }

  .page--home .hero--gpt2 .hero__headline,
  .page--home .hero--gpt2 .hero__subline {
    text-align: center;
    justify-content: center;
  }

  .page--home .hero__visual {
    min-height: 320px;
  }

  .page--home .hero-orbit {
    width: min(470px, 78vw);
  }

  .page--home .stats--gpt2 .stats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .page--home .hero--gpt2 {
    padding: 34px 16px 44px;
    text-align: center;
  }

  .page--home .hero--gpt2 .hero__inner {
    max-width: 100%;
  }

  .page--home .hero__layout {
    gap: 28px;
  }

  .page--home .hero--gpt2 .hero__logo {
    width: 52px;
    height: 52px;
    margin-bottom: 16px;
  }

  .page--home .hero--gpt2 .hero__headline {
    font-size: clamp(64px, 18vw, 82px);
    line-height: 0.92;
    letter-spacing: -0.055em;
    gap: 0 0.12em;
  }

  .page--home .hero--gpt2 .hero__subline--lede {
    font-size: 16.5px;
    line-height: 1.42;
  }

  .page--home .hero--gpt2 .hero__subline--detail {
    font-size: 13px;
    line-height: 1.52;
  }

  .page--home .hero--gpt2 .hero__meta {
    display: none;
  }

  .page--home .hero__visual {
    min-height: 300px;
    width: 100%;
    overflow: hidden;
  }

  .page--home .hero-orbit {
    width: min(360px, 92vw);
    transform: scale(0.94);
  }

  .page--home .hero-orbit__center {
    width: 128px;
    height: 128px;
    border-radius: 30px;
  }

  .page--home .hero-orbit__center svg {
    width: 58px;
    height: 58px;
  }

  .page--home .hero-orbit__chip {
    min-height: 30px;
    padding: 6px 9px 6px 7px;
    font-size: 10px;
    gap: 5px;
  }

  .page--home .hero-orbit__chip img {
    width: 14px;
    height: 14px;
  }

  .page--home .hero-orbit__chip--google { right: -12%; top: 14%; }
  .page--home .hero-orbit__chip--perplexity { left: -13%; top: 56%; }
  .page--home .hero-orbit__chip--claude { right: -6%; top: 51%; }

  .page--home .stats--gpt2 .stats__grid {
    gap: 10px;
    grid-template-columns: 1fr;
    border-radius: 0;
  }

  .page--home .stats--gpt2 .stat {
    min-height: 0;
    padding: 20px 18px;
    border-radius: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page--home .hero-orbit::before,
  .page--home .hero-orbit::after,
  .page--home .hero-orbit__chip {
    animation: none !important;
  }
}

/* v11.1 · visual QA tightening: keep tablet fold efficient and mobile concise */
@media (min-width: 861px) and (max-width: 1100px) {
  .page--home .hero__layout {
    grid-template-columns: minmax(0, 0.94fr) minmax(360px, 1.06fr);
    gap: 34px;
  }

  .page--home .hero__content {
    align-items: flex-start;
    text-align: left;
    max-width: 470px;
    margin: 0;
  }

  .page--home .hero--gpt2 .hero__logo,
  .page--home .hero--gpt2 .hero__ctas,
  .page--home .hero--gpt2 .hero__meta {
    justify-content: flex-start;
  }

  .page--home .hero--gpt2 .hero__headline,
  .page--home .hero--gpt2 .hero__subline {
    justify-content: flex-start;
    text-align: left;
  }

  .page--home .hero__visual {
    min-height: 440px;
  }

  .page--home .hero-orbit {
    width: min(430px, 46vw);
  }
}

@media (max-width: 720px) {
  .page--home .hero__layout {
    gap: 16px;
  }

  .page--home .hero__visual {
    min-height: 218px;
    max-height: 218px;
  }

  .page--home .hero-orbit {
    width: min(280px, 80vw);
    transform: scale(0.9);
  }

  .page--home .hero-orbit__center {
    width: 104px;
    height: 104px;
    border-radius: 24px;
    gap: 6px;
  }

  .page--home .hero-orbit__center svg {
    width: 48px;
    height: 48px;
  }

  .page--home .hero-orbit__center span {
    font-size: 8px;
  }

  .page--home .hero-orbit__chip {
    min-height: 28px;
    padding: 5px 8px 5px 6px;
    font-size: 9px;
  }

  .page--home .hero-orbit__chip--google,
  .page--home .hero-orbit__chip--perplexity,
  .page--home .hero-orbit__chip--copilot {
    display: none;
  }

  .page--home .stats--gpt2 .stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .page--home .stats--gpt2 .stat {
    padding: 18px 14px;
    border-radius: 18px;
  }

  .page--home .stats--gpt2 .stat__detail {
    display: none;
  }
}

/* ==========================================================================
   v12 · EXACT HOMEPAGE HERO MATCH
   Matches the supplied reference screenshot: compact 40px header, low hero,
   minimal orbit, no hero logo, rounded stats band visible in the first fold.
   ========================================================================== */

:root { --header-h: 64px; }

.site-header {
  height: 40px;
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(10, 10, 10, 0.08);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.site-header__inner {
  max-width: min(840px, calc(100vw - 188px));
  padding: 0;
  gap: 28px;
}

.site-header__logo {
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #0A0A0A;
}

.site-header__logo .logo-mark,
.site-header__logo svg {
  width: 22px;
  height: 22px;
}

.site-header__nav {
  gap: 26px;
  margin-left: auto;
  margin-right: 18px;
}

.site-header__nav .nav-link {
  font-size: 10.5px;
  font-weight: 500;
  color: #0A0A0A;
  padding: 4px 0;
}

.site-header__actions .cta--small {
  min-height: 28px;
  padding: 8px 16px;
  font-size: 10px;
  letter-spacing: -0.01em;
  border-radius: 999px;
}

@media (min-width: 821px) {
  .site-header__nav { display: flex; }
  .mobile-menu-btn { display: none; }
  .site-header__actions .cta--small { display: inline-flex; }
}

@media (max-width: 1100px) and (min-width: 821px) {
  .site-header__inner {
    max-width: min(840px, calc(100vw - 188px));
  }
}

.page--home .hero--gpt2 {
  min-height: 378px;
  height: 378px;
  padding: 54px 0 30px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 38% 42% at 72% 40%, rgba(0, 178, 169, 0.10), transparent 64%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%);
}

.page--home .hero--gpt2::before {
  width: 620px;
  height: 420px;
  left: 73%;
  top: 47%;
  opacity: 0.62;
  filter: blur(18px);
}

.page--home .hero--gpt2::after {
  display: none;
}

.page--home .hero--gpt2 .hero__inner {
  max-width: min(824px, calc(100vw - 200px));
  transform: none !important;
}

.page--home .hero__layout {
  grid-template-columns: 390px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.page--home .hero__content {
  max-width: 390px;
  padding-top: 0;
}

.page--home .hero--gpt2 .hero__logo {
  display: none;
}

.page--home .hero--gpt2 .hero__eyebrow {
  gap: 7px;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 7.5px;
  line-height: 1;
  letter-spacing: 0.34em;
  font-weight: 600;
  color: #8B95A3;
}

.page--home .hero--gpt2 .hero__eyebrow-dot {
  width: 4px;
  height: 4px;
  box-shadow: none;
}

.page--home .hero--gpt2 .hero__headline {
  max-width: 390px;
  font-size: 87px;
  line-height: 0.86;
  letter-spacing: -0.068em;
  gap: 0 0.12em;
  font-weight: 760;
  color: #050505;
  background: transparent;
  -webkit-text-fill-color: currentColor;
  text-shadow: 0 12px 26px rgba(10, 10, 10, 0.11);
}

.page--home .hero--gpt2 .hero__headline-dot {
  text-shadow: none;
  transform: translateY(-0.02em);
}

.page--home .hero--gpt2 .hero__rule {
  display: none;
}

.page--home .hero--gpt2 .hero__sub {
  max-width: 380px;
  margin-top: 12px;
}

.page--home .hero--gpt2 .hero__subline--lede {
  max-width: 380px;
  font-size: 14.5px;
  line-height: 1.38;
  letter-spacing: -0.02em;
  font-weight: 450;
  color: #0F172A;
}

.page--home .hero--gpt2 .hero__subline--detail {
  max-width: 365px;
  margin-top: 9px;
  font-size: 9.5px;
  line-height: 1.52;
  color: #596273;
}

.page--home .hero--gpt2 .hero__ctas {
  margin-top: 18px;
  gap: 9px;
}

.page--home .hero--gpt2 .hero__ctas .cta {
  min-height: 30px;
  padding: 9px 16px;
  font-size: 10px;
  border-radius: 999px;
}

.page--home .hero--gpt2 .hero__meta {
  width: 350px;
  margin-top: 15px;
  gap: 5px 14px;
  font-size: 7.8px;
  line-height: 1.45;
  letter-spacing: 0.04em;
  color: #A4ADB9;
}

.page--home .hero--gpt2 .hero__meta-item {
  gap: 5px;
}

.page--home .hero--gpt2 .hero__meta-dot {
  width: 7px;
  height: 7px;
  border: 1px solid rgba(0, 178, 169, 0.5);
  background: rgba(0, 178, 169, 0.10);
}

.page--home .hero__meta-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
}

.page--home .hero__visual {
  min-height: 296px;
  height: 296px;
  overflow: visible;
}

.page--home .hero-orbit {
  width: 430px;
  height: 296px;
  aspect-ratio: auto;
  transform: translateX(8px);
  background:
    radial-gradient(ellipse 34% 44% at 50% 50%, rgba(0,178,169,0.08), transparent 70%);
  filter: drop-shadow(0 24px 50px rgba(0, 178, 169, 0.09));
}

.page--home .hero-orbit::before {
  inset: 16px 22px;
  border-color: rgba(0, 178, 169, 0.22);
  transform: rotate(-10deg);
  animation: none;
}

.page--home .hero-orbit::after {
  inset: 72px 72px;
  border-color: rgba(0, 178, 169, 0.13);
  transform: rotate(-10deg);
  animation: none;
}

.page--home .hero-orbit__halo--outer {
  inset: 42px 48px;
  border-color: rgba(0, 178, 169, 0.12);
  transform: rotate(-9deg);
}

.page--home .hero-orbit__halo--mid {
  inset: 75px 92px;
  border-color: rgba(0, 178, 169, 0.12);
  transform: rotate(-11deg);
}

.page--home .hero-orbit__halo--inner {
  display: none;
}

.page--home .hero-orbit__axis {
  height: 1px;
  left: 54px;
  right: 42px;
  top: 50%;
  background: linear-gradient(90deg, transparent, rgba(0, 178, 169, 0.22), transparent);
}

.page--home .hero-orbit__axis--one { --axis-rotate: -15deg; }
.page--home .hero-orbit__axis--two { --axis-rotate: 20deg; opacity: 0.62; }

.page--home .hero-orbit__center--dots {
  width: 68px;
  height: 58px;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.page--home .hero-orbit__dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(180deg, #34D5CF 0%, #00B2A9 100%);
  box-shadow: 0 0 18px rgba(0, 178, 169, 0.35);
}

.page--home .hero-orbit__dot--one { left: 13px; top: 9px; }
.page--home .hero-orbit__dot--two { left: 37px; top: 9px; }
.page--home .hero-orbit__dot--three { left: 1px; top: 31px; }
.page--home .hero-orbit__dot--four { left: 25px; top: 31px; }
.page--home .hero-orbit__dot--five { left: 49px; top: 31px; }

.page--home .hero-orbit__chip {
  min-height: 30px;
  padding: 7px 12px 7px 8px;
  gap: 6px;
  font-size: 10px;
  font-weight: 550;
  color: #1E293B;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 12px 28px -16px rgba(10, 10, 10, 0.20);
  animation: none;
}

.page--home .hero-orbit__chip img {
  width: 14px;
  height: 14px;
}

.page--home .hero-orbit__chip--chatgpt { left: 78px; top: 16px; }
.page--home .hero-orbit__chip--claude { right: 96px; top: 32px; }
.page--home .hero-orbit__chip--copilot { left: -8px; top: 117px; }
.page--home .hero-orbit__chip--google { right: -4px; top: 126px; }
.page--home .hero-orbit__chip--perplexity { left: 84px; bottom: 26px; }
.page--home .hero-orbit__chip--gemini { right: 68px; bottom: 18px; }

.page--home .hero__scroll-indicator {
  display: none;
}

.page--home .stats--gpt2 {
  position: relative;
  z-index: 3;
  min-height: 158px;
  padding: 22px 0 58px;
  border-radius: 10px 10px 0 0;
  background:
    radial-gradient(ellipse 42% 140% at 18% 10%, rgba(0, 178, 169, 0.08), transparent 62%),
    radial-gradient(ellipse 30% 120% at 92% 58%, rgba(0, 178, 169, 0.045), transparent 62%),
    linear-gradient(180deg, rgba(249, 252, 253, 0.96) 0%, #FFFFFF 100%);
  border-top: 1px solid rgba(0, 178, 169, 0.14);
  overflow: hidden;
}

.page--home .stats--gpt2::after {
  content: '';
  position: absolute;
  right: 54px;
  top: 26px;
  width: 130px;
  height: 86px;
  background-image: radial-gradient(rgba(0, 178, 169, 0.13) 1px, transparent 1px);
  background-size: 10px 10px;
  opacity: 0.42;
}

.page--home .stats--gpt2 .container {
  max-width: min(690px, calc(100vw - 250px));
}

.page--home .stats--gpt2 .stats__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.page--home .stats--gpt2 .stat {
  min-height: 72px;
  padding: 0 20px;
  text-align: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.page--home .stats--gpt2 .stat + .stat {
  border-left: 1px solid rgba(10, 10, 10, 0.12);
}

.page--home .stats--gpt2 .stat__index,
.page--home .stats--gpt2 .stat__detail {
  display: none;
}

.page--home .stats--gpt2 .stat__number {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  margin-bottom: 8px;
  color: #050505;
  background: none;
  -webkit-text-fill-color: #050505;
}

.page--home .stats--gpt2 .stat__label {
  max-width: 112px;
  margin: 0 auto;
  font-size: 9.5px;
  line-height: 1.32;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: #6B7280;
}

@media (max-width: 900px) {
  :root { --header-h: 56px; }
  .site-header { height: 56px; }
  .site-header__inner {
    max-width: none;
    padding: 0 20px;
  }

  .page--home .hero--gpt2 {
    height: auto;
    min-height: auto;
    padding: 38px 16px 28px;
  }

  .page--home .hero--gpt2 .hero__inner {
    max-width: 100%;
  }

  .page--home .hero__layout {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .page--home .hero__content {
    align-items: center;
    max-width: 100%;
    text-align: center;
  }

  .page--home .hero--gpt2 .hero__eyebrow,
  .page--home .hero--gpt2 .hero__ctas,
  .page--home .hero--gpt2 .hero__meta,
  .page--home .hero--gpt2 .hero__headline {
    justify-content: center;
  }

  .page--home .hero--gpt2 .hero__subline {
    text-align: center;
  }

  .page--home .hero--gpt2 .hero__headline {
    font-size: clamp(62px, 17vw, 86px);
  }

  .page--home .hero--gpt2 .hero__meta {
    display: none;
  }

  .page--home .hero__visual {
    min-height: 220px;
    height: 220px;
    overflow: hidden;
  }

  .page--home .hero-orbit {
    width: min(360px, 92vw);
    height: 230px;
    transform: none;
  }

  .page--home .stats--gpt2 {
    min-height: 0;
    padding: 28px 0 42px;
  }

  .page--home .stats--gpt2 .container {
    max-width: calc(100vw - 32px);
  }

  .page--home .stats--gpt2 .stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    overflow: hidden;
    border: 1px solid rgba(10, 10, 10, 0.08);
    border-radius: 18px;
    background: rgba(10, 10, 10, 0.08);
  }

  .page--home .stats--gpt2 .stat {
    padding: 18px 12px;
    background: rgba(255, 255, 255, 0.92);
  }

  .page--home .stats--gpt2 .stat + .stat {
    border-left: 0;
  }
}

@media (max-width: 520px) {
  .page--home .hero__visual {
    min-height: 160px;
    height: 160px;
  }

  .page--home .hero-orbit {
    width: 290px;
    height: 180px;
    transform: scale(0.9);
  }

  .page--home .hero-orbit__chip--google,
  .page--home .hero-orbit__chip--perplexity,
  .page--home .hero-orbit__chip--copilot {
    display: none;
  }
}

/* ==========================================================================
   v13 · HOMEPAGE CLEANUP AFTER VISUAL QA
   Fixes the black headline block regression and restores a premium, readable
   Apple-like hero: large Be Seen headline, balanced two-column composition,
   breathable header, controlled orbit, and compact proof cards.
   ========================================================================== */

:root { --header-h: 64px; }

.site-header {
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.82);
  border-bottom-color: rgba(10, 10, 10, 0.06);
}

.site-header__inner {
  max-width: 1200px;
  padding: 0 32px;
  gap: 30px;
}

.site-header__logo {
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
}

.site-header__logo .logo-mark,
.site-header__logo svg {
  width: 30px;
  height: 30px;
}

.site-header__nav {
  gap: 28px;
  margin-left: auto;
  margin-right: 14px;
}

.site-header__nav .nav-link {
  font-size: 13px;
  font-weight: 500;
}

.site-header__actions .cta--small {
  min-height: 36px;
  padding: 11px 20px;
  font-size: 13px;
}

.page--home .hero--gpt2 {
  min-height: calc(100svh - var(--header-h));
  height: auto;
  padding: clamp(68px, 8vh, 96px) 24px clamp(58px, 7vh, 88px);
  background:
    radial-gradient(ellipse 45% 55% at 76% 42%, rgba(0, 178, 169, 0.14), transparent 66%),
    radial-gradient(ellipse 34% 42% at 12% 18%, rgba(0, 178, 169, 0.045), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 76%, #F7F9FA 100%);
}

.page--home .hero--gpt2::before {
  width: min(900px, 66vw);
  height: min(900px, 66vw);
  left: 76%;
  top: 46%;
  opacity: 0.76;
}

.page--home .hero--gpt2 .hero__inner {
  max-width: 1200px;
}

.page--home .hero__layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr);
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
}

.page--home .hero__content {
  max-width: 570px;
  align-items: flex-start;
  text-align: left;
}

.page--home .hero--gpt2 .hero__logo {
  display: none;
}

.page--home .hero--gpt2 .hero__eyebrow {
  margin-bottom: 22px;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: #748092;
}

.page--home .hero--gpt2 .hero__headline {
  max-width: 680px;
  font-size: clamp(92px, 10vw, 154px);
  line-height: 0.88;
  letter-spacing: -0.062em;
  gap: 0 0.13em;
  font-weight: 800;
  color: #050505;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none;
  text-align: left;
  justify-content: flex-start;
}

.page--home .hero--gpt2 .hero__headline-word {
  color: #050505;
  -webkit-text-fill-color: #050505 !important;
  filter: blur(0);
}

.page--home .hero--gpt2 .hero__headline-dot {
  color: var(--teal);
  -webkit-text-fill-color: var(--teal) !important;
}

.page--home .hero--gpt2 .hero__rule {
  display: block;
  width: 62px;
  height: 2px;
  margin: 28px 0 24px;
  background: linear-gradient(90deg, #00B2A9, rgba(0, 178, 169, 0.16));
  transform-origin: left;
}

.page--home .hero--gpt2 .hero__sub,
.page--home .hero--gpt2 .hero__subline--lede,
.page--home .hero--gpt2 .hero__subline--detail {
  max-width: 560px;
}

.page--home .hero--gpt2 .hero__sub {
  margin-top: 0;
}

.page--home .hero--gpt2 .hero__subline--lede {
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.42;
  font-weight: 560;
  color: #111827;
}

.page--home .hero--gpt2 .hero__subline--detail {
  margin-top: 12px;
  font-size: clamp(14px, 1.04vw, 16px);
  line-height: 1.62;
  color: #5C6675;
}

.page--home .hero--gpt2 .hero__ctas {
  margin-top: 30px;
  gap: 12px;
  justify-content: flex-start;
}

.page--home .hero--gpt2 .hero__ctas .cta {
  min-height: 46px;
  padding: 15px 24px;
  font-size: 14px;
}

.page--home .hero--gpt2 .hero__meta {
  width: auto;
  max-width: 560px;
  margin-top: 22px;
  gap: 8px 14px;
  font-size: 11px;
  color: #7A8493;
  justify-content: flex-start;
}

.page--home .hero__visual {
  min-height: min(520px, 42vw);
  height: auto;
  overflow: visible;
}

.page--home .hero-orbit {
  width: min(540px, 42vw);
  height: auto;
  aspect-ratio: 1;
  transform: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.94) 0 18%, rgba(255,255,255,0.58) 19% 30%, transparent 31%),
    radial-gradient(circle at 50% 50%, rgba(0,178,169,0.10), transparent 60%);
}

.page--home .hero-orbit::before {
  inset: 5%;
  transform: rotate(0deg);
  border-color: rgba(0, 178, 169, 0.22);
}

.page--home .hero-orbit::after {
  inset: 20%;
  transform: rotate(0deg);
  border-color: rgba(10, 10, 10, 0.07);
}

.page--home .hero-orbit__halo--outer { inset: 0; transform: none; }
.page--home .hero-orbit__halo--mid { inset: 16%; transform: none; }
.page--home .hero-orbit__halo--inner { display: block; inset: 32%; }

.page--home .hero-orbit__axis {
  left: 8%;
  right: 8%;
}

.page--home .hero-orbit__axis--one { --axis-rotate: 28deg; }
.page--home .hero-orbit__axis--two { --axis-rotate: -34deg; opacity: 1; }

.page--home .hero-orbit__center--dots {
  width: clamp(130px, 12vw, 170px);
  height: clamp(118px, 11vw, 154px);
  border-radius: 38px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(10, 10, 10, 0.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.92) inset,
    0 22px 58px -30px rgba(10, 10, 10, 0.28),
    0 0 0 10px rgba(255,255,255,0.38);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.page--home .hero-orbit__dot {
  width: 16px;
  height: 16px;
}

.page--home .hero-orbit__dot--one { left: 38%; top: 33%; }
.page--home .hero-orbit__dot--two { left: 52%; top: 33%; }
.page--home .hero-orbit__dot--three { left: 31%; top: 50%; }
.page--home .hero-orbit__dot--four { left: 45%; top: 50%; }
.page--home .hero-orbit__dot--five { left: 59%; top: 50%; }

.page--home .hero-orbit__chip {
  min-height: 36px;
  padding: 8px 13px 8px 9px;
  font-size: 12px;
  animation: platformFloat 7s ease-in-out infinite;
}

.page--home .hero-orbit__chip img {
  width: 18px;
  height: 18px;
}

.page--home .hero-orbit__chip--chatgpt { left: 5%; top: 18%; }
.page--home .hero-orbit__chip--google { right: -4%; top: 18%; }
.page--home .hero-orbit__chip--perplexity { left: -6%; top: 55%; }
.page--home .hero-orbit__chip--claude { right: 5%; top: 52%; }
.page--home .hero-orbit__chip--gemini { left: 18%; bottom: 6%; }
.page--home .hero-orbit__chip--copilot { right: 14%; bottom: 8%; }

.page--home .stats--gpt2 {
  min-height: 0;
  padding: clamp(40px, 5vw, 58px) 0;
  border-radius: 0;
}

.page--home .stats--gpt2 .container {
  max-width: 1120px;
}

.page--home .stats--gpt2 .stats__grid {
  gap: 14px;
}

.page--home .stats--gpt2 .stat {
  min-height: 170px;
  padding: 24px 22px;
  text-align: center;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(10, 10, 10, 0.065);
  border-radius: 22px;
  box-shadow: 0 16px 40px -30px rgba(10, 10, 10, 0.24);
}

.page--home .stats--gpt2 .stat + .stat {
  border-left: 1px solid rgba(10, 10, 10, 0.065);
}

.page--home .stats--gpt2 .stat__number {
  font-size: clamp(38px, 4vw, 54px);
}

.page--home .stats--gpt2 .stat__label {
  max-width: 14em;
  margin: 0;
  font-size: 13px;
  color: #111827;
}

@media (max-width: 1100px) {
  .page--home .hero__layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .page--home .hero__content,
  .page--home .hero--gpt2 .hero__headline,
  .page--home .hero--gpt2 .hero__subline {
    text-align: center;
  }

  .page--home .hero__content {
    align-items: center;
    max-width: 760px;
    margin: 0 auto;
  }

  .page--home .hero--gpt2 .hero__headline,
  .page--home .hero--gpt2 .hero__ctas,
  .page--home .hero--gpt2 .hero__meta {
    justify-content: center;
  }

  .page--home .hero__visual {
    min-height: 390px;
  }

  .page--home .hero-orbit {
    width: min(440px, 76vw);
  }
}

@media (max-width: 720px) {
  :root { --header-h: 56px; }

  .site-header {
    height: var(--header-h);
  }

  .site-header__inner {
    padding: 0 20px;
  }

  .page--home .hero--gpt2 {
    padding: 38px 16px 42px;
  }

  .page--home .hero__layout {
    gap: 24px;
  }

  .page--home .hero--gpt2 .hero__eyebrow {
    margin-bottom: 16px;
    font-size: 8.5px;
    letter-spacing: 0.18em;
  }

  .page--home .hero--gpt2 .hero__headline {
    font-size: clamp(64px, 18vw, 86px);
    line-height: 0.92;
    letter-spacing: -0.055em;
  }

  .page--home .hero--gpt2 .hero__rule {
    margin: 22px auto 18px;
    transform-origin: center;
  }

  .page--home .hero--gpt2 .hero__subline--lede {
    font-size: 16px;
  }

  .page--home .hero--gpt2 .hero__subline--detail {
    font-size: 13px;
  }

  .page--home .hero--gpt2 .hero__ctas {
    width: 100%;
    margin-top: 22px;
  }

  .page--home .hero--gpt2 .hero__ctas .cta {
    width: 100%;
    justify-content: center;
    min-height: 46px;
  }

  .page--home .hero--gpt2 .hero__meta {
    display: none;
  }

  .page--home .hero__visual {
    min-height: 280px;
    height: 280px;
    overflow: hidden;
  }

  .page--home .hero-orbit {
    width: min(340px, 92vw);
    transform: scale(0.94);
  }

  .page--home .hero-orbit__center--dots {
    width: 118px;
    height: 108px;
    border-radius: 28px;
  }

  .page--home .hero-orbit__chip {
    min-height: 30px;
    padding: 6px 9px 6px 7px;
    font-size: 10px;
  }

  .page--home .hero-orbit__chip img {
    width: 14px;
    height: 14px;
  }

  .page--home .hero-orbit__chip--google,
  .page--home .hero-orbit__chip--perplexity,
  .page--home .hero-orbit__chip--copilot {
    display: none;
  }

  .page--home .stats--gpt2 .container {
    max-width: calc(100vw - 32px);
  }

  .page--home .stats--gpt2 .stats__grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    border: 0;
    background: transparent;
  }

  .page--home .stats--gpt2 .stat {
    min-height: 0;
    padding: 18px 14px;
    border-radius: 18px;
  }

  .page--home .stats--gpt2 .stat__detail {
    display: none;
  }
}

/* ==========================================================================
   v17 · HERO EXACT SCREENSHOT MATCH
   Full-size hero with circular orbit showing all 6 AI platform chips,
   proper proportions, and clean stats band with serif numbers.
   ========================================================================== */

/* ---- Header ---- */
:root { --header-h: 64px; }

.site-header {
  height: var(--header-h) !important;
  background: rgba(255, 255, 255, 0.90) !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.06) !important;
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
}

.site-header__inner { max-width: 1200px; padding: 0 32px; gap: 30px; }
.site-header__logo { gap: 10px; font-size: 15px; font-weight: 600; color: #0A0A0A; }
.site-header__logo .logo-mark,
.site-header__logo svg { width: 28px; height: 28px; }
.site-header__nav { gap: 28px; margin-left: auto; margin-right: 16px; }
.site-header__nav .nav-link { font-size: 13px; font-weight: 500; color: #0A0A0A; }
.site-header__actions .cta--small { min-height: 36px; padding: 10px 20px; font-size: 13px; border-radius: 999px; }

/* ---- Hero section ---- */
.page--home .hero--gpt2 {
  min-height: 0 !important;
  height: auto !important;
  padding: clamp(48px, 6vh, 68px) 32px clamp(28px, 3.5vh, 40px) !important;
  overflow: hidden;
  background:
    radial-gradient(ellipse 44% 52% at 74% 42%, rgba(0, 178, 169, 0.13), transparent 66%),
    radial-gradient(ellipse 30% 38% at 14% 20%, rgba(0, 178, 169, 0.04), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 80%, #F8FAFB 100%) !important;
}

.page--home .hero--gpt2::before,
.page--home .hero--gpt2::after { display: none !important; }

.page--home .hero--gpt2 .hero__inner {
  max-width: 1200px !important;
  width: 100%;
}

/* Two-column layout: ~45% text, ~55% orbit graphic */
.page--home .hero__layout {
  grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.05fr) !important;
  gap: clamp(48px, 6vw, 88px) !important;
  align-items: center !important;
}

.page--home .hero__content {
  max-width: 560px !important;
  align-items: flex-start !important;
  text-align: left !important;
}

/* Hide logo mark in hero, keep it in header */
.page--home .hero--gpt2 .hero__logo,
.page--home .hero__scroll-indicator { display: none !important; }

/* Eyebrow: "GROWTH MARKETING PARTNER · SINGAPORE" */
.page--home .hero--gpt2 .hero__eyebrow {
  margin: 0 0 clamp(18px, 2.5vh, 26px) !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  font-weight: 500;
  color: #748092 !important;
  text-transform: uppercase;
}

.page--home .hero--gpt2 .hero__eyebrow-dot {
  width: 6px !important;
  height: 6px !important;
  box-shadow: 0 0 0 3px rgba(0, 178, 169, 0.18) !important;
}

/* "Be Seen." headline — large, bold, black, always one line */
.page--home .hero--gpt2 .hero__headline {
  max-width: none !important;
  width: auto !important;
  gap: 0 0.14em !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  font-size: clamp(92px, 10vw, 148px) !important;
  line-height: 0.88 !important;
  letter-spacing: -0.06em !important;
  font-weight: 800 !important;
  text-align: left !important;
  justify-content: flex-start !important;
  color: #050505 !important;
  background: transparent !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

.page--home .hero--gpt2 .hero__headline-space {
  display: inline-block !important;
  width: 0.18em !important;
}

.page--home .hero--gpt2 .hero__headline-word {
  color: #050505 !important;
  -webkit-text-fill-color: #050505 !important;
  filter: none !important;
}

.page--home .hero--gpt2 .hero__headline-dot {
  color: var(--teal) !important;
  -webkit-text-fill-color: var(--teal) !important;
}

/* No rule between headline and subtext */
.page--home .hero--gpt2 .hero__rule { display: none !important; }

/* Subtext area */
.page--home .hero--gpt2 .hero__sub {
  max-width: 500px !important;
  margin-top: 24px !important;
}

.page--home .hero--gpt2 .hero__subline { text-align: left !important; }

/* Primary subline — medium weight, dark */
.page--home .hero--gpt2 .hero__subline--lede {
  max-width: 500px !important;
  font-size: clamp(18px, 1.5vw, 21px) !important;
  line-height: 1.42 !important;
  letter-spacing: -0.02em !important;
  font-weight: 540 !important;
  color: #111827 !important;
}

/* Secondary subline — smaller, lighter gray */
.page--home .hero--gpt2 .hero__subline--detail {
  max-width: 500px !important;
  margin-top: 14px !important;
  font-size: clamp(13.5px, 1.05vw, 15px) !important;
  line-height: 1.62 !important;
  color: #5C6675 !important;
}

/* CTA buttons */
.page--home .hero--gpt2 .hero__ctas {
  justify-content: flex-start !important;
  gap: 12px !important;
  margin-top: clamp(26px, 3.5vh, 36px) !important;
}

.page--home .hero--gpt2 .hero__ctas .cta {
  min-height: 44px !important;
  padding: 13px 22px !important;
  font-size: 14px !important;
  border-radius: 999px;
}

/* Trust meta line with checkmarks */
.page--home .hero--gpt2 .hero__meta {
  width: auto !important;
  max-width: 560px !important;
  margin-top: 24px !important;
  gap: 8px 14px !important;
  font-size: 11.5px !important;
  color: #7A8493 !important;
  justify-content: flex-start !important;
}

/* ---- AI Orbit Graphic (right side) ---- */

/* Visual container */
.page--home .hero__visual {
  min-height: min(420px, 38vw) !important;
  height: auto !important;
  overflow: visible !important;
}

/* The orbit: slightly elliptical with diagonal tilt, concentric rings */
.page--home .hero-orbit {
  width: min(460px, 37vw) !important;
  height: auto !important;
  aspect-ratio: 1 !important;
  transform: rotate(-10deg) scaleY(0.82) !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 50% 50%, rgba(0,178,169,0.05), transparent 50%) !important;
  filter: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Concentric ring lines — subtle slow rotation for depth */
.page--home .hero-orbit::before,
.page--home .hero-orbit::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 178, 169, 0.18) !important;
  background: transparent !important;
}

.page--home .hero-orbit::before {
  inset: 6% !important;
  animation: orbitSpinSlow 28s linear infinite !important;
}
.page--home .hero-orbit::after {
  inset: 22% !important;
  border-color: rgba(10, 10, 10, 0.06) !important;
  border-style: dashed !important;
  animation: orbitSpinSlowReverse 34s linear infinite !important;
}

/* Halo rings — concentric circles with gentle rotation */
.page--home .hero-orbit__halo {
  display: block !important;
  position: absolute !important;
  border-radius: 50% !important;
  pointer-events: none;
}
.page--home .hero-orbit__halo--outer {
  inset: 0 !important;
  border-color: rgba(10, 10, 10, 0.05) !important;
  animation: orbitSpinSlow 32s linear infinite !important;
}
.page--home .hero-orbit__halo--mid {
  inset: 16% !important;
  border-color: rgba(0, 178, 169, 0.16) !important;
  animation: orbitSpinSlowReverse 26s linear infinite !important;
}
.page--home .hero-orbit__halo--inner {
  display: block !important;
  inset: 32% !important;
  border-color: rgba(10, 10, 10, 0.055) !important;
  animation: orbitSpinSlow 20s linear infinite !important;
}

@keyframes orbitSpinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes orbitSpinSlowReverse {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* Axis cross-lines through center */
.page--home .hero-orbit__axis {
  display: block !important;
  left: 8% !important;
  right: 8% !important;
}
.page--home .hero-orbit__axis--one { --axis-rotate: 28deg; }
.page--home .hero-orbit__axis--two { --axis-rotate: -34deg; opacity: 1 !important; }

/* Center: glass hub with horatos.ai logo mark (4 asymmetric teal dots) */
.page--home .hero-orbit__center,
.page--home .hero-orbit__center--logo,
.page--home .hero-orbit__center--dots {
  position: absolute !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 96px !important;
  height: 96px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 28px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(10, 10, 10, 0.06) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.92) inset,
    0 16px 40px -20px rgba(10, 10, 10, 0.22),
    0 0 0 8px rgba(255,255,255,0.38) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  z-index: 5 !important;
}

.page--home .hero-orbit__logo-mark {
  width: 62px !important;
  height: 62px !important;
}

/* Hide old dot elements if any remain */
.page--home .hero-orbit__dot {
  display: none !important;
}

/* AI platform chips — ALL 6 visible, floating around orbit */
.page--home .hero-orbit__chip {
  display: inline-flex !important;
  min-height: 36px !important;
  padding: 8px 14px 8px 10px !important;
  gap: 7px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
  color: #18212F !important;
  background: rgba(255, 255, 255, 0.90) !important;
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border: 1px solid rgba(10, 10, 10, 0.07) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.95) inset,
    0 14px 34px -18px rgba(10, 10, 10, 0.22) !important;
  animation: platformFloat 7s ease-in-out infinite !important;
  will-change: transform;
}

.page--home .hero-orbit__chip img { width: 18px !important; height: 18px !important; }

/* Counter-rotate chips so text stays horizontal despite orbit tilt */
.page--home .hero-orbit__chip--chatgpt   { animation-delay: -0.4s !important; }
.page--home .hero-orbit__chip--claude    { animation-delay: -1.6s !important; }
.page--home .hero-orbit__chip--copilot   { animation-delay: -2.8s !important; }
.page--home .hero-orbit__chip--google    { animation-delay: -3.6s !important; }
.page--home .hero-orbit__chip--perplexity { animation-delay: -4.4s !important; }
.page--home .hero-orbit__chip--gemini    { animation-delay: -5.2s !important; }

/* Reset ALL chip positions to prevent stretching from conflicting CSS */
.page--home .hero-orbit__chip--chatgpt,
.page--home .hero-orbit__chip--claude,
.page--home .hero-orbit__chip--copilot,
.page--home .hero-orbit__chip--google,
.page--home .hero-orbit__chip--perplexity,
.page--home .hero-orbit__chip--gemini {
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
}

/* Chip positions — matching screenshot layout around circular orbit
   ChatGPT: upper-left area
   Claude: upper-right area  
   Copilot: left-middle
   Google AI Overview: right-middle
   Perplexity: lower-left
   Gemini: lower-right */
.page--home .hero-orbit__chip--chatgpt   { left: 6% !important;  top: 14% !important;  animation-delay: -0.4s !important; }
.page--home .hero-orbit__chip--claude    { right: 2% !important; top: 10% !important;  animation-delay: -1.6s !important; }
.page--home .hero-orbit__chip--copilot   { left: -6% !important; top: 44% !important;  animation-delay: -2.8s !important; }
.page--home .hero-orbit__chip--google    { right: -8% !important; top: 42% !important; animation-delay: -3.6s !important; }
.page--home .hero-orbit__chip--perplexity { left: 8% !important;  bottom: 12% !important; animation-delay: -4.4s !important; }
.page--home .hero-orbit__chip--gemini    { right: 6% !important; bottom: 16% !important; animation-delay: -5.2s !important; }

/* ---- Stats Band ---- */
.page--home .stats--gpt2 {
  min-height: 0 !important;
  padding: clamp(36px, 4.5vw, 56px) 0 !important;
  border-radius: 0 !important;
  border-top: 0 !important;
  background: linear-gradient(180deg, #F7F8FA 0%, #FFFFFF 100%) !important;
}

.page--home .stats--gpt2::after { display: none !important; }

.page--home .stats--gpt2 .container {
  max-width: 1080px !important;
}

.page--home .stats--gpt2 .stats__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page--home .stats--gpt2 .stat {
  min-height: 100px !important;
  padding: 20px 24px !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Thin vertical separator between stats */
.page--home .stats--gpt2 .stat + .stat {
  border-left: 1px solid rgba(10, 10, 10, 0.10) !important;
}

/* Hide the index numbers and detail text */
.page--home .stats--gpt2 .stat__index,
.page--home .stats--gpt2 .stat__detail { display: none !important; }

/* Stat numbers: serif, elegant */
.page--home .stats--gpt2 .stat__number {
  margin-bottom: 8px !important;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(34px, 3.6vw, 48px) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
  color: #050505 !important;
  background: none !important;
  -webkit-text-fill-color: #050505 !important;
}

/* Stat labels */
.page--home .stats--gpt2 .stat__label {
  max-width: 140px !important;
  margin: 0 auto !important;
  font-size: 12px !important;
  line-height: 1.32 !important;
  font-weight: 450 !important;
  color: #6B7280 !important;
}

/* ---- Cookie Banner (positioned bottom-center, compact) ---- */
.cookie-banner {
  max-width: 680px !important;
  left: 50% !important;
  right: auto !important;
  bottom: 18px !important;
  transform: translateX(-50%);
}

/* ---- Responsive: Tablet ---- */
@media (max-width: 1100px) {
  .page--home .hero--gpt2 { min-height: 0 !important; padding: 56px 24px 40px !important; }
  .page--home .hero__layout { grid-template-columns: 1fr !important; gap: 32px !important; }
  .page--home .hero__content { max-width: 680px !important; margin: 0 auto !important; align-items: center !important; text-align: center !important; }
  .page--home .hero--gpt2 .hero__headline,
  .page--home .hero--gpt2 .hero__subline { text-align: center !important; }
  .page--home .hero--gpt2 .hero__headline,
  .page--home .hero--gpt2 .hero__ctas,
  .page--home .hero--gpt2 .hero__meta { justify-content: center !important; }
  .page--home .hero__visual { min-height: 380px !important; height: auto !important; }
  .page--home .hero-orbit { width: min(440px, 76vw) !important; }
  .page--home .stats--gpt2 .stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; }
  .page--home .stats--gpt2 .stat:nth-child(odd) { border-left: 0 !important; }
  .page--home .stats--gpt2 .stat:nth-child(n+3) { border-top: 1px solid rgba(10, 10, 10, 0.08) !important; }
}

/* ---- Responsive: Mobile ---- */
@media (max-width: 720px) {
  :root { --header-h: 56px; }
  .site-header__inner { padding: 0 18px; }
  .page--home .hero--gpt2 { padding: 36px 16px 32px !important; }
  .page--home .hero__layout { gap: 22px !important; }
  .page--home .hero--gpt2 .hero__eyebrow { margin-bottom: 14px !important; font-size: 8.5px !important; letter-spacing: 0.18em !important; }
  .page--home .hero--gpt2 .hero__headline { font-size: clamp(64px, 17vw, 86px) !important; line-height: 0.90 !important; white-space: nowrap !important; }
  .page--home .hero--gpt2 .hero__sub { margin-top: 18px !important; }
  .page--home .hero--gpt2 .hero__subline--lede { font-size: 16px !important; }
  .page--home .hero--gpt2 .hero__subline--detail { margin-top: 10px !important; font-size: 13px !important; }
  .page--home .hero--gpt2 .hero__ctas { width: 100% !important; max-width: 360px !important; margin-top: 22px !important; flex-direction: column !important; }
  .page--home .hero--gpt2 .hero__ctas .cta { width: 100% !important; justify-content: center !important; min-height: 44px !important; }
  .page--home .hero--gpt2 .hero__meta { display: none !important; }
  .page--home .hero__visual { min-height: 280px !important; height: 280px !important; overflow: hidden !important; }
  .page--home .hero-orbit { width: min(320px, 88vw) !important; }
  .page--home .hero-orbit__center--dots { width: 68px !important; height: 68px !important; border-radius: 20px !important; padding: 14px !important; }
  .page--home .hero-orbit__dot { width: 14px !important; height: 14px !important; }
  .page--home .hero-orbit__chip { min-height: 30px !important; padding: 6px 10px 6px 7px !important; font-size: 10px !important; }
  .page--home .hero-orbit__chip img { width: 14px !important; height: 14px !important; }
  /* Hide 2 less important chips on mobile for clarity */
  /* Keep only 4 chips on mobile for clarity */
  .page--home .hero-orbit__chip--perplexity,
  .page--home .hero-orbit__chip--gemini { display: none !important; }
  .page--home .stats--gpt2 { padding: 24px 16px 36px !important; }
  .page--home .stats--gpt2 .container { max-width: 100% !important; }
  .page--home .stats--gpt2 .stat { min-height: 80px !important; padding: 16px 12px !important; }
  .page--home .stats--gpt2 .stat__number { font-size: 30px !important; }
  .page--home .stats--gpt2 .stat__label { font-size: 10px !important; max-width: 100px !important; }
  .cookie-banner { left: 12px !important; right: 12px !important; bottom: 12px !important; max-width: none !important; }
  .cookie-banner__inner { grid-template-columns: 1fr !important; padding: 10px !important; }
}

/* ==========================================================================
   v18 · Supplied screenshot exact-match pass (1024×576 reference)
   Restores the compact first-fold Horatos.ai hero: 40px header, 378px hero,
   two-column text/orbit layout at tablet-desktop widths, rounded stats band,
   and bottom-centred cookie card matching the screenshot proportions.
   ========================================================================== */

@media (min-width: 901px) {
  :root { --header-h: 40px !important; }

  .site-header {
    height: 40px !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border-bottom: 1px solid rgba(10, 10, 10, 0.08) !important;
    box-shadow: none !important;
  }

  .site-header__inner {
    max-width: min(840px, calc(100vw - 188px)) !important;
    height: 40px !important;
    padding: 0 !important;
    gap: 28px !important;
  }

  .site-header__logo {
    gap: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
  }

  .site-header__logo .logo-mark,
  .site-header__logo svg {
    width: 22px !important;
    height: 22px !important;
  }

  .site-header__nav {
    display: flex !important;
    gap: 26px !important;
    margin-left: auto !important;
    margin-right: 18px !important;
  }

  .site-header__nav .nav-link {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #0A0A0A !important;
    padding: 4px 0 !important;
  }

  .site-header__actions .cta--small {
    min-height: 28px !important;
    padding: 8px 16px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .page--home .hero--gpt2 {
    height: 378px !important;
    min-height: 378px !important;
    padding: 54px 0 30px !important;
    text-align: left !important;
    overflow: hidden !important;
    background:
      radial-gradient(ellipse 38% 42% at 72% 40%, rgba(0, 178, 169, 0.10), transparent 64%),
      linear-gradient(180deg, #FFFFFF 0%, #FAFBFC 100%) !important;
  }

  .page--home .hero--gpt2::before {
    display: block !important;
    width: 620px !important;
    height: 420px !important;
    left: 73% !important;
    top: 47% !important;
    opacity: 0.62 !important;
    filter: blur(18px) !important;
    background: radial-gradient(closest-side, rgba(0, 178, 169, 0.14), rgba(0, 178, 169, 0.04) 46%, transparent 72%) !important;
  }

  .page--home .hero--gpt2::after { display: none !important; }

  .page--home .hero--gpt2 .hero__inner {
    max-width: min(824px, calc(100vw - 200px)) !important;
    width: 100% !important;
    transform: none !important;
  }

  .page--home .hero__layout {
    display: grid !important;
    grid-template-columns: 390px minmax(0, 1fr) !important;
    gap: 30px !important;
    align-items: start !important;
    width: 100% !important;
  }

  .page--home .hero__content {
    max-width: 390px !important;
    padding-top: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .page--home .hero--gpt2 .hero__logo,
  .page--home .hero__scroll-indicator { display: none !important; }

  .page--home .hero--gpt2 .hero__eyebrow {
    gap: 7px !important;
    margin: 0 0 18px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
    font-size: 7.5px !important;
    line-height: 1 !important;
    letter-spacing: 0.34em !important;
    font-weight: 600 !important;
    color: #8B95A3 !important;
  }

  .page--home .hero--gpt2 .hero__eyebrow-dot {
    width: 4px !important;
    height: 4px !important;
    box-shadow: none !important;
  }

  .page--home .hero--gpt2 .hero__headline {
    max-width: 390px !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: 0 0.12em !important;
    font-size: 82px !important;
    line-height: 0.86 !important;
    letter-spacing: -0.068em !important;
    font-weight: 800 !important;
    color: #050505 !important;
    background: transparent !important;
    -webkit-text-fill-color: currentColor !important;
    text-shadow: 0 12px 26px rgba(10, 10, 10, 0.11) !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .page--home .hero--gpt2 .hero__headline-word {
    color: #050505 !important;
    -webkit-text-fill-color: #050505 !important;
    filter: none !important;
  }

  .page--home .hero--gpt2 .hero__headline-space {
    display: inline-block !important;
    width: 0.16em !important;
  }

  .page--home .hero--gpt2 .hero__headline-dot {
    color: var(--teal) !important;
    -webkit-text-fill-color: var(--teal) !important;
    text-shadow: none !important;
    transform: translateY(-0.02em) !important;
  }

  .page--home .hero--gpt2 .hero__rule { display: none !important; }

  .page--home .hero--gpt2 .hero__sub {
    max-width: 380px !important;
    margin-top: 12px !important;
  }

  .page--home .hero--gpt2 .hero__subline { text-align: left !important; }

  .page--home .hero--gpt2 .hero__subline--lede {
    max-width: 380px !important;
    font-size: 14.5px !important;
    line-height: 1.38 !important;
    letter-spacing: -0.02em !important;
    font-weight: 450 !important;
    color: #0F172A !important;
  }

  .page--home .hero--gpt2 .hero__subline--detail {
    max-width: 365px !important;
    margin-top: 9px !important;
    font-size: 9.5px !important;
    line-height: 1.52 !important;
    color: #596273 !important;
  }

  .page--home .hero--gpt2 .hero__ctas {
    justify-content: flex-start !important;
    margin-top: 18px !important;
    gap: 9px !important;
  }

  .page--home .hero--gpt2 .hero__ctas .cta {
    min-height: 30px !important;
    padding: 9px 16px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }

  .page--home .hero--gpt2 .hero__meta {
    display: flex !important;
    width: 350px !important;
    max-width: 350px !important;
    margin-top: 15px !important;
    gap: 5px 14px !important;
    font-size: 7.8px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.04em !important;
    color: #A4ADB9 !important;
    justify-content: flex-start !important;
  }

  .page--home .hero--gpt2 .hero__meta svg {
    width: 9px !important;
    height: 9px !important;
    margin-right: 4px !important;
  }

  .page--home .hero__meta-break {
    flex-basis: 100% !important;
    width: 0 !important;
    height: 0 !important;
  }

  .page--home .hero__meta-item--second-row {
    margin-top: 1px !important;
  }

  .page--home .hero__visual {
    min-height: 296px !important;
    height: 296px !important;
    overflow: visible !important;
  }

  .page--home .hero-orbit {
    position: relative !important;
    width: 410px !important;
    max-width: none !important;
    flex: 0 0 410px !important;
    height: 296px !important;
    aspect-ratio: auto !important;
    transform: translateX(0) !important;
    border-radius: 50% !important;
    background: radial-gradient(ellipse 34% 44% at 50% 50%, rgba(0,178,169,0.08), transparent 70%) !important;
    filter: drop-shadow(0 24px 50px rgba(0, 178, 169, 0.09)) !important;
    box-shadow: none !important;
  }

  .page--home .hero-orbit::before,
  .page--home .hero-orbit::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    border-radius: 50% !important;
    background: transparent !important;
    animation: none !important;
  }

  .page--home .hero-orbit::before {
    inset: 16px 22px !important;
    border: 1px solid rgba(0, 178, 169, 0.18) !important;
    transform: rotate(-10deg) !important;
  }

  .page--home .hero-orbit::after {
    inset: 72px 72px !important;
    border: 1px dashed rgba(0, 178, 169, 0.10) !important;
    transform: rotate(-10deg) !important;
  }

  .page--home .hero-orbit__halo {
    display: block !important;
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    animation: none !important;
  }

  .page--home .hero-orbit__halo--outer {
    inset: 42px 48px !important;
    border: 1px solid rgba(0, 178, 169, 0.10) !important;
    transform: rotate(-9deg) !important;
  }

  .page--home .hero-orbit__halo--mid {
    inset: 75px 92px !important;
    border: 1px solid rgba(0, 178, 169, 0.10) !important;
    transform: rotate(-11deg) !important;
  }

  .page--home .hero-orbit__halo--inner { display: none !important; }

  .page--home .hero-orbit__axis {
    display: block !important;
    height: 1px !important;
    left: 54px !important;
    right: 42px !important;
    top: 50% !important;
    background: linear-gradient(90deg, transparent, rgba(0, 178, 169, 0.17), transparent) !important;
  }

  .page--home .hero-orbit__axis--one { --axis-rotate: -15deg !important; }
  .page--home .hero-orbit__axis--two { --axis-rotate: 20deg !important; opacity: 0.62 !important; }

  .page--home .hero-orbit__center,
  .page--home .hero-orbit__center--dots {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 68px !important;
    height: 58px !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    z-index: 5 !important;
  }

  .page--home .hero-orbit__dot {
    position: absolute !important;
    display: block !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: linear-gradient(180deg, #34D5CF 0%, #00B2A9 100%) !important;
    box-shadow: 0 0 14px rgba(0, 178, 169, 0.30) !important;
  }

  .page--home .hero-orbit__dot--one { left: 13px !important; top: 9px !important; }
  .page--home .hero-orbit__dot--two { left: 37px !important; top: 9px !important; }
  .page--home .hero-orbit__dot--three { left: 1px !important; top: 31px !important; }
  .page--home .hero-orbit__dot--four { left: 25px !important; top: 31px !important; }
  .page--home .hero-orbit__dot--five { left: 49px !important; top: 31px !important; }

  .page--home .hero-orbit__chip {
    display: inline-flex !important;
    min-height: 30px !important;
    padding: 7px 12px 7px 8px !important;
    gap: 6px !important;
    font-size: 9.8px !important;
    font-weight: 550 !important;
    letter-spacing: -0.01em !important;
    color: #1E293B !important;
    background: rgba(255, 255, 255, 0.88) !important;
    border: 1px solid rgba(10, 10, 10, 0.075) !important;
    border-radius: 999px !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.96) inset, 0 10px 24px -16px rgba(10, 10, 10, 0.16) !important;
    -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
    backdrop-filter: saturate(180%) blur(16px) !important;
    animation: none !important;
  }

  .page--home .hero-orbit__chip img {
    width: 14px !important;
    height: 14px !important;
  }

  .page--home .hero-orbit__chip--chatgpt { left: 78px !important; top: 16px !important; right: auto !important; bottom: auto !important; }
  .page--home .hero-orbit__chip--claude { right: 96px !important; top: 32px !important; left: auto !important; bottom: auto !important; }
  .page--home .hero-orbit__chip--copilot { left: -8px !important; top: 117px !important; right: auto !important; bottom: auto !important; }
  .page--home .hero-orbit__chip--google { right: -4px !important; top: 126px !important; left: auto !important; bottom: auto !important; }
  .page--home .hero-orbit__chip--perplexity { left: 84px !important; bottom: 26px !important; top: auto !important; right: auto !important; }
  .page--home .hero-orbit__chip--gemini { right: 68px !important; bottom: 18px !important; top: auto !important; left: auto !important; }

  .page--home .stats--gpt2 {
    position: relative !important;
    z-index: 3 !important;
    height: 158px !important;
    min-height: 158px !important;
    padding: 22px 0 0 !important;
    border-radius: 10px 10px 0 0 !important;
    background:
      radial-gradient(ellipse 42% 140% at 18% 10%, rgba(0, 178, 169, 0.08), transparent 62%),
      radial-gradient(ellipse 30% 120% at 92% 58%, rgba(0, 178, 169, 0.045), transparent 62%),
      linear-gradient(180deg, rgba(249, 252, 253, 0.96) 0%, #FFFFFF 100%) !important;
    border-top: 1px solid rgba(0, 178, 169, 0.14) !important;
    overflow: hidden !important;
  }

  .page--home .stats--gpt2::after {
    display: block !important;
    content: '' !important;
    position: absolute !important;
    right: 54px !important;
    top: 26px !important;
    width: 130px !important;
    height: 86px !important;
    background-image: radial-gradient(rgba(0, 178, 169, 0.13) 1px, transparent 1px) !important;
    background-size: 10px 10px !important;
    opacity: 0.42 !important;
  }

  .page--home .stats--gpt2 .container {
    max-width: min(690px, calc(100vw - 250px)) !important;
    padding: 0 !important;
  }

  .page--home .stats--gpt2 .stats__grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .page--home .stats--gpt2 .stat {
    min-height: 72px !important;
    padding: 0 20px !important;
    text-align: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .page--home .stats--gpt2 .stat + .stat {
    border-left: 1px solid rgba(10, 10, 10, 0.12) !important;
  }

  .page--home .stats--gpt2 .stat__index,
  .page--home .stats--gpt2 .stat__detail { display: none !important; }

  .page--home .stats--gpt2 .stat__number {
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 8px !important;
    color: #050505 !important;
    background: none !important;
    -webkit-text-fill-color: #050505 !important;
  }

  .page--home .stats--gpt2 .stat__label {
    max-width: 112px !important;
    margin: 0 auto !important;
    font-size: 9.5px !important;
    line-height: 1.32 !important;
    font-weight: 450 !important;
    letter-spacing: -0.01em !important;
    color: #6B7280 !important;
  }

  .cookie-banner {
    width: 632px !important;
    height: 52px !important;
    max-width: calc(100vw - 360px) !important;
    left: 48.5% !important;
    right: auto !important;
    bottom: 6px !important;
    overflow: hidden !important;
    transform: translateX(-50%) !important;
  }

  .cookie-banner.is-visible { transform: translateX(-50%) !important; }

  .cookie-banner__inner {
    height: 52px !important;
    min-height: 52px !important;
    padding: 9px 10px !important;
    grid-template-columns: 28px 1fr auto !important;
    gap: 12px !important;
    border-radius: 10px !important;
  }

  .cookie-banner__icon {
    width: 24px !important;
    height: 24px !important;
  }

  .cookie-banner__title { font-size: 9.2px !important; }
  .cookie-banner__text { font-size: 7.3px !important; line-height: 1.3 !important; }
  .cookie-banner .cta { min-height: 28px !important; padding: 8px 14px !important; font-size: 8px !important; }
}

@media (max-width: 900px) {
  .page--home .hero__meta-break { display: none !important; }
}

/* ==========================================================================
   v19 · Exact supplied orbit artwork
   Uses the provided orbit reference image as the hero visual so the rings,
   labels, glow, and platform positions match the supplied asset exactly.
   ========================================================================== */

.page--home .hero-orbit {
  background-image: url('/static/horatos-orbit-reference.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  border-radius: 0 !important;
  filter: none !important;
  box-shadow: none !important;
}

.page--home .hero-orbit::before,
.page--home .hero-orbit::after,
.page--home .hero-orbit__halo,
.page--home .hero-orbit__axis,
.page--home .hero-orbit__center,
.page--home .hero-orbit__chip {
  display: none !important;
}

@media (min-width: 901px) {
  .page--home .hero__visual {
    min-height: 318px !important;
    height: 318px !important;
    overflow: visible !important;
  }

  .page--home .hero-orbit {
    width: 500px !important;
    height: 334px !important;
    flex: 0 0 500px !important;
    max-width: none !important;
    aspect-ratio: 1024 / 767 !important;
    transform: translate(-46px, -26px) !important;
  }
}

@media (max-width: 900px) {
  .page--home .hero-orbit {
    width: min(620px, 104vw) !important;
    height: auto !important;
    aspect-ratio: 1024 / 767 !important;
    max-width: none !important;
    transform: none !important;
  }
}

@media (max-width: 720px) {
  .page--home .hero__visual {
    min-height: 250px !important;
    height: 250px !important;
    overflow: visible !important;
  }

  .page--home .hero-orbit {
    width: min(410px, 112vw) !important;
    transform: translateX(-3vw) !important;
  }
}

/* ==========================================================================
   v20 · Desktop width rescue
   The previous exact-match pass capped the desktop hero at ~824px, which made
   the 1024px+ desktop composition feel too narrow. This restores a generous
   editorial desktop canvas while keeping the supplied orbit artwork intact.
   ========================================================================== */

@media (min-width: 901px) {
  .site-header__inner {
    max-width: min(1180px, calc(100vw - 96px)) !important;
  }

  .page--home .hero--gpt2 {
    height: clamp(402px, 35vw, 520px) !important;
    min-height: clamp(402px, 35vw, 520px) !important;
    padding: clamp(54px, 5.2vw, 78px) 0 clamp(32px, 4vw, 54px) !important;
  }

  .page--home .hero--gpt2::before {
    width: min(860px, 58vw) !important;
    height: min(560px, 42vw) !important;
    left: 72% !important;
    top: 50% !important;
  }

  .page--home .hero--gpt2 .hero__inner {
    max-width: min(1180px, calc(100vw - 96px)) !important;
  }

  .page--home .hero__layout {
    grid-template-columns: minmax(420px, 0.42fr) minmax(0, 0.58fr) !important;
    gap: clamp(30px, 4vw, 58px) !important;
    align-items: center !important;
  }

  .page--home .hero__content {
    max-width: 480px !important;
  }

  .page--home .hero--gpt2 .hero__headline {
    max-width: 480px !important;
    font-size: clamp(84px, 7.5vw, 116px) !important;
  }

  .page--home .hero--gpt2 .hero__sub,
  .page--home .hero--gpt2 .hero__subline--lede {
    max-width: 455px !important;
  }

  .page--home .hero--gpt2 .hero__subline--lede {
    font-size: clamp(14.5px, 1.42vw, 19px) !important;
  }

  .page--home .hero--gpt2 .hero__subline--detail {
    max-width: 440px !important;
    font-size: clamp(9.8px, 0.92vw, 13px) !important;
  }

  .page--home .hero--gpt2 .hero__meta {
    width: 440px !important;
    max-width: 440px !important;
    font-size: clamp(7.8px, 0.75vw, 10px) !important;
  }

  .page--home .hero__visual {
    min-height: clamp(334px, 32vw, 480px) !important;
    height: clamp(334px, 32vw, 480px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
  }

  .page--home .hero-orbit {
    width: clamp(560px, 53vw, 760px) !important;
    height: auto !important;
    flex: 0 0 clamp(560px, 53vw, 760px) !important;
    aspect-ratio: 1024 / 767 !important;
    transform: translate(clamp(-52px, -3.8vw, -24px), clamp(-42px, -2.8vw, -16px)) !important;
  }

  .page--home .stats--gpt2 .container {
    max-width: min(980px, calc(100vw - 160px)) !important;
  }
}

@media (min-width: 1280px) {
  .page--home .hero--gpt2 .hero__inner,
  .site-header__inner {
    max-width: min(1240px, calc(100vw - 128px)) !important;
  }

  .page--home .stats--gpt2 .container {
    max-width: 1060px !important;
  }
}

@media (min-width: 901px) and (max-width: 1060px) {
  .site-header__inner,
  .page--home .hero--gpt2 .hero__inner {
    max-width: calc(100vw - 64px) !important;
  }

  .page--home .hero__layout {
    grid-template-columns: 400px minmax(0, 1fr) !important;
    gap: 26px !important;
  }

  .page--home .hero__content {
    max-width: 400px !important;
  }

  .page--home .hero--gpt2 .hero__headline {
    max-width: 400px !important;
    font-size: 82px !important;
  }

  .page--home .hero-orbit {
    width: 560px !important;
    flex-basis: 560px !important;
    transform: translate(-48px, -22px) !important;
  }

  .page--home .stats--gpt2 .container {
    max-width: calc(100vw - 128px) !important;
  }
}

/* ==========================================================================
   v21 · Better-resolution WebP orbit + blended hero background
   Replaces the orbit art with the higher-quality WebP asset and aligns the
   surrounding hero background to the artwork's soft cyan-white field.
   ========================================================================== */

.page--home .hero--gpt2 {
  background:
    radial-gradient(ellipse 58% 72% at 78% 42%, rgba(218, 250, 252, 0.78), rgba(241, 253, 254, 0.35) 42%, transparent 72%),
    radial-gradient(ellipse 44% 58% at 52% 62%, rgba(231, 252, 253, 0.62), transparent 66%),
    linear-gradient(180deg, #FBFEFE 0%, #F2FCFD 52%, #F8FEFE 100%) !important;
}

.page--home .hero--gpt2::before {
  background: radial-gradient(closest-side, rgba(0, 178, 169, 0.10), rgba(209, 249, 250, 0.34) 46%, transparent 74%) !important;
}

.page--home .hero-orbit {
  aspect-ratio: 1024 / 767 !important;
  background-image: url('/static/horatos-orbit-reference.webp') !important;
  background-size: contain !important;
  background-color: transparent !important;
  mix-blend-mode: normal !important;
}

@media (min-width: 901px) {
  .page--home .hero__visual {
    min-height: clamp(350px, 33vw, 500px) !important;
    height: clamp(350px, 33vw, 500px) !important;
  }

  .page--home .hero-orbit {
    width: clamp(560px, 53vw, 760px) !important;
    flex-basis: clamp(560px, 53vw, 760px) !important;
    height: auto !important;
    transform: translate(clamp(-52px, -3.8vw, -24px), clamp(-36px, -2.4vw, -14px)) !important;
  }
}

@media (max-width: 900px) {
  .page--home .hero--gpt2 {
    background:
      radial-gradient(ellipse 82% 54% at 50% 58%, rgba(226, 252, 253, 0.80), transparent 72%),
      linear-gradient(180deg, #FBFEFE 0%, #F3FDFD 58%, #FFFFFF 100%) !important;
  }
}

/* ===========================================================================
   v22 · Apple art-director desktop pass
   Corrects desktop hierarchy: larger readable header menu, true left-edge hero
   alignment, stronger proof/stat scale, and single-line industry closing lead.
   =========================================================================== */

@media (min-width: 901px) {
  :root { --header-h: 48px !important; }

  .site-header {
    min-height: 48px !important;
  }

  .site-header__inner {
    height: 48px !important;
    min-height: 48px !important;
    max-width: min(1240px, calc(100vw - 128px)) !important;
    gap: clamp(26px, 3vw, 44px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .site-header__brand {
    font-size: 14.5px !important;
    line-height: 1 !important;
    letter-spacing: -0.018em !important;
  }

  .site-header__brand .logo-mark,
  .site-header__logo-mark,
  .site-header__brand svg {
    width: 24px !important;
    height: 24px !important;
  }

  .site-header__nav {
    gap: clamp(22px, 2.25vw, 32px) !important;
    margin-left: auto !important;
    margin-right: 22px !important;
  }

  .site-header__nav .nav-link,
  .site-header__nav a {
    font-size: 13px !important;
    line-height: 1.15 !important;
    font-weight: 520 !important;
    letter-spacing: -0.012em !important;
    padding: 8px 0 !important;
  }

  .site-header__actions .cta,
  .site-header .cta--small {
    min-height: 34px !important;
    padding: 10px 18px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    letter-spacing: -0.01em !important;
  }

  .page--home .hero--gpt2 {
    height: clamp(448px, 36vw, 540px) !important;
    min-height: clamp(448px, 36vw, 540px) !important;
    padding: clamp(58px, 5.1vw, 76px) 0 clamp(34px, 3.9vw, 54px) !important;
  }

  .page--home .hero--gpt2 .hero__inner {
    max-width: min(1240px, calc(100vw - 128px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-items: stretch !important;
  }

  .page--home .hero__layout {
    grid-template-columns: minmax(480px, 0.435fr) minmax(0, 0.565fr) !important;
    gap: clamp(44px, 4.6vw, 70px) !important;
    align-items: center !important;
  }

  .page--home .hero__content {
    max-width: 520px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .page--home .hero__content > *,
  .page--home .hero--gpt2 .hero__eyebrow,
  .page--home .hero--gpt2 .hero__headline,
  .page--home .hero--gpt2 .hero__sub,
  .page--home .hero--gpt2 .hero__subline,
  .page--home .hero--gpt2 .hero__ctas,
  .page--home .hero--gpt2 .hero__meta {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .page--home .hero--gpt2 .hero__eyebrow {
    font-size: 9.5px !important;
    letter-spacing: 0.28em !important;
    margin-bottom: 20px !important;
  }

  .page--home .hero--gpt2 .hero__headline {
    max-width: 520px !important;
    font-size: clamp(92px, 7.65vw, 118px) !important;
    line-height: 0.86 !important;
    letter-spacing: -0.071em !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }

  .page--home .hero--gpt2 .hero__sub {
    max-width: 488px !important;
    margin-top: 14px !important;
    padding: 0 !important;
  }

  .page--home .hero--gpt2 .hero__subline--lede {
    max-width: 488px !important;
    font-size: clamp(17px, 1.32vw, 19px) !important;
    line-height: 1.46 !important;
    letter-spacing: -0.023em !important;
  }

  .page--home .hero--gpt2 .hero__subline--detail {
    max-width: 472px !important;
    font-size: clamp(12.2px, 0.92vw, 13.5px) !important;
    line-height: 1.58 !important;
    margin-top: 11px !important;
  }

  .page--home .hero--gpt2 .hero__ctas {
    margin-top: 22px !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .page--home .hero--gpt2 .hero__ctas .cta {
    min-height: 36px !important;
    padding: 11px 18px !important;
    font-size: 12px !important;
    letter-spacing: -0.01em !important;
  }

  .page--home .hero--gpt2 .hero__meta {
    width: 488px !important;
    max-width: 488px !important;
    margin-top: 16px !important;
    gap: 6px 14px !important;
    font-size: 9.8px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.025em !important;
  }

  .page--home .hero__visual {
    min-height: clamp(374px, 33vw, 510px) !important;
    height: clamp(374px, 33vw, 510px) !important;
    justify-content: flex-end !important;
  }

  .page--home .hero-orbit {
    width: clamp(600px, 52vw, 760px) !important;
    flex-basis: clamp(600px, 52vw, 760px) !important;
    transform: translate(clamp(-34px, -2.3vw, -14px), clamp(-28px, -1.8vw, -10px)) !important;
  }

  .page--home .stats--gpt2 {
    height: 176px !important;
    min-height: 176px !important;
    padding: 26px 0 0 !important;
  }

  .page--home .stats--gpt2 .container {
    max-width: min(1120px, calc(100vw - 128px)) !important;
  }

  .page--home .stats--gpt2 .stats__grid {
    min-height: 104px !important;
  }

  .page--home .stats--gpt2 .stat {
    min-height: 104px !important;
    padding: 0 clamp(22px, 2.5vw, 34px) !important;
  }

  .page--home .stats--gpt2 .stat__number {
    font-size: clamp(42px, 3.55vw, 52px) !important;
    line-height: 0.94 !important;
    margin-bottom: 11px !important;
    letter-spacing: -0.052em !important;
  }

  .page--home .stats--gpt2 .stat__label {
    max-width: 168px !important;
    font-size: clamp(11.5px, 0.92vw, 13px) !important;
    line-height: 1.32 !important;
    letter-spacing: -0.018em !important;
    color: #5C6675 !important;
  }

  .industry__closing-text {
    max-width: 1160px !important;
    font-size: clamp(38px, 3.25vw, 48px) !important;
    line-height: 1.15 !important;
  }

  .industry__closing-strong {
    display: inline-block !important;
    white-space: nowrap !important;
  }

  .industry__closing-support {
    display: block !important;
    max-width: 760px !important;
    margin: 22px auto 0 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    color: #596273 !important;
  }
}

@media (min-width: 901px) and (max-width: 1060px) {
  .site-header__inner,
  .page--home .hero--gpt2 .hero__inner {
    max-width: calc(100vw - 64px) !important;
  }

  .page--home .hero__layout {
    grid-template-columns: 420px minmax(0, 1fr) !important;
    gap: 32px !important;
  }

  .page--home .hero__content,
  .page--home .hero--gpt2 .hero__headline {
    max-width: 420px !important;
  }

  .page--home .hero--gpt2 .hero__headline {
    font-size: 86px !important;
  }

  .page--home .hero--gpt2 .hero__sub,
  .page--home .hero--gpt2 .hero__subline--lede,
  .page--home .hero--gpt2 .hero__subline--detail,
  .page--home .hero--gpt2 .hero__meta {
    max-width: 420px !important;
    width: 420px !important;
  }

  .page--home .hero-orbit {
    width: 574px !important;
    flex-basis: 574px !important;
    transform: translate(-28px, -18px) !important;
  }

  .page--home .stats--gpt2 .container {
    max-width: calc(100vw - 96px) !important;
  }
}

/* ===========================================================================
   v23 · Homepage proof, core-team order, about signal, visual methodology
   =========================================================================== */

.page--home .hero--gpt2 .hero__eyebrow {
  color: #0A0A0A !important;
  font-weight: 800 !important;
  letter-spacing: 0.20em !important;
}

.page--home .hero--gpt2 .hero__eyebrow-text {
  font-weight: 800 !important;
}

.page--home .hero--gpt2 .hero__eyebrow-dot {
  background: var(--teal) !important;
  box-shadow: 0 0 0 4px rgba(0, 178, 169, 0.14), 0 0 22px rgba(0, 178, 169, 0.26) !important;
}

.page--home .stats--gpt2 .stat__number {
  font-variant-numeric: lining-nums tabular-nums !important;
}

.about-signal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(160px, 230px) minmax(0, 1fr) minmax(210px, 280px);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  margin: clamp(72px, 7vw, 108px) 0 clamp(56px, 6vw, 88px);
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid rgba(0, 178, 169, 0.18);
  border-radius: 32px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 42% 90% at 12% 50%, rgba(0, 178, 169, 0.14), transparent 68%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(238, 253, 253, 0.74));
  box-shadow: 0 34px 90px -62px rgba(0, 80, 76, 0.38), inset 0 1px 0 rgba(255,255,255,0.86);
}

.about-signal::before {
  content: '';
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255,255,255,0.72);
  border-radius: 24px;
  pointer-events: none;
}

.about-signal__orb {
  position: relative;
  width: clamp(138px, 14vw, 188px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 178, 169, 0.18), transparent 32%),
    conic-gradient(from 180deg, transparent, rgba(0,178,169,0.34), transparent, rgba(0,178,169,0.20), transparent);
  border: 1px solid rgba(0, 178, 169, 0.18);
  box-shadow: inset 0 0 0 20px rgba(255,255,255,0.52), 0 20px 60px -36px rgba(0,178,169,0.55);
}

.about-signal__orb::before,
.about-signal__orb::after {
  content: '';
  position: absolute;
  inset: 22%;
  border: 1px solid rgba(0, 178, 169, 0.22);
  border-radius: 50%;
  transform: rotate(-18deg) scaleX(1.35);
}

.about-signal__orb::after {
  inset: 33%;
  opacity: 0.65;
  transform: rotate(28deg) scaleX(1.55);
}

.about-signal__orb span {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, #3DE2DC, #00B2A9);
  box-shadow: 0 0 20px rgba(0,178,169,0.34);
}

.about-signal__orb span:nth-child(1) { left: 28%; top: 28%; }
.about-signal__orb span:nth-child(2) { right: 26%; top: 22%; width: 13px; height: 13px; }
.about-signal__orb span:nth-child(3) { left: 22%; bottom: 25%; width: 13px; height: 13px; }
.about-signal__orb span:nth-child(4) { right: 24%; bottom: 24%; }

.about-signal__copy,
.about-signal__proof { position: relative; z-index: 1; }

.about-signal__kicker {
  margin: 0 0 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 700;
}

.about-signal__copy h2 {
  margin: 0;
  max-width: 720px;
  font-size: clamp(34px, 4.2vw, 62px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 760;
  color: #050505;
}

.about-signal__copy p:last-child {
  max-width: 680px;
  margin: 22px 0 0;
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.65;
  letter-spacing: -0.015em;
  color: #4B5563;
}

.about-signal__proof {
  display: grid;
  gap: 10px;
}

.about-signal__proof span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(10, 10, 10, 0.08);
  border-radius: 999px;
  background: rgba(255,255,255,0.70);
  color: #596273;
  font-size: 13px;
  line-height: 1;
  letter-spacing: -0.01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.84);
}

.about-signal__proof strong {
  color: #0A0A0A;
  font-weight: 720;
}

.section--team-preview {
  background:
    radial-gradient(ellipse 48% 60% at 14% 0%, rgba(0,178,169,0.08), transparent 62%),
    linear-gradient(180deg, #FBFEFE 0%, #F4FBFB 100%) !important;
}

.page--home .section--team-preview .subline {
  max-width: 760px;
}

.section--methodology {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 80% at 50% 0%, rgba(216, 252, 253, 0.82), transparent 62%),
    linear-gradient(180deg, #FFFFFF 0%, #F7FDFD 48%, #FFFFFF 100%);
}

.section--methodology::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image: linear-gradient(rgba(0,178,169,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,178,169,0.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 65% 64% at 50% 38%, black, transparent 82%);
  pointer-events: none;
}

.methodology__inner {
  position: relative;
  z-index: 1;
}

.methodology__header {
  max-width: 900px;
  margin: 0 auto clamp(44px, 6vw, 76px);
  text-align: center;
}

.methodology__header h2 {
  margin: 0 auto 18px;
  max-width: 860px;
  font-size: clamp(42px, 6vw, 84px);
  line-height: 0.95;
  letter-spacing: -0.065em;
  font-weight: 780;
}

.methodology__header .subline {
  max-width: 760px;
}

.methodology__canvas {
  position: relative;
  min-height: 620px;
  max-width: 1180px;
  margin: 0 auto;
  border-radius: 40px;
  border: 1px solid rgba(0,178,169,0.16);
  background:
    radial-gradient(circle at 50% 50%, rgba(0,178,169,0.16), transparent 20%),
    radial-gradient(ellipse 60% 60% at 50% 50%, rgba(255,255,255,0.92), rgba(238,253,253,0.72) 58%, rgba(255,255,255,0.86));
  box-shadow: 0 50px 120px -78px rgba(0, 80, 76, 0.48), inset 0 1px 0 rgba(255,255,255,0.92);
  overflow: hidden;
}

.methodology__canvas::before,
.methodology__canvas::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(700px, 72%);
  aspect-ratio: 1 / 0.58;
  border: 1px solid rgba(0,178,169,0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
}

.methodology__canvas::after {
  transform: translate(-50%, -50%) rotate(16deg);
  width: min(620px, 62%);
  opacity: 0.74;
}

.methodology__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(0,178,169,0.18);
  pointer-events: none;
}

.methodology__ring--outer {
  width: min(760px, 74%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.methodology__ring--inner {
  width: min(360px, 38%);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0.72;
}

.methodology__core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  gap: 14px;
  width: 178px;
  height: 178px;
  border-radius: 50%;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,178,169,0.20);
  box-shadow: 0 18px 60px -34px rgba(0, 80, 76, 0.42), inset 0 1px 0 rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}

.methodology__core span {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0A0A0A;
}

.methodology__node {
  position: absolute;
  z-index: 4;
  width: min(320px, 30%);
  padding: 22px 22px 20px;
  border: 1px solid rgba(10,10,10,0.075);
  border-radius: 24px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 24px 70px -48px rgba(0, 80, 76, 0.34), inset 0 1px 0 rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

.methodology__node--top { left: 50%; top: 40px; transform: translateX(-50%); }
.methodology__node--right { right: 46px; top: 50%; transform: translateY(-50%); }
.methodology__node--bottom { left: 50%; bottom: 40px; transform: translateX(-50%); }
.methodology__node--left { left: 46px; top: 50%; transform: translateY(-50%); }

.methodology__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: #0A0A0A;
  color: #FFFFFF;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  font-weight: 700;
}

.methodology__node h3 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.methodology__node p {
  margin: 0;
  color: #596273;
  font-size: 13px;
  line-height: 1.55;
}

@media (min-width: 901px) {
  .page--home .hero--gpt2 .hero__eyebrow {
    font-size: 10.5px !important;
  }
}

@media (max-width: 900px) {
  .about-signal {
    grid-template-columns: 1fr;
    text-align: left;
    border-radius: 24px;
  }

  .about-signal__orb {
    width: 154px;
  }

  .methodology__canvas {
    min-height: auto;
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 28px;
  }

  .methodology__canvas::before,
  .methodology__canvas::after,
  .methodology__ring {
    display: none;
  }

  .methodology__core,
  .methodology__node,
  .methodology__node--top,
  .methodology__node--right,
  .methodology__node--bottom,
  .methodology__node--left {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    transform: none;
    width: 100%;
  }

  .methodology__core {
    width: 100%;
    height: auto;
    min-height: 140px;
    border-radius: 24px;
  }
}

/* ===========================================================================
   v25 · The Shift readable 6-panel story comic
   =========================================================================== */

.section--shift-story {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 64% 54% at 50% 4%, rgba(222, 252, 253, 0.62), transparent 66%),
    linear-gradient(180deg, #FFFFFF 0%, #FFFDF8 48%, #F8FEFE 100%);
}

.section--shift-story::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.56;
  background-image:
    linear-gradient(rgba(0, 178, 169, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 178, 169, 0.045) 1px, transparent 1px),
    radial-gradient(circle at 16% 22%, rgba(0,178,169,0.12) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 72%, rgba(0,178,169,0.10) 0 1px, transparent 2px);
  background-size: 68px 68px, 68px 68px, auto, auto;
  mask-image: radial-gradient(ellipse 80% 74% at 50% 42%, black, transparent 88%);
}

.section--shift-story .container {
  position: relative;
  z-index: 1;
}

.shift-story__intro {
  display: grid;
  grid-template-columns: minmax(320px, 0.92fr) minmax(420px, 1.08fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}

.shift-story__intro .shift__text h2 {
  max-width: 760px;
  margin-bottom: 0;
  letter-spacing: -0.058em;
}

.shift-story__body {
  max-width: 690px;
  padding-top: clamp(4px, 1vw, 12px);
}

.shift-story__body .body {
  max-width: 680px;
  margin-bottom: 18px;
  font-size: clamp(15.5px, 1.18vw, 18px);
  line-height: 1.68;
  letter-spacing: -0.018em;
  color: #4B5563;
}

.shift-story__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0 0;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 760;
}

.shift-story__kicker::before {
  content: '';
  width: 26px;
  height: 1px;
  background: rgba(0,178,169,0.48);
}

.shift-story__context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 18px);
  margin-top: clamp(30px, 4vw, 48px);
}

.shift-story__context article {
  padding: clamp(18px, 2vw, 24px);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 178, 169, 0.13);
  box-shadow: 0 24px 70px -66px rgba(0, 80, 76, 0.45), inset 0 1px 0 rgba(255,255,255,0.86);
}

.shift-story__context span {
  display: block;
  margin-bottom: 9px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 820;
}

.shift-story__context p {
  margin: 0;
  color: #465160;
  font-size: clamp(13px, 0.98vw, 14.5px);
  line-height: 1.48;
  letter-spacing: -0.014em;
}

.shift-story__mascot {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 0.38fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3.2vw, 42px);
  margin-top: clamp(22px, 3.2vw, 38px);
  padding: clamp(18px, 2.8vw, 34px);
  border-radius: clamp(26px, 2.6vw, 38px);
  background:
    radial-gradient(circle at 13% 16%, rgba(0,178,169,0.16), transparent 28%),
    linear-gradient(135deg, rgba(255,255,255,0.92), rgba(247,255,254,0.76));
  border: 1px solid rgba(0, 178, 169, 0.16);
  box-shadow: 0 38px 100px -78px rgba(0,80,76,0.58), inset 0 1px 0 rgba(255,255,255,0.92);
  overflow: hidden;
}

.shift-story__mascot::after {
  content: '';
  position: absolute;
  right: clamp(22px, 4vw, 54px);
  top: clamp(20px, 3vw, 42px);
  width: 58px;
  height: 58px;
  border-radius: 999px;
  border: 1px dashed rgba(0,178,169,0.34);
  opacity: 0.54;
  pointer-events: none;
}

.shift-story__mascot-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(132px, 16vw, 190px);
}

.shift-story__mascot-art::before {
  content: '';
  position: absolute;
  width: min(82%, 170px);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(0,178,169,0.20), rgba(0,178,169,0) 70%);
  filter: blur(8px);
}

.shift-story__mascot-art img {
  position: relative;
  display: block;
  width: min(100%, 184px);
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 22px 30px rgba(0,80,76,0.14));
}

.shift-story__mascot-copy {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.shift-story__mascot-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 820;
}

.shift-story__mascot-label::before {
  content: '';
  width: 24px;
  height: 1px;
  background: rgba(0,178,169,0.52);
}

.shift-story__mascot h3 {
  margin: 0 0 10px;
  color: #050505;
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 780;
}

.shift-story__mascot p {
  max-width: 690px;
  margin: 0;
  color: #374151;
  font-size: clamp(15px, 1.18vw, 18px);
  line-height: 1.58;
  letter-spacing: -0.018em;
}

.shift-story__mascot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.shift-story__mascot-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,178,169,0.16);
  color: #1F2937;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 760;
}

.shift-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(44px, 6vw, 76px);
}

.shift-story__panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(24px, 2.2vw, 34px);
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(16, 24, 40, 0.10);
  box-shadow: 0 38px 92px -72px rgba(0,80,76,0.42), inset 0 1px 0 rgba(255,255,255,0.92);
  transition: transform 420ms var(--ease), border-color 420ms var(--ease), box-shadow 420ms var(--ease);
  isolation: isolate;
}

.shift-story__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.68);
}

@media (hover: hover) and (pointer: fine) {
  .shift-story__panel:hover {
    transform: translateY(-5px);
    border-color: rgba(0,178,169,0.26);
    box-shadow: 0 46px 110px -72px rgba(0,80,76,0.56), inset 0 1px 0 rgba(255,255,255,0.94);
  }

  .shift-story__panel:hover img {
    transform: scale(1.018);
  }
}

.shift-story__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FFFDF5;
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.shift-story__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.shift-story__figure::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.28) 42%, rgba(255,255,255,0.84) 100%);
}

.shift-story__dialogue {
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
}

.shift-story__bubble {
  position: absolute;
  max-width: 54%;
  margin: 0;
  padding: 9px 11px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(10, 10, 10, 0.10);
  box-shadow: 0 12px 32px -22px rgba(0,0,0,0.34);
  color: #111827;
  font-size: clamp(11px, 0.82vw, 12.6px);
  line-height: 1.24;
  letter-spacing: -0.018em;
  font-weight: 620;
}

.shift-story__bubble span {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8.5px;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 800;
}

.shift-story__bubble::after {
  content: '';
  position: absolute;
  bottom: -7px;
  width: 14px;
  height: 14px;
  background: inherit;
  border-right: 1px solid rgba(10, 10, 10, 0.10);
  border-bottom: 1px solid rgba(10, 10, 10, 0.10);
  transform: rotate(45deg);
}

.shift-story__bubble--left {
  left: 0;
  bottom: 10px;
}

.shift-story__bubble--left::after {
  left: 22px;
}

.shift-story__bubble--right {
  right: 0;
  top: 2px;
}

.shift-story__bubble--right::after {
  right: 22px;
}

.shift-story__copy {
  position: relative;
  z-index: 2;
  padding: clamp(18px, 1.8vw, 25px);
}

.shift-story__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.20em;
  color: var(--teal);
  font-weight: 760;
}

.shift-story__num::after {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(0,178,169,0.42);
}

.shift-story__copy h3 {
  margin: 12px 0 8px;
  font-size: clamp(19px, 1.55vw, 24px);
  line-height: 1.04;
  letter-spacing: -0.046em;
  font-weight: 780;
  color: #050505;
}

.shift-story__copy p {
  margin: 0;
  color: #596273;
  font-size: clamp(12.8px, 0.94vw, 14px);
  line-height: 1.52;
  letter-spacing: -0.012em;
}

.shift-story__copy .shift-story__horo-note {
  position: relative;
  margin-top: 14px;
  padding: 12px 13px 12px 35px;
  border-radius: 16px;
  background: rgba(0,178,169,0.07);
  border: 1px solid rgba(0,178,169,0.14);
  color: #24313F;
  font-size: clamp(12.4px, 0.9vw, 13.4px);
  line-height: 1.42;
  font-weight: 560;
}

.shift-story__horo-note::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 15px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 14px 0 0 rgba(0,178,169,0.44), 7px 11px 0 rgba(0,178,169,0.26);
}

.shift-story__closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 4vw, 54px);
  margin-top: clamp(34px, 5vw, 64px);
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: clamp(24px, 2.4vw, 34px);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(0,178,169,0.14);
  box-shadow: 0 28px 80px -70px rgba(0,80,76,0.48);
}

.shift-story__closing p {
  max-width: 780px;
  margin: 0;
  color: #2D3645;
  font-size: clamp(17px, 1.55vw, 23px);
  line-height: 1.42;
  letter-spacing: -0.036em;
  font-weight: 560;
}

@media (max-width: 1100px) {
  .shift-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .shift-story__intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .shift-story__body {
    max-width: 760px;
  }

  .shift-story__context {
    grid-template-columns: 1fr;
  }

  .shift-story__mascot {
    grid-template-columns: 130px minmax(0, 1fr);
  }

  .shift-story__mascot-art img {
    width: 140px;
  }

  .shift-story__closing {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}

@media (max-width: 680px) {
  .section--shift-story {
    padding-top: 88px;
    padding-bottom: 88px;
  }

  .shift-story__body .body {
    font-size: 15px;
    line-height: 1.62;
  }

  .shift-story__context {
    gap: 10px;
    margin-top: 26px;
  }

  .shift-story__context article {
    padding: 17px;
    border-radius: 18px;
  }

  .shift-story__mascot {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 20px;
    text-align: left;
  }

  .shift-story__mascot-art {
    justify-content: flex-start;
    min-height: 104px;
  }

  .shift-story__mascot-art img {
    width: 112px;
  }

  .shift-story__mascot h3 {
    font-size: 28px;
  }

  .shift-story__mascot-tags {
    gap: 6px;
  }

  .shift-story__mascot-tags span {
    min-height: 26px;
    font-size: 9px;
  }

  .shift-story {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 18px;
  }

  .shift-story__panel {
    width: 100%;
    max-width: 100%;
    border-radius: 24px;
  }

  .shift-story__figure {
    width: 100%;
    max-width: 100%;
  }

  .shift-story__figure img {
    width: 100%;
    max-width: 100%;
  }

  .shift-story__dialogue {
    inset: 10px;
  }

  .shift-story__bubble {
    max-width: 64%;
    padding: 8px 9px 9px;
    border-radius: 14px;
    font-size: 10.6px;
    line-height: 1.20;
  }

  .shift-story__bubble span {
    font-size: 7.8px;
    margin-bottom: 2px;
  }

  .shift-story__bubble--left {
    bottom: 8px;
  }

  .shift-story__bubble--right {
    top: 0;
  }

  .shift-story__copy {
    padding: 20px;
  }

  .shift-story__closing {
    padding: 22px;
    border-radius: 24px;
  }
}

/* ==========================================================================
   v26 · Horatos comic system: What We Do + final CTA
   ========================================================================== */

.service-story {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  margin-top: clamp(42px, 5.5vw, 72px);
  margin-bottom: clamp(42px, 5.5vw, 72px);
}

.service-story__panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(24px, 2.2vw, 34px);
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(16, 24, 40, 0.10);
  box-shadow: 0 34px 82px -70px rgba(0,80,76,0.34), inset 0 1px 0 rgba(255,255,255,0.92);
  transition: transform 420ms var(--ease), border-color 420ms var(--ease), box-shadow 420ms var(--ease);
  isolation: isolate;
}

.service-story__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.7);
}

@media (hover: hover) and (pointer: fine) {
  .service-story__panel:hover {
    transform: translateY(-5px);
    border-color: rgba(0,178,169,0.26);
    box-shadow: 0 46px 110px -74px rgba(0,80,76,0.54), inset 0 1px 0 rgba(255,255,255,0.95);
  }

  .service-story__panel:hover img,
  .cta-comic__panel:hover img {
    transform: scale(1.018);
  }
}

.service-story__figure,
.cta-comic__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #FFFDF5;
}

.service-story__figure {
  border-bottom: 1px solid rgba(16, 24, 40, 0.08);
}

.service-story__figure img,
.cta-comic__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease);
}

.service-story__figure::after,
.cta-comic__figure::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.24) 42%, rgba(255,255,255,0.86) 100%);
}

.service-story__dialogue,
.cta-comic__dialogue {
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
}

.service-story__bubble,
.cta-comic__bubble {
  position: absolute;
  max-width: 58%;
  margin: 0;
  padding: 9px 11px 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(10, 10, 10, 0.10);
  box-shadow: 0 12px 32px -22px rgba(0,0,0,0.34);
  color: #111827;
  font-size: clamp(10.8px, 0.8vw, 12.4px);
  line-height: 1.23;
  letter-spacing: -0.018em;
  font-weight: 620;
}

.service-story__bubble span,
.cta-comic__bubble span {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 8.4px;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 820;
}

.service-story__bubble--left,
.cta-comic__bubble--left {
  left: 0;
  bottom: 10px;
}

.service-story__bubble--right,
.cta-comic__bubble--right {
  right: 0;
  top: 2px;
}

.service-story__copy {
  position: relative;
  z-index: 2;
  padding: clamp(18px, 1.8vw, 25px);
}

.service-story__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.20em;
  color: var(--teal);
  font-weight: 760;
}

.service-story__num::after {
  content: '';
  width: 28px;
  height: 1px;
  background: rgba(0,178,169,0.42);
}

.service-story__copy h3 {
  margin: 12px 0 8px;
  font-size: clamp(18px, 1.42vw, 22px);
  line-height: 1.06;
  letter-spacing: -0.042em;
  font-weight: 780;
  color: #050505;
}

.service-story__copy p {
  margin: 0;
  color: #596273;
  font-size: clamp(12.8px, 0.94vw, 14px);
  line-height: 1.52;
  letter-spacing: -0.012em;
}

.cta-comic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 18px);
  width: min(100%, 980px);
  margin: clamp(32px, 4vw, 48px) auto 0;
}

.cta-comic__panel {
  position: relative;
  overflow: hidden;
  border-radius: clamp(20px, 2vw, 28px);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 28px 80px -72px rgba(0,178,169,0.58);
  transition: transform 420ms var(--ease), border-color 420ms var(--ease);
}

.cta-comic__panel:hover {
  border-color: rgba(0,178,169,0.34);
}

.cta-comic__bubble {
  max-width: 72%;
  text-align: left;
}

.cta-comic__bubble--right {
  top: auto;
  bottom: 10px;
}

@media (max-width: 1100px) {
  .service-story {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .cta-comic {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}

@media (max-width: 680px) {
  .service-story {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-story__panel {
    border-radius: 24px;
  }

  .service-story__dialogue,
  .cta-comic__dialogue {
    inset: 10px;
  }

  .service-story__bubble,
  .cta-comic__bubble {
    max-width: 68%;
    padding: 8px 9px 9px;
    border-radius: 14px;
    font-size: 10.5px;
    line-height: 1.20;
  }

  .service-story__bubble span,
  .cta-comic__bubble span {
    font-size: 7.8px;
    margin-bottom: 2px;
  }

  .service-story__copy {
    padding: 20px;
  }

  .cta-comic {
    margin-top: 28px;
  }
}

/* ==========================================================================
   v27 · Homepage service comic links, Horo selection principle, About meaning
   ========================================================================== */

.service-story__panel {
  color: inherit;
  text-decoration: none;
}

.service-story__service {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
  font-weight: 820;
}

.service-story__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  color: #0A0A0A;
  transition: color 260ms var(--ease), transform 260ms var(--ease);
}

.service-story__panel:hover .service-story__link {
  color: var(--teal);
}

.service-story__panel:hover .service-story__link .arrow {
  transform: translateX(3px);
}

.service-story__link .arrow {
  display: inline-block;
  transition: transform 260ms var(--ease);
}

.industry__closing--horo {
  display: grid;
  grid-template-columns: minmax(190px, 0.38fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
  text-align: left;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(28px, 4vw, 56px);
  border: 1px solid rgba(0, 178, 169, 0.14);
  border-radius: clamp(28px, 4vw, 44px);
  background:
    radial-gradient(circle at 12% 18%, rgba(0,178,169,0.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,253,248,0.88));
  box-shadow: 0 44px 120px -86px rgba(0,80,76,0.48), inset 0 1px 0 rgba(255,255,255,0.92);
  overflow: hidden;
}

.industry__closing--horo::before {
  content: '';
  position: absolute;
  inset: 18px;
  pointer-events: none;
  border-radius: inherit;
  border: 1px dashed rgba(0,178,169,0.13);
}

.industry__closing-art {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 260px;
}

.industry__closing-art::before {
  content: '';
  position: absolute;
  width: min(92%, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,178,169,0.20), transparent 62%);
  filter: blur(8px);
}

.industry__closing-art img {
  position: relative;
  z-index: 1;
  width: min(100%, 280px);
  height: auto;
  display: block;
  filter: drop-shadow(0 28px 34px rgba(0,80,76,0.16));
}

.industry__closing-copy {
  position: relative;
  z-index: 1;
}

.industry__closing--horo .industry__closing-kicker {
  margin-bottom: 18px;
}

.industry__closing--horo .industry__closing-text {
  max-width: 780px;
  margin: 0;
  font-size: clamp(31px, 3.5vw, 50px);
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.industry__closing--horo .industry__closing-strong {
  display: block;
}

.industry__closing-support {
  display: block;
  max-width: 710px;
  margin-top: 18px;
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.66;
  letter-spacing: -0.012em;
  color: #596273;
  font-weight: 430;
}

.industry__closing-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.industry__closing-checks span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(0,178,169,0.075);
  border: 1px solid rgba(0,178,169,0.16);
  color: #29424A;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 650;
}

.industry__closing-checks span::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex: 0 0 auto;
}

.industry__closing--horo .industry__closing-dots {
  position: absolute;
  right: 34px;
  bottom: 30px;
  margin: 0;
}

.about-meaning {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 0.46fr) minmax(0, 0.78fr);
  gap: clamp(28px, 5vw, 76px);
  align-items: center;
  padding: clamp(34px, 5vw, 70px);
  border-radius: clamp(26px, 4vw, 42px);
  border: 1px solid rgba(10,10,10,0.08);
  background: rgba(255,255,255,0.78);
  box-shadow: 0 36px 100px -82px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.9);
  overflow: hidden;
}

.about-meaning::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 16% 18%, rgba(0,178,169,0.13), transparent 30%),
    radial-gradient(circle at 86% 78%, rgba(0,178,169,0.08), transparent 32%);
  pointer-events: none;
}

.about-meaning__mark,
.about-meaning__copy,
.about-meaning__pillars {
  position: relative;
  z-index: 1;
}

.about-meaning__mark {
  display: grid;
  place-items: center;
  min-height: 260px;
  border-radius: 32px;
  background: radial-gradient(circle, rgba(0,178,169,0.14), rgba(255,255,255,0.18) 62%, transparent 68%);
  color: var(--teal);
}

.about-meaning__copy h2 {
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 66px);
  line-height: 0.98;
  letter-spacing: -0.06em;
}

.about-meaning__copy p {
  max-width: 660px;
  margin: 0;
  color: #596273;
  font-size: clamp(16px, 1.28vw, 19px);
  line-height: 1.68;
}

.about-meaning__pillars {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.about-meaning__pillars article {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,0.82);
  border: 1px solid rgba(10,10,10,0.075);
}

.about-meaning__pillars span {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--teal);
  font-weight: 800;
}

.about-meaning__pillars h3 {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: -0.035em;
}

.about-meaning__pillars p {
  margin: 0;
  color: #596273;
  font-size: 14px;
  line-height: 1.58;
}

@media (max-width: 900px) {
  .industry__closing--horo,
  .about-meaning {
    grid-template-columns: 1fr;
  }

  .industry__closing--horo {
    text-align: center;
  }

  .industry__closing-art {
    min-height: 220px;
  }

  .industry__closing--horo .industry__closing-text,
  .industry__closing-support {
    margin-left: auto;
    margin-right: auto;
  }

  .industry__closing-checks {
    justify-content: center;
  }

  .about-meaning__mark {
    min-height: 190px;
  }
}

@media (max-width: 680px) {
  .industry__closing--horo {
    padding: 26px 20px 34px;
    border-radius: 26px;
  }

  .industry__closing--horo::before {
    inset: 10px;
  }

  .industry__closing-art {
    min-height: 170px;
  }

  .industry__closing-art img {
    width: min(78%, 210px);
  }

  .industry__closing--horo .industry__closing-strong {
    white-space: normal !important;
  }

  .industry__closing-checks {
    display: grid;
    grid-template-columns: 1fr;
  }

  .industry__closing-checks span {
    justify-content: center;
    border-radius: 18px;
  }

  .about-meaning {
    padding: 26px 20px;
    border-radius: 24px;
  }

  .about-meaning__pillars {
    grid-template-columns: 1fr;
  }
}

/* ========================================================================== 
   v28 · Horatos logo lockup + Horo reader guides
   ========================================================================== */

.industry__closing--horo .industry__closing-strong {
  display: block !important;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: normal;
  text-wrap: balance;
}

.industry__closing--horo .industry__closing-text {
  overflow: visible;
}

.about-meaning__mark {
  align-content: center;
  gap: 22px;
  padding: clamp(22px, 3vw, 36px);
}

.about-meaning__logo-card {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: min(100%, 360px);
  padding: 18px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(10,10,10,0.07);
  box-shadow: 0 28px 70px -56px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.96);
}

.about-meaning__logo {
  display: block;
  width: min(100%, 320px);
  height: auto;
  object-fit: contain;
}

.about-meaning__constellation {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  color: var(--teal);
  background: radial-gradient(circle, rgba(0,178,169,0.16), rgba(0,178,169,0.04) 58%, transparent 70%);
}

.about-meaning__constellation span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
  opacity: 0.44;
  box-shadow: 0 0 18px rgba(0,178,169,0.38);
}

.about-meaning__constellation span:nth-child(2) { top: 16px; right: 30px; }
.about-meaning__constellation span:nth-child(3) { left: 22px; bottom: 28px; }
.about-meaning__constellation span:nth-child(4) { right: 18px; bottom: 22px; }

.section--horo-reader-index {
  padding-top: 0;
  padding-bottom: clamp(32px, 5vw, 64px);
}

.section--insights-list {
  padding-top: 0;
}

.horo-reader {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 4vw, 46px);
  padding: clamp(22px, 3.5vw, 42px);
  border-radius: clamp(22px, 3vw, 34px);
  border: 1px solid rgba(0,178,169,0.16);
  background:
    radial-gradient(circle at 12% 22%, rgba(0,178,169,0.13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(247,247,247,0.82));
  box-shadow: 0 36px 100px -82px rgba(0,80,76,0.42), inset 0 1px 0 rgba(255,255,255,0.88);
  overflow: hidden;
}

.horo-reader::before {
  content: '';
  position: absolute;
  inset: 14px;
  border-radius: inherit;
  border: 1px dashed rgba(0,178,169,0.12);
  pointer-events: none;
}

.horo-reader__art,
.horo-reader__bubble {
  position: relative;
  z-index: 1;
}

.horo-reader__art {
  display: grid;
  place-items: center;
  min-height: 160px;
}

.horo-reader__art::before {
  content: '';
  position: absolute;
  width: min(92%, 230px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,178,169,0.2), transparent 66%);
  filter: blur(8px);
}

.horo-reader__art img {
  position: relative;
  z-index: 1;
  display: block;
  width: min(100%, 210px);
  height: auto;
  filter: drop-shadow(0 24px 30px rgba(0,80,76,0.16));
}

.horo-reader__bubble {
  padding: clamp(18px, 2.6vw, 30px);
  border-radius: 24px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(10,10,10,0.06);
}

.horo-reader__label {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(0,178,169,0.09);
  color: var(--teal);
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
}

.horo-reader__bubble h2 {
  margin: 0 0 10px;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.horo-reader__bubble p {
  margin: 0;
  color: #596273;
  font-size: clamp(15px, 1.18vw, 17px);
  line-height: 1.65;
}

.article__horo-guide {
  padding-top: 44px;
}

.horo-reader--article {
  grid-template-columns: minmax(120px, 0.26fr) minmax(0, 1fr);
  margin-bottom: 6px;
}

.horo-reader--article .horo-reader__art {
  min-height: 132px;
}

.horo-reader--article .horo-reader__art img {
  width: min(100%, 165px);
}

@media (max-width: 760px) {
  .horo-reader {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .horo-reader__art {
    min-height: 132px;
  }

  .horo-reader__art img {
    width: min(62vw, 180px);
  }

  .horo-reader__bubble {
    padding: 18px;
  }

  .about-meaning__logo-card {
    width: min(100%, 310px);
    padding: 15px 18px;
  }

  .about-meaning__constellation {
    width: 112px;
    height: 112px;
  }
}

/* v29 · Final CTA lede readability fix */
.page--home .final-cta--cinematic .final-cta__lede {
  color: #0A0A0A !important;
  text-shadow: none !important;
}

.page--home .final-cta--cinematic .final-cta__lede.reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}