/* ============================================================
   ФУНДАМЕНТ — токены МГТС Design System (Granat 2, blue rebrand)
   ============================================================ */
@font-face{font-family:'MTS Wide';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/MTSWide-Medium.woff2) format('woff2');}
@font-face{font-family:'MTS Wide';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/MTSWide-Bold.woff2) format('woff2');}
@font-face{font-family:'MTS Compact';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/MTSCompact-Regular.woff2) format('woff2');}
@font-face{font-family:'MTS Compact';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/MTSCompact-Medium.woff2) format('woff2');}
@font-face{font-family:'MTS Compact';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/MTSCompact-Bold.woff2) format('woff2');}
@font-face{font-family:'MTS Text';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/MTSText-Regular.woff2) format('woff2');}
@font-face{font-family:'MTS Text';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/MTSText-Medium.woff2) format('woff2');}

:root{
  /* Base palette */
  --granat-white:#ffffff; --granat-bg-grey:#f2f3f7; --granat-lower-grey:#e9ecf0;
  --granat-line-grey:#e2e5eb; --granat-grey-100:#d8dce5; --granat-grey-200:#bbc1c9;
  --granat-grey-400:#969fa8; --granat-grey-500:#8d969f; --granat-grey-600:#626c77;
  --granat-grey-800:#2c3135; --granat-graphite:#1d2023; --granat-near-white:#fafafa;
  /* МГТС brand blue */
  --mgts-blue-50:#e6f4fc; --mgts-blue-100:#b3ddf5; --mgts-blue-300:#45b6fc;
  --mgts-blue-500:#008ae0; --mgts-blue-600:#0072bd; --mgts-blue-700:#005c99;
  /* Semantic accents */
  --granat-green:#26cd58; --granat-yellow:#fac031; --granat-orange:#f95721; --granat-violet:#7b61ff;
  /* Brand */
  --brand-blue:#008ae0;
  --color-brand:var(--mgts-blue-500); --color-brand-hover:var(--mgts-blue-600);
  --color-brand-active:var(--mgts-blue-700); --color-brand-subtle:var(--mgts-blue-50);
  /* Surfaces */
  --color-background-primary:var(--granat-white);
  --color-background-secondary:var(--granat-bg-grey);
  --color-background-lower:var(--granat-lower-grey);
  --color-background-inverted:var(--granat-graphite);
  /* Text */
  --color-text-primary:var(--granat-graphite); --color-text-secondary:var(--granat-grey-600);
  --color-text-tertiary:var(--granat-grey-400); --color-text-inverted:var(--granat-near-white);
  --color-text-brand:var(--mgts-blue-500);
  /* Icons */
  --color-icons-primary:var(--granat-graphite); --color-icons-secondary:var(--granat-grey-500);
  --color-icons-tertiary:var(--granat-grey-400); --color-icons-brand:var(--mgts-blue-500);
  /* Lines */
  --color-control-stroke:var(--granat-grey-400); --color-control-stroke-hover:var(--granat-grey-600);
  --color-line:var(--granat-line-grey);
  /* Accent bg */
  --color-accent-positive:var(--granat-green); --color-accent-negative:var(--granat-orange);
  --color-accent-positive-bg:#e3f9ea; --color-accent-negative-bg:#ffe5dc;
  --color-accent-brand-bg:var(--mgts-blue-50);
  --color-overlay:rgba(29,32,35,.5);
  /* Type */
  --font-wide:'MTS Wide','Segoe UI',system-ui,sans-serif;
  --font-compact:'MTS Compact','Segoe UI',system-ui,sans-serif;
  --font-sans:'MTS Text','Segoe UI',system-ui,sans-serif;   /* в комплекте шрифтов МТС v2 нет MTS Sans — абзацы набраны MTS Text */
  --font-text:'MTS Text','Segoe UI',system-ui,sans-serif;
  --fw-regular:400; --fw-medium:500; --fw-bold:700;
  /* Spacing */
  --space-2:2px; --space-4:4px; --space-6:6px; --space-8:8px; --space-12:12px;
  --space-16:16px; --space-20:20px; --space-24:24px; --space-32:32px;
  --space-40:40px; --space-48:48px; --space-64:64px;
  /* Radii */
  --radius-s:8px; --radius-m:12px; --radius-l:32px; --radius-xl:80px;
  /* Elevation */
  --shadow-low:0 2px 8px rgba(29,32,35,.08),0 0 1px rgba(29,32,35,.12);
  --shadow-middle:0 4px 16px rgba(29,32,35,.12),0 0 1px rgba(29,32,35,.12);
  --shadow-high:0 12px 40px rgba(29,32,35,.18),0 0 1px rgba(29,32,35,.12);
  /* Controls */
  --control-xs:28px; --control-s:36px; --control-m:44px; --control-l:52px;
  /* Motion */
  --ease-standard:cubic-bezier(.4,0,.2,1); --duration-fast:120ms; --duration-base:200ms;
  /* Layout */
  --header-h:72px; --container:1200px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
body{
  margin:0;background:var(--color-background-primary);color:var(--color-text-primary);
  font-family:var(--font-compact);font-size:15px;line-height:20px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:var(--color-text-brand);text-decoration:none}
a:hover{color:var(--color-brand-hover)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px;border-radius:var(--radius-s)}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-32)}

/* ============================================================
   ТИПОГРАФИКА (landing-масштаб на базе шкалы Granat)
   ============================================================ */
.display{font-family:var(--font-wide);font-weight:700;font-size:68px;line-height:70px;letter-spacing:-.015em;margin:0}
.display__kicker{
  display:block;font-family:var(--font-compact);font-weight:500;font-size:24px;line-height:28px;
  letter-spacing:0;color:var(--granat-grey-200);margin-bottom:var(--space-8);
}
.h1{font-family:var(--font-wide);font-weight:700;font-size:40px;line-height:46px;letter-spacing:-.005em;margin:0}
.lead{font-family:var(--font-sans);font-weight:400;font-size:19px;line-height:28px;color:var(--color-text-secondary);margin:0}
.body{font-family:var(--font-sans);font-size:16px;line-height:24px;color:var(--color-text-secondary);margin:0}
.caption{font-family:var(--font-text);font-size:12px;line-height:16px;color:var(--color-text-tertiary);margin:0}
.eyebrow{
  font-family:var(--font-wide);font-weight:500;font-size:12px;line-height:16px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-brand);margin:0;
}
.eyebrow--onDark{color:var(--mgts-blue-300)}

/* акцентный абзац-заявление */
.statement{
  position:relative;margin:0;padding-left:var(--space-24);
  font-family:var(--font-wide);font-weight:500;font-size:24px;line-height:34px;
  letter-spacing:-.005em;color:var(--color-text-primary);
}
.statement::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:var(--radius-xl);background:var(--color-brand);
}
@media (max-width:600px){
  .statement{font-size:20px;line-height:29px;padding-left:var(--space-16)}
}

/* ============================================================
   СЕКЦИИ
   ============================================================ */
.section{padding:136px 0}
.section--grey{background:var(--color-background-secondary)}
.section--dark{background:var(--color-background-inverted);color:var(--color-text-inverted)}
.section--dark .h1{color:var(--color-text-inverted)}
.section--dark .lead,.section--dark .body{color:var(--granat-grey-200)}
.section-head{max-width:760px;margin-bottom:var(--space-64)}
.section-head .h1{margin-top:var(--space-12)}
.section-head .lead{margin-top:var(--space-16)}

/* ============================================================
   КНОПКИ — Granat: primary blue / secondary outline / ghost
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);
  height:var(--control-m);padding:0 var(--space-24);border:1px solid transparent;
  border-radius:var(--radius-m);font-family:var(--font-compact);font-weight:500;font-size:15px;
  cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background var(--duration-fast) var(--ease-standard),
             border-color var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard),
             transform var(--duration-fast) var(--ease-standard);
}
.btn:active{transform:scale(.98)}
.btn--primary{background:var(--color-brand);color:#fff}
.btn--primary:hover{background:var(--color-brand-hover);color:#fff}
.btn--primary:active{background:var(--color-brand-active)}
.btn--secondary{background:transparent;border-color:var(--color-brand);color:var(--color-text-brand)}
.btn--secondary:hover{background:var(--color-brand-subtle);color:var(--color-brand-hover)}
.btn--onDark{background:transparent;border-color:rgba(255,255,255,.32);color:#fff}
.btn--onDark:hover{background:rgba(255,255,255,.08);border-color:#fff;color:#fff}
.btn--l{height:var(--control-l);padding:0 var(--space-32);font-size:17px}
.btn--block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.btn .ic{flex:none}

/* ---- Неоновые CTA в хиро ---- */
.hero__actions .btn{position:relative}
/* Диффузный ореол позади кнопки — проявляется при наведении и фокусе */
.hero__actions .btn::after{
  content:"";position:absolute;left:-26%;right:-26%;top:-130%;bottom:-130%;z-index:-1;
  pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(103,199,255,.95) 0%, rgba(69,182,252,.62) 30%,
    rgba(0,138,224,.30) 52%, rgba(0,138,224,.10) 68%, rgba(0,138,224,0) 84%);
  filter:blur(26px);
  opacity:0;transform:scale(.82);
  transition:opacity 240ms var(--ease-standard), transform 280ms var(--ease-standard);
}
.hero__actions .btn:hover::after, .hero__actions .btn:focus-visible::after{opacity:1;transform:scale(1)}
/* световой блик по верхней кромке */
.hero__actions .btn::before{
  content:"";position:absolute;left:18%;right:18%;top:0;height:1px;
  background:rgba(255,255,255,.65);opacity:.7;
}
.hero__actions .btn--primary{
  background:var(--color-brand);
  box-shadow:0 0 0 1px rgba(69,182,252,.55),
             0 0 22px rgba(0,138,224,.60),
             0 0 56px rgba(0,138,224,.32),
             inset 0 1px 0 rgba(255,255,255,.22);
  animation:ctaBreath 3.6s var(--ease-standard) 1.2s infinite;
}
.hero__actions .btn--primary:hover{
  background:var(--color-brand-hover);animation:none;
  box-shadow:0 0 0 1px rgba(179,221,245,.95),
             0 0 26px rgba(69,182,252,.75),
             0 0 64px rgba(0,138,224,.45),
             inset 0 0 0 1px rgba(255,255,255,.22),
             inset 0 1px 0 rgba(255,255,255,.34);
}
.hero__actions .btn--primary:active{background:var(--color-brand-active);animation:none}
@keyframes ctaBreath{
  0%,100%{box-shadow:0 0 0 1px rgba(69,182,252,.38), 0 0 14px rgba(0,138,224,.36), 0 0 34px rgba(0,138,224,.16), inset 0 1px 0 rgba(255,255,255,.22)}
  50%    {box-shadow:0 0 0 1px rgba(69,182,252,.58), 0 0 24px rgba(0,138,224,.58), 0 0 54px rgba(0,138,224,.30), inset 0 1px 0 rgba(255,255,255,.26)}
}
.hero__actions .btn--onDark{
  background:rgba(0,138,224,.06);border-color:rgba(69,182,252,.50);color:#fff;
  box-shadow:0 0 18px rgba(0,138,224,.18), inset 0 0 18px rgba(0,138,224,.14);
  text-shadow:0 0 12px rgba(69,182,252,.55);
}
.hero__actions .btn--onDark::before{background:rgba(69,182,252,.7);opacity:.5}
.hero__actions .btn--onDark:hover{
  background:rgba(0,138,224,.14);border-color:rgba(179,221,245,.95);color:#fff;
  box-shadow:0 0 0 1px rgba(69,182,252,.45),
             0 0 26px rgba(69,182,252,.42),
             inset 0 0 26px rgba(0,138,224,.24);
}

