:root {
  --navy: #233644;
  --navy-deep: #0f1e28;
  --teal: #078396;
  --teal-dark: #056281;
  --teal-light: #53B1CD;
  --teal-pale: #e4f2f5;
  --slate: #CAD9DD;
  --near-black: #171B1B;
  --off-white: #f4f7f6;
  --white: #ffffff;
  --mid: #5a6a72;
  --border: #dde6e8;
  --gold: #c9a84c;
  --gold-light: #e8c97a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
}

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--off-white);
  color: var(--near-black);
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

img, iframe { max-width: 100%; }
footer, .page-offset, .section, .section-sm, .page-hero,
.hero, .services-strip, .cta-section { max-width: 100%; overflow-x: clip; }
.container, .footer-top, .hero-left, .hero-right, .contact-info,
.booking-embed, .service-block, .pricing-card, .support-card,
.case-card-full, .mini-offer-card, .credential, .value-card,
.pain-card, .proof-stat, .ms-logo-card { min-width: 0; }
.footer-col a, .contact-method-text, .contact-method-text p,
.credential-text, .credential-text p, .case-card-body p,
.pricing-card p, .support-card p, .legal-content {
  overflow-wrap: anywhere;
  word-break: normal;
}
body.nav-lock { overflow: hidden; }
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 1100;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--gold-light));
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left;
  box-shadow: 0 0 18px rgba(83,177,205,0.35);
  pointer-events: none;
}
.scroll-progress::after {
  content: ''; position: absolute; right: -8px; top: 50%;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--gold-light);
  transform: translateY(-50%) scale(calc(0.45 + var(--scroll-progress, 0) * 0.55));
  box-shadow: 0 0 22px rgba(232,201,122,0.8), 0 0 36px rgba(83,177,205,0.4);
}

/* ── MOTION SYSTEM ── */
@keyframes glowDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50% { transform: translate3d(26px, -18px, 0) scale(1.08); opacity: 1; }
}

@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 50px 50px, 50px 50px; }
}

@keyframes processFlow {
  from { transform: translateX(-120%); }
  to { transform: translateX(420%); }
}

@keyframes cardScan {
  from { transform: translateX(-120%); }
  to { transform: translateX(220%); }
}

@keyframes burstSpark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--spark-x)), calc(-50% + var(--spark-y))) scale(0); }
}

.motion-burst {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  width: 1px; height: 1px;
  pointer-events: none;
}

.motion-burst span {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-light), var(--gold-light));
  box-shadow: 0 0 14px rgba(83,177,205,0.55);
  animation: burstSpark 0.72s cubic-bezier(0.15, 0.9, 0.2, 1) var(--spark-delay, 0ms) both;
}

.case-card-full,
.case-card-header h3,
.hero h1,
.page-hero h1,
h2.display,
.service-block h3,
.pricing-card h3 {
  position: relative;
}

.mouse-aura {
  position: fixed; left: 0; top: 0; z-index: 900;
  width: 360px; height: 360px; border-radius: 50%;
  transform: translate3d(calc(var(--aura-x, 50vw) - 50%), calc(var(--aura-y, 50vh) - 50%), 0);
  background:
    radial-gradient(circle, rgba(83,177,205,0.18), rgba(83,177,205,0.08) 34%, transparent 68%),
    radial-gradient(circle at 64% 38%, rgba(232,201,122,0.16), transparent 30%);
  mix-blend-mode: multiply;
  opacity: 0;
  filter: blur(2px);
  pointer-events: none;
  transition: opacity 0.25s ease, width 0.22s ease, height 0.22s ease, filter 0.22s ease;
}

.mouse-aura.is-active { opacity: 1; }
.mouse-aura.is-over-target {
  width: 460px; height: 460px;
  filter: blur(0);
}

.scroll-fade {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(5px);
  transition:
    opacity 0.72s cubic-bezier(0.2, 0.75, 0.18, 1),
    transform 0.72s cubic-bezier(0.2, 0.75, 0.18, 1),
    filter 0.72s cubic-bezier(0.2, 0.75, 0.18, 1);
  transition-delay: var(--fade-delay, 0ms);
}

.scroll-fade.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: 0.001ms !important;
}

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

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(15,30,40,0.97);
  border-bottom: 1px solid rgba(83,177,205,0.12);
  padding: 0 4rem;
  display: flex; align-items: center; height: 72px;
  max-width: 100%;
  overflow: visible;
  transition: background 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
nav.nav-scrolled {
  background: rgba(15,30,40,0.9);
  border-bottom-color: rgba(83,177,205,0.24);
  box-shadow: 0 14px 40px rgba(15,30,40,0.22);
}
.nav-logo {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; margin-right: auto;
  min-width: 0;
}
.nav-logo-mark {
  height: 46px; width: auto; flex-shrink: 0;
  transition: transform 0.25s ease, filter 0.25s ease;
}
.nav-logo:hover .nav-logo-mark { transform: rotate(-3deg) scale(1.04); filter: drop-shadow(0 0 12px rgba(83,177,205,0.35)); }
.nav-logo-text {
  font-family: 'DM Serif Display', serif;
  color: var(--white);
  font-size: 1.38rem;
  line-height: 1;
  white-space: nowrap;
}
.nav-logo-text small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.64rem;
  color: var(--teal-light);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 0.12rem;
}
.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
  cursor: pointer;
}
.nav-toggle span {
  width: 19px; height: 2px;
  background: white; border-radius: 100px;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-links {
  display: flex; align-items: center; gap: 0.25rem; list-style: none;
}
.nav-links a {
  text-decoration: none; color: rgba(255,255,255,0.65);
  font-size: 0.83rem; padding: 0.5rem 0.9rem; border-radius: 6px;
  transition: all 0.2s; letter-spacing: 0.02em;
  display: flex; align-items: center; gap: 0.4rem;
}
.nav-links a:hover { color: var(--white); background: rgba(255,255,255,0.06); }
.nav-links .has-dropdown { position: relative; }
.nav-links .has-dropdown:hover .dropdown { display: block; }
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--navy-deep); border: 1px solid rgba(83,177,205,0.15);
  border-radius: 10px; padding: 0.5rem; min-width: 220px;
  margin-top: 0.5rem; box-shadow: 0 16px 40px rgba(0,0,0,0.3);
}
.dropdown a {
  display: block; padding: 0.65rem 0.9rem; border-radius: 6px;
  color: rgba(255,255,255,0.7) !important; font-size: 0.82rem;
}
.dropdown a:hover { background: rgba(83,177,205,0.1) !important; color: white !important; }
.dropdown-label {
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--teal-light); padding: 0.5rem 0.9rem 0.25rem;
  font-weight: 600;
}
.nav-cta {
  background: var(--teal) !important; color: white !important;
  padding: 0.55rem 1.3rem !important; border-radius: 6px !important;
  font-weight: 600 !important; margin-left: 0.75rem;
  box-shadow: 0 2px 12px rgba(7,131,150,0.35);
  transition: all 0.2s !important;
}
.nav-cta:hover { background: var(--teal-dark) !important; transform: translateY(-1px) !important; }

/* ── PAGE OFFSET ── */
.page-offset { padding-top: 72px; min-height: 100vh; }

/* ── SECTION PRIMITIVES ── */
.section { padding: 6rem 4rem; }
.section-sm { padding: 4rem 4rem; }
.page-offset > .page-hero + .section { padding-top: 3rem; }
.page-offset > .page-hero + .section .container > :first-child { margin-top: 0; }
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
.section-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--teal); font-weight: 600; margin-bottom: 1rem;
}
.section-tag::before { content: ''; width: 20px; height: 2px; background: var(--teal); }
h2.display {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  line-height: 1.12; color: var(--navy);
  margin-bottom: 1.2rem;
}
h2.display em { font-style: italic; color: var(--teal); }
h2.display-light { color: var(--white); }
h2.display-light em { color: var(--teal-light); }
.lead {
  font-size: 1rem; color: var(--mid); line-height: 1.75;
  max-width: 580px;
}
.lead-light { color: rgba(255,255,255,0.6); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  text-decoration: none; border-radius: 6px; font-size: 0.88rem;
  font-weight: 600; transition: all 0.2s; letter-spacing: 0.02em;
  font-family: 'DM Sans', sans-serif; cursor: pointer; border: none;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn-primary { background: var(--teal); color: white; padding: 0.85rem 1.8rem; box-shadow: 0 2px 12px rgba(7,131,150,0.3); }
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(7,131,150,0.28); }
.btn-secondary { background: var(--navy); color: white; padding: 0.85rem 1.8rem; }
.btn-secondary:hover { background: var(--navy-deep); transform: translateY(-2px); }
.btn-outline { border: 1.5px solid var(--border); color: var(--navy); padding: 0.8rem 1.8rem; background: white; }
.btn-outline:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(7,131,150,0.1); }
.btn-ghost-light { border: 1px solid rgba(255,255,255,0.25); color: white; padding: 0.85rem 1.8rem; }
.btn-ghost-light:hover { border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); transform: translateY(-2px); }

/* ── PAGE HERO ── */
.page-hero {
  background: var(--navy-deep); padding: 4.5rem 4rem 4rem;
  height: 400px;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(83,177,205,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,177,205,0.05) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: gridDrift 18s linear infinite;
}
.page-hero::after {
  content: ''; position: absolute; inset: auto -10% -45% 35%;
  height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(83,177,205,0.16), transparent 68%);
  pointer-events: none;
  animation: glowDrift 9s ease-in-out infinite;
}
.page-hero-inner { position: relative; z-index: 1; max-width: 680px; }
.page-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  color: white; line-height: 1.1; margin-bottom: 1rem;
}
.page-hero h1 em { font-style: italic; color: var(--teal-light); }
.page-hero p { color: rgba(255,255,255,0.6); font-size: 1rem; line-height: 1.7; max-width: 560px; }

.breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.4);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--teal-light); text-decoration: none; }
.breadcrumb span { opacity: 0.4; }

/* ── CTA SECTION ── */
.cta-section {
  background: linear-gradient(135deg, var(--teal-dark), var(--navy-deep));
  text-align: center; position: relative; overflow: hidden;
}
.cta-section::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  animation: gridDrift 16s linear infinite;
}
.cta-section::after {
  content: ''; position: absolute; inset: 10% auto auto 50%;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(83,177,205,0.14), transparent 66%);
  translate: -50% 0;
  animation: glowDrift 8s ease-in-out infinite reverse;
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 1; max-width: 620px; margin: 0 auto; }
.cta-section h2 { color: white; margin-bottom: 1rem; }
.cta-section p { color: rgba(255,255,255,0.6); font-size: 1rem; line-height: 1.7; margin-bottom: 2.5rem; }
.cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ── */
footer {
  background: var(--navy-deep);
  padding: 4rem 4rem 2rem;
}
.footer-top {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 3rem;
  margin-bottom: 3rem; padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer-brand p { font-size: 0.82rem; color: rgba(255,255,255,0.4); line-height: 1.7; margin-top: 1rem; max-width: 260px; }
.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.footer-logo img { height: 42px; width: auto; flex-shrink: 0; }
.footer-logo-text {
  font-family: 'DM Serif Display', serif;
  color: var(--white);
  font-size: 1.05rem;
  line-height: 1.1;
}
.footer-logo-text small {
  display: block;
  font-family: 'DM Sans', sans-serif;
  color: var(--teal-light);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 0.12rem;
}
.footer-col h4 {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); font-weight: 600; margin-bottom: 1.25rem;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a {
  font-size: 0.83rem; color: rgba(255,255,255,0.55); text-decoration: none;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--teal-light); }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
}
.footer-bottom p { font-size: 0.75rem; color: rgba(255,255,255,0.3); }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { font-size: 0.75rem; color: rgba(255,255,255,0.3); text-decoration: none; }
.footer-legal a:hover { color: rgba(255,255,255,0.6); }
.ms-partner-badge { margin-top: 1rem; }
.ms-partner-badge img { height: 40px; width: auto; display: block; }

/* ══════════════════════════════════════════
   HOME PAGE
══════════════════════════════════════════ */

