@keyframes pulseGradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.animate-gradient {
  animation: pulseGradient 15s ease-in-out infinite;
}








.windy-block {
  position: relative;
  overflow: hidden;
  height: 100px;
  border-radius: 0;
  border: none;
	margin-top: 20px;   
  margin-bottom: 20px; 
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  max-width: none;
  opacity: 0.3;
  background-size: 600% 600%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: gradientMove;

  /* Плавное исчезновение сверху и снизу */
	-webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.3) 10%,
    black 20%,
    black 80%,
    rgba(0,0,0,0.3) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,0.3) 10%,
    black 20%,
    black 80%,
    rgba(0,0,0,0.3) 90%,
    transparent 100%
  );
}






@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}



.wind-content {
  /* не указываем font-family или ставим нейтральный */
  font-family: sans-serif;
  position: absolute;
  white-space: nowrap;
  font-size: 1.8rem;
  font-weight: 700;
  opacity: 1;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}


.wind-content span {
  display: inline-block;
  margin: 0 36px;
  will-change: transform;
	opacity: 1 !important;
}



/* Тёмная тема для windy-block */
.dark .windy-block {
  opacity: 0.4;
  background-size: 600% 600%;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-name: gradientMove; /* та же анимация */
}







.custom-bullet-list {
  padding-left: 1.2em;
  list-style-type: disc;
  margin: 0;
}
.custom-bullet-list li {
  text-align: justify;
  margin-bottom: 0.7em;
  font-size: 1.1em;
}
.custom-bullet-list li::marker {
  color: #000;
  font-size: 1.3em;
  font-weight: bold;
}

/* Для дарк-мода */
.dark .custom-bullet-list li::marker {
  color: #fff;
}





/* показать только нужный слой */
#hero-art .cloud-dark { display: none; }
.dark #hero-art .cloud-light { display: none; }
.dark #hero-art .cloud-dark { display: block; }









/* ===== Круглые кнопки-картинки: тон мягче, без белого ореола, hover сильнее ===== */
.tint-btn{
  position: relative;
  width: 5.5rem; height: 5.5rem;            /* sm */
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden; isolation: isolate;
  background: transparent;                  /* ← убрали белую базу: нет «ореола» */
  box-shadow: 0 4px 20px rgba(0,0,0,.06);   /* лёгкая тень (можно убрать) */
  transition: transform .18s ease;
}
@media (min-width:768px){ .tint-btn{ width:6rem; height:6rem; } }
@media (min-width:1024px){ .tint-btn{ width:7rem; height:7rem; } }

/* Слой картинки (отображаем как есть) */
.tint-btn::after{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image: var(--btn-img);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  opacity:1;
  pointer-events:none;
  transition: filter .18s ease;             /* для hover-эффекта контраста/затемнения */
}

/* Цветовой тон — мягче. В светлой теме: mix-blend: color (тон без перекрытия светлоты) */
.tint-btn::before{
  content:"";
  position:absolute; inset:0; z-index:2;
  background: radial-gradient(120% 120% at 50% 60%, var(--t1), var(--t2));
  mix-blend-mode: color;
  opacity:.55;                               /* было .95 → мягче в 2 раза */
  transition: opacity .18s ease, filter .18s ease;
  pointer-events:none;
}

/* Dark Mode: тон плотнее, но всё ещё мягкий; общий вид чуть темнее/контрастнее */
.dark .tint-btn::before{ opacity:.70; }
.dark .tint-btn::after { filter: brightness(.95) contrast(1.05); }

/* Hover: сильнее тон + «втягиваем тени» за счёт контраста и лёгкого затемнения */
.tint-btn:hover{ transform: translateY(-2px); }
.tint-btn:hover::before{ opacity:.85; filter: saturate(1.08); }
.tint-btn:hover::after { filter: brightness(.93) contrast(1.15); }

.dark .tint-btn:hover::before{ opacity:.95; filter: saturate(1.12); }
.dark .tint-btn:hover::after { filter: brightness(.88) contrast(1.25); }

/* Цветовые темы (можно настроить под фирстиль) */
.tint-green { --t1: rgba(134,239,172, .90); --t2: rgba(16,185,129,.90); }
.tint-purple{ --t1: rgba(196,181,253, .92); --t2: rgba(139, 92,246,.92); }
.tint-blue  { --t1: rgba(191,219,254, .92); --t2: rgba( 59,130,246,.92); }
.tint-rose  { --t1: rgba(254, 191, 215, 0.92); --t2: rgba(246, 59, 121, 0.92); }





/* Карточка с небесным градиентом сверху вниз */
.intro-card{
  /* прозрачная база — градиент рисуем псевдослоем */
  background: transparent;
  position: relative;
}

