:root{
  --bg:#0A0A0A;       /* основной тёмный фон */
  --bg-2:#181818;     /* второй тёмный фон/карточки */
  --card:#181818;     /* фон карточек */
  --text:#E0E0E0;     /* основной текст на тёмном */
  --muted:#8F8F8F;    /* вторичный текст */
  --line:#4F4F4F;     /* границы/разделители */
  --brand:#B09B7E;    /* акцент бренда */
  --brand-2:#B09B7E;  /* дополнительный акцент */
}
@font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Montserrat';src:url('./fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');font-weight:100 900;font-style:italic;font-display:swap}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;max-width:100%}
html{margin:0;padding:0;width:100%;max-width:100vw;overflow-x:hidden;position:relative;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;padding:0;width:100%;max-width:100vw;overflow-x:hidden;position:relative}

/* Глобальное скрытие скроллбаров на мобильных */
@media (max-width: 768px){
  *::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }
  *{
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
}
img,video,iframe{max-width:100%;height:auto}
video,iframe{display:block}
main,section,header,footer{max-width:100%;overflow-x:hidden}
main{padding-top:72px}
/* iOS Safari 100vh fix - только для touch устройств */
@supports (-webkit-touch-callout: none) {
  html{height:-webkit-fill-available}
}
body.theme-dark{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Montserrat',system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5;font-weight:400;min-height:100vh;position:relative}
body.theme-light{background:#E0E0E0;color:#000;font-family:-apple-system,BlinkMacSystemFont,'Montserrat',system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5;font-weight:400;min-height:100vh;position:relative}

/* Типографическая иерархия */
h1{font-weight:800;letter-spacing:-0.02em;font-size:38px}
h2{font-weight:700;letter-spacing:-0.01em;font-size:38px}
h3{font-weight:600}
h4{font-weight:500}
p{font-weight:400}
.btn{font-weight:500}
.case-content h4{font-weight:600}
.service-card h3{font-weight:600}
.faq-item h4{font-weight:500}

/* Балансировка строк для заголовков */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  max-inline-size: 60ch;
}

/* Улучшенный перенос строк для основного текста */
p, li, blockquote {
  text-wrap: pretty;
}

/* Русская гипенация */
html[lang="ru"] p,
html[lang="ru"] li,
html[lang="ru"] blockquote {
  hyphens: auto;
}

/* Обработка конфликтов с white-space */
h1, h2, h3, h4, h5, h6 {
  white-space: unset;
}

/* Для классов с балансировкой */
.balanced {
  white-space: unset;
  text-wrap: balance;
}
.container{max-width:1200px;width:100%;margin:0 auto;padding:24px;box-sizing:border-box;overflow-x:hidden}

/* Container padding for small screens - now handled in @media (max-width: 480px) */

/* Topbar (удалён) */

/* Hero */
.hero{position:relative;width:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-media{position:absolute;top:0;left:0;width:100%;height:100%;max-width:100vw;z-index:0;overflow:hidden}
/* iOS Safari 100vh fix */
@supports (-webkit-touch-callout: none) {
  .hero{min-height:-webkit-fill-available}
  .hero-media{height:-webkit-fill-available}
}
.hero-video{width:100%;height:100%;object-fit:cover;filter:brightness(1.2) contrast(1.1) saturate(1.1);max-width:100%;display:block}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,.6) 100%);z-index:1}
.hero-content{position:relative;z-index:2;padding:24px 0 24px;width:100%;max-width:100%;text-align:center}
.hero h1{font-size:38px;margin:0 0 16px;line-height:1.2;word-wrap:break-word;overflow-wrap:break-word;max-width:100%}
.hero p{font-size:18px;color:var(--muted);margin:0 0 24px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;max-width:100%}
.hero .cta-buttons{margin-bottom:24px;max-width:100%;justify-content:center}
.hero-watermark{position:absolute;right:24px;bottom:24px;height:600px;width:auto;opacity:.07;pointer-events:none;z-index:0;max-width:80%;max-height:80vh;object-fit:contain}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:10px;border:1px solid var(--line);background:var(--bg-2);color:var(--text);cursor:pointer;transition:transform .15s ease,background .2s;touch-action:manipulation;text-decoration:none;height:36px;box-sizing:border-box}
.btn:hover{transform:translateY(-1px)}
button{touch-action:manipulation}
.btn-primary{background:var(--brand);color:#0A0A0A;border-color:transparent;height:36px;box-sizing:border-box}
.btn-secondary{background:transparent;height:36px;box-sizing:border-box}
.btn-large{padding:14px 22px;font-size:18px;height:36px;box-sizing:border-box}
.btn-call,.btn-telegram,.btn-whatsapp{display:inline-block;text-decoration:none}

.cta-buttons{display:flex;gap:12px;flex-wrap:wrap}
.cta-buttons .btn{padding:16px 24px;font-size:16px;background:transparent;border:1px solid var(--brand);color:var(--brand);font-weight:500;height:36px;box-sizing:border-box}
.hero .cta-buttons .btn{border-radius:999px;font-size:14px;padding:12px 28px;height:36px;box-sizing:border-box}
.hero-content-block .cta-buttons .btn{border-radius:999px;font-size:14px;padding:12px 28px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;color:var(--text);text-decoration:none;text-align:center;font-weight:500;transition:all .2s;font-family:inherit;height:36px;box-sizing:border-box}
.hero-content-block .cta-buttons .btn:hover{background:var(--card);border-color:var(--brand);transform:translateY(-1px)}
.section-dark .hero-content-block .cta-buttons .btn{background:var(--bg-2);border:1px solid var(--line);color:var(--text)}
.section-dark .hero-content-block .cta-buttons .btn:hover{background:var(--card);border-color:var(--brand);transform:translateY(-1px)}
.hero-content-section{background-color:#0A0A0A !important;background-image:none !important}
.hero-content-block{text-align:center;padding:0}
.hero-content-block h1{font-size:38px;font-weight:800;margin-bottom:16px;line-height:1.2}
.hero-content-block p{font-size:18px;margin-bottom:24px;opacity:0.8}
.fomo-counter{margin-top:10px;color:var(--muted);font-size:14px}
.urgent-cta{animation:pulse-cta 2s infinite}

@keyframes pulse-cta{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}

/* Sections */
/* Базовое правило для секций (кроме главной страницы) */
body:not(.home-page):not(.price-page):not(.contact-page):not(.portfolio-page):not(.faq-page):not(.cases-page):not(.blog-page):not(.services-page) section{padding:24px 24px;width:100%;max-width:100vw;overflow-x:hidden;position:relative}
/* Для главной страницы, страницы цен, контактов, портфолио, FAQ, cases, блога и сервисов padding устанавливается отдельными правилами */
.home-page section,
.price-page section,
.contact-page section,
.portfolio-page section,
.faq-page section,
.cases-page section,
.blog-page section,
.services-page section{width:100%;max-width:100vw;overflow-x:hidden;position:relative}
.section-light{
  background-color:#E0E0E0;
  background-image:
    linear-gradient(rgba(224,224,224,.90), rgba(224,224,224,.90));
  background-repeat:no-repeat;
  background-position:center;
  background-size:auto;
  color:#000;
}
/* Уменьшение верхнего отступа в разделе "ВИДЫ РАБОТ" для всех версий (кроме главной страницы, страницы цен, контактов и портфолио) */
body:not(.home-page):not(.price-page):not(.contact-page):not(.portfolio-page):not(.faq-page):not(.cases-page):not(.blog-page):not(.services-page) main > section.section-light:first-of-type{
  padding-top:16px !important;
  padding-bottom:16px !important;
}
.section-dark{
  background-color: #181818;
  color: var(--text);
}

/* Градиент от темного к светлому для секций на главной странице и странице цен (кроме раздела "Команда") */
.home-page main > section.section-dark:not(:has(.directors-grid)),
.price-page main > section.section-dark,
.faq-page main > section.section-dark,
.cases-page main > section.section-dark,
.blog-page main > section.section-dark,
.services-page main > section.section-dark{
  background: linear-gradient(135deg, var(--bg) 0%, var(--bg-2) 100%);
}
/* Исключаем раздел "Команда" - возвращаем обычный фон */
.home-page main > section.section-dark:has(.directors-grid){
  background-color: #181818;
  background-image: none;
}
/* Градиент для светлых секций на главной странице и странице цен */
.home-page main > section.section-light,
.price-page main > section.section-light,
.faq-page main > section.section-light,
.cases-page main > section.section-light,
.blog-page main > section.section-light,
.services-page main > section.section-light{
  background: linear-gradient(135deg, #E0E0E0 0%, #F5F5F5 100%);
}

.section-title{text-align:center;font-size:38px;font-weight:800;margin-bottom:16px;letter-spacing:-0.02em}

/* Two column layout */
.two-column{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.content-partners-column{grid-template-columns:1fr !important}
.content-left h2{font-size:38px;font-weight:800;margin-bottom:16px;line-height:1.2}
.content-left p{font-size:18px;margin-bottom:24px;opacity:0.8}
.section-image{width:100%;height:auto;object-fit:contain;border-radius:12px;display:block;max-width:100%}

/* Consultation section - align image with submit button */
#consultation .two-column{align-items:end}

/* Services grid */
.services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:16px}
.service-card{text-align:center}
.service-card.plain{background:transparent;border:none;padding:0}
.service-photo{width:100%;height:240px;object-fit:cover;border-radius:12px;margin-bottom:12px;display:block;max-width:100%}
.service-card h3{font-size:18px;font-weight:700;margin:0 0 8px;letter-spacing:0.05em}
.service-card p{font-size:14px;opacity:0.8;line-height:1.4;margin:0}

/* Buttons */
.btn-dark{background:#000;color:#fff;border:none;font-size:16px;font-family:inherit;font-weight:500;height:36px;box-sizing:border-box}
.section-dark .btn-dark{border:1px solid rgba(255,255,255,0.3)}
.section-dark .btn-secondary:not([style*="border"]){border:1px solid rgba(255,255,255,0.3);color:#fff}
.btn-light{background:#fff;color:#000;border:1px solid #000;font-size:16px;font-family:inherit;font-weight:500;height:36px;box-sizing:border-box}
.text-center{text-align:center}

/* Portfolio preview */
.portfolio-preview{margin-bottom:16px;max-width:100%}
.client-logos{text-align:center}
.client-logos p{margin-bottom:24px;font-weight:600}
.logos-grid{display:flex;justify-content:center;align-items:center;gap:16px;opacity:0.6;flex-wrap:nowrap;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}

/* Directors grid */
.directors-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;max-width:1200px;margin:0 auto}
.director-card{text-align:center}
.director-photo{width:180px;height:230px;margin:0 auto 16px;overflow:hidden;border-radius:8px;position:relative;max-width:100%}
.director-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.director-card h3{font-size:16px;font-weight:700;margin-bottom:8px}
.director-card p{font-size:13px;opacity:0.8}

/* Consultation form */
.consultation-form{display:grid;gap:16px}
.consultation-form input,
.consultation-form textarea{width:100%;padding:12px;border:1px solid #ddd;border-radius:8px;font-family:inherit}
.consultation-form textarea{height:86px;resize:vertical}
.consultation-centered{max-width:600px;margin:0 auto;text-align:center}

.case-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px;width:100%;max-width:100%}
.case-filters button{padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;display:flex;align-items:center;justify-content:center;text-align:center;width:100%;max-width:100%;box-sizing:border-box;height:36px}
.case-filters button:hover{background:var(--bg);border-color:var(--brand);transform:translateY(-2px)}
.case-filters .active{background:#E0E0E0;color:#111;border-color:#E0E0E0}
.case-filter-btn{padding:12px 16px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;box-sizing:border-box;height:36px}
.case-filter-btn:hover{background:var(--bg);border-color:var(--brand);transform:translateY(-2px);color:var(--text)}
.case-filters img{height:18px;width:auto;opacity:0.8;flex-shrink:0}
.case-filters .active img{opacity:1;filter:brightness(0.2)}
.case-list{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;max-width:100%;width:100%;margin:0;padding:0;box-sizing:border-box;overflow:hidden}
.case-item{background:transparent;border:none;border-radius:0;padding:0}
.case-video{background:#000;height:200px;border-radius:4px;margin-bottom:0;position:relative;overflow:hidden;width:100%}
.case-video iframe{width:100%;height:100%;border:0;border-radius:4px;position:absolute;top:0;left:0;display:block}
.case-content{display:none}
.case-content h4{margin:0 0 4px;font-size:14px;color:var(--text)}
.case-content p{display:none}

.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.service-card{background:var(--bg-2);border:1px solid var(--line);padding:18px;border-radius:12px}
.service-card.highlighted{outline:2px solid var(--brand);background:linear-gradient(180deg,rgba(230,178,92,.08),transparent)}
.service-card .price{font-weight:700;color:var(--brand)}
.upsells{margin:8px 0 0;padding-left:18px;color:var(--muted)}

.process-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.process-step{background:var(--bg-2);border:1px solid var(--line);padding:16px;border-radius:12px;position:relative}
.step-number{position:absolute;top:12px;right:12px;background:var(--bg-2);border:1px solid var(--line);width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font-weight:700;color:var(--muted)}
.timeline{color:var(--muted);margin:0 0 6px}
.guarantees{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.guarantee-item{background:var(--bg-2);border:1px solid var(--line);padding:16px;border-radius:12px}

.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.faq-item{background:var(--bg-2);border:1px solid var(--line);padding:24px;border-radius:12px;margin-bottom:24px}
.faq-item:last-child{margin-bottom:0}
.faq-item h4{margin:0 0 12px;font-size:1.1rem;font-weight:600;color:var(--text)}
.section-light .faq-item{background:#fff;border:1px solid rgba(0,0,0,0.1)}
.section-light .faq-item h4{color:#000}
.section-light .faq-item p,.section-light .faq-item li{color:#333;line-height:1.7}
.section-dark .faq-item h4{color:var(--text)}
.section-dark .faq-item p,.section-dark .faq-item li{color:var(--text);opacity:0.9;line-height:1.7}
.faq-item ul,.faq-item ol{margin:12px 0;padding-left:20px}
.faq-item li{margin-bottom:8px;position:relative}
/* Разделение абзацев внутри FAQ */
.faq-item p + p{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05)}
.section-light .faq-item p + p{border-top:1px solid rgba(0,0,0,0.08)}
.faq-item p + ul,.faq-item p + ol{margin-top:12px}
.faq-item ul + p,.faq-item ol + p{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05)}
.section-light .faq-item ul + p,.section-light .faq-item ol + p{border-top:1px solid rgba(0,0,0,0.08)}
/* Улучшенное разделение элементов списка */
.faq-item ul li:not(:last-child)::after{content:'';display:block;height:1px;background:rgba(255,255,255,0.03);margin:6px 0 0 -20px}
.section-light .faq-item ul li:not(:last-child)::after{background:rgba(0,0,0,0.05)}
/* Разделение абзацев в кейсах */
.case-section p + p{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05)}
.section-light .case-section p + p{border-top:1px solid rgba(0,0,0,0.08)}
.case-section p + ul,.case-section p + ol{margin-top:12px}
.case-section ul + p,.case-section ol + p{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05)}
.section-light .case-section ul + p,.section-light .case-section ol + p{border-top:1px solid rgba(0,0,0,0.08)}
.case-section ul li{position:relative}
.case-section ul li:not(:last-child)::after{content:'';display:block;height:1px;background:rgba(255,255,255,0.03);margin:6px 0 0 -20px}
.section-light .case-section ul li:not(:last-child)::after{background:rgba(0,0,0,0.05)}
/* Разделение абзацев в статьях блога и сервисов */
.article-content p + p{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05)}
.article-content p + ul,.article-content p + ol{margin-top:12px}
.article-content ul + p,.article-content ol + p{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,0.05)}
.article-content ul li{position:relative}
.article-content ul li:not(:last-child)::after{content:'';display:block;height:1px;background:rgba(255,255,255,0.03);margin:6px 0 0 -20px}
/* Уменьшение шрифтов для страниц блога и сервисов в веб-версии */
.blog-page .article-content,.services-page .article-content{font-size:0.9rem !important;line-height:1.6 !important}
.blog-page .article-content[style*="font-size:1.1rem"],.services-page .article-content[style*="font-size:1.1rem"]{font-size:0.9rem !important;line-height:1.6 !important}
.blog-page .article-content p,.services-page .article-content p{font-size:0.9rem !important;line-height:1.6 !important;margin-bottom:0 !important}
.blog-page .article-content h2,.services-page .article-content h2{font-size:1.3rem !important;margin-top:40px !important;margin-bottom:20px !important}
.blog-page .article-content h3,.services-page .article-content h3{font-size:1.1rem !important;margin-top:32px !important;margin-bottom:16px !important}
.blog-page .article-content ul,.blog-page .article-content ol,.services-page .article-content ul,.services-page .article-content ol{margin:12px 0 !important;padding-left:20px !important}
.blog-page .article-content li,.services-page .article-content li{font-size:0.9rem !important;margin-bottom:8px !important;line-height:1.6 !important}
.blog-page .blog-card p,.services-page .blog-card p{font-size:0.9rem !important;line-height:1.6 !important}
.blog-page .blog-card h2,.services-page .blog-card h2{font-size:1.1rem !important}
/* Стили для контента на страницах сервисов без класса article-content */
.services-page section .container p{font-size:0.9rem !important;line-height:1.6 !important;margin-bottom:0 !important}
.services-page section .container p[style*="font-size:1.1rem"]{font-size:0.9rem !important;line-height:1.6 !important}
.services-page section .container p + p{margin-top:12px !important;padding-top:12px !important;border-top:1px solid rgba(255,255,255,0.05) !important}
.section-light .services-page section .container p + p{border-top:1px solid rgba(0,0,0,0.08) !important}
.services-page section .container p + ul,.services-page section .container p + ol{margin-top:12px !important}
.services-page section .container ul + p,.services-page section .container ol + p{margin-top:12px !important;padding-top:12px !important;border-top:1px solid rgba(255,255,255,0.05) !important}
.section-light .services-page section .container ul + p,.section-light .services-page section .container ol + p{border-top:1px solid rgba(0,0,0,0.08) !important}
.services-page section .container ul li{position:relative}
.services-page section .container ul li:not(:last-child)::after{content:'';display:block;height:1px;background:rgba(255,255,255,0.03);margin:6px 0 0 -20px}
.section-light .services-page section .container ul li:not(:last-child)::after{background:rgba(0,0,0,0.05)}
/* Убираем боковые рамки у страниц блога и сервисов в веб-версии */
.blog-page main > section .container,.services-page main > section .container{padding-left:0 !important;padding-right:0 !important}
/* Стили для ссылок в FAQ */
.faq-item a{color:var(--brand);text-decoration:none;border-bottom:1px solid transparent;transition:border-color 0.2s ease}
.faq-item a:hover{border-bottom-color:var(--brand)}
.section-light .faq-item a{color:#0066cc}
.section-light .faq-item a:hover{border-bottom-color:#0066cc}

.multi-cta{display:grid;grid-template-columns:1.2fr 1fr;gap:16px}
.cta-secondary .contact-buttons{display:flex;gap:10px;flex-wrap:wrap}

.footer{padding:24px;color:var(--muted)}

/* Modal */
.modal{border:none;border-radius:12px;padding:0;background:var(--bg-2);color:var(--text);max-width:90vw;width:100%;box-sizing:border-box}
.mini-brief-form{display:grid;gap:12px;padding:20px;min-width:280px;max-width:100%;width:100%;box-sizing:border-box}
.mini-brief-form input,.mini-brief-form select,.mini-brief-form textarea{width:100%;padding:12px 16px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--text);font-family:inherit;resize:vertical;font-size:16px;box-sizing:border-box}
.mini-brief-form textarea{min-height:80px}
.mini-brief-form menu{display:flex;justify-content:flex-end;gap:8px;margin:0;padding:0;flex-wrap:wrap}
.mini-brief-form label{display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--text);font-weight:500}
body.theme-light .mini-brief-form label{color:#000}
.consent-checkbox{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:12px!important;margin-top:8px;margin-bottom:8px}
.consent-checkbox input[type="checkbox"]{width:auto!important;min-width:18px;height:18px;margin-top:2px;flex-shrink:0;cursor:pointer}
.consent-checkbox span{font-size:13px;line-height:1.5;color:var(--muted);flex:1}
.consent-checkbox span a{color:var(--brand);text-decoration:underline}
.consent-checkbox span a:hover{color:#8B7355}
body.theme-light .consent-checkbox span{color:#666}
body.theme-light .consent-checkbox span a{color:var(--brand)}

/* Form improvements for mobile */
@media (max-width: 768px){
  .mini-brief-form{padding:20px 16px;min-width:auto}
  .mini-brief-form menu{justify-content:stretch;flex-direction:column-reverse}
  .mini-brief-form menu button{width:100%}
  .consultation-form{display:grid;gap:16px}
  .consultation-form input,
  .consultation-form textarea{
    width:100%;
    padding:12px 16px;
    font-size:16px;
    box-sizing:border-box;
  }
}

/* Success Modal */
.success-modal{
  border:none;
  border-radius:12px;
  padding:0;
  background:var(--bg-2);
  color:var(--text);
  max-width:90vw;
  width:100%;
  max-width:480px;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  margin:0;
}
.success-modal::backdrop{
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(4px);
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.success-modal-content{
  padding:40px 32px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.success-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--brand);
  color:#0A0A0A;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  font-weight:700;
  animation:success-pop 0.4s ease-out;
}
@keyframes success-pop{
  0%{transform:scale(0);opacity:0}
  50%{transform:scale(1.1)}
  100%{transform:scale(1);opacity:1}
}
.success-title{
  font-size:28px;
  font-weight:700;
  color:var(--text);
  margin:0;
  letter-spacing:-0.01em;
}
.success-message{
  font-size:16px;
  color:var(--text);
  opacity:0.9;
  margin:0;
  line-height:1.5;
}
.success-close-btn{
  margin-top:8px;
  min-width:140px;
}
@media (max-width: 480px){
  .success-modal-content{
    padding:32px 24px;
  }
  .success-title{
    font-size:24px;
  }
  .success-message{
    font-size:14px;
  }
  .success-icon{
    width:56px;
    height:56px;
    font-size:32px;
  }
}

/* Error Modal */
.error-modal{
  border:none;
  border-radius:12px;
  padding:0;
  background:var(--bg-2);
  color:var(--text);
  max-width:90vw;
  width:100%;
  max-width:480px;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  margin:0;
  border:1px solid var(--line);
}
.error-modal::backdrop{
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(4px);
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
}
.error-modal-content{
  padding:40px 32px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.error-icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:#dc3545;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:36px;
  font-weight:700;
  animation:error-pop 0.4s ease-out;
}
@keyframes error-pop{
  0%{transform:scale(0) rotate(-180deg);opacity:0}
  50%{transform:scale(1.1) rotate(10deg)}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}
.error-title{
  font-size:28px;
  font-weight:700;
  color:var(--text);
  margin:0;
  letter-spacing:-0.01em;
}
.error-message{
  font-size:16px;
  color:var(--text);
  opacity:0.9;
  margin:0;
  line-height:1.5;
}
.error-close-btn{
  margin-top:8px;
  min-width:140px;
}
@media (max-width: 480px){
  .error-modal-content{
    padding:32px 24px;
  }
  .error-title{
    font-size:24px;
  }
  .error-message{
    font-size:14px;
  }
  .error-icon{
    width:56px;
    height:56px;
    font-size:32px;
  }
}

/* Responsive - Tablet and smaller desktop */
@media (max-width: 1024px){
  h1{font-size:32px}
  h2{font-size:32px}
  .hero h1{font-size:32px}
  .contact-name{font-size:32px}
  .hero p{font-size:17px}
  .section-title{font-size:32px}
  .content-left h2{font-size:32px}
  .contact-section h2{font-size:1.1rem}
  .problem-block h2,.solution-block h2{font-size:32px}
  .cta-section h2{font-size:32px}
  .two-column{grid-template-columns:1fr;gap:24px}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .case-list{grid-template-columns:repeat(2,1fr)}
  .case-filters{grid-template-columns:repeat(2,1fr)}
  .logos-grid{flex-wrap:wrap;gap:20px}
  .directors-grid{grid-template-columns:repeat(3,1fr)}
  .products-grid{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:repeat(2,1fr)}
  .process-timeline{grid-template-columns:repeat(2,1fr)}
  .benefits-grid{grid-template-columns:repeat(2,1fr)}
  .addons-grid{grid-template-columns:repeat(2,1fr)}
  .multi-cta{grid-template-columns:1fr}
  .guarantees{grid-template-columns:1fr}
  body:not(.home-page):not(.price-page):not(.contact-page):not(.portfolio-page):not(.faq-page):not(.cases-page):not(.blog-page):not(.services-page) section{padding:20px 20px}
  .home-page main > section,
  .price-page main > section,
  .contact-page main > section,
  .portfolio-page main > section,
  .faq-page main > section,
  .cases-page main > section,
  .blog-page main > section,
  .services-page main > section{
    padding: 0 !important;
  }
  .home-page main > section .container,
  .price-page main > section .container,
  .contact-page main > section .container,
  .portfolio-page main > section .container,
  .faq-page main > section .container,
  .cases-page main > section .container,
  .blog-page main > section .container,
  .services-page main > section .container{
    padding: 36px 20px 48px 20px !important;
  }
  .container{padding:20px}
}

/* Mac Retina and high-DPI displays optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img, video {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Safari-specific fixes for Mac */
@supports (-webkit-appearance: none) {
  .btn, button {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Fix for Safari text rendering */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Fix for Safari backdrop-filter */
  .hero-nav, .contact-header {
    -webkit-backdrop-filter: blur(10px);
  }
}

/* Large Mac displays (1440px+) */
@media (min-width: 1440px) {
  .container{max-width:1400px}
  .hero h1{font-size:42px}
  .section-title{font-size:42px}
  h1{font-size:42px}
  h2{font-size:42px}
}
/* Tablet portrait and small tablets */
@media (max-width: 768px) and (min-width: 481px){
  h1{font-size:28px}
  h2{font-size:28px}
  .hero h1{font-size:28px;line-height:1.25}
  .hero p{font-size:17px}
  .section-title{font-size:28px}
  .content-left h2{font-size:28px}
  .contact-section h2{font-size:1.1rem}
  .problem-block h2,.solution-block h2{font-size:28px}
  .cta-section h2{font-size:28px}
  .contact-name{font-size:28px}
  .section-light .price-title{font-size:28px}
  .services-grid{grid-template-columns:repeat(2,1fr);gap:16px}
  .case-list{grid-template-columns:repeat(2,1fr)}
  .case-filters{grid-template-columns:repeat(2,1fr)}
  .products-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .process-timeline{grid-template-columns:repeat(2,1fr)}
  .benefits-grid{grid-template-columns:1fr}
  .addons-grid{grid-template-columns:repeat(2,1fr)}
  .directors-grid{grid-template-columns:repeat(2,1fr)}
  body:not(.home-page):not(.price-page):not(.contact-page):not(.portfolio-page):not(.faq-page):not(.cases-page):not(.blog-page):not(.services-page) section{padding:20px 16px}
  .home-page main > section,
  .price-page main > section,
  .contact-page main > section,
  .faq-page main > section,
  .cases-page main > section,
  .blog-page main > section,
  .services-page main > section{
    padding: 0 !important;
  }
  .home-page main > section .container,
  .price-page main > section .container,
  .contact-page main > section .container,
  .faq-page main > section .container,
  .cases-page main > section .container,
  .blog-page main > section .container,
  .services-page main > section .container{
    padding: 36px 24px 48px 24px !important;
  }
  .container{padding:20px}
}

/* Mobile devices */
@media (max-width: 768px){
  /* Разрешаем overflow для мобильного меню */
  html, body{
    overflow-x:clip !important;
  }
  
  /* Убираем ограничения с родительских контейнеров меню */
  .contact-header,
  .hero-nav,
  .contact-nav,
  .container{
    overflow:visible !important;
    clip-path:none !important;
  }
  
  h1{font-size:26px}
  h2{font-size:26px}
  .hero h1{font-size:26px;line-height:1.25}
  .hero p{font-size:16px}
  .section-title{font-size:26px;margin-bottom:12px !important}
  /* Уменьшение отступов в разделе "ВИДЫ РАБОТ" для мобильных (кроме главной страницы, прайс, FAQ, cases, блога и сервисов) */
  body:not(.home-page):not(.price-page):not(.faq-page):not(.cases-page):not(.blog-page):not(.services-page) main > section.section-light:first-of-type{
    padding-top:12px !important;
    padding-bottom:12px !important;
    padding-left:16px !important;
    padding-right:16px !important;
  }
  /* Оптимизация первого раздела под видео для мобильных */
  .hero-content-block{
    padding:0;
  }
  .hero-content-block h1{
    font-size:22px !important;
    margin-bottom:12px !important;
    line-height:1.3 !important;
  }
  .hero-content-block p{
    font-size:15px !important;
    margin-bottom:20px !important;
    line-height:1.4 !important;
  }
  .hero-content-block .cta-buttons{
    gap:16px !important;
    margin-bottom:20px !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
  }
  .hero-content-block .cta-buttons .btn{
    width:auto !important;
    padding:10px 18px !important;
    font-size:11px !important;
    line-height:1.3 !important;
    display:inline-block !important;
    flex-shrink:1 !important;
  }
  .hero-content-block .fomo-counter{
    font-size:12px !important;
    margin-top:8px !important;
  }
  .content-left h2{font-size:26px}
  .contact-section h2{font-size:1.1rem}
  .problem-block h2,.solution-block h2{font-size:26px}
  .cta-section h2{font-size:26px}
  .contact-name{font-size:26px}
  .section-light .price-title{font-size:26px}
  .cta-buttons .btn{padding:18px 28px !important;font-size:17px !important}
  
  /* Mobile menu */
  .mobile-menu-toggle{display:flex !important;z-index:10001 !important;position:relative !important}
  
  /* Скрываем десктопное меню на мобильных */
  .hero-nav .contact-nav ul,
  .contact-nav ul{
    position:fixed !important;
    top:0 !important;
    right:-100vw !important;
    bottom:0 !important;
    left:auto !important;
    width:280px !important;
    max-width:75vw !important;
    height:100vh !important;
    height:100dvh !important;
    background:rgba(10,10,10,0.98) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:stretch !important;
    padding:20px 24px !important;
    gap:0 !important;
    margin:0 !important;
    list-style:none !important;
    transition:right .3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow:-5px 0 20px rgba(0,0,0,.5) !important;
    z-index:10000 !important;
    overflow:visible !important;
    display:flex !important;
    overscroll-behavior:contain !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    transform:translateZ(0) !important;
    will-change:right !important;
  }
  
  /* ПОЛНОСТЬЮ убираем скроллбар в меню */
  .hero-nav .contact-nav ul::-webkit-scrollbar,
  .contact-nav ul::-webkit-scrollbar,
  .hero-nav .contact-nav ul *::-webkit-scrollbar,
  .contact-nav ul *::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
    background:transparent !important;
  }
  
  .hero-nav .contact-nav ul.active,
  .contact-nav ul.active{
    right:0 !important;
  }
  
  .hero-nav .contact-nav ul li,
  .contact-nav ul li{
    width:100% !important;
    border-bottom:1px solid var(--line) !important;
    padding:0 !important;
    margin:0 !important;
    display:block !important;
    flex-shrink:0 !important;
    list-style:none !important;
  }
  
  .hero-nav .contact-nav ul li:not(:last-child)::after,
  .contact-nav ul li:not(:last-child)::after{
    display:none !important;
    content:none !important;
  }
  
  .hero-nav .contact-nav ul li a,
  .contact-nav ul li a{
    display:block !important;
    padding:20px 0 !important;
    font-size:18px !important;
    width:100% !important;
    box-sizing:border-box !important;
    text-decoration:none !important;
    transition:all .2s ease !important;
    line-height:1.4 !important;
  }
  
  .contact-logo{height:12.96px !important}
  
  /* Mobile-specific adjustments */
  .two-column{grid-template-columns:1fr;gap:20px}
  .services-grid{grid-template-columns:1fr}
  .case-list{grid-template-columns:1fr}
  .case-filters{grid-template-columns:1fr}
  .products-grid{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .process-timeline{grid-template-columns:1fr}
  .benefits-grid{grid-template-columns:1fr}
  .addons-grid{grid-template-columns:1fr}
  .directors-grid{grid-template-columns:1fr}
  .guarantees{grid-template-columns:1fr}
  .multi-cta{grid-template-columns:1fr}
  
  /* Отступы после "Примеры работ" и "Команда" на главной странице в мобильной версии */
  .home-page .client-logos{margin-top: 48px !important;margin-bottom: 48px !important}
  body.home-page main > section.section-light .container > .client-logos:last-child,
  body.home-page main > section .container > .client-logos:last-child{
    margin-bottom: 48px !important;
    padding-bottom: 0 !important;
  }
  .home-page .directors-grid{margin-top: 48px !important;margin-bottom: 48px !important}
  
  body:not(.home-page):not(.price-page):not(.contact-page):not(.portfolio-page):not(.faq-page):not(.cases-page):not(.blog-page):not(.services-page) section{padding:20px 16px}
  .home-page main > section,
  .price-page main > section,
  .contact-page main > section,
  .portfolio-page main > section,
  .faq-page main > section,
  .cases-page main > section,
  .blog-page main > section,
  .services-page main > section{
    padding: 0 !important;
  }
  .home-page main > section .container,
  .price-page main > section .container,
  .contact-page main > section .container,
  .portfolio-page main > section .container,
  .faq-page main > section .container,
  .cases-page main > section .container,
  .blog-page main > section .container,
  .services-page main > section .container{
    padding: 36px 24px 48px 24px !important;
  }
  .container{padding:16px}
  
  /* Mobile forms */
  .consultation-form input,
  .consultation-form textarea,
  .mini-brief-form input,
  .mini-brief-form select,
  .mini-brief-form textarea{
    font-size:16px !important; /* Prevents zoom on iOS */
  }
  
  /* Mobile modals */
  .modal{max-width:95vw;margin:20px auto}
  .success-modal{max-width:90vw}
  .error-modal{max-width:90vw}
}
/* Small mobile devices (480px and below) */
@media (max-width: 480px){
  h1{font-size:22px}
  h2{font-size:22px}
  .hero{min-height:100vh;min-height:100dvh}
  .hero-media{height:100vh;height:100dvh}
  .hero h1{font-size:22px;line-height:1.3}
  .hero p{font-size:16px;line-height:1.5}
  .contact-name{font-size:22px}
  /* Дополнительная оптимизация первого раздела под видео для маленьких экранов */
  .hero-content-block{
    padding:0;
  }
  .hero-content-block h1{
    font-size:20px !important;
    margin-bottom:10px !important;
  }
  .hero-content-block p{
    font-size:14px !important;
    margin-bottom:16px !important;
  }
  .hero-content-block .cta-buttons{
    gap:14px !important;
    margin-bottom:16px !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    justify-content:center !important;
  }
  .hero-content-block .cta-buttons .btn{
    width:auto !important;
    padding:10px 16px !important;
    font-size:10px !important;
    line-height:1.3 !important;
    display:inline-block !important;
    flex-shrink:1 !important;
  }
  .hero-content-block .fomo-counter{
    font-size:11px !important;
  }
  /* Дополнительное уменьшение размеров шрифтов на странице founder.html для маленьких экранов */
  .contact-centered .contact-name{
    font-size:20px !important;
  }
  .contact-centered .contact-roles{
    font-size:10px !important;
    letter-spacing:.1em !important;
  }
  .contact-centered .contact-text,
  .contact-centered .contact-text p{
    font-size:13px !important;
    line-height:1.5 !important;
  }
  /* Дополнительная оптимизация подвала для маленьких экранов */
  .footer-columns-wrapper{
    gap:16px !important;
  }
  .footer-column{
    gap:6px !important;
  }
  .footer-column .footer-links{
    gap:2px !important;
  }
  .footer-column .footer-links li{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
  }
  .footer-column .footer-links a{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
  }
  .footer-legal{
    font-size:9px !important;
    gap:3px !important;
    align-items:center;
    line-height:1.2 !important;
  }
  .footer-legal a{
    font-size:9px !important;
    line-height:1.2 !important;
    display:inline-block;
    vertical-align:middle;
  }
  .footer-separator{
    font-size:9px !important;
    margin:0 3px !important;
    padding:0 !important;
    opacity:0.5 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1.4 !important;
  }
  .footer-copyright{
    font-size:9px !important;
  }
  .hero-content{padding:16px 0 16px}
  .hero-watermark{height:300px;opacity:.05;max-width:70%}
  .cta-buttons{flex-direction:column;gap:12px;width:100%}
  .cta-buttons .btn{width:100%;padding:16px 24px !important;font-size:16px !important;text-align:center;height:36px !important;box-sizing:border-box !important}
  .hero .cta-buttons .btn{border-radius:999px !important;font-size:14px !important;padding:12px 28px !important;height:36px !important;box-sizing:border-box !important}
  .fomo-counter{font-size:13px;margin-top:12px;text-align:center}
  .section-title{font-size:22px;margin-bottom:10px !important}
  /* Дополнительное уменьшение отступов в разделе "ВИДЫ РАБОТ" для маленьких экранов (кроме главной страницы, прайс, FAQ, cases, блога и сервисов) */
  body:not(.home-page):not(.price-page):not(.faq-page):not(.cases-page):not(.blog-page):not(.services-page) main > section.section-light:first-of-type{
    padding-top:8px !important;
    padding-bottom:8px !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .content-left h2{font-size:22px}
  .contact-section h2{font-size:1.1rem}
  .problem-block h2,.solution-block h2{font-size:22px}
  .cta-section h2{font-size:22px}
  .case-filters button{padding:10px 12px;font-size:12px;height:36px;box-sizing:border-box}
  .logos-grid{flex-wrap:wrap;gap:12px;justify-content:center}
  .director-photo{width:180px;height:230px;margin:0 auto 12px}
  .case-video{height:200px;min-height:200px;aspect-ratio:16/9}
  .case-video iframe{aspect-ratio:16/9}
  .target-grid{grid-template-columns:1fr !important;gap:16px !important;width:100% !important;max-width:100% !important;margin-left:0 !important;margin-right:0 !important}
  .target-card{width:100% !important;max-width:100% !important;padding:16px !important;box-sizing:border-box !important;margin:0 !important}
  
  /* Оптимизация для страницы price на маленьких мобильных */
  .price-page .section-title{font-size:20px !important;margin-bottom:10px !important}
  .price-page main > section .container{padding:20px 12px 28px 12px !important}
  
  /* Адаптация заголовков для маленьких мобильных устройств */
  .section-light .price-title{font-size:20px}
  .section-dark .price-title{font-size:20px}
  .section-light .price-subtitle{font-size:0.9rem !important}
  .section-dark .price-subtitle{font-size:0.9rem !important}
  
  .product-card{padding:12px !important}
  .product-card h3{font-size:0.9rem;margin-bottom:10px}
  .target-card{padding:12px !important}
  .target-card h3{font-size:0.9rem;margin-bottom:10px}
  .benefit-card{padding:12px !important}
  .benefit-card h3{font-size:0.9rem;margin-bottom:6px}
  .step-content h3{font-size:0.9rem;margin-bottom:6px}
  .additional-services{padding:16px 12px !important;margin-top:10px !important}
  .additional-services h3{font-size:0.95rem;margin-bottom:12px}
  
  /* Дополнительное уменьшение размеров ценовых бейджей */
  .price-badge{font-size:13px !important;padding:5px 8px !important;line-height:1.3}
  .price-container{margin-bottom:10px;gap:5px}
  
  /* Дополнительное уменьшение размеров текста */
  .product-includes li{font-size:0.85rem !important;padding:5px 0;line-height:1.4}
  .product-includes-toggle h4,
  .product-examples-toggle h4{font-size:12px}
  .product-examples-content p{font-size:0.8rem !important;margin-bottom:8px}
  .product-examples-content .btn{font-size:0.8rem !important;padding:7px 14px !important;margin-right:5px;margin-bottom:5px;height:36px !important;box-sizing:border-box !important}
  
  /* Дополнительное уменьшение размеров в списках */
  .target-card li{font-size:0.85rem !important;padding:5px 0;line-height:1.4}
  .benefit-card li{font-size:0.85rem !important;margin-bottom:5px;line-height:1.4}
  .step-content li{font-size:0.8rem !important;margin-bottom:5px;line-height:1.4}
  .step-content p{font-size:0.8rem !important;line-height:1.4}
  .step-content ul{font-size:0.8rem !important;padding-left:14px}
  
  /* Дополнительное уменьшение размеров дополнительных услуг */
  .addon-item{padding:8px !important;font-size:0.85rem !important;line-height:1.3}
  .addon-item strong{font-size:0.85rem !important}
  
  /* Дополнительное уменьшение размеров этапов работы */
  .process-step{padding:10px !important;gap:10px}
  .step-number{width:28px !important;height:28px !important;font-size:0.8rem !important}
  .process-note{padding:20px 10px 24px 10px !important;font-size:0.85rem !important;margin-top:12px !important;line-height:1.4}
  
  /* Дополнительное уменьшение подзаголовков в разделах "Этапы работы" и "Работаем по всей России" */
  .price-page .section-dark .section-title + p,
  .price-page .section-dark .container > p:first-of-type{font-size:0.85rem !important;line-height:1.4 !important;margin-bottom:16px !important}
  
  /* Дополнительное уменьшение отступов */
  .price-page .regions-grid{margin-top:16px !important}
  .price-page #products-prices .text-center{margin-top:20px !important}
  .products-grid{gap:12px !important}
  .process-timeline{gap:12px !important}
  .benefits-grid{gap:12px !important}
  .target-grid{gap:10px !important}
  .addons-grid{gap:10px !important}
  
  /* Smaller mobile adjustments */
  .hero-nav .contact-nav ul,
  .contact-nav ul{
    width:min(85vw, 300px) !important;
    padding:20px !important;
  }
  
  /* Mobile spacing */
  body:not(.home-page):not(.price-page):not(.contact-page):not(.portfolio-page):not(.faq-page):not(.cases-page):not(.blog-page):not(.services-page) section{padding:16px 12px}
  .home-page main > section,
  .price-page main > section,
  .contact-page main > section,
  .portfolio-page main > section,
  .faq-page main > section,
  .cases-page main > section,
  .blog-page main > section,
  .services-page main > section{
    padding: 0 !important;
  }
  .home-page main > section .container,
  .price-page main > section .container,
  .contact-page main > section .container,
  .portfolio-page main > section .container,
  .faq-page main > section .container,
  .cases-page main > section .container,
  .blog-page main > section .container,
  .services-page main > section .container{
    padding: 36px 24px 48px 24px !important;
  }
  
  /* Отступы после "Примеры работ" и "Команда" на главной странице в мобильной версии */
  .home-page .client-logos{margin-top: 48px !important;margin-bottom: 48px !important}
  body.home-page main > section.section-light .container > .client-logos:last-child,
  body.home-page main > section .container > .client-logos:last-child{
    margin-bottom: 48px !important;
    padding-bottom: 0 !important;
  }
  .home-page .directors-grid{margin-top: 48px !important;margin-bottom: 48px !important}
  
  .container{padding:12px}
  .section-image{height:auto}
  .service-photo{height:200px}
  
  /* Mobile buttons */
  .btn{padding:14px 20px;font-size:15px;height:36px;box-sizing:border-box}
  .footer-cta-btn{width:100%;max-width:100%}
  
  /* Mobile modals */
  .modal{max-width:95vw;padding:0}
  .mini-brief-form{padding:20px 16px}
  .success-modal-content{padding:24px 20px}
  .error-modal-content{padding:24px 20px}
  
  /* Дополнительная оптимизация шрифтов для FAQ на маленьких мобильных устройствах */
  .faq-page .faq-item{padding:12px !important;margin-bottom:18px !important;border-radius:8px !important}
  .faq-page .faq-item h4{font-size:0.7rem !important;margin-bottom:8px !important;line-height:1.3 !important;font-weight:600 !important}
  .faq-page .faq-item p{font-size:0.65rem !important;line-height:1.5 !important;margin-bottom:0 !important}
  .faq-page .faq-item p + p{margin-top:8px !important;padding-top:8px !important;border-top:1px solid rgba(255,255,255,0.1) !important}
  .section-light .faq-page .faq-item p + p{border-top:1px solid rgba(0,0,0,0.12) !important}
  .faq-page .faq-item ul,.faq-page .faq-item ol{margin:8px 0 !important;padding-left:14px !important}
  .faq-page .faq-item li{font-size:0.65rem !important;margin-bottom:5px !important;line-height:1.5 !important;padding-left:3px !important}
  .faq-page .faq-item ul li:not(:last-child)::after{height:1px !important;margin:4px 0 0 -14px !important;background:rgba(255,255,255,0.06) !important}
  .section-light .faq-page .faq-item ul li:not(:last-child)::after{background:rgba(0,0,0,0.1) !important}
  .faq-page .faq-item p + ul,.faq-page .faq-item p + ol{margin-top:8px !important}
  .faq-page .faq-item ul + p,.faq-page .faq-item ol + p{margin-top:8px !important;padding-top:8px !important;border-top:1px solid rgba(255,255,255,0.1) !important}
  .section-light .faq-page .faq-item ul + p,.section-light .faq-page .faq-item ol + p{border-top:1px solid rgba(0,0,0,0.12) !important}
  .faq-page .section-title{font-size:18px !important;margin-bottom:18px !important}
  .faq-page .price-title{font-size:18px !important}
  .faq-page .price-subtitle{font-size:0.8rem !important}
  
  /* Дополнительная оптимизация шрифтов для страницы cases на маленьких экранах */
  .cases-page .price-title{font-size:18px !important;margin-bottom:12px !important}
  .cases-page .price-subtitle{font-size:0.75rem !important;margin-bottom:24px !important}
  .cases-page .case-header h2{font-size:0.9rem !important;margin-bottom:4px !important}
  .cases-page .case-header p{font-size:0.7rem !important}
  .cases-page .case-section h3{font-size:0.85rem !important;margin-bottom:8px !important}
  .cases-page .case-section p{font-size:0.6rem !important;line-height:1.4 !important;margin-bottom:0 !important;max-width:100% !important;word-wrap:break-word !important;overflow-wrap:break-word !important}
  .cases-page .case-section p + p{margin-top:6px !important;padding-top:6px !important;border-top:1px solid rgba(255,255,255,0.1) !important}
  .section-light .cases-page .case-section p + p{border-top:1px solid rgba(0,0,0,0.12) !important}
  .cases-page .case-section p + ul,.cases-page .case-section p + ol{margin-top:6px !important}
  .cases-page .case-section ul + p,.cases-page .case-section ol + p{margin-top:6px !important;padding-top:6px !important;border-top:1px solid rgba(255,255,255,0.1) !important}
  .section-light .cases-page .case-section ul + p,.section-light .cases-page .case-section ol + p{border-top:1px solid rgba(0,0,0,0.12) !important}
  .cases-page .case-section ul{margin:6px 0 !important;padding-left:12px !important}
  .cases-page .case-section li{font-size:0.6rem !important;margin-bottom:3px !important;line-height:1.4 !important;position:relative}
  .cases-page .case-section ul li:not(:last-child)::after{height:1px !important;margin:3px 0 0 -12px !important;background:rgba(255,255,255,0.06) !important}
  .section-light .cases-page .case-section ul li:not(:last-child)::after{background:rgba(0,0,0,0.1) !important}
  .cases-page .case-section blockquote{font-size:0.6rem !important;line-height:1.4 !important;padding-left:12px !important}
  .cases-page .case-section blockquote footer{font-size:0.55rem !important;margin-top:6px !important}
  
  /* Уменьшение шрифта подзаголовка CTA на странице кейсов в мобильной версии */
  .cases-page #consultation h2{font-size:0.9rem !important;margin-bottom:12px !important}
  .cases-page #consultation p{font-size:0.75rem !important;margin-bottom:20px !important}
  
  /* Уменьшение ширины кнопки в CTA секции */
  .cases-page #consultation .btn{max-width:200px !important;width:auto !important;padding:10px 20px !important;font-size:12px !important;height:36px !important;box-sizing:border-box !important}
  
  /* Ограничение ширины текста в кейсах для оптимального отображения */
  .cases-page .case-body,
  .cases-page .case-section{
    max-width:100% !important;
    word-wrap:break-word !important;
    overflow-wrap:break-word !important;
  }
  
  /* Дополнительная оптимизация шрифтов для страниц блога и сервисов на маленьких экранах */
  .blog-page .article-content p,.services-page .article-content p{font-size:0.65rem !important;line-height:1.5 !important;margin-bottom:0 !important}
  .blog-page .article-content p + p,.services-page .article-content p + p{margin-top:8px !important;padding-top:8px !important;border-top:1px solid rgba(255,255,255,0.1) !important}
  .blog-page .article-content h2,.services-page .article-content h2{font-size:1rem !important;margin-top:28px !important;margin-bottom:14px !important}
  .blog-page .article-content h3,.services-page .article-content h3{font-size:0.9rem !important;margin-top:20px !important;margin-bottom:10px !important}
  .blog-page .article-content ul,.blog-page .article-content ol,.services-page .article-content ul,.services-page .article-content ol{margin:8px 0 !important;padding-left:14px !important}
  .blog-page .article-content li,.services-page .article-content li{font-size:0.65rem !important;margin-bottom:4px !important;line-height:1.5 !important}
  .blog-page .article-content p + ul,.blog-page .article-content p + ol,.services-page .article-content p + ul,.services-page .article-content p + ol{margin-top:8px !important}
  .blog-page .article-content ul + p,.blog-page .article-content ol + p,.services-page .article-content ul + p,.services-page .article-content ol + p{margin-top:8px !important;padding-top:8px !important;border-top:1px solid rgba(255,255,255,0.1) !important}
  .blog-page .blog-card p,.services-page .blog-card p{font-size:0.65rem !important;line-height:1.5 !important}
  .blog-page .blog-card h2,.services-page .blog-card h2{font-size:0.9rem !important}
}

/* Very small mobile devices (360px and below) */
@media (max-width: 360px){
  h1{font-size:20px}
  h2{font-size:20px}
  .hero h1{font-size:20px}
  .section-title{font-size:20px}
  .hero p{font-size:15px}
  .container{padding:12px 8px}
  section{padding:16px 8px}
  .case-filters button{font-size:11px;padding:8px 10px;height:36px;box-sizing:border-box}
  .btn{font-size:14px;padding:12px 18px;height:36px;box-sizing:border-box}
  .hero-watermark{height:250px;max-width:60%}
  .director-photo{width:160px;height:200px}
  .case-video{height:180px;min-height:180px}
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape){
  .hero{min-height:100vh;min-height:100dvh}
  .hero-media{height:100vh;height:100dvh}
  .hero-content{padding:12px 0 12px}
  .hero h1{font-size:24px}
  .hero p{font-size:15px}
  .hero-watermark{height:300px;opacity:.04}
  .mobile-menu-toggle{position:relative;z-index:1001}
}

/* iOS Safari полная блокировка скролла при открытом меню */
@supports (-webkit-touch-callout: none) {
  body.menu-open{
    position:fixed !important;
    overflow:hidden !important;
    -webkit-overflow-scrolling:auto !important;
  }
  html.menu-open{
    position:fixed !important;
    overflow:hidden !important;
  }
  
  /* iOS Safari фикс для мобильного меню на весь экран */
  @media (max-width: 768px){
    .hero-nav .contact-nav ul,
    .contact-nav ul{
      height:-webkit-fill-available !important;
    }
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse){
  .btn, button, a{
    height:36px; /* Unified button height */
    min-width:44px;
    box-sizing:border-box;
  }
  
  .btn{padding:14px 20px;height:36px;box-sizing:border-box}
  
  /* Larger touch targets for mobile */
  .mobile-menu-toggle{padding:12px;min-width:48px;min-height:48px}
  
  /* Prevent text selection on buttons */
  .btn, button{
    -webkit-user-select:none;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  
  /* Better spacing for touch */
  .case-filters button,
  .product-includes-toggle,
  .product-examples-toggle{
    height:36px;
    box-sizing:border-box;
  }
  
  /* Improved form inputs for touch */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea,
  select{
    min-height:44px;
    padding:12px 16px;
  }
}

/* Image and video responsive improvements */
img, video, iframe{
  max-width:100%;
  height:auto;
  display:block;
}

/* Prevent horizontal scroll on all devices */
@media (min-width: 769px) {
  html, body{
    overflow-x:hidden;
    max-width:100vw;
  }
}

/* Table responsive improvements */
@media (max-width: 768px){
  table{
    display:block;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  
  table thead{
    display:none;
  }
  
  table tbody{
    display:block;
    width:100%;
  }
  
  table tr{
    display:block;
    margin-bottom:16px;
    border:1px solid var(--line);
    border-radius:8px;
    padding:12px;
  }
  
  table td{
    display:block;
    text-align:right;
    padding:8px 0;
    border-bottom:1px solid var(--line);
  }
  
  table td:last-child{
    border-bottom:none;
  }
  
  table td::before{
    content:attr(data-label) ": ";
    font-weight:600;
    float:left;
    text-align:left;
  }
}

/* Improved scrolling on iOS */
@supports (-webkit-overflow-scrolling: touch) {
  * {
    -webkit-overflow-scrolling: touch;
  }
}

/* Safe area insets for iOS devices with notch */
@supports (padding: max(0px)) {
  .container,
  section,
  .hero-content{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  
  .contact-header,
  .hero-nav{
    padding-left:max(24px, env(safe-area-inset-left));
    padding-right:max(24px, env(safe-area-inset-right));
  }
}

/* Mac-specific improvements */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  /* Better font rendering on Retina displays */
  body{
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }
  
  /* Crisp borders on Retina */
  .btn, .card, .modal{
    border-width:0.5px;
  }
}

/* Print styles */
@media print {
  .mobile-menu-toggle,
  .hero-nav,
  .contact-header,
  .modern-footer,
  .mobile-menu-backdrop{
    display:none !important;
  }
  
  body{
    background:#fff;
    color:#000;
  }
  
  a{
    text-decoration:underline;
  }
}

/* Segment themes */
.industry-theme{border-left:4px solid #2E86AB}
.fmcg-theme{border-left:4px solid #A23B72}
.events-theme{border-left:4px solid #F18F01}

/* Fixed corner logo */
.fixed-corner-logo-link{position:fixed;top:12px;left:12px;z-index:9999;display:block}
.fixed-corner-logo{height:600px;width:auto;border-radius:6px;opacity:.30;transition:opacity .2s ease}
.fixed-corner-logo-link:hover .fixed-corner-logo{opacity:1}

/* Contact page (reference-like) */
.contact-centered{min-height:100vh;display:grid;place-items:center;background:var(--bg);}
/* iOS Safari 100vh fix */
@supports (-webkit-touch-callout: none) {
  .contact-centered{min-height:-webkit-fill-available}
}
.contact-inner{max-width:820px;text-align:center}
.contact-photo{width:360px;max-width:100%;height:auto;object-fit:cover;display:block;margin:0 auto 24px;border:1px solid var(--bg);box-sizing:border-box}
@media (max-width: 768px){
  .contact-photo{width:100%;max-width:320px;margin:0 auto 20px}
}
@media (max-width: 480px){
  .contact-photo{max-width:280px;margin:0 auto 16px}
}
.contact-name{font-size:38px;letter-spacing:.06em;margin:0 0 8px}
.contact-roles{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.contact-email a{color:var(--text);text-decoration:underline;text-underline-offset:4px}
.contact-text{display:grid;gap:12px;max-width:680px;margin:24px auto 0;color:var(--text)}
.contact-text p{opacity:.9}

/* ============================================
   НОВАЯ ШАПКА (HEADER & NAVIGATION)
   ============================================ */

/* Скрываем старые элементы шапки */
.contact-header,
.hero-nav,
.mobile-menu-toggle,
#mobileMenuToggle,
#navMenu,
.nav-menu {
  display: none !important;
  visibility: hidden !important;
}

/* Базовые переменные для шапки */
:root {
  --header-height: 72px;
  --header-bg: rgba(10, 10, 10, 0.95);
  --header-border: #4F4F4F;
  --logo-height: 17.28px;
  --menu-width: 280px;
}

/* Шапка */
.site-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: var(--header-height) !important;
  background: var(--header-bg) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid var(--header-border) !important;
  z-index: 100 !important;
}

body.theme-light .site-header {
  background: rgba(224, 224, 224, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Навигация */
.site-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  height: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

/* Логотип */
.site-logo {
  display: flex !important;
  align-items: center !important;
  z-index: 102 !important;
}

.site-logo img {
  height: var(--logo-height) !important;
  width: auto !important;
  display: block !important;
}

/* Десктопное меню */
.site-menu {
  display: flex !important;
  gap: 16px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  align-items: center !important;
}

.site-menu li {
  display: inline-block;
  position: relative;
}

.site-menu li:not(:last-child)::after {
  content: "|";
  margin-left: 16px;
  color: var(--header-border);
  opacity: 0.5;
}

body.theme-light .site-menu li:not(:last-child)::after {
  color: rgba(0, 0, 0, 0.2);
}

.site-menu a {
  color: var(--text);
  text-decoration: none;
  font-size: 12.6px;
  opacity: 0.8;
  transition: all 0.2s;
  white-space: nowrap;
}

.site-menu a:hover {
  opacity: 1;
  color: var(--brand);
}

body.theme-light .site-menu a {
  color: #000;
  opacity: 0.7;
}

body.theme-light .site-menu a:hover {
  opacity: 1;
  color: var(--brand);
}

/* Бургер кнопка (скрыта на десктопе) */
.menu-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  width: 15px;
  height: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 10003;
  position: relative;
}

.menu-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: #E0E0E0;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.menu-burger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

.menu-burger.active span:nth-child(2) {
  opacity: 0;
}

.menu-burger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ============================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================ */

@media (max-width: 768px) {
  /* Шапка на мобильных - позволяем overflow */
  .site-header {
    height: auto !important;
    min-height: var(--header-height) !important;
    overflow: visible !important;
  }
  
  /* Когда меню открыто - шапка на весь экран */
  body.menu-open .site-header {
    height: 100vh !important;
    height: 100dvh !important;
  }
  
  /* Навигация всегда фиксированной высоты */
  .site-nav {
    height: var(--header-height) !important;
    max-height: var(--header-height) !important;
  }
  
  .menu-burger {
    display: flex;
  }
  
  .site-menu {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: var(--menu-width) !important;
    max-width: 80vw !important;
    height: auto !important;
    min-height: 100vh !important;
    background: rgba(10, 10, 10, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 20px 24px !important;
    margin: 0 !important;
    box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5) !important;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 10002 !important;
    overflow: visible !important;
  }
  
  .site-menu.active {
    right: 0 !important;
    display: flex !important;
  }
  
  body.theme-light .site-menu {
    background: rgba(224, 224, 224, 0.98);
  }
  
  .site-menu li {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid var(--header-border);
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  body.theme-light .site-menu li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  .site-menu li:not(:last-child)::after {
    display: none;
  }
  
  .site-menu a {
    display: block;
    padding: 20px 0;
    font-size: 14px;
    width: 100%;
    color: var(--text) !important;
    opacity: 1 !important;
  }
  
  body.theme-light .site-menu a {
    color: #000 !important;
  }
  
  /* Backdrop */
  .menu-backdrop {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(2px) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    z-index: 10000 !important;
  }
  
  .menu-backdrop.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  body.theme-light .menu-backdrop {
    background: rgba(0, 0, 0, 0.4);
  }
  
  /* Блокировка скролла */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
  }
  
  html.menu-open {
    overflow: hidden !important;
  }
}

/* iOS Safari фиксы */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 768px) {
    .site-menu {
      min-height: -webkit-fill-available;
    }
  }
}

/* Маленькие мобильные */
@media (max-width: 480px) {
  .site-logo img {
    height: 12.96px;
  }
  
  .site-menu {
    width: 100%;
    max-width: 90vw;
  }
}

/* Modern Footer - Lens Distortions style */
.modern-footer{background:var(--bg);color:var(--text);padding:64px 0 32px;width:100%;max-width:100vw;overflow-x:hidden;border-top:1px solid var(--line)}
body.theme-light .modern-footer{background:#fff;color:#000;border-top:1px solid rgba(0,0,0,0.1)}
.modern-footer .container{max-width:1200px;width:100%;margin:0 auto;padding:24px;box-sizing:border-box}
.footer-content{display:grid;grid-template-columns:1fr 1fr 1fr;gap:64px;margin-bottom:48px;align-items:start;justify-items:start}
.footer-left{display:flex;flex-direction:column;gap:32px;width:100%;align-items:center;text-align:center}
.footer-brand{display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center}
.footer-logo{height:19.2px;width:auto;opacity:0.9;transition:opacity .2s}
.footer-logo:hover{opacity:1}
.footer-tagline{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);margin:0;font-weight:500;text-align:center}
body.theme-light .footer-tagline{color:#666}
.footer-cta-buttons{display:flex;flex-direction:row;gap:12px;max-width:100%;flex-wrap:wrap;justify-content:center}
.footer-cta-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;color:var(--text);text-decoration:none;text-align:center;font-size:14px;font-weight:500;transition:all .2s;font-family:inherit;width:216px;box-sizing:border-box;height:36px}
.footer-cta-btn:hover{background:var(--card);border-color:var(--brand);transform:translateY(-1px)}
body.theme-light .footer-cta-btn{background:#f5f5f5;border:1px solid rgba(0,0,0,0.1);color:#000}
body.theme-light .footer-cta-btn:hover{background:#e8e8e8;border-color:var(--brand)}
.footer-social{display:flex;gap:16px;align-items:center;justify-content:center;width:100%}
.footer-social-link{display:flex;align-items:center;justify-content:center;width:15px;height:15px;color:var(--text);opacity:0.8;transition:all .2s;text-decoration:none}
.footer-social-link:hover{opacity:1;transform:translateY(-2px)}
.footer-social-link svg{width:100%;height:100%;display:block;fill:currentColor}
.footer-social-link img{width:100%;height:100%;display:block;object-fit:contain;filter:brightness(0) invert(1)}
body.theme-light .footer-social-link{color:#000}
body.theme-light .footer-social-link img{filter:brightness(0)}
.footer-social-link-vk{width:18px;height:18px}
.footer-columns-wrapper{display:contents}
.footer-column{display:flex;flex-direction:column;gap:20px;width:100%;align-items:center;text-align:center}
.footer-column-title{font-size:12px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text);margin:0;font-weight:600;text-align:center}
.footer-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;align-items:center;width:100%}
/* Мобильные стили для уменьшения отступов между ссылками */
@media (max-width: 768px){
  .footer-columns-wrapper .footer-column .footer-links,
  .footer-column .footer-links{
    gap:2px !important;
    margin:0 !important;
    padding:0 !important;
  }
  .footer-columns-wrapper .footer-column .footer-links li,
  .footer-column .footer-links li{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
  }
  .footer-columns-wrapper .footer-column .footer-links a,
  .footer-column .footer-links a{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
  }
}
@media (max-width: 768px){
  .footer-columns-wrapper .footer-column .footer-links,
  .footer-column .footer-links,
  .footer-links{
    gap:2px !important;
  }
}
@media (max-width: 768px){
  .footer-column .footer-links{
    gap:2px !important;
  }
  .footer-column .footer-links li{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
  }
  .footer-column .footer-links a{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
  }
}
.footer-links li{margin:0;padding:0;text-align:center}
.footer-links a{color:var(--text);text-decoration:none;font-size:14px;opacity:0.8;transition:all .2s;display:inline-block;text-align:center}
.footer-links a:hover{opacity:1;color:var(--brand);transform:translateX(2px)}
body.theme-light .footer-column-title{color:#000}
body.theme-light .footer-links a{color:#000;opacity:0.7}
body.theme-light .footer-links a:hover{opacity:1;color:var(--brand)}
.footer-bottom{display:flex;justify-content:center;align-items:center;padding-top:64px;border-top:1px solid var(--line);flex-wrap:wrap;gap:16px;flex-direction:column;text-align:center}
.footer-copyright{font-size:12px;color:var(--muted);margin:0;text-transform:uppercase;letter-spacing:0.05em;opacity:0.5}
.footer-legal{display:flex;align-items:center;gap:12px;font-size:12px;justify-content:center}
.footer-legal a{color:var(--text);text-decoration:none;opacity:0.8;transition:opacity .2s}
.footer-legal a:hover{opacity:1;color:var(--brand)}
.footer-separator{color:var(--muted);opacity:0.5;display:inline-flex;align-items:center;justify-content:center}
body.theme-light .footer-bottom{border-top:1px solid rgba(0,0,0,0.1)}
body.theme-light .footer-copyright{color:#666;opacity:0.5}
body.theme-light .footer-legal a{color:#000;opacity:0.7}
body.theme-light .footer-legal a:hover{opacity:1;color:var(--brand)}
body.theme-light .footer-separator{color:#666;opacity:0.5}

@media (max-width: 1024px){
  .footer-content{grid-template-columns:1fr;gap:48px;justify-items:start}
  .footer-logo{height:16px}
}

@media (max-width: 768px){
  .modern-footer{padding:48px 0 24px}
  .footer-content{display:grid;grid-template-columns:1fr;gap:48px;margin-bottom:32px;justify-items:center}
  .footer-left{grid-column:1;order:1;gap:32px;align-items:center;text-align:center;width:100%}
  .footer-brand{
    align-items:center;
    text-align:center;
    gap:6px !important;
  }
  .footer-cta-buttons{max-width:100%;justify-content:center;flex-wrap:wrap}
  .footer-social{justify-content:center;gap:12px}
  .footer-social-link{width:13px;height:13px}
  .footer-social-link svg{width:13px;height:13px}
  .footer-social-link img{width:13px;height:13px}
  .footer-social-link-vk{width:16px;height:16px}
  .footer-social-link-vk img{width:16px;height:16px}
  .footer-logo{height:14.4px}
  .footer-columns-wrapper{grid-column:1;order:2;display:grid;grid-template-columns:1fr 1fr;gap:24px;width:100%;max-width:400px;margin:0 auto}
  .footer-column{
    align-items:center;
    text-align:center;
    gap:16px !important;
  }
  .footer-column-title{text-align:center}
  .footer-columns-wrapper .footer-column .footer-links{
    gap:2px !important;
  }
  .footer-columns-wrapper .footer-column .footer-links li{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
  }
  .footer-columns-wrapper .footer-column .footer-links a{
    margin:0 !important;
    padding:0 !important;
    line-height:1.2 !important;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
    padding-top:32px !important;
  }
  .footer-legal{
    font-size:10px !important;
    gap:0 !important;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    line-height:1.4 !important;
  }
  .footer-legal a{
    font-size:10px !important;
    white-space:nowrap;
    line-height:1.4 !important;
    display:flex;
    align-items:center;
  }
  .footer-separator{
    font-size:10px !important;
    margin:0 4px !important;
    padding:0 !important;
    opacity:0.5 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1.4 !important;
    display:flex;
    align-items:center;
    line-height:1.4 !important;
    height:auto !important;
  }
  .footer-copyright{
    font-size:10px !important;
  }
}

.contact-footer{border-top:1px solid var(--line);padding:24px 0;background:var(--bg);width:100%;max-width:100vw;overflow-x:hidden}
/* Стили для CTA раздела в стиле подвала */
.footer-style-cta{background:var(--bg) !important;background-image:none !important;color:var(--text);border-top:1px solid var(--line)}
.cases-page .footer-style-cta,.blog-page .footer-style-cta,.services-page .footer-style-cta{background:var(--bg) !important;background-image:none !important}
.contact-footer .social-wrap{max-width:100%;overflow-x:hidden}
.contact-footer .copyright{max-width:100%;overflow-x:hidden;word-break:break-word}

/* Contact page styles */
.contact-page-grid{display:grid;gap:48px;max-width:900px;margin:0 auto;margin-bottom:0}
.contact-section{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:32px}
.contact-section h2{color:var(--brand);font-size:1.1rem;font-weight:700;margin:0 0 24px;letter-spacing:-0.01em}
body.theme-light .contact-section{background:#fff;border:1px solid rgba(0,0,0,0.1)}
body.theme-light .contact-section h2{color:#0A0A0A}
.contact-info-block{display:grid;gap:16px}
.contact-item{display:flex;flex-direction:column;gap:4px}
.contact-label{font-size:14px;color:var(--muted);font-weight:500}
.contact-value{font-size:18px;color:var(--text);text-decoration:none;transition:color .2s}
.contact-value:hover{color:var(--brand)}
body.theme-light .contact-label{color:#666}
body.theme-light .contact-value{color:#000}
body.theme-light .contact-value:hover{color:var(--brand)}
.social-networks-list{display:grid;gap:12px}
.social-network-link{display:flex;justify-content:space-between;align-items:center;padding:16px;background:var(--bg);border:1px solid var(--line);border-radius:8px;text-decoration:none;color:var(--text);transition:all .2s}
.social-network-link:hover{background:var(--card);border-color:var(--brand);transform:translateX(4px)}
body.theme-light .social-network-link{background:#f5f5f5;border:1px solid rgba(0,0,0,0.1);color:#000}
body.theme-light .social-network-link:hover{background:#e8e8e8;border-color:var(--brand)}
.social-network-name{font-size:16px;font-weight:500}
.social-network-arrow{font-size:20px;color:var(--brand);opacity:0;transition:opacity .2s}
.social-network-link:hover .social-network-arrow{opacity:1}
.legal-section{background:var(--card);border-color:var(--line)}
.legal-info-block p{margin:0 0 16px;color:var(--text);line-height:1.6}
body.theme-light .legal-section{background:#f9f9f9;border-color:rgba(0,0,0,0.1)}
body.theme-light .legal-info-block p{color:#000}
.legal-description{color:var(--muted);font-size:14px}
.legal-details{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.legal-item{display:flex;flex-direction:column;gap:4px}
.legal-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.05em}
.legal-value{font-size:18px;color:var(--text);font-weight:600;transition:color .2s}
body.theme-light .legal-label{color:#666}
body.theme-light .legal-value{color:#000}
body.theme-light .legal-details{border-top:1px solid rgba(0,0,0,0.1)}

@media (max-width: 768px){
  .legal-details{grid-template-columns:1fr}
  .contact-page-grid{grid-template-columns:1fr;gap:32px}
  /* Центрирование заголовков плашек на мобильных */
  .contact-section h2{
    text-align:center !important;
    font-size:0.75rem !important;
    margin-bottom:12px !important;
  }
  /* Уменьшение главного заголовка страницы контактов на мобильных */
  main.container h1{
    font-size:20px !important;
  }
  /* Уменьшение заголовка секции консультации на мобильных */
  #consultation h2,
  .consultation-centered h2{
    font-size:20px !important;
  }
  /* Изменение размера шрифта подзаголовка в секции контент-партнерства на мобильных */
  .content-partners-column .content-left p{
    font-size:14px !important;
  }
  /* Изменение размера шрифта подзаголовка в секции консультации на мобильных */
  .consultation-centered p{
    font-size:13px !important;
  }
  /* Уменьшение отступа между плашками и секцией консультации на мобильных */
  .contact-page main > section#consultation .container{
    padding-top: 24px !important;
  }
  /* Уменьшение размеров шрифтов на странице founder.html для мобильных */
  .contact-centered .contact-name{
    font-size:24px !important;
  }
  .contact-centered .contact-roles{
    font-size:11px !important;
    letter-spacing:.12em !important;
    margin-bottom:12px !important;
  }
  .contact-centered .contact-text{
    margin-top:16px !important;
    gap:10px !important;
  }
  .contact-centered .contact-text,
  .contact-centered .contact-text p{
    font-size:14px !important;
    line-height:1.5 !important;
  }
  .contact-centered .contact-inner{
    padding:20px 16px !important;
  }
  /* Уменьшение размера текста в плашках на мобильных */
  .contact-section{
    padding:16px 16px !important;
  }
  .contact-info-block{
    gap:0 !important;
  }
  .contact-label{
    font-size:12px !important;
  }
  .contact-value{
    font-size:14px !important;
  }
  .social-network-name{
    font-size:13px !important;
  }
  .legal-label{
    font-size:11px !important;
  }
  .legal-value{
    font-size:13px !important;
  }
  .legal-info-block p{
    font-size:13px !important;
  }
  .legal-info-block strong{
    font-size:13px !important;
  }
}   
.social-wrap{display:flex;justify-content:space-between;align-items:center}
.social-icons{display:flex;gap:12px}
.social-link img{width:30px;height:30px;display:block;filter:grayscale(100%) invert(80%)}

/* Logo Classes - Responsive Sizing */
.logo-nav{height:17.28px;width:auto;max-width:100%;object-fit:contain}
.logo-footer{max-height:19.2px;width:auto;max-width:100%;vertical-align:middle;object-fit:contain}
.logo-section-header{height:80px;width:auto;max-width:100%;object-fit:contain;vertical-align:middle}
.logo-section-icon{height:40px;width:auto;max-width:100%;margin-right:12px;vertical-align:middle;opacity:0.8;object-fit:contain}
.logo-filter{height:18px;width:auto;opacity:0.8;flex-shrink:0;object-fit:contain}
.logo-decorative{height:40px;width:auto;opacity:0.3;max-width:100%;object-fit:contain}
.logo-product-icon{height:20px;width:auto;max-width:100%;margin-right:8px;vertical-align:middle;object-fit:contain}
.client-logo{max-width:100px;height:auto;object-fit:contain}

@media (max-width: 1024px){
  .logo-nav{height:14.4px}
  .logo-footer{max-height:16px}
  .logo-section-header{height:60px}
  .logo-decorative{height:32px}
  .client-logo{max-width:80px}
}

@media (max-width: 480px){
  .logo-nav{height:12.96px}
  .logo-footer{max-height:14.4px}
  .logo-section-header{height:40px}
  .logo-section-icon{height:32px;margin-right:8px}
  .logo-filter{height:14px}
  .logo-decorative{height:24px}
  .logo-product-icon{height:16px;margin-right:6px}
  .client-logo{max-width:60px}
  .social-link img{width:26px;height:26px}
  .hero-nav .contact-logo{height:12.96px !important}
  main{padding-top:66px}
  .home-page main,
  .price-page main,
  .portfolio-page main{
    padding-top: 0 !important;
    background-color: #181818 !important;
  }
  .contact-nav{padding:18px 16px}
}
.copyright{color:var(--muted)}

/* Price page styles */
.price-hero{background:linear-gradient(135deg,var(--bg) 0%,var(--bg-2) 100%);padding:80px 0;text-align:center}
.section-light .price-title{font-size:38px;font-weight:800;margin-bottom:24px;color:#000;text-align:center;letter-spacing:-0.02em}
.section-light .price-subtitle{font-size:1.1rem;color:#666;max-width:100%;margin:0 auto 32px;line-height:1.6;text-align:center;white-space:nowrap;overflow-x:auto}
.section-dark .price-title{font-size:38px;font-weight:800;margin-bottom:24px;color:var(--text);text-align:center;letter-spacing:-0.02em}
.section-dark .price-subtitle{font-size:1.1rem;color:var(--muted);max-width:100%;margin:0 auto 32px;line-height:1.6;text-align:center;white-space:nowrap;overflow-x:auto}
.price-cta{margin-top:32px;text-align:center}

.target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:32px;width:100%;max-width:100%;box-sizing:border-box}
.target-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px;width:100%;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;word-wrap:break-word}
.target-card h3{color:#E0E0E0;margin-bottom:16px;font-size:1.1rem;text-align:center}
.target-card ul{list-style:none;padding:0;margin:0}
.target-card li{padding:8px 0;border-bottom:1px solid var(--line);color:var(--text)}
.target-card li:last-child{border-bottom:none}

.problem-solution{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:32px}
.problem-block h2,.solution-block h2{color:var(--brand);margin-bottom:24px;font-size:38px}
.problem-list{list-style:none;padding:0;margin:0}
.problem-list li{margin-bottom:16px;padding:16px;background:var(--card);border-radius:8px;border-left:4px solid #e74c3c}
.solution-block p{margin-bottom:16px;color:var(--text);line-height:1.6}

.products-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:24px;margin-top:32px}
.product-card{background:#181818;border:1px solid var(--line);border-radius:12px;padding:24px;position:relative}
.product-card.featured{border:2px solid var(--brand);background:linear-gradient(135deg,#181818 0%,rgba(176,155,126,.05) 100%)}
.product-card h3{color:#E0E0E0;margin-bottom:16px;font-size:1.1rem;font-weight:600;text-align:center}
.price-container{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.price-badge{font-size:16px;font-weight:500;padding:8px 12px;border-radius:8px;border:1px solid #E0E0E0;background:var(--card);display:inline-block;font-family:inherit}
.standart-badge{color:#fff;border:none;background:#0A0A0A;font-size:16px;font-weight:500}
.premium-badge{color:#fff;border:none;background:#0A0A0A}
.full-width-standart{width:100%;text-align:center;margin-bottom:8px}
.full-width-premium{width:100%;text-align:center;margin-bottom:8px}
.product-price-note{font-size:.9rem;color:var(--muted);margin-bottom:16px}
.product-includes{margin-bottom:16px}
.product-includes-toggle{background:none;border:none;padding:0;width:100%;text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:16px;font-weight:500;margin-bottom:12px;font-family:inherit;gap:8px}
.product-includes-toggle h4{font-size:16px;font-weight:500;margin:0}
.product-includes-toggle:hover{color:var(--brand)}
.product-includes-toggle:focus{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.product-examples{margin-bottom:16px}
.product-examples-toggle{background:none;border:none;padding:0;width:100%;text-align:center;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text);font-size:16px;font-weight:500;margin-bottom:12px;font-family:inherit;gap:8px}
.product-examples-toggle h4{font-size:16px;font-weight:500;margin:0}
.product-examples-toggle:hover{color:var(--brand)}
.product-examples-toggle:focus{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
.toggle-icon{font-size:0.8rem;transition:transform 0.3s ease;color:var(--brand)}
.toggle-icon.rotated{transform:rotate(180deg)}
.product-includes-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease;opacity:0}
.product-includes-content.expanded{max-height:500px;opacity:1}
.product-examples-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease, opacity 0.3s ease;opacity:0}
.product-examples-content.expanded{max-height:300px;opacity:1}
.product-examples-content p{margin:0 0 12px 0;color:var(--muted);font-size:.9rem}
.product-examples-content .btn{margin-right:8px;margin-bottom:8px;font-size:.9rem;height:36px;box-sizing:border-box}
.product-includes ul{list-style:none;padding:0;margin:0}
.product-includes li{padding:8px 0;border-bottom:1px solid var(--line);color:var(--text);font-size:16px;font-weight:500}
.product-includes li:last-child{border-bottom:none}
.product-when{font-size:.9rem;color:var(--muted);padding-top:8px}

.additional-services{margin-top:16px;padding:32px;background:var(--card);border-radius:12px;border:1px solid var(--line);text-align:center}
.additional-services h3{color:#E0E0E0;margin-bottom:24px;font-size:1.3rem;text-align:center !important;width:100%;display:block;margin-left:auto;margin-right:auto;font-weight:500}
.price-page .additional-services h3{text-align:center !important;display:block !important;margin-left:auto !important;margin-right:auto !important}
.addons-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.addon-item{padding:12px;background:var(--bg);border-radius:8px;color:var(--text);font-size:16px;font-weight:500;font-family:inherit}
.addon-item strong{font-weight:500;color:#E0E0E0}
.payment-info{padding:16px;background:var(--brand);color:#111;border-radius:8px;text-align:center;font-weight:600}

.process-timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px;margin-top:32px}
.process-step{display:flex;align-items:flex-start;gap:16px;background:var(--bg-2);border:1px solid var(--line);padding:16px;border-radius:12px}
.region-item.process-step{display:block;background:var(--bg-2);border:1px solid var(--line);padding:16px;border-radius:12px}
.step-number{width:38.4px;height:38.4px;background:var(--brand);color:#111;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.96rem;flex-shrink:0}
.step-content h3{color:var(--text);margin-bottom:8px;font-size:1.1rem;text-align:center}
.step-content p{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0;text-align:center}
.step-content ul{color:var(--muted);font-size:.9rem;line-height:1.5;padding-left:20px;margin:0}
.step-content li{color:var(--muted);font-size:.9rem;line-height:1.5;margin-bottom:8px}
.process-note{margin-top:32px;padding:24px 16px 32px 16px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;text-align:center;color:var(--text);white-space:nowrap}
.process-note br{display:none}

.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:32px}
.benefit-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 20px;text-align:left}
.benefit-card h3{color:var(--text);margin-bottom:8px;font-size:1.1rem;text-align:center}
.benefit-card p{color:var(--muted);font-size:.9rem;line-height:1.5}
.benefit-card ul{color:var(--muted);font-size:.9rem;line-height:1.5;padding-left:20px;margin:0}
.benefit-card li{color:var(--muted);font-size:.9rem;line-height:1.4;margin-bottom:4px}

.cta-section{text-align:center;padding:24px 0}
.cta-section h2{font-size:38px;margin-bottom:16px;color:var(--text)}
.cta-section p{font-size:1.1rem;color:var(--muted);margin-bottom:32px;max-width:600px;margin-left:auto;margin-right:auto}
.section-light .cta-section h2{color:#000}
.section-light .cta-section p{color:#666}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* Отступы для страницы price.html, faq.html, cases.html, blog и services - как на главной странице */
/* Убираем padding у секций, оставляем только у контейнеров */
.price-page main > section,
.contact-page main > section,
.faq-page main > section,
.cases-page main > section,
.blog-page main > section,
.services-page main > section{
  padding: 0 !important;
}

/* Padding контейнеров внутри секций на странице цен, контактов, FAQ, cases, блога и сервисов - 36px сверху, 48px снизу */
.price-page main > section .container,
.contact-page main > section .container,
.faq-page main > section .container,
.cases-page main > section .container,
.blog-page main > section .container,
.services-page main > section .container{
  padding: 36px 24px 48px 24px !important;
}

/* Убираем margin-top у первого элемента и margin-bottom у последнего элемента в контейнерах */
.price-page main > section .container > *:first-child,
.contact-page main > section .container > *:first-child,
.portfolio-page main > section .container > *:first-child,
.faq-page main > section .container > *:first-child,
.cases-page main > section .container > *:first-child,
.blog-page main > section .container > *:first-child,
.services-page main > section .container > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.price-page main > section .container > *:last-child,
.contact-page main > section .container > *:last-child,
.portfolio-page main > section .container > *:last-child,
.faq-page main > section .container > *:last-child,
.cases-page main > section .container > *:last-child,
.blog-page main > section .container > *:last-child,
.services-page main > section .container > *:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Исключаем process-note из правила обнуления padding-bottom */
.price-page main > section .container > .process-note:last-child{
  padding-bottom: 32px !important;
}

/* Темный фон для всех секций на странице portfolio (как подвал) */
.portfolio-page main > section.section-dark,
.portfolio-page main > section.section-light{
  background: var(--bg) !important;
  background-image: none !important;
  color: var(--text);
}

/* Специфичные правила для элементов на странице цен */
.price-page .section-title{margin-bottom:16px}
#products-prices .section-title{margin-bottom:8px !important}
.price-page .regions-grid{margin-top:32px !important}
.price-page .additional-services{margin-top:16px}
.price-page .process-note{margin-top:24px}
/* Уменьшенный отступ над кнопкой "Обсудить задачу" - уменьшен на треть (с 64px до ~43px) */
.price-page #products-prices .text-center{
  margin-top: 43px !important;
}

/* Отступы для главной страницы, страницы цен, контактов, портфолио, FAQ, cases, блога и сервисов - 36px сверху, 48px снизу */
/* Убираем padding-top у main, так как отступы управляются контейнерами */
.home-page main,
.price-page main,
.contact-page main,
.portfolio-page main,
.faq-page main,
.cases-page main,
.blog-page main,
.services-page main{
  padding-top: 0 !important;
  background-color: transparent;
}

/* Сохраняем расстояние 80px между заголовком и шапкой на странице контактов и уменьшаем отступ снизу */
.contact-page main > section:first-of-type .container{
  padding-top: 80px !important;
  padding-bottom: 0 !important;
}

/* Уменьшаем отступ между плашками контактов и секцией консультации */
.contact-page main > section#consultation .container{
  padding-top: 24px !important;
}

/* Убираем padding у секций, оставляем только у контейнеров */
.home-page main > section,
.portfolio-page main > section{
  padding: 0 !important;
}

/* Padding контейнеров внутри секций на главной странице и портфолио - 36px сверху, 48px снизу */
.home-page main > section .container,
.portfolio-page main > section .container{
  padding: 36px 24px 48px 24px !important;
}

/* Убираем margin-top у первого элемента и margin-bottom у последнего элемента в контейнерах на главной странице */
/* Это обеспечивает отступы 36px сверху и 48px снизу */
.home-page main > section .container > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Убираем визуальный отступ от line-height у первого элемента в контейнере */
/* Это особенно важно для h1 с line-height, который может создавать визуальный отступ */
.home-page main > section .container > *:first-child > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Убираем margin-top у h1 в hero-content-block для единообразия */
.home-page main > section .hero-content-block h1:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Убираем margin-top у h2 в content-left для единообразия отступов */
/* Это важно для раздела "МЫ МОЖЕМ СТАТЬ ВАШИМИ ПОСТОЯННЫМИ КОНТЕНТ-ПАРТНЕРАМИ" */
.home-page main > section .content-left h2:first-child,
.home-page main > section .two-column .content-left h2:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Убираем margin-top у первого элемента в two-column для единообразия */
.home-page main > section .two-column > *:first-child{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Убираем визуальный отступ от line-height у h2 в content-left */
/* Это компенсирует визуальный отступ, создаваемый line-height:1.2 */
.home-page main > section .content-left h2:first-child{
  display: block;
}

/* Убираем визуальный отступ от line-height, компенсируя его отрицательным margin-top */
/* Это обеспечивает точное соответствие отступа сверху 36px от контейнера */
.home-page main > section .container > *:first-child > *:first-child{
  display: block;
}

.home-page main > section .container > *:last-child{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Переопределяем margin-bottom у кнопки на главной странице для единообразия */
.home-page main > section .text-center .btn-dark{
  margin-bottom: 0 !important;
}

/* Исключаем client-logos из правила обнуления margin-bottom - для веб и мобильной версии */
/* Это правило должно идти ПОСЛЕ правила для *:last-child, чтобы переопределить его */
/* Используем максимально специфичный селектор с body для повышения специфичности */
body.home-page main > section.section-light .container > .client-logos:last-child,
body.home-page main > section .container > .client-logos:last-child{
  margin-bottom: 48px !important;
  padding-bottom: 0 !important;
}

/* Увеличиваем margin-bottom у services-grid до 48px для визуального равенства расстояний */
/* Расстояние между текстом и кнопкой должно быть таким же, как между кнопкой и концом секции (48px) */
.home-page main > section .services-grid{
  margin-bottom: 48px !important;
}

/* Полностью закругленные кнопки для страницы price.html */
.price-page .btn,.faq-page .btn{border-radius:999px;font-size:14px;padding:12px 28px;height:36px;box-sizing:border-box}
.price-page .btn-primary,.faq-page .btn-primary{border-radius:999px;font-size:14px;padding:12px 28px;height:36px;box-sizing:border-box}
.price-page .btn-secondary,.faq-page .btn-secondary{border-radius:999px;font-size:14px;padding:12px 28px;height:36px;box-sizing:border-box}
.price-page .btn-dark,.faq-page .btn-dark{border-radius:999px;font-size:14px;padding:12px 28px;height:36px;box-sizing:border-box}
.price-page button.btn,.faq-page button.btn{border-radius:999px;font-size:14px;padding:12px 28px;height:36px;box-sizing:border-box}
.price-page .product-includes-toggle{border-radius:999px;height:36px;box-sizing:border-box}
.price-page .product-examples-toggle{border-radius:999px;height:36px;box-sizing:border-box}
.price-page .cta-buttons .btn,.faq-page .cta-buttons .btn{font-size:14px;padding:12px 28px;height:36px;box-sizing:border-box}

/* Округлые кнопки на главной странице */
body:not(.price-page):not(.faq-page) .section-light .text-center .btn-dark,
body:not(.price-page):not(.faq-page) .section-dark .content-left .btn-light{border-radius:999px;font-size:14px;padding:12px 28px}
.section-light .text-center .btn-dark{
  margin-bottom:48px;
  height:36px;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
}

/* Округлая кнопка "Получить расчет" на странице portfolio.html */
header.container .text-center .case-filter-btn{border-radius:999px;font-size:14px;padding:12px 28px;height:36px;box-sizing:border-box}

/* Округлая кнопка "НАЧНЕМ СОТРУДНИЧЕСТВО" на странице founder.html */
.contact-centered .text-center .btn-dark{border-radius:999px;font-size:14px;padding:12px 28px;border:1px solid #4F4F4F;height:36px;box-sizing:border-box}

@media (max-width:768px){
  .section-light .price-title{font-size:24px}
  .section-light .price-subtitle{white-space:normal !important;overflow-x:visible !important;word-wrap:break-word;overflow-wrap:break-word;font-size:0.95rem !important}
  .section-dark .price-title{font-size:24px}
  .section-dark .price-subtitle{white-space:normal !important;overflow-x:visible !important;word-wrap:break-word;overflow-wrap:break-word;font-size:0.95rem !important}
  .problem-solution{grid-template-columns:1fr;gap:24px}
  .products-grid{grid-template-columns:1fr;gap:16px}
  .process-timeline{grid-template-columns:1fr;gap:16px}
  .benefits-grid{grid-template-columns:1fr;gap:16px}
  .addons-grid{grid-template-columns:1fr;gap:12px}
  .target-grid{grid-template-columns:1fr;gap:12px;width:100%;max-width:100%}
  .target-card{width:100%;max-width:100%;padding:16px;box-sizing:border-box}
  .cta-buttons{flex-direction:column;align-items:center}
  
  /* Оптимизация для страницы price на мобильных */
  .price-page .section-title{font-size:22px !important;margin-bottom:12px !important}
  .price-page main > section .container,
  .contact-page main > section .container,
  .portfolio-page main > section .container{padding:24px 16px 32px 16px !important}
  
  /* Сохраняем расстояние 80px между заголовком и шапкой на странице контактов в мобильной версии */
  .contact-page main > section:first-of-type .container{
    padding-top: 80px !important;
  }
  
  /* Отступ после заголовка ПОРТФОЛИО на мобильной версии */
  .portfolio-page .section-title{margin-bottom: 48px !important}
  
  /* Адаптация заголовков для мобильных устройств */
  .product-card{padding:16px !important}
  .product-card h3{font-size:0.95rem;margin-bottom:12px}
  .target-card h3{font-size:0.95rem;margin-bottom:12px}
  .benefit-card{padding:16px !important}
  .benefit-card h3{font-size:0.95rem;margin-bottom:8px}
  .step-content h3{font-size:0.95rem;margin-bottom:6px}
  .additional-services{padding:20px 16px !important;margin-top:12px !important}
  .additional-services h3{font-size:1rem;margin-bottom:16px}
  
  /* Уменьшение размеров ценовых бейджей */
  .price-badge{font-size:14px !important;padding:6px 10px !important;line-height:1.4}
  .price-container{margin-bottom:12px;gap:6px}
  
  /* Уменьшение размеров текста в карточках */
  .product-includes li{font-size:0.9rem !important;padding:6px 0;line-height:1.5}
  .product-includes-content li{font-size:0.8rem !important;padding:6px 0;line-height:1.5}
  .product-includes-toggle h4,
  .product-examples-toggle h4{font-size:13px}
  .product-examples-content p{font-size:0.85rem !important;margin-bottom:10px}
  .product-examples-content .btn{font-size:0.85rem !important;padding:8px 16px !important;margin-right:6px;margin-bottom:6px;height:36px !important;box-sizing:border-box !important}
  
  /* Уменьшение размеров в списках */
  .target-card li{font-size:0.9rem !important;padding:6px 0;line-height:1.5}
  .benefit-card li{font-size:0.9rem !important;margin-bottom:6px;line-height:1.5}
  .step-content li{font-size:0.85rem !important;margin-bottom:6px;line-height:1.5}
  .step-content p{font-size:0.85rem !important;line-height:1.5}
  .step-content ul{font-size:0.85rem !important;padding-left:16px}
  
  /* Уменьшение размеров дополнительных услуг */
  .addon-item{padding:10px !important;font-size:0.8rem !important;line-height:1.5}
  .addon-item strong{font-size:0.8rem !important}
  
  /* Уменьшение размеров этапов работы */
  .process-step{padding:12px !important;gap:12px}
  .step-number{width:32px !important;height:32px !important;font-size:0.85rem !important}
  .process-note{padding:24px 12px 28px 12px !important;font-size:0.9rem !important;margin-top:16px !important;line-height:1.5;white-space:normal !important}
  .process-note br{display:block !important}
  
  /* Отступы после заголовков в плашках "ЭТАПЫ РАБОТЫ" */
  .price-page .process-step .step-content h3{margin-bottom:12px !important}
  
  /* Отступы в плашках с городами */
  .price-page .region-item .step-content h3{margin-bottom:12px !important}
  .price-page .region-item .step-content p{margin-top:8px !important}
  
  /* Уменьшение подзаголовков в разделах "Этапы работы" и "Работаем по всей России" */
  .price-page .section-dark .section-title + p,
  .price-page .section-dark .container > p:first-of-type{font-size:0.8rem !important;line-height:1.5 !important;margin-bottom:20px !important}
  
  /* Оптимизация подзаголовка в секции "РАБОТАЕМ ПО ВСЕЙ РОССИИ" для мобильной версии */
  .price-page #regions .container > p:first-of-type{
    font-size:0.75rem !important;
    line-height:1.6 !important;
    max-width:100% !important;
    padding:0 8px !important;
    text-align:center !important;
    margin:0 auto 24px auto !important;
  }
  
  /* Уменьшение отступов в секциях */
  .price-page .regions-grid{margin-top:20px !important}
  .price-page #products-prices .text-center{margin-top:28px !important}
  
  .cta-section h2{font-size:22px}
  .price-page .btn,.faq-page .btn{font-size:13px !important;padding:10px 24px !important;height:36px !important;box-sizing:border-box !important}
  .price-page .cta-buttons .btn,.faq-page .cta-buttons .btn{font-size:13px !important;padding:10px 24px !important;height:36px !important;box-sizing:border-box !important}
  body:not(.price-page):not(.faq-page) .section-light .text-center .btn-dark,
  body:not(.price-page):not(.faq-page) .section-dark .content-left .btn-light{font-size:13px !important;padding:10px 24px !important;height:36px !important;box-sizing:border-box !important}
  header.container .text-center .case-filter-btn{font-size:13px !important;padding:10px 24px !important;height:36px !important;box-sizing:border-box !important;display:inline-flex !important;align-items:center !important}
  .contact-centered .text-center .btn-dark{font-size:13px !important;padding:10px 24px !important;height:36px !important;box-sizing:border-box !important}
  
  /* Оптимизация шрифтов для FAQ на мобильных устройствах */
  .faq-page .faq-item{padding:14px !important;margin-bottom:20px !important;border-radius:10px !important}
  .faq-page .faq-item h4{font-size:0.7rem !important;margin-bottom:10px !important;line-height:1.3 !important;font-weight:600 !important}
  .faq-page .faq-item p{font-size:0.7rem !important;line-height:1.5 !important;margin-bottom:0 !important}
  .faq-page .faq-item p + p{margin-top:10px !important;padding-top:10px !important;border-top:1px solid rgba(255,255,255,0.08) !important}
  .section-light .faq-page .faq-item p + p{border-top:1px solid rgba(0,0,0,0.1) !important}
  .faq-page .faq-item ul,.faq-page .faq-item ol{margin:10px 0 !important;padding-left:16px !important}
  .faq-page .faq-item li{font-size:0.7rem !important;margin-bottom:6px !important;line-height:1.5 !important;padding-left:4px !important}
  .faq-page .faq-item ul li:not(:last-child)::after{height:1px !important;margin:5px 0 0 -16px !important;background:rgba(255,255,255,0.05) !important}
  .section-light .faq-page .faq-item ul li:not(:last-child)::after{background:rgba(0,0,0,0.08) !important}
  .faq-page .faq-item p + ul,.faq-page .faq-item p + ol{margin-top:10px !important}
  .faq-page .faq-item ul + p,.faq-page .faq-item ol + p{margin-top:10px !important;padding-top:10px !important;border-top:1px solid rgba(255,255,255,0.08) !important}
  .section-light .faq-page .faq-item ul + p,.section-light .faq-page .faq-item ol + p{border-top:1px solid rgba(0,0,0,0.1) !important}
  .faq-page .section-title{font-size:20px !important;margin-bottom:20px !important}
  .faq-page .price-title{font-size:20px !important}
  .faq-page .price-subtitle{font-size:0.85rem !important}
  
  /* Оптимизация шрифтов для страницы cases на мобильных устройствах */
  .cases-page .price-title{font-size:20px !important;margin-bottom:12px !important}
  .cases-page .price-subtitle{font-size:0.8rem !important;margin-bottom:24px !important}
  .cases-page .case-header h2{font-size:1rem !important;margin-bottom:4px !important}
  .cases-page .case-header p{font-size:0.75rem !important}
  .cases-page .case-section h3{font-size:0.9rem !important;margin-bottom:10px !important}
  .cases-page .case-section p{font-size:0.65rem !important;line-height:1.4 !important;margin-bottom:0 !important;max-width:100% !important;word-wrap:break-word !important;overflow-wrap:break-word !important}
  .cases-page .case-section p + p{margin-top:8px !important;padding-top:8px !important;border-top:1px solid rgba(255,255,255,0.08) !important}
  .section-light .cases-page .case-section p + p{border-top:1px solid rgba(0,0,0,0.1) !important}
  .cases-page .case-section p + ul,.cases-page .case-section p + ol{margin-top:8px !important}
  .cases-page .case-section ul + p,.cases-page .case-section ol + p{margin-top:8px !important;padding-top:8px !important;border-top:1px solid rgba(255,255,255,0.08) !important}
  .section-light .cases-page .case-section ul + p,.section-light .cases-page .case-section ol + p{border-top:1px solid rgba(0,0,0,0.1) !important}
  .cases-page .case-section ul{margin:8px 0 !important;padding-left:14px !important}
  .cases-page .case-section li{font-size:0.65rem !important;margin-bottom:4px !important;line-height:1.4 !important;position:relative}
  .cases-page .case-section ul li:not(:last-child)::after{content:'';display:block;height:1px;background:rgba(255,255,255,0.05);margin:4px 0 0 -14px}
  .section-light .cases-page .case-section ul li:not(:last-child)::after{background:rgba(0,0,0,0.08)}
  .cases-page .case-section blockquote{font-size:0.65rem !important;line-height:1.4 !important;padding-left:14px !important}
  
  /* Уменьшение шрифта подзаголовка CTA на странице кейсов в мобильной версии */
  .cases-page #consultation h2{font-size:1rem !important;margin-bottom:16px !important}
  .cases-page #consultation p{font-size:0.8rem !important;margin-bottom:24px !important}
  
  /* Уменьшение ширины кнопки в CTA секции */
  .cases-page #consultation .btn{max-width:220px !important;width:auto !important;padding:12px 24px !important;font-size:13px !important;height:36px !important;box-sizing:border-box !important}
  
  /* Ограничение ширины текста в кейсах для оптимального отображения */
  .cases-page .case-body,
  .cases-page .case-section{
    max-width:100% !important;
    word-wrap:break-word !important;
    overflow-wrap:break-word !important;
  }
  .cases-page .case-section blockquote footer{font-size:0.6rem !important;margin-top:8px !important}
  
  /* Оптимизация шрифтов для страниц блога и сервисов на мобильных устройствах */
  .blog-page .article-content p,.services-page .article-content p{font-size:0.7rem !important;line-height:1.5 !important;margin-bottom:0 !important}
  .blog-page .article-content p + p,.services-page .article-content p + p{margin-top:10px !important;padding-top:10px !important;border-top:1px solid rgba(255,255,255,0.08) !important}
  .blog-page .article-content h2,.services-page .article-content h2{font-size:1.1rem !important;margin-top:32px !important;margin-bottom:16px !important}
  .blog-page .article-content h3,.services-page .article-content h3{font-size:1rem !important;margin-top:24px !important;margin-bottom:12px !important}
  .blog-page .article-content ul,.blog-page .article-content ol,.services-page .article-content ul,.services-page .article-content ol{margin:10px 0 !important;padding-left:16px !important}
  .blog-page .article-content li,.services-page .article-content li{font-size:0.7rem !important;margin-bottom:5px !important;line-height:1.5 !important}
  .blog-page .article-content p + ul,.blog-page .article-content p + ol,.services-page .article-content p + ul,.services-page .article-content p + ol{margin-top:10px !important}
  .blog-page .article-content ul + p,.blog-page .article-content ol + p,.services-page .article-content ul + p,.services-page .article-content ol + p{margin-top:10px !important;padding-top:10px !important;border-top:1px solid rgba(255,255,255,0.08) !important}
  .blog-page .blog-card p,.services-page .blog-card p{font-size:0.7rem !important;line-height:1.5 !important}
  .blog-page .blog-card h2,.services-page .blog-card h2{font-size:1rem !important}
}

/* Отступ сверху для страниц блога, чтобы шапка не перекрывала заголовок (кроме главной страницы) */
body:not(.home-page) main > section:first-child,
body:not(.home-page) main > .section-light:first-child,
body:not(.home-page) main > .section-dark:first-child {
  padding-top: calc(var(--header-height) + 24px) !important;
}

/* Для страниц блога с main.container и article внутри */
main.container > article.blog-article,
main.container > article {
  padding-top: calc(var(--header-height) + 24px) !important;
}

/* Для main.container на страницах блога (если article не имеет padding-top) */
main.container:has(article) {
  padding-top: calc(var(--header-height) + 24px) !important;
}

/* Стили для карточек блога - фиксация кнопок внизу */
.blog-card {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.blog-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

.blog-content .btn {
  margin-top: auto !important;
  align-self: flex-start !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Стили для сетки блога - предотвращение переполнения */
.blog-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)) !important;
  gap: 32px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Мобильная версия - одноколоночная сетка */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  
  /* Дополнительная защита от переполнения на странице блога */
  .section-dark .container,
  .section-light .container {
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .blog-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .blog-image {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  
  .blog-content {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* Маленькие мобильные устройства */
@media (max-width: 480px) {
  .blog-grid {
    gap: 20px !important;
  }
}

/* Cookie Banner */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding: 20px 24px;
  z-index: 10000;
  box-shadow: 0 -4px 12px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.cookie-banner-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cookie-banner-text {
  flex: 1;
  min-width: 250px;
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.cookie-banner-text a {
  color: var(--brand);
  text-decoration: underline;
}

.cookie-banner-text a:hover {
  color: #8B7355;
}

.cookie-banner-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  height: 36px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cookie-btn:hover {
  background: var(--bg-2);
  border-color: var(--brand);
}

.cookie-btn-accept {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}

.cookie-btn-accept:hover {
  background: #8B7355;
  border-color: #8B7355;
}

@media (max-width: 768px) {
  .cookie-banner {
    padding: 16px;
  }
  
  .cookie-banner-content {
    flex-direction: column;
    align-items: stretch;
  }
  
  .cookie-banner-buttons {
    width: 100%;
    flex-direction: column;
  }
  
  .cookie-btn {
    width: 100%;
  }
}