/* Подключение локальных шрифтов */
@font-face {
  font-family: 'Exo 2';
  src: url('fonts/Exo2-Regular.woff2') format('woff2-variations'),
       url('fonts/Exo2-Regular.woff2') format('woff2'),
       url('fonts/Exo2-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Exo 2';
  src: url('fonts/Exo2-Italic.woff2') format('woff2-variations'),
       url('fonts/Exo2-Italic.woff2') format('woff2'),
       url('fonts/Exo2-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
:root 
{
  --dark: #ECECE7;
  --dark-95: color-mix(in srgb, var(--dark) 75%, transparent);
  --accent: #1E344A;
  --accent2: #020D21;
  --accent-hover: #286AB2;
  --white: #F4F4F4;
  --radius: 2px;
  --transition: 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);

  --op-04: 4%; --op-06: 6%; --op-10: 10%; --op-15: 15%; --op-20: 20%; 
  --op-25: 25%; --op-30: 30%; --op-35: 35%; --op-40: 40%; --op-55: 55%; 
  --op-70: 70%; --op-75: 75%; --op-80: 80%; --op-85: 85%; --op-90: 90%; 
  --op-95: 95%;

  --img-1: url('foto-uslugi/MU_800x600w.webp');
  --img-2: url('foto-uslugi/RU_800x600w.webp');
  --img-3: url('foto-uslugi/TU_800x600w.webp');
  --img-4: url('foto-uslugi/NU_800x600w.webp');

  --img-onas1: url('foto-onas/o_nas3_600x800w.webp');
  --img-onas2: url('foto-onas/o_nas1_600x800w.webp');
  --img-onas3: url('foto-onas/o_nas4_600x800w.webp');
  --photo-opacity: 0.25;
} 

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: 'Exo 2', sans-serif; background: var(--accent2); color: var(--dark); line-height: 1.5; min-height: 100vh; }
.icon { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; vertical-align: middle; margin-right: 8px; opacity: 0.7; }
.bg-photo { position: fixed; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.2s ease-in-out; }
.bg-photo.active { opacity: 1; }
.section { position: relative; z-index: 1; min-height: 100vh; padding: 0 clamp(24px, 4vw, 56px); }    
.section::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) var(--op-06), transparent) 0%, color-mix(in srgb, var(--accent) var(--op-06), transparent) 28%, color-mix(in srgb, var(--accent) var(--op-95), transparent) 28%, color-mix(in srgb, var(--accent) var(--op-95), transparent) 100%); pointer-events: none; }
.section-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; min-height: 100vh; padding-top: 100px; padding-bottom: 60px; }

