/* ═══════════════════════════════════════════════════════════
   HUB · ИИ-СИСТЕМЫ — design system (single-screen)
   0. tokens  1. reset  2. background  3. topbar  4. hero
   5. system card  6. toast  7. responsive  8. motion
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 0. TOKENS ─────────── */
:root{
  --bg:#07080c;
  --panel:rgba(255,255,255,.035);
  --panel-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.16);

  --txt:#eef1f8;
  --txt-2:#9aa3ba;
  --txt-3:#636c83;

  /* один акцент на всё: фиолетовый и его светлые оттенки */
  --accent:#7c5cff;
  --accent-2:#a78bfa;
  --accent-dim:#6350d6;
  --warn:#ffb545;

  --grad-title:linear-gradient(100deg,#c4b4ff 0%,#8b6bff 52%,#6a4df0 100%);

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  --ease:cubic-bezier(.22,1,.36,1);
  --mid:.3s var(--ease);
  --slow:.6s var(--ease);

  --shell:1760px;
  --grain-op:.03;
}

/* ─────────── 1. RESET ─────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,p,ul{margin:0}
ul{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
kbd{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.64rem;line-height:1;
  padding:.32em .48em;border-radius:6px;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  color:var(--txt-2);
}
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:8px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:rgba(124,92,255,.4);color:#fff}

/* ─────────── 2. BACKGROUND ─────────── */
.bg{
  position:fixed;inset:0;z-index:-1;overflow:hidden;
  background:radial-gradient(120% 80% at 50% -10%, #14121f 0%, var(--bg) 58%, #05060a 100%);
}
.bg__wash{position:absolute;border-radius:50%;filter:blur(100px);opacity:.34}
.bg__wash--1{
  width:56vw;height:56vw;top:-20vw;left:-12vw;
  background:radial-gradient(circle, rgba(124,92,255,.5), transparent 68%);
  animation:drift1 36s ease-in-out infinite alternate;
}
.bg__wash--2{
  width:50vw;height:50vw;bottom:-24vw;right:-14vw;
  background:radial-gradient(circle, rgba(99,80,214,.34), transparent 68%);
  animation:drift2 44s ease-in-out infinite alternate;
}
@keyframes drift1{to{transform:translate3d(7vw,5vh,0) scale(1.12)}}
@keyframes drift2{to{transform:translate3d(-8vw,-6vh,0) scale(1.16)}}

.bg__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%, #000 15%, transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 0%, #000 15%, transparent 75%);
}
.bg__grain{position:absolute;inset:0;width:100%;height:100%;opacity:var(--grain-op);mix-blend-mode:overlay}

