/* ============================================================
   ABOUT US — reviews + socials + phone mockup
   Figma node 157:93767
   ============================================================ */
.aboutus {
  position: relative;
}

/* white rounded card; overflow:hidden clips the big teal ellipse and the
   bleeding phone mockup to the rounded corners exactly like Figma.
   The card styling rides on the shared global `.container` element. */
.aboutus__card {
  position: relative;
  background: var(--bg-tertiary);
  border-radius: var(--radius-24);
  padding: 48px clamp(20px, 2.8vw, 40px);
  isolation: isolate;
  min-height: clamp(360px, 30.3vw, 420px); /* ~388px @1280 — высота карточки из Figma (157:93767) */
  overflow: hidden; /* круг и телефон обрезаются границами карточки, не вылезают на promo и края */
}

/* ---- left text column (Figma "Content", w 694, gap 60) ---- */
.aboutus__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: clamp(36px, 4.2vw, 60px);
  align-items: flex-start;
  max-width: 694px;
}

/* Title + rating (gap 24) */
.aboutus__head {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.aboutus__title {
  margin: 0;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: clamp(26px, 2.78vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.0287em; /* -1.1467px @ 40px */
  color: var(--text-primary);
}

/* rating row: 5 stars + "4.9 (4280 оценок)" */
.aboutus__rate {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aboutus__stars {
  display: flex;
  align-items: center;
  gap: 4px;
}
.aboutus__stars img {
  width: 20px;
  height: 20px;
  display: block;
}
.aboutus__rate-link {
  font-family: 'Geologica', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.15;
  color: var(--text-accent);
  white-space: nowrap;
}

/* socials (gap 20) */
.aboutus__social {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.aboutus__social-title {
  margin: 0;
  font-family: 'Geologica', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 1.67vw, 24px);
  line-height: 1.1;
  letter-spacing: -0.0075em; /* -0.18px @ 24px */
  color: var(--text-primary);
}
.aboutus__social-list {
  display: flex;
  align-items: center;
  gap: 16px;
}
.aboutus__social-item {
  display: block;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
}
.aboutus__social-item img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- right visual: teal ellipse (behind) + phone (front) ----
   .aboutus__visual spans the whole card so the children position
   as percentages of the full 1280px content width like Figma. */
.aboutus__visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
}

/* clip layer: rounds the teal ellipse to the card's corners.
   The phone is a SIBLING of this wrap, so it is NOT clipped and may
   bleed past the card edges exactly like Figma. */
.aboutus__ellipse-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radius-24);
}

/* Big teal circle behind the phone (Figma node 157:93792: 906×906 @ 637,76 in 1280×388 card) */
.aboutus__ellipse {
  position: absolute;
  width: 70.8%;          /* 906 / 1280 */
  aspect-ratio: 1;
  left: 49.8%;           /* 637 / 1280 */
  top: 19.6%;            /* 76 / 388 */
  right: auto;
  bottom: auto;
  background: var(--teal);
  border-radius: 50%;
}

/* Phone mockup: экспорт из Figma (рамка + экран WB + Dynamic Island), широкий PNG 2344×1164.
   Размер по высоте карточки, справа, по центру; лишнее обрезается overflow:hidden карточки. */
.aboutus__phone {
  position: absolute;
  width: 64%;
  height: auto;
  right: -2%;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  max-width: none;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* tablet & down: stack — text on top, visual below */
@media (max-width: 768px) {
  .aboutus__card {
    min-height: 0;
  }
  .aboutus__content {
    max-width: 100%;
  }
  .aboutus__visual {
    position: relative;
    inset: auto;
    width: 100%;
    height: 300px;
    margin-top: 28px;
  }
  .aboutus__ellipse {
    width: 440px;
    aspect-ratio: 1;
    right: auto;
    left: 50%;
    top: auto;
    bottom: -190px;
    transform: translateX(-50%);
  }
  .aboutus__phone {
    width: 360px;
    left: 50%;
    top: -32px;
    transform: translateX(-50%);
  }
}

@media (max-width: 480px) {
  .aboutus__card {
    padding: 32px clamp(16px, 4vw, 24px);
  }
  .aboutus__visual {
    height: 240px;
    margin-top: 20px;
  }
  .aboutus__ellipse {
    width: 320px;
    bottom: -150px;
  }
  .aboutus__phone {
    width: 280px;
    top: -24px;
  }
  .aboutus__social-list {
    gap: 12px;
  }
  .aboutus__social-item {
    width: 44px;
    height: 44px;
  }
}