/* 
 * Главный стили-файл (RU-версия)  
 * 08-Aug-2025 — только верхний hero-блок заменён на «английскую» логику
 *   + анимация ноутбука и центрирование пузырей на мобиле.
 * ВСЕ остальные секции (услуги, баннер 92 %, кейсы и т. д.) оставлены
 * БЕЗ изменений, ровно как в исходном русском варианте.
 */

/* ---------- Переменные ---------- */
:root{
  --primary-color:#009bd8;
  --primary-dark:#0071a8;
  --accent-color:#ff7300;
  --light-bg:#f7f9fc;
  --dark-color:#1a1a1a;
  --text-color:#555;
  --card-bg:#ffffff;
  --border-radius:20px;
  --transition-duration:.6s;
}

/* ===== Анимация «плавания» ноутбука (моб. hero) ===== */
@keyframes laptopFloat{
  0%,100%{transform:rotate(-8deg) translateY(0);}
  50%    {transform:rotate(-8deg) translateY(-6px);} /* лёгкое покачивание */
}

/* ---------- Сброс ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
img{
  max-width:100%;display:block;background:transparent;box-shadow:none;
  filter:drop-shadow(0 0 0 rgba(0,0,0,0));transform:translateZ(0);
  transition:transform .45s var(--ease-smooth, ease),
             filter   .45s var(--ease-smooth, ease),
             opacity  .45s var(--ease-smooth, ease);
  will-change:transform,filter;
}
img:hover{transform:translateY(-4px);filter:drop-shadow(0 16px 32px rgba(0,0,0,.12));}

body{
  font-family:Arial,Helvetica,sans-serif;background:var(--light-bg);
  color:var(--dark-color);line-height:1.6;scroll-behavior:smooth;
}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1rem;}

/* ---------- Шапка (как было) ---------- */
.header{position:fixed;top:0;left:0;width:100%;background:#fff;
        box-shadow:0 2px 8px rgba(0,0,0,.05);z-index:1000;}
.header .container{display:flex;align-items:center;justify-content:space-between;height:70px;}
.logo img{height:40px;}

