:root{
  --bg:#ffffff;
  --card:#ffffff;
  --muted:#475569;
  --text:#0f172a;
  --border:#e5e7eb;
  --shadow:0 10px 24px rgba(2,6,23,.08);
  --brand-red:#e4003c; --brand-orange:#f97316; --brand-blue:#48538b;
}

/* БАЗА */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55}
img{max-width:100%;display:block}
.container{max-width:1180px;margin:0 auto;padding:0 20px}

/* ШАПКА */
/* --- Телефон в шапке --- */
.header-phone{
  font-weight: 800;
  color: #0f172a;
  text-decoration: none;
}
.header-phone:hover{ text-decoration: underline; }


.srv-hero{
  background: #fff;
  padding: 34px 0 16px;
}

/* Кнопка-иконка телефона (мобайл): по умолчанию скрыта */
.phone-cta{
  display: none;                 /* появится в @media ниже */
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: #0f172a;               /* иконка берёт currentColor */
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 800;
}
.phone-cta:hover{
  box-shadow: 0 8px 22px rgba(2,6,23,.10);
}

/* Блокируем прокрутку, когда меню открыто */
body.offcanvas-lock {
  overflow: hidden;
  touch-action: none;
}

/* ----- Мобильный режим: меню выезжает слева ----- */
@media (max-width: 1024px){

    #nav_m .oc-head-title{
      margin: 0;
      font: 800 18px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
      letter-spacing: .2px;
    }

    /* Список ссылок */
    #nav_m .oc-list{
      list-style: none;
      margin: 0;
      padding: 8px 0;
      display: grid;
      gap: 6px;
    }
    #nav_m .oc-link{
      display: grid;
      grid-template-columns: 36px 1fr 18px;
      align-items: center;
      gap: 10px;

      padding: 12px;
      border-radius: 12px;
      text-decoration: none;

      color: var(--oc-text);
      background: var(--oc-bg);
      border: 1px solid transparent;

      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
    }
    #nav_m .oc-link:hover{
      background: #f8fbff;
      border-color: #e7efff;
      box-shadow: 0 4px 16px rgba(30,85,255,.08);
      transform: translateY(-1px);
    }
    #nav_m .oc-ico{
      width: 36px; height: 36px;
      display: grid; place-items: center;
      border-radius: 10px;
      background: linear-gradient(135deg, rgba(30,85,255,.08), rgba(255,111,0,.08));
      color: var(--brand-blue);
    }
    #nav_m .oc-text{
      display: grid;
      gap: 2px;
    }
    #nav_m .oc-title{ font-weight: 700; }
    #nav_m .oc-desc{ color: var(--oc-muted); font-size: 13px; }
    #nav_m .oc-arrow{
      font-size: 20px;
      color: #b9c3ff;
      translate: 0 1px;
    }

    /* Низ панели */
    #nav_m .oc-footer{
      margin-top: 10px;
      padding: 12px 6px 18px;
      border-top: 1px dashed var(--oc-line);
    }
    #nav_m .oc-cta{
      display: inline-block;
      padding: 10px 12px;
      border-radius: 10px;
      text-decoration: none;
      font-weight: 700;
      color: var(--oc-bg);
      background: linear-gradient(90deg, var(--brand-red), var(--brand-orange), var(--brand-blue));
    }
    #nav_m .oc-cta:hover{ filter: brightness(1.05); }

  /* Подложка под меню */
  .offcanvas-backdrop {
    inset: 0;
    opacity: 0;
    transition: opacity .3s ease;
    z-index: 1040;
  }
  .offcanvas-backdrop.show {
    opacity: 1;
  }
}

/* Меньше анимации, если у пользователя включено "reduce motion" */
@media (prefers-reduced-motion: reduce){
  #nav { transition: none !important; }
  .offcanvas-backdrop { transition: none !important; }
}

/* --- Адаптив --- */
/* На экранах до 900px прячем текстовый номер и показываем иконку */
/* === БРЕНД НИКОГДА НЕ ОБРЕЗАЕМ И НЕ ПЕРЕНОСИМ === */
.brand {
  flex: 0 0 auto;              /* бренд не сжимается и не растягивается */
  min-width: auto;
}
.brand-text{
  white-space: nowrap;          /* без переноса */
  overflow: visible;            /* ничего не обрезаем */
  text-overflow: clip;          /* отключаем троеточие */
  max-width: none;              /* убираем ограничение ширины */
  /* если надо — мягкая адаптация размера, но без обрезки */
  font-size: clamp(18px, 5.2vw, 22px);
}