/* LIGHT: сверху мягкий голубовато-синий → к низу в белый */
.intro-card::before{
  content:"";
  position:absolute; inset:0; z-index:0;

  background: linear-gradient(
    to bottom,
    rgba(191,219,254,0.55) 0%,   /* blue-200 ~ сверху */
    rgba(219,234,254,0.35) 28%,  /* blue-100 */
    rgba(255,255,255,0.85) 60%,  /* к белому */
    rgba(255,255,255,1.00) 100%  /* низ — белый */
  );
  pointer-events:none;
}

/* DARK: сверху более глубокий синий → к низу в твой тёмный фон карточки */
.dark .intro-card::before{
  background: linear-gradient(
    to bottom,
    rgba(30,58,138,0.55) 0%,     /* blue-900 */
    rgba(30,64,175,0.42) 28%,    /* blue-800 */
    rgba(55,65,81,0.28) 60%,     /* gray-700-ish прозрачный */
    rgba(55,65,81,0.20) 100%     /* совпадает с существующим dark bg */
  );
}

/* чтобы контент был поверх градиента */
.intro-card > .relative{ position: relative; z-index: 1; }









/* мягкая тень для заголовков */
.text-shadow-soft { text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dark .text-shadow-soft { text-shadow: 0 1px 2px rgba(0,0,0,.4); }

/* та же анимация сдвига, что и у фона */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* локальная «переменная» градиента на секции */
.dm-block{
  --dm-grad: linear-gradient(90deg,
               rgba(236,72,153,0.85),
               rgba(59,130,246,0.85),
               rgba(244,63,94,0.85));
}
.dark .dm-block{
  --dm-grad: linear-gradient(90deg,
               rgba(236,72,153,0.95),
               rgba(37,99,235,0.95),
               rgba(244,63,94,0.95));
}

/* текст, окрашенный тем же градиентом, но немного темнее */
.dm-ink{
  background-image: var(--dm-grad);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 12s ease infinite;
  filter: brightness(0.85); /* чуть темнее, чем фон секции */
}



/* Универсальный "темизируемый" градиент для текста */
.theme-ink {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  /* Light-палитра (чуть ярче, но нежная) */
  background-image: linear-gradient( #62abff, #8fcdff, #62abff);
}
/* Dark-палитра (мягкая, как раньше) */
.dark .theme-ink {
  background-image: linear-gradient(
    90deg,
    rgba(191,219,254,0.95),
    rgba(221,214,254,0.95),
    rgba(191,219,254,0.95)
  );
}


/* Универсальный "темизируемый" градиент для текста */
.theme-ink2 {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  /* Light-палитра (чуть ярче, но нежная) */
  background-image: linear-gradient( #a754eb, #c08fff, #a754eb);
}
/* Dark-палитра (мягкая, как раньше) */
.dark .theme-ink2 {
  background-image: linear-gradient(
    90deg,
    rgba(191,219,254,0.95),
    rgba(221,214,254,0.95),
    rgba(191,219,254,0.95)
  );
}


/* Универсальный "темизируемый" градиент для текста */
.theme-ink3 {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  /* Light-палитра (чуть ярче, но нежная) */
  background-image: linear-gradient( #545eeb, #8fadff, #545eeb);
}
/* Dark-палитра (мягкая, как раньше) */
.dark .theme-ink3 {
  background-image: linear-gradient(
    90deg,
    rgba(191,219,254,0.95),
    rgba(221,214,254,0.95),
    rgba(191,219,254,0.95)
  );
}




/* Универсальный "темизируемый" градиент для текста */
.theme-ink4 {
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  /* Light-палитра (чуть ярче, но нежная) */
  background-image: linear-gradient( #5490eb, #8fb3ff, #5490eb);
}
/* Dark-палитра (мягкая, как раньше) */
.dark .theme-ink4 {
  background-image: linear-gradient(
    90deg,
    rgba(191,219,254,0.95),
    rgba(221,214,254,0.95),
    rgba(191,219,254,0.95)
  );
}









/* ========== Animated gradient text (реюзим твой glowPulse) ========== */
@layer utilities {
  .text-glow {
    --tg-angle: 270deg;
    --tg-stops: #a78bfa, #f472b6, #60a5fa, #facc15, #ec4899, #8b5cf6; /* как в bg-glow-animation */
    background-image: linear-gradient(var(--tg-angle), var(--tg-stops));
    background-size: 800% 800%;
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: glowPulse 12s ease-in-out infinite;
    will-change: background-position;
  }

  /* модификаторы скорости (по желанию) */
  @layer utilities{
  .text-glow-slow   { animation-duration: 16s; }
  .text-glow-slower { animation-duration: 36s; } /* ещё мягче */
}

  /* альтернативные палитры — можно переключать классом */
  .text-glow-blue { --tg-stops: #60a5fa, #a78bfa, #8b5cf6, #22d3ee, #60a5fa; }
  .text-glow-green { --tg-stops: #34d399, #a7f3d0, #22c55e, #86efac, #34d399; }

  /* уважение к reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .text-glow, .text-glow-slow, .text-glow-fast {
      animation: none;
      background-position: 50% 50%;
    }
  }
}