html, body {
    min-width: 320px;
}
:root {
    --bs-link-color: #0f3d91;
    --bs-link-hover-color: #d81b60;
    --bs-link-color-rgb: 15, 61, 145;
    --page-bg: #faf9f6;
    --card-bg: #ffffff;
    --card-shadow: 0 25px 40px rgba(15, 61, 145, 0.08);
    --clr-dark: #111111;
    --clr-muted: #6c757d;
    --clr-bg-alt: #f5f5f5;
    --clr-bg-cta: #1c1c1c;
    --bs-tertiary-bg-rgb: 234, 231, 220;
}

body {
    background: var(--page-bg);
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    color: #1c1c1c;
}

a {
    color: var(--bs-link-color);
    transition: color 0.25s ease;
}

a:hover,
a:focus {
    color: var(--bs-link-hover-color);
    text-decoration: none;
}

.section-card {
    background: var(--card-bg);
    border-radius: 1.75rem;
    padding: 2.5rem;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(15, 61, 145, 0.05);
    margin-bottom: 2rem;
}

.section-card h2,
.section-card h3 {
    margin-bottom: 1rem;
}

.section-card p {
    color: #4d4d4d;
    line-height: 1.65;
}

.section-card .btn-outline {
    border-radius: 999px;
    border-color: rgba(15, 61, 145, 0.4);
}

.portfolio-preview .card {
    border-radius: 1.25rem;
    overflow: hidden;
}

.portfolio-preview .card-body {
    padding: 1rem;
}

.section-divider {
    display: block;
    height: 1px;
    width: 90px;
    background: linear-gradient(90deg, transparent, rgba(15, 61, 145, 0.4), transparent);
    margin: 2rem auto 1rem;
}

.cta-block {
    background: linear-gradient(120deg, #f7f1c8, #f5d7a3 60%, #f0c4a8);
    border-radius: 2rem;
    padding: 3rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    text-align: center;
}



/* Увеличенные размеры шрифтов Bootstrap */
.fs-1 { font-size: 3rem !important; }
.fs-2 { font-size: 2.5rem !important; }
.fs-3 { font-size: 2rem !important; }
.fs-4 { font-size: 1.75rem !important; }
.fs-5 { font-size: 1.5rem !important; }
.fs-6 { font-size: 1.25rem !important; }
.fs-7{font-size:1.0em !important;}
.fs-8 {font-size:0.8em !important;}
.fs-9 {font-size:0.7em !important;}
.fs-10 {font-size:0.6em !important;}

/* font-size до md (меньше 768px) */
@media (max-width: 767.98px) {
  .fs-md-1 { font-size: 2.0rem !important; }
  .fs-md-2 { font-size: 1.5rem !important; }
  .fs-md-3 { font-size: 1.25rem !important; }
  .fs-md-4 { font-size: 1.0rem !important; }
  .fs-md-5 { font-size: 0.75rem !important; }
  .fs-md-6 { font-size: 0.5rem !important; }
}


.header-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

#logo-img {
    transition: transform 0.4s ease;
    transform-origin: left center;
}

header.rocket .promo {
    background: url(../images/header-wave.svg), linear-gradient(102.01deg, #530455 0.3%, #20064D 0.4%, #A61C58 106.31%);
    background-repeat: repeat-x, no-repeat;
    background-position: bottom left, center;
    background-size: auto, cover;
    padding-bottom: 0;
    position: relative;

    z-index: 1;
}

@media (min-width: 1000px) {
    header.rocket .decoration-1 {
        border-radius: 100%;
        background-color: #F4F7F8;
        display: block;
        position: absolute;
        z-index: 1;
        width: 524px;
        height: 524px;
        left: 10%;
        top: -10%;
        opacity: .04;
        transition: transform 0.15s ease-out;
        will-change: transform;
    }
    header.rocket .decoration-2 {

        border-radius: 100%;
        background-color: #F4F7F8;
        display: block;
        position: absolute;
        z-index: 1;
        width: 524px;
        height: 524px;
        right: 16%;
        top: 24%;
        opacity: .05;
        transition: transform 0.15s ease-out;
        will-change: transform;
    }
}
.promo-img {
    transition: transform 0.15s ease-out;
    will-change: transform;
    z-index: 2;
}

.hover-shadow {
    transition: all 0.3s ease;
}

.hover-shadow:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}


