/* ═══════════════════════════════════════════════════
   ULTRAPARI — AGENT LANDING
   Base design: 1920 px canvas
   Responsive breakpoints live at the BOTTOM of this file.
   ═══════════════════════════════════════════════════ */

/* Scroll is locked via JS touchmove blocking (see main.js preventBgScroll).
   overflow:hidden on html or body both break position:sticky — avoided entirely. */

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── DESIGN TOKENS ─── */
:root {
  --bg-primary: #28001d;
  --bg-card: rgba(40,0,29,0.4);
  --purple-deep: #420031;
  --purple-mid: #5e0046;
  --purple-input: #5e2650;
  --green-accent: #8dffb0;
  --gold: #ffc41d;
  --white: #ffffff;
  --white-80: rgba(255,255,255,0.8);
  --white-30: rgba(255,255,255,0.3);
  --faq-from: rgba(215,38,169,0.4);
  --faq-to: rgba(107,20,84,0.4);
  --advantage-from: rgba(96,0,71,0.4);
  --advantage-to: rgba(255,0,189,0.4);
}

/* ─── BASE ─── */
/* html { scroll-behavior: smooth; overflow-x: hidden; } */
html {
  width: 1920px;
}

@media (max-width: 480px) {
  html {
    width: 320px;
    overflow-x: clip;
  }
  body {
    overflow-x: clip;
    overscroll-behavior: smooth;
  }
}

body {
  font-family: 'Open Sans', sans-serif;
  background-image: url('images/bg-full.png');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* background-color: var(--bg-primary); */
  /* color: var(--white); */
  min-height: 100vh;
  overflow-x: clip;
}

img { display: block; max-width: 100%; }

/* ─── PAGE WRAPPER ─── */
.page-wrapper {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 12px 98px 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: relative;
}

