* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background: #f7f7f7;
    color: #1c1c1c;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =======================
   CONTAINER (adaptive)
======================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* =======================
   HEADER
======================= */
.header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 12px 0;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.logo {
    font-weight: 700;
}

.logo span {
    color: #c17d3f;
}

.nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nav a {
    text-decoration: none;
    font-size: 14px;
    color: #333;
    padding-right: 22px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.phone {
    font-size: 14px;
    white-space: nowrap;
}

/* =======================
   BUTTONS
======================= */
.btn {
    background: #1c2e22;
    color: #fff;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
}

.btn.big {
    padding: 14px 18px;
    margin-top: 15px;
    width: 100%;
    max-width: 260px;
}

/* =======================
   HERO (premium version)
======================= */
.hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;

    background: url("../images/hero.png") center/cover no-repeat;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.98) 0%,
            rgba(0, 0, 0, 0.95) 12%,
            rgba(0, 0, 0, 0.92) 22%,
            rgba(0, 0, 0, 0.85) 35%,
            rgba(0, 0, 0, 0.65) 50%,
            rgba(0, 0, 0, 0.35) 65%,
            rgba(0, 0, 0, 0.10) 80%,
            rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}

/* контейнер поверх слоя */
.hero .container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;

    align-items: center;
}

/* =======================
   TEXT
======================= */
.hero h1 {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
    color: #fff;
    padding-bottom: 10px;
}

.hero h2 {
    color: #c17d3f;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;

    text-shadow: 0 2px 10px rgba(193, 125, 63, 0.25);

    padding-bottom: 30px;
}

.hero h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    opacity: 0.9;
}

.hero li {
    font-size: 15px;
    font-weight: 400;
}

.hero .address {
    margin-top: 18px;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
}

/* =======================
   BUTTON
======================= */
.hero .btn {
    background: linear-gradient(135deg, #c17d3f, #d99f5f);
    color: #fff;
    border: none;

    padding: 16px 26px;
    font-weight: 700;
    letter-spacing: 1px;

    border-radius: 10px;
    cursor: pointer;

    transition: all 0.25s ease;

    box-shadow:
            0 10px 25px rgba(193, 125, 63, 0.25),
            inset 0 0 0 1px rgba(255,255,255,0.15);
}

.hero .btn:hover {
    transform: translateY(-3px) scale(1.02);

    box-shadow:
            0 18px 40px rgba(193, 125, 63, 0.35),
            inset 0 0 0 1px rgba(255,255,255,0.2);
}

/* =======================
   RESPONSIVE
======================= */
@media (max-width: 992px) {
    .hero {
        min-height: auto;
        padding: 80px 0;
    }

    .hero .container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero h1 {
        font-size: 34px;
    }
}
@media (max-width: 576px) {
    .hero h1 {
        font-size: 26px;
    }

    .hero h3 {
        font-size: 14px;
    }
}

.hero-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.hero-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;

    font-size: 15px;
    color: rgba(255,255,255,0.9);
}

.hero-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.hero-list li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;

    font-size: 15px;
    color: rgba(255,255,255,0.9);
}

/* круг с галочкой */
.hero-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 2px;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 700;

    color: #fff;

    background: #c17d3f;
    border-radius: 50%;

    box-shadow: 0 6px 14px rgba(193, 125, 63, 0.25);
}

/* =======================
   FEATURES
======================= */
.features {
    padding: 30px 0;
}

.grid-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    text-align: center;
}

.feature {
    background: #fff;
    padding: 12px;
    font-size: 13px;
    border-radius: 6px;
}

/* =======================
   CARDS
======================= */
.cards {
    padding: 40px 0;
}

.cards h2 {
    margin-bottom: 20px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.card a {
    text-decoration: none;
    color: black;
}

.card .img {
    height: 180px;
    background: #ddd;
}

.card .info {
    padding: 15px;
}

.card button {
    margin-top: 10px;
    padding: 8px 12px;
    background: #c17d3f;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* =======================
   BUSINESS
======================= */
.business {
    padding: 40px 0;
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.grid-6 div {
    background: #fff;
    padding: 14px;
    text-align: center;
    border-radius: 6px;
    font-size: 13px;
}

/* =======================
   CTA
======================= */
.cta {
    padding: 40px 0;
}

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

.form {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
}

.form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
}

.form button {
    width: 100%;
    padding: 12px;
    background: #c17d3f;
    border: none;
    color: #fff;
    cursor: pointer;
}

.map-box {
    height: 320px;
    background: #ddd;
    border-radius: 28px;
}

/* =======================
   FOOTER
======================= */
.footer {
    background: #ffffff; /* как в заявке */
    padding: 80px 0 0;
    margin-top: 60px;
    border-top: 1px solid #eee;
}

/* сетка */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 50px;
    text-align: left;
}

/* бренд */
.footer-logo {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #1c2e22;
}

.footer-logo span {
    color: #c17d3f;
}

.footer p {
    color: #666;
    font-size: 14px;
    line-height: 1.7;
    margin-bottom: 20px;
}

/* контакты */
.footer-contacts div {
    margin-bottom: 8px;
    font-size: 14px;
    color: #444;
}

/* ссылки */
.footer-links h4,
.footer-right h4 {
    margin-bottom: 15px;
    font-size: 16px;
    color: #1c2e22;
    font-weight: 700;
}

.footer-links a {
    display: block;
    color: #666;
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 14px;
    transition: 0.2s;
}

.footer-links a:hover {
    color: #c17d3f;
}

/* правая часть */
.footer-right p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
}

/* кнопка как в CTA */
.footer-btn {
    margin-top: 15px;
    width: 100%;
    padding: 14px;

    background: linear-gradient(135deg, #c17d3f, #d99f5f);
    color: #fff;

    border: none;
    border-radius: 10px;

    font-weight: 700;
    cursor: pointer;
    transition: 0.25s;
}

.footer-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(193, 125, 63,0.25);
}

/* нижняя полоса */
.footer-bottom {
    border-top: 1px solid #eee;
    padding: 18px 0;
    font-size: 13px;
    color: #888;
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* responsive */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

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

/* =========================================================
   📱 TABLET
========================================================= */
@media (max-width: 992px) {

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-image {
        height: 300px;
    }

    .grid-7 {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    .cta-grid {
        grid-template-columns: 1fr;
    }

    .nav {
        display: none; /* можно заменить на бургер */
    }
}

/* =========================================================
   📱 MOBILE
========================================================= */
@media (max-width: 576px) {

    .header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .hero-text h1 {
        font-size: 24px;
    }

    .hero-text h3 {
        font-size: 14px;
    }

    .btn.big {
        width: 100%;
        max-width: 100%;
    }

    .grid-7 {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .phone {
        font-size: 12px;
    }
}

p, li {
    line-height: 1.6;
}* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    background: #f7f7f7;
    color: #1c1c1c;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* =======================
   CONTAINER (adaptive)
======================= */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* =======================
   HEADER
======================= */
.header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 12px 0;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

.logo {
    font-weight: 700;
    font-size: 25px;
}

.logo span {
    color: #c17d3f;
}

.nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nav a {
    text-decoration: none;
    font-size: 14px;
    color: #333;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-right a {
    text-decoration: none;
    color: #c17d3f;
}

.phone {
    font-size: 14px;
    white-space: nowrap;
}

/* =======================
   BUTTONS
======================= */
.btn {
    background: #1c2e22;
    color: #fff;
    border: none;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
}

.btn.big {
    padding: 14px 18px;
    margin-top: 15px;
    width: 100%;
    max-width: 260px;
}

/* =======================
   HERO (premium version)
======================= */
.hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;

    background: url("../images/hero.png") center/cover no-repeat;
    overflow: hidden;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;

    background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.98) 0%,
            rgba(0, 0, 0, 0.95) 12%,
            rgba(0, 0, 0, 0.92) 22%,
            rgba(0, 0, 0, 0.85) 35%,
            rgba(0, 0, 0, 0.65) 50%,
            rgba(0, 0, 0, 0.35) 65%,
            rgba(0, 0, 0, 0.10) 80%,
            rgba(0, 0, 0, 0) 100%
    );

    z-index: 1;
}

/* контейнер поверх слоя */
.hero .container {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;

    align-items: center;
}

/* =======================
   TEXT
======================= */
.hero h1 {
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.05;
}

.hero h3 {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 2px;
    opacity: 0.9;
}

.hero li {
    font-size: 15px;
    font-weight: 400;
}

.hero .address {
    margin-top: 18px;
    font-size: 13px;
    color: rgba(255,255,255,0.65);
}

/* =======================
   BUTTON
======================= */
.hero .btn {
    background: linear-gradient(135deg, #c17d3f, #d99f5f);
    color: #fff;
    border: none;

    padding: 16px 26px;
    font-weight: 700;
    letter-spacing: 1px;

    border-radius: 10px;
    cursor: pointer;

    transition: all 0.25s ease;

    box-shadow:
            0 10px 25px rgba(193, 125, 63, 0.25),
            inset 0 0 0 1px rgba(255,255,255,0.15);
}

.hero .btn:hover {
    transform: translateY(-3px) scale(1.02);

    box-shadow:
            0 18px 40px rgba(193, 125, 63, 0.35),
            inset 0 0 0 1px rgba(255,255,255,0.2);
}

/* =======================
   RESPONSIVE
======================= */
@media (max-width: 992px) {
    .hero {
        min-height: auto;
        padding: 80px 0;
    }

    .hero .container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero h1 {
        font-size: 34px;
    }
}
@media (max-width: 576px) {
    .hero h1 {
        font-size: 26px;
    }

    .hero h3 {
        font-size: 14px;
    }
}

.hero-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.hero-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 10px;

    font-size: 15px;
    color: rgba(255,255,255,0.9);
}

