.experience-section {
  overflow: hidden;
  background: linear-gradient(180deg, #fff 0, #f8f2fa 100%);
}
html, body { max-width: 100%; overflow-x: hidden; }
.experience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.experience-card {
  position: relative;
  display: grid;
  grid-template-columns: 0.78fr 1.22fr;
  align-items: center;
  min-height: 520px;
  overflow: hidden;
  padding: 36px 20px 0 36px;
  border: 1px solid rgba(49, 24, 91, 0.09);
  border-radius: 30px;
  background: linear-gradient(145deg, #fff, #f4eafa);
  box-shadow: var(--shadow);
}
.experience-card-alt {
  color: #fff;
  background: linear-gradient(145deg, #160b3b, #300b45);
}
.experience-card::before {
  position: absolute;
  right: -80px;
  bottom: -110px;
  width: 300px;
  height: 300px;
  border: 1px solid rgba(143, 86, 255, 0.16);
  border-radius: 50%;
  content: "";
}
.experience-copy { position: relative; z-index: 2; align-self: center; }
.experience-number {
  display: grid;
  width: 38px;
  height: 38px;
  margin-bottom: 22px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, var(--violet), var(--pink));
  font-family: var(--display);
  font-size: 11px;
  font-weight: 800;
}
.experience-copy h3 { margin-bottom: 13px; font-size: 25px; line-height: 1.2; }
.experience-copy p { margin: 0; color: var(--soft); font-size: 14px; line-height: 1.65; }
.experience-card-alt .experience-copy p { color: rgba(255, 255, 255, 0.62); }
.experience-phone {
  position: relative;
  z-index: 1;
  align-self: end;
  justify-self: end;
  width: min(250px, 100%);
  height: 450px;
  overflow: hidden;
  border: 7px solid #171029;
  border-bottom: 0;
  border-radius: 29px 29px 0 0;
  background: #09061c;
  box-shadow: 0 25px 55px rgba(20, 5, 45, 0.24);
}
.experience-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
@media (max-width: 820px) {
  .experience-grid { grid-template-columns: 1fr; }
  .experience-card { min-height: 500px; }
}
@media (max-width: 560px) {
  .nav-wrap { width: calc(100% - 24px); }
  .brand { flex: 0 1 138px; min-width: 0; }
  .brand img { width: 138px; }
  .nav-actions { flex: 0 0 auto; gap: 6px; }
  .language-switch { padding: 3px; }
  .language-switch button { min-width: 28px; }
  .menu-button { flex: 0 0 38px; width: 38px; height: 38px; }
  .hero-copy { min-width: 0; }
  .hero-copy h1 { width: 100%; font-size: clamp(34px, 9.5vw, 40px); overflow-wrap: anywhere; }
  .hero-lead { width: min(100%, 330px); font-size: 14px; }
  .trust-row { width: min(100%, 340px); gap: 12px 14px; font-size: 10px; }
  .hero-visual { width: 100%; }
  .floating-online { right: -8px; }
  .floating-sale { left: -8px; }
  .experience-card { grid-template-columns: 1fr; min-height: 660px; padding: 28px 24px 0; }
  .experience-phone { justify-self: center; width: 235px; height: 430px; }
  .experience-copy { padding-bottom: 22px; }
}