/* =========================================================
   BlinkyWave · База
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--tx);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  position: relative;
}

/* Амбиентный фон — глубокий холодный холст с световыми «источниками».
   Отдельный фиксированный слой, чтобы белые панели чётко «парили». */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(70% 48% at 50% -8%, rgba(59,108,255,.22), transparent 62%),
    radial-gradient(46% 40% at 100% 6%, rgba(18,214,194,.14), transparent 60%),
    radial-gradient(52% 46% at -4% 16%, rgba(36,56,224,.16), transparent 58%),
    radial-gradient(90% 70% at 50% 118%, rgba(11,20,55,.16), transparent 70%),
    linear-gradient(180deg, #d3dbf1 0%, #c6d0ea 42%, #cbd4ec 100%);
}

/* Тематический паттерн иконок (серверы/DNS/CPU/облака…) — фон-дудлы как в TG.
   Параллакс по скроллу задаётся из JS (background-position). */
.bg-pattern {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("../assets/bg-pattern.svg");
  background-size: 560px 560px;
  background-repeat: repeat;
  opacity: .36;
  /* активно по бокам, гаснет к центру (где контент) + лёгкий спад сверху */
  -webkit-mask-image:
    linear-gradient(to right, #000 0%, transparent 34%, transparent 66%, #000 100%),
    linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0%, transparent 34%, transparent 66%, #000 100%),
    linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-composite: intersect;
}

/* Плавающие «пузыри» — живой фон под стеклом.
   Реагирует на скролл: --sp (0..1) задаётся из JS. */
.orbs {
  position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
}
.orbs::after { /* медленный диагональный «аврора»-свет */
  content: ""; position: absolute; inset: -30%;
  background: linear-gradient(115deg, transparent 30%, rgba(59,108,255,.12) 48%, rgba(18,214,194,.12) 56%, transparent 74%);
  animation: aurora 24s ease-in-out infinite alternate;
}
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(44px);
  opacity: .66;
  will-change: transform;
  animation: drift var(--dur, 22s) var(--e-out) infinite alternate;
  animation-delay: var(--dly, 0s);
}
.orb--a { width: 460px; height: 460px; left: -120px; top: 4%;  background: radial-gradient(circle at 30% 30%, rgba(59,108,255,.6), transparent 70%); --dur: 22s; }
.orb--b { width: 380px; height: 380px; right: -90px; top: 2%;  background: radial-gradient(circle at 30% 30%, rgba(18,214,194,.55), transparent 70%); --dur: 18s; --dly: -5s; }
.orb--c { width: 520px; height: 520px; left: 38%;  top: 28%; background: radial-gradient(circle at 30% 30%, rgba(36,56,224,.46), transparent 70%); --dur: 26s; --dly: -10s; opacity: .5; }
.orb--d { width: 320px; height: 320px; right: 8%;  top: 54%; background: radial-gradient(circle at 30% 30%, rgba(59,108,255,.5), transparent 70%);  --dur: 20s; --dly: -3s; }
.orb--e { width: 300px; height: 300px; left: 6%;   top: 70%; background: radial-gradient(circle at 30% 30%, rgba(18,214,194,.46), transparent 70%); --dur: 24s; --dly: -8s; }
.orb--f { width: 240px; height: 240px; right: 26%; top: 80%; background: radial-gradient(circle at 30% 30%, rgba(36,56,224,.5), transparent 70%);  --dur: 17s; --dly: -2s; }
.orb--g { width: 200px; height: 200px; left: 60%;  top: 6%;  background: radial-gradient(circle at 30% 30%, rgba(18,214,194,.5), transparent 70%);  --dur: 15s; --dly: -6s; }

@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(48px,-54px,0) scale(1.14); }
  100% { transform: translate3d(-36px,40px,0) scale(.92); }
}
@keyframes aurora {
  0%   { transform: translate3d(-12%,-6%,0) rotate(0deg); opacity: .7; }
  50%  { opacity: 1; }
  100% { transform: translate3d(12%,8%,0) rotate(6deg); opacity: .7; }
}

/* — Стеклянная поверхность — */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-brd);
  box-shadow: var(--sh-2), var(--glass-hi);
}

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, select, output { font: inherit; }

h1, h2, h3, h4 { line-height: 1.08; letter-spacing: -.02em; color: var(--ink); font-weight: 700; }

.mono { font-family: var(--f-mono); font-feature-settings: "tnum" 1; }

::selection { background: var(--cobalt); color: #fff; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section { padding-block: clamp(40px, 5vw, 72px); position: relative; }

/* Эйброу-метка секции — стеклянная пилюля с пульсирующей точкой */
.kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--cobalt-d);
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: var(--sh-1);
}
.kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal); box-shadow: 0 0 0 0 rgba(18,214,194,.5);
  animation: ping 2s var(--e-out) infinite;
}
.sec-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 56px); }
.sec-head h2 {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.8rem);
  margin: 16px 0 0;
  letter-spacing: -.04em;
}
.sec-head p { margin-top: 14px; color: var(--tx-2); font-size: clamp(1rem, 1.5vw, 1.16rem); max-width: 600px; }

.u-ink { color: var(--ink); }
.u-signal { color: var(--signal-d); }

/* Доступность */
:focus-visible { outline: 3px solid var(--azure); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}