/* === KVARTIRA.CLICK LUXURY ENGINE === */
/* Based on The Row / Rise Athlon Aesthetic */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  --bg-color: #1a1a1a;
  --bg-darker: #121212;
  --card-bg: rgba(30, 30, 30, 0.65);
  --card-border: rgba(197, 179, 152, 0.2);
  --text-main: #e0e0e0;
  --text-muted: #a0a0a0;
  --accent: #c5b398;
  --accent-light: #d6c6ac;
  --shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
  --nav-height: 80px;
}

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

html {
  scroll-behavior: smooth;
  font-family: 'Montserrat', sans-serif;
  background-color: var(--bg-darker);
  color: var(--text-main);
  overflow-x: hidden;
}

body {
  font-family: 'Montserrat', sans-serif;
  background-color: var(--bg-darker);
  color: var(--text-main);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.3s;
}

a:hover {
  color: var(--accent);
}

/* ── TYPOGRAPHY ── */
h1,
h2,
h3,
h4 {
  font-weight: 400;
  font-family: 'Montserrat', sans-serif;
  color: #fff;
}

.highlight {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 20px;
}

/* ── LUXURY NAV ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5%;
  background: transparent;
  z-index: 100;
  transition: all 0.4s ease;
  border-bottom: 1px solid transparent;
}

nav.scrolled {
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.logo-img {
  height: 40px;
  transition: transform 0.3s;
}

.logo-img:hover {
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  gap: 40px;
  list-style: none;
}

.nav-links a {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #fff;
}

.nav-cta {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #121212;
  background: var(--accent);
  padding: 12px 24px;
  border-radius: 8px;
  transition: all 0.3s;
}

.nav-cta:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(197, 179, 152, 0.3);
}

/* ── BUTTONS ── */
.btn-primary,
.submit-btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent) 0%, #a39075 100%);
  color: #121212 !important;
  padding: 16px 36px;
  border-radius: 12px;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(197, 179, 152, 0.2);
}

.btn-primary:hover,
.submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(197, 179, 152, 0.4);
  filter: brightness(1.1);
  color: #000 !important;
}

.btn-outline {
  display: inline-block;
  background: transparent;
  color: #fff;
  padding: 15px 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  transition: all 0.3s;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
}

/* ── HERO SECTION ── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 5% 60px;
  background-color: #000;
  overflow: hidden;
}

.hero-bg-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.hero-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2s ease-in-out, transform 8s linear;
  filter: grayscale(50%) contrast(1.1);
  transform: scale(1);
}

.hero-slide.active {
  opacity: 0.6;
  transform: scale(1.05);
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(18, 18, 18, 0.4) 0%, rgba(18, 18, 18, 1) 100%);
  z-index: 1;
}

.hero-inner {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  gap: 60px;
}

.hero-content {
  flex: 1.2;
}

.hero-cities {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.hero-cities span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent);
  background: rgba(197, 179, 152, 0.1);
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid rgba(197, 179, 152, 0.3);
}

.hero h1 {
  font-size: 56px;
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #fff;
}

.hero h1 span {
  font-weight: 600;
  color: var(--accent);
}

.hero p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-muted);
  max-width: 500px;
  margin-bottom: 40px;
}

.hero-btns {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 60px;
}

.hero-stats {
  display: flex;
  gap: 50px;
}

.stat-num {
  font-size: 32px;
  font-weight: 300;
  color: #fff;
  margin-bottom: 5px;
}

.stat-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
}

/* Hero Card (Glass) */
.hero-card-wrap {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

.hero-card {
  background: var(--card-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 50px 40px;
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 450px;
}

.hero-card-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #121212;
  background: var(--accent);
  padding: 6px 12px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.hero-card h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 25px;
  line-height: 1.3;
}

.hero-card ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.hero-card li {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-main);
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

.hero-card li::before {
  content: '✦';
  color: var(--accent);
  font-size: 14px;
}

.hero-free {
  font-size: 12px;
  font-weight: 500;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
}

/* ── GENERAL SECTIONS ── */
section {
  padding: 100px 5%;
  position: relative;
}

.section-alt {
  background-color: var(--bg-color);
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 15px;
  text-align: center;
}

.section-title {
  font-size: 36px;
  font-weight: 300;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* ── BENEFITS GRID ── */
.benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.benefit-card {
  background: var(--card-bg);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 40px 30px;
  transition: all 0.4s ease;
}

.benefit-card:hover {
  transform: translateY(-10px);
  border-color: var(--card-border);
  box-shadow: var(--shadow);
}

.benefit-icon {
  font-size: 40px;
  font-weight: 300;
  color: var(--accent);
  margin-bottom: 20px;
  line-height: 1;
}

.benefit-num {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.benefit-card h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #fff;
}

.benefit-card p {
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
}

/* ── SLIDESHOW SECTION ── */
.ss-section {
  overflow: hidden;
  background: #121212;
  padding-top: 100px;
  padding-bottom: 80px;
}

.ss-wrap {
  position: relative;
}

.ss-track {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  touch-action: pan-y;
  cursor: grab;
}

.ss-track:active {
  cursor: grabbing;
}

.ss-slide {
  min-width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.ss-jk,
.ss-rs {
  display: flex;
  gap: 50px;
  background: var(--card-bg);
  border-radius: 24px;
  padding: 50px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  height: 100%;
  box-sizing: border-box;
}

.ss-jk-left {
  flex: 0.7;
}

.ss-rs-left {
  flex: 1;
}

.ss-jk-slider {
  flex: 1.5;
  position: relative;
  min-height: 350px;
  border-radius: 16px;
}

.ss-jk-news .ss-jk-left {
  flex: 1.2;
}

.ss-jk-news .ss-jk-slider {
  flex: 1;
}

.ss-rs-right {
  flex: 1;
}

.ss-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--accent);
  margin-bottom: 20px;
}

.ss-title-text {
  font-size: 32px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #fff;
}

.ss-desc {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 40px;
}

.ss-jk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.ss-jk-card {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 16px;
  padding: 30px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  transition: transform 0.3s, border-color 0.3s;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.ss-jk-card:hover {
  border-color: var(--accent);
}

.slider-progress-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  border-radius: 50%;
  transition: opacity 0.3s ease;
}

.progress-ring {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  pointer-events: none;
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.1s linear, stroke 0.3s ease;
}

.slider-icon {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.fade-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;
  border: none !important;
  overflow: hidden;
  border-radius: 16px;
}

.fade-slide.active {
  opacity: 1;
  pointer-events: auto;
}

.jn {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 5px;
}

.jp {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 10px;
}

.jd {
  font-size: 14px;
  color: var(--text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.ss-rs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.ss-rs-list li {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-main);
  display: flex;
  gap: 10px;
  line-height: 1.5;
}

.ss-rs-list li::before {
  content: '✓';
  color: var(--accent);
  font-weight: bold;
}

.ss-rs-box {
  background: rgba(0, 0, 0, 0.3);
  padding: 30px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 30px;
}

.ss-rs-box-title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 20px;
}

.ss-rs-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.ss-rs-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.ss-rs-row-label {
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

.ss-rs-row-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
}

.ss-rs-row-val {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent);
}

