/* ==========================================================================
   BETTER DECISION MARKETING — ADDREACH NEO-BRUTALIST LIGHT SAAS DESIGN SYSTEM
   - 100% Crisp White Background (#FFFFFF) & Ultra-Subtle Slate Accent (#F8FAFC)
   - High-Contrast Modern Neo-Brutalist: 1.5px/2px solid #101117 with crisp hard shadows
   - Highlighter Yellow Marker Accent: #FEF08A / #FDE047 for high-converting headline focus
   - Pastel Accents:
     * Soft Lilac: #C6B9FB
     * Electric Violet: #9747FF
     * Soft Mint Green: #C4EEC4
     * Soft Sky Blue: #B7DDFA
     * Soft Pastel Ochre: #F8D8A0
     * Soft Pastel Coral: #F3B6A5
   - Strict 100% Mobile & Tablet Responsive: Zero horizontal scroll on mobile
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces - Pure Crisp White Canvas */
  --bg-canvas: #FFFFFF;
  --bg-canvas-alt: #F8FAFC;
  --bg-card: #FFFFFF;
  --bg-header: #FFFFFF;
  --bg-footer: #FFFFFF;

  /* Brand Inks */
  --ink-primary: #101117;
  --ink-secondary: #3F4450;
  --ink-muted: #667085;
  --ink-subtle: #98A2B3;

  /* Highlighter Yellow & Pastels */
  --highlighter-yellow: #FEF08A;
  --highlighter-yellow-bold: #FDE047;
  --highlighter-yellow-border: #FACC15;
  --pastel-lilac: #C6B9FB;
  --pastel-lilac-hover: #B5A4F7;
  --pastel-violet: #9747FF;
  --pastel-mint: #C4EEC4;
  --pastel-mint-hover: #AFE8AF;
  --pastel-blue: #B7DDFA;
  --pastel-yellow: #FEF08A;
  --pastel-coral: #F3B6A5;

  /* Neo-Brutalist Lines & Hard Shadows */
  --border-neo: 1.5px solid #101117;
  --border-thick: 2px solid #101117;
  --border-subtle: 1px solid #E4E7EC;
  --shadow-neo-sm: 2px 2px 0px #101117;
  --shadow-neo: 4px 4px 0px #101117;
  --shadow-neo-lg: 6px 6px 0px #101117;
  --shadow-neo-hover: 6px 6px 0px #101117;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --radius-pill: 9999px;

  /* Typography */
  --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --transition-fast: 0.15s ease;
  --transition-smooth: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background-color: var(--bg-canvas);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 36px);
}

/* ==========================================================================
   NAVIGATION (Addreach Light Header)
   ========================================================================== */
.site-header-reach {
  background-color: var(--bg-header);
  border-bottom: var(--border-neo);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: clamp(76px, 9vh, 84px);
}

.brand-reach {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800;
  font-size: 21px;
  color: var(--ink-primary);
  letter-spacing: -0.02em;
}

.brand-reach img,
.brand-logo-img {
  display: block;
  height: 65px !important;
  width: auto;
  max-width: 260px;
  object-fit: contain;
  background: transparent !important;
}

.brand-emblem {
  width: 38px;
  height: 38px;
  background-color: var(--pastel-lilac);
  border: var(--border-neo);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-neo-sm);
  flex-shrink: 0;
}

.nav-links-reach {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}

.nav-links-reach a {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-secondary);
  transition: color var(--transition-fast);
  padding: 6px 2px;
}

.nav-links-reach a:hover,
.nav-links-reach a.active {
  color: var(--ink-primary);
  border-bottom: 2px solid var(--ink-primary);
}

.header-cta-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.btn-reach-signin {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink-primary);
  padding: 8px 14px;
  transition: color var(--transition-fast);
}

.btn-reach-signin:hover {
  color: var(--pastel-violet);
}

.btn-neo-lilac {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--pastel-lilac);
  color: #101117;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: var(--border-neo);
  box-shadow: var(--shadow-neo);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-neo-lilac:hover {
  background-color: var(--pastel-lilac-hover);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-neo-hover);
}

