/* Start:/bitrix/templates/main/template_styles.css?179253415938078*/
/* ==========================================================================
   ПЕРЕМЕННЫЕ И БАЗОВЫЕ СБРОСЫ
   ========================================================================== */
:root {
    --bg: #000;
    --fg: #fff;
    --fg2: rgba(255, 255, 255, .6);
    --line: rgba(255, 255, 255, .14);
    --star: #ffb247;
    --pad: 64px;
    --card: rgba(255, 255, 255, .04);
}

:root[data-theme=light] {
    --bg: #000;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 70px;
}

body {
    background: var(--bg);
    color: var(--fg);
    font: 400 16px/1.5 Inter, system-ui, sans-serif;
    overflow-x: hidden;
    padding-top: env(safe-area-inset-top, 0);
}

a {
    color: inherit;
    text-decoration: none;
}

h1, h2, h3, .o {
    font-family: Oswald, 'Arial Narrow', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    line-height: 1.1;
}

h2 {
    font-size: clamp(40px, 6vw, 72px);
    letter-spacing: -.02em;
}

.wrap {
    padding: 0 var(--pad);
}

section {
    padding: 89px 0;
    position: relative;
}

/* ==========================================================================
   КНОПКИ И ЧИПЫ
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 26px;
    border: 1px solid var(--fg);
    border-radius: 999px;
    font: 500 15px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
    text-align: center;
    background: none;
    color: var(--fg);
    transition: .35s cubic-bezier(.2, .8, .2, 1);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.btn.p {
    background: var(--fg);
    color: var(--bg);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, .18);
}

.btn.o2:hover,
.btn:not(.p):hover {
    background: var(--fg);
    color: var(--bg);
}

.btn.s {
    height: 42px;
    width: 200px;
}

.chip {
    height: 38px;
    padding: 0 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: none;
    color: var(--fg2);
    font: 400 14px/1 Inter, system-ui, sans-serif;
    cursor: pointer;
    transition: .25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.chip:hover {
    border-color: var(--fg);
    color: var(--fg);
}

.chip.on {
    background: var(--fg);
    color: var(--bg);
    border-color: var(--fg);
}

.chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.price-list {
    display: none;
}
.price-list.active {
    display: block;
    /* Можно добавить анимацию появления */
    animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   ЗАГЛУШКИ ИЗОБРАЖЕНИЙ И АНИМАЦИЯ ПОЯВЛЕНИЯ
   ========================================================================== */
.ph {
    background: radial-gradient(120% 90% at 30% 20%, #6b472e, #39281b 45%, #14100c);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background-size: cover;
    background-position: center;
}

.ph::after {
    content: attr(data-l);
    position: absolute;
    left: 14px;
    bottom: 12px;
    font-size: 12px;
    color: var(--fg2);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ph.img::after {
    display: none;
}

.rv {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .9s, transform .9s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--d, 0s);
}

.rv.in {
    opacity: 1;
    transform: none;
}

/* ==========================================================================
   ШАПКА САЙТА (HEADER)
   ========================================================================== */
header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: background .4s, transform .4s;
}

header.sc {
    background: rgba(0, 0, 0, .8);
    backdrop-filter: blur(14px);
}

.hd {
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--pad);
}

.hl {
    display: flex;
    gap: 40px;
    align-items: center;
}

.logo {
    font: 400 26px Rye, serif;
    line-height: 1;
}

nav.m {
    display: flex;
    gap: 22px;
    font-size: 14px;
    color: var(--fg2);
}

nav.m a {
    position: relative;
    transition: color .3s;
}

nav.m a:hover {
    color: var(--fg);
}

nav.m a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 1px;
    width: 100%;
    background: var(--fg);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .4s;
}

nav.m a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.hr {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 13px;
    text-align: right;
}

.hr .d {
    color: var(--fg2);
}

.bg {
    display: none;
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
    cursor: pointer;
    position: relative;
    z-index: 70;
}

.bg i {
    position: absolute;
    left: 4px;
    right: 4px;
    height: 2px;
    background: #fff;
    transition: .4s;
}

.bg i:nth-child(1) { top: 10px; }
.bg i:nth-child(2) { top: 20px; }

.open .bg i:nth-child(1) {
    top: 15px;
    transform: rotate(45deg);
}

.open .bg i:nth-child(2) {
    top: 15px;
    transform: rotate(-45deg);
}