.hero-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.hero-list li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 12px;

    font-size: 15px;
    color: rgba(255,255,255,0.9);
}

/* круг с галочкой */
.hero-list li::before {
    content: "✔";
    position: absolute;
    left: 0;
    top: 2px;

    width: 20px;
    height: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 12px;
    font-weight: 700;

    color: #fff;

    background: #c17d3f;
    border-radius: 50%;

    box-shadow: 0 6px 14px rgba(193, 125, 63, 0.25);
}

/* =======================
   FEATURES
======================= */
.features {
    padding: 30px 0;
}

.grid-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    text-align: center;
}

.feature {
    background: #fff;
    padding: 12px;
    font-size: 13px;
    border-radius: 6px;
}

/* =======================
   CARDS
======================= */
.cards {
    padding: 40px 0;
}

.cards h2 {
    margin-bottom: 20px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
}

.card .img {
    height: 180px;
    background: #ddd;
}

.card .info {
    padding: 15px;
}

.card button {
    margin-top: 10px;
    padding: 8px 12px;
    background: #c17d3f;
    border: none;
    color: #fff;
    cursor: pointer;
}

/* =======================
   BUSINESS
======================= */
.business {
    padding: 40px 0;
}

.grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.grid-6 div {
    background: #fff;
    padding: 14px;
    text-align: center;
    border-radius: 6px;
    font-size: 13px;
}

/* =======================
   CTA
======================= */
.cta {
    padding: 40px 0;
}

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

.form {
    background: #fff;
    padding: 20px;
    border-radius: 6px;
}

.form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
}

.form button {
    width: 100%;
    padding: 12px;
    background: #c17d3f;
    border: none;
    color: #fff;
    cursor: pointer;
}

.map-box {
    height: 260px;
    background: #ddd;
    border-radius: 28px;
}

/* =======================
   FOOTER
======================= */
.footer {
    background: #fff;
    padding: 20px 0;
    text-align: center;
    margin-top: 40px;
}

/* =========================================================
   📱 TABLET
========================================================= */
@media (max-width: 992px) {

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-image {
        height: 300px;
    }

    .grid-7 {
        grid-template-columns: repeat(3, 1fr);
    }

    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }

    .cta-grid {
        grid-template-columns: 1fr;
    }

    .nav {
        display: none; /* можно заменить на бургер */
    }
}

/* =========================================================
   📱 MOBILE
========================================================= */
@media (max-width: 576px) {

    .header .container {
        flex-direction: column;
        align-items: flex-start;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }

    .hero-text h1 {
        font-size: 24px;
    }

    text a {
        text-decoration: none;
    }
    .hero-text h3 {
        font-size: 14px;
    }

    .btn.big {
        width: 100%;
        max-width: 100%;
    }

    .grid-7 {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-grid {
        grid-template-columns: 1fr;
    }

    .grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }

    .phone {
        font-size: 12px;
    }
}

p, li {
    line-height: 1.6;
}

.feature {
    background: #fff;
    padding: 16px;
    border-radius: 8px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    font-size: 13px;
    transition: 0.2s;
}

.feature i {
    font-size: 34px;
    color: #c17d3f;

    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(193, 125, 63, 0.08);
    border-radius: 12px;
}

.feature span {
    text-align: center;
    color: #333;
    font-weight: 500;
}

.feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
}

.business {
    padding: 60px 0;
}

.business-grid {
    display: grid;
    grid-template-columns: 4fr 8fr;
    gap: 30px;
    align-items: start;
}

/* LEFT */
.business-left h2,
.business-right h2 {
    margin-bottom: 20px;
    font-size: 22px;
    font-weight: 700;
}

/* GRID ICONS */
.grid-6 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.grid-6 div {
    background: #fff;
    padding: 16px;
    text-align: center;
    border-radius: 8px;

    font-size: 13px;
    transition: 0.2s;
}

.grid-6 div:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}

/* RIGHT FLOOR CARD */
.business-right {
    display: flex;
    flex-direction: column;
}

.floor-card {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    gap: 10px;

    padding: 12px;
}

.floor-card img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.floor-card .btn {
    background: #1c2e22;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
}

@media (max-width: 992px) {
    .business-grid {
        grid-template-columns: 1fr;
    }

    .grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.biz-item {
    background: #fff;
    padding: 20px;
    border-radius: 10px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    text-align: center;
    transition: 0.25s ease;
}

.biz-item i {
    font-size: 22px; /* 🔥 БОЛЬШИЕ ИКОНКИ */
    color: #c17d3f;

    width: 70px;
    height: 70px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(193, 125, 63, 0.08);
    border-radius: 14px;
}

.biz-item span {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

.biz-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.history {
    padding: 90px 0;
    background: #f6f2ee;
    position: relative;
    overflow: hidden;
}

.history::before {
    content: "";
    position: absolute;

    width: 380px;
    height: 380px;

    left: -160px;
    bottom: -160px;

    border-radius: 50%;

    background: rgba(193, 125, 63, .10);
}

.history-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 50px;
    align-items: center;

    position: relative;
    z-index: 1;
}

/* LEFT */
.history-label {
    display: inline-block;

    padding: 6px 14px;
    margin-bottom: 18px;
    border-radius: 20px;

    background: rgba(193, 125, 63, .14);
    color: #8f6430;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}

.history-left h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 18px;
    line-height: 1.2;
    color: #1c2e22;
}

.history-left p {
    font-size: 15px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 30px;
    max-width: 460px;
}

/* MILESTONES */
.history-milestones {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;

    margin-bottom: 32px;
    padding-bottom: 32px;

    border-bottom: 1px solid rgba(28, 46, 34, .1);
}

.history-milestone {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.history-milestone__year {
    font-size: 20px;
    font-weight: 800;
    color: #1c2e22;
}

.history-milestone__label {
    font-size: 12px;
    color: #8a8f98;
}

/* RIGHT GRID */
.history-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* PHOTO CARD */
.history-photo {
    position: relative;

    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    transition: 0.3s;
}

.history-photo:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.history-photo--offset {
    margin-top: -30px;
}

.history-photo img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
}

.history-photo__year {
    position: absolute;
    top: 14px;
    left: 14px;

    padding: 5px 12px;
    border-radius: 20px;

    background: rgba(28, 46, 34, .88);
    color: #d99f5f;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
}

/* CAPTION */
.photo-caption {
    padding: 14px 16px;
}

.photo-caption .title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    color: #1c2e22;
}

@media (max-width: 576px) {

    .history-photo--offset {
        margin-top: 0;
    }

    .history-milestones {
        gap: 18px;
    }

}

/* MOBILE */
@media (max-width: 992px) {
    .history-grid {
        grid-template-columns: 1fr;
    }

    .history-right {
        grid-template-columns: 1fr;
    }
}

.cta {
    padding: 80px 0;
    background: #fff; /* 💥 чисто белый фон */
}

/* GRID */
.cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

/* FORM */
.form {
    background: #ffffff;
    padding: 30px;
    border-radius: 14px;

    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.form h3,
.map h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1c2e22;
}

/* INPUTS */
.form input {
    width: 100%;
    padding: 14px 16px;
    margin-bottom: 12px;

    border: 1px solid #e5e5e5;
    border-radius: 10px;

    background: #fff;
    font-size: 14px;

    outline: none;
    transition: 0.2s;
}

.form input:focus {
    border-color: #c17d3f;
    box-shadow: 0 0 0 3px rgba(193, 125, 63,0.15);
}

/* BUTTON */
.form button {
    width: 100%;
    padding: 14px;

    background: linear-gradient(135deg, #c17d3f, #d99f5f);
    color: #fff;

    border: none;
    border-radius: 10px;

    font-weight: 700;
    cursor: pointer;

    transition: 0.25s;
}

.form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(193, 125, 63,0.25);
}

/* MAP */
.map {
    background: #fff;
    padding: 20px;

    border: 1px solid #eee;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.map-box {
    height: 320px;
    border-radius: 28px;

    background: #f2f2f2; /* если пока нет карты */
    border: 1px solid #e5e5e5;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .cta-grid {
        grid-template-columns: 1fr;
    }
}

.section-title {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 25px;
}

/* GRID */
.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

/* CARD */
.card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    transition: 0.25s;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