.btn-neo-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #FFFFFF;
  color: #101117;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  border: var(--border-neo);
  box-shadow: var(--shadow-neo);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-neo-white:hover {
  background-color: var(--bg-canvas);
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-neo-hover);
}

.nav-mobile-trigger {
  display: none;
  background: var(--bg-canvas);
  border: var(--border-neo);
  box-shadow: 2px 2px 0px #000;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 20px;
  cursor: pointer;
  color: #101117;
}

@media (max-width: 920px) {
  .nav-links-reach {
    display: none !important;
  }
  .nav-mobile-trigger {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .header-cta-actions .btn-reach-signin {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .header-cta-actions .btn-neo-lilac {
    display: none !important;
  }
}

/* ==========================================================================
   HERO SECTIONS (Pure White, Expansive, Centered & Middle-Aligned Architecture)
   ========================================================================== */
.hero-reach-light {
  height: calc(100vh - clamp(76px, 9vh, 84px));
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(14px, 2vh, 24px) 0 0;
  position: relative;
  background-color: #FFFFFF;
  text-align: center;
  box-sizing: border-box;
  overflow: hidden;
}

.hero-reach-light > .container {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.features-hero-light,
.solutions-hero-light,
.arch-hero-light,
.pricing-hero-light,
.contact-hero-light,
.feat-page-hero {
  padding: clamp(48px, 6.5vh, 72px) 0 clamp(36px, 5vh, 52px);
  position: relative;
  background-color: #FFFFFF;
  text-align: center;
  width: 100%;
}

.features-hero-light > .container,
.solutions-hero-light > .container,
.arch-hero-light > .container,
.pricing-hero-light > .container,
.contact-hero-light > .container,
.feat-page-hero > .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.hero-centered-content {
  max-width: 980px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-inline: auto !important;
  margin-top: auto;
  margin-bottom: auto;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  width: 100%;
}

.hero-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #FFFFFF;
  border: var(--border-neo);
  box-shadow: var(--shadow-neo-sm);
  color: #101117;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 10px;
}

.hero-pill-badge .dot-live {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #05A870;
  box-shadow: 0 0 6px rgba(5, 168, 112, 0.6);
  flex-shrink: 0;
}

.hero-reach-headline {
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--ink-primary);
  margin-bottom: 10px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  word-break: break-word;
}

/* ==========================================================================
   AUTHENTIC HAND-DRAWN HIGHLIGHTER BRUSH STROKE (Organic Marker Highlighter)
   ========================================================================== */
.highlight-yellow,
.highlight-badge,
.highlight-brush {
  position: relative;
  display: inline-block;
  color: #101117;
  font-weight: 800;
  z-index: 1;
  padding: 0 8px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  white-space: nowrap;
}

.highlight-yellow::before,
.highlight-badge::before,
.highlight-brush::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  bottom: 2%;
  height: 82%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 120' preserveAspectRatio='none'%3E%3Cpath d='M8,82 C75,22 185,28 295,18 C385,12 460,24 494,32 C500,38 497,85 476,102 C396,118 285,114 175,110 C90,106 24,112 6,95 Z' fill='%23FDE047' fill-opacity='0.92'/%3E%3Cpath d='M16,68 C88,14 195,18 298,12 C375,8 450,18 488,22 C495,26 490,75 472,92 C392,104 292,100 185,96 C100,92 32,98 12,80 Z' fill='%23FEF08A' fill-opacity='0.85'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: -1;
  pointer-events: none;
  transform: rotate(-1.2deg);
}

.hero-reach-subhead {
  font-size: clamp(14.5px, 1.25vw, 16.5px);
  color: var(--ink-secondary);
  line-height: 1.45;
  margin-bottom: 12px;
  max-width: 680px;
  margin-inline: auto;
  text-align: center;
}

.hero-action-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.hero-action-row a {
  padding: 10px 22px;
  font-size: 14.5px;
}

.hero-proof-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 20px);
  font-size: 12.5px;
  color: var(--ink-secondary);
  font-weight: 600;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.hero-proof-list span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.proof-tick {
  color: #05A870;
  font-weight: 800;
}