.scroll-morph-hero {
  height: 260vh;
  background: var(--navy-deep);
  position: relative;
  overflow: visible;
}
.scroll-morph-stage {
  position: sticky;
  top: 72px;
  height: calc(100vh - 72px);
  min-height: 680px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(83,177,205,0.13), transparent 31%),
    radial-gradient(circle at 82% 18%, rgba(201,168,76,0.08), transparent 28%),
    linear-gradient(135deg, #0f1e28, #182b38 58%, #0b1821);
}
.scroll-morph-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(83,177,205,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,177,205,0.05) 1px, transparent 1px);
  background-size: 54px 54px;
  transform: translateY(var(--morph-grid-y, 0px));
}
.scroll-morph-copy {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  z-index: 3;
  width: min(760px, calc(100% - 2rem));
  text-align: center;
  padding: clamp(1.35rem, 3vw, 2.4rem) clamp(1.15rem, 4vw, 3.2rem);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,calc(0.26 * var(--morph-copy-glass, 0))), rgba(255,255,255,calc(0.045 * var(--morph-copy-glass, 0)))),
    rgba(15,30,40,calc(0.075 * var(--morph-copy-glass, 0)));
  border: 1px solid rgba(255,255,255,calc(0.42 * var(--morph-copy-glass, 0)));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,calc(0.58 * var(--morph-copy-glass, 0))),
    inset 1px 0 0 rgba(255,255,255,calc(0.16 * var(--morph-copy-glass, 0))),
    inset 0 -1px 0 rgba(255,255,255,calc(0.12 * var(--morph-copy-glass, 0))),
    0 28px 70px rgba(0,0,0,calc(0.22 * var(--morph-copy-glass, 0))),
    0 0 28px rgba(255,255,255,calc(0.08 * var(--morph-copy-glass, 0)));
  backdrop-filter: blur(calc(30px * var(--morph-copy-glass, 0))) saturate(calc(1 + (0.7 * var(--morph-copy-glass, 0))));
  -webkit-backdrop-filter: blur(calc(30px * var(--morph-copy-glass, 0))) saturate(calc(1 + (0.7 * var(--morph-copy-glass, 0))));
  transform: translateY(var(--morph-copy-y, 0px));
  opacity: var(--morph-copy-opacity, 1);
  pointer-events: none;
  transition: background 0.08s linear, border-color 0.08s linear, box-shadow 0.08s linear, backdrop-filter 0.08s linear;
}
.scroll-morph-copy::before,
.scroll-morph-copy::after {
  content: '';
  position: absolute;
  pointer-events: none;
  opacity: var(--morph-copy-glass, 0);
}
.scroll-morph-copy::before {
  inset: 1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(circle at 20% 12%, rgba(255,255,255,0.44), transparent 28%),
    radial-gradient(circle at 82% 0%, rgba(83,177,205,0.22), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 46%, rgba(255,255,255,0.08));
}
.scroll-morph-copy::after {
  top: -45%;
  left: -18%;
  z-index: 0;
  width: 44%;
  height: 190%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.42), rgba(255,255,255,0.08), transparent);
  transform: translateX(calc(var(--morph-copy-glass, 0) * 220%)) rotate(18deg);
  filter: blur(1px);
}
.scroll-morph-copy .hero-eyebrow {
  margin-bottom: 1.2rem;
  color: var(--teal-light);
  background: rgba(83,177,205,0.12);
}
.scroll-morph-copy h1 {
  position: relative;
  z-index: 1;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.8rem, 6.4vw, 6.1rem);
  line-height: 1;
  color: white;
  margin-bottom: 1.2rem;
  text-shadow: 0 18px 48px rgba(0,0,0,0.28);
}
.scroll-morph-copy .brand-word {
  color: #078396;
}
.scroll-morph-copy p {
  max-width: 590px;
  margin: 0 auto;
  color: rgba(255,255,255,0.66);
  line-height: 1.7;
  font-size: 1rem;
}
.morph-orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.morph-core,
.morph-icon {
  position: absolute;
  left: 50%;
  top: 50%;
}
.morph-core {
  width: 156px;
  height: 156px;
  transform: translate(-50%, -50%) scale(var(--morph-core-scale, 0.94));
  opacity: var(--morph-core-opacity, 0);
  z-index: 2;
  overflow: hidden;
  border-radius: 50%;
}
.morph-core-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(83,177,205,0.32);
  box-shadow: 0 0 38px rgba(83,177,205,0.18);
  opacity: var(--morph-ring-opacity, 0.68);
}
.morph-core-icon,
.morph-core-logo {
  position: absolute;
  display: grid;
  place-items: center;
  left: 50%;
  top: 50%;
}
.morph-core-logo {
  width: 118px;
  height: 118px;
  transform: translate(-50%, -50%);
}
.morph-core-logo::after {
  content: '';
  position: absolute;
  inset: -32%;
  background: linear-gradient(110deg, transparent 28%, rgba(255,255,255,0) 40%, rgba(255,255,255,0.72) 50%, rgba(83,177,205,0.28) 58%, transparent 72%);
  transform: translateX(-135%) rotate(8deg);
  opacity: 0;
}
.morph-core.is-active .morph-core-logo::after {
  animation: logoGlisten 3.8s ease-in-out infinite;
  animation-delay: 0.45s;
}
.morph-core-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 15px 24px rgba(0,0,0,0.32));
}
.morph-core-icon {
  width: 86px;
  height: 86px;
}
.morph-core-icon img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.32));
}
.morph-core-ms {
  transform: translate(-50%, -50%) rotate(0deg) translateX(34px) rotate(0deg);
}
.morph-core-pp {
  transform: translate(-50%, -50%) rotate(180deg) translateX(34px) rotate(-180deg);
}
.morph-core.is-active .morph-core-ms {
  animation: morphCoreOrbitMs 8s linear infinite;
}
.morph-core.is-active .morph-core-pp {
  animation: morphCoreOrbitPp 8s linear infinite;
}
@keyframes morphCoreOrbitMs {
  from { transform: translate(-50%, -50%) rotate(0deg) translateX(34px) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg) translateX(34px) rotate(-360deg); }
}
@keyframes morphCoreOrbitPp {
  from { transform: translate(-50%, -50%) rotate(180deg) translateX(34px) rotate(-180deg); }
  to { transform: translate(-50%, -50%) rotate(540deg) translateX(34px) rotate(-540deg); }
}
@keyframes logoGlisten {
  0%, 35% { opacity: 0; transform: translateX(-135%) rotate(8deg); }
  48% { opacity: 0.95; }
  68%, 100% { opacity: 0; transform: translateX(135%) rotate(8deg); }
}
.morph-icon {
  --size: 58px;
  --tile-size: calc(var(--size) + 22px);
  --morph-x: 0px;
  --morph-y: 0px;
  --morph-scale: 0.2;
  --morph-opacity: 0;
  --morph-rotate: 0deg;
  display: grid;
  place-items: center;
  width: var(--tile-size);
  height: var(--tile-size);
  padding: 11px;
  border-radius: 22px;
  position: absolute;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,255,255,0.05)),
    rgba(15,30,40,0.035);
  border: 1px solid rgba(255,255,255,0.58);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 1px 0 0 rgba(255,255,255,0.22),
    inset 0 -1px 0 rgba(255,255,255,0.18),
    0 18px 42px rgba(0,0,0,0.24),
    0 0 32px rgba(255,255,255,0.12);
  backdrop-filter: blur(34px) saturate(2);
  -webkit-backdrop-filter: blur(34px) saturate(2);
  transform:
    translate3d(calc(-50% + var(--morph-x)), calc(-50% + var(--morph-y)), 0)
    rotate(var(--morph-rotate))
    scale(var(--morph-scale));
  opacity: var(--morph-opacity);
  transition: transform 0.08s linear, opacity 0.08s linear;
}
.morph-icon::before {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 24% 16%, rgba(255,255,255,0.78), transparent 28%),
    radial-gradient(circle at 82% 8%, rgba(83,177,205,0.26), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.2), transparent 48%, rgba(255,255,255,0.1));
  opacity: 0.82;
}
.morph-icon::after {
  content: '';
  position: absolute;
  top: -42%;
  left: -32%;
  z-index: 1;
  width: 42%;
  height: 185%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.62), rgba(255,255,255,0.12), transparent);
  transform: rotate(22deg);
  filter: blur(0.5px);
  opacity: 0.9;
}
.morph-icon img {
  position: relative;
  z-index: 2;
  width: var(--size);
  height: var(--size);
  object-fit: contain;
  filter: drop-shadow(0 9px 14px rgba(0,0,0,0.28));
}
.morph-icon-lg { --size: 78px; }
.morph-icon-md { --size: 68px; }
.morph-icon-sm { --size: 58px; }
.morph-icon-xs { --size: 50px; }
.scroll-morph-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  z-index: 4;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  opacity: var(--morph-cue-opacity, 1);
}
.scroll-morph-cue::after {
  content: '';
  display: block;
  width: 1px;
  height: 36px;
  margin: 0.7rem auto 0;
  background: linear-gradient(transparent, var(--teal-light), transparent);
}

.hero {
  min-height: calc(100vh - 72px);
  background: var(--navy-deep);
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 4rem;
  padding: 4rem 4rem 6rem;
  --pointer-x: 0;
  --pointer-y: 0;
}
#spreadsheets-hero { scroll-margin-top: 72px; }
.hero-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(83,177,205,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(83,177,205,0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: translate3d(calc(var(--pointer-x) * -16px), calc(var(--pointer-y) * -16px), 0);
  animation: gridDrift 24s linear infinite;
  transition: transform 0.18s ease-out;
}
.hero-glow-1 {
  position: absolute; right: 5%; top: 10%;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(7,131,150,0.18) 0%, transparent 65%);
  pointer-events: none;
  translate: calc(var(--pointer-x) * 40px) calc(var(--pointer-y) * 40px);
  animation: glowDrift 8s ease-in-out infinite;
}
.hero-glow-2 {
  position: absolute; left: -10%; bottom: -10%;
  width: 500px; height: 500px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 65%);
  pointer-events: none;
  translate: calc(var(--pointer-x) * -34px) calc(var(--pointer-y) * -34px);
  animation: glowDrift 10s ease-in-out infinite reverse;
}
.hero-left { position: relative; z-index: 2; }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(83,177,205,0.12); border: 1px solid rgba(83,177,205,0.25);
  color: var(--teal-light); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.35rem 0.9rem; border-radius: 100px;
  margin-bottom: 1.75rem;
}
.hero-eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--teal-light); }
.hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  color: white; line-height: 1.08; margin-bottom: 1.5rem;
}
.hero h1 em { font-style: italic; color: var(--teal-light); }
.hero-sub {
  font-size: 1.05rem; color: rgba(255,255,255,0.6);
  line-height: 1.75; max-width: 500px; margin-bottom: 2.5rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3rem; }
.hero-social-proof {
  display: flex; align-items: center; gap: 1.5rem;
  padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.08);
  flex-wrap: wrap;
}
.proof-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; color: rgba(255,255,255,0.45);
}
.proof-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--teal); }

.hero-right {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; gap: 1rem;
  perspective: 1000px;
  transform: translate3d(calc(var(--pointer-x) * -14px), calc(var(--pointer-y) * -14px), 0);
  transition: transform 0.18s ease-out;
}
.hero-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(83,177,205,0.15);
  border-radius: 14px; padding: 1.5rem;
  box-shadow: 0 24px 60px rgba(0,0,0,0.16);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}
