:root {
      --primary-dark: #0f172a;
      --accent-blue: #4f46e5;
      --soft-indigo: #eef2ff;
  }

  body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background: #ffffff;
      color: var(--primary-dark);
      letter-spacing: -0.01em;
  }

  /* --- Hero Section: Clean & Bold --- */
  .hero-pro {
      padding: 120px 0 80px;
      background: radial-gradient(circle at top right, #f5f3ff, #ffffff);
  }

  .hero-badge {
      background: var(--soft-indigo);
      color: var(--accent-blue);
      padding: 8px 16px;
      border-radius: 100px;
      font-weight: 700;
      font-size: 14px;
      display: inline-block;
      margin-bottom: 24px;
  }

  h1.display-pro {
      font-weight: 800;
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      line-height: 1;
      letter-spacing: -0.04em;
      margin-bottom: 30px;
  }

  /* --- The Bento Grid (Modern UI) --- */
  .bento-card {
      border-radius: 32px;
      background: #f8fafc;
      padding: 40px;
      height: 100%;
      border: 1px solid #f1f5f9;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .bento-card:hover {
      background: #ffffff;
      box-shadow: 0 30px 60px rgba(0, 0, 0, 0.08);
      transform: translateY(-5px);
  }

  .bento-img {
      border-radius: 24px;
      width: 100%;
      height: 350px;
      object-fit: cover;
      margin-bottom: 25px;
  }

  /* --- Team Member Pro Styles --- */
  .team-avatar {
      width: 100%;
      height: 400px;
      object-fit: cover;
      border-radius: 24px;
      filter: grayscale(100%);
      transition: 0.5s;
  }

  .team-card:hover .team-avatar {
      filter: grayscale(0%);
      transform: scale(1.02);
  }

  .social-btn {
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #f1f5f9;
      border-radius: 12px;
      color: var(--primary-dark);
      transition: 0.3s;
  }

  .social-btn:hover {
      background: var(--accent-blue);
      color: white;
  }

  /* --- Pricing/Status Chips --- */
  .chip {
      display: inline-flex;
      align-items: center;
      padding: 4px 12px;
      border-radius: 100px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
  }

  .chip-free {
      background: #dcfce7;
      color: #166534;
  }

  .chip-pay {
      background: #fee2e2;
      color: #991b1b;
  }

  /* --- Glass CTA --- */
  .glass-cta {
      background: var(--primary-dark);
      border-radius: 40px;
      padding: 80px 40px;
      color: white;
      position: relative;
      overflow: hidden;
  }

  .btn-pro {
      background: #ffffff;
      color: var(--primary-dark);
      padding: 18px 45px;
      border-radius: 100px;
      font-weight: 700;
      text-decoration: none;
      transition: 0.3s;
      display: inline-block;
  }

  .btn-pro:hover {
      transform: scale(1.05);
      box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2);
  }