/* ─── BG DECORATIVE BLOBS ─── */
.bg-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.bg-blobs::before {
  content: '';
  position: absolute;
  width: 900px; height: 900px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(180,20,120,0.18) 0%, transparent 70%);
  top: -200px; right: -300px;
}
.bg-blobs::after {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(100,0,80,0.22) 0%, transparent 70%);
  bottom: 10%; left: -200px;
}

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */
.header {
  background: #420031;
  border-radius: 15px;
  box-shadow: 0 5px 24px 0 rgba(23,0,16,0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  height: 86px;
  position: sticky;
  top: 12px;
  z-index: 100;
}

.logo { flex-shrink: 0; }
.logo img {
  display: block;
  width: 153px;
  height: 47.778px;
  object-fit: contain;
}

.nav {
  display: flex;
  gap: 43px;
  align-items: center;
}
.nav a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 25px;
  line-height: normal;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  font-style: normal;
  transition: color 0.2s;
}
.nav a:hover { color: #FFC41D; }
.nav a.active { color: #FFC41D; opacity: 0.8; }

.header-actions {
  display: flex;
  gap: 15px;
  align-items: center;
}

.btn-become-agent-sm {
  background: var(--green-accent);
  border: none;
  border-radius: 8px;
  height: 46px;
  /* width: 180px; */
  padding: 0 8px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 16px;
  color: #420031;
  cursor: pointer;
  white-space: nowrap;
  font-stretch: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity 0.2s;
}
.btn-become-agent-sm:hover { opacity: 0.88; }

.lang-selector {
  background: #5e0046;
  border-radius: 8px;
  height: 46px;
  width: 66px;
  overflow: visible;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.lang-flag {
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 21px;
  overflow: hidden;
  background-image: url('images/flags-sprite.png');
}
.lang-flag-stripe {
  position: absolute;
  left: -2px;
  width: 28px;
}
.lang-flag-stripe.white  { background: #ffffff; height: 8px;  top: -0.5px;  }
.lang-flag-stripe.blue   { background: #0c47b7; height: 9px;  top: 7.5px;   }
.lang-flag-stripe.red    { background: #e53b35; height: 8px;  top: 16.5px;  }
.lang-selector .lang-ru {
  position: absolute;
  left: 34px;
  top: calc(50% - 8px);
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 16px;
  color: #ffffff;
  white-space: nowrap;
  font-stretch: normal;
}

/* ═══════════════════════════════════════════════════
   MAIN CONTENT WRAPPER
   ═══════════════════════════════════════════════════ */
.content {
  display: flex;
  flex-direction: column;
  gap: 121px;
  position: relative;
  z-index: 1;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 80px;
}

/* ═══════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════ */
.hero {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 100%;
  position: relative;
}

/* Banner — absolutely positioned inside .hero-title-block.
   right:-98px accounts for page-wrapper's 98px padding so the banner's
   right edge sits flush with the viewport right edge at ≤1440px viewports. */
.hero-banner-wrap {
  position: absolute;
  top: -805px;
  left: 43%;
  width: 1213px;
  pointer-events: none;
  z-index: 0;
}
.hero-banner-img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-heading-block-wrap {
  display: flex;
  flex-direction: column;
  gap: 35px;
  width: 100%;
}

.hero-title-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.hero-title {
  display: flex;
  flex-direction: column;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 100px;
  font-style: normal;
  text-transform: uppercase;
  line-height: 0;
  width: 100%;
}
.hero-title-green {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #8dffb0;
  width: 908px;
  line-height: 101px;
  flex-shrink: 0;
}
.hero-title-white {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #ffffff;
  height: 101px;
  line-height: 56px;
  flex-shrink: 0;
}

.hero-subtitle {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-stretch: normal;
  font-size: 22px;
  line-height: 26px;
  color: #ffffff;
  width: 881px;
  flex-shrink: 0;
}

/* ─── CTA BUTTON (gold/orange) ─── */
.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 311px;
  height: 58px;
  border: 1px solid #ffc41d;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  padding: 20px 30px;
}
.btn-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(255,196,29) 0%, rgb(255,163,72) 50%, rgb(255,147,93) 75%, rgb(255,130,114) 100%);
  pointer-events: none;
  border-radius: 14px;
}
.btn-cta::after {
  content: '';
  position: absolute;
  inset: -0.5px;
  border-radius: 14px;
  box-shadow: inset 0px -4px 1.7px 0px rgba(0,0,0,0.25);
  pointer-events: none;
}
.btn-cta span {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: normal;
  font-size: 25px;
  line-height: normal;
  color: #600047;
  z-index: 1;
  text-align: center;
}
.btn-cta:hover::before { filter: brightness(1.05); }

/* ─── ACHIEVEMENTS BLOCK ─── */
.achievements-block {
  position: relative;
  /* height: 381px; */
  width: 100%;
  flex-shrink: 0;
}

.achievements-inner {
  position: relative;
  display: flex;
  gap: 39px;
  align-items: flex-start;
  justify-content: center;
  padding-top: 156px;
  width: 100%;
  height: 100%;
}

.achievements-bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 105%;
  display: block;
  pointer-events: none;
  z-index: 1;
}

.hero-note {
  position: absolute;
  top: 32px;
  left: 47px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-stretch: normal;
  font-size: 24px;
  line-height: 27px;
  color: #ffffff;
  width: 439px;
  height: 93px;
  z-index: 0;
}

.achievement-item {
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex-shrink: 0;
  line-height: 0;
}
.achievement-item--wide  { width: 376px; }
.achievement-item--mid   { width: 332px; }

.achievement-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: normal;
  font-size: 45px;
  line-height: 45px;
  color: #ffffff;
  /* white-space: nowrap; */
}
.achievement-desc {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-stretch: normal;
  font-size: 25px;
  line-height: 30px;
  color: rgba(255,255,255,0.8);
}

.achievement-divider {
  flex-shrink: 0;
  position: relative;
}
.achievement-divider--1 { width: 56.87px; height: 185px; }
.achievement-divider--2 { width: 56.87px; height: 184px; }
.achievement-divider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* ═══════════════════════════════════════════════════
   ADVANTAGES
   ═══════════════════════════════════════════════════ */
.advantages {
  display: flex;
  gap: 37px;
  align-items: center;
  width: 100%;
  margin-top: -65px;
}

.advantage-card {
  flex: 1 0 0;
  height: 214px;
  border-radius: 25px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background-image: linear-gradient(158.41deg, rgba(96,0,71,0.4) 10.055%, rgba(255,0,189,0.4) 111.88%);
}
.advantage-card--1 { padding: 0 34px; }
.advantage-card--2 { padding: 19px 34px; }
.advantage-card--3 { padding: 13px 34px; }

.advantage-text {
  display: flex;
  flex-direction: column;
  gap: 13px;
  position: relative;
  z-index: 1;
  line-height: 0;
  color: #ffffff;
  flex-shrink: 0;
}
.advantage-card--1 .advantage-text { width: 334px; }
.advantage-card--2 .advantage-text { width: 334px; }
.advantage-card--3 .advantage-text { width: 378px; }

.advantage-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 40px;
  line-height: 45px;
  height: 88px;
  text-transform: uppercase;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* white-space: nowrap; */
}
.advantage-desc {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-stretch: normal;
  font-size: 20px;
  line-height: 26px;
  height: 55px;
  width: 315px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.adv-img-1 {
  position: absolute;
  left: 273px;
  top: 9px;
  width: 191px;
  height: 196px;
  pointer-events: none;
}
.adv-img-1 img { width: 100%; height: 100%; display: block; }

.adv-img-2 {
  position: absolute;
  left: 227.67px;
  top: -14px;
  width: 261px;
  height: 261px;
  pointer-events: none;
}
.adv-img-2 img { width: 100%; height: 100%; display: block; object-fit: cover; }

.adv-img-3-wrap {
  position: absolute;
  left: 223.33px;
  top: -44px;
  width: 281.607px;
  height: 281.607px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.adv-img-3-inner {
  transform: rotate(-156.49deg) scaleY(-1);
  flex-shrink: 0;
  width: 214px;
  height: 214px;
  position: relative;
}
.adv-img-3-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════
   SECTION HEADING (shared)
   ═══════════════════════════════════════════════════ */
.section-heading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 40px;
  color: var(--green-accent);
  text-transform: uppercase;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════
   ABOUT SECTION
   ═══════════════════════════════════════════════════ */
.about-section {
  display: flex;
  flex-direction: column;
  gap: 35px;
  position: relative;
}
.about-section .section-heading { line-height: 101px; }
.about-section br { display: none; }

/* Glow decoration — hidden on desktop, shown on mobile */
.about-glow-wrap {
  display: none;
}
.about-glow-rotate,
.about-glow-inner { display: none; }

.about-card {
  background: rgba(40, 0, 29, 0.4);
  border-radius: 25px;
  height: 652px;
  width: 100%;
  position: relative;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1)
}

.about-content {
  position: absolute;
  left: 720px;
  top: calc(50% + 0.5px);
  transform: translateY(-50%);
  width: 653px;
  height: 543px;
  display: flex;
  flex-direction: column;
  gap: 49px;
  align-items: flex-start;
  justify-content: flex-end;
}

/* Robot is now a direct child of about-section (outside about-card).
   On desktop it must be positioned relative to about-section.
   Previous coords were relative to about-content (left: 720px, top ~55px inside about-card).
   about-card starts at heading(101px) + gap(35px) = 136px inside section.
   Robot relative to section: left = 720-811 = -91px, top = 136+(55-101) = 90px */
.about-robot-wrap {
  position: absolute;
  left: -91px;
  top: 90px;
  width: 790px;
  height: 698px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}
.about-robot-wrap img {
  position: absolute;
  height: 112.6%;
  left: 0.1%;
  top: -0.24%;
  width: 99.44%;
  max-width: none;
  display: block;
}

.about-title {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 40px;
  line-height: 40px;
  color: #ffffff;
  flex-shrink: 0;
}

.about-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-stretch: normal;
  font-size: 25px;
  line-height: 34px;
  color: #ffffff;
  flex-shrink: 0;
}
.about-text p { margin: 0; }