/* ============================================================
   ШАПКА — sticky, CTA следует за пользователем
   ============================================================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:60;height:var(--header-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--duration-base) var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard);
}
.header.is-stuck{
  background:rgba(18,21,24,.93);backdrop-filter:blur(16px);
  border-bottom-color:rgba(0,138,224,.28);
  box-shadow:0 8px 32px rgba(0,0,0,.45);
}
/* световая линия по нижней кромке — как у карточки таймера */
.header::after{
  content:"";position:absolute;left:22%;right:22%;bottom:-1px;height:1px;
  background:var(--mgts-blue-300);opacity:0;
  transition:opacity var(--duration-base) var(--ease-standard);
}
.header.is-stuck::after{opacity:.5}
.header__inner{display:flex;align-items:center;gap:var(--space-24);height:100%}
.logo{display:inline-flex;align-items:center;gap:var(--space-12);flex:none}
/* Фирменный знак МГТС: синяя плашка со словом «МГТС» в нижней части */
.logo{gap:var(--space-16)}
.logo__mark{display:block;width:44px;height:44px;flex:none}
.logo__mark .plate{fill:var(--color-brand)}
.logo__mark .word{fill:#fff}
.logo__lockup{
  display:flex;flex-direction:column;justify-content:center;
  padding-left:var(--space-16);border-left:1px solid rgba(255,255,255,.16);min-width:0;
}
.logo__champ{font-family:var(--font-compact);font-weight:400;font-size:12px;line-height:14px;color:var(--granat-grey-400)}
.logo__name{font-family:var(--font-wide);font-weight:700;font-size:17px;line-height:22px;color:#fff;white-space:nowrap}
.footer .logo__mark{width:36px;height:36px}
.nav{display:flex;align-items:center;gap:var(--space-2);margin-left:auto}
.nav__link{white-space:nowrap}
.nav__link{
  position:relative;padding:var(--space-8) 10px;border-radius:var(--radius-s);
  font-size:15px;font-weight:400;color:rgba(255,255,255,.66);
  transition:color var(--duration-fast) var(--ease-standard),background var(--duration-fast) var(--ease-standard);
}
.nav__link:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav__link.is-active{color:var(--mgts-blue-300);font-weight:500;text-shadow:0 0 14px rgba(69,182,252,.55)}
.nav__link.is-active::after{
  content:"";position:absolute;left:10px;right:10px;bottom:2px;height:1px;
  background:var(--mgts-blue-300);box-shadow:0 0 8px rgba(69,182,252,.9);
}
.header__cta{display:flex;align-items:center;gap:var(--space-12);flex:none}
.header__cta .btn--primary{
  position:relative;
  box-shadow:0 0 0 1px rgba(69,182,252,.42), 0 0 18px rgba(0,138,224,.40),
             inset 0 1px 0 rgba(255,255,255,.20);
}
.header__cta .btn--primary::after{
  content:"";position:absolute;left:-24%;right:-24%;top:-120%;bottom:-120%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,
    rgba(103,199,255,.9) 0%, rgba(69,182,252,.55) 32%, rgba(0,138,224,.22) 56%, rgba(0,138,224,0) 82%);
  filter:blur(22px);opacity:0;transform:scale(.84);
  transition:opacity 240ms var(--ease-standard), transform 280ms var(--ease-standard);
}
.header__cta .btn--primary:hover::after,
.header__cta .btn--primary:focus-visible::after{opacity:1;transform:scale(1)}
.header__cta .btn--primary:hover{
  background:var(--color-brand-hover);
  box-shadow:0 0 0 1px rgba(179,221,245,.95), 0 0 24px rgba(69,182,252,.65),
             inset 0 0 0 1px rgba(255,255,255,.22), inset 0 1px 0 rgba(255,255,255,.32);
}
.header__timer{
  display:none;align-items:baseline;gap:var(--space-6);padding:var(--space-6) var(--space-12);
  background:rgba(0,138,224,.14);border:1px solid rgba(69,182,252,.32);border-radius:var(--radius-s);
}
/* пилюля таймера — только когда меню свёрнуто в бургер: рядом с полным меню ей не хватает места */
@media (min-width:901px) and (max-width:1199px){.header__timer.is-visible{display:flex}}
.header__timer .v{font-family:var(--font-wide);font-weight:700;font-size:15px;color:#fff;line-height:1;text-shadow:0 0 12px rgba(69,182,252,.8)}
.header__timer .l{font-family:var(--font-text);font-size:11px;color:var(--granat-grey-400)}
.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-m);cursor:pointer;color:#fff}
.burger:hover{background:rgba(255,255,255,.10);border-color:rgba(69,182,252,.55)}

/* мобильное меню */
.mobmenu{
  position:fixed;inset:var(--header-h) 0 0;z-index:55;
  background:rgba(18,21,24,.97);backdrop-filter:blur(16px);
  padding:var(--space-24) var(--space-24) var(--space-40);overflow-y:auto;
  transform:translateY(-8px);opacity:0;visibility:hidden;
  transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard),visibility var(--duration-base);
}
.mobmenu.is-open{opacity:1;visibility:visible;transform:none}
.mobmenu a{
  display:block;padding:var(--space-16) 0;border-bottom:1px solid rgba(255,255,255,.12);
  font-size:17px;color:rgba(255,255,255,.82);
}
.mobmenu a:hover{color:#fff}
.mobmenu .btn{color:#fff;border-bottom:0}
.mobmenu .btn{margin-top:var(--space-24)}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;background:var(--color-background-inverted);color:var(--color-text-inverted);
  padding:calc(var(--header-h) + 88px) 0 88px;overflow:hidden;
}
.hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:var(--space-64);align-items:center}
.hero .display{color:#fff;margin-top:var(--space-16)}
.hero__lead{font-family:var(--font-sans);font-size:19px;line-height:28px;color:var(--granat-grey-200);margin:var(--space-24) 0 0;max-width:600px}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-12);margin-top:var(--space-32)}
.hero__facts{
  display:flex;flex-wrap:wrap;gap:var(--space-48);margin-top:var(--space-48);
  padding-top:var(--space-32);border-top:1px solid rgba(255,255,255,.12);
}
.fact__v{font-family:var(--font-wide);font-weight:700;font-size:22px;line-height:26px;color:#fff;white-space:nowrap}
.fact__v--accent{color:var(--mgts-blue-300);text-shadow:0 0 18px rgba(69,182,252,.55)}
.fact__l{font-family:var(--font-text);font-size:12px;line-height:16px;color:var(--granat-grey-400);margin-top:var(--space-4)}

/* сетевой мотив — «топология сети» */
.hero__net{position:absolute;top:0;right:0;bottom:0;width:640px;max-width:52%;z-index:1;pointer-events:none;opacity:.85}
/* шейдерный фон: включается только если WebGL доступен, иначе остаётся SVG-мотив */
.hero__shader{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:none;pointer-events:none}
.hero.has-shader .hero__shader{display:block}
.hero.has-shader .hero__net{display:none}
.net-line{stroke:var(--mgts-blue-500);stroke-width:1;fill:none;opacity:.4;
  stroke-dasharray:var(--dash,600);stroke-dashoffset:var(--dash,600);
  animation:draw 1400ms var(--ease-standard) forwards}
.net-node{fill:var(--mgts-blue-300);opacity:0;animation:pop 400ms var(--ease-standard) forwards}
.net-node--core{fill:var(--mgts-blue-500)}
.net-ring{fill:none;stroke:var(--mgts-blue-500);stroke-width:1;opacity:0;animation:pop 500ms var(--ease-standard) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1}}
/* запасной вариант тоже должен жить: медленный дрейф и пульсация узлов */
@keyframes netDrift{
  0%{transform:translate(0,0)}
  50%{transform:translate(-14px,10px)}
  100%{transform:translate(0,0)}
}
@keyframes netFlow{0%{opacity:.22}50%{opacity:.55}100%{opacity:.22}}
@keyframes netPulse{0%{opacity:.55;r:5}50%{opacity:1}100%{opacity:.55;r:5}}
.hero__net g{animation:netDrift 26s var(--ease-standard) 1.6s infinite}
.net-line{animation:draw 1400ms var(--ease-standard) forwards, netFlow 7s var(--ease-standard) 1.6s infinite}
.net-node{animation:pop 400ms var(--ease-standard) forwards, netPulse 4.5s var(--ease-standard) 1.6s infinite}
.net-node--core{animation:pop 400ms var(--ease-standard) forwards, netPulse 3s var(--ease-standard) 1.6s infinite}
/* каскад появления линий и узлов (вместо inline style — у МГТС строгий CSP) */
.n1{--dash:420;animation-delay:0ms,1.6s}
.n2{--dash:420;animation-delay:80ms,1.6s}
.n3{--dash:420;animation-delay:160ms,1.6s}
.n4{--dash:420;animation-delay:240ms,1.6s}
.n5{--dash:420;animation-delay:320ms,1.6s}
.n6{--dash:320;animation-delay:400ms,1.6s}
.n7{--dash:320;animation-delay:440ms,1.6s}
.n8{--dash:320;animation-delay:480ms,1.6s}
.n9{--dash:320;animation-delay:520ms,1.6s}
.n10{--dash:220;animation-delay:560ms,1.6s}
.n11{--dash:220;animation-delay:600ms,1.6s}
.net-p1{animation-delay:900ms,1.6s}
.net-p2{animation-delay:860ms,1.6s}
.net-p3{animation-delay:900ms,1.6s}
.net-p4{animation-delay:940ms,1.6s}
.net-p5{animation-delay:980ms,1.6s}
.net-p6{animation-delay:1020ms,1.6s}
.net-p7{animation-delay:1060ms,1.6s}
.net-p8{animation-delay:1100ms,1.6s}

/* таймер */
.timer{
  position:relative;z-index:2;background:rgba(20,23,26,.88);backdrop-filter:blur(16px);
  border:1px solid rgba(0,138,224,.38);border-radius:var(--radius-l);padding:var(--space-32);
  box-shadow:0 0 0 1px rgba(0,138,224,.10), 0 0 48px rgba(0,138,224,.20), var(--shadow-high);
}
.timer__label{display:flex;align-items:center;gap:var(--space-8);color:var(--granat-grey-200);font-size:14px}
.timer__label .ic{color:var(--mgts-blue-300);filter:drop-shadow(0 0 8px rgba(0,138,224,.9))}
/* тонкая световая линия по верхней кромке карточки */
.timer::before{
  content:"";position:absolute;left:15%;right:15%;top:-1px;height:1px;
  background:var(--mgts-blue-300);opacity:.55;
}
.timer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);margin-top:var(--space-20)}
.timer__cell{
  position:relative;background:rgba(0,0,0,.42);border:1px solid rgba(69,182,252,.20);
  border-radius:var(--radius-m);padding:var(--space-16) var(--space-8);text-align:center;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.timer__cell::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--color-brand);opacity:.35;
}
.timer__v{
  font-family:var(--font-wide);font-weight:700;font-size:32px;line-height:36px;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;
  text-shadow:0 0 16px rgba(0,138,224,.85), 0 0 40px rgba(0,138,224,.40);
}
.timer__u{
  font-family:var(--font-text);font-size:10px;line-height:14px;color:var(--granat-grey-500);
  margin-top:var(--space-6);text-transform:uppercase;letter-spacing:.12em;
}
/* пульс на ячейке секунд — синхронизируется из скрипта */
.timer__cell--sec.is-tick{border-color:rgba(69,182,252,.55)}
.timer__cell--sec.is-tick .timer__v{text-shadow:0 0 22px rgba(69,182,252,1), 0 0 52px rgba(0,138,224,.6)}
.timer__cell--sec, .timer__cell--sec .timer__v{transition:border-color 700ms var(--ease-standard), text-shadow 700ms var(--ease-standard)}