.burger {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: radial-gradient(60% 40% at 30% 75%, #2b1d12, #000 70%);
    padding: 120px 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    clip-path: circle(0 at calc(100% - 36px) 34px);
    transition: clip-path .8s cubic-bezier(.7, 0, .2, 1);
    visibility: hidden;
}

.open .burger {
    clip-path: circle(150% at calc(100% - 36px) 34px);
    visibility: visible;
}

.burger a.l {
    display: block;
    font: 400 34px/1.2 Oswald;
    text-transform: uppercase;
    margin-bottom: 14px;
    opacity: 0;
    transform: translateX(-30px);
    transition: .6s;
}

.open .burger a.l {
    opacity: 1;
    transform: none;
    transition-delay: calc(.25s + var(--i) * .06s);
}

.burger small {
    display: block;
    color: var(--fg2);
    font-size: 14px;
    margin-bottom: 20px;
}

/* ==========================================================================
   ПЕРВЫЙ ЭКРАН (HERO)
   ========================================================================== */
.hero {
    min-height: 100vh;
    min-height: 100svh;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}

.hero .bgp {
    position: absolute;
    inset: -5%;
    background: radial-gradient(40% 50% at 25% 65%, #6b472e, #39281b 40%, #14100c 70%, #080808);
    will-change: transform;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .05) 35%, rgba(0, 0, 0, .93));
}

.hero .in {
    position: relative;
    z-index: 2;
    padding: 0 var(--pad) 52px;
}

.wm {
    font: 400 clamp(60px, 14.5vw, 208px)/1 Rye, serif;
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: .02em;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    padding: 10px 0;
}

.wm span {
    display: inline-block;
    transform: translateY(110%) rotate(6deg);
    animation: up 1.1s cubic-bezier(.2, .8, .2, 1) forwards;
    animation-delay: calc(var(--i) * .07s + .2s);
}

@keyframes up {
    to { transform: none; }
}

.wm { display: block; }
.wl { position: relative; }

.wm .wl > img:first-child {
    width: 100%;
    display: block;
    clip-path: inset(0 100% 0 0);
    animation: wr 1.5s cubic-bezier(.7, 0, .2, 1) .2s forwards;
}

.wm .em {
    position: absolute;
    left: 46%;
    top: 2%;
    width: 12.6%;
    height: auto;
    opacity: 0;
    transform: scale(.5) rotate(-20deg);
    animation: em 1s cubic-bezier(.2, .8, .2, 1) 1.2s forwards;
}

@keyframes em { to { opacity: 1; transform: none; } }
@keyframes wr { to { clip-path: inset(0); } }

.logo img {
    width: 40px;
    height: auto;
    display: block;
    transition: transform .6s;
}

.logo:hover img {
    transform: rotate(-12deg) scale(1.1);
}

.svm {
    display: none;
    width: 100%;
    border-radius: 16px;
    margin-bottom: 24px;
}

.bk img {
    height: 30px;
    width: auto;
    display: block;
    margin-bottom: 10px;
}

.hero h1 {
    font-size: clamp(26px, 3.5vw, 50px);
    letter-spacing: -.005em;
    margin: 20px 0;
}

.cta {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

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

.rate {
    display: flex;
    gap: 10px;
    align-items: center;
    height: 54px;
    padding: 0 18px 0 14px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    font-size: 14px;
    color: var(--fg2);
}

.rate b {
    font: 600 26px Oswald;
    color: var(--fg);
}

.rate s {
    text-decoration: none;
    color: var(--star);
    font-size: 12px;
    display: block;
}

.lead {
    color: var(--fg2);
    max-width: 520px;
    text-align: right;
}

.seal {
    position: fixed;
    z-index: 55;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    width: 120px;
    height: 120px;
    display: block;
    transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.seal:hover {
    transform: scale(1.1) rotate(8deg);
}

.seal svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sring {
    transform-origin: 60px 60px;
    animation: spin 14s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   СТАТИСТИКА
   ========================================================================== */
.stats #bx_incl_area_2_1,
.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-block: 1px solid var(--line);
    padding: 0;
}

.stat {
    padding: 28px var(--pad) 28px 64px;
    border-right: 1px solid var(--line);
}

.stat:last-child { border: 0; }

.stat b {
    font: 400 32px Oswald;
    display: block;
    text-transform: uppercase;
}

.stat span {
    color: var(--fg2);
    font-size: 14px;
}

/* ==========================================================================
   УСЛУГИ И СЕТКИ
   ========================================================================== */
.svc {
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 33px 0;
    position: relative;
    transition: padding .5s cubic-bezier(.2, .8, .2, 1), opacity .4s;
    cursor: pointer;
}

.svc:last-child { border-bottom: 1px solid var(--line); }

.svc h3 { font-size: clamp(30px, 3.6vw, 48px); }
.svc p { color: var(--fg2); margin-top: 8px; }
.svc .pr { font: 400 28px Oswald; white-space: nowrap; }

.svc .svc-img{
	border-radius: 10px;
    max-width: 240px;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--line);
	display: none; 
}

.svc .svc-img img{
	width: 100%;
	height: auto;

}

#fl i.ph {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity .4s;
}
#fl i.ph.on {
    opacity: 1;
}