/* Контролы справа — могут сжиматься */
.header-controls{
  justify-content: right;
  flex: 1 1 auto;
  min-width: 0;
  gap: 10px;
}

/* Кнопка региона сжимается, текст может схлопываться */
.region-btn{
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;      /* обрезка допустима ТОЛЬКО для региона */
  white-space: nowrap;
}

/* Иконка телефона фиксированная, компактная */
.phone-cta{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
}

/* Страховка от горизонтального скролла */
html, body { overflow-x: hidden; }

/* Точная настройка для узких (375px и ниже) */
@media (max-width: 400px){
  .container{ padding: 0 12px; }
  .header-inner{ gap: 8px; }

  /* Прячем слово "Регион:" чтобы сэкономить место, оставляем только город */
  .region-btn{ font-size: 0; }
  .region-btn #regionLabel{
    font-size: 14px;
    font-weight: 800;
  }

  /* Чуть компактнее бургер */
  .burger span{ width: 22px; }
}

/* Иконка телефона вместо номера на мобиле */
@media (max-width: 900px){
  .header-phone{ display: none; }
  .phone-cta{ display: inline-flex; }
}

/* Попап-меню не выходит за края */
@media (max-width: 900px){
  #nav.open{
    right: 12px;
    left: auto;
    max-width: calc(100vw - 24px);
  }
}