/* ═══════════════════════════════════════════════════
   HOW TO START
   ═══════════════════════════════════════════════════ */
.how-section {
  display: flex;
  flex-direction: column;
  gap: 45px;
  position: relative;
  flex-shrink: 0;
}
.how-section .section-heading { line-height: 101px; }

.how-steps {
  display: flex;
  gap: 45px;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}

.how-step-card {
  flex: 1 0 0;
  height: 96px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 25px;
  padding: 20px 30px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  overflow: visible;
  min-width: 0;
}

.how-step-label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 22px;
  color: #ffffff;
  text-align: right;
  line-height: normal;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
  z-index: 1;
}

.how-img-outer {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.how-img-1-outer { left: -18.83px; top: -37.79px; width: 143.737px; height: 143.737px; }
.how-img-2-outer { left: -49.25px; top: -74px;    width: 197.632px; height: 197.632px; }
.how-img-3-outer { left: -49px;    top: -70px;    width: 193.665px; height: 189.363px; }
.how-img-4-outer { left: -37.75px; top: -66px;    width: 185.784px; height: 185.784px; }

.how-img-1-rot { transform: rotate(-8.38deg);  flex-shrink: 0; }
.how-img-2-rot { transform: rotate(51.16deg);  flex-shrink: 0; }
.how-img-3-rot { transform: rotate(16.34deg); flex-shrink: 0; }
.how-img-4-rot { transform: rotate(-24.99deg); flex-shrink: 0; }

.how-img-box {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.how-img-1-box { width: 126.626px; height: 126.626px; border-radius: 39px; }
.how-img-2-box { width: 140.559px; height: 140.559px; border-radius: 258px; }
.how-img-3-box { width: 140.559px; height: 140.559px; border-radius: 258px; }
.how-img-4-box { width: 139.809px; height: 139.809px; border-radius: 46px; }

.how-img-box img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════
   FORM + CONTACTS
   ═══════════════════════════════════════════════════ */
.form-section {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.form-outer {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  min-height: 985px;
  align-items: flex-start;
  min-width: 0;
  position: relative;
}

.form-inner-row {
  flex: 1 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  min-height: 0;
  min-width: 0;
}

/* ── LEFT COLUMN ── */
.form-left-col {
  flex-shrink: 0;
  width: 731px;
  height: 100%;
  position: relative;
  min-height: 985px;
}

.form-left-content {
  position: absolute;
  left: 0;
  top: 0;
  width: 731px;
  height: 985px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.form-cta-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
  line-height: 0;
}

.form-cta-heading {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 70px;
  color: #8dffb0;
  text-transform: uppercase;
  line-height: normal;
  width: 731px;
  flex-shrink: 0;
}

.form-cta-sub {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #ffffff;
  line-height: normal;
  width: 731px;
  flex-shrink: 0;
}
.form-cta-sub p { margin: 0; }

.contacts-block {
  display: flex;
  flex-direction: column;
  gap: 38px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 100%;
}
.contacts-block .section-heading { line-height: 101px; }

.contacts-items {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  flex-shrink: 0;
}

.contact-badges {
  height: 234px;
  width: 373px;
  position: relative;
  flex-shrink: 0;
}

.contact-email-badge {
  position: absolute;
  background: rgba(96, 0, 71, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  gap: 11px;
  align-items: center;
  left: 0;
  top: 0;
  padding: 20px;
  border-radius: 75px;
  text-decoration: none;
}

.contact-tg-badge {
  position: absolute;
  background: rgba(96, 0, 71, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  gap: 11px;
  align-items: center;
  left: 0;
  top: 129px;
  padding: 20px;
  border-radius: 98px;
  width: 373px;
  text-decoration: none;
  box-sizing: border-box;
}

.contact-icon {
  width: 65px;
  height: 65px;
  flex-shrink: 0;
  position: relative;
}
.contact-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

.contact-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #ffffff;
  line-height: 40px;
  white-space: nowrap;
}

.contact-qr {
  background: #8dffb0;
  border-radius: 18px;
  width: 234px;
  height: 234px;
  position: relative;
  flex-shrink: 0;
}
.contact-qr-inner {
  position: absolute;
  top: 8.7%;
  right: 8.33%;
  bottom: 8.7%;
  left: 9.06%;
}
.contact-qr-inner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}

/* ── RIGHT COLUMN (FORM) ── */
.form-right-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}

.form-card {
  background: rgba(40, 0, 29, 0.4);
  display: flex;
  flex-direction: column;
  gap: 29px;
  align-items: flex-start;
  overflow: hidden;
  padding: 50px 53px;
  border-radius: 70px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
  width: 709px;
  box-sizing: border-box;
  isolation: isolate;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
  width: 100%;
  isolation: isolate;
}

.form-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  flex-shrink: 0;
  width: 100%;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  flex-shrink: 0;
}
.form-field--half { width: 295px; }
.form-field--full { width: 100%; }

.form-label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  line-height: normal;
  width: 100%;
  flex-shrink: 0;
  margin: 0;
}
.form-label--light { font-weight: 300; }
.form-label--faded { font-weight: 300; } /* desktop: light weight; mobile overrides to faded color */
.form-label-star { color: #8dffb0; }

.form-input {
  background: #5e2650;
  height: 59px;
  border-radius: 9px;
  width: 100%;
  border: none;
  flex-shrink: 0;
  padding: 0 20px;
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  color: #ffffff;
  outline: none;
  box-sizing: border-box;
}
.form-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.form-input:focus { background: #6e3060; }

textarea.form-input {
  height: 76px;
  resize: none;
  padding: 14px 29px;
}

.form-phone-wrap {
  background: #5e2650;
  display: flex;
  align-items: flex-start;
  overflow: visible;
  padding: 8px;
  border-radius: 10px;
  width: 295px;
  height: 59px;
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
}
.form-phone-inner {
  height: 44px;
  position: relative;
  flex-shrink: 0;
  width: 279px;
}
.form-phone-selector {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  gap: 6px;
  align-items: center;
  left: 0;
  top: 0;
  padding: 4px 11px 4px 4px;
  border-radius: 24px;
}
.form-phone-flag {
  width: 36px;
  height: 36px;
  position: relative;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
}
.form-phone-flag img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
  border-radius: 50%;
}
.form-phone-arrow {
  width: 11px;
  height: 6.875px;
  position: relative;
  flex-shrink: 0;
}
.form-phone-arrow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  display: block;
}
.form-phone-code {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  line-height: normal;
  white-space: nowrap;
}
.form-phone-num {
  position: absolute;
  display: flex;
  height: 44px;
  align-items: center;
  left: 132px;
  top: 0;
  width: 153px;
}
.form-phone-num span {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: rgba(255, 255, 255, 0.3);
  line-height: normal;
  white-space: nowrap;
}

