/* ===== VARIABLES ===== */
:root{
  --bg: #fbfaf7;
  --bg-alt: #f3f1ea;
  --ink: #12201c;
  --ink-soft: #4a5751;
  --accent: #1aa37a;
  --accent-dark: #0d7a5a;
  --accent-light: #d7f2e8;
  --dark: #0b1512;
  --dark-soft: #16241f;
  --border: rgba(18,32,28,0.08);
  --shadow-sm: 0 4px 16px rgba(13,30,24,0.06);
  --shadow-md: 0 12px 40px rgba(13,30,24,0.10);
  --shadow-lg: 0 24px 60px rgba(13,30,24,0.16);
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --ff-head: "Playfair Display", serif;
  --ff-body: "Manrope", sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--ff-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  overflow-x: hidden;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
.container{
  width:100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  border:none;
  transition: all .3s ease;
  white-space:nowrap;
}
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color:#fff;
  box-shadow: 0 10px 30px rgba(26,163,122,0.35);
}
.btn-primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(26,163,122,0.45);
}
.btn-ghost{
  background: rgba(255,255,255,0.12);
  color:#fff;
  border:1px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover{
  background: rgba(255,255,255,0.22);
  transform: translateY(-3px);
}
.btn-ghost-light{
  background: rgba(255,255,255,0.15);
  color:#fff;
  border:1px solid rgba(255,255,255,0.5);
  backdrop-filter: blur(8px);
}
.btn-ghost-light:hover{ background: rgba(255,255,255,0.28); transform: translateY(-3px);}
.btn-lg{ padding:16px 34px; font-size:16px;}
.btn-nav{ padding:11px 22px; font-size:14px;}
.w-full{width:100%;}

/* ===== HEADER ===== */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 1000;
  padding: 20px 0;
  transition: all .35s ease;
  background: transparent;
}
.site-header.scrolled{
  padding: 12px 0;
  background: rgba(251,250,247,0.85);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 24px rgba(13,30,24,0.08);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo-block{ display:flex; flex-direction:column; line-height:1.1;}
.logo-text{
  font-family: var(--ff-head);
  font-size: 26px;
  font-weight:700;
  color: var(--ink);
  letter-spacing: 0.5px;
}
.site-header.scrolled .logo-text{ color: var(--ink);}
.hero .logo-text{ color:#fff;}
.site-header:not(.scrolled) .logo-text{ color:#fff; text-shadow: 0 2px 10px rgba(0,0,0,0.2);}
.site-header:not(.scrolled) .logo-caption{ color: rgba(255,255,255,0.85);}
.logo-caption{
  font-size:11px;
  color: var(--ink-soft);
  margin-top:2px;
  letter-spacing:0.3px;
}
.main-nav{
  display:flex;
  align-items:center;
  gap: 32px;
}
.nav-link{
  font-size:14.5px;
  font-weight:600;
  color: var(--ink);
  position:relative;
  transition: color .25s;
}
.site-header:not(.scrolled) .nav-link{ color:#fff; text-shadow: 0 1px 6px rgba(0,0,0,0.25);}
.nav-link:after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:0; height:2px;
  background: var(--accent);
  transition: width .25s;
}
.nav-link:hover:after{ width:100%;}
.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  background: rgba(255,255,255,0.15);
  border:none;
  border-radius:10px;
  cursor:pointer;
  z-index:1100;
}
.burger span{
  display:block;
  height:2px;
  width:20px;
  margin:0 auto;
  background:#fff;
  transition: all .3s ease;
}
.site-header.scrolled .burger span{ background: var(--ink);}
.burger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg);}
.burger.active span:nth-child(2){ opacity:0;}
.burger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg);}

.mobile-menu{
  position: fixed;
  top:0; right:-100%;
  width: 80%;
  max-width: 340px;
  height: 100vh;
  background: #fff;
  z-index: 1050;
  padding: 100px 32px 40px;
  display:flex;
  flex-direction:column;
  gap: 24px;
  box-shadow: -10px 0 40px rgba(0,0,0,0.15);
  transition: right .4s ease;
}
.mobile-menu.open{ right:0;}
.mobile-link{ font-size:18px; font-weight:600; color: var(--ink);}

