/* ==========================================================================
   FINCHBYTE — MASTER CONSOLIDATED HOMEPAGE STYLESHEET
   15-Section Unified Architecture with Design Tokens, Glassmorphism, 
   3D Transforms, Canvas Backdrops, Funnel Geometry & Responsive Systems
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. DESIGN TOKENS & CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
  --bg-dark: #f8fafc;
  --bg-card: rgba(255, 255, 255, 0.88);
  --bg-card-solid: #ffffff;
  --bg-card-hover: #ffffff;
  --border-color: rgba(15, 23, 42, 0.08);
  --border-glow: rgba(79, 70, 229, 0.4);
  
  --primary-accent: #4f46e5;
  --primary-glow: rgba(79, 70, 229, 0.25);
  --accent-purple: #7c3aed;
  --accent-blue: #2563eb;
  --accent-emerald: #059669;
  --accent-amber: #d97706;
  --accent-rose: #e11d48;
  --accent-cyan: #06b6d4;
  
  --text-main: #0f172a;
  --text-muted: #475569;
  --text-dim: #64748b;
  
  --fb-radius-sm: 10px;
  --fb-radius-md: 18px;
  --fb-radius-lg: 26px;
  --fb-radius-full: 9999px;
  
  --transition-fast: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* Height of the shared sticky site header (.fb-header) */
  --fb-header-h: 81px;

  /* Unified Horizontal Margin */
  --px: clamp(16px, 5vw, 80px);
  
  /* 3D Funnel Global Sizing */
  --fh: 54px;
  --eh: 10px;
}

/* --------------------------------------------------------------------------
   02. GLOBAL RESET & BASE UTILITIES
   -------------------------------------------------------------------------- */
/* Scoped to the homepage container so shared header/footer styles are untouched.
   :where() keeps specificity at 0,0,0 — identical to the original `*` reset — so
   every class rule below still wins over it. */
:where(#finchbyte-homepage),
:where(#finchbyte-homepage *),
:where(#finchbyte-homepage *::before),
:where(#finchbyte-homepage *::after) {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

:where(#finchbyte-homepage),
:where(#finchbyte-homepage h1, #finchbyte-homepage h2, #finchbyte-homepage h3),
:where(#finchbyte-homepage h4, #finchbyte-homepage h5, #finchbyte-homepage h6),
:where(#finchbyte-homepage input, #finchbyte-homepage select),
:where(#finchbyte-homepage textarea, #finchbyte-homepage button),
:where(#finchbyte-homepage .section-title, #finchbyte-homepage .section-title-large),
:where(#finchbyte-homepage .section-heading, #finchbyte-homepage .font-heading),
:where(#finchbyte-homepage .font-monospace) {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  overflow-x: hidden;
  position: relative;
}

:where(#finchbyte-homepage) {
  background-color: transparent;
  color: var(--text-main);
  line-height: 1.6;
}

/* Custom Indigo & Color Utilities */
.text-indigo { color: #4f46e5 !important; }
.bg-indigo-subtle { background-color: rgba(79, 70, 229, 0.1) !important; }
.border-indigo-subtle { border-color: rgba(79, 70, 229, 0.25) !important; }
.bg-indigo { background-color: #4f46e5 !important; }
.text-emerald { color: #059669 !important; }
.bg-emerald-subtle { background-color: rgba(5, 150, 105, 0.1) !important; }
.fw-black { font-weight: 900 !important; }
.fw-extrabold { font-weight: 800 !important; }
.fs-7 { font-size: 0.85rem !important; }
.fs-8 { font-size: 0.75rem !important; }
.fs-9 { font-size: 0.68rem !important; }

/* Consistent Container System */
.container-finchbyte {
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 3.5vw, 48px);
  padding-right: clamp(16px, 3.5vw, 48px);
}

/* Background Static Office Image & Light Gradient Mesh */
.bg-mesh {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -2;
  pointer-events: none;
  background-image: url('../assets/home/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* Typography & Titles */
.section-tag,
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4f46e5 !important;
  background: #ffffff !important;
  padding: 8px 18px;
  border-radius: var(--fb-radius-full);
  border: 1.5px solid #818cf8 !important;
  box-shadow: 0 4px 16px rgba(79, 70, 229, 0.18);
  margin-bottom: 1.25rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.section-tag i,
.section-eyebrow i {
  color: #4f46e5 !important;
  font-size: 0.88rem;
}

.section-tag:hover,
.section-eyebrow:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.28);
}

.section-title,
.section-title-large,
.section-heading,
.hero-title-main,
h1.hero-title-main,
h2.section-title,
h2.section-title-large,
h2.section-heading,
h2.font-heading {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(2.4rem, 3.8vw, 3.6rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  color: #0f172a !important;
  margin-bottom: 1rem;
}

.section-subtitle-text,
.section-desc,
.section-subtitle,
p.text-muted {
  color: #475569 !important;
}

.section-title span.text-gradient,
.text-gradient,
.section-heading .hl,
.section-title-large .hl,
.f-title .text-gradient {
  background: linear-gradient(125deg, #4f46e5 0%, #7c3aed 20%, #db2777 40%, #06b6d4 60%, #7c3aed 80%, #4f46e5 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  animation: smoothGradientMove 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate;
  will-change: background-position;
}

@keyframes smoothGradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.section-subtitle {
  font-size: 1.12rem;
  color: var(--text-muted);
  max-width: 650px;
  font-weight: 400;
  margin-bottom: 2rem;
}

/* Desktop Section Subtitle High Contrast Rules */
@media (min-width: 992px) {
  #hero .section-subtitle,
  #automation .section-subtitle,
  #people .section-subtitle,
  #partnership .section-subtitle {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  }

  /* Section 04 System Subtitle Light Theme High Contrast Dark Slate Fix */
  #system .section-subtitle-text {
    color: #334155 !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-shadow: none !important;
  }
}

/* Button Component Styles */
.btn-finch-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: var(--fb-radius-full);
  border: none;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
  transition: var(--transition-smooth);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-finch-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -75%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(25deg);
  animation: btn-sheen-sweep 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

.btn-finch-primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 40px rgba(79, 70, 229, 0.5);
}

@keyframes btn-sheen-sweep {
  0% { left: -75%; }
  40%, 100% { left: 125%; }
}

.btn-finch-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #ffffff;
  color: #0f172a !important;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 28px;
  border-radius: var(--fb-radius-full);
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transition: var(--transition-smooth);
  text-decoration: none;
  cursor: pointer;
}

.btn-finch-secondary:hover {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.25);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   03. GLOBAL NAVBAR & HEADER
   -------------------------------------------------------------------------- */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.navbar-finch {
  padding: 16px 0;
  transition: all 0.35s ease;
}

#site-header.scrolled .navbar-finch {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  padding: 10px 0;
}

.navbar-brand-logo {
  height: 36px;
  width: auto;
  object-fit: contain;
}

.nav-link-finch {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: #334155 !important;
  padding: 8px 14px !important;
  border-radius: var(--fb-radius-full);
  transition: all 0.2s ease;
}

.nav-link-finch:hover {
  color: #4f46e5 !important;
  background: rgba(79, 70, 229, 0.06);
}

/* --------------------------------------------------------------------------
   04. DESKTOP RIGHT-SIDE SECTION NAVIGATOR
   -------------------------------------------------------------------------- */
#section-nav-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 10px 6px;
  border-radius: 100px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.rail-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-decoration: none;
  padding: 4px;
}

.rail-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.rail-item:hover .rail-dot {
  background: #4f46e5;
  transform: scale(1.4);
}

.rail-item.active .rail-dot {
  background: #4f46e5;
  width: 8px;
  height: 18px;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(79, 70, 229, 0.6);
}

.rail-tooltip {
  position: absolute;
  right: 24px;
  background: #0f172a;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translateX(10px);
  transition: all 0.2s ease;
}

.rail-item:hover .rail-tooltip {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 1200px) {
  #section-nav-rail { display: none !important; }
}

/* --------------------------------------------------------------------------
   05. SECTION 01 — HERO INTRO & LIVE ENGINE
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  #hero {
    margin-top: calc(-1 * var(--fb-header-h));
  }
}

#hero-pin-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* ── Scroll To Explore Tag ── */
.scroll-explore-tag {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 22px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(79, 70, 229, 0.35);
  border-radius: 100px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px rgba(79, 70, 229, 0.15), 0 1px 4px rgba(0,0,0,0.12);
  cursor: default;
  animation: explore-fade-in 1.2s ease 0.5s both;
  white-space: nowrap;
}

@keyframes explore-fade-in {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.explore-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #818cf8;
  box-shadow: 0 0 8px rgba(129, 140, 248, 0.9);
  animation: explore-dot-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes explore-dot-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 8px rgba(129, 140, 248, 0.9); }
  50%       { transform: scale(1.45); box-shadow: 0 0 16px rgba(129, 140, 248, 1); }
}

.explore-tag-text {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.88);
  text-transform: uppercase;
}

.explore-chevron {
  width: 13px;
  height: 13px;
  display: block;
  flex-shrink: 0;
  color: rgba(129, 140, 248, 0.85);
  animation: explore-bounce 1.6s ease-in-out infinite;
}

@keyframes explore-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(3px); }
}

#typewriter-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  text-align: center;
  width: 100%;
}

.typewriter-logo {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(3rem, 11vw, 9.5rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #ffffff !important;
  text-shadow: 0 6px 30px rgba(255, 255, 255, 0.5), 0 2px 10px rgba(15, 23, 42, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.typewriter-char {
  display: inline-block;
  color: #ffffff !important;
}

.typewriter-cursor {
  display: inline-block;
  width: 6px;
  height: clamp(3rem, 10vw, 8.5rem);
  background: #4f46e5;
  margin-left: 6px;
  border-radius: 3px;
  box-shadow: 0 0 16px rgba(79, 70, 229, 0.8);
  animation: cursor-blink 0.85s step-start infinite;
}

@keyframes cursor-blink {
  50% { opacity: 0; }
}

#matter-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: all;
}

#matter-canvas-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

#hero-content-reveal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

#hero-content-reveal.active {
  pointer-events: all;
  opacity: 1;
}

.sales-dashboard-card {
  perspective: 1000px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}

.sim-cursor {
  position: absolute;
  z-index: 50;
  pointer-events: none;
  transition: top 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 2px 8px rgba(79, 70, 229, 0.5));
}

.pipeline-stepper .pipe-stage {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.stage-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cbd5e1;
  transition: all 0.3s;
}

.pipe-stage.active .stage-dot {
  background: #4f46e5;
  box-shadow: 0 0 8px #4f46e5;
}

.pipe-stage.active .stage-label {
  color: #4f46e5 !important;
}

.pipe-line {
  height: 2px;
  background: #e2e8f0;
  transition: background 0.3s;
}

.pipe-line.active {
  background: #4f46e5;
}

.sim-backdrop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.3);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s;
  z-index: 30;
}

.sim-backdrop-overlay.active {
  opacity: 1;
}

.sim-notif-toast {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 8px 12px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.trust-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  color: #334155;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 100px;
  padding: 6px 14px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.trust-badge:hover {
  border-color: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.15);
}

/* --------------------------------------------------------------------------
   06. SECTION 02 — THE PROBLEM (PINNED 3D STACKED DEPTH CAROUSEL)
   -------------------------------------------------------------------------- */
#prob-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--bg-dark);
}

#prob-heading {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  text-align: center;
  z-index: 35;
  padding: 85px 24px 0;
  pointer-events: none;
}

#cards-stage {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.depth-card {
  position: absolute;
  left: 50%;
  top: 58%;
  width: min(560px, 88vw);
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 14px 40px rgba(15, 23, 42, 0.10), 0 2px 10px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  pointer-events: all;
}

.depth-card.critical {
  border: 1.5px solid rgba(239, 68, 68, 0.28);
  box-shadow: 0 16px 45px rgba(239, 68, 68, 0.15), 0 2px 10px rgba(15, 23, 42, 0.04);
  overflow: visible !important;
}

.dc-header {
  padding: 16px 22px 14px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  display: flex;
  align-items: center;
}

#dc-3 {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.dc-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.dc-body {
  padding: 20px 22px;
  position: relative;
}

.dc-watermark {
  position: absolute;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(5.5rem, 14vw, 8rem);
  font-weight: 900;
  color: #dc2626;
  opacity: 0.05;
  line-height: 1;
  user-select: none;
  pointer-events: none;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.dc-footer {
  padding: 12px 22px;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  background: rgba(248, 250, 252, 0.75);
  font-size: 0.72rem;
}

.chat-bubble {
  background: #f1f5f9;
  border-radius: 4px 14px 14px 14px;
  padding: 12px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #1e293b;
  position: relative;
}

.lead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed rgba(15, 23, 42, 0.07);
  font-size: 0.78rem;
}

