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);
    --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; } }