/* ===== МЕНЮ ===== */
.topbar { position: sticky; top: 0; z-index: 99; padding: 0 24px; background: color-mix(in srgb, var(--accent2) var(--op-95), transparent); }
.topbar-inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; justify-content: center; position: relative; }
.nav-wrap { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; }
.nav-link { color: color-mix(in srgb, var(--dark) 95%, transparent); text-decoration: none; font-weight: 600; font-size: 18px; padding-top: 4px; padding-bottom: 6.2px; padding-left: 14px; padding-right: 14px; transition: var(--transition); white-space: nowrap; position: relative; cursor: pointer; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav-link::after { content: ''; position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%) scaleX(0); width: 18px; height: 2px; background: var(--accent-hover); transition: transform 0.25s ease; }
.nav-link:hover { color: var(--white); }
.nav-link:hover::after { transform: translateX(-50%) scaleX(1); }
.dropdown { position: relative; flex-shrink: 0; }
.dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); background: color-mix(in srgb, var(--accent2) var(--op-95), transparent); backdrop-filter: blur(10px); z-index: 200; text-align: center; padding: 8px 0; min-width: 240px; display: none; }
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a { display: block; padding: 10px 20px; color: var(--white); text-decoration: none; font-size: 18px; font-weight: 400; transition: var(--transition); }
.dropdown-menu a:hover { color: var(--accent-hover); }
.dropdown .nav-link .arrow { display: inline-block; width: 8px; height: 8px; transition: var(--transition); border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.dropdown:hover .nav-link .arrow { transform: translateY(2px) rotate(-135deg); }
.vk-logo-link { display: inline-flex; align-items: center; justify-content: center; width: 140px; flex-shrink: 0; transition: 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); text-decoration: none; padding: 0px 14px; }
.vk-logo-link svg { width: 100%; height: auto; display: block; margin-top: 1px; }
.vk-logo-link .st0 { fill: #ffffff; }
.vk-logo-link .st1 { fill: #ECECE7; transition: fill 0.35s ease; }
.vk-logo-link .st2 { fill: #020D21; transition: fill 0.35s ease; }
.vk-logo-link:hover .st1 { fill: #0077FF; }
.vk-logo-link:hover .st2 { fill: #ffffff; }
.nav-more { display: none; position: relative; flex-shrink: 0; }
.hamburger-btn { display: flex; flex-direction: column; gap: 5px; padding: 0 10px; cursor: pointer; background: none; border: none; width: 44px; align-items: center; justify-content: center; }
.hamburger-btn span { display: block; width: 22px; height: 2px; background: rgba(244,244,244,0.9); transition: var(--transition); }
.nav-more.open .hamburger-btn span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-more.open .hamburger-btn span:nth-child(2) { opacity: 0; }
.nav-more.open .hamburger-btn span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-more-dropdown { display: none; position: absolute; top: 100%; left: 50%;transform: translateX(-50%); background: color-mix(in srgb, var(--accent2) var(--op-95), transparent); backdrop-filter: blur(10px); z-index: 102; text-align: center; padding: 8px 0; min-width: 200px; }
.nav-more-dropdown a, .nav-more-dropdown .nav-link { display: block; padding: 10px 18px; color: var(--white); text-decoration: none; font-size: 18px; font-weight: 400; transition: var(--transition); }
.nav-more-dropdown a:hover, .nav-more-dropdown .nav-link:hover { color: var(--accent-hover); }
.nav-more-dropdown .nav-link::after { display: none; }
.nav-more-dropdown .vk-logo-link { width: 120px; padding: 10px; margin: 0 auto; display: flex; }
.nav-more-dropdown .vk-logo-link .st1 { fill: #ECECE7; }
.nav-more-dropdown .vk-logo-link .st2 { fill: #020D21; }
.nav-more-dropdown .vk-logo-link:hover .st1 { fill: #0077FF; }
.nav-more-dropdown .vk-logo-link:hover .st2 { fill: #ffffff; }

/* Мобильная панель */
.mob-panel { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: color-mix(in srgb, var(--accent2) var(--op-95), transparent); backdrop-filter: blur(12px); z-index: 200; flex-direction: column; padding: 80px 24px 40px; overflow-y: auto; }
.mob-panel.open { display: flex; }
.mob-panel-close { position: absolute; top: 16px; right: 20px; background: none; border: none; color: var(--white); font-size: 28px; cursor: pointer; padding: 8px; transition: var(--transition); }
.mob-panel-close:hover { color: var(--accent-hover); }
.mob-panel a { display: block; padding: 14px 0; color: var(--white); text-decoration: none; font-size: 16px; font-weight: 500; border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent); transition: var(--transition); }
.mob-panel a:hover { color: var(--accent-hover); }
.mob-panel .mob-dropdown { border-bottom: 1px solid color-mix(in srgb, var(--white) 10%, transparent); }
.mob-panel .mob-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; color: var(--white); font-size: 16px; font-weight: 500; cursor: pointer; transition: var(--transition); }
.mob-panel .mob-dropdown-toggle:hover { color: var(--accent-hover); }
.mob-panel .mob-dropdown-toggle .mob-arrow { display: inline-block; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: var(--transition); }
.mob-panel .mob-dropdown.open .mob-dropdown-toggle .mob-arrow { transform: rotate(-135deg); }
.mob-panel .mob-dropdown-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.mob-panel .mob-dropdown.open .mob-dropdown-menu { max-height: 200px; }
.mob-panel .mob-dropdown-menu a { font-size: 16px; font-weight: 400; padding: 10px 0 10px 16px; border-bottom: none; color: color-mix(in srgb, var(--white) 70%, transparent); }
.mob-panel .mob-dropdown-menu a:hover { color: var(--accent-hover); }
.mob-panel .mob-vk-wrap { display: flex; justify-content: center; padding: 20px 0; }
.mob-panel .vk-logo-link { padding: 0; border-bottom: none;width: 120px; }
.mob-hamburger { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 10px; width: 44px; height: 44px; align-items: center; justify-content: center; }
.mob-hamburger span { display: block; width: 22px; height: 2px; background: rgba(244,244,244,0.9); transition: var(--transition); }
.topbar.hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; }

/* ===== ДЕСКТОП ===== */
.hero-title-row { display: flex; align-items: center; gap: clamp(24px, 4vw, 48px); margin-top: 96px; }
.logo { flex-shrink: 0; }
.logo svg { height: clamp(160px, 22vw, 200px); width: auto; filter: drop-shadow(0 4px 16px rgba(0,0,0,0.5)); }
.logo svg polygon, .logo svg path { fill: var(--dark); }
.logo svg text { fill: var(--dark); }
.hero-heading { text-align: left; }
.hero-heading h1 { font-size: clamp(34px, 3vw, 42px); font-weight: 600; letter-spacing: 1px; line-height: 1.15; color: var(--dark); }
.hero-heading h1 span { display: block; }
.tagline { font-size: clamp(14px, 2vw, 18px); max-width: 650px; opacity: 0.85; line-height: 1.6; color: var(--dark); }
.heading-link { color: var(--dark); text-decoration: none; border-bottom: none; transition: color 0.3s ease, border-bottom 0.3s ease; }
.heading-link:hover { color: var(--accent-hover); border-bottom-color: var(--accent-hover); }
.contacts-row { display: flex; flex-wrap: wrap; gap: 14px 48px; justify-content: center; margin-top: 8px; }
.contact-item { display: flex; align-items: center; gap: 0px; font-size: clamp(18px, 2.2vw, 30px); font-weight: 500; color: var(--dark); text-decoration: none; transition: var(--transition); }
.contact-item:hover { color: var(--accent-hover); }
.contact-item .icon { width: 20px; height: 20px; }
.contact-address { font-size: clamp(14px, 2vw, 18px); color: var(--dark-95); }
.scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 0px; margin-top: 20px; padding-bottom: 20px; cursor: pointer; text-decoration: none; transition: transform 0.5s ease; }
.scroll-hint span { font-size: 14px; font-weight: 500; letter-spacing: 2px; color: var(--dark); text-transform: uppercase; transition: all 0.6s ease; }
.scroll-hint .arrow-icon { width: clamp(14px, 3vw, 28px); height: clamp(28px, 3vw, 54px); transition: all 0.6s ease; animation: gentleFloat 3s ease-in-out infinite; }
.scroll-hint .arrow-icon svg { width: 100%; height: 100%; display: block; }
.scroll-hint .arrow-icon svg polyline { stroke: var(--dark-95); transition: stroke 0.6s ease; }
@keyframes gentleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.scroll-hint:hover { transform: translateY(4px); }
.scroll-hint:hover span { color: var(--dark); letter-spacing: 3px; }
.scroll-hint:hover .arrow-icon { animation: none; transform: translateY(4px); }
.scroll-hint:hover .arrow-icon svg polyline { stroke: var(--accent-hover); }
.cta-button { padding: 14px 36px; background: var(--accent-hover); color: var(--dark); border: 2px solid transparent; border-radius: 2px; font-family: 'Exo 2', sans-serif; font-size: 22px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; outline: none; margin-top: 24px; }
.cta-button:hover { transform: scale(1.05); border-color: color-mix(in srgb, var(--dark) var(--op-80), transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--dark) var(--op-25), transparent), 0 0 4px color-mix(in srgb, var(--dark) var(--op-40), transparent); }

/* ===== УСЛУГИ ===== */
.services-section { width: 100%; padding: 60px clamp(24px, 4vw, 56px); position: relative; z-index: 1; background: var(--accent2); }
.services-container { max-width: 1400px; margin: 0 auto; }
.services-grid { display: grid; grid-template-columns: 3fr 5fr; gap: 60px; align-items: start; }
.services-left { display: flex; flex-direction: column; position: sticky; top: 100px; }
.services-left h2 { font-size: clamp(36px, 5vw, 48px); font-weight: 700; color: var(--dark); margin-bottom: 20px; }
.services-left .services-subtitle { font-size:clamp(14px, 4vw, 18px); color: var(--dark-95); line-height: 1.7; max-width: 420px; }
.services-scroll { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.service-card { background: color-mix(in srgb, var(--accent) var(--op-95), transparent); border: 1px solid color-mix(in srgb, var(--dark) var(--op-10), transparent); border-radius: var(--radius); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; }
.service-card:hover { transform: translateY(-6px); border-color: var(--accent-hover); }
.service-card .card-photo { width: 100%; aspect-ratio: 16/10; background: center/cover no-repeat; }
.service-card:nth-child(1) .card-photo { background-image: var(--img-1); }
.service-card:nth-child(2) .card-photo { background-image: var(--img-2); }
.service-card:nth-child(3) .card-photo { background-image: var(--img-3); }
.service-card:nth-child(4) .card-photo { background-image: var(--img-4); }
.service-card .card-body { padding: 24px; display: flex; flex-direction: column; gap: 12px; flex: 1;text-align: center; align-items: center; }
.service-card .card-body .card-title { font-size: 22px; font-weight: 800; color: var(--dark); }
.service-card .card-body .card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.service-card .card-body .card-meta .price { font-size: 15px; font-weight: 700; color: var(--dark); }
.service-card .card-body .card-meta .divider { width: 1px; height: 16px; background: color-mix(in srgb, var(--dark) var(--op-25), transparent); }
.service-card .card-body .card-meta .duration { font-size: 15px; color: var(--accent-hover); }
.service-card .card-body .card-meta .agreement { font-size: 15px; color: var(--accent-hover); }
.service-card .card-body .card-desc { font-size: clamp(14px, 4vw, 16px); color: var(--dark-95); line-height: 1.5; }
.btn-outline { display: inline-block; padding: 14px 32px; background: var(--accent-hover); color: var(--dark); border: 2px solid transparent; border-radius: 2px; font-family: 'Exo 2', sans-serif; font-size: 18px; font-weight: 600; width: 240px;  cursor: pointer; transition: all 0.25s ease; text-decoration: none; align-self: center; margin-top: auto; }
.btn-outline:hover { transform: scale(1.05); border-color: color-mix(in srgb, var(--dark) var(--op-80), transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--dark) var(--op-25), transparent), 0 0 4px color-mix(in srgb, var(--dark) var(--op-40), transparent); }
.test-section::before { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) var(--op-95), transparent) 0%, color-mix(in srgb, var(--accent) var(--op-30), transparent) 100%); }
.test-section .section-inner { justify-content: center; }
.test-section h2 { font-size: clamp(28px, 4vw, 48px); font-weight: 700; color: var(--dark); letter-spacing: 1px; }
.test-section p { font-size: clamp(14px, 4vw, 18px); /*clamp(14px, 1.8vw, 18px); opacity: 0.7;*/color: var(--dark-95); line-height: 1.7;  max-width: 500px; }

/* Модальное окно */
.modal-overlay { position: fixed; inset: 0; z-index: 300; background: color-mix(in srgb, var(--accent) var(--op-95), transparent); display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal { background: color-mix(in srgb, var(--accent2) var(--op-75), transparent); border: 1px solid color-mix(in srgb, var(--accent2) var(--op-75), transparent); border-radius: 2px; padding: 24px 20px 20px; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 20px 60px color-mix(in srgb, var(--accent2) var(--op-55), transparent); }
.modal-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--dark-95); font-size: 34px; line-height: 1; cursor: pointer; padding: 4px 8px; transition: color 0.28s; }
.modal-close:hover { color: var(--dark); }
.modal h3 { font-size: 28px; font-weight: 600; color: var(--dark); margin-bottom: 4px; text-align: center; }
.modal-subtitle { font-size: 14px; color: var(--dark-95); margin-bottom: 16px; line-height: 1.5; text-align: center; }
.modal form { display: flex; flex-direction: column; gap: 8px; }
.modal input, .modal textarea { padding: 12px 14px; background: color-mix(in srgb, var(--dark) var(--op-06), transparent); border: 1px solid color-mix(in srgb, var(--dark) var(--op-15), transparent); border-radius: 2px; color: var(--dark); font-family: 'Exo 2', sans-serif; font-size: 14px; outline: none; transition: border-color 0.28s; }
.modal input::placeholder, .modal textarea::placeholder { color: var(--dark-95); }
.modal input:focus, .modal textarea:focus { border-color: var(--accent-hover); }
.custom-select { position: relative; }
.custom-select select { width: 100%; padding: 12px 40px 12px 16px; background: color-mix(in srgb, var(--dark) var(--op-06), transparent); border: 1px solid color-mix(in srgb, var(--dark) var(--op-15), transparent); border-radius: 2px; color: var(--dark); font-family: 'Exo 2', sans-serif; font-size: 14px; outline: none; appearance: none; cursor: pointer; transition: border-color 0.28s; }
.custom-select select:focus { border-color: var(--accent-hover); }
.custom-select::after { content: ''; position: absolute; right: 16px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-right: 2px solid var(--dark-95); border-bottom: 2px solid var(--dark-95); pointer-events: none; }
.custom-select select option { background: color-mix(in srgb, var(--accent2) var(--op-90), transparent); color: var(--dark); }
.file-upload-label { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: color-mix(in srgb, var(--dark) var(--op-06), transparent); border: 2px dashed color-mix(in srgb, var(--dark) var(--op-20), transparent); border-radius: 2px; cursor: pointer; transition: border-color 0.28s; }
.file-upload-label:hover { border-color: var(--accent-hover); }
.file-upload-label span { font-size: 14px; color: var(--dark-95); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal button[type="submit"] { padding: 14px 32px; background: var(--accent-hover); color: var(--dark); border: 2px solid transparent; border-radius: 2px; font-family: 'Exo 2', sans-serif; font-size: 18px; font-weight: 600; cursor: pointer; transition: all 0.25s ease; align-self: center; margin-top: 2px; width: 240px;  }
.modal button[type="submit"]:hover { background: var(--accent-hover); transform: scale(1.04); border-color: color-mix(in srgb, var(--dark) var(--op-70), transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--dark) var(--op-20), transparent), 0 0 4px color-mix(in srgb, var(--dark) var(--op-30), transparent); }
#form-message { margin-top: 12px; font-size: 14px; display: none; }