.hero-card::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(83,177,205,0.13), transparent);
  pointer-events: none;
  animation: cardScan 5.6s ease-in-out infinite;
}
.hero-card:hover { border-color: rgba(83,177,205,0.36); background: rgba(255,255,255,0.06); box-shadow: 0 30px 70px rgba(0,0,0,0.24); }
.hero-card-header {
  display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem;
}
.hero-card-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.hero-card-title { font-size: 0.78rem; color: rgba(255,255,255,0.5); letter-spacing: 0.06em; text-transform: uppercase; }
.stat-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.stat { text-align: center; }
.stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 1.8rem; color: white; display: block;
}
.stat-label { font-size: 0.72rem; color: rgba(255,255,255,0.4); margin-top: 0.2rem; }
.problem-list { display: flex; flex-direction: column; gap: 0.5rem; }
.problem-item {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.82rem; color: rgba(255,255,255,0.65);
  padding: 0.6rem 0.75rem; background: rgba(255,255,255,0.03);
  border-radius: 8px; border: 1px solid rgba(255,255,255,0.06);
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
.problem-item:hover { transform: translateX(6px); border-color: rgba(83,177,205,0.24); background: rgba(83,177,205,0.08); }
.problem-icon { font-size: 0.9rem; flex-shrink: 0; }
.solution-tag {
  display: inline-block; margin-left: auto;
  background: rgba(7,131,150,0.2); color: var(--teal-light);
  font-size: 0.65rem; padding: 0.2rem 0.55rem; border-radius: 100px;
  letter-spacing: 0.06em; text-transform: uppercase;
}

/* Services strip */
.services-strip {
  background: white; padding: 2rem 4rem;
  border-bottom: 1px solid var(--border);
}
.strip-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.strip-label { font-size: 0.75rem; color: var(--mid); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.strip-divider { width: 1px; height: 24px; background: var(--border); }
.strip-items { display: flex; gap: 1rem; flex-wrap: wrap; }
.strip-item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.82rem; color: var(--navy); font-weight: 500;
  padding: 0.4rem 0.9rem; border-radius: 100px;
  background: var(--teal-pale); border: 1px solid rgba(7,131,150,0.15);
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.strip-item:hover { transform: translateY(-3px); background: white; border-color: var(--teal-light); box-shadow: 0 10px 24px rgba(7,131,150,0.1); }

/* What we build section */
.build-section { background: white; }
.build-pills { display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.75rem; margin-top: 2rem; }

/* AI readiness preview */
.ai-ready-section {
  background:
    linear-gradient(135deg, rgba(83,177,205,0.12), transparent 34%),
    var(--off-white);
}
.ai-ready-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 4rem;
  align-items: center;
}
.ai-ready-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.ai-flow-panel {
  position: relative;
  display: grid;
  gap: 1rem;
}
.ai-flow-panel::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 28px;
  bottom: 28px;
  width: 1px;
  background: linear-gradient(var(--teal-light), var(--teal), var(--gold-light));
}
.ai-flow-card {
  position: relative;
  margin-left: 2rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255,255,255,0.86);
  box-shadow: 0 16px 38px rgba(7,131,150,0.08);
}
.ai-flow-card span {
  position: absolute;
  left: -2.75rem;
  top: 1.35rem;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--teal-light);
  font-family: 'DM Serif Display', serif;
  font-size: 1rem;
  border: 4px solid var(--off-white);
}
.ai-flow-card h3 {
  color: var(--navy);
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}
.ai-flow-card p {
  color: var(--mid);
  font-size: 0.84rem;
  line-height: 1.6;
}

/* Pain section */
.pain-section { background: var(--off-white); }
.pain-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem;
  margin-top: 3rem;
}
.pain-grid-2 {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 1.5rem;
  margin-top: 3rem;
}
.pain-card {
  background: white; border-radius: 14px; padding: 2rem;
  border: 1px solid var(--border); transition: all 0.25s;
  position: relative; overflow: hidden;
}
.pain-card::before,
.pricing-card::before,
.case-card-full::before,
.value-card::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(83,177,205,0.12), transparent 42%);
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.pain-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-light));
  transform: scaleX(0); transition: transform 0.3s; transform-origin: left;
}
.pain-card:hover { box-shadow: 0 18px 42px rgba(7,131,150,0.12); transform: translateY(-6px); }
.pain-card:hover::before,
.pricing-card:hover::before,
.case-card-full:hover::before,
.value-card:hover::before { opacity: 1; }
.pain-card:hover::after { transform: scaleX(1); }
.pain-number {
  font-family: 'DM Serif Display', serif;
  font-size: 3rem; color: #5a9fb5; line-height: 1;
  margin-bottom: 1rem;
}
.pain-card h3 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.pain-card p { font-size: 0.85rem; color: var(--mid); line-height: 1.65; }

/* Offer preview */
.offer-preview { background: white; }
.offer-preview-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: center;
}
.offer-preview-right { display: flex; flex-direction: column; gap: 1rem; }
.mini-offer-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 1.4rem;
  transition: all 0.25s; cursor: default;
  display: flex; gap: 1rem; align-items: flex-start;
  position: relative; overflow: hidden;
}
.mini-offer-card::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: 3px; background: linear-gradient(var(--teal), var(--teal-light));
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.28s ease;
}
.mini-offer-card:hover { border-color: var(--teal-light); transform: translateX(8px); box-shadow: 0 14px 32px rgba(7,131,150,0.1); }
.mini-offer-card:hover::after { transform: scaleY(1); }
.mini-offer-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--teal-pale); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0; overflow: hidden;
  transition: transform 0.25s ease, background 0.25s ease;
}
.mini-offer-card:hover .mini-offer-icon { transform: rotate(-4deg) scale(1.08); background: white; }
.mini-offer-icon img { width: 24px; height: 24px; object-fit: contain; }
.mini-offer-card h3 { font-size: 0.9rem; font-weight: 600; color: var(--navy); margin-bottom: 0.3rem; }
.mini-offer-card p { font-size: 0.8rem; color: var(--mid); line-height: 1.55; }
.price-badge {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  background: var(--teal-pale); border-left: 3px solid var(--teal);
  padding: 0.9rem 1.4rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0;
}
.price-from { font-size: 0.78rem; color: var(--mid); }
.price-val { font-family: 'DM Serif Display', serif; font-size: 2rem; color: var(--navy); }
.price-note { font-size: 0.75rem; color: var(--mid); }

/* Social proof */
.proof-section { background: var(--navy); }
.proof-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 2rem; margin-top: 3rem; }
.proof-stat { text-align: center; }
.proof-stat-val {
  font-family: 'DM Serif Display', serif;
  font-size: 2.8rem; color: white; display: block; line-height: 1;
  margin-bottom: 0.5rem;
  transition: transform 0.25s ease, text-shadow 0.25s ease;
}
.proof-stat:hover .proof-stat-val { transform: translateY(-4px) scale(1.04); text-shadow: 0 0 24px rgba(83,177,205,0.28); }
.proof-stat-val span { color: var(--teal-light); }
.proof-stat-label { font-size: 0.82rem; color: rgba(255,255,255,0.5); line-height: 1.5; }

/* Process */
.process-section { background: var(--off-white); }
.process-steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  margin-top: 3.5rem; position: relative;
}
.process-line {
  position: absolute; top: 28px; left: 12%; right: 12%;
  height: 1px; background: linear-gradient(90deg, transparent, var(--teal-light), var(--teal), var(--teal-light), transparent);
  overflow: hidden;
}
.process-line::after {
  content: ''; position: absolute; top: -1px; bottom: -1px; left: 0;
  width: 30%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95), var(--teal-light), transparent);
  animation: processFlow 3.2s ease-in-out infinite;
}
.process-step { text-align: center; position: relative; min-width: 0; }
.step-bubble {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--teal); color: white;
  font-family: 'DM Serif Display', serif; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem;
  box-shadow: 0 0 0 8px var(--teal-pale);
  position: relative; z-index: 1;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.process-step:hover .step-bubble { transform: translateY(-5px) scale(1.06); box-shadow: 0 0 0 8px var(--teal-pale), 0 14px 28px rgba(7,131,150,0.18); }
.process-step h3 { font-size: 0.92rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.process-step p { font-size: 0.82rem; color: var(--mid); line-height: 1.6; }

/* ══════════════════════════════════════════
   SERVICES PAGE
══════════════════════════════════════════ */

.services-detail { background: white; }
.services-detail .service-block:first-child { padding-top: 0; }
.service-block {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 4rem;
  align-items: start; padding: 4rem 0;
  border-bottom: 1px solid var(--border);
}
.service-block:last-child { border-bottom: none; }
.service-block-left { position: sticky; top: 100px; }
.service-number {
  font-family: 'DM Serif Display', serif;
  font-size: 4rem; color: var(--teal-pale); line-height: 1;
  margin-bottom: 0.5rem;
}
.service-block h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.6rem; color: var(--navy); margin-bottom: 0.75rem;
}
.service-block, .support-section { scroll-margin-top: 90px; }
.service-block > .service-block-left > p { font-size: 0.9rem; color: var(--mid); line-height: 1.7; }
.service-tag {
  display: inline-block; background: var(--teal-pale); color: var(--teal-dark);
  font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.75rem; border-radius: 100px; margin-bottom: 1rem;
  font-weight: 600;
}
.service-features { display: flex; flex-direction: column; gap: 0.75rem; margin: 1.5rem 0; }
.feature-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.25rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--off-white);
  transition: all 0.2s;
}
.feature-item:hover { border-color: var(--teal-light); background: var(--teal-pale); transform: translateX(6px); box-shadow: 0 10px 24px rgba(7,131,150,0.08); }
.feature-check { color: var(--teal); font-size: 1rem; flex-shrink: 0; margin-top: 0.1rem; }
.feature-item h4 { font-size: 0.88rem; font-weight: 600; color: var(--navy); margin-bottom: 0.2rem; }
.feature-item p { font-size: 0.8rem; color: var(--mid); line-height: 1.55; }
.scope-box {
  background: var(--off-white); border-radius: 12px;
  padding: 1.5rem; border: 1px solid var(--border); margin-top: 1.5rem;
  transition: all 0.2s;
}
.scope-box:hover {
  border-color: var(--teal-light);
  background: var(--teal-pale);
  transform: translateX(6px);
  box-shadow: 0 10px 24px rgba(7,131,150,0.08);
}
.scope-box h4 {
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--mid); margin-bottom: 1rem; font-weight: 600;
}
.scope-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.scope-col h5 { font-size: 0.78rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.scope-item { font-size: 0.78rem; color: var(--mid); padding: 0.2rem 0; display: flex; gap: 0.5rem; }
.scope-yes::before { content: '✓'; color: var(--teal); font-weight: 700; }
.scope-no::before { content: '—'; color: var(--border); }

/* Pricing */
.pricing-section { background: var(--off-white); }
.support-section { background: white; }
.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-top: 3rem; }
.pricing-card {
  background: white; border-radius: 16px; padding: 2rem;
  border: 1px solid var(--border); transition: all 0.25s;
  position: relative; overflow: visible;
}
.pricing-card:hover { transform: translateY(-7px); box-shadow: 0 18px 46px rgba(7,131,150,0.12); border-color: rgba(7,131,150,0.24); }
.pricing-card.featured {
  background: var(--navy); border-color: var(--teal);
  box-shadow: 0 12px 40px rgba(7,131,150,0.2);
}
.pricing-card.featured h3 { color: white; }
.pricing-card.featured p { color: rgba(255,255,255,0.6); }
.pricing-card.featured .pricing-feature { color: rgba(255,255,255,0.75); }
.featured-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--teal); color: white; font-size: 0.68rem;
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 1rem; border-radius: 100px;
}
.pricing-card h3 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.pricing-card p { font-size: 0.82rem; color: var(--mid); margin-bottom: 1.5rem; line-height: 1.55; }
.pricing-price {
  font-family: 'DM Serif Display', serif;
  margin-bottom: 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.pricing-card.featured .pricing-price { border-color: rgba(255,255,255,0.1); }
.pricing-price-val { font-size: 2.2rem; color: var(--navy); }
.pricing-card.featured .pricing-price-val { color: white; }
.pricing-price-note { font-size: 0.78rem; color: var(--mid); font-family: 'DM Sans', sans-serif; }
.pricing-card.featured .pricing-price-note { color: rgba(255,255,255,0.5); }
.pricing-features { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 2rem; }
.pricing-feature {
  font-size: 0.82rem; color: var(--near-black);
  display: flex; gap: 0.6rem; align-items: flex-start;
}
.pricing-feature::before { content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0; }

.support-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
.support-card {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 1.5rem; align-items: center;
  background: var(--off-white); border: 1px solid var(--border);
  border-left: 4px solid var(--teal-light);
  border-radius: 12px; padding: 1.5rem;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.support-card:hover { transform: translateY(-4px); border-color: rgba(7,131,150,0.24); box-shadow: 0 16px 38px rgba(7,131,150,0.1); }
.support-card-featured {
  background: var(--teal-pale); border-color: rgba(7,131,150,0.25);
  border-left-color: var(--teal);
}
.support-card-top { grid-column: 1; grid-row: 1 / span 2; }
.support-card-top h3 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.35rem; }
.support-price {
  font-family: 'DM Serif Display', serif;
  font-size: 1.45rem; color: var(--teal-dark);
}
.support-card p { grid-column: 2; font-size: 0.82rem; color: var(--mid); line-height: 1.55; }
.support-features {
  grid-column: 2;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1rem;
}
.support-features div {
  font-size: 0.78rem; color: var(--near-black);
  display: flex; gap: 0.5rem; align-items: flex-start;
}
.support-features div::before { content: '✓'; color: var(--teal); font-weight: 700; flex-shrink: 0; }
.support-card .btn {
  margin-top: 1rem;
  justify-content: center;
  width: 150px;
  padding-left: 0.9rem;
  padding-right: 0.9rem;
  text-align: center;
}

/* ══════════════════════════════════════════
   AI ENABLEMENT PAGE
══════════════════════════════════════════ */

.ai-page-hero .case-detail-actions { margin-top: 2rem; }
.ai-intro-section,
.ai-help-section,
.ai-why-section { background: white; }
.ai-intro-grid,
.ai-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 4rem;
  align-items: start;
}
.ai-help-section { background: var(--off-white); }
.ai-service-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.ai-service-card {
  position: relative;
  overflow: hidden;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.45rem;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.ai-service-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), var(--teal-light), var(--gold-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s ease;
}
.ai-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(7,131,150,0.24);
  box-shadow: 0 18px 42px rgba(7,131,150,0.11);
}
.ai-service-card:hover::after { transform: scaleX(1); }
.ai-service-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--teal-pale);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}
.ai-service-icon img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}
.ai-service-card h3,
.ai-offer-card h3 {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.ai-service-card p,
.ai-offer-card p {
  color: var(--mid);
  font-size: 0.82rem;
  line-height: 1.65;
}
.ai-offers-section { background: white; }
.ai-offer-stack {
  display: grid;
  gap: 1rem;
  margin-top: 3rem;
}
.ai-offer-card {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 2rem;
  align-items: center;
  border: 1px solid var(--border);
  border-left: 4px solid var(--teal);
  border-radius: 12px;
  background: var(--off-white);
  padding: 1.5rem;
  scroll-margin-top: 96px;
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}
.ai-offer-card:hover {
  transform: translateY(-4px);
  border-color: rgba(7,131,150,0.28);
  box-shadow: 0 18px 42px rgba(7,131,150,0.1);
}
.ai-offer-main .btn { margin-top: 1.25rem; }
.ai-offer-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 1rem;
}
.ai-offer-features div {
  display: flex;
  gap: 0.5rem;
  color: var(--near-black);
  font-size: 0.82rem;
  line-height: 1.45;
}
.ai-offer-features div::before {
  content: '✓';
  color: var(--teal);
  font-weight: 700;
  flex-shrink: 0;
}
.ai-why-list {
  display: grid;
  gap: 0.85rem;
}

