/* ═══ HERO ══════════════════════════════════════════════ */
.hero-copy {
  position: relative;
  display: grid;
  grid-template-columns: minmax(520px, 751px) minmax(320px, 562px);
  justify-content: space-between;
  align-items: start;
  column-gap: clamp(40px, 8vw, 323px);
  width: 100%;
  min-height: 89px;
  margin-top: 44px;
}
.hero-copy h1 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: min(751px, 100%);
  height: 89px;
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0;
  overflow: visible;
}
.hero-copy__title-small {
  display: block;
  font-size: 34px;
  line-height: 39px;
  white-space: nowrap;
}
.hero-copy__title-large {
  display: block;
  font-size: 50px;
  line-height: 50px;
  white-space: nowrap;
}
.hero-copy p {
  grid-column: auto;
  justify-self: end;
  align-self: start;
  width: min(562px, 100%);
  height: 80px;
  margin: 0;
  padding-top: 28px;
  box-sizing: border-box;
  color: #838391;
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 500;
  line-height: 26.2px;
  letter-spacing: 0;
  overflow: visible;
}
.hero-copy__scribble { display: none; }

/* ═══ SERVICES ══════════════════════════════════════════ */
.services-clip {
  container-type: inline-size;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.services-cards {
  --services-gap: 14px;
  --service-card-size: calc((100cqi - (var(--services-gap) * 2)) / 3);
  width: 100%;
  max-width: 100%;
  margin-top: 26px;
  padding-bottom: 14px;
  overflow: hidden;
  clip-path: inset(0);
  scrollbar-width: none;
  user-select: none;
  touch-action: pan-x;
  cursor: grab;
}
.services-cards.is-dragging {
  cursor: grabbing;
}
.services-cards__track {
  display: flex;
  width: max-content;
  gap: var(--services-gap);
  will-change: transform;
  transition: transform 450ms cubic-bezier(.16, 1, .3, 1);
}
.services-cards.is-dragging .services-cards__track,
.services-cards.is-resetting .services-cards__track {
  transition: none;
}
.services-cards::-webkit-scrollbar { display: none; }

.service-card {
  position: relative;
  flex: 0 0 var(--service-card-size);
  width: var(--service-card-size);
  height: var(--service-card-size);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(29,29,29,.16)), #9f72ff;
  border-radius: 17px;
}
.service-card[data-service-index="0"] { background: linear-gradient(180deg,rgba(255,255,255,.2),rgba(29,29,29,.16)),#9f72ff; }
.service-card[data-service-index="1"] { background: linear-gradient(180deg,rgba(255,255,255,.2),rgba(29,29,29,.16)),#816bff; }
.service-card[data-service-index="2"] { background: linear-gradient(180deg,rgba(255,255,255,.2),rgba(29,29,29,.16)),#5da3ff; }
.service-card[data-service-index="3"] { background: linear-gradient(180deg,rgba(255,255,255,.2),rgba(29,29,29,.16)),#527aff; }
.service-card[data-service-index="4"] { background: linear-gradient(180deg,rgba(255,255,255,.2),rgba(29,29,29,.16)),#ff744d; }

.service-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.service-card__description {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  right: 0; bottom: 0; left: 0;
  height: 168px;
  padding: 30px 36px;
  color: var(--color-white);
  background: rgba(29,29,29,.5);
  backdrop-filter: blur(22px);
  z-index: 2;
}
.service-card__description h2 {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.05;
}
.service-card__description p {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-system);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

/* ═══ PROJECTS SECTION ══════════════════════════════════ */
.projects-section { margin-top: 26px; }
.projects-section__top {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 80px;
}
.projects-section__top h2 {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}
.projects-section__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 415px;
  height: 80px;
  flex: 0 0 auto;
}
.filter-selector {
  position: relative;
  z-index: 60;
  width: 205px;
  height: 80px;
  flex: 0 0 205px;
}
.filter-button, .show-all-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  border: 0;
  letter-spacing: 0;
  white-space: nowrap;
}
.filter-button {
  gap: 16px;
  width: 100%;
  padding: 0 24px;
  color: var(--color-ink);
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 500;
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease;
}
.filter-button span {
  min-width: 0;
  overflow: visible;
}
.filter-button:hover { color: #716eff; }
.filter-button img { display: block; width: 21px; height: 21px; flex: 0 0 21px; }
.filter-button__chevron { transition: transform 180ms ease; }
.filter-selector.is-open .filter-button__chevron { transform: rotate(180deg); }
.filter-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: 278px;
  max-height: min(452px, calc(100vh - 160px));
  padding: 12px 28px 12px 12px;
  overflow: auto;
  color: #000;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,248,252,.98)),
    #fff;
  border: 1px solid rgba(113, 110, 255, 0.18);
  border-radius: 17px;
  box-shadow: 0 24px 58px rgba(24, 24, 42, 0.18), inset 0 1px 0 rgba(255,255,255,.8);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
  scrollbar-width: none;
}
.filter-menu::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.filter-selector.is-open .filter-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.filter-scrollbar {
  position: absolute;
  z-index: 140;
  top: calc(100% + 24px);
  right: 13px;
  width: 5px;
  height: 408px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 180ms ease, transform 180ms ease;
}
.filter-scrollbar[hidden] { display: none; }
.filter-selector.is-open .filter-scrollbar {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.filter-scrollbar::before {
  position: absolute;
  inset: 0;
  content: "";
  background: rgba(113,110,255,.12);
  border-radius: 999px;
}
.filter-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  min-height: 38px;
  background: linear-gradient(180deg,#918eff 0%,#716eff 100%);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.72), 0 8px 18px rgba(113,110,255,.3);
  cursor: grab;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.filter-scrollbar__thumb:hover,
.filter-scrollbar.is-dragging .filter-scrollbar__thumb {
  background: linear-gradient(180deg,#7f7cff 0%,#5f5cff 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85), 0 10px 22px rgba(113,110,255,.38);
}
.filter-scrollbar.is-dragging .filter-scrollbar__thumb { cursor: grabbing; }
.filter-menu__label {
  padding: 12px 12px 8px;
  color: #838391;
  font-family: var(--font-system);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}
.filter-menu button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 43px;
  padding: 0 13px;
  color: #000;
  font-family: var(--font-system);
  font-size: 15px;
  font-weight: 700;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.filter-menu button::after {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-left: 10px;
  content: "";
  background: currentColor;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.35);
  transition: opacity 160ms ease, transform 160ms ease;
}
.filter-menu button:hover {
  background: rgba(113,110,255,.1);
  color: #716eff;
  transform: translateX(2px);
}
.filter-menu button.is-active {
  color: #fff;
  background: linear-gradient(135deg,#716eff,#8c7dff);
  box-shadow: 0 10px 24px rgba(113,110,255,.28);
}
.filter-menu button.is-active::after {
  opacity: .9;
  transform: scale(1);
}
.show-all-button {
  width: 210px;
  padding: 0 28px;
  color: var(--color-white);
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 500;
  background: var(--color-ink);
  border-radius: 17px;
  transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease;
}
.show-all-button:hover,
.reviews-show-all:hover,
.footer-review-card__button:hover,
.telegram-banner__button:hover,
.consult-submit:hover,
.load-more-projects:hover {
  transform: translateY(-2px);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}
.project-card {
  overflow: hidden;
  color: #000;
  background: #fff;
  border-radius: 20px;
}
.project-card__link {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.project-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 603.33 / 339;
  overflow: hidden;
  background: linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0)),#716eff;
  border-radius: 20px 20px 0 0;
}
.project-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-card__icon { display: block; width: 96px; height: 96px; flex: 0 0 auto; }
.project-card__body { padding: 35px; }
.project-card__category {
  margin: 0;
  color: #838391;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}
.project-card h3 {
  margin: 12px 0 30px;
  color: #000;
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}
.project-card__tags { display: flex; flex-wrap: wrap; width: min(476px,100%); gap: 8px; }
.project-card__tags span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  min-height: 35px;
  padding: 0 15px;
  color: #000;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  background: #f0f0f0;
  border-radius: 10px;
}
.load-more-projects {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 90px;
  margin: 22px 0 0;
  padding: 0 32px;
  color: #fff;
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 500;
  background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2)),#716eff;
  border: 0;
  border-radius: 17px;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease), filter var(--motion-fast) ease;
}
.load-more-projects:hover { filter: brightness(1.03); }
.load-more-projects[hidden] { display: none; }
.projects-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 38px;
  color: #838391;
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  background: #fff;
  border-radius: 17px;
}
.projects-separator, .section-separator {
  display: block;
  width: 100%;
  height: 1px;
  margin-top: 24px;
  background: rgba(0,0,0,.1);
}
.section-separator { margin-top: 26px; }