.list:hover .svc { opacity: .35; }
.list .svc:hover { opacity: 1; padding-left: 24px; }

.fl {
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 340px;
    z-index: 40;
    pointer-events: none;
    border-radius: 14px;
    opacity: 0;
    scale: .6;
    transition: opacity .35s, scale .5s cubic-bezier(.2, .8, .2, 1);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .65);
    will-change: transform;
}

.fl.on { opacity: 1; scale: 1; }

.fl i {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    opacity: 0;
    transition: opacity .4s;
}

.fl i.on { opacity: 1; }

.cur {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: grid;
    place-items: center;
    font-size: 20px;
    z-index: 3;
}

/* Сетки */
.g3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 40px;
}

.rs {
    padding: 28px 24px;
    border: 1px solid var(--line);
    margin: -1px 0 0 -1px;
    transition: background .4s, transform .4s;
}

.rs:hover {
    background: var(--card);
    transform: translateY(-4px);
}

.rs h3 { font-size: 20px; margin-bottom: 10px; }
.rs p { color: var(--fg2); font-size: 15px; }

.pg {
    display: grid;
    grid-template-columns: 500px 1fr;
    gap: 64px;
    margin-top: 40px;
}

.pg .ph { height: 682px; }

.perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.perk {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 19px;
}

.perk b { font: 400 26px Oswald; display: block; }
.perk span { color: var(--fg2); font-size: 14px; }

.prow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 18px;
    animation: fi .5s both;
}

.prow small { display: block; color: var(--fg2); font-size: 14px; }

@keyframes fi { from { opacity: 0; transform: translateY(12px); } }

.row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0 41px;
    height: 88px;
    margin-top: 40px;
    transition: .4s;
}