.ss-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 40px;
}

.ss-arrow {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ss-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #121212;
}

.ss-dots {
  display: flex;
  gap: 10px;
}

.ss-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.ss-dot.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* ── ROADMAP ── */
.roadmap-container {
  display: flex;
  gap: 30px;
  margin-bottom: 60px;
  background: var(--card-bg);
  border-radius: 24px;
  padding: 40px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.roadmap-step {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
}

.step-icon {
  width: 50px;
  height: 50px;
  border-radius: 14px;
  background: rgba(197, 179, 152, 0.1);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  border: 1px solid rgba(197, 179, 152, 0.2);
}

.step-icon svg {
  width: 24px;
  height: 24px;
}

.step-content .step-num {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.step-content h4 {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  margin-bottom: 15px;
  line-height: 1.3;
}

.step-content p {
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.6;
}

.step-arrow {
  position: absolute;
  top: 13px;
  right: -25px;
  color: rgba(255, 255, 255, 0.15);
  width: 24px;
  height: 24px;
}

/* ── PARTNERS ── */
.partners-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
}

.partner-chip {
  background: var(--card-bg);
  padding: 12px 24px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  transition: all 0.3s;
}

.partner-chip:hover {
  border-color: var(--accent);
  color: #fff;
  background: rgba(197, 179, 152, 0.1);
}

/* ── COMPARISON TABLE ── */
.vs-wrapper {
  overflow-x: auto;
  background: rgba(30, 30, 30, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-radius: 24px;
  border: 1px solid rgba(197, 179, 152, 0.2);
  border-top: 1px solid rgba(197, 179, 152, 0.4);
  padding: 40px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

/* Toggle скрыт на десктопе, показывается через @media */
.vs-toggle {
  display: none;
}

.vs-table {
  width: 100%;
  border-collapse: collapse;
}

.vs-table th {
  padding: 24px 30px;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vs-table th.them {
  color: var(--text-muted);
}

.vs-table th.us {
  color: var(--accent);
  background: rgba(197, 179, 152, 0.05);
  border-radius: 12px 12px 0 0;
}

.vs-table td {
  padding: 24px 30px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.vs-table td:first-child {
  font-weight: 600;
  font-size: 13px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 2px;
  width: 150px;
}

.vs-table td.them {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
}

.vs-table td.us {
  color: #fff;
  background: rgba(197, 179, 152, 0.08);
  font-weight: 400;
  position: relative;
}

.vs-table tr:last-child td {
  border-bottom: none;
}

.vs-table tr:last-child td.us {
  border-radius: 0 0 12px 12px;
}

/* ── ACCORDION ── */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.acc-item {
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  transition: all 0.3s;
  overflow: hidden;
}

.acc-item.active {
  border-color: var(--accent);
  background: rgba(197, 179, 152, 0.05);
}

.acc-header {
  padding: 25px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.acc-header-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.acc-emoji {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  width: 30px;
}

.acc-title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.acc-arrow {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.3s;
}

.acc-item.active .acc-arrow {
  transform: rotate(180deg);
  color: var(--accent);
}

.acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  padding: 0 30px;
  opacity: 0;
}

.acc-body.open {
  max-height: 800px;
  padding-bottom: 25px;
  opacity: 1;
}

.acc-list {
  list-style: none;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.acc-list li {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
  position: relative;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.acc-body.open .acc-list li {
  opacity: 1;
  transform: translateY(0);
}

.acc-body.open .acc-list li:nth-child(1) {
  transition-delay: 0.10s;
}

.acc-body.open .acc-list li:nth-child(2) {
  transition-delay: 0.15s;
}

.acc-body.open .acc-list li:nth-child(3) {
  transition-delay: 0.20s;
}

.acc-body.open .acc-list li:nth-child(4) {
  transition-delay: 0.25s;
}

.acc-body.open .acc-list li:nth-child(5) {
  transition-delay: 0.30s;
}

.acc-body.open .acc-list li:nth-child(6) {
  transition-delay: 0.35s;
}

.acc-body.open .acc-list li:nth-child(7) {
  transition-delay: 0.40s;
}

.acc-body.open .acc-list li:nth-child(8) {
  transition-delay: 0.45s;
}

.acc-body.open .acc-list li:nth-child(9) {
  transition-delay: 0.50s;
}

.acc-body.open .acc-list li:nth-child(10) {
  transition-delay: 0.55s;
}

.acc-list li::before {
  content: '•';
  position: absolute;
  left: -15px;
  color: var(--accent);
}

/* ── REVIEWS ── */
.reviews-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "stack";
  max-width: 800px;
  margin: 0 auto;
}

.review-card {
  grid-area: stack;
  background: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.5s ease-in-out, visibility 1.5s;
  pointer-events: none;
}

.review-card.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.review-stars {
  color: var(--accent);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.review-text {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: #fff;
  font-style: italic;
  margin-bottom: 30px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 15px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(197, 179, 152, 0.2);
  border: 1px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: var(--accent);
}

.author-name {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.author-city {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── CTA BAND ── */
.cta-band {
  padding: 0;
  background: #1a1a1a;
  margin: 100px 5%;
  border-radius: 30px;
  overflow: hidden;
}

.cta-inner {
  display: flex;
}

.cta-text {
  flex: 1;
  padding: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.cta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 15px;
}

.cta-text h2 {
  font-size: 40px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 20px;
  color: #fff;
}

.cta-text p {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 400px;
}

.cta-photo-wrap {
  flex: 1;
  min-height: 400px;
}

.cta-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.9) grayscale(20%);
}

/* ── FOOTER ── */
footer {
  padding: 80px 5% 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto 60px;
}

.footer-logo-img {
  max-height: 50px;
  margin-bottom: 20px;
  display: inline-block;
}

.footer-desc {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.8;
  max-width: 300px;
}

.footer-col h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
  margin-bottom: 25px;
}

.footer-col a {
  display: block;
  font-size: 13px;
  font-weight: 300;
  color: var(--text-muted);
  margin-bottom: 15px;
  transition: color 0.3s;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 30px;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 15px;
}

.footer-bottom p {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 300;
}

/* Footer social icons row */
.footer-socials {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.footer-socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  transition: all 0.3s;
  text-decoration: none;
}

.footer-socials a:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
}

.footer-socials svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ── ANIMATIONS ── */
.animate-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.animate-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.delay-1 {
  transition-delay: 0.2s;
}

.delay-2 {
  transition-delay: 0.4s;
}

/* ── FORM PAGE OVERRIDES (Glassmorphism & Gold) ── */
.form-page-body {
  background-color: #000;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.form-bg-slider {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
}

.form-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 2s ease-in-out, transform 8s linear;
  filter: grayscale(60%);
  transform: scale(1);
}

.form-slide.active {
  opacity: 0.5;
  transform: scale(1.05);
}

.form-page-body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0.95) 100%);
  z-index: -1;
}

.form-page-body .booking-wrapper {
  width: 100%;
  padding: 40px 5%;
  z-index: 10;
  padding-top: 80px;
}

.form-page-body .form-page-container {
  max-width: 660px;
  margin: 0 auto;
}

.form-page-body .title-container {
  text-align: center;
  margin-bottom: 40px;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  padding: 30px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.form-page-body .main-title {
  font-size: 36px;
  font-weight: 300;
  margin-bottom: 15px;
  color: #fff;
  line-height: 1.2;
}

.form-page-body .title-subtitle {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
}

.form-page-body .form-card {
  background: rgba(30, 30, 30, 0.65);
  border: 1px solid rgba(197, 179, 152, 0.2);
  border-top: 1px solid rgba(197, 179, 152, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: 50px;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6);
}

.form-page-body .back-nav {
  position: fixed;
  top: 20px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: 9999;
  transition: color 0.3s;
}

.form-page-body .back-nav:hover {
  color: var(--accent);
}

.form-page-body .form-group {
  margin-bottom: 30px;
  position: relative;
}

.form-page-body label {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--accent);
  display: block;
  margin-bottom: 12px;
}

.form-page-body input[type="text"],
.form-page-body input[type="tel"],
.form-page-body input[type="email"],
.form-page-body input[type="datetime-local"],
.form-page-body input[type="date"],
.form-page-body input#otp_code {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 300;
  color: #fff;
  padding: 15px 0;
  outline: none;
  transition: all 0.3s;
}

