/* =========================================================
   MCP 3D от HotZINK — сервер Model Context Protocol
   Палитра: ночь / сталь / циан 3D / расплав HotZINK
   ========================================================= */

:root{
  --bg:       #07090c;
  --bg-2:     #0a0d11;
  --panel:    #0d1116;
  --panel-2:  #11161d;
  --line:     #1b222b;
  --line-2:   #29323d;
  --line-hi:  #3a4653;
  --text:     #c3ccd6;
  --dim:      #8592a0;
  --mute:     #56616e;
  --paper:    #eef3f7;
  --cyan:     #38d3ff;
  --cyan-2:   #8beaff;
  --cyan-d:   rgba(56,211,255,.14);
  --molten:   #ff6a1a;
  --molten-2: #ffab2e;
  --molten-3: #ffd27a;
  --ok:       #4ade8b;
  --warn:     #ffb547;

  --shell: 1240px;
  --pad: clamp(16px, 5vw, 48px);
  --hh: 72px;
  --r: 12px;

  --ff-display: 'Unbounded', 'Segoe UI', system-ui, sans-serif;
  --ff-body: 'Golos Text', 'Segoe UI', system-ui, sans-serif;
  --ff-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --molten-grad: linear-gradient(135deg, var(--molten-2), var(--molten));
}

@property --spin{ syntax:'<angle>'; inherits:false; initial-value:0deg; }

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

html{ scroll-behavior:smooth; scroll-padding-top:84px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
@supports (overflow:clip){ body{ overflow-x:clip; } }

::selection{ background:rgba(56,211,255,.35); color:var(--paper); }

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-.01em;
  color:var(--paper);
  margin:0;
  text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
svg{ display:block; }
code, pre, .mono{ font-family:var(--ff-mono); }
code{ font-size:.92em; }

:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; border-radius:4px; }

.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.nowrap{ white-space:nowrap; }
.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

.skip{
  position:fixed; left:12px; top:-60px; z-index:300;
  padding:10px 16px; background:var(--cyan); color:#02131a; border-radius:6px;
  font-family:var(--ff-mono); font-size:14px;
  transition:top .25s var(--ease);
}
.skip:focus{ top:12px; }

/* ---- фон: инженерная сетка и мягкое свечение ---- */
.backdrop{ position:fixed; inset:0; z-index:-10; pointer-events:none; overflow:hidden; }
.backdrop__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(139,234,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,234,255,.045) 1px, transparent 1px),
    linear-gradient(rgba(139,234,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,234,255,.025) 1px, transparent 1px);
  background-size:96px 96px, 96px 96px, 24px 24px, 24px 24px;
  -webkit-mask-image:radial-gradient(90% 70% at 50% 20%, #000 10%, transparent 85%);
  mask-image:radial-gradient(90% 70% at 50% 20%, #000 10%, transparent 85%);
}
.backdrop__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 45% at 78% 18%, rgba(56,211,255,.10), transparent 70%),
    radial-gradient(50% 40% at 12% 95%, rgba(255,106,26,.08), transparent 70%);
}

/* =========================== ШАПКА =========================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background-color .45s var(--ease), border-color .45s var(--ease);
}
.header.is-stuck{
  background:rgba(7,9,12,.82);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line);
  --hh:62px;
}
/* без JS шапка сразу непрозрачная — класс is-stuck ставит script.js */
html:not(.js) .header{
  background:rgba(7,9,12,.86);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
}
.header__inner{
  position:relative;
  display:flex; align-items:center; gap:28px;
  height:var(--hh);
  transition:height .45s var(--ease);
}
.header__progress{
  position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, var(--cyan), var(--cyan-2) 55%, var(--molten-2) 85%, var(--molten));
  transform:scaleX(0); transform-origin:0 50%;
  opacity:0; transition:opacity .4s;
}
.header.is-stuck .header__progress{ opacity:1; }

.logo{ display:inline-flex; align-items:center; gap:10px; flex-shrink:0; }
.logo__mark{
  width:30px; height:30px; color:var(--cyan); display:block;
  filter:drop-shadow(0 0 6px rgba(56,211,255,.45));
  transition:transform .7s var(--ease-out);
}
.logo:hover .logo__mark{ transform:rotate(-60deg); }
.logo__mark svg{ width:100%; height:100%; }
.logo__text{
  font-family:var(--ff-display); font-weight:700; font-size:17px;
  letter-spacing:.02em; color:var(--paper); white-space:nowrap;
  display:inline-flex; align-items:baseline; gap:2px;
}
.logo__text i{ font-style:normal; color:var(--molten); margin:0 1px; }
.logo__text small{
  font-family:var(--ff-mono); font-weight:500; font-size:11px; letter-spacing:.04em;
  color:var(--dim); margin-left:8px;
}
.logo__text small b{ color:var(--molten); font-weight:600; }