/* шкала окна приёма заявок */
.timer__progress{margin-top:var(--space-20)}
.timer__track{position:relative;height:4px;border-radius:var(--radius-xl);background:rgba(255,255,255,.10);overflow:hidden}
.timer__fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:var(--radius-xl);
  background:var(--color-brand);box-shadow:0 0 12px rgba(0,138,224,.9);
  transition:width var(--duration-base) var(--ease-standard)}
.timer__dates{display:flex;justify-content:space-between;margin-top:var(--space-8);
  font-family:var(--font-compact);font-size:13px;color:var(--granat-grey-200);font-variant-numeric:tabular-nums}

/* ============================================================
   КАРТОЧКИ
   ============================================================ */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-24)}

/* ---- Треки: тёмные карточки со свечением и раскрытием ---- */
.tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24)}
.track{
  position:relative;display:flex;flex-direction:column;justify-content:flex-start;
  padding:var(--space-32);margin:0;text-align:left;font:inherit;color:inherit;
  background:rgba(255,255,255,.028);
  border:1px solid rgba(69,182,252,.26);border-radius:var(--radius-l);
  overflow:hidden;
  transition:transform 340ms var(--ease-standard), border-color 240ms var(--ease-standard),
             box-shadow 340ms var(--ease-standard), background 240ms var(--ease-standard);
}
/* кометный след внутри карточки */
.track::before{
  content:"";position:absolute;right:-30%;top:-4%;width:150%;height:52%;pointer-events:none;
  background:radial-gradient(ellipse 62% 100% at 80% 50%,
    rgba(150,218,255,.95) 0%, rgba(69,182,252,.52) 20%,
    rgba(0,138,224,.26) 42%, rgba(0,138,224,.08) 64%, rgba(0,138,224,0) 82%);
  filter:blur(30px);
  transform:rotate(-20deg) scale(.86);transform-origin:78% 40%;
  opacity:.72;
  transition:opacity 340ms var(--ease-standard), transform 460ms var(--ease-standard);
}
/* иконка сверху, текст — от общей линии: заголовки и описания трёх карточек стоят вровень */
.track__ic{position:relative;z-index:1;display:block;margin-bottom:72px;color:var(--mgts-blue-300);opacity:.85}
.track__body{position:relative;z-index:1}
.track__num,.track__lead{margin:0}
.track__num{
  display:block;font-family:var(--font-wide);font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--granat-grey-400);
}
.track__lead{
  display:block;font-family:var(--font-compact);font-weight:500;font-size:15px;line-height:22px;
  color:var(--mgts-blue-300);margin-top:var(--space-6);
}
.track__title{
  display:block;font-family:var(--font-wide);font-weight:700;font-size:26px;line-height:30px;color:#fff;
  margin:var(--space-8) 0 0;letter-spacing:-.015em;
}
@media (min-width:901px){
  .track__num{display:block;min-height:32px}
  .track__title{min-height:60px}
  .track__lead{min-height:44px}
}
.track__desc{
  font-family:var(--font-sans);font-size:15px;line-height:22px;color:var(--granat-grey-200);
  margin:var(--space-16) 0 0;
}

/* состояние наведения / фокуса */
.track:hover, .track:focus-within{
  transform:scale(1.035);z-index:2;
  background:rgba(255,255,255,.05);
  border-color:rgba(179,221,245,.85);
  box-shadow:0 0 0 1px rgba(69,182,252,.35),
             0 0 34px rgba(0,138,224,.42),
             0 0 90px rgba(0,138,224,.26),
             0 24px 60px rgba(0,0,0,.5);
}
.track:hover::before, .track:focus-within::before{
  opacity:1;transform:rotate(-20deg) scale(1.06);
}
.track--d1{transition-delay:80ms}
.track--d2{transition-delay:160ms}

/* ============================================================
   КРИТЕРИИ И УСЛОВИЯ УЧАСТИЯ — компактные карточки
   ============================================================ */
.crit{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:var(--space-16)}
.crit__card{
  position:relative;background:var(--color-background-primary);
  border:1px solid var(--color-line);border-radius:var(--radius-m);
  padding:var(--space-24) var(--space-24) var(--space-20);overflow:hidden;
  transition:border-color var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard);
}
/* синяя световая кромка сверху */
.crit__card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--color-brand);opacity:.5;
  transition:opacity var(--duration-base) var(--ease-standard),
             box-shadow var(--duration-base) var(--ease-standard);
}
.crit__card:hover{border-color:rgba(0,138,224,.45);box-shadow:0 8px 24px rgba(0,138,224,.14)}
.crit__card:hover::before{opacity:1;box-shadow:0 0 14px rgba(0,138,224,.9)}
.crit__k{
  display:block;font-family:var(--font-text);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--color-text-tertiary);
}
.crit__v{
  font-family:var(--font-wide);font-weight:700;font-size:22px;line-height:28px;
  color:var(--color-text-primary);margin:var(--space-12) 0 0;letter-spacing:-.01em;
}
.crit__t{
  font-family:var(--font-sans);font-size:15px;line-height:22px;
  color:var(--color-text-secondary);margin:var(--space-12) 0 0;
}
.crit__t b{font-family:var(--font-compact);font-weight:500;color:var(--color-text-primary)}
/* список уровней обучения — буллиты в фирменном синем, текст выровнен по одной кромке */
.crit__list{list-style:none;margin:var(--space-12) 0 0;padding:0;display:grid;gap:var(--space-6)}
.crit__list li{
  position:relative;padding-left:var(--space-16);
  font-family:var(--font-sans);font-size:15px;line-height:22px;color:var(--color-text-secondary);
}
.crit__list li::before{
  content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;
  background:var(--color-brand);
}
.crit__note{
  font-family:var(--font-text);font-size:12px;line-height:18px;color:var(--color-text-tertiary);
  margin:var(--space-16) 0 0;
}
@media (max-width:900px){.crit{grid-template-columns:1fr}}

/* ============================================================
   ЭТАПЫ — тёмный таймлайн с изогнутой светящейся линией
   ============================================================ */
#stages{position:relative;overflow:hidden}
.tl{position:relative;margin-top:var(--space-48)}
/* изогнутая линия */
.tl__line{display:block;width:100%;height:130px}
.tl__base{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.5;vector-effect:non-scaling-stroke}
.tl__glow{
  fill:none;stroke:var(--mgts-blue-300);stroke-width:2;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(69,182,252,.95)) drop-shadow(0 0 18px rgba(0,138,224,.7));
  transition:stroke-dashoffset 520ms var(--ease-standard);
}
.tl__node{fill:#16191c;stroke:rgba(255,255,255,.35);stroke-width:1.5;vector-effect:non-scaling-stroke;
  transition:stroke 300ms var(--ease-standard), fill 300ms var(--ease-standard)}
.tl__node.is-lit{
  fill:var(--mgts-blue-300);stroke:var(--mgts-blue-300);
  filter:drop-shadow(0 0 8px rgba(69,182,252,1)) drop-shadow(0 0 20px rgba(0,138,224,.8));
}

/* карточки этапов */
.tl__stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-32);margin-top:var(--space-24)}
.tl__stage{
  cursor:default;
  transition:opacity 300ms var(--ease-standard), transform 300ms var(--ease-standard);
}
.tl.is-active .tl__stage{opacity:.42}
.tl.is-active .tl__stage.is-on{opacity:1;transform:translateY(-4px)}
.tl__badge{
  display:inline-flex;align-items:center;height:24px;padding:0 var(--space-12);
  border-radius:var(--radius-s);font-family:var(--font-text);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--granat-grey-400);
  border:1px solid rgba(255,255,255,.16);margin-bottom:var(--space-16);
  transition:color 300ms var(--ease-standard), border-color 300ms var(--ease-standard);
}
.tl__stage.is-on .tl__badge{color:var(--mgts-blue-300);border-color:rgba(69,182,252,.55)}
.tl__date{
  font-family:var(--font-wide);font-weight:700;font-size:26px;line-height:30px;color:#fff;
  transition:text-shadow 300ms var(--ease-standard), color 300ms var(--ease-standard);
}
.tl__stage.is-on .tl__date{color:var(--mgts-blue-300);text-shadow:0 0 22px rgba(69,182,252,.8)}
.tl__year{display:block;font-family:var(--font-compact);font-weight:400;font-size:14px;color:var(--granat-grey-500);margin-top:var(--space-4)}
.tl__title{font-family:var(--font-compact);font-weight:700;font-size:19px;line-height:25px;color:#fff;margin:var(--space-16) 0 var(--space-8)}
.tl__text{font-family:var(--font-sans);font-size:15px;line-height:22px;color:var(--granat-grey-200);margin:0}

/* вертикальный вариант на узких экранах */
@media (max-width:900px){
  .tl__line{display:none}
  .tl__stages{grid-template-columns:1fr;gap:0;margin-top:0}
  .tl__stage{position:relative;padding:0 0 var(--space-32) var(--space-32)}
  .tl__stage::before{
    content:"";position:absolute;left:5px;top:8px;bottom:-8px;width:1.5px;
    background:rgba(255,255,255,.16);
  }
  .tl__stage:last-child::before{display:none}
  .tl__stage::after{
    content:"";position:absolute;left:0;top:4px;width:12px;height:12px;border-radius:50%;
    background:var(--mgts-blue-300);box-shadow:0 0 10px rgba(69,182,252,.9);
  }
  .tl.is-active .tl__stage{opacity:1}
  .tl.is-active .tl__stage.is-on{transform:none}
}

/* ============================================================
   РЕГИСТРАЦИЯ — панель с одной кнопкой на внешнюю платформу
   ============================================================ */
.reg{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:var(--space-32);
  padding:var(--space-48) var(--space-48) var(--space-48) var(--space-48);
  background:var(--color-background-primary);
  border:1px solid var(--color-line);border-radius:var(--radius-l);overflow:hidden;
  box-shadow:var(--shadow-low);
}
/* синяя световая кромка сверху — как у карточек критериев */
.reg::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--color-brand);
}
/* мягкий фирменный отсвет за кнопкой */
.reg::after{
  content:"";position:absolute;right:-120px;top:50%;width:520px;height:320px;transform:translateY(-50%);
  background:radial-gradient(closest-side, rgba(0,138,224,.14), rgba(0,138,224,0));pointer-events:none;
}
.reg__head{position:relative;z-index:1;min-width:0}
.reg__head .h1{margin-top:var(--space-12)}
.reg__btn{position:relative;z-index:1;flex:none;min-width:260px;height:60px;font-size:18px;
  box-shadow:0 0 0 1px rgba(69,182,252,.42), 0 10px 30px rgba(0,138,224,.28)}