.score-track {
  background: #f1f5f9;
  border-radius: 6px;
  height: 6px;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #4f46e5, #818cf8);
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: 20px;
  padding: 3px 10px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #dc2626;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.tblink {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dc2626;
  animation: blink 1s step-start infinite;
}

@keyframes blink { 50% { opacity: 0; } }

/* Pop-up Question Items (Bursting outward around Card 3) */
.q-item {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 260px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1.5px solid rgba(239, 68, 68, 0.25);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.15), 0 0 16px rgba(239, 68, 68, 0.12);
  z-index: 60;
  will-change: transform, opacity;
  pointer-events: none;
}

.q-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(239, 68, 68, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dc2626;
  font-size: 0.9rem;
  flex-shrink: 0;
}

#mobile-cards-nav,
#system-mobile-nav {
  display: none;
}

#card-dots {
  position: absolute;
  bottom: 80px;
  left: 50%;
  display: flex;
  gap: 8px;
  z-index: 25;
}

.card-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.15);
  transition: background 0.3s, transform 0.3s;
}

.card-dot.active {
  background: #4f46e5;
  transform: scale(1.3);
}

/* --------------------------------------------------------------------------
   07. SECTION 03 — THE JOURNEY (7 MOMENTS STEPPER)
   -------------------------------------------------------------------------- */
#journey-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

/* Ambient soft background glows */
.glow-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}
.glow-blob-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(99,102,241,0.08) 0%, transparent 70%);
  top: -100px; left: -100px;
}
.glow-blob-2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, rgba(168,85,247,0.06) 0%, transparent 70%);
  bottom: -100px; right: -100px;
}

#journey-layout {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 430px 1fr;
  max-width: 1440px;
  margin: 0 auto;
  z-index: 1;
  padding: 0 clamp(16px, 3vw, 48px);
}

#journey-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px 36px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 28px 0 0 28px;
  margin: 24px 0;
  z-index: 2;
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.04);
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.15);
  border-radius: 100px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4f46e5;
  margin-bottom: 12px;
  width: fit-content;
}

.section-heading {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.7rem, 2.4vw, 2.3rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

/* .section-heading .hl inherits global smooth animated gradient */

#step-counter {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 4.8rem;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.06);
  line-height: 1;
  margin-bottom: 16px;
  display: flex;
  align-items: baseline;
}

#step-counter .step-num {
  color: #4f46e5;
  opacity: 0.9;
}

#journey-stepper-wrap {
  position: relative;
  padding: 8px 0;
}

.journey-v-line-track {
  position: absolute;
  left: 27px;
  top: 24px;
  bottom: 24px;
  width: 4px;
  background: rgba(15, 23, 42, 0.08);
  border-radius: 6px;
  z-index: 0;
  pointer-events: none;
}

.journey-v-line-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 14.28%;
  background: linear-gradient(180deg, #4f46e5, #7c3aed, #0ea5e9);
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(79, 70, 229, 0.5);
  transition: height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#journey-dots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.j-dot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 12px;
  transition: all 0.25s ease;
}

.j-dot:hover {
  background: rgba(79, 70, 229, 0.06);
}

.j-dot-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid rgba(15, 23, 42, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
  color: #64748b;
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  background: rgba(255, 255, 255, 0.5) !important;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.j-dot.active .j-dot-circle {
  background: #4f46e5 !important;
  border-color: #4f46e5;
  color: #ffffff !important;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
  transform: scale(1.12);
}

.j-dot.done .j-dot-circle {
  background: #ffffff !important;
  border-color: #4f46e5;
  color: #4f46e5;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.15);
}

.j-dot-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
}

.j-dot.active .j-dot-label {
  color: #0f172a;
  font-size: 0.92rem;
  font-weight: 900;
}

.j-dot.done .j-dot-label {
  color: #334155;
}

#journey-right-stage {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  perspective: 1200px;
}

.moment-card-container {
  position: absolute;
  width: 100%;
  max-width: 860px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 32px;
  align-items: center;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform, opacity;
}

/* Desktop: give every moment card the same taller body so the stage balances
   the full-height left panel instead of floating as a short strip, and so the
   card stops resizing as you step between moments. Content stays centred via
   the grid's align-items: center. */
@media (min-width: 992px) {
  .moment-card-container {
    /* Fill the stage minus the same 24px the left panel leaves top and bottom,
       so both columns start and end on the same line with no dead space. */
    min-height: calc(100% - 48px);

    /* Sit 24px clear of #journey-left - the same inset the pair leaves top and
       bottom - so there is visible background between the two panels, while the
       left corners stay squared off to match the left panel's 28px 0 0 28px. */
    left: 24px;
    right: 0;
    width: auto;
    max-width: none;
    border-radius: 0 28px 28px 0;

    /* Stack like the mobile view: copy block on top, full-width visual below.
       space-evenly spreads the two blocks over the card's full height without
       stretching either into a hollow box, and the leading gap keeps the
       MOMENT tag clear of the sticky site header that overlaps this section. */
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    align-content: space-evenly;
    align-items: start;
    gap: 0;
  }

  /* Now that the visual runs the card's full width it was only ~180-280px tall,
     which read as a squat letterbox. Give it real height and let the mockup
     inside grow with it, so the frame gets taller rather than going hollow. */
  .moment-card-container > .mockup-widget {
    display: flex;
    flex-direction: column;
    min-height: 400px;
    padding: 24px;
  }

  .moment-card-container > .mockup-widget > :first-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* These two have real chrome - a browser title bar and an ad header - which
     has to stay pinned to the top. Grow their body/creative area instead of
     centring the whole mockup, so they still read as a window and an ad unit. */
  .moment-card-container > .mockup-widget > .browser-mockup,
  .moment-card-container > .mockup-widget > .ad-card-mockup {
    justify-content: flex-start;
  }

  .moment-card-container > .mockup-widget > .browser-mockup > :last-child,
  .moment-card-container > .mockup-widget > .ad-card-mockup > .ad-img-placeholder {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Pills inside those flex bodies would otherwise stretch to the full width;
     full-width elements (.w-100 CTAs) are unaffected. */
  .moment-card-container > .mockup-widget > .browser-mockup > :last-child > .badge,
  .moment-card-container > .mockup-widget > .ad-card-mockup > .ad-img-placeholder > .badge {
    align-self: center;
  }
}

.mc-step-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(79, 70, 229, 0.08);
  border: 1px solid rgba(79, 70, 229, 0.15);
  border-radius: 100px;
  padding: 4px 14px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #4f46e5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mc-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.mc-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 900;
  color: #0f172a;
  line-height: 1.15;
  margin-bottom: 8px;
}

.mc-title .mc-sub {
  display: block;
  font-size: 0.44em;
  font-weight: 600;
  color: #64748b;
  margin-top: 4px;
}

.mc-desc {
  font-size: 0.86rem;
  color: #475569;
  line-height: 1.6;
  margin-bottom: 18px;
}

.mc-bullets {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mc-bullet {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #334155;
}

.mc-bullet-dot {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  flex-shrink: 0;
}

/* Right Panel Interactive Mockup Widgets */
.mockup-widget {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 18px;
  padding: 18px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.ad-card-mockup {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.ad-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid rgba(15,23,42,0.06); }
.ad-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg,#4f46e5,#818cf8); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:800; }
.ad-img-placeholder { height: 110px; background: linear-gradient(135deg,rgba(255,237,213,0.7),rgba(254,215,170,0.7)); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#ea580c; font-weight:800; font-size:0.85rem; }

.browser-mockup { border-radius: 12px; background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.5); overflow: hidden; }
.browser-top { background: rgba(241, 245, 249, 0.6); padding: 6px 10px; display: flex; align-items: center; gap: 6px; }
.b-dot { width: 7px; height: 7px; border-radius: 50%; }

.wa-chat-mockup { background: rgba(239, 234, 226, 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; border: 1px solid rgba(255, 255, 255, 0.5); }
.wa-bubble { max-width: 85%; padding: 8px 12px; border-radius: 12px; font-size: 0.74rem; line-height: 1.4; }
.wa-in { background: rgba(255, 255, 255, 0.85); border-top-left-radius: 2px; align-self: flex-start; color: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.wa-out { background: rgba(220, 248, 198, 0.85); border-top-right-radius: 2px; align-self: flex-end; color: #111827; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

.crm-score-box { background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.5); text-align: center; }
.score-circle { width: 70px; height: 70px; border-radius: 50%; border: 6px solid #4f46e5; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0 auto 10px; }

.seq-timeline { display: flex; flex-direction: column; gap: 10px; }
.seq-step { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 10px; font-size: 0.72rem; }

.cal-card { background: rgba(255, 255, 255, 0.45) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; padding: 16px; border: 1px solid rgba(255, 255, 255, 0.5); }

.win-card { background: linear-gradient(135deg, #fef9c3, #fef08a); border-radius: 16px; padding: 20px; text-align: center; border: 1px solid #fde047; }

/* --------------------------------------------------------------------------
   08. SECTION 04 — THE SYSTEM (ORBIT CAROUSEL & WEBGL MAGIC RINGS)
   -------------------------------------------------------------------------- */
#system-section {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #f8fafc;
}

#silk-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

#vertical-tag-left {
  position: absolute;
  left: 42px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: center center;
  z-index: 12;
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #4f46e5;
  white-space: nowrap;
}

#section-nav-rail {
  display: none !important;
}

.system-container {
  position: relative;
  z-index: 2;
  height: 100vh;
  display: flex;
  align-items: center;
}

.system-grid-layout {
  display: grid;
  grid-template-columns: 520px 1fr;
  gap: 40px;
  align-items: center;
  width: 100%;
}

.system-left-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  padding-right: 12px;
}

.system-left-content .section-title-large {
  font-size: clamp(2.4rem, 3.8vw, 3.6rem);
}

.system-left-content .section-subtitle-text {
  font-size: clamp(0.98rem, 1.25vw, 1.15rem);
  line-height: 1.6;
}

.system-stage-indicators {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.system-ind-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.14);
  border-radius: 18px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.system-ind-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: transparent;
  transition: background 0.3s ease;
}

.system-ind-item:hover,
.system-ind-item.active {
  background: #ffffff;
  border-color: #4f46e5 !important;
  box-shadow: 0 12px 32px rgba(79, 70, 229, 0.2), 0 4px 12px rgba(0, 0, 0, 0.05);
  transform: translateX(12px) scale(1.02);
}

.system-ind-item.active::before {
  background: linear-gradient(180deg, #4f46e5 0%, #7c3aed 100%);
}

.system-ind-num {
  font-size: 0.9rem;
  font-weight: 900;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.1);
  padding: 6px 13px;
  border-radius: 12px;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.system-ind-item.active .system-ind-num {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(79, 70, 229, 0.4);
}

.system-ind-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a !important;
  line-height: 1.2;
  margin-bottom: 2px;
}

.system-ind-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569 !important;
  line-height: 1.35;
}

.system-right-stage {
  position: relative;
  width: 100%;
  height: 680px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#orbit-stage {
  position: relative;
  top: 0;
  left: 0;
  width: 660px;
  height: 660px;
  transform: none;
  z-index: 2;
  margin-left: auto;
  margin-right: 0;
}

#magic-rings-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 310px;
  height: 310px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 8;
  pointer-events: none;
}

#core-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 270px;
  height: 270px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.core-logo-img {
  width: 245px;
  height: 245px;
  object-fit: contain;
  filter: drop-shadow(0 8px 28px rgba(249, 115, 22, 0.35));
  transition: transform 0.3s ease;
}

#core-hub:hover .core-logo-img {
  transform: scale(1.06);
}

.stage-node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 170px;
  margin-left: -85px;
  margin-top: -26px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 100px;
  padding: 7px 14px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
  z-index: 5;
  opacity: 0.55;
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity, width, padding, border-radius;
  cursor: pointer;
  overflow: hidden;
}

.stage-node .node-title,
.stage-node .node-desc,
.stage-node .node-footer {
  display: none;
  opacity: 0;
}

.node-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.node-icon-box {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

@keyframes dynamic-border-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.stage-node.active-spotlight {
  width: 420px !important;
  margin-left: -210px !important;
  margin-top: -95px !important;
  border-radius: 24px !important;
  padding: 28px !important;
  background: #ffffff !important;
  border: 1.5px solid transparent !important;
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.14), 0 0 32px rgba(79, 70, 229, 0.2) !important;
  z-index: 25 !important;
  opacity: 1 !important;
  position: absolute !important;
  overflow: visible !important;
}

.stage-node.active-spotlight::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  padding: 2.5px;
  background: linear-gradient(135deg, #4f46e5, #a855f7, #ec4899, #0ea5e9, #4f46e5);
  background-size: 300% 300%;
  animation: dynamic-border-flow 3.5s ease infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 5;
}

