/* =========================================================================
   НеКрутойПроект · Дизайн-система · theme.css
   Токены (светлая + тёмная тема), база, типографика, фон, утилиты.
   Подключать ПЕРВЫМ, затем components.css, затем components.js.
   ========================================================================= */

/* Шрифты: Unbounded (заголовки), Inter (текст), JetBrains Mono (моно).
   Для скорости страница может дополнительно подключить тот же URL через
   <link rel="preconnect"> + <link rel="stylesheet"> в <head> — браузер
   не скачает его дважды. */
@import url("https://fonts.googleapis.com/css2?family=Unbounded:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap&subset=cyrillic");

/* =========================================================
   ТОКЕНЫ. По умолчанию — светлая тема; тёмная — через
   prefers-color-scheme (если не выбрана светлая) и data-theme="dark".
   Атрибут data-theme можно поставить и на любой блок внутри страницы —
   тогда тема действует только внутри него (так сделана палитра витрины).
   ========================================================= */
:root,
[data-theme="light"]{
  color-scheme:light;
  /* фон и поверхности */
  --bg-0:#F3F6FC;
  --bg-1:#EAF0FA;
  --bg-2:#FFFFFF;
  /* текст */
  --ink:#0E1630;
  --ink-2:#3E4A6B;
  --ink-3:#5C6788;
  /* акценты */
  --cyan:#0891B2;
  --violet:#6D5DF6;
  --green:#0A8754;
  --amber:#B45309;
  --red:#D61F45;
  --cyan-ink:#0E7490;
  --violet-ink:#5747E6;
  /* акценты как RGB — для rgba(var(--c-rgb),.12) */
  --c-rgb:8,145,178;
  --v-rgb:109,93,246;
  --g-rgb:10,135,84;
  --a-rgb:217,119,6;
  --r-rgb:214,31,69;
  /* линии */
  --line:rgba(20,40,100,.11);
  --line-2:rgba(20,40,100,.19);
  /* градиенты и кнопки */
  --grad:linear-gradient(120deg,#0891B2,#6D5DF6);
  --btn-grad:linear-gradient(120deg,#0E7490,#6D5DF6);
  --btn-ink:#FFFFFF;
  --btn-shadow:0 12px 26px -12px rgba(109,93,246,.65),0 0 0 1px rgba(255,255,255,.18) inset;
  --btn-shadow-h:0 18px 34px -12px rgba(109,93,246,.7),0 0 0 1px rgba(255,255,255,.3) inset;
  /* стекло и поверхности */
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,255,255,.68));
  --glass-border:rgba(20,40,100,.10);
  --glass-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 26px 50px -30px rgba(40,60,150,.32),0 2px 8px -3px rgba(40,60,150,.08);
  --surface:rgba(255,255,255,.75);
  --surface-2:rgba(20,40,100,.04);
  --header-bg:rgba(255,255,255,.74);
  --menu-bg:rgba(255,255,255,.97);
  --panel-bg:rgba(250,252,255,.97);
  --badge-bg:rgba(255,255,255,.9);
  --input-bg:#FFFFFF;
  --placeholder:#8590AD;
  /* фон страницы: сетка и свечения */
  --grid-line:rgba(30,50,120,.055);
  --tint-1:rgba(109,93,246,.13);
  --tint-2:rgba(8,145,178,.10);
  /* свечения точек и линий */
  --glow-c:0 3px 10px -2px rgba(8,145,178,.5);
  --glow-v:0 3px 10px -2px rgba(109,93,246,.5);
  --glow-g:0 2px 6px -1px rgba(10,135,84,.5);
  --glow-a:0 2px 8px -1px rgba(217,119,6,.5);
  --drop-c:drop-shadow(0 2px 3px rgba(8,145,178,.55));
  /* орбита и SVG-схемы */
  --node-fill:#FFFFFF;
  --node-stroke:rgba(20,40,100,.16);
  --ring:rgba(20,40,100,.14);
  --ring-dash:rgba(8,145,178,.45);
  --core-a:#FFFFFF;
  --core-b:#E4E9FA;
  --halo-op:.22;
  --orbit-halo:radial-gradient(circle,rgba(109,93,246,.16),rgba(8,145,178,.07) 45%,transparent 70%);
  --ph-bg:radial-gradient(circle at 30% 25%,#FFFFFF,#E1E7F7 72%);
  --ph-shadow:0 18px 40px -18px rgba(109,93,246,.45),0 0 0 1px rgba(255,255,255,.9) inset;
  --stage-bg:rgba(236,241,251,.85);
  --svg-box:rgba(20,40,100,.035);
  --svg-stroke:rgba(20,40,100,.22);
  --svg-bar:rgba(20,40,100,.14);
  /* крупные тени */
  --screen-shadow:0 34px 70px -32px rgba(20,30,80,.55),0 14px 40px -24px rgba(109,93,246,.45);
  --plan-glow:0 30px 70px -30px rgba(109,93,246,.5),0 10px 30px -18px rgba(8,145,178,.35);
  --feed-alt:rgba(20,40,100,.035);
  /* иконки переключателя темы */
  --sun-display:none;
  --moon-display:block;

  /* ---- не зависят от темы ---- */
  --radius:20px;
  --font-h:"Unbounded",system-ui,sans-serif;
  --font-b:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-m:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --max:1200px;
  --gut:clamp(16px,4vw,40px);

  /* отступы (шкала 4 px) */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;
  --sp-7:32px;--sp-8:40px;--sp-9:48px;--sp-10:64px;
  --section-y:clamp(72px,10vw,128px);
  --header-offset:84px;
  /* радиусы */
  --r-xs:6px;--r-sm:8px;--r-md:12px;--r-lg:14px;--r-xl:16px;--r-2xl:18px;--r-pill:999px;
  /* размеры типографики */
  --fs-h1:clamp(30px,4.5vw,56px);
  --fs-h2:clamp(25px,3.5vw,44px);
  --fs-lead:clamp(16px,1.4vw,18px);
  /* тени, одинаковые в обеих темах */
  --shadow-pop:0 20px 40px -18px rgba(0,0,0,.5);
  --shadow-menu:0 30px 60px -30px rgba(0,0,0,.5);
  /* движение */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-strike:cubic-bezier(.6,0,.2,1);
  /* слои */
  --z-header:50;--z-badge:60;--z-hint:69;--z-fab:70;--z-panel:71;--z-toast:90;
  /* Брейкпоинты (в media-запросах переменные не работают, поэтому — справочно):
     1240px — меню шапки в бургер; 1120px — сетки; 960px — колонки в одну; 620px — телефон; 400px — узкий телефон */
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg-0:#070B1A;--bg-1:#0E1530;--bg-2:#141D3F;
    --ink:#E8ECFA;--ink-2:#A9B2D6;--ink-3:#7480AA;
    --cyan:#3DD9F5;--violet:#8B7CFF;--green:#3EE08F;--amber:#FFB547;--red:#FF6B7D;
    --cyan-ink:#3DD9F5;--violet-ink:#B9AFFF;
    --c-rgb:61,217,245;--v-rgb:139,124,255;--g-rgb:62,224,143;--a-rgb:255,181,71;--r-rgb:255,107,125;
    --line:rgba(190,205,255,.12);--line-2:rgba(190,205,255,.22);
    --grad:linear-gradient(120deg,#3DD9F5,#8B7CFF);
    --btn-grad:linear-gradient(120deg,#46E0F8,#8B7CFF);--btn-ink:#06102A;
    --btn-shadow:0 10px 30px -10px rgba(61,217,245,.55),0 0 0 1px rgba(255,255,255,.15) inset;
    --btn-shadow-h:0 16px 40px -12px rgba(61,217,245,.7),0 0 0 1px rgba(255,255,255,.25) inset;
    --glass-bg:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
    --glass-border:rgba(190,205,255,.12);
    --glass-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(0,0,0,.6);
    --surface:rgba(255,255,255,.035);--surface-2:rgba(255,255,255,.06);
    --header-bg:rgba(10,15,36,.62);--menu-bg:rgba(10,15,36,.96);--panel-bg:rgba(11,16,38,.97);--badge-bg:rgba(7,11,26,.82);
    --input-bg:rgba(5,9,24,.55);--placeholder:#5D678F;
    --grid-line:rgba(140,160,255,.045);--tint-1:rgba(139,124,255,.18);--tint-2:rgba(61,217,245,.10);
    --glow-c:0 0 12px rgba(61,217,245,.6);--glow-v:0 0 12px rgba(139,124,255,.6);--glow-g:0 0 8px rgba(62,224,143,.8);--glow-a:0 0 10px rgba(255,181,71,.6);
    --drop-c:drop-shadow(0 0 6px #3DD9F5);
    --node-fill:rgba(16,24,56,.85);--node-stroke:rgba(180,200,255,.28);--ring:rgba(170,190,255,.16);--ring-dash:rgba(61,217,245,.35);
    --core-a:#2A3A7A;--core-b:#0B1230;--halo-op:.35;
    --orbit-halo:radial-gradient(circle,rgba(139,124,255,.28),rgba(61,217,245,.08) 45%,transparent 70%);
    --ph-bg:radial-gradient(circle at 30% 25%,#26336b,#0E1530 70%);--ph-shadow:0 0 60px rgba(139,124,255,.25) inset;
    --stage-bg:rgba(5,9,24,.6);--svg-box:rgba(255,255,255,.04);--svg-stroke:rgba(180,200,255,.3);--svg-bar:rgba(255,255,255,.14);
    --screen-shadow:0 0 0 1px rgba(61,217,245,.05),0 40px 90px -30px rgba(0,0,0,.85),0 0 90px -30px rgba(61,217,245,.45);
    --plan-glow:0 0 0 1px rgba(61,217,245,.18),0 30px 80px -30px rgba(61,217,245,.45),0 0 60px -20px rgba(139,124,255,.35);
    --feed-alt:rgba(255,255,255,.025);
    --sun-display:block;--moon-display:none;
  }
}
:root[data-theme="dark"],
[data-theme="dark"]{
  color-scheme:dark;
  --bg-0:#070B1A;--bg-1:#0E1530;--bg-2:#141D3F;
  --ink:#E8ECFA;--ink-2:#A9B2D6;--ink-3:#7480AA;
  --cyan:#3DD9F5;--violet:#8B7CFF;--green:#3EE08F;--amber:#FFB547;--red:#FF6B7D;
  --cyan-ink:#3DD9F5;--violet-ink:#B9AFFF;
  --c-rgb:61,217,245;--v-rgb:139,124,255;--g-rgb:62,224,143;--a-rgb:255,181,71;--r-rgb:255,107,125;
  --line:rgba(190,205,255,.12);--line-2:rgba(190,205,255,.22);
  --grad:linear-gradient(120deg,#3DD9F5,#8B7CFF);
  --btn-grad:linear-gradient(120deg,#46E0F8,#8B7CFF);--btn-ink:#06102A;
  --btn-shadow:0 10px 30px -10px rgba(61,217,245,.55),0 0 0 1px rgba(255,255,255,.15) inset;
  --btn-shadow-h:0 16px 40px -12px rgba(61,217,245,.7),0 0 0 1px rgba(255,255,255,.25) inset;
  --glass-bg:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  --glass-border:rgba(190,205,255,.12);
  --glass-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(0,0,0,.6);
  --surface:rgba(255,255,255,.035);--surface-2:rgba(255,255,255,.06);
  --header-bg:rgba(10,15,36,.62);--menu-bg:rgba(10,15,36,.96);--panel-bg:rgba(11,16,38,.97);--badge-bg:rgba(7,11,26,.82);
  --input-bg:rgba(5,9,24,.55);--placeholder:#5D678F;
  --grid-line:rgba(140,160,255,.045);--tint-1:rgba(139,124,255,.18);--tint-2:rgba(61,217,245,.10);
  --glow-c:0 0 12px rgba(61,217,245,.6);--glow-v:0 0 12px rgba(139,124,255,.6);--glow-g:0 0 8px rgba(62,224,143,.8);--glow-a:0 0 10px rgba(255,181,71,.6);
  --drop-c:drop-shadow(0 0 6px #3DD9F5);
  --node-fill:rgba(16,24,56,.85);--node-stroke:rgba(180,200,255,.28);--ring:rgba(170,190,255,.16);--ring-dash:rgba(61,217,245,.35);
  --core-a:#2A3A7A;--core-b:#0B1230;--halo-op:.35;
  --orbit-halo:radial-gradient(circle,rgba(139,124,255,.28),rgba(61,217,245,.08) 45%,transparent 70%);
  --ph-bg:radial-gradient(circle at 30% 25%,#26336b,#0E1530 70%);--ph-shadow:0 0 60px rgba(139,124,255,.25) inset;
  --stage-bg:rgba(5,9,24,.6);--svg-box:rgba(255,255,255,.04);--svg-stroke:rgba(180,200,255,.3);--svg-bar:rgba(255,255,255,.14);
  --screen-shadow:0 0 0 1px rgba(61,217,245,.05),0 40px 90px -30px rgba(0,0,0,.85),0 0 90px -30px rgba(61,217,245,.45);
  --plan-glow:0 0 0 1px rgba(61,217,245,.18),0 30px 80px -30px rgba(61,217,245,.45),0 0 60px -20px rgba(139,124,255,.35);
  --feed-alt:rgba(255,255,255,.025);
  --sun-display:block;--moon-display:none;
}
/* Блок с собственной темой внутри страницы: перекрашиваем текст и фон */
[data-theme]:not(:root){color:var(--ink);background-color:var(--bg-0)}

/* «Экраны» (терминал, новый мини-сайт, таймлапс) всегда тёмные — в обеих темах */
.screen{
  --cyan:#3DD9F5;--violet:#8B7CFF;--green:#3EE08F;--amber:#FFB547;--red:#FF6B7D;--cyan-ink:#3DD9F5;--violet-ink:#B9AFFF;
  --ink:#E8ECFA;--ink-2:#A9B2D6;--ink-3:#6E78A3;
  --c-rgb:61,217,245;--v-rgb:139,124,255;--g-rgb:62,224,143;
  --line:rgba(190,205,255,.12);--line-2:rgba(190,205,255,.22);
  --grad:linear-gradient(120deg,#3DD9F5,#8B7CFF);
  color:var(--ink);color-scheme:dark;
}

/* =========================================================
   БАЗА: сброс, фон страницы с сеткой и свечениями, фокус
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;color:var(--ink);font:400 16px/1.6 var(--font-b);
  background-color:var(--bg-0);
  background-image:
    radial-gradient(1100px 700px at 85% -10%,var(--tint-1),transparent 60%),
    radial-gradient(900px 600px at -10% 20%,var(--tint-2),transparent 60%),
    linear-gradient(180deg,var(--bg-0) 0%,var(--bg-1) 45%,var(--bg-0) 100%);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
@supports (overflow:clip){body{overflow-x:clip}}
/* сетка 56 px, гаснущая книзу */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 75%);
}
main,header,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:6px}

/* =========================================================
   РАЗМЕТКА: контейнер, секции, простые сетки
   ========================================================= */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
section{padding:var(--section-y) 0;scroll-margin-top:var(--header-offset)}
/* Универсальные сетки для новых макетов: схлопываются в одну колонку на 960 px */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:start}
.cols-2,.cols-3,.cols-4{display:grid;gap:16px}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){
  .split{grid-template-columns:1fr}
  .cols-3,.cols-4{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
}

/* =========================================================
   ТИПОГРАФИКА
   ========================================================= */
.h1{font:600 var(--fs-h1)/1.08 var(--font-h);letter-spacing:-.02em;margin:22px 0 22px;text-wrap:balance}
.h2{font:600 clamp(25px,3.5vw,44px)/1.14 var(--font-h);letter-spacing:-.01em;margin:16px 0 16px;text-wrap:balance}
.h3{font:600 18px/1.3 var(--font-h);margin:0 0 10px}
.lead{color:var(--ink-2);font-size:clamp(16px,1.4vw,18px);max-width:660px;margin:0}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:500 12px/1.2 var(--font-m);text-transform:uppercase;letter-spacing:.14em;color:var(--cyan-ink)}
.eyebrow::before{content:"";width:18px;height:1px;background:currentColor;flex:none}
.label-sm{font:500 11px/1 var(--font-m);color:var(--ink-3);text-transform:uppercase;letter-spacing:.12em;margin:0 0 12px}
.mono{font-family:var(--font-m);letter-spacing:.02em}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* =========================================================
   УТИЛИТЫ
   ========================================================= */
/* плейсхолдер «[уточняется]» для ещё не известных данных */
.ph-mark{font-family:var(--font-m);font-size:.92em;padding:1px 6px;border-radius:6px;background:rgba(var(--a-rgb),.12);color:var(--amber);border:1px dashed rgba(var(--a-rgb),.45);white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* стопы SVG-градиентов из токенов темы: <stop class="sc"/><stop offset="1" class="sv"/> */
.sc{stop-color:var(--cyan)}.sv{stop-color:var(--violet)}.ca{stop-color:var(--core-a)}.cb{stop-color:var(--core-b)}
/* заливки SVG из токенов темы */
.pc{fill:var(--cyan)}.pv{fill:var(--violet)}
.sv-g{fill:var(--green)}.sv-c{fill:var(--cyan)}.sv-r{fill:var(--red)}.sv-a{fill:var(--amber)}
.sv-gt{fill:var(--green)}
/* медленное вращение SVG-групп (орбиты, кольца портрета) */
.spin{transform-box:fill-box;transform-origin:center;animation:spin 60s linear infinite}
.spin.rev{animation-duration:90s;animation-direction:reverse}
.spin.fast{animation-duration:26s}
@keyframes spin{to{transform:rotate(360deg)}}

/* =========================================================
   ПОЯВЛЕНИЕ ПРИ ПРОКРУТКЕ: class="reveal" (класс .js ставит components.js,
   класс .in — наблюдатель видимости; соседние .reveal идут с задержкой 80 мс)
   ========================================================= */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.js .reveal.in{opacity:1;transform:none}

/* =========================================================
   УМЕНЬШЕНИЕ ДВИЖЕНИЯ (поправки отдельных компонентов — в components.css)
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
}