/* ============================================================
   SMHG Digital Enterprise — main.css
   Combined tokens + base + components + page rules (single file
   per Frontend Builder brief, see .pipeline/02-ux-design.md for
   the full spec this file implements).
   ============================================================ */

/* ---------- 1. Design tokens ---------- */
:root {
  /* Base surfaces */
  --color-bg: #FFFFFF;
  --color-bg-alt: #F5F8FC;
  --color-bg-navy: #0A0F1E;
  --color-bg-navy-soft: #101A30;
  --color-bg-navy-line: #1B2740;

  /* Text */
  --color-text-heading: #0B1220;
  --color-text-body: #45526B;
  --color-text-muted: #8590A6;
  --color-text-inverse: #FFFFFF;
  --color-text-inverse-soft: #AAB6CC;
  --color-text-muted-on-navy: #6B7690;

  /* Brand blue */
  --color-blue-700: #1E4FD6;
  --color-blue-600: #2555D9;
  --color-blue-500: #2F6BFF;
  --color-blue-400: #5B9CFF;
  --color-blue-100: #EAF1FF;
  --color-blue-50: #F3F7FF;

  /* Borders */
  --color-border: #E3E9F2;
  --color-border-strong: #CBD6E6;
  --color-border-navy: #24314F;

  --color-accent-positive: #17B26A;
  --color-whatsapp: #25D366;

  --gradient-brand: linear-gradient(135deg, #2F6BFF 0%, #5B9CFF 55%, #BFD8FF 100%);
  --gradient-navy: linear-gradient(135deg, #0A0F1E 0%, #132244 55%, #1B3A86 100%);

  /* Fonts */
  --font-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Type scale v2 — fluid clamp() (replaces v1 hard 767px breakpoint,
     see .pipeline/08-ux-design-v2.md section 1.2) */
  --text-display: clamp(2.25rem, 1.35rem + 3vw, 3.75rem);
  --text-h1:      clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --text-h2:      clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-h3:      clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --text-h4:      clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-body-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-body: 1rem;
  --text-body-sm: 0.875rem;
  --text-caption: 0.8125rem;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  --container-max: 1200px;
  --container-max-wide: 1320px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(11,18,32,0.04);
  --shadow-md: 0 4px 12px rgba(11,18,32,0.06), 0 1px 3px rgba(11,18,32,0.05);
  --shadow-lg: 0 16px 40px rgba(11,18,32,0.10), 0 2px 8px rgba(11,18,32,0.05);
  --shadow-hover: 0 20px 48px rgba(47,107,255,0.16), 0 4px 14px rgba(11,18,32,0.06);
  --shadow-navy-float: 0 24px 64px rgba(6,10,20,0.45);

  /* Motion */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
}

/* ---------- 1b. Design System v2 tokens (additive, see .pipeline/08-ux-design-v2.md) ---------- */
:root {
  /* Gradients (new; v1 --gradient-brand / --gradient-navy unchanged above) */
  --gradient-soft-section: linear-gradient(180deg, #F5F8FC 0%, #EAF1FF 55%, #FFFFFF 100%);
  --gradient-glass-sheen: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.15) 40%, rgba(255,255,255,0) 70%);
  --gradient-violet-hint: radial-gradient(500px 400px at 30% 70%, rgba(99,102,241,0.06), transparent 70%);

  /* Glassmorphism */
  --glass-bg: rgba(255,255,255,0.68);
  --glass-bg-strong: rgba(255,255,255,0.82);
  --glass-border: 1px solid rgba(255,255,255,0.55);
  --glass-border-navy: 1px solid rgba(255,255,255,0.14);
  --glass-blur: blur(20px) saturate(150%);
  --glass-blur-nav: blur(16px) saturate(140%);
  --glass-shadow: 0 12px 32px rgba(16,26,52,0.12), 0 2px 8px rgba(16,26,52,0.06);

  /* Glow */
  --glow-hero: radial-gradient(600px 500px at 75% 30%, rgba(47,107,255,0.10), transparent 70%);
  --glow-blue-orb: radial-gradient(420px 340px at 82% 12%, rgba(47,107,255,0.28), transparent 70%);
  --glow-blue-orb-2: radial-gradient(300px 260px at 15% 90%, rgba(47,107,255,0.14), transparent 70%);
  --glow-card: radial-gradient(140px 100px at 50% 0%, rgba(47,107,255,0.16), transparent 75%);

  /* Shadow tiers (new, layered above v1's sm/md/lg/hover/navy-float) */
  --shadow-elevated: 0 30px 60px -12px rgba(16,26,52,0.18), 0 8px 20px rgba(16,26,52,0.08);
  --shadow-floating: 0 40px 90px -20px rgba(16,26,52,0.28), 0 2px 10px rgba(47,107,255,0.08);

  /* Motion v2 additions */
  --ease-out-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-slower: 600ms;
  --duration-draw: 1600ms;
  --duration-ambient: 14000ms;
}

.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--glass-shadow);
}
@supports not (backdrop-filter: blur(1px)) {
  .glass-panel { background: rgba(255,255,255,0.92); }
}
.glass-fake {
  background: rgba(255,255,255,0.9);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}

/* Subtle Grid / Dot Pattern (decorative backgrounds only) */
.bg-dot-grid {
  background-image: radial-gradient(rgba(11,18,32,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.bg-dot-grid.on-navy {
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-line-grid {
  background-image:
    linear-gradient(rgba(11,18,32,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,18,32,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 40%, transparent 78%);
}

/* ---------- 2. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text-body);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--color-blue-700); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  margin: 0;
}
h1 { font-size: var(--text-display); font-weight: 700; line-height: 1.06; letter-spacing: -0.025em; }
h1.page-h1 { font-size: var(--text-h1); line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: var(--text-h2); font-weight: 600; line-height: 1.25; }
h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.35; }
h4 { font-size: var(--text-h4); font-weight: 600; line-height: 1.4; }
p { margin: 0; }

.eyebrow {
  display: inline-block;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-blue-700);
  background: var(--color-blue-100);
  padding: 6px 14px;
  border-radius: var(--radius-full);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-card-sms, .hero-card-growth, .hero-card-seo, .hero-card-lead { animation: none !important; transform: none !important; }
  .industries-marquee__row { animation: none !important; }
  .process-path-line { transform: scaleX(1) !important; }
  .process-node-v2 { opacity: 1 !important; transform: none !important; }
  .cta-band::before { animation: none !important; }
}

:focus-visible {
  outline: 2px solid var(--color-blue-500);
  outline-offset: 2px;
  border-radius: 4px;
}
.on-navy :focus-visible, .site-footer :focus-visible, .cta-band :focus-visible {
  outline-color: var(--color-blue-400);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--color-bg-navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

.icon-sprite { display: none; }

/* ---------- 3. Layout helpers ---------- */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}
@media (max-width: 1023px) {
  .container { padding: 0 var(--space-6); }
}
@media (max-width: 767px) {
  .container { padding: 0 var(--space-4); }
}

.section {
  padding: var(--space-9) 0;
}
@media (max-width: 767px) {
  .section { padding: var(--space-7) 0; }
}
.section-alt { background: var(--color-bg-alt); }

.section-head { max-width: 720px; margin-bottom: var(--space-7); }
.section-head p { margin-top: var(--space-3); font-size: var(--text-body-lg); color: var(--color-text-body); }

/* fade-in-on-scroll */
.js .fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-slow) var(--ease-standard), transform var(--duration-slow) var(--ease-standard);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* scale-reveal — v2, used for Hero core dashboard, Bento large cards,
   Platform Showcase main images (see .pipeline/08-ux-design-v2.md 3.2) */
.js .scale-reveal {
  opacity: 0;
  transform: scale(0.96);
  transition: opacity var(--duration-slower) var(--ease-out-soft), transform var(--duration-slower) var(--ease-out-soft);
}
.scale-reveal.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 600;
  border: none;
  text-decoration: none;
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.btn-primary {
  background: var(--color-blue-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: background-color 200ms var(--ease-standard), transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
.btn-primary:hover { background: var(--color-blue-700); text-decoration: none; }
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(47,107,255,0.28), var(--shadow-sm); }
}
.btn-primary:active { transform: translateY(0); }
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-border-strong);
  color: var(--color-text-heading);
  transition: border-color 200ms ease, background-color 200ms ease, transform 200ms var(--ease-standard);
}
.btn-outline:hover { border-color: var(--color-blue-500); background: var(--color-blue-50); text-decoration: none; }
@media (hover: hover) {
  .btn-outline:hover { transform: translateY(-2px); }
}
.btn-soft {
  background: var(--color-blue-50);
  color: var(--color-blue-700);
  height: 44px;
  transition: background-color 200ms ease, transform 200ms var(--ease-standard);
}
.btn-soft:hover { background: var(--color-blue-100); text-decoration: none; }
@media (hover: hover) {
  .btn-soft:hover { transform: translateY(-1px); }
}
.btn-white {
  background: var(--color-bg);
  color: var(--color-text-heading);
  transition: background-color 200ms ease, transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
.btn-white:hover { background: var(--color-blue-50); text-decoration: none; }
@media (hover: hover) {
  .btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
}
.btn-navy-outline {
  background: transparent;
  border: 1px solid var(--color-border-navy);
  color: #fff;
  height: 44px;
}
.btn-navy-outline:hover { border-color: var(--color-blue-400); text-decoration: none; }
.btn-block { width: 100%; }
.btn-lg { height: 56px; font-size: var(--text-body); }
.btn-ghost {
  background: transparent;
  color: var(--color-blue-700);
  height: 40px;
  padding: 0 12px;
  font-weight: 600;
}
.btn-ghost:hover { background: var(--color-blue-50); text-decoration: none; }

/* Button arrow micro-interaction (v2) — apply class="btn-arrow" to the SVG
   icon inside a .btn to get hover translate; harmless no-op elsewhere. */
.btn-arrow { transition: transform 200ms var(--ease-standard); }
@media (hover: hover) {
  .btn:hover .btn-arrow { transform: translateX(3px); }
}

.cta-row {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
@media (max-width: 480px) {
  .cta-row { flex-direction: column; }
  .cta-row .btn { width: 100%; }
}

/* ---------- 5. Header v2 — floating glass navbar ---------- */
body { padding-top: 88px; } /* header height 72px + 16px top gap, see .pipeline/08-ux-design-v2.md section 4 */
@media (max-width: 1023px) { body { padding-top: 72px; } } /* mobile: 64px header + 8px gap */

.site-header {
  position: fixed;
  top: 16px;
  left: 0;
  right: 0;
  z-index: 500;
  margin: 0 auto;
  max-width: 1160px;
  height: 72px;
  display: flex;
  align-items: center;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-nav);
  -webkit-backdrop-filter: var(--glass-blur-nav);
  border: var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-elevated);
  transition: height 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard), top 200ms var(--ease-standard);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: rgba(255,255,255,0.96); }
}
.site-header.is-scrolled {
  height: 60px;
  top: 10px;
  box-shadow: var(--shadow-floating);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-5);
  padding-left: 28px;
  padding-right: 28px;
}
.logo-link { display: flex; align-items: center; min-height: 44px; }
.logo-link .site-logo { height: 40px; width: auto; display: block; }
@media (max-width: 767px) {
  .logo-link .site-logo { height: 32px; }
}
.drawer-logo { height: 27px; width: auto; display: block; }

