/* ============================================================
   NODES — base: переменные, reset, типографика, кнопки, ссылки,
   starfield, side-index, общая анимация
   ============================================================ */

:root{
  --ink:#000000;
  --carbon:#141414;
  --edge:#2A2A2A;
  --edge-lit:#3A3A3A;
  --edge-dim:#1C1C1C;
  --steel:#8C8C8C;
  --bone:#ECEAE4;
  --signal:#6FA8B8;
  --signal-deep:#2D6475;
  --m:24px;
  --max:1440px;
  --header-h:80px;
  --t-press:80ms;
  --t-state:180ms;
  --t-expand:320ms;
  --t-settle:420ms;
  --ease-settle:cubic-bezier(0.2,0,0,1);
}
@media(min-width:768px){ :root{ --m:56px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:'Anybody',ui-sans-serif,system-ui,sans-serif;
  font-variation-settings:'wdth' 100;
  font-weight:370;
  font-size:18px;
  line-height:28px;
  letter-spacing:0.005em;
  text-wrap:pretty;
}
::selection{ background:var(--signal); color:var(--ink); }
#starfield{ position:fixed; inset:0; z-index:-1; width:100%; height:100%; display:block; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; background:none; border:none; color:inherit; cursor:pointer; padding:0; }
input,textarea{ font-family:inherit; background:none; color:var(--bone); }

.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--m); }

h1,h2,h3,h4{ margin:0; font-weight:400; font-variation-settings:'wdth' 100; }
p{ margin:0; }

.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;
}

.skip-link{
  position:absolute; left:var(--m); top:-60px;
  background:var(--bone); color:var(--ink); padding:10px 18px;
  z-index:200; transition:none;
}
.skip-link:focus{ top:16px; }

.w-expanded{ font-variation-settings:'wdth' 150; }
.w-layer{ font-variation-settings:'wdth' 140; }
.w-standard{ font-variation-settings:'wdth' 100; }
.w-compressed{ font-variation-settings:'wdth' 62; font-variant-numeric:tabular-nums; }

h2{
  font-size:32px; line-height:36px; letter-spacing:-0.015em; text-wrap:balance;
}
@media(min-width:768px){
  h2{ font-size:clamp(36px,4.2vw,64px); line-height:2; }
}
h3{ font-size:24px; line-height:30px; font-weight:500; letter-spacing:-0.005em; }

abbr{ font-size:0.9em; letter-spacing:0.04em; text-decoration:none; font-variant-caps:normal; }

.content > section{ padding:120px 0; border-top:1px solid var(--edge); }
@media(min-width:768px){ .content > section{ padding:200px 0; } }
.content > section:first-of-type{ border-top:none; }

.eyebrow-num{
  display:block; margin-bottom:24px; color:var(--steel);
  font-size:14px; line-height:18px; letter-spacing:0.02em;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:14px 28px; font-size:16px; line-height:20px; font-weight:500;
  font-variation-settings:'wdth' 100; border-radius:0; cursor:pointer;
}
.btn-primary{ position:relative; background:var(--bone); color:var(--ink); border:1px solid var(--bone); }
.btn-secondary{ background:transparent; color:var(--bone); border:1px solid var(--bone); }
.btn:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

.cta-row{ display:flex; gap:16px 28px; flex-wrap:wrap; align-items:center; margin-top:40px; }

/* ===== Links ===== */
.link{ border-bottom:1px dashed var(--steel); padding-bottom:2px; transition:border-color 120ms linear; }
.link:hover,.link:focus-visible{ border-bottom-style:solid; border-color:var(--bone); }
.link-out{ color:var(--signal); border-bottom-color:var(--signal); }
.link:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; }

/* Невидимые зоны, куда стягиваются «звёзды» starfield */
.star-zone{ display:none; pointer-events:none; }
@media(min-width:768px){
  .star-zone{ display:block; position:absolute; }
}

/* ===== Side index ===== */
.side-index{ display:none; }
@media(min-width:1024px){
  .side-index{
    display:flex; flex-direction:column; align-items:center; gap:16px;
    position:fixed; right:24px; top:50%; transform:translateY(-50%);
    z-index:90;
  }
  .side-index .line{ width:1px; flex:1; background:var(--edge); min-height:6px; }
  .side-index li{ display:flex; flex-direction:column; align-items:center; }
  .side-index a{
    font-size:14px; color:var(--steel); display:flex; align-items:center; gap:8px;
  }
  .side-index li.is-current a{ color:var(--bone); }
  .side-index .node{
    width:6px; height:6px; border-radius:50%; background:var(--edge);
  }
  .side-index li.is-current .node{ background:var(--signal); }
}
.side-index-track{
  position:absolute; left:2px; top:0; bottom:0; width:1px; background:var(--edge);
}
.side-index-fill{
  position:absolute; left:2px; top:0; width:1px; height:100%; background:var(--edge-lit);
  transform:scaleY(0); transform-origin:top;
}

