/* ==========================================================
   COSMOS — космический слой эффектов поверх существующих стилей.
   Шрифты и разметку не трогает. Удалить подключение в
   blocks/layouts/end.php — и сайт вернётся к прежнему виду.
   ========================================================== */
:root {
  --cs-blue: #016bff;
  --cs-indigo: #4d5bff;
  --cs-violet: #7a4dff;
  --cs-cyan: #2ec5ff;
  --cs-glow: rgba(1, 107, 255, 0.45);
  --cs-glow-soft: rgba(1, 107, 255, 0.18);
  --cs-grad: linear-gradient(135deg, #016bff 0%, #4d5bff 55%, #7a4dff 100%);
}

::selection { background: var(--cs-blue); color: #fff; }
html { scrollbar-color: #4d7cff #eef1f8; }

/* ---------- Звёздное поле (canvas создаёт cosmos.js) ---------- */
#cosmosStars {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* ---------- Индикатор прокрутки ---------- */
#cosmosProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--cs-cyan), var(--cs-blue), var(--cs-violet));
  box-shadow: 0 0 12px var(--cs-glow), 0 0 4px var(--cs-cyan);
  z-index: 100000;
  pointer-events: none;
}

/* ---------- Свечение за курсором (только мышь) ---------- */
#cosmosCursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 160px;
  height: 160px;
  margin: -80px 0 0 -80px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(1, 107, 255, 0.16) 0%, rgba(122, 77, 255, 0.07) 45%, transparent 72%);
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.4s;
  will-change: transform;
}
#cosmosCursor.on { opacity: 1; }
@media (hover: none), (max-width: 860px) { #cosmosCursor { display: none; } }

/* ---------- Шапка ---------- */
.header .headerBlock {
  box-shadow: 0 1px 0 rgba(1, 107, 255, 0.08), 0 10px 30px -14px rgba(1, 107, 255, 0.28);
}
.header .headerBlock .left .mnu a { transition: color 0.3s, text-shadow 0.3s; }
.header .headerBlock .left .mnu a:hover { text-shadow: 0 0 14px var(--cs-glow); }

/* ---------- Первый экран (фон секции не трогаем) ---------- */
.mainSlider .slider .slide .slideImage .picrure {
  animation: cosmosFloat 7s ease-in-out infinite;
}
@keyframes cosmosFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-16px) rotate(0.6deg); }
}
.mainSlider .slider .progressItem.run::after,
.mainSlider .slider .progressItem.done::after {
  background: linear-gradient(90deg, var(--cs-cyan), var(--cs-blue), var(--cs-violet));
  box-shadow: 0 0 8px var(--cs-glow);
}
/* круглый виджет вращаем только svg, кнопка play остаётся на месте */
.mainSlider .vidget svg,
.company_first .vidget svg { animation: cosmosSpin 40s linear infinite; transform-origin: 50% 50%; }
.mainSlider .vidget .play-button,
.company_first .vidget .play-button { transition: filter 0.3s; }
.mainSlider .vidget .play-button:hover,
.company_first .vidget .play-button:hover { filter: drop-shadow(0 0 12px var(--cs-glow)); }
@keyframes cosmosSpin { to { transform: rotate(360deg); } }