.primary-nav { display: flex; }
.primary-nav ul { display: flex; align-items: center; gap: var(--space-6); }
.primary-nav a {
  font-size: var(--text-body-sm);
  font-weight: 500;
  color: var(--color-text-body);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.primary-nav a:hover { color: var(--color-blue-700); text-decoration: none; }
.primary-nav a[aria-current="page"] {
  color: var(--color-blue-700);
  border-bottom-color: var(--color-blue-700);
}
.header-cta { display: flex; align-items: center; gap: var(--space-4); }
.header-cta .btn { height: 40px; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--color-text-heading);
}
.nav-toggle svg { width: 24px; height: 24px; }

@media (max-width: 1023px) {
  .site-header {
    height: 64px;
    top: 8px;
    left: 8px;
    right: 8px;
    max-width: none;
    margin: 0;
    border-radius: var(--radius-lg);
  }
  .site-header.is-scrolled { height: 64px; top: 8px; }
  .primary-nav, .header-cta .btn-outline-desktop { display: none; }
  .header-cta > .btn-primary.desktop-only { display: none; }
  .nav-toggle { display: inline-flex; }
}
@media (min-width: 1024px) and (max-width: 1160px) {
  .primary-nav ul { gap: 28px; }
}

/* Drawer */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,15,30,0.5);
  z-index: 900;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard);
}
.drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  top: 0; right: 0;
  width: min(85vw, 360px);
  height: 100vh;
  background: var(--color-bg);
  box-shadow: -8px 0 32px rgba(11,18,32,0.16);
  z-index: 950;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-standard);
}
.drawer.is-open { transform: translateX(0); }
.drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.drawer-close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--color-text-heading);
}
.drawer-close svg { width: 22px; height: 22px; }
.drawer-nav { flex: 1; overflow-y: auto; padding: var(--space-2) var(--space-4); }
.drawer-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-text-heading);
  border-bottom: 1px solid var(--color-border);
}
.drawer-nav a:hover { background: var(--color-blue-50); text-decoration: none; }
.drawer-bottom {
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
  border-top: 1px solid var(--color-border);
  padding: var(--space-4);
}
.drawer-bottom .btn { height: 56px; }
.drawer-bottom .whatsapp-number {
  display: block;
  margin-top: var(--space-2);
  text-align: center;
  font-size: var(--text-caption);
  color: var(--color-text-muted);
}

/* ---------- 6. Hero ---------- */
.hero-home {
  position: relative;
  padding: 104px 0 96px;
  overflow: hidden;
}
.hero-home::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glow-hero), var(--gradient-violet-hint);
  z-index: 0;
}
.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
  background-image: radial-gradient(rgba(11,18,32,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
@media (max-width: 767px) {
  .hero-home { padding: 40px 0 48px; }
}
.hero-home .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 54% 46%;
  gap: 56px;
  align-items: center;
}
@media (max-width: 1023px) {
  /* minmax(0, 1fr), not bare 1fr: the mobile hero-ecosystem card row uses
     overflow-x:auto, and without the explicit 0 minimum a grid track will
     not shrink below its content's min-content width, which pushed the
     whole hero section wider than the viewport (clipped by .hero-home's
     own overflow:hidden, so it wasn't caught by scrollWidth-based checks). */
  .hero-home .container { grid-template-columns: minmax(0, 1fr); }
  .hero-copy, .hero-ecosystem { min-width: 0; }
}
.hero-copy h1 { margin-top: var(--space-4); }
.hero-copy .hero-sub {
  margin-top: var(--space-4);
  max-width: 520px;
  font-size: var(--text-body-lg);
  line-height: 1.55;
  color: var(--color-text-body);
}

/* Hero visual: real illustration (legacy single-image container, kept for
   backward compatibility — homepage now uses .hero-ecosystem, see section 21) */
.hero-media {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
}
.hero-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-navy-float);
}
@media (max-width: 1023px) {
  .hero-media { max-width: 520px; margin: 0 auto; }
}

/* Inner page hero */
.hero-inner {
  position: relative;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: 56px 0 56px;
  overflow: hidden;
}
@media (max-width: 767px) {
  .hero-inner { padding: 32px 0; }
}
.hero-inner .container { max-width: 760px; margin: 0; padding-left: var(--space-8); }
@media (max-width: 1023px) { .hero-inner .container { padding-left: var(--space-6); } }
@media (max-width: 767px) { .hero-inner .container { padding-left: var(--space-4); } }
.hero-inner h1 { margin-top: var(--space-3); }
.hero-inner .hero-sub {
  margin-top: var(--space-3);
  max-width: 640px;
  font-size: var(--text-body-lg);
  color: var(--color-text-body);
}

/* Breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--text-caption); }
.breadcrumb a { color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; }
.breadcrumb a:hover { color: var(--color-blue-700); text-decoration: none; }
.breadcrumb svg { width: 14px; height: 14px; color: var(--color-text-muted); }
.breadcrumb [aria-current="page"] { color: var(--color-text-body); font-weight: 600; }
.breadcrumb .bc-home svg { width: 14px; height: 14px; }

/* ---------- 7. Trust strip ---------- */
.trust-strip {
  margin-top: var(--space-7);
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-body-sm);
  color: var(--color-text-body);
  padding-right: var(--space-5);
  border-right: 1px solid var(--color-border);
}
.trust-item:last-child { border-right: none; padding-right: 0; }
.trust-item svg { width: 20px; height: 20px; color: var(--color-text-muted); flex-shrink: 0; }
@media (max-width: 767px) {
  .trust-strip { flex-direction: column; gap: var(--space-4); }
  .trust-item { border-right: none; padding-right: 0; }
}

/* ---------- 8. Cards grids ---------- */
.card-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 1023px) { .card-grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .card-grid-3 { grid-template-columns: 1fr; gap: var(--space-4); } }

.service-card {
  display: block;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
  color: inherit;
}
.service-card:hover { text-decoration: none; }
@media (hover: hover) {
  .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: var(--color-blue-500); }
}
.service-card:active { background: var(--color-blue-50); }
@media (max-width: 767px) { .service-card { padding: var(--space-5); } }
.card-icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: var(--color-blue-100);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-blue-500);
}
.card-icon svg { width: 24px; height: 24px; }
.service-card h3 { margin-top: var(--space-4); }
.service-card p { margin-top: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-body); }
.card-link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: var(--space-4);
  font-size: var(--text-body-sm); font-weight: 600; color: var(--color-blue-700);
}
.card-link svg { width: 16px; height: 16px; transition: transform var(--duration-fast) ease; }
.service-card:hover .card-link svg { transform: translateX(4px); }