@media (max-width: 900px){
  .header-phone{ display: none; }
  .phone-cta{ display: inline-flex; }
}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border);grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.header-inner{display:flex;align-items:center;gap:16px;justify-content:space-between;min-height:64px}
.brand{display:flex;gap:10px;align-items:center;font-weight:800;color:#0f172a;text-decoration:none}
.brand-text .brand-red{ color: var(--brand-red); }
.brand-text .brand-blue{ color: var(--brand-blue); }
.brand-text .brand-orange{ color: var(--brand-orange); }
.brand-text{ font-weight: 800; letter-spacing: .2px; }
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:#334155;text-decoration:none;font-weight:700}
.nav a:hover{color:#0f172a}
.header-controls{display:flex;align-items:center;gap:12px}
.header-phone{font-weight:800;color:#0f172a}
.burger{display:none;flex-direction:column;gap:4px;background:transparent;border:0}
.burger span{display:block;width:24px;height:2px;background:#0f172a;border-radius:2px}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:12px;border:1px solid var(--border);background:var(--brand-red);color:#ffffff;text-decoration:none;font-weight:800;transition:.2s}
.btn:hover{box-shadow:0 8px 22px rgba(2,6,23,.10)}
.btn-primary{background: var(--brand-red);color:#fff;border:0}
.btn-primary:hover{background: #831a31}
.btn-lg{padding:14px 18px}
.btn-sm{padding:8px 12px;border-radius:10px}

/* Кнопка региона */
.region-btn{max-width: 250px; display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;border:1px solid var(--border);background:#fff;color:#0f172a;font-weight:800}
.region-btn:hover{box-shadow:0 8px 22px rgba(2,6,23,.08)}

/* HERO */
.hero{padding:60px 0;background:
  radial-gradient(1200px 380px at 70% -20%, rgba(37,99,235,.4), transparent 60%),
  radial-gradient(900px 300px at 10% -10%, rgba(249,115,22,.4), transparent 60%),
  radial-gradient(700px 260px at 90% 10%, rgba(239,68,68,.4), transparent 60%)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:24px;align-items:center}
.hero-text h1{font-size:44px;line-height:1.1;margin:0 0 10px}
.hero-text p{margin:0 0 18px;color:var(--muted)}
.hero-art{position:relative;}
.blob{position:absolute;filter:blur(40px);opacity:.55;border-radius:50%}
.blob.b1{background:var(--brand-blue);width:220px;height:220px;right:0;top:20px}
.blob.b2{background:var(--brand-orange);width:180px;height:180px;right:120px;bottom:0}
.blob.b3{background:var(--brand-red);width:120px;height:120px;right:40px;top:120px}

/* КАТАЛОГ */
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin:24px 0 12px;flex-wrap:wrap;gap:10px}
.catalog{padding:28px 0 44px}
.grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border-radius:18px}
.card--pro{position:relative;border:1px solid transparent;
  box-shadow:var(--shadow);transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s}
.card--pro:hover{transform:translateY(-6px);box-shadow:0 15px 20px rgba(72,83,139,0.6)}
.card-media{display:block;position:relative;aspect-ratio:12/10;overflow:hidden;border-bottom:1px solid var(--border);background:#f1f5f9}
.card-media img{width:100%;height:100%;object-fit:scale-down;;transform:scale(1.02);transition:transform .45s}
.card--pro:hover .card-media img{transform:scale(1.07)}
.card-badge{position:absolute;top:12px;left:12px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;background:#fff;color:#0f172a;border:1px solid var(--border);box-shadow:0 6px 16px rgba(2,6,23,.08)}
.card-glass{position:absolute;left:12px;bottom:12px;display:flex;align-items:baseline;gap:6px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.68);border:1px solid rgba(15,23,42,.08);backdrop-filter:blur(6px)}
.card-price b{font-size:16px}.card-price em{font-style:normal;color:var(--muted);font-weight:700}
.card-body{padding:14px 14px 16px}
.card-title{font-size:18px;margin:0 0 6px}.card-title a{color:#0f172a;text-decoration:none}
.card-title a:hover{text-decoration:underline}
.card-short{margin:0 0 12px;color:var(--muted)}
.chip-list{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#f8fafc;border:1px solid var(--border);font-size:12px;color:#0f172a}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background: radial-gradient(circle at 30% 30%, var(--brand-red), var(--brand-orange) 60%, var(--brand-blue))}
.card-actions{display:flex;justify-content:flex-end}
.card-actions .btn.btn-sm{border-color:transparent;background:var(--brand-red);color:#fff}
.card-actions .btn.btn-sm:hover{border-color:transparent;background:#831a31;color:#fff}

/* ДЕТАЛЬНАЯ */
.pro-hero{position:relative;padding:40px 0 26px;background:#fff}
.pro-hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(800px 220px at 20% -10%, rgba(239,68,68,.08), transparent 60%),
  radial-gradient(900px 260px at 90% -10%, rgba(37,99,235,.10), transparent 60%),
  radial-gradient(900px 260px at 50% 110%, rgba(249,115,22,.08), transparent 60%);pointer-events:none}
.pro-hero__inner{position:relative;z-index:1}
.muted{color:#64748b; padding-top: 3%}
.breadcrumbs{display:flex;gap:8px;align-items:center;color:#64748b;font-size:14px;margin-bottom:8px}
.breadcrumbs a{color:#334155;text-decoration:none}
.breadcrumbs a:hover{text-decoration:underline}
.hero-orbs{position:absolute;inset:0;pointer-events:none}
.orb{position:absolute;width:180px;height:180px;border-radius:50%;filter:blur(40px);opacity:.25}
.orb--red{background:var(--brand-red);top:-40px;right:8%}
.orb--orange{background:var(--brand-orange);top:60px;left:12%}
.orb--blue{background:var(--brand-blue);bottom:-60px;right:20%}

.pro-detail{padding:26px 0 50px}
.pro-detail__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:start}

/* СЛАЙДЕР */
/* Корневой блок слайдера: ничего не выползает наружу */
.pro-slider{
  position: relative;
  overflow: hidden;
}

/* Дорожка: одна строка, плавное смещение */
.slider-track{
  display: flex;
  flex-wrap: nowrap;           /* не переносим слайды */
  transition: transform .35s ease;
  will-change: transform;
}

/* Слайд занимает 100% ширины вьюпорта слайдера.
   Высоту задаём через aspect-ratio (современный способ). */
.slide{
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16 / 9;        /* можно 4/3 или 3/2 — под твои фото */
  overflow: hidden;            /* обрезаем лишнее */
}

/* Картинка всегда заполняет слайд (без «доп. строки» снизу) */
.slide img{
  width: 100%;
  height: 100%;
  display: block;              /* убирает baseline-зазор под img */
  object-fit: scale-down;           /* масштабируем без искажений, обрезая лишнее */
}

/* Если хочешь, чтобы вся картинка влезала целиком (с «письмами» по краям) —
   просто повесь data-fit="contain" на .pro-slider */
.pro-slider[data-fit="contain"] .slide img{
  object-fit: contain;
  background: #fff;            /* подложка под «письма» */
}

/* Адаптив: на мобильных можно сделать более высокий кадр */
@media (max-width: 480px){
  .slide{ aspect-ratio: 4 / 3; }
}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(255,255,255,.9);
  border:1px solid var(--border);width:40px;height:40px;border-radius:999px;display:grid;place-items:center;font-size:22px;font-weight:800;cursor:pointer}
.slider-nav:hover{box-shadow:0 8px 22px rgba(2,6,23,.12)}
.slider-nav.prev{left:10px}
.slider-nav.next{right:10px}
.slider-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px;z-index:2}
.dot{width:10px;height:10px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.9);cursor:pointer}
.dot.is-active{background: var(--brand-blue);border-color: transparent}

/* Превью */
.gallery-strip{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.gallery-strip .thumb{border:1px solid var(--border);border-radius:12px;padding:0;background:#fff;overflow:hidden;width:110px;height:70px;cursor:pointer;box-shadow:0 6px 16px rgba(2,6,23,.06);transition: transform .2s}
.gallery-strip .thumb:hover{transform: translateY(-2px)}
.gallery-strip .thumb img{width:100%;height:100%;object-fit:cover}
.gallery-strip .thumb.is-active{outline: 3px solid rgba(37,99,235,.35)}

/* Блоки характеристик / аренды */
.gallery{display:grid;gap:14px}
.note{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;box-shadow: var(--shadow);color:#0f172a}
.specs-pro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.spec{display:flex;gap:10px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;align-items:center}
.spec__icon{width:28px;height:28px;border-radius:8px;background: var(--brand-orange);box-shadow:0 4px 12px rgba(2,6,23,.12)}
.spec__k{color:#475569;font-size:12px}.spec__v{font-weight:800;display:block}
.rent-box{position:sticky;top:92px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:16px;box-shadow:var(--shadow)}
.rent-head h2{margin:0 0 8px}
.rent-row{margin-bottom:12px}
.rent-label{font-size:12px;color:var(--muted);margin-bottom:6px;display:block}
.select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#0f172a}
.segmented{display:flex;background:#f1f5f9;border:1px solid var(--border);border-radius:10px;overflow:hidden}
.segmented button{flex:1;padding:10px;border:0;background:transparent;color:#334155;font-weight:800;cursor:pointer}
.segmented button.active{background: var(--brand-blue);color:#fff}
.pro-price{display:flex;align-items:baseline;gap:8px;letter-spacing:.2px}
.price-lg{font-size:28px;font-weight:800;margin:12px 0 18px;color:#0f172a}
@keyframes flow{from{background-position: 0% 0}to{background-position: 200% 0}}

/* Модалки (регион/заявка) */
.modal{position:fixed;inset:0;display:none;z-index:1000}
.modal.show{display:block}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.40);z-index:1000}
.modal-dialog{position:relative;z-index:1001;max-width:460px;margin:10vh auto;background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 30px 70px rgba(2,6,23,.18);padding:18px;color:#0f172a}
.modal-close{position:absolute;top:8px;right:10px;background:transparent;border:0;color:#0f172a;font-size:22px;cursor:pointer}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field input, .field select{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:#0f172a}
.form-status{margin-top:10px;color:#16a34a}

/* ================================
   Кнопки категорий (панель на главной)
   ================================ */
.catbar{ margin: 6px 0 16px; }
.catbar__inner{
  display: flex; flex-wrap: wrap; gap: 8px;
}
.catbtn{
  /* Похоже на "чип", но с активным состоянием */
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: #0f172a;
  font-weight: 800;
  cursor: pointer;
  transition: box-shadow .2s ease, transform .06s ease;
}
.catbtn:hover{ box-shadow: 0 8px 22px rgba(2,6,23,.08); }
.catbtn:active{ transform: translateY(1px); }
.catbtn.is-active{
  border-color: transparent;
  color: #fff;
  background: var(--brand-blue);
}


/* Benefits */
.benefits{padding:24px 0px 56px;}
.benefits-grid{display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;}
.benefit{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;box-shadow:var(--shadow)}

/* ПОДВАЛ */
.site-footer{border-top:1px solid var(--border);padding:24px 0 32px;background:#f8fafc}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.footer-nav{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.brand--footer{margin-bottom:8px}
.copyright{margin-top:16px;color:#64748b}

/* Фокус и адаптивность */
button:focus,a:focus,input:focus,select:focus{outline:3px solid rgba(37,99,235,.35);outline-offset:2px}

/* Адаптив: хедер и навигация */
@media (max-width:1024px){
  .hero-text h1{font-size:38px}
}
@media (max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  #nav.open{display:flex;position:absolute;top:64px;right:20px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
  .pro-detail__grid{grid-template-columns:1fr}
  .rent-box{position:static}
}
@media (max-width:640px){
  .hero-inner{grid-template-columns:1fr}
  .hero-text h1{font-size:32px}
  .slide{height:280px}
  .footer-grid{grid-template-columns:1fr}
}