:root{
      --radius:1.25rem;
      /* дефолт — тёмная, но реально всё управляется data-theme */
      --bg:#0b1220;
      --bg-2:#0e1628;
      --card:rgba(255,255,255,.065);
      --card-hover:rgba(255,255,255,.1);
      --text:#e5e7eb;
      --muted:#94a3b8;
      --border:rgba(255,255,255,.12);
      --primary:#6366f1;

      /* общие для меню/поиска */
      --menu-bg:#0f1627;
      --glass-bg:rgba(255,255,255,.08);
      --shadow:0 18px 50px rgba(0,0,0,.35);
    }

    /* ТЁМНАЯ ТЕМА */
    :root[data-theme="dark"]{
      --bg:#0b1220;
      --bg-2:#0e1628;
      --card:rgba(255,255,255,.065);
      --card-hover:rgba(255,255,255,.1);
      --text:#e5e7eb;
      --muted:#94a3b8;
      --border:rgba(255,255,255,.12);
      --primary:#6366f1;

      --menu-bg:#0f1627;
      --glass-bg:rgba(255,255,255,.08);
    }

    /* СВЕТЛАЯ ТЕМА: более контрастная */
    :root[data-theme="light"]{
      --bg:#e5e7eb;        /* фон секций */
      --bg-2:#f3f4f6;      /* общий фон страницы */
      --card:#ffffff;      /* карточки — белые */
      --card-hover:#eef2ff;
      --text:#0f172a;      /* основной текст */
      --muted:#4b5563;     /* вторичный текст */
      --border:rgba(15,23,42,.10);
      --primary:#4f46e5;   /* поярче кнопка */

      --menu-bg:#ffffff;
      --glass-bg:rgba(255,255,255,.86);
      --shadow:0 18px 50px rgba(15,23,42,.10);
    }

    html,body{
      font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
      color:var(--text);
      background:var(--bg-2);
    }

    .container{max-width:1200px}
    .glass{
      backdrop-filter:saturate(180%) blur(16px);
      background:var(--glass-bg);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
    }
    .card{
      border-radius:var(--radius);
      background:var(--card);
      border:1px solid var(--border);
      transition:background .2s ease,transform .15s ease;
    }
    .card:hover{background:var(--card-hover);transform:translateY(-1px)}
    .btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:.9rem;font-weight:600}
    .btn-primary{background:var(--primary);color:#fff}
    .btn-outline{border:1px solid var(--border);color:var(--text)}
    .nav-link{color:var(--muted)} .nav-link:hover{color:var(--text)}
    .section{padding:clamp(48px,6vw,96px) 0}
    .title{letter-spacing:-.02em}
    .gradient-bg{
      background:
        radial-gradient(80% 100% at 20% 10%, rgba(99,102,241,.15) 0%, rgba(99,102,241,0) 60%),
        radial-gradient(80% 100% at 80% 10%, rgba(59,130,246,.14) 0%, rgba(59,130,246,0) 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg) 60%, var(--bg-2) 100%);
    }
    .grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
    @media (max-width:1023px){.grid-12{grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}}

    /* dropdown: непрозрачный фон + «липкость» */
    .menu-group{position:relative}
    .menu-panel{
      position:absolute;left:0;top:100%;
      opacity:0;transform:translateY(4px);pointer-events:none;
      transition:opacity .15s,transform .15s;z-index:50;
      background:var(--menu-bg);
      border:1px solid var(--border);
      border-radius:1rem;
      box-shadow:var(--shadow);
    }
    .menu-group:hover .menu-panel,.menu-panel:hover{opacity:1;transform:translateY(0);pointer-events:auto}
    .menu-panel::before{content:"";position:absolute;left:0;right:0;top:-8px;height:8px}

    ::placeholder{color:var(--muted);opacity:.9}
    #srchDrop{ background:var(--menu-bg); border:1px solid var(--border); box-shadow:var(--shadow); }

    .mobile-nav{
      appearance:auto;
      background:rgba(255,255,255,.06);
      border:1px solid var(--border);
      color:var(--text);
      border-radius:.9rem;
      padding:.55rem .9rem;
      font-weight:600;
      width:100%;
    }
    :root[data-theme="light"] .mobile-nav{background:rgba(15,23,42,.04)}
    .mobile-nav:focus{outline:none;box-shadow:0 0 0 3px rgba(99,102,241,.35)}
    select.mobile-nav optgroup{color:var(--text);font-weight:700;background-color:var(--menu-bg);}
    select.mobile-nav option{color:var(--muted);}
    @media (max-width:768px){ .mobile-nav{max-width:260px;font-size:15px} }

    /* Кнопка темы на мобиле (иконка) */
    .theme-icon-btn{
      width:40px;height:40px;
      display:inline-flex;align-items:center;justify-content:center;
      border-radius:.9rem;
      border:1px solid var(--border);
      background:rgba(255,255,255,.06);
      color:var(--text);
      cursor:pointer;
      user-select:none;
      flex:0 0 auto;
    }
    :root[data-theme="light"] .theme-icon-btn{background:rgba(15,23,42,.04)}
    .theme-icon-btn:hover{background:rgba(255,255,255,.10)}
    :root[data-theme="light"] .theme-icon-btn:hover{background:rgba(15,23,42,.07)}
    .theme-icon{font-size:18px;transform:translateY(1px)}

    /* === ДОП. НАСТРОЙКИ ДЛЯ СВЕТЛОЙ ТЕМЫ === */
    html[data-theme="light"] body{background:var(--bg-2);color:var(--text);}

    /* Текстовые оттенки Tailwind */
    html[data-theme="light"] .text-slate-200{color:#111827 !important;}
    html[data-theme="light"] .text-slate-300{color:#1f2937 !important;}
    html[data-theme="light"] .text-slate-400{color:#4b5563 !important;}
    html[data-theme="light"] .text-slate-500{color:#6b7280 !important;}

    /* Инпуты/текстариа в карточках */
    html[data-theme="light"] .card input,
    html[data-theme="light"] .card textarea{
      background:#f9fafb !important;
      border-color:#e5e7eb !important;
      color:var(--text) !important;
    }

    /* Светлый градиент для hero/хедера */
    html[data-theme="light"] .gradient-bg{
      background:
        radial-gradient(80% 100% at 20% 10%, rgba(79,70,229,.18) 0%, rgba(79,70,229,0) 55%),
        radial-gradient(80% 100% at 80% 10%, rgba(34,197,94,.12) 0%, rgba(34,197,94,0) 55%),
        linear-gradient(180deg, #e5edff 0%, #f9fafb 55%, #f3f4f6 100%);
    }

    /* «Синие» ссылки на карточках услуг/решений — чтобы не терялись в светлой теме */
    a.text-blue-400{color:rgb(99 102 241) !important;}
    html[data-theme="dark"] a.text-blue-400{color:rgb(96 165 250) !important;}

    /* ===== ЯЗЫК (аккуратный переключатель в футере) ===== */
    .lang-toggle{
      display:inline-flex;align-items:center;gap:.5rem;
      padding:.35rem .55rem;border-radius:.75rem;
      border:1px solid var(--border);
      background:rgba(255,255,255,.06);
      color:var(--text);
      cursor:pointer;
      user-select:none;
      white-space:nowrap;
    }
    :root[data-theme="light"] .lang-toggle{background:rgba(15,23,42,.04)}
    .lang-flag-img{
      width:22px;height:14px;
      display:block;
      border-radius:3px;
      box-shadow:0 0 0 1px rgba(255,255,255,.18);
      object-fit:cover;
    }
    :root[data-theme="light"] .lang-flag-img{box-shadow:0 0 0 1px rgba(15,23,42,.12);}
    .lang-code{font-weight:700;letter-spacing:.02em;font-size:12px}
  
    /* HERO: на мобиле сначала картинка, потом текст */
    @media (max-width:1023px){
      section.gradient-bg .grid-12.items-center > div:nth-child(1){
        order:2;
      }
      section.gradient-bg .grid-12.items-center > div:nth-child(2){
        order:1;
      }
    }

    /* === FIX: футер на главной в светлой теме === */
    html[data-theme="light"] footer,
    html[data-theme="light"] footer h3,
    html[data-theme="light"] footer p,
    html[data-theme="light"] footer a {
   color: #0f172a !important; /* slate-900 */
  }

   /* вторичный текст футера */
   html[data-theme="light"] footer .text-slate-200,
   html[data-theme="light"] footer .text-slate-300,
   html[data-theme="light"] footer .text-white {
  color: #1f2937 !important; /* slate-800 */
  }

  /* ссылки в футере */
  html[data-theme="light"] footer a:hover {
  color: #4f46e5 !important; /* primary */
  }
  /* === FIX: единый “умный” вид шапки на ноутбучных ширинах (без различий Chrome/Opera) ===
       Идея: не прятать бренд всегда, а прятать только когда реально тесно.
    */
    @media (max-width: 1320px){
      header > .container{
        padding-left: clamp(12px, 2vw, 18px) !important;
        padding-right: clamp(12px, 2vw, 18px) !important;
        gap: 12px !important;
      }

      /* меню: аккуратный динамический gap */
      header nav.hidden.md\:flex{
        justify-content: center !important;
        gap: clamp(14px, 1.4vw, 22px) !important;
        min-width: 0;
      }
      header nav.hidden.md\:flex > a.nav-link,
      header nav.hidden.md\:flex .menu-group > a.nav-link{
        font-size: 14px;
        white-space: nowrap;
        letter-spacing: .2px;
      }

      /* поиск: динамическая ширина, чтобы не “пустело” и не ломалось */
      header nav.hidden.md\:flex #site-search-slot,
      header nav.hidden.md\:flex #siteSearch{
        flex: 0 1 auto !important;
        min-width: 0 !important;
      }
      header nav.hidden.md\:flex #siteSearch input,
      header nav.hidden.md\:flex #siteSearch .search-input,
      header nav.hidden.md\:flex #siteSearch input[type="search"],
      header nav.hidden.md\:flex #siteSearch input[type="text"]{
        width: clamp(170px, 16vw, 230px) !important;
        min-width: 170px !important;
        max-width: 240px !important;
      }

      /* правые кнопки — умеренно компактнее */
      header .hidden.md\:flex.items-center.gap-3{ gap: 12px !important; }
      header .hidden.md\:flex .btn{
        padding: .65rem 1.0rem !important;
        font-size: 14px !important;
        white-space: nowrap;
      }
    }

    /* Только когда действительно тесно — убираем текст SolidLab, оставляем знак */
    @media (max-width: 1320px){
      header > .container > a > span{ display: none !important; }
      header nav.hidden.md\:flex{ gap: clamp(12px, 1.2vw, 18px) !important; }
      header nav.hidden.md\:flex #siteSearch input,
      header nav.hidden.md\:flex #siteSearch .search-input,
      header nav.hidden.md\:flex #siteSearch input[type="search"],
      header nav.hidden.md\:flex #siteSearch input[type="text"]{
        width: clamp(120px, 11vw, 155px) !important;
        max-width: 155px !important;
      }
    }

    @media (max-width: 1180px){
      header nav.hidden.md\:flex > a.nav-link{ font-size: 13px; }
      header .hidden.md\:flex .btn{ padding: .6rem .9rem !important; font-size: 13px !important; }
    }

  
  /* === OVERRIDE: компактный правый блок на “тесных” desktop-ширинах (macOS/Opera 1440×900) ===
     Цель: не трогаем поиск/JS, не ломаем mobile, просто освобождаем место справа. */
  
  /* === FIX: уже на ~125% zoom (и узких desktop) сворачиваем кнопку темы в иконку === */
  @media (min-width: 768px) and (max-width: 1560px){
    /* прячем текст/эмодзи внутри кнопки, показываем ровно одну иконку */
    #themeToggle{
      font-size: 0 !important;          /* скрываем текст */
      line-height: 0 !important;
      width: 46px !important;
      min-width: 46px !important;
      padding: 10px 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
    }
    #themeToggle::before{
      content: "☀️";
      font-size: 16px;
      line-height: 1;
    }
    html[data-theme="light"] #themeToggle::before{ content: "🌙"; }
    html[data-theme="dark"]  #themeToggle::before{ content: "☀️"; }
  }