.nav-list{list-style:none;display:flex;gap:6rem;}
.nav-list a{color:var(--dark-color);text-decoration:none;font-weight:500;transition:color .2s;}
.nav-list a:hover{color:#009bd8;}
.nav-list a.active{color:#009bd8;font-weight:600;}

.lang-switch{font-size:.9rem;display:flex;gap:.25rem;align-items:center;}
.lang-switch a{color:var(--dark-color);text-decoration:none;font-weight:500;}
.lang-switch a.active-lang{color:#009bd8;font-weight:600;}

.contact-btn{display:inline-flex;align-items:center;justify-content:center;
             background:var(--primary-color);color:#fff;padding:.55rem 1.1rem;
             border-radius:30px;text-decoration:none;font-weight:600;
             transition:background .3s,font-size .3s,padding .3s;}
.contact-btn:hover{background:var(--primary-dark);}

.burger{display:none;flex-direction:column;gap:5px;background:none;
        border:0;cursor:pointer;padding:.5rem;}
.burger span{width:25px;height:3px;background:var(--dark-color);border-radius:3px;
            transition:transform .3s,opacity .3s;}
.burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

@media (max-width:768px){
  .header .container{padding:0 12px;}
  .nav-list{position:fixed;top:70px;right:0;width:70%;max-width:340px;background:#fff;
            flex-direction:column;gap:1.25rem;padding:1.75rem 1.25rem;
            height:calc(100vh - 70px);transform:translateX(100%);
            transition:transform .3s ease;box-shadow:-2px 0 8px rgba(0,0,0,.1);}
  .nav-list.open{transform:translateX(0);}
  .burger{display:flex;}
  .contact-btn{font-size:14px;padding:.45rem .9rem;border-radius:22px;}
  .header .contact-btn{margin-left:auto;margin-right:.5rem;order:2;}
  .header .burger{order:3;}
}
@media (max-width:420px){
  .contact-btn{font-size:13px;padding:.38rem .75rem;border-radius:20px;}
  .logo img{height:32px;}
}

/* ===================================================================
   HERO-блок: заменён на англ. логику (центрирование текстовых пузырей,
   анимированный ноутбук, «воздух» сверху и т. д.)
   =================================================================== */
.hero-section{
  padding-top:120px;          /* десктоп */
  padding-bottom:60px;
  background:var(--light-bg);
  overflow:visible;           /* чтобы ноутбук не обрезался */
}

/* Десктоп/планшет — 2 колонки (как было) */
.hero-container{display:flex;align-items:center;flex-wrap:wrap;gap:2rem;}
.hero-image{flex:1 1 300px;display:flex;justify-content:center;}
.hero-image img{
  width:320px;max-width:100%;background:transparent;
  filter:drop-shadow(0 0 0 transparent);transform:translateZ(0);
  transition:transform .45s var(--ease-smooth, ease),
             filter   .45s var(--ease-smooth, ease),
             opacity  .45s var(--ease-smooth, ease);
}
.hero-image img:hover{transform:translateY(-4px);
                      filter:drop-shadow(0 16px 32px rgba(0,0,0,.12));}

.hero-text{flex:1 1 350px;display:flex;flex-direction:column;gap:1rem;}

.bubble-img{
  width:100%;max-width:380px;border-radius:var(--border-radius);display:block;
  background:transparent;filter:drop-shadow(0 0 0 transparent);transform:translateZ(0);
  transition:transform .45s var(--ease-smooth, ease),
             filter   .45s var(--ease-smooth, ease),
             opacity  .45s var(--ease-smooth, ease);
}
.bubble-img:hover{transform:translateY(-4px);
                  filter:drop-shadow(0 16px 32px rgba(0,0,0,.12));}
.bubble-img-wrapper{position:relative;max-width:380px;}
.bubble-img-wrapper .bubble-img{width:100%;}
.trophy-icon{display:none !important;}

/* ---------- Мобильная компоновка hero ---------- */
@media (max-width:600px){

  .hero-section{padding-top:108px;padding-bottom:32px;} /* больше «воздуха» */

  /* Телефон/изображение скрыт, блок становится колонкой */
  .hero-container{display:block;}
  .hero-image{display:none;}

  /* Пузыри по центру, ширина ограничена */
  .hero-text{
    position:relative;display:flex;flex-direction:column;align-items:center;
    gap:.55rem;margin:0 auto;width:100%;
  }
  .bubble-img,
  .bubble-img-wrapper{margin-inline:auto;max-width:clamp(150px,46vw,240px);}

  /* Ноутбук-оверлей: меньше + анимация */
  .mac-overlay{
    display:block;position:absolute;top:-60px;right:-12px;
    width:30vw;max-width:120px;transform:rotate(-8deg);
    animation:laptopFloat 5s ease-in-out infinite;
    z-index:2;pointer-events:none;
  }
}

/* ---------- Фолбэк для браузеров без filter ---------- */
@supports not (filter: drop-shadow(0 0 0 #000)){
  img:hover,
  .hero-image img:hover,
  .bubble-img:hover{box-shadow:0 16px 32px rgba(0,0,0,.12);}
}

/* ---------- Секции и заголовки (без изменений) ---------- */
.section-title{font-size:2rem;font-weight:700;text-align:center;margin-bottom:2rem;color:var(--dark-color);}
@media (max-width:600px){.section-title{font-size:1.4rem;margin-bottom:1.25rem;}}

/* ---------- Универсальная «мягкая» анимация наведения ---------- */
.hover-lift{transition:transform .45s ease,box-shadow .45s ease,opacity .45s ease;will-change:transform,box-shadow;}
.hover-lift:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.12);}

/* ===================================================================
   ДАЛЬНЕЙШИЕ БЛОКИ (услуги, баннер 92 %, кейсы и т. д.)
   Ни одного свойства не менялось — оставлено как было в русской версии
   =================================================================== */

/* ===================== Услуги (как было) ===================== */
.services{background:var(--card-bg);padding:4rem 0;scroll-margin-top:80px;}
#services .section-title{margin-bottom:1.25rem;}
.service-cards{display:grid;grid-template-columns:repeat(3,360px);gap:1.25rem;
               justify-content:space-between;align-items:start;}
.service-card{width:360px;max-width:100%;background:transparent;border-radius:0;padding:0;
              box-shadow:none;display:flex;flex-direction:column;gap:0;overflow:visible;}
.service-card img{width:100%;height:260px;object-fit:contain;display:block;
                  background:transparent;border-radius:var(--border-radius);box-shadow:none;
                  filter:drop-shadow(0 0 0 transparent);transform:translateZ(0);
                  transition:transform .45s ease,filter .45s ease,opacity .45s ease;}
.service-card img:hover{transform:translateY(-4px);
                        filter:drop-shadow(0 16px 32px rgba(0,0,0,.12));}
.service-icon{width:50px;height:50px;}
.service-icon .icon{width:100%;height:100%;object-fit:contain;}
@media (max-width:1140px){.service-cards{grid-template-columns:repeat(2,360px);justify-content:center;gap:1.25rem;}}
@media (max-width:760px){
  .services{padding:2.25rem 0;}
  .service-cards{grid-template-columns:1fr;justify-content:center;}
  .service-card{width:min(360px,100%);margin:0 auto;}
  .service-card img{height:auto;object-fit:contain;}
}

/* ===================== Баннер 92 % (как было) ===================== */
.banner{margin:4rem 0;text-align:center;scroll-margin-top:80px;}
.banner img{
  width:100%;border-radius:var(--border-radius);background:transparent;
  box-shadow:none;filter:drop-shadow(0 0 0 transparent);transform:translateZ(0);
  transition:transform .45s var(--ease-smooth, ease),
             filter   .45s var(--ease-smooth, ease),
             opacity  .45s var(--ease-smooth, ease);
}
.banner img:hover{transform:translateY(-4px);
                  filter:drop-shadow(0 16px 32px rgba(0,0,0,.12));}

/* ===================== Остальные блоки, кейсы и пр. ===================== */
/*  …полностью без изменений, копируйте из исходного файла RU-версии… */

/* Фолбэк для старых браузеров без filter:drop-shadow */
@supports not (filter: drop-shadow(0 0 0 #000)){
  .banner img:hover{ box-shadow:0 16px 32px rgba(0,0,0,.12); }
}

/* ===================== Крупные карточки ИИ (без подложек) ===================== */
.features-large{background:var(--light-bg);padding:4rem 0;scroll-margin-top:80px;}
.features-grid{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;}
.feature-item{
  flex:1 1 300px;background:transparent;border-radius:0;padding:0;box-shadow:none;
  display:flex;flex-direction:column;gap:0;overflow:visible;
}
/* ===================== Кейсы ===================== */
.cases{padding:4rem 0;background:var(--card-bg);scroll-margin-top:80px;}
.case-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;align-items:flex-start;}
.case-card{flex:1 1 280px;background:transparent;border-radius:0;padding:0;box-shadow:none;overflow:visible;}
.case-card img{
  width:100%;height:auto;display:block;border-radius:var(--border-radius);
  transition:transform .45s ease,box-shadow .45s ease,opacity .45s ease;box-shadow:none;
}
.case-card img:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.12);}
.cases .animate.hidden{opacity:0;transform:translateY(24px);}
.cases .animate.show{opacity:1;transform:translateY(0);transition:opacity var(--transition-duration) ease-out,transform var(--transition-duration) ease-out;}