/* ═══ CONSULT ════════════════════════════════════════════ */
.consult-section {
  display: grid;
  grid-template-columns: minmax(0,805px) minmax(0,805px);
  gap: 26px;
  margin-top: 26px;
}
.consult-section__image {
  min-height: 900px;
  overflow: hidden;
  border-radius: 17px;
  animation: soft-float 7s ease-in-out infinite;
}
.consult-section__image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.consult-form { min-height: 900px; padding-top: 35px; color: #000; }
.consult-form h2 {
  max-width: 805px;
  margin: 0 0 22px;
  color: #000;
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, 34px);
  font-weight: 500;
  line-height: 1.1;
}
.consult-field-group { margin-top: 0; }
.consult-field-group h3, .consult-budget h3 {
  margin: 0;
  color: #000;
  font-family: var(--font-system);
  font-size: 21.9px;
  font-weight: 700;
  line-height: 1.2;
}
.consult-field-group p, .consult-budget p, .consult-form__note {
  margin: 7px 0 0;
  color: #838391;
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.2;
}
.interest-tags { display: flex; flex-wrap: wrap; width: 100%; gap: 8px; margin-top: 24px; }
.interest-tag {
  --tag-icon-space: 0px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: 40px;
  min-width: 0;
  padding: 0 18px;
  flex: 0 0 auto;
  color: #000;
  font-family: var(--font-system);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.05;
  background: #d3d2d5;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.interest-tag.is-active { --tag-icon-space: 28px; color: #fff; background: #000; }
.interest-tag__text { display: block; min-width: 0; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.interest-tag__icon {
  position: relative;
  width: 0; height: 14px;
  margin-right: 0;
  flex: 0 0 0;
  opacity: 0;
  transform: scale(.35) rotate(-90deg);
  transition: flex-basis 180ms ease, margin-right 180ms ease, opacity 180ms ease, width 180ms ease, transform 220ms cubic-bezier(.2,1.4,.35,1);
}
.interest-tag.is-active .interest-tag__icon { width: 14px; margin-right: 10px; flex-basis: 14px; opacity: 1; transform: scale(1) rotate(0deg); }
.interest-tag__icon::before, .interest-tag__icon::after {
  position: absolute;
  top: 50%; left: 50%;
  width: 14px; height: 2px;
  content: "";
  background: currentColor;
  border-radius: 999px;
  transform-origin: center;
}
.interest-tag__icon::before { transform: translate(-50%,-50%) rotate(45deg); }
.interest-tag__icon::after  { transform: translate(-50%,-50%) rotate(-45deg); }
.consult-field-group--project { margin-top: 24px; }
.consult-inputs {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px 26px;
  margin-top: 26px;
}
.consult-inputs input, .consult-message textarea {
  width: 100%;
  color: #000;
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 500;
  background: transparent;
  border: 1px solid rgba(0,0,0,.16);
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.consult-inputs input { height: 48px; padding: 0 20px; border-radius: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.consult-inputs input:first-child { border-color: #000; }
.consult-inputs input:focus, .consult-message textarea:focus { border-color: #000; box-shadow: 0 0 0 3px rgba(113,110,255,.14); }
.consult-inputs input::placeholder, .consult-message textarea::placeholder { color: #838391; }
.consult-inputs > input:nth-child(3), .consult-message { grid-column: 1 / -1; }
.consult-message { position: relative; height: 234px; }
.consult-message textarea { display: block; height: 100%; padding: 20px; resize: none; border-radius: 6px; }
.consult-message button {
  position: absolute;
  right: 20px; bottom: 20px;
  width: 145px; height: 42px;
  color: #000;
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 500;
  background: #d3d2d5;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.consult-budget { margin-top: 22px; }
.budget-slider__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 22px;
  color: #000;
  font-family: var(--font-system);
  font-size: 21.9px;
  font-weight: 500;
  line-height: 1;
}
.budget-slider__value { transform-origin: right center; transition: color 160ms ease, transform 160ms ease; }
.budget-slider__value.is-changing { color: #716eff; transform: scale(1.12); }
.budget-slider {
  --budget-progress: 37.5%;
  display: block;
  width: 100%; height: 42px;
  margin-top: 4px;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.budget-slider::-webkit-slider-runnable-track {
  height: 12px;
  background: linear-gradient(90deg,#000 0 var(--budget-progress),#d3d2d5 var(--budget-progress) 100%);
  border-radius: 100px;
}
.budget-slider::-webkit-slider-thumb {
  width: 42px; height: 42px;
  margin-top: -15px;
  appearance: none;
  background: #000;
  border: 6px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(113,110,255,.4);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.budget-slider:is(:active,:focus-visible)::-webkit-slider-thumb { transform: scale(1.08); box-shadow: 0 0 0 10px rgba(113,110,255,.18); }
.budget-slider::-moz-range-track { height: 12px; background: #d3d2d5; border-radius: 100px; }
.budget-slider::-moz-range-progress { height: 12px; background: #000; border-radius: 100px; }
.budget-slider::-moz-range-thumb { width: 30px; height: 30px; background: #000; border: 6px solid #fff; border-radius: 50%; }
/* Figma: 805 × 1, fill #000 @ 10% — divider before the submit area */
.consult-form__separator {
  width: 100%;
  height: 1px;
  margin-top: 22px;
  background: rgba(0, 0, 0, 0.1);
}
.consult-form__note { margin-top: 22px; text-align: center; }
.consult-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 80px;
  margin-top: 22px;
  color: #fff;
  font-family: var(--font-system);
  font-size: 21.9px;
  font-weight: 500;
  background: linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.2)),#716eff;
  border: 0;
  border-radius: 17px;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease), filter var(--motion-fast) ease;
}
.consult-submit:hover { filter: brightness(1.03); }

/* ═══ REVIEWS ════════════════════════════════════════════ */
.reviews-section { width: 100%; margin-top: 26px; }
.reviews-section__top { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-bottom: 26px; }
.reviews-section__top h2 { margin: 0; color: #000; font-family: var(--font-display); font-size: clamp(42px,3vw,58px); font-weight: 500; line-height: 1; }
.reviews-show-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 188px; height: 70px;
  flex: 0 0 auto;
  color: #fff;
  font-family: var(--font-system);
  font-size: 17px;
  font-weight: 500;
  background: #000;
  border-radius: 17px;
  transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease;
}
.reviews-show-all:hover { background: #151515; }
.reviews-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 25px; }
.review-card {
  --review-hover-ease: cubic-bezier(.37, 0, .63, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 258px;
  padding: 22px;
  color: #000;
  background: #fff;
  border-radius: 17px;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(24,24,42,0);
  transform: translate3d(0,0,0);
  transform-origin: center;
  transition:
    transform 480ms cubic-bezier(.25,.46,.45,.94),
    box-shadow 480ms cubic-bezier(.25,.46,.45,.94);
  transition-delay: 0ms;
  will-change: transform;
  backface-visibility: hidden;
}
.review-card.reveal-item,
.review-card.reveal-item.is-visible {
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform 480ms cubic-bezier(.25,.46,.45,.94),
    box-shadow 480ms cubic-bezier(.25,.46,.45,.94);
  transition-delay: 0ms;
}
.review-card.reveal-item.is-visible {
  opacity: 1;
  box-shadow: 0 0 0 rgba(24,24,42,0);
  transform: translate3d(0,0,0);
}
.review-card:hover {
  background: #fff;
  box-shadow: 0 10px 28px rgba(24,24,42,.07);
  transform: translate3d(0,-3px,0);
}
.review-card.reveal-item.is-visible:hover {
  box-shadow: 0 10px 28px rgba(24,24,42,.07);
  transform: translate3d(0,-3px,0);
}
.review-card__head,
.review-card__text,
.review-card__bottom {
  position: relative;
  z-index: 1;
}
.review-card__head { display: grid; grid-template-columns: 52px minmax(0,1fr) auto; align-items: center; column-gap: 22px; min-height: 52px; }
.review-card__avatar { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; background: #000; border-radius: 50%; }
.review-card__avatar img { display: block; width: 22px; height: 22px; }
.review-card h3 { margin: 0; color: #000; font-family: var(--font-system); font-size: 27px; font-weight: 700; line-height: 1.1; }
.review-card__stars { display: flex; align-items: center; justify-self: end; gap: 13px; color: #000000; }
.review-card__star { display: block; width: 25px; height: 25px; flex: 0 0 auto; }
.review-card__text { height: 64px; margin: 28px 0 0; color: #000; font-family: var(--font-system); font-size: 15px; font-weight: 500; line-height: 20px; overflow: hidden; }
.review-card__bottom { display: flex; align-items: center; justify-content: space-between; gap: 15px; height: 45px; margin-top: auto; width: 100%; }
.review-card__date { display: inline-flex; align-items: center; gap: 15px; height: 45px; color: #000; font-family: var(--font-system); font-size: 15px; font-weight: 500; white-space: nowrap; }
.review-card__clock { display: block; width: 30px; height: 30px; flex: 0 0 30px; }
.review-card__tag { display: inline-flex; align-items: center; justify-content: center; width: 162px; height: 40px; flex: 0 0 auto; color: #fff; font-family: var(--font-system); font-size: 14px; font-weight: 500; background: #7765FF; border-radius: 100px; white-space: nowrap; }

/* ═══ FAQ ════════════════════════════════════════════════ */
.faq-section { margin-top: 26px; }
.faq-section h2 { margin: 0; color: #000; font-family: var(--font-display); font-size: 55px; font-weight: 500; line-height: 1; }
.faq-grid { --faq-gap: 26px; display: grid; grid-template-columns: repeat(2,minmax(0,805px)); align-items: start; column-gap: var(--faq-gap); row-gap: var(--faq-gap); margin-top: 26px; }
.faq-column { display: flex; flex-direction: column; gap: var(--faq-gap); min-width: 0; }
.faq-item { overflow: hidden; background: #fff; border-radius: 17px; transition: box-shadow var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease); will-change: height; }
.faq-item:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(24,24,42,.08); }
.faq-item summary { display: grid; grid-template-columns: minmax(0,1fr) 72px; align-items: center; gap: 26px; min-height: 98px; padding: 0 16px 0 22px; color: #000; font-family: var(--font-system); font-size: 24px; font-weight: 700; line-height: 1.2; list-style: none; cursor: pointer; }
.faq-item[open] summary { min-height: 58px; padding-top: 18px; padding-bottom: 6px; }
.faq-item.is-closing summary { min-height: 98px; padding-top: 0; padding-bottom: 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faq-item[open] summary > span:first-child { white-space: normal; }
.faq-item__plus { position: relative; display: inline-flex; width: 72px; height: 72px; background: #000 url("../plus.icon.svg") center / 35px 35px no-repeat; border-radius: 50%; transition: background-color 180ms ease, transform 320ms cubic-bezier(.16,1,.3,1); }
.faq-item__plus::before, .faq-item__plus::after { display: none; }
.faq-item__plus::after { transform: translate(-50%,-50%) rotate(90deg); }
.faq-item[open] .faq-item__plus { transform: rotate(180deg); }
.faq-item[open] .faq-item__plus { background-image: url("../Clip path group.svg"); }
.faq-item[open] .faq-item__plus::after { transform: translate(-50%,-50%) rotate(90deg) scaleX(0); }
.faq-item.is-closing .faq-item__plus { transform: rotate(0deg); }
.faq-item.is-closing .faq-item__plus::after { transform: translate(-50%,-50%) rotate(90deg) scaleX(1); }
.faq-item p { margin: 8px 76px 24px 22px; color: #838391; font-family: var(--font-system); font-size: 18px; font-weight: 500; line-height: 1.45; opacity: 0; transform: translateY(-6px); transition: opacity 180ms ease, transform 260ms cubic-bezier(.16,1,.3,1); }
.faq-item[open] p { opacity: 1; transform: translateY(0); }
.faq-item.is-closing p { opacity: 0; transform: translateY(-6px); }