/* IMAGE */
.card-img {
    height: 280px;
    background: linear-gradient(135deg, #e9e9e9, #dcdcdc);
    position: relative;
}

/* BADGE */
.badge {
    position: absolute;
    top: 12px;
    left: 12px;

    background: #c17d3f;
    color: #fff;

    font-size: 12px;
    font-weight: 700;

    padding: 6px 10px;
    border-radius: 20px;
}

/* BODY */
.card-body {
    padding: 18px;
}

.card-body h4 {
    font-size: 22px;
    margin-bottom: 12px;
}

/* META */
.card-meta {
    display: flex;
    justify-content: space-between;

    font-size: 13px;
    color: #666;

    margin-bottom: 12px;
}

.card-meta i {
    color: #c17d3f;
    margin-right: 5px;
}

/* PRICE */
.card-price {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 14px;
}

.card-price small {
    font-size: 12px;
    color: #777;
    font-weight: 500;
}

/* BUTTON */
.card-btn {
    width: 100%;
    padding: 12px;

    background: linear-gradient(135deg, #1c2e22, #28402f);
    color: #fff;

    border: none;
    border-radius: 10px;

    cursor: pointer;
    font-weight: 600;

    transition: 0.2s;
}

.card-btn:hover {
    background: linear-gradient(135deg, #c17d3f, #d99f5f);
    color: #fff;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .card-grid {
        grid-template-columns: 1fr;
    }
}

.footer {
    background: #12201a;
    color: #fff;
    padding: 60px 0 0;
    margin-top: 60px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    padding-bottom: 40px;
    text-align: left; /* важно */
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between; /* не центр */
    align-items: center;
}

.footer-logo {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 15px;
}

.footer-logo span {
    color: #c17d3f;
}

.footer p {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.footer-contacts div {
    margin-bottom: 8px;
    font-size: 14px;
    color: rgba(255,255,255,0.8);
}

.footer-links h4,
.footer-right h4 {
    margin-bottom: 15px;
    font-size: 16px;
}

.footer-links a {
    display: block;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 14px;
    transition: 0.2s;
}

.footer-links a:hover {
    color: #c17d3f;
}

.footer-btn {
    margin-top: 15px;
    width: 100%;
    padding: 12px;
    border: none;
    background: linear-gradient(135deg, #c17d3f, #d99f5f);
    color: #fff;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.2s;
}

.footer-btn:hover {
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 15px 0;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
}

.footer-bottom .container {
    display: flex;
    justify-content: space-between;
}

/* responsive */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

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

.cards {
    padding: 80px 0;
    background: #ffffff; /* 👈 ВОТ ЭТО ФОН */
}

.footer-links h4 {
    color: white;
}

.footer-right h4 {
    color: white;
}

.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(0,0,0,0.06);
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 14px 0;
}

/* LOGO */
.logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 1px;
}

.logo span {
    color: #c17d3f;
}

/* NAV */
.nav {
    display: flex;
    gap: 26px;
}

.nav a {
    position: relative;

    text-decoration: none;
    font-size: 14px;
    color: #222;

    padding: 6px 0;
    transition: 0.25s;
}

/* hover underline animation */
.nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;

    width: 0%;
    height: 2px;

    background: #c17d3f;
    transition: 0.25s;
}

.nav a:hover::after {
    width: 100%;
}

.nav a:hover {
    color: #c17d3f;
}

/* active link */
.nav a.active {
    color: #c17d3f;
    font-weight: 600;
}

.nav a.active::after {
    width: 100%;
}

/* RIGHT */
.header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.phone {
    font-size: 14px;
    color: #444;
    white-space: nowrap;
}

/* BUTTON */
.header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 46px;
    padding: 0 21px;

    background: #c17d3f;
    color: #fff;

    border: 1px solid #c17d3f;
    border-radius: 13px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;

    cursor: pointer;
    white-space: nowrap;

    box-shadow: 0 5px 16px rgba(193, 125, 63, 0.18);

    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease,
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.header-btn:hover {
    background: #dba876;
    border-color: #dba876;

    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 8px 22px rgba(193, 125, 63, 0.28);
}

.header-btn:active {
    transform: translateY(0);

    box-shadow: 0 3px 10px rgba(193, 125, 63, 0.18);
}

/* MOBILE */
@media (max-width: 992px) {
    .nav {
        display: none;
    }
}

@media (max-width: 576px) {
    .header-inner {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .header-right {
        width: 100%;
        justify-content: space-between;
    }
}

/* =======================
   PRODUCT PAGE
======================= */

.product-hero {
    padding: 80px 0;
    background: #fff;
}

.product-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 40px;
    align-items: start;
}

/* GALLERY */
.product-gallery .main-img {
    height: 410px;
    background: linear-gradient(135deg, #ddd, #cfcfcf);
    border-radius: 14px;
}

.thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 12px;
}

.thumbs div {
    height: 80px;
    background: #e5e5e5;
    border-radius: 10px;
}

/* INFO */
.product-info h1 {
    font-size: 34px;
    margin: 10px 0;
}

.meta {
    display: flex;
    gap: 15px;
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

.price {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 15px;
}

.price small {
    font-size: 14px;
    color: #777;
}

.product-info p {
    color: #555;
    margin-bottom: 20px;
}

/* BADGE */
.product-info .badge {
    display: inline-block;
    background: #c17d3f;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

/* FEATURES MINI */
.features-mini {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.features-mini div {
    font-size: 14px;
    color: #333;
}

.features-mini i {
    color: #c17d3f;
    margin-right: 6px;
}

/* DETAILS */
.product-details {
    padding: 60px 0;
    background: #f7f7f7;
}

.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.details-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.details-box h3 {
    margin-bottom: 10px;
}

.details-box ul {
    list-style: none;
}

.details-box ul li {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

/* TAGS */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tags span {
    background: #f1f1f1;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 12px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
    .product-grid {
        grid-template-columns: 1fr;
    }

    .details-grid {
        grid-template-columns: 1fr;
    }
}

.product-gallery{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.main-img{
    width:100%;
    aspect-ratio:4/3;

    border-radius:22px;
    overflow:hidden;

    background:#f4f4f4;
}

.main-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.thumbs{
    display:flex;
    gap:12px;
    overflow-x:auto;
}

.thumbs img{
    width:90px;
    height:90px;

    border-radius:14px;
    border:2px solid transparent;

    object-fit:cover;

    cursor:pointer;
    transition:.2s;
}

.thumbs img:hover{
    border-color:#1a2b21;
}

.thumbs img.active{
    border-color:#1a2b21;
}

.product-info .btn {
    background: #1c2e22;
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: 0.2s;
}

.product-info .btn:hover {
    transform: translateY(-2px);
    background: #28402f;
}

/* ==========================
   BUILDING PLAN
========================== */

.building-plan{
    padding:80px 0;
    background:#fff;
}

.building-plan-grid{
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:50px;
    align-items:center;
}

/* IMAGE */

.building-image{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.building-image img{
    width:100%;
    display:block;
}

/* INFO */

.building-info h1{
    font-size:42px;
    line-height:1.1;
    margin:15px 0;
}

.building-info .subtitle{
    font-size:16px;
    color:#666;
    margin-bottom:30px;
    line-height:1.7;
}

.plan-stats{
    display:grid;
    gap:18px;
    margin-bottom:35px;
}

.plan-stats div{
    display:flex;
    align-items:center;
    gap:14px;

    background:#fafafa;
    border:1px solid #eee;

    padding:16px 18px;

    border-radius:12px;
}

.plan-stats i{
    width:48px;
    height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:rgba(193, 125, 63,.12);

    color:#c17d3f;

    font-size:20px;
}

.plan-stats span{
    font-size:15px;
    font-weight:600;
}

/* ==========================
   LEVELS
========================== */

.plan-levels{
    padding:70px 0;
    background:#f7f7f7;
}

.plan-levels h2{
    text-align:center;
    margin-bottom:40px;
    font-size:34px;
}

.levels-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.level-card{
    display:block;

    background:#fff;

    text-decoration:none;
    color:#111;

    border-radius:16px;

    padding:30px;

    text-align:center;

    border:2px solid transparent;

    transition:.25s;

    box-shadow:0 10px 25px rgba(0,0,0,.05);
}

.level-card:hover{

    transform:translateY(-6px);

    border-color:#c17d3f;

    box-shadow:0 20px 40px rgba(0,0,0,.10);

}

.level-card.active{

    border-color:#c17d3f;

}

.level-number{

    width:74px;
    height:74px;

    margin:auto auto 18px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(135deg,#c17d3f,#d99f5f);

    color:#fff;

    font-size:28px;
    font-weight:700;

}

.level-card h3{

    font-size:22px;
    margin-bottom:10px;

}

.level-card p{

    color:#666;
    font-size:14px;

}

/* ==========================
   DESCRIPTION
========================== */

.plan-description{

    padding:80px 0;

}

.plan-description .details-box{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.plan-description h2{

    font-size:34px;
    margin-bottom:25px;

}

.plan-description p{

    font-size:16px;
    line-height:1.8;
    color:#555;

}

/* ==========================
   BUTTON
========================== */

.building-info .btn{

    background:linear-gradient(135deg,#1c2e22,#28402f);

    color:#fff;

    padding:14px 22px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    transition:.25s;

}

.building-info .btn:hover{

    background:linear-gradient(135deg,#c17d3f,#d99f5f);

    color:#fff;

}

/* ==========================
   RESPONSIVE
========================== */

@media(max-width:992px){

    .building-plan-grid{
        grid-template-columns:1fr;
    }

    .levels-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .building-info h1{
        font-size:34px;
    }

}

@media(max-width:576px){

    .levels-grid{
        grid-template-columns:1fr;
    }

    .building-info h1{
        font-size:28px;
    }

    .plan-levels h2,
    .plan-description h2{
        font-size:26px;
    }

}

.plan-viewer{

    position:relative;

    height:80vh;

    background:#fafafa;

    border-radius:18px;

    overflow:hidden;

}

#planWrapper{

    width:100%;
    height:100%;

    cursor:grab;

    overflow:hidden;

}

#buildingPlan{

    width:100%;
    height:100%;

    transform-origin:center;

}

.room{

    fill:rgba(255,255,255,.05);

    stroke:#444;

    stroke-width:2;

    transition:.2s;

    cursor:pointer;

}

.room.free{

    fill:rgba(0,180,90,.35);

}

.room.busy{

    fill:rgba(220,60,60,.35);

}

.room:hover{

    fill:#c17d3f;

}

.plan-toolbar{

    position:absolute;

    top:20px;
    right:20px;

    display:flex;

    flex-direction:column;

    gap:8px;

    z-index:100;

}

.plan-toolbar button{

    width:42px;
    height:42px;

    border:none;

    border-radius:10px;

    background:white;

    cursor:pointer;

    box-shadow:0 5px 15px rgba(0,0,0,.15);

}

#tooltip{

    position:fixed;

    display:none;

    background:white;

    padding:12px;

    border-radius:12px;

    box-shadow:0 10px 30px rgba(0,0,0,.2);

    pointer-events:none;

}

.plan-wrapper{

    width:100%;
    height:calc(100vh - 90px);

    overflow:hidden;

    cursor:grab;

    background:#f5f5f5;

    display:flex;
    justify-content:center;
    align-items:center;

}

.plan-wrapper.dragging{

    cursor:grabbing;

}

.plan-image{

    transform-origin:center center;

    will-change:transform;

}

.plan-image img{

    display:block;

    max-width:none;

    user-select:none;

    pointer-events:none;

    -webkit-user-drag:none;

}

.plan-wrapper{

    width:100%;

    height:calc(100vh - 100px);

    overflow:hidden;

    background:#f5f5f5;

    cursor:grab;

    position:relative;

}

.plan-wrapper.dragging{

    cursor:grabbing;

}

.plan-image{

    transform-origin:0 0;

    user-select:none;

}

.plan-image svg{

    width:1111px;

    height:552px;

    display:block;

}

.room{

    fill:transparent;

    stroke:transparent;

    cursor:pointer;

    transition:.2s;

}

.room:hover{

    fill:rgba(193, 125, 63,.35);

    stroke:#c17d3f;

    stroke-width:2;

}

#tooltip{

    position:fixed;

    display:none;

    background:#222;

    color:#fff;

    padding:8px 12px;

    border-radius:6px;

    font-size:14px;

    pointer-events:none;

    z-index:9999;

}

.room{
    /*
     * !important нужен, т.к. у путей из экспорта Inkscape
     * задан инлайновый style="fill:none", который иначе
     * перебивает класс и ломает hit-area наведения.
     */
    fill: rgba(193, 125, 63,0) !important;
    stroke: #c17d3f !important;
    stroke-width:2 !important;
    cursor:pointer;
    transition:.2s;
}

.room:hover{
    fill: rgba(193, 125, 63,.35) !important;
    stroke:#c17d3f !important;
}

/* Свободное помещение (нет арендатора) — мягкий зелёный акцент */
.room--free{
    fill: rgba(79, 157, 110, .16) !important;
    stroke: #4f9d6e !important;
}

.room--free:hover{
    fill: rgba(79, 157, 110, .4) !important;
    stroke: #4f9d6e !important;
}

/* =========================
   BUILDING PLAN (FLOORS)
========================= */

.plan-page{
    display:flex;
    flex-direction:column;
    gap:24px;

    max-width:1200px;
    margin:0 auto;

    padding:40px 20px;
}

.plan-widget{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.plan-floors{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
}

.plan-floors__item{
    padding:10px 24px;

    background:#fff;
    color:#111;

    border:1px solid #ddd;
    border-radius:10px;

    font-weight:600;
    cursor:pointer;

    transition:.2s;
}

.plan-floors__item:hover{
    border-color:#c17d3f;
}

.plan-floors__item.active{
    background:#c17d3f;
    border-color:#c17d3f;
    color:#fff;
}

.plan-image{
    display:none;
    width:100%;
}

.plan-image.active{
    display:block;
}

.plan-image svg{
    width:100%;
    height:auto;

    display:block;
}

/* Полная страница плана — высота по содержимому, без центрирования по экрану */
.plan-widget--tabs .plan-wrapper{
    height:auto;
    padding:24px;
    border-radius:12px;
}

/* Слайдер плана на главной — компактная карточка */
.plan-widget--slider .plan-wrapper{
    height:auto;
    padding:16px;
    border-radius:8px;
}

@media (max-width: 768px){

    .plan-page{
        padding:28px 12px 32px;
        gap:16px;
    }

    .plan-floors{
        gap:8px;
    }

    .plan-floors__item{
        padding:8px 16px;
        font-size:14px;
    }

    .plan-widget--tabs .plan-wrapper,
    .plan-widget--slider .plan-wrapper{
        padding:10px;
    }

    .plan-slider-btn{
        width:42px;
        height:42px;
    }

}

.plan-slider-nav{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
}

.plan-slider-label{
    min-width:70px;

    color:#1c2e22;
    font-weight:600;
    text-align:center;
}

.plan-slider-btn{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    background:#fff;
    border:1px solid rgba(28, 46, 34,.15);
    border-radius:50%;

    color:#1c2e22;
    cursor:pointer;

    transition:.2s;
}

.plan-slider-btn:hover{
    background:#c17d3f;
    border-color:#c17d3f;
}

.plan-tooltip{
    position:fixed;
    display:none;
    background:#222;
    color:#fff;
    padding:8px 12px;
    border-radius:6px;
    font-size:14px;
    pointer-events:none;
    z-index:9999;
}

/* Карточка арендатора в тултипе (фото + название + площадь + описание) */
.plan-tooltip--card{
    width:240px;
    max-width:calc(100vw - 30px);

    padding:0;

    background:#fff;
    color:#1c2e22;

    border-radius:12px;
    overflow:hidden;

    box-shadow:0 15px 40px rgba(0,0,0,.18);
}

.plan-tooltip__image{
    display:block;
    width:100%;
    height:120px;

    object-fit:cover;
}

.plan-tooltip__body{
    padding:12px 14px;
}

.plan-tooltip__name{
    margin-bottom:4px;

    font-size:14px;
    font-weight:700;
    line-height:1.3;
}

.plan-tooltip__meta{
    margin-bottom:6px;

    color:#8a8f98;
    font-size:12px;
}

.plan-tooltip__description{
    color:#555;
    font-size:12px;
    line-height:1.4;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* =========================
   BREADCRUMBS
========================= */

.breadcrumbs{
    padding:14px 0;

    background:#f7f7f7;
    border-bottom:1px solid rgba(0,0,0,.06);
}

.breadcrumbs__inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;

    font-size:13px;
}

.breadcrumbs__link{
    color:#666;
    text-decoration:none;
    transition:.2s;
}

.breadcrumbs__link:hover{
    color:#c17d3f;
}

.breadcrumbs__sep{
    color:#c2c2c2;
    font-size:9px;
}

.breadcrumbs__current{
    color:#1c2e22;
    font-weight:600;

    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    max-width:60vw;
}

@media (max-width:576px){

    .breadcrumbs{
        padding:10px 0;
    }

    .breadcrumbs__inner{
        font-size:12px;
        gap:6px;
    }

}

/* =========================
   PRODUCT GALLERY
========================= */

.product-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:50px;
    align-items:start;
}

.product-gallery{
    display:flex;
    flex-direction:column;
    gap:16px;
    min-width:0;
}


/* Лента миниатюр */
.thumbs{
    display:flex;
    gap:12px;

    overflow-x:auto;
    overflow-y:hidden;

    flex-wrap:nowrap;

    scrollbar-width:thin;
    padding-bottom:6px;
}

.thumbs::-webkit-scrollbar{
    height:6px;
}

.thumbs::-webkit-scrollbar-thumb{
    background:#ccc;
    border-radius:20px;
}

.thumbs img{

    flex:0 0 auto;

    width:90px;
    height:90px;

    object-fit:cover;

    border-radius:12px;
    border:2px solid transparent;

    cursor:pointer;
    transition:.2s;
}

.thumbs img:hover,
.thumbs img.active{
    border-color:#c17d3f;
}

.product-info .btn{
    margin-top:25px;
}

@media (max-width:991px){

    .product-hero{
        padding:40px 0;
    }

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

    .product-info{
        order:2;
    }

    .product-gallery{
        order:1;
    }

    .product-info h1{
        font-size:30px;
    }

    .meta{
        flex-wrap:wrap;
        gap:10px;
    }

    .details-grid{
        grid-template-columns:1fr;
    }

}

@media (max-width:576px){

    .main-img{
        aspect-ratio:1/1;
        border-radius:14px;
    }

    .thumbs{
        gap:10px;
    }

    .thumbs img{
        width:72px;
        height:72px;
    }

    .product-info h1{
        font-size:26px;
        line-height:1.2;
    }

    .product-info p{
        font-size:15px;
    }

    .meta{
        font-size:14px;
    }

    .btn{
        width:100%;
    }

}

.main-img{
    width:100%;
    aspect-ratio:4/3;
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    background:#f5f5f5;
}

.main-img img{
    max-width:100%;
    max-height:100%;
    width:auto;
    height:auto;
    object-fit:contain;
}

/* =========================================
   RENT HERO
========================================= */

.rent-hero {
    padding: 100px 0;
    background: linear-gradient(
        135deg,
        rgba(28, 46, 34, .98),
        rgba(40, 64, 47, .96)
    );
    color: #fff;
    position: relative;
    overflow: hidden;
}

.rent-hero-content {
    position: relative;
    z-index: 2;

    max-width: 720px;
}

.rent-label {
    font-size: 12px;
    letter-spacing: 3px;

    color: #c17d3f;

    font-weight: 700;

    margin-bottom: 18px;
}

.rent-hero h1 {
    font-size: 52px;
    line-height: 1.05;

    font-weight: 800;

    margin-bottom: 20px;

    letter-spacing: -1px;
}

.rent-hero p {
    max-width: 620px;

    color: rgba(255, 255, 255, .75);

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================
   RENT SECTION
========================================= */

.rent-section {
    padding: 80px 0;
    background: #f7f7f7;
}

.rent-heading {
    display: flex;

    justify-content: space-between;
    align-items: flex-end;

    gap: 30px;

    margin-bottom: 40px;
}

.rent-heading-label {
    display: block;

    color: #8f6430;

    font-size: 11px;
    letter-spacing: 2px;

    font-weight: 700;

    margin-bottom: 10px;
}

.rent-heading h2 {
    font-size: 34px;
    line-height: 1.2;

    font-weight: 800;

    color: #1c2e22;
}

.rent-count {
    font-size: 30px;

    font-weight: 800;

    color: #c17d3f;

    white-space: nowrap;
}

.rent-count span {
    display: block;

    color: #777;

    font-size: 12px;

    font-weight: 500;

    text-align: right;

    margin-top: 2px;
}


/* =========================================
   GRID
========================================= */

.rent-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 24px;
}


/* =========================================
   CARD
========================================= */

.rent-card {
    background: #fff;

    border-radius: 16px;

    overflow: hidden;

    border: 1px solid #eee;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .05);

    transition: .25s ease;
}

.rent-card:hover {
    transform: translateY(-6px);

    box-shadow: 0 20px 45px rgba(0, 0, 0, .10);
}


/* =========================================
   IMAGE
========================================= */

.rent-card-image {
    height: 240px;

    background: #f1f1f1;

    position: relative;

    overflow: hidden;
}

.rent-card-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    display: block;

    transition: .35s ease;
}

.rent-card:hover .rent-card-image img {
    transform: scale(1.04);
}


/* =========================================
   PLACEHOLDER
========================================= */

.rent-card-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: linear-gradient(
        135deg,
        #f0f0f0,
        #e3e3e3
    );
}

.rent-card-placeholder span {
    width: 80px;
    height: 80px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #c17d3f,
        #d99f5f
    );

    color: #fff;

    font-size: 30px;

    font-weight: 800;
}


/* =========================================
   BODY
========================================= */

.rent-card-body {
    padding: 22px;
}

.rent-card-top {
    display: flex;

    justify-content: space-between;
    align-items: flex-start;

    gap: 15px;

    margin-bottom: 12px;
}

.rent-card h3 {
    font-size: 21px;

    line-height: 1.2;

    font-weight: 750;

    color: #1c2e22;
}

.rent-floor {
    flex-shrink: 0;

    font-size: 11px;

    color: #8f6430;

    white-space: nowrap;

    padding: 5px 9px;

    background: rgba(193, 125, 63, .10);

    border-radius: 20px;
}

.rent-floor i {
    margin-right: 3px;
}


/* =========================================
   DESCRIPTION
========================================= */

.rent-description {
    color: #666;

    font-size: 14px;

    line-height: 1.65;

    min-height: 46px;

    margin-bottom: 18px;
}


/* =========================================
   META
========================================= */

.rent-meta {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    padding-top: 15px;

    border-top: 1px solid #eee;

    color: #666;

    font-size: 13px;
}

.rent-meta div {
    display: flex;

    align-items: center;

    gap: 6px;
}

.rent-meta i {
    color: #c17d3f;
}


/* =========================================
   BUTTON
========================================= */

.rent-button {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-top: 18px;

    padding: 12px 15px;

    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #1c2e22,
        #28402f
    );

    color: #fff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: .2s;
}

.rent-button:hover {
    background: linear-gradient(
        135deg,
        #c17d3f,
        #d99f5f
    );

    color: #fff;
}


/* =========================================
   EMPTY
========================================= */

.rent-empty {
    background: #fff;

    border: 1px solid #eee;

    border-radius: 16px;

    padding: 70px 30px;

    text-align: center;
}

.rent-empty-icon {
    width: 70px;
    height: 70px;

    margin: 0 auto 20px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 14px;

    background: rgba(193, 125, 63, .10);

    color: #c17d3f;

    font-size: 26px;
}

.rent-empty h3 {
    color: #1c2e22;

    font-size: 22px;

    margin-bottom: 10px;
}

.rent-empty p {
    color: #777;

    font-size: 14px;
}


/* =========================================
   CTA
========================================= */

.rent-cta {
    padding: 80px 0;

    background: #fff;
}

.rent-cta-inner {
    display: flex;

    justify-content: space-between;
    align-items: center;

    gap: 40px;

    padding: 45px;

    border-radius: 18px;

    background: #f6f2ee;
}

.rent-cta h2 {
    font-size: 30px;

    line-height: 1.2;

    color: #1c2e22;

    margin-bottom: 12px;
}

.rent-cta p {
    max-width: 650px;

    color: #666;

    font-size: 14px;
}

.rent-cta-button {
    flex-shrink: 0;

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 15px 22px;

    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #c17d3f,
        #d99f5f
    );

    color: #fff;

    text-decoration: none;

    font-size: 14px;

    font-weight: 700;

    transition: .25s;
}

.rent-cta-button:hover {
    transform: translateY(-3px);

    box-shadow: 0 12px 25px rgba(
        193, 125, 63,
        .25
    );
}


/* =========================================================
   HISTORY PAGE
========================================================= */

.history-section{
    padding:90px 0;
}

.history-timeline{
    display:flex;
    flex-direction:column;
    gap:60px;

    margin-top:20px;
}

.history-item{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:50px;
}

.history-item__media{
    order:1;
}

.history-item__body{
    order:2;
}

.history-item--reverse .history-item__media{
    order:2;
}

.history-item--reverse .history-item__body{
    order:1;
}

.history-item__media img{
    display:block;
    width:100%;
    height:320px;

    object-fit:cover;
    border-radius:16px;

    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.history-item__placeholder{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;

    height:320px;

    background:#f6f2ee;
    border:1px dashed rgba(143, 100, 48,.4);
    border-radius:16px;

    color:#8f6430;
}

.history-item__placeholder i{
    font-size:34px;
}

.history-item__placeholder span{
    font-size:22px;
    font-weight:700;
    letter-spacing:1px;
}

.history-item__year{
    display:inline-block;
    margin-bottom:12px;

    padding:6px 14px;
    border-radius:20px;

    background:rgba(193, 125, 63,.14);
    color:#8f6430;

    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
}

.history-item__body h3{
    margin-bottom:14px;

    color:#1c2e22;
    font-size:26px;
    font-weight:700;
    line-height:1.25;
}

.history-item__body p{
    color:#555;
    font-size:15px;
    line-height:1.7;
}

@media (max-width:992px){

    .history-item{
        gap:30px;
    }

    .history-item__media img,
    .history-item__placeholder{
        height:260px;
    }

    .history-item__body h3{
        font-size:22px;
    }

}

@media (max-width:768px){

    .history-section{
        padding:60px 0;
    }

    .history-timeline{
        gap:36px;
    }

    .history-item{
        grid-template-columns:1fr;
        gap:18px;
    }

    .history-item--reverse .history-item__media{
        order:1;
    }

    .history-item--reverse .history-item__body{
        order:2;
    }

    .history-item__media img,
    .history-item__placeholder{
        height:220px;
    }

}


/* =========================================
   TABLET
========================================= */

@media (max-width: 992px) {

    .rent-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rent-hero {
        padding: 80px 0;
    }

    .rent-hero h1 {
        font-size: 40px;
    }

    .rent-cta-inner {
        flex-direction: column;

        align-items: flex-start;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 576px) {

    .rent-section {
        padding: 60px 0;
    }

    .rent-hero {
        padding: 65px 0;
    }

    .rent-hero h1 {
        font-size: 32px;
    }

    .rent-hero p {
        font-size: 15px;
    }

    .rent-heading {
        align-items: flex-start;

        flex-direction: column;
    }

    .rent-heading h2 {
        font-size: 27px;
    }

    .rent-count span {
        text-align: left;
    }

    .rent-grid {
        grid-template-columns: 1fr;
    }

    .rent-card-image {
        height: 220px;
    }

    .rent-cta {
        padding: 60px 0;
    }

    .rent-cta-inner {
        padding: 28px;
    }

    .rent-cta h2 {
        font-size: 25px;
    }

    .rent-cta-button {
        width: 100%;

        justify-content: center;
    }

}

.card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f1f1;
    color: #c17d3f;
    font-size: 40px;
}

.card-description {
    margin: 10px 0 16px;
    color: #666;
    font-size: 14px;
    line-height: 1.5;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;

    box-shadow: 0 10px 30px rgba(0,0,0,0.06);

    transition: 0.25s;
}

.card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

.card a {
    text-decoration: none;
    color: black;
}

.card-img {
    width: 100%;
    height: 280px;
    object-fit: cover;

    display: block;

    background: linear-gradient(
        135deg,
        #e9e9e9,
        #dcdcdc
    );
}

.card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #c17d3f;
    font-size: 40px;
}

.card-body {
    padding: 18px;
}

.card-body h4 {
    font-size: 22px;
    margin-bottom: 12px;
    color: #1c2e22;
}

.card-description {
    color: #666;
    font-size: 14px;
    line-height: 1.5;

    margin-bottom: 14px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;

    overflow: hidden;
}

.card-meta {
    display: flex;
    justify-content: space-between;

    font-size: 13px;
    color: #666;

    margin-bottom: 12px;
}

.card-meta i {
    color: #c17d3f;
    margin-right: 5px;
}

.card-btn {
    width: 100%;
    padding: 12px;

    background: linear-gradient(
        135deg,
        #1c2e22,
        #28402f
    );

    color: #fff;

    border: none;
    border-radius: 10px;

    cursor: pointer;

    font-weight: 600;

    transition: 0.2s;
}

.card-btn:hover {
    background: linear-gradient(
        135deg,
        #c17d3f,
        #d99f5f
    );

    color: #fff;
}

@media (max-width: 992px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .card-grid {
        grid-template-columns: 1fr;
    }

    .card-img {
        height: 220px;
    }
}

/* =========================================================
   CONTACT PAGE
========================================================= */

/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {
    padding: 80px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 60px;
    align-items: start;
}


/* =========================================================
   CONTACT INFO
========================================================= */

.contact-info {
    padding-top: 10px;
}

.contact-heading-label {
    display: block;
    margin-bottom: 12px;
    color: #c17d3f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.contact-info h2,
.contact-heading h2 {
    margin: 0 0 18px;
    color: #1c1c1c;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
}

.contact-description {
    max-width: 520px;
    margin: 0 0 38px;
    color: #6d6d6d;
    font-size: 16px;
    line-height: 1.7;
}

.contact-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-item-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #1c2e22;
    color: #d99f5f;
    border-radius: 12px;
    font-size: 17px;
}

.contact-item div:last-child {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.contact-item span {
    color: #888;
    font-size: 13px;
}

.contact-item strong,
.contact-item a {
    color: #1c1c1c;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 600;
    text-decoration: none;
}

.contact-item a {
    transition: color .2s ease;
}

.contact-item a:hover {
    color: #c17d3f;
}


/* =========================================================
   CONTACT FORM
========================================================= */

.contact-form-wrapper {
    padding: 34px;
    background: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .06);
}

.contact-form-header {
    margin-bottom: 28px;
}

.contact-form-header > span {
    display: block;
    margin-bottom: 10px;
    color: #c17d3f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.contact-form-header h2 {
    margin: 0 0 8px;
    color: #1c1c1c;
    font-size: 30px;
    line-height: 1.2;
}

.contact-form-header p {
    margin: 0;
    color: #777;
    font-size: 15px;
    line-height: 1.5;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-form-group label {
    color: #303030;
    font-size: 14px;
    font-weight: 600;
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 13px 15px;

    background: #fafafa;
    border: 1px solid #dedede;
    border-radius: 10px;

    color: #1c1c1c;
    font-family: inherit;
    font-size: 15px;

    outline: none;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}

.contact-form-group input,
.contact-form-group select {
    height: 48px;
}

.contact-form-group textarea {
    min-height: 130px;
    resize: vertical;
    line-height: 1.5;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #aaa;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
    background: #fff;
    border-color: #c17d3f;
    box-shadow: 0 0 0 3px rgba(193, 125, 63, .12);
}


/* =========================================================
   CHECKBOX
========================================================= */

.contact-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;

    color: #777;
    font-size: 13px;
    line-height: 1.5;

    cursor: pointer;
}

.contact-checkbox input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    margin-top: 1px;

    accent-color: #1c2e22;
}


/* =========================================================
   FORM ERROR
========================================================= */

.contact-error {
    color: #b3261e;
    font-size: 12px;
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 20px;

    border: 0;
    border-radius: 10px;

    background: linear-gradient(
        135deg,
        #1c2e22,
        #28402f
    );

    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.contact-submit:hover {
    background: linear-gradient(
        135deg,
        #c17d3f,
        #a8672f
    );

    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
}

.contact-submit i {
    font-size: 13px;
}


/* =========================================================
   MAP
========================================================= */

.contact-map-section {
    padding: 0 0 80px;
}

.contact-heading {
    margin-bottom: 28px;
}

.contact-map {
    width: 100%;
    min-height: 380px;

    overflow: hidden;

    background: #e9e9e9;
    border-radius: 18px;
}

.contact-map-placeholder {
    min-height: 380px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #eeeeee,
            #e3e3e3
        );

    color: #555;
}

.contact-map-placeholder i {
    margin-bottom: 18px;
    color: #c17d3f;
    font-size: 42px;
}

.contact-map-placeholder h3 {
    margin: 0 0 8px;
    color: #1c2e22;
    font-size: 22px;
}

.contact-map-placeholder p {
    margin: 0;
    color: #777;
}


/* =========================================================
   CTA
========================================================= */

.contact-cta {
    padding: 0 0 80px;
}

.contact-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;

    padding: 42px 48px;

    background: #1c2e22;
    border-radius: 18px;
    color: #fff;
}