#sn-1.active-spotlight::before {
  background: linear-gradient(135deg, #f97316, #fbbf24, #ec4899, #f97316);
  background-size: 300% 300%;
}
#sn-2.active-spotlight::before {
  background: linear-gradient(135deg, #0ea5e9, #38bdf8, #6366f1, #0ea5e9);
  background-size: 300% 300%;
}
#sn-3.active-spotlight::before {
  background: linear-gradient(135deg, #10b981, #34d399, #06b6d4, #10b981);
  background-size: 300% 300%;
}
#sn-4.active-spotlight::before {
  background: linear-gradient(135deg, #7c3aed, #a855f7, #ec4899, #7c3aed);
  background-size: 300% 300%;
}
#sn-5.active-spotlight::before {
  background: linear-gradient(135deg, #f43f5e, #fb7185, #4f46e5, #f43f5e);
  background-size: 300% 300%;
}

.stage-node.active-spotlight .node-header {
  margin-bottom: 14px !important;
  justify-content: space-between !important;
  position: relative;
  z-index: 6;
}

.stage-node.active-spotlight .node-title {
  display: block !important;
  opacity: 1 !important;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.1;
  margin-bottom: 8px;
  position: relative;
  z-index: 6;
}

.stage-node.active-spotlight .node-desc {
  display: block !important;
  opacity: 1 !important;
  font-size: 0.88rem;
  color: #475569;
  line-height: 1.5;
  margin-bottom: 16px;
  position: relative;
  z-index: 6;
}

.stage-node.active-spotlight .node-footer {
  display: flex !important;
  opacity: 1 !important;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  position: relative;
  z-index: 6;
}

/* --------------------------------------------------------------------------
   09. SECTION 05 — CREATIVE MARKETING (CLOCKS & STICKY SLIDES)
   -------------------------------------------------------------------------- */
#creative {
  position: relative;
  height: 300vh;
}

#creative-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 48% 52%;
  overflow: hidden;
}

.panel-left {
  background: linear-gradient(145deg, #0d0f1a 0%, #1a1040 45%, #0f1e3d 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 20px 60px 20px 20px;
}

.panel-left::before {
  content: '';
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99, 60, 255, 0.28) 0%, transparent 70%);
  top: -80px;
  right: -100px;
  pointer-events: none;
}

.panel-left::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.18) 0%, transparent 70%);
  bottom: -60px;
  left: -60px;
  pointer-events: none;
}

/* ── FULL ANALOG CLOCK WIDGET ── */
.analog-clock-container {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 18px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-bottom: 16px;
}

.analog-clock {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #1e1b4b, #0f172a);
  border: 2px solid rgba(129, 140, 248, 0.45);
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.7), 0 0 20px rgba(99, 102, 241, 0.4);
}

.analog-clock::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #818cf8;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px #818cf8;
  z-index: 5;
}

.clock-tick {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 6px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 1px;
}

.tick-12 { transform: translate(-50%, -50%) rotate(0deg) translateY(-24px); }
.tick-3  { transform: translate(-50%, -50%) rotate(90deg) translateY(-24px); }
.tick-6  { transform: translate(-50%, -50%) rotate(180deg) translateY(-24px); }
.tick-9  { transform: translate(-50%, -50%) rotate(270deg) translateY(-24px); }

.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: 50% 100%;
  border-radius: 4px;
}

.hour-hand {
  width: 3px;
  height: 18px;
  background: #ffffff;
  margin-left: -1.5px;
  z-index: 3;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}

.minute-hand {
  width: 2px;
  height: 24px;
  background: #818cf8;
  margin-left: -1px;
  z-index: 4;
  box-shadow: 0 0 6px #818cf8;
}

.second-hand {
  width: 1.5px;
  height: 26px;
  background: #ef4444;
  margin-left: -0.75px;
  z-index: 4;
  box-shadow: 0 0 6px #ef4444;
}

/* ── CLASSIC 3D FLIP CLOCK ── */
.clock-digital-box {
  display: flex;
  flex-direction: column;
}

.clock-digital-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a5b4fc;
  line-height: 1.2;
  margin-bottom: 4px;
  display: block;
}

.flip-clock-display {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 2px 0 4px;
}

.flip-unit {
  position: relative;
  width: 48px;
  height: 38px;
  perspective: 300px;
}

.flip-card {
  width: 100%;
  height: 100%;
  position: relative;
  background: linear-gradient(180deg, #1c183d 0%, #0e1424 100%);
  border: 1.5px solid rgba(129, 140, 248, 0.45);
  border-radius: 9px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.18), 0 0 12px rgba(99,102,241,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.flip-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(10, 12, 20, 0.7);
  box-shadow: 0 1px 0 rgba(255,255,255,0.1);
  z-index: 4;
  pointer-events: none;
}

.flip-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: #ffffff !important;
  line-height: 1;
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(129, 140, 248, 0.8), 0 2px 4px rgba(0,0,0,0.5);
  z-index: 2;
}

.flip-unit.animate .flip-card {
  animation: flip-down 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border-color: rgba(129, 140, 248, 0.8);
}

@keyframes flip-down {
  0% { transform: rotateX(0deg); filter: brightness(1); }
  50% { transform: rotateX(-90deg); filter: brightness(0.5); }
  100% { transform: rotateX(0deg); filter: brightness(1); }
}

.flip-colon {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 900;
  color: #818cf8;
  margin: 0 3px;
  text-shadow: 0 0 10px rgba(129, 140, 248, 0.9);
  animation: pulse-colon 1.6s infinite ease-in-out;
}

@keyframes pulse-colon {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.85); }
}

.flip-ampm {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #c084fc;
  background: rgba(139, 92, 246, 0.25);
  border: 1px solid rgba(139, 92, 246, 0.45);
  padding: 4px 8px;
  border-radius: 6px;
  margin-left: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.clock-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  color: #10b981;
  letter-spacing: 0.1em;
  margin-top: 2px;
}

.clock-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: pulse-dot 1.8s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* ── REALISTIC SMARTPHONE MOCKUP ── */
.phone-mockup-frame {
  position: relative;
  z-index: 2;
  width: 295px;
  height: 500px;
  background: linear-gradient(145deg, #2c2947 0%, #151329 100%);
  border-radius: 44px;
  padding: 9px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.18), inset 0 1px 2px rgba(255,255,255,0.25), 0 0 35px rgba(99,102,241,0.25);
}

.phone-button {
  position: absolute;
  background: #2c2947;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.2), 0 2px 4px rgba(0,0,0,0.4);
}

.btn-volume-up   { left: -5px; top: 100px; width: 5px; height: 34px; }
.btn-volume-down { left: -5px; top: 145px; width: 5px; height: 34px; }
.btn-power       { right: -5px; top: 120px; width: 5px; height: 48px; }

.phone-screen {
  width: 100%;
  height: 100%;
  background: #0b0a16;
  border-radius: 38px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255,255,255,0.06);
}

.glass-reflection {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 45%);
  pointer-events: none;
  z-index: 20;
}

.status-bar {
  height: 36px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.9);
  z-index: 10;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}

.dynamic-island {
  width: 84px;
  height: 20px;
  background: #000000;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 8px;
  gap: 6px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.camera-lens {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0f172a;
  border: 1px solid #1e293b;
}

.sensor-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #10b981;
  opacity: 0.8;
}

.status-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.85);
}

.battery-icon {
  width: 18px;
  height: 9px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 2px;
  padding: 1px;
  position: relative;
}

.battery-fill {
  width: 70%;
  height: 100%;
  background: #10b981;
  border-radius: 1px;
}

.phone-app-header {
  height: 34px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(17, 16, 32, 0.6);
  backdrop-filter: blur(8px);
}

.app-header-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #a78bfa;
}

.live-pulse-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.58rem;
  font-weight: 800;
  color: #10b981;
  letter-spacing: 0.08em;
  background: rgba(16, 185, 129, 0.12);
  padding: 2px 8px;
  border-radius: 100px;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.phone-content {
  flex: 1;
  position: relative;
  overflow: hidden;
}

.phone-slide {
  position: absolute;
  inset: 0;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px) scale(0.97);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s;
}

.phone-slide.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}

.phone-footer {
  padding: 4px 0 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: rgba(17, 16, 32, 0.8);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.home-bar {
  width: 90px;
  height: 4px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 100px;
}

/* Slide 1 – Social Ad */
.slide-social .s-preview {
  background: linear-gradient(135deg, rgba(79,70,229,0.25), rgba(139,92,246,0.15));
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 14px;
  padding: 16px 12px;
  text-align: center;
  margin-bottom: 12px;
}
.slide-social .s-preview i { font-size: 2rem; color: #a78bfa; margin-bottom: 6px; display: block; }
.slide-social .s-preview h5 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 0.92rem; color: #fff; margin-bottom: 6px; }
.slide-social .s-badge {
  display: inline-block;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
}
.slide-social .s-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 8px;
}
.slide-social .s-stat i { color: #a78bfa; font-size: 0.9rem; }
.slide-social .s-metrics {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.slide-social .s-metric {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.slide-social .s-metric .mv { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 900; font-size: 1rem; color: #a78bfa; }
.slide-social .s-metric .ml { font-size: 0.62rem; font-weight: 600; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.06em; }

/* Slide 2 – Search Ad */
.slide-search .s-bar {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 14px;
}
.slide-search .s-bar i { color: #6366f1; }
.slide-search .s-result {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
}
.slide-search .s-ad-tag {
  font-size: 0.64rem;
  font-weight: 700;
  background: #fbbf24;
  color: #78350f;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 6px;
}
.slide-search .s-url { font-size: 0.72rem; color: #818cf8; font-weight: 600; }
.slide-search .s-title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 0.95rem; color: #fff; margin: 4px 0 3px; }
.slide-search .s-desc { font-size: 0.74rem; color: rgba(255, 255, 255, 0.4); line-height: 1.4; }
.slide-search .s-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.slide-search .s-chip {
  background: rgba(99, 102, 241, 0.15);
  border: 1px solid rgba(99, 102, 241, 0.3);
  color: #818cf8;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
}

/* Slide 3 – Landing Page */
.slide-lp .s-hero {
  background: linear-gradient(160deg, rgba(15, 23, 42, 0.8), rgba(30, 27, 75, 0.9));
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 16px;
  padding: 20px 16px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.slide-lp .s-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(139, 92, 246, 0.3), transparent 60%);
}
.slide-lp .s-hero h5 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 900; font-size: 0.95rem; color: #fff; position: relative; margin-bottom: 10px; }
.slide-lp .s-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 7px 14px;
  border-radius: 100px;
  position: relative;
}
.slide-lp .s-mets { display: flex; gap: 8px; flex-wrap: wrap; }
.slide-lp .s-met {
  flex: 1;
  min-width: 80px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 8px;
  text-align: center;
}
.slide-lp .s-met .mv { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 900; font-size: 1rem; color: #a78bfa; }
.slide-lp .s-met .ml { font-size: 0.62rem; font-weight: 600; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; letter-spacing: 0.05em; }

/* Progress dots inside phone */
.phone-dots {
  background: #111020;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.phone-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  transition: all 0.4s;
}
.phone-dot.active { width: 22px; border-radius: 3px; background: #6366f1; }

/* ── VERTICAL SERVICE TAGS ── */
.service-tags-vertical {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 11px;
  z-index: 10;
}

.service-tag-v {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 6px 14px 6px 8px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  gap: 9px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  opacity: 0;
  transform: translateX(24px) scale(0.92);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  white-space: nowrap;
  pointer-events: none;
}

.tag-icon-box {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.service-tag-v.revealed {
  opacity: 1;
  transform: translateX(0) scale(1);
  pointer-events: auto;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(30, 27, 75, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%);
  border-color: rgba(129, 140, 248, 0.55);
  box-shadow: 0 0 16px rgba(99, 102, 241, 0.35), 0 8px 24px rgba(0,0,0,0.4);
}

.service-tag-v.revealed .tag-icon-box {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.6);
}

.service-tag-v.revealed .tag-text {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(199, 210, 254, 0.5);
}

.service-tag-v:hover {
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.9), rgba(124, 58, 237, 0.85));
  border-color: rgba(167, 139, 250, 0.8);
  color: #ffffff;
  transform: translateX(-4px) scale(1.03);
  box-shadow: 0 0 22px rgba(99, 102, 241, 0.6);
}

.service-tag-v:hover .tag-icon-box {
  background: #ffffff;
  color: #4f46e5;
  box-shadow: 0 0 12px #ffffff;
}

.panel-right {
  background: #f4f4fb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 60px 64px 60px 56px;
}

.step-tab {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 16px 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1.5px solid transparent;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0.65;
}

.step-tab.active {
  opacity: 1;
  padding: 24px 26px;
  background: #ffffff;
  border-color: rgba(99, 102, 241, 0.25);
  box-shadow: 0 18px 40px rgba(79, 70, 229, 0.14);
  transform: scale(1.02) translateX(6px);
}

/* --------------------------------------------------------------------------
   10. SECTION 06 — AUTOMATION ENGINE & IN-PLACE LOG FEED
   -------------------------------------------------------------------------- */
.unified-automation-hub {
  border-radius: 24px;
}

.header-stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 100px;
  padding: 6px 16px;
}

.hit-point-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.workflow-node-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  transition: all 0.35s ease;
}

.workflow-node-card.active {
  border-color: #4f46e5;
  box-shadow: 0 6px 20px rgba(79, 70, 229, 0.12);
  transform: translateX(6px);
}

.node-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.node-step-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
}

.automation-console-wrapper {
  background: #0f172a;
  border: 1px solid #1e293b;
  border-radius: 20px;
}

.workflow-log-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
  font-size: 0.8rem;
  color: #e2e8f0;
}

/* --------------------------------------------------------------------------
   11. SECTION 07 — FINCHBYTE TECHNOLOGY (SETU CRM KANBAN & PARTICLES)
   -------------------------------------------------------------------------- */
#technology {
  position: relative;
  overflow: hidden;
  background-color: #f4f4fb;
}