/* ===================== Процесс работы ===================== */
.process{background:var(--light-bg);padding:4rem 0;scroll-margin-top:80px;}
.process-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;}
.process-card{
  flex:1 1 280px;background:var(--card-bg);border-radius:var(--border-radius);
  padding:2rem;box-shadow:0 10px 20px rgba(0,0,0,.05);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:transform .45s ease,box-shadow .45s ease;
}
.process-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(0,0,0,.12);}
.process-card img{border-radius:10px;}
.process-card h3{margin-top:1rem;font-size:1.25rem;color:var(--dark-color);}
.process-card p{color:var(--text-color);font-size:.95rem;}
@media (max-width:600px){ .process{padding:2.5rem 0;} }

/* ---------- Контакты ---------- */
.contact{padding:4rem 0;background:var(--card-bg);scroll-margin-top:80px;}
.contact-info{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center;margin-top:1.5rem;}
.contact-item{display:flex;align-items:flex-start;gap:.7rem;color:var(--dark-color);font-size:.95rem;}
.contact-item a{color:var(--primary-color);text-decoration:none;transition:color .2s;}
.contact-item a:hover{text-decoration:underline;}
.icon-wrapper{width:24px;height:24px;color:var(--primary-color);flex-shrink:0;}
.icon-wrapper svg{width:100%;height:100%;fill:currentColor;}
.subtext{text-align:center;color:var(--text-color);font-size:.95rem;}
.legal{margin-top:2rem;text-align:center;font-size:.85rem;color:var(--text-color);}
@media (max-width:600px){ .contact{padding:2.5rem 0;} }