.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 16px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}

.form-radio-option {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  width: 100%;
}

.form-radio-input {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background: url('images/form-radio.svg') center / 100% 100% no-repeat;
  cursor: pointer;
  position: relative;
}
.form-radio-input:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: url('images/form-radio-dot.svg') center / 100% 100% no-repeat;
}

.form-radio-label {
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
  font-size: 20px;
  color: #ffffff;
  line-height: normal;
  white-space: nowrap;
}

/* ─── SEND BUTTON ─── */
.btn-send {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 602px;
  height: 65px;
  border: 1px solid #7bd196;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 0 6.7px 0 #8dffb0;
  background: none;
  flex-shrink: 0;
  z-index: 1;
  padding: 20px 30px;
}
.btn-send::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #8dffb0 0%, #00dd44 100%);
  pointer-events: none;
  border-radius: 14px;
}
.btn-send::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 14px;
  box-shadow: inset 0px -4px 2.7px rgba(0, 0, 0, 0.25);
}
.btn-send span {
  position: relative;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 25px;
  color: #600047;
  z-index: 1;
  line-height: normal;
}
.btn-send:hover::before { filter: brightness(1.06); }

/* ═══════════════════════════════════════════════════
   FAQ
   ═══════════════════════════════════════════════════ */
.faq-section {
  display: flex;
  flex-direction: column;
  gap: 35px;
}
.faq-section .section-heading { line-height: 101px; }

.faq-answers-row {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  cursor: pointer;
}

.faq-col-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  flex-shrink: 0;
}

.faq-col-right {
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-end;
  align-self: stretch;
}

.faq-item {
  background: linear-gradient(180deg, rgba(215,38,169,0.4) 0%, rgba(107,20,84,0.4) 100%);
  border-radius: 25px;
  overflow: hidden;
  width: 683px;
  flex-shrink: 0;
  position: relative;
}

.faq-summary {
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 14px 33px;
  cursor: pointer;
  position: relative;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
}

.faq-question-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  line-height: 40px;
  width: 553px;
  flex-shrink: 0;
}

.faq-arrow-wrap {
  width: 20px;
  height: 14px;
  flex-shrink: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.faq-arrow-wrap img {
  width: 20px;
  height: 14px;
  max-width: none;
  display: block;
  transition: transform 0.25s ease;
}

/* Open state */
.faq-item.open {
  background: rgba(96, 0, 71, 0.4);
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px 33px;
}
.faq-item.open .faq-summary { padding: 0; }
.faq-item.open .faq-arrow-wrap img { transform: scaleY(-1); }

.faq-expanded {
  display: none;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}
.faq-item.open .faq-expanded { display: flex; }

.faq-divider-wrap {
  width: 583px;
  height: 2px;
  flex-shrink: 0;
}
.faq-divider-wrap img { width: 100%; height: 100%; max-width: none; display: block; }

.faq-answer-text {
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #ffffff;
  line-height: normal;
  margin: 0;
}

/* ═══════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════ */
footer {
  padding: 115px 237px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 25px 25px 0 0;
  position: relative;
  z-index: 1;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 17px;
  align-items: flex-start;
  flex-shrink: 0;
}

.footer-logo-img {
  width: 153px;
  height: 47.778px;
  display: block;
  flex-shrink: 0;
}

.footer-copy {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #ffffff;
  line-height: normal;
  white-space: nowrap;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: flex-start;
  flex-shrink: 0;
}
.footer-links a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-stretch: condensed;
  font-size: 25px;
  color: #ffffff;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: normal;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--green-accent); }

.footer-btn-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-shrink: 0;
}

/* ─── DESKTOP-HIDDEN / MOBILE-ONLY ELEMENTS ─── */
/* These elements are only revealed inside the mobile media query */
.hamburger-btn    { display: none; }
.mobile-nav       { display: none; }
.hero-note-mobile { display: none; }
.form-heading-mobile { display: none; }