.platform-media { margin-bottom: var(--space-6); }
.platform-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-5);
}
@media (max-width: 767px) { .platform-grid { grid-template-columns: 1fr; } }
.platform-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
@media (hover: hover) {
  .platform-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
}
.platform-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.platform-mark { display: flex; align-items: center; gap: 10px; height: 32px; font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; color: var(--color-text-heading); }
.platform-mark .mark-badge {
  width: 32px; height: 32px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-family: var(--font-heading); font-weight: 700;
}
.pill { font-size: var(--text-caption); font-weight: 500; background: var(--color-blue-100); color: var(--color-blue-700); padding: 4px 12px; border-radius: var(--radius-full); white-space: nowrap; }
.platform-card .tagline { margin-top: var(--space-4); font-size: var(--text-body-lg); font-weight: 600; color: var(--color-text-heading); }
.platform-features { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.platform-features li { display: flex; align-items: center; gap: 8px; font-size: var(--text-body-sm); color: var(--color-text-body); }
.platform-features svg { width: 16px; height: 16px; color: var(--color-blue-500); flex-shrink: 0; }
.platform-card .btn-soft { margin-top: var(--space-6); }

/* ---------- 9. Process flow ---------- */
.process-media {
  margin-bottom: var(--space-7);
  display: none;
}
.process-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (min-width: 1024px) {
  .process-media { display: block; }
}
.process-flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
  position: relative;
}
.process-flow::before {
  content: "";
  position: absolute;
  top: 32px; left: 8%; right: 8%;
  height: 2px;
  background: var(--gradient-brand);
  z-index: 0;
}
.process-step { position: relative; z-index: 1; text-align: center; }
.process-node {
  width: 64px; height: 64px; margin: 0 auto;
  border-radius: var(--radius-full);
  background: #fff;
  border: 2px solid var(--color-blue-500);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-blue-500);
  box-shadow: var(--shadow-sm);
}
.process-node svg { width: 24px; height: 24px; }
.process-step .step-label { margin-top: var(--space-4); font-size: var(--text-h4); }
.process-step .step-num { color: var(--color-blue-700); font-weight: 700; }
.process-step .step-desc { margin-top: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-body); }

@media (max-width: 1023px) and (min-width: 768px) {
  .process-flow { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-7); }
  .process-flow::before { display: none; }
}
@media (max-width: 767px) {
  .process-flow { grid-template-columns: 1fr; }
  .process-flow::before { display: none; }
  .process-step {
    display: grid;
    grid-template-columns: 64px 1fr;
    gap: 0 var(--space-4);
    text-align: left;
    padding: var(--space-5) 0;
    position: relative;
  }
  .process-step .process-node { width: 48px; height: 48px; grid-row: 1 / 3; }
  .process-node svg { width: 20px; height: 20px; }
  .process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px; top: 68px; bottom: -8px;
    border-left: 2px dashed var(--color-border-strong);
  }
}
.process-flow.compact .step-desc { display: none; }

/* ---------- 10. Why grid / industries grid ---------- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
}
@media (max-width: 1023px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .why-grid { grid-template-columns: 1fr; gap: var(--space-5); } }
.why-item { text-align: left; }
.why-icon {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  background: var(--color-blue-100); color: var(--color-blue-500);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.why-icon svg { width: 20px; height: 20px; }
.why-item h4 { margin-top: 0; }
.why-item p { margin-top: 4px; font-size: var(--text-body-sm); color: var(--color-text-body); }

.industries-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1023px) { .industries-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px) { .industries-grid { grid-template-columns: repeat(2, 1fr); } }
.industry-tile {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px 12px;
  text-align: center;
  transition: transform var(--duration-fast) ease, border-color var(--duration-fast) ease;
}
@media (hover: hover) {
  .industry-tile:hover { border-color: var(--color-blue-500); transform: translateY(-2px); }
}
.industry-tile svg { width: 28px; height: 28px; color: var(--color-blue-500); }
.industry-tile span { display: block; margin-top: var(--space-2); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-heading); }

/* ---------- 11. CTA band ---------- */
.cta-band {
  position: relative;
  border-radius: var(--radius-xl);
  background-color: var(--color-bg-navy);
  background-image: url('/img/illus/cta-bg.webp');
  background-size: cover;
  background-position: center;
  padding: 64px;
  text-align: center;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(400px 300px at 85% 0%, rgba(47,107,255,0.25), transparent 70%),
    linear-gradient(135deg, rgba(10,15,30,0.78) 0%, rgba(19,34,68,0.62) 55%, rgba(27,58,134,0.55) 100%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: var(--color-text-inverse); }
.cta-band p { margin-top: var(--space-3); max-width: 560px; margin-left: auto; margin-right: auto; color: var(--color-text-inverse-soft); }
.cta-band .btn { margin-top: var(--space-6); }
@media (max-width: 767px) {
  .cta-band { padding: 40px 24px; }
}

/* ---------- 12. Footer ---------- */
.site-footer {
  background: var(--color-bg-navy);
  color: var(--color-text-inverse-soft);
  padding: var(--space-9) 0 0;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.2fr;
  gap: var(--space-6);
  padding-bottom: var(--space-8);
}
.footer-col h4 { color: var(--color-text-inverse); margin-bottom: var(--space-3); }
.footer-brand-logo { height: 28px; width: auto; display: block; }
.footer-brand p { margin-top: var(--space-4); font-size: var(--text-body-sm); max-width: 320px; }
.footer-brand .footer-meta { margin-top: var(--space-4); font-size: var(--text-body-sm); color: var(--color-text-inverse-soft); }
.footer-col ul { line-height: 2.2; }
.footer-col a { color: var(--color-text-inverse-soft); font-size: var(--text-body-sm); }
.footer-col a:hover { color: var(--color-blue-400); text-decoration: none; }
.footer-contact .btn-navy-outline { margin-bottom: var(--space-3); }
.footer-contact p { font-size: var(--text-body-sm); margin-top: var(--space-2); }
.footer-social { margin-top: var(--space-4); }
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-navy);
  color: var(--color-text-inverse-soft);
  font-size: var(--text-body-sm);
  font-weight: 600;
  transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}
.footer-social-link svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--color-blue-400); }
.footer-social-link:hover { border-color: var(--color-blue-400); color: #fff; background: rgba(47,107,255,0.08); text-decoration: none; }
.footer-bottom {
  border-top: 1px solid var(--color-border-navy);
  padding: var(--space-5) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-caption);
  color: var(--color-text-muted-on-navy);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.footer-bottom nav ul { display: flex; gap: var(--space-5); }
.footer-bottom a { color: var(--color-text-muted-on-navy); }

@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr; gap: 0; padding-bottom: 0; }
  .footer-col { padding: var(--space-6) 0; border-top: 1px solid var(--color-border-navy); }
  .footer-col:first-child { border-top: none; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ---------- 13. Service detail page blocks ---------- */
.page-hero-icon-badge {
  width: 72px; height: 72px;
  border-radius: var(--radius-full);
  background: var(--color-blue-100);
  color: var(--color-blue-500);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-5);
}
.page-hero-icon-badge svg { width: 34px; height: 34px; }

.included-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3) var(--space-6);
}
@media (max-width: 767px) { .included-grid { grid-template-columns: 1fr; } }
.included-item { display: flex; gap: 10px; align-items: flex-start; }
.included-item svg { width: 20px; height: 20px; color: var(--color-blue-500); flex-shrink: 0; margin-top: 2px; }
.included-item strong { color: var(--color-text-heading); }

.mini-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
@media (max-width: 767px) { .mini-card-grid { grid-template-columns: 1fr; } }
.mini-card { text-align: left; }
.mini-card .why-icon { margin-bottom: var(--space-3); }

.steps-list { counter-reset: step; display: flex; flex-direction: column; gap: var(--space-5); }
.steps-list li { display: flex; gap: var(--space-4); }
.steps-list .step-badge {
  counter-increment: step;
  flex-shrink: 0;
  width: 36px; height: 36px; border-radius: var(--radius-full);
  background: var(--color-blue-100); color: var(--color-blue-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-family: var(--font-heading);
}
.steps-list .step-badge::before { content: counter(step); }

.faq-list { display: flex; flex-direction: column; gap: var(--space-5); }
.faq-item { border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-5); }
.faq-item h4 { margin-bottom: var(--space-2); }
.faq-item p { font-size: var(--text-body-sm); color: var(--color-text-body); }