/* ===== HERO ===== */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding-top: 100px;
}
.hero-bg{ position:absolute; inset:0; z-index:0;}
.hero-bg img{ width:100%; height:100%; object-fit:cover;}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(8,20,16,0.55) 0%, rgba(8,20,16,0.55) 30%, rgba(8,20,16,0.75) 100%);
}
.hero-content{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items:center;
  padding: 60px 24px;
}
.info-panel {
    display: inline-flex;
    align-items: center;
    gap: 2px;

    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(8px);

    padding: 10px 16px;
    border-radius: 10px;

    font-size: 14px;
    font-weight: 500;

    margin-bottom: 25px;

    box-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}


.hero-title{
  font-family: var(--ff-head);
  font-size: clamp(38px, 5.5vw, 68px);
  color:#fff;
  font-weight:700;
  line-height:1.08;
  margin-bottom: 22px;
}
.accent-text{ color: #5fe3b8; font-style:italic;}
.hero-subtitle{
  color: rgba(255,255,255,0.88);
  font-size: 17px;
  max-width: 520px;
  margin-bottom: 28px;
}
.cities-strip{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,0.8);
  font-size:14px;
  font-weight:600;
  margin-bottom: 36px;
}
.cities-strip .dot{
  width:4px; height:4px;
  border-radius:50%;
  background: rgba(255,255,255,0.6);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap: 16px;}
.hero-actions.center{ justify-content:center;}

.hero-visual{
  position:relative;
  height: 420px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.floating-card{
  position:absolute;
  display:flex;
  align-items:center;
  gap:14px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(16px);
  border-radius: 20px;
  padding: 16px 20px;
  color:#fff;
  box-shadow: 0 20px 50px rgba(0,0,0,0.25);
  animation: float 5s ease-in-out infinite;
  max-width: 260px;
}
.floating-card i{ font-size:22px; color:#5fe3b8;}
.floating-card strong{ display:block; font-size:14px;}
.floating-card span{ font-size:12px; color: rgba(255,255,255,0.75);}
.card-1{ top: 10%; left: 0; animation-delay:0s;}
.card-2{ top: 42%; right: 0; animation-delay: 1.2s;}
.card-3{ bottom: 6%; left: 10%; animation-delay: 2.4s;}
@keyframes float{
  0%,100%{ transform: translateY(0);}
  50%{ transform: translateY(-14px);}
}
.scroll-indicator{
  position:absolute;
  bottom: 28px;
  left:50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.7);
  font-size:18px;
  animation: bounce 2s infinite;
  z-index:1;
}
@keyframes bounce{
  0%,100%{ transform: translate(-50%,0);}
  50%{ transform: translate(-50%,8px);}
}

/* ===== SECTION GENERIC ===== */
.section{ padding: 110px 0;}
.section-tag{
  display:inline-block;
  color: var(--accent-dark);
  background: var(--accent-light);
  font-size:13px;
  font-weight:700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.plus-tag{ background: rgba(255,255,255,0.12); color:#5fe3b8; border: 1px solid rgba(95,227,184,0.4);}
.section-title{
  font-family: var(--ff-head);
  font-size: clamp(30px, 4vw, 48px);
  font-weight:700;
  line-height:1.15;
  color: var(--ink);
  margin-bottom: 20px;
}
.section-title.light{ color:#fff;}
.section-head{ max-width: 720px; margin: 0 auto 60px; text-align:center;}
.section-head .section-tag{ display:block; width:max-content; margin:0 auto 18px;}
.lead-text{ font-size: 18px; color: var(--ink-soft); font-weight:500; margin-bottom:16px;}
.lead-text.center{ text-align:center; margin-left:auto; margin-right:auto;}
.lead-text.light{ color: rgba(255,255,255,0.8);}
.body-text{ font-size:15.5px; color: var(--ink-soft); margin-bottom:14px; max-width:540px;}
.body-text.light{ color: rgba(255,255,255,0.7);}

/* ===== ABOUT ===== */
.about-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items:center;
}
.about-stats{
  display:flex;
  gap: 34px;
  margin-top: 34px;
  flex-wrap:wrap;
}
.stat-item strong{
  display:block;
  font-family: var(--ff-head);
  font-size: 28px;
  color: var(--accent-dark);
}
.stat-item span{ font-size:13px; color: var(--ink-soft);}
.about-visual{ position:relative;}
.map-card{
  position:relative;
  border-radius: var(--radius-lg);
  overflow:hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}
.map-card img{ width:100%; height:100%; object-fit:cover;}
.map-pin{
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  font-size:12.5px;
  font-weight:700;
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.map-pin span{
  width:9px; height:9px;
  border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(26,163,122,0.25);
}
.pin-1{ top: 18%; left: 10%;}
.pin-2{ top: 38%; right: 12%;}
.pin-3{ bottom: 32%; left: 18%;}
.pin-4{ bottom: 14%; right: 18%;}
.pin-5{ top: 60%; left: 42%;}

/* ===== CITIES ===== */
.cities-section{ background: var(--bg-alt);}
.cities-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 280px;
  gap: 22px;
}
.city-card{
  position:relative;
  border-radius: var(--radius-md);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .4s ease, box-shadow .4s ease;
}
.city-card.big{ grid-column: span 2; grid-row: span 2;}
.city-card img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .6s ease;
}
.city-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg);}
.city-card:hover img{ transform: scale(1.08);}
.city-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,15,12,0.85) 100%);
}
.city-info{
  position:absolute; left:0; right:0; bottom:0;
  padding: 24px;
  color:#fff;
}
.city-card.big .city-info h3{ font-size: 30px;}
.city-info h3{
  font-family: var(--ff-head);
  font-size: 22px;
  margin-bottom: 6px;
}
.city-info p{ font-size:13.5px; color: rgba(255,255,255,0.85); max-width:320px;}