@media (min-width: 768px) and (max-width: 1500px){
    /* чуть плотнее меню */
    header nav.hidden.md\:flex{
      gap: clamp(12px, .9vw, 18px) !important;
    }
    header nav.hidden.md\:flex .nav-link{ white-space: nowrap !important; }

    /* кнопка темы: только иконка, как на mobile */
    #themeToggle{
      font-size: 0 !important;          /* скрываем текст */
      width: 46px !important;
      padding: 10px 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
    }
    #themeToggle::before{
      content: "☀️";
      font-size: 16px;
      line-height: 1;
    }
    html[data-theme="light"] #themeToggle::before{ content: "🌙"; }
    html[data-theme="dark"]  #themeToggle::before{ content: "☀️"; }

    /* “Связаться” компактнее */
    header .hidden.md\:flex a.btn.btn-primary,
    header .hidden.md\:flex a.btn-primary{
      padding: 10px 14px !important;
      font-size: 13px !important;
      white-space: nowrap !important;
    }
  }

  /* ещё теснее — скрываем текст SolidLab (оставляем знак), чтобы меню не наезжало на лого */
  @media (min-width: 768px) and (max-width: 1380px){
    header > .container > a > span{ display: none !important; }
  }
  

  
    /* Hero highlights (rotating focus points) */
    .hero-chip{
      display:inline-flex;
      align-items:center;
      gap:.65rem;
      padding:.7rem 1.05rem;
      border-radius:999px;
      border:1px solid rgba(99,102,241,.45);
      background:linear-gradient(180deg, rgba(99,102,241,.22), rgba(99,102,241,.07));
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size:1rem;
      line-height:1.3rem;
      font-weight:600;
      color: rgba(226,232,240,.95);
      white-space:nowrap;
      user-select:none;
      box-shadow:
        0 14px 34px rgba(99,102,241,.18),
        inset 0 0 22px rgba(99,102,241,.10);
    }
    .hero-chip .dot{
      width:.5rem;
      height:.5rem;
      border-radius:999px;
      background: rgba(99,102,241,.9);
      box-shadow: 0 0 0 3px rgba(99,102,241,.15);
      flex:0 0 auto;
    }
    
    .hero-nav-btn{
      width:44px;height:44px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.06);
      color: rgba(226,232,240,.92);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      cursor:pointer;
      user-select:none;
      flex:0 0 auto;
      font-size:24px;
      line-height:1;
      transform: translateY(1px);
      box-shadow: 0 10px 26px rgba(0,0,0,.18);
    }
    .hero-nav-btn:hover{ background:rgba(255,255,255,.10); }
    :root[data-theme="light"] .hero-nav-btn{
      border:1px solid rgba(15,23,42,.12);
      background:rgba(15,23,42,.04);
      color: rgba(15,23,42,.92);
    }
