/* Стиль v2 «Свет и стекло»: светящиеся градиенты, стеклянные панели, глубина.
   Поверх style.css; старая версия — ?v=1. Фиолетовый — мост между венозным синим и кораллом. */
:root {
  --violet: #7A68F0;
  --aqua: #4FD1E8;
  --peach: #FFB39A;
  --ink-0: #060B1C;
  /* «стекло» без backdrop-filter: размытие поверх живого 3D и фона пересчитывается каждый кадр и тормозит */
  --glass: linear-gradient(140deg, rgba(150, 140, 255, .16), rgba(20, 28, 70, .55) 55%, rgba(10, 16, 44, .62));
  --glass-line: rgba(255, 255, 255, .16);
}
body { background: var(--ink-0); background-image: none; }

/* живая атмосфера: мягкие световые пятна. Радиальные градиенты без filter/blend —
   иначе браузер перерисовывает размытие каждый кадр и страница тормозит. Двигается только transform (дёшево). */
.atmo { position: fixed; inset: -10%; z-index: 0; pointer-events: none; will-change: transform; animation: drift 30s ease-in-out infinite alternate;
  background:
    radial-gradient(30vmax 30vmax at 72% 8%, rgba(255, 122, 89, .34), transparent 70%),
    radial-gradient(36vmax 36vmax at 14% 30%, rgba(122, 104, 240, .34), transparent 70%),
    radial-gradient(26vmax 26vmax at 82% 72%, rgba(79, 209, 232, .2), transparent 70%),
    radial-gradient(34vmax 34vmax at 26% 88%, rgba(30, 79, 168, .45), transparent 70%);
}
.atmo i { display: none; }
@keyframes drift { to { transform: translate3d(4vw, -3vh, 0) scale(1.06); } }
/* плёночное зерно: убирает «пластиковость» градиентов */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.glass, .hero__text, .step__card, .facts li, .top {
  background: var(--glass); border: 1px solid var(--glass-line);
  box-shadow: 0 40px 120px -50px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* шапка — парящая стеклянная капсула */
.top { inset: 14px var(--gut) auto; padding: 10px 10px 10px 24px; border-radius: 999px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* hero */
.hero__text { max-width: 820px; padding: clamp(26px, 3.2vw, 46px); border-radius: 36px; }
.hero__title { font-size: clamp(40px, 5.2vw, 84px); }
.hero__lead { margin: 20px 0 26px; }
.facts { margin-top: 30px; }
.hero__title em {
  background: linear-gradient(95deg, #FF7A59 0%, #FFB39A 45%, #B9A6FF 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.who__photo { background: linear-gradient(135deg, var(--violet), #FF7A59); border-color: rgba(255, 255, 255, .35); box-shadow: 0 0 30px rgba(255, 122, 89, .35); }
.facts { gap: 12px; max-width: none; }
.facts li { border-radius: 20px; padding: 14px 16px; }
.facts b { background: linear-gradient(90deg, #fff, #CFC6FF); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* кнопки: тёплый градиент со светом */
.btn--coral {
  background: linear-gradient(135deg, #FF7A59, #FF9F80); color: #1B0F0B;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 44px -10px rgba(255, 122, 89, .85), 0 0 0 1px rgba(255, 179, 154, .4);
}
.btn--ghost, button.btn--ghost { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .28); }

/* история */
.lens {
  background: radial-gradient(circle at 38% 30%, #22306E, #0A1030 72%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 0 70px rgba(79, 209, 232, .28), 0 0 160px rgba(122, 104, 240, .35), 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.lens::before {
  content: ''; position: absolute; inset: -7px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--aqua), var(--violet), #FF7A59, var(--peach), var(--aqua));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: spin 14s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.lens__label { color: var(--peach); }
.story__head h2 { background: linear-gradient(95deg, #fff 30%, #C9BFFF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.step__card { padding: clamp(22px, 2.6vw, 36px); border-radius: 30px; }
.tags li { font: 400 13px var(--text); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #DCE6F5; }
.urgent { background: linear-gradient(140deg, rgba(255, 179, 154, .14), rgba(255, 255, 255, .04)); border-color: rgba(255, 179, 154, .35); border-radius: 20px; }
.rail button.is-active::before { background: linear-gradient(135deg, #FF7A59, var(--violet)); border-color: transparent; box-shadow: 0 0 14px rgba(255, 122, 89, .8); }

/* финал: светлая «долина» после тёмной истории */
.hills { display: block; position: absolute; left: 0; right: 0; top: -1px; width: 100%; height: clamp(90px, 14vw, 220px); }
.final {
  padding-top: calc(18svh + 120px);
  background: radial-gradient(70% 60% at 85% 30%, rgba(255, 179, 154, .45), transparent 70%),
              radial-gradient(60% 50% at 10% 70%, rgba(122, 104, 240, .22), transparent 70%),
              linear-gradient(180deg, #EEF2FB, #F8F4F2);
}
.final h2 { background: linear-gradient(95deg, #1A3A5F 20%, #5A47C8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.msg { background: rgba(255, 255, 255, .7); border-color: rgba(26, 58, 95, .12); border-radius: 22px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px -40px rgba(26, 58, 95, .45); }
.foot { background: #F8F4F2; }

@media (max-width: 760px) {
  .top { inset: 10px 10px auto; padding: 8px 8px 8px 18px; }
  .hero__text { padding: 22px 20px; border-radius: 28px; }
  .warn--hero { background: none; padding: 0 0 0 12px !important; }
  .facts li { padding: 10px 14px; }
  .step__card { background: linear-gradient(140deg, rgba(20, 26, 60, .82), rgba(12, 18, 44, .9)); border-radius: 24px; }
  .atmo { animation: none; } /* на телефоне фон статичный — бережём батарею */
}
@media (prefers-reduced-motion: reduce) {
  .atmo, .lens::before { animation: none; }
}