/* ===== PROCESS ===== */
.process-section{
  background: var(--dark);
  color:#fff;
}
.process-flow{
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.process-step{
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  flex: 1 1 260px;
  max-width: 320px;
  transition: all .3s ease;
}
.process-step:hover{
  background: rgba(255,255,255,0.08);
  transform: translateY(-6px);
  border-color: rgba(95,227,184,0.4);
}
.process-num{
  font-family: var(--ff-head);
  font-size: 40px;
  color: #5fe3b8;
  display:block;
  margin-bottom: 12px;
}
.process-step h3{ font-size: 21px; margin-bottom: 10px;}
.process-step p{ font-size: 14.5px; color: rgba(255,255,255,0.65);}
.process-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.3);
  font-size: 22px;
}
.process-note{
  text-align:center;
  max-width: 640px;
  margin: 0 auto 36px;
  color: rgba(255,255,255,0.75);
  font-size: 16px;
  font-style: italic;
  font-family: var(--ff-head);
}
.process-cta{ text-align:center;}

/* ===== PLUS ===== */
.plus-section{ background: var(--bg);}
.plus-subtitle{
  font-size: 19px;
  font-weight:700;
  color: var(--accent-dark);
  margin-bottom: 18px;
}
.plus-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.plus-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  box-shadow: var(--shadow-sm);
  transition: all .35s ease;
}
.plus-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(26,163,122,0.3);
}
.plus-icon{
  width: 52px; height:52px;
  border-radius: 14px;
  background: var(--accent-light);
  color: var(--accent-dark);
  display:flex; align-items:center; justify-content:center;
  font-size: 20px;
  margin-bottom: 18px;
}
.plus-card h3{ font-size: 18px; margin-bottom: 10px; font-weight:700;}
.plus-card p{ font-size: 14px; color: var(--ink-soft);}