.related-list { display: flex; flex-direction: column; gap: var(--space-2); }

.mini-illustration { display: flex; justify-content: center; margin: var(--space-7) 0; }
.mini-illustration svg { max-width: 320px; width: 100%; height: auto; }

/* Related platform mini card */
.related-platform-wrap { display: flex; justify-content: center; }
.related-platform-wrap .platform-card { max-width: 520px; width: 100%; }

/* ---------- 14. Contact page ---------- */
.contact-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 1023px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-info h2 { margin-bottom: var(--space-4); }
.contact-info p + p, .contact-info p + h3 { margin-top: var(--space-4); }
.contact-direct .btn { margin-bottom: var(--space-3); }
.contact-direct .contact-note { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-3); }
.nap-block { margin-top: var(--space-6); border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.nap-block dt { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-3); }
.nap-block dd { margin: 2px 0 0; font-size: var(--text-body-sm); color: var(--color-text-heading); font-weight: 600; }

/* v2: the Floating Contact Panel (.contact-panel, see section 22.5) replaces
   .contact-card as the sticky element and the mobile "show first" element —
   .contact-card above is now only the inner direct-buttons block nested
   inside the panel, no longer a standalone sticky box itself. */
.contact-panel { position: sticky; top: 112px; }
@media (max-width: 1023px) { .contact-panel { position: static; } }
@media (max-width: 1023px) {
  .contact-page-order .contact-panel { order: -1; margin-top: var(--space-6); }
}

/* ---------- 15. Legal pages ---------- */
.legal-content {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-4);
  line-height: 1.75;
}
@media (max-width: 767px) { .legal-content { padding: var(--space-6) var(--space-4); } }
.legal-content h2 {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.legal-content h2:first-of-type { border-top: none; margin-top: var(--space-5); padding-top: 0; }
.legal-content p { margin-top: var(--space-4); }
.legal-content .legal-updated { color: var(--color-text-muted); font-size: var(--text-body-sm); }
.legal-content .legal-note { font-size: var(--text-body-sm); color: var(--color-text-muted); font-style: italic; }

/* ---------- 16. 404 page ---------- */
.notfound-main {
  min-height: calc(100vh - 80px - 320px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-9) var(--space-4);
  position: relative;
}
.notfound-main::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(600px 400px at 50% 20%, rgba(47,107,255,0.10), transparent 70%);
  z-index: 0;
}
.notfound-inner { position: relative; z-index: 1; max-width: 520px; margin: 0 auto; }
.notfound-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 96px;
  line-height: 1;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
@media (max-width: 767px) { .notfound-number { font-size: 56px; } }
.notfound-icon { width: 32px; height: 32px; color: var(--color-text-muted); margin-bottom: var(--space-3); }
.notfound-inner h1 { margin-top: var(--space-3); }
.notfound-inner p { margin-top: var(--space-4); font-size: var(--text-body); color: var(--color-text-body); }
.notfound-inner .cta-row { justify-content: center; }

/* ---------- 17. WhatsApp floating button ---------- */
.whatsapp-float {
  position: fixed;
  right: 16px; bottom: 16px;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-whatsapp);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.whatsapp-float.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.whatsapp-float svg { width: 28px; height: 28px; }
@media (min-width: 768px) {
  .whatsapp-float { right: 24px; bottom: 24px; }
}

/* ---------- 18. NAP block (footer + JB page) ---------- */
.local-nap { font-size: var(--text-body-sm); color: var(--color-text-body); }
.local-nap li { display: flex; gap: 8px; margin-top: var(--space-2); }
.local-nap svg { width: 16px; height: 16px; color: var(--color-text-muted); flex-shrink: 0; margin-top: 2px; }

/* ---------- 19. Utility text blocks ---------- */
.prose { max-width: 720px; }
.prose > * + * { margin-top: var(--space-4); }
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-5); }
.prose ul { display: flex; flex-direction: column; gap: var(--space-2); }
.prose ul li { display: flex; gap: 10px; }
.prose ul li svg { width: 18px; height: 18px; color: var(--color-blue-500); flex-shrink: 0; margin-top: 3px; }
.prose blockquote {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-alt);
  border-left: 3px solid var(--color-blue-500);
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
}
.areas-served { font-weight: 600; color: var(--color-text-heading); }

.two-col-media {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}
@media (max-width: 1023px) { .two-col-media { grid-template-columns: 1fr; } }
.two-col-media svg { width: 100%; height: auto; }
.two-col-media .media-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-elevated);
}
.two-col-media .media-frame {
  transform: perspective(900px) rotateY(-4deg);
  transition: transform 400ms var(--ease-standard);
}
@media (hover: hover) {
  .two-col-media .media-frame:hover { transform: perspective(900px) rotateY(0deg); }
}
@media (max-width: 1023px) {
  .two-col-media .media-frame { transform: none; }
}

/* JB page: banner image below hero */
.jb-media { max-width: 760px; margin: 0 auto var(--space-7); }
.jb-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Contact page: illustration above the contact card */
.contact-aside { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
@media (max-width: 1023px) {
  .contact-page-order .contact-aside { display: contents; }
}

/* ============================================================
   ---------- 21. Homepage v2 (Stage A) ----------
   Hero Ecosystem, Bento Grid, Process Interactive Workflow,
   Platform Showcase, Why+Industries merge, CTA Band v2.
   See .pipeline/08-ux-design-v2.md section 5 for the full spec.
   ============================================================ */

/* ---- 21.1 Hero Ecosystem ---- */
.hero-ecosystem {
  position: relative;
  width: 100%;
  max-width: 560px;
  height: 520px;
  margin-left: auto;
  perspective: 1400px;
}
@media (max-width: 1023px) {
  .hero-ecosystem { max-width: 560px; margin: 0 auto; height: auto; perspective: none; }
}

.hero-ecosystem__core {
  position: absolute;
  inset: 10% 8%;
  transform: rotateY(-6deg) rotateX(2deg);
  transform-style: preserve-3d;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-floating);
  overflow: hidden;
  z-index: 10;
  /* Opacity is intentionally NOT part of the entrance animation (v1 of this
     rule used opacity:0 + animation-fill-mode:forwards to fade it in, which
     is fragile — some headless/full-page screenshot capture paths were
     observed to sample the element mid- or pre-animation and render it
     blank even though the live computed opacity was verified to be 1).
     The core dashboard image is LCP-critical content: it must be visible
     unconditionally from first paint. Only the transform gets an entrance
     flourish now. */
  opacity: 1;
  animation: hero-in 400ms var(--ease-out-soft) 100ms both;
}
@keyframes hero-in {
  from { transform: rotateY(-6deg) rotateX(2deg) scale(0.97); }
  to   { transform: rotateY(-6deg) rotateX(2deg) scale(1); }
}
.hero-ecosystem__core img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1023px) {
  .hero-ecosystem__core {
    position: static;
    inset: auto;
    transform: none;
    animation: none;
    opacity: 1;
    box-shadow: var(--shadow-elevated);
  }
}

.hero-ecosystem__cards {
  position: absolute; inset: 0;
  /* Stage B fix (see .pipeline/03-build-notes.md "Round 7 — Stage B", B0):
     this wrapper is itself a stacking context (position:absolute + z-index),
     so its z-index competes with .hero-ecosystem__core's z-index:10 at the
     PARENT level — the individual cards' own z-index values (18/19/22/23/24)
     only matter *inside* this wrapper's stacking context and cannot lift a
     card above the core if the wrapper itself loses that outer comparison.
     Raised above the core (10) so every card renders on top of it, matching
     the "z 高于 core" requirement instead of being silently pressed under it. */
  z-index: 15;
  pointer-events: none;
}
@media (max-width: 1023px) {
  .hero-ecosystem__cards {
    position: static;
    display: flex;
    gap: 12px;
    margin-top: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
    pointer-events: auto;
  }
}