/* ══════════════════════════════════════════
   WORKSHOP SIGNUP PAGE
══════════════════════════════════════════ */

.workshop-page-hero {
  height: 440px;
}
.workshop-intro-section,
.workshop-agenda-section { background: white; }
.workshop-detail-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 3rem;
}
.workshop-detail-card p {
  min-height: 3.2rem;
}
.workshop-emoji-icon {
  font-size: 1.35rem;
  line-height: 1;
}
.workshop-agenda-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 3rem;
}
.workshop-agenda-grid .feature-check {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

/* ══════════════════════════════════════════
   CASE STUDIES PAGE
══════════════════════════════════════════ */

.cases-grid-full {
  display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem;
  margin-top: 3rem;
}
.case-list-section.scroll-fade,
.case-list-section .scroll-fade {
  opacity: 1;
  transform: none;
  filter: none;
}
.case-card-full {
  background: white; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border); transition: all 0.3s;
  position: relative;
}
.case-card-full:hover { box-shadow: 0 20px 52px rgba(7,131,150,0.14); transform: translateY(-7px); }
.case-card-header {
  background: var(--navy); padding: 2rem;
  position: relative; overflow: hidden;
}
.case-card-header::before {
  content: ''; position: absolute; right: -40px; top: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  background: rgba(7,131,150,0.15);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.case-card-full:hover .case-card-header::before { transform: scale(1.25); opacity: 0.85; }
.case-type {
  display: inline-block; font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.25rem 0.7rem; border-radius: 100px;
  margin-bottom: 1rem; font-weight: 600;
}
.case-type-dove365 { background: rgba(7,131,150,0.2); color: var(--teal-light); }
.case-type-role { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }
.case-type-community { background: rgba(201,168,76,0.15); color: var(--gold); }
.case-read-more {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
}
.case-card-header h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.35rem; color: white; margin-bottom: 0.4rem;
  position: relative; z-index: 1;
}
.case-sector { font-size: 0.78rem; color: rgba(255,255,255,0.4); letter-spacing: 0.06em; text-transform: uppercase; position: relative; z-index: 1; }
.case-card-body { padding: 2rem; }
.case-problem-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); font-weight: 600; margin-bottom: 0.5rem; }
.case-card-body p { font-size: 0.85rem; color: var(--mid); line-height: 1.7; margin-bottom: 1.5rem; }
.case-outcome-box {
  background: var(--teal-pale); border-left: 3px solid var(--teal);
  padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; margin-bottom: 1.5rem;
  font-size: 0.85rem; color: var(--teal-dark); line-height: 1.6;
}
.case-tech-row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tech-tag {
  background: var(--off-white); border: 1px solid var(--border);
  color: var(--mid); font-size: 0.72rem; padding: 0.25rem 0.65rem;
  border-radius: 100px; letter-spacing: 0.04em;
}
.case-attribution { font-size: 0.72rem; color: var(--mid); font-style: italic; margin-top: 1rem; opacity: 0.7; }

/* Case study detail pages */
.case-detail-hero {
  background: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, #1a3a4a 100%);
  color: var(--white);
  padding: 6rem 4rem 4.5rem;
  position: relative;
  overflow: hidden;
}
.case-detail-hero::before {
  content: '';
  position: absolute;
  inset: auto -120px -180px auto;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(83,177,205,0.18), transparent 68%);
  pointer-events: none;
}
.case-detail-hero .container { position: relative; z-index: 1; }
.case-breadcrumb {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
}
.case-breadcrumb a { color: rgba(255,255,255,0.58); text-decoration: none; }
.case-breadcrumb a:hover { color: var(--teal-light); }
.case-detail-hero h1 {
  max-width: 820px;
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 1.08;
  margin-bottom: 1.25rem;
}
.case-detail-hero h1 em { color: var(--teal-light); font-style: italic; }
.case-detail-hero p {
  max-width: 760px;
  color: rgba(255,255,255,0.66);
  font-size: 1.02rem;
  line-height: 1.75;
}
.case-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.5rem;
}
.case-meta-item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}
.case-meta-label {
  display: block;
  color: var(--teal-light);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.case-meta-value { color: var(--white); font-size: 0.9rem; font-weight: 500; }
.case-detail-section { background: var(--white); }
.case-detail-section.alt { background: var(--off-white); }
.case-detail-section.dark {
  background: linear-gradient(160deg, var(--navy-deep), var(--navy));
  color: var(--white);
}
.case-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 4rem;
  align-items: start;
}
.case-detail-layout > :first-child {
  position: sticky;
  top: 100px;
}
.case-detail-label {
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}
.case-detail-section.dark .case-detail-label { color: var(--teal-light); }
.case-detail-section h2 {
  font-family: 'DM Serif Display', serif;
  color: var(--navy);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
  margin-bottom: 1rem;
}
.case-detail-section.dark h2 { color: var(--white); }
.case-detail-copy p {
  color: var(--mid);
  font-size: 0.96rem;
  line-height: 1.8;
  margin-bottom: 1rem;
}
.case-detail-section.dark .case-detail-copy p { color: rgba(255,255,255,0.62); }
.case-point-list {
  display: grid;
  gap: 0.85rem;
}
.case-point {
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.1rem;
}
.case-point strong {
  display: block;
  color: var(--navy);
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}
.case-point span {
  color: var(--mid);
  font-size: 0.86rem;
  line-height: 1.6;
}
.case-solution-grid, .case-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2.25rem;
}
.case-solution-card, .case-outcome-card {
  border-radius: 8px;
  padding: 1.4rem;
  border: 1px solid var(--border);
  background: var(--white);
}
.case-detail-section.dark .case-solution-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
}
.case-solution-card h3, .case-outcome-card h3 {
  color: var(--navy);
  font-family: 'DM Serif Display', serif;
  font-size: 1.05rem;
  margin-bottom: 0.55rem;
}
.case-detail-section.dark .case-solution-card h3 { color: var(--white); }
.case-solution-card p, .case-outcome-card p {
  color: var(--mid);
  font-size: 0.84rem;
  line-height: 1.65;
}
.case-detail-section.dark .case-solution-card p { color: rgba(255,255,255,0.58); }
.case-note {
  margin-top: 2rem;
  border-left: 3px solid var(--teal);
  background: var(--teal-pale);
  color: var(--teal-dark);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  line-height: 1.65;
}
.case-detail-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

/* Legal pages */
.legal-section { background: white; }
.legal-content {
  max-width: 860px;
  color: var(--mid);
  font-size: 0.94rem;
  line-height: 1.8;
}
.legal-content h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.65rem;
  color: var(--navy);
  margin: 2.5rem 0 0.75rem;
}
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 {
  font-size: 0.95rem;
  color: var(--navy);
  margin: 1.5rem 0 0.5rem;
}
.legal-content p { margin-bottom: 1rem; }
.legal-content ul {
  margin: 0 0 1.25rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.legal-content a { color: var(--teal-dark); font-weight: 600; }
.legal-note {
  background: var(--off-white);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.25rem;
  margin-bottom: 2rem;
}

/* ══════════════════════════════════════════
   ABOUT PAGE
══════════════════════════════════════════ */

.about-intro { background: white; }
.about-grid { display: grid; grid-template-columns: 360px 1fr; gap: 3rem; align-items: start; }
.about-photo-placeholder {
  max-width: 360px;
}
.about-photo-placeholder img {
  width: 100%; height: auto; display: block;
  border-radius: 16px; border: 1px solid rgba(7,131,150,0.2);
}
.photo-label { font-size: 0.78rem; color: var(--teal-dark); text-align: center; }
.photo-icon { font-size: 3rem; opacity: 0.4; }
.about-content h2 { margin-bottom: 1.5rem; }
.about-content p { font-size: 0.92rem; color: var(--mid); line-height: 1.8; margin-bottom: 1.25rem; }
.credentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 2rem; }
.credential {
  display: flex; gap: 1rem; align-items: center;
  padding: 1rem 1.25rem; background: var(--off-white);
  border-radius: 10px; border: 1px solid var(--border);
  text-decoration: none; transition: all 0.2s;
}
.credential-link:hover { border-color: var(--teal); background: var(--teal-pale); transform: translateY(-3px); box-shadow: 0 12px 26px rgba(7,131,150,0.08); }
.credential-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.25rem; }
.credential-icon img { width: 28px; height: 28px; object-fit: contain; }
.credential-text h4 { font-size: 0.88rem; font-weight: 600; color: var(--navy); }
.credential-text p { font-size: 0.78rem; color: var(--mid); margin-bottom: 0; }

