/* Responsibility: shared UI components, typography, buttons, ticker, footer, and reusable spacing helpers. */

/* ===== 04B. SHARED SYSTEMS / COMPONENTS ===== */
      .section-label {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: var(--lime);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .section-label::before {
        content: "";
        width: 24px;
        height: 1px;
        background: var(--lime);
        flex-shrink: 0;
      }
      .section-title {
        font-family: var(--font-display);
        font-size: clamp(40px, 6vw, 96px);
        line-height: 0.93;
        letter-spacing: -1px;
      }
      .btn-primary {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--black);
        background: var(--lime);
        border: none;
        padding: 14px 28px;
        font-weight: 700;
        transition: opacity 0.2s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
      .btn-primary:hover {
        opacity: 0.85;
      }
      .btn-ghost {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--white);
        background: transparent;
        border: 1px solid var(--border);
        padding: 14px 28px;
        transition:
          border-color 0.2s,
          color 0.2s;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
      }
      .btn-ghost:hover {
        border-color: var(--lime);
        color: var(--lime);
      }

/* ----- 04C. Shared Ticker ----- */
      .ticker {
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: 13px 0;
        overflow: hidden;
        background: var(--off-black);
      }
      .ticker-track {
        display: flex;
        animation: ticker-scroll 32s linear infinite;
        white-space: nowrap;
      }
      .ticker-item {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--muted);
        padding: 0 40px;
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .ticker-dot {
        width: 4px;
        height: 4px;
        background: var(--lime);
        border-radius: 50%;
        flex-shrink: 0;
      }

/* ----- 04D. Shared Footer ----- */
      footer {
        padding: 36px 48px;
        border-top: 1px solid var(--border);
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: var(--off-black);
        flex-wrap: wrap;
        gap: 20px;
      }
      .footer-logo {
        font-family: var(--font-display);
        font-size: 18px;
        letter-spacing: 2px;
      }
      .footer-logo span {
        color: var(--lime);
      }
      .footer-copy {
        font-family: var(--font-mono);
        font-size: 10px;
        color: var(--muted);
        letter-spacing: 1px;
      }
      .footer-links {
        display: flex;
        gap: 24px;
        flex-wrap: wrap;
      }
      .footer-links a {
        font-family: var(--font-mono);
        font-size: 10px;
        letter-spacing: 1px;
        color: var(--muted);
        text-decoration: none;
        text-transform: uppercase;
        transition: color 0.2s;
      }
      .footer-links a:hover {
        color: var(--lime);
      }