.reg__btn:hover{box-shadow:0 0 0 1px rgba(179,221,245,.95), 0 12px 36px rgba(0,138,224,.38)}
@media (max-width:900px){
  .reg{flex-direction:column;align-items:stretch;gap:var(--space-24);padding:var(--space-32) var(--space-24);border-radius:var(--radius-m)}
  .reg__btn{min-width:0;width:100%}
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:840px;margin:0 auto;border-top:1px solid var(--color-line)}
.faq__item{border-bottom:1px solid var(--color-line)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-24);
  padding:var(--space-24) 0;background:transparent;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-compact);font-weight:500;font-size:17px;line-height:24px;color:var(--color-text-primary);
}
.faq__q:hover{color:var(--color-text-brand)}
.faq__q .ic{flex:none;color:var(--color-icons-secondary);transition:transform var(--duration-base) var(--ease-standard)}
.faq__item.is-open .faq__q .ic{transform:rotate(180deg);color:var(--color-icons-brand)}
.faq__a{max-height:0;overflow:hidden;transition:max-height var(--duration-base) var(--ease-standard)}
.faq__a p{font-family:var(--font-sans);font-size:16px;line-height:24px;color:var(--color-text-secondary);margin:0 0 var(--space-24);max-width:70ch}

/* ============================================================
   О КОМПАНИИ — внизу страницы, перед контактами
   ============================================================ */
.company{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--space-64);align-items:start}
.company__head .h1{margin-top:var(--space-12)}
.company__head .lead{margin-top:var(--space-16)}
.company__link{margin-top:var(--space-32)}
.company__facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
.company__fact{
  position:relative;display:flex;flex-direction:column;gap:var(--space-8);
  padding:var(--space-24);background:var(--color-background-primary);
  border:1px solid var(--color-line);border-radius:var(--radius-m);overflow:hidden;
  transition:border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard);
}
/* синяя световая кромка сверху — как у карточек критериев */
.company__fact::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--color-brand);opacity:.5;
  transition:opacity var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.company__fact:hover{border-color:rgba(0,138,224,.45);box-shadow:0 8px 24px rgba(0,138,224,.14)}
.company__fact:hover::before{opacity:1;box-shadow:0 0 14px rgba(0,138,224,.9)}
.company__v{font-family:var(--font-wide);font-weight:700;font-size:26px;line-height:30px;letter-spacing:-.01em;color:var(--color-text-brand)}
.company__t{font-family:var(--font-sans);font-size:15px;line-height:22px;color:var(--color-text-secondary)}
@media (max-width:1180px){.company__v{font-size:22px;line-height:26px}}
@media (max-width:1000px){.company{grid-template-columns:minmax(0,1fr);gap:var(--space-40)}}
@media (max-width:600px){
  .company__facts{grid-template-columns:minmax(0,1fr)}
  .company__link{width:100%}
  .company__v{font-size:22px;line-height:26px}
}

/* ============================================================
   КОНТАКТЫ / ФУТЕР
   ============================================================ */
.contacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-24)}
.contact{display:flex;gap:var(--space-16);align-items:flex-start;padding:var(--space-24);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-m);
  transition:background var(--duration-fast) var(--ease-standard)}