/* ===== Текстовые страницы (блок Text, политика, 404) ===== */
.text-page .wrap{ max-width:calc(880px + 2 * var(--m)); }
.text-page__title{ font-size:40px; line-height:44px; margin-bottom:48px; }
@media(min-width:768px){ .text-page__title{ font-size:56px; line-height:60px; } }
.text-page__content{ color:var(--steel); }
.text-page__content > * + *{ margin-top:16px; }
.text-page__content h2{ font-size:28px; line-height:34px; color:var(--bone); margin-top:56px; }
.text-page__content h3{ font-size:20px; line-height:26px; color:var(--bone); margin-top:32px; }
.text-page__content ul,.text-page__content ol{ padding-left:20px; }
.text-page__content ul{ list-style:none; }
.text-page__content ul li::before{ content:"— "; color:var(--edge-lit); margin-left:-20px; }
.text-page__content li + li{ margin-top:8px; }
.text-page__content strong{ color:var(--bone); font-weight:500; }
.text-page__content a{ color:var(--bone); border-bottom:1px dashed var(--steel); }
.text-page__content a:hover{ border-bottom-style:solid; border-color:var(--bone); }

/* ============================================================
   MOTION — всё под html.motion-ready (класс ставится до отрисовки
   и пропускается при prefers-reduced-motion)
   ============================================================ */
.motion-ready{ scroll-behavior:smooth; }

.motion-ready .side-index{
  opacity:0;
  transition:opacity 500ms var(--ease-settle);
}
.motion-ready .side-index.is-revealed{ opacity:1; }
.motion-ready .side-index a{ transition:color var(--t-state) linear; }
.motion-ready .side-index .node{ transition:background var(--t-state) linear; }
.motion-ready .side-index-fill{ transition:transform 80ms linear; }

html.intro-lock,html.intro-lock body{ overflow:hidden; height:100%; }

/* ----- Buttons: primary hover trace + press ----- */
.trace-edge{
  position:absolute; background:var(--signal); pointer-events:none; opacity:0;
}
.motion-ready .trace-edge{ transition:opacity 120ms linear; }
.trace-top,.trace-bottom{ height:1px; left:0; right:0; transform:scaleX(0); }
.trace-left,.trace-right{ width:1px; top:0; bottom:0; transform:scaleY(0); }
.trace-top{ top:-1px; transform-origin:left; }
.trace-right{ right:-1px; transform-origin:top; }
.trace-bottom{ bottom:-1px; transform-origin:right; }
.trace-left{ left:-1px; transform-origin:bottom; }
.motion-ready .trace-top,.motion-ready .trace-bottom{ transition:opacity 120ms linear, transform 60ms linear; }
.motion-ready .trace-left,.motion-ready .trace-right{ transition:opacity 120ms linear, transform 60ms linear; }
.motion-ready .btn-primary:hover .trace-edge,
.motion-ready .btn-primary:focus-visible .trace-edge{ opacity:1; transform:scale(1); }
.motion-ready .btn-primary:hover .trace-top,.motion-ready .btn-primary:focus-visible .trace-top{ transition-delay:0ms; }
.motion-ready .btn-primary:hover .trace-right,.motion-ready .btn-primary:focus-visible .trace-right{ transition-delay:60ms; }
.motion-ready .btn-primary:hover .trace-bottom,.motion-ready .btn-primary:focus-visible .trace-bottom{ transition-delay:120ms; }
.motion-ready .btn-primary:hover .trace-left,.motion-ready .btn-primary:focus-visible .trace-left{ transition-delay:180ms; }
.motion-ready .btn-primary:active{ background:#D8D6CF; transition:background var(--t-press) linear; }
.motion-ready .btn-primary[disabled]{ opacity:0.6; cursor:default; }
.motion-ready .btn-primary[disabled] .trace-edge{ display:none; }

.motion-ready .btn-secondary{ transition:border-color var(--t-state) linear; }
.motion-ready .btn-secondary:hover,.motion-ready .btn-secondary:focus-visible{ border-color:var(--signal); }

/* ----- Accordions (competencies) ----- */
.acc-line{
  position:absolute; left:-1px; top:0; width:1px; height:100%;
  background:var(--signal); transform:scaleY(0); transform-origin:top;
}

/* ----- Reduced motion ----- */
@media(prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}