#antigravity-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.antigravity-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.orb-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(79, 70, 229, 0.09) 0%, transparent 70%);
  top: 10%;
  left: -100px;
}

.orb-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.08) 0%, transparent 70%);
  bottom: 10%;
  right: -80px;
}

/* Lanes sit on a distinctly grey field so the white cards read as separate
   objects — the previous #f8fafc on #fff gave almost no separation. */
.kanban-col {
  background: #eceff4;
  border: 1px solid #dde3ec;
  border-radius: 16px;
  padding: 14px 12px;
  min-height: 280px;
  transition: all 0.25s ease;
}

.kanban-col.drag-over {
  background: #e4e8ff;
  border: 1.5px dashed #4f46e5;
}

.kanban-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #55617a;
  margin-bottom: 12px;
  padding: 0 2px;
}

.kanban-count {
  flex-shrink: 0;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #dbe1ea;
  color: #55617a;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0;
  text-align: center;
}

.kanban-title.text-success .kanban-count {
  background: #cdebd9;
  color: #0f7a4e;
}

.kanban-card {
  background: #ffffff;
  border: 1px solid #e4e9f0;
  border-radius: 12px;
  padding: 11px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 10px rgba(15, 23, 42, 0.05);
  cursor: grab;
  margin-bottom: 10px;
  transition: all 0.25s ease;
}

.kanban-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06), 0 8px 18px rgba(15, 23, 42, 0.09);
}

.kanban-card:active { cursor: grabbing; }

.kb-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.3;
}

.kb-company {
  margin-top: 1px;
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
}

.kb-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px dashed #e6eaf1;
  font-size: 0.68rem;
  color: #8290a6;
  line-height: 1.3;
}

.kb-meta i {
  font-size: 0.72rem;
  color: #9aa6bb;
}

.kb-value {
  margin-top: 7px;
  font-family: 'Space Grotesk', 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #0f172a;
  letter-spacing: -0.01em;
}

.kanban-card.qualified {
  background: #faf7ff;
}

.kanban-card.qualified .kb-meta { border-top-color: #ece2fb; }

.kanban-card.qualified .kb-meta { border-top-color: #ece2fb; }

.kanban-card.won {
  background: #f4fdf7;
}

.kanban-card.won .kb-meta { border-top-color: #d8efe2; }

.kanban-card.won .kb-meta { border-top-color: #d8efe2; }
.kanban-card.won .kb-value { color: #0f7a4e; }

.pulse-dot-emerald {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  animation: pulseEmerald 1.8s infinite;
}

@keyframes pulseEmerald {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

/* --------------------------------------------------------------------------
   12. SECTION 08 — PEOPLE (2x2 PUZZLE ASSEMBLY & SEQUENTIAL TAG WAVE)
   -------------------------------------------------------------------------- */
#people-scroll-wrapper { position: relative; }

.puzzle-container {
  position: relative;
  max-width: 460px;
  aspect-ratio: 3/4;
  margin: 0 auto;
}

.puzzle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}

.puzzle-tile {
  background-image: url('../assets/home/section-08-people.png');
  background-size: 200% 200%;
  background-repeat: no-repeat;
  will-change: transform, opacity;
  border-radius: 6px;
}

.tile-tl { background-position: 0% 0%; }
.tile-tr { background-position: 100% 0%; }
.tile-bl { background-position: 0% 100%; }
.tile-br { background-position: 100% 100%; }

.drift-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 100px;
  color: #334155;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.drift-badge.active-wave {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}

.drift-badge.active-wave i { color: #ffffff !important; }

.dynamic-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: 
    linear-gradient(to right, rgba(79, 70, 229, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(79, 70, 229, 0.08) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 50% 50%, black 75%, transparent 100%);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 75%, transparent 100%);
  z-index: 0;
}

.section-grid-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   13. SECTION 09 — PIPELINE (VELOCITY CARDS & FILTERABLE KANBAN)
   -------------------------------------------------------------------------- */
#pipeline {
  position: relative;
  overflow: hidden;
  background-color: #f4f4fb;
}

.filter-pill-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 100px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-pill-btn.active {
  background: #4f46e5;
  color: #ffffff;
  border-color: #4f46e5;
}

.kanban-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(200px, 1fr));
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
}

.kanban-column-wrapper {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 14px;
  min-height: 400px;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.kanban-count-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(15, 23, 42, 0.06);
  padding: 2px 8px;
  border-radius: 100px;
}

.kanban-deal-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.kanban-deal-card.filtered-out {
  display: none !important;
  opacity: 0;
  transform: scale(0.95);
}

@keyframes pulse-scale {
  0% { transform: scale(1); color: #4f46e5; }
  50% { transform: scale(1.08); color: #059669; }
  100% { transform: scale(1); }
}

.animate-pulse-update {
  animation: pulse-scale 0.45s ease-out;
}

/* --------------------------------------------------------------------------
   14. SECTIONS 10 & 11 — REVENUE VIEW & INTELLIGENCE LOOP
   -------------------------------------------------------------------------- */
.minimal-stat-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 18px 16px;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
}

.minimal-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.side-section-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
  height: 100%;
}

.table-finch {
  width: 100%;
  border-collapse: collapse;
}

.table-finch th {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  color: #64748b;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
}

.table-finch td {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.orbital-loop-wrapper {
  position: relative;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orbital-center-core {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
}

.orbital-ring {
  position: absolute;
  border-radius: 50%;
  border: 1.5px dashed rgba(79, 70, 229, 0.25);
  pointer-events: none;
}

.orbital-nodes-track {
  position: absolute;
  border-radius: 50%;
  animation: orbitRotate 20s linear infinite;
}

@keyframes orbitRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.orbital-node {
  position: absolute;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
}

.node-top    { top: 0; left: 50%; transform: translate(-50%, -50%); }
.node-right  { top: 50%; right: 0; transform: translate(50%, -50%); }
.node-bottom { bottom: 0; left: 50%; transform: translate(-50%, 50%); }
.node-left   { top: 50%; left: 0; transform: translate(-50%, -50%); }

.orbital-node-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: counterRotate 20s linear infinite;
}

@keyframes counterRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

/* --------------------------------------------------------------------------
   15. SECTION 12 — REAL RESULTS (SEMI-CIRCULAR 3D ARC CAROUSEL)
   -------------------------------------------------------------------------- */
#results.results-scroll-driver {
  position: relative;
  height: 240vh;
  background: #f8fafc;
  color: #0f172a;
  padding: 0;
  margin: 0;
}

#results .section-title {
  color: #0f172a !important;
}

#results .p-3.bg-white {
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

#results .p-3.bg-white .text-muted {
  color: #475569 !important;
}

.results-sticky-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

#web-thread-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.web-thread-orb {
  display: none !important;
}

.arc-stage-wrapper {
  position: relative;
  width: 100%;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  overflow: visible;
}

.arc-cards-track {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arc-card-item {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 370px;
  margin-left: -185px;
  margin-top: -240px;
  transform-origin: 50% 120%;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
  cursor: pointer;
  user-select: none;
}

.arc-card-item.is-active {
  z-index: 10 !important;
  opacity: 1 !important;
  pointer-events: auto;
}

.arc-card-item.is-inactive {
  z-index: 4 !important;
  opacity: 0.85 !important;
  pointer-events: auto;
}

.arc-card-item.is-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.result-case-card {
  --rc: #7c5cfc;
  --rc-deep: #5b3fe0;
  border-radius: 28px;
  overflow: hidden;
  border: 0;
  background: linear-gradient(160deg, var(--rc) 0%, var(--rc-deep) 100%) !important;
  color: #ffffff;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
  display: flex;
  flex-direction: column;
  height: 480px;
  padding: 24px 22px 22px;
  transition: all 0.3s ease;
}

/* One hue per case study */
.result-case-card.rc-1 { --rc: #7c5cfc; --rc-deep: #5b3fe0; }
.result-case-card.rc-2 { --rc: #2f86f6; --rc-deep: #1d5fd0; }
.result-case-card.rc-3 { --rc: #e0479a; --rc-deep: #bf2c7c; }
.result-case-card.rc-4 { --rc: #f0763a; --rc-deep: #d1541c; }
.result-case-card.rc-5 { --rc: #10a37f; --rc-deep: #0a7b5e; }

.arc-card-item.is-active .result-case-card {
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.24),
              0 0 34px color-mix(in srgb, var(--rc) 45%, transparent);
}

/* Top row: eyebrow left, outward arrow right */
.rc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rc-eyebrow {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
  max-width: 60%;
}

.rc-arrow {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: #ffffff;
  opacity: 0.9;
  transition: transform 0.3s ease;
}

.rc-arrow svg { width: 100%; height: 100%; display: block; }

.result-case-card:hover .rc-arrow { transform: translate(3px, -3px); }

.rc-roi {
  align-self: flex-start;
  margin-top: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #ffffff;
}

/* Metrics kept, rendered on the colour */
.rc-metrics {
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.rc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 0.78rem;
  line-height: 1.3;
}

.rc-row span { color: rgba(255, 255, 255, 0.78); }

.rc-row strong {
  font-weight: 700;
  color: #ffffff;
  text-align: right;
}

.rc-revenue {
  margin-top: 16px;
  padding: 11px 14px;
  border-radius: 12px;
  background: #ffffff;
  color: var(--rc-deep);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  text-align: center;
  letter-spacing: 0.01em;
}

.rc-quote {
  margin: 14px 0 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

/* Big title anchored to the bottom, as in the reference */
.rc-foot { margin-top: auto; padding-top: 16px; }

.rc-title {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.rc-sub {
  margin: 6px 0 0;
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------------------------------------------------------
   16. SECTION 13 — PARTNERSHIP (4-STEP ROADMAP & CONSULTATION CARD)
   -------------------------------------------------------------------------- */
.roadmap-step-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.roadmap-step-card:hover {
  transform: translateX(6px);
  border-color: #4f46e5;
  box-shadow: 0 8px 24px rgba(79, 70, 229, 0.12);
}

.roadmap-num {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  color: #4f46e5;
  background: rgba(79, 70, 229, 0.08);
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.booking-preview-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  padding: 36px 32px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.06);
}

/* --------------------------------------------------------------------------
   17. SECTIONS 14 & 15 — 3D MARKETING & SALES FUNNELS
   -------------------------------------------------------------------------- */
.funnel-scroll-driver {
  height: 250vh;
  position: relative;
}

.funnel-sticky-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 20px 16px;
  z-index: 1;
}

#mktg-funnel {
  background: #08090f;
  color: #ffffff;
}

#sales-funnel {
  background: #060b16;
  color: #ffffff;
}

.f-header {
  text-align: center;
  margin-bottom: 22px;
  flex-shrink: 0;
}

.f-tag-mktg {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #f97316;
  background: rgba(249, 115, 22, 0.1);
  border: 1px solid rgba(249, 115, 22, 0.25);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 8px;
}

.f-tag-sales {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #06b6d4;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.25);
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 8px;
}

.funnel-wrap {
  width: 100%;
  max-width: 820px;
  position: relative;
  flex-shrink: 0;
}

.f-slice {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(-32px);
  transition: opacity 0.13s linear, transform 0.13s linear;
}

.f-face {
  position: relative;
  width: 100%;
  height: var(--fh);
  display: flex;
  align-items: center;
  justify-content: center;
}

.f-face::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.14) 0%, transparent 55%);
}

.f-face::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.32) 0%, transparent 22%, transparent 78%, rgba(0,0,0,0.32) 100%);
}