/* Values */
.values-section { background: var(--off-white); }
.values-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; margin-top: 3rem; }
.value-card {
  background: white; border-radius: 14px; padding: 2rem;
  border: 1px solid var(--border); text-align: center; transition: all 0.25s;
  position: relative; overflow: hidden;
}
.value-card:hover { border-color: var(--teal); box-shadow: 0 16px 38px rgba(7,131,150,0.12); transform: translateY(-6px); }
.value-letter {
  font-family: 'DM Serif Display', serif;
  font-size: 3.5rem; color: var(--teal); line-height: 1; margin-bottom: 0.75rem;
}
.value-card h3 { font-size: 1rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.value-card p { font-size: 0.82rem; color: var(--mid); line-height: 1.65; }

/* Microsoft stack */
.microsoft-section { background: white; }
.ms-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.ms-logos { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.ms-logo-card {
  border: 1px solid var(--border); border-radius: 12px; padding: 1.25rem;
  text-align: center; transition: all 0.2s;
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.ms-logo-card { position: relative; overflow: hidden; }
.ms-logo-card::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: linear-gradient(90deg, var(--teal), var(--teal-light));
  transform: scaleX(0); transition: transform 0.3s; transform-origin: left;
}
.ms-logo-card:hover { border-color: var(--teal-light); background: var(--teal-pale); transform: translateY(-6px) scale(1.02); box-shadow: 0 14px 28px rgba(7,131,150,0.14); }
.ms-logo-card:hover::after { transform: scaleX(1); }
.ms-logo-card img { width: 36px; height: 36px; object-fit: contain; transition: transform 0.24s ease; }
.ms-logo-card:hover img { transform: scale(1.12) rotate(-3deg); }
.ms-logo-name { font-size: 0.72rem; color: var(--mid); font-weight: 500; }

/* ══════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════ */

.contact-section { background: white; }
.contact-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; margin-bottom: 3rem; }
.booking-full-width { margin-top: 0; }
.contact-info h2 { margin-bottom: 1rem; }
.contact-info p { font-size: 0.92rem; color: var(--mid); line-height: 1.75; margin-bottom: 2rem; }
.contact-methods { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; }
.contact-method {
  display: flex; flex-direction: row; gap: 1rem; align-items: center;
  padding: 1.25rem; border-radius: 10px;
  border: 1px solid var(--border); background: var(--off-white);
  text-decoration: none; transition: all 0.2s;
}
.contact-method:hover { border-color: var(--teal); background: var(--teal-pale); transform: translateX(6px); box-shadow: 0 12px 28px rgba(7,131,150,0.08); }
.contact-method-icon {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--teal-pale); display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; flex-shrink: 0;
  border: 1px solid rgba(7,131,150,0.2); overflow: hidden;
}
.contact-method-icon img { width: 22px; height: 22px; object-fit: contain; }
.contact-method-text h4 { font-size: 0.88rem; font-weight: 600; color: var(--navy); }
.contact-method-text p { font-size: 0.8rem; color: var(--mid); margin-bottom: 0; }
.contact-phone-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.55rem;
  align-items: baseline;
}
.contact-phone-line span + span::before {
  content: '•';
  margin-right: 0.55rem;
  color: var(--teal);
}
.booking-embed {
  background: var(--off-white); border-radius: 16px; padding: 2.5rem;
  border: 1px solid var(--border);
}
.booking-embed h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem; color: var(--navy); margin-bottom: 0.5rem;
}
.booking-embed p { font-size: 0.85rem; color: var(--mid); margin-bottom: 2rem; line-height: 1.6; }
.booking-placeholder {
  background: white; border-radius: 12px; border: 1px dashed var(--teal-light);
  padding: 3rem; text-align: center; color: var(--mid); font-size: 0.85rem;
}
.booking-placeholder strong { display: block; color: var(--teal-dark); font-size: 0.9rem; margin-bottom: 0.5rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.form-group label { font-size: 0.78rem; font-weight: 600; color: var(--navy); letter-spacing: 0.04em; }
.form-group input, .form-group textarea, .form-group select {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 0.75rem 1rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; color: var(--near-black);
  background: white; transition: border 0.2s; outline: none;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: var(--teal);
}
.form-group textarea { resize: vertical; min-height: 120px; }
.form-checkbox {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  margin-bottom: 1rem;
  color: var(--mid);
  font-size: 0.82rem;
  line-height: 1.55;
}
.form-checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 0.12rem;
  accent-color: var(--teal);
}
.form-checkbox a {
  color: var(--teal-dark);
  font-weight: 600;
  text-decoration: none;
}
.form-checkbox a:hover { color: var(--teal); }
.form-recaptcha { min-height: 78px; overflow-x: auto; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  nav { padding: 0 2rem; }
  .nav-logo-mark { height: 40px; }
  .nav-links a { padding: 0.5rem 0.65rem; }
  .hero, .contact-grid, .ms-grid { gap: 2.5rem; }
  .footer-top { grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 2rem; }
  .scroll-fade {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}

@media (max-width: 980px) {
  nav { padding: 0 1.5rem; }
  .nav-toggle { display: inline-flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    z-index: 1001;
    display: flex; flex-direction: column; align-items: stretch;
    gap: 0.4rem; padding: 0 1.5rem;
    width: 100vw; max-width: 100vw;
    max-height: 0;
    overflow: hidden;
    background: rgba(15,30,40,0.99);
    border-bottom: 1px solid rgba(83,177,205,0.16);
    box-shadow: 0 18px 40px rgba(0,0,0,0.26);
    opacity: 0;
    pointer-events: none;
    transition: max-height 0.24s ease, opacity 0.18s ease, padding 0.18s ease;
  }
  .nav-open .nav-links {
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px);
    overflow-y: auto;
    padding: 1rem 1.5rem 1.5rem;
    opacity: 1;
    pointer-events: auto;
  }
  .nav-links a {
    width: 100%; justify-content: flex-start;
    padding: 0.85rem 1rem; font-size: 0.95rem;
  }
  .nav-cta { margin-left: 0; justify-content: center !important; }
}

@media (max-width: 900px) {
  .scroll-morph-hero { height: 200vh; }
  .scroll-morph-stage {
    position: sticky;
    top: 64px;
    min-height: 0;
    height: calc(100vh - 64px);
    height: calc(100svh - 64px);
    padding: 3rem 1.5rem 2rem;
    align-items: center;
  }
  .scroll-morph-copy {
    align-self: center;
    margin-top: 0;
    width: min(680px, calc(100% - 1rem));
    border-radius: 22px;
  }
  .scroll-morph-copy h1 { font-size: clamp(2.55rem, 12.5vw, 4.35rem); }
  .morph-orbit {
    inset: 0;
    height: auto;
  }
  .morph-core {
    top: 48%;
    width: 126px;
    height: 126px;
  }
  .morph-core-icon {
    width: 70px;
    height: 70px;
  }
  .morph-core-logo {
    width: 96px;
    height: 96px;
  }
  .morph-core-icon img {
    width: 48px;
    height: 48px;
  }
  .morph-icon-lg { --size: 58px; }
  .morph-icon-md { --size: 52px; }
  .morph-icon-sm { --size: 46px; }
  .morph-icon-xs { --size: 40px; }
  .morph-icon {
    --tile-size: calc(var(--size) + 16px);
    padding: 8px;
    border-radius: 16px;
  }
  .scroll-morph-cue {
    display: block;
    bottom: 1.6rem;
    font-size: 0.68rem;
    opacity: calc(var(--morph-cue-opacity, 1) * 0.88);
  }
  .scroll-morph-cue::after {
    height: 24px;
    margin-top: 0.45rem;
  }
  .hero {
    min-height: auto; grid-template-columns: 1fr;
    padding: 4rem 1.5rem 4.5rem;
  }
  #spreadsheets-hero.scroll-fade {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  .hero-right {
    display: flex;
    gap: 0.85rem;
    transform: none;
    perspective: none;
  }
  .hero-card {
    padding: 1.15rem;
    border-radius: 12px;
  }
  .hero-card::before { display: none; }
  .stat-row { gap: 0.55rem; }
  .stat-val { font-size: 1.45rem; }
  .stat-label { font-size: 0.66rem; }
  .problem-item {
    padding: 0.55rem 0.65rem;
    gap: 0.55rem;
    font-size: 0.78rem;
  }
  .solution-tag { font-size: 0.58rem; padding: 0.16rem 0.42rem; }
  .hero h1 { font-size: clamp(2.35rem, 9vw, 3.6rem); }
  .hero-sub { max-width: 680px; }
  .section, .section-sm { padding: 4rem 1.5rem; }
  .case-detail-hero { padding-left: 1.5rem; padding-right: 1.5rem; }
  .page-offset > .page-hero + .section { padding-top: 2.5rem; }
  .page-hero { height: 380px; padding: 3.5rem 1.5rem 3.5rem; }
  .services-strip { padding: 1.5rem; }
  .strip-inner { align-items: flex-start; gap: 1rem; }
  .strip-divider { display: none; }
  .offer-preview-grid, .service-block, .about-grid,
  .contact-grid, .ms-grid, .ai-ready-grid, .ai-intro-grid,
  .ai-why-grid { grid-template-columns: 1fr; gap: 2rem; }
  .service-block { padding: 3rem 0; }
  .service-block-left { position: static; }
  .pain-grid, .proof-grid, .values-grid, .pricing-grid,
  .cases-grid-full { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-service-grid,
  .workshop-detail-grid,
  .workshop-agenda-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai-offer-card { grid-template-columns: 1fr; gap: 1.25rem; }
  .case-meta-grid, .case-solution-grid, .case-outcomes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-detail-layout { grid-template-columns: 1fr; gap: 2rem; }
  .case-detail-layout > :first-child { position: static; }
  .process-steps, .ms-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms-logo-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 1rem) / 2);
  }
  .process-line { display: none; }
  .scope-cols, .support-card, .support-features { grid-template-columns: 1fr; }
  .support-card-top, .support-card p, .support-features, .support-card .btn { grid-column: 1; grid-row: auto; }
  .support-card .btn { width: 100%; max-width: 220px; }
  .about-photo-placeholder { max-width: 320px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 2rem; }
  footer { padding: 3rem 1.5rem 2rem; }
}

@media (max-width: 640px) {
  body > * { max-width: 100%; }
  nav { height: 64px; padding: 0 1rem; }
  .page-offset { padding-top: 64px; }
  .nav-links {
    top: 100%;
    padding-right: 1rem;
    padding-left: 1rem;
  }
  .nav-open .nav-links {
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    padding-top: 0.8rem;
    padding-bottom: 1.25rem;
  }
  .nav-logo { gap: 0.65rem; }
  .nav-logo-mark { height: 36px; }
  .nav-logo-text { font-size: 1.12rem; }
  .nav-logo-text small { font-size: 0.54rem; letter-spacing: 0.08em; }
  .nav-toggle { width: 40px; height: 40px; }
  #spreadsheets-hero { scroll-margin-top: 64px; }
  .scroll-morph-hero { height: 205vh; }
  .scroll-morph-stage {
    min-height: 0;
    height: calc(100vh - 64px);
    height: calc(100svh - 64px);
    padding: 2.4rem 1rem 1.8rem;
  }
  .scroll-morph-copy h1 {
    font-size: clamp(2.08rem, 11vw, 3.2rem);
    line-height: 1.04;
  }
  .scroll-morph-copy {
    width: calc(100% - 0.6rem);
    padding: 1rem 0.85rem;
    border-radius: 18px;
    background:
      linear-gradient(145deg, rgba(255,255,255,calc(0.18 * var(--morph-copy-glass, 0))), rgba(255,255,255,calc(0.035 * var(--morph-copy-glass, 0)))),
      rgba(15,30,40,calc(0.08 * var(--morph-copy-glass, 0)));
  }
  .scroll-morph-copy p { font-size: 0.92rem; }
  .morph-orbit {
    inset: 0;
    height: auto;
  }
  .morph-core {
    top: 49%;
    width: 112px;
    height: 112px;
  }
  .morph-core-icon {
    width: 62px;
    height: 62px;
  }
  .morph-core-logo {
    width: 86px;
    height: 86px;
  }
  .morph-core-icon img {
    width: 42px;
    height: 42px;
  }
  .morph-icon-lg,
  .morph-icon-md,
  .morph-icon-sm,
  .morph-icon-xs { --size: 38px; }
  .morph-icon {
    --tile-size: calc(var(--size) + 12px);
    padding: 6px;
    border-radius: 14px;
  }
  .hero { padding: 3rem 1rem 3.5rem; }
  .hero-right { margin-top: -0.75rem; }
  .hero-card-title { font-size: 0.68rem; }
  .hero-eyebrow { font-size: 0.65rem; line-height: 1.4; }
  .hero-actions, .cta-actions, .ai-ready-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn, .cta-actions .btn, .booking-embed .btn, .ai-ready-actions .btn { justify-content: center; width: 100%; }
  .hero-social-proof { gap: 0.8rem; }
  .price-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 0.9rem 1rem;
  }
  .page-hero { height: auto; min-height: 320px; padding: 2.75rem 1rem 3rem; }
  .page-hero h1 { font-size: clamp(2rem, 12vw, 2.7rem); }
  .page-hero p, .lead, .cta-section p { font-size: 0.94rem; }
  .section, .section-sm { padding: 3rem 1rem; }
  .page-offset > .page-hero + .section { padding-top: 2rem; }
  h2.display { font-size: clamp(1.85rem, 10vw, 2.35rem); }
  .pain-grid, .proof-grid, .values-grid, .pricing-grid,
  .cases-grid-full, .process-steps, .form-row,
  .credentials, .footer-top { grid-template-columns: 1fr; }
  .ai-service-grid,
  .ai-offer-features,
  .workshop-detail-grid,
  .workshop-agenda-grid { grid-template-columns: 1fr; }
  .case-meta-grid, .case-solution-grid, .case-outcomes-grid { grid-template-columns: 1fr; }
  .case-detail-hero { padding: 3.5rem 1rem 3rem; }
  .case-detail-actions .btn { width: 100%; justify-content: center; }
  .ms-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-steps { gap: 1rem; margin-top: 2rem; }
  .process-step {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1rem;
    text-align: left;
    align-items: start;
    background: white;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.15rem;
  }
  .process-step .step-bubble {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    margin: 0;
    box-shadow: 0 0 0 5px var(--teal-pale);
    font-size: 1.1rem;
  }
  .process-step h3 { margin-bottom: 0; }
  .pain-card, .pricing-card, .value-card, .case-card-body,
  .booking-embed, .ai-service-card, .ai-offer-card { padding: 1.35rem; }
  .ai-flow-panel::before { left: 20px; }
  .ai-flow-card { margin-left: 1.8rem; padding: 1.15rem; }
  .ai-flow-card span {
    left: -2.45rem;
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
  }
  .case-card-header { padding: 1.5rem; }
  .mini-offer-card, .feature-item, .credential, .contact-method {
    padding: 1rem; gap: 0.8rem;
  }
  .contact-method { align-items: flex-start; }
  .contact-method-icon { width: 36px; height: 36px; }
  .service-number { font-size: 3rem; }
  .service-block h3 { font-size: 1.35rem; }
  .pricing-price-val { font-size: 1.8rem; }
  .support-card { padding: 1.25rem; gap: 1rem; }
  .support-features { gap: 0.55rem; }
  .support-card .btn { max-width: none; }
  .ms-logo-card { padding: 1rem; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-legal { flex-wrap: wrap; gap: 1rem; }
  .booking-full-width iframe {
    display: block;
    width: 100% !important;
    max-width: 100%;
    height: 720px;
    min-width: 0 !important;
  }
}

