:root {
      --pink-pastel: #ffebee;
      --blue-pastel: #e3f2fd;
      --green-pastel: #e8f5e9;
      --orange-pastel: #fff3e0;
      --purple-pastel: #f3e5f5;
      --title-gradient: linear-gradient(90deg, #ec407a, #ab47bc);
    }

    body {
      background: linear-gradient(135deg, #f0f4f8, #d9e2ec);
      color: #333;
      font-family: 'Segoe UI', system-ui, sans-serif;
    }

    .hero-title {
      font-size: 2.8rem;
      font-weight: 900;
      background: var(--title-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow: 1px 1px 3px rgba(0,0,0,0.15);
    }

    .stat-box {
      border-radius: 16px;
      padding: 1.8rem 1.2rem;
      box-shadow: 0 8px 20px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .stat-box:hover {
      transform: translateY(-8px);
      box-shadow: 0 16px 32px rgba(0,0,0,0.15);
    }

    .stat-icon {
      font-size: 2.8rem;
      margin-bottom: 1rem;
    }

    .speed { background: var(--blue-pastel); }
    .sensitivity { background: var(--green-pastel); }
    .specificity { background: var(--orange-pastel); }

    .highlight-green { color: #2e7d32; font-weight: 700; }
    .highlight-red   { color: #c62828; font-weight: 700; }

    .bottom-line {
      background: linear-gradient(135deg, #fffde7, #fff8e1);
      border-left: 6px solid #fbc02d;
      padding: 1.8rem;
      border-radius: 12px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }

    .ref-link {
      font-size: 0.82rem;
      line-height: 1.4;
      color: #1565c0;
    }

    .endorsed-logo {
      max-height: 80px;
    }

    @media (max-width: 576px) {
      .hero-title { font-size: 2.1rem; }
      .stat-box { padding: 1.4rem 1rem; }
    }