.form-page-body input:focus {
  border-bottom-color: transparent;
}

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

/* Animated Gold Line */
.input-wrapper {
  position: relative;
}

.input-focus-line {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background-color: var(--accent);
  transition: all 0.4s ease;
  transform: translateX(-50%);
}

.form-page-body input:focus+.input-focus-line {
  width: 100%;
}

/* Buttons inside forms */
.form-page-body .submit-btn {
  width: 100%;
  margin-top: 20px;
  padding: 20px;
  font-size: 14px;
}

/* OTP Modal Overrides */
.otp-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.otp-modal-overlay.active {
  display: flex;
  opacity: 1;
}

.otp-modal-glass {
  background: rgba(30, 30, 30, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(197, 179, 152, 0.4);
  padding: 40px;
  max-width: 400px;
  width: 90%;
  margin: 15vh auto;
  text-align: center;
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7);
}

.otp-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
}

.otp-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 30px;
  line-height: 1.5;
}

#otp-email-display {
  color: var(--accent);
  font-weight: 600;
}

.otp-input-group input {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 15px;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 15px;
}

.otp-input-group input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 15px rgba(197, 179, 152, 0.2);
}

.text-btn {
  background: none;
  border: none;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  font-size: 12px;
  margin-top: 15px;
  text-decoration: underline;
  transition: color 0.3s;
}

