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

*, *::before, *::after { box-sizing: border-box; }

:root {
  --navy:        #002142;
  --navy-card:   rgba(0, 58, 110, .26);
  --cyan:        #00c1cc;
  --cyan-deep:   #0086b7;
  --cyan-soft:   #4dbdd0;   /* контрастная версия для мелкого текста */
  --teal:        #03dac6;
  --orange:      #ff8502;
  --cream:       #faebd7;
  --text-soft:   #9fb8cc;
  --line:        rgba(77, 189, 208, .5);
}

html, body { height: 100%; }

body {
  margin: 0;
  overflow: hidden;                 /* одноэкранная страница — без прокрутки */
  background: var(--navy);
  color: var(--cream);
  font-family: "Roboto", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }

/* ---------- фон: частицы под контентом ---------- */
.bg-particles {
  position: fixed;
  inset: 0;
  z-index: 0;                       /* строго под контентом */
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* мягкое затемнение к центру, чтобы линии не спорили с логотипом и текстом */
.bg-veil {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse 62% 58% at 50% 44%, rgba(0, 33, 66, .82), rgba(0, 33, 66, .28) 58%, transparent 78%);
  pointer-events: none;
}

/* ---------- сцена ---------- */
.stage {
  position: relative;
  z-index: 2;                       /* контент всегда поверх частиц */
  display: flex;
  height: 100dvh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* нижний отступ больше верхнего — блок с логотипом смещён выше центра */
  padding: clamp(16px, 4vh, 40px) clamp(16px, 5vw, 40px) clamp(56px, 14vh, 150px);
  text-align: center;
}

.logo {
  width: min(34vw, clamp(96px, 17vh, 150px));
  height: auto;
  margin-bottom: clamp(16px, 3vh, 30px);
}

.tagline {
  margin: 0 0 clamp(34px, 7.5vh, 72px);
  padding-left: .5em;               /* компенсация трекинга последней буквы */
  font-size: clamp(1.02rem, 1.35vw + .4rem, 1.56rem);
  font-weight: 500;
  letter-spacing: .5em;
  white-space: nowrap;
}

/* перелив по буквам: оранжевый → синий → зелёный, с ореолом */
.tagline span {
  display: inline-block;
  color: var(--orange);
  text-shadow: 0 0 24px rgba(255, 133, 2, .7);
  animation: glow 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .11s);
}

@keyframes glow {
  0%, 100% { color: var(--orange); text-shadow: 0 0 24px rgba(255, 133, 2, .7); }
  33%      { color: var(--cyan);   text-shadow: 0 0 24px rgba(0, 193, 204, .7); }
  66%      { color: var(--teal);   text-shadow: 0 0 24px rgba(3, 218, 198, .7); }
}

/* ---------- карточки подразделений ---------- */
.divisions {
  display: grid;
  width: 100%;
  max-width: 720px;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 16px);
}

.card {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  align-items: center;
  padding: clamp(14px, 2.2vh, 22px) clamp(10px, 1.2vw, 16px);
  border: 2px solid var(--line);
  border-radius: 14px;
  background: var(--navy-card);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .35s ease, background-color .35s ease;
}

/* переливающаяся градиентная обводка — появляется при наведении */
.card::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;                    /* толщина обводки */
  border-radius: 16px;
  background: linear-gradient(90deg, var(--cyan), var(--orange), var(--teal), var(--cyan));
  background-size: 300% 100%;
  /* показываем только рамку: заливка вырезается маской */
  -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, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}

@keyframes shimmer {
  to { background-position: 300% 0; }
}

.card-name {
  margin: 0 0 6px;
  color: var(--cyan);
  font-family: "Josefin Sans", sans-serif;
  font-size: clamp(.95rem, 1.3vw + .3rem, 1.32rem);
  font-weight: 400;
  letter-spacing: .12em;
  transition: color .35s ease;
}

.card-text {
  margin: 0 0 auto;
  color: var(--text-soft);
  font-size: clamp(.68rem, .45vw + .55rem, .82rem);
  font-weight: 300;
  line-height: 1.5;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: clamp(10px, 1.6vh, 16px);
  color: var(--cyan-soft);
  font-size: clamp(.64rem, .3vw + .54rem, .74rem);
  letter-spacing: .06em;
  transition: color .35s ease;
}

.card-link svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

@media (hover: hover) {
  .card:hover {
    border-color: transparent;      /* её место занимает градиентная обводка */
    background: rgba(0, 58, 110, .40);
  }
  .card:hover::before {
    opacity: 1;
    animation: shimmer 3s linear infinite;
  }
  .card:hover .card-name,
  .card:hover .card-link { color: var(--orange); }
  .card:hover .card-link svg { transform: translate(2px, -2px); }
}

.card:focus-visible { outline: none; border-color: transparent; }
.card:focus-visible::before { opacity: 1; animation: shimmer 3s linear infinite; }

/* ---------- адаптив ---------- */
@media (max-width: 640px) {
  .divisions { max-width: 400px; grid-template-columns: 1fr; gap: 9px; }
  /* название и подпись слева в две строки, «Перейти» — справа */
  .card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name link"
                         "text link";
    align-items: center;
    min-height: 62px;
    padding: 11px 16px;
    column-gap: 12px;
    text-align: left;
  }
  .card-name { grid-area: name; margin: 0 0 2px; }
  .card-text { grid-area: text; margin: 0; }
  .card-link { grid-area: link; margin: 0; }
  .tagline { letter-spacing: .28em; font-size: clamp(1rem, 4.4vw, 1.26rem); }
}

/* низкие экраны (альбомная ориентация телефона) */
@media (max-height: 520px) {
  .stage { padding-bottom: clamp(28px, 8vh, 44px); }
  .logo { width: min(26vw, 92px); margin-bottom: 11px; }
  .tagline { margin-bottom: 24px; }
  .card { padding: 10px 12px; }
  .card-link { margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .tagline span { animation: none; }
  .card { transition-duration: .01ms; }
  /* обводка остаётся видимой, но не переливается */
  .card:hover::before,
  .card:focus-visible::before { animation: none; }
}