/* ---------- Подвал ---------- */
.footer{background:#f0f2f5;padding:2rem 0;text-align:center;font-size:.85rem;color:#777;}

/* ---------- Анимации при прокрутке ---------- */
.animate.hidden{opacity:0;transform:translateY(30px);}
.animate.show{
  opacity:1;transform:translateY(0);
  transition:opacity var(--transition-duration) ease-out,transform var(--transition-duration) ease-out;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  img,
  .hover-lift,.hover-lift:hover,
  .service-card img,.feature-item img,.case-card img,.banner img,.process-card,
  .animate.show{
    transition:none !important;transform:none !important;box-shadow:none !important;
  }
}

/* ======= Стили для внутренних страниц ======= */
/* (— код без изменений —) */


/* =======================================================================
   Мобильный герой — правка 07-Aug-2025
   Блоки «сообщений» центрируются, ноутбук — меньше и жёстко
   чуть выходит за верхнюю кромку первого пузыря.
   ======================================================================= */
@media (max-width:600px){

  /* 1. Делаем контейнер с пузырями flex-колонкой и центрируем их */
  .hero-text{
    position:relative;                 /* для абсолютного позиционирования ноутбука  */
    display:flex;
    flex-direction:column;
    align-items:center;               /* центрируем сами пузыри */
    width:100%;
    gap:.55rem;
    margin:0 auto;                    /* центр внутри родительского grid-столбца */
  }
  /* каждый пузырь тоже по центру — чтобы не «прилипали» к левому краю */
  .bubble-img,
  .bubble-img-wrapper{
    margin-left:auto;
    margin-right:auto;
  }

  /* 2. Ноутбук: меньше, чёткая позиция и минимальная привязка к первому пузырю */
  .mac-overlay{
    display:block;
    position:absolute;
    top:-58px;         /* на 5-7 px перекрываем первый пузырь сверху */
    right:-12px;       /* чуть «вылезаем» за правый край блока */
    width:30vw;        /* пропорционально экрану, но меньше чем раньше */
    max-width:120px;   /* фиксированный потолок */
    transform:rotate(-8deg);
    z-index:2;
    pointer-events:none;
  }
}

/* ======= Стили для внутренних страниц ======= */
/* Герой внутренних страниц: две колонки с текстом и изображением */
.page-hero{
  padding-top:120px;
  padding-bottom:60px;
  /* Задаём лёгкий голубой градиент фона для первой секции, как в макете */
  background: linear-gradient(135deg, #e9f5fc 0%, #ffffff 100%);
  position: relative;
}
.page-hero .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2rem;
}
.page-hero .text-col{
  flex:1 1 50%;
}
.page-hero .text-col h1{
  font-size:2rem;
  margin-bottom:1rem;
  color:var(--dark-color);
}
.page-hero .text-col p{
  font-size:1rem;
  color:var(--text-color);
}
.page-hero .image-col{
  flex:1 1 50%;
  text-align:center;
}
.page-hero .image-col img{
  max-width:100%;
  border-radius:20px;
  box-shadow:0 10px 20px rgba(0,0,0,0.05);
}

page-hero .image-col img:hover{
  /* на внутренних — тоже «как на главной» */
  transform:translateY(-4px);
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.12));
}

/* Секции деталей на внутренних страницах */
.page-detail{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2rem;
  max-width:1200px;
  margin:0 auto;
  padding:3rem 1rem;
  /* По умолчанию внутренние секции имеют белый фон. Для чётных секций фон переопределяется ниже. */
  background:#ffffff;
  border-radius:20px;
  box-shadow:0 8px 20px rgba(0,0,0,0.03);
  margin-bottom:3rem;
}
.page-detail:nth-of-type(even){
  /* Чётные секции выворачиваем строку и задаём светлый фон для чередования карточек */
  flex-direction:row-reverse;
  background:var(--light-bg);
}
.page-detail .image-col{
  flex:1 1 50%;
  text-align:center;
}
.page-detail .image-col img{
  max-width:100%;
  border-radius:20px;
  box-shadow:0 10px 20px rgba(0,0,0,0.05);
}
.page-detail .image-col img:hover{
  transform:translateY(-4px);
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.12));
}
.page-detail .text-col{
  flex:1 1 50%;
}
.page-detail .text-col h2{
  font-size:1.6rem;
  margin-bottom:.75rem;
  color:var(--dark-color);
}
.page-detail .text-col p{
  font-size:1rem;
  color:var(--text-color);
  margin-bottom:.75rem;
}
@media (max-width:768px){
  .page-hero .container,
  .page-detail{
    flex-direction:column;
    text-align:center;
  }
  .page-detail:nth-of-type(even){
    flex-direction:column;
  }
}

/* === Специальные стили для страницы дизайна (Старый блок) ===
   ОСТАВЛЯЕМ для других внутренних страниц. Для /design.html он будет
   переопределён более специфичными правилами ниже. */
