html {scroll-behavior: smooth}
a {color: inherit; text-decoration: none}
button {color: inherit}
img {display: block; width: 100%}
:root {
--bg: #080a0c;
--bg-soft: #101316;
--card: #14181c;
--card-light: #1b2025;
--text: #f4f7f8;
--muted: #929ba3;
--line: rgba(255,255,255,.09);
--accent: #b8ff2c;
--accent-strong: #cbff66;
--accent-dark: #8bd000;
--accent-rgb: 184,255,44;
--danger: #ff5c5c;
--radius: 28px;
--container: 1240px;
--shadow: 0 30px 80px rgba(0,0,0,.35)
}
* {box-sizing: border-box; margin: 0; padding: 0}
.ds {-webkit-user-select: none; -moz-user-select: none; -webkit-user-drag: none}
.flex {display: flex; flex-wrap: wrap}
.flex.center {justify-content: center}
.flex.align-center {align-items: center}
.flex.align-start {align-items: start}
.flex.align-end {align-items: end}
.flex.space-between {justify-content: space-between}
.flex.nowrap {flex-wrap: nowrap}
.hidden {display: none}
.max {padding: 0px 20px; max-width: 1240px; margin: 0px auto}
.cover {background-position: 50% 50%; background-repeat: no-repeat; background-size: cover}
.contain-0 {background-position: 0% 50%; background-repeat: no-repeat; background-size: contain}
.contain-50 {background-position: 50% 50%; background-repeat: no-repeat; background-size: contain}
.contain-100 {background-position: 100% 50%; background-repeat: no-repeat; background-size: contain}
.mobile-show {display: none !important}
.mobile-flex {display: none !important}
.tablet-show {display: none !important}
input, select, textarea, button {-webkit-appearance: none; -moz-appearance: none; font-family: inherit; font-size: inherit; color: inherit; border-radius: 0px; transition: border 250ms}
.wpcf7-turnstile {display:none !important}
body {overflow-x: hidden; background: radial-gradient(circle at 10% 0%, rgba(var(--accent-rgb),.08), transparent 28%), var(--bg); color: var(--text); font-family: 'Ubuntu', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; font-weight: 300}
body.menu-open {overflow:hidden;overscroll-behavior:none;touch-action:none}
button, input, select, textarea {font: inherit}
.container {width: min(calc(100% - 40px), var(--container)); margin-inline: auto}
.section {padding: 120px 0}
.eyebrow {display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase}
.eyebrow::before {width: 34px; height: 1px; background: var(--accent); content: ""}
.section-head {gap: 30px; margin-bottom: 50px}
.section-title {max-width: 800px; font-size: clamp(38px, 6vw, 76px); font-weight: 700; letter-spacing: -.055em; line-height: .95}
.section-description {max-width: 460px; color: var(--muted); font-size: 17px}
.accent {color: var(--text)}
.btn {height: 60px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 0 26px; border: 1px solid transparent; border-radius: 100px; cursor: pointer; font-weight: 700; transition: .25s ease}
.btn:hover {transform: translateY(-3px)}
.btn-primary {background: var(--accent-strong); color: #101507; box-shadow: 0 12px 38px rgba(var(--accent-rgb),.15)}
.btn-primary:hover {background: var(--accent); box-shadow: 0 18px 56px rgba(var(--accent-rgb),.24)}
.btn-secondary {border-color: var(--line); background: rgba(255,255,255,.04); backdrop-filter: blur(12px)}
.btn-secondary:hover {border-color: rgba(var(--accent-rgb),.45)}
.header {position: fixed; z-index: 1800; top: 0; right: 0; left: 0; isolation:isolate; transition: .3s}
.header.scrolled {border-bottom: 1px solid var(--line); background: rgba(8,10,12,.82); backdrop-filter: blur(20px)}
.header-inner {min-height: 86px; gap: 30px}
.logo {position: relative; z-index: 1002; color:white; font-size: 23px; font-weight: 900; letter-spacing: -.05em}
.logo span {color: var(--accent)}
.nav {gap: 30px}
.nav li {position: relative; display: block; list-style: none}
.nav a {display: flex; align-items: center; gap: 7px; color: #c1c7cb; font-size: 14px; font-weight: 700; transition: color .2s}
.nav a:hover, .nav a:focus-visible {color:white}
.nav .current-menu-item > a, .nav .current-menu-ancestor > a {color:var(--accent)}
.nav > .menu-item-has-children > a::after {width: 7px; height: 7px; margin-top: -4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: rotate(45deg); transition: transform .25s}
.nav > .menu-item-has-children:hover > a::after, .nav > .menu-item-has-children:focus-within > a::after {transform: translateY(3px) rotate(225deg)}
.nav .sub-menu {min-width: 240px; position: absolute; top: calc(100% + 18px); left: -22px; z-index: 20; display: grid; gap: 3px; padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: rgba(14,17,20,.96); box-shadow: 0 24px 60px rgba(0,0,0,.48); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity .22s, visibility .22s, transform .22s; backdrop-filter: blur(20px)}
.nav .sub-menu::before {height: 20px; position: absolute; right: 0; bottom: 100%; left: 0; content: ""}
.nav .sub-menu li {width: 100%}
.nav .sub-menu a {min-height: 44px; padding: 10px 13px; border-radius: 11px; color: #c1c7cb; font-size: 13px; line-height: 1.25; white-space: nowrap}
.nav .sub-menu a:hover, .nav .sub-menu a:focus-visible {background: rgba(var(--accent-rgb),.08); color: var(--accent)}
.nav li:hover > .sub-menu, .nav li:focus-within > .sub-menu {opacity: 1; visibility: visible; pointer-events: auto; transform: none}
.nav .sub-menu .sub-menu {top: -10px; left: calc(100% + 8px)}
.submenu-toggle {display: none}
.header-actions {gap: 12px}
.header-phone {font-weight: 700}
.menu-button {position: relative; z-index: 1002; width: 48px; height: 48px; display: none; flex:0 0 48px; padding:0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); cursor: pointer}
.menu-button span, .menu-button::before, .menu-button::after {position:absolute;top:50%;left:50%;width:18px;height:2px;background:white;content:"";transform:translate(-50%,-50%);transform-origin:center;transition:transform .3s,opacity .3s}
.menu-button::before {transform:translate(-50%,calc(-50% - 6px))}
.menu-button::after {transform:translate(-50%,calc(-50% + 6px))}
.menu-button.active span {opacity: 0}
.menu-button.active::before {transform:translate(-50%,-50%) rotate(45deg)}
.menu-button.active::after {transform:translate(-50%,-50%) rotate(-45deg)}
.hero {min-height: 100vh; position: relative; overflow: hidden; padding: 150px 0 80px}
.hero-bg {position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,10,12,.98) 0%, rgba(8,10,12,.72) 42%, rgba(8,10,12,.2) 72%), linear-gradient(0deg, var(--bg) 0%, transparent 38%), url("images/home.png") center 60% / cover; transform: scale(1.05); animation: heroZoom 12s ease-out forwards}
.hero-bg::after {position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 80px 80px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 80%)}
@keyframes heroZoom {to {transform: scale(1)}}
.hero-content {position: relative; z-index: 2}
.hero-label {display: inline-flex; align-items: center; gap: 10px; margin-bottom: 24px; padding: 9px 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 100px; background: rgba(0,0,0,.25); backdrop-filter: blur(10px); color: #d2d7da; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase}
.hero-label::before {width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 18px var(--accent); content: ""}
.hero h1 {max-width: 950px; font-size: clamp(58px, 9.5vw, 145px); font-weight: 900; letter-spacing: -.075em; line-height: .78; text-transform: uppercase}
.hero h1 .outline {color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55)}
.hero-bottom {gap: 40px; margin-top: 50px}
.hero-description {max-width: 520px; color: #b4bcc1; font-size: clamp(17px, 2vw, 21px)}
.hero-buttons {gap: 12px; margin-top: 28px}
.hero-stats {gap: 45px}
.hero-stat strong {display: block; font-size: 38px; letter-spacing: -.05em}
.hero-stat span {color: var(--muted); font-size: 13px}
.services-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px}
.service-card {min-height: 440px; position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; isolation: isolate}
.service-card::after {position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgba(7,9,10,.96), rgba(7,9,10,.1) 80%), linear-gradient(90deg, rgba(7,9,10,.5), transparent); content: ""}
.service-card-bg {position: absolute; z-index: -2; inset: 0; background-position: center; background-size: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1)}
.service-card:hover .service-card-bg {transform: scale(1.08)}
.service-card-content {height: 100%; display: flex; flex-direction: column; justify-content: end; padding: 34px}
.service-number {position: absolute; top: 26px; left: 30px; color: rgba(255,255,255,.65); font-size: 13px; font-weight: 700}
.service-arrow {width: 54px; height: 54px; position: absolute; top: 22px; right: 22px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(0,0,0,.25); font-size: 22px; transition: .3s}
.service-card:hover .service-arrow {background: var(--accent); color: #111; transform: rotate(45deg)}
.service-card h3 {margin-bottom: 8px; font-size: clamp(34px, 5vw, 58px); letter-spacing: -.055em; line-height: 1}
.service-card p {max-width: 440px; color: #b6bdc1}
.calculator-section {background: radial-gradient(circle at 90% 20%, rgba(var(--accent-rgb),.08), transparent 27%), #0c0f11}
.calculator {overflow: hidden; border: 1px solid var(--line); border-radius: 32px; background: var(--card); box-shadow: var(--shadow)}
.calc-tabs {display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px; border-bottom: 1px solid var(--line); background: #0d1012}
.calc-tab {min-height: 50px; border: 0; border-radius: 30px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 700; transition: .25s}
.calc-tab:hover {color: white}
.calc-tab.active {background: var(--accent); color: #111}
.calc-layout {display: grid; grid-template-columns: 1.1fr .9fr}
.calc-main {padding: 42px; border-right: 1px solid var(--line)}
.calc-step {margin-bottom: 36px}
.calc-step:last-child {margin-bottom: 0}
.calc-step-title {gap: 12px; margin-bottom: 18px; font-size: 17px; font-weight: 700}
.step-number {width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--accent-rgb),.12); color: var(--accent); font-size: 12px}
.options {gap: 10px}
.option {position: relative; cursor: pointer}
.option input {position: absolute; opacity: 0; pointer-events: none}
.option span {min-height: 48px; display: flex; align-items: center; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.025); color: #c3c9cc; font-size: 14px; font-weight: 750; transition: .2s}
.option span:hover {border-color:rgba(255,255,255,.72);color:white}
.option input:checked + span {border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.09);color:white;box-shadow:inset 0 0 0 1px rgba(255,255,255,.72)}
.service-panel {display: none}
.service-panel.active {display: block}
.material-options {flex-wrap: wrap}
.price-option-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.price-option {position:relative;cursor:pointer}
.price-option input {position:absolute;opacity:0;pointer-events:none}
.price-option>span {min-height:64px;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:14px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.025);transition:.2s}
.price-option strong {font-size:14px;line-height:1.25}
.price-option:hover>span {border-color:rgba(255,255,255,.72);color:white;transform:translateY(-1px)}
.price-option input:checked+span {border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.09);color:white;box-shadow:inset 0 0 0 1px rgba(255,255,255,.72)}
.car-visual {position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(circle, rgba(var(--accent-rgb),.08), transparent 55%), repeating-linear-gradient(90deg, transparent 0 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0 59px, rgba(255,255,255,.025) 60px), #0d1012}
.car-visual svg {width: min(88%, 620px); filter: drop-shadow(0 30px 30px rgba(0,0,0,.5))}
.car-zone {cursor: pointer; fill: #30363a; stroke: #70787d; stroke-width: 2; transition: .25s}
.car-zone:hover {fill: #596229; stroke: var(--accent)}
.car-zone.selected {fill: var(--accent); stroke: #dcff95; filter: drop-shadow(0 0 10px rgba(var(--accent-rgb),.35))}
.car-part-fixed {fill: #1c2124; stroke: #596166; stroke-width: 2}
.car-window {fill: #090b0c; stroke: #596166; stroke-width: 2}
.visual-hint {position: absolute; bottom: 14px; color: var(--muted); font-size: 12px}
.package-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px}
.package {position: relative; min-height: 160px; cursor: pointer}
.package input {position: absolute; opacity: 0}
.package-body {height: 100%; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.025); transition: .25s}
.package input:checked + .package-body {border-color: var(--accent); background: rgba(var(--accent-rgb),.08); box-shadow: inset 0 0 0 1px var(--accent)}
.package-title {display: block; margin-bottom: 8px; font-weight: 850}
.package-description {color: var(--muted); font-size: 13px}
.package-price {display: block; margin-top: 16px; color: white; font-weight: 700}
.calc-result {position: relative; min-height: 100%; padding: 42px; background: linear-gradient(150deg, rgba(var(--accent-rgb),.08), transparent 44%), #101416}
.calc-result-sticky {position: sticky; top: 120px}
.result-label {margin-bottom: 12px; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .12em}
.result-price {display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 14px;margin-bottom:8px;font-size:clamp(40px,5vw,64px);font-weight:900;letter-spacing:-.06em;line-height:1}
.result-price-current {display:block}
.result-price-old {color:var(--muted);font-size:.38em;font-weight:500;letter-spacing:-.02em;text-decoration-color:currentColor;text-decoration-thickness:2px}
.result-note {color: var(--muted); font-size: 13px}
.result-line {height: 1px; margin: 30px 0; background: var(--line)}
.result-list {display: grid; gap: 15px; margin-bottom: 30px}
.result-item {gap: 20px; color: #c1c7ca; font-size: 14px}
.result-item span:last-child {color: white; font-weight: 700; text-align: right}
.result-button {width: 100%}
.portfolio-filters {gap: 8px; margin-bottom: 28px}
.portfolio-filter {min-height:48px;padding:0 18px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.025);color:var(--muted);cursor:pointer;font-weight:750;transition:.2s}
.portfolio-filter:hover {border-color:rgba(255,255,255,.72);color:white}
.portfolio-filter.active {border-color:rgba(255,255,255,.85);background:rgba(255,255,255,.09);color:white;box-shadow:inset 0 0 0 1px #fff}
.portfolio-grid {display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px}
.work-card {min-height: 440px; position: relative; grid-column: span 4; overflow: hidden; border: 1px solid var(--line); border-radius: 24px}
.work-card:first-child {grid-column: span 8}
.work-card img {height: 100%; object-fit: cover; transition: .7s}
.work-card:hover img {transform: scale(1.06)}
.work-overlay {position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: end; padding: 28px; background: linear-gradient(0deg, rgba(5,7,8,.96), transparent 65%)}
.work-type {width: fit-content; margin-bottom: 9px; padding: 6px 10px; border-radius: 100px; background: var(--accent); color: #111; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase}
.work-card h3 {font-size: 28px; letter-spacing: -.04em}
.work-card p {margin-top: 5px; color: #b6bdc1; font-size: 13px}
.reviews-section {background: #0c0f11}
.reviews-grid {display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px}
.review-card {min-height: 290px; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--card)}
.review-stars {margin-bottom: 24px; color: white; letter-spacing: 4px}
.review-text {color: #d4d8da; font-size: 16px}
.review-author {gap: 12px; margin-top: auto; padding-top: 24px}
.review-avatar {width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: #111; font-weight: 900}
.review-author strong {display: block}
.review-author span {color: var(--muted); font-size: 12px}
.contact-card {display: grid; grid-template-columns: .85fr 1.15fr; overflow: hidden; border: 1px solid var(--line); border-radius: 32px; background: var(--card)}
.contact-form-wrap {min-width:0}
.contact-info {position: relative; overflow: hidden; padding: 50px; background: radial-gradient(circle at 0% 100%, rgba(var(--accent-rgb),.28), transparent 35%), #111618}
.contact-info h2 {max-width: 510px; margin-bottom: 20px; font-size: clamp(42px, 6vw, 78px); letter-spacing: -.065em; line-height: .95}
.contact-info > p {max-width: 430px; color: var(--muted)}
.contacts-list {display: grid; gap: 15px; margin-top: 45px}
.contact-link {width: fit-content; font-size: 18px; font-weight: 700; transition: .2s}
.contact-link:hover {color: var(--accent)}
.messengers {gap: 10px; margin-top: 32px}
.messenger {padding: 12px 17px; border: 1px solid var(--line); border-radius: 100px; background: rgba(255,255,255,.04); font-size: 13px; font-weight: 700; transition: .2s}
.messenger:hover {border-color: var(--accent); color: var(--accent)}
.wpcf7-form {display: grid; grid-template-columns: 1fr 1fr; row-gap: 30px; column-gap: 15px; padding: 50px; position: relative}
.wpcf7-form .wpcf7-checkbox {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
.wpcf7-form .wpcf7-list-item {min-width:0;display:flex;align-items:flex-start;gap:10px;margin:0}
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {flex:0 0 24px;margin:0!important}
.wpcf7-form .wpcf7-list-item-label {min-width:0;padding-top:2px;line-height:1.35;overflow-wrap:anywhere;margin-left: 5px}
.wpcf7-not-valid-tip {display: none !important}
.wpcf7-spinner {position: absolute}
.field {display: grid; gap: 8px}
.field-full {grid-column: 1 / -1}
.field .label {color: var(--muted); font-size: 12px; font-weight: 700}
.field input[type="text"], .field input[type="tel"], .field select, .field textarea {width: 100%; border: 1px solid var(--line); border-radius: 14px; outline: none; background: #0d1012; color: white; transition: .2s}
.field input[type="text"], .field input[type="tel"], .field select {height: 54px; padding: 0 16px}
.field textarea {min-height: 120px; padding: 16px; resize: none}
.field input[type="text"]:focus, .field input[type="tel"]:focus, .field select:focus, .field textarea:focus {border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.08)}
input[type=checkbox] {display: inline-block; vertical-align: middle; width: 24px !important; height: 24px; margin-right: 10px !important; position: relative; border: 1px solid var(--line); background: transparent}
input[type=checkbox]:hover {border-color: var(--accent)}
input[type=checkbox]:checked {background: url("data:image/svg+xml,") 50% 50% no-repeat; background-size: 12px; border-color: var(--accent)}
input[name="form-acceptance"] {border-color:#ff4d4d!important}
input[name="form-acceptance"]:checked {border-color:var(--accent)!important}
.form-submit {margin-top: 10px; grid-column: 1 / -1}
.form-message {display: none; grid-column: 1 / -1; padding: 15px; border: 1px solid rgba(var(--accent-rgb),.3); border-radius: 14px; background: rgba(var(--accent-rgb),.08); color: var(--accent); font-size: 14px}
.form-policy {grid-column: 1 / -1; color: var(--muted); font-size: 11px}
.footer {padding: 35px 0; border-top: 1px solid var(--line)}
.footer-inner {gap: 30px; color: var(--muted); font-size: 13px}
.footer-nav {gap: 22px}
.footer-nav a:hover {color: white}
.footer-legal {width:100%;justify-content:flex-end;gap:12px 22px;color:#707981;font-size:11px}
.footer-legal a:hover {color:var(--accent)}
.promo-popup {position:fixed;z-index:2000;inset:0;display:grid;place-items:center;padding:20px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility .3s}
.promo-popup.open {opacity:1;visibility:visible;pointer-events:auto}
.promo-popup-backdrop {position:absolute;inset:0;background:rgba(3,5,6,.78);backdrop-filter:blur(10px)}
.promo-popup-card {width:min(100%,560px);position:relative;overflow:hidden;padding:46px;border:1px solid rgba(var(--accent-rgb),.22);border-radius:30px;background:radial-gradient(circle at 100% 0,rgba(var(--accent-rgb),.2),transparent 38%),#111518;box-shadow:0 36px 100px rgba(0,0,0,.65);transform:translateY(24px) scale(.97);transition:transform .35s ease}
.promo-popup.open .promo-popup-card {transform:none}
.promo-popup-card::after {width:220px;height:220px;position:absolute;right:-110px;bottom:-130px;border:1px solid rgba(var(--accent-rgb),.16);border-radius:50%;content:""}
.promo-popup-close {width:42px;height:42px;position:absolute;z-index:2;top:18px;right:18px;padding:0;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.04);color:var(--muted);cursor:pointer;transition:.2s}
.promo-popup-close span {width:16px;height:2px;position:absolute;top:50%;left:50%;display:block;border-radius:2px;background:currentColor;transform-origin:center}
.promo-popup-close span:first-child {transform:translate(-50%,-50%) rotate(45deg)}
.promo-popup-close span:last-child {transform:translate(-50%,-50%) rotate(-45deg)}
.promo-popup-close:hover {border-color:var(--accent);color:var(--accent);transform:rotate(90deg)}
.promo-popup-mark {width:62px;height:62px;display:grid;place-items:center;margin-bottom:28px;border-radius:18px;background:var(--accent);color:#111;font-size:20px;font-weight:900;letter-spacing:-.05em;box-shadow:0 16px 45px rgba(var(--accent-rgb),.2)}
.promo-popup-card h2 {max-width:460px;margin-bottom:18px;font-size:clamp(38px,6vw,58px);letter-spacing:-.06em;line-height:.94}
.promo-popup-card>p {max-width:470px;margin-bottom:22px;color:#b8c0c4;font-size:16px}
.promo-deadline {width:fit-content;margin-bottom:18px;padding:8px 12px;border:1px solid rgba(var(--accent-rgb),.26);border-radius:100px;background:rgba(var(--accent-rgb),.07);color:var(--accent);font-size:13px;font-weight:700}
.promo-popup-card .btn {position:relative;z-index:1}
.text-page {min-height:calc(100vh - 94px);padding:150px 0 110px}
.text-page-shell {max-width:1080px}
.text-page-header {margin-bottom:48px}
.text-page .breadcrumbs {gap:10px;margin-bottom:34px;color:var(--muted);font-size:13px}
.text-page .breadcrumbs a:hover {color:var(--accent)}
.text-page-header h1 {max-width:1000px;font-size:clamp(52px,8vw,108px);font-weight:900;letter-spacing:-.07em;line-height:.86;text-transform:uppercase;text-wrap:balance}
.page-lead {max-width:760px;margin-top:28px;color:#b4bcc1;font-size:clamp(17px,2vw,21px)}
.text-page-card {padding:clamp(28px,5vw,64px);border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(var(--accent-rgb),.045),transparent 34%),var(--card)}
.entry-content {color:#cbd1d4;font-size:17px;line-height:1.8}
.entry-content>*+* {margin-top:1.35em}
.entry-content h2,.entry-content h3,.entry-content h4 {color:var(--text);font-weight:800;letter-spacing:-.035em;line-height:1.12}
.entry-content h2 {margin-top:1.5em;font-size:clamp(32px,5vw,52px)}
.entry-content h3 {font-size:clamp(24px,3vw,32px)}
.entry-content ul,.entry-content ol {display:grid;gap:9px;padding-left:1.3em}
.entry-content li::marker {color:var(--accent)}
.entry-content a {color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.entry-content blockquote {padding:22px 26px;border-left:3px solid var(--accent);border-radius:0 16px 16px 0;background:rgba(var(--accent-rgb),.06);color:var(--text);font-size:1.08em}
.entry-content img {height:auto;border-radius:20px}
.entry-content table {width:100%;border-collapse:collapse}
.entry-content th,.entry-content td {padding:13px 15px;border-bottom:1px solid var(--line);text-align:left}
.entry-content th {color:var(--text)}
.content-edit-link {margin-top:20px;color:var(--muted);font-size:13px}
.content-edit-link a:hover {color:var(--accent)}
.work-single-summary {gap:30px;margin-top:38px}
.work-single-summary>p {max-width:620px;color:#b4bcc1;font-size:18px}
.work-price {min-width:230px;padding:20px 24px;border:1px solid rgba(var(--accent-rgb),.3);border-radius:18px;background:rgba(var(--accent-rgb),.07)}
.work-price span {display:block;margin-bottom:5px;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.work-price strong {display:block;color:white;font-size:27px;letter-spacing:-.04em}
.work-single-cover {height:clamp(420px,62vw,720px);margin-bottom:24px;overflow:hidden;border:1px solid var(--line);border-radius:28px}
.work-single-cover img {height:100%;object-fit:cover}
.work-cta {display:grid;grid-template-columns:1.1fr .9fr;gap:45px;margin-top:24px;padding:clamp(28px,5vw,52px);border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 100% 0,rgba(var(--accent-rgb),.13),transparent 38%),#101416}
.work-cta h2 {max-width:610px;font-size:clamp(32px,4.4vw,52px);letter-spacing:-.055em;line-height:1}
.work-cta-buttons {align-content:end;justify-content:flex-end;gap:10px}
.work-gallery {padding-top:100px}
.work-gallery .section-head h2 {font-size:clamp(40px,6vw,72px);letter-spacing:-.06em;line-height:.95}
.work-gallery .section-head p {max-width:360px;color:var(--muted)}
.work-gallery-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.work-gallery-item {min-height:340px;overflow:hidden;border:1px solid var(--line);border-radius:22px}
.work-gallery-item:first-child:nth-last-child(odd) {grid-column:1/-1;min-height:520px}
.work-gallery-item img {height:100%;object-fit:cover;transition:transform .65s ease}
.work-gallery-item:hover img {transform:scale(1.04)}
.contacts-page .text-page-shell {max-width:1080px}
.contacts-page-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-detail-card {min-width:0;min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;padding:30px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(145deg,rgba(var(--accent-rgb),.07),transparent 46%),var(--card);transition:.25s}
.contact-detail-card:hover {border-color:rgba(var(--accent-rgb),.4);transform:translateY(-4px)}
.contact-detail-card>span {margin-bottom:auto;color:var(--muted);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.contact-detail-card strong {overflow-wrap:anywhere;font-size:clamp(22px,3vw,32px);letter-spacing:-.04em}
.contact-detail-card small {margin-top:8px;color:white;font-size:13px;font-weight:700}
.contact-detail-address {grid-column:1/-1;min-height:220px;background:radial-gradient(circle at 90% 20%,rgba(var(--accent-rgb),.16),transparent 30%),var(--card)}
.contact-visit-note {display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px 40px;margin-top:18px;padding:clamp(30px,5vw,52px);border:1px solid var(--line);border-radius:26px;background:#101416}
.contact-visit-note .eyebrow,.contact-visit-note p {grid-column:1}
.contact-visit-note h2 {grid-column:1;font-size:clamp(34px,5vw,56px);letter-spacing:-.055em;line-height:1}
.contact-visit-note p {max-width:650px;color:var(--muted)}
.contact-visit-note .btn {grid-column:2;grid-row:1/5}
.contacts-page>#contacts {padding-bottom:0}
.reviews-page {background:radial-gradient(circle at 90% 10%,rgba(var(--accent-rgb),.06),transparent 24%),var(--bg)}
.reviews-page .text-page-header {max-width:1080px}
.reviews-history-header h1 {max-width:980px}
.reviews-experience {display:grid;grid-template-columns:.72fr 1.28fr;gap:clamp(35px,7vw,100px);align-items:center;margin-bottom:24px;padding:clamp(32px,6vw,72px);border:1px solid var(--line);border-radius:28px;background:linear-gradient(145deg,rgba(var(--accent-rgb),.08),transparent 38%),var(--card)}
.reviews-experience-number {min-height:260px;display:flex;flex-direction:column;justify-content:center;padding:30px;border:1px solid rgba(var(--accent-rgb),.24);border-radius:22px;background:#0d1012}
.reviews-experience-number strong {color:var(--accent);font-size:clamp(82px,12vw,156px);font-weight:900;letter-spacing:-.09em;line-height:.75}
.reviews-experience-number span {margin-top:28px;color:white;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.reviews-experience-copy h2 {max-width:720px;font-size:clamp(38px,5vw,68px);letter-spacing:-.06em;line-height:.95}
.reviews-experience-copy p {max-width:760px;margin-top:22px;color:#c7cdca;font-size:16px;line-height:1.75}
.reviews-history {padding:110px 0}
.reviews-history .section-head h2,.legacy-projects .section-head h2,.reviews-current .section-head h2 {font-size:clamp(38px,5.5vw,68px);letter-spacing:-.06em;line-height:.96}
.reviews-history-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:26px;background:var(--card);overflow:hidden}
.reviews-history-grid article {min-height:300px;display:flex;flex-direction:column;padding:30px;border-right:1px solid var(--line)}
.reviews-history-grid article:last-child {border-right:0}
.reviews-history-grid article>span {margin-bottom:auto;color:var(--accent);font-size:12px;font-weight:800}
.reviews-history-grid h3 {margin-top:45px;font-size:25px;letter-spacing:-.04em;line-height:1.05}
.reviews-history-grid p {margin-top:13px;color:var(--muted);font-size:14px;line-height:1.55}
.legacy-projects {padding-bottom:110px}
.legacy-projects-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.legacy-project-card {min-height:320px;display:flex;flex-direction:column;padding:30px;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.legacy-project-rating {display:flex;align-items:center;gap:14px;margin-bottom:30px}
.legacy-project-rating strong {font-size:38px;letter-spacing:-.06em}
.legacy-project-rating span {color:var(--accent);font-size:13px;letter-spacing:2px}
.legacy-project-card h3 {font-size:28px;letter-spacing:-.045em}
.legacy-project-card p {margin-top:10px;color:var(--muted);font-size:14px}
.legacy-project-card small {margin-top:20px;color:white}
.legacy-project-links {gap:10px 20px;margin-top:auto;padding-top:28px;color:white;font-size:13px;font-weight:700}
.legacy-project-links a:last-child {color:var(--muted)}
.legacy-project-links a:hover {color:var(--accent)}
.reviews-launch {display:grid;grid-template-columns:1fr 1fr;gap:clamp(35px,7vw,90px);margin-bottom:110px;padding:clamp(32px,6vw,64px);border:1px solid rgba(var(--accent-rgb),.22);border-radius:28px;background:radial-gradient(circle at 0% 100%,rgba(var(--accent-rgb),.13),transparent 34%),#101416}
.reviews-launch h2 {max-width:620px;font-size:clamp(38px,5vw,64px);letter-spacing:-.06em;line-height:.96}
.reviews-launch-copy {display:grid;align-content:center;gap:18px;color:#c7cdca;font-size:16px;line-height:1.7}
.reviews-current {padding-bottom:24px}
.reviews-page-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.reviews-page-grid .review-card {min-height:310px}
.reviews-empty {grid-column:1/-1;min-height:210px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:25px;padding:35px;border:1px dashed rgba(255,255,255,.18);border-radius:24px;color:var(--muted)}
.reviews-empty>span {width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--accent);font-size:12px;font-weight:800}
.reviews-empty p {max-width:560px;font-size:16px}
.reviews-cta {display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-top:24px;padding:clamp(30px,5vw,52px);border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at 100% 0,rgba(var(--accent-rgb),.15),transparent 35%),#101416}
.reviews-cta h2 {max-width:680px;font-size:clamp(36px,5vw,62px);letter-spacing:-.06em;line-height:.96}
.reviews-cta .btn {flex:0 0 auto}
@media (max-width:900px) {
.reviews-experience,.reviews-launch {grid-template-columns:1fr}
.reviews-experience-number {min-height:220px}
.reviews-history-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
.reviews-history-grid article:nth-child(2) {border-right:0}
.reviews-history-grid article:nth-child(-n+2) {border-bottom:1px solid var(--line)}
.legacy-projects-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:580px) {
.reviews-experience {padding:24px;border-radius:22px}
.reviews-experience-number {min-height:180px;padding:24px}
.reviews-experience-number strong {font-size:92px}
.reviews-experience-copy p {font-size:15px}
.reviews-history {padding:72px 0}
.reviews-history-grid,.legacy-projects-grid {grid-template-columns:1fr}
.reviews-history-grid article {min-height:230px;border-right:0;border-bottom:1px solid var(--line)}
.reviews-history-grid article:last-child {border-bottom:0}
.reviews-launch {margin-bottom:72px;padding:26px;border-radius:22px}
.reviews-empty {grid-template-columns:1fr;padding:26px}
}
.legal-page .text-page-header h1 {font-size:clamp(44px,7vw,88px)}
.legal-notice {display:grid;grid-template-columns:auto 1fr;gap:8px 20px;margin-bottom:18px;padding:20px 24px;border:1px solid rgba(255,190,80,.25);border-radius:18px;background:rgba(255,190,80,.07)}
.legal-notice strong {color:#ffc368}
.legal-notice p {color:#c7b99f}
.legal-content h2:first-child {margin-top:0}
.legal-content strong {color:var(--text)}
.reveal {opacity: 0; transform: translateY(35px); transition: opacity .7s ease, transform .7s ease}
.reveal.visible {opacity: 1; transform: none}
@media (max-width: 1050px) {
.nav,.header-phone,.header-actions .btn {display:none}
.header-actions {display:none}
.menu-button {display:block}
.nav {width:100%;height:100vh;height:100dvh;position:fixed;top:0;right:0;bottom:auto;left:0;z-index:1001;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;align-items:stretch;gap:4px;margin:0;padding:110px max(24px,calc((100vw - 720px)/2)) 45px;background:rgba(8,10,12,.99);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}
.nav.open {opacity:1;visibility:visible;pointer-events:auto}
.nav > li {width:100%;max-width:720px;margin-inline:auto;border-bottom:1px solid var(--line)}
.nav > li > a {min-height:58px;padding:8px 52px 8px 0;font-size:clamp(22px,4vw,28px)}
.nav > .menu-item-has-children > a::after {display:none}
.nav .sub-menu {min-width:0;max-height:0;position:static;display:grid;gap:2px;padding:0 0 0 18px;border:0;border-radius:0;background:transparent;box-shadow:none;opacity:1;visibility:visible;overflow:hidden;pointer-events:auto;transform:none;transition:max-height .35s ease,padding .35s ease;backdrop-filter:none}
.nav .sub-menu::before {display:none}
.nav .sub-menu a {min-height:42px;padding:9px 12px;font-size:15px;white-space:normal}
.nav .sub-menu .sub-menu {position:static;padding-left:16px}
.nav .submenu-open > .sub-menu {max-height:700px;padding-top:5px;padding-bottom:13px}
.submenu-toggle {width:42px;height:42px;position:absolute;top:8px;right:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.035);color:var(--accent);cursor:pointer}
.submenu-toggle::before {width:8px;height:8px;margin-top:-4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;content:"";transform:rotate(45deg);transition:transform .25s}
.submenu-open > .submenu-toggle::before {margin-top:4px;transform:rotate(225deg)}
.hero-bottom.align-end {align-items:start;flex-direction:column}
.calc-layout,.contact-card {grid-template-columns:1fr}
.calc-main {border-right:0;border-bottom:1px solid var(--line)}
.calc-result-sticky {position:static}
}
@media (max-width: 800px) {
.section {padding:85px 0}
.section-head.align-end {align-items:start;flex-direction:column}
.services-grid,.reviews-grid,.reviews-page-grid {grid-template-columns:1fr}
.service-card {min-height:390px}
.calc-tabs {grid-template-columns:repeat(2,1fr)}
.package-grid {grid-template-columns:1fr}
.work-card,.work-card:first-child,.work-card:nth-child(5) {min-height:390px;grid-column:span 12}
.wpcf7-form {grid-template-columns:1fr}
.field,.form-submit,.form-message,.form-policy {grid-column:1}
.footer-inner {align-items:start;flex-direction:column}
}
@media (max-width: 580px) {
.container {width:min(calc(100% - 24px),var(--container))}
.hero.align-end {min-height:800px;align-items:center;padding-top:120px}
.hero-bg {background-position:65% center}
.hero h1 {font-size:58px;line-height:.84}
.hero-stats {gap:25px}
.hero-stat strong {font-size:28px}
.calc-main,.calc-result,.contact-info,.wpcf7-form {padding:25px}
.car-visual {min-height:230px}
.calc-tab {min-height:56px;font-size:12px}
.service-card-content {padding:25px}
.contact-info h2 {font-size:48px}
}
/* =========================================
FILM PAGE
========================================= */
.film-hero {
min-height: 900px;
position: relative;
overflow: hidden;
padding: 150px 0 90px;
}
.film-hero-bg {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(8, 10, 12, .98) 0%,
rgba(8, 10, 12, .78) 42%,
rgba(8, 10, 12, .15) 78%
),
linear-gradient(
0deg,
var(--bg) 0%,
transparent 40%
),
url("images/film/film-hero.webp")
center 60% / cover;
transform: scale(1.04);
animation: heroZoom 12s ease-out forwards;
}
.film-hero-bg::after {
position: absolute;
inset: 0;
opacity: .12;
background-image:
linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 80px 80px;
mask-image: linear-gradient(to bottom, black, transparent 85%);
content: "";
}
.film-hero-content {
position: relative;
z-index: 2;
}
.film-breadcrumbs {
gap: 10px;
margin-bottom: 22px;
color: var(--muted);
font-size: 12px;
}
.film-breadcrumbs a {
transition: color .2s;
}
.film-breadcrumbs a:hover {
color: var(--accent);
}
.film-hero h1 {
max-width: 1100px;
font-size: clamp(54px, 8.2vw, 125px);
font-weight: 900;
letter-spacing: -.075em;
line-height: .82;
text-transform: uppercase;
}
.film-hero h1 .outline {
color: transparent;
-webkit-text-stroke: 1px rgba(255, 255, 255, .58);
}
.film-hero-bottom {
gap: 50px;
margin-top: 50px;
}
.film-hero-features {
gap: 42px;
}
.film-hero-feature strong {
display: block;
font-size: 27px;
letter-spacing: -.04em;
}
.film-hero-feature span {
color: var(--muted);
font-size: 12px;
}
/* Описание */
.film-about-grid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 18px;
}
.film-about-main {
min-height: 620px;
position: relative;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.film-about-main img {
height: 100%;
object-fit: cover;
}
.film-about-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 36px;
background:
linear-gradient(
0deg,
rgba(5, 7, 8, .96),
transparent 70%
);
}
.film-about-overlay span {
margin-bottom: 12px;
color: var(--accent);
font-size: 11px;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
}
.film-about-overlay h3 {
max-width: 570px;
font-size: clamp(30px, 4vw, 52px);
letter-spacing: -.05em;
line-height: 1;
}
.film-benefits {
display: grid;
gap: 18px;
}
.film-benefit {
display: grid;
grid-template-columns: 48px 1fr;
gap: 20px;
padding: 27px;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--card);
}
.film-benefit-number {
color: var(--accent);
font-size: 12px;
font-weight: 700;
}
.film-benefit h3 {
margin-bottom: 8px;
font-size: 21px;
letter-spacing: -.03em;
}
.film-benefit p {
color: var(--muted);
font-size: 14px;
}
.film-process {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 18px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--card);
}
.film-process-item {
min-height: 210px;
padding: 27px;
border-right: 1px solid var(--line);
}
.film-process-item:last-child {
border-right: 0;
}
.film-process-item > span {
display: block;
margin-bottom: 35px;
color: var(--accent);
font-size: 12px;
font-weight: 700;
}
.film-process-item strong {
display: block;
margin-bottom: 8px;
font-size: 18px;
}
.film-process-item p {
color: var(--muted);
font-size: 13px;
}
/* Галерея */
.film-gallery {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 18px;
}
.film-gallery-item {
min-height: 420px;
position: relative;
grid-column: span 4;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 24px;
}
.film-gallery-large {
min-height: 600px;
grid-column: span 8;
grid-row: span 2;
}
.film-gallery-wide {
grid-column: span 8;
}
.film-gallery-item img {
height: 100%;
object-fit: cover;
transition: transform .7s ease;
}
.film-gallery-item:hover img {
transform: scale(1.06);
}
.film-gallery-item h3 {
font-size: 28px;
letter-spacing: -.04em;
}
.film-gallery-item p {
margin-top: 5px;
color: #b6bdc1;
font-size: 13px;
}
/* SEO */
.film-seo {
padding-top: 30px;
}
.film-seo-card {
display: grid;
grid-template-columns: .8fr 1.2fr;
gap: 80px;
padding: 55px;
border: 1px solid var(--line);
border-radius: 28px;
background: var(--card);
}
.film-seo-card h2 {
max-width: 470px;
font-size: clamp(34px, 5vw, 58px);
letter-spacing: -.055em;
line-height: 1;
}
.film-seo-content {
display: grid;
gap: 18px;
color: var(--muted);
font-size: 15px;
}
@media (max-width: 1050px) {
.film-hero-bottom.align-end {
align-items: flex-start;
flex-direction: column;
}
.film-about-grid,
.film-seo-card {
grid-template-columns: 1fr;
}
.film-process {
grid-template-columns: repeat(2, 1fr);
}
.film-process-item:nth-child(2) {
border-right: 0;
}
.film-process-item:nth-child(-n+2) {
border-bottom: 1px solid var(--line);
}
}
@media (max-width: 800px) {
.film-hero {
min-height: 820px;
}
.film-hero-features.nowrap {
flex-wrap: wrap;
gap: 25px;
}
.film-about-main {
min-height: 480px;
}
.film-zone-options {
grid-template-columns: repeat(2, 1fr);
}
.film-gallery-item,
.film-gallery-large,
.film-gallery-wide {
min-height: 420px;
grid-column: span 12;
grid-row: auto;
}
.film-seo-card {
gap: 35px;
padding: 35px;
}
}
@media (max-width: 580px) {
.film-hero.align-end {
min-height: 760px;
align-items: center;
padding: 130px 0 70px;
}
.film-hero-bg {
background-position: 62% center;
}
.film-hero h1 {
font-size: 49px;
}
.film-hero-feature strong {
font-size: 22px;
}
.film-about-main {
min-height: 420px;
}
.film-about-overlay {
padding: 25px;
}
.film-benefit {
grid-template-columns: 35px 1fr;
padding: 22px;
}
.film-process {
grid-template-columns: 1fr;
}
.film-process-item {
min-height: auto;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.film-process-item:last-child {
border-bottom: 0;
}
.film-process-item > span {
margin-bottom: 20px;
}
.film-zone-options {
grid-template-columns: 1fr;
}
.film-svg-zone text {
font-size: 10px;
}
.film-seo-card {
padding: 25px;
}
}
/* =========================================
MOVED FROM page-keramika.php
========================================= */
.ceramic-page .service-hero {
min-height: 830px;
position: relative;
overflow: hidden;
padding: 170px 0 85px;
isolation: isolate;
}
.ceramic-page .service-hero-bg {
position: absolute;
z-index: -2;
inset: 0;
background:
linear-gradient(90deg, rgba(8,10,12,.98), rgba(8,10,12,.72) 45%, rgba(8,10,12,.15)),
linear-gradient(0deg, var(--bg), transparent 45%),
url("images/ceramic/ceramic-hero.webp") center 60% / cover;
animation: ceramicZoom 12s ease-out forwards;
}
.ceramic-page .service-hero-bg::after {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 75% 40%, rgba(var(--accent-rgb),.11), transparent 30%),
linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
background-size: auto, 80px 80px, 80px 80px;
content: "";
}
@keyframes ceramicZoom {
from { transform: scale(1.05); }
to { transform: scale(1); }
}
.ceramic-page .breadcrumbs {
gap: 9px;
margin-bottom: 28px;
color: var(--muted);
font-size: 12px;
}
.ceramic-page .breadcrumbs a:hover {
color: var(--accent);
}
.ceramic-page .service-hero h1 {
max-width: 1000px;
font-size: clamp(58px, 9vw, 132px);
font-weight: 900;
letter-spacing: -.075em;
line-height: .8;
text-transform: uppercase;
}
.ceramic-page .service-hero h1 span {
color: transparent;
-webkit-text-stroke: 1px rgba(255,255,255,.58);
}
.ceramic-page .service-hero-bottom {
gap: 40px;
margin-top: 48px;
}
.ceramic-page .service-hero-copy {
max-width: 620px;
}
.ceramic-page .service-hero-copy p {
color: #b4bcc1;
font-size: clamp(17px, 2vw, 21px);
}
.ceramic-page .service-hero-actions {
gap: 12px;
margin-top: 28px;
}
.ceramic-page .hero-price {
min-width: 270px;
padding: 24px;
border: 1px solid var(--line);
border-radius: 22px;
background: rgba(10,12,14,.65);
backdrop-filter: blur(18px);
}
.ceramic-page .hero-price span {
display: block;
margin-bottom: 5px;
color: var(--muted);
font-size: 12px;
text-transform: uppercase;
letter-spacing: .12em;
}
.ceramic-page .hero-price strong {
display: block;
color: var(--accent);
font-size: 34px;
letter-spacing: -.04em;
}
.ceramic-page .hero-price small {
color: var(--muted);
}
.ceramic-page .benefits-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.ceramic-page .benefit-card {
min-height: 270px;
position: relative;
overflow: hidden;
padding: 27px;
border: 1px solid var(--line);
border-radius: 24px;
background: var(--card);
}
.ceramic-page .benefit-card::after {
width: 150px;
height: 150px;
position: absolute;
right: -70px;
bottom: -70px;
border-radius: 50%;
background: rgba(var(--accent-rgb),.09);
filter: blur(3px);
content: "";
}
.ceramic-page .benefit-number {
display: block;
margin-bottom: 55px;
color: var(--accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .12em;
}
.ceramic-page .benefit-card h3 {
margin-bottom: 10px;
font-size: 25px;
letter-spacing: -.04em;
}
.ceramic-page .benefit-card p {
color: var(--muted);
font-size: 14px;
}
.ceramic-page .before-after {
display: grid;
grid-template-columns: 1fr 1fr;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 30px;
background: var(--card);
}
.ceramic-page .before-after-media {
min-height: 660px;
position: relative;
overflow: hidden;
}
.ceramic-page .before-after-media img {
height: 100%;
object-fit: cover;
}
.ceramic-page .shine-line {
width: 22%;
position: absolute;
top: -10%;
bottom: -10%;
left: 35%;
opacity: .4;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,.65),
transparent
);
filter: blur(16px);
transform: rotate(12deg);
animation: shine 5s ease-in-out infinite;
}
@keyframes shine {
0%, 100% { transform: translateX(-180%) rotate(12deg); }
55% { transform: translateX(340%) rotate(12deg); }
}
.ceramic-page .before-after-content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 60px;
}
.ceramic-page .before-after-content h2 {
margin-bottom: 25px;
font-size: clamp(42px, 6vw, 76px);
letter-spacing: -.06em;
line-height: .95;
}
.ceramic-page .before-after-content > p {
color: var(--muted);
font-size: 17px;
}
.ceramic-page .effect-list {
display: grid;
gap: 16px;
margin-top: 34px;
}
.ceramic-page .effect-item {
display: grid;
grid-template-columns: 42px 1fr;
gap: 14px;
align-items: start;
}
.ceramic-page .effect-icon {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(var(--accent-rgb),.11);
color: var(--accent);
font-weight: 900;
}
.ceramic-page .effect-item strong {
display: block;
margin-bottom: 3px;
}
.ceramic-page .effect-item span {
color: var(--muted);
font-size: 13px;
}
.ceramic-page .packages-section {
background:
radial-gradient(circle at 90% 10%, rgba(var(--accent-rgb),.08), transparent 28%),
#0c0f11;
}
.ceramic-page .ceramic-packages {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
}
.ceramic-page .ceramic-package {
position: relative;
display: flex;
flex-direction: column;
padding: 32px;
border: 1px solid var(--line);
border-radius: 26px;
background: var(--card);
transition: .3s;
}
.ceramic-page .ceramic-package:hover {
border-color: rgba(var(--accent-rgb),.45);
transform: translateY(-7px);
}
.ceramic-page .ceramic-package.featured {
border-color: var(--accent);
background:
linear-gradient(145deg, rgba(var(--accent-rgb),.11), transparent 42%),
var(--card);
}
.ceramic-page .package-badge {
width: fit-content;
margin-bottom: 28px;
padding: 7px 11px;
border-radius: 100px;
background: rgba(var(--accent-rgb),.11);
color: var(--accent);
font-size: 10px;
font-weight: 900;
letter-spacing: .1em;
text-transform: uppercase;
}
.ceramic-page .featured .package-badge {
background: var(--accent);
color: #111;
}
.ceramic-page .ceramic-package h3 {
font-size: 34px;
letter-spacing: -.05em;
}
.ceramic-page .package-period {
margin-top: 7px;
color: var(--muted);
font-size: 14px;
}
.ceramic-page .package-cost {
margin: 28px 0;
color: var(--accent);
font-size: 38px;
font-weight: 900;
letter-spacing: -.05em;
}
.ceramic-page .package-features {
display: grid;
gap: 13px;
margin-bottom: 30px;
color: #c6cccf;
font-size: 14px;
}
.ceramic-page .package-features li {
position: relative;
padding-left: 24px;
list-style: none;
}
.ceramic-page .package-features li::before {
position: absolute;
left: 0;
color: var(--accent);
font-weight: 900;
content: "✓";
}
.ceramic-page .ceramic-package .btn {
width: 100%;
margin-top: auto;
}
.ceramic-page .stages {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 12px;
}
.ceramic-page .stage {
min-height: 235px;
padding: 24px;
border-top: 1px solid var(--line);
background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
}
.ceramic-page .stage-number {
display: block;
margin-bottom: 45px;
color: var(--accent);
font-size: 13px;
font-weight: 900;
}
.ceramic-page .stage h3 {
margin-bottom: 8px;
font-size: 21px;
}
.ceramic-page .stage p {
color: var(--muted);
font-size: 13px;
}
.ceramic-page .care-card {
display: grid;
grid-template-columns: .85fr 1.15fr;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 30px;
background: var(--card);
}
.ceramic-page .care-copy {
padding: 55px;
background:
radial-gradient(circle at 0% 100%, rgba(var(--accent-rgb),.18), transparent 38%),
#111517;
}
.ceramic-page .care-copy h2 {
margin-bottom: 20px;
font-size: clamp(42px, 6vw, 72px);
letter-spacing: -.06em;
line-height: .95;
}
.ceramic-page .care-copy p {
color: var(--muted);
}
.ceramic-page .care-rules {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--line);
}
.ceramic-page .care-rule {
padding: 30px;
background: var(--card);
}
.ceramic-page .care-rule strong {
display: block;
margin-bottom: 8px;
color: var(--accent);
}
.ceramic-page .care-rule p {
color: var(--muted);
font-size: 13px;
}
.ceramic-page .faq {
border-top: 1px solid var(--line);
}
.ceramic-page .faq-item {
border-bottom: 1px solid var(--line);
}
.ceramic-page .faq-question {
width: 100%;
position: relative;
padding: 27px 60px 27px 0;
border: 0;
background: transparent;
cursor: pointer;
text-align: left;
font-size: clamp(19px, 3vw, 27px);
font-weight: 800;
letter-spacing: -.03em;
}
.ceramic-page .faq-question::after {
width: 36px;
height: 36px;
position: absolute;
top: 22px;
right: 0;
display: grid;
place-items: center;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--accent);
content: "+";
transition: .3s;
}
.ceramic-page .faq-item.open .faq-question::after {
transform: rotate(45deg);
}
.ceramic-page .faq-answer {
display: none;
max-width: 860px;
padding: 0 0 27px;
color: var(--muted);
}
.ceramic-page .faq-item.open .faq-answer {
display: block;
}
@media (max-width: 1050px) {
.ceramic-page .benefits-grid {
grid-template-columns: repeat(2, 1fr);
}
.ceramic-page .before-after,
.ceramic-page .care-card {
grid-template-columns: 1fr;
}
.ceramic-page .before-after-media {
min-height: 520px;
}
.ceramic-page .stages {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 800px) {
.ceramic-page .service-hero-bottom {
align-items: start;
flex-direction: column;
}
.ceramic-page .ceramic-packages {
grid-template-columns: 1fr;
}
.ceramic-page .stages {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 580px) {
.ceramic-page .service-hero {
min-height: 760px;
padding-top: 130px;
}
.ceramic-page .service-hero h1 {
font-size: 55px;
}
.ceramic-page .benefits-grid,
.ceramic-page .stages,
.ceramic-page .care-rules {
grid-template-columns: 1fr;
}
.ceramic-page .before-after-media {
min-height: 370px;
}
.ceramic-page .before-after-content,
.ceramic-page .care-copy {
padding: 30px;
}
.ceramic-page .hero-price {
width: 100%;
}
}
/* =========================================
MOVED FROM page-tonirovka.php
========================================= */
/* Специфичные стили страницы тонировки.
Базовые классы наследуются от страницы оклейки. */
.tint-page .film-hero-bg {
background:
linear-gradient(
90deg,
rgba(247, 246, 242, .99) 0%,
rgba(247, 246, 242, .91) 38%,
rgba(247, 246, 242, .38) 66%,
rgba(247, 246, 242, .1) 100%
),
linear-gradient(0deg, var(--bg) 0%, transparent 38%),
url("images/tint/tint-hero.webp") center 55% / cover;
}
@media (max-width: 580px) {
.tint-page .film-hero-bg {
background:
linear-gradient(
90deg,
rgba(247, 246, 242, .97),
rgba(247, 246, 242, .7)
),
linear-gradient(0deg, var(--bg), transparent 45%),
url("images/tint/tint-hero.webp") 62% center / cover;
}
}
/* =========================================
MOVED FROM page-shumoizolyacziya.php
========================================= */
/* ========================================
NOISE INSULATION PAGE
======================================== */
.noise-page .inner-hero {
position: relative;
min-height: 760px;
overflow: hidden;
padding: 150px 0 90px;
}
.noise-page .inner-hero-bg {
position: absolute;
inset: 0;
background:
linear-gradient(
90deg,
rgba(247, 246, 242, .99) 0%,
rgba(247, 246, 242, .92) 38%,
rgba(247, 246, 242, .48) 67%,
rgba(247, 246, 242, .12) 100%
),
linear-gradient(0deg, var(--bg) 0%, transparent 38%),
url("images/noise/noise-hero.webp") center 58% / cover;
}
.noise-page .inner-hero-bg::after {
content: "";
position: absolute;
inset: 0;
opacity: .16;
background-image:
linear-gradient(rgba(21, 25, 24, .08) 1px, transparent 1px),
linear-gradient(90deg, rgba(21, 25, 24, .08) 1px, transparent 1px);
background-size: 60px 60px;
}
.noise-page .inner-hero-content {
position: relative;
z-index: 1;
}
.noise-page .breadcrumbs {
gap: 10px;
margin-bottom: 30px;
color: var(--muted);
font-size: 14px;
}
.noise-page .breadcrumbs a {
color: var(--accent);
}
.noise-page .inner-hero h1 {
max-width: 760px;
margin: 20px 0 24px;
color: var(--text);
font-size: clamp(56px, 7vw, 104px);
line-height: .93;
letter-spacing: -.055em;
}
.noise-page .inner-hero h1 .outline {
color: transparent;
-webkit-text-stroke: 1.5px rgba(21, 25, 24, .68);
}
.noise-page .inner-hero-description {
max-width: 650px;
margin: 0;
color: #555e5a;
font-size: 19px;
line-height: 1.7;
}
.noise-page .inner-hero-actions {
gap: 14px;
margin-top: 36px;
}
.noise-page .inner-hero-features {
gap: 45px;
margin-top: 64px;
}
.noise-page .inner-hero-features .hero-stat {
display: grid;
gap: 5px;
}
.noise-page .inner-hero-features strong {
color: var(--text);
font-size: 25px;
}
.noise-page .inner-hero-features span {
color: var(--muted);
font-size: 14px;
}
/* DESCRIPTION */
.noise-page .section {
padding: 120px 0;
}
.noise-page .section-heading {
max-width: 760px;
margin-bottom: 58px;
}
.noise-page .section-heading h2 {
margin: 14px 0 20px;
color: var(--text);
font-size: clamp(38px, 5vw, 66px);
line-height: 1.04;
letter-spacing: -.04em;
}
.noise-page .section-heading p {
color: var(--muted);
font-size: 17px;
line-height: 1.75;
}
.noise-page .noise-description-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
gap: 72px;
align-items: center;
}
.noise-page .noise-description-media {
position: relative;
min-height: 650px;
overflow: hidden;
border: 1px solid var(--line);
border-radius: 28px;
box-shadow: var(--shadow);
}
.noise-page .noise-description-media img {
width: 100%;
height: 100%;
min-height: 650px;
object-fit: cover;
}
.noise-page .media-badge {
position: absolute;
right: 24px;
bottom: 24px;
display: grid;
gap: 3px;
padding: 20px 24px;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 18px;
background: rgba(12, 105, 88, .9);
color: #fff;
backdrop-filter: blur(14px);
}
.noise-page .media-badge strong {
font-size: 25px;
}
.noise-page .media-badge span {
color: rgba(255, 255, 255, .74);
font-size: 13px;
}
.noise-page .noise-description-content {
display: grid;
gap: 4px;
}
.noise-page .process-item {
display: grid;
grid-template-columns: 58px 1fr;
gap: 20px;
padding: 25px 0;
border-bottom: 1px solid var(--line);
}
.noise-page .process-number {
display: grid;
width: 48px;
height: 48px;
place-items: center;
border-radius: 50%;
background: rgba(20, 117, 99, .1);
color: var(--accent);
font-size: 13px;
font-weight: 700;
}
.noise-page .process-item h3 {
margin: 0 0 8px;
color: var(--text);
font-size: 21px;
}
.noise-page .process-item p {
margin: 0;
color: var(--muted);
line-height: 1.7;
}
.noise-page .noise-zones {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 72px;
}
.noise-page .zone-card {
padding: 32px;
border: 1px solid var(--line);
border-radius: 22px;
background: var(--card);
box-shadow: 0 14px 42px rgba(24, 34, 30, .06);
}
.noise-page .zone-icon {
display: grid;
width: 42px;
height: 42px;
margin-bottom: 42px;
place-items: center;
border-radius: 50%;
background: rgba(20, 117, 99, .1);
color: var(--accent);
font-size: 12px;
font-weight: 700;
}
.noise-page .zone-card h3 {
margin: 0 0 10px;
font-size: 21px;
}
.noise-page .zone-card p {
margin: 0;
color: var(--muted);
line-height: 1.7;
}
/* GALLERY */
.noise-page .noise-gallery-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 290px;
gap: 18px;
}
.noise-page .noise-gallery-grid .work-card {
grid-column: span 4;
position: relative;
overflow: hidden;
min-height: 290px;
border: 1px solid var(--line);
border-radius: 22px;
}
.noise-page .noise-gallery-grid .noise-gallery-main {
grid-column: span 8;
grid-row: span 2;
}
.noise-page .noise-gallery-grid .work-card:last-child {
grid-column: span 8;
}
.noise-page .noise-gallery-grid img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .7s ease;
}
.noise-page .noise-gallery-grid .work-card:hover img {
transform: scale(1.045);
}
.noise-page .work-overlay {
position: absolute;
inset: auto 0 0;
padding: 70px 26px 25px;
color: #fff;
background: linear-gradient(transparent, rgba(8, 13, 12, .9));
}
.noise-page .work-overlay h3 {
margin: 13px 0 6px;
font-size: 24px;
}
.noise-page .work-overlay p {
margin: 0;
color: rgba(255, 255, 255, .74);
}
/* SEO */
.noise-page .seo-section {
padding: 80px 0 110px;
}
.noise-page .seo-content {
max-width: 880px;
}
.noise-page .seo-content h2 {
margin: 0 0 24px;
color: var(--text);
font-size: 30px;
}
.noise-page .seo-content p {
margin: 0 0 18px;
color: var(--muted);
line-height: 1.85;
}
/* RESPONSIVE */
@media (max-width: 1100px) {
.noise-page .noise-description-grid {gap:42px}
}
@media (max-width: 900px) {
.noise-page .inner-hero {min-height:700px}
.noise-page .noise-description-grid {grid-template-columns:1fr}
.noise-page .noise-description-media,
.noise-page .noise-description-media img {min-height:520px}
.noise-page .noise-zones {grid-template-columns:repeat(2,1fr)}
.noise-page .noise-gallery-grid {grid-auto-rows:260px}
.noise-page .noise-gallery-grid .work-card,
.noise-page .noise-gallery-grid .noise-gallery-main,
.noise-page .noise-gallery-grid .work-card:last-child {grid-column:span 6;grid-row:auto}
}
@media (max-width: 680px) {
.noise-page .section {padding:82px 0}
.noise-page .inner-hero {min-height:720px;padding:125px 0 70px}
.noise-page .inner-hero-bg {
background:
linear-gradient(90deg,rgba(247,246,242,.98),rgba(247,246,242,.68)),
linear-gradient(0deg,var(--bg),transparent 45%),
url("images/noise/noise-hero.webp") 62% center / cover;
}
.noise-page .inner-hero h1 {font-size:clamp(48px,16vw,74px)}
.noise-page .inner-hero-description {font-size:16px}
.noise-page .inner-hero-features {gap:24px;margin-top:45px}
.noise-page .noise-description-media,
.noise-page .noise-description-media img {min-height:410px}
.noise-page .noise-zones {grid-template-columns:1fr}
.noise-page .noise-gallery-grid {display:grid;grid-template-columns:1fr;grid-auto-rows:300px}
.noise-page .noise-gallery-grid .work-card,
.noise-page .noise-gallery-grid .noise-gallery-main,
.noise-page .noise-gallery-grid .work-card:last-child {grid-column:1}
}
/* =========================================
UNIVERSAL SERVICE DETAIL PAGE
========================================= */
.special-hero {min-height:860px;position:relative;overflow:hidden;padding:150px 0 85px;isolation:isolate}
.special-hero-bg {position:absolute;z-index:-2;inset:0;background-position:center;background-size:cover;transform:scale(1.04);animation:heroZoom 12s ease-out forwards}
.special-hero-bg::after {position:absolute;inset:0;opacity:.12;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:80px 80px;content:"";mask-image:linear-gradient(to bottom,black,transparent 85%)}
.dent-page .special-hero-bg {background-image:linear-gradient(90deg,rgba(8,10,12,.98),rgba(8,10,12,.76) 44%,rgba(8,10,12,.18) 78%),linear-gradient(0deg,var(--bg),transparent 42%),url("images/dent/dent-hero.webp")}
.localization-page .special-hero-bg {background-image:linear-gradient(90deg,rgba(8,10,12,.98),rgba(8,10,12,.78) 46%,rgba(8,10,12,.22) 80%),linear-gradient(0deg,var(--bg),transparent 42%),url("images/localization/localization-hero.webp")}
.special-hero-content {position:relative;z-index:2}
.special-page .breadcrumbs {gap:10px;margin-bottom:24px;color:var(--muted);font-size:12px}
.special-page .breadcrumbs a:hover {color:var(--accent)}
.special-hero h1 {max-width:1100px;font-size:clamp(54px,8.3vw,126px);font-weight:900;letter-spacing:-.075em;line-height:.82;text-transform:uppercase}
.special-hero h1 .outline {color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.58)}
.special-hero-bottom {gap:45px;margin-top:50px}
.special-hero-copy {max-width:620px}
.special-stats {gap:38px}
.special-stat {max-width:150px}
.special-stat strong {display:block;font-size:27px;letter-spacing:-.04em}
.special-stat span {color:var(--muted);font-size:12px}
.special-about-grid {display:grid;grid-template-columns:1.08fr .92fr;gap:18px}
.special-about-media {min-height:620px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius)}
.special-about-media img {height:100%;object-fit:cover}
.special-about-overlay {position:absolute;inset:0;display:flex;flex-direction:column;justify-content:end;padding:36px;background:linear-gradient(0deg,rgba(5,7,8,.96),transparent 70%)}
.special-about-overlay span {margin-bottom:12px;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.special-about-overlay h3 {max-width:570px;font-size:clamp(30px,4vw,52px);letter-spacing:-.05em;line-height:1}
.special-benefits {display:grid;gap:18px}
.special-benefit {display:grid;grid-template-columns:48px 1fr;gap:20px;padding:27px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.special-benefit>span {color:var(--accent);font-size:12px;font-weight:700}
.special-benefit h3 {margin-bottom:8px;font-size:21px;letter-spacing:-.03em}
.special-benefit p {color:var(--muted);font-size:14px}
.special-process-section,.special-faq-section {background:#0c0f11}
.special-process {display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;border:1px solid var(--line);border-radius:24px;background:var(--card)}
.special-process-item {min-height:235px;padding:28px;border-right:1px solid var(--line)}
.special-process-item:last-child {border-right:0}
.special-process-item>span {display:block;margin-bottom:48px;color:var(--accent);font-size:12px;font-weight:700}
.special-process-item h3 {margin-bottom:8px;font-size:22px}
.special-process-item p {color:var(--muted);font-size:13px}
.special-packages {display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.special-package {min-height:330px;display:flex;flex-direction:column;padding:32px;border:1px solid var(--line);border-radius:26px;background:var(--card)}
.special-package.featured {border-color:var(--accent);background:linear-gradient(145deg,rgba(var(--accent-rgb),.11),transparent 44%),var(--card)}
.special-package-label {width:fit-content;margin-bottom:32px;padding:7px 11px;border-radius:100px;background:rgba(var(--accent-rgb),.1);color:var(--accent);font-size:11px;font-weight:800;text-transform:uppercase}
.special-package strong {margin-bottom:18px;color:var(--accent);font-size:38px;letter-spacing:-.05em}
.special-package p {margin-bottom:30px;color:var(--muted);font-size:14px}
.special-package .btn {width:100%;margin-top:auto}
.special-page .faq {border-top:1px solid var(--line)}
.special-page .faq-item {border-bottom:1px solid var(--line)}
.special-page .faq-question {width:100%;position:relative;padding:27px 60px 27px 0;border:0;background:transparent;cursor:pointer;text-align:left;font-size:clamp(19px,3vw,27px);font-weight:700}
.special-page .faq-question::after {width:36px;height:36px;position:absolute;top:22px;right:0;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--accent);content:"+";transition:.3s}
.special-page .faq-item.open .faq-question::after {transform:rotate(45deg)}
.special-page .faq-answer {display:none;max-width:860px;padding:0 0 27px;color:var(--muted)}
.special-page .faq-item.open .faq-answer {display:block}
.special-seo {padding-top:30px}
.special-seo-card {display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;padding:55px;border:1px solid var(--line);border-radius:28px;background:var(--card)}
.special-seo-card h2 {font-size:clamp(34px,5vw,58px);letter-spacing:-.055em;line-height:1}
.special-seo-content {display:grid;gap:18px;color:var(--muted);font-size:15px}
@media (max-width:1050px) {.special-hero-bottom{align-items:start;flex-direction:column}.special-about-grid,.special-seo-card{grid-template-columns:1fr}.special-process{grid-template-columns:repeat(2,1fr)}.special-process-item:nth-child(2){border-right:0}.special-process-item:nth-child(-n+2){border-bottom:1px solid var(--line)}}
@media (max-width:800px) {.special-hero{min-height:820px}.special-stats.nowrap{flex-wrap:wrap;gap:25px}.special-packages{grid-template-columns:1fr}.special-seo-card{gap:35px;padding:35px}}
@media (max-width:580px) {.special-hero{min-height:760px;align-items:center;padding:130px 0 70px}.special-hero h1{font-size:49px}.special-about-media{min-height:430px}.special-about-overlay{padding:25px}.special-benefit{grid-template-columns:35px 1fr;padding:22px}.special-process{grid-template-columns:1fr}.special-process-item{min-height:auto;border-right:0;border-bottom:1px solid var(--line)}.special-process-item:last-child{border-bottom:0}.special-process-item>span{margin-bottom:20px}.special-seo-card{padding:25px}}
/* =========================================
PROJECT-WIDE RESPONSIVE HARDENING
========================================= */
html {overflow-x:hidden}
body {min-width:320px}
main {overflow:clip}
h1,h2,h3,p,a,button,strong,span {overflow-wrap:break-word}
iframe,video,table {max-width:100%}
.content {min-width:0}
.content img {height:auto}
.content iframe,.content video {width:100%;height:auto;aspect-ratio:16/9}
.content table {display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.btn {max-width:100%;text-align:center;white-space:normal}
.service-card,.work-card,.review-card,.special-package,.ceramic-package {min-width:0}
.calc-layout>*,.contact-card>*,.film-about-grid>*,.special-about-grid>*,.noise-description-grid>* {min-width:0}
@media (max-width:1180px) {
.container {width:min(calc(100% - 48px),var(--container))}
.section {padding:100px 0}
.hero h1 {font-size:clamp(64px,10vw,116px)}
.calc-tabs {grid-template-columns:repeat(3,1fr)}
.calc-tab {padding:8px}
.package-grid {grid-template-columns:repeat(2,1fr)}
.package-grid .package:last-child {grid-column:1/-1}
.film-about-grid,.special-about-grid {grid-template-columns:1fr 1fr}
.film-about-main,.special-about-media {min-height:560px}
.ceramic-page .stages {grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px) {
.container {width:min(calc(100% - 36px),var(--container))}
.section {padding:84px 0}
.header-inner {min-height:76px}
.section-title {font-size:clamp(36px,8vw,62px)}
.section-description {font-size:16px}
.hero {min-height:760px;padding:125px 0 70px}
.hero h1 {font-size:clamp(54px,12vw,92px)}
.hero-bottom {margin-top:38px}
.hero-stats {flex-wrap:wrap;gap:26px}
.services-grid {grid-template-columns:1fr}
.service-card {min-height:400px}
.calc-main,.calc-result {padding:32px}
.package-grid {grid-template-columns:1fr}
.package-grid .package:last-child {grid-column:auto}
.portfolio-grid {gap:14px}
.reviews-grid {grid-template-columns:1fr 1fr}
.review-card:last-child {grid-column:1/-1}
.contact-info,.wpcf7-form {padding:38px}
.film-hero,.special-hero,.ceramic-page .service-hero {min-height:760px;padding:125px 0 70px}
.film-hero h1,.special-hero h1,.ceramic-page .service-hero h1 {font-size:clamp(48px,10vw,78px)}
.film-about-grid,.special-about-grid {grid-template-columns:1fr}
.film-about-main,.special-about-media {min-height:500px}
.film-gallery {gap:14px}
.ceramic-page .benefits-grid {grid-template-columns:repeat(2,1fr)}
.ceramic-page .before-after-media {min-height:480px}
.noise-page .noise-description-grid {gap:32px}
.noise-page .noise-zones {grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px) {
.container,.max {width:min(calc(100% - 24px),var(--container));padding-inline:0}
.section {padding:68px 0}
.header-inner {min-height:70px;gap:14px}
.logo {font-size:20px}
.menu-button {width:44px;height:44px;flex:0 0 44px}
.nav {padding:90px 24px 40px;overflow-y:auto}
.nav a {font-size:clamp(22px,8vw,30px)}
.eyebrow {margin-bottom:15px;font-size:10px;letter-spacing:.14em}
.eyebrow::before {width:24px}
.section-head {gap:18px;margin-bottom:34px}
.section-title {font-size:clamp(34px,10.5vw,50px);line-height:1}
.hero {min-height:max(720px,100svh);padding:110px 0 58px}
.hero h1 {font-size:clamp(45px,15vw,68px);line-height:.86}
.hero-label {font-size:10px;letter-spacing:.08em}
.hero-description {font-size:16px}
.hero-bottom {gap:28px;margin-top:32px}
.hero-buttons {width:100%;gap:10px}
.hero-buttons .btn {flex:1 1 220px}
.hero-stats {width:100%;gap:18px 24px}
.hero-stat strong {font-size:27px}
.service-card {min-height:350px;border-radius:22px}
.service-card-content {padding:24px}
.service-card h3 {font-size:clamp(31px,11vw,44px)}
.service-number {top:22px;left:24px}
.service-arrow {width:46px;height:46px;top:18px;right:18px}
.calculator {border-radius:22px}
.calc-tabs {grid-template-columns:1fr 1fr;padding:6px}
.calc-tab {min-height:52px;padding:8px 6px;font-size:11px;line-height:1.2}
.calc-main,.calc-result {padding:24px}
.calc-step {margin-bottom:28px}
.calc-step-title,.calc-step-heading {align-items:flex-start}
.option {flex:1 1 140px}
.option span {height:100%;justify-content:center;padding:10px 12px;text-align:center}
.car-visual {min-height:210px;border-radius:18px}
.visual-hint {right:10px;bottom:10px;left:10px;text-align:center}
.result-price {font-size:clamp(36px,12vw,50px)}
.result-item {align-items:flex-start;gap:8px 16px}
.portfolio-filters {margin-inline:-12px;padding:0 12px 8px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
.portfolio-filters::-webkit-scrollbar {display:none}
.portfolio-filter {flex:0 0 auto}
.portfolio-grid {gap:12px}
.work-card,.work-card:first-child,.work-card:nth-child(5) {min-height:340px}
.reviews-grid {grid-template-columns:1fr}
.review-card,.review-card:last-child {min-height:260px;grid-column:auto}
.contact-card {border-radius:22px}
.contact-info,.wpcf7-form {padding:26px}
.contact-info h2 {font-size:clamp(38px,12vw,50px)}
.contact-link {max-width:100%;font-size:16px}
.messengers {gap:8px}
.messenger {padding:10px 13px}
.footer {padding:28px 0}
.footer-inner {gap:20px}
.footer-nav {gap:12px 18px}
.film-hero,.special-hero,.ceramic-page .service-hero,.noise-page .inner-hero {min-height:max(700px,100svh);padding:110px 0 60px}
.film-hero h1,.special-hero h1,.ceramic-page .service-hero h1,.noise-page .inner-hero h1 {font-size:clamp(39px,12.5vw,58px);line-height:.88}
.film-hero-bottom,.special-hero-bottom,.ceramic-page .service-hero-bottom {gap:28px;margin-top:34px}
.film-hero-features,.special-stats {width:100%;flex-wrap:wrap;gap:20px 24px}
.film-hero-feature,.special-stat {min-width:calc(50% - 12px);max-width:none}
.film-about-main,.special-about-media {min-height:390px}
.film-about-overlay,.special-about-overlay {padding:24px}
.film-benefit,.special-benefit {grid-template-columns:34px 1fr;padding:21px}
.film-process,.special-process {grid-template-columns:1fr}
.film-process-item,.special-process-item {min-height:auto;border-right:0;border-bottom:1px solid var(--line)}
.film-process-item:last-child,.special-process-item:last-child {border-bottom:0}
.film-gallery-item,.film-gallery-large,.film-gallery-wide {min-height:340px}
.film-seo-card,.special-seo-card {gap:26px;padding:24px}
.ceramic-page .benefits-grid,.ceramic-page .stages,.ceramic-page .care-rules,.ceramic-page .ceramic-packages {grid-template-columns:1fr}
.ceramic-page .before-after-media {min-height:340px}
.ceramic-page .before-after-content,.ceramic-page .care-copy {padding:26px}
.ceramic-page .hero-price {width:100%;min-width:0}
.noise-page .section {padding:68px 0}
.noise-page .section-heading {margin-bottom:36px}
.noise-page .noise-description-media,.noise-page .noise-description-media img {min-height:360px}
.noise-page .noise-zones {grid-template-columns:1fr}
.noise-page .noise-gallery-grid {grid-template-columns:1fr;grid-auto-rows:320px}
.noise-page .noise-gallery-grid .work-card,.noise-page .noise-gallery-grid .noise-gallery-main,.noise-page .noise-gallery-grid .work-card:last-child {grid-column:1;grid-row:auto}
}
/* Works archive */
.works-archive-header {max-width:900px}
.works-archive-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.works-archive-card {min-width:0;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:var(--card);transition:border-color .25s,transform .25s}
.works-archive-card:hover {border-color:rgba(255,255,255,.22);transform:translateY(-4px)}
.works-archive-media {aspect-ratio:3/4;display:block;overflow:hidden;background:#eef0ed}
.works-archive-media img {width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.works-archive-card:hover .works-archive-media img {transform:scale(1.035)}
.works-archive-placeholder {height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#1b2025,#0d1012);color:white;font-size:22px;font-weight:900;letter-spacing:-.05em}
.works-archive-placeholder span {color:var(--accent)}
.works-archive-body {min-height:245px;display:flex;flex-direction:column;padding:24px}
.works-archive-service {width:fit-content;margin-bottom:18px;padding:6px 10px;border-radius:100px;background:var(--accent);color:#111;font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.works-archive-body h2 {font-size:clamp(24px,2.2vw,32px);letter-spacing:-.045em;line-height:1.05}
.works-archive-body h2 a:hover {color:white}
.works-archive-body p {margin-top:12px;color:var(--muted);font-size:14px}
.works-archive-link {width:fit-content;margin-top:auto;padding-top:24px;color:white;font-size:13px;font-weight:700}
.works-archive-link span {display:inline-block;margin-left:6px;color:var(--accent);transition:transform .2s}
.works-archive-link:hover span {transform:translateX(4px)}
.works-pagination {margin-top:48px}
.works-pagination .page-numbers {display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.works-pagination a,.works-pagination span {min-width:44px;height:44px;display:grid;place-items:center;padding:0 12px;border:1px solid var(--line);border-radius:12px;color:var(--muted)}
.works-pagination a:hover {border-color:white;color:white}
.works-pagination .current {border-color:var(--accent);background:var(--accent);color:#111}
.works-archive-empty {text-align:center}
.works-archive-empty p {margin-top:10px;color:var(--muted)}
@media (max-width:900px) {
.works-archive-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:580px) {
.works-archive-grid {grid-template-columns:1fr;gap:14px}
.works-archive-card {border-radius:18px}
.works-archive-body {min-height:220px;padding:21px}
}
@media (max-width:420px) {
.btn {width:100%;height:auto;min-height:54px;padding:12px 18px}
.hero-buttons {flex-direction:column}
.hero-buttons .btn {flex:0 0 auto}
.hero h1 {font-size:clamp(42px,14vw,56px)}
.hero-stats,.film-hero-features,.special-stats {display:grid;grid-template-columns:1fr 1fr}
.hero-stat:last-child,.film-hero-feature:last-child,.special-stat:last-child {grid-column:1/-1}
.film-hero-feature,.special-stat {min-width:0}
.calc-tabs {grid-template-columns:1fr}
.calc-tab {min-height:46px}
.options {display:grid;grid-template-columns:1fr;width:100%}
.option {width:100%}
.result-item {display:grid;grid-template-columns:1fr}
.result-item span:last-child {text-align:left}
.service-card {min-height:330px}
.service-card h3 {font-size:34px}
.contact-info,.wpcf7-form {padding:22px}
.wpcf7-form {gap:20px}
.field input[type=text],.field input[type=tel],.field select {height:50px}
.footer-nav {display:grid;grid-template-columns:1fr 1fr}
.film-about-main,.special-about-media {min-height:350px}
.film-gallery-item,.film-gallery-large,.film-gallery-wide {min-height:310px}
.special-package,.ceramic-package {padding:24px}
.noise-page .noise-description-media,.noise-page .noise-description-media img {min-height:310px}
.noise-page .process-item {grid-template-columns:42px 1fr;gap:14px}
.noise-page .process-number {width:40px;height:40px}
}
/* Единое затемнение hero — схема главной страницы */
.film-hero-bg {background:linear-gradient(90deg,rgba(8,10,12,.98) 0%,rgba(8,10,12,.72) 42%,rgba(8,10,12,.2) 72%),linear-gradient(0deg,var(--bg) 0%,transparent 38%),url("images/film/film-hero.webp") center 60% / cover}
.tint-page .film-hero-bg {background:linear-gradient(90deg,rgba(8,10,12,.98) 0%,rgba(8,10,12,.72) 42%,rgba(8,10,12,.2) 72%),linear-gradient(0deg,var(--bg) 0%,transparent 38%),url("images/tint/tint-hero.webp") center 55% / cover}
.ceramic-page .service-hero-bg {background:linear-gradient(90deg,rgba(8,10,12,.98) 0%,rgba(8,10,12,.72) 42%,rgba(8,10,12,.2) 72%),linear-gradient(0deg,var(--bg) 0%,transparent 38%),url("images/ceramic/ceramic-hero.webp") center 60% / cover}
.noise-page .inner-hero-bg {background:linear-gradient(90deg,rgba(8,10,12,.98) 0%,rgba(8,10,12,.72) 42%,rgba(8,10,12,.2) 72%),linear-gradient(0deg,var(--bg) 0%,transparent 38%),url("images/noise/noise-hero.webp") center 58% / cover}
.noise-page .inner-hero-bg::after {opacity:.12;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:80px 80px;mask-image:linear-gradient(to bottom,black,transparent 80%)}
.noise-page .inner-hero h1 .outline {-webkit-text-stroke:1px rgba(255,255,255,.55)}
.noise-page .inner-hero-description {color:#b4bcc1}
.dent-page .special-hero-bg {background-image:linear-gradient(90deg,rgba(8,10,12,.98) 0%,rgba(8,10,12,.72) 42%,rgba(8,10,12,.2) 72%),linear-gradient(0deg,var(--bg) 0%,transparent 38%),url("images/dent/dent-hero.webp")}
.localization-page .special-hero-bg {background-image:linear-gradient(90deg,rgba(8,10,12,.98) 0%,rgba(8,10,12,.72) 42%,rgba(8,10,12,.2) 72%),linear-gradient(0deg,var(--bg) 0%,transparent 38%),url("images/localization/localization-hero.webp")}
@media (max-width:680px) {
.promo-popup {padding:12px}
.promo-popup-card {padding:34px 24px 26px;border-radius:24px}
.promo-popup-close {top:14px;right:14px}
.promo-popup-mark {width:54px;height:54px;margin-bottom:22px}
.promo-popup-card h2 {padding-right:20px;font-size:clamp(35px,11vw,48px)}
.promo-popup-card .btn {width:100%}
.contacts-page-grid {grid-template-columns:1fr}
.contact-detail-address {grid-column:auto}
.contact-detail-card,.contact-detail-address {min-height:170px;padding:24px}
.contact-visit-note {grid-template-columns:1fr;gap:15px;padding:26px}
.contact-visit-note .eyebrow,.contact-visit-note h2,.contact-visit-note p,.contact-visit-note .btn {grid-column:1;grid-row:auto}
.reviews-cta {align-items:flex-start;flex-direction:column;padding:26px}
.reviews-cta .btn {width:100%}
.legal-notice {grid-template-columns:1fr;padding:18px}
.price-option-grid {grid-template-columns:1fr}
.price-option>span {min-height:68px}
.wpcf7-form .wpcf7-checkbox {grid-template-columns:1fr}
.text-page {padding:120px 0 75px}
.text-page-header {margin-bottom:32px}
.text-page-header h1 {font-size:clamp(42px,13vw,62px)}
.text-page-card {padding:24px;border-radius:22px}
.entry-content {font-size:16px}
.entry-content table {display:block;overflow-x:auto}
.work-single-summary {align-items:flex-start;flex-direction:column}
.work-price {width:100%}
.work-single-cover {height:390px;border-radius:22px}
.work-cta {grid-template-columns:1fr;gap:28px;padding:26px}
.work-cta-buttons {justify-content:flex-start}
.work-cta-buttons .btn {width:100%}
.work-gallery {padding-top:72px}
.work-gallery-grid {grid-template-columns:1fr}
.work-gallery-item,.work-gallery-item:first-child:nth-last-child(odd) {min-height:310px;grid-column:auto}
}