.row2:hover { background: var(--fg); color: var(--bg); }
.row2 b { font: 400 28px Oswald; text-transform: uppercase; }
.row2 span { color: var(--fg2); margin: 0 auto 0 28px; }
.row2:hover span { color: #0009; }

.steps { margin-top: 0; }

.step {
    display: grid;
    grid-template-columns: 114px 1fr 1fr 130px;
    gap: 24px;
    padding: 30px 20px;
    border-top: 1px solid var(--line);
    align-items: start;
    transition: background .4s;
}

.step:hover { background: var(--card); }
.step .n { font: 400 80px/1 Oswald; color: var(--fg2); transition: .4s; }
.step:hover .n { color: var(--fg); transform: translateX(10px); }
.step h3 { font-size: 30px; }
.step p { color: var(--fg2); }
.step .mt { text-align: right; }
.step .mt span { display: block; color: var(--fg2); font-size: 14px; }

.sw {
    position: relative;
    align-items: start;
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 24px;
}

.works {
  display: flex;
    margin-top: 40px;
}

.works>div {
	display: flex;
    width: 100%;
    flex-wrap: wrap;
    gap: 14px;
}

.works .rv.in {
	flex: 0 1 calc(25% - 11px);
}

.w { transition: transform .5s, opacity .4s; }
.w .ph { aspect-ratio: 317/396; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.w:hover .ph { transform: scale(.97) rotate(-1deg); }
.w p { margin-top: 8px; font-size: 14px; }
.w.h { display: none; }

.team {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 40px;
}

.m .ph { aspect-ratio: 316/534; }
.m:hover .ph { transform: translateY(-8px); }
.m h3 { font-size: 24px; margin: 12px 0 4px; }
.m p { color: var(--fg2); font-size: 14px; margin-bottom: 14px; }
.m.h { display: none; }

.mq {
    overflow: hidden;
    margin-top: 30px;
    mask: linear-gradient(90deg, #0000, #000 6%, #000 94%, #0000);
}

.tr {
    display: flex;
    gap: 0;
    width: max-content;
    animation: mq 50s linear infinite;
}

.mq:hover .tr { animation-play-state: paused; }

@keyframes mq { to { transform: translateX(-50%); } }

.rev {
    width: 400px;
    padding: 23px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--card);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    white-space: normal;
}

.rev s { text-decoration: none; color: var(--star); }

.rev div {
    display: flex;
    justify-content: space-between;
    color: var(--fg2);
    font-size: 14px;
}

.hd2 { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.rt { text-align: right; }
.rt b { font: 600 44px Oswald; }

.vid {
    aspect-ratio: 16/7.5;
    border-radius: 16px;
    margin-top: 24px;
    display: grid;
    place-items: center;
}

.pl {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: grid;
    place-items: center;
    font-size: 28px;
    z-index: 2;
    transition: .4s;
}

.vid:hover .pl { transform: scale(1.15); }

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

.c {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    transition: .4s;
}

.c:hover {
    transform: translateY(-6px);
    border-color: var(--fg);
}

.c h3 { font-size: 26px; }
.c .pr { font: 400 40px Oswald; margin: 8px 0 12px; }
.c li { list-style: none; color: var(--fg2); font-size: 15px; }
.c .btn { margin-top: 20px; }

.two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 30px;
}

.two > div {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
}

.two h3 { font-size: 24px; margin-bottom: 10px; }
.two p { color: var(--fg2); margin-bottom: 20px; }

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

.bk {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 19px;
}

.bk small { display: block; color: var(--fg2); }

.faq {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 80px;
}

.fi {
    border-bottom: 1px solid var(--line);
    cursor: pointer;
}

.fi h3 {
    font-size: 26px;
    padding: 21px 0;
    display: flex;
    justify-content: space-between;
    text-transform: uppercase;
    font-family: Oswald, 'Arial Narrow', sans-serif;
    font-weight: 400;
    gap: 16px;
}

.fi h3 i { font-style: normal; transition: transform .4s; }
.fi.is-open h3 i { transform: rotate(45deg); }

.fi div {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .5s;
}

.fi.is-open div { grid-template-rows: 1fr; }
.fi div p { overflow: hidden; color: var(--fg2); }
.fi.is-open div p { padding-bottom: 20px; }

.ct {
    display: grid;
    grid-template-columns: 623px 1fr;
    gap: 0;
    margin-top: 36px;
}

.ci {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.ci small {
    color: var(--fg2);
    font-size: 13px;
    display: block;
}

.map {
    border: 1px solid var(--line);
    border-radius: 16px;
    min-height: 431px;
}

footer {
    border-top: 1px solid var(--line);
    padding: 41px 0 30px;
}

.fc {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    font-size: 14px;
}

.fc b {
    display: block;
    margin-bottom: 8px;
    font-weight: 400;
    color: var(--fg2);
}

.fc a { display: block; margin-bottom: 6px; }
.fc a:hover { opacity: .6; }

.cp {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    color: var(--fg2);
    font-size: 13px;
    flex-wrap: wrap;
    gap: 10px;
}

/* ==========================================================================
   АДАПТИВНОСТЬ (МЕДИА-ЗАПРОСЫ)
   ========================================================================== */
@media (max-width: 1100px) {
    :root { --pad: 32px; }
    .pg, .faq, .ct, .sw { grid-template-columns: 1fr; gap: 32px; }
    .pg .ph { height: 420px; }
    .works, .team { grid-template-columns: repeat(2, 1fr); }
    .step { grid-template-columns: 70px 1fr; }
    .step p, .step .mt { grid-column: 2; text-align: left; }
    .hr .d { display: none; }

	.works .rv.in {
		flex: 0 1 calc(50% - 8px);
	}
}

@media (max-width: 900px) {
    .svm { display: block; }
    nav.m, .hr { display: none; }
    .bg { display: block; }
    .stats #bx_incl_area_2_1 { grid-template-columns: 1fr 1fr; }
    .stat { padding: 22px 24px; border-bottom: 1px solid var(--line); }
    .g3, .cs, .two { grid-template-columns: 1fr; }
    .banks, .fc { grid-template-columns: 1fr 1fr; }
    .lead { text-align: left; }
}

@media (max-width: 600px) {
    .team, .works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .m .btn.s { width: 100%; }
    .step { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 24px 0; }
    .step .n { font-size: 44px; }
    .m h3 { font-size: 18px; }
    :root { --pad: 20px; }
    section { padding: 56px 0; }
    .svc { flex-direction: column; align-items: flex-start; gap: 12px; }
    .hd2 { flex-direction: column; align-items: flex-start; }
    .rt { text-align: left; }
    .works { gap: 10px; }
    .rev { width: 300px; }
    .row2 { padding: 0 22px; height: 72px; border-radius: 40px; }
    .row2 b { font-size: 20px; }
    .row2 span { display: none; }
    .banks, .fc, .ci { grid-template-columns: 1fr; }
    .hero .btns .btn, .hero .rate { flex: 1 1 100%; }
    .fl { display: none; }
}

@media (hover: none) {
    .fl { display: none; }
}

/* ==========================================================================
   ДОПОЛНИТЕЛЬНЫЕ ПРАВКИ РАЗМЕРОВ
   ========================================================================== */
@media (max-width: 900px) {
    section { padding: 56px 0; }
    h2 { font-size: clamp(34px, 7vw, 48px); }
    .svc { padding: 20px 0; gap: 12px; }
    .svc h3 { font-size: 28px; }
    .svc p { font-size: 14px; margin-top: 4px; }
    .svc .pr { font-size: 22px; }
    .svm { margin-bottom: 16px; }
    .g3 { grid-template-columns: 1fr 1fr; margin-top: 24px; }
    .rs { padding: 18px; }
    .rs h3 { font-size: 18px; }
    .rs p { font-size: 14px; }
    .pg { margin-top: 24px; gap: 24px; }
    .pg .ph { height: 300px; }
    .perks { gap: 10px; }
    .step { padding: 18px 0; gap: 14px; }
    .step .n { font-size: 48px; }
    .step h3 { font-size: 24px; }
    .works, .team { margin-top: 24px; }
    .row2 { margin-top: 24px; height: 72px; }
    .faq .ph { height: 300px !important; }
    .map { min-height: 300px; }
    .ct { margin-top: 24px; }
    footer { padding: 32px 0 20px; }
    .fc { gap: 20px; }
    .cs { margin-top: 24px; }
    .two { margin-top: 20px; }
    .vid { aspect-ratio: 16/9; }
}

@media (max-width: 900px) {
    .svc > div p { display: none; }
}

@media (max-width: 600px) {
    .pg .ph { height: 220px; }
    section { padding: 40px 0; }
    .svc { flex-direction: row; align-items: center; }
    .svc > div p { display: none; }
    .svc h3 { font-size: 24px; }
    .svc .pr { font-size: 18px; }
    .g3 { grid-template-columns: 1fr; }
    .rs { padding: 16px; }
    .rs p { font-size: 13px; }
    .faq .ph { height: 200px !important; }
    .fi h3 { font-size: 18px; padding: 16px 0; }
    .perk b { font-size: 22px; }
    .perks { grid-template-columns: 1fr 1fr; }
    .map { min-height: 240px; }
    .stat b { font-size: 24px; }
    .stat { padding: 18px 16px; }
    .c { padding: 18px; }
    .two > div { padding: 20px; }
    .fc { grid-template-columns: 1fr 1fr; }
    .hd2 .rt b { font-size: 34px; }
    .ph.vid { aspect-ratio: 16/10; }
}

/* ==========================================================================
   ДОПОЛНИТЕЛЬНЫЕ БЛОКИ И ЭЛЕМЕНТЫ
   ========================================================================== */
.pph { background-image: var(--d); height: 682px; }

.hero .bgp i {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: kb 16s linear infinite;
}

.hero .bgp i:first-child { animation-delay: -1s; }
.hero .bgp i + i { animation-delay: 7s; }

/* ==========================================================================
   АНИМАЦИИ И СПЕЦИАЛЬНЫЕ ЭФФЕКТЫ
   ========================================================================== */

/* Анимация масштабирования (Ken Burns) */
@keyframes kb {
    0% { opacity: 0; scale: 1; }
    6% { opacity: 1; scale: 1.016; }
    50% { opacity: 1; scale: 1.13; }
    56% { opacity: 0; scale: 1.15; }
    100% { opacity: 0; scale: 1.15; }
}

/* Появление картинок через clip-path */
.rv .ph {
    clip-path: inset(0 0 100% 0);
}

.rv.in .ph {
    clip-path: inset(0);
    transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1) .15s, transform .6s cubic-bezier(.2, .8, .2, 1);
}

/* ==========================================================================
   БЕГУЩАЯ СТРОКА
   ========================================================================== */
.band {
    overflow: hidden;
    border-top: 1px solid var(--line);
    padding: 16px 0;
    white-space: nowrap;
}

.band > div {
    display: flex;
    width: max-content;
    animation: mq 34s linear infinite;
    font: 400 28px/1 Oswald, sans-serif;
    text-transform: uppercase;
}

.mg {
    display: flex;
    flex: none;
    align-items: center;
    gap: 36px;
    padding-right: 36px;
}

.tr .mg {
    gap: 16px;
    padding-right: 16px;
}

.band span {
    opacity: .9;
}

.band i {
    font-style: normal;
    color: var(--fg2);
}

/* ==========================================================================
   ИНТЕРФЕЙС (ПРОГРЕСС-БАР, КУРСОР, СКРЫТИЕ ШАПКИ)
   ========================================================================== */
#pb {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
    z-index: 80;
}

header.hide:not(.sc) {
    transform: translateY(-100%);
}

header.hide {
    transform: translateY(-100%);
}

/* Кастомный курсор */
#cd {
    position: fixed;
    left: 0;
    top: 0;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border-radius: 50%;
    background: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
    z-index: 90;
    transition: width .3s, height .3s, margin .3s;
    will-change: transform;
}