.hero-card {
  position: absolute;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  font-size: var(--text-caption);
  color: var(--color-text-body);
}
.hero-card__head { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--color-text-heading); }
.hero-card__head svg { width: 16px; height: 16px; color: var(--color-blue-500); flex-shrink: 0; }
.hero-card__live { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent-positive); }
.hero-card__bar { margin-top: 8px; height: 4px; border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.hero-card__bar span { display: block; height: 100%; background: var(--gradient-brand); border-radius: var(--radius-full); }
.hero-card__spark { width: 100%; height: 32px; margin-top: 8px; color: var(--color-blue-500); }
.hero-card__foot { margin-top: 8px; color: var(--color-text-muted); font-size: var(--text-caption); }
.hero-card__result { height: 6px; border-radius: var(--radius-full); background: var(--color-border); margin-top: 6px; }
.hero-card__result--active { background: var(--color-blue-100); }
.hero-card__pin { position: absolute; bottom: 10px; right: 12px; color: var(--color-blue-500); }
.hero-card__pin svg { width: 16px; height: 16px; }
.hero-card__pill { margin-left: auto; font-size: 10px; font-weight: 600; background: var(--color-blue-100); color: var(--color-blue-700); padding: 2px 8px; border-radius: var(--radius-full); }
.hero-card__avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--color-blue-100); margin-top: 10px; }
.hero-card__line { height: 6px; border-radius: var(--radius-full); background: var(--color-border); margin-top: 8px; }
.hero-card__line--short { width: 60%; }
.hero-card__flow { display: flex; align-items: center; margin-top: 10px; }
.flow-node { width: 10px; height: 10px; border-radius: 50%; background: var(--color-blue-500); flex-shrink: 0; }
.flow-line { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, var(--color-border-strong) 0 4px, transparent 4px 8px); margin: 0 4px; }
.flow-dot { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--color-blue-400); animation: flow-travel 3s linear infinite; }
@keyframes flow-travel { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

/* Positions / z-index / sizes per component (desktop only) */
@media (min-width: 1024px) {
  .hero-card-sms   { width: 200px; top: 4%; left: -9%; z-index: 22; }
  .hero-card-growth{ width: 176px; top: -6%; right: 6%; z-index: 23; }
  /* Stage B fix (B0): was `right:-11%`, which pushed this card past the
     .hero-home right edge at 1280/1440 (only invisibly clipped by
     .hero-home's own overflow:hidden, not caught by scrollWidth checks —
     same class of bug documented in the Stage A fixes section). Pulled
     inside the .hero-ecosystem box so it stays within the section. */
  .hero-card-seo   { width: 168px; top: 34%; right: 3%; z-index: 18; }
  .hero-card-auto  { width: 260px; bottom: 4%; left: 14%; z-index: 24; }
  /* Stage B fix (B0): same overflow issue as hero-card-seo above, was `right:-8%`. */
  .hero-card-lead  { width: 152px; bottom: 18%; right: 3%; z-index: 19; }
  .hero-card-api   { display: none; width: 64px; height: 64px; top: 12%; left: 30%; z-index: 8; text-align: center; padding: 10px 4px; }
}
@media (min-width: 1280px) {
  .hero-card-api { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 50%; }
  .hero-card-api svg { width: 18px; height: 18px; color: var(--color-blue-500); }
  .hero-card-api span { font-size: 10px; font-weight: 700; }
}
@media (min-width: 1024px) {
  .hero-card-sms, .hero-card-growth, .hero-card-auto { pointer-events: auto; }
  .hero-card-seo, .hero-card-lead, .hero-card-api { pointer-events: none; }
}

/* Float animation — desktop/tablet only, disabled on touch-only + reduced-motion (handled above) */
@media (min-width: 768px) {
  .hero-card-sms    { animation: float-a 4.2s ease-in-out infinite; animation-delay: -1.1s; }
  .hero-card-growth { animation: float-b 5.6s ease-in-out infinite; animation-delay: -2.4s; }
  .hero-card-seo    { animation: float-c 6.4s ease-in-out infinite; animation-delay: -0.6s; }
  .hero-card-lead   { animation: float-a 4.8s ease-in-out infinite; animation-delay: -3.0s; }
}
@keyframes float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes float-c { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Mobile / tablet: cards become a horizontal scroll row of static glass-fake chips */
@media (max-width: 1023px) {
  .hero-card {
    position: static;
    flex: 0 0 auto;
    width: 220px;
    scroll-snap-align: start;
    animation: none !important;
  }
  .hero-card-seo, .hero-card-lead, .hero-card-api { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-card-growth { display: block; }
}
@media (max-width: 767px) {
  .hero-card-growth { display: none; }
}

/* ---- 21.2 Bento Grid ("Everything Your Business Needs") ---- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Explicit row heights (not "auto"): the tall cards (web/seo/soft) span 2
     rows each with a percentage flex-basis media area inside (see below).
     A percentage flex-basis needs a DEFINITE height to resolve against; with
     "auto" rows the browser falls back to sizing each spanned row from
     content in a way that made the two web+seo rows inflate well past what
     either card's own content needed, leaving a large dead gap under the
     text once the media's percentage was finally resolved against that
     inflated height. Fixed row heights remove the ambiguity entirely. */
  grid-template-rows: 170px 170px auto 170px 170px;
  grid-template-areas:
    "web      web      seo"
    "web      web      seo"
    "automate automate automate"
    "sms      ai       soft"
    "mktg     mktg     soft";
  gap: 20px;
}
.bento-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  color: inherit;
  transition: transform 250ms var(--ease-standard), box-shadow 250ms var(--ease-standard), border-color 250ms var(--ease-standard);
}
.bento-card:hover { text-decoration: none; }
@media (hover: hover) {
  .bento-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: var(--shadow-floating); border-color: var(--color-blue-500); }
  .bento-card:hover .bento-card__media img { transform: scale(1.06); }
}
.bento-card__media { position: relative; overflow: hidden; flex: 1; }
.bento-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-standard); }
.bento-card__media::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(180deg, transparent, #fff);
}
.bento-card__body { padding: 20px 24px 24px; position: relative; z-index: 1; }
.bento-card__icon {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--color-blue-100); color: var(--color-blue-500);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.bento-card__icon svg { width: 20px; height: 20px; }
.bento-card__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h4); color: var(--color-text-heading); margin: 0; }
.bento-card__desc { margin-top: 6px; font-size: var(--text-body-sm); color: var(--color-text-body); }
.bento-card__link { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--space-3); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-blue-700); }
.bento-card__link svg { width: 16px; height: 16px; transition: transform var(--duration-fast) ease; }
.bento-card:hover .bento-card__link svg { transform: translateX(4px); }

.bento-card--web  { grid-area: web;  min-height: 360px; }
.bento-card--seo  { grid-area: seo;  min-height: 360px; }
/* Named area is "automate", not "auto" — `grid-area: auto` is the CSS
   keyword for "no explicit placement" and can never reference a custom
   named area called "auto"; this collision was silently breaking the
   entire desktop/tablet tessellation (the Marketing Automation card fell
   back to normal auto-placement instead of spanning its reserved full-width
   row, which is why large gaps appeared elsewhere in the grid). */
.bento-card--auto { grid-area: automate; min-height: 168px; flex-direction: row; }
.bento-card--sms  { grid-area: sms;  min-height: 152px; }
.bento-card--ai   { grid-area: ai;   min-height: 152px; }
.bento-card--soft { grid-area: soft; min-height: 360px; }
.bento-card--mktg { grid-area: mktg; min-height: 152px; flex-direction: row; }

.bento-card--web .bento-card__media { flex: 0 0 65%; }
.bento-card--seo .bento-card__media { flex: 0 0 55%; }
/* Software & Web Solutions' copy is two lines (longer than Web Dev/SEO's
   one-liners) — give its text area more room than the other two tall
   cards so "Learn More" doesn't get clipped by .bento-card's overflow:hidden. */