.contact:hover{background:rgba(255,255,255,.1)}
.contact .ic{color:var(--mgts-blue-300);flex:none}
.contact > span:last-child{display:block;min-width:0}
.contact__k{display:block;font-family:var(--font-text);font-size:12px;color:var(--granat-grey-400)}
.contact__v{display:block;font-family:var(--font-compact);font-size:17px;line-height:24px;color:#fff;margin-top:var(--space-2);overflow-wrap:anywhere}
.footer{background:var(--color-background-inverted);color:var(--granat-grey-400);padding:var(--space-32) 0;border-top:1px solid rgba(255,255,255,.12)}
.footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-24);align-items:center;justify-content:space-between}
.footer a{color:var(--granat-grey-200)}
.footer a:hover{color:#fff}

/* ---- Закреплённый CTA на мобильных ---- */
.mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:58;
  align-items:center;gap:var(--space-12);
  padding:var(--space-12) var(--space-20) calc(var(--space-12) + env(safe-area-inset-bottom));
  background:rgba(18,21,24,.94);backdrop-filter:blur(16px);
  border-top:1px solid rgba(0,138,224,.30);
  transform:translateY(110%);transition:transform var(--duration-base) var(--ease-standard);
}
.mobile-cta.is-visible{transform:none}
.mobile-cta__left{display:flex;flex-direction:column;min-width:0}
.mobile-cta__k{font-family:var(--font-text);font-size:11px;line-height:14px;color:var(--granat-grey-400)}
.mobile-cta__v{font-family:var(--font-wide);font-weight:700;font-size:15px;line-height:20px;color:#fff;white-space:nowrap;text-shadow:0 0 12px rgba(69,182,252,.5)}
.mobile-cta .btn{margin-left:auto;flex:none}

/* ============================================================
   УТИЛИТЫ — вместо атрибутов style (CSP без unsafe-inline)
   ============================================================ */
.ic{display:inline-flex}
.ic-20{width:20px;height:20px}
.ic-24{width:24px;height:24px}
.ic-28{width:28px;height:28px}
.u-pad-lg{padding-top:152px;padding-bottom:152px}
.u-grid-wide{gap:var(--space-64);align-items:start}
.u-mt12{margin-top:var(--space-12)}
.u-mt24{margin-top:var(--space-24)}
.u-centered{margin-left:auto;margin-right:auto;text-align:center}
.u-muted{color:var(--granat-grey-400)}
@media (max-width:900px){.u-pad-lg{padding-top:88px;padding-bottom:88px}}

/* ============================================================
   ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ
   ============================================================ */
.reveal{opacity:0;transform:translateY(12px);transition:opacity 500ms var(--ease-standard),transform 500ms var(--ease-standard)}
.reveal.is-in{opacity:1;transform:none}

/* ============================================================
   АДАПТИВ
   ============================================================ */
/* шапка: полное меню — от 1200px, ниже оно уходит в бургер */
@media (max-width:1199px){
  .nav{display:none}
  .burger{display:inline-flex}
  .header__cta{margin-left:auto}
}
/* «О МГТС»: длинное «инфраструктурно-технологический» не помещается в полколонки */
@media (max-width:1000px){
  .grid-2.u-grid-wide{grid-template-columns:minmax(0,1fr);gap:var(--space-32)}
}
@media (max-width:1100px){
  .display{font-size:52px;line-height:56px}
  .hero__grid{grid-template-columns:1fr;gap:var(--space-40)}
  .hero__net{display:none}
  .timer{max-width:520px}
}
@media (max-width:900px){
  .header__timer{display:none!important}
  .mobile-cta{display:flex}
  .footer{padding-bottom:calc(var(--space-32) + 76px)}
  .header__btn{display:none}
  .contacts,.tracks{grid-template-columns:1fr}
  .track__ic{margin-bottom:var(--space-24)}
  .track:hover,.track:focus-within{transform:none}
  .section{padding:88px 0}
  .container{padding:0 var(--space-20)}
  .hero{padding:calc(var(--header-h) + 56px) 0 64px}
}
@media (max-width:600px){
  :root{--header-h:64px}
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__facts{flex-direction:column;gap:var(--space-20)}
  .display{font-size:38px;line-height:42px}
  .h1{font-size:28px;line-height:34px}
  .lead,.hero__lead{font-size:17px;line-height:26px}
  .logo__champ{display:none}
  .logo__mark{width:40px;height:40px}
  .logo{gap:var(--space-12)}
  .logo__lockup{padding-left:var(--space-12)}
  .timer{padding:var(--space-24);border-radius:var(--radius-m)}
  .timer__v{font-size:26px;line-height:30px}
  .hero__facts{gap:var(--space-20)}
  .grid-2{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .net-line{stroke-dashoffset:0}
  .net-node,.net-ring{opacity:1}
}

/* пиксель Метрики для браузеров без JS */
.ym-px{position:absolute;left:-9999px}


/* ---- часть: hero ---- */
/* Часть «hero»: первый экран по концепту «Сплиттер» с правками заказчика от 06.10.
   Стили подключаются после src/style.css и перекрывают старые правила .hero / .display.

   Луч свёрстан CSS-рамками .hero__ray и виден без скрипта. Геометрия считается от кегля названия --tf:
   у MTS Wide ascent/descent = 0,996/0,404 em (USE_TYPO_METRICS, одинаково на всех системах), поэтому при
   line-height .9 базовая линия строки стоит на .746em от её верха, а ось луча — ниже на --bo (0,05 кегля, не меньше 2t).
     · телефон и планшет (< 1024): «медь» → под «Код» → полукруг → под «города» → за левый край;
       таймер ниже кнопок в «скобке» из того же луча (входит слева, обходит справа, уходит влево);
     · десктоп (≥ 1024): «медь» → под «Код» → у правого края сетки вниз → обходит таймер справа и снизу →
       вверх по его левой стороне → под «города» → за левый край. Таймер стоит в «кармане» луча.
   Скрипт части (script.js) только пускает по лучу пакет света 4·9·5; при «уменьшить движение» луч просто горит. */

.hero{
  --t:2px;                                   /* толщина луча */
  --bg:var(--granat-graphite);               /* фон экрана: им же «вырезан» зазор вокруг выносных элементов букв */
  --beam:var(--mgts-blue-300);
  --glow:drop-shadow(0 0 3px rgba(0,138,224,.95)) drop-shadow(0 0 9px rgba(0,138,224,.75)) drop-shadow(0 0 22px rgba(0,138,224,.5));
  --cp:20px;                                 /* поле контейнера (как у .container) */
  --cx:var(--cp);                            /* от края окна до края текста */
  /* Кегли подписи и названия заданы прямо в font-size, а не через var(); --tf и --k повторяют их для геометрии
     (карман таймера, колонка, надпись справа). Размеры от ширины считаются в cqi — от ширины самого блока
     (.hero — контейнер запросов, см. конец файла): кегль в vw Chrome после смены ширины окна иногда не пересчитывает.
     Значения в vw ниже — запасные для браузеров без контейнерных единиц. */
  --tf:calc((100vw - 64px) / 4.682);         /* кегль названия: «города» + полукруг луча во всю ширину */
  --k:22px;                                  /* кегль подписи «Кейс-чемпионат МГТС для студентов» */
  --R:24px;                                  /* радиус поворота луча */
  --bo:max(calc(var(--tf) * .05), calc(var(--t) * 2));
  /* внутри строк названия em = кегль названия */
  --c:.5em;                                  /* конец «меди»: дальше луч светится */
  --ly:calc(.746em + max(.05em, calc(var(--t) * 2)));   /* ось луча от верха строки */
  padding:calc(var(--header-h) + 28px) 0 40px;
  background:
    radial-gradient(70% 50% at 38% 34%, rgba(0,138,224,.15), rgba(0,138,224,0) 72%),
    var(--bg);
}
.hero__in{position:relative;isolation:isolate}

/* ---------- надпись, подпись, название ---------- */
.hero__season{margin:0}
.hero .hero__title{margin:12px 0 0;color:#fff;font-size:16px;line-height:1.2;letter-spacing:0}
.hero .hero__kicker{
  display:block;margin:0;font-family:var(--font-compact);font-weight:500;
  font-size:22px;line-height:1.2;letter-spacing:0;color:#fff;
}
.hero__name{
  display:block;position:relative;margin-top:.08em;
  font-family:var(--font-wide);font-weight:700;line-height:.9;letter-spacing:-.01em;
}
/* кегль задан и самим строкам, и их детям: Chrome после смены ширины иногда не передаёт новый кегль по наследству */
.hero__name,.hero__line > *{font-size:calc((100vw - 64px) / 4.682)}
.hero__line{display:block;position:relative;white-space:nowrap}
/* буквы просто белые; порядок слоёв — без z-index: луч и импульс лежат на z-index:-1 внутри .hero__in,
   вырез (::before) рисуется раньше слова, слово — поверх всего */
.hero__word{position:relative;color:#fff}
/* зазор цвета фона вокруг ножек «р» и «д»: луч уходит за букву, а не подчёркивает её. Зазор есть только
   в полосе луча и плавно сходит на нет ниже — тёмного контура по всей ножке нет.
   Текст повторён в CSS (альтернативный текст "" — экранным дикторам не читается); меняя название, поправьте и здесь. */
.hero__line--2::before{
  content:"города" / "";
  position:absolute;left:0;top:0;height:1.4em;pointer-events:none;
  color:var(--bg);-webkit-text-stroke:calc(var(--t) * 4) var(--bg);
  --kt:calc(.746em + max(.02em, 2px));
  -webkit-mask:linear-gradient(180deg,transparent var(--kt),#000 var(--kt),#000 calc(var(--ly) + 6px),transparent calc(var(--ly) + 18px)) no-repeat;
  mask:linear-gradient(180deg,transparent var(--kt),#000 var(--kt),#000 calc(var(--ly) + 6px),transparent calc(var(--ly) + 18px)) no-repeat;
}

/* ---------- луч ---------- */
.hero__ray{position:absolute;z-index:-1;display:block;box-sizing:border-box;pointer-events:none}
/* «медь»: тёмный провод светлеет и переходит в свет, без свечения */
.hero__ray--cu{
  left:calc(-1 * var(--cx) - 20px);width:calc(var(--cx) + 20px + var(--c));
  top:calc(var(--ly) - 1px);height:var(--t);
  background:linear-gradient(90deg,var(--granat-grey-800) 0,var(--granat-grey-800) max(0px,calc(100% - 260px)),var(--granat-grey-500) calc(100% - 110px),var(--beam) 100%);
}
/* телефон и планшет: под «Код» → полукруг → под «города» */
.hero__ray--a{
  left:var(--c);right:0;top:calc(var(--ly) - 1px);height:calc(.9em + var(--t));
  border:var(--t) solid var(--beam);border-left:0;border-radius:0 999px 999px 0;filter:var(--glow);
}
/* хвост под «города» — за левый край */
.hero__ray--l2{
  left:calc(-1 * var(--cx) - 20px);width:calc(var(--cx) + 20px + var(--c) + 1px);
  top:calc(var(--ly) - 1px);height:var(--t);background:var(--beam);filter:var(--glow);
}
/* таймер в «скобке»: луч входит слева над таймером, обходит справа и уходит влево под ним */
.hero__ray--box{
  left:calc(-1 * var(--cx) - 20px);right:0;top:0;bottom:0;
  border:var(--t) solid var(--beam);border-left:0;border-radius:0 var(--R) var(--R) 0;filter:var(--glow);
}
.hero__ray--bl,.hero__ray--in{display:none}

/* слой с пакетом света (script.js кладёт его последним в .hero__in): над лучом, под буквами */
.hero__flow{position:absolute;left:0;top:0;z-index:-1;width:100%;height:100%;max-width:none;overflow:visible;pointer-events:none}
.hero__flow path{fill:none;stroke-linecap:butt}
.hero__pk-halo{stroke:var(--mgts-blue-100);stroke-opacity:.42;stroke-width:6}
.hero__pk-core{stroke:#fff;stroke-width:2.4}

/* ---------- абзац и кнопки ---------- */
.hero .hero__lead{margin:28px 0 0;max-width:560px}
.hero__cta{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-12);margin-top:var(--space-24)}
/* кнопки плоские, как в концепте: светится только луч */
.hero__cta .btn--primary:hover{background:var(--color-brand-hover)}
.hero__cta .btn--onDark{border-color:rgba(255,255,255,.3)}
.hero__cta .btn--onDark:hover,.hero__cta .btn--onDark:focus-visible{background:transparent;border-color:var(--mgts-blue-300)}
.hero__cta .btn:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:var(--radius-m)}

/* ---------- таймер ---------- */
.hero-timer{position:relative;margin-top:44px;padding:24px calc(var(--R) + 12px) 24px 0;--dv:32px}
.hero-timer__label{margin:0;font-family:var(--font-text);font-size:13px;line-height:16px;color:var(--granat-grey-200)}
.hero-timer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:14px}
.hero-timer__cell{display:flex;flex-direction:column;gap:8px;min-width:0;padding-left:10px;border-left:1px solid rgba(255,255,255,.16)}
.hero-timer__cell:first-child{padding-left:0;border-left:0}
.hero-timer__v{font-family:var(--font-wide);font-weight:500;font-size:var(--dv);line-height:1;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-timer__u{font-family:var(--font-text);font-size:11px;line-height:12px;color:var(--granat-grey-400)}
.hero-timer__scale{margin-top:18px}
.hero-timer__track{position:relative;height:2px;background:rgba(255,255,255,.16)}
.hero-timer__track::before,.hero-timer__track::after{content:"";position:absolute;top:-3px;width:1px;height:8px;background:var(--granat-grey-400)}
.hero-timer__track::before{left:0}
.hero-timer__track::after{right:0}
.hero-timer__fill{display:block;width:0;height:100%;background:var(--beam)}
.hero-timer__dates{display:flex;justify-content:space-between;gap:var(--space-12);margin-top:10px;font-family:var(--font-text);font-size:13px;line-height:16px;color:var(--granat-grey-200);font-variant-numeric:tabular-nums}

@media (max-width:359px){
  .hero{--k:20px}
  .hero .hero__kicker{font-size:20px}
  .hero-timer{--dv:28px}
  .hero-timer__cell{padding-left:8px}
}

/* ---------- планшет ---------- */
@media (min-width:768px){
  .hero{--tf:min(13vw,112px);--k:26px;--R:36px;padding:calc(var(--header-h) + 40px) 0 56px}
  .hero__name,.hero__line > *{font-size:min(13vw,112px)}
  .hero .hero__kicker{font-size:26px}
  /* «Осень 2026 · Москва» — справа, на одной базовой линии с подписью */
  .hero__season{position:absolute;right:var(--cp);top:calc(var(--k) * .896 - 11.55px)}
  .hero .hero__title{margin-top:0}
  .hero .hero__lead{margin-top:36px}
  .hero__cta{flex-direction:row;flex-wrap:wrap;align-items:center;margin-top:var(--space-32)}
  .hero-timer{max-width:620px;margin-top:56px;padding:28px calc(var(--R) + 20px) 28px 0;--dv:44px}
  .hero-timer__label{font-size:14px;line-height:18px}
  .hero-timer__cell{padding-left:18px}
  .hero-timer__u{font-size:12px}
}
@media (min-width:901px){
  .hero{--cp:32px;--cx:max(32px,calc((100vw - 1136px) / 2))}
}

/* ---------- десктоп: таймер в «кармане» луча справа от абзаца ---------- */
@media (min-width:1024px){
  .hero{
    --tf:clamp(104px,calc(11.36vw - 12.4px),124px);
    --k:clamp(28px,calc(2.27vw + 4.75px),32px);
    --R:40px;
    --g:32px;                                /* от низа названия до абзаца и таймера */
    --pb:28px;                               /* луч под таймером */
    --pp:24px;                               /* поля таймера внутри «кармана» */
    --lc:calc(var(--tf) * 4.232 + 24px + var(--R));   /* левая колонка: «города» + зазор + поворот луча */
    padding:calc(var(--header-h) + 48px) 0 calc(var(--pb) + 80px);
    /* первый экран — на всю высоту окна, содержимое по центру */
    min-height:min(100vh,1040px);min-height:min(100svh,1040px);display:grid;align-content:center;
  }
  .hero > .hero__in{width:100%}   /* в сетке контейнер с margin:auto иначе сжимается и съезжает от шапки */
  .hero__name,.hero__line > *{font-size:clamp(104px,calc(11.36vw - 12.4px),124px)}
  .hero .hero__kicker{font-size:clamp(28px,calc(2.27vw + 4.75px),32px)}
  .hero__in{display:grid;grid-template-columns:var(--lc) minmax(0,1fr);row-gap:var(--g);align-items:start}
  .hero__title{grid-column:1 / -1;grid-row:1}   /* надпись справа — вне сетки (absolute от полей контейнера) */
  .hero__body{grid-column:1;grid-row:2;padding-right:40px}
  .hero .hero__lead{margin-top:0;max-width:540px}
  .hero-timer{
    grid-column:2;grid-row:2;max-width:none;padding:0 var(--pp);--dv:38px;
    /* таймер поднят к лучу под «Код»: карман плотно обнимает таймер, без пустоты над ним */
    --mt:calc(var(--tf) * 1.054 + var(--g) - var(--bo) - var(--pp) - 14px);
    margin:calc(-1 * var(--mt)) 0 0;
    --ty1:calc(var(--bo) - var(--tf) * 1.054 - var(--g) + var(--mt));   /* ось луча под «Код» — от верха таймера */
    --ty2:calc(var(--bo) - var(--tf) * .154 - var(--g) + var(--mt));    /* ось луча под «города» */
  }
  .hero-timer__cell{padding-left:12px}
  /* под «Код» — до поворота у правого края */
  .hero__ray--a{right:auto;width:calc(var(--lc) + var(--R) - var(--c) + 1px);height:var(--t);border:0;border-radius:0;background:var(--beam)}
  /* под «города» — от поворота у левой стороны таймера до края окна */
  .hero__ray--l2{width:calc(var(--cx) + 20px + var(--lc) - var(--R) + var(--t))}
  /* «карман»: верх (продолжение луча под «Код»), правая сторона, низ */
  .hero__ray--box{left:var(--R);right:0;top:calc(var(--ty1) - 1px);bottom:calc(-1 * var(--pb));border-radius:0 var(--R) var(--R) 0}
  /* левый нижний поворот и левая сторона кармана */
  .hero__ray--bl{
    display:block;left:0;width:var(--R);top:calc(var(--ty2) - 1px + var(--R));bottom:calc(-1 * var(--pb));
    border:solid var(--beam);border-width:0 0 var(--t) var(--t);border-radius:0 0 0 var(--R);filter:var(--glow);
  }
  /* поворот с левой стороны кармана в луч под «города» */
  .hero__ray--in{
    display:block;left:calc(var(--t) - var(--R));width:var(--R);top:calc(var(--ty2) - 1px);height:var(--R);
    border:solid var(--beam);border-width:var(--t) var(--t) 0 0;border-radius:0 var(--R) 0 0;filter:var(--glow);
  }
}
@media (min-width:1200px){
  .hero{--R:48px;--g:40px;--pb:32px;--pp:32px}
  .hero-timer{--dv:48px}
  .hero-timer__label{font-size:15px;line-height:20px}
  .hero-timer__grid{margin-top:16px}
  .hero-timer__cell{padding-left:14px;gap:10px}
  .hero-timer__scale{margin-top:22px}
}

/* ---------- размеры от ширины блока (контейнерные единицы); выше — запасные значения в vw ---------- */
@supports (width:1cqi){
  .hero{container-type:inline-size;--tf:calc((100cqi - 64px) / 4.682)}
  .hero__name,.hero__line > *{font-size:calc((100cqi - 64px) / 4.682)}
  @media (min-width:768px){
    .hero{--tf:min(13cqi,112px)}
    .hero__name,.hero__line > *{font-size:min(13cqi,112px)}
  }
  @media (min-width:901px){
    .hero{--cx:max(32px,calc((100cqi - 1136px) / 2))}
  }
  @media (min-width:1024px){
    .hero{--tf:clamp(104px,calc(11.36cqi - 12.4px),124px);--k:clamp(28px,calc(2.27cqi + 4.75px),32px)}
    .hero__name,.hero__line > *{font-size:clamp(104px,calc(11.36cqi - 12.4px),124px)}
    .hero .hero__kicker{font-size:clamp(28px,calc(2.27cqi + 4.75px),32px)}
  }
}


/* ---- часть: about ---- */
/* Часть «about»: стили поверх src/style.css (подключаются после него)

   Силуэт города по нижнему краю блока — вертикальные штрихи, из которых складываются здания
   (правка заказчика 07.10, приём из концепта «Сигнал города»). Рисунок 2560×220 стоит по центру
   полосы и обрезается по краям, не сжимается. Чем выше штрих, тем темнее синий (на светлом фоне).
   Движение: штрихи вырастают от земли слева направо при появлении блока, затем по городу
   непрерывно проходит волна подсветки слева направо. При «уменьшить движение» — статичный рисунок. */
#about{padding-bottom:0}

.about-sky{
  --sky-h:220px;
  position:relative;height:var(--sky-h);margin-top:40px;overflow:hidden;pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,transparent 35%,var(--mgts-blue-50) 100%);
}
.about-sky__art{
  position:absolute;left:50%;bottom:0;
  width:calc(var(--sky-h) * 2560 / 220);height:var(--sky-h);max-width:none;
  transform:translateX(-50%);overflow:visible;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.about-sky__art .sb{transform-box:fill-box;transform-origin:50% 100%}
.about-sky__art .l{fill:var(--mgts-blue-300)}   /* освещённая сторона дома */
.about-sky__art .m{fill:var(--mgts-blue-500)}
.about-sky__art .s{fill:var(--mgts-blue-700)}   /* тень справа */
.about-sky__art .p{fill:var(--mgts-blue-100)}   /* вершины шпилей */

/* появление: штрихи вырастают от земли (задержки раздаёт script.js по координате x) */
.about-sky.reveal{opacity:1;transform:none;transition:none}
.about-sky.is-armed .sb{transform:scaleY(0)}
.about-sky.is-armed.is-in .sb{transform:scaleY(1);transition:transform 700ms cubic-bezier(.2,.8,.2,1)}

/* волна подсветки слева направо: поверх города лежит его светлая копия, видимая только в бегущем окне маски */
.about-sky__glow{filter:drop-shadow(0 0 3px rgba(69,182,252,.7));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 45%,#000 50%,transparent 55%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,transparent 45%,#000 50%,transparent 55%,transparent 100%);
  -webkit-mask-size:300% 100%;mask-size:300% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;opacity:0}
.about-sky__glow .sg{fill:var(--mgts-blue-300);transform-box:fill-box;transform-origin:50% 100%}
.about-sky__glow .s{fill:var(--mgts-blue-500)}
@keyframes about-sky-wave{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0 0;mask-position:0 0}}
.about-sky.is-live .about-sky__glow{opacity:1;animation:about-sky-wave 4.5s linear infinite}

@media (prefers-reduced-motion:reduce){
  .about-sky.is-armed .sb{transform:none;transition:none}
  .about-sky.is-live .about-sky__glow{animation:none;opacity:0}
}
@media print{ .about-sky .sb{transform:none!important;animation:none!important;opacity:1!important} }

@media (max-width:1199px){ .about-sky{--sky-h:180px} }
@media (max-width:900px){ .about-sky{--sky-h:160px;margin-top:32px} }
@media (max-width:600px){ .about-sky{--sky-h:128px;margin-top:24px} }


/* ---- часть: tracks ---- */
/* Часть «tracks»: стили поверх src/style.css (подключаются после него)
   Правки 06.10: иконки и подписи «Трек 01 · …» убраны, карточки — меньше и строже.
   Без размытого пятна-свечения и увеличения при наведении; иерархия —
   название → синий подзаголовок → тонкая линия → текст задания. */

.tracks{gap:var(--space-20)}

.track{
  padding:var(--space-24) var(--space-24) 28px;
  border-radius:24px;
  background:rgba(255,255,255,.03);
  border-color:rgba(69,182,252,.22);
  /* opacity/transform — появление (.reveal), border/background — наведение */
  transition:opacity 500ms var(--ease-standard), transform 500ms var(--ease-standard),
             border-color var(--duration-base) var(--ease-standard),
             background-color var(--duration-base) var(--ease-standard);
}
.track--d1{transition-delay:80ms,80ms,0s,0s}
.track--d2{transition-delay:160ms,160ms,0s,0s}

/* размытое голубое пятно в углу — убрано */
.track::before{content:none}

.track__title{
  font-size:24px;line-height:28px;letter-spacing:-.01em;
  margin:0;min-height:0;
}
.track__lead{margin-top:var(--space-8);min-height:0}
/* текст задания отделён тонкой линией — у карточки есть «шапка» и «тело» */
.track__desc{
  margin-top:var(--space-16);padding-top:var(--space-16);
  border-top:1px solid rgba(255,255,255,.09);
}

/* наведение — неоновая кромка тем же голубым светом, что луч первого экрана (правка 07.10) */
.track{transition-property:opacity,transform,border-color,background-color,box-shadow;transition-duration:500ms,500ms,var(--duration-base),var(--duration-base),300ms}
.track:hover, .track:focus-within{
  transform:none;
  background:rgba(0,138,224,.07);
  border-color:var(--mgts-blue-300);
  box-shadow:0 0 0 1px rgba(69,182,252,.55), 0 0 12px rgba(0,138,224,.65), 0 0 32px rgba(0,138,224,.35), inset 0 0 18px rgba(0,138,224,.18);
}

/* десктоп: три карточки в ряд, строки «название / подзаголовок / текст»
   выровнены между карточками (subgrid), высота в ряду одинаковая */
@media (min-width:901px){
  .tracks{row-gap:0;align-items:stretch}
  .track{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .track__body{display:contents}
  .track__title,.track__lead,.track__desc{align-self:start}
}

@media (max-width:900px){
  .tracks{gap:var(--space-16)}
}
@media (max-width:600px){
  .track{padding:var(--space-20) var(--space-20) var(--space-24);border-radius:20px}
  .track__title{font-size:22px;line-height:26px}
}
/* без JS (.reveal не получит .is-in) карточки всё равно видны */
@media (scripting:none){
  #tracks .reveal{opacity:1;transform:none}
}


/* ---- часть: criteria ---- */
/* Часть «criteria»: стили поверх src/style.css (подключаются после него)
   Правки 06.10: каждую карточку со всех сторон обводят три тонких параллельных
   «луча» — тот же световод, что на первом экране (голубой, с лёгким ореолом).
   Внутренняя линия — край карточки, две внешние — через 8 px наружу, углы
   концентричны (радиусы 16 / 24 / 32). Линии — SVG-прямоугольники в % от карточки,
   поэтому повторяют её размер на любой ширине без JS. Изредка по лучам проходит
   импульс (stroke-dashoffset), только пока блок на экране (script.js);
   при уменьшенном движении — статично. */

#criteria{--ray-gap:8px}
.crit{gap:48px}

.crit__card{
  border:0;border-radius:16px;overflow:visible;
  background:var(--color-background-primary);
  padding:var(--space-24);
}
/* прежняя синяя кромка сверху и тень при наведении больше не нужны */
.crit__card::before{content:none}
.crit__card:hover{box-shadow:none}

/* ---- три луча ---- */
.crit__rays{
  position:absolute;inset:0;display:block;pointer-events:none;
  filter:drop-shadow(0 0 1.5px rgba(69,182,252,.55)) drop-shadow(0 0 8px rgba(0,138,224,.14));
}
.crit__ray{position:absolute;display:block;max-width:none;overflow:visible}
.crit__ray--1{left:0;top:0;width:100%;height:100%}
.crit__ray--2{
  left:calc(-1 * var(--ray-gap));top:calc(-1 * var(--ray-gap));
  width:calc(100% + 2 * var(--ray-gap));height:calc(100% + 2 * var(--ray-gap));
}
.crit__ray--3{
  left:calc(-2 * var(--ray-gap));top:calc(-2 * var(--ray-gap));
  width:calc(100% + 4 * var(--ray-gap));height:calc(100% + 4 * var(--ray-gap));
}

.crit__line{fill:none;stroke-width:1.25;transition:opacity var(--duration-base) var(--ease-standard)}
.crit__ray--1 .crit__line{stroke:var(--mgts-blue-500);opacity:.7}
.crit__ray--2 .crit__line{stroke:var(--mgts-blue-300);opacity:.75}
.crit__ray--3 .crit__line{stroke:var(--mgts-blue-300);opacity:.5}
.crit__card:hover .crit__line{opacity:1}

/* импульс: короткий отрезок обегает карточку за ~3,6 с, затем долгая пауза */
.crit__pulse{
  fill:none;stroke:var(--mgts-blue-500);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:5 95;stroke-dashoffset:100;opacity:0;
}
.crit__card--1{--crit-d:.4s}
.crit__card--2{--crit-d:4.4s}
.crit__card--3{--crit-d:8.4s}
.crit__ray--2{--crit-dl:.12s}
.crit__ray--3{--crit-dl:.24s}
.crit.is-live .crit__pulse{
  animation:crit-pulse 12s linear infinite;
  animation-delay:calc(var(--crit-d, 0s) + var(--crit-dl, 0s));
}
@keyframes crit-pulse{
  0%  {stroke-dashoffset:100;opacity:0}
  3%  {opacity:1}
  27% {opacity:1}
  30% {stroke-dashoffset:0;opacity:0}
  100%{stroke-dashoffset:0;opacity:0}
}

/* планшет и телефон (одна колонка, поля контейнера 20 px): лучи ближе друг
   к другу (6 px, радиусы 16 / 22 / 28) и ряд на 4 px уже — внешний луч
   не прижимается к краю экрана */
@media (max-width:900px){
  #criteria{--ray-gap:6px}
  .crit{gap:36px;padding:0 var(--space-4)}
  .crit__ray--2 rect{rx:22px;ry:22px}
  .crit__ray--3 rect{rx:28px;ry:28px}
}
@media (max-width:600px){
  .crit{gap:32px}
  .crit__card{padding:var(--space-20)}
}
@media (prefers-reduced-motion:reduce){
  .crit .crit__pulse,.crit.is-live .crit__pulse{animation:none!important;opacity:0}
}
/* без JS (.reveal не получит .is-in) блок всё равно виден, лучи — статичны */
@media (scripting:none){
  #criteria .reveal{opacity:1;transform:none}
}

/* узкие экраны: внешний луч не прижимается к краю окна */
@media (max-width:900px){ .crit{padding:0 12px} }
@media (max-width:600px){ .crit{padding:0 10px} }


/* ---- часть: how ---- */
/* ============================================================
   КАК ПРОХОДИТ — вариант A «Ступени-постаменты»
   Пять ступеней-карточек, низы на одной линии, высота растёт к финалу.
   Карточки скруглены со всех сторон (правка заказчика 06.10).
   Высоты не задаются руками: каждая ступень опущена на
   (5 − n) × --rise от верха ряда, а высоту ряда задаёт самая
   «требовательная» ступень (текст + её отступ). Ритм подъёма
   постоянный, и ни один текст не вылезает за свою ступень.
   ============================================================ */
.stair{
  --rise:44px;          /* высота одной ступени лесенки */
  --lift:34px;          /* на сколько линия пути висит над верхней гранью */
  --node:36px;          /* диаметр узла-номера */
  --pad:18px;           /* внутренний отступ ступени */
  --gap:8px;            /* зазор между ступенями */
  position:relative;
  padding-top:76px;     /* место под линию над ступенью 5 и флажок */
  margin-top:-40px;     /* флажок поднимается в пустой угол справа от подзаголовка */
}

/* ---------- линия пути (SVG поверх фона, под ступенями) ---------- */
.stair__path{
  position:absolute;left:0;top:0;width:100%;height:100%;
  overflow:visible;pointer-events:none;z-index:0;
}
.stair__base{
  fill:none;stroke:var(--granat-grey-100);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;
}
.stair__lit{
  fill:none;stroke:var(--color-brand);stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:butt;
  filter:drop-shadow(0 0 6px rgba(0,138,224,.55));
  transition:stroke-dashoffset 560ms var(--ease-standard);
}
.stair__pole{stroke:var(--granat-grey-400);stroke-width:2;stroke-linecap:round;
  transition:stroke 300ms var(--ease-standard)}
.stair__pennant{fill:var(--color-brand);
  transition:filter 300ms var(--ease-standard)}
.stair.is-done .stair__pole{stroke:var(--color-brand)}
.stair.is-done .stair__pennant{filter:drop-shadow(0 0 6px rgba(0,138,224,.85))}

/* ---------- ступени ---------- */
.stair__steps{
  list-style:none;margin:0;padding:0;position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,var(--goal-w,1.2fr));
  column-gap:var(--gap);align-items:stretch;
}
.stair__step{
  --lvl:0;               /* сколько ступеней до вершины */
  --tint:#f7f8fa;        /* цвет верхней грани, растёт к финалу */
  --cap:var(--granat-grey-100);
  position:relative;
  margin-top:calc(var(--rise) * var(--lvl));
  /* снизу на 2px больше: у последней строки текста меньше «воздуха» в интерлиньяже,
     чем у строки дат сверху, — так поля карточки выглядят одинаковыми */
  padding:var(--pad) var(--pad) calc(var(--pad) + 2px);
  background:linear-gradient(180deg,var(--tint) 0%,rgba(255,255,255,0) 100%),var(--color-background-primary);
  border:1px solid var(--color-line);
  border-radius:var(--radius-m);
  box-shadow:inset 0 3px 0 var(--cap);
  cursor:default;
  transition:border-color 300ms var(--ease-standard),
             box-shadow 300ms var(--ease-standard),
             background-color 300ms var(--ease-standard);
}
.stair__step:nth-child(1){--lvl:4;--tint:#f7f8fa;--cap:var(--granat-grey-100)}
.stair__step:nth-child(2){--lvl:3;--tint:#f1f8fd;--cap:var(--mgts-blue-100)}
.stair__step:nth-child(3){--lvl:2;--tint:#eaf5fc;--cap:#7fcbfa}
.stair__step:nth-child(4){--lvl:1;--tint:#e1f1fb;--cap:var(--mgts-blue-300)}

/* пройденные ступени и текущая (наведение/фокус) */
.stair__step.is-lit{--cap:var(--color-brand);border-color:rgba(0,138,224,.28)}
.stair__step.is-current{
  --tint:#dcf0fb;
  border-color:rgba(0,138,224,.55);
  box-shadow:inset 0 3px 0 var(--cap),0 0 0 1px rgba(0,138,224,.12),0 0 28px rgba(0,138,224,.18);
}
.stair__step:focus-visible{outline:2px solid var(--color-brand);outline-offset:3px;border-radius:var(--radius-m)}

/* узел-номер на линии пути, над левым краем текста */
.stair__node{
  position:absolute;left:var(--pad);
  top:calc(-1px - var(--lift) - var(--node) / 2);
  width:var(--node);height:var(--node);border-radius:50%;
  display:grid;place-items:center;
  background:var(--color-background-primary);
  border:1.5px solid var(--granat-grey-200);
  font-family:var(--font-wide);font-weight:700;font-size:12px;line-height:1;letter-spacing:.04em;
  color:var(--granat-grey-600);
  transition:background-color 300ms var(--ease-standard),border-color 300ms var(--ease-standard),
             color 300ms var(--ease-standard),box-shadow 300ms var(--ease-standard);
}
.stair__step.is-lit .stair__node{
  /* заливка -600: белые цифры 12px на ней проходят AA (5:1), на -500 — нет */
  background:var(--mgts-blue-600);border-color:var(--mgts-blue-600);color:#fff;
  box-shadow:0 0 0 4px rgba(0,138,224,.12),0 0 14px rgba(0,138,224,.55);
}
.stair__step.is-current .stair__node{box-shadow:0 0 0 6px rgba(0,138,224,.16),0 0 18px rgba(0,138,224,.7)}

/* текст ступени */
.stair__when{
  margin:0;font-family:var(--font-text);font-weight:500;font-size:11px;line-height:16px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--granat-grey-600);
}
.stair__date{white-space:nowrap;color:var(--granat-grey-800)}
.stair__title{
  margin:var(--space-12) 0 var(--space-8);
  font-family:var(--font-compact);font-weight:700;font-size:17px;line-height:22px;
  color:var(--color-text-primary);
}
.stair__text{
  margin:0;font-family:var(--font-sans);font-size:15px;line-height:22px;
  color:var(--color-text-secondary);text-wrap:pretty;
}

/* ---------- вершина: ступень 5, графит с неоновым свечением ---------- */
.stair__step--goal{
  --cap:var(--mgts-blue-300);
  background:
    radial-gradient(120% 60% at 30% 0%,rgba(0,138,224,.34) 0%,rgba(0,138,224,0) 70%),
    var(--granat-graphite);
  border-color:rgba(69,182,252,.26);
  box-shadow:inset 0 3px 0 var(--cap),0 0 34px rgba(0,138,224,.42);
}
/* неоновый «пол» вершины: тонкие линии и свечение у основания, под текстом */
.stair__step--goal{z-index:0}
.stair__step--goal::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:-1;pointer-events:none;
  /* повторяет нижнее скругление карточки (радиус по внутренней грани рамки) */
  border-radius:0 0 calc(var(--radius-m) - 1px) calc(var(--radius-m) - 1px);
  background:
    radial-gradient(70% 90% at 50% 100%,rgba(0,138,224,.30) 0%,rgba(0,138,224,0) 70%),
    repeating-linear-gradient(0deg,rgba(69,182,252,.16) 0 1px,rgba(69,182,252,0) 1px 14px);
  -webkit-mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
          mask-image:linear-gradient(0deg,#000 0%,rgba(0,0,0,.6) 45%,transparent 100%);
  transition:opacity 300ms var(--ease-standard);opacity:.8;
}
.stair.is-done .stair__step--goal::after{opacity:1}
.stair__step--goal.is-lit{border-color:rgba(69,182,252,.5)}
.stair__step--goal.is-current{
  border-color:rgba(69,182,252,.7);
  box-shadow:inset 0 3px 0 var(--mgts-blue-300),0 0 0 1px rgba(69,182,252,.3),0 0 48px rgba(0,138,224,.6);
}
.stair__step--goal .stair__node{border-color:var(--mgts-blue-600);color:var(--mgts-blue-600)}
.stair__step--goal.is-lit .stair__node{color:#fff}
.stair__step--goal .stair__when,.stair__step--goal .stair__date{color:var(--mgts-blue-300)}
.stair__step--goal .stair__title{font-family:var(--font-wide);font-size:20px;line-height:24px;color:#fff}
.stair__step--goal .stair__text{color:var(--granat-grey-200)}
.stair__step--goal .stair__text b{font-family:var(--font-compact);font-weight:700;color:#fff}
.stair__step--goal .stair__text b:first-of-type{color:var(--mgts-blue-300)}

/* ---------- 1200–1279: колонки уже — плотнее отступы ---------- */
@media (max-width:1279px){
  .stair{--pad:14px;--gap:6px;--rise:40px;--goal-w:1.12fr}
  .stair__title{font-size:16px;line-height:20px;margin-top:var(--space-8)}
  .stair__text{font-size:14px;line-height:20px}
  .stair__step--goal .stair__title{font-size:18px;line-height:22px}
}

/* ---------- ≤1199: вертикальный путь сверху вниз (пять колонок уже не помещают текст) ----------
   Карточки сдвигаются вправо на --shift с каждым шагом, линия
   слева повторяет сдвиг ступенькой — лесенка читается и здесь. */
@media (max-width:1199px){
  .stair{--gutter:52px;--shift:28px;--pad:20px;padding-top:0;margin-top:0}
  .stair__title{font-size:18px;line-height:22px;margin-top:var(--space-12)}
  .stair__text{font-size:15px;line-height:22px;max-width:62ch}
  .stair__step--goal .stair__title{font-size:20px;line-height:24px}
  .stair__steps{grid-template-columns:minmax(0,1fr);row-gap:var(--space-16)}
  .stair__step{
    margin-top:0;margin-left:calc(var(--gutter) + var(--shift) * (4 - var(--lvl)));
    background:linear-gradient(180deg,var(--tint) 0%,var(--color-background-primary) 100%);
  }
  .stair__step--goal{
    background:
      radial-gradient(120% 70% at 20% 0%,rgba(0,138,224,.34) 0%,rgba(0,138,224,0) 70%),
      var(--granat-graphite);
  }
  .stair__node{left:calc(-1px - var(--gutter));top:calc(var(--pad) - 1px + 8px - var(--node) / 2)}
  .stair__flag{display:none}
  .stair__step--goal::after{display:none}
}
@media (max-width:767px){
  .stair{--shift:16px}
}
@media (max-width:600px){
  .stair{--gutter:44px;--shift:8px;--node:32px;--pad:18px}
  .stair__node{font-size:11px}
  .stair__title{font-size:17px;line-height:22px}
  .stair__text{font-size:15px;line-height:22px}
  .stair__step--goal .stair__title{font-size:19px;line-height:24px}
}

@media (prefers-reduced-motion:reduce){
  .stair__lit,.stair__step,.stair__node,.stair__pole,.stair__pennant{transition:none}
}


/* ---- часть: prizes ---- */
/* ============================================================
   ПРИЗОВОЙ ФОНД — блок 7
   Правки 06.10: без «ИИ-паттернов». Логика карточек прежняя
   (большой фонд слева, 1 место, 2–3 место, сертификат полосой),
   оформление — простое: тёмная карточка, тонкая рамка, ровные поля.
   Картинки — схематичные линейные рисунки одного цвета и одной толщины.
   Главный акцент — деньги: сумма в заголовке и в карточке фонда.
   Все классы с префиксом pz, чтобы не пересечься с общими стилями.
   ============================================================ */

/* --pz-k — масштаб рисунков: 1 единица viewBox = --pz-k px.
   Все рисунки масштабируются одинаково, поэтому линия у всех одной толщины (2 × --pz-k px). */
.pz{position:relative;--pz-k:1}

/* ---------- шапка ---------- */
.pz__head{max-width:900px}
.pz__head .lead{max-width:640px}
.pz__sum{display:inline-block;white-space:nowrap;color:var(--mgts-blue-300)}

/* ---------- сетка ---------- */
.pz__grid{
  display:grid;gap:var(--space-24);
  grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"fund first track" "fund cert cert";
}

/* ---------- карточка: тёмный фон, тонкая рамка ---------- */
.pz-card{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;
  min-width:0;margin:0;padding:var(--space-32);overflow:hidden;
  container-type:inline-size;
  border:1px solid rgba(255,255,255,.12);border-radius:16px;
  background:rgba(255,255,255,.025);
}
/* каскад появления карточек (.reveal из общих стилей) */
.pz-d1.is-in{transition-delay:80ms}
.pz-d2.is-in{transition-delay:160ms}
.pz-d3.is-in{transition-delay:240ms}

/* слова через дефис не рвём */
.pz-nw{white-space:nowrap}

/* ---------- типографика карточек ---------- */
.pz-card__k{
  margin:0;font-family:var(--font-wide);font-weight:500;font-size:12px;line-height:16px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mgts-blue-300);
}
.pz-pill{
  display:inline-flex;align-items:center;height:28px;margin:0;padding:0 var(--space-12);
  border:1px solid rgba(69,182,252,.5);border-radius:999px;
  font-family:var(--font-wide);font-weight:500;font-size:11px;line-height:16px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mgts-blue-300);white-space:nowrap;
}
.pz-card__sum{
  margin:var(--space-20) 0 0;white-space:nowrap;
  font-family:var(--font-wide);font-weight:700;letter-spacing:-.02em;line-height:1.08;
  font-size:38px;font-size:clamp(28px, 13.6cqi, 44px);
  color:var(--mgts-blue-300);
}
.pz-card__title{
  margin:var(--space-12) 0 0;font-family:var(--font-compact);font-weight:700;
  font-size:20px;line-height:26px;color:var(--granat-white);
}
.pz-card__title--l{margin-top:var(--space-20);font-size:24px;line-height:30px;max-width:15em}
/* ровные строки заголовков: «Фаст-трек / на стажировку в МГТС», без висячего «в МГТС» */
.pz-card__title,.pz-cert__title{text-wrap:balance}
.pz-card__text{
  margin:var(--space-16) 0 0;font-family:var(--font-sans);font-size:15px;line-height:22px;
  color:var(--granat-grey-200);
}

/* ---------- линейные рисунки ---------- */
.pz-ill{
  display:block;flex:none;height:auto;overflow:visible;pointer-events:none;
  fill:none;stroke:var(--mgts-blue-300);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  /* лёгкий ореол линии — как у луча на первом экране */
  filter:drop-shadow(0 0 5px rgba(0,138,224,.55));
}
/* линия-«луч», на которой стоит предмет, — приглушённая */
.pz-ground{stroke-opacity:.45}
/* кубок крупнее своего viewBox (240 → 300 px), поэтому линия тоньше в единицах: 2 × 240 / 300 = 1.6 → те же 2 px */
.pz-ill--cup{width:calc(300px * var(--pz-k));aspect-ratio:240/168;stroke-width:1.6}
.pz-ill--coins{width:calc(180px * var(--pz-k));aspect-ratio:180/84}
.pz-ill--case{width:calc(180px * var(--pz-k));aspect-ratio:180/104}
.pz-ill--cert{width:calc(108px * var(--pz-k));aspect-ratio:108/102}

/* рисунок в малых карточках — внизу справа, текст над ним не наезжает */
.pz-card--first .pz-card__text,
.pz-card--track .pz-card__text{margin-bottom:var(--space-24)}
.pz-ill--coins,.pz-ill--case{margin-top:auto;align-self:flex-end}

/* ---------- карточка фонда: главный акцент ---------- */
.pz-card--fund{
  grid-area:fund;padding:36px;
  border-color:rgba(69,182,252,.42);background:rgba(0,138,224,.06);
}
.pz-fund__body{width:100%}
.pz-fund__sum{
  margin:var(--space-16) 0 0;white-space:nowrap;
  font-family:var(--font-wide);font-weight:700;letter-spacing:-.025em;line-height:1.04;
  font-size:50px;font-size:clamp(34px, 16cqi, 66px);
  color:var(--mgts-blue-300);
}
.pz-fund__split{
  margin:var(--space-12) 0 0;font-family:var(--font-compact);font-weight:700;
  font-size:20px;line-height:26px;color:var(--granat-white);
}
.pz-fund__text{margin-top:var(--space-20);font-size:16px;line-height:24px;color:var(--granat-grey-100);max-width:22em}

/* кубок внизу по центру; линия под ним выходит за рисунок и обрезается краями карточки */
.pz-fund__art{
  display:flex;justify-content:center;align-items:flex-end;align-self:stretch;
  margin-top:auto;padding-top:var(--space-32);
}

/* ---------- сертификат: полоса на две колонки ---------- */
.pz-card--cert{
  grid-area:cert;display:grid;align-items:center;column-gap:28px;
  grid-template-columns:auto minmax(0,1fr) auto;
  padding:var(--space-24) var(--space-32);
}
.pz-cert__head{min-width:0;max-width:210px}
.pz-cert__title{
  margin:var(--space-8) 0 0;font-family:var(--font-compact);font-weight:700;
  font-size:24px;line-height:30px;color:var(--granat-white);
}
.pz-cert__text{
  margin:0;padding-left:28px;border-left:1px solid rgba(255,255,255,.12);
  font-size:14px;line-height:21px;max-width:34em;
}

/* ---------- прорисовка линий при появлении карточки ----------
   Класс pz--draw ставит script.js (только с JS и без «уменьшить движение»),
   поэтому без JS и при reduced-motion рисунки сразу видны целиком.
   Переход объявлен только у .is-in: линии прячутся мгновенно (карточка ещё прозрачна),
   а прорисовываются — когда карточка появилась. */
.pz--draw .pz-ill path{stroke-dasharray:1 1;stroke-dashoffset:1}
.pz--draw .is-in .pz-ill path{
  stroke-dashoffset:0;
  transition:stroke-dashoffset 1400ms var(--ease-standard) 350ms;
}
.pz--draw .is-in .pz-ill .pz-ground{transition-duration:1600ms;transition-delay:150ms}

/* ============================================================
   АДАПТИВ
   ============================================================ */
/* 1100–1199: полоса сертификата уже */
@media (min-width:1100px) and (max-width:1199px){
  .pz-card--cert{column-gap:24px;padding:var(--space-24) 28px}
  .pz-cert__text{padding-left:24px}
  .pz{--pz-k:.9}
}

/* 701–1099: фонд на всю ширину (текст слева, кубок справа), ниже две карточки, ниже сертификат */
@media (max-width:1099px){
  .pz{--pz-k:.9}
  .pz__grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"fund fund" "first track" "cert cert";
  }
  .pz-card--fund{flex-direction:row;align-items:stretch}
  /* текст сверху слева; снизу запас, чтобы линия под кубком (она идёт во всю ширину) не подходила к тексту */
  .pz-fund__body{flex:0 0 54%;width:auto;align-self:flex-start;padding-bottom:var(--space-32)}
  .pz-fund__sum{font-size:56px;font-size:clamp(34px, 8.4cqi, 72px)}
  /* правая колонка: кубок по центру, стоит на линии внизу карточки */
  .pz-fund__art{flex:1 1 auto;align-self:stretch;margin:0;padding:0}
  .pz-cert__head{max-width:none}
  .pz-cert__title{white-space:nowrap}
}

/* 701–800: в одну строку «Сертификат об участии» сжимает текст рядом — заголовок в две строки */
@media (min-width:701px) and (max-width:800px){
  .pz-cert__head{max-width:200px}
  .pz-cert__title{white-space:normal}
}

@media (max-width:900px){
  .pz-card{border-radius:14px}
  .pz-cert__text{padding-left:var(--space-24)}
  .pz-card--cert{column-gap:var(--space-24)}
}

/* ≤700: одна колонка */
@media (max-width:700px){
  .pz{--pz-k:.8}
  .pz__grid{
    grid-template-columns:minmax(0,1fr);gap:var(--space-16);
    grid-template-areas:"fund" "first" "track" "cert";
  }
  .pz-card{padding:var(--space-24);border-radius:12px}
  .pz-card--fund{flex-direction:column;align-items:flex-start;padding:28px 24px}
  .pz-fund__body{flex:none;width:100%;padding-bottom:0}
  .pz-fund__sum{font-size:44px;font-size:clamp(30px, 15.6cqi, 60px)}
  .pz-fund__art{flex:none;align-self:stretch;padding-top:var(--space-24)}
  .pz-fund__text{font-size:15px;line-height:22px}
  .pz-card__title--l{font-size:22px;line-height:28px}
  .pz-card__sum{font-size:34px;font-size:clamp(28px, 12cqi, 40px)}

  /* сертификат: надпись и заголовок слева, рисунок справа, ниже текст */
  .pz-card--cert{
    grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-16);
    padding:var(--space-24);
  }
  .pz-cert__head{grid-column:1;grid-row:1;align-self:center;max-width:none}
  .pz-cert__title{font-size:22px;line-height:28px;white-space:normal}
  .pz-ill--cert{grid-column:2;grid-row:1}
  .pz-cert__text{
    grid-column:1 / -1;grid-row:2;margin-top:var(--space-16);padding:var(--space-16) 0 0;max-width:none;
    border-left:0;border-top:1px solid rgba(255,255,255,.12);
  }
}

@media (max-width:420px){
  .pz{--pz-k:.72}
  .pz-fund__split{font-size:18px;line-height:24px}
}

/* ≤380: «Каждому участнику» рядом с рисунком не помещается — надпись во всю ширину, ниже заголовок и рисунок */
@media (max-width:380px){
  .pz-cert__head{display:contents}
  .pz-card--cert .pz-card__k{grid-column:1 / -1;grid-row:1}
  .pz-cert__title{grid-column:1;grid-row:2;align-self:start}
  .pz-ill--cert{grid-row:2;align-self:start;margin-top:var(--space-8)}
  .pz-cert__text{grid-row:3}
}

/* ---------- без движения: сразу готовое состояние ---------- */
@media (prefers-reduced-motion:reduce){
  .pz--draw .pz-ill path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
}

/* линия «пьедестала» под кубком во всю ширину карточки дублировала нижнюю рамку и оставляла пустую полосу — убрана */
.pz-card--fund .pz-ground{display:none}