.page-detail.marketplace,
.page-detail.brand-design{
  background: linear-gradient(135deg, #e9f5fc 0%, #ffffff 100%);
}
.page-detail.marketplace{flex-direction: row;}
.page-detail.brand-design{flex-direction: row-reverse;}


/* ======================================================================
   ПЕРЕОПРЕДЕЛЕНИЯ ДЛЯ /design.html (встроена логика из второго CSS)
   Всё строго под .design-page — другие страницы не затрагиваются.
   ====================================================================== */

/* Локальные переменные и базовые цвета ТОЛЬКО для design.html */
.design-page{
  --primary-color:#239eca;
  --primary-dark:#1c84ab;
  --dark:#1a1a1a;
  --muted:#5b6166;
  --hero-soft:#eef6fb;
  --section-soft:#e9f5fc;
  --panel-soft:#e9f5fc;
  --contact-gray:#ececee;
  --white:#fff;
  --radius:20px;
}

/* Доступность — скрытые заголовки в пределах страницы дизайна */
.design-page .visually-hidden{
  position:absolute!important;clip:rect(0 0 0 0);clip-path:inset(50%);
  width:1px;height:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Шапка: поддержка новой разметки nav/nav__list только на этой странице */
.design-page .nav{display:block;}
.design-page .nav__list{display:flex;list-style:none;gap:6rem;} /* унифицировано */
.design-page .nav__list a{
  text-decoration:none;color:var(--dark);font-weight:500;transition:color .2s ease;
}
.design-page .nav__list a:hover{color:#009bd8;} /* унифицировано */
.design-page .nav__list a.is-active{color:#009bd8;font-weight:600;} /* унифицировано */
.design-page .header__cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:.55rem 1.1rem;border-radius:30px;
  background:var(--primary-color);color:#fff;text-decoration:none;font-weight:700;
  transition:background .2s ease,transform .2s ease;
}
.design-page .header__cta:hover{background:var(--primary-dark);}

/* Мобильное меню исключительно для .design-page .nav/.nav__list */
@media (max-width:768px){
  .design-page .nav{display:none;position:absolute;left:0;right:0;top:70px;background:#fff;
       box-shadow:0 8px 24px rgba(0,0,0,.08);}
  .design-page .nav.open{display:block;}
  .design-page .nav__list{flex-direction:column;gap:1.25rem;padding:1.75rem 1.25rem;} /* унифицировано */
  .design-page .nav__list li{border-bottom:0;} /* унифицировано */
  .design-page .nav__list li:last-child{border-bottom:0;}
  .design-page .nav__list a{display:block;padding:0;} /* унифицировано */
  .design-page .header__cta{font-size:14px;padding:.45rem .9rem;border-radius:22px;}
}
@media (max-width:420px){
  .design-page .header__cta{font-size:13px;padding:.38rem .75rem;border-radius:20px;}
  .design-page .logo img{height:32px;}
}

/* ----- HERO на странице дизайна ----- */
.design-page .page-hero{
  position:relative;
  padding-top:120px;
  padding-bottom:60px;
  background:linear-gradient(180deg, var(--hero-soft) 0%, #fff 68%);
}
.design-page .page-hero .container{
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:2rem;
}
.design-page .page-hero .text-col h1{
  font-size:2rem;line-height:1.25;margin-bottom:1rem;color:var(--dark);
}
.design-page .page-hero .text-col p{
  max-width:520px;color:var(--muted);font-size:1rem;
}
.design-page .page-hero .image-col{display:flex;justify-content:center;}
.design-page .page-hero .image-col img{
  width:420px;max-width:100%;
  filter:drop-shadow(0 14px 32px rgba(0,0,0,.10));
}

/* Разделитель после героя */
.design-page .section-separator{
  border:0;height:1px;width:100%;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, #e6edf2 12%, #e6edf2 88%, rgba(0,0,0,0) 100%);
}

/* ----- Секция «Маркетплейсы» ----- */
.design-page .page-detail.marketplace{
  position:relative;
  max-width:1200px;margin:0 auto;padding:48px 16px;
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;
}
.design-page .page-detail.marketplace::before{
  content:"";position:absolute;z-index:-1;inset:0;
  left:50%;transform:translateX(-50%);width:100vw;height:100%;
  background:linear-gradient(180deg, var(--section-soft) 0%, #fff 85%);
}
.design-page .page-detail.marketplace .image-col{display:flex;justify-content:flex-start;}
.design-page .page-detail.marketplace .image-col img{
  width:520px;max-width:100%;filter:drop-shadow(0 20px 40px rgba(0,0,0,.12));
}
.design-page .page-detail.marketplace .text-col h2{
  font-size:1.7rem;line-height:1.25;margin-bottom:.75rem;color:var(--dark);
}
.design-page .page-detail.marketplace .text-col p{
  color:var(--muted);font-size:1rem;max-width:540px;
}

/* ----- Секция «Рекламный дизайн» ----- */
.design-page .page-detail.brand-design{
  position:relative;
  max-width:1200px;margin:0 auto;padding:48px 16px;
  display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center;background:#fff;
}
.design-page .page-detail.brand-design::before{
  content:"";position:absolute;z-index:-1;right:0;top:50%;transform:translateY(-50%);
  width:48%;height:86%;border-radius:var(--radius);
  background:linear-gradient(180deg, var(--panel-soft) 0%, #fff 95%);
}
.design-page .page-detail.brand-design .text-col h2{
  font-size:1.7rem;line-height:1.25;margin-bottom:.75rem;color:var(--dark);
}
.design-page .page-detail.brand-design .text-col p{
  color:var(--muted);font-size:1rem;max-width:540px;
}
.design-page .page-detail.brand-design .image-col{display:flex;justify-content:center;}
.design-page .page-detail.brand-design .image-col img{
  width:440px;max-width:100%;filter:drop-shadow(0 18px 36px rgba(0,0,0,.12));
}

/* ----- Контакты (плоский блок) ----- */
.design-page .contact-plain{
  background:var(--contact-gray);padding:36px 0 44px;
}
.design-page .contact-plain .contact-text{
  max-width:1200px;margin:0 auto;padding:0 16px;color:#1a1a1a;
}
.design-page .contact-plain p{margin:.35rem 0;font-size:1rem;}
.design-page .contact-plain p strong{font-weight:700;}
.design-page .contact-plain .spacer{height:.25rem;}

/* ----- Адаптив для страницы дизайна ----- */
@media (max-width:1024px){
  .design-page .page-detail.marketplace,
  .design-page .page-detail.brand-design{
    grid-template-columns:1fr;text-align:center;
  }
  .design-page .page-detail.marketplace .image-col,
  .design-page .page-detail.brand-design .image-col{justify-content:center;}
  .design-page .page-detail.brand-design::before{
    width:92%;left:50%;right:auto;transform:translate(-50%,-50%);height:78%;
  }
}
@media (max-width:600px){
  .design-page .page-hero{padding-top:96px;padding-bottom:36px;}
  .design-page .page-hero .container{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:.75rem;align-items:start;
  }
  .design-page .page-hero .image-col img{width:clamp(160px,44vw,220px);}
}
/* ======================================================================
   SITE-WIDE Enhancements (animations + unified footer)
   ====================================================================== */

/* Единый подвал как на главной — применяется на всех страницах */
.footer {
  --line-color: var(--line, #e6edf2);
  background: #fff;
  border-top: 1px solid var(--line-color);
  padding: 24px 0;
  font-size: 14px;
  color: #5b6166;
}
.footer .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

/* Глобальные анимации «как на главной» */
:root {
  --reveal-distance: 24px;
  --reveal-duration: .7s;
  --reveal-ease: cubic-bezier(.22,.61,.36,1);
}
.reveal, [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity var(--reveal-duration) var(--reveal-ease),
    transform var(--reveal-duration) var(--reveal-ease);
  will-change: transform, opacity;
}
.reveal.in-view, [data-reveal].in-view {
  opacity: 1;
  transform: none;
}
/* Удобные задержки: добавляйте .d100/.d200/... для каскадного появления */
.d100 { transition-delay: .10s; }
.d200 { transition-delay: .20s; }
.d300 { transition-delay: .30s; }
.d400 { transition-delay: .40s; }
.d500 { transition-delay: .50s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, [data-reveal] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ======================================================================
   Переопределения под референс для /services.html
   (работают только когда на <html> установлен класс .services-page)
   ====================================================================== */
.services-page {
  --blue: #239eca; /* акцент кнопки/ссылок как в макете */
  --text: #1a1a1a;
  --muted: #5b6166;
  --soft-bg: #eef6fb;
  --line: #e6edf2;
  --radius: 20px;
}

/* ---------- Шапка (межстрочные/пробелы как на референсе) ---------- */
.services-page .header { background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.services-page .header__inner { height:70px; display:flex; align-items:center; justify-content:space-between; }
.services-page .logo img { height:40px; }
.services-page .nav .nav-list { gap:6rem; } /* унифицировано */
.services-page .nav .nav-list a { color:var(--text); font-weight:500; }
.services-page .nav .nav-list a.active { color:#009bd8; font-weight:600; } /* унифицировано */
.services-page .contact-btn{
  background:var(--blue); color:#fff; border-radius:30px; min-height:38px;
  padding:.55rem 1.1rem; font-weight:700;
}
.services-page .contact-btn:hover{ filter:brightness(.94); }

/* ---------- Контейнер ---------- */
.services-page .container{ max-width:1200px; margin:0 auto; padding:0 16px; }

/* ---------- HERO ---------- */
.services-page .s-hero{
  padding-top:120px; padding-bottom:56px;
  background:linear-gradient(180deg, var(--soft-bg) 0%, #fff 68%);
}
.services-page .s-hero__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center;
}
.services-page .s-hero__media{ display:flex; justify-content:flex-start; }
.services-page .s-hero__media img{ width:460px; max-width:100%; border-radius:var(--radius); }
.services-page .shadow-soft{ filter:drop-shadow(0 14px 32px rgba(0,0,0,.10)); }
.services-page .s-hero__text{ max-width:560px; justify-self:end; }
.services-page .s-hero__title{
  font-size:32px; line-height:1.25; color:var(--text); margin:0 0 12px;
}
.services-page .s-hero__title strong{ font-weight:800; }
.services-page .lead{ color:var(--muted); font-size:16px; line-height:1.55; }

/* Ровный разделитель после героя */
.services-page .section-separator{
  display:block; border:0; height:1px; width:100%;
  background:linear-gradient(90deg, rgba(0,0,0,0) 0%, var(--line) 12%, var(--line) 88%, rgba(0,0,0,0) 100%);
}

/* ---------- Секции (единая сетка и верные ориентации) ---------- */
.services-page .s-slice {
  padding: 44px 0;
}

/* Уменьшаем только верхний отступ у первого блока */
.services-page .s-slice.s-slice--qa {
  padding-top: 12px;   /* ↓ меньше сверху */
  padding-bottom: 20px;/* ↓ меньше снизу */
}

/* остальной код без изменений */
.services-page .slice__grid {
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 2rem; 
  align-items: center;
}
.services-page .slice__title {
  font-size: 26px; 
  line-height: 1.25; 
  color: var(--text); 
  margin: 0 0 12px;
}
.services-page .slice__p {
  color: var(--muted); 
  font-size: 16px; 
  line-height: 1.55;
}
.services-page .slice__media {
  display: flex; 
  justify-content: center;
}
.services-page .slice__media img {
  max-width: 520px; 
  width: 100%; 
  border-radius: var(--radius);
}
.services-page .s-slice + .s-slice {
  border-top: 1px solid var(--line);
}

/* Вариант с инверсией колонок (только для AI-блока) */
.services-page .s-slice--reverse .slice__grid {
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 769px) {
  .services-page .s-slice--reverse .slice__grid > .slice__media {
    order: 1;
  }
  .services-page .s-slice--reverse .slice__grid > .slice__text {
    order: 2;
  }
}


/* ---------- Контакты ---------- */
.services-page .s-contact{ background:#fff; padding:48px 0 56px; border-top:1px solid var(--line); }
.services-page .s-contact__title{ text-align:center; font-size:26px; margin-bottom:8px; color:var(--text); }
.services-page .s-contact__sub{ text-align:center; color:var(--muted); margin-bottom:16px; }
.services-page .s-contact__rows{
  display:flex; flex-wrap:wrap; gap:24px 32px; justify-content:center; margin:16px auto 0;
}
.services-page .s-contact__row{ display:flex; gap:10px; align-items:flex-start; color:var(--text); }
.services-page .s-contact__row a{ color:var(--blue); text-decoration:none; }
.services-page .s-contact__row a:hover{ text-decoration:underline; }
.services-page .s-contact__icon{ width:24px; height:24px; fill:var(--blue); flex:0 0 24px; }
.services-page .s-contact__legal{ text-align:center; color:var(--muted); margin-top:20px; font-size:14px; }

/* ---------- Адаптив ---------- */
@media (max-width:1024px){
  .services-page .s-hero__grid,
  .services-page .slice__grid{ grid-template-columns:1fr; }
  .services-page .s-hero__text{ justify-self:start; max-width:720px; }
  .services-page .s-hero__media{ justify-content:center; }
  .services-page .s-hero{ padding-top:96px; padding-bottom:36px; }
}
@media (max-width:600px){
  .services-page .s-hero__title{ font-size:24px; }
  .services-page .slice__title{ font-size:22px; }
  .services-page .lead,
  .services-page .slice__p{ font-size:15px; }
  .services-page .contact-btn{ font-size:14px; padding:.45rem .9rem; border-radius:22px; }
  .services-page .logo img{ height:32px; }
}
/* ======================================================================
   END services-page overrides
   ====================================================================== */

/* ----------------------------------------------------------------------
   Custom mobile layout for the hero and services sections
   The following rules adjust the top two blocks on mobile screens to
   resemble the provided mock-up. These styles only apply on screens
   narrower than 600px. On larger screens the existing desktop layout
   remains unaffected.
   ---------------------------------------------------------------------- */
@media (max-width:600px){
  /* Hide the default phone image on mobile to allow space for the stacked bubbles */
  .hero-image{
    display:none;
  }
  /* Collapse the hero container into a single column */
  .hero-container{
    display:block;
  }
  /* Position the Mac overlay inside the hero text area */
  .hero-text{
    position:relative;
    width:100%;
  }
  .mac-overlay{
    display:block;
    position:absolute;
    /* Position the laptop so that it slightly overlaps the top edge of the first bubble */
    top:-65px;
    right:0;
    /* Scale relative to viewport width for better responsiveness */
    width:35vw;
    max-width:140px;
    transform:rotate(-8deg);
    z-index:2;
    pointer-events:none;
  }
  /* Hide the original services title and cards on mobile */
  #services .section-title{
    display:none;
  }
  #services .service-cards{
    display:none;
  }
  /* Apply the white laptop background pattern behind the hero section on mobile */
  .hero-section{
    background-image:url('assets/fon.svg');
    background-repeat:no-repeat;
    background-position:top center;
    background-size:cover;
  }
  /* Use a soft blue gradient for the second block instead of a solid white background */
  #services{
    background:linear-gradient(180deg, #D3EAF5 0%, #EFFAFF 100%);
  }
  /* Show the mobile-specific second block */
  .mobile-second{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-top:1.5rem;
    gap:0.5rem;
  }
  .mobile-second-title{
    font-size:1.6rem;
    font-weight:700;
    color:var(--dark-color);
    margin:0;
  }
  .mobile-second-subtitle{
    font-size:1rem;
    color:var(--text-color);
    max-width:28ch;
    margin:0;
  }
  .mobile-second img{
    width:70%;
    max-width:300px;
    margin-top:1rem;
  }
}
/* Ensure the mobile-specific elements remain hidden on larger screens */
@media (min-width:601px){
  .mobile-second{
    display:none;
  }
  .mac-overlay{
    display:none;
  }
}

.features-grid{
  /* две фиксированные колонки по 540 px и строго по центру */
  display:grid;
  grid-template-columns:repeat(2,540px);
  justify-content:center;
  gap:3rem;                  /* чуть больше воздуха */
}

.feature-item{
  width:540px;               /* 360 px × 1.5 */
  max-width:540px;
}

/* Планшеты и телефоны ≤900 px — снова одна колонка */
@media (max-width:900px){
  .features-grid{
    grid-template-columns:1fr;
    gap:2rem;
  }
  .feature-item{
    width:100%;
    max-width:100%;
  }
}


/* ======================================================================
   ЕДИНЫЙ МЕНЮ-БЛОК ДЛЯ ВСЕХ СТРАНИЦ (как на главной)
   — единые отступы, ховер и активные состояния
   ====================================================================== */

/* Десктоп: одинаковый зазор между пунктами меню */
.nav-list,
.design-page .nav__list,
.services-page .nav .nav-list { gap:6rem; }

/* Базовые стили ссылок в меню */
.nav-list a,
.design-page .nav__list a,
.services-page .nav .nav-list a{
  color:var(--dark-color);
  text-decoration:none;
  font-weight:500;
  transition:color .2s;
}

/* Ховер — цвет как на главной */
.nav-list a:hover,
.design-page .nav__list a:hover,
.services-page .nav .nav-list a:hover{ color:#009bd8; }

/* Активный пункт — цвет и жирность как на главной */
.nav-list a.active,
.design-page .nav__list a.is-active,
.services-page .nav .nav-list a.active{
  color:#009bd8;
  font-weight:600;
}

/* Мобильные списки — такие же отступы/без разделителей */
@media (max-width:768px){
  .services-page .nav .nav-list{ gap:1.25rem; }
  .design-page .nav__list{ gap:1.25rem; padding:1.75rem 1.25rem; }
  .design-page .nav__list li{ border:0; }
}