/* TABLET RESPONSIVE (641px to 1024px) */
@media (max-width: 1024px) and (min-width: 641px) {
  .hero-reach-light,
  .features-hero-light,
  .solutions-hero-light,
  .arch-hero-light,
  .pricing-hero-light,
  .contact-hero-light,
  .feat-page-hero {
    padding: 44px 0 34px !important;
  }
  .hero-pill-badge {
    font-size: 12.5px !important;
    padding: 6px 16px !important;
    margin-bottom: 16px !important;
  }
  .hero-reach-headline {
    font-size: clamp(36px, 5.4vw, 50px) !important;
    line-height: 1.12 !important;
    margin-bottom: 18px !important;
    max-width: 720px !important;
  }
  .hero-reach-subhead {
    font-size: 16.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
    max-width: 640px !important;
  }
  .hero-action-row {
    margin-bottom: 18px !important;
    gap: 14px !important;
  }
  .hero-proof-list {
    font-size: 13.5px !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
  }
}

/* MOBILE RESPONSIVE (<= 640px) */
@media (max-width: 640px) {
  .hero-reach-light,
  .features-hero-light,
  .solutions-hero-light,
  .arch-hero-light,
  .pricing-hero-light,
  .contact-hero-light,
  .feat-page-hero {
    padding: 40px 0 28px !important;
  }
  .hero-pill-badge {
    font-size: 12px !important;
    padding: 6px 14px !important;
    margin-bottom: 16px !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  .hero-reach-headline {
    font-size: clamp(30px, 8vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
    margin-bottom: 16px !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  .highlight-yellow,
  .highlight-badge,
  .highlight-brush {
    white-space: normal !important;
    padding: 0 4px !important;
    background: transparent !important;
    border: none !important;
  }
  .highlight-yellow::before,
  .highlight-badge::before,
  .highlight-brush::before {
    left: -4px !important;
    right: -4px !important;
    height: 74% !important;
    bottom: 4% !important;
  }
  .hero-reach-subhead {
    font-size: 15.5px !important;
    line-height: 1.55 !important;
    margin-bottom: 20px !important;
    padding: 0 4px !important;
  }
  .hero-action-row {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
  }
  .hero-action-row a {
    width: 100% !important;
    max-width: 340px !important;
    padding: 14px 24px !important;
    font-size: 15.5px !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .hero-proof-list {
    flex-direction: column !important;
    gap: 8px !important;
    font-size: 13px !important;
    margin-bottom: 18px !important;
  }
  .hero-reach-light {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  .hero-centered-content {
    margin: 0 !important;
  }
  .hero-marquee-section {
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    padding-bottom: 0 !important;
  }
  .marquee-intro-label {
    font-size: 10px !important;
    letter-spacing: 0.05em !important;
    padding: 0 8px !important;
    margin-bottom: 10px !important;
  }
  .marquee-biz-pill {
    padding: 8px 16px !important;
    font-size: 13px !important;
  }
}

/* ==========================================================================
   HERO BUSINESS TYPES CONTINUOUS MARQUEE (Infinite Looping Ticker)
   ========================================================================== */
.hero-marquee-section {
  width: 100%;
  margin-top: auto;
  margin-bottom: 0;
  padding-bottom: clamp(10px, 1.8vh, 18px);
  text-align: center;
}

.marquee-intro-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.marquee-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #05A870;
  box-shadow: 0 0 6px rgba(5, 168, 112, 0.6);
  animation: pulseLiveDot 2s infinite ease-in-out;
}

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

.hero-marquee-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 6px 0;
  mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
}

.hero-marquee-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: heroMarqueeScroll 36s linear infinite;
  will-change: transform;
}

.hero-marquee-wrap:hover .hero-marquee-track {
  animation-play-state: paused;
}

@keyframes heroMarqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-biz-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #FFFFFF;
  border: 1.5px solid #101117;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-primary);
  box-shadow: 2px 2px 0px #101117;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.marquee-biz-pill:hover,
.marquee-biz-pill.active {
  background-color: var(--pastel-mint);
  transform: translateY(-2px);
  box-shadow: 3px 3px 0px #101117;
}

.biz-pill-icon {
  font-size: 14px;
}

.biz-pill-name {
  font-weight: 700;
}

.biz-pill-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  background: #FEF08A;
  border: 1px solid #101117;
  padding: 1px 6px;
  border-radius: 4px;
  color: #101117;
}

/* ==========================================================================
   INTERACTIVE PIPELINE STUDIO (Fold 2: Real-Time Telemetry & Studio Card)
   ========================================================================== */
.section-pipeline-studio {
  background-color: #FFFFFF;
  padding: clamp(52px, 7vh, 80px) 0 clamp(44px, 6vh, 68px);
  border-top: 2px solid #101117;
  position: relative;
}

.section-pipeline-studio .hero-showcase-wrapper {
  margin-top: 0;
}

.hero-showcase-wrapper {
  max-width: 1040px;
  margin-inline: auto;
  width: 100%;
}

.hero-card-shell {
  background-color: #FFFFFF;
  border: 2px solid #101117;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neo-lg);
  overflow: hidden;
  text-align: left;
  width: 100%;
}

.card-window-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #F8FAFC;
  border-bottom: 1.5px solid #101117;
  gap: 12px;
}

