/* ═══════════════════════════════ HERO ═══════════════════════════════════════════ */
      #hero {
        /* min-height: 100svh; */
        padding: calc(var(--space-md) + 50px) 0 var(--space-md);
        background: var(--white);
      }

      .hero-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
      }
      .hero-bg-grid {
        position: absolute;
        inset: 0;
        background-image:
          linear-gradient(rgba(232, 52, 26, 0.04) 1px, transparent 1px),
          linear-gradient(90deg, rgba(232, 52, 26, 0.04) 1px, transparent 1px);
        background-size: 48px 48px;
      }
      .hero-bg-glow {
        position: absolute;
        top: -30%;
        right: -10%;
        width: 700px;
        height: 700px;
        background: radial-gradient(
          circle,
          rgba(232, 52, 26, 0.08) 0%,
          transparent 70%
        );
        border-radius: 50%;
      }

      .hero-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: var(--space-xl);
        padding: var(--space-2xl) 0;
      }

      .hero-content {
        max-width: 580px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        gap: 20px;
      }

      .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--brand-red);
        background: rgba(232, 52, 26, 0.07);
        border: 1px solid rgba(232, 52, 26, 0.15);
        border-radius: 999px;
        padding: 0.35rem 1rem;
        margin-bottom: var(--space-md);
      }
      .hero-badge-dot {
        width: 7px;
        height: 7px;
        background: var(--brand-red);
        border-radius: 50%;
        animation: pulse-dot 2s ease-in-out infinite;
      }
      
      .hero-title {
        font-family: var(--font-display);
        font-size: clamp(2.5rem, 5.5vw, 4rem);
        font-weight: 800;
        line-height: 1.08;
        letter-spacing: -0.03em;
        color: var(--neutral-900);
        margin-bottom: var(--space-md);
      }
      .hero-title-accent {
        color: var(--brand-red);
        position: relative;
      }
      /* .hero-title-accent::after {
        content: "";
        position: absolute;
        bottom: 2px;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--brand-red), transparent);
        border-radius: 2px;
      } */

      .hero-desc {
        font-size: 1.125rem;
        color: var(--neutral-600);
        line-height: 1.7;
        margin-bottom: var(--space-lg);
        max-width: 460px;
      }

      .hero-actions {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        flex-wrap: wrap;
        margin-bottom: var(--space-xl);
      }

      .hero-social-proof {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        flex-wrap: wrap;
      }
      .hero-stat {
        display: flex;
        flex-direction: column;
      }
      .hero-stat-num {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--neutral-900);
        letter-spacing: -0.03em;
      }
      .hero-stat-num span {
        color: var(--brand-red);
      }
      .hero-stat-label {
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--neutral-400);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }
      .hero-stat-divider {
        width: 1px;
        height: 36px;
        background: var(--neutral-200);
      }

      /* Dashboard mockup */
      .hero-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .dashboard-card {
        background: var(--white);
        border: 1px solid var(--neutral-200);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
        padding: var(--space-md);
        width: 100%;
        max-width: 480px;
        animation: float 6s ease-in-out infinite;
      }
      

      .db-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: var(--space-sm);
      }
      .db-title {
        font-family: var(--font-display);
        font-size: 0.875rem;
        font-weight: 700;
        color: var(--neutral-900);
      }
      .db-badge {
        font-size: 0.7rem;
        font-weight: 600;
        background: rgba(22, 163, 74, 0.1);
        color: var(--success);
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
      }

      .db-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xs);
        margin-bottom: var(--space-sm);
      }
      .db-stat {
        background: var(--neutral-50);
        border: 1px solid var(--neutral-200);
        border-radius: var(--radius-sm);
        padding: 0.6rem 0.5rem;
        text-align: center;
      }
      .db-stat-val {
        font-family: var(--font-display);
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--neutral-900);
        display: block;
      }
      .db-stat-lbl {
        font-size: 0.65rem;
        color: var(--neutral-400);
        font-weight: 500;
      }

      .db-chart-area {
        background: linear-gradient(135deg, #fff5f3 0%, #fef2f2 100%);
        border-radius: var(--radius-md);
        height: 100px;
        margin-bottom: var(--space-sm);
        display: flex;
        align-items: flex-end;
        padding: var(--space-sm);
        gap: 6px;
        overflow: hidden;
        position: relative;
      }
      .db-bar {
        flex: 1;
        border-radius: 4px 4px 0 0;
        background: linear-gradient(
          to top,
          var(--brand-red),
          var(--brand-red-light)
        );
        opacity: 0.75;
        animation: bar-grow 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        transform-origin: bottom;
      }
      

      .db-activity {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }
      .db-activity-item {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.75rem;
        color: var(--neutral-600);
      }
      .db-activity-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        flex-shrink: 0;
      }
      .dot-green {
        background: var(--success);
      }
      .dot-red {
        background: var(--brand-red);
      }
      .dot-yellow {
        background: var(--warning);
      }
      .db-activity-time {
        margin-left: auto;
        color: var(--neutral-400);
        font-size: 0.7rem;
      }

      /* Floating badges */
      .hero-float-badge {
        position: absolute;
        background: var(--white);
        border: 1px solid var(--neutral-200);
        border-radius: var(--radius-md);
        padding: 0.6rem 1rem;
        box-shadow: var(--shadow-md);
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--neutral-900);
        white-space: nowrap;
        animation: float-badge 5s ease-in-out infinite;
      }
      
      .hfb-1 {
        top: 8%;
        left: -8%;
        animation-delay: 0s;
      }
      .hfb-2 {
        bottom: 20%;
        left: -10%;
        animation-delay: 1.5s;
      }
      .hfb-3 {
        top: 12%;
        right: -6%;
        animation-delay: 0.8s;
      }

      .hfb-icon {
        width: 28px;
        height: 28px;
        border-radius: var(--radius-sm);
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .hfb-icon-red {
        background: rgba(232, 52, 26, 0.1);
        color: var(--brand-red);
      }
      .hfb-icon-green {
        background: rgba(22, 163, 74, 0.1);
        color: var(--success);
      }
      .hfb-icon-blue {
        background: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
      }

      @media (max-width: 900px) {
        .hero-inner {
          grid-template-columns: 1fr;
          text-align: center;
          padding: var(--space-xl) 0;
        }
        .hero-content {
          max-width: 100%;
        }
        .hero-desc {
          max-width: 100%;
          margin: 0 auto var(--space-lg);
        }
        .hero-actions {
          justify-content: center;
        }
        .hero-social-proof {
          justify-content: center;
        }
        .hero-float-badge {
          display: none;
        }
        .dashboard-card {
          max-width: 360px;
        }
        .db-stats {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      @media (max-width: 480px) {
        .hero-title {
          font-size: 2.25rem;
        }
        .hero-actions {
          flex-direction: column;
        }
        .hero-actions .btn {
          width: 100%;
          justify-content: center;
        }
      }

      /* ═══════════════════════════════ PLATFORM SECTION ═══════════════════════════════ */
      #platform {
        padding: var(--space-lg) 0;
        background: var(--neutral-50);
      }

      .platform-header {
        margin-bottom: var(--space-lg);
        display: flex;
        flex-direction: column;
      }

      .vmp-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
      }

      .vmp-card {
        background: var(--white);
        border: 1px solid var(--neutral-200);
        border-radius: var(--radius-lg);
        padding: var(--space-lg);
        transition: var(--transition);
        position: relative;
        overflow: hidden;
      }
      .vmp-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(
          90deg,
          var(--brand-red),
          var(--brand-red-light)
        );
        transform: scaleX(0);
        transform-origin: left;
        transition: var(--transition);
      }
      .vmp-card:hover {
        border-color: rgba(232, 52, 26, 0.2);
        box-shadow: var(--shadow-lg);
        transform: translateY(-4px);
      }
      .vmp-card:hover::before {
        transform: scaleX(1);
      }

      .vmp-icon {
        width: 48px;
        height: 48px;
        background: rgba(232, 52, 26, 0.08);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--space-sm);
      }
      /* .vmp-icon svg {
        width: 22px;
        height: 22px;
        color: var(--brand-red);
      } */

      .vmp-name {
        font-family: var(--font-display);
        font-size: 1.125rem;
        font-weight: 700;
        color: var(--neutral-900);
        margin-bottom: 0.5rem;
      }
      .vmp-desc {
        font-size: 15px;
        font-weight: 500;
        color: var(--neutral-600);
        line-height: 1.65;
      }

      @media (max-width: 700px) {
        .vmp-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ═══════════════════════════════ OUTCOMES ═══════════════════════════════════════ */
      #outcomes {
        padding: var(--space-xl) 0;
        /* background: var(--neutral-50); */
      }

      .outcomes-header {
        margin-bottom: var(--space-lg);
      }

      .metrics-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
        margin-bottom: var(--space-xl);
      }

      .metric-card {
        background: var(--white);
        border: 1px solid var(--neutral-200);
        border-radius: var(--radius-lg);
        padding: var(--space-lg);
        display: flex;
        align-items: flex-start;
        gap: var(--space-md);
        transition: var(--transition);
      }
      .metric-card:hover {
        border-color: rgba(232, 52, 26, 0.2);
        box-shadow: var(--shadow-md);
        transform: translateY(-2px);
      }

      .metric-icon {
        width: 52px;
        height: 52px;
        background: rgba(232, 52, 26, 0.08);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
      }
      .metric-icon svg {
        width: 24px;
        height: 24px;
        color: var(--brand-red);
      }

      .metric-value {
        font-family: var(--font-display);
        font-size: 2.25rem;
        font-weight: 800;
        color: var(--neutral-900);
        letter-spacing: -0.04em;
        line-height: 1;
        margin-bottom: 0.35rem;
      }
      .metric-value span {
        color: var(--brand-red);
      }
      .metric-label {
        font-size: 0.9375rem;
        font-weight: 600;
        color: var(--neutral-900);
        margin-bottom: 0.25rem;
      }
      .metric-desc {
        font-size: 0.875rem;
        color: var(--neutral-400);
        line-height: 1.5;
      }

      .platform-features {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-sm);
      }

      .pf-chip {
        background: var(--white);
        border: 1px solid var(--neutral-200);
        border-radius: var(--radius-md);
        padding: var(--space-sm);
        text-align: center;
        transition: var(--transition);
      }
      .pf-chip:hover {
        border-color: var(--brand-red);
        background: rgba(232, 52, 26, 0.03);
      }
      .pf-chip-icon {
        width: 36px;
        height: 36px;
        background: rgba(232, 52, 26, 0.07);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto var(--space-xs);
      }
      .pf-chip-icon svg {
        width: 18px;
        height: 18px;
        color: var(--brand-red);
      }
      .pf-chip-text {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--neutral-700);
      }

      @media (max-width: 900px) {
        .platform-features {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 640px) {
        .metrics-grid {
          grid-template-columns: 1fr;
        }
        .platform-features {
          grid-template-columns: repeat(2, 1fr);
        }
      }

      /* ═══════════════════════════════ BENEFITS ═══════════════════════════════════════ */
      #benefits {
        padding: var(--space-xl) 0;
        background: var(--neutral-50);
      }

      .benefits-header {
        margin-bottom: var(--space-lg);
      }

      .benefits-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
      }

      .benefit-card {
        background: var(--neutral-50);
        border: 1px solid var(--neutral-200);
        border-radius: var(--radius-lg);
        padding: var(--space-lg);
        transition: var(--transition);
        position: relative;
        overflow: hidden;
      }
      .benefit-card:hover {
        background: var(--white);
        border-color: rgba(232, 52, 26, 0.2);
        box-shadow: var(--shadow-lg);
        transform: translateY(-4px);
      }
      .benefit-card:nth-child(4),
      .benefit-card:nth-child(5),
      .benefit-card:nth-child(6) {
        /* Second row */
      }

      .benefit-icon {
        width: 48px;
        height: 48px;
        background: rgba(232, 52, 26, 0.1);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: var(--space-sm);
      }
      /* .benefit-icon svg {
        width: 22px;
        height: 22px;
        color: var(--brand-red);
      } */

      .benefit-name {
        font-family: var(--font-display);
        font-size: 1.0625rem;
        font-weight: 700;
        color: var(--neutral-900);
        margin-bottom: 0.5rem;
      }
      .benefit-desc {
        font-size: 0.9rem;
        color: var(--neutral-600);
        line-height: 1.65;
      }

      @media (max-width: 900px) {
        .benefits-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 540px) {
        .benefits-grid {
          grid-template-columns: 1fr;
        }
      }

      /* ═══════════════════════════════ TRUST BAR ══════════════════════════════════════ */
      #trust {
        padding: var(--space-xl) 0;
        border-top: 1px solid var(--neutral-200);
        border-bottom: 1px solid var(--neutral-200);
        background: var(--white);
      }

      .trust-inner {
        display: flex;
        align-items: center;
        gap: var(--space-xl);
        overflow: hidden;
      }

      .trust-label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--neutral-400);
        letter-spacing: 0.06em;
        text-transform: uppercase;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .trust-logos {
        display: flex;
        align-items: center;
        gap: var(--space-xl);
        flex: 1;
        flex-wrap: wrap;
      }

      .trust-logo {
        font-family: var(--font-display);
        font-size: 1rem;
        font-weight: 700;
        color: var(--neutral-300);
        letter-spacing: -0.02em;
        transition: color var(--transition);
        white-space: nowrap;
      }
      .trust-logo:hover {
        color: var(--neutral-600);
      }

      @media (max-width: 640px) {
        .trust-inner {
          flex-direction: column;
          gap: var(--space-md);
        }
        .trust-logos {
          justify-content: center;
        }
      }