/* ---------- Кнопки ---------- */
.button {
  position: relative;
  background-color: var(--cs-blue);
  background-image:
    linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.38) 50%, transparent 65%),
    var(--cs-grad);
  background-size: 260% 100%, 100% 100%;
  background-position: 160% 0, 0 0;
  background-repeat: no-repeat;
  box-shadow: 0 6px 20px -6px var(--cs-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), box-shadow 0.3s, background-position 0.7s, filter 0.3s;
}
.button:hover {
  background-color: var(--cs-blue);
  background-position: -60% 0, 0 0;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px -6px var(--cs-glow), 0 0 22px rgba(122, 77, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  filter: saturate(1.15);
}
.button:active { transform: translateY(0) scale(0.97); box-shadow: 0 4px 12px -4px var(--cs-glow); }
.button:focus-visible { outline: 2px solid var(--cs-cyan) !important; outline-offset: 3px; }

.button.white {
  background-color: #fff;
  background-image:
    linear-gradient(115deg, transparent 35%, rgba(1, 107, 255, 0.14) 50%, transparent 65%);
  background-size: 260% 100%;
  background-position: 160% 0;
  box-shadow: 0 0 0 0 transparent, inset 0 0 0 0 transparent;
}
.button.white:hover {
  background-color: #f5f8ff;
  background-position: -60% 0;
  border-color: var(--cs-blue);
  color: var(--cs-blue);
  box-shadow: 0 10px 26px -8px var(--cs-glow), 0 0 18px rgba(1, 107, 255, 0.22);
}

.buttonFile { transition: transform 0.25s, box-shadow 0.3s, border-color 0.3s, background 0.3s; }
.buttonFile:hover { box-shadow: 0 8px 22px -8px var(--cs-glow); transform: translateY(-2px); }

/* пульсирующие бейджи на кнопках */
.button .dop.red   { animation: cosmosPulseRed 2.4s ease-in-out infinite; }
.button .dop.green { animation: cosmosPulseGreen 2.4s ease-in-out infinite; }
@keyframes cosmosPulseRed   { 0%,100% { box-shadow: 0 0 0 0 rgba(248,52,54,.5); }  50% { box-shadow: 0 0 0 8px rgba(248,52,54,0); } }
@keyframes cosmosPulseGreen { 0%,100% { box-shadow: 0 0 0 0 rgba(0,204,61,.5); }   50% { box-shadow: 0 0 0 8px rgba(0,204,61,0); } }

/* ---------- Заголовки ---------- */
.h2 span {
  background: linear-gradient(90deg, var(--cs-blue), var(--cs-violet), var(--cs-cyan), var(--cs-blue));
  background-size: 250% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: cosmosText 8s linear infinite;
}
@keyframes cosmosText { to { background-position: 250% 0; } }
/* печатающийся заголовок первого экрана оставляем как есть */
.mainSlider .slider .slide .head .h2 span {
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

/* ---------- Карточки и блоки ----------
   Свечение и прожектор — только у карточек с собственным фоном и скруглением.
   У блога и кейсов фона нет (картинки с подложкой), поэтому там — лишь подъём. */
.main_offers .offersList .offer,
.case-item,
.blog .container.news .snipet,
.achievements .list .block,
.mainSlider .linksList .link,
.why_us .container .all_tabs .tabs .item {
  transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), box-shadow 0.35s, border-color 0.35s, background-color 0.3s;
}
.why_us .container .all_tabs .tabs .item:hover {
  box-shadow: 0 22px 50px -18px rgba(1, 107, 255, 0.45), 0 0 0 1px rgba(1, 107, 255, 0.25), 0 0 30px rgba(122, 77, 255, 0.12);
}
.case-item:hover,
.blog .container.news .snipet:hover { transform: translateY(-6px); }
.why_us .container .all_tabs .tabs .item:hover { transform: translateY(-3px); }

/* у кейсов и блога подсвечиваем саму скруглённую картинку, а не прямоугольник карточки */
.case-item .block img,
.blog .container.news .snipet .baner img { transition: box-shadow 0.35s, filter 0.35s; }
.case-item:hover .block img,
.blog .container.news .snipet:hover .baner img {
  box-shadow: 0 18px 40px -16px rgba(1, 107, 255, 0.5);
}

/* блоки под первым экраном: чистый эффект без размытых теней и прожектора */
.mainSlider .linksList .link {
  cursor: default;
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
}
.mainSlider .linksList .link:hover {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(1, 107, 255, 0.45);
  color: var(--c5);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -10px rgba(1, 107, 255, 0.6);
}
.mainSlider .linksList .link::before { transition: transform 0.3s, text-shadow 0.3s; }
.mainSlider .linksList .link:hover::before { transform: scale(1.35); text-shadow: 0 0 8px rgba(1, 107, 255, 0.5); }

/* прожектор, следующий за курсором (cosmos.js ставит --mx/--my и класс) */
.cosmos-spot.cosmos-spot-on {
  background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(1, 107, 255, 0.14), rgba(122, 77, 255, 0.06) 45%, transparent 70%) !important;
}


/* картинки в карточках офферов — мягкий зум (внутри overflow:hidden) */
.main_offers .offersList .offer .img img { transition: transform 0.6s cubic-bezier(.2, .8, .2, 1), filter 0.4s; }
.main_offers .offersList .offer:hover .img img { transform: scale(1.06); filter: saturate(1.15); }

/* строки прайса */
.why_us .container .price_list .item { position: relative; }
.why_us .container .price_list .item:hover {
  background: linear-gradient(90deg, rgba(1, 107, 255, 0.08), rgba(122, 77, 255, 0.04) 60%, transparent);
  box-shadow: inset 3px 0 0 var(--cs-blue);
}

/* ---------- Ссылки-теги ---------- */
.tag2 { transition: color 0.3s, text-shadow 0.3s; }
.tag2:hover { text-shadow: 0 0 14px var(--cs-glow); }

/* ---------- Подвал ---------- */
.footer { box-shadow: inset 0 1px 0 rgba(1, 107, 255, 0.15), inset 0 30px 60px -40px rgba(1, 107, 255, 0.22); }

/* ---------- Попап ---------- */
.popup, .popup * { scroll-behavior: auto; }

/* ---------- Уважаем «уменьшить анимацию» и слабые экраны ---------- */
@media (prefers-reduced-motion: reduce) {
  .mainSlider .slider .slide .slideImage .picrure,
  .h2 span, .button .dop { animation: none !important; }
  .button, .button::before { transition: none; }
}
@media (max-width: 860px) {
  .case-item:hover, .blog .container.news .snipet:hover { transform: none; }
}

/* ==========================================================
   achievements: эффект целиком ВНУТРИ блока (без внешних теней),
   поэтому overflow родителя его не обрезает
   ========================================================== */
.achievements .list .block {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), background-color 0.35s;
}
.achievements .list .block > * { position: relative; z-index: 1; }
/* градиентная рамка (внутри края блока) */
.achievements .list .block::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, var(--cs-cyan), var(--cs-blue) 45%, var(--cs-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
  z-index: 2;
}
/* мягкое свечение в углу + блик, пробегающий по блоку */
.achievements .list .block::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 38%, rgba(1, 107, 255, 0.10) 50%, transparent 62%) no-repeat -120% 0 / 60% 100%,
    radial-gradient(60% 70% at 100% 0%, rgba(1, 107, 255, 0.16), transparent 70%),
    radial-gradient(50% 60% at 0% 100%, rgba(122, 77, 255, 0.10), transparent 70%);
  opacity: 0;
  transition: opacity 0.4s, background-position 0.9s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
  z-index: 0;
}
.achievements .list .block:hover { transform: translateY(-4px); background-color: #f0f4ff; }
.achievements .list .block:hover::after { opacity: 1; }
.achievements .list .block:hover::before { opacity: 1; background-position: 220% 0, 0 0, 0 0; }
.achievements .list .block .number { transition: color 0.3s; }
@media (max-width: 860px) { .achievements .list .block:hover { transform: none; } }