#cd.big {
    width: 56px;
    height: 56px;
    margin: -28px 0 0 -28px;
}

@media (hover: none), (max-width: 900px) {
    #cd { display: none; }
}

@media (max-width: 600px) {
    .pph { height: auto; }
    .band > div { font-size: 20px; }
    .band .mg { gap: 24px; padding-right: 24px; }
}

/* ==========================================================================
   РАЗМЕРЫ ИЗ FIGMA (1440 / 768 / 390)
   ========================================================================== */
h2 {
    font-size: clamp(40px, 6vw, 86px);
    line-height: 1;
}

.hero h1 { font-size: 50px; line-height: 1.1; }
.lead { font-size: 16px; }

.stat b { font-size: 36px; }
.stat span { font-size: 14px; }

.svc { padding: 26px 0; }
.svc h3 { font-size: 56px; line-height: 1.1; }
.svc p { font-size: 16px; margin-top: 6px; }
.svc .pr { font: 600 34px/1 Oswald, sans-serif; }

.rs h3 { font-size: 24px; line-height: 1.05; }
.rs p { font-size: 14px; }

.chip { font-size: 16px; height: 42px; padding: 0 20px; }
.prow { font-size: 16px; }
.prow small { font-size: 13px; }
.prow b { font: 500 16px Inter, sans-serif; text-transform: none; }