.contact-cta-inner .contact-heading-label {
    color: #d99f5f;
}

.contact-cta-inner h2 {
    margin: 0 0 10px;
    font-size: 30px;
    line-height: 1.2;
}

.contact-cta-inner p {
    max-width: 650px;
    margin: 0;
    color: rgba(255, 255, 255, .72);
    font-size: 15px;
    line-height: 1.6;
}

.contact-cta-button {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    padding: 14px 22px;

    background: #c17d3f;
    color: #fff;

    border-radius: 10px;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition:
        background .2s ease,
        transform .2s ease;
}

.contact-cta-button:hover {
    background: #a8672f;
    color: #fff;
    transform: translateY(-2px);
}


/* =========================================================
   ADAPTIVE
========================================================= */

@media (max-width: 992px) {

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .contact-info {
        padding-top: 0;
    }

    .contact-form-wrapper {
        max-width: none;
    }

    .contact-cta-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .contact-cta-button {
        width: 100%;
    }

}


@media (max-width: 576px) {

    .contact-hero {
        padding: 65px 0;
    }

    .contact-hero h1 {
        font-size: 40px;
    }

    .contact-hero p {
        font-size: 16px;
    }

    .contact-section {
        padding: 55px 0;
    }

    .contact-info h2,
    .contact-heading h2 {
        font-size: 28px;
    }

    .contact-form-wrapper {
        padding: 22px 18px;
        border-radius: 14px;
    }

    .contact-form-header h2 {
        font-size: 25px;
    }

    .contact-map,
    .contact-map-placeholder {
        min-height: 300px;
    }

    .contact-cta {
        padding-bottom: 55px;
    }

    .contact-cta-inner {
        padding: 30px 22px;
        border-radius: 14px;
    }

    .contact-cta-inner h2 {
        font-size: 25px;
    }

}