@media (max-width: 420px) {
  .nav-logo-mark { height: 32px; }
  .nav-logo-text { font-size: 1rem; }
  .nav-logo-text small { font-size: 0.48rem; }
  .hero h1 { font-size: 2.25rem; }
  .btn { padding-left: 1rem; padding-right: 1rem; }
  .strip-items { gap: 0.6rem; }
  .strip-item { width: 100%; justify-content: flex-start; }
  .footer-logo img { height: 36px; }
}


/* ══════════════════════════════════════════
   DROPDOWN NAV — hover gap fix
   Replaces margin-top with padding-top so
   the hover zone is unbroken on all pages
   that use dropdowns.
══════════════════════════════════════════ */

.nav-links .has-dropdown .dropdown {
  margin-top: 0 !important;
  padding-top: 0.75rem;
}


/* ══════════════════════════════════════════
   DOCS INDEX PAGE  (docs.html)
══════════════════════════════════════════ */

.docs-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.docs-product-card {
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 14px;
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.docs-product-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  border-color: #c9d3dc;
}
.docs-product-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.docs-product-icon {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: linear-gradient(135deg, #056281 0%, #0f1e28 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.docs-product-meta { flex: 1; }
.docs-product-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: rgba(7,131,150,0.08);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  margin-top: 0.35rem;
}
.docs-product-meta h3 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
  color: var(--navy-deep);
}
.docs-product-description {
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--mid);
  margin: 0 0 1.5rem;
  flex: 1;
}
.docs-product-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #f0f2f5;
}
.docs-product-stat { text-align: center; }
.docs-product-stat-val {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy-deep);
}
.docs-product-stat-label {
  font-size: 0.78rem;
  color: var(--mid);
}
.docs-product-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.docs-product-actions .btn { text-align: center; display: block; }
.docs-product-actions .btn-link-small {
  font-size: 0.875rem;
  color: var(--mid);
  text-decoration: none;
  text-align: center;
  padding: 0.4rem;
  border-radius: 6px;
  transition: color 0.2s;
}
.docs-product-actions .btn-link-small:hover { color: var(--teal-dark); }
.docs-intro-strip {
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}
.docs-intro-strip-stat {
  text-align: center;
  flex: 1;
  min-width: 120px;
}
.docs-intro-strip-stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  color: var(--teal-dark);
}
.docs-intro-strip-stat span {
  font-size: 0.875rem;
  color: var(--mid);
}
.docs-coming-soon {
  opacity: 0.55;
  pointer-events: none;
}
@media (max-width: 600px) {
  .docs-product-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════
   CRM PRODUCT PAGE  (Dove365-CRM-Starter.html)
══════════════════════════════════════════ */

.product-hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.pricing-note-box {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(255,255,255,0.08);
  border-radius: 8px;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
}
.pricing-note-box strong { color: #fff; }
.faq-accordion {
  max-width: 860px;
  margin: 2.5rem auto 0;
}
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-child { border-top: 1px solid var(--border); }
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1.4rem 0;
  cursor: pointer;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--near-black);
  gap: 1.25rem;
  transition: color 0.2s;
}
.faq-question:hover { color: var(--teal-dark); }
.faq-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s;
  font-size: 1.1rem;
  font-weight: 300;
  line-height: 1;
  color: var(--teal-dark);
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  display: none;
  padding: 0 0 1.5rem 0;
  color: var(--mid);
  line-height: 1.75;
  font-size: 1rem;
}
.faq-item.open .faq-answer { display: block; }
.feature-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.kb-cta-box {
  display: flex;
  align-items: center;
  gap: 2rem;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem 3rem;
  margin-top: 3rem;
  flex-wrap: wrap;
}
.kb-cta-box-text { flex: 1; min-width: 200px; }
.kb-cta-box-text h3 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.kb-cta-box-text p { margin: 0 0 1.25rem; color: var(--mid); line-height: 1.65; }
@media (max-width: 700px) {
  .feature-grid-2col { grid-template-columns: 1fr; }
  .product-hero-actions { flex-direction: column; }
}


/* ══════════════════════════════════════════
   CRM DOCUMENTATION HUB  (crm-docs.html)
══════════════════════════════════════════ */

.docs-page {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 0;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 5rem;
  align-items: start;
}
.docs-sidebar {
  position: sticky;
  top: 88px;
  padding: 2.5rem 1.5rem 2.5rem 0;
  border-right: 1px solid var(--border);
  min-height: 300px;
}
.docs-sidebar-product {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.docs-sidebar-product-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--teal-dark), var(--navy-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.docs-sidebar-product-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.25;
}
.docs-sidebar-product-sub { font-size: 0.75rem; color: var(--mid); }
.docs-sidebar-section { margin-bottom: 1.75rem; }
.docs-sidebar-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  padding: 0 0.5rem;
  margin-bottom: 0.4rem;
  display: block;
}
.docs-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  color: var(--navy);
  text-decoration: none;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  line-height: 1.4;
}
.docs-sidebar-link:hover { background: rgba(7,131,150,0.07); color: var(--teal); }
.docs-sidebar-link.active { background: rgba(7,131,150,0.1); color: var(--teal); font-weight: 600; }
.docs-sidebar-divider { height: 1px; background: var(--border); margin: 1rem 0; }
.docs-main { padding: 2.5rem 0 2.5rem 3rem; }
.docs-section { scroll-margin-top: 100px; }
.docs-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--border);
}
.docs-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.docs-section-icon.green { background: rgba(7,131,150,0.1); color: var(--teal); }
.docs-section-icon.blue  { background: rgba(35,54,68,0.08); color: var(--navy); }
.docs-section-icon.amber { background: rgba(201,168,76,0.12); color: #9a7a20; }
.docs-section-icon.slate { background: rgba(100,116,139,0.1); color: var(--mid); }
.docs-section-header h2 { font-size: 1.3rem; font-weight: 700; color: var(--navy-deep); margin: 0; }
.docs-section-desc { font-size: 0.95rem; color: var(--mid); margin: -0.5rem 0 1.5rem; line-height: 1.6; }
.docs-guide-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 3rem;
}
.docs-guide-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: box-shadow 0.2s, border-color 0.2s, transform 0.15s;
}
.docs-guide-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
  border-color: var(--slate);
  transform: translateY(-1px);
}
.docs-guide-card-type {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.docs-guide-card-type.user  { color: var(--teal); }
.docs-guide-card-type.admin { color: var(--navy); }
.docs-guide-card-type.ref   { color: #9a7a20; }
.docs-guide-card-title { font-size: 0.975rem; font-weight: 600; color: var(--navy-deep); margin-bottom: 0.4rem; line-height: 1.35; }
.docs-guide-card-desc { font-size: 0.85rem; color: var(--mid); line-height: 1.55; flex: 1; margin-bottom: 1rem; }
.docs-guide-card-cta { font-size: 0.8rem; font-weight: 600; color: var(--teal); display: flex; align-items: center; gap: 0.25rem; }
.docs-start-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
.docs-start-card {
  background: linear-gradient(135deg, var(--teal-dark) 0%, var(--navy-deep) 100%);
  border-radius: 10px;
  padding: 1.5rem;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.2s;
}
.docs-start-card:hover { opacity: 0.9; }
.docs-start-card .step-num { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.docs-start-card h3 { font-size: 1rem; font-weight: 700; color: #fff; margin: 0; }
.docs-start-card p { font-size: 0.8rem; opacity: 0.8; line-height: 1.5; margin: 0; }
.docs-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem 1rem;
  margin-bottom: 2.5rem;
  color: var(--slate);
  font-size: 0.9rem;
}
.docs-search-bar svg { flex-shrink: 0; opacity: 0.6; }
@media (max-width: 860px) {
  .docs-page { grid-template-columns: 1fr; padding: 0 1.25rem 3rem; }
  .docs-sidebar {
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
  }
  .docs-sidebar-section { margin-bottom: 0; }
  .docs-sidebar-section-label { display: none; }
  .docs-sidebar-product { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
  .docs-sidebar-divider { display: none; }
  .docs-main { padding: 2rem 0 0; }
  .docs-start-strip { grid-template-columns: 1fr; }
  .docs-guide-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .docs-guide-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════
   RELEASE NOTES PAGE
══════════════════════════════════════════ */

.release-version-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(7,131,150,0.08);
  border: 1px solid rgba(7,131,150,0.2);
  border-radius: 100px;
  padding: 0.35rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-dark);
  margin-bottom: 1.5rem;
}
.release-block {
  margin-bottom: 3rem;
}
.release-block-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.25rem;
}
.release-block-header h3 { font-size: 1.1rem; font-weight: 700; color: var(--navy-deep); margin: 0; }
.release-block-icon {
  width: 32px;
  height: 32px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  font-weight: 700;
  flex-shrink: 0;
}
.release-block-icon.teal  { background: rgba(7,131,150,0.1); color: var(--teal); }
.release-block-icon.navy  { background: rgba(35,54,68,0.08); color: var(--navy); }
.release-block-icon.amber { background: rgba(201,168,76,0.12); color: #9a7a20; }
.release-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.release-list li {
  display: flex;
  gap: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--near-black);
}
.release-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
  margin-top: 0.6rem;
}
.release-check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 2rem;
}
.release-check-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--near-black);
}
.release-check-item::before {
  content: '✓';
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--teal);
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .release-check-grid { grid-template-columns: 1fr; }
}


/* ══════════════════════════════════════════
   RESPONSIVE LAYOUT UTILITIES
   Replaces inline style grids so layouts
   collapse correctly on mobile.
══════════════════════════════════════════ */

/* 1.1fr / 0.9fr two-column feature layout */
.layout-2col {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: start;
  margin-top: 3rem;
}

/* equal two-column layout */
.layout-2col-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-top: 3rem;
}

/* 5-step process override */
.process-steps-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  margin-top: 3.5rem;
}

/* 5-column footer (docs.html) */
.footer-5col {
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
  gap: 2rem !important;
}

@media (max-width: 1100px) {
  .footer-5col { grid-template-columns: 1.4fr 1fr 1fr 1fr !important; }
}