.nav{ display:flex; gap:26px; margin-left:auto; }
.nav a{
  font-family:var(--ff-mono); font-size:13px; color:var(--dim);
  position:relative; padding:6px 0; transition:color .25s;
}
.nav a::before{ content:'/'; color:var(--mute); margin-right:4px; transition:color .25s; }
.nav a:hover, .nav a.is-active{ color:var(--paper); }
.nav a:hover::before, .nav a.is-active::before{ color:var(--cyan); }

.header__actions{ display:flex; align-items:center; gap:14px; }

.burger{
  display:none; width:42px; height:42px; padding:0;
  background:rgba(7,9,12,.5); border:1px solid var(--line-2); border-radius:8px;
  cursor:pointer; position:relative; transition:border-color .25s;
}
.burger:hover{ border-color:var(--cyan); }
.burger span{
  position:absolute; left:12px; width:18px; height:1.5px; background:var(--paper);
  transition:transform .35s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:20px; }
.burger span:nth-child(3){ top:25px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

/* =========================== КНОПКИ =========================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 26px; border:none; border-radius:10px; cursor:pointer;
  font-family:var(--ff-body); font-size:15px; font-weight:600; line-height:1.2;
  color:#1a0b02; background:var(--molten-grad);
  position:relative; overflow:hidden; isolation:isolate;
  transition:transform .3s var(--ease-out), box-shadow .35s var(--ease), color .25s, opacity .25s;
  box-shadow:0 10px 30px -12px rgba(255,106,26,.8), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);
  transform:translateX(-130%); transition:transform .7s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -12px rgba(255,106,26,1), inset 0 1px 0 rgba(255,255,255,.35); }
.btn:hover::after{ transform:translateX(130%); }
.btn:active{ transform:translateY(0); }
.btn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
.btn__arrow{ width:18px; height:18px; transition:transform .35s var(--ease-out); }
.btn:hover .btn__arrow{ transform:translateX(4px); }
.btn--sm{ padding:10px 16px; font-size:13.5px; border-radius:8px; white-space:nowrap; }
.btn--wide{ width:100%; padding:17px 26px; }
.btn--ghost{
  background:rgba(13,17,22,.6); color:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-2);
}
.btn--ghost::after{ background:linear-gradient(115deg,transparent 30%,rgba(56,211,255,.18) 50%,transparent 70%); }
.btn--ghost:hover{ color:var(--cyan-2); box-shadow:inset 0 0 0 1px var(--cyan), 0 10px 30px -16px rgba(56,211,255,.8); }
.btn--ghost .mono{ font-size:.92em; }

/* =========================== ПЕРВЫЙ ЭКРАН =========================== */
.hero{
  position:relative; isolation:isolate;
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column;
  padding-top:calc(var(--hh) + clamp(32px, 7vh, 80px));
}
.hero__inner{
  flex:1;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(28px,4vw,64px); align-items:center;
  padding-bottom:clamp(40px,7vh,72px);
}
.hero__text{ min-width:0; }

.badge{
  display:inline-flex; align-items:center; gap:10px;
  padding:7px 14px 7px 12px; margin-bottom:26px;
  border:1px solid var(--line-2); border-radius:999px;
  background:rgba(13,17,22,.7);
  font-family:var(--ff-mono); font-size:12.5px; color:var(--dim);
}
.badge__dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--ok); box-shadow:0 0 0 0 rgba(74,222,139,.6);
  animation:ping 2.4s ease-out infinite;
}
@keyframes ping{
  0%  { box-shadow:0 0 0 0 rgba(74,222,139,.55); }
  70% { box-shadow:0 0 0 9px rgba(74,222,139,0); }
  100%{ box-shadow:0 0 0 0 rgba(74,222,139,0); }
}

.hero__title{
  font-size:clamp(30px, 3.85vw, 56px);
  font-weight:700; line-height:1.08; letter-spacing:-.025em;
}
.hero__line{
  display:block; overflow:hidden;
  padding:.06em .04em; margin:-.06em -.04em;
}
.hero__line > span{ display:inline-block; }
.hero__line--sm{ font-size:.62em; letter-spacing:-.01em; padding-block:.12em; }
.hero__accent{
  color:transparent;
  background:linear-gradient(100deg, var(--cyan-2) 0%, var(--cyan) 30%, #b7f3ff 46%, var(--molten-2) 70%, var(--molten) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  animation:flow 9s ease-in-out infinite alternate;
}
@keyframes flow{ from{ background-position:0% 50%; } to{ background-position:100% 50%; } }

.hero__lead{
  max-width:600px; margin-top:24px;
  font-size:clamp(15px,1.35vw,17.5px); color:var(--dim);
}
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }

.stats{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  margin:42px 0 0; border:1px solid var(--line); border-radius:var(--r);
  background:rgba(10,13,17,.7);
  overflow:hidden;
}
.stat{ padding:16px 14px 14px; min-width:0; }
.stat + .stat{ border-left:1px solid var(--line); }
.stat dt{
  font-family:var(--ff-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.stat dd{
  margin:6px 0 0; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 4px;
  font-family:var(--ff-mono); font-weight:600; font-size:clamp(16px,1.45vw,22px); color:var(--paper);
  line-height:1.15; white-space:nowrap;
}
.num{ display:inline-block; font-variant-numeric:tabular-nums; text-align:right; }
.unit{ font-size:.55em; font-weight:500; color:var(--dim); }
.unit--pre{ margin-right:2px; }

/* ---- 3D-сцена ---- */
.stage{
  position:relative; margin:0; min-width:0;
  aspect-ratio:5 / 4;
  border:1px solid var(--line); border-radius:16px;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(56,211,255,.08), transparent 70%),
    radial-gradient(40% 30% at 50% 88%, rgba(255,106,26,.10), transparent 70%),
    linear-gradient(180deg, rgba(13,17,22,.85), rgba(7,9,12,.9));
  overflow:hidden; isolation:isolate;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
}
.stage::before{
  /* мелкая сетка внутри «вьюпорта» */
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(rgba(139,234,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139,234,255,.05) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(75% 70% at 50% 50%, #000, transparent 90%);
  mask-image:radial-gradient(75% 70% at 50% 50%, #000, transparent 90%);
}
.stage__frame i{
  position:absolute; width:18px; height:18px; z-index:2;
  border:1.5px solid var(--cyan); opacity:.7;
}
.stage__frame i:nth-child(1){ top:12px; left:12px; border-right:0; border-bottom:0; }
.stage__frame i:nth-child(2){ top:12px; right:12px; border-left:0; border-bottom:0; }
.stage__frame i:nth-child(3){ bottom:12px; left:12px; border-right:0; border-top:0; }
.stage__frame i:nth-child(4){ bottom:12px; right:12px; border-left:0; border-top:0; }

.stage__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.2s var(--ease); }
.stage.is-live .stage__canvas{ opacity:1; }

.stage__fallback{
  position:absolute; left:6%; right:6%; top:50%; width:88%; height:auto;
  transform:translateY(-50%);
  transition:opacity .8s var(--ease);
}
.stage.is-live .stage__fallback{ opacity:0; }
.stage__fallback path{ stroke-linecap:round; stroke-linejoin:round; }
.fb-bath{ stroke:rgba(56,211,255,.35); stroke-width:1.2; stroke-dasharray:5 6; }
.fb-back{ stroke:rgba(133,146,160,.45); stroke-width:1.2; }
.fb-cross{ stroke:rgba(133,146,160,.3); stroke-width:1; }
.fb-front{ stroke:var(--cyan-2); stroke-width:1.6; filter:drop-shadow(0 0 4px rgba(56,211,255,.5)); }
.fb-label{ fill:var(--cyan); font-family:var(--ff-mono); font-size:15px; }

.hud{
  position:absolute; z-index:2;
  font-family:var(--ff-mono); font-size:11px; line-height:1.6; color:var(--mute);
  pointer-events:none; white-space:nowrap;
}
.hud--tl{ top:22px; left:24px; }
.hud--tr{ top:22px; right:24px; text-align:right; }
.hud--bl{ bottom:20px; left:24px; display:flex; align-items:center; gap:10px; }
.hud--br{ bottom:20px; right:24px; }
.hud__v{ color:var(--cyan-2); }
.hud__ok{
  display:inline-block; padding:3px 9px; border-radius:6px;
  color:var(--ok); border:1px solid rgba(74,222,139,.35); background:rgba(74,222,139,.08);
}
.hud__bar{ width:72px; height:4px; border-radius:2px; background:var(--line-2); overflow:hidden; }
.hud__fill{
  display:block; height:100%; width:100%;
  background:linear-gradient(90deg, var(--cyan), var(--molten-2));
  transform-origin:0 50%;
}

/* ---- бегущая строка форматов ---- */
.ticker{
  position:relative; z-index:2;
  overflow:hidden; border-block:1px solid var(--line);
  background:rgba(10,13,17,.9); padding:14px 0;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.ticker__track{
  display:flex; align-items:center; gap:24px; width:max-content;
  animation:slide 46s linear infinite;
}
.ticker:hover .ticker__track{ animation-play-state:paused; }
.ticker__track span{
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
}
.ticker__track i{
  width:5px; height:5px; flex-shrink:0; border:1px solid var(--cyan); transform:rotate(45deg);
}
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* пауза CSS-анимаций вне экрана (класс ставит script.js) */
[data-anim].is-off, [data-anim].is-off *{ animation-play-state:paused !important; }

/* =========================== СЕКЦИИ =========================== */
.section{ padding:clamp(80px,10vw,128px) 0; position:relative; }
.section--alt{
  background:linear-gradient(180deg, rgba(13,17,22,.55), rgba(10,13,17,.35));
  border-block:1px solid var(--line);
}
.section__head{ max-width:760px; margin-bottom:clamp(40px,5vw,60px); }
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--ff-mono); font-size:13px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:18px;
}
.eyebrow .mono{
  padding:2px 7px; border-radius:5px; font-size:11.5px; letter-spacing:0;
  color:var(--molten-2); border:1px solid rgba(255,171,46,.35); background:rgba(255,106,26,.08);
}
.section__title{ font-size:clamp(25px,3.6vw,44px); font-weight:600; }
.section__title em{
  font-style:normal; color:transparent;
  background:linear-gradient(100deg, var(--cyan-2), var(--cyan) 45%, var(--molten-2));
  -webkit-background-clip:text; background-clip:text;
}
.section__lead{ margin-top:20px; font-size:17px; color:var(--dim); max-width:660px; }
.section__lead .mono, .flow__step .mono, .tools__more code, .ep__d .mono, .qa .mono, .plan__list .mono{
  font-size:.86em; color:var(--cyan-2);
  padding:1px 5px; border-radius:4px; background:rgba(56,211,255,.08);
  overflow-wrap:anywhere;
}

/* ---- как работает ---- */
.flow{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; counter-reset:flow; }
.flow__step{
  position:relative; padding:26px 24px 28px;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
}
.flow__step:not(:last-child)::after{
  /* соединительная стрелка между шагами */
  content:''; position:absolute; top:50px; right:-18px; width:18px; height:1px;
  background:linear-gradient(90deg, var(--cyan), transparent);
}
.flow__idx{ font-size:12px; color:var(--mute); }
.flow__icon{
  display:grid; place-items:center; width:46px; height:46px; margin:16px 0 18px;
  border-radius:10px; border:1px solid rgba(56,211,255,.3); background:var(--cyan-d); color:var(--cyan-2);
}
.flow__icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.flow__step h3{ font-size:17px; margin-bottom:10px; }
.flow__step p{ font-size:15px; color:var(--dim); }

/* ---- терминал ---- */
.term{
  margin-top:clamp(36px,5vw,56px);
  border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
  background:#05070a;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95), 0 0 0 1px rgba(56,211,255,.04);
}
.term__bar{
  display:flex; align-items:center; gap:14px; padding:11px 16px;
  border-bottom:1px solid var(--line); background:var(--panel);
}
.term__dots{ display:flex; gap:7px; flex-shrink:0; }
.term__dots i{ width:11px; height:11px; border-radius:50%; background:var(--line-2); }
.term__dots i:nth-child(1){ background:#ff5f56; opacity:.75; }
.term__dots i:nth-child(2){ background:#ffbd2e; opacity:.75; }
.term__dots i:nth-child(3){ background:#27c93f; opacity:.75; }
.term__title{ font-size:12px; color:var(--mute); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.term__replay{
  margin-left:auto; flex-shrink:0; cursor:pointer;
  padding:4px 10px; border-radius:6px; font-size:12px;
  color:var(--dim); background:transparent; border:1px solid var(--line-2);
  transition:color .25s, border-color .25s;
}
.term__replay:hover{ color:var(--cyan-2); border-color:var(--cyan); }
.term__body{
  padding:20px 22px 24px; font-size:13.5px; line-height:1.8; color:var(--text);
}
.tl{ margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.tl.is-shown{ animation:fade-in .45s ease both; }
.tl--call{ margin-top:10px; }
.tl--ai{ margin-top:14px; color:var(--paper); }
.tl.is-wait{ visibility:hidden; }
.c-who{ color:var(--molten-2); font-weight:600; }
.c-fn{ color:var(--cyan); font-weight:600; }
.c-k{ color:#9cc0ff; }
.c-s{ color:#ffc98a; }
.c-n{ color:#ff9a62; }
.c-dim{ color:var(--mute); }
.c-ok{ color:var(--ok); }
.c-warn{ color:var(--warn); }
.c-ai{ color:var(--molten); }
.term__caret{
  display:inline-block; width:.55em; height:1.1em; margin-left:3px; vertical-align:-.18em;
  background:var(--cyan); animation:blink 1.05s steps(1) infinite;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---- инструменты ---- */
.tools{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.tool{
  --mx:50%; --my:0%;
  position:relative; padding:22px 22px 24px; min-width:0;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  transition:border-color .35s var(--ease), transform .4s var(--ease-out);
  overflow:hidden; isolation:isolate;
}
.tool::before{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s;
  background:radial-gradient(320px circle at var(--mx) var(--my), rgba(56,211,255,.10), transparent 70%);
}
.tool:hover{ border-color:rgba(56,211,255,.4); transform:translateY(-3px); }
.tool:hover::before{ opacity:1; }
.tool--hot{ border-color:rgba(255,106,26,.32); }
.tool--hot::before{ background:radial-gradient(320px circle at var(--mx) var(--my), rgba(255,106,26,.13), transparent 70%); }
.tool--hot:hover{ border-color:rgba(255,106,26,.6); }
.tool--cy{ border-color:rgba(56,211,255,.28); }
.tool__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tool__name{ font-size:16px; font-weight:600; color:var(--paper); }
.tool__name::before{ content:'ƒ '; color:var(--cyan); font-weight:400; }
.tool--hot .tool__name::before{ color:var(--molten); }
.tag{
  flex-shrink:0; padding:2px 8px; border-radius:5px;
  font-family:var(--ff-mono); font-size:11px; color:var(--dim);
  border:1px solid var(--line-2);
}
.tag--cy{ color:var(--cyan-2); border-color:rgba(56,211,255,.3); background:var(--cyan-d); }
.tag--hot{ color:var(--molten-2); border-color:rgba(255,171,46,.35); background:rgba(255,106,26,.1); }
.tool__sig{ margin:8px 0 14px; font-size:12.5px; color:var(--mute); overflow-wrap:anywhere; }
.tool > p:last-child{ font-size:14.5px; color:var(--dim); }
.tools__more{ margin-top:28px; font-size:15px; color:var(--dim); }

/* ---- подключение ---- */
.connect{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(32px,5vw,72px); align-items:center; }
.checks{ margin-top:28px; display:grid; gap:10px; }
.checks li{ position:relative; padding-left:28px; color:var(--text); font-size:15.5px; }
.checks li::before{
  content:''; position:absolute; left:2px; top:.42em; width:14px; height:8px;
  border-left:2px solid var(--cyan); border-bottom:2px solid var(--cyan); transform:rotate(-45deg);
}

.code{
  min-width:0;
  border:1px solid var(--line-2); border-radius:14px; overflow:hidden;
  background:#05070a;
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95);
}
.code__tabs{ display:none; border-bottom:1px solid var(--line); background:var(--panel); overflow-x:auto; scrollbar-width:none; }
.code__tabs::-webkit-scrollbar{ display:none; }
.js .code__tabs{ display:flex; }
.code__tab{
  flex-shrink:0; padding:12px 16px; cursor:pointer;
  font-family:var(--ff-mono); font-size:12.5px; color:var(--mute);
  background:transparent; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .25s, border-color .25s;
}
.code__tab:hover{ color:var(--text); }
.code__tab.is-active{ color:var(--paper); border-bottom-color:var(--cyan); }
.code__panel{ position:relative; }
.js .code__panel:not(.is-active){ display:none; }
html:not(.js) .code__panel + .code__panel{ border-top:1px solid var(--line); }
html:not(.js) .code__panel::before{
  content:attr(data-title); display:block; padding:12px 20px 0;
  font-family:var(--ff-mono); font-size:12px; color:var(--cyan);
}
.code pre{
  margin:0; padding:20px 22px 24px; overflow-x:auto;
  font-size:13.5px; line-height:1.75; color:var(--text); tab-size:2;
}
.code__copy{
  display:none; position:absolute; top:12px; right:12px; z-index:1;
  padding:5px 10px; border-radius:6px; cursor:pointer;
  font-size:11.5px; color:var(--dim); background:var(--panel-2); border:1px solid var(--line-2);
  transition:color .25s, border-color .25s;
}
.js .code__copy{ display:block; }
.code__copy:hover{ color:var(--cyan-2); border-color:var(--cyan); }
.code__copy.is-done{ color:var(--ok); border-color:rgba(74,222,139,.45); }

/* ---- API ---- */
.api{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:24px; align-items:start; }
.eps{ border:1px solid var(--line); border-radius:var(--r); background:var(--panel); overflow:hidden; }
.ep{
  display:grid; grid-template-columns:70px minmax(0,auto) minmax(0,1fr); align-items:baseline; gap:6px 14px;
  padding:13px 18px; font-size:14px;
  transition:background-color .25s;
}
.ep + .ep{ border-top:1px solid var(--line); }
.ep:hover{ background:rgba(56,211,255,.04); }
.ep--hot{ background:rgba(255,106,26,.05); }
.ep__m{
  font-family:var(--ff-mono); font-size:11.5px; font-weight:600; text-align:center;
  padding:2px 0; border-radius:5px; border:1px solid;
}
.ep__m--get{ color:var(--cyan-2); border-color:rgba(56,211,255,.35); background:var(--cyan-d); }
.ep__m--post{ color:var(--molten-2); border-color:rgba(255,171,46,.35); background:rgba(255,106,26,.08); }
.ep__m--del{ color:#ff8a8a; border-color:rgba(255,120,120,.35); background:rgba(255,90,90,.07); }
.ep__p{ color:var(--paper); font-size:13.5px; white-space:nowrap; }
.ep__d{ color:var(--dim); font-size:14px; }

.stream{
  border:1px solid rgba(56,211,255,.25); border-radius:var(--r); padding:22px;
  background:
    radial-gradient(80% 60% at 100% 0%, rgba(56,211,255,.08), transparent 70%),
    var(--panel);
}
.stream__title{ font-size:13.5px; color:var(--paper); overflow-wrap:anywhere; }
.stream__head{
  margin:12px 0 18px; padding:12px 14px; border-radius:8px; overflow-x:auto;
  background:#05070a; border:1px solid var(--line);
  font-size:12.5px; line-height:1.7; color:var(--text);
}
.stream__cells{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:4px; }
.stream__cells i{
  aspect-ratio:1; border-radius:3px; background:var(--line);
  animation:cell 4.8s var(--ease) calc(var(--i) * .11s) infinite;
}
@keyframes cell{
  0%,4%  { background:var(--line); box-shadow:none; }
  10%    { background:var(--molten-2); box-shadow:0 0 10px rgba(255,171,46,.7); }
  22%,78%{ background:rgba(56,211,255,.55); box-shadow:none; }
  92%,100%{ background:var(--line); }
}
.stream__note{ margin-top:18px; font-size:14.5px; color:var(--dim); }
.mini{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:20px 0 0; }
.mini div{ padding:12px; border:1px solid var(--line); border-radius:8px; background:rgba(5,7,10,.6); min-width:0; }
.mini dt{ font-size:11.5px; color:var(--mute); line-height:1.3; }
.mini dd{ margin:6px 0 0; font-family:var(--ff-mono); font-weight:600; font-size:22px; color:var(--paper); line-height:1.1; white-space:nowrap; }

/* ---- тарифы ---- */
.plans{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
.plan{
  position:relative; padding:26px 24px 28px; min-width:0;
  border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
}
.plan--main{
  border-color:transparent;
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel)) padding-box,
    linear-gradient(160deg, var(--molten-2), rgba(255,106,26,.25) 40%, rgba(56,211,255,.4)) border-box;
}
.plan__name{ font-size:12px; color:var(--cyan); }
.plan--main .plan__name{ color:var(--molten-2); }
.plan h3{ font-size:19px; margin:10px 0 12px; }
.plan__price{ font-family:var(--ff-mono); font-size:18px; font-weight:600; color:var(--paper); }
.plan__price span{ display:block; font-family:var(--ff-body); font-size:13.5px; font-weight:400; color:var(--mute); margin-top:2px; }
.plan__list{ margin-top:20px; padding-top:18px; border-top:1px dashed var(--line-2); display:grid; gap:9px; }
.plan__list li{ position:relative; padding-left:20px; font-size:14.5px; color:var(--dim); }
.plan__list li::before{ content:'›'; position:absolute; left:3px; top:0; color:var(--cyan); font-family:var(--ff-mono); }

/* ---- заявка ---- */
.request{
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(28px,5vw,64px);
  margin-top:clamp(56px,7vw,88px); align-items:start;
}
.request__title{ font-size:clamp(22px,2.6vw,30px); margin-bottom:16px; }
.request__text p{ color:var(--dim); }
.request__alt{ margin-top:14px; }
.request__alt a{ color:var(--cyan-2); border-bottom:1px solid rgba(56,211,255,.35); transition:border-color .25s; }
.request__alt a:hover{ border-color:var(--cyan); }

.form{
  position:relative;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius:14px;
  padding:clamp(20px,3.2vw,34px);
  display:grid; gap:18px;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.9);
}
.form::before{
  content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--spin), transparent 0 60%, rgba(56,211,255,.7) 72%, rgba(255,171,46,.9) 80%, rgba(255,106,26,.5) 85%, transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:spin 8s linear infinite;
  opacity:.85;
}
@keyframes spin{ to{ --spin:360deg; } }
.form__row{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.field{ display:grid; gap:8px; min-width:0; }
.field > span{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim);
  transition:color .25s;
}
.field:focus-within > span{ color:var(--cyan); }
.field > span i{ color:var(--molten); font-style:normal; margin-left:3px; }
.field input, .field select, .field textarea{
  width:100%; padding:13px 15px;
  background:var(--bg); color:var(--paper);
  border:1px solid var(--line-2); border-radius:8px;
  font-family:var(--ff-body); font-size:16px;
  transition:border-color .25s, box-shadow .3s;
  resize:vertical;
}
.field input:hover, .field select:hover, .field textarea:hover{ border-color:var(--line-hi); }
.field input::placeholder, .field textarea::placeholder{ color:var(--mute); }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(56,211,255,.14), 0 0 24px -6px rgba(56,211,255,.45);
}
.field input.is-error{ border-color:#e2413d; animation:shake .4s var(--ease); }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); } 50%{ transform:translateX(4px); } 75%{ transform:translateX(-2px); }
}
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238592a0' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center;
  padding-right:40px;
}
.field select option{ background:var(--bg); color:var(--paper); }

.formats{ border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
.formats legend{
  width:100%; padding:0; margin-bottom:8px;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--dim);
}
.formats label{ position:relative; cursor:pointer; }
.formats input{ position:absolute; opacity:0; width:1px; height:1px; }
.formats label span{
  display:inline-block; padding:7px 13px; border-radius:7px;
  font-family:var(--ff-mono); font-size:13px; color:var(--dim);
  border:1px solid var(--line-2); background:var(--bg);
  transition:color .25s, border-color .25s, background-color .25s;
}
.formats label:hover span{ border-color:var(--line-hi); color:var(--text); }
.formats input:checked + span{ color:var(--cyan-2); border-color:rgba(56,211,255,.55); background:var(--cyan-d); }
.formats input:focus-visible + span{ outline:2px solid var(--cyan); outline-offset:2px; }

.check{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--dim); cursor:pointer; }
.check input{ margin-top:3px; accent-color:var(--cyan); width:16px; height:16px; flex-shrink:0; }
.form__note{ font-size:14px; min-height:20px; color:var(--molten-2); }
.form__note.is-ok{ color:var(--ok); }

/* ---- FAQ ---- */
.faq{ display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:clamp(28px,5vw,72px); align-items:start; }
.faq__head{ position:sticky; top:110px; margin-bottom:0; }
.qa{ display:grid; gap:10px; }
.qa details{
  border:1px solid var(--line); border-radius:var(--r);
  background:var(--panel); transition:border-color .3s, background-color .3s;
}
.qa details[open]{ border-color:rgba(56,211,255,.32); background:var(--panel-2); }
.qa summary{
  list-style:none; cursor:pointer; position:relative;
  padding:18px 56px 18px 20px;
  font-weight:600; font-size:16px; color:var(--paper);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:'+'; position:absolute; right:18px; top:50%; translate:0 -50%;
  width:26px; height:26px; display:grid; place-items:center; border-radius:6px;
  font-family:var(--ff-mono); font-size:16px; color:var(--cyan);
  border:1px solid var(--line-2); transition:rotate .35s var(--ease-out), border-color .3s;
}
.qa details[open] summary::after{ rotate:45deg; border-color:rgba(56,211,255,.5); }
.qa details p{ padding:0 20px 20px; font-size:15px; color:var(--dim); }
.js .qa details[open] p{ animation:fade-in .5s ease both; }

/* =========================== ПОДВАЛ =========================== */
.footer{ position:relative; border-top:1px solid var(--line); background:var(--bg-2); padding-top:clamp(48px,6vw,72px); }
.footer__inner{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:clamp(40px,5vw,56px);
}
.footer__brand p{ margin-top:16px; font-size:14px; color:var(--mute); max-width:320px; }
.footer__col{ display:grid; gap:8px; align-content:start; font-size:14.5px; }
.footer__col h4{ font-family:var(--ff-mono); font-weight:500; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan); margin-bottom:6px; }
.footer__col a{ color:var(--dim); width:max-content; max-width:100%; transition:color .25s; }
.footer__col a:hover{ color:var(--paper); }
.footer__status{ display:flex; align-items:center; gap:10px; color:var(--text); }
.footer__muted{ font-size:12.5px; color:var(--mute); }
.footer__bottom{
  border-top:1px solid var(--line);
  padding-block:20px;
  display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap;
  font-size:13.5px; color:var(--mute);
}
.footer__bottom a{ color:var(--dim); transition:color .25s; }
.footer__bottom a:hover{ color:var(--molten-2); }

/* =========================== АНИМАЦИЯ ПОЯВЛЕНИЯ =========================== */
.js .reveal{ opacity:0; }
.js .reveal.is-in{ animation:rise 1s var(--ease-out) var(--d,0s) both; }
@keyframes rise{
  from{ opacity:0; translate:0 28px; }
  to  { opacity:1; translate:0 0; }
}
.js .hero__line > .reveal.is-in{ animation:line-up 1.2s var(--ease-out) var(--d,0s) both; }
.js .hero__line > .hero__accent.reveal.is-in{
  animation:line-up 1.2s var(--ease-out) var(--d,0s) both, flow 9s ease-in-out 1.5s infinite alternate;
}
@keyframes line-up{
  from{ opacity:0; translate:0 105%; }
  30% { opacity:1; }
  to  { opacity:1; translate:0 0; }
}
.js .stage.reveal.is-in{ animation:stage-in 1.4s var(--ease-out) var(--d,0s) both; }
@keyframes stage-in{
  from{ opacity:0; scale:.96; }
  to  { opacity:1; scale:1; }
}
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* =========================== АДАПТИВ =========================== */
@media (min-width:1081px) and (max-width:1200px){
  .stat{ padding:14px 10px 12px; }
  .stat dd{ gap:0 3px; }
}

@media (max-width:1080px){
  .hero__inner{ grid-template-columns:minmax(0,1fr); }
  .hero__title{ font-size:clamp(30px, 9.4vw, 72px); }
  .stage{ aspect-ratio:16 / 10; }
  .stat dd{ font-size:clamp(19px,2.6vw,25px); }
  .tools, .plans{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .api{ grid-template-columns:minmax(0,1fr); }
  .footer__inner{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:980px){
  .burger{ display:block; }
  .header__inner{ gap:14px; }
  .header__actions{ margin-left:auto; }
  .nav{
    position:fixed; inset:var(--hh) 0 auto 0;
    flex-direction:column; gap:0;
    background:rgba(7,9,12,.97);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    padding:8px var(--pad) 24px;
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s var(--ease), transform .35s var(--ease-out), visibility 0s linear .35s;
  }
  .nav.is-open{ opacity:1; transform:none; visibility:visible; pointer-events:auto; transition-delay:0s; }
  .nav a{ padding:15px 0; border-bottom:1px solid var(--line); font-size:15px; }
  .connect, .request, .faq{ grid-template-columns:minmax(0,1fr); }
  .faq__head{ position:static; }
}

@media (max-width:760px){
  .flow{ grid-template-columns:minmax(0,1fr); gap:12px; }
  .flow__step:not(:last-child)::after{ top:auto; bottom:-12px; right:auto; left:46px; width:1px; height:12px; background:linear-gradient(180deg, var(--cyan), transparent); }
  .stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .stat:nth-child(3){ border-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .ep{ grid-template-columns:62px minmax(0,1fr); padding:12px 14px; }
  .ep__p{ white-space:normal; overflow-wrap:anywhere; }
  .ep__d{ grid-column:2; font-size:13.5px; }
}

@media (max-width:620px){
  .tools, .plans{ grid-template-columns:minmax(0,1fr); }
  .form__row{ grid-template-columns:minmax(0,1fr); }
  .footer__inner{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .hero__cta .btn{ width:100%; }
  .stage{ aspect-ratio:4 / 3.4; border-radius:12px; }
  .hud{ font-size:10px; }
  .hud--tl, .hud--tr{ top:14px; }
  .hud--tl, .hud--bl{ left:14px; }
  .hud--tr, .hud--br{ right:14px; }
  .hud--bl, .hud--br{ bottom:12px; }
  .hud__bar{ width:44px; }
  .stage__frame i{ width:12px; height:12px; }
  .stage__frame i:nth-child(1), .stage__frame i:nth-child(2){ top:8px; }
  .stage__frame i:nth-child(3), .stage__frame i:nth-child(4){ bottom:8px; }
  .stage__frame i:nth-child(1), .stage__frame i:nth-child(3){ left:8px; }
  .stage__frame i:nth-child(2), .stage__frame i:nth-child(4){ right:8px; }
  .term__body, .code pre{ font-size:12.5px; padding:16px 16px 20px; }
  .term__title{ font-size:11px; }
  .section__lead{ font-size:16px; }
  .mini dd{ font-size:19px; }
  .logo__text small{ display:none; }
}

@media (max-width:400px){
  .hud--tr{ display:none; }
  .stat{ padding:14px 12px 12px; }
  .stat dt{ font-size:10px; }
  .badge{ font-size:11.5px; }
  .mini{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; }
  .mini div{ padding:10px 8px; }
  .mini dt{ font-size:10.5px; }
}

@media (max-width:380px){
  /* на очень узких экранах в шапке остаются логотип и меню, пункт «Доступ» есть в меню */
  .header__actions .btn--sm{ display:none; }
}

@media (hover:none){
  .tool:hover{ transform:none; }
}

/* =========================== МЯГКИЙ РЕЖИМ ДВИЖЕНИЯ ===========================
   Не «выключаем всё»: убираем перемещения (подъёмы, бегущую строку, параллакс),
   оставляем свечение, переливы цвета и плавные появления по прозрачности. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  .js .reveal.is-in,
  .js .hero__line > .reveal.is-in,
  .js .stage.reveal.is-in{ animation:fade-in 1.1s ease var(--d,0s) both; }
  .js .hero__line > .hero__accent.reveal.is-in{
    animation:fade-in 1.1s ease var(--d,0s) both, flow 9s ease-in-out 1.5s infinite alternate;
  }

  .ticker__track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; row-gap:8px; padding-inline:var(--pad); }
  .ticker{ -webkit-mask-image:none; mask-image:none; }
  .ticker__track span:nth-of-type(n+9), .ticker__track i:nth-of-type(n+8){ display:none; }

  .stream__cells i{ animation-duration:9s; animation-delay:calc(var(--i) * .2s); }
  .btn:hover, .tool:hover{ transform:none; }
  .btn:hover .btn__arrow, .logo:hover .logo__mark{ transform:none; }
  .field input.is-error{ animation:none; }
  .form::before{ animation-duration:16s; }
}