.perk b { font-size: 26px; }
.perk span { font-size: 14px; }
.pg > div > p { font-size: 16px; }

.row2 b { font-size: 36px; line-height: 1.1; }
.row2 span { font-size: 14px; }
.row2 b:last-child { font: 600 40px Oswald, sans-serif; }

.step .n { font-size: 52px; }
.step h3 { font-size: 26px; }
.step p { font-size: 14px; }
.step .mt { font-size: 16px; font-weight: 500; }
.step .mt span { font-size: 13px; font-weight: 400; }

.facts { display: flex; gap: 56px; margin-top: 56px; }
.facts b { font: 400 26px/1 Oswald, sans-serif; text-transform: uppercase; display: block; }
.facts span { font-size: 13px; color: var(--fg2); }

.w p, .m p { font-size: 14px; }
.m .btn.s { width: auto; padding: 0 28px; font-size: 15px; }

.hd2 > p { font-size: 16px; }
.rt b { font: 400 58px/1 Oswald, sans-serif; }
.rt div { font-size: 18px; }
.rt small { font-size: 14px; }

.rev p { font-size: 16px; }
.rev div { font-size: 13px; }
.mq + .wrap .btn { font-size: 15px; font-weight: 500; }

.c h3 { font-size: 30px; }
.c .pr { font-size: 44px; }
.c li { font-size: 14px; }
.c .btn.s { width: auto; padding: 0 32px; font-size: 15px; }

.two h3 { font-size: 30px; }
.two p { font-size: 14px; }
.bk b { font: 500 16px Inter, sans-serif; }
.bk small { font-size: 13px; }

/* FAQ */
.fi h3 {
    font: 500 20px/1.5 Inter, system-ui, sans-serif;
    text-transform: none;
}
.fi h3 i { font: 600 28px/1 Oswald, sans-serif; }
.fi.is-open h3 i { transform: none; }
.fi h3 i::before { content: '+'; }
.fi.is-open h3 i::before { content: '\2212'; } /* Минус */
.fi div p { font-size: 16px; }

/* Контакты и футер */
.ci small { font-size: 12px; }
.ci { font-size: 15px; }
.ci small + * { font-size: 15px; }
.chips .chip { font-size: 13px; height: 36px; }

.fc { font-size: 14px; }
.fc b { font-weight: 500; color: var(--fg); }
.cp { font-size: 13px; }

