/* ============================================================
 БАНЯДОМ — лендинг «Строительство бань под ключ»
 Палитра: тёплое дерево #201712 + янтарь #D97A2B
 Шрифты: Unbounded (заголовки) + Manrope (текст)
 ============================================================ */
:root {
--bg: #201712; --bg-deep: #1a120d; --surface: #2a1f17; --surface-2: #342719; --footer-bg: #150f0a; --amber: #D97A2B; --amber-light: #F0A055; --amber-dark: #a85a15; --white: #ffffff; --text: #E8E3DB; --muted: rgba(232, 227, 219, 0.62); --muted-2: rgba(232, 227, 219, 0.42); --line: rgba(255, 255, 255, 0.09); --amber-line: rgba(217, 122, 43, 0.3); --radius: 16px; --radius-sm: 10px; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --shadow-lg: 0 22px 50px rgba(0, 0, 0, 0.5); --glow: 0 10px 30px rgba(217, 122, 43, 0.28); --container: 1200px; --topbar-h: 40px; --header-h: 76px; --header-h-compact: 64px; --transition: 0.28s ease; --font-body: "Manrope", "Segoe UI", Roboto, sans-serif; --font-display: "Unbounded", "Manrope", "Segoe UI", sans-serif; }
/* ---------- Сброс и база ---------- */
*, *::before, *::after {
box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth; scrollbar-color: rgba(217, 122, 43, 0.5) var(--bg-deep); }
body {
font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.65; font-size: 16px; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 {
font-family: var(--font-display); line-height: 1.22; font-weight: 700; color: var(--white); }
img, svg {
max-width: 100%; display: block; }
a {
color: inherit; text-decoration: none; transition: color var(--transition); }
ul, ol {
list-style: none; }
button {
font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea {
font-family: inherit; font-size: 1rem; color: var(--white); }
::selection {
background: rgba(217, 122, 43, 0.4); color: var(--white); }
::-webkit-scrollbar {
width: 10px; }
::-webkit-scrollbar-track {
background: var(--bg-deep); }
::-webkit-scrollbar-thumb {
background: rgba(217, 122, 43, 0.45); border-radius: 6px; }
:focus-visible {
outline: 2px solid var(--amber); outline-offset: 2px; }
.container {
width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.icon {
flex-shrink: 0; }
section[id] {
scroll-margin-top: calc(var(--header-h-compact) + 16px); }
[data-reveal] {
opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; transition-delay: var(--reveal-delay, 0ms); }
[data-reveal].is-revealed {
opacity: 1; transform: none; }
/* ============================================================
 Прелоадер
 ============================================================ */
.preloader {
position: fixed; inset: 0; z-index: 1200; background: radial-gradient(circle at 50% 42%, #2a1f17 0%, #150f0a 70%); display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; }
.preloader.is-hidden {
opacity: 0; visibility: hidden; pointer-events: none; }
.preloader__box {
text-align: center; padding: 20px; }
.preloader__mark {
margin: 0 auto 18px; }
.preloader__stroke {
stroke-dasharray: 130; stroke-dashoffset: 130; animation: pl-draw 1.4s ease forwards; }
.preloader__stroke--d2 {
animation-delay: .25s; }
.preloader__dot {
animation: pl-pulse 1.2s ease-in-out infinite; transform-origin: 36px 34px; }
.preloader__brand {
font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.34em; color: var(--white); text-indent: 0.34em; }
.preloader__bar {
width: 190px; height: 3px; margin: 20px auto 12px; background: rgba(255, 255, 255, 0.1); border-radius: 3px; overflow: hidden; }
.preloader__bar span {
display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--amber), transparent); border-radius: 3px; animation: pl-run 1.15s ease-in-out infinite; }
.preloader__caption {
font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-2); }
@keyframes pl-draw {
to {
stroke-dashoffset: 0; }
}
@keyframes pl-pulse {
0%, 100% {
transform: scale(1); opacity: 1; }
50% {
transform: scale(1.7); opacity: 0.5; }
}
@keyframes pl-run {
0% {
transform: translateX(-110%); }
100% {
transform: translateX(360%); }
}
/* ============================================================
 Верхняя инфо-панель
 ============================================================ */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 520; height: var(--topbar-h); background: rgba(21, 15, 10, 0.92); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); transition: transform 0.4s ease; }
.topbar.is-hidden {
transform: translateY(-100%); }
.topbar__inner {
display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 100%; }
.topbar__group {
display: flex; align-items: center; gap: 22px; }
.topbar__item {
display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.topbar__item svg {
color: var(--amber); }
.topbar__item:hover {
color: var(--white); }
.topbar__item--accent {
color: var(--amber-light); }
/* ============================================================
 Шапка
 ============================================================ */
.header {
position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 510; height: var(--header-h); background: linear-gradient(180deg, rgba(21, 15, 10, 0.78) 0%, rgba(21, 15, 10, 0) 100%); transition: transform 0.4s ease, top 0.4s ease, height 0.4s ease, background 0.4s ease, box-shadow 0.4s ease; }
.header.is-compact {
top: 0; height: var(--header-h-compact); background: rgba(21, 15, 10, 0.88); backdrop-filter: blur(14px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); border-bottom: 1px solid rgba(217, 122, 43, 0.16); }
.header.is-hidden {
transform: translateY(-110%); }
.header__inner {
display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.logo {
display: inline-flex; align-items: center; gap: 12px; color: var(--white); }
.logo__mark {
color: var(--white); transition: transform var(--transition), color var(--transition); }
.logo:hover .logo__mark {
color: var(--amber); transform: translateY(-2px); }
.logo__text {
display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: 1.16rem; letter-spacing: 0.14em; line-height: 1.1; }
.logo__text small {
font-family: var(--font-body); font-weight: 600; font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.nav {
display: flex; align-items: center; gap: 24px; }
.nav a {
font-size: 0.92rem; font-weight: 600; color: rgba(232, 227, 219, 0.8); position: relative; padding: 6px 0; }
.nav a::after {
content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; background: var(--amber); border-radius: 2px; transition: width var(--transition); }
.nav a:hover {
color: var(--white); }
.nav a:hover::after {
width: 100%; }
.nav a.is-active {
color: var(--amber-light); }
.nav a.is-active::after {
width: 100%; }
.nav__phone {
display: none; align-items: center; gap: 8px; font-weight: 700; color: var(--white); }
.nav__phone svg {
color: var(--amber); }
.btn--nav-mobile {
display: none; }
.header__right {
display: flex; align-items: center; gap: 18px; }
.header__phone {
display: inline-flex; align-items: center; gap: 9px; font-weight: 800; font-size: 0.98rem; color: var(--white); white-space: nowrap; }
.header__phone svg {
color: var(--amber); }
.header__phone:hover {
color: var(--amber-light); }
.burger {
display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); }
.burger span {
display: block; width: 20px; height: 2px; background: var(--white); border-radius: 2px; transition: transform var(--transition), opacity var(--transition); }
.burger.is-open span:nth-child(1) {
transform: translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2) {
opacity: 0; }
.burger.is-open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg); }
/* ============================================================
 Кнопки
 ============================================================ */
.btn {
position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 28px; border-radius: 12px; border: 1px solid transparent; font-family: var(--font-body); font-size: 0.95rem; font-weight: 700; line-height: 1.2; white-space: nowrap; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition), filter var(--transition); }
.btn:active {
transform: translateY(1px); }
.btn--amber {
background: linear-gradient(135deg, var(--amber-light) 0%, var(--amber) 45%, var(--amber-dark) 100%); color: #1a120d; box-shadow: var(--glow); }
.btn--amber:hover {
filter: brightness(1.08); transform: translateY(-2px); box-shadow: 0 16px 38px rgba(217, 122, 43, 0.45); }
.btn--glass {
background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); color: var(--white); backdrop-filter: blur(6px); }
.btn--glass:hover {
background: rgba(255, 255, 255, 0.13); border-color: var(--amber); transform: translateY(-2px); }
.btn--lg {
padding: 17px 34px; font-size: 1.02rem; border-radius: 14px; }
.btn--wide {
width: 100%; }
.btn--shine::after {
content: ""; position: absolute; top: -20%; left: -80%; width: 45%; height: 140%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%); transform: skewX(-22deg); transition: left .1s ease; pointer-events: none; }
.btn--shine:hover::after {
animation: btn-shine 0.9s ease forwards; }
@keyframes btn-shine {
from {
left: -80%; }
to {
left: 130%; }
}
.link-btn {
display: inline; padding: 0; font: inherit; color: var(--amber-light); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color var(--transition); }
.link-btn:hover {
color: var(--white); }
.link-btn--light {
color: rgba(232, 227, 219, 0.72); text-decoration-color: rgba(232, 227, 219, 0.35); }
.link-btn--light:hover {
color: var(--amber-light); }
/* ============================================================
 Стеклянные поверхности
 ============================================================ */
.glass {
background: rgba(42, 31, 23, 0.6); border: 1px solid rgba(217, 122, 43, 0.22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: var(--radius); box-shadow: var(--shadow); }
/* ============================================================
 Hero-слайдер
 ============================================================ */
.hero {
position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--bg-deep); }
.hero__slider {
position: absolute; inset: 0; }
.hero__slide {
position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: scale(1.04); transition: opacity 1.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 1.6s cubic-bezier(0.4, 0, 0.2, 1), transform 1.6s cubic-bezier(0.4, 0, 0.2, 1); }
.hero__slide.is-active {
opacity: 1; visibility: visible; z-index: 2; transform: scale(1); }
.hero__bg {
position: absolute; inset: 0; background-size: cover; background-position: center; will-change: transform; }
.hero__slide.is-active .hero__bg {
animation: hero-kb-center 8.5s cubic-bezier(0.25, 0.45, 0.45, 0.95) both; }
.hero__slide[data-index="1"].is-active .hero__bg {
animation-name: hero-kb-right; }
.hero__slide[data-index="2"].is-active .hero__bg {
animation-name: hero-kb-left; }
@keyframes hero-kb-center {
from {
transform: scale(1.14); }
to {
transform: scale(1.02); }
}
@keyframes hero-kb-right {
from {
transform: scale(1.12) translateX(-2%); }
to {
transform: scale(1.02) translateX(0.8%); }
}
@keyframes hero-kb-left {
from {
transform: scale(1.12) translateX(2%); }
to {
transform: scale(1.02) translateX(-0.8%); }
}
.hero__shade {
position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 15, 10, 0.94) 0%, rgba(21, 15, 10, 0.72) 46%, rgba(21, 15, 10, 0.3) 100%), linear-gradient(180deg, rgba(21, 15, 10, 0.55) 0%, transparent 30%, rgba(32, 23, 18, 0.9) 100%); }
.hero__grid {
position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.hero__content {
position: relative; z-index: 4; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--topbar-h) + var(--header-h)); padding-bottom: 230px; max-width: 760px; }
.hero__overline {
display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 8px 16px; border: 1px solid var(--amber-line); border-radius: 100px; background: rgba(217, 122, 43, 0.1); color: var(--amber-light); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 22px; }
.hero__title {
font-size: clamp(1.9rem, 4.4vw, 3.3rem); font-weight: 800; color: var(--white); margin-bottom: 20px; text-wrap: balance; }
.hero__text {
font-size: clamp(1rem, 1.4vw, 1.16rem); color: rgba(232, 227, 219, 0.82); max-width: 580px; margin-bottom: 34px; }
.hero__actions {
display: flex; gap: 16px; flex-wrap: wrap; }
.hero__content, .hero__actions, .hero__actions button, .hero__actions .btn {
pointer-events: auto; }
.hero__slide.is-active .hero__overline {
animation: hero-fade 0.7s 0.15s both; }
.hero__slide.is-active .hero__title {
animation: hero-fade 0.7s 0.3s both; }
.hero__slide.is-active .hero__text {
animation: hero-fade 0.7s 0.45s both; }
.hero__slide.is-active .hero__actions {
animation: hero-fade 0.7s 0.6s both; }
@keyframes hero-fade {
from {
opacity: 0; transform: translateY(28px); }
to {
opacity: 1; transform: none; }
}
.hero__controls {
position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.hero__arrow {
pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--white); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(6px); transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); }
.hero__arrow--prev {
left: 26px; }
.hero__arrow--next {
right: 26px; }
.hero__arrow:hover {
background: var(--amber); border-color: var(--amber); color: #1a120d; transform: translateY(-50%) scale(1.06); }
.hero__footer {
position: absolute; left: 0; right: 0; bottom: 152px; z-index: 6; display: flex; align-items: center; gap: 22px; padding: 0 24px; max-width: var(--container); margin: 0 auto; }
.hero__dots {
gap: 9px; display: inline-flex; }
.hero__dot {
width: 10px; height: 10px; border-radius: 100px; background: rgba(255, 255, 255, 0.3); transition: width var(--transition), background var(--transition); }
.hero__dot.is-active {
width: 30px; background: var(--amber); }
.hero__progress {
flex: 1; max-width: 220px; height: 3px; background: rgba(255, 255, 255, 0.14); border-radius: 3px; overflow: hidden; display: inline-flex; }
.hero__progress span {
display: block; height: 100%; width: 0; background: var(--amber); border-radius: 3px; }
.hero__counter {
font-family: var(--font-display); font-size: 0.86rem; letter-spacing: 0.12em; color: rgba(232, 227, 219, 0.7); display: inline-flex; }
.hero__counter #hero-current {
color: var(--amber-light); font-size: 1.05rem; }
.hero__stats {
position: absolute; left: 0; right: 0; bottom: 34px; z-index: 5; }
.hero__stats-inner {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding: 22px 34px; background: rgba(21, 15, 10, 0.62); border: 1px solid rgba(217, 122, 43, 0.22); border-radius: 18px; backdrop-filter: blur(14px); }
.stat {
text-align: center; }
.stat__value {
font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; color: var(--white); line-height: 1.1; }
.stat__value span {
color: var(--amber-light); }
.stat__label {
margin-top: 4px; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.hero__scroll {
position: absolute; right: 40px; bottom: 168px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgba(232, 227, 219, 0.65); transition: color var(--transition); }
.hero__scroll:hover {
color: var(--amber-light); }
.hero__scroll-mouse {
position: relative; width: 25px; height: 40px; border: 2px solid currentColor; border-radius: 14px; }
.hero__scroll-mouse span {
position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--amber); animation: scroll-dot 1.8s ease-in-out infinite; }
@keyframes scroll-dot {
0% {
transform: translateY(0); opacity: 1; }
70% {
transform: translateY(13px); opacity: 0; }
100% {
transform: translateY(0); opacity: 0; }
}
/* ============================================================
 Секции
 ============================================================ */
