/* =========================================================
   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; }
}

/* VPS order modal */
.vps-order{position:fixed;inset:0;z-index:120;display:none;align-items:center;justify-content:center;padding:24px}.vps-order.is-open{display:flex}.vps-order__shade{position:absolute;inset:0;background:rgba(5,12,18,.62);backdrop-filter:blur(10px)}.vps-order__card{position:relative;width:min(520px,100%);max-height:92vh;overflow:auto;padding:28px;border:1px solid rgba(255,255,255,.22);border-radius:28px;background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(238,247,244,.96));box-shadow:0 32px 90px rgba(0,0,0,.28);color:#10151f}.vps-order__x{position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;border-radius:14px;background:rgba(16,21,31,.08);font-size:24px;cursor:pointer}.vps-order__eyebrow{margin:0 0 8px;color:#0e7a66;font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:12px}.vps-order h3{margin:0 36px 8px 0;font-size:28px;letter-spacing:-.04em}.vps-order__sub{margin:0 0 18px;color:#667085}.vps-order__card label{display:grid;gap:7px;margin:12px 0}.vps-order__card label span{font-size:13px;font-weight:800;color:#344054}.vps-order__card input,.vps-order__card select,.vps-order__card textarea{width:100%;border:1px solid rgba(16,21,31,.14);border-radius:16px;background:#fff;padding:13px 14px;color:#10151f;font:inherit;outline:none}.vps-order__card textarea{resize:vertical}.vps-order__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.vps-order__hint{margin:16px 0 0;color:#667085;font-size:13px;line-height:1.45}.vps-order__msg{display:none;margin:0 0 12px;padding:11px 13px;border-radius:15px;font-size:14px}.vps-order__msg.is-on{display:block}.vps-order__msg.is-error{background:rgba(180,35,24,.1);color:#b42318}.vps-order__msg.is-ok{background:rgba(6,118,71,.1);color:#067647}