/* ===== СЕКЦИЯ ОТРАСЛИ ===== */
.stages-section { position: relative; overflow: hidden; background: var(--accent); min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.stages-container { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 40px clamp(24px, 4vw, 40px); width: 100%; display: flex; flex-direction: column; justify-content: center; min-height: 100vh; }
.stages-header { text-align: center; margin-bottom: 28px; }
.stages-header h2 { font-size: clamp(36px, 5vw, 48px); font-weight: 700; color: var(--dark); }
.stages-header .stages-desc { font-size: clamp(14px, 4vw, 18px); color: var(--dark-95); max-width: 600px; margin: 12px auto 0; }
.stages-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 16px; flex: 1; align-content: center; }
.stage-card { position: relative; text-align: center; padding: 40px 12px 16px;  border: 1px solid var(--accent2);  display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; height: 100%; transition: var(--transition); overflow: hidden; }
.stage-card::before { content: ''; position: absolute; inset: 0; background: var(--card-bg) center/cover no-repeat; opacity: var(--photo-opacity); z-index: 0; }
.stage-card::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent2) var(--op-75), transparent); z-index: 0; }
.stage-card > * { position: relative; z-index: 1; }
.stage-card:hover { border-color: var(--accent-hover); transform: translateY(-4px); }
.stage-card:hover::after { background: color-mix(in srgb, var(--accent-hover) var(--op-55), transparent); }
.stage-num { font-size: 48px; font-weight: 900; line-height: 1; color: var(--accent); }
.stage-card h4 { font-size: 18px; font-weight: 700; color: var(--dark); min-height: 40px; display: flex; align-items: center; justify-content: center; }
.stage-card .stage-desc { font-size: clamp(12px, 4vw, 14px); color: var(--dark-95); line-height: 1.4; }
.stages-nav { display: none; align-items: center; gap: 12px; margin-top: 16px; justify-content: center; }
.stages-pagination { display: flex; gap: 8px; }
.stages-pagination .dot { width: 8px; height: 8px; background: color-mix(in srgb, var(--dark) var(--op-25), transparent); cursor: pointer; border: none; border-radius: 1px; }
.stages-pagination .dot.active { width: 24px; background: var(--dark); }

/* иконки */
.stages-section { position: relative; overflow: hidden; }
.stages-watermark-left { display: block; position: absolute; top: 0; height: 100%; z-index: 0; pointer-events: none; opacity: 0.03; left: 68vw; width: 50vw; }
.stages-watermark-left svg { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: auto; height: 100%; }
.stages-watermark-right { display: block; position: absolute; top: 0; height: 100%; z-index: 0; pointer-events: none; opacity: 0.03; right: 76vw; width: 50vw; }
.stages-watermark-right svg { position: absolute; right: 0; top: 50%; transform: translate(0, -50%); width: auto; height: 100%; }
.stages-watermark-single { display: none; }
.stages-watermark-left svg polygon, .stages-watermark-left svg path,
.stages-watermark-right svg polygon, .stages-watermark-right svg path { fill: var(--dark); }
.stages-watermark-left svg text, .stages-watermark-right svg text { fill: var(--dark); }