.window-dots {
  display: flex;
  gap: 6px;
}

.w-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.w-red { background-color: #FF5F56; }
.w-yellow { background-color: #FFBD2E; }
.w-green { background-color: #27C93F; }

.window-address-bar {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-muted);
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 4px 16px;
  flex: 1;
  max-width: 440px;
  text-align: center;
  transition: all var(--transition-fast);
}

@media (max-width: 640px) {
  .window-address-bar {
    display: none;
  }
}

.window-status-pill {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  background-color: var(--pastel-mint);
  border: 1px solid #101117;
  color: #101117;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.hero-card-body {
  padding: clamp(18px, 3vw, 32px);
}

/* Business Mode Selector Controls inside studio */
.biz-studio-controller {
  margin-bottom: 22px;
}

.biz-mode-control-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.biz-mode-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-secondary);
}

.live-pulse-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  background-color: var(--pastel-lilac);
  border: 1px solid #101117;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  color: #101117;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.biz-mode-timer-track {
  width: 140px;
  height: 6px;
  background: #E2E8F0;
  border: 1px solid #101117;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.biz-mode-timer-bar {
  width: 0%;
  height: 100%;
  background-color: #101117;
  transition: width 0.08s linear;
}

.business-mode-selector {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.biz-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #F8FAFC;
  border: 1.5px solid #D0D5DD;
  border-radius: var(--radius-pill);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.biz-pill-btn:hover {
  background-color: #EDF2F7;
  color: #101117;
  border-color: #101117;
}

.biz-pill-btn.active {
  background-color: var(--pastel-mint);
  border-color: #101117;
  color: #101117;
  box-shadow: 2px 2px 0px #101117;
  transform: translateY(-1px);
}

/* Card Content Animation on Business Switch */
.card-content-transition {
  transition: opacity 0.22s cubic-bezier(0.4, 0, 0.2, 1), transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-switching {
  opacity: 0.25;
  transform: translateY(6px);
}

.hero-metrics-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

@media (max-width: 680px) {
  .hero-metrics-strip {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

.hero-metric-tile {
  background-color: #F8FAFC;
  border: 1.5px solid #101117;
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: 2px 2px 0px #101117;
  transition: all var(--transition-fast);
}

.metric-label-p {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}

.metric-big-num {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1.2;
}

.metric-trend-badge {
  font-size: 12px;
  font-weight: 700;
  color: #05A870;
  margin-top: 4px;
}

.hero-canvas-inner {
  background-color: #FFFFFF;
  border: 1.5px solid #101117;
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: 3px 3px 0px #101117;
}

.hero-canvas-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2E8F0;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.canvas-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-muted);
  background: #EDF2F7;
  padding: 2px 8px;
  border-radius: 4px;
}

.canvas-subject {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-primary);
}

.scenario-flow-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.scenario-arrow-connector {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-muted);
  text-align: center;
}