.section {
position: relative; padding: 96px 0; overflow: hidden; }
.section--deep {
background: var(--bg-deep); }
.section > .container {
position: relative; z-index: 2; }
.section__head {
max-width: 760px; margin: 0 auto 58px; text-align: center; }
.section__label {
display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1px solid var(--amber-line); border-radius: 100px; background: rgba(217, 122, 43, 0.09); color: var(--amber-light); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; }
.section__label--center {
margin-bottom: 22px; }
.section__title {
font-size: clamp(1.6rem, 3vw, 2.35rem); font-weight: 700; margin-bottom: 16px; text-wrap: balance; }
.section__title--left {
text-align: left; margin-bottom: 18px; }
.section__sub {
font-size: 1.02rem; color: var(--muted); max-width: 640px; margin: 0 auto; }
/* ============================================================
 Преимущества
 ============================================================ */
.advantages__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.adv-card {
position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; overflow: hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.adv-card:hover {
transform: translateY(-6px); background: var(--surface-2); border-color: var(--amber-line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.adv-card__icon {
display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; margin-bottom: 20px; color: var(--amber); background: rgba(217, 122, 43, 0.1); border: 1px solid rgba(217, 122, 43, 0.28); transition: background var(--transition), color var(--transition), transform var(--transition); }
.adv-card:hover .adv-card__icon {
background: var(--amber); color: #1a120d; transform: scale(1.06) rotate(-4deg); }
.adv-card h3 {
font-size: 1.06rem; margin-bottom: 10px; }
.adv-card p {
font-size: 0.93rem; color: var(--muted); }
.adv-card__line {
position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--amber), transparent 70%); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; }
.adv-card:hover .adv-card__line {
transform: scaleX(1); }
/* ============================================================
 Каталог проектов
 ============================================================ */
.services__grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.service-card {
position: relative; display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; overflow: hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.service-card:hover {
transform: translateY(-6px); background: var(--surface-2); border-color: var(--amber-line); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.service-card--popular {
border-color: var(--amber); background: linear-gradient(180deg, rgba(217, 122, 43, 0.1) 0%, var(--surface) 46%); box-shadow: 0 16px 44px rgba(217, 122, 43, 0.16); }
.service-card__media {
position: relative; margin: -28px -24px 0; aspect-ratio: 16 / 10; overflow: hidden; flex-shrink: 0; }
.service-card__media svg {
width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.service-card:hover .service-card__media svg {
transform: scale(1.08); }
.service-card__media-shade {
position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(21, 15, 10, 0.72) 100%); pointer-events: none; z-index: 1; }
.service-card__media::after {
content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--amber), var(--amber-light), var(--amber)); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; z-index: 2; }
.service-card:hover .service-card__media::after {
transform: scaleX(1); }
.service-card__term {
position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px; background: rgba(21, 15, 10, 0.7); border: 1px solid rgba(217, 122, 43, 0.3); backdrop-filter: blur(8px); font-size: 0.78rem; font-weight: 700; color: var(--white); z-index: 2; transition: background var(--transition), border-color var(--transition), color var(--transition); }
.service-card:hover .service-card__term {
background: rgba(217, 122, 43, 0.85); border-color: var(--amber-light); color: #1a120d; }
.service-card h3 {
font-size: 1.18rem; }
.service-card__price {
font-family: var(--font-display); font-size: 1.22rem; font-weight: 800; color: var(--amber-light); }
.service-card__list {
display: flex; flex-direction: column; gap: 9px; flex-grow: 1; margin-bottom: 6px; }
.service-card__list li {
display: flex; align-items: flex-start; gap: 9px; font-size: 0.88rem; color: var(--muted); }
.service-card__list svg {
color: var(--amber); margin-top: 3px; }
/* ============================================================
 Калькулятор
 ============================================================ */
.calculator__grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.calc-form {
padding: 34px 30px; }
.calc-form__note {
display: flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 0.83rem; color: var(--muted); }
.calc-form__note svg {
color: var(--amber); }
.calc-result {
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; padding: 40px 30px; border-color: rgba(217, 122, 43, 0.34); }
.calc-result__icon {
display: flex; align-items: center; justify-content: center; width: 74px; height: 74px; border-radius: 50%; color: var(--amber); background: rgba(217, 122, 43, 0.12); border: 1px solid rgba(217, 122, 43, 0.35); }
.calc-result__label {
font-size: 0.95rem; color: var(--muted); }
.calc-result__value {
font-family: var(--font-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 800; color: var(--amber-light); line-height: 1.1; }
.calc-result__hint {
font-size: 0.84rem; color: var(--muted-2); margin-bottom: 6px; }
/* ============================================================
 Поля форм
 ============================================================ */
.field {
display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field > span {
display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.field > span svg {
color: var(--amber); }
.field input, .field select, .field textarea {
width: 100%; padding: 13px 15px; border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: var(--white); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.field input::placeholder, .field textarea::placeholder {
color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--amber); background: rgba(217, 122, 43, 0.06); box-shadow: 0 0 0 3px rgba(217, 122, 43, 0.18); }
.field select {
appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A227' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; cursor: pointer; }
.field select option {
background: var(--bg); color: var(--text); }
.field textarea {
resize: vertical; min-height: 84px; }
.checkbox {
display: flex; align-items: flex-start; gap: 10px; font-size: 0.84rem; color: var(--muted); margin-bottom: 20px; cursor: pointer; }
.checkbox input {
width: 18px; height: 18px; margin-top: 2px; accent-color: var(--amber); flex-shrink: 0; cursor: pointer; }
/* ============================================================
 Этапы работы
 ============================================================ */
.steps__list {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; overflow: hidden; transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.step:hover {
transform: translateY(-6px); border-color: var(--amber-line); background: var(--surface-2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.step__num {
position: absolute; top: 14px; right: 20px; font-family: var(--font-display); font-size: 3.2rem; font-weight: 800; line-height: 1; color: rgba(217, 122, 43, 0.14); pointer-events: none; }
.step__icon {
display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 18px; color: var(--amber); background: rgba(217, 122, 43, 0.1); border: 1px solid rgba(217, 122, 43, 0.3); transition: background var(--transition), color var(--transition), transform var(--transition); }
.step:hover .step__icon {
background: var(--amber); color: #1a120d; transform: scale(1.08); }
.step h3 {
font-size: 1.02rem; margin-bottom: 9px; }
.step p {
font-size: 0.91rem; color: var(--muted); }
/* ============================================================
 Портфолио
 ============================================================ */
.portfolio__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.work-card {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); }
.work-card:hover {
transform: translateY(-6px); border-color: var(--amber-line); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45); }
.work-card__media {
position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-deep); }
.work-card__media svg {
width: 100%; height: 100%; transition: transform 0.6s ease; }
.work-card:hover .work-card__media svg {
transform: scale(1.06); }
.work-card__budget {
position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 100px; background: rgba(21, 15, 10, 0.72); border: 1px solid rgba(217, 122, 43, 0.4); backdrop-filter: blur(8px); color: var(--amber-light); font-size: 0.82rem; font-weight: 700; z-index: 2; }
.work-card__budget svg {
color: var(--amber); }
.work-card__body {
padding: 22px 24px 26px; }
.work-card__body h3 {
font-size: 1.02rem; margin-bottom: 8px; line-height: 1.4; }
.work-card__body p {
font-size: 0.88rem; color: var(--muted); }
.portfolio__cta {
margin-top: 44px; text-align: center; }
/* ============================================================
 Отзывы
 ============================================================ */
.reviews__grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.review-card {
display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.review-card:hover {
transform: translateY(-6px); border-color: var(--amber-line); background: var(--surface-2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.review-card__stars {
display: flex; gap: 4px; color: var(--amber); }
.review-card__star svg {
fill: var(--amber); }
.review-card__star--off svg {
fill: rgba(255, 255, 255, 0.16); }
.review-card__text {
font-size: 0.93rem; color: var(--text); }
.review-card__author {
display: flex; align-items: center; gap: 8px; margin-top: auto; font-size: 0.87rem; font-weight: 700; color: var(--amber-light); }
.review-card__author svg {
color: var(--amber); }
/* ============================================================
 Акция с таймером
 ============================================================ */
.promo {
color: var(--white); }
.promo__inner {
position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.promo__title {
font-size: clamp(1.6rem, 3.2vw, 2.5rem); font-weight: 800; max-width: 800px; text-wrap: balance; }
.promo__text {
font-size: 1.08rem; color: rgba(232, 227, 219, 0.8); max-width: 620px; }
.promo__timer {
display: flex; gap: 16px; margin: 8px 0 6px; flex-wrap: wrap; justify-content: center; }
.timer-item {
display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 96px; padding: 16px 20px; border-radius: var(--radius); background: rgba(42, 31, 23, 0.6); border: 1px solid rgba(217, 122, 43, 0.3); backdrop-filter: blur(10px); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.timer-item span {
font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; line-height: 1; color: var(--amber-light); }
.promo__note {
font-size: 0.84rem; color: var(--muted-2); }
/* ============================================================
 FAQ
 ============================================================ */
.faq__list {
max-width: 840px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.faq__item {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); }
.faq__item.is-open {
background: var(--surface-2); border-color: var(--amber-line); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); }
.faq__question {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; font-size: 1rem; font-weight: 700; text-align: left; color: var(--white); transition: color var(--transition); }
.faq__question:hover {
color: var(--amber-light); }
.faq__plus {
position: relative; width: 20px; height: 20px; flex-shrink: 0; }
.faq__plus::before, .faq__plus::after {
content: ""; position: absolute; top: 50%; left: 50%; background: var(--amber); border-radius: 2px; transition: transform var(--transition); }
.faq__plus::before {
width: 18px; height: 2px; transform: translate(-50%, -50%); }
.faq__plus::after {
width: 2px; height: 18px; transform: translate(-50%, -50%); }
.faq__item.is-open .faq__plus::before {
transform: translate(-50%, -50%) rotate(180deg); }
.faq__item.is-open .faq__plus::after {
transform: translate(-50%, -50%) rotate(90deg); }
.faq__answer {
max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq__answer p {
padding: 0 24px 22px; font-size: 0.94rem; color: var(--muted); }
/* ============================================================
 Контакты
 ============================================================ */
.contact__grid {
display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: start; position: relative; z-index: 2; }
.contact__text {
color: var(--muted); margin-bottom: 28px; max-width: 480px; }
.contact__list {
display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; }
.contact__list li {
display: flex; align-items: center; gap: 12px; font-size: 0.98rem; }
.contact__list svg {
color: var(--amber); }
.contact__list a {
color: var(--white); font-weight: 700; }
.contact__list a:hover {
color: var(--amber-light); }
.contact__badges {
display: flex; flex-wrap: wrap; gap: 10px; }
.contact__badge {
display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; border: 1px solid var(--amber-line); background: rgba(217, 122, 43, 0.08); font-size: 0.82rem; font-weight: 700; color: var(--amber-light); }
.lead-form {
padding: 36px 32px; }
.lead-form__title {
font-size: 1.3rem; margin-bottom: 8px; }
.lead-form__sub {
font-size: 0.92rem; color: var(--muted); margin-bottom: 24px; }
.lead-form__status {
margin-top: 16px; font-size: 0.92rem; text-align: center; min-height: 1.3em; }
.lead-form__status.is-success {
color: #8fd99a; }
.lead-form__status.is-error {
color: #ff8a80; }
.lead-form__note {
display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; font-size: 0.8rem; color: var(--muted-2); }
.lead-form__note svg {
color: var(--amber); }
/* ============================================================
 Подвал
 ============================================================ */
.footer {
background: var(--footer-bg); position: relative; }
.footer__grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px; padding: 40px 0 46px; }
.logo--footer {
margin-bottom: 18px; }
.footer__desc {
font-size: 0.9rem; color: var(--muted); margin-bottom: 20px; max-width: 320px; }
.footer__badges {
display: flex; flex-wrap: wrap; gap: 9px; }
.footer__badge {
display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.12); font-size: 0.76rem; font-weight: 700; color: var(--muted); }
.footer__badge svg {
color: var(--amber); }
.footer__heading {
font-family: var(--font-display); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber-light); margin-bottom: 20px; }
.footer__list {
display: flex; flex-direction: column; gap: 11px; }
.footer__list a, .footer__list span {
display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); transition: color var(--transition), transform var(--transition); }
.footer__list svg {
color: var(--amber); }
.footer__list a:hover {
color: var(--white); transform: translateX(4px); }
.footer__cta {
margin-top: 22px; }
.footer__bottom {
display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 22px 0 26px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 0.82rem; color: var(--muted-2); }
.footer__legal {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer__disclaimer {
flex-basis: 100%; font-size: 0.74rem; color: rgba(232, 227, 219, 0.3); }
/* ============================================================
 Баннер cookie
 ============================================================ */
.cookie-banner {
position: fixed; left: 16px; right: 16px; bottom: 18px; z-index: 800; display: flex; justify-content: center; transform: translateY(160%); transition: transform 0.55s cubic-bezier(0.22, 0.9, 0.3, 1); }
.cookie-banner.is-visible {
transform: none; }
.cookie-banner__box {
display: flex; align-items: center; gap: 18px; width: 100%; max-width: 780px; padding: 18px 24px; border-radius: var(--radius); background: rgba(42, 31, 23, 0.85); border: 1px solid rgba(217, 122, 43, 0.3); backdrop-filter: blur(16px); box-shadow: var(--shadow-lg); }
.cookie-banner__icon {
display: flex; color: var(--amber); }
.cookie-banner__text {
flex: 1; font-size: 0.88rem; color: var(--muted); }
/* ============================================================
 Модальные окна
 ============================================================ */
.modal {
position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 22px; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; }
.modal.is-open {
opacity: 1; visibility: visible; }
.modal__backdrop {
position: absolute; inset: 0; background: rgba(10, 7, 5, 0.55); backdrop-filter: blur(10px) saturate(1.2); }
.modal__box {
position: relative; z-index: 1; width: 100%; max-width: 470px; padding: 38px 34px; transform: translateY(26px) scale(0.96); transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1); }
.modal.is-open .modal__box {
transform: none; }
.modal__box--scroll {
max-width: 640px; max-height: 84vh; overflow-y: auto; }
.modal__close {
position: absolute; top: 16px; right: 16px; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: var(--muted); background: rgba(255, 255, 255, 0.05); transition: color var(--transition), background var(--transition), transform var(--transition); }
.modal__close:hover {
color: #1a120d; background: var(--amber); transform: rotate(90deg); }
.modal__icon {
display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; margin-bottom: 20px; color: var(--amber); background: rgba(217, 122, 43, 0.12); border: 1px solid rgba(217, 122, 43, 0.35); }
.modal__title {
font-size: 1.26rem; margin-bottom: 10px; }
.modal__sub {
font-size: 0.92rem; color: var(--muted); margin-bottom: 24px; }
.modal__text {
margin-bottom: 24px; }
.modal__text p {
font-size: 0.92rem; color: var(--muted); margin-bottom: 12px; }
.modal__text strong {
color: var(--amber-light); }
/* ============================================================
 Плавающие кнопки
 ============================================================ */
.floating-call {
position: fixed; right: 22px; bottom: 22px; z-index: 700; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, var(--amber-light), var(--amber-dark)); color: #1a120d; box-shadow: 0 12px 30px rgba(217, 122, 43, 0.4); transition: transform var(--transition), box-shadow var(--transition); }
.floating-call:hover {
transform: scale(1.09); box-shadow: 0 16px 38px rgba(217, 122, 43, 0.55); }
.floating-call__pulse {
position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--amber); animation: call-pulse 2s ease-out infinite; pointer-events: none; }
@keyframes call-pulse {
0% {
transform: scale(1); opacity: 0.8; }
100% {
transform: scale(1.8); opacity: 0; }
}
.floating-max {
position: fixed; left: 22px; bottom: 22px; z-index: 700; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(135deg, #1a1a1a 0%, #0a0b0b 55%, #000000 100%); color: #ffffff; box-shadow: 0 12px 30px rgba(10, 11, 11, 0.55); transition: transform var(--transition), box-shadow var(--transition); }
.floating-max:hover {
transform: scale(1.09); box-shadow: 0 16px 38px rgba(10, 11, 11, 0.7); }
.floating-max__pulse {
position: absolute; inset: 0; border-radius: 50%; border: 2px solid #0a0b0b; animation: wa-pulse 2s ease-out infinite; pointer-events: none; }
@keyframes wa-pulse {
0% {
transform: scale(1); opacity: 0.8; }
100% {
transform: scale(1.8); opacity: 0; }
}
.floating-max__tooltip {
position: absolute; left: calc(100% + 14px); top: 50%; transform: translateY(-50%) translateX(-6px); white-space: nowrap; padding: 9px 14px; border-radius: 10px; background: rgba(42, 31, 23, 0.9); border: 1px solid rgba(10, 11, 11, 0.55); color: var(--text); font-size: 0.82rem; font-weight: 600; opacity: 0; visibility: hidden; pointer-events: none; backdrop-filter: blur(8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease; }
.floating-max:hover .floating-max__tooltip {
opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
.back-to-top {
position: fixed; right: 22px; bottom: 92px; z-index: 700; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(42, 31, 23, 0.85); border: 1px solid var(--amber-line); color: var(--amber-light); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); opacity: 0; visibility: hidden; transform: translateY(16px); transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, background 0.28s ease, border-color 0.28s ease, color 0.28s ease; pointer-events: none; }
.back-to-top.is-visible {
opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.back-to-top:hover {
background: var(--amber); border-color: var(--amber); color: #1a120d; transform: translateY(-3px); }
/* ============================================================
 Индикатор прогресса скролла
 ============================================================ */
.scroll-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000; pointer-events: none; }
.scroll-progress span {
display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--amber-dark), var(--amber), var(--amber-light)); box-shadow: 0 0 8px rgba(217, 122, 43, 0.55); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
/* ============================================================
 Липкая CTA-панель
 ============================================================ */
.sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 650; transform: translateY(110%); transition: transform 0.5s cubic-bezier(0.22, 0.9, 0.3, 1); pointer-events: none; }
.sticky-cta.is-visible {
transform: none; pointer-events: auto; }
.sticky-cta__inner {
display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: var(--container); margin: 0 auto; padding: 14px 24px; background: rgba(21, 15, 10, 0.92); border-top: 1px solid rgba(217, 122, 43, 0.25); backdrop-filter: blur(16px); box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.4); }
.sticky-cta__text {
display: flex; flex-direction: column; gap: 2px; }
.sticky-cta__label {
font-family: var(--font-display); font-size: 0.92rem; font-weight: 700; color: var(--white); }
.sticky-cta__sub {
font-size: 0.78rem; color: var(--muted); }
.sticky-cta__actions {
display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.sticky-cta__phone {
display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; color: var(--white); white-space: nowrap; }
.sticky-cta__phone svg {
color: var(--amber); }
.sticky-cta__phone:hover {
color: var(--amber-light); }
/* ============================================================
 Нейро-частицы и курсор
 ============================================================ */
.neuro-particle {
position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(217, 122, 43, 0.4) 0%, rgba(217, 122, 43, 0.1) 60%, transparent 100%); pointer-events: none; animation: neuro-float 8s ease-in-out infinite; opacity: 0.6; z-index: 1; }
@keyframes neuro-float {
0%, 100% {
transform: translate(0, 0) scale(1); opacity: 0.3; }
25% {
transform: translate(20px, -30px) scale(1.2); opacity: 0.6; }
50% {
transform: translate(-15px, -60px) scale(0.8); opacity: 0.4; }
75% {
transform: translate(10px, -20px) scale(1.1); opacity: 0.5; }
}
.cursor-spotlight {
position: fixed; top: -250px; left: -250px; width: 500px; height: 500px; border-radius: 50%; pointer-events: none; z-index: 2; background: radial-gradient(circle, rgba(217, 122, 43, 0.07) 0%, rgba(217, 122, 43, 0.03) 40%, transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity 0.4s ease; will-change: transform; }
.cursor-spotlight.is-visible {
opacity: 1; }
/* ============================================================
 Анимация заголовков по словам
 ============================================================ */
.title-word {
display: inline-block; opacity: 0; transform: translateY(24px) rotate(1.5deg); transition: opacity 0.6s cubic-bezier(0.22, 0.9, 0.3, 1), transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1); will-change: opacity, transform; }
.section__title.is-revealed .title-word, .promo__title.is-revealed .title-word {
opacity: 1; transform: none; }
/* ============================================================
 НОВЫЕ МОДУЛИ РЕДИЗАЙНА
 ============================================================ */

/* ---------- Декоративный фоновый слой секции ---------- */
.section__bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.section__bg::before, .section__bg::after {
content: ""; position: absolute; background-repeat: repeat; opacity: 0.07; }
.section__bg::before {
inset: 0; }
.section__bg::after {
inset: 0; opacity: 0.05; }
/* Текстура дерева: вертикальные волокна */
.section__bg--wood::before {
background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0v120M40 0v120M60 0v120M80 0v120M100 0v120' stroke='%23C9A227' stroke-width='0.8' stroke-opacity='0.55'/%3E%3Cpath d='M0 24c20 8 40-8 60 0s40 8 60 0M0 64c20 8 4-8 60 0s40 8 60 0M0 100c20 8 40-8 60 0s40 8 60 0' stroke='%23C9A227' stroke-width='0.6' stroke-opacity='0.35'/%3E%3C/svg%3E"); background-size: 120px 120px; }
/* Нейросетка: точки и соединения */
.section__bg--neuro::before {
background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1.6' fill='%23C9A227'/%3E%3Ccircle cx='90' cy='40' r='2' fill='%23C9A227'/%3E%3Ccircle cx='150' cy='25' r='1.6' fill='%23C9A227'/%3E%3Ccircle cx='50' cy='90' r='2' fill='%23C9A227'/%3E%3Ccircle cx='120' cy='110' r='1.6' fill='%23C9A227'/%3E%3Ccircle cx='30' cy='150' r='1.6' fill='%23C9A227'/%3E%3Ccircle cx='95' cy='150' r='2' fill='%23C9A227'/%3E%3Ccircle cx='160' cy='140' r='1.6' fill='%23C9A227'/%3E%3Cpath d='M20 20L90 40L150 25M90 40L50 90L120 110L95 150M50 90L30 150M120 110L160 140' stroke='%23C9A227' stroke-width='0.6' stroke-opacity='0.5'/%3E%3C/svg%3E"); background-size: 180px 180px; }
/* Пар: мягкие восходящие волны */
.section__bg--steam::before {
background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 130c0-18 10-18 10-36s-10-18-10-36 10-18 10-36M70 130c0-18 10-18 10-36s-10-18-10-36 10-18 10-36M120 130c0-18 10-18 10-36s-10-18-10-36 10-18 10-36' stroke='%23C9A227' stroke-width='1.1' stroke-opacity='0.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 140px 140px; }
/* Камень / сруб: горизонтальные плашки */
.section__bg--stone::before {
background-image: url("data:image/svg+xml,%3Csvg width='160' height='80' viewBox='0 0 160 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='6' width='152' height='28' rx='8' stroke='%23C9A227' stroke-width='0.8' stroke-opacity='0.5'/%3E%3Crect x='4' y='44' width='152' height='28' rx='8' stroke='%23C9A227' stroke-width='0.8' stroke-opacity='0.5'/%3E%3C/svg%3E"); background-size: 160px 80px; }
/* Мягкое янтарное свечение по углам секции */
.section__bg::after {
background: radial-gradient(circle at 12% 18%, rgba(217, 122, 43, 0.16) 0%, transparent 42%), radial-gradient(circle at 88% 82%, rgba(217, 122, 43, 0.12) 0%, transparent 46%); }
/* ---------- Волновые разделители секций ---------- */
.wave-divider {
display: block; width: 100%; height: 70px; line-height: 0; position: relative; z-index: 3; margin-top: -1px; }
.wave-divider svg {
width: 100%; height: 100%; display: block; }
.wave-divider--flip {
transform: scaleY(-1); }
.wave-divider--top {
margin-top: 0; margin-bottom: -1px; }
/* ---------- Нейро-заставка в хиро ---------- */
.hero__neuro {
position: absolute; inset: 0; z-index: 3; pointer-events: none; mix-blend-mode: screen; opacity: 0.8; }
.hero__neuro svg {
width: 100%; height: 100%; }
.hero__neuro-line {
stroke-dasharray: 6 10; animation: neuro-line-run 7s linear infinite; }
.hero__neuro-node {
animation: neuro-node-pulse 3.2s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.hero__neuro-node--d1 {
animation-delay: 0.5s; }
.hero__neuro-node--d2 {
animation-delay: 1.1s; }
.hero__neuro-node--d3 {
animation-delay: 1.7s; }
.hero__neuro-node--d4 {
animation-delay: 2.3s; }
@keyframes neuro-line-run {
to {
stroke-dashoffset: -160; }
}
@keyframes neuro-node-pulse {
0%, 100% {
opacity: 0.35; transform: scale(1); }
50% {
opacity: 0.95; transform: scale(1.5); }
}
/* Пар над хиро */
.hero__steam {
position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 42%; pointer-events: none; opacity: 0.5; background: linear-gradient(180deg, transparent 0%, rgba(217, 122, 43, 0.05) 55%, rgba(217, 122, 43, 0.1) 100%); mask-image: linear-gradient(180deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); }
/* ---------- Бегущая строка преимуществ ---------- */
.marquee {
position: relative; overflow: hidden; background: linear-gradient(90deg, rgba(217, 122, 43, 0.12), rgba(217, 122, 43, 0.05) 30%, rgba(217, 122, 43, 0.12)); border-top: 1px solid rgba(217, 122, 43, 0.25); border-bottom: 1px solid rgba(217, 122, 43, 0.25); padding: 16px 0; z-index: 4; }
.marquee__track {
display: flex; width: max-content; animation: marquee-run 26s linear infinite; will-change: transform; }
.marquee:hover .marquee__track {
animation-play-state: paused; }
.marquee__group {
display: flex; align-items: center; gap: 46px; padding-right: 46px; }
.marquee__item {
display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--amber-light); white-space: nowrap; }
.marquee__item svg {
color: var(--amber); }
.marquee__dot {
width: 5px; height: 5px; border-radius: 50%; background: var(--amber); opacity: 0.7; flex-shrink: 0; }
@keyframes marquee-run {
from {
transform: translateX(0); }
to {
transform: translateX(-50%); }
}
/* ---------- Секция «Материалы и технологии» ---------- */
.materials__grid {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.material-card {
position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; overflow: hidden; transition: transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition); }
.material-card::before {
content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20h100M0 40h100M0 60h100M0 80h100' stroke='%23C9A227' stroke-width='0.5' stroke-opacity='0.35'/%3E%3C/svg%3E"); opacity: 0.05; pointer-events: none; }
.material-card:hover {
transform: translateY(-6px); border-color: var(--amber-line); background: var(--surface-2); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4); }
.material-card__icon {
display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 14px; margin-bottom: 18px; color: var(--amber); background: rgba(217, 122, 43, 0.1); border: 1px solid rgba(217, 122, 43, 0.28); transition: background var(--transition), color var(--transition), transform var(--transition); }
.material-card:hover .material-card__icon {
background: var(--amber); color: #1a120d; transform: scale(1.06) rotate(-4deg); }
.material-card h3 {
font-size: 1.02rem; margin-bottom: 8px; }
.material-card p {
font-size: 0.88rem; color: var(--muted); }
/* ============================================================
 Адаптивность
 ============================================================ */
@media (max-width: 1240px) {
.hero__arrow--prev {
left: 12px; }
.hero__arrow--next {
right: 12px; }
}
@media (max-width: 1100px) {
.nav {
position: fixed; top: 0; right: 0; z-index: 600; flex-direction: column; align-items: stretch; gap: 0; width: min(330px, 86vw); height: 100vh; height: 100dvh; padding: 96px 26px 32px; background: rgba(26, 18, 13, 0.97); border-left: 1px solid rgba(217, 122, 43, 0.2); backdrop-filter: blur(18px); box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); transform: translateX(105%); transition: transform 0.4s cubic-bezier(0.22, 0.9, 0.3, 1); overflow-y: auto; }
.nav.is-open {
transform: none; }
.nav a {
padding: 14px 6px; font-size: 1.02rem; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.nav a::after {
display: none; }
.nav__phone {
display: inline-flex; margin-top: 22px; font-size: 1.05rem; }
.btn--nav-mobile {
display: inline-flex; margin-top: 18px; }
.burger {
display: flex; position: relative; z-index: 610; }
.header__right .btn {
display: none; }
.services__grid {
grid-template-columns: repeat(2, 1fr); }
.advantages__grid, .steps__list, .reviews__grid, .portfolio__grid {
grid-template-columns: repeat(2, 1fr); }
.materials__grid {
grid-template-columns: repeat(2, 1fr); }
.footer__grid {
grid-template-columns: 1fr 1fr; gap: 36px; }
}
@media (max-width: 900px) {
.calculator__grid, .contact__grid {
grid-template-columns: 1fr; gap: 24px; }
.header__phone {
display: none; }
}
@media (max-width: 768px) {
.section {
padding: 64px 0; }
.section__head {
margin-bottom: 40px; }
.hero__content {
padding-bottom: 300px; }
.hero__arrow {
width: 44px; height: 44px; }
.hero__scroll {
display: none; }
.hero__footer {
bottom: 218px; gap: 14px; }
.hero__progress {
display: none; }
.hero__stats {
bottom: 20px; }
.hero__stats-inner {
grid-template-columns: repeat(2, 1fr); gap: 14px; padding: 18px 20px; }
.topbar__group:last-child {
display: none; }
.advantages__grid, .services__grid, .steps__list, .reviews__grid, .portfolio__grid {
grid-template-columns: 1fr; }
.materials__grid {
grid-template-columns: 1fr; }
.footer__grid {
grid-template-columns: 1fr; gap: 32px; padding: 30px 0 36px; }
.footer__bottom {
flex-direction: column; align-items: flex-start; }
.cookie-banner__box {
flex-direction: column; text-align: center; gap: 14px; padding: 20px; }
.sticky-cta__inner {
padding: 12px 16px; gap: 12px; }
.sticky-cta__label {
font-size: 0.82rem; }
.sticky-cta__sub {
display: none; }
.sticky-cta__phone {
display: none; }
.floating-max {
left: 16px; bottom: 16px; width: 52px; height: 52px; }
.floating-max__tooltip {
display: none; }
.back-to-top {
right: 16px; bottom: 84px; width: 44px; height: 44px; }
.topbar, .header.is-compact, .glass, .modal__backdrop, .sticky-cta__inner, .cookie-banner__box, .hero__stats-inner, .hero__arrow, .nav, .btn--glass, .service-card__term, .work-card__budget, .back-to-top, .timer-item {
backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.topbar {
background: rgba(21, 15, 10, 0.97); }
.header.is-compact {
background: rgba(21, 15, 10, 0.97); }
.glass {
background: rgba(42, 31, 23, 0.95); }
.modal__backdrop {
background: rgba(10, 7, 5, 0.85); }
.sticky-cta__inner {
background: rgba(21, 15, 10, 0.97); }
.cookie-banner__box {
background: rgba(42, 31, 23, 0.95); }
.hero__stats-inner {
background: rgba(21, 15, 10, 0.85); }
.nav {
background: rgba(26, 18, 13, 0.98); }
.btn--glass {
background: rgba(255, 255, 255, 0.12); }
.hero__arrow {
background: rgba(255, 255, 255, 0.14); }
}
@media (max-width: 520px) {
.container {
padding: 0 16px; }
.hero__actions {
flex-direction: column; align-items: stretch; }
.hero__actions .btn {
width: 100%; }
.topbar__item span {
font-size: 0.72rem; }
.promo__timer {
gap: 10px; }
.timer-item {
min-width: 82px; padding: 12px 14px; }
.calc-form, .lead-form, .modal__box {
padding: 26px 20px; }
.floating-call {
right: 16px; bottom: 16px; width: 52px; height: 52px; }
.floating-max {
width: 48px; height: 48px; }
.back-to-top {
width: 40px; height: 40px; bottom: 80px; }
.sticky-cta__actions .btn {
padding: 10px 18px; font-size: 0.85rem; }
}
/* ============================================================
 Мобильная производительность
 ============================================================ */
@media (pointer: coarse), (hover: none) {
.cursor-spotlight {
display: none !important; }
.btn--shine::after {
display: none !important; }
.neuro-particle {
display: none !important; }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
.cookie-banner {
bottom: calc(18px + env(safe-area-inset-bottom)); }
.sticky-cta__inner {
padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.floating-call {
bottom: calc(22px + env(safe-area-inset-bottom)); }
.floating-max {
bottom: calc(22px + env(safe-area-inset-bottom)); }
.back-to-top {
bottom: calc(92px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
[data-reveal] {
opacity: 1; transform: none; }
}
/* ========== СЕКЦИИ ГЛАВНОЙ (многостраничник) ========== */

/* ---------- Общие секции ---------- */
.section__eyebrow {
display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--amber); margin-bottom:14px; padding:6px 14px; border:1px solid var(--amber-line); border-radius:100px; background:rgba(217, 122, 43, .06); }
.section__lead {
font-size:15.5px; color:var(--muted); max-width: 640px; margin:12px auto 0; line-height:1.65; }
.section__head {
text-align:center; max-width: 760px; margin:0 auto 48px; }
.section__actions {
text-align:center; margin-top:36px; }
.section__bg--grid {
background-image: linear-gradient(rgba(217, 122, 43, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 122, 43, .05) 1px, transparent 1px); background-size:60px 60px; opacity:.6; }
/* ---------- Направления (3 карточки) ---------- */
.directions {
display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.direction {
position:relative; padding:34px 30px 30px; background:linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); border:1px solid var(--line); border-radius:var(--radius); transition:transform .4s ease, border-color .3s ease, box-shadow .4s ease; overflow:hidden; }
.direction::before {
content:""; position:absolute; top:0; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--amber), transparent); transform:scaleX(0); transition:transform .4s ease; }
.direction:hover {
transform:translateY(-6px); border-color:var(--amber-line); box-shadow:0 22px 50px rgba(0, 0, 0, .35), 0 0 30px rgba(217, 122, 43, .12); }
.direction:hover::before {
transform:scaleX(1); }
.direction__head {
display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.direction__icon {
width:56px; height:56px; border-radius:14px; background:linear-gradient(135deg, rgba(217, 122, 43, .16), rgba(240, 160, 85, .08)); border:1px solid var(--amber-line); color:var(--amber); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s ease, color .3s ease, transform .4s ease; }
.direction:hover .direction__icon {
background:linear-gradient(135deg, var(--amber), var(--amber-light)); color:#1a120d; transform:rotate(-6deg); }
.direction__title {
font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--white); margin:0; }
.direction__lead {
font-size:14px; line-height:1.65; color:var(--muted); margin:0 0 22px; }
.direction__list {
display:flex; flex-direction:column; gap:10px; margin-bottom:26px; padding-top:22px; border-top:1px solid var(--line); }
.direction__list li {
display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text); line-height:1.5; }
.direction__check {
color:var(--amber); flex-shrink:0; margin-top:3px; }
.direction__check svg {
display:block; }
.direction__link {
display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:700; color:var(--amber); transition:color .2s ease, gap .3s ease; }
.direction__link svg {
transition:transform .3s ease; }
.direction__link:hover {
color:var(--amber-light); gap:12px; }
.direction__link:hover svg {
transform:translateX(3px); }
/* ---------- Популярные услуги ---------- */
.services-grid {
display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.service-card {
position:relative; display:flex; align-items:center; gap:16px; padding:20px 22px; background:linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); border:1px solid var(--line); border-radius:14px; transition:transform .35s ease, border-color .3s ease, background .3s ease, box-shadow .35s ease; overflow:hidden; }
.service-card:hover {
transform:translateY(-4px); border-color:var(--amber-line); background:linear-gradient(180deg, rgba(217, 122, 43, .08), rgba(217, 122, 43, .02)); box-shadow:0 16px 40px rgba(0, 0, 0, .3); }
.service-card__icon {
width:44px; height:44px; border-radius:12px; background:rgba(217, 122, 43, .12); border:1px solid var(--amber-line); color:var(--amber); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s ease, color .3s ease; }
.service-card:hover .service-card__icon {
background:linear-gradient(135deg, var(--amber), var(--amber-light)); color:#1a120d; }
.service-card__body {
display:flex; flex-direction:column; gap:3px; min-width: 0; }
.service-card__body b {
font-family:var(--font-display); font-size:14.5px; font-weight:700; color:var(--white); letter-spacing:-.01em; }
.service-card__body small {
font-size:12.5px; color:var(--muted); line-height:1.4; }
.service-card__arrow {
margin-left:auto; color:var(--muted-2); flex-shrink:0; transition:color .3s ease, transform .3s ease; }
.service-card:hover .service-card__arrow {
color:var(--amber); transform:translateX(3px); }
/* ---------- Почему мы ---------- */
.features-grid {
display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
.feature-card {
padding:30px 26px; background:rgba(255, 255, 255, .03); border:1px solid var(--line); border-radius:var(--radius); transition:transform .4s ease, border-color .3s ease, background .3s ease; }
.feature-card:hover {
transform:translateY(-6px); border-color:var(--amber-line); background:rgba(217, 122, 43, .05); }
.feature-card__icon {
width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg, rgba(217, 122, 43, .18), rgba(240, 160, 85, .08)); border:1px solid var(--amber-line); color:var(--amber); display:inline-flex; align-items:center; justify-content:center; margin-bottom:20px; transition:transform .4s ease; }
.feature-card:hover .feature-card__icon {
transform:rotate(-6deg) scale(1.05); }
.feature-card h3 {
font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.015em; color:var(--white); margin:0 0 10px; }
.feature-card p {
font-size:13.5px; line-height:1.65; color:var(--muted); margin:0; }
/* ---------- Этапы работы ---------- */
.steps-grid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.step-card {
position:relative; padding:30px 28px; background:linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); border:1px solid var(--line); border-radius:var(--radius); transition:transform .4s ease, border-color .3s ease; }
.step-card:hover {
transform:translateY(-5px); border-color:var(--amber-line); }
.step-card__num {
display:block; font-family:var(--font-display); font-size:38px; font-weight:800; letter-spacing:-.04em; line-height:1; background:linear-gradient(135deg, var(--amber), var(--amber-light)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:14px; }
.step-card b {
display:block; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--white); margin-bottom:8px; }
.step-card p {
font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; }
/* ---------- Портфолио ---------- */
.portfolio-grid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.portfolio-card {
position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height: 320px; padding:26px; border-radius:var(--radius); background-size:cover !important; background-position:center !important; color:#fff; overflow:hidden; transition:transform .5s ease, box-shadow .5s ease; }
.portfolio-card:hover {
transform:translateY(-6px); box-shadow:0 26px 60px rgba(0, 0, 0, .5); }
.portfolio-card__tag {
position:absolute; top:18px; left:18px; padding:6px 14px; font-size:10.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; background:linear-gradient(135deg, var(--amber), var(--amber-light)); color:#1a120d; border-radius:100px; }
.portfolio-card__body b {
display:block; font-family:var(--font-display); font-size:18px; font-weight:700; letter-spacing:-.02em; margin-bottom:6px; }
.portfolio-card__body small {
display:block; font-size:12.5px; color:rgba(255, 255, 255, .72); }
/* ---------- Отзывы ---------- */
.reviews-grid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.review-card {
padding:28px; background:linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); border:1px solid var(--line); border-radius:var(--radius); transition:transform .4s ease, border-color .3s ease; }
.review-card:hover {
transform:translateY(-4px); border-color:var(--amber-line); }
.review-card__head {
display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.review-card__avatar {
width:48px; height:48px; border-radius:50%; background:linear-gradient(135deg, var(--amber), var(--amber-light)); color:#1a120d; display:inline-flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:18px; flex-shrink:0; }
.review-card__head b {
display:block; font-family:var(--font-display); font-size:14.5px; font-weight:700; color:var(--white); margin-bottom:2px; }
.review-card__head small {
display:block; font-size:12px; color:var(--muted-2); }
.review-card__stars {
display:flex; gap:2px; color:var(--amber); margin-bottom:12px; }
.review-card__text {
font-size:13.5px; line-height:1.65; color:var(--text); margin:0; }
/* ---------- FAQ ---------- */
.faq {
max-width: 820px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item {
background:rgba(255, 255, 255, .03); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:border-color .3s ease, background .3s ease; }
.faq-item[open] {
border-color:var(--amber-line); background:rgba(217, 122, 43, .04); }
.faq-item summary {
list-style:none; cursor:pointer; padding:20px 56px 20px 26px; font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--white); position:relative; transition:color .2s ease; }
.faq-item summary::-webkit-details-marker {
display:none; }
.faq-item summary::after {
content:"+"; position:absolute; right:24px; top:50%; transform:translateY(-50%); font-size:24px; font-weight:300; color:var(--amber); transition:transform .3s ease; }
.faq-item[open] summary::after {
transform:translateY(-50%) rotate(45deg); }
.faq-item summary:hover {
color:var(--amber-light); }
.faq-item__body {
padding:0 26px 22px; font-size:14px; line-height:1.7; color:var(--muted); }
.faq-item__body p {
margin:0; }
/* ---------- CTA ---------- */
.cta-band {
display:flex; align-items:center; justify-content:space-between; gap:32px; padding:44px 48px; background:linear-gradient(135deg, rgba(217, 122, 43, .14), rgba(217, 122, 43, .04)); border:1px solid var(--amber-line); border-radius:20px; position:relative; overflow:hidden; }
.cta-band::before {
content:""; position:absolute; top:-120px; right:-120px; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle, rgba(217, 122, 43, .18), transparent 65%); pointer-events:none; }
.cta-band__text {
position:relative; z-index:1; max-width: 560px; }
.cta-band__text h2 {
font-family:var(--font-display); font-size:clamp(22px, 2.4vw, 30px); font-weight:700; letter-spacing:-.025em; color:var(--white); margin:0 0 10px; }
.cta-band__text p {
font-size:15px; line-height:1.6; color:var(--muted); margin:0; }
.cta-band__actions {
position:relative; z-index:1; display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }
/* ---------- Адаптив для новых блоков ---------- */
@media (max-width: 1100px) {
.services-grid {
grid-template-columns:repeat(3, 1fr); }
.features-grid {
grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 900px) {
.directions {
grid-template-columns:1fr; gap:16px; }
.services-grid {
grid-template-columns:repeat(2, 1fr); }
.steps-grid {
grid-template-columns:repeat(2, 1fr); }
.portfolio-grid {
grid-template-columns:repeat(2, 1fr); }
.reviews-grid {
grid-template-columns:1fr; gap:16px; }
.cta-band {
flex-direction:column; text-align:center; padding:34px 26px; }
.cta-band__actions {
width:100%; justify-content:center; }
}
@media (max-width: 640px) {
.section__head {
margin-bottom:32px; }
.section__title {
font-size:24px; }
.section__lead {
font-size:14px; }
.services-grid, .features-grid, .steps-grid, .portfolio-grid {
grid-template-columns:1fr; gap:12px; }
.direction {
padding:26px 22px; }
.direction__icon {
width:48px; height:48px; }
.direction__title {
font-size:19px; }
.service-card {
padding:16px 18px; gap:14px; }
.service-card__icon {
width:40px; height:40px; }
.feature-card, .step-card, .review-card {
padding:22px; }
.step-card__num {
font-size:32px; }
.cta-band {
padding:28px 20px; border-radius:16px; }
.cta-band__actions {
flex-direction:column; }
.cta-band__actions .btn {
width:100%; }
.portfolio-card {
min-height: 240px; padding:20px; }
.faq-item summary {
padding:16px 48px 16px 20px; font-size:14px; }
.faq-item__body {
padding:0 20px 18px; font-size:13.5px; }
}
/* ========== СТРАНИЦЫ РАЗДЕЛОВ И УСЛУГ ========== */

/* ---------- Page Hero ---------- */
.page-hero {
position:relative; padding:100px 0 72px; background:linear-gradient(180deg, #1a120d 0%, #201712 60%, #2a1f17 100%); overflow:hidden; margin-top:-76px; padding-top:160px; }
.page-hero__bg {
position:absolute; inset:0; background-image: radial-gradient(800px 400px at 15% 30%, rgba(217, 122, 43, .12) 0%, transparent 60%), radial-gradient(700px 380px at 90% 70%, rgba(217, 122, 43, .08) 0%, transparent 60%); pointer-events:none; }
.page-hero__inner {
position:relative; z-index:1; max-width: 900px; }
.page-hero__eyebrow {
display:inline-flex; align-items:center; gap:8px; padding:7px 14px; font-family:var(--font-display); font-size:10.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-light); background:rgba(217, 122, 43, .12); border:1px solid var(--amber-line); border-radius:100px; margin-bottom:22px; }
.page-hero__title {
font-family:var(--font-display); font-size:clamp(28px, 3.4vw, 46px); font-weight:800; line-height:1.1; letter-spacing:-.03em; color:var(--white); margin:0 0 22px; }
.page-hero__title em {
font-style:normal; background:linear-gradient(135deg, var(--amber-light), var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.page-hero__lead {
font-size:16px; line-height:1.65; color:var(--muted); margin:0 0 32px; max-width: 680px; }
.page-hero__actions {
display:flex; gap:14px; flex-wrap:wrap; }
/* ---------- Crumbs (хлебные крошки) ---------- */
.crumbs {
display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted-2); margin-bottom:24px; flex-wrap:wrap; }
.crumbs a {
color:var(--muted); transition:color .2s ease; }
.crumbs a:hover {
color:var(--amber-light); }
.crumbs span {
opacity:.6; }
.crumbs__current {
color:var(--amber-light); }
/* ---------- svc-list / svc-row (список услуг раздела) ---------- */
.svc-list {
display:flex; flex-direction:column; gap:14px; max-width: 1000px; margin:0 auto; }
.svc-row {
display:flex; align-items:center; gap:24px; padding:24px 28px; background:linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); border:1px solid var(--line); border-radius:16px; transition:transform .35s ease, border-color .3s ease, background .3s ease, box-shadow .35s ease; position:relative; overflow:hidden; }
.svc-row::before {
content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--amber), var(--amber-light)); transform:scaleY(0); transform-origin:top; transition:transform .35s ease; }
.svc-row:hover {
transform:translateX(6px); border-color:var(--amber-line); background:linear-gradient(180deg, rgba(217, 122, 43, .06), rgba(217, 122, 43, .02)); box-shadow:0 16px 40px rgba(0, 0, 0, .3); }
.svc-row:hover::before {
transform:scaleY(1); }
.svc-row__icon {
width:56px; height:56px; border-radius:14px; background:rgba(217, 122, 43, .12); border:1px solid var(--amber-line); color:var(--amber); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s ease, color .3s ease, transform .4s ease; }
.svc-row:hover .svc-row__icon {
background:linear-gradient(135deg, var(--amber), var(--amber-light)); color:#1a120d; transform:rotate(-6deg); }
.svc-row__body {
flex:1; min-width: 0; }
.svc-row__body b {
display:block; font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.015em; color:var(--white); margin-bottom:6px; }
.svc-row__body p {
font-size:13.5px; line-height:1.6; color:var(--muted); margin:0; }
.svc-row__arrow {
color:var(--muted-2); flex-shrink:0; transition:color .3s ease, transform .3s ease; }
.svc-row:hover .svc-row__arrow {
color:var(--amber); transform:translateX(4px); }
/* ---------- content (статьи, юридические, услуги) ---------- */
.content {
max-width: 820px; margin:0 auto; color:var(--text); font-size:15px; line-height:1.75; }
.content__lead {
font-size:17px; line-height:1.6; color:var(--text); padding:24px 28px; background:rgba(217, 122, 43, .06); border-left:3px solid var(--amber); border-radius:0 12px 12px 0; margin-bottom:36px; }
.content h2 {
font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--white); margin:40px 0 14px; }
.content h2:first-child {
margin-top:0; }
.content h3 {
font-family:var(--font-display); font-size:17px; font-weight:700; color:var(--white); margin:26px 0 10px; }
.content p {
margin:0 0 1em; color:var(--muted); }
.content b, .content strong {
color:var(--white); font-weight:700; }
.content ul, .content ol {
padding-left:0; list-style:none; margin:0 0 1.4em; }
.content ol {
counter-reset:my-ol; }
.content ul li, .content ol li {
position:relative; padding-left:34px; margin-bottom:10px; color:var(--muted); }
.content ul li::before {
content:""; position:absolute; left:0; top:11px; width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg, var(--amber), var(--amber-light)); box-shadow:0 0 12px rgba(217, 122, 43, .4); }
.content ul li::after {
content:""; position:absolute; left:6px; top:16px; width:6px; height:3px; border-left:2px solid #1a120d; border-bottom:2px solid #1a120d; transform:rotate(-45deg); }
.content ol li {
counter-increment:my-ol; padding-left:44px; }
.content ol li::before {
content:counter(my-ol, decimal-leading-zero); position:absolute; left:0; top:2px; font-family:var(--font-display); font-size:14px; font-weight:800; color:var(--amber); letter-spacing:-.02em; }
.content a {
color:var(--amber); text-decoration:underline; }
.content a:hover {
color:var(--amber-light); }
/* ---------- Адаптив ---------- */
@media (max-width: 900px) {
.page-hero {
padding:130px 0 56px; }
.page-hero__title {
font-size:28px; }
}
@media (max-width: 640px) {
.page-hero {
padding:110px 0 44px; margin-top:-64px; }
.page-hero__title {
font-size:24px; }
.page-hero__lead {
font-size:14.5px; }
.page-hero__actions {
flex-direction:column; }
.page-hero__actions .btn {
width:100%; }
.crumbs {
font-size:11.5px; margin-bottom:18px; }
.svc-row {
padding:18px 20px; gap:16px; flex-wrap:wrap; }
.svc-row__icon {
width:46px; height:46px; }
.svc-row__body b {
font-size:15px; }
.svc-row__body p {
font-size:12.5px; }
.svc-row__arrow {
display:none; }
.content {
font-size:14.5px; }
.content__lead {
font-size:15px; padding:18px 20px; }
.content h2 {
font-size:19px; margin-top:30px; }
.content h3 {
font-size:16px; }
}
/* ========== БЛОГ И КОНТАКТЫ ========== */

/* ---------- Blog ---------- */
.blog-grid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.blog-card {
display:flex; flex-direction:column; padding:26px; background:linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); border:1px solid var(--line); border-radius:var(--radius); transition:transform .4s ease, border-color .3s ease, background .3s ease; cursor:pointer; }
.blog-card:hover {
transform:translateY(-6px); border-color:var(--amber-line); background:linear-gradient(180deg, rgba(217, 122, 43, .06), rgba(217, 122, 43, .02)); }
.blog-card__cat {
display:inline-block; align-self:flex-start; font-family:var(--font-display); font-size:10px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); padding:5px 12px; border:1px solid var(--amber-line); border-radius:100px; margin-bottom:16px; }
.blog-card__title {
font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-.015em; color:var(--white); line-height:1.3; margin:0 0 12px; }
.blog-card__excerpt {
font-size:13.5px; line-height:1.6; color:var(--muted); margin:0 0 auto; flex:1; }
.blog-card__meta {
display:flex; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); font-size:11.5px; color:var(--muted-2); letter-spacing:.02em; }
/* ---------- Contacts ---------- */
.contact-grid {
display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.contact-info {
display:flex; flex-direction:column; gap:16px; }
.contact-item {
display:flex; align-items:flex-start; gap:18px; padding:22px 24px; background:linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); border:1px solid var(--line); border-radius:14px; transition:border-color .3s ease, transform .3s ease; }
.contact-item:hover {
border-color:var(--amber-line); transform:translateY(-2px); }
.contact-item__icon {
width:46px; height:46px; border-radius:12px; background:rgba(217, 122, 43, .12); border:1px solid var(--amber-line); color:var(--amber); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-item__body b {
display:block; font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-2); margin-bottom:6px; }
.contact-item__body a, .contact-item__body span {
display:block; font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--white); letter-spacing:-.01em; margin-bottom:4px; transition:color .2s ease; }
.contact-item__body a:hover {
color:var(--amber-light); }
.contact-item__body small {
display:block; font-size:12px; color:var(--muted-2); }
.contact-socials {
display:flex; gap:12px; margin-top:6px; flex-wrap:wrap; }
.contact-form {
padding:34px; background:linear-gradient(180deg, rgba(217, 122, 43, .06), rgba(217, 122, 43, .02)); border:1px solid var(--amber-line); border-radius:20px; display:flex; flex-direction:column; gap:16px; }
.contact-form h3 {
font-family:var(--font-display); font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--white); margin:0 0 4px; }
.contact-form__sub {
font-size:13.5px; color:var(--muted); margin:0 0 8px; }
.contact-form .field span {
color:var(--muted); font-size:12.5px; font-weight:600; }
.contact-form .field input, .contact-form .field textarea {
background:rgba(255, 255, 255, .04); border:1.5px solid var(--line); color:var(--white); padding:13px 16px; border-radius:10px; font-size:14.5px; font-family:var(--font-body); transition:border-color .2s ease, background .2s ease; resize:vertical; }
.contact-form .field input::placeholder, .contact-form .field textarea::placeholder {
color:var(--muted-2); }
.contact-form .field input:focus, .contact-form .field textarea:focus {
outline:none; border-color:var(--amber); background:rgba(255, 255, 255, .06); }
.contact-form__policy {
font-size:11.5px; color:var(--muted-2); text-align:center; margin:8px 0 0; line-height:1.5; }
.contact-form__policy a {
color:var(--amber); text-decoration:underline; }
@media (max-width: 900px) {
.blog-grid {
grid-template-columns:repeat(2, 1fr); }
.contact-grid {
grid-template-columns:1fr; gap:26px; }
}
@media (max-width: 640px) {
.blog-grid {
grid-template-columns:1fr; gap:14px; }
.blog-card {
padding:20px; }
.contact-item {
padding:18px; gap:14px; }
.contact-item__icon {
width:42px; height:42px; }
.contact-item__body a, .contact-item__body span {
font-size:15px; }
.contact-form {
padding:24px; }
.contact-form h3 {
font-size:19px; }
.contact-socials {
flex-direction:column; }
.contact-socials .btn {
width:100%; }
}
/* FIX-высоты откачен (меню перенесено наверх) */


/* ===== QUICKNAV v3: sticky под шапкой ===== */
/* Шапка и топбар фиксированные. Quicknav идёт первым в потоке, сразу под ними — с отступом сверху = topbar-h + header-h. */
.hero__quicknav {
position: sticky; top: calc(var(--topbar-h) + var(--header-h)); z-index: 90; margin-top: calc(var(--topbar-h) + var(--header-h)); padding: 0; background: rgba(21, 15, 10, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid rgba(217, 122, 43, .22); border-bottom: 1px solid rgba(217, 122, 43, .22); transition: top .3s ease, margin-top .3s ease; }
.hero__quicklist {
display: flex; align-items: stretch; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.hero__quicklist li {
flex: 1 1 0; min-width: 0; display: flex; }
.hero__quicklist li + li {
border-left: 1px solid rgba(255, 255, 255, .06); }
.hero__quicklist a {
display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 18px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: -.01em; color: #fff; text-decoration: none; transition: background .25s ease, color .25s ease; position: relative; }
.hero__quicklist a::before {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #D97A2B, #F0A055); transform: scaleX(0); transform-origin: left center; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.hero__quicklist a:hover {
background: rgba(217, 122, 43, .08); color: #F0A055; }
.hero__quicklist a:hover::before {
transform: scaleX(1); }
.hero__quicklist svg {
color: var(--amber, #D97A2B); flex-shrink: 0; transition: transform .3s ease, color .3s ease; }
.hero__quicklist a:hover svg {
transform: rotate(-6deg) scale(1.1); color: #F0A055; }
@media (max-width: 1100px) {
.hero__quicknav {
top: calc(var(--topbar-h) + var(--header-h-compact)); margin-top: calc(var(--topbar-h) + var(--header-h-compact)); }
}
@media (max-width: 900px) {
.hero__quicklist li {
flex: 1 1 50%; max-width: 50%; }
.hero__quicklist li:nth-child(2n) {
border-left: 1px solid rgba(255, 255, 255, .06); }
.hero__quicklist li:nth-child(2n+1) {
border-left: none; }
.hero__quicklist li:nth-child(n+3) {
border-top: 1px solid rgba(255, 255, 255, .06); }
.hero__quicklist a {
padding: 14px 16px; font-size: 12.5px; gap: 8px; }
.hero__quicklist svg {
width: 15px; height: 15px; }
}
@media (max-width: 640px) {
.hero__quicknav {
position: static; margin-top: calc(var(--topbar-h) + var(--header-h-compact)); }
.hero__quicklist li {
flex: 1 1 50%; max-width: 50%; }
.hero__quicklist a {
padding: 12px 14px; font-size: 12px; gap: 7px; }
.hero__quicklist a span, .hero__quicklist a {
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
/* ===== /QUICKNAV v3 ===== */


/* ===== TOPBAR ROW (после удаления container) ===== */
.topbar__row {
display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; max-width: var(--container); margin: 0 auto; padding: 0 24px; height: 100%; }
.topbar__row .topbar__group {
display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 900px) {
.topbar__row {
padding: 0 16px; gap: 12px; font-size: 12px; }
.topbar__row .topbar__group {
gap: 14px; }
}
@media (max-width: 640px) {
.topbar__row {
padding: 0 14px; justify-content: center; font-size: 11.5px; gap: 8px; }
.topbar__row .topbar__group {
gap: 12px; }
}
/* ===== /TOPBAR ROW ===== */


/* ===== TOPBAR BRAND ===== */
.topbar__group--brand {
display: flex; align-items: center; gap: 16px; }
.topbar__brand {
font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: .04em; color: #fff; text-transform: uppercase; }
.topbar__sub {
font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2, rgba(232, 227, 219, .42)); padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, .12); }
@media (max-width: 900px) {
.topbar__group--brand {
gap: 10px; }
.topbar__brand {
font-size: 12.5px; }
.topbar__sub {
font-size: 9.5px; padding-left: 10px; letter-spacing: .08em; }
}
@media (max-width: 640px) {
.topbar__sub {
display: none; }
.topbar__brand {
font-size: 12px; }
}
/* ===== /TOPBAR BRAND ===== */
/* ==== WHY_SVG_BG ==== */
/* Анимированный SVG-фон блока «Почему мы» */
#advantages {
position: relative; overflow: hidden; }
/* ==== FOOTER_STRICT ==== */
.footer {
background: var(--footer-bg, #150f0a); border-top: 1px solid rgba(217, 122, 43, .35); padding: 60px 0 30px; position: relative; }
.footer__grid {
display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px 40px; align-items: start; padding: 0 0 44px; }
.footer__col {
min-width: 0; }
.footer__col--brand .logo--footer {
display: inline-flex; align-items: center; gap: 12px; margin-bottom: 20px; color: inherit; text-decoration: none; }
.logo--footer .logo__mark {
color: var(--amber); flex-shrink: 0; }
.logo--footer .logo__text {
display: flex; flex-direction: column; font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.1; color: #fff; }
.logo--footer .logo__text small {
font-family: 'Manrope', sans-serif; font-size: .68rem; font-weight: 500; letter-spacing: .14em; color: rgba(232, 227, 219, .45); text-transform: uppercase; margin-top: 4px; }
.footer__desc {
margin: 0 0 22px; max-width: 340px; font-size: .88rem; line-height: 1.55; color: rgba(232, 227, 219, .6); }
.footer__socials {
display: flex; gap: 8px; }
.footer__social {
display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid rgba(255, 255, 255, .10); border-radius: 8px; color: rgba(232, 227, 219, .75); transition: border-color .2s ease, color .2s ease, background .2s ease; }
.footer__social:hover {
border-color: var(--amber); color: var(--amber); background: rgba(217, 122, 43, .06); }
.footer__heading {
font-family: 'Unbounded', 'Manrope', sans-serif; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--amber); margin: 0 0 18px; padding: 0 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.footer__list {
list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer__list li {
line-height: 1.4; }
.footer__list a {
color: rgba(232, 227, 219, .62); text-decoration: none; font-size: .88rem; transition: color .2s ease; }
.footer__list a:hover {
color: #fff; }
.footer__list--contacts {
gap: 14px; }
.footer__contact {
display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; }
.footer__contact-label {
font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(232, 227, 219, .38); }
.footer__contact b {
font-size: .9rem; font-weight: 600; color: rgba(232, 227, 219, .88); }
.footer__list a.footer__contact:hover b {
color: var(--amber); }
.footer__btn {
margin-top: 22px; width: 100%; justify-content: center; }
.footer__bottom {
display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; padding: 24px 0 0; border-top: 1px solid rgba(255, 255, 255, .07); font-size: .8rem; color: rgba(232, 227, 219, .42); }
.footer__legal {
display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.footer__disclaimer {
margin: 0; font-size: .76rem; color: rgba(232, 227, 219, .32); }
@media (max-width: 1100px) {
.footer__grid {
grid-template-columns: 1fr 1fr; gap: 40px 32px; }
.footer__col--brand {
grid-column: 1 / -1; }
.footer__desc {
max-width: 520px; }
}
@media (max-width: 640px) {
.footer {
padding: 44px 0 24px; }
.footer__grid {
grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
.footer__bottom {
flex-direction: column; align-items: flex-start; }
}
/* ==== /FOOTER_STRICT ==== */

/* ==== CONTACTS_LEFT_ALIGN ==== */
.footer__list--contacts {
align-items: flex-start; }
.footer__list--contacts > li {
text-align: left; width: 100%; }
.footer__list--contacts .footer__contact {
align-items: flex-start; text-align: left; }
.footer__list--contacts .footer__contact-label, .footer__list--contacts .footer__contact b {
text-align: left; }
/* ==== /CONTACTS_LEFT_ALIGN ==== */

/* ==== EQUIPMENT_SECTION ==== */
.section--equipment {
background: var(--bg-deep); }
.section--equipment .section__bg {
opacity: .55; }
.equipment-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.equipment-card {
position: relative; padding: 30px 26px; background: rgba(255, 255, 255, .03); border: 1px solid var(--line); border-radius: var(--radius); transition: transform .4s ease, border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.equipment-card:hover {
transform: translateY(-6px); background: var(--surface); border-color: var(--amber-line); box-shadow: 0 18px 40px rgba(0, 0, 0, .4); }
.equipment-card__icon {
display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(217, 122, 43, .10); border: 1px solid var(--amber-line); color: var(--amber); margin-bottom: 18px; }
.equipment-card__metric {
display: inline-block; margin-left: 8px; padding: 5px 11px; border-radius: 100px; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-light); background: rgba(217, 122, 43, .08); border: 1px solid var(--amber-line); vertical-align: middle; }
.equipment-card h3 {
margin: 0 0 10px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--white); line-height: 1.3; }
.equipment-card p {
margin: 0; font-size: .9rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 1100px) {
.equipment-grid {
grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.equipment-grid {
grid-template-columns: 1fr; }
.equipment-card {
padding: 24px 20px; }
}
/* ==== /EQUIPMENT_SECTION ==== */


/* ==== FOOTER_BG ==== */
.footer > .container {
position: relative; z-index: 2; }
.footer__bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url("../img/bg-footer.svg"); background-repeat: repeat; background-size: 480px 480px; background-position: center top; opacity: .55; }
/* ==== /FOOTER_BG ==== */


/* ==== REVIEWS_CAROUSEL ==== */
.section--reviews {
background: radial-gradient(ellipse at 15% 0%, rgba(217, 122, 43, 0.07) 0%, transparent 55%), radial-gradient(ellipse at 85% 100%, rgba(217, 122, 43, 0.05) 0%, transparent 60%), var(--bg); }
.reviews-carousel {
position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 36px; /* место под точки */
 }
.reviews-carousel__viewport {
flex: 1; overflow: hidden; padding: 10px 4px; margin: -10px -4px; }
.reviews-carousel__track {
display: flex; gap: 20px; transition: transform .55s cubic-bezier(.22, .9, .3, 1); will-change: transform; }
.reviews-carousel__track > .review-card {
flex: 0 0 calc((100% - 40px) / 3); min-width: 0; margin: 0; }
.reviews-carousel__nav {
flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--amber-line); background: rgba(42, 31, 23, .65); color: var(--amber-light); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.reviews-carousel__nav:hover:not(:disabled) {
background: rgba(217, 122, 43, .14); border-color: var(--amber); color: var(--white); transform: translateY(-1px); }
.reviews-carousel__nav:disabled {
opacity: .35; cursor: default; }
.reviews-carousel__dots {
position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); display: flex; gap: 8px; }
.reviews-carousel__dot {
width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(217, 122, 43, .45); background: transparent; padding: 0; cursor: pointer; transition: background .25s ease, transform .25s ease, border-color .25s ease; }
.reviews-carousel__dot.is-active {
background: var(--amber); border-color: var(--amber); transform: scale(1.2); }
@media (max-width: 1023px) {
.reviews-carousel__track > .review-card {
flex: 0 0 calc((100% - 20px) / 2); }
}
@media (max-width: 699px) {
.reviews-carousel__track > .review-card {
flex: 0 0 100%; }
.reviews-carousel__nav {
width: 40px; height: 40px; }
.reviews-carousel {
padding-bottom: 30px; }
}
/* ==== /REVIEWS_CAROUSEL ==== */

/* ==== ADVANTAGES_BG ==== */
#advantages.section--dark {
background: #150f0a; }
/* ==== /ADVANTAGES_BG ==== */


/* ==== DIRECTIONS_V2 ==== */
.directions {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.direction {
position: relative; display: flex; flex-direction: column; min-height: 460px; padding: 30px 28px 26px; background-color: #150f0a; background-size: cover; background-position: center; background-repeat: no-repeat; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; isolation: isolate; transition: transform .5s ease, border-color .3s ease, box-shadow .5s ease; color: var(--text); }
.direction:hover {
transform: translateY(-6px); border-color: var(--amber-line); box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(217, 122, 43, .10); }
/* Нижний тёмный градиент поверх фото — под текст */
.direction__overlay {
position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20, 17, 18, 0.30) 0%, rgba(20, 17, 18, 0.55) 30%, rgba(20, 17, 18, 0.88) 62%, rgba(20, 17, 18, 0.97) 100%), linear-gradient(180deg, rgba(217, 122, 43, 0.10) 0%, transparent 40%); }
/* Верхняя медная линия при hover (как у других карточек) */
.direction::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--amber), transparent); transform: scaleX(0); transform-origin: center; transition: transform .45s ease; z-index: 3; }
.direction:hover::before {
transform: scaleX(1); }
/* Контент над оверлеем */
.direction__body {
position: relative; z-index: 2; margin-top: auto; display: flex; flex-direction: column; }
.direction__head {
display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.direction__icon {
width: 54px; height: 54px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: rgba(21, 15, 10, .65); border: 1px solid var(--amber-line); color: var(--amber); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .3s ease, color .3s ease, transform .4s ease; }
.direction:hover .direction__icon {
background: linear-gradient(135deg, var(--amber), var(--amber-light)); color: #1a120d; transform: rotate(-6deg); }
.direction__title {
font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: #fff; margin: 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); }
.direction__lead {
font-size: 14px; line-height: 1.6; color: rgba(232, 227, 219, .78); margin: 0 0 18px; }
.direction__list {
display: flex; flex-direction: column; gap: 9px; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid rgba(255, 255, 255, .10); list-style: none; }
.direction__list li {
display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; color: rgba(232, 227, 219, .85); }
.direction__check {
color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.direction__link {
display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--amber); text-decoration: none; transition: color .2s ease, gap .3s ease; }
.direction__link:hover {
color: var(--amber-light); gap: 12px; }
.direction__link svg {
transition: transform .3s ease; }
.direction__link:hover svg {
transform: translateX(3px); }
@media (max-width: 1023px) {
.directions {
grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
.directions {
grid-template-columns: 1fr; }
.direction {
min-height: 380px; padding: 26px 22px 24px; }
.direction__icon {
width: 48px; height: 48px; }
.direction__title {
font-size: 19px; }
}
/* ==== /DIRECTIONS_V2 ==== */

/* ==== STEPS_BG ==== */
#steps {
position: relative; background-image: url("../img/steps-bg.jpg"); background-size: cover; background-position: center center; background-repeat: no-repeat; }
#steps::before {
content: ""; position: absolute; inset: 0; background: rgba(21, 15, 10, .90); z-index: 0; pointer-events: none; }
#steps > .container {
position: relative; z-index: 1; }
@media (max-width: 640px) {
#steps::before {
background: rgba(21, 15, 10, .94); }
}
/* ==== /STEPS_BG ==== */


/* ==== STEPS_V2 ==== */
/* Улучшенные карточки «Как мы работаем» */
.steps-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; list-style: none; padding: 0; margin: 0; counter-reset: stepnum; }
.step-card {
position: relative; padding: 34px 30px 30px; border-radius: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .015) 100%), rgba(21, 15, 10, .55); border: 1px solid rgba(217, 122, 43, .18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); overflow: hidden; isolation: isolate; transition: transform .4s ease, border-color .35s ease, background .35s ease, box-shadow .4s ease; counter-increment: stepnum; }
/* Медный градиентный блик сверху */
.step-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--amber), transparent); transform: scaleX(0); transform-origin: left; transition: transform .5s ease; z-index: 2; }
/* Огромная цифра-водяной знак справа */
.step-card::after {
content: ""; position: absolute; right: -20px; bottom: -40px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(217, 122, 43, .10) 0%, transparent 70%); pointer-events: none; z-index: 0; transition: background .4s ease, transform .6s ease; }
.step-card:hover {
transform: translateY(-8px); border-color: var(--amber-line); background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .02) 100%), rgba(21, 15, 10, .7); box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(217, 122, 43, .14); }
.step-card:hover::before {
transform: scaleX(1); }
.step-card:hover::after {
background: radial-gradient(circle, rgba(217, 122, 43, .22) 0%, transparent 70%); transform: scale(1.15); }
/* Номер — как кружок с медной рамкой */
.step-card__num {
display: inline-flex; align-items: center; justify-content: center; min-width: 54px; height: 54px; padding: 0 14px; border-radius: 14px; font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1; color: var(--amber-light); background: linear-gradient(135deg, rgba(217, 122, 43, .18), rgba(240, 160, 85, .06)); border: 1px solid var(--amber-line); box-shadow: 0 6px 18px rgba(217, 122, 43, .12), inset 0 1px 0 rgba(255, 255, 255, .06); margin-bottom: 22px; position: relative; z-index: 1; transition: background .35s ease, color .35s ease, transform .4s ease, box-shadow .35s ease; }
.step-card:hover .step-card__num {
background: linear-gradient(135deg, var(--amber), var(--amber-light)); color: #1a120d; transform: translateY(-2px) rotate(-3deg); box-shadow: 0 10px 24px rgba(217, 122, 43, .35); }
/* Заголовок шага */
.step-card b {
display: block; font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: #fff; margin: 0 0 10px; line-height: 1.35; position: relative; z-index: 1; }
/* Описание */
.step-card p {
position: relative; z-index: 1; margin: 0; font-size: .9rem; line-height: 1.62; color: rgba(232, 227, 219, .72); }
/* Тонкая медная линия между рядами (пунктиром) — десктоп */
@media (min-width: 1024px) {
.steps-grid {
position: relative; }
.steps-grid::before {
content: ""; position: absolute; left: 0; right: 0; top: 54px; height: 1px; background: repeating-linear-gradient(
 90deg, rgba(217, 122, 43, .35) 0 6px, transparent 6px 14px
 ); opacity: .25; pointer-events: none; }
}
/* Адаптив */
@media (max-width: 1023px) {
.steps-grid {
grid-template-columns: 1fr 1fr; }
.steps-grid::before {
display: none; }
}
@media (max-width: 640px) {
.steps-grid {
grid-template-columns: 1fr; gap: 16px; }
.step-card {
padding: 26px 22px; }
.step-card__num {
min-width: 48px; height: 48px; font-size: 20px; margin-bottom: 18px; }
.step-card b {
font-size: 1rem; }
}
/* ==== /STEPS_V2 ==== */

/* ==== SERVICE_FEATURED ==== */
.service-card--featured {
grid-column: span 2; grid-row: span 2; display: flex !important; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 0 !important; border-radius: 18px; overflow: hidden; border: 1px solid rgba(217, 122, 43, .22); background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01)); transition: transform .45s ease, border-color .3s ease, box-shadow .45s ease; }
.service-card--featured:hover {
transform: translateY(-6px); border-color: var(--amber-line); box-shadow: 0 26px 60px rgba(0, 0, 0, .5), 0 0 40px rgba(217, 122, 43, .16); }
/* Медиа сверху */
.service-card--featured .service-card__media {
position: relative; display: block; aspect-ratio: 16 / 10; margin: 0 !important; overflow: hidden; flex-shrink: 0; }
.service-card--featured .service-card__media img {
width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.4, 0, .2, 1); }
.service-card--featured:hover .service-card__media img {
transform: scale(1.07); }
.service-card--featured .service-card__media-shade {
position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(21, 15, 10, .55) 100%); pointer-events: none; }
/* Бейдж "Хит продаж" */
/* Тело карточки */
.service-card--featured .service-card__body {
padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; min-width: 0; }
.service-card--featured .service-card__icon {
width: 42px; height: 42px; border-radius: 12px; background: rgba(217, 122, 43, .12); border: 1px solid var(--amber-line); color: var(--amber); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-bottom: 4px; }
.service-card--featured:hover .service-card__icon {
background: linear-gradient(135deg, var(--amber), var(--amber-light)); color: #1a120d; }
.service-card--featured .service-card__body b {
font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; color: #fff; letter-spacing: -.01em; line-height: 1.25; }
.service-card--featured .service-card__body small {
font-size: .92rem; line-height: 1.6; color: rgba(232, 227, 219, .72); }
/* CTA "Подробнее →" */
.service-card--featured .service-card__cta {
display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font-size: .9rem; font-weight: 700; color: var(--amber); transition: color .25s ease, gap .3s ease; }
.service-card--featured:hover .service-card__cta {
color: var(--amber-light); gap: 12px; }
.service-card--featured .service-card__cta svg {
transition: transform .3s ease; }
.service-card--featured:hover .service-card__cta svg {
transform: translateX(3px); }
/* Адаптив */
@media (max-width: 1023px) {
.service-card--featured {
grid-column: span 2; grid-row: auto; }
}
@media (max-width: 640px) {
.service-card--featured {
grid-column: span 1; }
.service-card--featured .service-card__body b {
font-size: 1.15rem; }
}
/* ==== /SERVICE_FEATURED ==== */

/* ==== SERVICES_GRID_V2 ==== */
/* Раскладка: первый ряд — 2 крупных, дальше — по 3 карточки */
.services-grid {
display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 22px !important; }
/* Все featured — по 3 в ряд (2 из 6) */
.service-card--featured {
grid-column: span 2 !important; grid-row: auto !important; }
/* Первые две featured — по 2 в ряд (3 из 6) */
.service-card--featured:nth-child(1), .service-card--featured:nth-child(2) {
grid-column: span 3 !important; }
/* Обычные компактные карточки — тоже по 3 в ряд */
.service-card:not(.service-card--featured) {
grid-column: span 2 !important; }
/* Планшет: 4 колонки, по 2 карточки в ряд */
@media (max-width: 1276px) {
.services-grid {
grid-template-columns: repeat(4, 1fr) !important; gap: 18px !important; }
.service-card--featured, .service-card--featured:nth-child(1), .service-card--featured:nth-child(2), .service-card:not(.service-card--featured) {
grid-column: span 2 !important; }
}
/* Мобильные: 2 колонки */
@media (max-width: 640px) {
.services-grid {
grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; }
.service-card--featured, .service-card--featured:nth-child(1), .service-card--featured:nth-child(2) {
grid-column: span 2 !important; }
.service-card:not(.service-card--featured) {
grid-column: span 1 !important; }
}
/* ==== /SERVICES_GRID_V2 ==== */

/* === PAGE-HERO CRUMBS FIX V3 === */
.page-hero {
padding-top: 260px !important; margin-top: 0 !important; }
.page-hero .crumbs {
margin: 0 0 32px !important; font-size: 13px !important; padding: 0 !important; }
.page-hero .crumbs a, .page-hero .crumbs span {
display: inline !important; position: static !important; }
@media (max-width: 1024px) {
.page-hero {
padding-top: 220px !important; }
}
@media (max-width: 768px) {
.page-hero {
padding-top: 180px !important; }
.page-hero .crumbs {
margin-bottom: 22px !important; }
}
/* === /PAGE-HERO CRUMBS FIX V3 === */

/* === FOOTER TOP PAD FIX === */
footer.footer, .footer {
padding-top: 100px !important; padding-bottom: 40px !important; margin-top: 0 !important; }
section.section + footer.footer, section.section + .footer {
margin-top: 60px !important; }
@media (max-width: 768px) {
.footer {
padding-top: 64px !important; padding-bottom: 28px !important; }
section.section + footer.footer, section.section + .footer {
margin-top: 40px !important; }
}
/* === /FOOTER TOP PAD FIX === */

/* === OT-STATS ANIM === */
@keyframes otStatIn {
0% {
opacity: 0; transform: translateY(28px) scale(.94); }
60% {
opacity: 1; transform: translateY(-4px) scale(1.02); }
100% {
opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes otNumPulse {
0%, 100% {
filter: drop-shadow(0 0 0 rgba(240, 165, 0, 0)); }
50% {
filter: drop-shadow(0 0 12px rgba(240, 165, 0, .35)); }
}
@keyframes otStatGlow {
0%, 100% {
box-shadow: 0 0 0 rgba(217, 122, 43, 0); }
50% {
box-shadow: 0 8px 30px rgba(217, 122, 43, .18); }
}
.ot-stats .ot-stat {
opacity: 0; transform: translateY(28px) scale(.94); animation: otStatIn .85s cubic-bezier(.2, .8, .2, 1) forwards; transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease, background .35s ease; }
.ot-stats .ot-stat:nth-child(1) {
animation-delay: .05s; }
.ot-stats .ot-stat:nth-child(2) {
animation-delay: .18s; }
.ot-stats .ot-stat:nth-child(3) {
animation-delay: .31s; }
.ot-stats .ot-stat:nth-child(4) {
animation-delay: .44s; }
.ot-stats .ot-stat b {
animation: otNumPulse 3.2s ease-in-out infinite; animation-delay: 1s; }
.ot-stats .ot-stat:nth-child(2) b {
animation-delay: 1.15s; }
.ot-stats .ot-stat:nth-child(3) b {
animation-delay: 1.3s; }
.ot-stats .ot-stat:nth-child(4) b {
animation-delay: 1.45s; }
.ot-stats .ot-stat:hover {
transform: translateY(-6px) scale(1.03) !important; border-color: rgba(240, 165, 0, .55); background: rgba(40, 27, 17, .95); box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 0 0 1px rgba(240, 165, 0, .25) inset; }
.ot-stats .ot-stat::after {
content: ''; position: absolute; left: 20%; right: 20%; bottom: 10px; height: 2px; background: linear-gradient(90deg, transparent, rgba(240, 165, 0, .7), transparent); opacity: .55; transition: opacity .35s ease, left .35s ease, right .35s ease; }
.ot-stats .ot-stat:hover::after {
opacity: 1; left: 10%; right: 10%; }
/* Уважаем prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.ot-stats .ot-stat, .ot-stats .ot-stat b {
animation: none !important; opacity: 1 !important; transform: none !important; }
}
/* === /OT-STATS ANIM === */

/* === SUBPAGES CSS === */
.ot-hero {
position:relative; padding:260px 0 90px; background:linear-gradient(180deg, rgba(26, 18, 13, .7) 0%, rgba(32, 23, 18, .45) 55%, rgba(42, 31, 23, .85) 100%) center/cover no-repeat; overflow:hidden }
.ot-hero__bg {
position:absolute; inset:0; background-image:radial-gradient(900px 420px at 15% 30%, rgba(217, 122, 43, .16) 0%, transparent 60%), radial-gradient(700px 400px at 90% 70%, rgba(217, 122, 43, .10) 0%, transparent 60%); pointer-events:none }
.ot-hero__inner {
position:relative; z-index:1; max-width: 960px }
.ot-hero__eyebrow {
display:inline-flex; align-items:center; gap:8px; padding:8px 16px; font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--amber-light); background:rgba(217, 122, 43, .12); border:1px solid var(--amber-line); border-radius:100px; margin-bottom:24px }
.ot-hero__title {
font-family:var(--font-display); font-size:clamp(30px, 3.6vw, 52px); font-weight:800; line-height:1.08; letter-spacing:-.03em; color:#fff; margin:0 0 24px }
.ot-hero__title em {
font-style:normal; background:linear-gradient(135deg, var(--amber-light), var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent }
.ot-hero__lead {
font-size:17px; line-height:1.65; color:rgba(232, 227, 219, .78); margin:0 0 34px; max-width: 720px }
.ot-hero__actions {
display:flex; gap:14px; flex-wrap:wrap }
.ot-hero .crumbs {
margin:0 0 24px }
.ot-hero .crumbs a, .ot-hero .crumbs span {
color:rgba(232, 227, 219, .7) }
.ot-hero .crumbs a:hover {
color:var(--amber-light) }
.ot-stats {
display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; margin-top:-40px; position:relative; z-index:2 }
.ot-stat {
background:rgba(30, 20, 13, .85); border:1px solid rgba(217, 122, 43, .25); border-radius:16px; padding:26px 22px; text-align:center; backdrop-filter:blur(8px) }
.ot-stat b {
display:block; font-family:var(--font-display); font-size:32px; font-weight:800; background:linear-gradient(135deg, var(--amber-light), var(--amber)); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:8px }
.ot-stat span {
display:block; font-size:13px; color:rgba(232, 227, 219, .62); line-height:1.4 }
.ot-grid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:8px }
.ot-card {
position:relative; padding:30px 26px; border-radius:18px; border:1px solid rgba(255, 255, 255, .08); background:linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)); display:flex; flex-direction:column; gap:14px; transition:transform .3s, border-color .3s }
.ot-card:hover {
transform:translateY(-4px); border-color:var(--amber) }
.ot-card__icon {
width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(217, 122, 43, .14); border:1px solid rgba(217, 122, 43, .3); color:var(--amber-light) }
.ot-card b {
display:block; font-family:var(--font-display); font-size:17px; font-weight:700; color:#fff; line-height:1.25 }
.ot-card p {
font-size:14px; line-height:1.6; color:rgba(232, 227, 219, .62); margin:0; flex:1 }
.ot-features {
display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; margin-top:8px }
.ot-feat {
display:flex; gap:20px; padding:28px; border-radius:18px; background:rgba(30, 20, 13, .55); border:1px solid rgba(255, 255, 255, .06) }
.ot-feat__icon {
flex:0 0 52px; width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(217, 122, 43, .14); border:1px solid rgba(217, 122, 43, .3); color:var(--amber-light) }
.ot-feat b {
display:block; font-family:var(--font-display); font-size:16px; font-weight:700; color:#fff; margin-bottom:8px }
.ot-feat p {
font-size:14px; line-height:1.6; color:rgba(232, 227, 219, .62); margin:0 }
.ot-steps {
display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:20px }
.ot-step {
position:relative; padding:30px 24px 28px; border-radius:18px; background:linear-gradient(180deg, rgba(217, 122, 43, .08), rgba(217, 122, 43, .02)); border:1px solid rgba(217, 122, 43, .22) }
.ot-step__n {
position:absolute; top:-14px; left:22px; padding:4px 12px; font-family:var(--font-display); font-size:11px; font-weight:800; letter-spacing:.16em; color:#1a120d; background:linear-gradient(135deg, var(--amber), var(--amber-light)); border-radius:100px }
.ot-step b {
display:block; font-family:var(--font-display); font-size:16px; font-weight:700; color:#fff; margin:14px 0 10px }
.ot-step p {
font-size:13.5px; line-height:1.6; color:rgba(232, 227, 219, .62); margin:0 }
.ot-faq {
display:flex; flex-direction:column; gap:12px; margin-top:20px }
.ot-faq details {
border-radius:14px; background:rgba(255, 255, 255, .02); border:1px solid rgba(255, 255, 255, .07); overflow:hidden }
.ot-faq details[open] {
border-color:rgba(217, 122, 43, .4); background:rgba(217, 122, 43, .05) }
.ot-faq summary {
padding:20px 24px; cursor:pointer; font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:18px }
.ot-faq summary::-webkit-details-marker {
display:none }
.ot-faq summary::after {
content:'+'; font-family:var(--font-display); font-size:22px; font-weight:400; color:var(--amber-light) }
.ot-faq details[open] summary::after {
content:'−' }
.ot-faq__body {
padding:0 24px 22px; font-size:14.5px; line-height:1.7; color:rgba(232, 227, 219, .72) }
@media (max-width: 1024px) {
.ot-hero {
padding:220px 0 70px }
.ot-stats {
grid-template-columns:repeat(2, 1fr) }
.ot-grid, .ot-steps {
grid-template-columns:repeat(2, 1fr) }
.ot-features {
grid-template-columns:1fr }
}
@media (max-width: 600px) {
.ot-hero {
padding:180px 0 60px }
.ot-hero__title {
font-size:28px }
.ot-hero__lead {
font-size:15px }
.ot-stats, .ot-grid, .ot-steps {
grid-template-columns:1fr; gap:14px }
.ot-hero__actions {
flex-direction:column }
.ot-hero__actions .btn {
width:100%; justify-content:center }
}
/* === /SUBPAGES CSS === */

/* === BLOG CSS === */
.blog-filters {
display:flex; flex-wrap:wrap; gap:10px; margin:0 0 32px; padding:8px; background:rgba(255, 255, 255, .03); border:1px solid rgba(255, 255, 255, .08); border-radius:100px; width:fit-content; max-width: 100% }
.blog-filters__btn {
padding:10px 18px; border:none; background:transparent; color:rgba(232, 227, 219, .72); font-family:inherit; font-size:13px; font-weight:600; border-radius:100px; cursor:pointer; transition:all .25s ease; white-space:nowrap; display:inline-flex; align-items:center; gap:6px }
.blog-filters__btn span {
color:rgba(232, 227, 219, .45); font-weight:400; font-size:12px }
.blog-filters__btn:hover {
color:#fff; background:rgba(255, 255, 255, .06) }
.blog-filters__btn.is-active {
background:linear-gradient(135deg, #D97A2B, #F0A055); color:#1a120d; font-weight:700; box-shadow:0 8px 22px rgba(217, 122, 43, .35) }
.blog-filters__btn.is-active span {
color:rgba(26, 18, 13, .7) }
.blog-grid {
display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-top:8px }
.blog-card {
position:relative; display:flex; flex-direction:column; gap:14px; padding:28px 26px 24px; border-radius:18px; border:1px solid rgba(255, 255, 255, .08); background:linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)); text-decoration:none; color:inherit; transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease; overflow:hidden }
.blog-card:hover {
transform:translateY(-6px); border-color:var(--amber); box-shadow:0 22px 50px rgba(0, 0, 0, .45) }
.blog-card__cat {
display:inline-block; align-self:flex-start; padding:5px 12px; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-light); background:rgba(217, 122, 43, .14); border:1px solid rgba(217, 122, 43, .32); border-radius:100px }
.blog-card__title {
font-family:var(--font-display, 'Unbounded', sans-serif); font-size:17px; font-weight:700; color:#fff; line-height:1.32; letter-spacing:-.02em; margin:0; transition:color .25s ease }
.blog-card:hover .blog-card__title {
color:var(--amber-light) }
.blog-card__excerpt {
font-size:13.5px; line-height:1.62; color:rgba(232, 227, 219, .62); margin:0; flex:1 }
.blog-card__meta {
display:flex; align-items:center; gap:8px; font-size:11.5px; color:rgba(232, 227, 219, .48); padding-top:14px; margin-top:4px; border-top:1px solid rgba(255, 255, 255, .07) }
.blog-card__arrow {
margin-left:auto; color:var(--amber-light); font-weight:700; font-size:12px; opacity:.55; transition:opacity .25s ease, transform .25s ease }
.blog-card:hover .blog-card__arrow {
opacity:1; transform:translateX(4px) }
.blog-empty {
padding:40px 20px; text-align:center; color:rgba(232, 227, 219, .55); font-size:14px }
@media (max-width: 1024px) {
.blog-grid {
grid-template-columns:repeat(2, 1fr); gap:20px }
}
@media (max-width: 640px) {
.blog-grid {
grid-template-columns:1fr; gap:14px }
.blog-card {
padding:22px 20px 18px }
.blog-card__title {
font-size:15.5px }
.blog-filters {
border-radius:16px; gap:6px; padding:5px }
.blog-filters__btn {
padding:9px 14px; font-size:12.5px }
}
/* === /BLOG CSS === */

/* DIRECTION_CARD_BORDER_V1 */
/* Тонкая акцентная обводка карточек направлений (Отопление / Водоснабжение / НВК) */
.direction {
border: 1px solid rgba(217, 122, 43, .45) !important; box-shadow: 0 0 0 1px rgba(217, 122, 43, .06), inset 0 0 40px rgba(217, 122, 43, .03); transition: transform .5s ease, border-color .3s ease, box-shadow .5s ease; }
.direction:hover {
border-color: rgba(217, 122, 43, .9) !important; box-shadow: 0 0 0 1px rgba(217, 122, 43, .18), 0 20px 50px rgba(0, 0, 0, .45), inset 0 0 60px rgba(217, 122, 43, .06); }
/* TOPBAR_PHONE_BIGGER_V1 */
/* Увеличенный телефон в шапке (topbar) */
.topbar__item--accent {
font-size:1.02rem; font-weight:600; letter-spacing:.01em; gap:9px; }
.topbar__item--accent span {
font-size:1.02rem; font-weight:700; }
.topbar__item--accent svg {
width:18px; height:18px; }
@media (max-width: 900px) {
.topbar__item--accent, .topbar__item--accent span {
font-size:.95rem; }
.topbar__item--accent svg {
width:16px; height:16px; }
}


/* === FORM_SUCCESS (auto) === */
/* Скрываем шапку модалки, когда форма отправлена */
.modal__box.is-sent > .modal__icon,
.modal__box.is-sent > .modal__title,
.modal__box.is-sent > .modal__sub {
    display: none !important;
}
.modal__box.is-sent {
    padding-top: 18px;
    padding-bottom: 18px;
}

.form-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 26px 18px 8px;
    gap: 12px;
    animation: fs-fadein .5s ease both;
}

.form-success__icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 40%, rgba(217, 122, 43, .28) 0%, rgba(217, 122, 43, .10) 70%, transparent 100%);
    color: var(--amber-light, #F0A055);
    position: relative;
    margin-bottom: 4px;
    animation: fs-pop .55s cubic-bezier(.22, .9, .3, 1.2) both;
}

.form-success__icon::after {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 1px solid rgba(217, 122, 43, .35);
    animation: fs-ring 1.6s ease-out .25s infinite;
    pointer-events: none;
}

.form-success__icon svg {
    width: 40px;
    height: 40px;
    stroke-width: 2;
    animation: fs-check .65s cubic-bezier(.22, .9, .3, 1.2) .1s both;
}

.form-success__title {
    font-family: var(--font-display, 'Unbounded', sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--white, #fff);
    margin: 0;
}

.form-success__text {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--muted, rgba(232, 227, 219, .62));
    margin: 0;
    max-width: 320px;
}

.form-success__note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    padding: 7px 14px;
    border-radius: 100px;
    background: rgba(217, 122, 43, .10);
    border: 1px solid rgba(217, 122, 43, .28);
    font-size: .78rem;
    color: var(--amber-light, #F0A055);
    font-weight: 600;
    letter-spacing: .01em;
}

.form-success__note svg { width: 14px; height: 14px; flex-shrink: 0; }

.modal__box .form-success { padding: 18px 10px 4px; gap: 10px; }
.modal__box .form-success__icon { width: 62px; height: 62px; }
.modal__box .form-success__icon svg { width: 34px; height: 34px; }
.modal__box .form-success__title { font-size: 1.05rem; }
.modal__box .form-success__text { font-size: .88rem; max-width: 280px; }

form.is-sent > *:not(.lead-form__status):not(.form-success) { display: none !important; }

@keyframes fs-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-pop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes fs-check { 0% { stroke-dashoffset: 40; opacity: 0; } 40% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes fs-ring { 0% { transform: scale(.9); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .form-success, .form-success__icon, .form-success__icon svg, .form-success__icon::after { animation: none !important; }
}
/* === /FORM_SUCCESS === */

/* === topbar logo (inline fix) === */
.topbar__brand{
  display:inline-flex;
  align-items:center;
  gap:8px;
  vertical-align:middle;
}
.topbar__logo{
  display:inline-block;
  vertical-align:middle;
  height:24px;
  width:auto;
  margin:0;
  flex-shrink:0;
}

/* === header__phone (мобильный телефон в шапке) === */
.header__phone{display:none;}
@media (max-width: 900px){
  /* Бургер слева, телефон справа. .nav становится fixed-панелью, из потока уходит */
  .header__inner{position:relative;}
  #burger{order:1;}
  #nav{order:2;}
  .header__phone{
    order:3;
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:0.95rem;
    font-weight:600;
    color:#fff;
    white-space:nowrap;
    text-decoration:none;
    padding:6px 10px;
    border-radius:10px;
    border:1px solid rgba(217,122,43,.35);
    background:rgba(255,255,255,.04);
  }
  .header__phone svg{color:#D97A2B;flex-shrink:0;}
  /* Скрываем телефон в topbar на этом брейкпоинте, чтобы не было дубля */
  .topbar__group:last-child{display:none !important;}
}
@media (max-width: 520px){
  .header__phone span{display:none;}
  .header__phone{padding:6px 8px;}
}

/* ===== Portfolio menu + gallery + lightbox (auto) ===== */
/* --- Пункт «Портфолио» с подменю --- */



.nav__sub-wrap{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(10px);min-width:240px;padding:8px;background:#1a120d;border:1px solid rgba(217,122,43,.22);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:120;display:flex;flex-direction:column;gap:2px}
.nav__sub-wrap.is-open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px)}
.nav__sub-wrap a{padding:10px 14px;font-size:13.5px;font-weight:500;color:rgba(232,227,219,.85);text-decoration:none;border-radius:9px;white-space:nowrap;letter-spacing:.01em;transition:background .18s ease,color .18s ease}
.nav__sub-wrap a:hover{background:rgba(217,122,43,.14);color:#fff}
@media (max-width: 1024px){
  .nav__sub-wrap{position:static;transform:none;min-width:0;background:transparent;border:none;box-shadow:none;padding:0 0 0 16px;opacity:1;visibility:visible;display:none;margin-top:4px}
  .nav__sub-wrap.is-open{display:flex;transform:none}
  
}

/* --- Сетка галереи --- */
.td-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:12px}
.td-gallery__item{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:#0d0906;border:1px solid rgba(255,255,255,.06);cursor:pointer;padding:0;font:inherit;color:inherit}
.td-gallery__item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .35s ease}
.td-gallery__item:hover img{transform:scale(1.05);filter:brightness(1.08)}
.td-gallery__item::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,7,5,.55));opacity:0;transition:opacity .3s ease;pointer-events:none}
.td-gallery__item:hover::after{opacity:1}
.td-gallery__item:focus-visible{outline:2px solid #F0A055;outline-offset:3px}
.td-gallery-intro{font-size:13.5px;color:rgba(232,227,219,.6);margin:0 0 18px;letter-spacing:.01em}
@media (max-width: 1024px){.td-gallery{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 720px){.td-gallery{grid-template-columns:repeat(2,1fr);gap:10px}}
@media (max-width: 420px){.td-gallery{grid-template-columns:1fr}}

/* --- Лайтбокс --- */
.td-lb{position:fixed;inset:0;display:none;z-index:9999;padding:20px;box-sizing:border-box}
.td-lb.is-open{display:flex;align-items:center;justify-content:center}
.td-lb__backdrop{position:absolute;inset:0;background:rgba(10,7,5,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.td-lb__stage{position:relative;max-width:1400px;width:100%;max-height:94vh;display:flex;flex-direction:column;align-items:center;z-index:1;padding:36px 0 0}
.td-lb__img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.7);background:#000;user-select:none}
.td-lb__btn{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(20,17,18,.78);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;z-index:3}
.td-lb__btn:hover{background:rgba(217,122,43,.95);color:#1a120d}
.td-lb__btn--prev{left:-64px}
.td-lb__btn--next{right:-64px}
.td-lb__close{position:absolute;top:0;right:0;width:42px;height:42px;border-radius:50%;background:rgba(20,17,18,.78);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,color .2s;z-index:3}
.td-lb__close:hover{background:rgba(217,122,43,.95);color:#1a120d}
.td-lb__counter{position:absolute;top:6px;left:0;padding:6px 14px;font-family:'Unbounded','Manrope',sans-serif;font-size:12.5px;font-weight:600;color:rgba(232,227,219,.85);background:rgba(20,17,18,.7);border-radius:100px;letter-spacing:.02em}
@media (max-width: 900px){
  .td-lb{padding:10px}
  .td-lb__btn--prev{left:8px}
  .td-lb__btn--next{right:8px}
  .td-lb__btn{width:42px;height:42px}
  .td-lb__close{top:6px;right:6px}
  .td-lb__stage{padding:44px 0 0}
  .td-lb__img{max-height:72vh}
}
/* ===== /Portfolio menu + gallery + lightbox ===== */
/* ===== Portfolio tiles (auto) ===== */
.pf-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.pf-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:360px;padding:32px;border-radius:20px;background-size:cover;background-position:center;color:#fff;text-decoration:none;overflow:hidden;border:1px solid rgba(255,255,255,.07);transition:transform .45s ease,box-shadow .45s ease,border-color .3s ease}
.pf-tile:hover{transform:translateY(-6px);box-shadow:0 30px 70px rgba(0,0,0,.55);border-color:rgba(217,122,43,.45)}
.pf-tile::before{content:'';position:absolute;inset:0;background:radial-gradient(600px 300px at 30% 30%,rgba(217,122,43,.12) 0%,transparent 65%);opacity:0;transition:opacity .4s ease;pointer-events:none}
.pf-tile:hover::before{opacity:1}
.pf-tile__body{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px}
.pf-tile__eyebrow{font-family:'Unbounded','Manrope',sans-serif;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#F0A055}
.pf-tile__title{margin:0;font-family:'Unbounded','Manrope',sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1.15}
.pf-tile__desc{margin:0;font-size:14px;line-height:1.5;color:rgba(232,227,219,.72);max-width:52ch}
.pf-tile__more{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13.5px;font-weight:600;color:#F0A055;letter-spacing:.01em}
.pf-tile__more svg{transition:transform .3s ease}
.pf-tile:hover .pf-tile__more svg{transform:translateX(4px)}
@media (max-width: 900px){.pf-grid{grid-template-columns:1fr;gap:16px}.pf-tile{min-height:280px;padding:24px}.pf-tile__title{font-size:20px}}
/* ===== /Portfolio tiles ===== */
/* ===== Nav submenu arrow (auto) ===== */


.nav__has-sub:hover 
.nav__has-sub.is-open 
@media (max-width:1024px){}
/* ===== /Nav submenu arrow ===== */
/* ===== Nav submenu arrow (auto v2) ===== */
.nav__has-sub{position:relative}
.nav__has-sub-arrow{display:inline-block;vertical-align:-2px;margin-left:6px;opacity:.72;transition:transform .25s ease,opacity .25s ease;pointer-events:none}
.nav__has-sub:hover .nav__has-sub-arrow{opacity:1}
.nav__has-sub.is-open .nav__has-sub-arrow{transform:rotate(180deg);opacity:1}
/* Ссылки подменю — без нижнего подчёркивания от .nav a::after */
.nav__sub-wrap a::after{display:none!important}
@media (max-width:1024px){.nav__has-sub-arrow{vertical-align:-2px}}
/* ===== /Nav submenu arrow (auto v2) ===== */
/* ===== Service gallery carousel (auto) ===== */
.td-carousel{position:relative;margin-top:22px}
.td-carousel__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;padding:4px 0 8px}
.td-carousel__viewport::-webkit-scrollbar{display:none}
.td-carousel__viewport.is-grabbing{cursor:grabbing;scroll-snap-type:none}
.td-carousel__track{display:flex;gap:14px}
.td-carousel__slide{flex:0 0 auto;width:min(380px,82vw);aspect-ratio:4/3;scroll-snap-align:start;border:none;padding:0;cursor:pointer;background:#0d0906;border-radius:14px;overflow:hidden;position:relative;transition:transform .35s ease,box-shadow .35s ease;box-shadow:0 8px 22px rgba(0,0,0,.35)}
.td-carousel__slide:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(0,0,0,.55)}
.td-carousel__slide:focus-visible{outline:2px solid #F0A055;outline-offset:3px}
.td-carousel__slide img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;user-select:none;-webkit-user-drag:none}
.td-carousel__btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(20,17,18,.85);border:1px solid rgba(217,122,43,.3);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;transition:background .2s,color .2s,border-color .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.td-carousel__btn:hover{background:rgba(217,122,43,.95);color:#1a120d;border-color:transparent}
.td-carousel__btn:disabled{opacity:.3;cursor:default;pointer-events:none}
.td-carousel__btn--prev{left:-16px}
.td-carousel__btn--next{right:-16px}
.td-carousel__footer{display:flex;justify-content:center;margin-top:30px}
.td-carousel__footer .btn{white-space:nowrap}
@media (max-width:900px){
  .td-carousel__btn{width:40px;height:40px}
  .td-carousel__btn--prev{left:-4px}
  .td-carousel__btn--next{right:-4px}
  .td-carousel__slide{width:min(290px,80vw);border-radius:12px}
}
@media (max-width:520px){
  .td-carousel__slide{width:min(260px,84vw)}
}
/* ===== /Service gallery carousel ===== */