:root[data-theme="light"] .hero-chip{
      border:1px solid rgba(79,70,229,.28);
      background:linear-gradient(180deg, rgba(79,70,229,.14), rgba(79,70,229,.05));
      color: rgba(15,23,42,.92);
      box-shadow:
        0 14px 34px rgba(79,70,229,.10),
        inset 0 0 22px rgba(79,70,229,.08);
    }
    :root[data-theme="light"] .hero-nav-btn:hover{ background:rgba(15,23,42,.07); }
.hero-fade{ transition: opacity .25s ease, transform .25s ease; }
    .hero-fade.is-out{ opacity:0; transform: translateY(2px); }
    .hero-fade.is-in{ opacity:1; transform: translateY(0); }

    @media (max-width: 420px){
      #heroHighlightDesc{ display:none; }
      .hero-chip{ font-size:.8125rem; padding:.45rem .65rem; }
    }


/* WHY block */
.why-item{display:flex;align-items:flex-start;gap:12px}
.why-mark{width:8px;height:8px;margin-top:8px;border-radius:999px;
background:linear-gradient(135deg,#818cf8,#6366f1);
box-shadow:0 0 0 4px rgba(99,102,241,.15);flex-shrink:0}


/* Accent gradient text (used in hero headline) */
/* ===== DARK (как у тебя — оставить) ===== */
.gradient-text{
  background: linear-gradient(90deg,
    #6366f1 0%,
    #3b82f6 45%,
    #93c5fd 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== LIGHT — новый градиент ===== */
:root[data-theme="light"] .gradient-text{
  background: linear-gradient(90deg,
    #4f46e5 0%,   /* насыщенный индиго */
    #2563eb 50%,  /* синий */
    #1d4ed8 100%  /* глубокий синий */
  );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* HERO smooth switch */
.hero-fade{
  transition: opacity 260ms ease, transform 260ms ease;
  will-change: opacity, transform;
}
.hero-fade.is-out{
  opacity: 0;
  transform: translateY(4px);
}
/* Force fixed header for injected partial (robust) */
#site-header-slot > header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

/* menu-panel: делаем фон плотнее, чтобы не просвечивал hero */
.menu-panel{
  background: var(--bg) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(14px);
}
:root[data-theme="light"] .menu-panel{
  border: 1px solid rgba(15,23,42,.12) !important;
}
/* ===== ЯЗЫК: sl-lang-ru / sl-lang-en (единый стиль для header/footer) ===== */
.sl-lang-en{display:none;}
html[lang="en"] .sl-lang-ru{display:none !important;}
html[lang="en"] .sl-lang-en{display:inline !important;}
/* optgroup — блочные элементы */
select.mobile-nav optgroup.sl-lang-en{display:none;}
html[lang="en"] select.mobile-nav optgroup.sl-lang-ru{display:none;}
html[lang="en"] select.mobile-nav optgroup.sl-lang-en{display:block;}

/* === FIX: запрет переносов пунктов меню (устойчиво к разным браузерам/масштабам) === */
header nav .nav-link,
header nav .menu-group > a.nav-link{
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* страховка: сам nav не должен переносить/ужимать элементы “в странные места” */
header nav.hidden.md\:flex{
  flex-wrap: nowrap;
  min-width: 0;
}

/* === FIX: в выпадающих меню разрешаем перенос строк у длинных пунктов (например "Внедрение процессов...") === */
header .menu-panel .nav-link{
  white-space: normal !important;
  word-break: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}


/* === FIX: очень длинные пункты в выпадашках не должны вылезать за панель (zoom/браузеры) === */
header .menu-panel{
  max-width: min(92vw, 420px);
}
header .menu-panel .nav-link{
  display: block;
  max-width: 100%;
  hyphens: auto;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* === FIX: на “пограничных” размерах (zoom 175–300%) принудительно раньше включаем мобильную шапку,
   чтобы элементы не наезжали друг на друга до переключения md-брейкпоинта === */
@media (max-width: 1160px){
  /* скрываем все desktop-блоки, которые становятся видимыми на md+ */
  header .hidden.md\:flex{ display:none !important; }
  /* показываем mobile-блоки, которые обычно скрыты на md+ */
  header .md\:hidden{ display:flex !important; }
}


/* === FIX (точечно): в выпадашках запрещаем наследование nowrap от верхнего меню.
   Это лечит кейс, когда длинный пункт (“Внедрение процессов…”) не переносится на некоторых zoom/браузерах. === */
header .menu-panel{
  white-space: normal !important;
}
header .menu-panel .nav-link,
header .menu-panel .nav-link *{
  white-space: normal !important;
  text-wrap: wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}


/* === FIX: на “раннем mobile” режиме (max-width:1160px) не должно быть двух логотипов.
   Мы принудительно показываем мобильный знак и прячем десктоп-логотип (hidden md:block). === */
@media (max-width: 1160px){
  header > .container > a img.md\:hidden{ display:block !important; }
  header > .container > a img.hidden.md\:block{ display:none !important; }
}

.cookie-card{
  background: rgba(17,24,39,.92);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

:root[data-theme="light"] .cookie-card{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(15,23,42,.10);
}

:root[data-theme="light"] #cookieBanner a{
  color: #4f46e5;
}

:root[data-theme="light"] #cookieBanner a:hover{
  color: #3730a3;
}