:root {
      --primary-start: #B98FE0;
      --primary-end: #F17FBE;
      --green: #6FCF97;
      --blue: #6EC3E0;
      --blue-light: #82E0E8;
      --yellow: #FFD65A;
      --row-alt: #F4ECFB;
      --text: #222;
      --text-soft: #5C4E82;
      --purple-dark: #6B3FA0;
      --card: #FFFFFF;
      --card-blue: #E4F3FB;
      --card-yellow: #FFF6DE;
      --gradient-h: linear-gradient(90deg, var(--primary-start), var(--primary-end));
      --gradient-h-rev: linear-gradient(270deg, var(--primary-start), var(--primary-end));
      --gradient-d: linear-gradient(135deg, var(--primary-start), var(--primary-end));
      --gradient-d-rev: linear-gradient(315deg, var(--primary-start), var(--primary-end));
      --font: "Nunito", system-ui, sans-serif;
    }

    ::selection {
      background: #c81d5b;
      color: #fff;
    }
    ::-moz-selection {
      background: #c81d5b;
      color: #fff;
    }
    
  img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  }
</style>
  
<svg style="display:none" aria-hidden="true">
  <symbol id="icon-check" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
  <symbol id="icon-phone" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/>
  </symbol>
  <symbol id="icon-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect x="9" y="9" width="12" height="12" rx="2"/>
    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
  </symbol>
  <symbol id="icon-pin" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <path d="M12 22s8-7.5 8-13a8 8 0 1 0-16 0c0 5.5 8 13 8 13z"/>
    <circle cx="12" cy="9" r="2.5"/>
  </symbol>
  <symbol id="icon-facebook" viewBox="0 0 24 24" fill="currentColor">
    <path d="M13.5 9H15V6.5h-1.5C11.6 6.5 10 8.1 10 10v1.5H8V14h2v7h2.5v-7H15l.5-2.5H12.5V10c0-.6.4-1 1-1z"/>
  </symbol>
  <symbol id="icon-instagram" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <rect x="3" y="3" width="18" height="18" rx="5"/>
    <circle cx="12" cy="12" r="4"/>
    <circle cx="17.3" cy="6.7" r="0.6" fill="currentColor" stroke="none"/>
  </symbol>
</svg>

  
    .site-footer__brand {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      align-self: flex-start;
      gap: 6px 18px;
    }
    .site-footer__brand-label {
      margin: 0 8px 8px;
    }

    .site-footer {
      position: relative;
      z-index: 20;
      margin-top: 32px;
      padding: 44px 0 40px;
      background: var(--card-blue);
      font-family: sans-serif;
      margin-bottom: -70px;
    }

    .site-footer::before {
      content: "";
      position: absolute;
      top: -23px;
      left: 0;
      width: 100%;
      height: 46px;
      background-image: radial-gradient(circle at 22px 22px, var(--card-blue) 22px, transparent 23px);
      background-size: 46px 46px;
      background-repeat: repeat-x;
      pointer-events: none;
    }

    .site-footer__inner {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: space-between;
    }

    .site-footer__legal {
      max-width: 1200px;
      margin: 24px auto 0;
      padding: 12px 24px 0;
      border-top: 1px solid rgba(43, 25, 74, 0.1);
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 10px;
      font-size: 12px;
      color: var(--text-soft);
    }
    .site-footer__legal a {
      color: inherit;
      text-decoration: underline;
    }
    .site-footer__legal a:hover {
      color: var(--purple-dark);
    }

    .site-footer__phones {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .phone-chip,
    .social-btn,
    .order-btn {
      transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    }
    .phone-chip:hover,
    .social-btn:hover,
    .order-btn:hover {
      transform: translateY(-1px);
    }

    .phone-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      border: none;
      background: #fff;
      border-radius: 999px;
      padding: 8px 14px;
      font-weight: 700;
      font-size: 15px;
      color: var(--text);
      text-decoration: none;
      cursor: pointer;
      box-shadow: 0 4px 12px rgba(139, 95, 201, 0.12);
    }
    .phone-chip:hover {
      box-shadow: 0 5px 15px rgba(139, 95, 201, 0.24);
    }
    .phone-chip__icon { width: 16px; height: 16px; color: var(--primary-end); flex-shrink: 0; }
    .phone-chip__copy {
      display: inline-flex;
      width: 14px;
      height: 14px;
      color: var(--text-soft);
      flex-shrink: 0;
      cursor: pointer;
    }
    .phone-chip__copy svg { width: 100%; height: 100%; }
    .phone-chip__copy.is-copied { color: #6EC3E0; }

    .site-footer__social {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      align-self: flex-start;
    }
    .site-footer__social-icons {
      display: flex;
      gap: 10px;
    }

    .social-btn {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--gradient-d);
      flex-shrink: 0;
      box-shadow: 0 4px 12px rgba(139, 95, 201, 0.25);
    }
    .social-btn:hover {
      background: var(--gradient-d-rev);
      box-shadow: 0 10px 22px rgba(139, 95, 201, 0.4);
    }
    .social-btn svg { width: 34px; height: 34px; color: #fff; transition: color 0.3s ease; }
    .social-btn:hover svg { color: var(--card-yellow); }

    .order-btn {
      display: inline-block;
      padding: 12px 30px;
      border-radius: 50px;
      background: var(--gradient-h);
      color: #fff;
      font-weight: 400;
      font-size: 16px;
      text-decoration: none;
      box-shadow: 0 8px 20px rgba(241, 127, 190, 0.35);
      white-space: nowrap;
      align-self: flex-start;
    }
    .order-btn:hover {
      background: var(--gradient-h-rev);
      box-shadow: 0 10px 22px rgba(139, 95, 201, 0.4);
      color: var(--card-yellow);
    }

    @media (max-width: 1023px) {
      .site-footer__inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          "brand order"
          "phones social";
        align-items: center;
        gap: 0 16px;
      }
      .site-footer__brand-label { display: none; }
      .site-footer__brand { grid-area: brand; justify-self: center; }
      .site-footer__phones { grid-area: phones; justify-self: center; }
      .site-footer__social { grid-area: social; justify-self: center; align-self: center; }
      .phone-chip { padding: 7px 12px; font-size: 14px; max-width: fit-content; }
      .social-btn { width: 46px; height: 46px; }
      .social-btn svg { width: 38px; height: 38px; }
      .site-footer__inner .order-btn { grid-area: order; justify-self: center; padding: 10px 30px; font-size: 16px; }
    }

    @media (max-width: 640px) {
      .site-footer__inner {
        grid-template-columns: 1fr;
        grid-template-areas:
          "order"
          "brand"
          "phones"
          "social";
        justify-items: center;
        text-align: center;
        gap: 16px;
      }
      .site-footer__phones { gap: 16px; }
      .site-footer__inner .order-btn,
      .site-footer__social { justify-self: center; }
    }
    
    @media (max-width: 480px) {
      .site-footer {
        margin-bottom: -130px;
      }
    }
  </style>