@media (max-width: 820px) {
  .scenario-flow-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .scenario-arrow-connector {
    transform: rotate(90deg);
    margin: -4px 0;
  }
}

.scenario-node-box {
  background-color: #F8FAFC;
  border: 1.5px solid #101117;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  box-shadow: 2px 2px 0px #101117;
  transition: all var(--transition-fast);
}

.scenario-node-box:hover {
  transform: translateY(-2px);
}

.node-pulse-active {
  animation: nodePulseGlow 0.9s ease-out;
}

@keyframes nodePulseGlow {
  0% { transform: scale(1); box-shadow: 2px 2px 0px #101117; }
  50% { transform: scale(1.04); background-color: #FEF08A; box-shadow: 4px 4px 0px #101117; }
  100% { transform: scale(1); box-shadow: 2px 2px 0px #101117; }
}

.node-chip {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
  background: #FEF08A;
  border: 1px solid #101117;
  color: #101117;
  text-transform: uppercase;
}

.node-headline {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink-primary);
  margin-bottom: 3px;
}

.node-desc-p {
  font-size: 12px;
  color: var(--ink-secondary);
  line-height: 1.45;
}

/* Interactive Event Simulation Bar */
.live-simulate-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1.5px dashed #CBD5E1;
  flex-wrap: wrap;
  gap: 12px;
}

.simulate-info {
  font-size: 12.5px;
  color: var(--ink-secondary);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-simulate-event {
  background-color: #FFFFFF;
  border: 1.5px solid #101117;
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #101117;
  box-shadow: 2px 2px 0px #101117;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-simulate-event:hover {
  background-color: #FEF08A;
  transform: translateY(-1px);
  box-shadow: 3px 3px 0px #101117;
}

/* ==========================================================================
   METRIC BANNER (30,000+ Reach Style)
   ========================================================================== */
.banner-counter-neo {
  background-color: var(--pastel-lilac);
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
  padding: clamp(28px, 4vw, 40px) 0;
  color: #101117;
}

.banner-counter-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.counter-digit-huge {
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.counter-tag-text {
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  line-height: 1.35;
  max-width: 660px;
}

/* ==========================================================================
   ECOSYSTEM PARTNER STRIP
   ========================================================================== */
.strip-partners {
  background-color: #FFFFFF;
  padding: 28px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.partners-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.partner-logo-pill {
  font-size: 14.5px;
  font-weight: 800;
  color: #667085;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   DUAL TRACK FEATURE SECTION
   ========================================================================== */
.section-dual-track {
  padding: clamp(60px, 8vh, 100px) 0;
  background-color: var(--bg-canvas);
}

.section-header-block {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vh, 56px);
}

.section-h2-title {
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink-primary);
  margin-bottom: 14px;
}

.section-lead-p {
  font-size: 16.5px;
  color: var(--ink-secondary);
  line-height: 1.6;
}

.dual-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

@media (max-width: 840px) {
  .dual-cards-grid {
    grid-template-columns: 1fr;
  }
}

.neo-card {
  background-color: #FFFFFF;
  border: var(--border-neo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neo);
  padding: clamp(24px, 4vw, 38px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

.neo-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-neo-hover);
}

.neo-card.tint-mint { background-color: var(--pastel-mint); }
.neo-card.tint-blue { background-color: var(--pastel-blue); }
.neo-card.tint-yellow { background-color: var(--pastel-yellow); }
.neo-card.tint-coral { background-color: var(--pastel-coral); }
.neo-card.tint-lilac { background-color: var(--pastel-lilac); }

.card-top-pill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.category-tag-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  background-color: #101117;
  color: #FFFFFF;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.card-h3-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink-primary);
  margin-bottom: 10px;
  line-height: 1.2;
}

.card-body-text {
  font-size: 14.5px;
  color: var(--ink-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}

/* ==========================================================================
   2.5X GROWTH SHOWCASE SECTION (Light Theme)
   ========================================================================== */
.section-growth-showcase {
  background-color: var(--bg-canvas-alt);
  border-top: var(--border-thick);
  border-bottom: var(--border-thick);
  padding: clamp(60px, 8vh, 100px) 0;
}

.growth-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

@media (max-width: 900px) {
  .growth-layout-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

.badge-25x {
  display: inline-block;
  background-color: var(--pastel-yellow);
  color: #101117;
  border: var(--border-neo);
  box-shadow: var(--shadow-neo);
  font-size: clamp(44px, 5.5vw, 68px);
  font-weight: 800;
  padding: 8px 26px;
  border-radius: var(--radius-md);
  line-height: 1;
  margin-bottom: 20px;
}

/* ==========================================================================
   3-STEP PROCESS SECTION
   ========================================================================== */
.section-process-three {
  padding: clamp(60px, 8vh, 100px) 0;
  background-color: var(--bg-canvas);
}

.process-grid-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 920px) {
  .process-grid-three {
    grid-template-columns: 1fr;
  }
}

.step-neo-card {
  background-color: #FFFFFF;
  border: var(--border-neo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neo);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

.step-neo-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-neo-hover);
}

.step-digit-badge {
  width: 44px;
  height: 44px;
  background-color: var(--pastel-lilac);
  border: var(--border-neo);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 18px;
  color: #101117;
  margin-bottom: 18px;
  box-shadow: 2px 2px 0px #000;
}

.step-h4-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-primary);
  margin-bottom: 8px;
  line-height: 1.25;
}

