/* Е7 ГРУПП ЖБИ — shared styles for all blocks.
Loaded once by 00-shared.html into . */
/* Force dark page background BEFORE any block paints, so there is no white flash
between Tilda blocks while lazy-loading. */
html, body { background: #18181B !important; overflow-x: hidden; }
html { color-scheme: dark; }
:root {
--bg: #1F2A36;
--bg-deep: #18181B;
--bg-soft: #263241;
--bg-light: #F3F3F3;
--bg-light-2: #E8EDEB;
--ink: #1F2A36;
--ink-2: #383838;
--muted: #808080;
--muted-2: #5B6B7E;
--line: rgba(255,255,255,0.10);
--line-strong: rgba(255,255,255,0.18);
--line-dark: rgba(31,42,54,0.10);
--white: #FFFFFF;
--red: #DA2127;
--red-deep: #B81A1F;
--red-light: #FF4A4F;
--grid-max: 1320px;
--pad: clamp(20px, 4vw, 80px);
--header-h: 76px;
}
.e7 *, .e7 *::before, .e7 *::after { box-sizing: border-box; }
.e7 {
background: var(--bg);
color: var(--white);
font-family: 'Formular', 'Inter', 'Manrope', system-ui, -apple-system, sans-serif;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body.modal-open { overflow: hidden; }
.e7 img { display: block; max-width: 100%; }
.e7 button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
.e7 a,
.e7 a:link,
.e7 a:visited,
.e7 a:active,
.e7 a:focus { color: inherit !important; text-decoration: none !important; }
.e7-header a, .e7-header a:link, .e7-header a:visited, .e7-header a:active, .e7-header a:focus { color: inherit !important; text-decoration: none !important; }
.e7-mobile-menu a, .e7-mobile-menu a:link, .e7-mobile-menu a:visited, .e7-mobile-menu a:active, .e7-mobile-menu a:focus { color: inherit !important; text-decoration: none !important; }
.e7-modal-overlay a, .e7-modal-overlay a:link, .e7-modal-overlay a:visited, .e7-modal-overlay a:active, .e7-modal-overlay a:focus { color: inherit !important; text-decoration: none !important; }
.e7 input, .e7 textarea, .e7 select { font-family: inherit; font-size: inherit; }
.e7 ::selection { background: var(--red); color: #fff; }
/* === Typography === */
.e7 .h-display, .e7 .h1, .e7 .h2, .e7 .h3, .e7 .h4 {
font-family: 'Akrobat', 'Manrope', 'Inter', system-ui, sans-serif;
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.012em;
text-transform: uppercase;
}
.e7 .num-display {
font-family: 'Akrobat', 'Manrope', 'Inter', system-ui, sans-serif;
font-weight: 800;
line-height: 1;
letter-spacing: -0.03em;
text-transform: uppercase;
}
.e7 .h-display { font-size: clamp(36px, 4.8vw, 68px); line-height: 0.95; }
.e7 .h1 { font-size: clamp(30px, 3.6vw, 52px); }
.e7 .h2 { font-size: clamp(24px, 2.6vw, 40px); }
.e7 .h3 { font-size: clamp(20px, 2vw, 28px); }
.e7 .h4 { font-size: clamp(16px, 1.4vw, 20px); }
.e7 .num-display { font-size: clamp(56px, 7vw, 110px); line-height: 1; letter-spacing: -0.03em; }
.e7 .body-lg { font-size: 17px; line-height: 1.55; font-weight: 300; }
.e7 .body { font-size: 16px; line-height: 1.55; }
.e7 .body-sm { font-size: 14px; line-height: 1.5; }
.e7 .caption { font-size: 12px; line-height: 1.4; letter-spacing: 0.04em; }
.e7 .container {
width: 100%;
max-width: var(--grid-max);
margin: 0 auto;
padding-left: var(--pad);
padding-right: var(--pad);
}
.e7 .section { padding: clamp(56px, 7.5vw, 120px) 0; position: relative; }
.e7 .section--light { background: var(--bg-light); color: var(--ink); }
.e7 .section--deep { background: var(--bg-deep); }
.e7 .section--tight-bottom { padding-bottom: clamp(40px, 5vw, 72px); }
/* === Buttons === */
.e7 .btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 22px;
font-family: 'Formular', 'Inter', sans-serif;
font-weight: 500;
font-size: 13px;
letter-spacing: 0.05em;
text-transform: uppercase;
border-radius: 2px;
transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, color .25s, border-color .25s, box-shadow .25s;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
line-height: 1.1;
}
.e7 .btn > * { white-space: nowrap; }
.e7 .btn:active { transform: translateY(1px); }
.e7 .btn--primary { background: var(--red); color: var(--white); }
.e7 .btn--primary:hover { background: var(--red-deep); box-shadow: 0 8px 24px rgba(218,33,39,0.3); }
.e7 .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.25); }
.e7 .btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.06); }
.e7 .btn--ghost-dark { background: transparent; color: var(--ink); border-color: rgba(31,42,54,0.2); }
.e7 .btn--ghost-dark:hover { border-color: var(--ink); background: rgba(31,42,54,0.04); }
.e7 .btn--block { width: 100%; justify-content: center; }
.e7 .btn .ico, .e7 .btn .arrow {
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.e7 .btn .arrow { transition: transform .25s; }
.e7 .btn:hover .arrow { transform: translateX(3px); }
@media (max-width: 480px) {
.e7 .btn { padding: 14px 18px; font-size: 12px; }
}
/* === Header === */
.e7-header {
position: static;
width: 100%;
background: rgba(24, 24, 27, 0.95);
border-bottom: 1px solid rgba(255,255,255,0.06);
font-family: 'Formular', 'Inter', sans-serif;
color: var(--white);
z-index: 50;
}
.e7-header.is-floating {
position: fixed;
top: 0; left: 0; right: 0;
transform: translateY(-100%);
transition: transform .35s cubic-bezier(.2,.7,.2,1);
background: rgba(24, 24, 27, 0.96);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
}
.e7-header.is-floating.is-shown { transform: translateY(0); }
.e7-header *, .e7-header *::before, .e7-header *::after { box-sizing: border-box; }
.e7-header button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
.e7-header a { color: inherit; text-decoration: none; }
.e7-header .header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
max-width: var(--grid-max);
margin: 0 auto;
padding: 16px var(--pad);
height: var(--header-h);
}
.e7-header .header__brand { display: flex; align-items: center; gap: 12px; }
.e7-header .header__brand .logo-mark,
.e7-header .header__brand img.logo-mark {
width: 34px !important;
height: auto !important;
max-width: 34px !important;
flex-shrink: 0 !important;
color: var(--white);
display: block !important;
}
.e7-header .header__brand-text { display: flex; flex-direction: column; line-height: 1; }
.e7-header .header__brand-title { font-family: 'Akrobat', 'Manrope', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; }
.e7-header .header__brand-sub { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin-top: 4px; font-weight: 500; }
.e7-header .header__nav { display: flex; align-items: center; gap: 28px; }
.e7-header .header__nav a,
.e7-header .header__nav a:link,
.e7-header .header__nav a:visited,
.e7-header .header__nav a:active,
.e7-header .header__nav a:focus {
font-size: 13px;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
color: #ffffff !important;
transition: color .2s, opacity .2s;
position: relative;
padding: 6px 0;
text-decoration: none !important;
opacity: 0.85;
}
.e7-header .header__nav a:hover { color: #ffffff !important; opacity: 1; }
.e7-header .header__nav a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: var(--red);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s;
}
.e7-header .header__nav a:hover::after { transform: scaleX(1); }
.e7-header .header__cta { display: flex; align-items: center; gap: 18px; }
.e7-header .header__phone { display: flex; flex-direction: column; gap: 2px; line-height: 1; white-space: nowrap; }
.e7-header .header__phone .num { font-family: 'Akrobat', 'Manrope', sans-serif; font-weight: 700; font-size: 17px; color: #fff; letter-spacing: 0.01em; }
.e7-header .header__phone .lbl { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 500; }
.e7-header .header__burger { display: none; }
.e7-header .btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 22px; font-family: 'Formular', 'Inter', sans-serif;
font-weight: 500; font-size: 13px; letter-spacing: 0.05em;
text-transform: uppercase; border-radius: 2px; cursor: pointer;
border: 1px solid transparent; white-space: nowrap; line-height: 1.1;
transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s, box-shadow .25s;
}
.e7-header .btn--primary { background: var(--red); color: var(--white); }
.e7-header .btn--primary:hover { background: var(--red-deep); box-shadow: 0 8px 24px rgba(218,33,39,0.3); }
@media (max-width: 1180px) {
.e7-header .header__nav { gap: 20px; }
.e7-header .header__nav a { font-size: 12px; }
}
@media (max-width: 1100px) {
.e7-header .header__nav { display: none; }
.e7-header .header__phone { display: none; }
.e7-header .header__burger {
display: flex;
width: 44px; height: 44px;
align-items: center; justify-content: center;
border: 1px solid var(--line-strong);
border-radius: 2px;
color: var(--white);
}
}
@media (max-width: 600px) {
.e7-header .header__inner { gap: 12px; }
.e7-header .header__cta .btn { padding: 12px 14px; font-size: 11px; }
.e7-header .header__brand-text { display: none; }
.e7-header .header__brand .logo-mark { width: 36px; }
}
.e7-mobile-menu {
position: fixed; inset: 0; z-index: 60;
background: var(--bg-deep);
display: flex; flex-direction: column;
padding: 20px var(--pad) 40px;
opacity: 0; pointer-events: none;
transition: opacity .25s;
overflow-y: auto;
font-family: 'Formular', 'Inter', sans-serif;
color: var(--white);
}
.e7-mobile-menu.is-open { opacity: 1; pointer-events: auto; }
.e7-mobile-menu *, .e7-mobile-menu *::before, .e7-mobile-menu *::after { box-sizing: border-box; }
.e7-mobile-menu a { color: inherit; text-decoration: none; }
.e7-mobile-menu button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
.e7-mobile-menu .header__brand { display: flex; align-items: center; gap: 12px; }
.e7-mobile-menu .header__brand .logo-mark,
.e7-mobile-menu .header__brand img.logo-mark {
width: 36px !important;
height: auto !important;
max-width: 36px !important;
flex-shrink: 0 !important;
color: var(--white);
display: block !important;
}
.e7-mobile-menu .header__brand-text { display: flex; flex-direction: column; line-height: 1; }
.e7-mobile-menu .header__brand-title { font-family: 'Akrobat','Manrope',sans-serif; font-weight: 800; font-size: 17px; letter-spacing: 0.02em; text-transform: uppercase; }
.e7-mobile-menu .header__brand-sub { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin-top: 4px; font-weight: 600; }
.e7-mobile-menu .mobile-menu__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; }
.e7-mobile-menu .mobile-menu__close { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--white); }
.e7-mobile-menu nav { display: flex; flex-direction: column; gap: 0; }
.e7-mobile-menu nav a {
font-family: 'Akrobat', 'Manrope', sans-serif;
font-weight: 700;
font-size: 28px;
text-transform: uppercase;
letter-spacing: -0.01em;
padding: 18px 0;
border-bottom: 1px solid var(--line);
display: flex;
align-items: center;
justify-content: space-between;
color: var(--white);
}
.e7-mobile-menu nav a .arrow { color: var(--red); }
.e7-mobile-menu .mobile-menu__phone { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.e7-mobile-menu .mobile-menu__phone .num { font-family: 'Akrobat',sans-serif; font-weight: 800; font-size: 24px; color: var(--white); display: block; margin-bottom: 16px; }
.e7-mobile-menu .mobile-menu__phone .lbl { font-size: 10px; letter-spacing: 0.18em; color: var(--red); text-transform: uppercase; margin-bottom: 6px; }
.e7-mobile-menu .btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 22px; font-weight: 500; font-size: 13px;
letter-spacing: 0.05em; text-transform: uppercase; border-radius: 2px;
cursor: pointer; border: 1px solid transparent; line-height: 1.1;
}
.e7-mobile-menu .btn--primary { background: var(--red); color: var(--white); }
/* === Hero === */
.e7 .hero {
position: relative;
min-height: calc(100vh - var(--header-h));
min-height: calc(100svh - var(--header-h));
padding-top: 56px;
padding-bottom: 56px;
overflow: hidden;
background: var(--bg);
display: flex;
align-items: center;
}
@media (max-width: 700px) {
.e7 .hero { padding-top: 40px; padding-bottom: 40px; min-height: auto; }
}
.e7 .hero__bg {
position: absolute; inset: 0;
background-image: url('https://static.tildacdn.com/tild3536-3636-4636-b263-373837643564/facade.webp');
background-size: cover;
background-position: center;
opacity: 0.35;
filter: contrast(1.05) brightness(0.55);
z-index: 0;
}
.e7 .hero__bg::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(31,42,54,1) 0%, rgba(31,42,54,0.85) 40%, rgba(31,42,54,0.4) 100%),
linear-gradient(180deg, rgba(31,42,54,0.4) 0%, rgba(31,42,54,1) 100%);
}
.e7 .hero__grid {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 80px 80px;
pointer-events: none;
z-index: 1;
mask-image: radial-gradient(ellipse at 30% 50%, black 0%, transparent 75%);
}
.e7 .hero__content {
position: relative;
z-index: 2;
width: 100%;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
padding-top: 20px;
}
.e7 .hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; }
.e7 .hero__eyebrow .pill {
display: inline-block;
background: var(--red);
color: var(--white);
padding: 6px 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
border-radius: 2px;
}
.e7 .hero__title {
margin: 0 0 24px;
font-family: 'Akrobat', 'Manrope', 'Inter', sans-serif;
font-weight: 700;
text-transform: uppercase;
line-height: 0.98;
letter-spacing: -0.012em;
font-size: clamp(34px, 5.4vw, 68px);
}
.e7 .hero__title .line { display: block; white-space: nowrap; }
.e7 .hero__title .line--accent { color: var(--white); }
.e7 .hero__title .accent { color: var(--red); }
@media (max-width: 700px) {
.e7 .hero__title { font-size: clamp(32px, 8.8vw, 48px); }
.e7 .hero__title .line { white-space: normal; }
}
.e7 .hero__sub { max-width: 560px; color: rgba(255,255,255,0.78); margin: 0 0 36px; font-size: 17px; font-weight: 300; line-height: 1.5; }
.e7 .hero__sub b { color: var(--white); font-weight: 500; }
.e7 .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }
@media (max-width: 700px) { .e7 .hero__sub { font-size: 15px; } }
.e7 .hero__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
margin-bottom: 32px;
}
.e7 .hero__stat {
padding: 24px 28px 24px 0;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 6px;
}
.e7 .hero__stat:last-child { border-right: none; padding-right: 0; }
.e7 .hero__stat:not(:first-child) { padding-left: 28px; }
.e7 .hero__stat .v {
font-family: 'Akrobat', 'Manrope', sans-serif;
font-weight: 800;
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1;
color: var(--white);
letter-spacing: -0.02em;
}
.e7 .hero__stat .v .unit { color: var(--red); font-size: 0.55em; margin-left: 4px; font-weight: 700; }
.e7 .hero__stat .k { font-size: 12px; color: rgba(255,255,255,0.6); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; }
@media (max-width: 700px) {
.e7 .hero__stats { grid-template-columns: 1fr; }
.e7 .hero__stat { padding: 18px 0; border-right: none; border-bottom: 1px solid var(--line); }
.e7 .hero__stat:not(:first-child) { padding-left: 0; }
.e7 .hero__stat:last-child { border-bottom: none; }
}
.e7 .hero__meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.e7 .hero__meta-item {
background: rgba(31,42,54,0.65);
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 120px;
transition: background .25s;
}
.e7 .hero__meta-item:hover { background: rgba(31,42,54,0.95); }
.e7 .hero__meta-item .icon { width: 32px; height: 32px; color: var(--red); display: flex; align-items: center; justify-content: center; }
.e7 .hero__meta-item .label { font-size: 13px; font-weight: 500; line-height: 1.35; }
@media (max-width: 800px) { .e7 .hero__meta { grid-template-columns: repeat(2, 1fr); } }
/* === Section header === */
.e7 .section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;
margin-bottom: 56px;
}
.e7 .section-head__left { max-width: 760px; }
.e7 .section-head__num {
font-family: 'Formular', 'Inter', monospace;
font-size: 12px;
letter-spacing: 0.18em;
color: var(--red);
margin-bottom: 16px;
font-weight: 500;
display: flex;
align-items: center;
gap: 12px;
text-transform: uppercase;
}
.e7 .section-head__num::before {
content: '';
width: 28px; height: 1px;
background: var(--red);
display: inline-block;
}
.e7 .section-head__title { margin: 0 0 12px; }
.e7 .section-head__sub { color: rgba(255,255,255,0.65); max-width: 560px; margin: 0; }
.e7 .section--light .section-head__sub { color: var(--muted-2); }
.e7 .section--light .section-head__title { color: var(--ink); }
@media (max-width: 800px) {
.e7 .section-head { flex-direction: column; align-items: flex-start; margin-bottom: 40px; }
}
/* === Catalog === */
.e7 .catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 900px) { .e7 .catalog-grid { grid-template-columns: 1fr; } }
.e7 .catalog-card {
position: relative;
background: var(--bg-soft);
padding: 36px 30px;
display: flex;
flex-direction: column;
min-height: 460px;
overflow: hidden;
border: 1px solid var(--line);
transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .25s, background .25s;
}
.e7 .catalog-card:hover { transform: translateY(-4px); border-color: rgba(218,33,39,0.5); }
.e7 .catalog-card--available { background: linear-gradient(165deg, #25323F 0%, #1B2532 100%); }
.e7 .catalog-card--available::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: var(--red); }
.e7 .catalog-card__badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
padding: 6px 10px; border-radius: 2px; margin-bottom: 22px; width: fit-content;
}
.e7 .catalog-card__badge--green { background: rgba(74, 211, 119, 0.15); color: #4AD377; }
.e7 .catalog-card__badge--orange { background: rgba(255, 145, 64, 0.15); color: #FFB05A; }
.e7 .catalog-card h3 {
margin: 0 0 16px;
min-height: 1.96em; /* resere 2 lines so 1-line titles align with 2-line ones */
}
.e7 .catalog-card__spec {
font-family: 'Akrobat', 'Manrope', monospace;
font-size: 16px;
font-weight: 700;
color: var(--white);
letter-spacing: 0.02em;
margin: 12px 0;
padding: 14px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
min-height: 50px;
display: flex;
align-items: center;
}
.e7 .catalog-card__rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; min-height: 132px; }
@media (max-width: 900px) {
.e7 .catalog-card h3 { min-height: 0; }
.e7 .catalog-card__spec { min-height: 0; }
.e7 .catalog-card__rows { min-height: 0; }
}
.e7 .catalog-card__row { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.e7 .catalog-card__row .k { color: rgba(255,255,255,0.55); }
.e7 .catalog-card__row .v { color: var(--white); font-weight: 500; text-align: right; }
.e7 .catalog-card__cta { margin-top: auto; }
/* === Slabs === */
.e7 .slabs { background: var(--bg-light); color: var(--ink); overflow: hidden; }
.e7 .slabs__layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; min-width: 0; }
.e7 .slabs__layout > * { min-width: 0; }
@media (max-width: 900px) { .e7 .slabs__layout { grid-template-columns: 1fr; gap: 40px; } }
.e7 .slabs__intro { font-size: 17px; line-height: 1.55; color: var(--ink); margin-bottom: 32px; max-width: 600px; }
.e7 .slabs-table-wrap {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 8px;
border: 1px solid var(--line-dark);
background: var(--white);
}
.e7 .slabs-table {
width: 100%;
border-collapse: collapse;
background: var(--white);
font-size: 14px;
}
.e7 .slabs-table th, .e7 .slabs-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line-dark); white-space: nowrap; }
.e7 .slabs-table th { background: var(--bg); color: var(--white); font-family: 'Akrobat','Manrope',sans-serif; font-weight: 700; text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em; }
.e7 .slabs-table tr:last-child td { border-bottom: none; }
.e7 .slabs-table tbody tr:hover { background: var(--bg-light); }
.e7 .slabs-table .v { font-family: 'Akrobat','Manrope', monospace; font-weight: 700; font-size: 15px; color: var(--ink); }
@media (max-width: 700px) {
.e7 .slabs-table { min-width: 520px; font-size: 13px; }
.e7 .slabs-table th, .e7 .slabs-table td { padding: 12px 14px; }
}
.e7 .slabs__price {
display: flex; align-items: baseline; gap: 16px;
margin: 28px 0; padding: 28px;
background: var(--white); border-left: 3px solid var(--red);
}
.e7 .slabs__price .label { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2); font-weight: 500; }
.e7 .slabs__price .val { font-family: 'Akrobat','Manrope',sans-serif; font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); color: var(--ink); line-height: 1; margin-top: 6px; }
.e7 .slabs__price .note { font-size: 13px; color: var(--muted-2); margin-left: auto; max-width: 240px; }
@media (max-width: 700px) { .e7 .slabs__price { flex-direction: column; align-items: flex-start; gap: 12px; } .e7 .slabs__price .note { margin-left: 0; } }
.e7 .slabs__side { position: sticky; top: 100px; }
.e7 .slabs__image { width: 100%; aspect-ratio: 4 / 5; background-image: url('https://static.tildacdn.com/tild3136-3230-4335-b366-393464613436/stack.webp'); background-size: cover; background-position: center; }
.e7 .slabs__sticker {
position: relative;
background: var(--bg);
color: var(--white);
padding: 28px 32px;
margin: -100px 24px 0;
z-index: 2;
border: 1px solid var(--line);
}
@media (max-width: 900px) {
.e7 .slabs__side { position: static; max-width: 100%; }
.e7 .slabs__image { aspect-ratio: 16 / 10; max-width: 100%; }
.e7 .slabs__sticker { margin: -48px 12px 0; padding: 18px 20px; max-width: calc(100% - 24px); box-sizing: border-box; }
.e7 .slabs__sticker .big { font-size: 38px; }
}
@media (max-width: 700px) {
.e7 .slabs-table-wrap { max-width: 100%; }
.e7 .slabs__sticker { margin: -40px 8px 0; max-width: calc(100% - 16px); }
}
.e7 .slabs__sticker .big {
font-family: 'Akrobat','Manrope',sans-serif;
font-weight: 800;
font-size: 56px;
line-height: 0.9;
color: var(--red);
display: flex; align-items: baseline; gap: 8px;
}
.e7 .slabs__sticker .lbl { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 8px; }
.e7 .slabs__cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* === Frame === */
.e7 .frame-bl {
background: var(--bg);
position: relative;
overflow: hidden;
/* Бок-о-бок с галереей внизу — снижаем нижний отступ, чтобы не было пустого
гипер-пространства между буллетами и заголовком «Производство». */
padding-bottom: clamp(40px, 4vw, 64px);
}
.e7 .gallery { padding-top: clamp(40px, 4vw, 64px); }
.e7 .frame-bl__bg {
position: absolute; inset: 0;
background-image: url('https://static.tildacdn.com/tild6437-3739-4333-b436-626632373262/columns.webp');
background-size: cover; background-position: center;
opacity: 0.18; filter: grayscale(1) contrast(1.1);
}
.e7 .frame-bl__bg::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(31,42,54,0.65) 0%, rgba(31,42,54,0.95) 100%);
}
.e7 .frame-bl__inner { position: relative; z-index: 2; }
.e7 .frame-bl__top {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 56px;
align-items: center;
margin-bottom: 48px;
}
.e7 .frame-bl__media {
margin: 0;
position: relative;
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg-soft);
aspect-ratio: 4 / 3;
}
.e7 .frame-bl__media img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.e7 .frame-bl__media figcaption {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 18px 22px 18px;
background: linear-gradient(180deg, rgba(24,24,27,0) 0%, rgba(24,24,27,0.9) 75%);
color: var(--white);
display: flex; flex-direction: column; gap: 4px;
pointer-events: none;
}
.e7 .frame-bl__media figcaption .lbl {
font-family: 'Akrobat','Manrope',sans-serif;
font-weight: 700; font-size: 11px;
color: var(--red); letter-spacing: 0.18em;
text-transform: uppercase;
}
.e7 .frame-bl__media figcaption .t {
font-size: 14px; line-height: 1.4; font-weight: 500;
max-width: 480px;
}
@media (max-width: 900px) {
.e7 .frame-bl__top { grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; }
.e7 .frame-bl__media { aspect-ratio: 16 / 10; }
.e7 .frame-bl__media figcaption .t { font-size: 13px; }
}
.e7 .frame-bl__lead { font-size: 18px; line-height: 1.5; color: rgba(255,255,255,0.85); margin-bottom: 24px; font-weight: 300; }
.e7 .frame-bl__lead b { font-weight: 500; color: var(--white); }
.e7 .frame-bl__bullets-head {
margin-top: 8px;
margin-bottom: 18px;
}
.e7 .frame-bl__bullets-head .eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
font-family: 'Formular','Inter',sans-serif;
font-size: 12px;
letter-spacing: 0.18em;
color: var(--red);
font-weight: 500;
text-transform: uppercase;
}
.e7 .frame-bl__bullets-head .eyebrow::before {
content: '';
width: 28px; height: 1px;
background: var(--red);
}
.e7 .frame-bl__bullets {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--line);
border: 1px solid var(--line);
}
.e7 .frame-bl__bullet {
background: rgba(31,42,54,0.85);
padding: 26px 24px;
display: flex;
align-items: flex-start;
gap: 16px;
min-height: 124px;
position: relative;
transition: background .25s, transform .35s cubic-bezier(.2,.7,.2,1);
}
.e7 .frame-bl__bullet:hover {
background: rgba(40,54,70,0.95);
}
.e7 .frame-bl__bullet .n {
font-family: 'Akrobat','Manrope',sans-serif;
font-weight: 700;
font-size: 24px;
color: var(--red);
letter-spacing: -0.01em;
line-height: 1;
flex-shrink: 0;
padding-top: 2px;
min-width: 32px;
}
.e7 .frame-bl__bullet .t {
font-size: 14px;
line-height: 1.45;
color: rgba(255,255,255,0.88);
font-weight: 400;
}
@media (max-width: 1000px) {
.e7 .frame-bl__bullets { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
.e7 .frame-bl { padding-top: 48px; padding-bottom: 48px; }
.e7 .frame-bl__bullet { min-height: 0; padding: 18px 18px; gap: 14px; }
.e7 .frame-bl__bullet .n { font-size: 20px; min-width: 28px; padding-top: 1px; }
.e7 .frame-bl__bullet .t { font-size: 13px; line-height: 1.4; }
}
@media (max-width: 500px) { .e7 .frame-bl__bullets { grid-template-columns: 1fr; } }
/* === Why === */
.e7 .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
@media (max-width: 900px) { .e7 .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .e7 .why-grid { grid-template-columns: 1fr; } }
.e7 .why-card {
background: var(--white); padding: 36px 28px;
display: flex; flex-direction: column; gap: 16px;
min-height: 260px; transition: background .3s;
position: relative; overflow: hidden;
}
.e7 .why-card:hover { background: var(--bg-light-2); }
.e7 .why-card::before {
content: ''; position: absolute; top: 0; left: 0;
width: 0; height: 3px; background: var(--red);
transition: width .4s cubic-bezier(.2,.7,.2,1);
}
.e7 .why-card:hover::before { width: 100%; }
.e7 .why-card__num { font-family: 'Akrobat','Manrope',monospace; font-size: 12px; letter-spacing: 0.2em; color: var(--red); font-weight: 700; }
.e7 .why-card__title { margin: 0; font-size: clamp(18px, 1.6vw, 22px); }
.e7 .why-card__text { font-size: 14px; line-height: 1.5; color: var(--muted-2); margin-top: auto; }
/* === Gallery slider (infinite-feel horizontal carousel) === */
.e7 .gallery { overflow: hidden; }
.e7 .gallery .section-head { align-items: center; }
.e7 .gallery-nav { display: flex; gap: 10px; flex-shrink: 0; }
.e7 .gallery-arrow {
width: 48px; height: 48px;
border: 1px solid var(--line-strong) !important;
border-radius: 50%;
background: rgba(31,42,54,0.5);
color: var(--white);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: background .2s, border-color .2s, transform .2s, opacity .2s;
}
.e7 .gallery-arrow:hover { background: var(--red); border-color: var(--red) !important; }
.e7 .gallery-arrow svg { display: block; width: 18px; height: 18px; }
.e7 .gallery-arrow:disabled { opacity: 0.4; cursor: default; }
.e7 .gallery-arrow--prev:hover { transform: translateX(-2px); }
.e7 .gallery-arrow--next:hover { transform: translateX(2px); }
.e7 .gallery-slider {
position: relative;
width: 100%;
overflow: hidden;
margin-top: 8px;
}
.e7 .gallery-track {
display: flex;
gap: 14px;
will-change: transform;
/* JS toggles `transition: transform .55s cubic-bezier(.22,.61,.36,1)` */
}
.e7 .gallery-slide {
flex: 0 0 calc((100% - 28px) / 3);
position: relative;
margin: 0;
background: var(--bg-soft);
border: 1px solid var(--line);
overflow: hidden;
cursor: zoom-in;
aspect-ratio: 4 / 3;
}
.e7 .gallery-slide img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .35s;
filter: saturate(0.92);
}
.e7 .gallery-slide:hover img { transform: scale(1.05); filter: saturate(1.05); }
.e7 .gallery-slide figcaption {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 18px 18px 16px;
background: linear-gradient(180deg, rgba(24,24,27,0) 0%, rgba(24,24,27,0.92) 70%);
color: var(--white);
display: flex; gap: 12px; align-items: baseline;
pointer-events: none;
opacity: 0; transform: translateY(8px);
transition: opacity .3s, transform .3s;
}
.e7 .gallery-slide:hover figcaption { opacity: 1; transform: translateY(0); }
.e7 .gallery-slide figcaption .lbl {
font-family: 'Akrobat','Manrope',sans-serif;
font-weight: 700; font-size: 12px;
color: var(--red); letter-spacing: 0.18em;
flex-shrink: 0;
}
.e7 .gallery-slide figcaption .t {
font-size: 13px; line-height: 1.4; font-weight: 500;
}
.e7 .gallery-dots {
display: flex; justify-content: center; gap: 8px;
margin-top: 22px;
flex-wrap: wrap;
}
.e7 .gallery-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.22);
border: 0; padding: 0; cursor: pointer;
transition: background .25s, transform .25s, width .25s;
}
.e7 .gallery-dot.is-active { background: var(--red); width: 22px; border-radius: 4px; }
/* На мобилке точек слишком много (по числу слайдов) — заменяем на прогресс-бар + счётчик. */
.e7 .gallery-progress {
display: none;
align-items: center;
gap: 16px;
margin-top: 14px;
padding: 0 2px;
}
.e7 .gallery-progress__count {
font-family: 'Akrobat','Manrope',sans-serif;
font-size: 12px;
letter-spacing: 0.16em;
color: rgba(255,255,255,0.55);
white-space: nowrap;
font-weight: 500;
}
.e7 .gallery-progress__count b {
color: var(--red);
font-weight: 700;
font-size: 14px;
letter-spacing: 0;
}
.e7 .gallery-progress__bar {
flex: 1;
height: 2px;
background: rgba(255,255,255,0.12);
position: relative;
overflow: hidden;
border-radius: 1px;
}
.e7 .gallery-progress__fill {
position: absolute;
left: 0; top: 0; bottom: 0;
width: 0%;
background: var(--red);
transition: width .5s cubic-bezier(.22,.61,.36,1);
border-radius: 1px;
}
@media (max-width: 1100px) {
.e7 .gallery-slide { flex: 0 0 calc((100% - 14px) / 2); }
}
@media (max-width: 700px) {
.e7 .gallery .section-head { flex-direction: column; align-items: flex-start; }
.e7 .gallery-nav { display: none; }
.e7 .gallery-track { gap: 10px; }
.e7 .gallery-slide {
flex: 0 0 calc(100% - 30px);
aspect-ratio: 4 / 3;
}
.e7 .gallery-slide figcaption { opacity: 1; transform: none; padding: 14px 16px; }
.e7 .gallery-slide figcaption .t { font-size: 12px; }
.e7 .gallery-slide:hover img { transform: none; }
/* На мобилке скрываем 46 точек, показываем тонкий прогресс-бар */
.e7 .gallery-dots { display: none; }
.e7 .gallery-progress { display: flex; }
}
/* === Lightbox === */
.e7-lightbox {
position: fixed; inset: 0; z-index: 110;
background: rgba(10,15,21,0.95);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
display: flex;
align-items: center;
justify-content: center;
padding: 64px 72px 92px;
opacity: 0; pointer-events: none;
transition: opacity .25s;
font-family: 'Formular','Inter',sans-serif;
color: var(--white);
}
.e7-lightbox.is-open { opacity: 1; pointer-events: auto; }
.e7-lightbox *, .e7-lightbox *::before, .e7-lightbox *::after { box-sizing: border-box; }
.e7-lightbox button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
.e7-lightbox__stage {
margin: 0;
max-width: 100%; max-height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 18px;
}
.e7-lightbox__img {
display: block;
max-width: 100%;
max-height: calc(100vh - 200px);
object-fit: contain;
background: var(--bg-soft);
border: 1px solid var(--line);
transform: scale(0.97);
transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.e7-lightbox.is-open .e7-lightbox__img { transform: scale(1); }
.e7-lightbox__cap {
color: rgba(255,255,255,0.85);
text-align: center;
font-size: 14px;
line-height: 1.5;
max-width: 720px;
padding: 0 20px;
}
.e7-lightbox__count {
color: var(--red);
font-family: 'Akrobat','Manrope',sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 4px;
}
.e7-lightbox__close,
.e7-lightbox__prev,
.e7-lightbox__next {
position: fixed;
z-index: 120;
width: 48px; height: 48px;
border: 1px solid rgba(255,255,255,0.18) !important;
border-radius: 50%;
background: rgba(24,24,27,0.6);
color: var(--white);
display: flex; align-items: center; justify-content: center;
transition: background .2s, border-color .2s, transform .2s;
}
.e7-lightbox__close:hover,
.e7-lightbox__prev:hover,
.e7-lightbox__next:hover {
background: var(--red);
border-color: var(--red) !important;
}
.e7-lightbox__close { top: 18px; right: 18px; }
.e7-lightbox__prev { left: 18px; top: 50%; transform: translateY(-50%); }
.e7-lightbox__next { right: 18px; top: 50%; transform: translateY(-50%); }
.e7-lightbox__prev:hover { transform: translateY(-50%) translateX(-2px); }
.e7-lightbox__next:hover { transform: translateY(-50%) translateX(2px); }
.e7-lightbox__close svg,
.e7-lightbox__prev svg,
.e7-lightbox__next svg { width: 20px; height: 20px; display: block; flex-shrink: 0; }
@media (max-width: 700px) {
.e7-lightbox { padding: 56px 14px 84px; }
.e7-lightbox__prev,
.e7-lightbox__next {
top: auto; bottom: 20px; transform: none;
width: 44px; height: 44px;
}
.e7-lightbox__prev { left: 50%; margin-left: -54px; }
.e7-lightbox__next { right: auto; left: 50%; margin-left: 10px; }
.e7-lightbox__prev:hover, .e7-lightbox__next:hover { transform: none; }
.e7-lightbox__close { top: 12px; right: 12px; width: 42px; height: 42px; }
.e7-lightbox__cap { font-size: 13px; }
}
/* === Docs === */
.e7 .docs__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
@media (max-width: 900px) { .e7 .docs__layout { grid-template-columns: 1fr; gap: 32px; } }
.e7 .docs__list { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.e7 .doc-item { background: var(--bg-soft); display: flex; align-items: center; gap: 18px; padding: 20px 22px; transition: background .25s; cursor: pointer; flex: 1; }
.e7 .doc-item:hover { background: rgba(218,33,39,0.10); }
.e7 .doc-item__icon { flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--red); }
.e7 .doc-item__main { flex: 1; min-width: 0; }
.e7 .doc-item__title { font-size: 15px; font-weight: 500; line-height: 1.3; }
.e7 .doc-item__sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; letter-spacing: 0.04em; }
.e7 .doc-item__action { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); white-space: nowrap; display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.e7 .docs__quality { background: var(--bg-soft); padding: 32px; border: 1px solid var(--line); height: 100%; display: flex; flex-direction: column; }
.e7 .docs__quality h3 { margin: 12px 0 18px; font-size: 24px; }
.e7 .docs__quality-rows { display: flex; flex-direction: column; gap: 0; }
.e7 .docs__quality-row { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.e7 .docs__quality-row:last-child { border-bottom: none; }
.e7 .docs__quality-row .k { color: rgba(255,255,255,0.6); }
.e7 .docs__quality-row .v { color: var(--white); font-weight: 500; font-family: 'Akrobat',sans-serif; letter-spacing: 0.02em; }
/* === Delivery === */
.e7 .delivery { background: var(--bg-deep); position: relative; overflow: hidden; }
.e7 .delivery__points { display: flex; flex-direction: column; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.e7 .delivery__point { background: var(--bg); padding: 26px 32px; display: grid; grid-template-columns: 56px 1fr 200px; gap: 24px; align-items: center; }
@media (max-width: 700px) {
.e7 .delivery__point {
grid-template-columns: 40px 1fr;
padding: 20px 18px;
gap: 14px 16px;
align-items: start;
}
.e7 .delivery__point .n { padding-top: 2px; line-height: 1; font-size: 20px; }
.e7 .delivery__point .val {
grid-column: 2 / -1;
padding-left: 0;
padding-top: 6px;
border-top: none;
font-size: 13px;
color: rgba(255,255,255,0.75);
letter-spacing: 0.04em;
text-transform: uppercase;
}
}
.e7 .delivery__point .n { font-family: 'Akrobat','Manrope',sans-serif; font-size: 22px; font-weight: 700; color: var(--red); }
.e7 .delivery__point .k { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 6px; }
.e7 .delivery__point .t { font-size: 15px; font-weight: 400; line-height: 1.4; }
.e7 .delivery__point .val { font-size: 14px; color: var(--white); font-weight: 500; font-family: 'Akrobat',sans-serif; letter-spacing: 0.02em; }
/* === Terms === */
.e7 .terms-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 900px) { .e7 .terms-grid { grid-template-columns: repeat(2, 1fr); } }
.e7 .term { background: var(--bg); padding: 36px 26px 32px; display: flex; flex-direction: column; min-height: 220px; position: relative; overflow: hidden; transition: background .25s; }
.e7 .term:hover { background: var(--bg-soft); }
.e7 .term .v {
font-family: 'Akrobat','Manrope',sans-serif;
font-weight: 700;
font-size: clamp(40px, 4.6vw, 68px);
line-height: 0.9;
color: var(--white);
letter-spacing: -0.02em;
display: flex; align-items: baseline; gap: 4px;
flex-wrap: wrap;
}
.e7 .term .v .unit { color: var(--red); font-size: 0.4em; margin-left: 2px; font-weight: 700; }
.e7 .term .k { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,0.7); margin-top: auto; padding-top: 22px; }
@media (max-width: 600px) {
.e7 .term { padding: 24px 18px 22px; min-height: 170px; }
.e7 .term .v { font-size: clamp(32px, 9vw, 44px); }
.e7 .term .k { font-size: 12px; padding-top: 14px; line-height: 1.4; }
}
.e7 .terms-note { font-size: 14px; color: rgba(255,255,255,0.55); margin-top: 24px; max-width: 720px; line-height: 1.5; }
.e7 .terms-note b { color: var(--white); font-weight: 500; }
/* === FAQ === */
.e7 .faq-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; row-gap: 0; align-items: start; }
@media (max-width: 900px) { .e7 .faq-grid { grid-template-columns: 1fr; } }
.e7 .faq-item { border-bottom: 1px solid var(--line); padding: 0; }
.e7 .faq-grid > .faq-item:first-child,
.e7 .faq-grid > .faq-item:nth-child(2) { border-top: 1px solid var(--line); }
@media (max-width: 900px) { .e7 .faq-grid > .faq-item:nth-child(2) { border-top: none; } }
.e7 .faq-item__btn {
width: 100%;
display: flex; align-items: center; justify-content: space-between;
padding: 22px 0;
text-align: left;
font-family: 'Akrobat','Manrope',sans-serif;
font-weight: 700;
font-size: clamp(16px, 1.5vw, 20px);
letter-spacing: 0.005em;
text-transform: uppercase;
color: var(--white);
transition: color .2s;
gap: 20px;
line-height: 1.2;
}
.e7 .faq-item__btn:hover { color: var(--red); }
.e7 .faq-item__btn .ico {
flex-shrink: 0;
width: 32px; height: 32px;
border: 1px solid var(--line);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
transition: transform .35s cubic-bezier(.6,0,.2,1), background .25s, border-color .25s;
color: var(--white);
}
.e7 .faq-item.is-open .faq-item__btn .ico { transform: rotate(45deg); background: var(--red); border-color: var(--red); }
.e7 .faq-item__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4,0,.2,1); }
.e7 .faq-item.is-open .faq-item__body { grid-template-rows: 1fr; }
.e7 .faq-item__body-inner { overflow: hidden; min-height: 0; }
.e7 .faq-item__inner { padding: 0 0 24px; max-width: 100%; color: rgba(255,255,255,0.72); font-size: 15px; line-height: 1.55; }
/* === Form section === */
.e7 .form-section { background: var(--bg-deep); }
.e7 .form-section__layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .e7 .form-section__layout { grid-template-columns: 1fr; gap: 40px; } }
.e7 .form-section__side .h1 { margin-bottom: 20px; }
.e7 .form-section__side p { color: rgba(255,255,255,0.72); font-size: 16px; line-height: 1.55; max-width: 460px; margin: 0; }
.e7 .form-section__perks { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.e7 .form-section__perk { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.82); }
.e7 .form-section__perk .dot { width: 5px; height: 5px; background: var(--red); border-radius: 50%; flex-shrink: 0; }
.e7 .form-card { background: var(--bg); padding: 36px; border: 1px solid var(--line); }
@media (max-width: 600px) { .e7 .form-card { padding: 24px 20px; } }
.e7 .form-row { margin-bottom: 14px; }
.e7 .form-row--double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 500px) { .e7 .form-row--double { grid-template-columns: 1fr; } }
.e7 .field { position: relative; }
.e7 .field input, .e7 .field textarea, .e7 .field select {
width: 100%;
background: transparent;
color: var(--white);
border: 1px solid var(--line-strong);
border-radius: 2px;
padding: 22px 16px 10px;
outline: none;
transition: border-color .2s, background .2s;
font-size: 15px;
line-height: 1.3;
-webkit-appearance: none;
appearance: none;
}
.e7 .field textarea { resize: vertical; min-height: 88px; padding-top: 26px; font-family: inherit; }
.e7 .field input:focus, .e7 .field textarea:focus, .e7 .field select:focus { border-color: var(--red); background: rgba(218,33,39,0.04); }
.e7 .field label { position: absolute; left: 16px; top: 18px; font-size: 14px; color: rgba(255,255,255,0.5); letter-spacing: 0.01em; transition: all .18s; pointer-events: none; }
.e7 .field input:focus + label,
.e7 .field input:not(:placeholder-shown) + label,
.e7 .field textarea:focus + label,
.e7 .field textarea:not(:placeholder-shown) + label {
top: 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
}
.e7 .field--file {
display: flex; align-items: center; gap: 16px;
border: 1px dashed var(--line-strong);
padding: 18px 18px; cursor: pointer; border-radius: 2px;
transition: border-color .25s, background .25s;
}
.e7 .field--file:hover { border-color: var(--red); background: rgba(218,33,39,0.04); }
.e7 .field--file input[type="file"] { display: none; }
.e7 .field--file .ico-wrap { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(218,33,39,0.12); color: var(--red); border-radius: 2px; }
.e7 .field--file .name { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.78); flex: 1; min-width: 0; }
.e7 .field--file .name .label { display: block; font-size: 11px; color: var(--red); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; font-weight: 500; position: relative; left: 0; top: 0; pointer-events: auto; }
.e7 .field--file .name b { color: var(--white); font-weight: 500; word-break: break-word; }
.e7 .field-error { color: var(--red-light); font-size: 12px; margin-top: 4px; letter-spacing: 0.02em; }
.e7 .field--error input, .e7 .field--error textarea { border-color: var(--red); }
.e7 .consent { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0; cursor: pointer; user-select: none; position: relative; }
.e7 .consent input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.e7 .consent .box {
flex-shrink: 0; width: 20px; height: 20px;
border: 1px solid var(--line-strong); border-radius: 2px;
background: transparent;
display: flex; align-items: center; justify-content: center;
transition: border-color .2s, background .2s; margin-top: 1px;
}
.e7 .consent .box svg { width: 14px; height: 14px; color: var(--white); opacity: 0; transform: scale(0.6); transition: opacity .2s, transform .2s; }
.e7 .consent input:checked + .box { background: var(--red); border-color: var(--red); }
.e7 .consent input:checked + .box svg { opacity: 1; transform: scale(1); }
.e7 .consent input:focus-visible + .box { outline: 2px solid var(--red); outline-offset: 2px; }
.e7 .consent .text { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.e7 .consent .text a { color: var(--red); border-bottom: 1px solid rgba(218,33,39,0.4); }
.e7 .consent.is-error .box { border-color: var(--red); animation: e7-shake .3s; }
@keyframes e7-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.e7 .form-footnote { font-size: 12px; color: rgba(255,255,255,0.5); margin: 14px 0 0; line-height: 1.5; }
.e7 .form-success { background: rgba(74,211,119,0.08); border: 1px solid rgba(74,211,119,0.3); padding: 32px; text-align: center; }
.e7 .form-success .h3 { color: #4AD377; margin: 0 0 12px; }
.e7 .form-success p { color: rgba(255,255,255,0.78); margin: 0; }
/* === Footer === */
.e7 .footer { background: var(--bg-deep); border-top: 1px solid var(--line); padding-top: 64px; padding-bottom: 32px; }
.e7 .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .e7 .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 500px) { .e7 .footer__grid { grid-template-columns: 1fr; } }
.e7 .footer__col h4 { font-family: 'Formular','Inter',sans-serif; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); font-weight: 500; margin: 0 0 20px; }
.e7 .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.e7 .footer__col li { color: rgba(255,255,255,0.78); font-size: 14px; line-height: 1.5; }
.e7 .footer__col a,
.e7 .footer__col a:link,
.e7 .footer__col a:visited,
.e7 .footer__col a:active,
.e7 .footer__col a:focus {
color: rgba(255,255,255,0.78) !important;
font-size: 14px;
line-height: 1.5;
text-decoration: none !important;
transition: color .2s;
}
.e7 .footer__col a:hover { color: #ffffff !important; }
.e7 .footer__phone,
.e7 .footer__phone:link,
.e7 .footer__phone:visited { font-family: 'Akrobat','Manrope',sans-serif; font-weight: 700; font-size: 24px; color: #ffffff !important; margin-bottom: 12px; display: block; text-decoration: none !important; }
.e7 .footer__legal { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.6; margin: 0; }
.e7 .footer__legal b { color: rgba(255,255,255,0.7); font-weight: 500; }
.e7 .footer__bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; gap: 16px; flex-wrap: wrap; font-size: 12px; color: rgba(255,255,255,0.45); }
.e7 .footer__credit,
.e7 .footer__credit:link,
.e7 .footer__credit:visited {
color: rgba(255,255,255,0.78) !important;
border-bottom: 1px solid rgba(255,255,255,0.18);
transition: color .2s, border-color .2s;
padding-bottom: 1px;
}
.e7 .footer__credit:hover { color: #ffffff !important; border-bottom-color: var(--red); }
.e7 .footer__brand { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.e7 .footer__brand .logo-mark,
.e7 .footer__brand img.logo-mark {
width: 42px !important;
height: auto !important;
max-width: 42px !important;
flex-shrink: 0 !important;
color: var(--white);
display: block !important;
}
.e7 .footer__brand-text { display: flex; flex-direction: column; line-height: 1; }
.e7 .footer__brand-text .t1 { font-family: 'Akrobat','Manrope',sans-serif; font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: 0.02em; }
.e7 .footer__brand-text .t2 { font-size: 10px; color: var(--red); letter-spacing: 0.22em; text-transform: uppercase; margin-top: 4px; font-weight: 600; }
/* === Modal === */
.e7-modal-overlay {
position: fixed; inset: 0; z-index: 100;
background: rgba(10,15,21,0.78);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
padding: 16px;
opacity: 0; pointer-events: none;
transition: opacity .25s;
font-family: 'Formular','Inter',sans-serif;
color: var(--white);
}
.e7-modal-overlay.is-open { opacity: 1; pointer-events: auto; }
.e7-modal-overlay *, .e7-modal-overlay *::before, .e7-modal-overlay *::after { box-sizing: border-box; }
.e7-modal-overlay a { color: inherit; text-decoration: none; }
.e7-modal-overlay button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
.e7-modal-overlay input, .e7-modal-overlay textarea { font-family: inherit; font-size: inherit; }
.e7-modal-overlay .modal {
background: var(--bg);
border: 1px solid var(--line);
max-width: 680px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
padding: 44px;
position: relative;
transform: translateY(20px) scale(0.98);
transition: transform .3s cubic-bezier(.2,.7,.2,1);
scrollbar-width: thin;
scrollbar-color: rgba(218,33,39,0.5) transparent;
}
.e7-modal-overlay .modal::-webkit-scrollbar { width: 6px; }
.e7-modal-overlay .modal::-webkit-scrollbar-track { background: transparent; }
.e7-modal-overlay .modal::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; transition: background .25s; }
.e7-modal-overlay .modal::-webkit-scrollbar-thumb:hover { background: var(--red); }
.e7-modal-overlay.is-open .modal { transform: translateY(0) scale(1); }
.e7-modal-overlay .modal--small { max-width: 460px; }
@media (max-width: 600px) { .e7-modal-overlay .modal { padding: 32px 20px; } }
.e7-modal-overlay .modal__close {
position: absolute; top: 14px; right: 14px;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line); border-radius: 50%; color: var(--white);
transition: background .2s, color .2s;
}
.e7-modal-overlay .modal__close:hover { background: var(--red); border-color: var(--red); }
.e7-modal-overlay .modal__eyebrow { color: var(--red); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; font-weight: 500; }
.e7-modal-overlay .modal__title { margin: 0 0 20px; font-size: clamp(22px, 2.4vw, 30px); padding-right: 40px; font-family: 'Akrobat','Manrope',sans-serif; font-weight: 700; text-transform: uppercase; line-height: 0.98; }
.e7-modal-overlay .modal__list { display: flex; flex-direction: column; gap: 12px; }
.e7-modal-overlay .modal__list-item {
display: grid;
grid-template-columns: minmax(120px, auto) 1fr;
gap: 16px;
padding: 14px 16px;
background: var(--bg-soft);
border-left: 2px solid var(--red);
}
@media (max-width: 500px) { .e7-modal-overlay .modal__list-item { grid-template-columns: 1fr; gap: 6px; padding: 14px; } }
.e7-modal-overlay .modal__list-item .code { font-family: 'Akrobat','Manrope',monospace; font-weight: 800; font-size: 13px; letter-spacing: 0.04em; color: var(--red); white-space: nowrap; }
.e7-modal-overlay .modal__list-item .desc { font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.5; }
.e7-modal-overlay .modal__checklist { display: flex; flex-direction: column; gap: 14px; }
.e7-modal-overlay .modal__check { display: flex; gap: 14px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.e7-modal-overlay .modal__check .check { flex-shrink: 0; width: 22px; height: 22px; background: rgba(218,33,39,0.15); color: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; margin-top: 1px; }
/* form inside modal */
.e7-modal-overlay .form-row { margin-bottom: 14px; }
.e7-modal-overlay .form-row--double { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 500px) { .e7-modal-overlay .form-row--double { grid-template-columns: 1fr; } }
.e7-modal-overlay .field { position: relative; }
.e7-modal-overlay .field input, .e7-modal-overlay .field textarea {
width: 100%; background: transparent; color: var(--white);
border: 1px solid var(--line-strong); border-radius: 2px;
padding: 22px 16px 10px; outline: none;
transition: border-color .2s, background .2s;
font-size: 15px; line-height: 1.3;
}
.e7-modal-overlay .field textarea { resize: vertical; min-height: 88px; padding-top: 26px; }
.e7-modal-overlay .field input:focus, .e7-modal-overlay .field textarea:focus { border-color: var(--red); background: rgba(218,33,39,0.04); }
.e7-modal-overlay .field label { position: absolute; left: 16px; top: 18px; font-size: 14px; color: rgba(255,255,255,0.5); transition: all .18s; pointer-events: none; }
.e7-modal-overlay .field input:focus + label,
.e7-modal-overlay .field input:not(:placeholder-shown) + label,
.e7-modal-overlay .field textarea:focus + label,
.e7-modal-overlay .field textarea:not(:placeholder-shown) + label {
top: 8px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red);
}
.e7-modal-overlay .field-error { color: var(--red-light); font-size: 12px; margin-top: 4px; }
.e7-modal-overlay .field--error input, .e7-modal-overlay .field--error textarea { border-color: var(--red); }
.e7-modal-overlay .field--file {
display: flex; align-items: center; gap: 16px;
border: 1px dashed var(--line-strong);
padding: 18px 18px; cursor: pointer; border-radius: 2px;
transition: border-color .25s, background .25s;
}
.e7-modal-overlay .field--file:hover { border-color: var(--red); background: rgba(218,33,39,0.04); }
.e7-modal-overlay .field--file input[type="file"] { display: none; }
.e7-modal-overlay .field--file .ico-wrap { width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(218,33,39,0.12); color: var(--red); border-radius: 2px; }
.e7-modal-overlay .field--file .name { font-size: 13px; line-height: 1.4; color: rgba(255,255,255,0.78); flex: 1; min-width: 0; }
.e7-modal-overlay .field--file .name .label { display: block; font-size: 11px; color: var(--red); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; font-weight: 500; position: relative; left: 0; top: 0; pointer-events: auto; }
.e7-modal-overlay .field--file .name b { color: var(--white); font-weight: 500; word-break: break-word; }
.e7-modal-overlay .consent { display: flex; align-items: flex-start; gap: 12px; margin: 18px 0; cursor: pointer; user-select: none; position: relative; }
.e7-modal-overlay .consent input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.e7-modal-overlay .consent .box { flex-shrink: 0; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 2px; background: transparent; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; margin-top: 1px; }
.e7-modal-overlay .consent .box svg { width: 14px; height: 14px; color: var(--white); opacity: 0; transform: scale(0.6); transition: opacity .2s, transform .2s; }
.e7-modal-overlay .consent input:checked + .box { background: var(--red); border-color: var(--red); }
.e7-modal-overlay .consent input:checked + .box svg { opacity: 1; transform: scale(1); }
.e7-modal-overlay .consent .text { font-size: 12px; color: rgba(255,255,255,0.65); line-height: 1.5; }
.e7-modal-overlay .consent .text a { color: var(--red); border-bottom: 1px solid rgba(218,33,39,0.4); }
.e7-modal-overlay .consent.is-error .box { border-color: var(--red); animation: e7-shake .3s; }
.e7-modal-overlay .form-footnote { font-size: 12px; color: rgba(255,255,255,0.5); margin: 14px 0 0; line-height: 1.5; }
.e7-modal-overlay .form-success { background: rgba(74,211,119,0.08); border: 1px solid rgba(74,211,119,0.3); padding: 32px; text-align: center; }
.e7-modal-overlay .form-success .h3 { color: #4AD377; margin: 0 0 12px; font-family: 'Akrobat','Manrope',sans-serif; font-weight: 700; font-size: clamp(20px,2vw,28px); text-transform: uppercase; }
.e7-modal-overlay .form-success p { color: rgba(255,255,255,0.78); margin: 0; }
.e7-modal-overlay .btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 22px; font-weight: 500; font-size: 13px;
letter-spacing: 0.05em; text-transform: uppercase; border-radius: 2px;
cursor: pointer; border: 1px solid transparent; line-height: 1.1;
transition: background .25s, box-shadow .25s, transform .25s;
}
.e7-modal-overlay .btn--primary { background: var(--red); color: var(--white); }
.e7-modal-overlay .btn--primary:hover { background: var(--red-deep); box-shadow: 0 8px 24px rgba(218,33,39,0.3); }
.e7-modal-overlay .btn .arrow { width: 16px; height: 16px; display: inline-flex; transition: transform .25s; }
.e7-modal-overlay .btn:hover .arrow { transform: translateX(3px); }
/* === Scroll-reveal === */
.e7 .reveal {
opacity: 0;
transform: translateY(20px);
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.e7 .reveal.is-in { opacity: 1; transform: translateY(0); }
.e7 .reveal--stagger > * {
opacity: 0;
transform: translateY(16px);
transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .55s cubic-bezier(.2,.7,.2,1);
}
.e7 .reveal--stagger.is-in > * { opacity: 1; transform: translateY(0); }
.e7 .reveal--stagger.is-in > *:nth-child(1) { transition-delay: 0s; }
.e7 .reveal--stagger.is-in > *:nth-child(2) { transition-delay: .07s; }
.e7 .reveal--stagger.is-in > *:nth-child(3) { transition-delay: .14s; }
.e7 .reveal--stagger.is-in > *:nth-child(4) { transition-delay: .21s; }
.e7 .reveal--stagger.is-in > *:nth-child(5) { transition-delay: .28s; }
.e7 .reveal--stagger.is-in > *:nth-child(6) { transition-delay: .35s; }
.e7 .reveal--stagger.is-in > *:nth-child(7) { transition-delay: .42s; }
.e7 .reveal--stagger.is-in > *:nth-child(8) { transition-delay: .49s; }
@media (prefers-reduced-motion: reduce) {
.e7 .reveal, .e7 .reveal--stagger > * { opacity: 1; transform: none; transition: none; }
}
/* === Floating CTA === */
.e7-float-cta {
position: fixed;
bottom: 24px; right: 24px;
z-index: 40;
background: var(--red);
width: 56px; height: 56px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: white;
box-shadow: 0 16px 40px rgba(218,33,39,0.35), 0 4px 12px rgba(0,0,0,0.3);
transition: transform .25s, box-shadow .25s;
opacity: 0; transform: scale(0.5);
pointer-events: none;
border: 0;
cursor: pointer;
}
.e7-float-cta.is-visible { opacity: 1; transform: scale(1); pointer-events: auto; }
.e7-float-cta:hover { transform: scale(1.08); }
.e7-float-cta > span,
.e7-float-cta > span > svg,
.e7-float-cta__ico,
.e7-float-cta__ico > svg {
width: 24px !important;
height: 24px !important;
min-width: 24px !important;
min-height: 24px !important;
max-width: 24px !important;
max-height: 24px !important;
display: block !important;
flex-shrink: 0 !important;
transform: none !important;
aspect-ratio: 1 / 1 !important;
}
.e7-float-cta > span,
.e7-float-cta__ico { z-index: 2; position: relative; pointer-events: none; display: flex !important; align-items: center; justify-content: center; }
.e7-float-cta::after {
content: '';
position: absolute; inset: 0;
border-radius: 50%;
border: 2px solid var(--red);
animation: e7-pulse 2.4s infinite;
}
@keyframes e7-pulse {
0% { transform: scale(1); opacity: 0.7; }
100% { transform: scale(1.6); opacity: 0; }
}
@media (max-width: 700px) {
/* move to LEFT on mobile to avoid clash with Yandex / Chrome scroll-to-top buttons */
.e7-float-cta { left: 16px; right: auto; bottom: 16px; }
}
/* Section anchors */
.e7 section[id] { scroll-margin-top: 100px; }