/* ─────────── 3. TOPBAR ─────────── */
.topbar{
  position:relative;z-index:40;flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(12px,1.6vh,20px) clamp(18px,3.4vw,48px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:34px;height:34px;flex:none;display:grid;place-items:center}
.brand__mark svg{width:100%;height:100%}
.bm__r2{transform-origin:22px 22px;animation:spin 7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__text strong{
  font-family:'Unbounded',system-ui,sans-serif;font-weight:500;font-size:.88rem;letter-spacing:-.01em;
}
.brand__text em{
  font-style:normal;font-family:'JetBrains Mono',monospace;
  font-size:.64rem;color:var(--txt-3);letter-spacing:.06em;text-transform:uppercase;
}
.topbar__right{display:flex;align-items:center;gap:18px}
.clock{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;
  color:var(--txt-2);letter-spacing:.04em;font-variant-numeric:tabular-nums;
}
.status{display:flex;align-items:center;gap:9px}
.status__dots{display:flex;gap:4px}
.status__dots i{
  width:6px;height:6px;border-radius:50%;background:var(--accent-2);
  box-shadow:0 0 10px rgba(124,92,255,.8);
  animation:blink 2.4s var(--ease) infinite;
}
.status__dots i:nth-child(2){animation-delay:.25s}
.status__dots i:nth-child(3){animation-delay:.5s}
.status__dots i:nth-child(4){animation-delay:.75s}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.status__txt{font-family:'JetBrains Mono',monospace;font-size:.72rem;color:var(--txt-2)}
.status__txt b{color:var(--txt);font-weight:500}

/* ─────────── 4. MAIN / HERO ─────────── */
main{
  flex:1;min-height:0;
  display:flex;flex-direction:column;
  max-width:var(--shell);width:100%;margin:0 auto;
  padding:0 clamp(18px,3.4vw,48px) clamp(18px,3vh,34px);
}
/* заголовок — по центру, во всю ширину */
.hero{
  flex:none;text-align:center;
  padding:clamp(20px,4vh,54px) 0 clamp(10px,1.6vh,20px);
}
.hero__title{
  font-family:'Unbounded',system-ui,sans-serif;
  font-weight:300;font-size:clamp(1.9rem,5.2vh,3.6rem);
  line-height:1.06;letter-spacing:-.035em;
  margin-inline:auto;
}
.hero__title em{
  font-style:normal;font-weight:700;
  background:var(--grad-title);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{
  margin:clamp(10px,1.8vh,18px) auto 0;max-width:64ch;color:var(--txt-2);
  font-size:clamp(.88rem,1.6vh,1.02rem);
}
.noscript{margin:0;padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--line);color:var(--txt-2)}

/* ─────────── 5. SYSTEM CARD ─────────── */
.systems{
  flex:1;min-height:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:center;
  gap:clamp(14px,1.7vw,28px);
}
.sys{
  --c1:var(--accent); --c2:var(--accent-2);
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  height:clamp(292px,44vh,440px);
  padding:clamp(16px,1.5vw,22px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  text-align:left;
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018) 45%, rgba(255,255,255,.008));
  transition:transform var(--mid), border-color var(--mid), box-shadow var(--mid), background var(--mid);
  animation:cardIn .8s var(--ease) backwards;
}
.sys:nth-child(1){animation-delay:.05s}
.sys:nth-child(2){animation-delay:.13s}
.sys:nth-child(3){animation-delay:.21s}
.sys:nth-child(4){animation-delay:.29s}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.985)}}
/* прожектор под курсором: готовая картинка, двигается только transform —
   Safari не перерисовывает градиент, в отличие от background-position */
.sys__spot{
  position:absolute;left:0;top:0;width:300px;height:300px;
  margin:-150px 0 0 -150px;z-index:0;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle at center, rgba(255,255,255,.09), transparent 62%);
  transform:translate3d(var(--mx,50%), var(--my,40%), 0);
  transition:opacity var(--mid);
  will-change:transform;
}
.sys:hover .sys__spot,.sys:focus-visible .sys__spot{opacity:1}

.sys:hover,.sys:focus-visible{
  transform:translateY(-5px);
  border-color:rgba(var(--c1rgb),.5);
  box-shadow:0 22px 46px -26px rgba(0,0,0,.85),
             0 0 40px -10px rgba(var(--c1rgb),.45);
}
.sys:active{transform:translateY(-2px) scale(.995)}

/* ── анимация при наведении ── */

