.hero {
      max-width: 1200px;
      margin: auto;
      padding: 75px 24px 55px;
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      align-items: center;
      gap: 50px;
    }

    .hero h1 {
      font-size: clamp(2.7rem, 6vw, 5rem);
      line-height: 0.98;
      letter-spacing: -0.055em;
      margin-bottom: 25px;
    }

    .hero h1 span {
      color: var(--primary);
    }

    .hero p {
      max-width: 560px;
      color: var(--muted);
      font-size: 1.15rem;
      margin-bottom: 30px;
    }

    .hero-buttons {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .primary-button,
    .secondary-button {
      border-radius: 12px;
      padding: 13px 20px;
      border: 0;
      font-weight: 700;
      text-decoration: none;
      display: inline-block;
    }

    .primary-button {
      background: var(--primary);
      color: white;
    }

    .primary-button:hover {
      background: var(--primary-dark);
    }

    .secondary-button {
      background: white;
      color: var(--text);
      border: 1px solid var(--border);
    }

    .hero-card {
      min-height: 360px;
      border-radius: 30px;
      background: linear-gradient(145deg, #ece7ff, #ffffff);
      box-shadow: var(--shadow);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    .hero-icon {
      font-size: 9rem;
      filter: drop-shadow(0 15px 20px rgba(0,0,0,0.12));
    }

    .hero-badge {
      position: absolute;
      bottom: 25px;
      left: 25px;
      background: white;
      padding: 12px 16px;
      border-radius: 14px;
      box-shadow: var(--shadow);
      font-weight: 700;
    }