.step-p-desc {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.55;
}

/* ==========================================================================
   4-COLUMN STAT COUNTERS
   ========================================================================== */
.section-stats-four {
  background-color: #FFFFFF;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 50px 0;
}

.stats-flex-four {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 860px) {
  .stats-flex-four {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-flex-four {
    grid-template-columns: 1fr;
  }
}

.stat-neo-box {
  background-color: var(--bg-canvas);
  border: var(--border-neo);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neo-sm);
  padding: 20px;
  text-align: center;
}

.stat-big-val {
  font-size: clamp(32px, 3.8vw, 44px);
  font-weight: 800;
  color: var(--ink-primary);
  line-height: 1;
  margin-bottom: 6px;
}

.stat-desc-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-secondary);
}

/* ==========================================================================
   6-BOX BENTO FEATURES GRID
   ========================================================================== */
.section-bento-features {
  padding: clamp(60px, 8vh, 100px) 0;
  background-color: var(--bg-canvas);
}

.bento-grid-six {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 960px) {
  .bento-grid-six {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .bento-grid-six {
    grid-template-columns: 1fr;
  }
}

.bento-feature-card {
  background-color: #FFFFFF;
  border: var(--border-neo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neo);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all var(--transition-fast);
}

.bento-feature-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-neo-hover);
}

.bento-icon-frame {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  border: var(--border-neo);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  box-shadow: 2px 2px 0px #000;
}

.bento-h4-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-primary);
  margin-bottom: 8px;
  line-height: 1.25;
}

.bento-p-text {
  font-size: 14px;
  color: var(--ink-secondary);
  line-height: 1.55;
  margin-bottom: 16px;
}

.status-pill-neo {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  display: inline-block;
  align-self: flex-start;
  border: 1px solid #101117;
}

.pill-live {
  background-color: var(--pastel-mint);
  color: #101117;
}

.pill-soon {
  background-color: var(--pastel-yellow);
  color: #101117;
}

/* ==========================================================================
   USE CASES TABBED SECTION
   ========================================================================== */
.section-use-cases {
  padding: clamp(60px, 8vh, 100px) 0;
  background-color: var(--bg-canvas-alt);
  border-top: 1px solid var(--border-subtle);
}