/* вспышка, пробегающая по карточке — только transform, поэтому идёт на композиторе */
.sys__fx{
  position:absolute;inset:0;z-index:1;overflow:hidden;
  border-radius:inherit;pointer-events:none;
}
.sys__fx::before{
  content:"";position:absolute;top:-60%;left:-70%;
  width:42%;height:220%;transform:rotate(18deg) translateX(-260%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  opacity:0;
}
.sys:hover .sys__fx::before{
  opacity:1;animation:sweep 1.15s var(--ease) infinite;
  will-change:transform;            /* слой создаётся только на время наведения */
}
@keyframes sweep{0%{transform:rotate(18deg) translateX(-260%)}100%{transform:rotate(18deg) translateX(520%)}}

/* рамка и тени без color-mix: цвет задаётся готовым rgba из --c1rgb */
.sys:hover .sys__brackets i,.sys:focus-visible .sys__brackets i{
  border-color:var(--c1);opacity:1;
  box-shadow:0 0 12px rgba(var(--c1rgb),.55);
}

/* содержимое карточки остаётся поверх декора */
.sys__orb,.sys__body,.sys__foot,.sys__brackets,.sys__index{position:relative;z-index:2}
.sys__index{position:absolute}
.sys__brackets{z-index:2}

/* corner brackets */
.sys__brackets i{position:absolute;width:16px;height:16px;border:1.5px solid var(--line-2);opacity:.5;transition:var(--mid)}
.sys__brackets i:nth-child(1){top:11px;left:11px;border-right:0;border-bottom:0;border-radius:5px 0 0 0}
.sys__brackets i:nth-child(2){top:11px;right:11px;border-left:0;border-bottom:0;border-radius:0 5px 0 0}
.sys__brackets i:nth-child(3){bottom:11px;left:11px;border-right:0;border-top:0;border-radius:0 0 0 5px}
.sys__brackets i:nth-child(4){bottom:11px;right:11px;border-left:0;border-top:0;border-radius:0 0 5px 0}

/* ghost index */
.sys__index{
  position:absolute;top:10px;right:16px;
  font-family:'Unbounded',sans-serif;font-weight:700;
  font-size:2.5rem;line-height:1;letter-spacing:-.05em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.1);
  transition:var(--mid);pointer-events:none;
}
.sys:hover .sys__index{color:rgba(var(--c1rgb),.16);-webkit-text-stroke-color:transparent}

/* orb */
.sys__orb{position:relative;width:clamp(42px,3.4vw,56px);height:clamp(42px,3.4vw,56px);flex:none}
.sys__orb-core{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 32% 28%, #fff 0%, transparent 26%),
    conic-gradient(from 0deg, var(--c1), var(--c2), var(--c1));
  box-shadow:0 0 26px -6px color-mix(in srgb, var(--c1) 78%, transparent),
             inset 0 -10px 20px -12px rgba(0,0,0,.7);
  animation:orbSpin 9s linear infinite;
  transition:transform var(--slow);
}
.sys__orb-core::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 68% 76%, color-mix(in srgb, var(--c2) 70%, transparent), transparent 55%);
  mix-blend-mode:screen;opacity:.85;
}
@keyframes orbSpin{to{transform:rotate(360deg)}}
.sys__orb-ring{
  position:absolute;inset:-7px;border-radius:50%;
  border:1px dashed color-mix(in srgb, var(--c2) 45%, transparent);
  animation:spin 14s linear infinite reverse;opacity:.65;
}
.sys:hover .sys__orb-core{transform:scale(1.1);animation-duration:2.4s}
.sys:hover .sys__orb-ring{animation-duration:3.2s;opacity:1}

/* пульсирующая волна вокруг сферы при наведении */
.sys__orb::after{
  content:"";position:absolute;inset:-7px;border-radius:50%;
  border:1px solid color-mix(in srgb, var(--c1) 65%, transparent);
  opacity:0;pointer-events:none;
}
.sys:hover .sys__orb::after{animation:pulseRing 1.5s ease-out infinite}
@keyframes pulseRing{
  0%{opacity:.75;transform:scale(1)}
  100%{opacity:0;transform:scale(1.55)}
}
.sys__icon{
  position:absolute;inset:0;z-index:2;margin:auto;
  width:46%;height:46%;fill:none;stroke:#08090d;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 1px 2px rgba(255,255,255,.35));
}