@media (max-width: 900px) {
  .layout-2col,
  .layout-2col-equal { grid-template-columns: 1fr !important; gap: 2rem; }
  .process-steps-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .footer-5col { grid-template-columns: 1fr 1fr !important; gap: 1.5rem !important; }
}

@media (max-width: 640px) {
  .footer-5col { grid-template-columns: 1fr !important; }
  .process-steps-5 { grid-template-columns: 1fr !important; }
}


/* ══════════════════════════════════════════
   MOBILE NAV DROPDOWNS
   Makes .has-dropdown work on touch devices
   inside the collapsed mobile nav (≤980px).
══════════════════════════════════════════ */

@media (max-width: 980px) {
  .nav-links .has-dropdown .dropdown {
    position: static !important;
    display: none;
    background: rgba(255,255,255,0.05);
    border: none;
    border-radius: 6px;
    box-shadow: none;
    padding: 0.25rem 0 0.5rem 0.75rem;
    margin: 0.25rem 0 0.25rem;
    min-width: 0;
  }
  .nav-links .has-dropdown.open .dropdown { display: block; }
  .nav-links .has-dropdown > a::after {
    content: ' ▾';
    font-size: 0.7em;
    opacity: 0.5;
  }
  .nav-links .has-dropdown.open > a::after { content: ' ▴'; }
}


/* ══════════════════════════════════════════
   CRM DOCS SIDEBAR — MOBILE
   Collapses to a horizontal scrollable
   pill-strip below 860px.
══════════════════════════════════════════ */

@media (max-width: 860px) {
  .docs-page { grid-template-columns: 1fr !important; padding: 0 1rem 3rem; }
  .docs-sidebar {
    position: static !important;
    top: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: block;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .docs-sidebar::-webkit-scrollbar { display: none; }
  .docs-sidebar-product { display: none; }
  .docs-sidebar-divider { display: none; }
  .docs-sidebar-section {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: top;
  }
  .docs-sidebar-section-label { display: none; }
  .docs-sidebar-link {
    display: inline-block;
    white-space: nowrap;
    margin: 0 0.25rem 0.35rem 0;
    background: rgba(7,131,150,0.06);
    border: 1px solid rgba(7,131,150,0.18);
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    color: var(--navy);
    line-height: 1.4;
  }
  .docs-sidebar-link:hover { background: rgba(7,131,150,0.12); color: var(--teal); }
  .docs-main { padding: 1.5rem 0 0 !important; }
  .docs-start-strip { grid-template-columns: 1fr !important; }
  .docs-guide-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .docs-guide-grid { grid-template-columns: 1fr !important; }
  .docs-sidebar { padding: 0.5rem 0; }
}


/* ══════════════════════════════════════════
   MOBILE — COLLAPSIBLE DOCS SIDEBAR (v2)
   Replaces the horizontal scrollable strip
   with a <details> collapsible TOC.
══════════════════════════════════════════ */

/* Desktop: hide the <details> toggle, always show */
.docs-toc-summary { display: none; }

@media (max-width: 860px) {
  /* Reset the scrollable strip entirely */
  .docs-sidebar {
    position: static !important;
    overflow: visible !important;
    white-space: normal !important;
    display: block !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--border);
    border-right: none;
  }

  /* <details> wraps all sidebar content */
  .docs-toc { margin: 0; }
  .docs-toc-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--navy);
    cursor: pointer;
    list-style: none;
    user-select: none;
    -webkit-user-select: none;
  }
  .docs-toc-summary::-webkit-details-marker { display: none; }
  .docs-toc-summary::marker { display: none; }
  .docs-toc-icon {
    font-size: 0.65rem;
    color: var(--mid);
    transition: transform 0.2s;
    display: inline-block;
  }
  .docs-toc[open] .docs-toc-icon { transform: rotate(180deg); }

  /* Sidebar items when open */
  .docs-sidebar-product {
    display: flex !important;
    padding: 0.75rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0;
  }
  .docs-sidebar-section {
    display: block !important;
    padding: 0.1rem 1.25rem;
    margin-bottom: 0;
  }
  .docs-sidebar-section-label {
    display: block;
    padding: 0.6rem 0.5rem 0.2rem;
    font-size: 0.65rem;
  }
  .docs-sidebar-link {
    display: flex !important;
    background: none !important;
    border: none !important;
    border-radius: 4px !important;
    font-size: 0.875rem;
    padding: 0.35rem 0.5rem !important;
    white-space: normal !important;
    margin: 0 !important;
    color: var(--navy);
  }
  .docs-sidebar-link:hover { background: rgba(7,131,150,0.06) !important; color: var(--teal) !important; }
  .docs-sidebar-divider {
    display: block !important;
    margin: 0.35rem 1.25rem !important;
  }
  .docs-toc[open] > *:not(summary):last-child { padding-bottom: 0.75rem; }
  .docs-main { padding: 1.5rem 0 0 !important; }
}


/* ══════════════════════════════════════════
   MOBILE — NAV DROPDOWN FIX (v2)
   Fixes visual overlap of parent + sub items,
   and removes the annoying ▾/▴ pseudo-content
   since JS controls open/close.
══════════════════════════════════════════ */

@media (max-width: 980px) {
  /* Dropdown container: static, hidden by default */
  .nav-links .has-dropdown .dropdown {
    position: static !important;
    display: none !important;
    background: transparent !important;
    border: none !important;
    border-left: 2px solid rgba(83,177,205,0.22) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0.1rem 0 0.35rem !important;
    margin: 0 0 0.35rem 1rem !important;
    min-width: 0 !important;
  }
  .nav-links .has-dropdown.open .dropdown { display: block !important; }

  /* Dropdown links: subordinate styling, no overlap with parent */
  .nav-links .has-dropdown .dropdown a {
    display: block !important;
    width: 100% !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.83rem !important;
    color: rgba(255,255,255,0.55) !important;
    background: transparent !important;
    border-radius: 4px !important;
  }
  .nav-links .has-dropdown .dropdown a:hover {
    background: rgba(83,177,205,0.1) !important;
    color: rgba(255,255,255,0.9) !important;
  }
  .nav-links .has-dropdown .dropdown .dropdown-label { display: none !important; }

  /* Parent trigger: small arrow via CSS, no layout shift */
  .nav-links .has-dropdown > a::after {
    content: ' ▾';
    font-size: 0.65em;
    opacity: 0.45;
    margin-left: 0.2em;
  }
  .nav-links .has-dropdown.open > a::after { content: ' ▴'; }
}


/* ══════════════════════════════════════════
   MOBILE — MISC LAYOUT FIXES
══════════════════════════════════════════ */

/* Breadcrumb: prevent wrapping, allow horizontal scroll */
.breadcrumb {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.breadcrumb::-webkit-scrollbar { display: none; }
.breadcrumb a, .breadcrumb span { white-space: nowrap; flex-shrink: 0; }

/* Pricing featured badge: never wrap */
.featured-badge { white-space: nowrap; }

/* KB box: reduce padding on mobile */
@media (max-width: 640px) {
  .kb-cta-box { padding: 1.5rem 1.25rem; gap: 1.25rem; }
}

/* Wide guide cards (FAQ, Release Notes): stack on mobile */
.docs-guide-card-wide {
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
}
@media (max-width: 640px) {
  .docs-guide-card-wide { flex-direction: column !important; align-items: flex-start !important; }
  .docs-guide-card-wide .docs-guide-card-cta { margin-top: 0.5rem; }
}

/* Release notes mobile */
@media (max-width: 640px) {
  .release-version-badge { font-size: 0.78rem; padding: 0.3rem 0.75rem; flex-wrap: wrap; gap: 0.25rem; }
  .release-block { margin-bottom: 2rem; }
  .release-check-grid { grid-template-columns: 1fr; }
  code { word-break: break-all; }
}


/* ══════════════════════════════════════════
   RELEASE NOTES — MOBILE FIXES
══════════════════════════════════════════ */

.release-list li {
  /* Ensure text doesn't escape the flex container */
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.release-list code {
  display: inline;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.release-block p { overflow-wrap: break-word; word-break: break-word; }

@media (max-width: 640px) {
  /* Hide logo image in kb-cta-box on mobile — it creates too much left indent */
  .kb-cta-box > img { display: none; }
  /* Release notes */
  .release-version-badge {
    font-size: 0.75rem;
    padding: 0.3rem 0.75rem;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .release-block-header h3 { font-size: 1rem; }
  .release-list li { font-size: 0.9rem; }
}


/* ══════════════════════════════════════════
   RELEASE LIST — fix layout (v2)
   Replaces display:flex with block + absolute
   dot so text fills the full available width
   and wraps naturally on mobile.
══════════════════════════════════════════ */

.release-list li {
  display: block !important;
  position: relative;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--near-black);
  overflow-wrap: break-word;
  word-break: break-word;
  gap: unset;
  min-width: unset;
}
.release-list li::before {
  content: '';
  position: absolute !important;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: unset;
  margin-top: 0;
}
.release-list code {
  font-size: 0.85em;
  word-break: normal;
  overflow-wrap: break-word;
}


/* ══════════════════════════════════════════════════════════════
   ✦ LAB — CUTTING-EDGE INTERACTION LAYER
   Styles for the interactive neural-network hero, the live
   "Dove365 Copilot" console, cursor spotlight, magnetic CTAs,
   3D tilt and count-up. Paired with assets/js/lab.js.
══════════════════════════════════════════════════════════════ */

/* ── motion keyframes ── */
@keyframes auroraDrift {
  0%   { transform: translate3d(-6%, -3%, 0) rotate(0deg) scale(1.05); }
  50%  { transform: translate3d(6%, 4%, 0) rotate(8deg) scale(1.18); }
  100% { transform: translate3d(-6%, -3%, 0) rotate(0deg) scale(1.05); }
}
@keyframes aiSpin { to { transform: rotate(360deg); } }
@keyframes aiBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(83,177,205,0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(83,177,205,0); }
  100% { box-shadow: 0 0 0 0 rgba(83,177,205,0); }
}
@keyframes cueFloat { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }

/* ══ NEURAL HERO ══ */
.ai-neural-hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 72px);
  display: flex;
  align-items: center;
  padding: 5.5rem 4rem 6rem;
  background:
    radial-gradient(circle at 78% 30%, rgba(7,131,150,0.20), transparent 46%),
    radial-gradient(circle at 12% 80%, rgba(201,168,76,0.10), transparent 44%),
    linear-gradient(150deg, #0c1a23 0%, #112634 52%, #0a161e 100%);
  overflow: hidden;
}
.neural-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}
/* animated aurora wash */
.ai-neural-hero::before {
  content: '';
  position: absolute; inset: -25%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 44% at 70% 28%, rgba(83,177,205,0.22), transparent 70%),
    radial-gradient(34% 40% at 26% 72%, rgba(7,131,150,0.20), transparent 70%),
    radial-gradient(30% 36% at 50% 50%, rgba(201,168,76,0.10), transparent 72%);
  filter: blur(36px);
  opacity: 0.85;
  mix-blend-mode: screen;
  animation: auroraDrift 22s ease-in-out infinite;
}
/* readability veil so left copy stays crisp over the canvas */
.neural-veil {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(105deg, rgba(10,22,30,0.78) 0%, rgba(10,22,30,0.32) 42%, transparent 70%),
    linear-gradient(0deg, rgba(10,22,30,0.55), transparent 32%);
}
.neural-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  align-items: center;
  gap: 4rem;
}
.neural-copy { max-width: 580px; }
.neural-eyebrow {
  display: inline-flex; align-items: center; gap: 0.55rem;
  background: rgba(83,177,205,0.12);
  border: 1px solid rgba(83,177,205,0.28);
  color: var(--teal-light);
  font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase;
  padding: 0.4rem 0.95rem; border-radius: 100px;
  margin-bottom: 1.6rem;
}
.neural-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal-light);
  animation: livePulse 2.2s ease-out infinite;
}
.neural-headline {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  line-height: 1.03;
  letter-spacing: -0.012em;
  color: #fff;
  margin-bottom: 1.4rem;
  text-shadow: 0 18px 50px rgba(0,0,0,0.35);
}
.neural-headline .line { display: block; }
.neural-headline .grad {
  background: linear-gradient(100deg, var(--teal-light) 0%, #8fe3c6 46%, var(--gold-light) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-style: italic;
}
.neural-headline .is-scrambling { color: var(--teal-light); }
.neural-sub {
  color: rgba(255,255,255,0.68);
  font-size: 1.06rem; line-height: 1.72;
  max-width: 484px; margin-bottom: 2.1rem;
}
.neural-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.neural-metrics {
  display: flex; gap: 2.4rem; flex-wrap: wrap;
  padding-top: 1.7rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.neural-metric strong {
  display: block;
  font-family: 'DM Serif Display', serif;
  font-size: 2.05rem; line-height: 1; color: #fff;
  margin-bottom: 0.35rem;
}
.neural-metric span {
  font-size: 0.74rem; color: rgba(255,255,255,0.52);
  letter-spacing: 0.04em;
}

/* ══ LIVE AI CONSOLE ══ */
.neural-console-wrap { perspective: 1100px; }
.ai-console {
  position: relative;
  width: 100%; max-width: 470px; margin-left: auto;
  border-radius: 18px;
  background: linear-gradient(165deg, rgba(22,40,52,0.94), rgba(11,22,30,0.9));
  border: 1px solid rgba(83,177,205,0.22);
  box-shadow: 0 44px 100px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: transform 0.3s cubic-bezier(0.2,0.7,0.2,1);
  will-change: transform;
}
.ai-console-head {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.02);
}
.ai-dots { display: flex; gap: 6px; }
.ai-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.ai-dots span:nth-child(1) { background: rgba(83,177,205,0.7); }
.ai-title {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.82rem; font-weight: 600; color: #fff;
  margin-left: 0.2rem;
}
.ai-title svg { width: 15px; height: 15px; }
.ai-live {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--teal-light);
  background: rgba(83,177,205,0.1);
  border: 1px solid rgba(83,177,205,0.22);
  padding: 0.2rem 0.55rem; border-radius: 100px;
}
.ai-live .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--teal-light);
  animation: livePulse 2s ease-out infinite;
}
.ai-feed {
  height: 326px;
  padding: 1.1rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  overflow: hidden;
  transition: opacity 0.45s ease;
  -webkit-mask-image: linear-gradient(transparent, #000 11%, #000 90%, transparent);
  mask-image: linear-gradient(transparent, #000 11%, #000 90%, transparent);
}
.ai-feed.ai-feed-clear { opacity: 0; }
.ai-row { display: flex; gap: 0.6rem; align-items: flex-start; }
.ai-row-user { flex-direction: row-reverse; }
.ai-avatar {
  width: 27px; height: 27px; border-radius: 8px;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em;
}
.ai-row-user .ai-avatar { background: rgba(83,177,205,0.16); color: var(--teal-light); }
.ai-row-assistant .ai-avatar {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff; font-size: 0.8rem;
  box-shadow: 0 6px 16px rgba(7,131,150,0.4);
}
.ai-bubble {
  font-size: 0.83rem; line-height: 1.55;
  padding: 0.62rem 0.82rem; border-radius: 13px;
  max-width: 85%;
}
.ai-row-user .ai-bubble {
  background: rgba(83,177,205,0.15); color: #ecf7fb;
  border-radius: 13px 13px 4px 13px;
}
.ai-row-assistant .ai-bubble {
  background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.84);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 13px 13px 13px 4px;
}
.ai-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.55rem; }
.ai-tool {
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-size: 0.68rem;
  padding: 0.26rem 0.58rem; border-radius: 100px;
  background: rgba(7,131,150,0.12);
  border: 1px solid rgba(83,177,205,0.22);
  color: var(--teal-light);
}
.ai-tool-spin {
  width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid rgba(83,177,205,0.3);
  border-top-color: var(--teal-light);
  animation: aiSpin 0.7s linear infinite;
}
.ai-tool-check { color: var(--teal-light); font-size: 0.72rem; line-height: 1; }
.ai-caret {
  display: inline-block; width: 7px; height: 0.95em;
  vertical-align: -0.12em;
  background: var(--teal-light); margin-left: 2px; border-radius: 1px;
  animation: aiBlink 1.05s steps(1) infinite;
}
.ai-console-foot {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.72rem 1.1rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.68rem; color: rgba(255,255,255,0.42);
  background: rgba(255,255,255,0.015);
}
.ai-console-foot .shield { color: var(--teal-light); }

