/* ====== Hero ====== */
    .hero{
      padding: clamp(24px, 4vw, 56px) 0;
      background: #fff;
    }

    .hero__container{
      width: min(1200px, calc(100% - 48px));
      margin: 0 auto;
    }

    .hero__grid{
      display: grid;
      grid-template-columns: 1.05fr 1fr;
      gap: clamp(18px, 3vw, 48px);
      align-items: center;
    }

    /* LEFT */
    .hero__title{
      margin: 0 0 14px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.1;
      font-size: clamp(28px, 3.2vw, 44px);
      color: #2f2f2f;
    }

    .hero p{
      margin: 0 0 18px;
      line-height: 1.6;
      font-size: 16px;
      color: #6a6a6a;
    }

    .hero ul{
      list-style: none;
      padding: 0;
      margin: 0 0 22px;
      display: grid;
      gap: 12px;
    }

    .hero ul li{
      position: relative;
      padding-left: 30px;
      line-height: 1.55;
      color: #4a4a4a;
      font-size: 15px;
    }

    /* круглая иконка как на скрине */
    .hero__item::before{
      content: "";
      position: absolute;
      left: 0;
      top: 0.35em;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 2px solid #20a7b4;
      background:
        radial-gradient(circle at 50% 50%, #20a7b4 0 3px, transparent 4px);
    }

    /* Buttons */
    .hero__actions{
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn{
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 44px;
      padding: 0 22px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 14px;
      line-height: 1;
      border: 1px solid transparent;
      transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
      white-space: nowrap;
    }

    .btn:active{ transform: translateY(1px); }

    .btn--primary{
      background: #f2a106; /* оранжевый как на скрине */
      color: #fff;
      box-shadow: 0 10px 22px rgba(242,161,6,.25);
    }
    .btn--primary:hover{ box-shadow: 0 12px 28px rgba(242,161,6,.32); }

    .btn--ghost{
      background: #fff;
      color: #4a4a4a;
      border-color: #e7e7e7;
    }
    .btn--ghost:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.06); }

    /* RIGHT */
    .hero__media{
      display: flex;
      justify-content: flex-end;
    }

    .hero__imageWrap{
      width: min(680px, 100%);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 18px 42px rgba(0,0,0,.12);
      background: #f4f6f8;
    }

    .hero__image{
      width: 100%;
      height: clamp(220px, 28vw, 380px);
      object-fit: cover;
    }

    /* ====== Responsive ====== */
    @media (max-width: 900px){
      .hero__grid{
        grid-template-columns: 1fr;
      }
      .hero__media{
        justify-content: flex-start;
      }
    }