/* текстовый блок идёт сразу под сферой, вся группа центрируется по вертикали */
.sys__body{
  flex:0 0 auto;margin-top:clamp(14px,2.4vh,26px);
  display:flex;flex-direction:column;gap:clamp(6px,.9vh,10px);
}
.sys__kicker{
  font-family:'JetBrains Mono',monospace;font-size:.64rem;letter-spacing:.11em;
  text-transform:uppercase;color:color-mix(in srgb, var(--c1) 74%, #ffffff);
}
.sys__name{
  font-family:'Unbounded',sans-serif;font-weight:500;
  font-size:clamp(1.05rem,1.5vw,1.42rem);letter-spacing:-.025em;line-height:1.08;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.sys__badge{
  font-family:'JetBrains Mono',monospace;font-size:.58rem;font-weight:400;
  letter-spacing:.07em;text-transform:uppercase;
  padding:4px 7px;border-radius:var(--r-pill);
  border:1px solid var(--line-2);color:var(--txt-3);white-space:nowrap;
}
.sys__badge--live{color:#cfc2ff;border-color:rgba(124,92,255,.3);background:rgba(124,92,255,.1)}
.sys__badge--warn{color:#ffd08a;border-color:rgba(255,181,69,.28);background:rgba(255,181,69,.07)}
.sys__desc{
  color:var(--txt-2);font-size:clamp(.76rem,1.05vw,.88rem);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.sys__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.sys__tags i{
  font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.6rem;
  padding:4px 8px;border-radius:8px;white-space:nowrap;
  color:var(--txt-2);background:rgba(255,255,255,.045);border:1px solid var(--line);
}

/* foot */
.sys__foot{
  flex:none;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:clamp(10px,1.6vh,16px);padding-top:clamp(10px,1.5vh,14px);
  border-top:1px solid var(--line);
}
.sys__cta{display:flex;align-items:center;gap:9px;font-size:.84rem;color:var(--txt)}
.sys__cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:var(--mid)}
.sys:hover .sys__cta{color:#fff}
.sys:hover .sys__cta svg{transform:translateX(4px);stroke:var(--c2)}
.sys--pending .sys__cta{color:var(--txt-3)}
.sys--pending:hover .sys__cta{color:var(--warn)}

/* ─────────── 6. TOAST ─────────── */

/* ── кружок вместо курсора ──
   Обычный DOM-элемент, который двигается только transform:
   ни canvas, ни перерисовки, ни градиента в кадре. Класс `cursor-on`
   ставит скрипт — если он не запустился, курсор остаётся обычным. */
.cursor-ball{position:fixed;left:0;top:0;width:0;height:0;z-index:99;pointer-events:none;will-change:transform}
.cursor-ball i{
  position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #ffffff 0%, #cdbaff 46%, var(--accent) 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.22),
             0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent),
             0 0 30px 6px color-mix(in srgb, var(--accent) 26%, transparent);
  opacity:0;transform:scale(var(--s,.4));
  transition:opacity .22s var(--ease), transform .22s var(--ease);
}
.cursor-ball.is-on i{opacity:1}

/* системный курсор прячется только пока шар жив */
body.cursor-on,
body.cursor-on a,
body.cursor-on button{cursor:none}

/* ── toast ── */
.toast{
  position:fixed;left:50%;bottom:26px;z-index:120;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:12px 18px;border-radius:var(--r-pill);
  background:rgba(18,20,30,.94);border:1px solid var(--line-2);
  box-shadow:0 20px 50px -20px rgba(0,0,0,.9);
  font-size:.88rem;max-width:min(420px,92vw);text-align:center;
  transition:opacity var(--mid), transform var(--mid);
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ─────────── 7. RESPONSIVE ─────────── */
/* на узких карточках прячем теги, чтобы ряд из 4 всё ещё влезал без прокрутки */
@media (max-width:1240px){
  .sys__tags{display:none}
}
/* ниже — возвращаем обычную прокрутку */
@media (max-width:960px),(max-height:560px){
  body{height:auto;min-height:100dvh;overflow:auto}
  main{min-height:auto}
  .systems{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sys{height:auto;min-height:230px;justify-content:flex-start}
  .sys__body{margin-top:22px}
  .sys__tags{display:flex}
}
@media (max-width:640px){
  .brand__text em{display:none}
  .systems{grid-template-columns:1fr}
  .sys{min-height:0}
  .sys__orb{width:50px;height:50px}
  .hero__title{font-size:clamp(1.5rem,7vw,2rem)}
  .topbar__right{gap:12px}
  .status{display:none}
}

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