/* cyrillic */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/assets/f9094c96-cef8-417a-b6ec-9189922955ec.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/assets/e9c235a1-22fe-4cf1-924f-ff792d851fe1.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("/assets/82402077-96ea-41f4-8f0d-dfd577f41ed7.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/f9094c96-cef8-417a-b6ec-9189922955ec.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/e9c235a1-22fe-4cf1-924f-ff792d851fe1.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/82402077-96ea-41f4-8f0d-dfd577f41ed7.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/f9094c96-cef8-417a-b6ec-9189922955ec.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/e9c235a1-22fe-4cf1-924f-ff792d851fe1.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/82402077-96ea-41f4-8f0d-dfd577f41ed7.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/f9094c96-cef8-417a-b6ec-9189922955ec.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/e9c235a1-22fe-4cf1-924f-ff792d851fe1.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("/assets/82402077-96ea-41f4-8f0d-dfd577f41ed7.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/52da2f73-7ae9-48bf-8b61-ff4b1d72206e.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/c822f2e1-3d3e-43b2-90fd-ea28e155101b.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("/assets/9b31bfda-9e49-459b-91c5-836072022a77.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/52da2f73-7ae9-48bf-8b61-ff4b1d72206e.woff2") format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/c822f2e1-3d3e-43b2-90fd-ea28e155101b.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("/assets/9b31bfda-9e49-459b-91c5-836072022a77.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root{
--bg: #FAFAF8;
--bg-2: #F2F2EE;
--surface: #FFFFFF;
--line: rgba(20,20,20,0.09);
--line-strong: rgba(20,20,20,0.18);
--ink: #14140F;
--ink-2: #2A2A24;
--mute: #4A4A44;
--faint: #5E5D56;
--accent: #1C6FD3;
--accent-2: #4D9BFF;
--accent-soft: #E7F0FC;
--accent-ink: #0F3D78;
--hair: 1px;
--rad: 14px;
--rad-sm: 8px;
--ease: cubic-bezier(.2,.7,.2,1);
--font: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
--mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
[data-theme="dark"]{
--bg: #0C0C0A;
--bg-2: #131311;
--surface: #16161300;
--line: rgba(255,255,255,0.09);
--line-strong: rgba(255,255,255,0.18);
--ink: #F0EFE9;
--ink-2: #D7D6CF;
--mute: #B0AEA4;
--faint: #8E8D84;
--accent: #5AA4FF;
--accent-2: #7FB8FF;
--accent-soft: #142A4B;
--accent-ink: #B8D5FF;
}
*{ box-sizing: border-box; }
/* Атрибут hidden должен побеждать любые display-правила (гейт data-local-only) */
[hidden]{ display: none !important; }
html,body{ margin:0; padding:0; background: var(--bg); color: var(--ink); font-family: var(--font); font-weight: 400; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01","cv11"; }
body{ font-size: 15px; line-height: 1.55; }
a{ color: inherit; text-decoration: none; }
button{ font-family: var(--font); cursor: pointer; border: none; background: none; color: inherit; }
::selection{ background: var(--ink); color: var(--bg); }
/* ——— PAGE SWITCHER ——— */
.page{ display: none; animation: pageIn .35s var(--ease); }
.page.active{ display: block; }
@keyframes pageIn{
from{ opacity: 0; transform: translateY(6px); }
to{ opacity: 1; transform: translateY(0); }
}
nav.primary a{ position: relative; white-space: nowrap; flex-shrink: 0; }
nav.primary a.active{
background: var(--bg-2);
color: var(--ink);
}
nav.primary a.active::after{
content:""; position: absolute; left: 12px; right: 12px; bottom: 3px;
height: 1px; background: var(--ink);
}
/* First page gets no top padding (hero already has it) */
.page[data-page="home"] .section:first-of-type{ padding-top: 0; }
.page:not([data-page="home"]) > .wrap:first-child{ padding-top: 20px; }
/* ——— LAYOUT ——— */
.wrap{ max-width: 1360px; margin: 0 auto; padding: 0 40px; }
.hair{ height:1px; background: var(--line); width: 100%; }
.vhair{ width:1px; background: var(--line); align-self: stretch; }
/* ——— TOP BAR ——— */
.topbar{
position: sticky; top: 0; z-index: 50;
background: rgba(250, 250, 248, 0.72);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border-bottom: 1px solid rgba(20, 20, 15, 0.06);
}
[data-theme="dark"] .topbar{
background: rgba(20, 20, 15, 0.72);
border-bottom-color: rgba(240, 239, 233, 0.08);
}
@supports not (backdrop-filter: blur(14px)){
.topbar{ background: var(--bg); }
}
.topbar-inner{ display:flex; align-items:center; gap: 32px; height: 60px; }
.logo{ display:flex; align-items:center; gap:12px; font-weight:500; letter-spacing: -0.02em; font-size: 14.5px;}
.logo img{ height: 30px; width: auto; display: block; transition: filter .2s var(--ease);}
[data-theme="dark"] .logo img{ filter: invert(1) hue-rotate(180deg); }
.logo small{ color: var(--mute); font-weight: 400; letter-spacing: 0; font-family: var(--mono); font-size: 12px; padding-left: 12px; border-left: 1px solid var(--line); margin-left: 2px; white-space: nowrap;}
nav.primary{ display:flex; gap: 2px; margin-left: 16px;}
nav.primary a{
font-size: 13.5px; padding: 8px 10px; color: var(--ink-2);
border-radius: 6px; transition: background .2s var(--ease), color .2s var(--ease);
}
nav.primary a:hover{ background: var(--bg-2); color: var(--ink); }
nav.primary a.active{ color: var(--ink); }
.topbar-right{ margin-left:auto; display:flex; align-items:center; gap: 10px; flex-shrink: 0; }
.topbar-right .btn{ white-space: nowrap; }
.phones{ display:grid; grid-template-columns: auto 1fr; align-items:start; gap: 2px 6px;}
.phone-prefix{ grid-row: 1 / 3; font-family: var(--mono); font-size: 12px; color: var(--faint); padding-top: 1px;}
.phone{ font-family: var(--mono); font-size: 13px; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; transition: color .2s var(--ease);}
.phone:hover{ color: var(--accent); }
.phone span{ color: var(--faint); margin-right: 4px;}
.topbar-right .btn{ padding: 6px 12px; font-size: 12px;}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap: 8px;
min-height: 44px; padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 500;
border: 1px solid var(--line-strong);
transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn:hover{ border-color: var(--ink); }
.btn-primary{
background: var(--accent); color: #fff; border-color: var(--accent);
}
.btn-primary:hover{ background: var(--accent-ink); border-color: var(--accent-ink);}
[data-theme="dark"] .btn-primary{ color: #0B1626; }
[data-theme="dark"] .btn-primary:hover{ background: var(--accent-2); border-color: var(--accent-2); }
.btn-arrow{ width: 12px; height: 12px; display:inline-block; position:relative;}
.btn-arrow::before{
content:""; position:absolute; inset:0;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.theme-toggle{
width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--line-strong);
display: inline-grid; place-items: center; font-family: var(--mono); font-size: 12px;
transition: border-color .2s var(--ease);
}
.theme-toggle:hover{ border-color: var(--ink); }
.max-link{
display: inline-flex; align-items: center; gap: 7px;
padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-strong);
font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--ink-2);
transition: border-color .2s var(--ease), color .2s var(--ease);
}
.max-link:hover{ border-color: var(--accent); color: var(--ink); }
.max-link img{ width: 18px; height: 18px; display: block; border-radius: 5px; }
.mobile-call{
display: none; width: 38px; height: 38px; border-radius: 999px;
align-items: center; justify-content: center;
border: 1px solid var(--line-strong); color: var(--ink);
transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.mobile-call:hover{ border-color: var(--ink); background: var(--bg-2); }
/* ——— META STRIP ——— */
.metastrip{
display:flex; justify-content: space-between; align-items:center;
font-family: var(--mono); font-size: 12px; color: var(--mute);
padding: 10px 0; border-bottom: 1px solid var(--line); letter-spacing: 0.02em;
gap: 18px;
}
.metastrip span{ min-width: 0; }
.metastrip .dot{
display:inline-block; width:6px; height:6px; border-radius:999px;
margin: 0 7px 0 4px; vertical-align: 1px;
}
.metastrip .dot.online{
background: #3aaf5e;
box-shadow: 0 0 0 3px color-mix(in oklab, #3aaf5e 25%, transparent);
animation: dotPulse 2s ease-in-out infinite;
}
.metastrip .dot.offline{
background: #e74c3c;
box-shadow: 0 0 0 3px color-mix(in oklab, #e74c3c 25%, transparent);
animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse{
0%, 100%{ opacity: 1; }
50%{ opacity: 0.35; }
}
/* ——— HERO ——— */
.hero{ padding: 100px 0 60px; position: relative; overflow: hidden; }
/* Ambient-фон hero: mesh-градиент из холодных синих зон + диагональный луч + инженерная сетка */
.hero-glow{
position: absolute; inset: 0; pointer-events: none; z-index: 0;
/* Тонкая инженерная сетка, растворяющаяся к левому нижнему углу */
background-image:
linear-gradient(to right, rgba(28,111,211,.06) 1px, transparent 1px),
linear-gradient(to bottom, rgba(28,111,211,.06) 1px, transparent 1px);
background-size: 72px 72px;
-webkit-mask-image: radial-gradient(120% 90% at 72% 8%, #000 0%, transparent 68%);
mask-image: radial-gradient(120% 90% at 72% 8%, #000 0%, transparent 68%);
}
[data-theme="dark"] .hero-glow{
background-image:
linear-gradient(to right, rgba(90,164,255,.07) 1px, transparent 1px),
linear-gradient(to bottom, rgba(90,164,255,.07) 1px, transparent 1px);
}
/* Mesh: крупные перекрывающиеся холодные световые поля, медленно «дышат» */
.hero-glow::before{
content: ""; position: absolute; left: -25%; top: -40%; width: 150%; height: 150%;
background:
radial-gradient(52% 58% at 70% 24%, rgba(28,111,211,.16), transparent 72%),
radial-gradient(46% 52% at 92% 44%, rgba(77,155,255,.11), transparent 72%),
radial-gradient(40% 44% at 44% 12%, rgba(148,210,255,.10), transparent 72%),
radial-gradient(54% 56% at 14% 86%, rgba(96,165,250,.08), transparent 72%);
filter: blur(90px);
animation: heroMesh 26s ease-in-out infinite alternate;
}
/* Диагональная аврора-полоса — вытянутый холодный луч, а не «солнце» */
.hero-glow::after{
content: ""; position: absolute; left: 18%; top: -18%; width: 96%; height: 62%;
transform: rotate(-18deg);
background: linear-gradient(100deg,
transparent 8%,
rgba(120,190,255,.10) 34%,
rgba(28,111,211,.16) 56%,
rgba(140,215,255,.09) 78%,
transparent 96%);
filter: blur(80px);
animation: heroBeam 19s ease-in-out infinite;
}
[data-theme="dark"] .hero-glow::before{
background:
radial-gradient(52% 58% at 70% 24%, rgba(90,164,255,.18), transparent 72%),
radial-gradient(46% 52% at 92% 44%, rgba(127,184,255,.11), transparent 72%),
radial-gradient(40% 44% at 44% 12%, rgba(160,220,255,.09), transparent 72%),
radial-gradient(54% 56% at 14% 86%, rgba(90,164,255,.08), transparent 72%);
}
[data-theme="dark"] .hero-glow::after{
background: linear-gradient(100deg,
transparent 8%,
rgba(127,184,255,.11) 34%,
rgba(90,164,255,.17) 56%,
rgba(170,225,255,.09) 78%,
transparent 96%);
}
@keyframes heroMesh{
0%{ transform: translate3d(0,0,0) scale(1); }
50%{ transform: translate3d(-2.5%, 2%, 0) scale(1.045); }
100%{ transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}
@keyframes heroBeam{
0%, 100%{ transform: rotate(-18deg) translate3d(0,0,0); opacity: .75; }
50%{ transform: rotate(-16.5deg) translate3d(-4%, 6%, 0); opacity: 1; }
}
.hero .wrap{ position: relative; z-index: 1; }
.hero-grid{ display: block; max-width: 1280px; }
.hero-main{ max-width: 1100px; }
.nr{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: 0.04em; text-transform: uppercase;
}
.hero .nr{ display:inline-flex; align-items:center; gap: 10px; margin-bottom: 26px; }
.display{
font-size: clamp(54px, 7.2vw, 112px);
line-height: 0.95;
letter-spacing: -0.045em;
font-weight: 400;
margin: 0 0 32px;
color: var(--ink);
}
.display em{
font-style: normal; color: var(--mute);
font-weight: 300;
}
.display .acc{
position: relative; display:inline-block;
}
.display .acc::after{
content:""; position: absolute; left: 0; right:0; bottom: 0.08em;
height: 8px; background: var(--accent); opacity: .55;
}
.display .acc{ color: var(--accent); }
.display a.acc{ text-decoration: none; cursor: pointer; transition: opacity .2s var(--ease); }
.display a.acc:hover{ opacity: .75; }
.hero-sub{
max-width: 560px; font-size: 18px; line-height: 1.5;
color: var(--ink-2); margin: 0 0 40px;
}
.hero-actions{ display:flex; gap: 12px; flex-wrap: wrap; margin-bottom: 64px;}
/* Статистика теперь горизонтальная — занимает всю ширину под текстом */
.hero-side{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line);
margin-top: 8px;
}
.stat{
padding: 24px 28px 4px 0;
border-top: 0;
position: relative;
}
.stat + .stat{ padding-left: 32px; }
.stat + .stat::before{
content: ""; position: absolute; left: 0; top: 24px; bottom: 4px;
width: 1px; background: var(--line);
}
.stat .num{ font-size: 44px; letter-spacing: -0.03em; font-weight: 400; line-height: 1;}
.stat .num sup{ font-size: 14px; color: var(--mute); font-family: var(--mono); vertical-align: top; margin-left: 4px;}
.stat .lbl{ font-family: var(--mono); font-size: 12px; color: var(--mute); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 10px;}
/* ——— BRANDS MARQUEE ——— */
.brands{
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 28px 0;
display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center;
}
.brands-label{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: 0.06em; text-transform: uppercase;}
.brands-marquee{
overflow: hidden;
mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.brands-track{
display: flex; width: max-content;
animation: brandsScroll 30s linear infinite;
}
.brands-marquee:hover .brands-track{ animation-play-state: paused; }
.brands-set{ display: flex; align-items: center; gap: 56px; padding-right: 56px; }
@keyframes brandsScroll{
from{ transform: translateX(0); }
to{ transform: translateX(-50%); }
}
.brand{
font-size: 18px; letter-spacing: -0.02em; color: var(--ink-2);
font-weight: 500; opacity: .7; transition: opacity .2s var(--ease);
white-space: nowrap;
}
.brand:hover{ opacity: 1; }
.brand.italic{ font-style: italic; font-weight: 400;}
/* ——— SECTION HEAD ——— */
.section{ padding: 120px 0;}
.shead{
display: grid; grid-template-columns: 80px 1fr 1fr; gap: 40px;
margin-bottom: 60px; align-items: end; padding-bottom: 28px;
border-bottom: 1px solid var(--line);
}
.shead .nr{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: 0.04em;}
.skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus{ position:static; width:auto; height:auto; padding:8px 16px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:var(--rad); z-index:9999; }
.req{ color: var(--accent); margin-left: 2px; }
.shead h1, .shead h2{
font-size: clamp(36px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -0.035em;
font-weight: 400; margin: 0;
}
.shead .sdesc{ font-size: 15px; color: var(--mute); max-width: 420px; justify-self: end;}
/* ——— CATALOG GRID ——— */
.cat-grid{
display: grid; grid-template-columns: repeat(3, 1fr);
border-top: 1px solid var(--line);
border-left: 1px solid var(--line);
}
.cat-cell{
grid-column: span 1;
padding: 32px 28px 28px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
min-height: 280px;
display: flex; flex-direction: column; justify-content: space-between;
position: relative; overflow: hidden;
transition: background .25s var(--ease);
}
.cat-cell:hover{ background: var(--bg-2); }
.cat-cell.feat{ grid-column: span 2; min-height: 360px; background: var(--bg-2);}
.cat-cell.feat-large{ grid-column: span 2; min-height: 360px; background: var(--accent); color: #fff;}
.cat-cell.cta{
background: var(--accent); color: #fff; cursor: pointer;
justify-content: center; text-align: center;
border-color: transparent; opacity: 1;
position: relative; overflow: hidden;
}
.cat-cell.cta::before{
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 100% at 80% 10%, rgba(255,255,255,0.12) 0%, transparent 60%);
pointer-events: none;
}
.cat-cell.cta:hover{ transform: translateY(-3px); }
.cat-cell.cta .tag{ color: rgba(255,255,255,0.6); font-size: 24px; }
.cat-cell.cta .cat-title{ color: #fff; font-size: 32px; }
.cat-cell.cta .cat-desc{ color: rgba(255,255,255,0.75); }
.cat-cell.feat-large .tag{ color: rgba(255,255,255,0.65);}
.cat-cell.feat-large .cat-title{ color: #fff; }
.cat-cell.feat-large .cat-desc{ color: rgba(255,255,255,0.75); max-width: 480px;}
.cat-top{ display:flex; justify-content: space-between; align-items: flex-start;}
.tag{ font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: 0.04em;}
.cat-title{ font-size: 28px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 400; margin: 0 0 8px;}
.cat-cell.feat .cat-title{ font-size: 40px;}
.cat-cell.feat-large .cat-title{ font-size: 44px;}
.cat-desc{
font-family: var(--font);
font-size: 13.5px;
line-height: 1.55;
color: var(--mute);
margin: 0;
max-width: 420px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cat-tags{
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 14px;
}
.cat-tags span{
border: 1px solid var(--line);
border-radius: 999px;
color: var(--faint);
font-family: var(--mono);
font-size: 12px;
line-height: 1;
padding: 7px 9px;
white-space: nowrap;
}
.cat-cell.feat-large .cat-tags span,
.cat-cell.cta .cat-tags span{
border-color: rgba(255,255,255,0.22);
color: rgba(255,255,255,0.72);
}
.cat-cell.has-cover{
color: #fff;
box-shadow: inset 0 0 0 4px var(--bg);
}
.cat-cover{
position: absolute; inset: 0; z-index: 0;
background-size: cover, cover;
background-position: center, center;
transition: transform .5s var(--ease);
}
.cat-cell.has-cover:hover .cat-cover{ transform: scale(1.08); }
.cat-cell.has-cover .cat-top,
.cat-cell.has-cover > div:last-child{ position: relative; z-index: 1; }
.cat-cell.has-cover .tag{ color: rgba(255,255,255,0.65); }
.cat-cell.has-cover .cat-title{ color: #fff; }
.cat-cell.has-cover .cat-desc{ color: rgba(255,255,255,0.75); }
.cat-cell.has-cover .cat-tags span{
border-color: rgba(255,255,255,0.3);
color: rgba(255,255,255,0.8);
background: rgba(20,20,15,0.35);
}
.cat-cell.has-cover:hover{ background-color: transparent; }
.cat-icon{
width: 64px; height: 64px; border: 1px solid var(--line-strong);
border-radius: 8px; position: relative; opacity: .7;
}
/* mini isometric-y icons built with CSS */
.ci-ac::before{ content:""; position:absolute; inset: 14px 10px auto 10px; height: 22px; border:1px solid currentColor; border-radius: 3px;}
.ci-ac::after{ content:""; position:absolute; left: 18px; right: 18px; bottom: 16px; height: 6px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;}
.ci-vent{ border-radius: 999px;}
.ci-vent::before{ content:""; position:absolute; inset: 18px; border-radius: 999px; border:1px solid currentColor;}
.ci-vent::after{ content:""; position:absolute; inset:26px; border-radius: 999px; background: currentColor;}
.ci-cold::before{ content:"*"; position:absolute; inset:0; display:grid; place-items:center; font-size: 30px; line-height: 1; color: currentColor; font-family: var(--mono);}
.ci-vrf{ display:grid; grid-template: repeat(3,1fr)/repeat(3,1fr); gap: 4px; padding: 10px;}
.ci-vrf > i{ background: currentColor; opacity: .4; border-radius: 2px;}
.ci-vrf > i:nth-child(5){ opacity: 1;}
.ci-chill::before{ content:""; position:absolute; inset: 10px; border: 1px solid currentColor; border-radius:4px;}
.ci-chill::after{ content:""; position:absolute; inset: 22px 14px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor;}
.ci-montazh::before{ content:"▲"; position:absolute; inset:0; display:grid; place-items:center; font-size: 22px; line-height:1; color:currentColor; font-family:var(--mono);}
.ci-proekt::before{ content:"⌂"; position:absolute; inset:0; display:grid; place-items:center; font-size: 28px; line-height:1; color:currentColor; font-family:var(--mono);}
.ci-servis::before{ content:"⊕"; position:absolute; inset:0; display:grid; place-items:center; font-size: 26px; line-height:1; color:currentColor; font-family:var(--mono);}
.ci-prec::before{ content:"◎"; position:absolute; inset:0; display:grid; place-items:center; font-size: 26px; line-height:1; color:currentColor; font-family:var(--mono);}
/* ——— QUIZ (подбор решения) ——— */
.quiz-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 8px;
}
.quiz-card{
display: flex; flex-direction: column;
padding: 28px 24px 24px;
border: 1px solid var(--line);
border-radius: var(--rad);
background: var(--surface);
text-decoration: none; color: inherit;
transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
cursor: pointer;
position: relative;
}
.quiz-card:hover{
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,.08);
border-color: var(--line-strong);
}
.quiz-card:active{ transform: translateY(0); }
.quiz-icon{ font-size: 32px; line-height: 1; margin-bottom: 14px; }
.quiz-card h3{
font-size: 20px; line-height: 1.15; letter-spacing: -0.02em;
font-weight: 500; margin: 0 0 8px;
}
.quiz-card p{
font-size: 13.5px; line-height: 1.5; color: var(--mute); margin: 0;
flex: 1 1 auto;
}
.quiz-arrow{
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; border-radius: 999px;
border: 1px solid var(--line); color: var(--mute);
font-size: 16px; margin-top: 18px;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.quiz-card:hover .quiz-arrow{
background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.quiz-card.quiz-card-muted{ background: var(--bg-2); }
.quiz-card.quiz-card-muted:hover{ background: var(--bg); }
@media (max-width: 900px){
.quiz-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
.quiz-grid{ grid-template-columns: 1fr; }
.quiz-card{ padding: 22px 18px 18px; }
}
/* ——— QUIZ DETAIL (пошаговый квиз) ——— */
.step-quiz{ max-width: 720px; margin: 0 auto; animation: stepFadeIn .35s ease-out both;
transition: opacity .16s ease-in, transform .16s ease-in; }
/* Плавное растворение старого шага перед подменой (класс вешает скрипт) */
.step-quiz.step-out{ opacity: 0; transform: translateY(-8px); pointer-events: none; }
@keyframes stepFadeIn{
from{ opacity: 0; transform: translateY(12px); }
to{ opacity: 1; transform: translateY(0); }
}
.step-quiz .step-progress{
font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .04em;
margin-bottom: 10px;
}
/* Фокус на вопрос переносится скриптом для скринридеров — рамка не нужна */
.step-quiz .step-question:focus{ outline: none; }
/* Полоса прогресса подбора */
.step-quiz .step-bar{
height: 3px; background: var(--line); border-radius: 999px;
overflow: hidden; margin: 0 0 22px;
}
.step-quiz .step-bar i{
display: block; height: 100%;
background: var(--accent); border-radius: 999px;
transition: width .35s var(--ease);
}
.step-quiz .step-question{
font-size: clamp(28px, 3.5vw, 44px); line-height: 1.05; letter-spacing: -0.03em;
font-weight: 400; margin: 0 0 8px;
}
.step-quiz .step-hint{
font-size: 15px; line-height: 1.45; color: var(--mute); margin: 0 0 28px;
}
.step-options{
display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.step-option{
display: flex; align-items: center; justify-content: space-between;
padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--rad);
background: var(--surface); color: var(--ink); font-size: 16px;
cursor: pointer; transition: all .2s var(--ease); text-align: left;
-webkit-tap-highlight-color: transparent;
}
.step-option:hover{ border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.step-option:active{ transform: translateY(0); }
.step-option.selected{ border-color: var(--accent); background: rgba(28,111,211,.08); color: var(--accent); }
[data-theme="dark"] .step-option.selected{ background: rgba(90,164,255,.12); }
.step-option::after{ content: ""; }
.step-text-wrap{ display:flex; flex-direction:column; gap: 16px; }
.step-input{
width: 100%; padding: 18px 20px; font-size: 16px; line-height: 1.4;
border: 1px solid var(--line); border-radius: var(--rad); background: var(--surface); color: var(--ink);
outline: none; transition: border-color .2s, box-shadow .2s;
}
.step-input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(28,111,211,.12); }
.step-next-btn{
align-self: flex-start; display:inline-flex; align-items:center; gap: 8px;
padding: 14px 24px; border-radius: 999px; font-size: 14px; font-weight: 500;
background: var(--accent); color: #fff; border: none; cursor: pointer;
}
.step-next-btn:hover{ background: var(--accent-ink); }
[data-theme="dark"] .step-next-btn{ color: #0B1626; }
[data-theme="dark"] .step-next-btn:hover{ background: var(--accent-2); }
.step-back-btn{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 12px; color: var(--mute);
background: none; border: none; cursor: pointer; margin-top: 28px;
transition: color .2s ease;
}
.step-back-btn:hover{ color: var(--ink); }
.step-back-btn::before{ content: "←"; font-size: 14px; }
.step-contact{ max-width: 480px; }
.step-contact .field{ margin-bottom: 18px; }
.step-contact .field label{ display: block; font-size: 12px; color: var(--mute); font-family: var(--mono); letter-spacing: .02em; margin-bottom: 6px; }
.step-contact .field input,
.step-contact .field textarea{
width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
background: var(--surface); color: var(--ink); font-size: 15px; outline: none; transition: border-color .2s ease;
}
.step-contact .field input:focus,
.step-contact .field textarea:focus{ border-color: var(--ink); }
.step-contact .field textarea{ min-height: 90px; resize: vertical; }
.step-contact .field-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.quiz-form-feedback{ display: none; padding: 14px 16px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; }
.quiz-form-feedback.ok{ display: block; background: #e8f5e9; color: #2e7d32; border: 1px solid #c8e6c9; }
.quiz-form-feedback.err{ display: block; background: #ffebee; color: #c62828; border: 1px solid #ffcdd2; }
[data-theme="dark"] .quiz-form-feedback.ok{ background: #1b3a1c; color: #a5d6a7; border-color: #2e5c30; }
[data-theme="dark"] .quiz-form-feedback.err{ background: #3a1b1b; color: #ef9a9a; border-color: #5c2e2e; }
/* ——— QUIZ BANNER ——— */
.quiz-banner{
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 14px 18px; border-radius: var(--rad); margin-bottom: 20px;
background: var(--accent); color: #fff; font-size: 14px; line-height: 1.4;
}
.quiz-banner button{ background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; opacity: .7; padding: 0; line-height: 1; }
.quiz-banner button:hover{ opacity: 1; }
.quiz-banner.hiding{
animation: bannerFadeOut .6s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes bannerFadeOut{
0%{ opacity: 1; transform: translateY(0); max-height: 80px; margin-bottom: 20px; }
50%{ opacity: 0; transform: translateY(-8px); }
100%{ opacity: 0; transform: translateY(-16px); max-height: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }
}
/* Пульсация CTA «Оставить заявку», пока сохранены ответы квиза */
@keyframes quizCtaPulse{
0%{ box-shadow: 0 0 0 0 rgba(28,111,211,.5); transform: scale(1); }
50%{ transform: scale(1.03); }
70%{ box-shadow: 0 0 0 14px rgba(28,111,211,0); }
100%{ box-shadow: 0 0 0 0 rgba(28,111,211,0); transform: scale(1); }
}
[data-theme="dark"] .page.quiz-active [data-sd-cta]{ animation-name: quizCtaPulseDark; }
@keyframes quizCtaPulseDark{
0%{ box-shadow: 0 0 0 0 rgba(90,164,255,.55); transform: scale(1); }
50%{ transform: scale(1.03); }
70%{ box-shadow: 0 0 0 14px rgba(90,164,255,0); }
100%{ box-shadow: 0 0 0 0 rgba(90,164,255,0); transform: scale(1); }
}
.page.quiz-active [data-sd-cta]{ animation: quizCtaPulse 1.6s var(--ease) 3; }
@media (prefers-reduced-motion: reduce){
.page.quiz-active [data-sd-cta]{ animation: none; }
.step-quiz{ animation: none; transition: none; }
.hero-glow::before, .hero-glow::after{ animation: none; }
}
@media (max-width: 640px){
.quiz-banner{ font-size: 13px; padding: 12px 14px; }
}
@media (max-width: 640px){
.step-options{ grid-template-columns: 1fr; }
.step-contact .field-grid{ grid-template-columns: 1fr; }
}
/* ——— SERVICES ——— */
.services{
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 0; border-top: 1px solid var(--line);
}
.svc{
padding: 40px 32px 36px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
position: relative;
}
.svc:last-child{ border-right: none;}
.svc .nr{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: 0.04em;}
.svc h3{ font-size: 30px; letter-spacing: -0.025em; font-weight: 400; margin: 40px 0 14px; line-height: 1.08;}
.svc p{ color: var(--mute); margin: 0 0 22px; font-size: 14.5px;}
.svc ul{ list-style: none; padding:0; margin: 0; display:flex; flex-direction: column; gap: 10px;}
.svc li{ font-size: 13.5px; color: var(--ink-2); display: grid; grid-template-columns: 18px 1fr; align-items: baseline; gap: 8px;}
.svc li::before{ content:"→"; font-family: var(--mono); color: var(--faint); font-size: 12px;}
/* ——— PRODUCT PREVIEW ——— */
.product{
display: grid; grid-template-columns: 1.05fr 1fr; gap: 0;
border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden;
}
.product-media{
aspect-ratio: 5/4; position: relative; background: var(--bg-2);
border-right: 1px solid var(--line);
overflow: hidden;
}
.product-media::before{
content:""; position:absolute; inset:0;
background-image: repeating-linear-gradient( -45deg,
color-mix(in oklab, var(--ink) 5%, transparent) 0 1px,
transparent 1px 14px);
opacity: 0.4;
}
.product-media .crosshair{
position: absolute; font-family: var(--mono); font-size: 12px; color: var(--faint);
}
.ch-tl{ top: 16px; left: 16px;}
.ch-tr{ top: 16px; right: 16px;}
.ch-bl{ bottom: 16px; left: 16px;}
.ch-br{ bottom: 16px; right: 16px;}
.product-media .device{
position: absolute; inset: 18% 22%;
border: 1px solid var(--line-strong);
border-radius: 10px;
background: var(--surface);
box-shadow: 0 30px 60px -30px rgba(0,0,0,.15);
display: grid; grid-template-rows: auto 1fr auto; padding: 14px;
gap: 12px;
}
[data-theme="dark"] .product-media .device{ background: #1A1A17;}
.device-head{ display:flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em;}
.device-body{ border:1px dashed var(--line-strong); border-radius: 6px; display:grid; place-items:center; font-family: var(--mono); color: var(--faint); font-size: 12px;}
.device-foot{ display:flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--mute);}
.product-info{ padding: 40px 36px; display: flex; flex-direction: column; justify-content: space-between; background: var(--surface); }
[data-theme="dark"] .product-info{ background: #111110;}
.product-info .tag{ margin-bottom: 14px;}
.product-info h3{ font-size: 44px; line-height: 1; letter-spacing: -0.03em; font-weight: 400; margin: 0 0 12px;}
.product-info .subtitle{ color: var(--mute); font-size: 15px; margin: 0 0 24px;}
.specs{ display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-bottom: 28px;}
.spec{ background: var(--surface); padding: 14px 16px;}
[data-theme="dark"] .spec{ background: #111110;}
.spec .k{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em; text-transform: uppercase;}
.spec .v{ font-size: 20px; letter-spacing: -0.02em; margin-top: 6px;}
.spec .v sup{ font-size: 12px; color: var(--mute); font-family: var(--mono);}
.product-foot{ display:flex; justify-content: space-between; align-items: center; gap: 12px;}
.price{ font-family: var(--mono); font-size: 12px; color: var(--faint);}
.price strong{ display:block; font-family: var(--font); font-size: 22px; color: var(--ink); letter-spacing: -0.02em; font-weight: 500; margin-top: 4px;}
/* ——— PROJECTS ——— */
.projects{
display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px;
}
.proj{
position: relative; overflow: hidden;
border-radius: var(--rad); border: 1px solid var(--line);
background: var(--bg-2);
aspect-ratio: 4/3; padding: 22px; display:flex; flex-direction: column; justify-content: space-between;
}
.proj-cover{
position: absolute; inset: 0; z-index: 0;
background-image:
linear-gradient(to bottom, rgba(16,16,12,0.60) 0%, rgba(16,16,12,0.24) 22%, rgba(16,16,12,0) 42%),
linear-gradient(to top, rgba(16,16,12,0.96) 0%, rgba(16,16,12,0.82) 32%, rgba(16,16,12,0.35) 62%, rgba(16,16,12,0.15) 100%),
var(--proj-image);
background-size: cover, cover, cover;
background-position: center, center, center;
background-repeat: no-repeat;
transition: transform .5s var(--ease);
}
.proj-cover--contain{
padding: 10px;
background-size: cover, cover, contain;
background-origin: border-box, border-box, content-box;
background-clip: border-box, border-box, content-box;
}
.proj:hover .proj-cover{ transform: scale(1.08); }
.proj:hover .proj-cover--contain{ transform: none; }
.proj.p1{ grid-column: span 7; aspect-ratio: 16/9;}
.proj.p2{ grid-column: span 5; aspect-ratio: 16/9;}
.proj.p3{ grid-column: span 4;}
.proj.p4{ grid-column: span 4;}
.proj.p5{ grid-column: span 4;}
.proj::before{
content:""; position:absolute; inset: 0;
background-image:
linear-gradient( to right, var(--line) 1px, transparent 1px),
linear-gradient( to bottom, var(--line) 1px, transparent 1px);
background-size: 48px 48px;
opacity: 0.35;
pointer-events: none;
}
.proj::after{
content:""; position:absolute; inset:0; border-radius:inherit;
box-shadow: 0 24px 50px -28px rgba(0,0,0,.28);
opacity:0; transition: opacity .3s cubic-bezier(.2,.7,.2,1);
pointer-events:none; z-index:-1;
}
.proj:hover::after{ opacity:1; }
.proj-head{ display:flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em;}
.proj-body{ position:relative; z-index:1; }
.proj h4{ font-size: 22px; letter-spacing: -0.02em; font-weight: 400; margin: 0 0 6px; line-height: 1.15;}
.proj .meta{ font-size: 12px; color: var(--mute); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.proj.p1 h4{ font-size: 32px; max-width: 80%;}
/* ——— JOURNAL ——— */
.articles{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.article-card{
position: relative; overflow: hidden; display: flex; flex-direction: column;
border-radius: var(--rad); border: 1px solid var(--line);
background: var(--surface); cursor: pointer;
transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.article-card:hover{ border-color: var(--ink); transform: translateY(-2px); }
.article-card-cover{
aspect-ratio: 16/9; background-size: cover; background-position: center;
background-color: var(--bg-2); border-bottom: 1px solid var(--line);
}
.article-card-body{ padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.article-card-date{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em; text-transform: uppercase; }
.article-card h4{ font-size: 20px; letter-spacing: -0.02em; font-weight: 400; margin: 0; line-height: 1.2; }
.article-card .excerpt{ font-size: 13px; color: var(--mute); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; }
.article-card-more{ font-family: var(--mono); font-size: 12px; color: var(--accent); letter-spacing: .04em; margin-top: auto; padding-top: 8px; }
#articleDetailRoot .sd-title{ max-width: 900px; }
.article-body{ max-width: 680px; font-size: 16px; line-height: 1.7; color: var(--ink); }
.article-body h2{ font-size: 26px; letter-spacing: -0.02em; font-weight: 400; margin: 40px 0 16px; line-height: 1.25; }
.article-body h3{ font-size: 20px; letter-spacing: -0.01em; font-weight: 500; margin: 32px 0 12px; line-height: 1.3; }
.article-body p{ margin: 0 0 16px; }
.article-body ul, .article-body ol{ margin: 0 0 16px; padding-left: 24px; }
.article-body li{ margin-bottom: 8px; }
.article-body img{ max-width: 100%; border-radius: var(--rad-sm); }
.article-body table{ width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.article-body th, .article-body td{ border: 1px solid var(--line); padding: 10px 12px; text-align: left; }
.article-body th{ font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mute); font-weight: 400; }
.article-body blockquote{ margin: 0 0 16px; padding: 4px 0 4px 18px; border-left: 2px solid var(--accent); color: var(--mute); }
.article-cta{ margin-top: 48px; padding: 32px; border: 1px solid var(--line); border-radius: var(--rad); background: var(--bg-2); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
[data-theme="dark"] .article-cta{ border-color: rgba(255,255,255,0.22); }
.article-cta p{ margin: 0; font-size: 17px; max-width: 420px; line-height: 1.4; }
@media (max-width: 900px){
.articles{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
.articles{ grid-template-columns: 1fr; }
.article-cta{ padding: 24px; }
}
/* ——— ABOUT ——— */
.about{
display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
align-items: start;
}
.about-lead{
font-size: clamp(28px, 2.35vw, 34px); line-height: 1.2; letter-spacing: -0.025em; font-weight: 400; margin: 0 0 36px;
color: var(--ink);
}
.about-lead em{
display: block; margin-top: 24px; padding: 2px 0 2px 18px; border-left: 2px solid var(--accent);
font-size: clamp(19px, 1.55vw, 22px); line-height: 1.45; letter-spacing: -0.01em; font-style: normal; color: var(--mute);
}
.about-body{ margin-top: 48px; max-width: 640px; }
.about-tagline{ font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.45; border-left: 2px solid var(--accent); padding-left: 16px; margin: 0 0 28px; }
.about-features-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; counter-reset: about-feature; }
.about-feat{
counter-increment: about-feature; padding: 20px 20px 0 0; border-top: 1px solid var(--line-strong);
transition: border-color .2s var(--ease);
}
.about-feat::before{
content: "0" counter(about-feature); display: block; margin-bottom: 22px;
font-family: var(--mono); font-size: 12px; line-height: 1; color: var(--accent); letter-spacing: .08em;
}
.about-feat:hover{ border-color: var(--accent); }
.about-feat h5{ font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.015em; margin: 0 0 10px; color: var(--ink); }
.about-feat p{ font-size: 14px; line-height: 1.6; color: var(--mute); margin: 0; }
@media (max-width: 980px){ .about-features-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.about-mini{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top:1px solid var(--line-strong); border-bottom: 1px solid var(--line);}
.about-mini .cell{ min-width: 0; padding: 22px 18px 20px; }
.about-mini .cell:first-child{ padding-left: 0; }
.about-mini .cell + .cell{ border-left: 1px solid var(--line); }
.about-mini .num{ font-size: 34px; line-height: 1.15; letter-spacing: -0.03em; font-weight: 400; font-variant-numeric: tabular-nums; }
.about-mini .lbl{ margin-top: 8px; font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--mute); text-transform: uppercase; letter-spacing: .05em;}
.timeline{ position: relative; display:flex; flex-direction: column; }
.timeline::before{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--line-strong); }
.tl-row{
position: relative; display:grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px;
padding: 22px 0 22px 24px; border-bottom: 1px solid var(--line);
}
.tl-row::before{
content: ""; position: absolute; top: 29px; left: -3px; width: 7px; height: 7px;
border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--bg);
}
.tl-row:first-child{ border-top: 1px solid var(--line);}
.tl-year{ padding-top: 2px; font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--accent); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tl-content h5{ font-size: 18px; line-height: 1.35; margin: 0 0 6px; font-weight: 500; letter-spacing: -0.02em;}
.tl-content p{ margin: 0; color: var(--mute); font-size: 13.5px; line-height: 1.55; }
@media (max-width: 640px){
.about-features-grid{ grid-template-columns: 1fr; gap: 0; }
.about-feat{ display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; padding: 20px 0; }
.about-feat::before{ grid-row: 1 / 3; margin: 5px 0 0; }
.about-feat h5, .about-feat p{ grid-column: 2; }
.about-feat h5{ margin-bottom: 6px; }
.about-mini{ grid-template-columns: 1fr 1fr; }
.about-mini .cell{ padding: 18px 14px 18px 0; }
.about-mini .cell + .cell{ border-left: 0; }
.about-mini .cell:nth-child(even){ padding-left: 14px; }
.about-mini .cell:nth-child(odd){ border-right: 1px solid var(--line); }
.about-mini .cell:nth-child(n+3){ border-top: 1px solid var(--line); }
.about-mini .num{ font-size: 30px; }
.about-mini .lbl{ font-size: 10px; }
.tl-row{ grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 20px 0 20px 18px; }
.tl-row::before{ top: 27px; }
.tl-year{ font-size: 12px; }
.tl-content h5{ font-size: 17px; }
}
/* ——— FAQ ACCORDION ——— */
.faq{ display:flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{
list-style: none; cursor: pointer;
display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
padding: 22px 0; font-size: 18px; font-weight: 500; letter-spacing: -0.02em;
transition: color .2s var(--ease);
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary::after{
content: "+"; font-family: var(--mono); font-size: 20px; color: var(--mute);
transition: transform .2s var(--ease), color .2s var(--ease);
}
.faq-item[open] summary::after{ content: "−"; color: var(--ink); }
.faq-item summary:hover{ color: var(--accent); }
.faq-item p{
margin: 0; padding: 0 40px 0 0;
color: var(--mute); font-size: 14.5px; line-height: 1.55;
max-height: 0; opacity: 0; overflow: hidden;
transform: translateY(-6px);
transition: max-height .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity .35s ease .1s, transform .4s ease, padding .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.faq-item[open] p{
max-height: 160px; opacity: 1; padding-bottom: 22px; transform: translateY(0);
}
/* ——— CONTACT ——— */
.contact{
display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden;
}
.contact-left{ padding: 56px 48px; border-right: 1px solid var(--line); background: var(--surface);}
[data-theme="dark"] .contact-left{ background: #111110;}
.contact-left h3{ font-size: clamp(32px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 400; margin: 0 0 20px; text-wrap: balance;}
.contact-left p{ color: var(--mute); max-width: 420px; margin: 0 0 36px;}
.contact-rows{ display:flex; flex-direction: column; gap: 18px;}
.crow{ display:grid; grid-template-columns: 120px 1fr; gap: 20px; padding: 12px 0; border-top: 1px solid var(--line);}
.crow:last-child{ border-bottom: 1px solid var(--line);}
.crow .k{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em; text-transform: uppercase; padding-top: 4px;}
.crow .v{ font-size: 15px; color: var(--ink); line-height: 1.5;}
.crow .v small{ display:block; font-size: 12.5px; color: var(--mute); margin-top: 2px;}
.contact-map{ margin-top: 32px; border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden;}
.contact-map iframe{ display: block; width: 100%; height: 440px; border: 0;}
.contact-map .map-dark{ display: none;}
[data-theme="dark"] .contact-map .map-light{ display: none;}
[data-theme="dark"] .contact-map .map-dark{ display: block;}
.contact-right{
padding: 40px; display:flex; flex-direction: column; gap: 18px;
background: var(--bg-2);
}
.contact-right h4{ font-size: 20px; letter-spacing: -0.02em; font-weight: 500; margin: 0 0 8px;}
.contact-right p.small{ color: var(--mute); font-size: 13.5px; margin: 0 0 20px;}
.field{ display: grid; gap: 6px;}
.field label{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .06em; text-transform: uppercase;}
.field input, .field textarea, .field select{
background: var(--surface);
border: 1px solid var(--line); border-radius: 8px;
padding: 12px 14px; font-family: var(--font); font-size: 14px; color: var(--ink);
transition: border-color .18s var(--ease);
}
[data-theme="dark"] .field input,[data-theme="dark"] .field textarea{ background: #17171400;}
[data-theme="dark"] .field select{ background: #1a1a18; color: #f0efe9;}
[data-theme="dark"] .field option{ background: #1a1a18; color: #f0efe9;}
.field input:focus, .field textarea:focus, .field select:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px rgba(28,111,211,.12); }
.field input.field-error, .field textarea.field-error{ border-color: #c62828; background: #ffebee; }
[data-theme="dark"] .field input.field-error, [data-theme="dark"] .field textarea.field-error{ border-color: #ef9a9a; background: #3a1b1b; }
.field textarea{ resize: vertical; min-height: 80px;}
.field-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px;}
.lead-brief{
margin: 2px 0 4px;
padding: 16px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
}
[data-theme="dark"] .lead-brief{ background: #111110; }
.lead-brief-head{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-bottom: 12px;
width: 100%;
padding: 0;
border: 0;
background: none;
font: inherit;
text-align: left;
}
.lead-brief-body{ overflow: hidden; max-height: 600px; transition: max-height .3s var(--ease), visibility .3s var(--ease); }
.lead-brief-head span{
font-size: 15px;
font-weight: 500;
letter-spacing: -0.015em;
color: var(--ink);
}
.lead-brief-head small{
font-size: 12.5px;
color: var(--mute);
}
.lead-brief-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
}
.lead-brief.quiz-applied .lead-brief-grid{ grid-template-columns: 1fr; }
.lead-brief.quiz-applied .lead-choice[hidden]{ display: none; }
.lead-choice{
min-width: 0;
}
.lead-choice-title{
display: block;
font-family: var(--mono);
font-size: 12px;
color: var(--faint);
letter-spacing: .06em;
text-transform: uppercase;
margin-bottom: 7px;
}
.lead-choice-options{
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.lead-choice-options label{
cursor: pointer;
}
.lead-choice-options input{
position: absolute;
opacity: 0;
pointer-events: none;
}
.lead-choice-options span{
display: inline-flex;
align-items: center;
min-height: 34px;
padding: 8px 11px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg);
color: var(--ink-2);
font-size: 13px;
line-height: 1;
transition: border-color .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
}
.lead-choice-options input:checked + span{
background: var(--ink);
border-color: var(--ink);
color: var(--bg);
}
.lead-choice-options input:focus-visible + span{
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.lead-brief .field{ gap: 5px; }
.lead-brief .field{
min-width: 0;
}
.lead-brief .field label{
font-size: 12px;
color: var(--faint);
}
.lead-brief .field select{
width: 100%;
min-width: 0;
min-height: 42px;
padding: 10px 34px 10px 12px;
font-size: 13.5px;
border-radius: 8px;
background-color: var(--bg);
}
.submit-row{ display:flex; align-items:center; justify-content: space-between; margin-top: 4px;}
.consent-row{ margin: 12px 0 6px; }
.consent-label{ display: inline-flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.consent-label input[type="checkbox"]{
appearance: none; -webkit-appearance: none;
width: 16px; height: 16px; margin-top: 1px; flex-shrink: 0;
border: 1px solid var(--line-strong); border-radius: 4px;
background: var(--bg); cursor: pointer; position: relative;
transition: background .15s ease, border-color .15s ease;
}
.consent-label input[type="checkbox"]:checked{ background: var(--accent); border-color: var(--accent); }
.consent-label input[type="checkbox"]:checked::after{
content: ""; position: absolute; left: 4.5px; top: 1px;
width: 4px; height: 8px;
border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.consent-label input[type="checkbox"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.consent-label a{ color: var(--accent); text-decoration: underline; }
.consent-label a:hover{ color: var(--accent-ink); }
/* Cookie banner */
.cookie-banner{ position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 100; max-width: 920px; width: calc(100% - 32px); background: #fff; color: #14140F; border: 1px solid rgba(0,0,0,.12); border-radius: 16px; padding: 16px 20px; display: none; align-items: center; justify-content: space-between; gap: 16px; font-size: 13.5px; line-height: 1.45; box-shadow: 0 12px 40px rgba(0,0,0,.22); }
.cookie-banner.show{ display: flex; }
.cookie-banner p{ margin: 0; }
.cookie-banner a{ color: #1a5fb4; text-decoration: underline; }
.cookie-banner .cookie-actions{ display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.cookie-banner button{ min-height: 40px; padding: 10px 22px; border-radius: 999px; border: none; font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cookie-banner .cookie-accept{ background: #14140F; color: #fff; }
.cookie-banner .cookie-accept:hover{ opacity: .85; }
.cookie-banner .cookie-reject{ background: transparent; color: #14140F; border: 1px solid rgba(0,0,0,.2); }
.cookie-banner .cookie-reject:hover{ background: #f2f2ee; }
[data-theme="dark"] .cookie-banner{ background: #161613; color: var(--ink); border-color: var(--line-strong); box-shadow: 0 12px 40px rgba(0,0,0,.55); }
[data-theme="dark"] .cookie-banner a{ color: var(--accent); }
[data-theme="dark"] .cookie-banner .cookie-accept{ background: var(--ink); color: var(--bg); }
[data-theme="dark"] .cookie-banner .cookie-reject{ color: var(--ink); border-color: var(--line-strong); }
[data-theme="dark"] .cookie-banner .cookie-reject:hover{ background: var(--bg-2); }
@media (max-width: 720px){ .cookie-banner{ flex-direction: column; text-align: center; padding: 18px 20px; } .cookie-banner .cookie-actions{ width: 100%; justify-content: center; } }
.submit-row .hint{ font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .04em;}
/* Форма: feedback-состояния */
.form-feedback{
padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 16px;
animation: fadeIn .2s ease;
}
.form-feedback.success{ background: #eaf5e8; color: #2d6a22; border: 1px solid #c3e6bc; }
.form-feedback.error{ background: #fff0f0; color: #a02020; border: 1px solid #ffd0d0; }
.form-feedback.loading{ background: var(--bg-2); color: var(--mute); border: 1px solid var(--line); }
.form-success-state{
display: flex; flex-direction: column; align-items: center; gap: 12px;
text-align: center; padding: 48px 24px;
animation: successStateIn .45s cubic-bezier(.2,.8,.2,1) both;
}
.form-success-icon{
width: 56px; height: 56px; border-radius: 999px;
background: #3aaf5e; color: #fff;
display: grid; place-items: center;
position: relative;
box-shadow: 0 14px 30px -18px rgba(58,175,94,.8);
animation: successPop .55s cubic-bezier(.2,.9,.2,1.35) .08s both, successPulse 1.6s ease .6s both;
}
.form-success-icon::before{
content:"";
position:absolute;
inset:-6px;
border-radius:inherit;
border:1px solid rgba(58,175,94,.28);
animation: successRing .75s ease-out .12s both;
}
.success-check-svg{
width: 28px; height: 28px; color: #fff;
}
.success-check-path{
stroke-dasharray: 24;
stroke-dashoffset: 24;
animation: successCheckDraw .45s ease-out .45s forwards;
}
@keyframes successCheckDraw{
to{ stroke-dashoffset: 0; }
}
.form-success-state h4{ font-size: 22px; margin: 0; }
.form-success-state p{ color: var(--mute); font-size: 14px; margin: 0; max-width: 320px; }
@keyframes fadeIn{ from{ opacity:0; transform: translateY(-4px);} to{ opacity:1; transform: translateY(0);} }
@keyframes successStateIn{
from{ opacity:0; transform: translateY(10px); }
to{ opacity:1; transform: translateY(0); }
}
@keyframes successPop{
0%{ opacity:0; transform: scale(.72); }
70%{ opacity:1; transform: scale(1.08); }
100%{ opacity:1; transform: scale(1); }
}
@keyframes successRing{
from{ opacity:.8; transform: scale(.75); }
to{ opacity:0; transform: scale(1.45); }
}
@keyframes successPulse{
0%, 100%{ box-shadow: 0 14px 30px -18px rgba(58,175,94,.8); }
50%{ box-shadow: 0 18px 36px -16px rgba(58,175,94,.95); }
}
/* ——— FOOTER ——— */
footer{
border-top: 1px solid var(--line); padding: 60px 0 40px; margin-top: 40px;
}
.foot-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 80px;}
.foot-col h6{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .06em; text-transform: uppercase; margin: 0 0 16px; font-weight: 500;}
.foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 9px;}
.foot-col a{ color: var(--ink-2); font-size: 13.5px;}
.foot-col a:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px;}
.foot-col .foot-cta{ margin-top: 14px; padding: 14px 30px; font-size: 15px; min-height: 52px; }
.foot-max-btn{ margin-top: 20px; padding: 14px 16px; }
.foot-max-btn .mw-text strong{ font-size: 15px; white-space: nowrap; }
.foot-mark{ font-size: 20px; letter-spacing: -0.02em; margin-bottom: 16px; display:flex; align-items:center; gap: 10px;}
[data-theme="dark"] .foot-logo{ filter: invert(1) hue-rotate(180deg); }
.foot-desc{ color: var(--mute); font-size: 13.5px; max-width: 320px; margin: 0 0 22px;}
.foot-col .btn{ display: inline-flex; white-space: nowrap; overflow: visible; min-width: max-content; padding: 10px 20px; font-family: system-ui, -apple-system, sans-serif; border-radius: 40px; }
.foot-bottom{ display:flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); padding-top: 22px; font-family: var(--mono); font-size: 12px; color: var(--faint); letter-spacing: .04em;}
.foot-disclaimer{ margin: 0 0 18px; font-size: 12px; line-height: 1.6; color: var(--faint); max-width: 760px;}
.foot-disclaimer a{ color: inherit; text-decoration: underline;}
.foot-bottom .wordmark{
font-family: var(--font); font-size: clamp(60px, 14vw, 220px); letter-spacing: -0.05em;
font-weight: 300; line-height: 0.85; color: var(--ink);
padding: 0 0 0 0; white-space: nowrap; margin-top: -0.15em;
}
.foot-wordwrap{ overflow:hidden; padding: 20px 0 0; border-top: 1px solid var(--line); margin-bottom: 24px;}
/* ——— RESPONSIVE ——— */
/* Промежуточные ширины (ноутбуки с зумом): освобождаем место в шапке,
прячем EST. 2003 и текстовый телефон — вместо него иконка звонка.
На проде (6 вкладок) полная шапка влезает с 1240px.
Локально виден «Журнал» (7 вкладок) — там компактность держим до 1319px (body.local-extras). */
@media (min-width: 981px) and (max-width: 1239px){
.logo small{ display: none; }
.phones{ display: none; }
.topbar-right .mobile-call{ display: inline-flex; }
.max-link-label{ display: none; }
.max-link{ padding: 7px 9px; }
nav.primary{ gap: 0; margin-left: 8px; }
nav.primary a{ font-size: 12.5px; padding: 6px 8px; }
.topbar-right{ gap: 8px; }
}
@media (min-width: 1240px) and (max-width: 1319px){
body.local-extras .logo small{ display: none; }
body.local-extras .phones{ display: none; }
body.local-extras .topbar-right .mobile-call{ display: inline-flex; }
body.local-extras .max-link-label{ display: none; }
body.local-extras .max-link{ padding: 7px 9px; }
body.local-extras nav.primary{ gap: 0; margin-left: 8px; }
body.local-extras nav.primary a{ font-size: 12.5px; padding: 6px 8px; }
body.local-extras .topbar-right{ gap: 8px; }
}
/* Lazy images: blur→clear только на десктопе (filter дорог на мобильных) */
[data-bg] {
opacity: 0;
transition: opacity .5s var(--ease), filter .7s var(--ease);
will-change: opacity;
}
@media (min-width: 981px) {
[data-bg] {
filter: blur(4px) grayscale(30%);
will-change: opacity, filter;
}
.lazy-loaded { filter: blur(0) grayscale(0); }
}
.lazy-loaded { opacity: 1; }
/* Лёгкое containment — только style, без изоляции layout/paint */
.cat-cell, .proj, .cert-card {
contain: style;
}
@media (max-width: 980px){
html, body{ overflow-x: hidden; }
.wrap{ padding: 0 22px;}
.hero{ padding: 60px 0;}
.hero-side{ grid-template-columns: 1fr; }
.hero-side .stat{ padding: 20px 0 0; border-top: 1px solid var(--line); }
.hero-side .stat + .stat{ padding-left: 0; }
.hero-side .stat + .stat::before{ display: none; }
.hero-actions{ margin-bottom: 40px; }
.brands{ grid-template-columns: 1fr;}
.cat-grid{ grid-template-columns: 1fr; gap: 8px;}
.cat-cell, .cat-cell.feat, .cat-cell.feat-large, .cat-cell.cta{ grid-column: 1;}
.services{ grid-template-columns: 1fr;}
.svc{ border-right: none;}
.product{ grid-template-columns: 1fr;}
.product-media{ border-right: none; border-bottom: 1px solid var(--line);}
.projects{ grid-template-columns: 1fr;}
/* На узких экранах фиксированный aspect-ratio обрезает текст — даём карточке расти по содержимому */
.proj.p1,.proj.p2,.proj.p3,.proj.p4,.proj.p5{ grid-column: 1; aspect-ratio: auto;}
.proj{ min-height: 240px;}
.about{ grid-template-columns: 1fr; gap: 40px;}
.reviews-grid{ grid-template-columns: 1fr; }
.shead{ grid-template-columns: 1fr; gap: 12px;}
.shead .sdesc{ justify-self: start;}
.contact{ grid-template-columns: 1fr;}
.contact-left{ border-right: none; border-bottom: none; padding: 40px 28px; order: 2;}
.contact-right{ order: 1; border-bottom: 1px solid var(--line);}
.foot-grid{ grid-template-columns: 1fr 1fr; gap: 28px;}
.phones, .phone{ display: none;}
/* Tablet/mobile: convert top-nav into a horizontally-scrolling chip row below the logo */
.topbar{
background: var(--bg);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 1px solid var(--line);
}
.topbar-inner{ height: auto; min-height: 60px; flex-wrap: wrap; row-gap: 10px; padding: 10px 0 0; }
.topbar-right{ margin-left: auto; }
nav.primary{
order: 3; flex-basis: 100%; margin: 0 -22px;
padding: 10px 22px 8px; gap: 4px;
overflow-x: auto; overflow-y: hidden;
background: var(--bg-2);
scrollbar-width: none;
scroll-snap-type: x proximity;
}
/* Fade справа — только если дальше есть скрытые пункты */
nav.primary.nav-has-more{
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
nav.primary::-webkit-scrollbar{ display: none; }
nav.primary a{
flex: 0 0 auto; font-size: 12px; padding: 5px 8px;
background: var(--bg);
border: 1px solid var(--line); border-radius: 999px;
white-space: nowrap;
}
nav.primary a.active{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
nav.primary a.active::after{ display: none; }
}
/* ——— ВИДЕО-ГАЛЕРЕЯ ——— */
.video-section{ margin: 32px 0; }
.video-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.video-grid.single{ grid-template-columns: 1fr; }
.video-card{ background: #000; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/9; max-height: 360px; }
.video-card video{ display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
/* ——— МОБИЛЬНАЯ ПЛАВАЮЩАЯ ПАНЕЛЬ ——— */
.mobile-fab-bar{ display: none; }
@media (max-width: 640px){
.mobile-fab-bar{
display: flex;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 60;
background: color-mix(in oklab, var(--bg) 88%, transparent);
backdrop-filter: blur(12px) saturate(1.2);
-webkit-backdrop-filter: blur(12px) saturate(1.2);
border-top: 1px solid var(--line);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-fab-btn{
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
min-height: 56px;
padding: 12px 6px 14px;
color: var(--mute);
text-decoration: none;
font-size: 12px;
font-family: var(--mono);
letter-spacing: .02em;
transition: color .2s ease, background .2s ease;
border: none; background: transparent; cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-fab-btn:active{ background: var(--bg-2); }
.mobile-fab-btn svg{ width: 24px; height: 24px; color: var(--ink); opacity: .7; }
.mobile-fab-btn.mobile-fab-primary svg{ color: var(--accent); opacity: 1; }
.mobile-fab-btn.mobile-fab-primary{ color: var(--accent); font-weight: 500; }
body{ padding-bottom: 72px; }
.sd-stats{ grid-template-columns: repeat(2, 1fr); }
.sd-steps{ grid-template-columns: 1fr; }
.sd-benefits{ grid-template-columns: 1fr; }
.sd-checklist{ grid-template-columns: 1fr; padding: 24px; gap: 12px; }
.sd-stat{ padding: 20px 18px; }
.sd-step{ padding: 20px 18px; }
.sd-benefit{ padding: 24px; }
}
@media (max-width: 560px){
.wrap{ padding: 0 18px; }
.topbar-right .btn-primary{ display: none; }
/* Трубку в шапке не показываем: звонок есть в нижней панели (fab-bar) */
.max-link{ padding: 7px 9px; }
.max-link-label{ display: none; }
.logo small{ display: none; }
.logo img{ height: 28px; }
nav.primary{
margin: 0 -18px;
padding: 6px 18px 4px;
gap: 4px;
background: transparent;
-webkit-overflow-scrolling: touch;
}
nav.primary a{
display: inline-flex;
align-items: center;
min-height: 44px;
font-size: 12px;
padding: 8px 7px;
background: transparent;
border: none;
border-radius: 0;
color: var(--ink-2);
}
nav.primary a.active{
background: transparent;
color: var(--ink);
box-shadow: inset 0 -2px 0 var(--ink);
}
.hero{ padding: 48px 0 56px; }
.metastrip{
display: grid;
grid-template-columns: 1fr;
gap: 4px;
font-size: 12px;
line-height: 1.45;
padding: 10px 0;
}
.metastrip > span{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.display{ font-size: clamp(44px, 14vw, 58px); }
.display .acc{ color: var(--accent); }
.display .acc::after{ display: none; }
.cta-row{ gap: 10px; }
.cta-row .btn{ flex: 1 1 160px; justify-content: center; padding: 12px 18px; font-size: 14px; }
footer{ padding: 36px 0 28px; }
.foot-grid{ grid-template-columns: 1fr 1fr; gap: 20px 18px; margin-bottom: 28px; }
.foot-col:first-child{ grid-column: 1 / -1; }
.foot-mark{ margin-bottom: 10px; }
.foot-mark img{ height: 28px; }
.foot-desc{ font-size: 12.5px; margin-bottom: 12px; max-width: none; }
.foot-col .btn{ padding: 8px 14px; font-size: 12px; min-height: 40px; }
.foot-col h6{ font-size: 12px; margin-bottom: 10px; }
.foot-col ul{ gap: 6px; }
.foot-col a{ font-size: 12.5px; }
.foot-wordwrap{ display: none; }
.foot-address, .foot-hours{ display: none; }
.foot-bottom{ flex-direction: column; gap: 6px; align-items: flex-start; padding-top: 16px; font-size: 12px; }
}
/* ——— Главная: услуги / проекты / CTA ——— */
.home-preview{ padding: 72px 0; }
.home-more{ display: flex; justify-content: flex-end; margin-top: 24px; }
.home-services .cat-cell{ min-height: 360px; }
.home-projects .proj{ grid-column: span 4; aspect-ratio: 4/3; }
.home-cta-section{ padding: 40px 0 96px; }
.home-cta{
display: flex; justify-content: space-between; align-items: center; gap: 24px;
border: 1px solid var(--line); border-radius: var(--rad);
background: var(--bg-2); padding: 40px;
}
.home-cta .nr{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em; }
.home-cta h2{ font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -0.03em; font-weight: 400; margin: 10px 0; }
.home-cta p{ color: var(--mute); margin: 0; max-width: 420px; }
.home-cta-actions{ display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
/* Читаемость карточек проектов: локальные затемнения сверху и снизу + тень у текста */
.proj.has-cover .proj-head{ position: relative; z-index: 1; color: rgba(255,255,255,0.78); text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
.proj.has-cover h4{ color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,0.65); }
.proj.has-cover .meta{ color: rgba(255,255,255,0.88); text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
.home-projects .meta{ -webkit-line-clamp: 2; }
/* Компактный cookie-баннер */
.cookie-banner{ max-width: 640px; padding: 12px 16px; gap: 12px; font-size: 12.5px; border-radius: 12px; }
.cookie-banner button{ min-height: 36px; padding: 8px 16px; font-size: 12.5px; }
/* «Короткий бриф» сворачивается на всех экранах (не только на мобильном) */
.lead-brief-head{ align-items: center; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lead-brief-head::after{ content: "+"; font-family: var(--mono); font-size: 18px; color: var(--mute); flex-shrink: 0; }
.lead-brief.brief-open .lead-brief-head::after{ content: "−"; color: var(--ink); }
.lead-brief:not(.brief-open) .lead-brief-head{ margin-bottom: 0; }
.lead-brief:not(.brief-open) .lead-brief-body{ max-height: 0; visibility: hidden; }
/* Кнопка мессенджера под формой — во всю ширину, заполняет пустоту правой колонки */
.messenger-wide{
display: flex;
align-items: center;
gap: 14px;
margin-top: 18px;
padding: 18px 20px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
color: var(--ink);
text-decoration: none;
transition: border-color .18s var(--ease), background .18s var(--ease);
}
.messenger-wide:hover{ border-color: var(--accent); }
.messenger-wide .mw-text{ display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.messenger-wide .mw-text strong{ font-size: 16px; font-weight: 500; }
.messenger-wide .mw-arrow{ margin-left: auto; color: var(--mute); transition: color .18s var(--ease), transform .18s var(--ease); }
.messenger-wide:hover .mw-arrow{ color: var(--accent); transform: translateX(3px); }
/* Форма: вертикальный ритм и читаемость */
.contact-right .form-body > * + *{ margin-top: 20px; }
.contact-right .field{ gap: 8px; }
.contact-right .field-grid{ column-gap: 12px; row-gap: 16px; }
.contact-right .field label{ font-size: 12.5px; color: var(--ink-2); }
.contact-right .field input::placeholder,
.contact-right .field textarea::placeholder{ color: var(--mute); opacity: .85; }
.contact-right .submit-row .hint{ font-size: 13px; color: var(--mute); }
@media (max-width: 980px){
.cat-cell, .cat-cell.feat, .cat-cell.feat-large{ min-height: 220px; }
.cat-cell.feat .cat-title, .cat-cell.feat-large .cat-title{ font-size: 30px; }
.home-preview{ padding: 56px 0; }
.home-cta{ flex-direction: column; align-items: flex-start; padding: 28px; }
}
@media (max-width: 640px){
.mobile-fab-btn{ min-height: 48px; padding: 8px 6px 10px; gap: 3px; font-size: 11px; }
.mobile-fab-btn svg{ width: 20px; height: 20px; }
body{ padding-bottom: 60px; }
body.form-focus .mobile-fab-bar{ display: none; }
/* На телефоне услуги уже доступны в меню и на отдельной странице */
footer .foot-col:nth-child(2){ display: none; }
/* Компактная главная на телефоне: статистика в одну строку, карточки — свайпом */
.hero-side{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-side .stat{ padding: 16px 10px 0 0; border-top: 0; }
.hero-side .stat + .stat{ padding-left: 12px; }
.hero-side .stat + .stat::before{ display: block; top: 16px; bottom: 0; }
.hero-side .stat .num{ font-size: clamp(24px, 7vw, 30px); }
.hero-side .stat .lbl{ margin-top: 8px; font-size: 9px; line-height: 1.45; letter-spacing: .03em; }
.hero-actions{ margin-bottom: 28px; }
.brands{ gap: 16px; padding: 20px 0; }
.home-preview{ padding: 40px 0; }
.home-preview .shead{ margin-bottom: 32px; padding-bottom: 20px; }
.home-services, .home-projects{
display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.home-services::-webkit-scrollbar, .home-projects::-webkit-scrollbar{ display: none; }
.home-services .cat-cell{
flex: 0 0 86%; min-height: 280px; scroll-snap-align: start;
}
.home-projects .proj{
flex: 0 0 86%; min-height: 240px; aspect-ratio: auto; scroll-snap-align: start;
}
/* Проекты: компактная сетка, описание доступно внутри карточки */
.page[data-page="projects"] .projects{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.page[data-page="projects"] .proj,
.page[data-page="projects"] .proj.p1,
.page[data-page="projects"] .proj.p2,
.page[data-page="projects"] .proj.p3,
.page[data-page="projects"] .proj.p4,
.page[data-page="projects"] .proj.p5{
grid-column: auto; min-height: 210px; aspect-ratio: auto; padding: 16px;
}
.page[data-page="projects"] .proj-head{ font-size: 10px; }
.page[data-page="projects"] .proj h4{ font-size: 18px; overflow-wrap: anywhere; }
.page[data-page="projects"] .proj .meta{ display: none; }
/* Процесс на странице проектов: три компактных этапа вместо больших карточек */
.page[data-page="projects"] .projects + .shead{
margin-top: 64px !important; margin-bottom: 32px; padding-bottom: 20px;
}
.page[data-page="projects"] .services .svc{
display: grid; grid-template-columns: 38px 1fr; column-gap: 12px; padding: 18px 0;
}
.page[data-page="projects"] .services .svc .nr{ grid-row: 1 / 3; }
.page[data-page="projects"] .services .svc h3{ margin: 0 0 6px; font-size: 20px; }
.page[data-page="projects"] .services .svc p{ margin: 0; font-size: 13px; }
/* Внутренняя услуга: этапы и преимущества без громоздких карточек */
.page[data-page="service-detail"] .sd-steps{ gap: 0; border-top: 1px solid var(--line); }
.page[data-page="service-detail"] .sd-step{
display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px;
padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent;
}
.page[data-page="service-detail"] .sd-step-num{ grid-row: 1 / 3; padding-top: 3px; color: var(--accent); }
.page[data-page="service-detail"] .sd-step h5{ grid-column: 2; margin: 0 0 6px; font-size: 16px; }
.page[data-page="service-detail"] .sd-step p{ grid-column: 2; margin: 0; font-size: 12.5px; line-height: 1.45; }
.page[data-page="service-detail"] .sd-benefits{ gap: 0; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.page[data-page="service-detail"] .sd-benefit{ padding: 18px 0; border-bottom: 1px solid var(--line); background: transparent; }
.page[data-page="service-detail"] .sd-benefit h5{ margin-bottom: 6px; font-size: 17px; }
.page[data-page="service-detail"] .sd-benefit p{ font-size: 13.5px; }
.page[data-page="service-detail"] .sd-final-big{ margin-top: 40px; padding: 28px 24px; gap: 20px; }
.page[data-page="service-detail"] .pd-section-head{ margin: 40px 0 16px; }
.page[data-page="service-detail"] .pd-section-head + .pd-desc{
margin-top: 0; padding-left: 12px; border-left: 2px solid var(--accent); font-size: 14px; line-height: 1.55;
}
.page[data-page="service-detail"] .sd-accordion{ margin-top: 20px; gap: 6px; }
.page[data-page="service-detail"] .sd-acc-header{ padding: 11px 12px; font-size: 14px; }
.page[data-page="service-detail"] .sd-acc-meta{ font-size: 11px; }
/* Сканы документов листаются свайпом, а не выстраиваются в длинную колонку */
.page[data-page="about"] .cert-grid, .page[data-page="about"] .letters-grid{
display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px;
}
.page[data-page="about"] .cert-grid::-webkit-scrollbar,
.page[data-page="about"] .letters-grid::-webkit-scrollbar{ display: none; }
.page[data-page="about"] .cert-grid .cert-card{ flex: 0 0 78%; scroll-snap-align: start; }
.page[data-page="about"] .letters-grid .letter-card{ flex: 0 0 82%; scroll-snap-align: start; }
}
@media (max-width: 560px){
.cat-cell, .cat-cell.feat, .cat-cell.feat-large{ min-height: 235px; padding: 22px 20px 20px; }
.cat-title{ font-size: 22px; }
.cat-cell.feat .cat-title, .cat-cell.feat-large .cat-title{ font-size: 26px; }
.cookie-banner{ padding: 12px 14px; font-size: 12px; }
}
/* Динамический контент — фото услуг */
.cat-photo{
width: 64px; height: 64px; border-radius: 8px;
background-size: cover; background-position: center;
border: 1px solid var(--line-strong);
}
/* Сетка оборудования удалена — раздел скрыт */
.eq-specs{
display:grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-top: 6px;
}
.eq-spec{ background: var(--surface); padding: 10px 12px; }
.eq-spec .k{ font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em; text-transform: uppercase; }
.eq-spec .v{ font-size: 15px; letter-spacing: -0.015em; margin-top: 4px; }
.eq-foot{
display:flex; justify-content: space-between; align-items: center;
margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); gap: 12px;
}
.eq-foot .price strong{ font-size: 16px; letter-spacing: -0.015em; }
.eq-foot .btn{ padding: 7px 14px; font-size: 12.5px; }
.eq-empty{
padding: 60px 40px; text-align:center;
border: 1px dashed var(--line-strong); border-radius: var(--rad);
background: var(--bg-2);
}
.eq-empty-title{ font-size: 18px; letter-spacing: -0.015em; margin-bottom: 6px; }
.eq-empty-sub{ color: var(--mute); font-size: 13.5px; max-width: 480px; margin: 0 auto; }
/* Сертификаты */
.cert-grid{
display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 20px;
}
.cert-card{
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: var(--rad);
background: var(--surface); overflow: hidden;
transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.cert-card:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.cert-img{
aspect-ratio: 3/4; background: var(--bg-2);
background-size: cover; background-position: center;
border-bottom: 1px solid var(--line);
cursor: zoom-in; position: relative;
}
.cert-img.no-image{
display: grid; place-items: center; color: var(--faint);
font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
background-image: repeating-linear-gradient(-45deg,
color-mix(in oklab, var(--ink) 4%, transparent) 0 1px,
transparent 1px 14px);
}
.cert-info{ padding: 18px 20px; display:flex; flex-direction:column; gap: 8px; flex: 1; }
.cert-issuer{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .06em; text-transform: uppercase;
}
.cert-title{
font-size: 16px; letter-spacing: -0.015em; font-weight: 400;
margin: 0; line-height: 1.25;
}
.cert-desc{ color: var(--mute); font-size: 13px; line-height: 1.5; margin: 0; }
.cert-year{
margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line);
font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em;
}
.cert-empty{
padding: 60px 40px; text-align:center;
border: 1px dashed var(--line-strong); border-radius: var(--rad);
background: var(--bg-2); color: var(--mute);
}
/* Отзывы */
.reviews-grid{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.review-card{
border: 1px solid var(--line); border-radius: var(--rad);
background: var(--surface); padding: 28px;
display: flex; flex-direction: column; gap: 24px;
transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.review-card:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.review-text{
margin: 0; font-size: 16px; line-height: 1.55;
color: var(--ink-2); flex: 1;
white-space: pre-wrap; word-wrap: break-word;
}
.review-author{
display: flex; align-items: center; gap: 14px;
margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line);
}
.review-avatar{
width: 44px; height: 44px; border-radius: 50%;
background: var(--accent); color: #fff;
display: grid; place-items: center;
font-size: 18px; font-weight: 500; flex-shrink: 0;
}
.review-name{ font-size: 15px; font-weight: 500; color: var(--ink); }
.review-company{ font-size: 13px; color: var(--mute); margin-top: 2px; }
.review-role{ font-size: 12px; color: var(--faint); margin-top: 2px; }
.reviews-empty{
padding: 60px 40px; text-align:center;
border: 1px dashed var(--line-strong); border-radius: var(--rad);
background: var(--bg-2); color: var(--mute);
}
/* Благодарственные письма */
.letters-grid{
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.letter-card{
display: flex; flex-direction: column;
border: 1px solid var(--line); border-radius: var(--rad);
background: var(--surface); overflow: hidden;
transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.letter-card:hover{ border-color: var(--line-strong); transform: translateY(-2px); }
.letter-img{
aspect-ratio: 4/3; background: var(--bg-2);
background-size: cover; background-position: center;
border-bottom: 1px solid var(--line);
cursor: zoom-in; position: relative;
}
.letter-img.no-image{
display: grid; place-items: center; color: var(--faint);
font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
background-image: repeating-linear-gradient(-45deg,
color-mix(in oklab, var(--ink) 4%, transparent) 0 1px,
transparent 1px 14px);
}
.letter-info{ padding: 18px 20px; display:flex; flex-direction:column; gap: 6px; flex: 1; }
.letter-title{ font-size: 16px; letter-spacing: -0.015em; font-weight: 400; margin: 0; line-height: 1.25; }
.letter-from{ font-size: 13px; color: var(--mute); }
.letter-year{
margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line);
font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .04em;
}
.letters-empty{
padding: 60px 40px; text-align:center;
border: 1px dashed var(--line-strong); border-radius: var(--rad);
background: var(--bg-2); color: var(--mute);
}
.letter-card--extra{ display: none; }
.letters-grid--expanded .letter-card--extra{ display: flex; }
.letters-more-btn{
display: block; margin: 28px auto 0;
padding: 12px 28px; font: inherit; font-size: 14px; letter-spacing: .04em;
color: var(--ink); background: transparent;
border: 1px solid var(--line-strong); border-radius: 999px;
cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease);
}
.letters-more-btn:hover{ border-color: var(--ink); }
/* ——— ДЕТАЛЬНАЯ СТРАНИЦА УСЛУГИ ——— */
.sd-back{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .08em; text-transform: uppercase;
padding: 12px 0; cursor: pointer; background: none; border: 0;
transition: color .2s var(--ease);
}
.sd-back:hover{ color: var(--ink); }
.sd-back::before{ content: "←"; font-size: 14px; }
.breadcrumbs{
display: flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .04em; margin-bottom: 4px;
}
.breadcrumbs a{ color: var(--mute); transition: color .2s; padding: 10px 0; margin: -10px 0; }
.breadcrumbs a:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumbs span{ color: var(--faint); }
.breadcrumbs span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* Без фото: классический двухколоночный блок */
.sd-hero{
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border: 1px solid var(--line); border-radius: var(--rad);
overflow: hidden; background: var(--surface);
margin-top: 12px; position: relative;
}
.sd-hero-text{
padding: 56px 48px; display: flex; flex-direction: column; gap: 24px;
border-right: 1px solid var(--line); min-height: 480px;
position: relative; z-index: 2;
}
.sd-tag{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .08em; text-transform: uppercase;
}
.sd-title{
font-size: clamp(36px, 5vw, 64px); letter-spacing: -0.03em;
font-weight: 400; margin: 0; line-height: 1.02; color: var(--ink);
}
.sd-lead{
color: var(--ink-2); font-size: 17px; line-height: 1.55;
margin: 0; max-width: 540px;
}
.sd-cta-row{
margin-top: auto; display: flex; gap: 12px; flex-wrap: wrap;
padding-top: 24px; border-top: 1px solid var(--line);
}
.sd-price-badge{
margin-top: 14px; font-size: 18px; font-weight: 500;
color: var(--accent); letter-spacing: -0.01em;
}
.sd-hero.has-cover .sd-price-badge{ color: #fff; opacity: .9; }
.sd-media{
background: var(--bg-2); background-size: cover; background-position: center;
position: relative; min-height: 480px;
}
.sd-media::before{
content: ""; position: absolute; inset: 0;
background-image: repeating-linear-gradient(-45deg,
color-mix(in oklab, var(--ink) 5%, transparent) 0 1px,
transparent 1px 16px);
}
.sd-media.has-image::before{ display: none; }
.sd-media .crosshair{
position: absolute; font-family: var(--mono); font-size: 12px;
color: var(--faint); letter-spacing: .04em;
}
.sd-media .ch-tl{ top: 16px; left: 16px; }
.sd-media .ch-tr{ top: 16px; right: 16px; }
.sd-media .ch-bl{ bottom: 16px; left: 16px; }
.sd-media .ch-br{ bottom: 16px; right: 16px; }
.sd-media.has-image .crosshair{ color: rgba(255,255,255,.7); }
/* С фото: единый блок с фотографией на фоне и затемнением */
.sd-hero.has-cover{
grid-template-columns: 1fr;
background: #14140F;
border-color: transparent;
min-height: 520px;
background-size: cover; background-position: center;
}
.sd-hero.has-cover::before{
content: ""; position: absolute; inset: 0;
background: linear-gradient(135deg,
rgba(20,20,15,0.88) 0%,
rgba(20,20,15,0.68) 60%,
rgba(20,20,15,0.5) 100%);
z-index: 1;
}
.sd-hero.has-cover .sd-hero-text{
border-right: 0; min-height: 520px;
color: #fff; padding: 64px 56px;
}
.sd-hero.has-cover .sd-tag{ color: rgba(255,255,255,0.7); }
.sd-hero.has-cover .sd-title{ color: #fff; }
.sd-hero.has-cover .sd-lead{ color: rgba(255,255,255,0.85); }
.sd-hero.has-cover .sd-cta-row{
border-top-color: rgba(255,255,255,0.18);
}
.sd-hero.has-cover .btn-ghost{
color: #fff; border-color: rgba(255,255,255,0.45);
background: rgba(20,20,15,0.35);
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.sd-hero.has-cover .btn-ghost:hover{
background: rgba(20,20,15,0.5); border-color: rgba(255,255,255,0.6);
}
.sd-hero.has-cover .sd-media{ display: none; }
.sd-grid{
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--line); border: 1px solid var(--line);
border-radius: var(--rad); overflow: hidden; margin-top: 32px;
}
.sd-block{ background: var(--surface); padding: 32px 36px; }
.sd-block .nr{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .08em; text-transform: uppercase; margin-bottom: 12px;
}
.sd-block h4{
font-size: 22px; letter-spacing: -0.02em; font-weight: 400;
margin: 0 0 16px; line-height: 1.15;
}
.sd-points{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sd-points li{
font-size: 14.5px; color: var(--ink-2); line-height: 1.5;
display: grid; grid-template-columns: 22px 1fr; align-items: baseline; gap: 8px;
}
.sd-points li::before{
content: "→"; font-family: var(--mono); color: var(--faint); font-size: 12px;
}
.sd-block p{ color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin: 0; }
.sd-final{
margin-top: 32px; padding: 48px;
border: 1px solid var(--line); border-radius: var(--rad);
background: var(--surface);
display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center;
}
.sd-final h4{
font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -0.02em;
font-weight: 400; margin: 0 0 8px; line-height: 1.1;
}
.sd-final p{ color: var(--mute); font-size: 14px; margin: 0; }
@media (max-width: 880px){
.sd-hero{ grid-template-columns: 1fr; }
.sd-hero-text,
.sd-hero.has-cover .sd-hero-text{
padding: 36px 28px; border-right: 0;
border-bottom: 1px solid var(--line); min-height: 0;
}
.sd-media{ min-height: 280px; }
.sd-grid{ grid-template-columns: 1fr; }
.sd-block{ padding: 28px 24px; }
.sd-final{ grid-template-columns: 1fr; padding: 32px 28px; text-align: left; }
}
/* ——— ДОПОЛНИТЕЛЬНЫЕ БЛОКИ СТРАНИЦЫ УСЛУГИ ——— */
/* Полоса со статистикой */
.sd-stats{
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line);
border-radius: var(--rad); overflow: hidden;
margin-top: 32px;
}
.sd-stat{
background: var(--surface); padding: 28px 24px;
text-align: left;
}
.sd-stat-num{
font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.025em;
line-height: 1; color: var(--ink); font-weight: 400;
}
.sd-stat-lbl{
margin-top: 6px; font-size: 13px; color: var(--mute);
line-height: 1.4;
}
/* Чек-лист «что входит» */
.sd-checklist{
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: 1fr 1fr;
gap: 14px 36px;
border: 1px solid var(--line); border-radius: var(--rad);
background: var(--surface); padding: 32px 36px;
}
.sd-checklist li{
font-size: 15px; color: var(--ink-2); line-height: 1.5;
display: grid; grid-template-columns: 22px 1fr;
align-items: baseline; gap: 12px;
}
.sd-checklist li::before{
content: "✓"; color: var(--accent);
font-weight: 500; font-size: 14px;
width: 22px; height: 22px; border-radius: 999px;
background: color-mix(in oklab, var(--accent) 12%, transparent);
display: grid; place-items: center;
}
/* Шаги процесса */
.sd-steps{
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.sd-step{
border: 1px solid var(--line); border-radius: var(--rad);
background: var(--surface); padding: 28px 24px;
display: flex; flex-direction: column; gap: 10px;
position: relative; transition: border-color .2s var(--ease);
}
.sd-step:hover{ border-color: var(--line-strong); }
.sd-step-num{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .08em;
}
.sd-step h5{
font-size: 17px; letter-spacing: -0.015em; font-weight: 400;
margin: 4px 0 0; line-height: 1.2; color: var(--ink);
}
.sd-step p{
margin: 4px 0 0; color: var(--ink-2); font-size: 13.5px; line-height: 1.55;
}
/* Преимущества */
.sd-benefits{
display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
background: var(--line); border: 1px solid var(--line);
border-radius: var(--rad); overflow: hidden;
}
.sd-benefit{
background: var(--surface); padding: 32px 36px;
}
.sd-benefit h5{
font-size: 19px; letter-spacing: -0.015em; font-weight: 400;
margin: 0 0 8px; color: var(--ink);
}
.sd-benefit p{
margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
}
/* Гарантия + стоимость */
.sd-info-grid{
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
margin-top: 32px;
}
.sd-info-card{
border: 1px solid var(--line); border-radius: var(--rad);
background: var(--surface); padding: 36px 40px;
}
.sd-info-tag{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .08em;
}
.sd-info-card h4{
margin: 14px 0 10px; font-size: 24px;
letter-spacing: -0.02em; font-weight: 400; line-height: 1.15;
}
.sd-info-card p{
margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.6;
}
/* Большой финальный блок с телефоном (всегда тёмная карточка) */
.sd-final-big{
margin-top: 56px; padding: 56px 64px;
border-radius: var(--rad);
background: #14140F; color: #FAFAF8;
display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px;
align-items: center;
}
.sd-final-big .sd-tag{ color: rgba(250,250,248,.55); }
.sd-final-text h3{
font-size: clamp(28px, 3vw, 40px); letter-spacing: -0.025em;
font-weight: 400; margin: 12px 0 12px; line-height: 1.05;
color: #FAFAF8;
}
.sd-final-text p{
margin: 0; font-size: 15px; line-height: 1.55;
color: rgba(250,250,248,.75); max-width: 480px;
}
.sd-final-actions{ display: flex; flex-direction: column; gap: 18px; }
.sd-phone-big{
display: inline-flex; align-items: center; min-height: 40px;
font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -0.02em;
color: #FAFAF8; text-decoration: none; font-weight: 400;
line-height: 1; transition: opacity .2s;
}
.sd-phone-big:hover{ opacity: .8; }
.sd-final-buttons{ display: flex; gap: 10px; flex-wrap: wrap; }
.sd-final-big .btn-ghost{
color: #FAFAF8; border-color: rgba(250,250,248,.30);
}
.sd-final-big .btn-ghost:hover{
background: rgba(250,250,248,.10); border-color: rgba(250,250,248,.55);
}
[data-theme="dark"] .sd-final-big{ background: #1A1A17; color: #F0EFE9; }
[data-theme="dark"] .sd-final-big .sd-tag{ color: rgba(240,239,233,.55); }
[data-theme="dark"] .sd-final-text h3{ color: #F0EFE9; }
[data-theme="dark"] .sd-final-text p{ color: rgba(240,239,233,.75); }
[data-theme="dark"] .sd-phone-big{ color: #F0EFE9; }
[data-theme="dark"] .sd-final-big .btn-ghost{
color: #F0EFE9; border-color: rgba(240,239,233,.30);
}
[data-theme="dark"] .sd-final-big .btn-ghost:hover{
background: rgba(240,239,233,.10); border-color: rgba(240,239,233,.55);
}
/* Адаптив */
@media (max-width: 880px){
.sd-stats{ grid-template-columns: repeat(2, 1fr); }
.sd-checklist{ grid-template-columns: 1fr; padding: 24px; }
.sd-steps{ grid-template-columns: 1fr 1fr; }
.sd-benefits{ grid-template-columns: 1fr; }
.sd-info-grid{ grid-template-columns: 1fr; }
.sd-info-card{ padding: 28px; }
.sd-final-big{ grid-template-columns: 1fr; padding: 36px 28px; gap: 24px; }
}
@media (max-width: 540px){
.sd-steps{ grid-template-columns: 1fr; }
}
/* ——— ДЕТАЛЬНАЯ СТРАНИЦА ПРОЕКТА ——— */
.pd-meta{
display: flex; flex-wrap: wrap; gap: 28px; margin-top: 24px;
padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.pd-meta-item{ display: flex; flex-direction: column; gap: 4px; }
.pd-meta-item .k{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .08em; text-transform: uppercase;
}
.pd-meta-item .v{ font-size: 16px; letter-spacing: -0.01em; color: var(--ink); }
.pd-cover{
aspect-ratio: 16/9; background: var(--bg-2);
background-size: cover; background-position: center;
border-radius: var(--rad); margin-top: 32px;
border: 1px solid var(--line); position: relative; overflow: hidden;
max-height: 520px;
}
.pd-section-head{
margin: 56px 0 20px; display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
}
.pd-section-head .nr{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .08em; text-transform: uppercase;
}
.pd-section-head h3{
font-size: clamp(24px, 2.5vw, 32px); letter-spacing: -0.02em;
font-weight: 400; margin: 0;
}
.pd-gallery{
display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; grid-auto-flow: dense;
}
.pd-gallery .ph{
aspect-ratio: 4/3; background-size: cover; background-position: center;
background-color: var(--bg-2); border-radius: 10px;
border: 1px solid var(--line); cursor: zoom-in;
transition: transform .25s var(--ease);
}
.pd-gallery .ph:hover{ transform: translateY(-2px); }
.pd-gallery .ph.tall{ grid-row: span 2; aspect-ratio: 4/6; }
.pd-gallery .ph.wide{ grid-column: span 2; aspect-ratio: 8/3; }
.pd-gallery .ph img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
.pd-desc{
max-width: 720px; color: var(--ink-2); font-size: 16px;
line-height: 1.6; margin-top: 24px;
}
.pd-desc p{ margin: 0 0 14px; }
@media (max-width: 720px){
.contact-left,
.contact-right{
padding: 30px 22px;
min-width: 0;
}
.contact-left h3{
font-size: clamp(26px, 7.5vw, 32px);
line-height: 1.12;
overflow-wrap: anywhere;
}
.contact-left p,
.contact-right p.small{
max-width: none;
}
.crow{
grid-template-columns: 1fr;
gap: 4px;
}
.field-grid{
grid-template-columns: 1fr;
gap: 18px;
}
.lead-brief{
padding: 14px;
}
.lead-brief-head{
align-items: center;
gap: 10px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.lead-brief-head::after{
content: "+";
font-family: var(--mono);
font-size: 18px;
color: var(--mute);
flex-shrink: 0;
}
.lead-brief.brief-open .lead-brief-head::after{ content: "−"; color: var(--ink); }
.lead-brief:not(.brief-open) .lead-brief-head{ margin-bottom: 0; }
.lead-brief:not(.brief-open) .lead-brief-body{ max-height: 0; visibility: hidden; }
.lead-brief-grid{
grid-template-columns: 1fr;
}
.field input,
.field textarea,
.field select{
width: 100%;
min-width: 0;
}
.submit-row{
align-items: stretch;
flex-direction: column;
gap: 16px;
}
.submit-row .btn{
width: 100%;
justify-content: center;
}
.pd-gallery{ grid-template-columns: 1fr 1fr; }
.pd-gallery .ph.wide{ grid-column: span 2; }
.pd-gallery .ph.tall{ grid-row: span 1; aspect-ratio: 4/3; }
.pd-meta{ gap: 16px; }
.video-grid{ grid-template-columns: 1fr; }
.video-card{ max-height: none; min-height: 220px; }
}
.pd-gallery .ph{ max-height: 320px; }
/* ——— ДЕТАЛЬНАЯ СТРАНИЦА ОБОРУДОВАНИЯ ——— */
.ed-hero{
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border: 1px solid var(--line); border-radius: var(--rad);
overflow: hidden; background: var(--surface);
margin-top: 12px;
}
.ed-media{
aspect-ratio: 1/1; background: var(--bg-2);
background-size: cover; background-position: center;
border-right: 1px solid var(--line);
display: grid; place-items: center;
cursor: zoom-in; min-height: 380px;
}
.ed-media-empty{
color: var(--faint); font-family: var(--mono); font-size: 12px;
letter-spacing: .06em; text-transform: uppercase;
}
.ed-info{
padding: 48px 44px; display: flex; flex-direction: column; gap: 20px;
}
.ed-tag{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .08em; text-transform: uppercase;
}
.ed-title{
font-size: clamp(28px, 3.5vw, 44px); letter-spacing: -0.025em;
font-weight: 400; margin: 0; line-height: 1.05;
}
.ed-desc{
color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 0;
}
.ed-price{
margin-top: auto; padding-top: 16px;
display: flex; align-items: baseline; gap: 12px;
border-top: 1px solid var(--line);
}
.ed-price .lbl{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .06em; text-transform: uppercase;
}
.ed-price .val{
font-size: 24px; letter-spacing: -0.015em; color: var(--ink);
}
.ed-cta{ display: flex; gap: 10px; flex-wrap: wrap; }
/* Полная таблица характеристик */
.ed-specs-full{
display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
background: var(--line); border: 1px solid var(--line);
border-radius: var(--rad); overflow: hidden;
}
.ed-specs-full .row{
background: var(--surface);
padding: 18px 24px;
display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px;
}
.ed-specs-full .row .k{
font-size: 13.5px; color: var(--mute);
}
.ed-specs-full .row .v{
font-size: 16px; letter-spacing: -0.01em; color: var(--ink);
text-align: right; font-weight: 400;
}
@media (max-width: 880px){
.ed-hero{ grid-template-columns: 1fr; }
.ed-media{ border-right: 0; border-bottom: 1px solid var(--line); min-height: 280px; }
.ed-info{ padding: 32px 28px; }
.ed-specs-full{ grid-template-columns: 1fr; }
}
/* ——— Страница «не найдено» ——— */
.nf-block{
text-align: center; padding: 80px 32px;
border: 1px solid var(--line); border-radius: var(--rad);
background: var(--surface); margin-top: 24px;
}
.nf-code{
font-family: var(--mono); font-size: 12px; color: var(--mute);
letter-spacing: .12em; text-transform: uppercase; margin-bottom: 24px;
}
.nf-title{
font-size: clamp(28px, 3vw, 42px); letter-spacing: -0.025em;
font-weight: 400; margin: 0 0 16px; line-height: 1.1; color: var(--ink);
}
.nf-sub{
color: var(--ink-2); font-size: 16px; line-height: 1.55;
max-width: 520px; margin: 0 auto 32px;
}
.nf-actions{
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
/* ——— ЛАЙТБОКС ——— */
.lightbox{
position: fixed; inset: 0; z-index: 300;
background: rgba(10,10,8,.94);
display: grid; place-items: center;
animation: lbfade .2s var(--ease);
}
@keyframes lbfade{ from{ opacity: 0 } to{ opacity: 1 } }
.lightbox img{
max-width: 98vw; max-height: 96vh;
width: auto; height: auto;
object-fit: contain; border-radius: 6px;
box-shadow: 0 40px 100px -20px rgba(0,0,0,.5);
}
.lb-close, .lb-prev, .lb-next{
position: absolute; background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18); color: #fff;
width: 48px; height: 48px; border-radius: 999px;
display: grid; place-items: center; cursor: pointer;
font-size: 18px;
transition: background-color .2s, color .2s, border-color .2s;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover{
background: rgba(255,255,255,.18);
}
.lb-close{ top: 24px; right: 24px; }
.lb-prev{ left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next{ right: 24px; top: 50%; transform: translateY(-50%); }
.lb-counter{
position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.7);
letter-spacing: .1em;
}
@media (max-width: 720px){
.lb-close{ top: 16px; right: 16px; width: 40px; height: 40px; }
.lb-prev{ left: 8px; width: 40px; height: 40px; }
.lb-next{ right: 8px; width: 40px; height: 40px; }
}
/* Когда у feat-large карточки есть фото-фон — текст всегда белый
(на градиенте затемнения), независимо от темы сайта */
.cat-cell.feat-large[style*="background-image"]{
color: #fff;
}
.cat-cell.feat-large[style*="background-image"] .tag{
color: rgba(255,255,255,0.75);
}
.cat-cell.feat-large[style*="background-image"] .cat-title{
color: #fff !important;
text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.cat-cell.feat-large[style*="background-image"] .cat-desc{
color: rgba(255,255,255,0.7);
}
.cat-cell.feat-large[style*="background-image"] .cat-desc{
color: rgba(255,255,255,0.7);
}
/* Ленивая отрисовка секций отключена: мешает поиску, скринридерам и полным скриншотам */
/* @media (min-width: 981px) { .section{ content-visibility: auto; contain-intrinsic-size: 1px 600px; } } */
/* ═════════════════════════════════════════════════════
АНИМАЦИИ — премиальные, без перегруза
═════════════════════════════════════════════════════ */
/* Reveal: блок невидим, плавно поднимается при попадании в экран */
.reveal{
opacity: 0;
transform: translateY(24px);
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
.reveal.visible{ opacity: 1; transform: translateY(0); }
/* Каскад: карточки в сетке появляются по очереди */
.reveal-stagger > * {
opacity: 0;
transform: translateY(20px);
transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
will-change: opacity, transform;
}
.reveal-stagger.visible > *{ opacity: 1; transform: translateY(0); }
.reveal-stagger.visible > *:nth-child(1){ transition-delay: 0ms; }
.reveal-stagger.visible > *:nth-child(2){ transition-delay: 60ms; }
.reveal-stagger.visible > *:nth-child(3){ transition-delay: 120ms; }
.reveal-stagger.visible > *:nth-child(4){ transition-delay: 180ms; }
.reveal-stagger.visible > *:nth-child(5){ transition-delay: 240ms; }
.reveal-stagger.visible > *:nth-child(6){ transition-delay: 300ms; }
.reveal-stagger.visible > *:nth-child(7){ transition-delay: 360ms; }
.reveal-stagger.visible > *:nth-child(n+8){ transition-delay: 400ms; }
/* Плавная смена страниц — только opacity, без transform.
Transform на огромном контейнере страницы вызывает reflow всех вложенных блоков. */
.page.active{ animation: pageFadeIn .25s ease both; }
@keyframes pageFadeIn{
from { opacity: 0; }
to { opacity: 1; }
}
/* Кроссфейд старой и новой страницы в браузерах с View Transitions API */
::view-transition-old(root), ::view-transition-new(root){
animation-duration: .28s;
animation-timing-function: ease;
}
html.vt-supported .page.active{ animation: none; }
@media (prefers-reduced-motion: reduce){
::view-transition-old(root), ::view-transition-new(root){ animation: none !important; }
}
/* Hover-эффект на карточках — без анимации box-shadow.
Тень рисуем через ::after с opacity transition — это GPU-ускорено и не вызывает фризов */
.cat-cell, .cert-card, .proj{
position: relative;
transition: border-color .25s;
}
.cat-cell::after, .cert-card::after{
content: ""; position: absolute; inset: 0;
border-radius: inherit;
box-shadow: 0 24px 50px -28px rgba(0,0,0,.28);
opacity: 0;
transition: opacity .3s cubic-bezier(.2,.7,.2,1);
pointer-events: none;
z-index: -1;
}
.cat-cell:hover, .cert-card:hover{ border-color: var(--line-strong); }
.cat-cell:hover::after, .cert-card:hover::after{ opacity: 1; }
.proj:hover{ border-color: var(--line-strong); }
.proj::after{
content:""; position:absolute; inset:0; border-radius:inherit;
box-shadow: 0 24px 50px -28px rgba(0,0,0,.28);
opacity:0; transition: opacity .3s cubic-bezier(.2,.7,.2,1);
pointer-events:none; z-index:-1;
}
.proj:hover::after{ opacity:1; }
.proj.has-cover .proj-head,
.proj.has-cover .meta{ color: rgba(255,255,255,0.75); }
.proj.has-cover h4{ color: #fff; }
.proj.has-cover .proj-head,
.proj.has-cover .proj-body{ position: relative; z-index: 1; }
/* Анимация счётчика в hero (число «с 2003», «10+», «500+») */
.num.counting{ font-variant-numeric: tabular-nums; }
/* Уважение к настройкам пользователя — кому не нужны анимации, отключаем */
@media (prefers-reduced-motion: reduce){
.reveal, .reveal-stagger > *,
.page.active, .cat-cell, .proj, .cert-card, .brands-track{
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
/* ——— ACCORDION (service details tabs) ——— */
.sd-accordion{ display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.sd-acc-item{ border: 1px solid var(--line); border-radius: var(--rad-sm); overflow: hidden; background: var(--surface); }
.sd-acc-header{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; cursor: pointer; font-size: 15px; font-weight: 500; letter-spacing: -0.01em; transition: background .2s var(--ease); -webkit-tap-highlight-color: transparent; }
.sd-acc-header:hover{ background: var(--bg-2); }
.sd-acc-title{ min-width: 0; }
.sd-acc-meta{ margin-left: auto; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--faint); letter-spacing: .04em; white-space: nowrap; }
.sd-acc-header::after{ content: "+"; font-family: var(--mono); font-size: 18px; color: var(--mute); transition: transform .25s var(--ease); flex-shrink: 0; }
.sd-acc-item.open .sd-acc-header::after{ content: "−"; transform: rotate(0deg); color: var(--ink); }
.sd-acc-body{ max-height: 0; overflow: hidden; transition: max-height .35s var(--ease), padding .35s var(--ease); }
.sd-acc-item.open .sd-acc-body{ max-height: 1400px; padding: 4px 10px 12px; }
.sd-acc-body ul{ list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 8px; counter-reset: accitem; }
.sd-acc-body li{
counter-increment: accitem;
font-size: 14px; line-height: 1.45; color: var(--ink-2);
padding: 9px 10px 9px 46px; position: relative;
border-radius: 8px; transition: background .15s ease;
}
.sd-acc-body li:hover{ background: var(--bg-2); }
.sd-acc-body li::before{
content: counter(accitem, decimal-leading-zero);
position: absolute; left: 12px; top: 10px;
font-family: var(--mono); font-size: 12px; line-height: 1.45;
color: var(--accent); letter-spacing: .04em;
}
@media (max-width: 720px){
.sd-acc-body ul{ grid-template-columns: 1fr; }
}