.use-case-tab-strip {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.use-pill-btn {
  background-color: #FFFFFF;
  border: var(--border-neo);
  border-radius: var(--radius-pill);
  box-shadow: 2px 2px 0px #000;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.use-pill-btn.active,
.use-pill-btn:hover {
  background-color: var(--pastel-lilac);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px #000;
}

.use-case-neo-panel {
  background-color: #FFFFFF;
  border: var(--border-neo);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neo-lg);
  padding: clamp(28px, 4.5vw, 48px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 36px;
  align-items: center;
}

@media (max-width: 860px) {
  .use-case-neo-panel {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   TOOL INTEGRATIONS GRID
   ========================================================================== */
.section-tool-grid {
  background-color: #FFFFFF;
  padding: clamp(60px, 8vh, 100px) 0;
  border-top: var(--border-thick);
}

.tools-grid-eight {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 960px) {
  .tools-grid-eight {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .tools-grid-eight {
    grid-template-columns: 1fr;
  }
}

.tool-neo-tile {
  background-color: var(--bg-canvas);
  border: var(--border-neo);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neo-sm);
  padding: 20px;
  transition: all var(--transition-fast);
}

.tool-neo-tile:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-neo);
}

.tool-tile-icon {
  width: 40px;
  height: 40px;
  background-color: var(--pastel-lilac);
  border: var(--border-neo);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 12px;
  box-shadow: 2px 2px 0px #000;
}

.tool-tile-title {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--ink-primary);
  margin-bottom: 4px;
}

.tool-tile-desc {
  font-size: 13px;
  color: var(--ink-secondary);
  line-height: 1.45;
}

/* ==========================================================================
   FAQ SECTION
   ========================================================================== */
.section-faq-reach {
  padding: clamp(60px, 8vh, 100px) 0;
  background-color: var(--bg-canvas);
}

.faq-stack-neo {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-neo-item {
  background-color: #FFFFFF;
  border: var(--border-neo);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-neo-sm);
  padding: 20px 24px;
  cursor: pointer;
}

.faq-q-bar {
  font-size: 17px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-primary);
}

.faq-q-icon {
  font-size: 20px;
  font-weight: 800;
  transition: transform var(--transition-fast);
}

.faq-a-body {
  display: none;
  font-size: 14.5px;
  color: var(--ink-secondary);
  line-height: 1.6;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-subtle);
}

.faq-neo-item.open .faq-a-body {
  display: block;
}

.faq-neo-item.open .faq-q-icon {
  transform: rotate(45deg);
}

/* ==========================================================================
   FINAL HIGH-IMPACT LIGHT CTA BANNER
   ========================================================================== */
.section-cta-reach {
  padding: 40px 0 clamp(60px, 8vh, 100px);
  background-color: var(--bg-canvas);
}

.cta-reach-box-light {
  background-color: #FFFFFF;
  border: var(--border-thick);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-neo-lg);
  padding: clamp(36px, 5vw, 64px);
  text-align: center;
  max-width: 1040px;
  margin: 0 auto;
  position: relative;
}

.cta-box-title {
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  color: var(--ink-primary);
}

.cta-box-sub {
  font-size: clamp(15.5px, 1.8vw, 18px);
  color: var(--ink-secondary);
  max-width: 620px;
  margin: 0 auto 32px;
  line-height: 1.6;
}

/* ==========================================================================
   FOOTER (Light Neo Footer)
   ========================================================================== */
.footer-reach-light {
  background-color: #FFFFFF;
  border-top: var(--border-neo);
  padding: clamp(48px, 6vh, 72px) 0 32px;
}

.footer-reach-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 48px;
}

@media (max-width: 900px) {
  .footer-reach-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 540px) {
  .footer-reach-grid {
    grid-template-columns: 1fr;
  }
}

.footer-head-title {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-primary);
  margin-bottom: 16px;
}

.footer-links-col {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-links-col a {
  font-size: 14.5px;
  color: var(--ink-secondary);
  transition: color var(--transition-fast);
}

.footer-links-col a:hover {
  color: var(--ink-primary);
  text-decoration: underline;
}

.footer-bottom-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13.5px;
  color: var(--ink-muted);
  flex-wrap: wrap;
  gap: 14px;
}

.status-dot-green {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  color: #05A870;
}

.green-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #05A870;
  box-shadow: 0 0 6px rgba(5, 168, 112, 0.6);
}