/* ===== PRICING ===== */
.pricing-section{ background: var(--bg-alt);}
.pricing-card{
  background: linear-gradient(135deg, var(--dark), var(--dark-soft));
  border-radius: var(--radius-lg);
  padding: 60px;
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 50px;
  align-items:center;
  color:#fff;
  box-shadow: var(--shadow-lg);
  position:relative;
  overflow:hidden;
}
.pricing-card:before{
  content:"";
  position:absolute;
  top:-100px; right:-100px;
  width:300px; height:300px;
  background: radial-gradient(circle, rgba(95,227,184,0.25), transparent 70%);
}
.pricing-left .section-title{ color:#fff;}
.pricing-left .body-text{ color: rgba(255,255,255,0.7); max-width:460px;}
.price-flow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: 36px 20px;
}
.price-step{ display:flex; flex-direction:column; align-items:center;}
.price-big{
  font-family: var(--ff-head);
  font-size: 34px;
  font-weight:700;
  color:#5fe3b8;
}
.price-label{
  font-size:13px;
  letter-spacing:1px;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  margin-top:4px;
}
.price-divider{ color: rgba(255,255,255,0.4); font-size:18px;}

/* ===== TELEGRAM ===== */
.telegram-section{ background: var(--dark); color:#fff;}
.telegram-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items:center;
}
.telegram-handle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 20px;
  font-weight:700;
  color:#5fe3b8;
  margin-bottom: 28px;
}
.phone-mock{
  background: #0f1d18;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 28px;
  overflow:hidden;
  max-width: 380px;
  margin: 0 auto;
  box-shadow: var(--shadow-lg);
}
.phone-header{
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  padding: 18px 22px;
  font-weight:700;
  display:flex; align-items:center; gap:10px;
  font-size:16px;
}
.phone-body{ padding: 22px; display:flex; flex-direction:column; gap:14px;}
.tg-msg{
  display:flex;
  gap:10px;
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px 16px;
  animation: fadeInMsg .6s ease forwards;
  opacity:0;
}
.tg-msg:nth-child(1){ animation-delay:.2s;}
.tg-msg:nth-child(2){ animation-delay:.6s;}
.tg-msg:nth-child(3){ animation-delay:1s;}
@keyframes fadeInMsg{
  from{ opacity:0; transform: translateY(10px);}
  to{ opacity:1; transform: translateY(0);}
}
.tg-dot{
  width:8px; height:8px;
  border-radius:50%;
  background:#5fe3b8;
  margin-top:6px;
  flex-shrink:0;
}
.tg-msg p{ font-size: 13.5px; color: rgba(255,255,255,0.85);}

/* ===== FINAL CTA ===== */
.final-cta{ position:relative; padding: 140px 0; overflow:hidden;}
.final-bg{ position:absolute; inset:0; z-index:0;}
.final-bg img{ width:100%; height:100%; object-fit:cover;}
.final-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(5,15,12,0.75), rgba(5,15,12,0.85));}
.final-content{ position:relative; z-index:1; text-align:center; max-width:700px;}
.final-content .section-title{ margin-bottom:18px;}