.bg-dmdev {
    background: linear-gradient(102.01deg, #530455 0.3%, #20064D 0.4%, #A61C58 106.31%);
}

/* Splide arrow and pagination tweaks */
.splide {
    position: relative;
}
    .splide__slider {
        overflow: visible;
    }

.splide__arrows {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    z-index: 3;
    transform: translateY(-50%);
    pointer-events: none;
}

.splide__arrow {
    pointer-events: auto;
    position: absolute;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splide__arrow svg {
    width: 1.2rem;
    height: 1.2rem;
    fill: currentColor;
}

.splide__arrow--prev {
    left: -20px;
}

.splide__arrow--next {
    right: -20px;
}

.splide__pagination {
    position: absolute;
    bottom: -0.5rem;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 1rem;
    display: flex;
    gap: 0.65rem;
}

.splide__pagination__page {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: background 0.2s ease, transform 0.2s ease;
}

.splide__pagination__page.is-active {
    background: #d81b60;
    transform: scale(1.05);
}

/* Ensure slides are flex containers (centering), and images maintain aspect ratio */
.splide__slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.splide__slide img {
    max-width: 100%;
    max-height: 60vh; /* prevents very tall images from breaking layout */
    width: auto;
    height: auto;
    object-fit: contain;
}

/* --- Product gallery thumbnails responsive width --- */
.pv-thumbs-col { width: 100%; }
@media (min-width: 768px) { .pv-thumbs-col { width: 80px; } }


/* ═══════════════════════════════════════════════
   БЛОКИ: ТИПОГРАФИКА И УТИЛИТЫ
════════════════════════════════════════════════ */

.section-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
}

.section-lead {
  font-size: 1rem;
  color: var(--clr-muted);
  max-width: 620px;
}

.section-py { padding-top: 5rem; padding-bottom: 5rem; }
@media (max-width: 767.98px) {
  .section-py { padding-top: 3rem; padding-bottom: 3rem; }
}


/* ═══════════════════════════════════════════════
   БЛОК 1 — ПРЕИМУЩЕСТВА
════════════════════════════════════════════════ */

#advantages {
  background: var(--clr-bg-alt);
}

.advantage-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e0e0e0;
  border-radius: 8px;
  font-size: 1.5rem;
  color: var(--clr-dark);
  flex-shrink: 0;
}

.advantage-card {
  background: transparent;
}

.advantage-card .adv-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.advantage-card .adv-text {
  font-size: 0.875rem;
  color: var(--clr-muted);
  margin-top: 0.25rem;
}


/* ═══════════════════════════════════════════════
   БЛОК 2 — КАК МЫ РАБОТАЕМ
════════════════════════════════════════════════ */

#how-we-work {
  background: #fff;
}

.step-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.step-num {
  font-size: 2.5rem;
  font-weight: 700;
  color: #e0e0e0;
  line-height: 1;
  flex-shrink: 0;
  min-width: 3.5rem;
}

.step-body .step-title {
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.25rem;
}

.step-body .step-desc {
  font-size: 0.9rem;
  color: var(--clr-muted);
}

.step-divider {
  width: 1px;
  background: #e5e5e5;
  margin-left: 1.75rem;
  height: 28px;
}


/* ═══════════════════════════════════════════════
   БЛОК 3 — CTA (мини-опросник)
════════════════════════════════════════════════ */

#cta {
  background: var(--clr-bg-cta);
  color: #fff;
}

#cta .section-title { color: #fff; }
#cta .section-lead  { color: rgba(255,255,255,0.65); }

.cta-form-step         { display: none; }
.cta-form-step.active  { display: block; }