/* ===== СЕКЦИЯ "О КОМПАНИИ" ===== */
.about-section { background: color-mix(in srgb, var(--accent) var(--op-95), transparent); min-height: 100vh; display: flex; align-items: stretch; position: relative; z-index: 1;padding: 60px clamp(24px, 4vw, 56px);}
.about-container { max-width: 1400px; margin: 0 auto;  width: 100%; display: grid; grid-template-columns: 2fr 2fr 3fr; gap: 24px; align-items: stretch; }
.about-photo { background: var(--img-onas1) center/cover no-repeat; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--dark-95); font-size: 14px; transition: transform 0.25s ease, border-color 0.25s ease; position: relative; overflow: hidden; min-height: 320px; height: 100%; border: 1px solid transparent; }
.about-photo:hover { transform: translateY(-4px); border-color: var(--accent-hover); }
.about-photo::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, #020D21 25%, transparent); pointer-events: none; z-index: 1; }
.about-photo > * { position: relative; z-index: 2; }
.about-photo-stack { display: flex; flex-direction: column; gap: 24px; height: 100%; }
.about-photo-half { flex: 1; position: relative; overflow: hidden; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; transition: transform 0.25s ease, border-color 0.25s ease; min-height: 140px; border: 1px solid transparent; }
.about-photo-half:first-child { background: var(--img-onas2) center/cover no-repeat; }
.about-photo-half:last-child { background: var(--img-onas3) center/cover no-repeat; }
.about-photo-half:hover { transform: translateY(-4px); border-color: var(--accent-hover); }
.about-photo-half::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, #020D21 25%, transparent); pointer-events: none; }
.about-photo-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 36px; background: var(--accent-hover); color: var(--dark); font-weight: 600; font-size: 18px; text-decoration: none; border-radius: var(--radius); transition: all 0.25s ease; cursor: pointer; font-family: 'Exo 2', sans-serif; border: 2px solid transparent; white-space: nowrap; letter-spacing: 0.3px; z-index: 2; position: relative; width: 240px; box-sizing: border-box; text-align: center;}
.about-photo-btn:hover { transform: scale(1.03); border-color: color-mix(in srgb, var(--dark) 80%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--dark) 25%, transparent), 0 0 4px color-mix(in srgb, var(--dark) 40%, transparent); }
.about-photo-btn svg { width: 18px; height: 18px; flex-shrink: 0; stroke: var(--dark); stroke-width: 2; }
.about-text-col { display: flex; flex-direction: column; justify-content: flex-start; padding: 8px 4px 8px 8px; position: sticky; top: 100px; align-self: start; height: fit-content; max-height: calc(100vh - 120px); overflow-y: auto; scrollbar-width: thin; }
.about-text-col h2 { font-size: clamp(36px, 5vw, 48px); font-weight: 700; color: var(--dark); margin-bottom: 16px; letter-spacing: -0.02em; }
.about-text-col p { font-size: clamp(14px, 4vw, 18px); color: var(--dark-95); line-height: 1.7; margin-bottom: 16px; }
.about-text-col .highlight { color: var(--accent-hover); font-weight: 700; }

/* ===== СЕКЦИЯ ВОПРОСЫ И ОТВЕТЫ ===== */
.faq-section { background: color-mix(in srgb, var(--accent) var(--op-95), transparent); position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; }
.faq-answer-content { background: var(--dark); padding: 16px 24px; }
.faq-answer-content p { color: var(--accent2); }
.faq-container { max-width: 1400px; margin: 0 auto; padding: 60px clamp(24px, 4vw, 56px); width: 100%; }
.faq-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 60px; align-items: start; }
.faq-left { display: flex; flex-direction: column; justify-content: flex-start; position: sticky; top: 100px; }
.faq-left h2 { font-size: clamp(36px, 5vw, 48px); font-weight: 700; color: var(--dark); margin-bottom: 20px; }
.faq-intro-text { font-size: clamp(14px, 4vw, 18px); color: var(--dark-95); margin-bottom: 24px; max-width: 100%; line-height: 1.7; }
.faq-intro-short { display: none; }
.faq-contact-block { display: flex; flex-direction: column; gap: 16px; }
.faq-contact-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.faq-contact-label { font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--dark); }
.faq-contact-row { display: flex; align-items: center; gap: 0; color: var(--dark-95); font-size: 16px; text-decoration: none; transition: var(--transition); }
.faq-contact-row .icon { margin-right: 8px; }
a.faq-contact-row:hover { color: var(--accent-hover); }
.faq-phone-group { display: flex; flex-direction: row; gap: 16px; flex-wrap: wrap; }
.faq-btn-wrap { margin-top: 8px; }
.btn-strip { display: inline-block; padding: 14px 36px; background: var(--accent-hover); color: var(--dark); font-weight: 600; font-size: 22px; border-radius: var(--radius); text-decoration: none; cursor: pointer; transition: var(--transition); border: 2px solid transparent; }
.btn-strip:hover { transform: scale(1.05); border-color: color-mix(in srgb, var(--dark) var(--op-80), transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--dark) var(--op-25), transparent); }
.faq-contact-desktop { display: block; }   /* ← на десктопе этот блок ВИДЕН */
.faq-contact-mobile { display: none; }     /* ← на десктопе этот блок СКРЫТ */
.faq-accordion { display: flex; flex-direction: column; gap: 8px; }
.faq-item { background: color-mix(in srgb, var(--accent2) var(--op-75), transparent); border: 1px solid var(--accent2); border-radius: var(--radius); overflow: hidden; transition: var(--transition); }
.faq-item:hover { border-color: var(--accent-hover); }
.faq-item.active { border-color: var(--accent-hover); }
.faq-question { display: flex; justify-content: space-between; align-items: center; padding: 18px 24px; cursor: pointer; }
.faq-question-text { font-size: 16px; font-weight: 600; color: var(--dark); }
.faq-arrow { transition: var(--transition); color: var(--dark); }
.faq-item.active .faq-arrow { transform: rotate(90deg); color: var(--accent-hover); }
.faq-item.active .faq-question-text { color: var(--accent-hover); }
.faq-answer-wrapper { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.faq-item.active .faq-answer-wrapper { max-height: 300px; }
.faq-answer-content { padding: 0 24px 18px; font-size: 14px; color: var(--dark-95); line-height: 1.7; }    

/* ===== ПОРТФОЛИО ===== */
.portfolio-section { position: relative; background: var(--accent2); z-index: 1;  min-height: 100vh; padding: 60px clamp(24px, 4vw, 56px); }
.portfolio-container { max-width: 1400px; margin: 0 auto; }
.portfolio-header { text-align: center; margin-bottom: 32px; position: sticky; top: 0; z-index: 10;  background: var(--accent2); padding: 20px 0 16px; }
.portfolio-header h2 { font-size: clamp(36px, 5vw, 48px); font-weight: 700; color: var(--dark); margin-bottom: 12px; }
.portfolio-subtitle { font-size: clamp(14px, 4vw, 18px); color: var(--dark-95); margin-bottom: 24px; line-height: 1.7; }
.filter-bar { display: flex; flex-wrap: nowrap; gap: 8px; justify-content: center; align-items: center; }
.filter-btn { padding: 8px 18px; border: 1px solid color-mix(in srgb, var(--dark) var(--op-25), transparent); background: transparent; color: var(--dark); font-family: 'Exo 2', sans-serif; font-size: 14px; font-weight: 600; border-radius: var(--radius); cursor: pointer; transition: var(--transition); white-space: nowrap; }
.filter-btn:hover, .filter-btn.active { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--white); }
.filter-more { position: relative; flex-shrink: 0; }
.filter-more-btn { padding: 8px 18px; border: 1px solid color-mix(in srgb, var(--dark) var(--op-25), transparent); background: transparent; color: var(--dark); font-family: 'Exo 2', sans-serif; font-size: 14px; font-weight: 600; border-radius: var(--radius); cursor: pointer; transition: var(--transition); white-space: nowrap; }
.filter-more-btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--white); }
.filter-more-dropdown { display: none; position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--accent2); border: 1px solid color-mix(in srgb, var(--dark) var(--op-25), transparent); border-radius: var(--radius); z-index: 20; flex-direction: column; padding: 4px; min-width: 120px; }
.filter-more-dropdown.open { display: flex; }
.filter-more-dropdown .filter-btn { border: none; width: 100%; text-align: left; }
.filter-select-wrap { display: none; justify-content: center; }
.filter-select { padding: 12px 40px 12px 18px; border: 1px solid var(--accent-hover); background: var(--accent-hover); color: var(--white); font-family: 'Exo 2', sans-serif; font-size: clamp(16px, 3.5vw, 18px); font-weight: 600; border-radius: var(--radius); cursor: pointer; width:  calc(95vw - 48px); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.filter-select option { background: var(--accent2); color: var(--dark); padding: 12px; }
.portfolio-cards { display: grid; gap: 20px; }
@media (min-width: 1025px) { .portfolio-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 769px) and (max-width: 1024px) { .portfolio-cards { grid-template-columns: repeat(2, 1fr); } }
.project-card { position: relative; background: center/cover no-repeat; border-radius: var(--radius); padding: 20px 20px 20px 20px; border: 1px solid var(--accent2); transition: var(--transition); display: flex; flex-direction: column; gap: 4px; overflow: hidden; cursor: pointer; min-height: 260px; }
.project-card::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) var(--op-85), transparent); z-index: 0; transition: var(--transition); }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.3);border-color: var(--accent-hover); }
.project-card:hover::after { background: color-mix(in srgb, var(--accent) var(--op-55), transparent); }
.project-card > *:not(.client-logo) { position: relative; z-index: 2; }
.project-top-row { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-bottom: 16px; }