/* scroll cue for the neural hero */
.neural-cue {
  position: absolute; left: 50%; bottom: 1.7rem; z-index: 3;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  animation: cueFloat 2.4s ease-in-out infinite;
}
.neural-cue::after {
  content: ''; display: block; width: 1px; height: 34px;
  margin: 0.65rem auto 0;
  background: linear-gradient(transparent, var(--teal-light), transparent);
}

/* ══ CURSOR SPOTLIGHT (injected overlay) ══ */
.has-spotlight { position: relative; isolation: isolate; }
.has-spotlight > *:not(.card-spotlight) { position: relative; z-index: 1; }
.card-spotlight {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(210px circle at var(--mx, -300px) var(--my, -300px),
              rgba(83,177,205,0.16), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.has-spotlight:hover .card-spotlight { opacity: 1; }

/* magnetic CTAs — smooth spring back */
.btn-primary, .nav-cta { transition: transform 0.18s cubic-bezier(0.2,0.7,0.2,1), background 0.2s, box-shadow 0.2s; }

/* ══ RESPONSIVE ══ */
@media (max-width: 980px) {
  .ai-neural-hero { min-height: auto; padding: 4.5rem 1.5rem 5rem; }
  .neural-hero-inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .neural-copy { max-width: 640px; }
  .ai-console { max-width: 100%; margin-left: 0; }
  .neural-veil {
    background:
      linear-gradient(180deg, rgba(10,22,30,0.5), rgba(10,22,30,0.2) 40%, transparent 65%),
      linear-gradient(0deg, rgba(10,22,30,0.55), transparent 30%);
  }
  /* tilt is pointer-driven only; reset any inline transform on touch */
  .ai-console[style] { transform: none !important; }
}
@media (max-width: 640px) {
  .ai-neural-hero { padding: 3.5rem 1rem 4rem; }
  .ai-neural-hero::before { opacity: 0.6; filter: blur(28px); }
  .neural-headline { font-size: clamp(2.15rem, 11vw, 3.1rem); }
  .neural-sub { font-size: 0.96rem; }
  .neural-actions { flex-direction: column; align-items: stretch; }
  .neural-actions .btn { justify-content: center; width: 100%; }
  .neural-metrics { gap: 1.4rem; }
  .neural-metric strong { font-size: 1.7rem; }
  .ai-feed { height: 300px; }
  .neural-cue { display: none; }
}

/* reduced-motion: kill aurora + cue drift, keep everything legible */
@media (prefers-reduced-motion: reduce) {
  .ai-neural-hero::before { animation: none; }
  .neural-cue { animation: none; }
  .ai-tool-spin { animation: none; }
  .ai-caret { animation: none; opacity: 1; }
}


/* ══════════════════════════════════════════════════════════════
   ✦ HOMEPAGE SHOWCASE — device frame that switches between the
   real CRM app screenshots and the live Copilot console.
══════════════════════════════════════════════════════════════ */
@keyframes showcaseFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* favour the showcase column slightly on the home hero */
.ai-neural-hero.home-showcase .neural-hero-inner { grid-template-columns: 0.9fr 1.1fr; }

.hero-trust { display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem; margin-top: 2rem; }
.hero-trust span {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.74rem; color: rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.36rem 0.72rem; border-radius: 100px;
}
.hero-trust span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--teal-light);
}

/* the showcase = a 3D deck where whole app windows tumble in and out,
   a persistent progress bar, and the tab switcher below. */
.showcase {
  position: relative;
  width: 100%; max-width: 660px; margin-left: auto;
}
.showcase-deck {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 16px;
  overflow: hidden;
  background: #08121a;
  perspective: 1700px;
}

/* ── wild whole-window flip ── each window tumbles in from one side with a
   3D spin + scale overshoot + motion blur, while the outgoing window whips
   out the opposite side, so they collide across the deck. */
@keyframes frameSlam {
  0%   { opacity: 0; transform: translateX(64%) rotateY(-94deg) rotateX(12deg) rotateZ(-10deg) scale(0.42); filter: blur(26px); }
  40%  { opacity: 1; }
  62%  { transform: translateX(-7%) rotateY(15deg) rotateX(-5deg) rotateZ(3deg) scale(1.12); filter: blur(0); }
  82%  { transform: translateX(3%) rotateY(-6deg) rotateX(2deg) rotateZ(-1.5deg) scale(0.97); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes frameSlamAlt {
  0%   { opacity: 0; transform: translateX(-64%) rotateY(94deg) rotateX(12deg) rotateZ(10deg) scale(0.42); filter: blur(26px); }
  40%  { opacity: 1; }
  62%  { transform: translateX(7%) rotateY(-15deg) rotateX(-5deg) rotateZ(-3deg) scale(1.12); filter: blur(0); }
  82%  { transform: translateX(-3%) rotateY(6deg) rotateX(2deg) rotateZ(1.5deg) scale(0.97); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
.showcase-window {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background: #0c1a23;
  border: 1px solid rgba(83,177,205,0.22);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
  opacity: 0; pointer-events: none;
  transform-origin: 50% 50%;
  transform: translateX(-66%) rotateY(88deg) rotateX(-10deg) rotateZ(9deg) scale(0.44);
  filter: blur(18px);
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.62,-0.34,0.3,1.45), filter 0.5s ease;
  backface-visibility: hidden;
  will-change: transform, opacity, filter;
}
.showcase-window:nth-child(even) {
  transform: translateX(66%) rotateY(-88deg) rotateX(-10deg) rotateZ(-9deg) scale(0.44);
}
.showcase-window.is-active {
  opacity: 1; pointer-events: auto; z-index: 3;
  transform: none; filter: none;
  animation: frameSlam 0.98s cubic-bezier(0.2,0.84,0.26,1.04) both;
}
.showcase-window:nth-child(even).is-active { animation-name: frameSlamAlt; }

/* window chrome (screenshot windows only — the AI window uses the console header) */
.showcase-bar {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.025);
}
.showcase-dots { display: flex; gap: 6px; flex-shrink: 0; }
.showcase-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.showcase-dots span:first-child { background: rgba(83,177,205,0.7); }
.showcase-urlbar {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; color: rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 100px; padding: 0.28rem 0.8rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.showcase-urlbar svg { flex-shrink: 0; opacity: 0.7; }
.showcase-shot { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #0a161e; }
.showcase-shot img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block;
}

/* AI window — console fills it edge to edge; its header is the chrome */
.showcase-window-ai { background: linear-gradient(165deg, rgba(18,34,45,0.98), rgba(10,20,28,0.98)); }
.showcase-window-ai .ai-console {
  width: 100%; height: 100%; max-width: none; margin: 0;
  border: 0; border-radius: 0; box-shadow: none;
  background: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; flex-direction: column;
}
.showcase-window-ai .ai-feed { height: auto; flex: 1; min-height: 0; }

/* auto-advance progress (persistent, below the deck) */
.showcase-progress {
  position: relative; height: 2px; margin-top: 0.7rem;
  background: rgba(255,255,255,0.07); border-radius: 2px; overflow: hidden;
}
.showcase-progress i {
  display: block; height: 100%; width: 100%;
  transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--teal), var(--teal-light));
}

.showcase-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 0.4rem; margin-top: 1rem;
}
.showcase-tab {
  display: inline-flex; align-items: center; gap: 0.42rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.75rem; font-weight: 500;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.42rem 0.85rem; border-radius: 100px;
  cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.showcase-tab:hover { color: #fff; border-color: rgba(83,177,205,0.45); transform: translateY(-1px); }
.showcase-tab.is-active {
  color: #fff;
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(7,131,150,0.4);
}
.showcase-tab .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.65; }
.showcase-tab svg { width: 13px; height: 13px; }

@media (max-width: 980px) {
  .ai-neural-hero.home-showcase .neural-hero-inner { grid-template-columns: 1fr; }
  .showcase { max-width: 100%; margin-left: 0; }
}
@media (max-width: 640px) {
  .showcase-urlbar { display: none; }
  .showcase-tabs { gap: 0.3rem; }
  .showcase-tab { font-size: 0.7rem; padding: 0.36rem 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-window,
  .showcase-window:nth-child(even) {
    transition: opacity 0.25s ease;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .showcase-progress i { display: none; }
}