/* =========================
   HEADER / LOGO
========================= */

.header {
    height: 96px;
    padding: 0 !important;
}

.header-inner {
    height: 96px;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    height: 96px;
    flex-shrink: 0;
    overflow: visible;
}

.logo img {
    display: block;

    width: 280px;
    height: 76px;

    object-fit: contain;
    object-position: left center;

    max-width: none;
}

/* =========================================================
   MOBILE HEADER
========================================================= */

/* DESKTOP */

.mobile-menu-btn,
.mobile-menu {
    display: none;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 992px) {

    .header {
        height: 76px;
        padding: 0 !important;

        position: sticky;
        top: 0;
        z-index: 1000;

        background: rgba(255, 255, 255, .88);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        border-bottom: 1px solid rgba(0, 0, 0, .07);
    }

    .header-inner {
        height: 76px;
        padding: 0 16px !important;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 15px;
    }


    /* =========================
       LOGO
    ========================= */

    .logo {
        height: 60px;
        width: auto;

        display: flex;
        align-items: center;

        flex-shrink: 1;
        overflow: visible;
    }

    .logo img {
        display: block;

        width: 210px;
        height: 58px;

        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }


    /* =========================
       DESKTOP ELEMENTS
    ========================= */

    .header .nav {
        display: none;
    }

    .header-right {
        display: none;
    }


    /* =========================
       BURGER
    ========================= */

    .mobile-menu-btn {
        width: 46px;
        height: 46px;

        flex: 0 0 46px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 5px;

        padding: 0;

        background: #1c2e22;
        border: none;
        border-radius: 12px;

        cursor: pointer;

        transition: .2s;
    }

    .mobile-menu-btn:hover {
        background: #28402f;
    }

    .mobile-menu-btn span {
        display: block;

        width: 20px;
        height: 2px;

        background: #fff;
        border-radius: 2px;

        transition: .25s ease;
    }


    /* BURGER -> X */

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

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
    }

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


    /* =====================================================
       MOBILE MENU
    ===================================================== */

    .mobile-menu {
        position: fixed;
        inset: 0;

        display: block;

        visibility: hidden;
        opacity: 0;

        z-index: 2000;

        pointer-events: none;

        transition:
            opacity .25s ease,
            visibility .25s ease;
    }

    .mobile-menu.active {
        visibility: visible;
        opacity: 1;

        pointer-events: auto;
    }


    /* =========================
       OVERLAY
    ========================= */

    .mobile-menu-overlay {
        position: absolute;
        inset: 0;

        background: rgba(18, 32, 26, .55);

        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);

        opacity: 0;

        transition: opacity .3s ease;
    }

    .mobile-menu.active .mobile-menu-overlay {
        opacity: 1;
    }


    /* =========================
       PANEL
    ========================= */

    .mobile-menu-panel {
        position: absolute;

        top: 0;
        right: 0;

        width: min(390px, 88vw);
        height: 100%;

        display: flex;
        flex-direction: column;

        background: #fff;

        box-shadow: -15px 0 50px rgba(0, 0, 0, .18);

        transform: translateX(100%);

        transition: transform .3s cubic-bezier(.4, 0, .2, 1);

        overflow-y: auto;
    }

    .mobile-menu.active .mobile-menu-panel {
        transform: translateX(0);
    }


    /* =========================
       MOBILE MENU HEADER
    ========================= */

    .mobile-menu-header {
        height: 82px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 20px;

        border-bottom: 1px solid #eee;

        flex-shrink: 0;
    }

    .mobile-menu-logo {
        display: flex;
        align-items: center;

        height: 60px;

        text-decoration: none;
    }

    .mobile-menu-logo img {
        display: block;

        width: 190px;
        height: 55px;

        object-fit: contain;
        object-position: left center;
    }


    /* =========================
       CLOSE
    ========================= */

    .mobile-menu-close {
        width: 42px;
        height: 42px;

        position: relative;

        flex: 0 0 42px;

        border: none;
        border-radius: 10px;

        background: #f3f3f3;

        cursor: pointer;
    }

    .mobile-menu-close span {
        position: absolute;

        left: 11px;
        top: 20px;

        width: 20px;
        height: 2px;

        background: #1c2e22;

        border-radius: 2px;
    }

    .mobile-menu-close span:first-child {
        transform: rotate(45deg);
    }

    .mobile-menu-close span:last-child {
        transform: rotate(-45deg);
    }


    /* =========================
       NAVIGATION
    ========================= */

    .mobile-nav {
        display: flex;
        flex-direction: column;

        padding: 20px;
    }

    .mobile-nav a {
        min-height: 62px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0 4px;

        color: #1c2e22;
        text-decoration: none;

        font-size: 19px;
        font-weight: 600;

        border-bottom: 1px solid #eee;

        transition: .2s ease;
    }

    .mobile-nav a i {
        color: #aaa;

        font-size: 14px;

        transition: .2s ease;
    }

    .mobile-nav a:hover {
        color: #c17d3f;
    }

    .mobile-nav a:hover i {
        color: #c17d3f;
        transform: translateX(4px);
    }

    .mobile-nav a.active {
        color: #c17d3f;
    }

    .mobile-nav a.active i {
        color: #c17d3f;
    }


    /* =========================
       BOTTOM
    ========================= */

    .mobile-menu-bottom {
        margin-top: auto;

        padding: 20px;

        display: flex;
        flex-direction: column;

        gap: 14px;

        background: #f7f7f7;

        border-top: 1px solid #eee;
    }

    .mobile-phone {
        display: flex;
        align-items: center;
        gap: 10px;

        color: #1c2e22;

        text-decoration: none;

        font-size: 16px;
        font-weight: 600;
    }

    .mobile-phone i {
        color: #c17d3f;
    }

    .mobile-application-btn {
        width: 100%;

        min-height: 52px;

        border: none;
        border-radius: 10px;

        background: linear-gradient(
            135deg,
            #c17d3f,
            #d99f5f
        );

        color: #fff;

        font-family: inherit;
        font-size: 14px;
        font-weight: 700;

        cursor: pointer;

        transition: .2s;
    }

    .mobile-application-btn:hover {
        transform: translateY(-2px);

        box-shadow:
            0 10px 25px rgba(193, 125, 63, .25);
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .header {
        height: 70px;
    }

    .header-inner {
        height: 70px;

        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .logo {
        height: 54px;
    }

    .logo img {
        width: 185px;
        height: 52px;
    }

    .mobile-menu-btn {
        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 11px;
    }

    .mobile-menu-panel {
        width: 100%;
    }

    .mobile-menu-header {
        height: 76px;

        padding: 0 16px;
    }

    .mobile-menu-logo img {
        width: 180px;
        height: 52px;
    }

    .mobile-nav {
        padding: 15px 18px;
    }

    .mobile-nav a {
        min-height: 60px;

        font-size: 18px;
    }

    .mobile-menu-bottom {
        padding: 18px;
    }

}


/* =========================================================
   PREVENT BODY SCROLL WHEN MENU OPEN
========================================================= */

body.mobile-menu-open {
    overflow: hidden;
}

/* =========================================================
   FIX MOBILE HEADER
========================================================= */

@media (max-width: 992px) {

    .header {
        height: 76px !important;
        padding: 0 !important;
    }

    .header-inner {
        width: 100% !important;
        height: 76px !important;

        display: flex !important;
        flex-direction: row !important;

        align-items: center !important;
        justify-content: space-between !important;

        gap: 0 !important;

        padding: 0 16px !important;
    }

    .logo {
        display: flex !important;

        width: auto !important;
        height: 60px !important;

        flex: 0 1 auto !important;
        flex-shrink: 1 !important;

        align-items: center !important;

        overflow: visible !important;
    }

    .logo img {
        display: block !important;

        width: 210px !important;
        height: 58px !important;

        max-width: 100% !important;

        object-fit: contain !important;
        object-position: left center !important;
    }

    /* прячем десктоп */
    .header .nav {
        display: none !important;
    }

    .header .header-right {
        display: none !important;
    }

    /* БУРГЕР */
    .mobile-menu-btn {
        display: flex !important;

        width: 46px !important;
        height: 46px !important;

        min-width: 46px !important;
        max-width: 46px !important;

        flex: 0 0 46px !important;

        margin-left: auto !important;

        flex-direction: column !important;

        align-items: center !important;
        justify-content: center !important;

        gap: 5px !important;

        padding: 0 !important;

        background: #1c2e22 !important;
        border: none !important;
        border-radius: 12px !important;
    }

    .mobile-menu-btn span {
        display: block !important;

        width: 20px !important;
        height: 2px !important;

        margin: 0 !important;

        background: #fff !important;
        border-radius: 2px !important;
    }
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 576px) {

    .header {
        height: 70px !important;
    }

    .header-inner {
        height: 70px !important;

        flex-direction: row !important;

        padding: 0 14px !important;
    }

    .logo {
        height: 54px !important;

        flex: 0 1 auto !important;
    }

    .logo img {
        width: 185px !important;
        height: 52px !important;
    }

    .mobile-menu-btn {
        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        max-width: 44px !important;

        flex: 0 0 44px !important;

        margin-left: auto !important;
    }
}

/* =========================================================
   MOBILE MENU BUTTON — RODINA SPACE
========================================================= */

@media (max-width: 992px) {

    .mobile-menu-btn {
        display: flex !important;

        width: 42px !important;
        height: 42px !important;

        min-width: 42px !important;
        max-width: 42px !important;
        flex: 0 0 42px !important;

        margin-left: auto !important;
        padding: 0 !important;

        align-items: center !important;
        justify-content: center !important;

        flex-direction: column !important;
        gap: 6px !important;

        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;

        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-btn span {
        display: block !important;

        width: 24px !important;
        height: 1.5px !important;

        margin: 0 !important;

        background: #1c2e22 !important;

        border-radius: 10px;

        transition:
            transform 0.25s ease,
            opacity 0.2s ease,
            width 0.25s ease;
    }

    .mobile-menu-btn:hover span {
        width: 27px !important;
    }

    /* Открытое меню — крестик */
    .mobile-menu-btn.active {
        gap: 0 !important;
    }

    .mobile-menu-btn.active span:nth-child(1) {
        transform: translateY(1px) rotate(45deg);
    }

    .mobile-menu-btn.active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .mobile-menu-btn.active span:nth-child(3) {
        transform: translateY(-1px) rotate(-45deg);
    }
}

@media (max-width: 576px) {

    .mobile-menu-btn {
        width: 40px !important;
        height: 40px !important;

        min-width: 40px !important;
        max-width: 40px !important;
        flex: 0 0 40px !important;
    }

    .mobile-menu-btn span {
        width: 23px !important;
    }
}

/* =========================================================
   APPLICATION MODAL
========================================================= */

.application-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    visibility: hidden;
    opacity: 0;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;
}

.application-modal.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.application-modal__overlay {
    position: absolute;
    inset: 0;

    background: rgba(20, 27, 42, .48);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.application-modal__dialog {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 520px;

    max-height: calc(100vh - 40px);
    overflow-y: auto;

    background: #fff;

    border: 1px solid rgba(28, 46, 34, .08);
    border-radius: 28px;

    box-shadow: 0 30px 80px rgba(20, 27, 42, .20);

    transform: translateY(20px) scale(.97);

    transition:
        transform .3s cubic-bezier(.22, 1, .36, 1);
}

.application-modal.is-open .application-modal__dialog {
    transform: translateY(0) scale(1);
}

.application-modal__content {
    padding: 42px;
}

.application-modal__label {
    display: inline-flex;

    margin-bottom: 18px;
    padding: 7px 11px;

    background: rgba(193, 125, 63, .12);
    color: #a8672f;

    border-radius: 8px;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.application-modal__title {
    margin: 0 0 12px;

    color: #1c2e22;

    font-family: "Inter", sans-serif;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.035em;
}

.application-modal__description {
    max-width: 430px;

    margin: 0 0 28px;

    color: #697181;

    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.65;
}


/* Кнопка закрытия */

.application-modal__close {
    position: absolute;
    top: 18px;
    right: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    padding: 0;

    background: #f5f5f3;

    border: 0;
    border-radius: 11px;

    cursor: pointer;

    transition:
        background .2s ease,
        transform .2s ease;
}

.application-modal__close:hover {
    background: #ecebe8;
    transform: rotate(90deg);
}

.application-modal__close span {
    position: absolute;

    width: 16px;
    height: 1.5px;

    background: #1c2e22;

    border-radius: 2px;
}

.application-modal__close span:first-child {
    transform: rotate(45deg);
}

.application-modal__close span:last-child {
    transform: rotate(-45deg);
}


/* Форма */

.application-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.application-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.application-form__field label {
    color: #1c2e22;

    font-family: "Inter", sans-serif;
    font-size: 12px;
    font-weight: 600;
}

.application-form__field input,
.application-form__field textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 14px 15px;

    background: #f7f7f5;

    border: 1px solid transparent;
    border-radius: 12px;

    outline: none;

    color: #1c2e22;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 400;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.application-form__field input {
    height: 48px;
}

.application-form__field textarea {
    min-height: 88px;
    resize: vertical;
}

.application-form__field input::placeholder,
.application-form__field textarea::placeholder {
    color: #a3a7ae;
}

.application-form__field input:focus,
.application-form__field textarea:focus {
    background: #fff;

    border-color: rgba(193, 125, 63, .65);

    box-shadow: 0 0 0 3px rgba(193, 125, 63, .10);
}


/* Отправить */

.application-form__submit {
    width: 100%;
    height: 50px;

    margin-top: 4px;

    background: #c17d3f;
    color: #fff;

    border: 1px solid #c17d3f;
    border-radius: 13px;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.application-form__submit:hover {
    background: #dba876;

    transform: translateY(-1px);

    box-shadow: 0 8px 22px rgba(193, 125, 63, .25);
}

.application-form__submit:active {
    transform: translateY(0);
}

.application-form__submit:disabled {
    opacity: .65;
    cursor: default;
    transform: none;
}


/* Текст под формой */

.application-form__privacy {
    margin-top: -4px;

    color: #a1a5ac;

    font-family: "Inter", sans-serif;
    font-size: 10px;
    line-height: 1.5;

    text-align: center;
}


/* Блокировка страницы */

body.application-modal-open {
    overflow: hidden;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .application-modal {
        align-items: flex-end;
        padding: 0;
    }

    .application-modal__dialog {
        max-width: none;
        max-height: calc(100dvh - 10px);

        border-radius: 26px 26px 0 0;

        transform: translateY(30px);
    }

    .application-modal.is-open .application-modal__dialog {
        transform: translateY(0);
    }

    .application-modal__content {
        padding: 34px 22px 28px;
    }

    .application-modal__title {
        font-size: 26px;
    }

    .application-modal__description {
        font-size: 13px;
        margin-bottom: 24px;
    }

    .application-modal__close {
        top: 14px;
        right: 14px;
    }
}

.application-form-success {
    padding: 20px 0 10px;

    text-align: center;
}

.application-form-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;

    margin: 0 auto 20px;

    background: rgba(193, 125, 63, .15);
    color: #a8672f;

    border-radius: 50%;

    font-size: 25px;
    font-weight: 500;
}

.application-form-success__title {
    margin-bottom: 10px;

    color: #1c2e22;

    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.025em;
}

.application-form-success__text {
    color: #737985;

    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.6;
}

.contact-form-success {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
}

.contact-form-success__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    background: rgba(193, 125, 63, 0.14);
    color: #a8672f;
    border-radius: 50%;
    font-size: 26px;
}

.contact-form-success h3 {
    margin: 0 0 10px;
    color: #1c2e22;
    font-family: "Inter", sans-serif;
    font-size: 24px;
    font-weight: 600;
}

.contact-form-success p {
    max-width: 360px;
    margin: 0;
    color: #737985;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

.cta {
    padding: 100px 0;
    background: #f7f7f7;
}

.cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 70px;
    align-items: center;
}

.cta-content {
    max-width: 500px;
}

.cta-label {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 13px;
    margin-bottom: 22px;
    background: rgba(193, 125, 63, 0.12);
    border: 1px solid rgba(193, 125, 63, 0.2);
    border-radius: 999px;
    color: #a8672f;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.cta-content h2 {
    margin: 0 0 18px;
    color: #1c2e22;
    font-family: "Inter", sans-serif;
    font-size: clamp(32px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: -0.04em;
}

.cta-content p {
    max-width: 430px;
    margin: 0 0 30px;
    color: #737985;
    font-family: "Inter", sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

.cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 52px;
    padding: 0 23px;
    background: #c17d3f;
    border: 1px solid #c17d3f;
    border-radius: 14px;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(193, 125, 63, 0.18);
    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.cta-btn i {
    font-size: 12px;
    transition: transform .25s ease;
}

.cta-btn:hover {
    background: #dba876;
    border-color: #dba876;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(193, 125, 63, 0.25);
}

.cta-btn:hover i {
    transform: translateX(3px);
}

.map h3 {
    margin: 0 0 18px;
    color: #1c2e22;
    font-family: "Inter", sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.025em;
}

.map-box {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    border: 1px solid rgba(28, 46, 34, 0.08);
    box-shadow: 0 20px 50px rgba(20, 27, 42, 0.08);
}

.map-box iframe {
    display: block;
    width: 100%;
    height: 320px;
    border: 0;
}

@media (max-width: 992px) {
    .cta {
        padding: 75px 0;
    }

    .cta-inner {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .cta-content {
        max-width: 650px;
    }
}

@media (max-width: 576px) {
    .cta {
        padding: 60px 0;
    }

    .cta-inner {
        gap: 38px;
    }

    .cta-content h2 {
        font-size: 32px;
    }

    .cta-content p {
        font-size: 14px;
    }

    .cta-btn {
        width: 100%;
        min-height: 54px;
    }

    .map h3 {
        font-size: 20px;
    }

    .map-box {
        border-radius: 20px;
    }

    .map-box iframe {
        height: 280px;
    }
}

/* =========================================================
   АРЕНДАТОРЫ — СЛАЙДЕР
   ========================================================= */

.cards {
    width: 100%;
    padding: 80px 0;
}

.cards .container {
    position: relative;
}

.cards .section-title {
    margin-bottom: 35px;
}

/* =========================================================
   СЛАЙДЕР
   ========================================================= */

.cards-slider {
    position: relative;
    width: 100%;
}

/* Лента карточек */

.cards-slider .card-grid {
    display: flex;
    align-items: stretch;
    gap: 24px;
    width: 100%;
    overflow: hidden;
    scrollbar-width: none;
}

.cards-slider .card-grid::-webkit-scrollbar {
    display: none;
}

/* =========================================================
   КАРТОЧКА
   ========================================================= */

.cards-slider .card {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
}

.cards-slider .card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Убираем только затемнение при наведении,
   не меняя остальные стили карточки */

.cards-slider .card:hover,
.cards-slider .card:hover::before,
.cards-slider .card:hover::after,
.cards-slider .card > a:hover::before,
.cards-slider .card > a:hover::after {
    filter: none;
}

.cards-slider .card:hover::before,
.cards-slider .card:hover::after,
.cards-slider .card > a:hover::before,
.cards-slider .card > a:hover::after {
    opacity: 0 !important;
    background: transparent !important;
}

/* =========================================================
   КАРТИНКА
   ========================================================= */

.cards-slider .card-img {
    display: block;
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 24px 24px 0 0;
}

/* =========================================================
   ТЕЛО КАРТОЧКИ
   ========================================================= */

.cards-slider .card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px;
}

/* Название */

.cards-slider .card-body h4 {
    margin: 0 0 16px;
    color: #1c2e22;
    font-family: "Inter", sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

/* =========================================================
   МЕТА
   ========================================================= */

.cards-slider .card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.cards-slider .card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #737985;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

.cards-slider .card-meta i {
    color: #c17d3f;
    font-size: 12px;
}

/* =========================================================
   КНОПКА КАРТОЧКИ
   ========================================================= */

.cards-slider .card-btn {
    margin-top: auto;
    align-self: flex-start;

    min-height: 42px;
    padding: 0 18px;

    background: #1c2e22;
    border: 1px solid #1c2e22;
    border-radius: 12px;

    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.cards-slider .card-btn:hover {
    background: #c17d3f;
    border-color: #c17d3f;
    color: #fff;
    transform: translateY(-1px);
}

/* =========================================================
   СТРЕЛКИ
   ========================================================= */

.cards-slider-btn {
    position: absolute;
    top: 50%;
    z-index: 20;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    min-width: 46px;
    padding: 0;

    background: #fff;
    border: 1px solid rgba(28, 46, 34, .10);
    border-radius: 50%;

    color: #1c2e22;
    font-size: 13px;

    cursor: pointer;

    transform: translateY(-50%);

    box-shadow: 0 8px 25px rgba(20, 27, 42, .10);

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

/* Левая стрелка */

.cards-slider-prev {
    left: -68px;
}

/* Правая стрелка */

.cards-slider-next {
    right: -68px;
}

/* Hover стрелок */

.cards-slider-btn:hover {
    background: #c17d3f;
    border-color: #c17d3f;
    color: #fff;

    transform: translateY(-50%) scale(1.05);

    box-shadow: 0 12px 28px rgba(20, 27, 42, .14);
}

/* Неактивная стрелка */

.cards-slider-btn:disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}

/* =========================================================
   ПЛАНШЕТ
   ========================================================= */

@media (max-width: 1200px) {

    .cards-slider-prev {
        left: -52px;
    }

    .cards-slider-next {
        right: -52px;
    }

}

/* =========================================================
   ПЛАНШЕТ — 2 КАРТОЧКИ
   ========================================================= */

@media (max-width: 992px) {

    .cards {
        padding: 70px 0;
    }

    .cards-slider .card-grid {
        gap: 24px;
    }

    .cards-slider .card {
        flex: 0 0 calc((100% - 24px) / 2);
    }

    .cards-slider .card-img {
        height: 240px;
    }

    .cards-slider-prev {
        left: -52px;
    }

    .cards-slider-next {
        right: -52px;
    }

}

/* =========================================================
   МОБИЛЬНЫЙ
   ========================================================= */

@media (max-width: 768px) {

    .cards {
        padding: 60px 0;
    }

    .cards .section-title {
        margin-bottom: 28px;
    }

    .cards-slider .card {
        flex: 0 0 100%;
    }

    .cards-slider .card-grid {
        gap: 0;
    }

    .cards-slider .card-img {
        height: 230px;
        border-radius: 20px 20px 0 0;
    }

    .cards-slider .card-body {
        padding: 20px;
    }

    /* Стрелки поверх слайдера */

    .cards-slider-prev {
        left: 10px;
    }

    .cards-slider-next {
        right: 10px;
    }

    .cards-slider-btn {
        width: 42px;
        height: 42px;
        min-width: 42px;
    }

}

/* =========================================================
   МАЛЕНЬКИЙ ТЕЛЕФОН
   ========================================================= */

@media (max-width: 576px) {

    .cards {
        padding: 50px 0;
    }

    .cards-slider .card-img {
        height: 210px;
    }

    .cards-slider .card-body h4 {
        font-size: 18px;
    }

    .cards-slider .card-meta {
        gap: 10px;
    }

    .cards-slider .card-meta span {
        font-size: 12px;
    }

    .cards-slider .card-btn {
        min-height: 40px;
        padding: 0 16px;
        font-size: 12px;
    }

    .cards-slider-btn {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 11px;
    }

    .cards-slider-prev {
        left: 8px;
    }

    .cards-slider-next {
        right: 8px;
    }

}