/*здесь по лого*/
.client-logo { position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: flex-start; padding: 0px 0px; opacity: 0.35; transition: var(--transition); z-index: 2; }
.project-card:hover .client-logo { opacity: 0.65; }
.client-logo img { display: block; max-width: 100%; max-height: 100%; }
.project-year { font-size: 32px; font-weight: 900; color: var(--accent-hover); line-height: 1; }
.project-org { font-size: 16px; font-weight: 700; color: var(--dark); }
.project-meta { font-size: 16px; color: color-mix(in srgb, var(--dark) var(--op-55), transparent); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.project-meta span { display: flex; align-items: center; }
.project-object { font-size: 15px; font-weight: 600; color: var(--dark); }
.project-work { font-size: 14px; color: var(--dark-95); display: flex; align-items: center; }
.pagination { display: none; justify-content: center; gap: 8px; margin-top: 20px; }
.pagination .dot { width: 8px; height: 8px; background: color-mix(in srgb, var(--dark) var(--op-25), transparent); border-radius: 1px; cursor: pointer; border: none; transition: var(--transition); }
.pagination .dot.active { width: 24px; background: var(--dark); }
.modal-gallery-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 999; align-items: center; justify-content: center; }
.modal-gallery-overlay.active { display: flex; }
.modal-gallery-close { position: absolute; top: 20px; right: 30px; width: 44px; height: 44px; border-radius: var(--radius); background: color-mix(in srgb, var(--white) var(--op-06), transparent); border: none; color: var(--white); font-size: 20px; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; z-index: 10; font-family: 'Exo 2', sans-serif; }
.modal-gallery-close:hover { background: var(--accent-hover); }
.modal-gallery-content { background: var(--accent2); border-radius: var(--radius); padding: 24px; max-width: 90vw; width: 80%; max-height: 90vh; display: flex; flex-direction: column; gap: 12px; position: relative; }
.modal-gallery-wrap { position: relative; display: flex; align-items: center; }
.modal-gallery { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.modal-gallery::-webkit-scrollbar { display: none; }
.modal-gallery img { flex: 0 0 90%; scroll-snap-align: center; width: 90%; aspect-ratio: 16/9; object-fit: contain; border-radius: var(--radius); }
.modal-gallery img:first-child { margin-left: 5%; }
.modal-gallery img:last-child { margin-right: 5%; }
.modal-gallery-arrow { display: none; position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 2px solid color-mix(in srgb, var(--white) var(--op-30), transparent); background: color-mix(in srgb, var(--accent2) var(--op-50), transparent); color: var(--white); font-size: 16px; cursor: pointer; transition: var(--transition); align-items: center; justify-content: center; border-radius: var(--radius); z-index: 5; font-family: 'Exo 2', sans-serif; }
.modal-gallery-arrow:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.modal-gallery-arrow.left { left: 0; }
.modal-gallery-arrow.right { right: 0; }
.modal-info { display: flex; flex-direction: column; gap: 6px; font-size: 16px; color: var(--dark-95); }
.modal-info .modal-row { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.modal-info .modal-row span { display: flex; align-items: center; }
.modal-info .modal-org-name { font-size: 18px; font-weight: 700; color: var(--dark); }
.modal-info .modal-year { font-size: 16px; font-weight: 400; color: var(--dark-95); }
.modal-info .modal-location { font-size: 16px; font-weight: 400; color: var(--dark-95); }
.modal-info .modal-object-name { font-size: 18px; font-weight: 700; color: var(--dark); }
.modal-info .modal-work { font-size: 16px; font-weight: 400; color: var(--dark-95); }

/* ===== СТРАНИЦА ВАКАНСИИ + ПОДВАЛ (ОДИН ЭКРАН) ===== */
.page-wrapper { display: flex; flex-direction: column; min-height: 100vh;  position: relative; z-index: 1; }
.page-wrapper .section { flex: 1 1 auto; display: flex; align-items: flex-start; justify-content: center; min-height: 0; padding-top: 10px; }
/* ===== .page-wrapper .section::before { display: none; }===== */
.page-wrapper .section-inner { min-height: 0; height: auto; padding: 20px clamp(24px, 4vw, 56px) 40px; justify-content: flex-start; text-align: center; }
.page-wrapper h2 { font-size: clamp(36px, 5vw, 48px); font-weight: 700; color: var(--dark); margin-bottom: 24px; }
.page-wrapper footer { background:  color-mix(in srgb, var(--accent) var(--op-95), transparent); padding: 30px clamp(24px, 4vw, 56px) 20px; flex-shrink: 0; }
.footer-inner { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; color: var(--white); }
.footer-col h4 { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.footer-col p, .footer-col a { font-size: 14px; color: color-mix(in srgb, var(--white) var(--op-75), transparent); text-decoration: none; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; line-height: 1.5; }
.footer-col a:hover { color: var(--accent-hover); }
.footer-col .address-row { align-items: flex-start; }
.footer-col .address-row .icon { margin-top: 2px; flex-shrink: 0; }
.footer-details { font-size: 14px; color: color-mix(in srgb, var(--white) var(--op-55), transparent); margin-top: 6px; }
.vk-link-footer { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: color-mix(in srgb, var(--white) var(--op-75), transparent); text-decoration: none; font-size: 13px; font-family: 'Exo 2', sans-serif; font-weight: 500; transition: var(--transition); }
.vk-link-footer:hover { color: var(--accent-hover); }
.vk-link-footer svg { width: 20px; height: 20px; }
.vk-link-footer .vk-circle { fill: var(--dark); transition: fill 0.35s ease; }
.vk-link-footer .vk-icon { fill: var(--accent); transition: fill 0.35s ease; }
.vk-link-footer:hover .vk-circle { fill: #0077FF; }
.vk-link-footer:hover .vk-icon { fill: #FFFFFF; }
.nav-grid { display: flex; flex-direction: column; gap: 6px; }
.nav-row { display: grid; gap: 6px; }
.nav-row:first-child { grid-template-columns: auto auto auto; justify-content: start; }
.nav-row:nth-child(2) { grid-template-columns: auto auto; justify-content: start; }
.nav-row:nth-child(3) { grid-template-columns: auto auto; justify-content: start; }
.nav-row:last-child { grid-template-columns: auto; justify-content: start; }
.nav-link-footer { font-size: 14px; color: color-mix(in srgb, var(--white) var(--op-75), transparent); text-decoration: none; transition: var(--transition); white-space: nowrap; }
.nav-link-footer:hover { color: var(--accent-hover); }
.footer-bottom { margin-top: 20px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--white) var(--op-10), transparent); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: center; font-size: 12px; color: color-mix(in srgb, var(--white) var(--op-55), transparent); max-width: 1400px; margin-left: auto; margin-right: auto; }
.footer-bottom .cta-button { width: fit-content; justify-self: center; margin-top: 0; }
.footer-bottom a { color: var(--accent-hover); text-decoration: underline; }
.scroll-top { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; transition: transform 0.5s ease; justify-self: center; }
.scroll-top .arrow-icon { width: clamp(14px, 2vw, 24px); height: clamp(24px, 2.5vw, 40px); transition: all 0.6s ease; animation: gentleFloatUp 3s ease-in-out infinite; }
.scroll-top .arrow-icon svg { width: 100%; height: 100%; display: block; }
.arrow-stroke { stroke: var(--dark); transition: stroke 0.3s ease; }
.scroll-top-text { font-size: 12px; font-weight: 500; letter-spacing: 2px; color: var(--dark); text-transform: uppercase; transition: all 0.6s ease; }
@keyframes gentleFloatUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.scroll-top:hover { transform: translateY(-4px); }
.scroll-top:hover .arrow-icon { animation: none; transform: translateY(-4px); }
.scroll-top:hover .arrow-stroke { stroke: var(--accent-hover); }
.scroll-top:hover .scroll-top-text { letter-spacing: 3px; }

/* ===== ПЛАНШЕТ ===== */
@media (min-width: 769px) and (max-width: 1024px) 
{ 
  .nav-link { font-size: 16px; padding: 4px 10px 6.2px 10px; }
  .vk-logo-link { width: 120px; }
  .vk-logo-link svg { margin-top: 0; }
  .dropdown-menu a { font-size: 14px; padding: 8px 14px; }
  .nav-more-dropdown a, .nav-more-dropdown .nav-link { font-size: 14px; }
  .nav-more { right: 0; }
  .nav-more-dropdown { position: fixed; right: 0; left: auto; top: 34px; transform: none; }
  .nav-more.open .nav-more-dropdown { display: block; }
  
  /* Важно: возвращаем min-height для корректной работы padding */
  .section { min-height: 100vh; }
  .section-inner { min-height: 0; justify-content: flex-start; padding-top: 274px; gap: 22px; }
  .section-inner:not(#home .section-inner) { padding-top: 20px; }
  .hero-title-row { flex-direction: column; gap: 14px; margin-top: 30px; }
  .logo svg { height: clamp(260px, 50vw, 320px); }
  .hero-heading { text-align: center; }
  .hero-heading h1 { font-size: clamp(26px, 3.5vw, 34px); }
  .tagline { font-size: clamp(16px, 2.5vw, 18px); }
  .contacts-row { gap: 18px 32px; }
  .contact-item { font-size: clamp(18px, 2.5vw, 22px); }
  .contact-address { font-size: clamp(16px, 2.5vw, 18px); }
  .contact-item .icon { width: clamp(20px, 2.5vw, 24px); height: clamp(20px, 3vw, 24px); }
  .contact-address .icon { width: clamp(16px, 2.5vw, 18px); height: clamp(16px, 2.5vw, 18px); }
  .section .cta-button { padding: 14px 36px; font-size: 22px; margin-top: 16px; }
 
  /* Услуги - планшет*/
  .btn-outline { padding: 12px 28px; font-size: 18px; width: 240px; }
  .modal button[type="submit"] { padding: 12px 28px; font-size: 18px; width: 240px; }
  .scroll-hint { display: flex; }
  .services-section { padding: 20px clamp(24px, 4vw, 56px) 20px; min-height: auto; }
  .services-container { max-width: 1400px; margin: 0 auto; }
  .services-grid { grid-template-columns: 1fr; gap: 40px; }
  .services-left { position: static; text-align: left; align-items: flex-start; }
  .services-left h2 { text-align: center; }
  .services-left .services-subtitle { max-width: 100%; text-align: left; }
  .services-scroll { grid-template-columns: repeat(2, 1fr); }

  /* Отрасли - планшет */
  .stages-section { padding: 20px clamp(24px, 4vw, 56px) 0px; }
  .stages-container { max-width: 1400px; margin: 0 auto; padding: 0; width: 100%; }
  .stages-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 0; grid-auto-rows: 1fr; }
  .stages-grid::-webkit-scrollbar { display: none; }
  .stage-card { height: 100%; padding: 30px 20px 20px; box-sizing: border-box; }
  .stages-nav { display: none; }
  .stages-watermark-left, .stages-watermark-right { display: none; }
  .stages-watermark-single { display: block; position: absolute; top: 0; height: 100%; z-index: 0; pointer-events: none; opacity: 0.03; left: 33.33vw; width: auto; }
  .stages-watermark-single svg { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: auto; height: 100%; }
  .stages-watermark-single svg polygon, .stages-watermark-single svg path { fill: var(--dark); }
  .stages-watermark-single svg text { fill: var(--dark); }

  /* О компании - планшет */
  .about-section { padding: 20px clamp(24px, 4vw, 56px) 20px; min-height: auto; }
  .about-container { max-width: 1400px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 16px 16px; align-items: start; align-content: start; }
  .about-text-col { max-height: none; overflow-y: visible; }
  .about-photo { grid-column: 1 / 2; grid-row: 1 / 2;  height: 440px; }
  .about-photo-stack { grid-column: 1 / 2; grid-row: 2 / 3;  gap: 20px; align-self: start; }
  .about-photo-half { flex: 0 0 auto;}
  .about-text-col { grid-column: 2 / 3; grid-row: 1 / 3; position: sticky; top: 80px; }
  .about-photo-btn { padding: 12px 28px; font-size: 18px; }

  /* Вопросы-ответы - планшет */
  .faq-section { padding: 20px clamp(24px, 4vw, 56px) 20px; }
  .faq-container { max-width: 1400px; margin: 0 auto; padding: 0; width: 100%; }
  .faq-grid { grid-template-columns: 1fr; gap: 10px; }
  .faq-intro-text { display: none; }
  .faq-intro-short { display: block; text-align: center; margin-bottom: 0;font-size: clamp(14px, 4vw, 18px); color: var(--dark-95); line-height: 1.7;}
  .faq-left { position: static; }
  .faq-left h2 { text-align: center; }
  .faq-contact-desktop { display: none; }
  .faq-contact-mobile { display: block; text-align: center; margin-top: 10px; padding-top: 10px; }
  .faq-contact-mobile .faq-contact-group { margin-bottom: 16px; }
  .faq-contact-mobile .faq-contact-row { justify-content: center; align-items: flex-start; }
  .faq-contact-mobile .faq-phone-group { justify-content: center; }
  .faq-contact-mobile .btn-strip { font-size: 22px; padding: 14px 36px; }

  /* Портфолио - планшет */
  .portfolio-section { padding: 10px clamp(24px, 4vw, 56px) 20px; }
  .portfolio-container { max-width: 1400px; margin: 0 auto; }
  .portfolio-cards { grid-template-columns: repeat(2, 1fr); }
  .modal-gallery-arrow { display: flex; }
  .modal-gallery-content { width: 95%; max-width: 95vw; max-height: 95vh; padding: 16px; }
  .modal-gallery img { flex: 0 0 95%; width: 95%; aspect-ratio: 4/3; }
  
  /* Вакансии и подвал - планшет */
  .page-wrapper .section { padding: 10px clamp(24px, 4vw, 56px) 10px; }
  .footer-col h4 { font-size: 14px; }
  .footer-inner .footer-col p, .footer-inner .footer-col a { font-size: 14px; }
  .footer-col a { font-size: 14px; }
  .nav-link-footer { font-size: 14px; }
  .footer-details { font-size: 14px; }
  .vk-link-footer { font-size: 14px; }
  .footer-bottom { font-size: 12px; grid-template-columns: 1fr auto 1fr; gap: 16px;}
  .footer-bottom .cta-button { width: fit-content; justify-self: center; }
  .service-card:last-child { margin-bottom: 0; }   
}
    
/* ===== МОБИЛЬНАЯ ===== */
@media (max-width: 768px) 
{
  .topbar { padding: 0 12px; }
  .topbar-inner { padding: 0 10px; justify-content: flex-end; }
  .nav-wrap { display: none; }
  .nav-more { display: none; }
  .mob-hamburger { display: flex; }

  /* все секции — одинаковые отступы */
  .section { padding: 40px clamp(16px, 4vw, 24px); min-height:100vh; }
  .services-section { padding: 40px clamp(16px, 4vw, 24px); min-height: auto; }
  .stages-section { padding: 40px clamp(16px, 4vw, 24px); min-height: 100vh /*auto*/; display: flex; align-items: center; }
  .about-section { padding: 40px clamp(16px, 4vw, 24px); min-height: auto; }
  .faq-section { padding: 40px clamp(16px, 4vw, 24px); min-height: auto; }
  .portfolio-section { padding: 40px clamp(16px, 4vw, 24px); min-height: 100vh; }
  /*.page-wrapper .section { padding: 40px clamp(16px, 4vw, 24px); min-height:80vh; }*/
  .page-wrapper .section { padding: 0; min-height: auto; flex: 0 0 auto; }
  .modal { padding: 24px 12px 20px; }
  .section-inner { justify-content: flex-start; padding: 0; gap: 10px; min-height: auto; }
  .services-container { padding: 0; }
  .stages-container { padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
  .about-container { padding: 0; }
  .faq-container { padding: 0; }
  .portfolio-container { padding: 0; }

  /* главная - мобильник */
  .hero-title-row { flex-direction: column; gap: 12px; margin-top: 2px; }
  .logo svg { height: clamp(120px, 40vw, 180px); }
  .hero-heading { text-align: center; }
  .hero-heading h1 { font-size: clamp(14px, 5vw, 20px); }
  .tagline { font-size: clamp(14px, 3.5vw, 16px); color: var(--dark-95); }
  .contacts-row { gap: 10px 20px; }
  .contact-item { font-size: clamp(14px, 5vw, 20px); }
  .contact-address { font-size: clamp(14px, 3.5vw, 16px); color: var(--dark-95); align-items: flex-start; }
  .contact-item .icon { width: clamp(14px, 5vw, 16px); height: clamp(14px, 4vw, 16px); }
  .contact-address .icon { width: clamp(14px, 3.5vw, 16px); height: clamp(14px, 3.5vw, 16px); flex-shrink: 0; }
  .section .cta-button { padding: clamp(10px, 3vw, 12px) clamp(24px, 6vw, 28px); font-size: clamp(16px, 3.5vw, 18px); margin-top: 10px; /*width: 90%; */ width: calc(95vw - 48px); max-width: none; text-align: center; box-sizing: border-box; }
  .btn-outline { padding: 10px 24px; font-size: clamp(16px, 3.5vw, 18px);  width: calc(95vw - 48px);text-align: center; }
  .modal button[type="submit"] { padding: 10px 24px; font-size: clamp(16px, 3.5vw, 18px); width: calc(95vw - 48px); }
  .scroll-hint { display: none; }

  /* услуги  - мобильник*/
  .services-grid { grid-template-columns: 1fr; gap: 20px; }
  .services-scroll { grid-template-columns: 1fr; gap: 16px; }
  .services-left h2 { font-size: 28px; text-align: center; }
  .services-left { position: static; }
  .service-card .card-body .card-title { font-size: 18px; }

  /* отрасли  - мобильник*/
  .stages-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 20px clamp(16px, 4vw, 24px); scroll-padding: 0 24px; }
  .stages-grid::-webkit-scrollbar { display: none; }
  .stage-card { flex: 0 0 82vw; min-height: 65vh; height: auto; padding: 40px 14px 18px; }
  .stages-container { padding: 0; flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 0; height: auto; }
  .stages-nav { display: flex; }
  .stages-header h2 { font-size: 28px; }
  .stages-header .stages-desc { font-size: clamp(14px, 4vw, 18px); } /* размер шрифта текста "Мы работаем с предприятиями и объектами любого профиля" */
  .stages-watermark-left { display: none; }
  .stages-watermark-right { display: none; }
  .stages-watermark-single { display: block; position: absolute; top: 0; height: 100%; z-index: 0; pointer-events: none; opacity: 0.03; left: 0; width: 100vw; }
  .stages-watermark-single svg { position: absolute; left: 0; top: 50%; transform: translate(0, -50%); width: auto; height: 100%; }
  .stages-watermark-single svg polygon { fill: var(--dark); }
  .stages-watermark-single svg path { fill: var(--dark); }
  .stages-watermark-single svg text { fill: var(--dark); }
  .stage-card.active::after { background: color-mix(in srgb, var(--accent-hover) var(--op-55), transparent); }
  .stage-card.active { border-color: var(--accent-hover); }
  
  /* о компании  - мобильник*/
  .about-container { grid-template-columns: 1fr; gap: 24px; }
  .about-photo { display: flex; min-height: 220px; order: 1; height: auto; }
  .about-text-col { order: 2; position: static; max-height: none; padding: 0; }
  .about-photo-stack { order: 3; flex-direction: column; gap: 16px; height: auto; }
  .about-photo-half { min-height: 110px; flex: 0 0 auto; }
  .about-text-col h2 { font-size: 28px; }
  .about-photo-btn { padding: 10px 20px; font-size: 13px; }
  .about-photo-btn svg { width: 16px; height: 16px; }

  /* вопросы-ответы  - мобильник */
  .faq-left h2 { font-size: 28px; }
  .faq-question { padding: 14px 16px; }
  .faq-question-text { font-size: clamp(14px, 3.5vw, 16px); }
  .faq-grid { grid-template-columns: 1fr; gap: 20px; }
  .faq-intro-text { display: none; }
  .faq-intro-short { display: block; font-size: clamp(14px, 4vw, 18px); color: var(--dark-95); margin-bottom: 12px; line-height: 1.7; }
  .faq-left { position: static; }
  .faq-contact-desktop { display: none; }
  .faq-contact-mobile { display: block; text-align: left; margin-top: 16px; padding-top: 16px; }
  .faq-contact-mobile .faq-contact-group { margin-bottom: 16px; }
  .faq-contact-mobile .faq-contact-row { justify-content: flex-start; align-items: flex-start; }
  .faq-contact-mobile .faq-phone-group { justify-content: flex-start; }
  .faq-contact-mobile .btn-strip { font-size: clamp(16px, 3.5vw, 18px); padding: 10px 24px; /*width: 90%;*/ width: calc(95vw - 48px); text-align: center; box-sizing: border-box; }

  /* портфолио -мобильник */
  .portfolio-header { position: sticky; top: 0; z-index: 10; background: var(--accent2); padding: 0 0 16px; margin: 0; }
  .portfolio-header h2 { font-size: 28px; margin-bottom: 8px; }
  .portfolio-subtitle { font-size: clamp(14px, 4vw, 18px); } /* размер шрифта текста "Реализованные проекты компании «Вертикаль» с 2015 года" */
  .filter-bar { display: none; }
  .filter-select-wrap { display: flex; }
  .portfolio-cards { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px clamp(16px, 4vw, 24px) 20px; scroll-padding: 0 24px; }
  .portfolio-cards::-webkit-scrollbar { display: none; }
  .project-card { flex: 0 0 82vw; max-width: 400px; scroll-snap-align: start; min-height: 55vh; }
  
  .pagination { display: flex; }
  .modal-gallery-content { padding: 16px; max-width: 100vw; width: 100%; max-height: 100vh; gap: 8px; }
  .modal-gallery img { --natural-w: 1; --natural-h: 1; flex: 0 0 92%; width: 92%; aspect-ratio: 3/4; object-fit: contain; transition: none; }
  .modal-gallery img.landscape { aspect-ratio: var(--natural-h) / var(--natural-w); transform: rotate(90deg) scale(calc(var(--natural-w) / var(--natural-h))); }
  .modal-gallery img:first-child { margin-left: 4%; }
  .modal-gallery img:last-child { margin-right: 4%; }
  .modal-info { font-size: 12px; gap: 2px; padding: 0 4px; }
  .modal-info .modal-org-name { font-size: 14px; }
  .modal-info .modal-object-name { font-size: 14px; }
  .modal-gallery-close { top: 8px; right: 12px; width: 36px; height: 36px; font-size: 16px; }

  /* вакансии -мобильник */
  .page-wrapper .section-inner { padding: 0; min-height: auto; height: auto; justify-content: flex-start; }
  .page-wrapper h2 { font-size: 28px; margin-bottom: 10px; }
  .page-wrapper p { font-size: clamp(14px, 4vw, 18px); } /* размер шрифта текста о вакансиях */

  /* подвал - мобильник*/
  .page-wrapper footer { padding: 40px clamp(20px, 4vw, 40px); }
  .footer-inner { grid-template-columns: 1fr; gap: 20px; text-align: center; }
  .footer-col { display: flex; flex-direction: column; align-items: center; }
  .footer-col a { display: flex; align-items: center; justify-content: center; text-align: center; gap: 8px; width: auto; }
  .footer-col a .icon { margin: 0; flex-shrink: 0; }
  .footer-col .address-row { display: block; text-align: center; max-width: 300px; margin: 0 auto; }
  .footer-col .address-row .icon { display: inline-block; vertical-align: middle; margin-right: 6px; margin-top: 0; }
  .vk-link-footer { justify-content: center; display: flex; }
  .footer-bottom { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .footer-bottom .legal { order: 3; }
  .scroll-top { order: 2; justify-self: center; }
  .footer-bottom .cta-button { order: 1; font-size: clamp(16px, 3.5vw, 18px); padding: 10px 24px; margin: 0 auto; width: calc(95vw - 48px); }
  .nav-row { display: grid; justify-items: center; text-align: center; width: 100%; }
  .nav-row:first-child { justify-content: center; }
  .nav-row:nth-child(2) { justify-content: center; }
  .nav-row:nth-child(3) { justify-content: center; }
  .nav-row:last-child { justify-content: center; }
  .nav-link-footer { width: auto; }
}

@media (max-width: 768px) {
  #cookie-banner > div { 
    flex-direction: column; 
    align-items: flex-start; 
  }
  #cookie-accept { 
    width: auto; 
    padding: 12px 24px; 
  }
}
/* Стили для оговорки под ценой */
.service-card .card-body > div[style*="font-size: 10px"] {
    width: 100%;
    text-align: center;
    font-weight: 400;
}









/* ===== СЕКЦИЯ ВАКАНСИЙ ===== */
.vacancies-header-wrapper {
    max-width: 1400px;
    margin: 0 auto;
  /*padding: 60px clamp(24px, 4vw, 56px);*/
    padding: 60px 0 20px 0; /* Убрали боковые отступы, оставили только верх/низ */
    width: 100%;
    text-align: center; /* Центрируем текст */
}

.vacancies-header-wrapper h2 {
    font-size: clamp(36px, 5vw, 48px);
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 12px;
    text-align: center;
}


.vacancies-intro {
    font-size: clamp(14px, 4vw, 18px);
    color: var(--dark-95);
    margin-bottom: 32px;
    line-height: 1.7;
    text-align: center; /* Центрируем текст */
   /* max-width: 800px; /* Ограничиваем ширину, чтобы не растягивался на весь экран */
    margin-left: auto; 
    margin-right: auto; 
}

.vacancies-intro a {
    color: var(--accent-hover);
    text-decoration: none;
}

/* Сетка карточек */
.vacancies-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* 3 в ряд, как в портфолио */
    gap: 20px; 
    width: 100%;
}

/* Карточка */
.vacancy-card {
    background: color-mix(in srgb, var(--accent) var(--op-95), transparent);
    border: 1px solid color-mix(in srgb, var(--dark) var(--op-10), transparent);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    border-radius: var(--radius);
    text-align: left;
}
.vacancy-card:hover { 
    border-color: var(--accent-hover); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.vac-head { 
    background: var(--accent2); 
    padding: 20px; 
    border-bottom: 2px solid var(--accent-hover);
    border-radius: var(--radius) var(--radius) 0 0;
}

.vac-title { font-size: 20px; font-weight: 800; color: var(--white); margin: 0 0 8px 0; line-height: 1.2; }

.vac-salary-block { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.vac-salary { font-size: 22px; font-weight: 900; color: var(--accent-hover); }
.vac-salary-note { font-size: 13px; font-weight: 600; color: var(--dark-95); }

.vac-short-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 13px; color: var(--dark-95); }
.vac-short-meta span { display: flex; align-items: center; gap: 4px; }
.vac-short-meta span::after { content: '•'; margin-left: 12px; color: var(--accent-hover); }
.vac-short-meta span:last-child::after { display: none; }

.vac-body { padding: 20px; flex-grow: 1; display: flex; flex-direction: column; gap: 20px; }

.vac-col h4 { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent-hover); margin: 0 0 8px 0; }
.vac-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.vac-col ul li { font-size: 14px; color: var(--dark-95); line-height: 1.4; position: relative; padding-left: 12px; }
.vac-col ul li::before { content: '—'; position: absolute; left: 0; color: var(--accent-hover); }

.vac-skills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.vac-skill { 
    font-size: 12px; color: var(--dark); background: color-mix(in srgb, var(--accent-hover) var(--op-20), transparent);
    padding: 4px 10px; border-radius: 2px; border: 1px solid color-mix(in srgb, var(--accent-hover) var(--op-40), transparent);
}

.vac-foot { 
    padding: 0 20px 16px; 
    margin-top: auto; 
    font-size: 12px; 
    color: var(--dark-95); 
    opacity: 0.6;
}

/* Заглушка */
.vacancy-placeholder {
    background: color-mix(in srgb, var(--accent) var(--op-95), transparent);
    border: 1px solid color-mix(in srgb, var(--dark) var(--op-10), transparent);
    border-top: 4px solid var(--accent-hover);
    border-radius: var(--radius);
    padding: 40px;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}
.vacancy-placeholder p { font-size: clamp(14px, 4vw, 18px); color: var(--dark-95); line-height: 1.7; margin: 0; }
.vacancy-placeholder a { color: var(--accent-hover); text-decoration: none; font-weight: 600; }

/* Адаптив */
@media (max-width: 1024px) {
    .vacancies-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .vacancies-grid { grid-template-columns: 1fr; }
    .vacancy-placeholder { padding: 24px; }
}
/* Убираем центрирование и ограничение ширины ТОЛЬКО в секции вакансий */
/*#vacancies .section-inner {
    align-items: stretch;
    width: 100%;
}*/

#vacancies .vacancies-intro {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto 30px auto;
    text-align: center;
}

#vacancies #vacanciesContainer {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    /*padding: 0 clamp(24px, 4vw, 56px);  Добавили отступы по бокам */
    padding: 0;                /* было: 0 clamp(24px, 4vw, 56px) */
}
@media (max-width: 768px) {
    .vacancies-header-wrapper {
        padding: 40px clamp(24px, 4vw, 56px) 20px;
    }
}