/* ─── MISC UTILITIES ─── */
.deco-ball {
  position: absolute;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: luminosity;
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Design baseline: 1920 px
   Add further breakpoints below in descending order.
   ═══════════════════════════════════════════════════ */

/* ── ≤ 1300 px ── */
@media (max-width: 1300px) {
  .page-wrapper { padding: 12px 40px 0; }
  .hero-title   { font-size: 72px; }
  .nav          { gap: 24px; }
}


/* ── ≤ 1024 px (tablet landscape) ──
   Add tablet styles here */

/* ── ≤ 768 px (tablet portrait / large phone) ──
   Add tablet/mobile styles here */

/* ═══════════════════════════════════════════════════
   MOBILE  ≤ 480 px  —  design baseline: 320 px
   ═══════════════════════════════════════════════════ */
@media (max-width: 480px) {


  body {
    background-image: url('images/bg-mobile.png');
    background-size: 100% auto;
    background-position: top center;
    background-color: var(--bg-primary);
  }
  /* ─── HAMBURGER BUTTON (hidden on desktop) ─── */
  .hamburger-btn {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 32px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
  }
  .hamburger-btn span {
    display: block;
    width: 100%;
    height: 3px;
    background: #ffffff;
    border-radius: 2px;
    transition: transform 0.25s, opacity 0.25s;
  }
  .hamburger-btn.open span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
  .hamburger-btn.open span:nth-child(2) { opacity: 0; }
  .hamburger-btn.open span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

  /* ─── MOBILE NAV ─── */
  .mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 80px;
    background: #420031;
    padding: 65px 20px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--nav-h, 100vh);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    margin-top: 50px;
  }
  .mobile-nav.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .mobile-nav-links a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-stretch: condensed;
    font-variation-settings: 'wdth' 75;
    font-size: 25px;
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.2s;
  }
  .mobile-nav-links a:hover { color: var(--green-accent); }

  /* ─── PAGE WRAPPER ─── */
  .page-wrapper {
    padding: 0;
    gap: 0;
    max-width: 100%;
  }

  /* ─── HEADER ─── */
  .header {
    border-radius: 0;
    padding: 12px;
    height: auto;
    box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.3);
    position: sticky;
    top: 0;
  }
  .logo img {
    width: 71px;
    height: 22px;
  }
  .nav { display: none; }
  .btn-become-agent-sm { display: none; }
  .header-actions { gap: 15px; }
  .lang-selector {
    height: 32px;
    width: 66px;
  }
  .lang-selector .lang-ru {
    font-size: 16px;
    top: calc(50% - 8px);
  }

  /* ─── MAIN CONTENT ─── */
  .content {
    gap: 24px;
    padding: 19px 20px 0px;
    max-width: 100%;
  }

  /* ─── SECTION ORDER (mobile reflow) ─── */
  /* Desired order: hero → about → advantages → form → contact (inside form) → faq */
  .hero           { order: 1; }
  .about-section  { order: 2; }
  .advantages     { order: 3; margin-top: 0; } /* reset desktop negative margin */
  .how-section    { order: 4; }
  .form-section   { order: 5; }
  /* contacts-block is order: 2 inside form-inner-row (after form card order: 1)
     so visually: form card → contacts → faq — matches Figma order */
  .faq-section    { order: 6; }

  /* ─── HERO ─── */
  .hero { gap: 14px; }

  .hero-heading-block-wrap {
    gap: 14px;
    align-items: center;
  }

  .hero-title-block {
    width: 264px;
    height: 385px;
    gap: 12px;
    text-align: center;
    z-index: 2;
  }

  /* Banner — mobile: absolute inside .hero-title-block, overflowing both sides.
     z-index:-1 keeps it behind normal-flow text elements. */
  .hero-banner-wrap {
    position: absolute;
    top: -750px;
    left: -156px;
    width: 535px;
    height: 822px;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
  }
  .hero-banner-img {
    position: absolute;
    width: 100%;
    height: 118.37%;
    top: 0;
    left: 0;
    display: block;
    content: url('images/hero-banner-mobile_NEW.png');
  }

  .hero-title {
    font-size: 40px;
    line-height: 0;
    align-items: center;
  }
  .hero-title-green {
    font-size: 40px;
    line-height: normal;
    width: 100%;
    text-align: center;
  }
  .hero-title-white {
    font-size: 30px;
    line-height: normal;
    height: auto;
    width: 100%;
    text-align: center;
  }

  .hero-subtitle {
    font-size: 12px;
    line-height: normal;
    width: 100%;
    text-align: center;
  }

  /* CTA button ─ mobile */
  .btn-cta {
    width: 215px;
    height: 40px;
    padding: 0;
    box-shadow: 0 0 24.8px 0 #ffc41d;
    align-self: center;
  }
  .btn-cta span { font-size: 16px; }

  /* Mobile-only hero note */
  .hero-note-mobile {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: normal;
    color: #ffffff;
    text-align: center;
    width: 100%;
    flex-shrink: 0;
  }
  /* Hide desktop hero note on mobile */
  .hero-note { display: none; }

  /* ─── ACHIEVEMENTS BLOCK (mobile: vertical card, overlaps hero-banner) ─── */
  .achievements-block {
    height: auto;
    width: 100%;
    position: relative;
    z-index: 1;
  }
  .achievements-inner {
    flex-direction: column;
    gap: 20px;
    padding: 34px 28px;
    align-items: center;
    justify-content: center;
    /* Solid base blocks hero-banner bleed-through; semi-transparent green layer on top matches Figma */
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), linear-gradient(180deg, rgba(141, 255, 176, 0.4) 100.74%, rgba(255, 255, 255, 0.4) 128.61%);
    border-radius: 26px;
    box-shadow: inset 0px 0px 2.7px 0px #ffffff;
  }
  .achievements-bg-img { display: none; }

  .achievement-item {
    align-items: center;
    text-align: center;
    gap: 9px;
    width: 100%;
  }
  .achievement-item--wide,
  .achievement-item--mid { width: 100%; }

  .achievement-title {
    font-size: 18px;
    line-height: normal;
    white-space: normal;
  }
  .achievement-desc {
    font-size: 14px;
    line-height: normal;
    text-align: center;
    width: 100%;
  }

  /* Dividers — Figma: 78×24px visual (image is 24×78 rotated 90°) */
  .achievement-divider {
    width: 78px;
    height: 24px;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
  }
  .achievement-divider--1,
  .achievement-divider--2 {
    width: 78px;
    height: 24px;
  }
  .achievement-divider img {
    position: absolute;
    width: 24px;
    height: 78px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
    margin: 0;
  }

  /* ─── ABOUT SECTION ─── */
  .about-section {
    gap: 10px;
    padding-top: 89px;
    position: relative;
    overflow: visible;
  }
  .about-section .section-heading {
    line-height: normal;
    text-align: left;
    z-index: 1;
    height: 66px;
    max-width: 70%;
  }
  .about-section br {
    display: block;
  }

  /* Glow element — mobile only.
     Mimics the Figma "Свечение 4" glow: gold-to-green radial gradient
     positioned behind the robot / heading area.
     Figma outer container: left 58px, top -69px, 340.6×378.651px.
     Glow center in section coords: x≈228px, y≈120px (right-center of robot).
     Multi-layer gradients simulate the Gaussian blur softness without CSS filter. */
  .about-glow-wrap {
    display: block;
    position: absolute;
    width: 500px;
    height: 500px;
    left: -22px;   /* center at x=228: 228 - 500/2 ≈ -22 */
    top: -188px;   /* center at y=120: 120 - 500/2 ≈ -130 */
    pointer-events: none;
    z-index: -1;
    overflow: visible;
    background-image: url('images/about-glow.png');
    /* background:
      radial-gradient(ellipse 200px 180px at 50% 50%, rgba(255, 196, 29, 0.42) 0%, transparent 100%),
      radial-gradient(ellipse 320px 300px at 50% 50%, rgba(3, 180, 86, 0.3) 0%, transparent 100%),
      radial-gradient(ellipse 460px 460px at 50% 50%, rgba(3, 120, 60, 0.1) 0%, transparent 100%); */
  }

  /* about-card must not be a positioning context on mobile so the robot
     (absolute child of about-section) sits at section level, not card level */
  .about-card {
    height: auto;
    position: static;
  }
  .about-content {
    position: static;
    transform: none;
    width: 100%;
    height: auto;
    gap: 20px;
    padding: 20px;
    align-items: center;
  }
  .about-robot-wrap {
    position: absolute;
    left: 97px;
    top: 0;
    width: 192px;
    height: 165px;
    overflow: hidden;
    z-index: 1;
  }
  .about-robot-wrap img {
    height: 115.5%;
    left: 0.1%;
    top: -0.24%;
    width: 99.44%;
    position: absolute;
    max-width: none;
  }
  .about-title {
    font-size: 16px;
    line-height: normal;
    width: 100%;
  }
  .about-text {
    font-size: 12px;
    line-height: normal;
    font-weight: 300;
    width: 100%;
  }

  /* ─── HOW TO START — hidden on mobile ─── */
  .how-section { display: none; }

  /* ─── ADVANTAGES ─── */
  .advantages {
    flex-direction: column;
    gap: 37px;
    align-items: stretch;
  }

  .advantage-card {
    height: auto;
    min-height: 120px;
    overflow: visible;
    padding: 20px;
  }
  .advantage-card--1,
  .advantage-card--2,
  .advantage-card--3 { padding: 20px; }

  /* advantage-text fills the full card width; images are absolute so don't push text */
  .advantage-text {
    width: 100%;
    gap: 4px;
  }
  .advantage-card--1 .advantage-text,
  .advantage-card--2 .advantage-text,
  .advantage-card--3 .advantage-text { width: 100%; }

  .advantage-title {
    font-size: 16px;
    line-height: normal;
    height: auto;
  }
  /* Desc widths per card match Figma paragraph widths */
  .advantage-desc {
    font-size: 12px;
    line-height: normal;
    height: auto;
    width: 100%;
    font-weight: 300;
  }
  .advantage-card--1 .advantage-desc { width: 193px; }
  .advantage-card--2 .advantage-desc { width: 177px; }
  .advantage-card--3 .advantage-desc { width: 100%; }

  /* Advantage images — repositioned to match Figma viewport coordinates.
     Content has 20px left padding, so Figma's left values shift by -20px relative to card.
     Figma card is 320px (full viewport); our card is 280px (320-40 padding).
     Img 1: Figma left=178px → card-left = 178-20 = 158px → right = 280-116-158 = 6px
     Img 2: Figma left=152px → card-left = 152-20 = 132px → right = 280-154-132 = -6px
     Img 3: Figma left=152px → card-left = 132px → right = 280-155-132 = -7px */
  .adv-img-1 {
    left: auto;
    right: 6px;
    top: -27px;
    width: 116px;
    height: 120px;
  }
  .adv-img-2 {
    left: auto;
    right: -6px;
    top: -38px;
    width: 154px;
    height: 154px;
  }
  .adv-img-3-wrap {
    left: auto;
    right: -7px;
    top: -45px;
    width: 155px;
    height: 155px;
  }
  .adv-img-3-inner {
    width: 118px;
    height: 118px;
  }

  /* ─── SECTION HEADING (mobile) ─── */
  .section-heading {
    font-size: 24px;
    line-height: normal;
  }
  .about-section .section-heading,
  .faq-section .section-heading,
  .contacts-block .section-heading { line-height: normal; }

  /* ─── FORM SECTION ─── */
  .form-section {
    flex-direction: column;
    gap: 10px;
    width: 100%;
    position: static;     /* reset desktop position: relative */
    align-items: stretch; /* reset desktop align-items: flex-start */
  }

  /* Mobile-only "ОТПРАВЬ ЗАЯВКУ" heading */
  .form-heading-mobile {
    display: block;
    text-align: center;
    width: 100%; /* ensure full width so text-align:center works */
  }

  .form-outer {
    width: 100%;
    min-height: auto;
    min-width: 0;
    flex: none;           /* reset desktop flex: 1 0 0 */
    align-items: stretch; /* reset desktop align-items: flex-start */
    display: flex;
    flex-direction: column;
    gap: 0;
    position: static;     /* reset desktop position: relative */
  }

  .form-inner-row {
    flex: none;           /* CRITICAL: reset flex: 1 0 0 (flex-basis:0 was collapsing height to 0) */
    min-height: auto;     /* CRITICAL: reset min-height: 0 (was allowing 0-height collapse) */
    min-width: 0;
    flex-direction: column;
    gap: 24px;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
  }

  /* Show form card first, CTA/contacts below */
  .form-right-col { order: 1; width: 100%; justify-content: center; align-items: stretch; display: flex; }
  .form-left-col  { order: 2; width: 100%; min-height: auto; height: auto; } /* height: auto resets desktop height: 100% */

  .form-left-content {
    position: static;
    width: 100%;
    height: auto;
    gap: 20px;
  }

  /* Hide the desktop CTA block; contacts heading replaces it */
  .form-cta-block { display: none; }

  .form-card {
    width: 100%;
    padding: 15px;
    border-radius: 25px;
    background: rgba(96, 0, 71, 0.2);
    gap: 29px; /* Figma: gap-[29px] between fields block and send button */
    box-sizing: border-box;
    align-self: stretch;
    /* Figma: glass Effect(type: GLASS, radius: 4) */
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }

  /* Form fields stacked single column — Figma gap-[20px] between each field */
  .form-fields { gap: 20px; }
  .form-row { flex-direction: column; gap: 20px; }
  .form-field--half { width: 100%; }
  .form-field--full { width: 100%; }

  .form-label { font-size: 12px; font-weight: 600; }

  /* Комментарии label: faded, regular weight, 14px — matches Figma rgba(255,255,255,0.4) */
  .form-label--faded {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    font-weight: 400;
  }

  .form-input {
    height: 38px;
    font-size: 14px;
    padding: 0 12px;
  }
  textarea.form-input {
    height: 76px;
    padding: 10px 12px;
  }

  /* Phone field — Figma: flex layout, 22px flag, 18px text, 8px selector radius */
  .form-phone-wrap {
    width: 100%;
    height: 38px;
    padding: 2px;
  }
  .form-phone-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    position: static;
  }
  .form-phone-selector {
    position: static; /* reset desktop position: absolute (left:0 top:0) */
    border-radius: 8px;
    gap: 4px;
    flex-shrink: 0;
  }
  .form-phone-flag {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
  }
  .form-phone-code { font-size: 18px; }
  .form-phone-num {
    position: static;
    display: flex;
    flex: 1 0 0;
    height: 100%;
    align-items: center;
    width: auto;
  }
  .form-phone-num span { font-size: 18px; }

  /* Radio groups — Figma: rounded-[22px], transparent bg, glass Effect(type: GLASS, radius: 4), visible border */
  .form-radio-group {
    padding: 18px 16px;
    gap: 14px;
    border-radius: 22px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    overflow: hidden;
  }
  .form-radio-label {
    font-size: 14px;
    font-weight: 300;
    white-space: normal;
    line-height: 1.3;
  }

  /* Send button — Figma: 215px × 40px, centered */
  .btn-send {
    width: 215px;
    height: 40px;
    align-self: center;
  }
  .btn-send span { font-size: 14px; }

  /* ─── CONTACTS BLOCK (Figma 8141:1005) ─── */
  .contacts-block {
    gap: 10px;
    align-items: center;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .contacts-block .section-heading {
    line-height: normal;
    text-align: center;
    width: 100%;
  }

  /* Figma: flex-col gap-[24px], items-center — badges column then QR stacked */
  .contacts-items {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  /* Figma: w-[224px], flex-col, gap-[12px] */
  .contact-badges {
    width: 224px;
    height: auto;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Figma: rounded-[75px]/[98px], bg-[rgba(96,0,71,0.4)], p-[10px], gap-[11px] */
  .contact-email-badge,
  .contact-tg-badge {
    position: static;
    width: 100%;
    padding: 10px;
    gap: 11px;
  }

  /* Figma: size-[43px] */
  .contact-icon {
    width: 43px;
    height: 43px;
  }
  /* Figma: font-semibold, 14px, line-height: 40px */
  .contact-text {
    font-size: 14px;
    line-height: 40px;
    white-space: nowrap;
  }

  /* Figma: size-[138px], rounded-[18px], bg-[#8dffb0] */
  .contact-qr {
    width: 138px;
    height: 138px;
    border-radius: 18px;
    flex-shrink: 0;
  }

  /* ─── FAQ (Figma 8141:1079) ─── */
  /* Heading + single-column list, gap-[10px] between heading and items */
  .faq-section { gap: 10px; }
  .faq-section .section-heading {
    line-height: normal;
    text-align: center;
    width: 100%;
  }

  /* Single continuous column with gap-[13px] between every item.
     Column containers become display:contents so all .faq-item elements
     are direct flex children of .faq-answers-row, enabling order resequencing. */
  .faq-answers-row {
    flex-direction: column;
    gap: 13px;
    align-items: stretch;
  }

  /* Flatten column containers — their children become flex items of .faq-answers-row */
  .faq-col-left,
  .faq-col-right {
    display: contents;
  }

  /* ── Figma mobile order (8141:1079) ──
     Left col items in DOM: L1 L2 L3 L4 L5
     Right col items in DOM: R1 R2 R3 R4 R5
     Desired mobile sequence: L1 R5 L5 R4 L4 R3 L3 R2 L2 R1 */
  .faq-col-left  .faq-item:nth-child(1) { order: 1; }   /* Сколько заработать */
  .faq-col-right .faq-item:nth-child(5) { order: 2; }   /* Депозит Ultrapari */
  .faq-col-left  .faq-item:nth-child(5) { order: 3; }   /* Риск слива */
  .faq-col-right .faq-item:nth-child(4) { order: 4; }   /* RS процент */
  .faq-col-left  .faq-item:nth-child(4) { order: 5; }   /* Рекламирует */
  .faq-col-right .faq-item:nth-child(3) { order: 6; }   /* Кнопка на сайте */
  .faq-col-left  .faq-item:nth-child(3) { order: 7; }   /* Крупная сумма */
  .faq-col-right .faq-item:nth-child(2) { order: 8; }   /* Выводить прибыль */
  .faq-col-left  .faq-item:nth-child(2) { order: 9; }   /* Несколько MobCash */
  .faq-col-right .faq-item:nth-child(1) { order: 10; }  /* Обучение */

  /* Item styling — Figma: rounded-[10px], overflow-clip */
  .faq-item {
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* Figma closed item: pl-[12px] pr-[12px] py-[12px], gap-[10px], items-center */
  .faq-summary {
    padding: 12px;
    gap: 10px;
    align-items: center;
  }

  /* Figma question: 12px bold, flex-1 */
  .faq-question-text {
    font-size: 12px;
    line-height: normal;
    width: auto;
    flex: 1 0 0;
  }

  /* Figma arrow: 12×8px */
  .faq-arrow-wrap {
    width: 12px;
    height: 8px;
  }
  .faq-arrow-wrap img {
    width: 12px;
    height: 8px;
  }

  /* Open state */
  .faq-item.open {
    padding: 12px;
    gap: 10px;
  }
  .faq-item.open .faq-summary { padding: 0; }

  .faq-divider-wrap { width: 100%; }

  .faq-answer-text { font-size: 12px; }

  /* ─── FOOTER ─── */
  footer {
    padding: 40px 20px;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    border-radius: 0;
  }

  .footer-brand {
    align-items: center;
    order: 3;
  }

  .footer-logo-img {
    width: 102px;
    height: 31.852px;
  }

  .footer-copy {
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
  }

  .footer-links {
    gap: 30px;
    align-items: center;
    order: 2;
  }
  .footer-links a {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-stretch: condensed;
    font-variation-settings: 'wdth' 75;
    font-size: 11.2px;
    white-space: nowrap;
  }

  .footer-btn-col {
    align-items: center;
    order: 1;
  }
  .footer-btn-col .btn-cta {
    width: 215px;
    height: 40px;
  }

}

/* ═══════════════════════════════════════════════════
   LANG SELECTOR DROPDOWN
   ═══════════════════════════════════════════════════ */

.lang-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  max-height: 320px;
  overflow-y: auto;
  background: #3a0029;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  z-index: 9999;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
}

.lang-selector.open .lang-dropdown {
  display: block;
}

.lang-option {
  display: block;
  padding: 9px 16px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

.lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.lang-option--current {
  color: #8dffb0;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   FLAG CSS CLASSES (gradient circles)
   ═══════════════════════════════════════════════════ */

.flag-az {
  background: linear-gradient(to bottom,
    #0092BC 33.33%,
    #E8112D 33.33% 66.66%,
    #00B050 66.66%);
}

.flag-ru {
  background: linear-gradient(to bottom,
    #fff 33.33%,
    #0039A6 33.33% 66.66%,
    #D52B1E 66.66%);
}

.flag-tr {
  background: #E30A17;
}

/* ═══════════════════════════════════════════════════
   PHONE SELECTOR DROPDOWN
   ═══════════════════════════════════════════════════ */

.form-phone-input {
  background: none;
  border: none;
  outline: none;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'Open Sans', sans-serif;
  font-size: 20px;
  font-weight: 400;
  width: 100%;
  padding: 0;
  cursor: text;
}

.form-phone-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.form-phone-input:not(:placeholder-shown) {
  color: #fff;
}

.phone-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: rgba(40, 0, 29, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

#phoneDropdown {
  max-height: 280px;
  overflow-y: auto;
}

#searchInput {
  width: 100%; 
  box-sizing: border-box; 
  padding: 10px 12px;
  border: none; 
  border-bottom: 1px solid #eee;
  font-size: 13px; 
  outline: none; 
  background: #fafafa;
}

.form-phone-wrap.open .phone-dropdown {
  display: block;
}

.phone-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.15s;
}

.phone-option:hover {
  background: rgba(255, 255, 255, 0.08);
}

.phone-option-flag {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.phone-option-code {
  color: rgba(255, 255, 255, 0.6);
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 400;
  min-width: 36px;
}

.phone-option-name {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  flex: 1;
}

@media (max-width: 480px) {
  .lang-option {
    font-size: 13px;
    padding: 8px 14px;
  }

  .form-phone-input { font-size: 18px; }

  .phone-option-code,
  .phone-option-name { font-size: 14px; }

  .phone-option-flag {
    width: 22px;
    height: 22px;
  }
}