/* ----- 07B. Shared Typography / Interactive UI ----- */
      .section-label {
        font-size: 11px;
        letter-spacing: 2.4px;
        margin-bottom: var(--space-4);
        color: var(--lime);
      }
      .section-label::before {
        width: 26px;
        background: linear-gradient(90deg, var(--lime), transparent);
      }
      .section-title {
        font-size: clamp(46px, 6vw, 102px);
        line-height: 0.92;
        letter-spacing: -0.8px;
        text-wrap: balance;
      }
      .section-intro {
        max-width: 560px;
        font-size: 17px;
        line-height: 1.78;
        color: var(--text-muted);
      }

      .btn-primary,
      .btn-ghost,
      .nav-cta,
      .price-cta,
      .mob-ghost {
        font-size: 11px;
        letter-spacing: 1.8px;
        min-height: 52px;
        padding: 14px 24px;
        border-radius: var(--radius-pill);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
      }
      .btn-primary,
      .nav-cta {
        color: var(--black);
        background: linear-gradient(180deg, #d7ff4c 0%, var(--lime) 100%);
        border: 1px solid rgba(200, 255, 0, 0.74);
        box-shadow: var(--shadow-lime);
      }
      .btn-primary:hover,
      .nav-cta:hover {
        opacity: 1;
        transform: translateY(-1px);
        box-shadow: 0 22px 56px rgba(200, 255, 0, 0.2);
      }
      .btn-ghost,
      .mob-ghost,
      .price-card:not(.recommended) .price-cta {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid var(--line-soft);
      }
      .btn-ghost:hover,
      .mob-ghost:hover,
      .price-card:not(.recommended) .price-cta:hover {
        color: var(--lime);
        border-color: rgba(200, 255, 0, 0.42);
        background: rgba(200, 255, 0, 0.08);
        transform: translateY(-1px);
      }

/* ----- 07E. Shared Ticker / Footer Refinements ----- */
      .ticker {
        border-top: 1px solid var(--line-soft);
        border-bottom: 1px solid var(--line-soft);
        padding: 15px 0;
        background: rgba(15, 17, 21, 0.92);
      }
      .ticker-track {
        animation-duration: 40s;
      }
      .ticker-item {
        font-size: 11px;
        letter-spacing: 1.6px;
        color: var(--text-soft);
      }
      .ticker-dot {
        width: 5px;
        height: 5px;
        box-shadow: 0 0 14px rgba(200, 255, 0, 0.28);
      }

      footer {
        padding: 36px 48px 42px;
        border-top: 1px solid var(--line-soft);
        background: linear-gradient(
          180deg,
          rgba(15, 17, 21, 0.92) 0%,
          rgba(9, 11, 14, 0.96) 100%
        );
      }
      .footer-logo {
        font-size: 20px;
        letter-spacing: 1.8px;
      }
      .footer-copy {
        font-size: 11px;
        letter-spacing: 1.2px;
        color: var(--text-soft);
        text-transform: uppercase;
      }
      .footer-links a {
        font-size: 11px;
        letter-spacing: 1.4px;
        color: var(--text-muted);
      }

/* ----- 07G-2. Shared Inner Layout Widths ----- */
      .value-section,
      .pricing-section,
      .pain-section,
      .solution-section,
      .case-section,
      .ind-pricing {
        padding-top: 84px;
        padding-bottom: 84px;
      }
      .value-inner,
      .pricing-inner,
      .pain-inner,
      .solution-inner,
      .case-inner,
      .ind-pricing-inner,
      .faq-inner {
        max-width: var(--container-xl);
      }
      .value-grid,
      .pricing-grid,
      .mkt-grid,
      .pain-grid {
        gap: 18px;
      }
      .value-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .value-card {
        padding: 28px;
        border-radius: var(--radius-md);
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: linear-gradient(
          180deg,
          rgba(26, 31, 40, 0.96) 0%,
          rgba(15, 17, 21, 0.98) 100%
        );
        text-align: center;
      }
      .value-trade {
        font-size: 24px;
        line-height: 0.98;
        color: var(--text-muted);
        margin-bottom: 12px;
      }
      .value-job {
        font-size: clamp(48px, 5vw, 62px);
        line-height: 0.92;
        margin-bottom: 10px;
      }
      .value-label {
        font-size: 11px;
        letter-spacing: 1.6px;
        color: var(--text-soft);
      }

/* Inline style replacements moved out of index.html. */
.section-title-flush {
  margin-bottom: 0;
}

.section-title-mb-28 {
  margin-bottom: 28px;
}

.section-title-mb-36 {
  margin-bottom: 36px;
}

.section-title-mb-44 {
  margin-bottom: 44px;
}

.section-label-centered {
  justify-content: center;
}

.section-label-mb-16 {
  margin-bottom: 16px;
}

.section-label-mb-20 {
  margin-bottom: 20px;
}

.section-label-mb-22 {
  margin-bottom: 22px;
}

.section-label-mb-24 {
  margin-bottom: 24px;
}

.copy-top-16 {
  margin-top: 16px;
}

.copy-top-20 {
  margin-top: 20px;
}

.value-note {
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}

.ind-price-cta-wrap {
  margin-top: 22px;
}

.calendly-open-btn {
  display: inline-flex;
  padding: 16px 36px;
}