.text-btn:hover {
  color: #fff;
}

.error-msg {
  font-size: 12px;
  color: #ff6b6b;
  margin-top: 8px;
  display: block;
  font-weight: 500;
}

/* === BURGER MENU === */
.burger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 6px;
  background: none;
  border: none;
  z-index: 200;
}

.burger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.burger-btn.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.burger-btn.open span:nth-child(2) {
  opacity: 0;
}

.burger-btn.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.mobile-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(12, 12, 12, 0.97);
  z-index: 150;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-nav-overlay.open {
  display: flex;
  opacity: 1;
}

.mobile-nav-overlay a {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  transition: color 0.3s;
}

.mobile-nav-overlay a:hover {
  color: var(--accent);
}

.mobile-nav-overlay .nav-cta-mobile {
  margin-top: 20px;
  padding: 16px 40px;
  background: var(--accent);
  color: #111;
  border-radius: 10px;
  font-weight: 700;
  font-size: 12px;
}

/* Close button inside mobile nav */
.mobile-nav-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s, transform 0.3s;
  padding: 0;
  font-family: inherit;
}

.mobile-nav-close:hover {
  color: var(--accent);
  transform: rotate(90deg);
}

/* Responsive adjustments */
@media (max-width: 900px) {

  /* --- NAV --- */
  .nav-links {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .burger-btn {
    display: flex;
  }

  /* --- HERO --- */
  .hero {
    padding: 100px 5% 50px;
    min-height: auto;
  }

  .hero-inner {
    flex-direction: column;
    gap: 40px;
    text-align: center;
  }

  .hero-content {
    align-items: center;
  }

  .hero h1 {
    font-size: 36px;
    text-align: center;
  }

  .hero p {
    font-size: 15px;
    text-align: center;
    max-width: 100%;
  }

  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
  }

  .hero-btns .btn-primary,
  .hero-btns .btn-outline {
    width: 100%;
    text-align: center;
    padding: 18px 20px;
  }

  .hero-stats {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .hero-card-wrap {
    justify-content: center;
    width: 100%;
    margin-top: 0;
  }

  .hero-card {
    width: 100%;
    max-width: 100%;
  }

  /* --- BENEFITS --- */
  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* --- SLIDESHOW --- */
  .content-block,
  .ss-jk,
  .ss-rs {
    flex-direction: column;
    padding: 30px 20px;
  }

  .ss-jk-slider {
    min-height: 250px;
    height: 250px;
  }

  /* --- CTA BAND --- */
  .cta-inner {
    flex-direction: column;
  }

  .cta-text {
    padding: 40px 20px;
  }

  .cta-text h2 {
    font-size: 28px;
  }

  .cta-photo-wrap {
    min-height: 250px;
  }

  /* --- FOOTER --- */
  footer {
    padding: 50px 5% 30px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }

  .footer-grid>div:first-child {
    grid-column: 1 / -1;
  }

  .footer-desc {
    max-width: 100%;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
    align-items: center;
  }

  /* --- ROADMAP (Как мы работаем) --- */
  .roadmap-container {
    flex-direction: column;
    gap: 0;
    padding: 24px 20px;
  }

  .roadmap-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .roadmap-step:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .step-icon {
    flex-shrink: 0;
    margin-bottom: 0;
    width: 44px;
    height: 44px;
  }

  .step-arrow {
    display: none;
  }

  .step-content h4 {
    font-size: 16px;
  }

  /* --- COMPARISON TABLE (Сравнение) — мобильный переключатель --- */
  .vs-wrapper {
    padding: 20px 16px;
    border-radius: 16px;
    overflow-x: visible;
  }

  .vs-toggle {
    display: flex;
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(197, 179, 152, 0.3);
  }

  .vs-toggle-btn {
    flex: 1;
    padding: 13px 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
  }

  .vs-toggle-btn.active {
    background: var(--accent);
    color: #111;
  }

  /* По умолчанию: показываем "нас", скрываем "застройщика" */
  .vs-wrapper .vs-table th.them,
  .vs-wrapper .vs-table td.them {
    display: none;
  }

  /* Когда переключено на "застройщика" */
  .vs-wrapper.show-them .vs-table th.them,
  .vs-wrapper.show-them .vs-table td.them {
    display: table-cell;
  }

  .vs-wrapper.show-them .vs-table th.us,
  .vs-wrapper.show-them .vs-table td.us {
    display: none;
  }

  /* Заголовок скрыт — роль выполняют кнопки-переключатели */
  .vs-wrapper .vs-table thead {
    display: none;
  }

  .vs-table {
    min-width: unset;
    width: 100%;
    transition: opacity 0.15s ease;
  }

  /* Фиксируем высоту строк чтобы не "прыгали" при переключении */
  .vs-wrapper .vs-table tbody tr {
    height: 90px;
  }

  .vs-table th,
  .vs-table td {
    padding: 14px 12px;
    font-size: 13px;
    vertical-align: top;
  }

  .vs-table td:first-child {
    font-size: 11px;
    width: 80px;
    vertical-align: middle;
  }

  /* --- ACCORDION --- */
  .acc-header {
    padding: 18px 20px;
  }

  .acc-title {
    font-size: 15px;
  }

  .acc-body {
    padding: 0 20px;
  }

  .acc-list {
    padding-left: 20px;
  }

  /* --- REVIEWS --- */
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}

/* === MOBILE ONLY (max 600px) === */
@media (max-width: 600px) {

  /* NAV */
  nav {
    padding: 0 4%;
    height: 65px;
  }

  :root {
    --nav-height: 65px;
  }

  .logo-img {
    height: 28px;
  }

  /* HERO */
  .hero {
    padding: 80px 4% 40px;
  }

  .hero h1 {
    font-size: 28px;
    line-height: 1.3;
  }

  .hero-cities {
    font-size: 11px;
  }

  .stat-num {
    font-size: 22px;
  }

  /* FOOTER */
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .footer-logo-img {
    max-height: 38px;
  }

  .footer-col h4 {
    margin-bottom: 15px;
    margin-top: 10px;
  }

  .footer-socials {
    justify-content: center;
  }

  footer {
    padding: 40px 4% 30px;
  }

  /* FORMS */
  .form-page-body .booking-wrapper {
    padding: 20px 4%;
    padding-top: 70px;
  }

  .form-page-body .form-card {
    padding: 30px 20px;
  }

  .form-page-body .main-title {
    font-size: 26px;
  }
}

/* --- FORM CHIPS (Multi-select) --- */
.chip-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 500px) {
  .chip-container-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 499px) {
  .chip-container-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}