.f-label {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: clamp(0.7rem, 1.05vw, 0.9rem);
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
  white-space: nowrap;
  position: relative;
  z-index: 2;
}

.f-edge {
  width: 100%;
  height: var(--eh);
  flex-shrink: 0;
}

/* Marketing Funnel Stage Colors & Geometry */
.mktg-slice[data-s="0"] .f-face { clip-path: polygon(0% 0%, 100% 0%, 96.5% 100%, 3.5% 100%); background: linear-gradient(180deg, #ff7043 0%, #f04e23 100%); }
.mktg-slice[data-s="0"] .f-edge { clip-path: polygon(3.5% 0%, 96.5% 0%, 96.5% 100%, 3.5% 100%); background: linear-gradient(180deg, #b83818 0%, #8f2a10 100%); }
.mktg-slice[data-s="1"] .f-face { clip-path: polygon(3.5% 0%, 96.5% 0%, 93% 100%, 7% 100%); background: linear-gradient(180deg, #f04e23 0%, #e03a10 100%); }
.mktg-slice[data-s="1"] .f-edge { clip-path: polygon(7% 0%, 93% 0%, 93% 100%, 7% 100%); background: linear-gradient(180deg, #9f2d0e 0%, #7d2009 100%); }
.mktg-slice[data-s="2"] .f-face { clip-path: polygon(7% 0%, 93% 0%, 89.5% 100%, 10.5% 100%); background: linear-gradient(180deg, #d63031 0%, #c0392b 100%); }
.mktg-slice[data-s="2"] .f-edge { clip-path: polygon(10.5% 0%, 89.5% 0%, 89.5% 100%, 10.5% 100%); background: linear-gradient(180deg, #902b21 0%, #7a2019 100%); }
.mktg-slice[data-s="3"] .f-face { clip-path: polygon(10.5% 0%, 89.5% 0%, 86% 100%, 14% 100%); background: linear-gradient(180deg, #c0392b 0%, #a93226 100%); }
.mktg-slice[data-s="3"] .f-edge { clip-path: polygon(14% 0%, 86% 0%, 86% 100%, 14% 100%); background: linear-gradient(180deg, #7a2019 0%, #611813 100%); }
.mktg-slice[data-s="4"] .f-face { clip-path: polygon(14% 0%, 86% 0%, 82.5% 100%, 17.5% 100%); background: linear-gradient(180deg, #8e44ad 0%, #7d3c98 100%); }
.mktg-slice[data-s="4"] .f-edge { clip-path: polygon(17.5% 0%, 82.5% 0%, 82.5% 100%, 17.5% 100%); background: linear-gradient(180deg, #5d2c72 0%, #4a2159 100%); }
.mktg-slice[data-s="5"] .f-face { clip-path: polygon(17.5% 0%, 82.5% 0%, 79% 100%, 21% 100%); background: linear-gradient(180deg, #7d3c98 0%, #6c3483 100%); }
.mktg-slice[data-s="5"] .f-edge { clip-path: polygon(21% 0%, 79% 0%, 79% 100%, 21% 100%); background: linear-gradient(180deg, #4a2159 0%, #391846 100%); }
.mktg-slice[data-s="6"] .f-face { clip-path: polygon(21% 0%, 79% 0%, 75.5% 100%, 24.5% 100%); background: linear-gradient(180deg, #6c3483 0%, #5b2c6f 100%); }
.mktg-slice[data-s="6"] .f-edge { clip-path: polygon(24.5% 0%, 75.5% 0%, 75.5% 100%, 24.5% 100%); background: linear-gradient(180deg, #391846 0%, #2a1236 100%); }
.mktg-slice[data-s="7"] .f-face { clip-path: polygon(24.5% 0%, 75.5% 0%, 72.5% 100%, 27.5% 100%); background: linear-gradient(180deg, #5b2c6f 0%, #3b1e6e 100%); }
.mktg-slice[data-s="7"] .f-edge { clip-path: polygon(27.5% 0%, 72.5% 0%, 72.5% 100%, 27.5% 100%); background: radial-gradient(ellipse at center, #2c155c 0%, #1a0f4a 100%); border-radius: 0 0 50% 50%; }

/* Sales Funnel Stage Colors & Geometry */
.sales-slice[data-s="0"] .f-face { clip-path: polygon(0% 0%, 100% 0%, 96.5% 100%, 3.5% 100%); background: linear-gradient(180deg, #0891b2 0%, #0e7490 100%); }
.sales-slice[data-s="0"] .f-edge { clip-path: polygon(3.5% 0%, 96.5% 0%, 96.5% 100%, 3.5% 100%); background: linear-gradient(180deg, #065e75 0%, #044d5f 100%); }
.sales-slice[data-s="1"] .f-face { clip-path: polygon(3.5% 0%, 96.5% 0%, 93% 100%, 7% 100%); background: linear-gradient(180deg, #0e7490 0%, #155e75 100%); }
.sales-slice[data-s="1"] .f-edge { clip-path: polygon(7% 0%, 93% 0%, 93% 100%, 7% 100%); background: linear-gradient(180deg, #0c4a5a 0%, #093d4a 100%); }
.sales-slice[data-s="2"] .f-face { clip-path: polygon(7% 0%, 93% 0%, 89.5% 100%, 10.5% 100%); background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%); }
.sales-slice[data-s="2"] .f-edge { clip-path: polygon(10.5% 0%, 89.5% 0%, 89.5% 100%, 10.5% 100%); background: linear-gradient(180deg, #1a3a9e 0%, #162f82 100%); }
.sales-slice[data-s="3"] .f-face { clip-path: polygon(10.5% 0%, 89.5% 0%, 86% 100%, 14% 100%); background: linear-gradient(180deg, #1d4ed8 0%, #1e40af 100%); }
.sales-slice[data-s="3"] .f-edge { clip-path: polygon(14% 0%, 86% 0%, 86% 100%, 14% 100%); background: linear-gradient(180deg, #162f82 0%, #121e60 100%); }
.sales-slice[data-s="4"] .f-face { clip-path: polygon(14% 0%, 86% 0%, 82.5% 100%, 17.5% 100%); background: linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%); }
.sales-slice[data-s="4"] .f-edge { clip-path: polygon(17.5% 0%, 82.5% 0%, 82.5% 100%, 17.5% 100%); background: linear-gradient(180deg, #131e60 0%, #0e1648 100%); }
.sales-slice[data-s="5"] .f-face { clip-path: polygon(17.5% 0%, 82.5% 0%, 79% 100%, 21% 100%); background: linear-gradient(180deg, #059669 0%, #047857 100%); animation: won-pulse 2.4s ease-in-out infinite; }
.sales-slice[data-s="5"] .f-edge { clip-path: polygon(21% 0%, 79% 0%, 79% 100%, 21% 100%); background: linear-gradient(180deg, #025f43 0%, #014d35 100%); }
.sales-slice[data-s="6"] .f-face { clip-path: polygon(21% 0%, 79% 0%, 75.5% 100%, 24.5% 100%); background: linear-gradient(180deg, #047857 0%, #065f46 100%); }
.sales-slice[data-s="6"] .f-edge { clip-path: polygon(24.5% 0%, 75.5% 0%, 75.5% 100%, 24.5% 100%); background: linear-gradient(180deg, #024534 0%, #013326 100%); }
.sales-slice[data-s="7"] .f-face { clip-path: polygon(24.5% 0%, 75.5% 0%, 72.5% 100%, 27.5% 100%); background: linear-gradient(180deg, #065f46 0%, #022c22 100%); }
.sales-slice[data-s="7"] .f-edge { clip-path: polygon(27.5% 0%, 72.5% 0%, 72.5% 100%, 27.5% 100%); background: radial-gradient(ellipse at center, #012018 0%, #010e0e 100%); border-radius: 0 0 50% 50%; }

.won-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
  background: #10b981;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 3px 12px;
  border-radius: 100px;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.7);
  z-index: 20;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  pointer-events: none;
  position: relative;
}

.won-active .won-badge {
  opacity: 1;
  transform: scale(1);
}

.f-ann {
  position: absolute;
  top: calc(var(--fh) / 2);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.f-ann.left  { right: calc(100% + 10px); flex-direction: row-reverse; }
.f-ann.right { left: calc(100% + 10px); }
.f-ann-line  { width: 24px; height: 1px; background: rgba(255, 255, 255, 0.18); flex-shrink: 0; }
.f-ann-txt   { font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.61rem; font-weight: 600; color: rgba(255, 255, 255, 0.38); }
.f-ann-ico   { font-size: 0.78rem; color: rgba(255, 255, 255, 0.32); }

.funnel-base-glow {
  width: 160px;
  height: 20px;
  border-radius: 50%;
  filter: blur(8px);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s linear;
}

#fBaseGlow-mktg { background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.55) 0%, transparent 70%); }
#fBaseGlow-sales { background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.6) 0%, transparent 70%); }

.f-stats {
  display: flex;
  gap: 28px;
  justify-content: center;
  margin-top: 14px;
  flex-shrink: 0;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.13s linear, transform 0.13s linear;
}

.f-sv {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  line-height: 1;
}

.f-sl {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.57rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.12em;
  margin-top: 2px;
}

/* --------------------------------------------------------------------------
   18. GLOBAL FOOTER
   -------------------------------------------------------------------------- */
#site-footer {
  background: #090d16;
  color: #94a3b8;
  padding: 64px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-logo-img {
  height: 40px;
  width: auto;
  object-fit: contain;
  margin-bottom: 16px;
}

.footer-link {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.88rem;
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #4f46e5;
}

/* --------------------------------------------------------------------------
   19. RESPONSIVE MEDIA QUERIES
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  /* Prevent horizontal scrollbars and eliminate right-side extra white gap on mobile view */
  html, body {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    position: relative !important;
  }

  #finch-app,
  main,
  section,
  .finch-section,
  .container,
  .container-fluid,
  .row,
  #hero,
  #hero-pin-wrapper,
  #problem,
  #prob-section,
  #journey,
  #journey-section,
  #journey-stage,
  #system,
  #system-section,
  #creative,
  #creative-section,
  #automation,
  #revenue,
  #partnership,
  #people,
  #faq {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .bg-mesh {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Hide Scroll Explore Tag completely on mobile view */
  #scroll-explore-tag,
  .scroll-explore-tag,
  #card-dots {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    animation: none !important;
  }

  /* Hero Container Mobile Layout — Compact Spacing & Navbar Clearance */
  #hero-pin-wrapper {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 75px 0 20px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
  }

  /* Dead Center FINCHBYTE Text Intro Alignment for Mobile View */
  #typewriter-container {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 50 !important;
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
  }

  .typewriter-logo {
    font-size: clamp(2.2rem, 9vw, 4.2rem) !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
    width: 100% !important;
  }

  .typewriter-char {
    text-align: center !important;
  }

  .typewriter-cursor {
    height: clamp(2.2rem, 9vw, 4rem) !important;
    width: 4px !important;
  }

  #hero-content-reveal {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
    padding: 10px 16px 10px 16px !important;
    text-align: center !important;
  }

  #hero-content-reveal.active {
    opacity: 1 !important;
    pointer-events: all !important;
  }

  #hero .col-lg-5 {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  /* Delete Sales Journey Simulator Card Section on Mobile View Only */
  #sales-journey-simulator,
  #hero .col-lg-7 {
    display: none !important;
  }

  #matter-canvas-container {
    display: none !important;
  }

  /* Delete horizontal line / section-tag section above Hero headline on Mobile */
  #hero .section-tag {
    display: none !important;
  }

  /* Headline Sizing & Centering on Mobile */
  #hero-headline,
  #hero h1.section-title {
    font-size: clamp(1.75rem, 6.2vw, 2.5rem) !important;
    line-height: 1.25 !important;
    padding-top: 10px !important;
    margin-top: 5px !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
  }

  /* Subtitle Sizing & Centering on Mobile */
  #hero .section-subtitle {
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    margin: 0 auto 20px auto !important;
    max-width: 100% !important;
    color: rgba(255, 255, 255, 0.92) !important;
    text-align: center !important;
  }

  /* CTA Buttons Layout on Mobile */
  #hero .d-flex.flex-nowrap,
  #hero-content-reveal .d-flex {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    max-width: 340px !important;
    gap: 12px !important;
    margin: 0 auto 22px auto !important;
  }

  #hero .btn-finch-primary,
  #hero .btn-finch-secondary {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    padding: 12px 20px !important;
    border-radius: 50px !important;
    text-align: center !important;
  }

  /* Trust Badges Layout & Centering on Mobile */
  #hero .trust-indicators {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
    margin: 0 auto 16px auto !important;
    width: 100% !important;
  }

  #hero .trust-badge {
    font-size: 0.72rem !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  }

  /* Section 02 Mobile Question Burst Cards (.q-item) - Fit 100% inside screen bounds */
  .q-item {
    width: clamp(145px, 43vw, 172px) !important;
    padding: 6px 8px !important;
    gap: 6px !important;
    border-radius: 10px !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12), 0 0 10px rgba(239, 68, 68, 0.1) !important;
  }

  .q-item .q-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
  }

  .q-item .fw-bold {
    font-size: 0.71rem !important;
    line-height: 1.2 !important;
  }

  .q-item .text-danger {
    font-size: 0.6rem !important;
    line-height: 1.2 !important;
  }

  /* Section 02 Mobile Layout & Next Button Below Cards */
  #prob-section {
    position: relative !important;
    height: auto !important;
    min-height: 680px !important;
    padding: 40px 0 40px 0 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #prob-heading {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    padding: 0 16px !important;
    margin: 0 auto 28px auto !important;
    pointer-events: all !important;
    z-index: 40 !important;
    text-align: center !important;
  }

  #cards-stage {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    height: 380px !important;
    width: 100% !important;
    margin-top: 10px !important;
    margin-bottom: 25px !important;
    pointer-events: all !important;
  }

  .depth-card {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(560px, 92vw) !important;
  }

  /* Mobile Depth Card Header, Badge Tags & Alignment Fixes */
  .dc-header {
    padding: 12px 14px 10px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  .dc-header .d-flex {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .dc-header .fw-bold {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .dc-header .badge {
    font-size: 0.62rem !important;
    padding: 3px 7px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }

  .dc-body {
    padding: 12px 14px !important;
  }

  .dc-body .badge {
    font-size: 0.6rem !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
  }

  .dc-footer {
    padding: 10px 14px !important;
    font-size: 0.68rem !important;
  }

  /* Mobile Section 02 Next Card Button Container - Arranged Below Cards */
  #mobile-cards-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 20px auto 0 auto !important;
    z-index: 80 !important;
    position: relative !important;
    width: 100% !important;
    pointer-events: all !important;
  }

  .btn-prob-next {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 26px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4), 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    -webkit-tap-highlight-color: transparent;
  }

  .btn-prob-next:active {
    transform: scale(0.95) !important;
  }

  /* =========================================================================
     MOBILE DESIGN SYSTEM SPECIFICATION (MAX-WIDTH: 991PX ONLY)
     ========================================================================= */

  /* 1. UNIFORM SECTION SPACING & MARGINS (STRICT 32PX TOP & BOTTOM PADDING ACROSS ALL SECTIONS) */
  .finch-section,
  section,
  #hero-pin-wrapper,
  #growth,
  #journey,
  #system,
  #creative,
  #automation,
  #crm,
  #media,
  #pipeline,
  #ai,
  #ecosystem,
  #results,
  #sd-mktg,
  #sd-sales,
  #partnership,
  #people,
  #cta {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .container,
  .container-finchbyte,
  .container-fluid,
  .container.py-4,
  .container.py-5,
  .container-finchbyte.py-4,
  .container-finchbyte.py-5 {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }

  /* Spacing above heading and below last content in each section */
  .section-tag,
  .section-eyebrow {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .section-title,
  .section-title-large,
  .f-title,
  h2 {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .section-subtitle,
  .section-subtitle-text,
  .section-desc,
  p {
    margin-bottom: 16px !important;
  }

  .finch-section > *:last-child,
  section > *:last-child,
  .container-finchbyte > *:last-child,
  .system-grid-layout > *:last-child,
  #journey-layout > *:last-child {
    margin-bottom: 0 !important;
  }

  /* Universal Section Center Alignment for Mobile View Only.
     Scoped to the homepage container: the bare `section`, `h1..h6` and `p`
     selectors were leaking out of this page's markup and centring the shared
     footer's headings, so the same footer rendered centred here and left
     aligned on every other page. :where() keeps specificity unchanged. */
  :where(#finchbyte-homepage) .finch-section,
  :where(#finchbyte-homepage) section,
  :where(#finchbyte-homepage) .finch-section .text-start,
  :where(#finchbyte-homepage) section .text-start,
  :where(#finchbyte-homepage) .text-start,
  :where(#finchbyte-homepage) .text-lg-start,
  :where(#finchbyte-homepage) .text-md-start,
  :where(#finchbyte-homepage) .section-tag,
  :where(#finchbyte-homepage) .section-eyebrow,
  :where(#finchbyte-homepage) .section-title,
  :where(#finchbyte-homepage) .section-title-large,
  :where(#finchbyte-homepage) .section-heading,
  :where(#finchbyte-homepage) .section-subtitle,
  :where(#finchbyte-homepage) .section-subtitle-text,
  :where(#finchbyte-homepage) .section-desc,
  :where(#finchbyte-homepage) .hero-title,
  :where(#finchbyte-homepage) .hero-heading,
  :where(#finchbyte-homepage) .f-title,
  :where(#finchbyte-homepage) h1,
  :where(#finchbyte-homepage) h2,
  :where(#finchbyte-homepage) h3,
  :where(#finchbyte-homepage) h4,
  :where(#finchbyte-homepage) h5,
  :where(#finchbyte-homepage) h6,
  :where(#finchbyte-homepage) p {
    text-align: center !important;
  }

  /* Universal Section Tag Pills Dead Center Fix */
  .section-tag,
  .section-eyebrow,
  .badge.bg-dark,
  #ai .section-tag,
  #results .section-tag,
  #partnership .section-tag,
  #people .section-tag,
  #media .section-tag,
  #pipeline .section-tag,
  #ecosystem .section-tag,
  #crm .section-tag,
  #automation .section-tag,
  #creative .section-tag,
  #journey .section-tag,
  #system .section-tag,
  #prob-section .section-tag {
    display: table !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    float: none !important;
  }

  .finch-section .col-lg-6,
  .finch-section .col-lg-5,
  .finch-section .col-lg-7,
  section .col-lg-6,
  section .col-lg-5,
  section .col-lg-7,
  .container .col-lg-6,
  .container-finchbyte .col-lg-6 {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  #team-drift-badges {
    justify-content: center !important;
  }

  #partnership .roadmap-step-card {
    text-align: left !important;
  }

  #partnership .roadmap-step-card h6,
  #partnership .roadmap-step-card div {
    text-align: left !important;
  }

  /* 2. TYPOGRAPHY HIERARCHY */
  /* Large Title: 28-32px, 700, 36-40px line-height */
  .hero-title,
  .hero-heading,
  .display-3,
  .display-4,
  .display-5 {
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 38px !important;
  }

  /* Screen Title: 24px, 700, 32px line-height */
  .section-title,
  .f-title,
  h2,
  .h2 {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 32px !important;
    margin-bottom: 10px !important;
  }

  /* Section Heading: 18-20px, 600-700, 24-28px line-height */
  .section-heading,
  .card-title,
  .mc-title,
  .node-title,
  .tab-title,
  h3, .h3, h4, .h4, h5, .h5 {
    font-size: 19px !important;
    font-weight: 600 !important;
    line-height: 26px !important;
    margin-bottom: 8px !important;
  }

  /* Section Subtitle High Contrast Pure White Color for Partnership, People & Automation Sections */
  #partnership .section-subtitle,
  #people .section-subtitle,
  #automation .section-subtitle {
    color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  }

  /* Body: 16px, 400, 24px line-height */
  .section-subtitle,
  .section-desc,
  .body-text,
  p,
  .p {
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 24px !important;
    margin-bottom: 12px !important;
  }

  /* Secondary / Body Small: 14px, 400-500, 20px line-height */
  .mc-desc,
  .node-desc,
  .tab-desc,
  .text-muted,
  .secondary-text,
  .body-small {
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 20px !important;
  }

  /* Section Tags High Contrast Solid Badge Styling & Top Margin for Mobile View Only */
  .section-tag,
  .section-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: #ffffff !important;
    color: #4f46e5 !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 50px !important;
    border: 1.5px solid #818cf8 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.2) !important;
    opacity: 1 !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }

  .section-tag i,
  .section-eyebrow i {
    color: #4f46e5 !important;
    font-size: 0.82rem !important;
  }

  .badge,
  .tag-text,
  .caption {
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 16px !important;
  }

  /* Purple Score Circle Text Alignment Fix for Mobile View Only */
  .score-circle {
    width: 82px !important;
    height: 82px !important;
    border: 5px solid #4f46e5 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 4px !important;
    box-sizing: border-box !important;
    margin: 0 auto 10px auto !important;
  }

  .score-circle .fw-black {
    font-size: 1.25rem !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
  }

  .score-circle .text-muted {
    font-size: 0.5rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-align: center !important;
    letter-spacing: 0.02em !important;
  }

  /* Buttons: 14-16px, 600, 20-24px line-height, min 44-48px touch target */
  .btn,
  .btn-finch-primary,
  .btn-finch-secondary,
  .btn-prob-next,
  #system-next-btn,
  button {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    min-height: 46px !important;
    min-width: 44px !important;
    padding: 12px 20px !important;
  }

  /* 3. CARDS INTERNAL PADDING */
  .card,
  .moment-card-container,
  .stage-node,
  .unified-automation-hub,
  .result-case-card,
  .p-3.bg-white,
  .p-4.bg-white {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* Section 03 Mobile Unified Single Glass Card Container — No Scroll-Down Pinning */
  #journey {
    height: auto !important;
    min-height: auto !important;
    padding: 30px 0 !important;
    position: relative !important;
  }

  #journey-section {
    height: auto !important;
    min-height: auto !important;
    padding: 0 10px !important;
    position: relative !important;
    top: auto !important;
    overflow: visible !important;
  }

  /* These decorative blurs sit at bottom/right -100px. #journey-section is
     overflow:visible on mobile, so they escaped and forced a vertical
     scrollbar inside #journey, shaving 15px off every child's width. */
  #journey .glow-blob {
    display: none !important;
  }


  #journey-layout {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    inset: auto !important;
    gap: 12px !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  #journey-left {
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
  }

  #journey-left .section-eyebrow {
    font-size: 0.68rem !important;
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
  }

  #journey-left .section-heading {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 8px !important;
    text-align: center !important;
    br { display: none !important; }
  }

  #step-counter {
    display: none !important;
  }

  .journey-v-line-track {
    display: none !important;
  }

  #journey-stepper-wrap {
    width: 100% !important;
    margin: 0 0 8px 0 !important;
  }

  #journey-dots {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 3px !important;
    padding: 6px 6px !important;
    background: rgba(15, 23, 42, 0.06) !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    border-radius: 50px !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  #journey-dots::-webkit-scrollbar {
    display: none;
  }

  .j-dot {
    position: relative !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 4px 4px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    transition: all 0.25s ease !important;
  }

  .j-dot-circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1.5px solid rgba(15, 23, 42, 0.18) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    flex-shrink: 0 !important;
  }

  .j-dot .j-dot-label {
    display: none !important;
  }

  .j-dot.active {
    flex: 2 1 auto !important;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35) !important;
  }

  .j-dot.active .j-dot-circle {
    background: #ffffff !important;
    color: #4f46e5 !important;
    border-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  }

  .j-dot.active .j-dot-label {
    display: inline-block !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    white-space: nowrap !important;
  }

  .j-dot.done {
    background: transparent !important;
  }

  .j-dot.done .j-dot-circle {
    background: #e0e7ff !important;
    color: #4338ca !important;
    border-color: #a5b4fc !important;
  }

  .j-dot.done .j-dot-label {
    color: #4f46e5 !important;
  }

  #journey-right-stage {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
  }

  .moment-card-container {
    position: relative !important;
    /* Full-bleed: cancel #journey-section's 10px gutters so the card runs edge
       to edge, and fill the viewport left under the stepper instead of sitting
       as a short block with dead space around it. */
    width: auto !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
    min-height: 70vh !important;
    justify-content: center !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    padding: 20px 16px !important;
    border-radius: 0 !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: #ffffff !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
    display: none;
    flex-direction: column !important;
    gap: 8px !important;
    opacity: 0;
    grid-template-columns: 1fr !important;
    margin-top: 6px !important;
  }

  .moment-card-container.active-mobile-card {
    display: flex !important;
    opacity: 1 !important;
  }

  .mc-step-tag {
    display: inline-flex !important;
    font-size: 0.65rem !important;
    padding: 3px 10px !important;
    margin-bottom: 6px !important;
  }

  .mc-icon-wrap {
    width: 38px !important;
    height: 38px !important;
    font-size: 1.1rem !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
  }

  .mc-title {
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
  }

  .mc-title .mc-sub {
    font-size: 0.72rem !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }

  .mc-desc {
    font-size: 0.8rem !important;
    color: #334155 !important;
    line-height: 1.42 !important;
    margin-bottom: 8px !important;
  }

  .mc-bullets {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }

  .mc-bullet {
    font-size: 0.73rem !important;
    color: #1e293b !important;
  }

  .mockup-widget {
    background: rgba(248, 250, 252, 0.9) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 14px !important;
    margin-top: 6px !important;
    padding: 10px !important;
    width: 100% !important;
  }

  /* Section 04 Mobile Circular Orbit Layout — Delete Navigation & Arrange Orbit Canvas */
  #system {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #system-section {
    height: auto !important;
    min-height: auto !important;
    padding: 15px 10px 0 10px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .system-container {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .system-grid-layout {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 4px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .system-left-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  .system-left-content .section-tag {
    font-size: 0.68rem !important;
    padding: 4px 10px !important;
    margin-bottom: 6px !important;
  }

  .system-left-content .section-title-large {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    br { display: none !important; }
  }

  .system-left-content .section-subtitle-text {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }

  #system-mobile-nav {
    margin: 4px 0 0 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Completely Hide Navigation Bar / Pills List on Mobile View */
  .system-stage-indicators {
    display: none !important;
  }

  .system-right-stage {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    position: relative !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Centered Circular Orbit Stage on Mobile — Compact Height to Eliminate Gap */
  #orbit-stage {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    width: min(280px, 86vw) !important;
    height: 180px !important;
    margin: 0 auto 0 auto !important;
    padding-bottom: 0 !important;
  }

  #magic-rings-wrapper {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
  }

  #core-hub {
    display: flex !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.3) !important;
    z-index: 10 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .core-logo-img {
    width: 30px !important;
    height: auto !important;
  }

  /* Orbiting Node Cards on Mobile View — Dead Center Alignment & Compact Top Gap */
  .stage-node {
    display: flex !important;
    flex-direction: column !important;
    position: absolute !important;
    top: 48% !important;
    left: 50% !important;
    width: 230px !important;
    max-width: 90vw !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08) !important;
    margin-left: -115px !important;
    margin-top: -65px !important;
    z-index: 5 !important;
    pointer-events: auto !important;
    text-align: center !important;
  }

  .stage-node .node-header {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  .stage-node .node-icon-box {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
  }

  .stage-node .node-title {
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 4px !important;
    line-height: 1.25 !important;
    text-align: center !important;
  }

  .stage-node .node-desc {
    font-size: 0.72rem !important;
    color: #475569 !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
    text-align: center !important;
    display: block !important;
  }

  .stage-node .node-footer {
    display: flex !important;
    justify-content: center !important;
  }

  .stage-node .node-footer .badge {
    font-size: 0.62rem !important;
    padding: 3px 8px !important;
    white-space: normal !important;
  }

  .stage-node.active-spotlight {
    border-color: #4f46e5 !important;
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.35) !important;
    z-index: 30 !important;
  }

  /* Mobile Section 04 Next Stage Button Container Below Heading Section */
  #system-mobile-nav {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 8px auto 18px auto !important;
    z-index: 50 !important;
    position: relative !important;
    width: 100% !important;
  }

  .btn-system-next {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 10px 22px !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(79, 70, 229, 0.42) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
  }

  .btn-system-next:active {
    transform: scale(0.96) !important;
  }

  /* Section 05 Creative Marketing Mobile Layout — Dark BG, Separate Header Rows & Left Cards + Right Tags */
  #creative {
    background: linear-gradient(145deg, #090b15 0%, #13112c 50%, #0a1329 100%) !important;
    padding: 15px 0 25px 0 !important;
    margin-top: 0 !important;
    position: relative !important;
    height: auto !important;
    min-height: auto !important;
  }

  #creative-sticky {
    display: grid !important;
    grid-template-columns: 1fr 98px !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px 10px !important;
    width: 100% !important;
    position: relative !important;
    height: auto !important;
    padding: 0 8px !important;
  }

  .panel-right {
    display: contents !important;
  }

  .panel-left {
    display: contents !important;
  }

  .panel-right .section-tag {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    justify-self: center !important;
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.68rem !important;
    padding: 4px 12px !important;
    margin-bottom: 4px !important;
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
    border: 1px solid rgba(129, 140, 248, 0.4) !important;
    border-radius: 20px !important;
  }

  .panel-right .section-title {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    font-size: clamp(1.25rem, 5vw, 1.65rem) !important;
    line-height: 1.22 !important;
    margin-bottom: 12px !important;
    color: #ffffff !important;
    text-align: center !important;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5) !important;
  }

  /* Completely Remove Phone Mockup & Clock Container on Mobile View */
  .phone-mockup-frame,
  .analog-clock-container {
    display: none !important;
  }

  /* Left Column: 3 Scaled Down Step Cards */
  .step-tabs {
    grid-column: 1 !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Mobile Section 05 Step Cards — High Contrast White Text Readability */
  .step-tab,
  .step-tab.active {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(129, 140, 248, 0.28) !important;
    width: 100% !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
    cursor: default !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .step-tab .tab-num,
  .step-tab.active .tab-num {
    font-size: 0.65rem !important;
    font-weight: 800 !important;
    color: #a5b4fc !important;
    padding: 2px 6px !important;
    background: rgba(129, 140, 248, 0.2) !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .step-tab .tab-title,
  .step-tab.active .tab-title,
  .step-tab h5.tab-title {
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin-bottom: 3px !important;
    line-height: 1.25 !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
  }

  .step-tab .tab-desc,
  .step-tab.active .tab-desc,
  .step-tab p.tab-desc {
    font-size: 0.64rem !important;
    color: #e2e8f0 !important;
    line-height: 1.35 !important;
    margin-bottom: 0 !important;
    opacity: 1 !important;
  }

  /* Right Column: 5 Vertically Stacked Service Tags */
  .service-tags-vertical {
    grid-column: 2 !important;
    grid-row: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    z-index: 10 !important;
  }

  .service-tag-v {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 6px !important;
    background: rgba(15, 23, 42, 0.85) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(129, 140, 248, 0.3) !important;
    border-radius: 20px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    width: 100% !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .service-tag-v .tag-icon-box {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: rgba(129, 140, 248, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.6rem !important;
    color: #818cf8 !important;
    flex-shrink: 0 !important;
  }

  .service-tag-v .tag-text {
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .service-tag-v.active {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
    border-color: #818cf8 !important;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.45) !important;
  }

  /* Section 06 Automation Engine Mobile Redesign — Remove Action Bar & Redesign Card Layout */
  .unified-automation-hub .border-bottom {
    display: none !important;
  }

  .unified-automation-hub {
    padding: 16px 12px !important;
    margin-top: 14px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
  }

  .unified-automation-hub .row {
    --bs-gutter-x: 8px !important;
    --bs-gutter-y: 8px !important;
  }

  .unified-automation-hub .col-sm-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
  }

  .unified-automation-hub .p-2 {
    padding: 10px 8px !important;
    background: rgba(79, 70, 229, 0.04) !important;
    border: 1px solid rgba(79, 70, 229, 0.12) !important;
    border-radius: 12px !important;
    height: 100% !important;
    text-align: left !important;
  }

  .unified-automation-hub h6 {
    font-size: 0.74rem !important;
    font-weight: 800 !important;
    margin-bottom: 3px !important;
  }

  .unified-automation-hub p {
    font-size: 0.63rem !important;
    line-height: 1.3 !important;
    color: #475569 !important;
  }

  .workflow-node-card {
    padding: 10px 12px !important;
    border-radius: 12px !important;
    gap: 8px !important;
  }

  .workflow-node-card .node-icon {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
  }

  .workflow-node-card .node-step-tag {
    font-size: 0.58rem !important;
  }

  .workflow-node-card h6 {
    font-size: 0.76rem !important;
  }

  /* Completely Hide Live Log Terminal Console on Mobile View Only */
  .automation-console-wrapper {
    display: none !important;
  }

  /* Section 14 & 15: Both 3D Cone Funnel Sections Mobile Layout — Eliminate Scroll-Down Approach & Huge Spacers */
  #mktg-funnel,
  #sales-funnel,
  #sd-mktg,
  #sd-sales,
  .funnel-scroll-driver {
    height: auto !important;
    min-height: auto !important;
    padding: 30px 0 !important;
    position: relative !important;
  }

  .funnel-sticky-wrap {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
    padding: 10px !important;
  }

  .funnel-wrap {
    height: auto !important;
    min-height: auto !important;
    margin: 15px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .mktg-slice,
  .sales-slice {
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin-bottom: 4px !important;
  }

  .f-stats {
    opacity: 1 !important;
    transform: none !important;
    position: relative !important;
    top: auto !important;
    margin-top: 15px !important;
  }

  /* Section 09 Pipeline Section — Hide Source Filter Bar & 5-Column Kanban Deal Grid on Mobile View Only */
  #pipeline-filter-bar,
  .kanban-grid-5 {
    display: none !important;
  }

  /* Section 12 Real Results Mobile Layout — Eliminate 240vh Scroll Height & Top White Gap */
  #results,
  #results.results-scroll-driver {
    height: auto !important;
    min-height: auto !important;
    padding: 20px 0 30px 0 !important;
    margin: 0 !important;
    position: relative !important;
    background: #f8fafc !important;
  }

  .results-sticky-wrap {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    height: auto !important;
    min-height: auto !important;
    display: block !important;
    padding: 0 10px !important;
    overflow: visible !important;
  }

  /* Hide background thread canvas and extra lines on mobile view */
  #web-thread-canvas,
  .web-thread-orb {
    display: none !important;
  }

  /* Hide 3D Arc Case Study Carousel on Mobile View Only */
  #arcStage,
  .arc-stage-wrapper {
    display: none !important;
  }

  /* Mobile-Only Center Alignment: Section 10 & 11 Revenue Attribution & Learning Loop */
  #revenue .container > .d-flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    justify-content: center !important;
  }

  #revenue .container > .d-flex > div {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #revenue .side-section-card {
    text-align: center !important;
  }

  #revenue .side-section-card .border-bottom {
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    text-align: center !important;
  }

  #revenue .minimal-stat-card {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #revenue .table-finch th,
  #revenue .table-finch td {
    text-align: center !important;
  }

  #revenue .orbital-loop-wrapper {
    margin: 0 auto !important;
  }

  #revenue #learning .bg-success-subtle {
    justify-content: center !important;
    text-align: center !important;
  }

  /* Mobile-Only Center Alignment: Section 12 Real Results */
  #results .col-lg-5 {
    width: 100% !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #results .col-lg-5 .section-tag,
  #results .col-lg-5 .section-title,
  #results .col-lg-5 p {
    text-align: center !important;
  }

  #results .col-lg-5 .row {
    width: 100% !important;
    justify-content: center !important;
  }

  #results .col-lg-5 .row .col-6 > div {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #results .col-lg-5 .badge {
    margin: 0 auto !important;
  }

  .f-ann { display: none !important; }
}

@media (max-width: 576px) {
  #hero-pin-wrapper {
    padding: 60px 0 30px 0 !important;
  }

  .section-title { font-size: 1.75rem !important; }
  .section-subtitle { font-size: 0.9rem !important; }
  
  .btn-finch-primary,
  .btn-finch-secondary {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    padding: 12px 18px !important;
  }
  
  #orbit-stage {
    width: min(340px, 92vw) !important;
    height: min(340px, 92vw) !important;
  }

  .stage-node.active-spotlight {
    width: min(310px, 88vw) !important;
    margin-left: calc(-1 * min(155px, 44vw)) !important;
    padding: 14px !important;
  }

  .arc-card-item {
    width: min(320px, 90vw) !important;
    margin-left: calc(-1 * min(160px, 45vw)) !important;
  }

  .trust-indicators {
    gap: 6px !important;
  }

  .trust-badge {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }
}

/* --------------------------------------------------------------------------
   19B. TRANSPARENT-BACKGROUND SECTION HEADING CONTRAST FIX
   Sections whose backgrounds show the office photo (transparent / no solid fill)
   need white headings so text is legible against the light-wash background image.
   Do NOT apply to sections with solid-white cards (e.g. #people bg-card-solid).
   -------------------------------------------------------------------------- */

/* Hero section — "FROM FIRST CLICK" */
#hero .section-title,
#hero h1.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* Automation section — "THE FOLLOW-UP HAPPENS" */
#automation .section-title,
#automation h2.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* Revenue Attribution section — "REVENUE ATTRIBUTION" */
#revenue .section-title,
#revenue h2.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* Partnership section — "WE'RE NOT HERE FOR THE CAMPAIGN." */
#partnership .section-title,
#partnership h2.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* People section — "AUTOMATION STARTS THE FOLLOW-UP." */
#people .section-title,
#people h2.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* Gradient spans inside those sections:
   Remove inherited text-shadow so the gradient clip renders correctly.
   The gradient (background-clip: text) is already defined globally on .text-gradient. */
#hero .section-title .text-gradient,
#automation .section-title .text-gradient,
#revenue .section-title .text-gradient,
#partnership .section-title .text-gradient,
#people .section-title .text-gradient {
  text-shadow: none !important;
  /* Ensure gradient is fully applied over the white parent color */
  background: linear-gradient(125deg, #4f46e5 0%, #7c3aed 20%, #db2777 40%, #06b6d4 60%, #7c3aed 80%, #4f46e5 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  animation: smoothGradientMove 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
}

/* --------------------------------------------------------------------------
   20. ACCESSIBILITY & PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .orbital-nodes-track,
  .orbital-node-inner,
  .btn-finch-primary::before {
    animation: none !important;
  }
}


@media (max-width: 576px) {
  #hero-pin-wrapper {
    padding: 60px 0 30px 0 !important;
  }

  .section-title { font-size: 1.75rem !important; }
  .section-subtitle { font-size: 0.9rem !important; }
  
  .btn-finch-primary,
  .btn-finch-secondary {
    width: 100% !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    padding: 12px 18px !important;
  }
  
  #orbit-stage {
    width: min(340px, 92vw) !important;
    height: min(340px, 92vw) !important;
  }

  .stage-node.active-spotlight {
    width: min(310px, 88vw) !important;
    margin-left: calc(-1 * min(155px, 44vw)) !important;
    padding: 14px !important;
  }

  .arc-card-item {
    width: min(320px, 90vw) !important;
    margin-left: calc(-1 * min(160px, 45vw)) !important;
  }

  .trust-indicators {
    gap: 6px !important;
  }

  .trust-badge {
    font-size: 0.72rem !important;
    padding: 4px 8px !important;
  }
}

/* --------------------------------------------------------------------------
   19B. TRANSPARENT-BACKGROUND SECTION HEADING CONTRAST FIX
   Sections whose backgrounds show the office photo (transparent / no solid fill)
   need white headings so text is legible against the light-wash background image.
   Do NOT apply to sections with solid-white cards (e.g. #people bg-card-solid).
   -------------------------------------------------------------------------- */

/* Hero section — "FROM FIRST CLICK" */
#hero .section-title,
#hero h1.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* Automation section — "THE FOLLOW-UP HAPPENS" */
#automation .section-title,
#automation h2.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* Revenue Attribution section — "REVENUE ATTRIBUTION" */
#revenue .section-title,
#revenue h2.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* Partnership section — "WE'RE NOT HERE FOR THE CAMPAIGN." */
#partnership .section-title,
#partnership h2.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* People section — "AUTOMATION STARTS THE FOLLOW-UP." */
#people .section-title,
#people h2.section-title {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.30) !important;
}

/* Gradient spans inside those sections:
   Remove inherited text-shadow so the gradient clip renders correctly.
   The gradient (background-clip: text) is already defined globally on .text-gradient. */
#hero .section-title .text-gradient,
#automation .section-title .text-gradient,
#revenue .section-title .text-gradient,
#partnership .section-title .text-gradient,
#people .section-title .text-gradient {
  text-shadow: none !important;
  /* Ensure gradient is fully applied over the white parent color */
  background: linear-gradient(125deg, #4f46e5 0%, #7c3aed 20%, #db2777 40%, #06b6d4 60%, #7c3aed 80%, #4f46e5 100%) !important;
  background-size: 250% auto !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
  animation: smoothGradientMove 5s cubic-bezier(0.4, 0, 0.2, 1) infinite alternate !important;
}

/* --------------------------------------------------------------------------
   20. ACCESSIBILITY & PREFERS-REDUCED-MOTION
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  .orbital-nodes-track,
  .orbital-node-inner,
  .btn-finch-primary::before {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   HERO — MOBILE FIT (must stay last: the max-width:576px blocks above set
   #hero-pin-wrapper padding with a shorthand + !important)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
/* ── Hero: fit between the sticky header and the fixed bottom nav ──
     The standalone design had neither chrome, so its 75px top padding was
     free. Here the sticky .fb-header eats ~90px at the top and the fixed
     .fb-bottom-nav eats ~91px at the bottom, which pushed the CTAs and trust
     chips underneath the nav on shorter phones. Trim the top, reserve the
     nav's footprint at the bottom, and tighten the internal rhythm so the
     whole hero block clears both. */
  #hero-pin-wrapper {
    padding-top: 14px !important;
    padding-bottom: calc(24px + 79px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #hero-content-reveal .section-title {
    margin-bottom: 0.5rem !important;
  }

  #hero-content-reveal .section-subtitle {
    margin-bottom: 1rem !important;
  }

  #hero-content-reveal .trust-indicators {
    padding-top: 0.7rem !important;
    gap: 0.4rem !important;
  }

  #hero-content-reveal .d-flex.flex-nowrap {
    margin-bottom: 0.75rem !important;
  }

  /* Four trust chips wrapped onto three ragged rows at 360px. A fixed 2x2 grid
     is what actually buys the height needed to clear the bottom nav. */
  #hero-content-reveal .trust-indicators {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    justify-items: start;
  }

  #hero-content-reveal .trust-badge {
    padding: 4px 9px !important;
    font-size: 0.66rem !important;
  }

  #hero-content-reveal .btn-finch-primary,
  #hero-content-reveal .btn-finch-secondary {
    padding-top: 0.6rem !important;
    padding-bottom: 0.6rem !important;
  }
}

/* Very small phones (iPhone SE and similar): the subtitle wraps to a 4th line
   and pushes the chips under the bottom nav, so step the type down once more. */
@media (max-width: 360px) {
  #hero-content-reveal .section-title {
    font-size: 1.55rem !important;
    line-height: 1.15 !important;
  }

  #hero-content-reveal .section-subtitle {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  #hero-content-reveal .trust-badge {
    padding: 3px 7px !important;
    font-size: 0.6rem !important;
  }

  #hero-pin-wrapper {
    padding-top: 6px !important;
  }

  #hero-content-reveal .d-flex.flex-nowrap {
    gap: 0.5rem !important;
  }
}

/* --------------------------------------------------------------------------
   TOUCH DEVICES — NEUTRALISE STICKY :hover
   On a touch screen :hover latches after a tap and stays until you tap
   somewhere else, so every lift / scale / slide below stayed stuck on the
   element you last touched. Restate each one at its base value for pointers
   that cannot truly hover. Desktop is unaffected.
   -------------------------------------------------------------------------- */
@media (hover: none) {
  .section-tag:hover,
  .section-eyebrow:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(79, 70, 229, 0.18);
  }

  .btn-finch-primary:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(79, 70, 229, 0.35);
  }

  .btn-finch-secondary:hover {
    transform: none;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.12);
  }

  .trust-badge:hover {
    transform: none;
    border-color: rgba(15, 23, 42, 0.12);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  }

  .kanban-card:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 10px rgba(15, 23, 42, 0.05);
  }

  .minimal-stat-card:hover {
    transform: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
  }

  .roadmap-step-card:hover {
    transform: none;
    border-color: #e2e8f0;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
  }

  /* .active shares this rule and must keep its styling - only reset hover */
  .system-ind-item:hover:not(.active) {
    transform: none;
    background: #ffffff;
    border-color: rgba(15, 23, 42, 0.14) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
  }

  /* base transform is translateX(24px) scale(.92) - not none */
  .service-tag-v:hover {
    transform: translateX(24px) scale(0.92);
    background: rgba(15, 23, 42, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }

  #core-hub:hover .core-logo-img {
    transform: none;
  }

  .result-case-card:hover .rc-arrow {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   JOURNEY MOMENT CARD — MOBILE ALIGNMENT
   The card inherited text-align:center, but .mc-icon-wrap is a fixed-width
   block and .mc-bullets are a left-aligned flex list, so the pill, heading and
   copy floated centre while the icon sat hard against the left edge and the
   bullets ran left - three different alignments in one card. Align the whole
   copy column left; the mockup below keeps its own centring.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .moment-card-container > div:first-child,
  .moment-card-container .mc-step-tag,
  .moment-card-container .mc-title,
  .moment-card-container .mc-sub,
  .moment-card-container .mc-desc,
  .moment-card-container .mc-bullets,
  .moment-card-container .mc-bullet {
    text-align: left !important;
  }

  .moment-card-container > div:first-child {
    align-items: flex-start !important;
  }
}

/* --------------------------------------------------------------------------
   SYSTEM ORBIT — LARGER CORE LOGO ON MOBILE
   The hub was 48px with a 30px mark, which read as a speck at the centre of
   the rings. Scaled up ~1.5x; the nearest orbit node centres sit ~95px away,
   so this still clears them.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  #core-hub {
    width: 74px !important;
    height: 74px !important;
  }

  .core-logo-img {
    width: 50px !important;
    height: auto !important;
  }
}

/* --------------------------------------------------------------------------
   SYSTEM ORBIT — ACTIVE STAGE CARD AS A BOLD COLOUR BLOCK
   Was a white card ringed by an animated gradient border. Now a solid
   stage-coloured block with white type, matching the reference. Inline styles
   and Bootstrap badge utilities both carry weight here, hence !important.
   -------------------------------------------------------------------------- */
#sn-1.active-spotlight { --sn: #f97316; --sn-deep: #ea580c; }
#sn-2.active-spotlight { --sn: #0ea5e9; --sn-deep: #0369a1; }
#sn-3.active-spotlight { --sn: #10b981; --sn-deep: #047857; }
#sn-4.active-spotlight { --sn: #8b5cf6; --sn-deep: #6d28d9; }
#sn-5.active-spotlight { --sn: #f43f5e; --sn-deep: #be123c; }

.stage-node.active-spotlight {
  --sn: #4f46e5;
  --sn-deep: #4338ca;
  background: linear-gradient(160deg, var(--sn) 0%, var(--sn-deep) 100%) !important;
  border: 0 !important;
  border-radius: 26px !important;
  color: #ffffff !important;
  box-shadow: 0 26px 60px rgba(15, 23, 42, 0.22),
              0 0 34px color-mix(in srgb, var(--sn) 42%, transparent) !important;
}

/* the animated gradient ring is redundant on a solid block */
.stage-node.active-spotlight::before {
  display: none !important;
}

/* Icon mark: white on a translucent well (overrides the inline swatch) */
.stage-node.active-spotlight .node-icon-box {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.32);
}

/* Stage number + label pill in the header */
.stage-node.active-spotlight .node-header .badge {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.32) !important;
}

.stage-node.active-spotlight .node-header .fw-bold {
  color: rgba(255, 255, 255, 0.9) !important;
  letter-spacing: 0.08em;
}

.stage-node.active-spotlight .node-title {
  color: #ffffff !important;
  letter-spacing: -0.01em;
}

.stage-node.active-spotlight .node-desc {
  color: rgba(255, 255, 255, 0.86) !important;
}

/* Footer tag reads as a chip on the colour, like the reference's story link */
.stage-node.active-spotlight .node-footer .badge {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.34) !important;
  padding: 6px 12px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   SYSTEM ORBIT — LEFT LIST ACCENT FOLLOWS THE ACTIVE STAGE COLOUR
   The active row's border, left rail and number chip were hard-coded indigo,
   so with the stage card now painted per stage the two sides disagreed
   (orange card next to an indigo row). Same five hues as the stage nodes.
   -------------------------------------------------------------------------- */
#system .system-ind-item:nth-child(1) { --sn: #f97316; --sn-deep: #ea580c; }
#system .system-ind-item:nth-child(2) { --sn: #0ea5e9; --sn-deep: #0369a1; }
#system .system-ind-item:nth-child(3) { --sn: #10b981; --sn-deep: #047857; }
#system .system-ind-item:nth-child(4) { --sn: #8b5cf6; --sn-deep: #6d28d9; }
#system .system-ind-item:nth-child(5) { --sn: #f43f5e; --sn-deep: #be123c; }

#system .system-ind-item.active {
  border-color: var(--sn) !important;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--sn) 28%, transparent),
              0 4px 12px rgba(0, 0, 0, 0.05);
}

/* The 4px accent rail is removed - the coloured border, number chip and glow
   already mark the active row. Overrides the base .active::before, which
   otherwise paints an indigo strip. */
#system .system-ind-item.active::before {
  display: none;
}

#system .system-ind-item.active .system-ind-num {
  background: linear-gradient(135deg, var(--sn) 0%, var(--sn-deep) 100%);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--sn) 45%, transparent);
}

/* resting number chip picks up a hint of its own stage too */
#system .system-ind-item:not(.active) .system-ind-num {
  color: var(--sn-deep);
  background: color-mix(in srgb, var(--sn) 12%, transparent);
}