.cta-option-btn {
  display: block;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  padding: 0.75rem 1.1rem;
  border-radius: 6px;
  transition: background 0.15s, border-color 0.15s;
  cursor: pointer;
  font-size: 0.95rem;
}

.cta-option-btn:hover,
.cta-option-btn.selected {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.4);
}

.cta-input-dark {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  width: 100%;
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}

.cta-input-dark::placeholder { color: rgba(255,255,255,0.4); }
.cta-input-dark:focus        { border-color: rgba(255,255,255,0.5); }

.cta-progress {
  display: flex;
  gap: 6px;
}

.cta-progress-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transition: background 0.2s;
}

.cta-progress-dot.active { background: #fff; }

.cta-success { text-align: center; }
.cta-success .bi { font-size: 2.5rem; color: #6fcf97; }


/* ═══════════════════════════════════════════════
   БЛОК 4 — КОНТАКТЫ (footer)
════════════════════════════════════════════════ */

#contacts {
  background: #fff;
}

.contact-map {
  min-height: 240px;
  height: 100%;
  background: #e9e9e9;
  border-radius: 8px;
  overflow: hidden;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 240px;
  border: 0;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.contact-row > .bi {
  font-size: 1.1rem;
  color: var(--clr-muted);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.work-hours-badge {
  display: inline-block;
  background: var(--clr-bg-alt);
  border-radius: 4px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
}


/* ═══════════════════════════════════════════════
   SIDEBAR (offcanvas)
════════════════════════════════════════════════ */

.sidebar-offcanvas {
  width: 320px;
  border-right: none;
}

.sidebar-header {
  padding: 1rem 1.25rem;
  background: #fff;
}

.sidebar-close {
  opacity: 0.5;
  transition: opacity 0.2s;
}
.sidebar-close:hover { opacity: 1; }

.sidebar-body { background: #fff; }

.sidebar-nav { overflow-y: auto; }

/* --- Дерево навигации --- */
.stree-root,
.stree-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.stree-children {
  padding-left: 1rem;
  border-left: 1px solid var(--clr-bg-alt);
  margin-left: 0.55rem;
}

.stree-item {
  margin: 0;
}

.stree-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 6px;
  transition: background 0.15s;
}
.stree-row:hover {
  background: var(--clr-bg-alt);
}
.stree-row.active {
  background: var(--clr-bg-alt);
}

/* Кнопка +/- */
.stree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: var(--clr-muted);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.stree-toggle:hover {
  border-color: #999;
  color: var(--clr-dark);
  background: var(--clr-bg-alt);
}
.stree-toggle .bi { line-height: 1; }

/* Пустое место вместо кнопки для листовых пунктов */
.stree-toggle-spacer {
  display: inline-block;
  width: 22px;
  flex-shrink: 0;
}

/* Ссылка */
.stree-link {
  display: block;
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.4rem;
  font-size: 0.92rem;
  color: #1c1c1c;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stree-link:hover {
  color: var(--bs-link-hover-color);
}

.stree-row.active > .stree-link {
  font-weight: 600;
  color: var(--clr-dark);
}

/* Глубина: размер шрифта уменьшается */
.stree-depth-0 > .stree-link { font-size: 0.95rem; font-weight: 500; }
.stree-depth-1 > .stree-link { font-size: 0.9rem; }
.stree-depth-2 > .stree-link { font-size: 0.85rem; color: var(--clr-muted); }
.stree-depth-3 > .stree-link,
.stree-depth-4 > .stree-link { font-size: 0.82rem; color: var(--clr-muted); }

/* Контакты и CTA в подвале */
.sidebar-footer { background: #fafafa; }

.sidebar-contact-link {
  font-size: 0.9rem;
  color: #1c1c1c;
}

.sidebar-contact-link .bi {
  font-size: 0.85rem;
  color: var(--clr-muted);
  flex-shrink: 0;
}

.sidebar-contact-link:hover { color: var(--clr-dark); }