/* ==========================================================================
   МЕДИА-ЗАПРОСЫ ДЛЯ РАЗМЕРОВ
   ========================================================================== */
@media (max-width: 900px) {
    h2 { font-size: 48px; }
    .hero h1 { font-size: 40px; }
    .lead { font-size: 15px; }
    .stat b { font-size: 36px; }
    .stat span { font-size: 13px; }
    .svc h3 { font-size: 36px; }
    .svc > div p { display: block !important; font-size: 13px; }
    .svc .pr { font-size: 20px; }
    .rs p { font-size: 13px; }
    .chip { font-size: 13px; height: 36px; }
    .prow { font-size: 15px; }
    .perk b { font-size: 30px; }
    .perk span { font-size: 12px; }
    .pg > div > p { font-size: 15px; }
    .row2 b { font-size: 28px; }
    .row2 b:last-child { font-size: 30px; }
    .step .n { font-size: 48px; }
    .step h3 { font-size: 24px; }
    .step p { font-size: 13px; }
    .facts b { font-size: 30px; }
    .w p, .m p { font-size: 12px; }
    .hd2 > p { font-size: 15px; }
    .rt b { font-size: 48px; }
    .rt div { font-size: 16px; }
    .rev p { font-size: 15px; }
    .rev div { font-size: 12px; }
    .c h3 { font-size: 24px; }
    .c .pr { font-size: 32px; }
    .c li { font-size: 13px; }
    .two h3 { font-size: 24px; }
    .two p { font-size: 13px; }
    .bk b { font-size: 15px; }
    .bk small { font-size: 12px; }
    .fi h3 { font-size: 18px; }
    .fi h3 i { font-size: 24px; }
    .fi div p { font-size: 13px; }
    .ci { font-size: 14px; }
    .fc { font-size: 13px; }
    .cp { font-size: 12px; }
    .seal { width: 96px; height: 96px; }
}

@media (max-width: 600px) {
    h2 { font-size: 36px; }
    .hero h1 { font-size: 30px; }
    .lead { font-size: 12px; }
    .stat b { font-size: 28px; }
    .stat span { font-size: 12px; }
    .svc h3 { font-size: 28px; }
    .svc > div p { font-size: 12px; }
    .svc .pr { font-size: 18px; }
    .svc { padding: 20px 0; }
    .rs p { font-size: 12px; }
    .perk b { font-size: 24px; }
    .pg > div > p { font-size: 13px; }
    .row2 b { font-size: 20px; }
    .step .n { font-size: 36px; }
    .step h3 { font-size: 24px; }
    .step p { font-size: 12px; }
    .facts { gap: 32px; margin-top: 32px; }
    .facts b { font-size: 30px; }
    .facts span { font-size: 10px; }
    .m .btn.s { font-size: 11px; padding: 0 14px; height: 34px; }
    .m p { font-size: 11px; }
    .rt b { font-size: 36px; }
    .rev p { font-size: 15px; }
    .rev div { font-size: 10px; }
    .c h3 { font-size: 20px; }
    .c .pr { font-size: 20px; }
    .two p { font-size: 12px; }
    .bk b { font-size: 15px; }
    .fi h3 { font-size: 16px; }
    .fi div p { font-size: 12px; }
    .ci small { font-size: 12px; }
    .ci { font-size: 13px; }
    .fc { font-size: 12px; }
    .seal {
        width: 76px;
        height: 76px;
        right: 14px;
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }
}

/* ==========================================================================
   ДЕКОРАТИВНЫЕ ЭЛЕМЕНТЫ, КНОПКИ И АНИМАЦИИ
   ========================================================================== */
.two .rv > p { max-width: 640px; }

.chip.acc, .chip.acc:hover, .chip.acc.on {
    background: var(--fg);
    color: #000;
    border-color: var(--fg);
    font-weight: 500;
}

.chip.acc {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}

.chip.acc:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(255, 255, 255, .18);
}

.row2 .ar {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    line-height: 0;
}

.row2 .ar svg {
    width: 30px;
    height: 30px;
    display: block;
    transition: transform .4s cubic-bezier(.2, .8, .2, 1);
}

.row2:hover .ar svg {
    transform: translate(3px, 3px);
}

.pg > .rv:last-child {
    display: flex;
    flex-direction: column;
}

/* Лиса (анимация) */
.fox {
    display: block;
    width: min(100%, 460px);
    margin: auto;
    padding: 24px 0;
    pointer-events: none;
    animation: fx 9s ease-in-out infinite;
}