.bento-card--soft .bento-card__media { flex: 0 0 45%; }
.bento-card--auto .bento-card__media, .bento-card--mktg .bento-card__media { flex: 0 0 42%; }
.bento-card--auto .bento-card__body, .bento-card--mktg .bento-card__body { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.bento-card--auto .bento-card__media::after, .bento-card--mktg .bento-card__media::after {
  height: 100%; width: 30%; inset: 0 0 0 auto;
  background: linear-gradient(90deg, transparent, #fff);
}
@media (hover: hover) {
  .bento-card--auto:hover .bento-card__media img, .bento-card--mktg:hover .bento-card__media img { transform: scale(1.04); }
}
.bento-card--sms, .bento-card--ai { justify-content: center; padding: 20px; transition: background-color 200ms ease, box-shadow 250ms var(--ease-standard), border-color 250ms var(--ease-standard); }
.bento-card--sms .bento-card__body, .bento-card--ai .bento-card__body { padding: 0; }
@media (hover: hover) {
  .bento-card--sms:hover, .bento-card--ai:hover { background: var(--color-blue-50); transform: none; }
}

@media (max-width: 1023px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "web      web"
      "seo      soft"
      "automate automate"
      "mktg     mktg"
      "sms      ai";
  }
  .bento-card--web { min-height: 240px; }
  /* Desktop uses fixed 170px rows; they must not leak into tablet/mobile
     (they squashed cards and made them overlap at <=1023px). */
  .bento-grid { grid-template-rows: none; grid-auto-rows: auto; }
  .bento-card--web .bento-card__media, .bento-card--seo .bento-card__media, .bento-card--soft .bento-card__media { flex: none; height: 200px; }
}
@media (max-width: 767px) {
  /* Reset the tablet grid-template-areas entirely — leaving it set while
     only changing grid-template-columns here left the named "web-start"/
     "web-end" etc. lines from the tablet map active for grid-row, which
     misplaced/overlapped cards. grid-area: auto clears the per-card
     assignment so plain single-column auto-placement (+ order) applies. */
  /* Two columns (not one): sms + ai must sit side by side per spec 5.2;
     full-width cards span both columns via grid-column: 1 / -1 below. */
  .bento-grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: none; }
  .bento-card--web, .bento-card--seo, .bento-card--auto, .bento-card--mktg, .bento-card--soft,
  .bento-card--sms, .bento-card--ai {
    grid-area: auto;
  }
  .bento-card--web, .bento-card--seo, .bento-card--auto, .bento-card--mktg, .bento-card--soft {
    grid-column: 1 / -1;
  }
  .bento-card--sms, .bento-card--ai { grid-column: span 1; }
  /* Reading order per .pipeline/08-ux-design-v2.md 5.2: web -> auto -> seo -> mktg -> soft -> [sms + ai] */
  .bento-card--web  { order: 1; }
  .bento-card--auto { order: 2; }
  .bento-card--seo  { order: 3; }
  .bento-card--mktg { order: 4; }
  .bento-card--soft { order: 5; }
  .bento-card--sms  { order: 6; }
  .bento-card--ai   { order: 7; }
  .bento-card--auto, .bento-card--mktg { flex-direction: column; }
  .bento-card--auto .bento-card__media, .bento-card--mktg .bento-card__media { flex: none; height: 180px; }
  .bento-card--auto .bento-card__media::after, .bento-card--mktg .bento-card__media::after { height: 40%; width: 100%; inset: auto 0 0 0; background: linear-gradient(180deg, transparent, #fff); }
  .bento-card--web .bento-card__media, .bento-card--seo .bento-card__media, .bento-card--soft .bento-card__media { height: 180px; flex: none; }
}
.bento-pricing-link { margin-top: var(--space-6); text-align: center; }

/* ---- 21.3 Process — Interactive Workflow ---- */
.process-flow-v2 { position: relative; padding-top: 24px; }
/* Line-draw implementation note: the original spec called for an SVG
   <path stroke="url(#gradient)"> animated via stroke-dashoffset. That was
   replaced with a plain CSS div + gradient BACKGROUND animated via
   transform:scaleX() after testing found that this Chromium build (and
   reproducibly, in complete isolation outside this project's CSS/JS) does
   not paint SVG STROKE gradients at all — `fill="url(#g)"` renders fine,
   `stroke="url(#g)"` renders nothing, confirmed with getBoundingClientRect/
   getBBox showing correct non-zero geometry and a fully valid, correctly
   resolved <linearGradient> with correct stop colors, yet zero pixels
   painted; forcing a solid stroke color at the same width/position painted
   correctly. This is a rendering engine limitation, not a bug in this
   codebase, but a CSS gradient background is 100% reliable and produces
   the identical visual result, so it replaces the SVG approach entirely. */
.process-path-track { position: relative; width: 100%; height: 100px; overflow: visible; }
.process-path-line {
  position: absolute;
  top: 50%;
  left: 3.3%;
  right: 3.3%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: var(--radius-full);
  background: var(--gradient-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--duration-draw) var(--ease-out-soft);
}
.process-flow-v2.is-drawn .process-path-line { transform: scaleX(1); }
.process-nodes-v2 {
  position: relative;
  margin-top: -70px;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}
.process-node-v2 {
  text-align: center;
  opacity: 0.4;
  transform: scale(0.85);
  transition: opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}
.process-flow-v2.is-drawn .process-node-v2 { opacity: 1; transform: scale(1); }
.process-node-v2 .process-node {
  border-color: var(--color-border-strong);
  color: var(--color-text-muted);
  transition: border-color 300ms var(--ease-standard), color 300ms var(--ease-standard), box-shadow 300ms var(--ease-standard);
}
.process-flow-v2.is-drawn .process-node-v2 .process-node { border-color: var(--color-blue-500); color: var(--color-blue-500); }
.process-node-v2:nth-child(1) { transition-delay: 0ms; }
.process-node-v2:nth-child(2) { transition-delay: 267ms; }
.process-node-v2:nth-child(3) { transition-delay: 534ms; }
.process-node-v2:nth-child(4) { transition-delay: 800ms; }
.process-node-v2:nth-child(5) { transition-delay: 1067ms; }
.process-node-v2:nth-child(6) { transition-delay: 1333ms; }
.process-flow-v2.is-drawn .process-node-v2:last-child .process-node {
  box-shadow: 0 0 0 8px rgba(47,107,255,0.15), var(--shadow-hover);
  animation: grow-pulse 600ms var(--ease-out-soft) 1333ms 1;
}
@keyframes grow-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }

@media (max-width: 1023px) {
  .process-path-track { display: none; }
  .process-nodes-v2 { grid-template-columns: repeat(3, 1fr); row-gap: var(--space-7); margin-top: 0; }
  .process-node-v2 { opacity: 1; transform: none; }
  .process-node-v2 .process-node { border-color: var(--color-blue-500); color: var(--color-blue-500); }
}
@media (max-width: 767px) {
  .process-nodes-v2 { display: none; } /* replaced by .process-flow (v1 vertical timeline) below 768px */
}
@media (min-width: 768px) {
  .process-flow.process-flow--mobile-only { display: none; }
}

/* ---- 21.4 Platforms — Product Showcase ---- */
.platform-showcase-grid { display: flex; flex-direction: column; gap: var(--space-8); }
.platform-showcase {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-7);
  align-items: center;
}
.platform-showcase:nth-child(even) .platform-showcase__media { order: 2; }
.platform-showcase:nth-child(even) .platform-showcase__body { order: 1; }
.platform-showcase__media {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-elevated);
  aspect-ratio: 4/3;
  transform: perspective(1000px) rotateY(-6deg);
  transition: transform 400ms var(--ease-standard);
}
#hantarsms-showcase .platform-showcase__media { transform: perspective(1000px) rotateY(-6deg); }
#smmgo-showcase .platform-showcase__media { transform: perspective(1000px) rotateY(6deg); }
@media (hover: hover) {
  .platform-showcase__media:hover { transform: perspective(1000px) rotateY(-2deg); }
  #smmgo-showcase .platform-showcase__media:hover { transform: perspective(1000px) rotateY(2deg); }
}
.platform-showcase__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
#hantarsms-showcase .platform-showcase__media img { object-position: left center; }
#smmgo-showcase .platform-showcase__media img { object-position: right center; }
.platform-showcase__chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  font-size: var(--text-caption); font-weight: 600;
  color: var(--color-text-heading);
}
.platform-showcase__chip svg { width: 14px; height: 14px; color: var(--color-blue-500); }
.platform-showcase__chip--status { color: var(--color-accent-positive); }
.platform-showcase__chip--status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-positive); }
/* Stage B fix (see .pipeline/03-build-notes.md "Round 7 — Stage B"): these
   were originally negative-offset (bottom:6%;left:-6% / top:42%;left:-8%) to
   make the chips hang past the media's edge for a "floating over the frame"
   look. .platform-showcase__media has overflow:hidden (needed for the
   image's own rounded corners), so any chip pushed past that edge gets
   silently clipped — verified with a real (non-fullPage) screenshot on
   platforms/hantarsms: the "SMS API" chip rendered as a flush-cut "MS API"
   with no left rounded corner, same class of "ancestor overflow:hidden eats
   part of an absolutely-positioned child" bug as the Stage B B0 hero-card
   fix. Kept fully inside the media box instead (small positive inset). */
.platform-showcase__chip-1 { bottom: 6%; left: 4%; }
.platform-showcase__chip-2 { top: 8%; right: 4%; }
/* Detail-page showcases (platforms/hantarsms, platforms/smmgo) get a 3rd
   chip since they're the "full-size, bigger stage" version per
   .pipeline/08-ux-design-v2.md 7.1 (homepage keeps 2). */
.platform-showcase__chip-3 { top: 42%; left: 4%; }
@media (max-width: 1023px) {
  .platform-showcase-grid--single .platform-showcase { grid-template-columns: 1fr; }
  .platform-showcase-grid--single .platform-showcase__body { text-align: center; }
}
.platform-wordmark { font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; }
.platform-wordmark--hantarsms { color: var(--color-blue-500); }
.platform-wordmark--smmgo { color: var(--color-blue-400); }

@media (max-width: 767px) {
  .platform-showcase { grid-template-columns: 1fr; }
  .platform-showcase:nth-child(even) .platform-showcase__media,
  .platform-showcase:nth-child(even) .platform-showcase__body { order: initial; }
  .platform-showcase__media { transform: none; aspect-ratio: auto; }
  .platform-showcase__media img { object-fit: contain; object-position: center; }
  #hantarsms-showcase .platform-showcase__media img, #smmgo-showcase .platform-showcase__media img { object-position: center; }
  .platform-showcase__chip { position: static; display: inline-flex; margin: 8px 8px 0 0; }
}