.chip-container-grid .chip {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

.chip {
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.chip.active {
  background: rgba(197, 179, 152, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(197, 179, 152, 0.1);
}

/* Fix for intl-tel-input full width */
.iti {
  width: 100%;
  display: block;
}

/* Dark theme for intl-tel-input dropdown */
.input-wrapper .iti .iti__country-list {
  background-color: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.input-wrapper .iti .iti__country {
  color: #fff;
}

.input-wrapper .iti .iti__country:hover,
.input-wrapper .iti .iti__country.iti__highlight {
  background-color: rgba(255, 255, 255, 0.1);
}

.input-wrapper .iti .iti__divider {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.input-wrapper .iti .iti__dial-code {
  color: rgba(255, 255, 255, 0.5);
}

.input-wrapper .iti .iti__selected-dial-code {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
}

/* Contact Method Icons */
.contact-icons {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.contact-icon {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-icon svg {
  width: 22px;
  height: 22px;
  transition: transform 0.3s;
}

.contact-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  transform: translateY(-2px);
}

.contact-icon.active {
  background: rgba(197, 179, 152, 0.15);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 4px 15px rgba(197, 179, 152, 0.15);
}

.contact-icon.active svg {
  transform: scale(1.1);
}

/* Instant Custom Tooltips */
.contact-icon[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent);
  color: #1e1e1e;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.1s ease, transform 0.1s ease;
  z-index: 1000;
}

.contact-icon[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Roadmap Mobile Button */
.roadmap-step .roadmap-mobile-btn {
  display: none;
  margin-top: 15px;
  width: 100%;
  text-align: center;
}

@media (max-width: 900px) {
  .roadmap-step .roadmap-mobile-btn {
    display: inline-block;
  }
}

/* Nav Actions Container */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* Language Switcher */
.lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
  height: 36px;
  background: rgba(197, 179, 152, 0.05);
  border: 1px solid rgba(197, 179, 152, 0.3);
  color: #fff;
  border-radius: 20px;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.lang-btn:hover {
  background: rgba(197, 179, 152, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

.lang-btn svg {
  width: 16px;
  height: 16px;
}

.mobile-lang-btn {
  margin: 20px 0 10px 0;
  width: 120px;
  height: 44px;
  font-size: 15px;
}

@media (max-width: 900px) {
  .desk-lang-btn {
    display: none;
  }
}

/* Mobile Hero Card Adjustments */
.mobile-hero-btn {
  display: none;
  margin-top: 20px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .hero-card .hide-mobile {
    display: none;
  }

  .hero-card .mobile-hero-btn {
    display: inline-block;
  }
}

.footer-legal-wrap {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

@media (max-width: 900px) {
  .footer-legal-wrap {
    text-align: left;
    align-items: flex-start;
  }
}

/* =========================================
   QUIZ PAGE STYLES (EXACT MATCH FROM TEST)
   ========================================= */

:root{
  --gold:#d6bfa0; --gold-bright:#e8d5b5; --gold-deep:#b89b73;
  --ink:#f4efe8; --muted:#9b958c; --muted2:#6b665f;
  --line:rgba(214,191,160,.18); --line-strong:rgba(214,191,160,.5);
}
html.quiz-html, body.quiz-body {height:100%}
body.quiz-body {
  background-color: #000;
  color:var(--ink);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;
  min-height:100vh;display:flex;flex-direction:column;
  overflow:hidden;
  position: relative;
  z-index: 1;
}
body.quiz-body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(18, 18, 18, 0.7) 0%, rgba(18, 18, 18, 0.95) 100%);
  z-index: -1;
}
.shell{flex:1;display:flex;flex-direction:column;max-width:760px;margin:0 auto;width:100%;padding:28px 20px 32px;overflow-y:auto;overflow-x:hidden;}
html body div.grecaptcha-badge { z-index: -999; opacity: 0; pointer-events: none; }

/* header */
.brand{font-family:'Oswald',sans-serif;font-weight:700;font-size:24px;letter-spacing:.3px;text-align:center;margin-bottom:6px;color:var(--ink)}
.brand .dot{color:#e23b2e}
.tagline{font-family:'Oswald',sans-serif;font-weight:400;font-size:20px;letter-spacing:2px;text-transform:uppercase;text-align:center;color:var(--gold);margin-bottom:30px}

.stage{flex:1;display:flex;flex-direction:column;justify-content:center;animation:fade .45s ease}
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.head{text-align:center;margin-bottom:30px}
.pillno{display:inline-flex;gap:9px;align-items:center;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);border:1px solid var(--line-strong);padding:8px 20px;border-radius:999px;margin-bottom:22px}
.pillno .d{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.stepcount{display:flex;align-items:center;justify-content:center;gap:9px;font-family:'Oswald',sans-serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.stepcount::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
h1{font-family:'Oswald',sans-serif;font-weight:600;font-size:clamp(28px,7vw,44px);letter-spacing:.5px;line-height:1.08}
.sub{color:var(--muted);margin-top:10px;font-size:15px}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.cards.two{grid-template-columns:repeat(2,1fr);max-width:520px;margin:0 auto;width:100%}
.cards.three{grid-template-columns:repeat(3,1fr)}
.c{background:rgba(24,22,20,.55);border:1px solid var(--line);border-radius:18px;padding:26px 16px;text-align:center;cursor:pointer;backdrop-filter:blur(14px);transition:transform .22s,border-color .22s,background .22s;position:relative;overflow:hidden;min-height:190px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.c:hover{transform:translateY(-4px);border-color:var(--line-strong)}
.c:active{transform:scale(.98)}
.c.on{border-color:var(--gold);background:rgba(214,191,160,.12)}
.c .check{position:absolute;top:0;right:0;width:0;height:0;border-style:solid;border-width:0 38px 38px 0;border-color:transparent var(--gold) transparent transparent;opacity:0;transition:.22s}
.c.on .check{opacity:1}
.c .check::after{content:"✓";position:absolute;top:2px;right:-34px;color:#1a1510;font-size:13px;font-weight:800}
.c .ic{width:40px;height:40px;color:var(--gold);transition:.22s}
.c.on .ic{color:var(--gold-bright)}
.c .t{font-family:'Oswald',sans-serif;font-weight:500;font-size:17px;letter-spacing:.3px}

/* contact step */
.form{max-width:640px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:14px}
.form input{background:rgba(24,22,20,.6);border:1px solid var(--line);border-radius:14px;padding:17px 20px;color:var(--ink);font-family:'Manrope',sans-serif;font-size:16px;transition:.2s}
.form input::placeholder{color:var(--muted2)}
.form input:focus{outline:none;border-color:var(--gold)}
.form input.error{border-color:#ff6b6b}
.err-msg{color:#ff6b6b;font-size:12px;margin-top:-8px;margin-bottom:4px;padding-left:10px;min-height:16px}
.err-msg:empty{display:none}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:12px;color:var(--muted);cursor:pointer;margin-top:2px}
.consent .box{width:18px;height:18px;border:1px solid var(--line-strong);border-radius:5px;flex-shrink:0;margin-top:1px;position:relative;transition:.2s}
.consent.on .box{background:var(--gold);border-color:var(--gold)}
.consent.on .box::after{content:"✓";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#1a1510;font-size:11px;font-weight:800}
.summary{background:rgba(24,22,20,.5);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin-bottom:6px}
.summary .r{display:flex;justify-content:space-between;gap:14px;padding:5px 0;font-size:13px}
.summary .r span:first-child{color:var(--muted2)}
.summary .r span:last-child{color:var(--gold);text-align:right;font-weight:500}

/* contact method toggle */
.fieldlabel{font-size:13px;color:var(--muted);margin-bottom:-6px;padding-left:4px}
.toggle{display:flex;background:rgba(24,22,20,.6);border:1px solid var(--line);border-radius:14px;padding:5px;gap:5px}
.toggle .t{flex:1;text-align:center;padding:13px;border-radius:10px;cursor:pointer;font-weight:600;font-size:15px;color:var(--muted);transition:.22s}
.toggle .t:hover{color:var(--ink)}
.toggle .t.on{background:var(--gold);color:#1a1510}
/* phone with flag */
.phone{background:rgba(24,22,20,.6);border:1px solid var(--line);border-radius:14px;transition:.2s;position:relative;}
.phone:focus-within{border-color:var(--gold)}
.phone.error{border-color:#ff6b6b}
.phone .flag{font-size:20px;line-height:1;margin-right:8px}
.phone .code{color:var(--ink);font-weight:600;margin-right:8px;font-size:16px}
.phone input{flex:1;background:none;border:none;padding:17px 0;color:var(--ink);font-family:'Manrope',sans-serif;font-size:16px}
.phone input:focus{outline:none}
.phone input::placeholder{color:var(--muted2)}
/* intlTelInput overrides */
.phone .iti{width:100%;display:block;}
.phone .iti input{padding-right:20px;width:100%;box-sizing:border-box;}
.phone .iti__selected-flag{padding-left:20px;border-radius:14px 0 0 14px;outline:none;}
.phone .iti__selected-dial-code{color:var(--ink);font-weight:600;font-size:16px;margin-left:6px;}
.phone .iti__country-list{background:rgba(24,22,20,0.95);border:1px solid var(--line);border-radius:14px;color:var(--ink);font-family:'Manrope',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,0.4);backdrop-filter:blur(10px);}
.phone .iti__country.iti__highlight{background:rgba(214,191,160,.12);}
.phone .iti__country-name{color:var(--ink);}
.phone .iti__dial-code{color:var(--muted);}
.phone.tg{display:flex;align-items:center;padding:0 20px;}
.phone.tg input{padding-left:0;width:auto;}
/* contact way icons */
.ways{display:flex;gap:12px;flex-wrap:wrap}
.way{width:52px;height:52px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);transition:.22s}
.way:hover{border-color:var(--line-strong);color:var(--ink)}
.way.on{border-color:var(--gold);color:var(--gold);box-shadow:0 0 12px rgba(214,191,160,.25)}
.way svg{width:22px;height:22px}
.hint{font-size:12px;color:var(--muted);line-height:1.5}
.hint a,.consent a{color:var(--gold);text-decoration:underline;text-underline-offset:2px}

/* done */
.done{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.done .circle{width:84px;height:84px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;animation:pop .5s ease}
@keyframes pop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.done .circle svg{width:38px;height:38px;color:var(--gold)}
.done h1{margin-bottom:4px}

/* Luxury Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(214, 191, 160, 0.3);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(214, 191, 160, 0.6);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 191, 160, 0.3) rgba(0, 0, 0, 0.1);
}/* footer */
.foot{padding-top:26px;margin-top:auto}
.prog{display:flex;gap:6px;justify-content:center;margin-bottom:22px}
.prog .s{width:38px;height:4px;border-radius:99px;background:rgba(255,255,255,.1);transition:.4s}
.prog .s.act{background:var(--gold)}
.nav{display:flex;gap:12px;justify-content:center}
.back{background:transparent;border:1px solid var(--line);color:var(--muted);padding:16px 28px;border-radius:14px;cursor:pointer;font-family:'Oswald',sans-serif;letter-spacing:1px;text-transform:uppercase;font-size:13px;transition:.22s}
.back:hover{color:var(--ink);border-color:var(--gold)}
.next{flex:1;max-width:340px;background:var(--gold);border:none;color:#1a1510;padding:16px 40px;border-radius:14px;cursor:pointer;font-family:'Oswald',sans-serif;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-size:13px;transition:.22s}
.next:hover{background:var(--gold-bright);transform:translateY(-2px)}
.next:disabled{opacity:.4;cursor:not-allowed;transform:none}

@media(max-width:520px){
  body.quiz-body{overflow-x:hidden}
  .shell{padding:16px 16px calc(14px + env(safe-area-inset-bottom))}
  .shell.contact-mode .head{margin-bottom:26px}
  .brand{font-size:20px;margin-bottom:3px}
  .tagline{font-size:15px;letter-spacing:1.5px;margin-bottom:0}
  .stage{padding-top:0;justify-content:flex-start}
  .stage .head{margin-top:auto;margin-bottom:0}
  .stage .cards{margin-top:auto;margin-bottom:auto}
  .head{margin-bottom:16px}
  .pillno{margin-bottom:12px;padding:6px 14px;font-size:11px}
  h1{font-size:clamp(24px,7vw,30px)}
  .sub{font-size:13px;margin-top:5px}
  .cards{gap:10px}
  .cards.three{grid-template-columns:repeat(2,1fr)}
  .c{min-height:130px;padding:14px 10px;gap:8px;border-radius:14px}
  .c .ic{width:26px;height:26px}
  .c .t{font-size:14px}
  .c .check{border-width:0 30px 30px 0}
  .c .check::after{top:1px;right:-27px;font-size:11px}
  .foot{padding-top:14px}
  .prog{margin-bottom:14px}
  .prog .s{width:30px}
  .nav{flex-wrap:wrap}
  .back{flex:1}
  .next{max-width:none}
}
/* desktop: всё в один экран без прокрутки */
@media(min-width:761px) and (min-height:600px){
  body.quiz-body{height:100vh;height:100dvh;overflow:hidden}
  .shell{height:100vh;height:100dvh;max-width:900px;padding:18px 20px 20px;overflow:hidden;justify-content:space-between}
  .brand{font-size:22px;margin-bottom:4px}
  .tagline{font-size:17px;margin-bottom:20px}
  .stage{flex:1;justify-content:center;padding-top:0;min-height:0;overflow:hidden}
  .foot{margin-top:16px;padding-top:12px}
  .head{margin-bottom:20px}
  .pillno{margin-bottom:14px;padding:7px 18px}
  h1{font-size:clamp(28px,3.6vw,40px)}
  .sub{font-size:15px;margin-top:8px}
  .cards{gap:14px}
  .cards.two,.cards.three{grid-template-columns:repeat(3,1fr);max-width:820px}
  .c{min-height:140px;padding:24px 16px;gap:14px;border-radius:16px}
  .c .ic{width:38px;height:38px}
  .c .t{font-size:17px}
  .prog{margin-bottom:14px}
  .nav .back,.nav .next{padding:14px 30px}

  /* контактный шаг: контент сверху + плотная форма + скролл при нехватке */
  .shell.contact-mode{justify-content:flex-start;overflow-y:auto}
  .shell.contact-mode .stage{flex:0 0 auto;overflow:visible}
  .shell.contact-mode .head{margin-bottom:26px}
  .shell.contact-mode h1{font-size:clamp(24px,3vw,32px)}
  .shell.contact-mode .sub{font-size:14px;margin-top:4px}
  .shell.contact-mode .pillno{margin-bottom:10px}
  .shell.contact-mode .form{gap:9px;max-width:480px}
  .shell.contact-mode .summary{padding:10px 16px}
  .shell.contact-mode .summary .r{padding:2px 0;font-size:12px}
  .shell.contact-mode .form input,.shell.contact-mode .phone input{padding:12px 18px;font-size:15px}
  .shell.contact-mode .phone{padding:0 18px}
  .shell.contact-mode .toggle .t{padding:10px;font-size:14px}
  .shell.contact-mode .ways{gap:10px}
  .shell.contact-mode .way{width:44px;height:44px}
  .shell.contact-mode .fieldlabel{font-size:12px;margin-bottom:-4px}
  .shell.contact-mode .hint{font-size:11px}
  .shell.contact-mode .consent{font-size:12px}
  .shell.contact-mode .foot{margin-top:14px}

  /* первый шаг с перками: ужать, чтобы влезло */
  .shell.perks-mode .tagline{margin-bottom:14px}
  .shell.perks-mode .head{margin-bottom:16px}
  .shell.perks-mode .stage .head{margin-top:18px}
  .perks{margin-bottom:0}
}

.perks{display:none;max-width:720px;margin:0 auto 4px;
  grid-template-columns:1fr 1fr;gap:8px 22px}
.perks.show{display:grid}
.perk{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink);line-height:1.35}
.perk .pk{flex-shrink:0;width:16px;height:16px;margin-top:2px;border-radius:50%;border:1px solid var(--gold);position:relative}
.perk .pk::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media(max-width:520px){
  .perks{grid-template-columns:1fr 1fr;gap:6px 10px;max-width:100%}
  .perk{font-size:10.5px;line-height:1.25}
  .perk .pk{width:13px;height:13px;margin-top:1px}
  .perks-mode .brand{font-size:18px}
  .perks-mode .tagline{font-size:13px;margin-bottom:10px}
  .perks-mode .perks{margin-bottom:0}
  .perks-mode .stage{padding-top:0}
  .perks-mode .stage .head{margin-top:10px;margin-bottom:0}
  .perks-mode .stage .cards{margin-top:auto;margin-bottom:auto}
  .perks-mode h1{font-size:clamp(20px,6vw,25px)}
  .perks-mode .sub{font-size:12px;margin-top:3px}
  .perks-mode .cards{gap:11px}
  .perks-mode .c{min-height:104px;padding:16px 10px;gap:8px;border-radius:14px}
  .perks-mode .c .ic{width:28px;height:28px}
  .perks-mode .c .t{font-size:14px}
  .perks-mode .foot{padding-top:10px}
  .perks-mode .prog{margin-bottom:10px}
  .perks-mode .stepcount{margin-bottom:8px}
  .perks-mode .sitefoot{margin-top:10px}
  .sitefoot .faddr{font-size:9.5px}
}
.sitefoot{margin-top:14px;text-align:center;line-height:1.5}
.cprow{font-size:10.5px;letter-spacing:.5px;color:var(--muted2);font-family:'Oswald',sans-serif;text-transform:uppercase}
.flinks{font-size:10.5px;margin-top:3px}
.flinks a{color:var(--muted);text-decoration:none;transition:.2s}
.flinks a:hover{color:var(--gold)}
.flinks .sep{color:var(--muted2);margin:0 4px}
.faddr{font-size:10px;color:var(--muted2);margin-top:3px}
.shine{font-weight:600;text-decoration:none;cursor:pointer;
  background:linear-gradient(90deg,var(--gold-deep) 0%,var(--gold-deep) 40%,#fff6e0 50%,var(--gold-deep) 60%,var(--gold-deep) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:shineRun 3.5s linear infinite}
@keyframes shineRun{0%{background-position:120% 0}100%{background-position:-120% 0}}