@keyframes fx {
    50% { transform: translateY(-12px) rotate(2deg); }
}

@media (max-width: 1100px) {
    .fox { width: 260px; margin: 24px auto 0; }
}

@media (max-width: 600px) {
    .fox { width: 200px; }
    .row2 .ar svg { width: 22px; height: 22px; }
    .row2 .ar { width: 32px; height: 32px; }
}

/* ==========================================================================
   ШИРОКИЕ ЭКРАНЫ И ФИНАЛЬНЫЕ ПРАВКИ
   ========================================================================== */
@media (min-width: 1101px) {
    .wm { width: 60vw; }
    .pg { grid-template-columns: 35vw minmax(0, 1fr); }
    .pg .pph { height: auto; aspect-ratio: 500/682; }
    
    .hero .lead { margin-right: 130px; }
}

.facts {
    border-top: 1px solid #fff;
    padding-top: 24px;
    margin-top: 56px;
}

.cert {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: 24px;
    align-items: stretch;
}

.cert .ph {
    min-height: 200px;
    border-radius: 12px;
}

.fi h3 i {
    width: 44px;
    height: 44px;
    flex: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 24px;
    line-height: 1;
    transition: background .3s, border-color .3s;
}

.fi:hover h3 i {
    border-color: rgba(255, 255, 255, .4);
}

.ct > .rv:first-child {
    display: flex;
    flex-direction: column;
}

.fox2 {
    display: block;
    width: 200px;
    margin-top: auto;
    padding-top: 32px;
    align-self: flex-start;
    pointer-events: none;
}

.fc, .fc div, .fc a, .cp, .cp a { color: var(--fg2); }
.fc b { color: var(--fg); }
.fc a { transition: color .3s; }
.fc a:hover, .cp a:hover { color: var(--fg); opacity: 1; }
.cp a { text-underline-offset: 3px; }
.cp a:hover { text-decoration: underline; }

@media (max-width: 1100px) {
    .fox2 { margin-top: 32px; padding-top: 0; }
}

@media (max-width: 600px) {
    .cert { grid-template-columns: 1fr; }
    .cert .ph { min-height: 160px; }
    .fi h3 i { width: 36px; height: 36px; font-size: 20px; }
    .fox2 { width: 150px; }
}

@media (min-width: 601px) {
    .bk {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 16px;
        align-items: center;
    }
    .bk img { grid-row: 1/3; margin: 0; }
    .bk b, .bk small { grid-column: 2; }
}

.fox2 {
    margin: 28px 0 0;
    padding: 0;
    width: 190px;
}

.ct .chips { margin-top: 28px !important; }

/* Универсальный цвет для текстов */
.w p, .m p, .c li, .c ul, .svc p, .rs p, .perk span, .step p, .step .mt span, 
.facts span, .stat span, .prow small, .bk small, .two p, .fi div p, 
.rate, .lead, .hd2 > p, .ci small, .ph::after {
    color: var(--fg2);
}

.tr .mg { align-items: stretch; }
.rev { box-sizing: border-box; justify-content: space-between; }
.rev p { margin: 0; flex: 1 1 auto; }

.m h3 { font-size: 30px; line-height: 1.05; margin: 14px 0 0; }

@media (max-width: 900px) {
    .m h3 { font-size: 24px; }
}
@media (max-width: 600px) {
    .m h3 { font-size: 17px; margin-top: 10px; }
}

.logo img { width: 46px; }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .rv { opacity: 1; transform: none; }
    .wm span { transform: none; }
}

/* ==========================================================================
   HERO: ФОТО-СТЕНА С ЭФФЕКТОМ «ЖИВОЙ ФОТОГРАФИИ» (МЕДЛЕННЫЙ ДРЕЙФ)
   ========================================================================== */
.hero .bgp i.hw {
    inset: 0;
    opacity: 1;
    background-size: cover;
    background-position: 50% 8%;
    animation: hdrift 18s ease-in-out infinite;
    animation-delay: 0s;
    will-change: transform;
}

.hero .bgp::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .1);
}

@keyframes hdrift {
    0%, 100% {
        transform: translate3d(-1.2%, 1.6%, 0) scale(1) rotate(-.25deg);
    }
    50% {
        transform: translate3d(1.2%, -1.6%, 0) scale(1.04) rotate(.25deg);
    }
}

@media (max-width: 700px) {
    .hero .bgp i.hw {
        background-position: 50% 50%;
        animation-duration: 14s;
    }
}
/* End */
/* /bitrix/templates/main/template_styles.css?179253415938078 */