/* ---- 21.5 Why SMHG + Industries merge ---- */
.why-smhg-grid { display: grid; grid-template-columns: 60% 40%; gap: var(--space-7); align-items: start; }
@media (max-width: 1023px) { .why-smhg-grid { grid-template-columns: 1fr; } }

.feature-list__item {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 0 20px 16px;
  border-left: 2px solid transparent;
  transition: border-color 250ms ease;
}
.feature-list__item + .feature-list__item { border-top: 1px solid var(--color-border); }
.feature-list__item.is-visible { border-left-color: var(--color-blue-500); }
.feature-list__icon { width: 32px; height: 32px; color: var(--color-blue-500); flex-shrink: 0; }
.feature-list__icon svg { width: 32px; height: 32px; }
.feature-list__body h4 { margin: 0; }
.feature-list__body p { margin-top: 4px; font-size: var(--text-body-sm); color: var(--color-text-body); }

/* v2 fix: the original layout scattered 5 icon chips at hand-picked
   absolute % coordinates across a full aspect-ratio:4/5 panel, which on a
   real render left the panel looking sparse/random rather than "designed"
   (mostly empty space, no visual grouping). Replaced with a single
   structured card containing an icon + label row per feature, vertically
   centered in the same reserved column width. */
.why-side-panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/5;
  animation: float-b 7s ease-in-out infinite;
}
.why-side-panel__card {
  width: 100%;
  padding: var(--space-6) var(--space-5);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.why-side-panel__row {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-text-heading);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.why-side-panel__row:last-child { padding-bottom: 0; border-bottom: none; }
.why-side-panel__icon {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  background: var(--color-blue-100);
  color: var(--color-blue-500);
}
.why-side-panel__icon svg { width: 20px; height: 20px; }
@media (max-width: 1023px) { .why-side-panel { display: none; } }

.industries-marquee {
  overflow: hidden;
  margin-top: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.industries-marquee__row { display: flex; gap: 16px; width: max-content; }
.industries-marquee__row--1 { animation: marquee-left 38s linear infinite; }
.industries-marquee__row--2 { animation: marquee-right 34s linear infinite; margin-top: 16px; }
@keyframes marquee-left  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.industry-pill { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: #fff; white-space: nowrap; }
.industry-pill svg { width: 20px; height: 20px; color: var(--color-blue-500); }
@media (hover: hover) {
  .industries-marquee:hover .industries-marquee__row { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .industries-marquee { overflow-x: auto; }
  .industries-marquee__row { width: max-content; }
}
@media (max-width: 767px) {
  .industries-marquee__row--2 { display: none; }
}

/* ---- 21.6 CTA Band v2 — glow orbs + drift (v1 radius-xl card + cta-bg.webp
   photo background kept unchanged; this only upgrades the overlay). ---- */
.cta-band::before {
  background:
    var(--glow-blue-orb),
    var(--glow-blue-orb-2),
    linear-gradient(135deg, rgba(10,15,30,0.88) 0%, rgba(19,34,68,0.78) 55%, rgba(27,58,134,0.7) 100%);
  background-size: 140% 140%, 140% 140%, 100% 100%;
  animation: cta-drift var(--duration-ambient) ease-in-out infinite alternate;
}
.cta-band::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  z-index: 0;
}
@keyframes cta-drift {
  from { background-position: 0% 0%, 100% 100%, 0 0; }
  to   { background-position: 8% 6%, 92% 94%, 0 0; }
}

/* ============================================================
   ---------- 22. Stage B (pricing page, inner-page hero v2,
   FAQ accordion, About Company System, JB chips, Contact panel) ----------
   See .pipeline/08-ux-design-v2.md sections 6-12 and
   .pipeline/03-build-notes.md "Round 7 — Stage B" for notes/deviations.
   ============================================================ */

/* ---- 22.1 Inner-page hero v2: faint glow + dot grid on every .hero-inner,
   plus an optional single floating info card (services/platforms/about/
   contact/JB — not legal, which uses --minimal below). ---- */
.hero-inner::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(400px 320px at 85% 20%, rgba(47,107,255,0.06), transparent 70%);
}
.hero-inner::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  opacity: 0.4;
  background-image: radial-gradient(rgba(11,18,32,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.hero-inner .container { position: relative; z-index: 1; }
.hero-inner--minimal::before { background: radial-gradient(400px 320px at 85% 20%, rgba(47,107,255,0.04), transparent 70%); }
.hero-inner--minimal::after { display: none; }

/* Single decorative floating card on service/platform/about/contact/JB hero
   right side. Reuses the .hero-card__* content classes from section 21.1
   (those are independent of the .hero-card positioning rules), just with
   its own static (non-floating) position — internal pages stay "Calm" per
   the visual-strength rhythm in 08-ux-design-v2.md section 1.6. */
.page-hero-card { display: none; }
@media (min-width: 1024px) {
  .page-hero-card {
    display: block;
    position: absolute;
    top: 30%;
    right: 6%;
    width: 180px;
    z-index: 1;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    font-size: var(--text-caption);
    color: var(--color-text-body);
  }
}

/* ---- 22.2 FAQ accordion (native <details>/<summary>, zero JS — used on
   service pages and Pricing; FAQPage JSON-LD text is copied verbatim from
   the visible Q/A here, only the wrapper markup changed from v1's flat
   .faq-item stack). ---- */
.faq-accordion { display: flex; flex-direction: column; }
.faq-accordion details { border-bottom: 1px solid var(--color-border); padding: var(--space-4) 0; }
.faq-accordion details:first-child { padding-top: 0; }
.faq-accordion summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-3);
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.faq-accordion summary::-webkit-details-marker { display: none; }
.faq-accordion summary span { font-family: var(--font-heading); font-weight: 600; font-size: var(--text-h4); color: var(--color-text-heading); }
.faq-accordion .faq-chevron { flex-shrink: 0; color: var(--color-text-muted); transition: transform 250ms var(--ease-standard); }
.faq-accordion details[open] .faq-chevron { transform: rotate(90deg); }
.faq-accordion .faq-answer { margin-top: var(--space-3); font-size: var(--text-body-sm); color: var(--color-text-body); }
.faq-accordion .faq-answer p { margin: 0; }

/* ---- 22.3 About — Company System interactive diagram ---- */
.company-system { margin: var(--space-6) 0 0; }
.company-system__svg { display: block; margin: 0 auto; max-width: 720px; width: 100%; height: auto; overflow: visible; }
.company-system__svg text { font-family: var(--font-body); fill: var(--color-text-body); }
.company-system .trunk-path { stroke: var(--color-blue-500); stroke-width: 2; fill: none; }
.company-system .mid-node text { fill: var(--color-text-heading); }
.company-system .mid-node circle { stroke: var(--color-blue-500); }
.company-system .branch path { stroke: var(--color-border-strong); stroke-width: 1.5; fill: none; transition: stroke 200ms ease, stroke-width 200ms ease; }
.company-system .branch .leaf circle { fill: #fff; stroke: var(--color-border-strong); stroke-width: 1.5; transition: stroke 200ms ease, transform 200ms ease; transform-origin: center; transform-box: fill-box; }
.company-system .branch .leaf text { fill: var(--color-text-body); transition: fill 200ms ease; }
.company-system .branch .leaf use { color: var(--color-text-muted); transition: color 200ms ease; }
@media (hover: hover) {
  .company-system .branch:hover path { stroke: var(--color-blue-500); stroke-width: 2.5; }
  .company-system .branch:hover .leaf circle { stroke: var(--color-blue-500); transform: scale(1.08); }
  .company-system .branch:hover .leaf text { fill: var(--color-blue-700); font-weight: 600; }
  .company-system .branch:hover .leaf use { color: var(--color-blue-500); }
}
.company-system .core-node circle { fill: var(--color-bg-navy); transition: filter 200ms ease; }
.company-system .core-node text { fill: #fff; font-weight: 700; }
@media (hover: hover) {
  .company-system .core-node:hover circle { filter: drop-shadow(0 0 12px rgba(47,107,255,0.4)); }
}
@media (max-width: 767px) { .company-system__svg { display: none; } }
.system-list { display: none; }
@media (max-width: 767px) {
  .system-list { display: block; margin-top: var(--space-6); }
  .system-list h4 { margin-top: var(--space-5); }
  .system-list h4:first-child { margin-top: 0; }
  .system-list ul { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); }
  .system-list li { display: flex; gap: 10px; align-items: center; font-size: var(--text-body-sm); color: var(--color-text-body); }
  .system-list li svg { width: 16px; height: 16px; color: var(--color-blue-500); flex-shrink: 0; }
}

/* ---- 22.4 JB page floating chips over .jb-media ---- */
.jb-media { position: relative; }
.jb-chip { display: none; }
@media (min-width: 1024px) {
  .jb-chip {
    display: inline-flex; align-items: center; gap: 8px;
    position: absolute;
    padding: 10px 16px;
    border-radius: var(--radius-full);
    font-size: var(--text-caption); font-weight: 600;
    color: var(--color-text-heading);
  }
  .jb-chip svg { width: 16px; height: 16px; color: var(--color-blue-500); flex-shrink: 0; }
  .jb-chip--pin { top: 6%; left: 4%; }
  .jb-chip--sms { top: 10%; right: 4%; }
  .jb-chip--lead { bottom: 6%; left: 50%; transform: translateX(-50%); }
}

/* ---- 22.5 Contact — Floating Contact Panel (glass) ---- */
.contact-aside {
  background: var(--gradient-soft-section);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.contact-panel { margin-top: var(--space-5); }
.contact-panel .glass-panel { padding: var(--space-6); border-radius: var(--radius-lg); }
.contact-panel h3 { margin-bottom: 4px; }
.contact-panel .panel-sub { font-size: var(--text-body-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.contact-panel label { display: block; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-heading); margin-top: var(--space-4); }
.contact-panel label:first-of-type { margin-top: 0; }
.contact-panel input, .contact-panel select, .contact-panel textarea {
  width: 100%; margin-top: 6px;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-text-heading);
}
.contact-panel textarea { resize: vertical; min-height: 72px; }
.contact-panel .btn { margin-top: var(--space-4); width: 100%; }
.contact-panel .panel-note { margin-top: var(--space-3); font-size: var(--text-caption); color: var(--color-text-muted); }
.contact-panel-divider { margin: var(--space-5) 0; border-top: 1px solid var(--color-border); }
@media (max-width: 1023px) {
  .contact-panel .glass-panel { background: rgba(255,255,255,0.92); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---- 22.6 Pricing page ---- */
.pricing-section { scroll-margin-top: 168px; }
.pricing-subnav {
  position: sticky;
  top: 96px; /* header 72px + 16px top gap + 8px buffer */
  z-index: 400;
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-nav);
  -webkit-backdrop-filter: var(--glass-blur-nav);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 0;
}
@supports not (backdrop-filter: blur(1px)) { .pricing-subnav { background: rgba(255,255,255,0.97); } }
.pricing-subnav .container { overflow-x: auto; scrollbar-width: none; padding-top: 0; padding-bottom: 0; }
.pricing-subnav .container::-webkit-scrollbar { display: none; }
.pricing-subnav ul { display: flex; gap: 8px; width: max-content; }
.pricing-subnav a {
  display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: var(--radius-full);
  font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-body);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
.pricing-subnav a:hover { border-color: var(--color-blue-500); color: var(--color-blue-700); text-decoration: none; }

.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 767px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card { border-radius: var(--radius-lg); padding: 32px; }
.tier-card--self { background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.tier-card--pro { background: #fff; border: 1px solid var(--color-border); box-shadow: var(--shadow-elevated); position: relative; }
.tier-card--pro::before { content:""; position:absolute; top:0; left:24px; right:24px; height:3px; background: var(--gradient-brand); border-radius: 0 0 4px 4px; }
.tier-card--custom { background: var(--color-bg-navy-soft); color: var(--color-text-inverse); border: 1px solid var(--color-border-navy); }
.tier-card--custom h3, .tier-card--custom .tier-price { color: #fff; }
.tier-card--custom p { color: var(--color-text-inverse-soft); }
.tier-price { font-family: var(--font-heading); font-weight: 700; font-size: var(--text-h2); margin-top: var(--space-2); color: var(--color-text-heading); }
.tier-card p + p { margin-top: var(--space-3); }
.tier-card .btn { margin-top: var(--space-5); }

.pricing-group { padding-top: var(--space-8); }
.pricing-group__intro { max-width: 720px; margin-bottom: var(--space-6); }
.pricing-group__intro p { margin-top: var(--space-2); color: var(--color-text-body); }
.pricing-group__back { margin-top: var(--space-5); font-size: var(--text-body-sm); }
.pricing-group__disclaimer { margin-top: var(--space-5); font-size: var(--text-body-sm); color: var(--color-text-muted); font-style: italic; }

.pricing-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); align-items: stretch; }
.pricing-card-grid--1 { grid-template-columns: minmax(0,480px); justify-content: center; }
@media (max-width: 1023px) {
  .pricing-card-grid:not(.pricing-card-grid--1) { grid-template-columns: repeat(2, 1fr); }
  .pricing-card-grid:not(.pricing-card-grid--1) > :nth-child(3) { grid-column: 1 / -1; max-width: 400px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .pricing-card-grid:not(.pricing-card-grid--1) { grid-template-columns: 1fr; }
  .pricing-card-grid:not(.pricing-card-grid--1) > :nth-child(3) { grid-column: auto; max-width: none; margin: 0; }
}

.pricing-card {
  background: #fff; border-radius: var(--radius-lg); padding: 32px;
  border: 1px solid var(--color-border); box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
}
.pricing-card.is-popular { border-color: var(--color-blue-500); box-shadow: var(--shadow-elevated); position: relative; }
@media (min-width: 768px) { .pricing-card.is-popular { transform: translateY(-8px); } }
.pricing-card.is-popular::before { content:""; position:absolute; top:0; left:20px; right:20px; height:3px; background:var(--gradient-brand); }
.pricing-card__badge { position:absolute; top:16px; right:16px; font-size:var(--text-caption); font-weight:600; background:var(--color-blue-100); color:var(--color-blue-700); padding:4px 12px; border-radius:var(--radius-full); }
.pricing-card__who { margin-top: 8px; font-size: var(--text-body-sm); color: var(--color-text-muted); }
.pricing-card__price { font-family: var(--font-heading); font-size: var(--text-h2); font-weight:700; color:var(--color-text-heading); margin-top: var(--space-4); }
.pricing-card__price-suffix { font-size: var(--text-body-sm); color: var(--color-text-muted); font-weight:500; margin-left:4px; }
.pricing-card__billing-tag { display:inline-block; font-size:var(--text-caption); background:var(--color-blue-50); color:var(--color-blue-700); padding:2px 10px; border-radius:var(--radius-full); margin-top:8px; }
.pricing-card__features { margin-top:20px; flex:1; display: flex; flex-direction: column; gap: 2px; }
.pricing-card__features li { display:flex; gap:8px; font-size:var(--text-body-sm); padding:6px 0; color: var(--color-text-body); }
.pricing-card__features li svg { width: 16px; height: 16px; color: var(--color-blue-500); flex-shrink: 0; margin-top: 2px; }
.pricing-card__note { margin-top: 12px; font-size: var(--text-caption); color: var(--color-text-muted); font-style: italic; }
.pricing-card .btn { margin-top: 24px; }
.pricing-card__more { margin-top: var(--space-3); }
.pricing-card__more summary { list-style: none; cursor: pointer; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-blue-700); min-height: 44px; display: flex; align-items: center; }
.pricing-card__more summary::-webkit-details-marker { display: none; }
.pricing-card__more ul { margin-top: var(--space-3); }

.compact-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
@media (max-width: 1023px) { .compact-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .compact-card-grid { grid-template-columns: 1fr; } }
.compact-card {
  background:#fff; border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: 20px; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
  transition: transform 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
}
@media (hover:hover) { .compact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } }
.compact-card__icon { width:36px; height:36px; border-radius:var(--radius-md); background:var(--color-blue-100); color:var(--color-blue-500); display:flex; align-items:center; justify-content:center; }
.compact-card__icon svg { width: 18px; height: 18px; }
.compact-card__name { margin-top: var(--space-3); font-family: var(--font-heading); font-weight: 700; color: var(--color-text-heading); }
.compact-card__desc { margin-top: 4px; font-size: var(--text-body-sm); color: var(--color-text-body); flex: 1; }
.compact-card__price { font-family:var(--font-heading); font-weight:700; font-size:var(--text-h3); margin-top:12px; color: var(--color-text-heading); }
.compact-card__note { margin-top: 4px; font-size: var(--text-caption); color: var(--color-text-muted); }
.compact-card .btn { height:40px; margin-top:16px; }

.pricing-helper { background: var(--color-bg-alt); border-radius: var(--radius-xl); padding: 48px; text-align:center; }
.pricing-helper h2 { margin-bottom: var(--space-3); }
.pricing-helper p { max-width: 640px; margin: 0 auto; color: var(--color-text-body); }
.pricing-helper .cta-row { justify-content: center; }

.pricing-disclaimer {
  max-width: 640px; margin: 0 auto; padding: 32px var(--space-4);
  text-align:center; font-size: var(--text-body-sm); color: var(--color-text-muted); font-style: italic;
  border-top: 1px solid var(--color-border);
}
@media (max-width: 767px) {
  .pricing-card.is-popular { transform: none; }
}