

    :root {
      --navy-950: hsl(233, 47%, 7%);
      --blue-950: hsl(244, 37%, 16%);
      --purple-500: hsl(277, 64%, 61%);
      --white: hsl(0, 0%, 100%);
      --white-75: hsla(0, 0%, 100%, 0.75);
      --white-60: hsla(0, 0%, 100%, 0.6);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--navy-950);
      font-family: 'Inter', sans-serif;
      font-size: 15px;
      color: var(--white);
    }

    .card {
      max-width: 1110px;
      background: var(--blue-950);
      border-radius: 10px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    .content {
      padding: 4rem;
    }

    .content h1 {
      font-size: 2.2rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
    }

    .content h1 span {
      color: var(--purple-500);
    }

    .content p {
      color: var(--white-75);
      line-height: 1.7;
      margin-bottom: 4rem;
    }

    .stats {
      display: flex;
      gap: 4rem;
    }

    .stat h2 {
      font-size: 1.5rem;
      font-weight: 700;
    }

    .stat span {
      display: block;
      margin-top: 0.4rem;
      font-family: 'Lexend Deca', sans-serif;
      font-size: 0.75rem;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: var(--white-60);
    }

    .image {
      position: relative;
    }

    .image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .image::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--purple-500);
      opacity: 0.55;
      mix-blend-mode: multiply;
    }

    @media (max-width: 768px) {
      .card {
        grid-template-columns: 1fr;
        text-align: center;
      }

      .content {
        padding: 2.5rem 2rem;
        order: 2;
      }

      .stats {
        flex-direction: column;
        gap: 2rem;
      }

      .image {
        order: 1;
        height: 260px;
      }
    }