/* ===== FOOTER ===== */
.site-footer{ background: var(--dark); color: rgba(255,255,255,0.75); padding: 70px 0 30px;}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-col{ display:flex; flex-direction:column; gap:10px;}
.footer-col h4{ color:#fff; font-size:15px; margin-bottom: 8px;}
.footer-col a{ font-size: 14px; color: rgba(255,255,255,0.65); transition: color .2s;}
.footer-col a:hover{ color:#5fe3b8;}
.footer-col .logo-text{ color:#fff;}
.footer-col .logo-caption{ color: rgba(255,255,255,0.5);}
.footer-bottom{
  padding-top: 28px;
  display:flex;
  flex-direction:column;
  gap: 14px;
}
.footer-bottom p{ font-size:13px; color: rgba(255,255,255,0.5);}
.legal-note{ max-width: 760px; line-height:1.6; font-size:12px !important;}

/* ===== MODAL ===== */
.modal-overlay{
  position: fixed;
  inset:0;
  background: rgba(5,12,10,0.65);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 2000;
  opacity:0;
  visibility:hidden;
  transition: all .3s ease;
  padding: 20px;
}
.modal-overlay.open{ opacity:1; visibility:visible;}
.modal-box{
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 44px;
  max-width: 520px;
  width:100%;
  max-height: 90vh;
  overflow-y:auto;
  position:relative;
  box-shadow: var(--shadow-lg);
  transform: translateY(30px) scale(0.96);
  transition: transform .35s ease;
}
.modal-overlay.open .modal-box{ transform: translateY(0) scale(1);}
.modal-close{
  position:absolute;
  top: 20px; right: 20px;
  width: 38px; height:38px;
  border-radius:50%;
  border:none;
  background: var(--bg-alt);
  color: var(--ink);
  font-size:16px;
  cursor:pointer;
  transition: all .2s;
}
.modal-close:hover{ background: var(--accent-light); color: var(--accent-dark); transform: rotate(90deg);}
.modal-title{
  font-family: var(--ff-head);
  font-size: 26px;
  margin: 14px 0 24px;
}
.modal-steps{ display:flex; flex-direction:column; gap: 20px; margin-bottom: 28px;}
.modal-step{ display:flex; gap: 16px; align-items:flex-start;}
.modal-num{
  width: 34px; height: 34px;
  flex-shrink:0;
  border-radius: 50%;
  background: var(--accent-light);
  color: var(--accent-dark);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
  font-size:14px;
}
.modal-step h4{ font-size:15.5px; margin-bottom:4px;}
.modal-step p{ font-size: 13.5px; color: var(--ink-soft);}
.modal-demo-note{
  text-align:center;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 16px;
  background: var(--bg-alt);
  padding: 12px;
  border-radius: 10px;
  opacity:0;
  max-height:0;
  overflow:hidden;
  transition: all .4s ease;
}
.modal-demo-note.show{ opacity:1; max-height:100px; margin-top:16px;}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    backdrop-filter: blur(10px);
    margin-bottom: 25px;
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-up{
  opacity:0;
  transform: translateY(32px);
  transition: all .8s cubic-bezier(.2,.8,.2,1);
}
.fade-up.in-view{ opacity:1; transform: translateY(0);}
.delay-1{ transition-delay: .15s;}
.delay-2{ transition-delay: .3s;}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px){
  .hero-content{ grid-template-columns: 1fr; text-align:left;}
  .hero-visual{ height: 320px; margin-top: 20px;}
  .about-grid{ grid-template-columns: 1fr;}
  .cities-grid{ grid-template-columns: repeat(2, 1fr);}
  .city-card.big{ grid-column: span 2; grid-row: span 1; height:280px;}
  .plus-grid{ grid-template-columns: repeat(2, 1fr);}
  .pricing-card{ grid-template-columns: 1fr; padding: 40px;}
  .telegram-grid{ grid-template-columns: 1fr;}
  .footer-grid{ grid-template-columns: 1fr 1fr;}
}

@media (max-width: 768px){
  .main-nav{ display:none;}
  .burger{ display:flex;}
  .section{ padding: 80px 0;}
  .hero{ padding-top: 110px;}
  .hero-title{ font-size: clamp(32px, 9vw, 44px);}
  .cities-grid{ grid-template-columns: 1fr;}
  .city-card.big{ grid-column: span 1;}
  .plus-grid{ grid-template-columns: 1fr;}
  .process-flow{ flex-direction:column; align-items:stretch;}
  .process-step{ max-width:none;}
  .process-arrow{ transform: rotate(90deg); margin: -6px 0;}
  .footer-grid{ grid-template-columns: 1fr;}
  .about-stats{ gap: 24px;}
  .modal-box{ padding: 32px 24px;}
}

@media (max-width: 480px){
  .container{ padding: 0 18px;}
  .hero-actions{ flex-direction:column; align-items:stretch;}
  .hero-actions .btn{ width:100%;}
  .floating-card{ max-width: 220px; padding: 12px 16px;}
  .pricing-card{ padding: 28px 20px;}
  .final-cta{ padding: 90px 0;}
  .floating-card{display:none}
}