/* ============================================================
   Rosatom — фирменный шрифт по брендбуку (п. 1.1.7).
   Право на веб-использование подтверждено заказчиком 23.09.2026.
   Подмножество: латиница, кириллица, пунктуация, стрелки.
   ============================================================ */
@font-face{
  font-family:"Rosatom"; font-style:normal; font-weight:300;
  src:url("../fonts/rosatom-300.woff2") format("woff2"); font-display:swap;
}
@font-face{
  font-family:"Rosatom"; font-style:normal; font-weight:400;
  src:url("../fonts/rosatom-400.woff2") format("woff2"); font-display:swap;
}
@font-face{
  font-family:"Rosatom"; font-style:normal; font-weight:700;
  src:url("../fonts/rosatom-700.woff2") format("woff2"); font-display:swap;
}
@font-face{
  font-family:"Rosatom"; font-style:italic; font-weight:400;
  src:url("../fonts/rosatom-400i.woff2") format("woff2"); font-display:swap;
}

/* ============================================================
   АтомМайнд 2.0 · «Рассветная трассировка»

   Палитра снята пипеткой с гайда заказчика («Цветовая гамма»).
   Синий ведёт, розовый — дозированный акцент 5–10 % по площади,
   как предписывает сам гайд. Фиолетового в системе нет: он
   существует только как точка перехода внутри градиента.
   Все контрасты посчитаны по WCAG 2.1 на фоне #02122F.
   ============================================================ */

:root{
  /* фон — «Тёмный» из гайда заказчика вместо чёрного */
  --bg:#02122F;
  --bg-2:#05183C;
  --bg-3:#081C44;
  --glass:rgba(255,255,255,.05);
  --hair:rgba(143,183,255,.12);
  --hair-2:rgba(143,183,255,.24);

  /* бренд */
  --blue:#002BFF;      /* основной   · белым 7.53:1 — заливка CTA      */
  --blue-2:#3A7BFF;    /* дополнит.  · 4.83:1 — границы, ссылки        */
  --blue-3:#8FB7FF;    /* светлый    · 9.19:1 — обводки, иконки        */
  --blue-hi:#1E44E8;   /* hover основной · белым 6.89:1                */
  --cta-a:#1536E0;     /* заливка кнопки, верх · белым 7.97:1           */
  --cta-b:#0A1F8C;     /* заливка кнопки, низ  · белым 13.23:1          */
  --pink:#F860E0;      /* акцент     · 6.85:1 — свет, hover, горизонт  */
  --pink-deep:#C42AB0; /* для светлых панелей · белым 4.88:1           */

  /* текст */
  --ink:#F4F7FF;       /* 17.34:1 */
  --ink-2:#A8B2C1;     /*  8.67:1 */
  --ink-3:#7D8797;     /*  5.12:1 — нижняя граница, только 16px+ */

  /* светлая панель */
  --panel-a:#F4F7FF;
  --panel-b:#D8E2F5;
  --panel-ink:#0A1A3D;     /* 13.12:1 на тёмном крае панели */
  --panel-ink-2:#4A5468;   /*  5.84:1 */
  --panel-accent:#002BFF;  /*  5.78:1 */

  /* служебные */
  --err:#FF6B79;
  --ok:#34D399;
  --field-bd:#4C6FA8;      /* 3.38:1 на заливке поля — граница различима */

  /* градиенты */
  --grad-dawn:linear-gradient(90deg,var(--pink),var(--blue-3) 50%,var(--pink));
  --grad-line:linear-gradient(90deg,var(--blue-2),var(--blue-3) 46%,var(--pink));
  --grad-line-lt:linear-gradient(90deg,var(--panel-accent),var(--pink-deep));

  --font:"Rosatom","Helvetica Neue","Segoe UI",Arial,sans-serif;

  /* геометрия */
  --shell:1360px;
  --pad:120px;
  --r-panel:26px;
  --r-card:16px;
  --r-field:10px;
  --hdr-h:76px;
}

/* Обводка-«шайни»: коническая заливка по border-box вращается через
   анимируемые custom properties. Где @property не поддержан, угол
   остаётся статическим — обводка просто не крутится, кнопка цела. */
@property --gradient-angle       { syntax:'<angle>';      inherits:false; initial-value:0deg; }
@property --gradient-angle-offset{ syntax:'<angle>';      inherits:false; initial-value:0deg; }
@property --gradient-percent     { syntax:'<percentage>'; inherits:false; initial-value:6%; }
@property --gradient-shine       { syntax:'<color>';      inherits:false; initial-value:#EAF1FF; }

@keyframes gradient-angle{ to{ --gradient-angle:360deg } }
@keyframes shimmer{ to{ rotate:360deg } }

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

html{scroll-behavior:smooth; scroll-padding-top:100px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  position:relative;
  margin:0;
  color:var(--ink);
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  /* Свечения по всей высоте документа. Синий ведёт; розовое пятно
     одно — у блока регистрации, чтобы удержать дозу акцента. */
  background-color:var(--bg);
  background-repeat:no-repeat;
  background-image:
    radial-gradient(720px 480px at 88%  7%, rgba(58,123,255,.17), transparent 70%),
    radial-gradient(620px 420px at  3% 21%, rgba(0,43,255,.20),   transparent 70%),
    radial-gradient(760px 500px at 95% 37%, rgba(58,123,255,.14), transparent 70%),
    radial-gradient(640px 430px at  2% 55%, rgba(248,96,224,.09), transparent 70%),
    radial-gradient(700px 470px at 93% 71%, rgba(58,123,255,.15), transparent 70%),
    radial-gradient(620px 420px at  5% 87%, rgba(0,43,255,.16),   transparent 70%);
}

h1,h2,h3,h4{margin:0; text-wrap:balance; line-height:1.15; font-weight:700; letter-spacing:-.015em}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
img,picture,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit; color:inherit}

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

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

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--blue); color:#fff; padding:12px 20px; border-radius:0 0 10px 0;
}
.skip:focus{left:0}

svg{fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}

/* ============================================================
   ПРЕЛОАДЕР
   Перекрывает страницу до load. Снимается классом .gone, после
   анимации получает display:none, чтобы не ловить фокус.
   ============================================================ */
.preload{
  position:fixed; inset:0; z-index:300;
  display:grid; place-items:center;
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(248,96,224,.16), transparent 70%),
    radial-gradient(90% 70% at 50% 120%, rgba(0,43,255,.30), transparent 70%),
    var(--bg);
  transition:opacity .55s ease, visibility .55s ease;
}
.preload.gone{opacity:0; visibility:hidden}
.preload.done{display:none}
.preload-in{display:flex; flex-direction:column; align-items:center; text-align:center; padding-inline:24px}
.preload-logo{height:clamp(40px,5vw,58px); width:auto; opacity:0; animation:pre-up .7s .05s ease forwards}
.preload-name{
  margin-top:clamp(20px,3vh,30px);
  font-size:clamp(24px,4vw,44px); font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:.01em; color:var(--ink);
  opacity:0; animation:pre-up .7s .18s ease forwards;
}
.preload-sub{
  margin-top:12px; max-width:30ch;
  font-size:clamp(13px,1.5vw,16px); font-weight:300; line-height:1.4; color:var(--ink-2);
  opacity:0; animation:pre-up .7s .3s ease forwards;
}
.preload-bar{
  position:relative; overflow:hidden;
  margin-top:clamp(26px,4vh,40px);
  width:min(240px,52vw); height:2px; border-radius:2px;
  background:rgba(143,183,255,.16);
  opacity:0; animation:pre-up .7s .42s ease forwards;
}
.preload-bar i{
  position:absolute; inset:0; display:block; border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--blue-3),var(--pink),transparent);
  transform:translateX(-100%);
  animation:pre-bar 1.35s .5s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes pre-up{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none}}
@keyframes pre-bar{to{transform:translateX(100%)}}

/* ============================================================
   ЭЛЕМЕНТЫ ФОНА
   Стеклянные объекты заказчика 256–264 за блоками: чуть видны,
   въезжают при появлении секции в кадре. Пружинная кривая и
   лёгкий наклон — как в quantumconference.
   ============================================================ */
.orb{
  position:absolute; z-index:-1; pointer-events:none;
  width:clamp(150px,18vw,300px); height:auto;
  opacity:0; filter:saturate(.95);
  transition:opacity 1.1s cubic-bezier(.34,1.56,.64,1),
             transform 1.1s cubic-bezier(.34,1.56,.64,1);
}
.orb.in{opacity:.55}
.orb--a{top:4%;    right:calc(var(--edge) - 70px); transform:translate(70px,-46px) rotate(18deg)}
.orb--b{bottom:6%;  left:calc(var(--edge) - 80px);  transform:translate(-70px,46px) rotate(-14deg); width:clamp(130px,15vw,250px)}
.orb--c{top:44%;    left:calc(var(--edge) - 85px);  transform:translate(-80px,-40px) rotate(-22deg)}
.orb--d{top:34%;    right:calc(var(--edge) - 65px); transform:translate(80px,-40px) rotate(24deg); width:clamp(130px,15vw,240px)}
.orb--e{top:2%;     right:calc(var(--edge) - 55px); transform:translate(70px,-50px) rotate(-16deg)}
.orb--f{top:46%;    left:calc(var(--edge) - 70px);  transform:translate(-70px,30px) rotate(20deg); width:clamp(120px,13vw,210px)}
.orb--g{bottom:10%; right:calc(var(--edge) - 70px); transform:translate(80px,40px) rotate(-19deg)}
.orb--h{bottom:8%;  left:calc(var(--edge) - 90px);  transform:translate(-80px,50px) rotate(15deg); width:clamp(140px,16vw,260px)}
.orb--a.in{transform:translate(0,0) rotate(18deg)}
.orb--b.in{transform:translate(0,0) rotate(-14deg)}
.orb--c.in{transform:translate(0,0) rotate(-22deg)}
.orb--d.in{transform:translate(0,0) rotate(24deg)}
.orb--e.in{transform:translate(0,0) rotate(-16deg); opacity:.34}
.orb--f.in{transform:translate(0,0) rotate(20deg)}
.orb--g.in{transform:translate(0,0) rotate(-19deg)}
.orb--h.in{transform:translate(0,0) rotate(15deg)}

/* ============================================================
   ФОНОВЫЕ ЭФФЕКТЫ · WebGL
   Холст отдаёт прозрачность там, где шейдер тёмный, поэтому
   ложится на фон без режимов наложения. Маска гасит эффект в
   середине кадра — под текстом, чтобы не терять контраст.
   ============================================================ */
.fx{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:-3; display:block; pointer-events:none;
  opacity:0; transition:opacity 1.1s ease;
}
.fx.fx-on{opacity:1}
/* Две маски пересечением: круглое «окно» полностью убирает сияние
   из-под текстового блока (иначе светлая прядь роняет контраст
   розового края слогана до 2.9:1), а нижняя гасит его у горизонта,
   чтобы не замутить рассвет. */
.fx-hero{
  -webkit-mask-image:
    radial-gradient(74% 62% at 50% 42%, rgba(0,0,0,0) 0 30%, rgba(0,0,0,.46) 58%, #000 84%),
    linear-gradient(180deg, #000 0 58%, rgba(0,0,0,.40) 82%, rgba(0,0,0,0) 97%);
  -webkit-mask-composite:source-in;
  mask-image:
    radial-gradient(74% 62% at 50% 42%, rgba(0,0,0,0) 0 30%, rgba(0,0,0,.46) 58%, #000 84%),
    linear-gradient(180deg, #000 0 58%, rgba(0,0,0,.40) 82%, rgba(0,0,0,0) 97%);
  mask-composite:intersect;
}

/* ============================================================
   ПАТТЕРН · «Рассветная трассировка»
   Сетка скруглённых углов из референсов заказчика. Трассы идут
   градиентом: холодный синий вверху, розовый у нижней кромки.
   ============================================================ */
.pattern-defs{position:absolute; width:0; height:0; overflow:hidden}

.trace{
  position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
/* сетка — чистый CSS, ноль запросов */
.trace::before{
  content:""; position:absolute; inset:-1px;
  background:
    repeating-linear-gradient(90deg, rgba(143,183,255,.075) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg,  rgba(143,183,255,.05)  0 1px, transparent 1px 120px);
}
.trace svg{position:absolute; inset:0; width:100%; height:100%; stroke:none}
.trace-path{fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.trace-node{fill:var(--pink); stroke:none}

/* бегущий свет по трассе */
.trace-run{
  fill:none; stroke-width:2.2; stroke-linecap:round;
  stroke-dasharray:90 1400; stroke-dashoffset:1490;
  animation:trace-run 11s linear infinite;
}
.trace-run.d2{animation-delay:-3.7s}
.trace-run.d3{animation-delay:-7.4s}
@keyframes trace-run{to{stroke-dashoffset:0}}

/* ============================================================
   КНОПКИ
   Розовая заливка с белым текстом даёт 2.71:1 и не проходит AA,
   поэтому розовый в кнопке работает светом, а не заливкой.
   ============================================================ */
/* Заливка глубокая, а не электрическая: белый держит 7.97:1 в худшей
   точке. Вращающаяся коническая обводка идёт по border-box; под ней
   лежит непрерывная светлая кромка внутренней тенью — она и даёт
   границе компонента 4.6:1, иначе конус оставлял бы кнопку без
   очерченного края. На наведении вся обводка уходит в розовый. */
.btn{
  --hl:var(--blue-3);
  --duration:4.6s;
  --ease:cubic-bezier(.25,1,.5,1);
  position:relative; overflow:hidden; isolation:isolate; cursor:pointer;
  display:inline-flex; align-items:center; gap:14px;
  height:54px; padding:0 30px;
  border:1px solid transparent; border-radius:999px;
  color:#fff;
  font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap;
  background:
    linear-gradient(162deg,var(--cta-a),var(--cta-b)) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--hl) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--hl) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow:inset 0 0 0 1px rgba(143,183,255,.55), 0 0 24px rgba(248,96,224,.20);
  animation:gradient-angle var(--duration) linear infinite;
  transition:box-shadow .5s var(--ease),
             --gradient-angle-offset .8s var(--ease),
             --gradient-percent .8s var(--ease),
             --gradient-shine .8s var(--ease);
}
/* точечная фактура, проявляется узким сектором */
.btn::before{
  content:""; pointer-events:none; position:absolute;
  left:50%; top:50%; translate:-50% -50%; z-index:-1;
  width:calc(100% - 6px); height:calc(100% - 6px); border-radius:inherit;
  background:radial-gradient(circle at 2px 2px, rgba(255,255,255,.9) .5px, transparent 0) padding-box;
  background-size:4px 4px; background-repeat:space;
  -webkit-mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg), #000, transparent 10% 90%, #000);
  mask-image:conic-gradient(from calc(var(--gradient-angle) + 45deg), #000, transparent 10% 90%, #000);
  opacity:.34;
}
/* внутреннее мерцание */
.btn::after{
  content:""; pointer-events:none; position:absolute;
  left:50%; top:50%; translate:-50% -50%; z-index:-1;
  width:100%; aspect-ratio:1;
  background:linear-gradient(-50deg, transparent, var(--hl), transparent);
  -webkit-mask-image:radial-gradient(circle at bottom, transparent 40%, #000);
  mask-image:radial-gradient(circle at bottom, transparent 40%, #000);
  opacity:.38;
  animation:shimmer calc(var(--duration) * 1.6) linear infinite;
}
.btn:is(:hover,:focus-visible){
  --hl:var(--pink);
  --gradient-percent:22%;
  --gradient-angle-offset:95deg;
  --gradient-shine:#FFC9F4;
  box-shadow:inset 0 0 0 1px var(--pink), 0 0 46px rgba(248,96,224,.55);
}
.btn:active{translate:0 1px}
.btn:active{transform:scale(.975)}
.btn-lg{height:60px; padding:0 10px 0 34px}
.btn-sm{height:44px; padding:0 22px; font-size:12px; letter-spacing:.1em}
.btn-arw{
  width:40px; height:40px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.20);
  display:grid; place-items:center; font-size:17px; letter-spacing:0;
  transition:transform .18s ease, background .18s ease;
  position:relative; z-index:1;
}
.btn:hover .btn-arw{transform:translateX(3px); background:rgba(255,255,255,.28)}
.btn[disabled]{opacity:.6; cursor:progress}

/* вторичная — контур */
.btn-out{
  display:inline-flex; align-items:center; gap:12px;
  height:54px; padding:0 28px; border-radius:999px;
  background:transparent; color:var(--ink);
  border:1px solid var(--blue-3);              /* 9.19:1 */
  font-size:14px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.btn-out:hover{
  border-color:var(--pink);
  background:rgba(248,96,224,.08);
  box-shadow:0 0 30px rgba(248,96,224,.25);
}

/* текстовая ссылка-кнопка */
.btn-ghost{
  display:inline-flex; align-items:center; gap:8px;
  font-size:14px; font-weight:400; letter-spacing:.04em;
  color:var(--ink-2); text-decoration:none;
  border-bottom:1px solid var(--hair-2); padding-bottom:3px;
  transition:color .18s ease, border-color .18s ease;
}
.btn-ghost:hover{color:var(--ink); border-color:var(--pink)}

/* ============ ХЕДЕР ============ */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:64px; display:flex; align-items:center;
  border-bottom:1px solid transparent;
  padding-top:env(safe-area-inset-top,0px);
  opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1), border-color .3s ease;
}
.hdr.stuck{
  opacity:1; transform:none; pointer-events:auto;
  background:rgba(2,18,47,.88);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border-bottom-color:var(--hair);
}
.hdr-in{
  width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:24px;
  display:flex; align-items:center; gap:28px;
}
.hdr-logo{flex:none; display:block}
.hdr-logo img{height:30px; width:auto}
.hdr-nav{display:flex; gap:26px; margin-left:auto}
.hdr-nav a{
  font-size:14px; font-weight:400; color:var(--ink-2); text-decoration:none;
  position:relative; padding-block:6px; transition:color .18s ease;
}
.hdr-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--pink); transition:right .25s ease;
}
.hdr-nav a:hover{color:var(--ink)}
.hdr-nav a:hover::after{right:0}
.burger{display:none}

.mobnav{
  position:fixed; inset:0; z-index:99;
  background:rgba(2,18,47,.97); backdrop-filter:blur(20px);
  padding:calc(var(--hdr-h) + 40px) 28px 40px;
  flex-direction:column; gap:8px;
}
.mobnav:not([hidden]){display:flex}
.mobnav nav{display:flex; flex-direction:column; gap:4px}
.mobnav a{
  font-size:24px; font-weight:700; letter-spacing:-.01em;
  text-decoration:none; padding-block:14px;
  border-bottom:1px solid var(--hair);
}
.mobnav-cta{margin-top:28px; align-self:flex-start}

/* ============================================================
   01 · ПЕРВЫЙ ЭКРАН
   Композиция симметричная, как на всех трёх баннерах заказчика:
   пара логотипов — дата/время/место — название — слоган — CTA.
   Кей-вижуал собран из арки, горизонта и зарева, без растра.
   ============================================================ */
.hero{
  position:relative; isolation:isolate;
  min-height:100svh;
  padding-top:64px; padding-bottom:96px;
  display:flex; align-items:center;
  overflow:hidden;
  text-align:center;
}

/* арка рассвета — дуга, у ног розовая, в зените светло-синяя */
/* Звёздное небо лежит ниже всего: приглушено и обрезано маской,
   чтобы дать первому экрану глубину и не спорить с текстом.
   В исходнике небо сине-фиолетовое — красный канал при подготовке
   файла срезан, средний оттенок теперь 230°, чистый синий. */
.hero-stars{
  position:absolute; inset:0; width:100%; height:100%; z-index:-4;
  object-fit:cover; object-position:50% 42%;
  opacity:.5; pointer-events:none;
  -webkit-mask-image:radial-gradient(86% 76% at 50% 38%, rgba(0,0,0,.35) 0 26%, #000 72%),
                     linear-gradient(180deg, #000 0 52%, rgba(0,0,0,.45) 78%, rgba(0,0,0,0) 96%);
  -webkit-mask-composite:source-in;
  mask-image:radial-gradient(86% 76% at 50% 38%, rgba(0,0,0,.35) 0 26%, #000 72%),
             linear-gradient(180deg, #000 0 52%, rgba(0,0,0,.45) 78%, rgba(0,0,0,0) 96%);
  mask-composite:intersect;
}

.hero-art{position:absolute; inset:0; z-index:-2; pointer-events:none}
/* overflow:visible обязателен: на широких экранах бокс SVG (1760 px)
   уже окна, и его кромка резала дугу тупым обрывом прямо в кадре.
   Без обрезки дуга доходит до собственных концов, где градиент уже
   сведён в ноль — растворение получается само. */
.hero-arc{
  position:absolute; left:50%; bottom:0; translate:-50% 0;
  width:min(1760px,146vw); height:89%;
  overflow:visible;
  filter:drop-shadow(0 0 22px rgba(199,124,240,.45));
}
.hero-arc path{fill:none; stroke-width:2.4; stroke-linecap:round}

/* зарево из-за горизонта */
/* Слои не смешиваются в фиолет: широкий синий лежит низко и растянут
   по горизонтали, розовый — узкое горячее ядро у самой линии горизонта,
   белый — вспышка в центре. Так же устроен баннер заказчика «4 1». */
.dawn{
  position:absolute; inset:auto 0 -4% 0; height:54%; z-index:-2; pointer-events:none;
  background:
    /* белое ядро */
    radial-gradient(17% 27% at 50%  99%, rgba(255,255,255,.72), rgba(255,255,255,0) 68%),
    /* розовая зона: в ядре почти непрозрачна, иначе смешается с синим в фиолет */
    radial-gradient(40% 48% at 50% 101%, rgba(250,105,226,.95) 0 14%, rgba(248,96,224,.62) 42%, rgba(248,96,224,0) 74%),
    /* синий приходит кольцом — в центре его нет, он охватывает розовое */
    radial-gradient(88%  64% at 50% 110%, rgba(58,123,255,.50) 0 30%, rgba(58,123,255,0) 78%),
    radial-gradient(126% 86% at 50% 120%, rgba(0,43,255,.58)   0 36%, rgba(0,43,255,0)   76%);
  filter:blur(4px);
}
.horizon{
  position:absolute; left:0; right:0; bottom:0; height:1px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(248,96,224,.5) 22%,rgba(234,241,255,.9) 50%,rgba(248,96,224,.5) 78%,transparent);
}
.horizon::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:180px;
  background:radial-gradient(50% 100% at 50% 100%, rgba(248,96,224,.26), transparent 72%);
}

.hero-in{position:relative; display:flex; flex-direction:column; align-items:center}

/* пара логотипов: заказчик и организатор в равных правах */
.hero-logos{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(20px,3.4vw,38px); margin-bottom:clamp(38px,6vh,64px);
}
.hero-logos img{width:auto}
.hero-logos .lg-am{height:clamp(38px,4.4vw,54px)}
.hero-logos .lg-tvel{height:clamp(36px,4.2vw,52px)}
.lg-sep{width:1px; align-self:stretch; background:var(--hair-2); flex:none}

.hero-meta{
  display:flex; align-items:center; justify-content:center;
  gap:12px; flex-wrap:wrap;
  font-size:clamp(12px,1.4vw,14px); font-weight:400;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2); margin-bottom:clamp(22px,3vh,34px);
}
.hero-meta i{color:var(--pink); font-style:normal}

.hero-h1{display:flex; flex-direction:column; align-items:center; gap:clamp(14px,2.2vh,24px)}
.hero-name{
  font-size:clamp(34px,7vw,88px); font-weight:700; line-height:1;
  text-transform:uppercase; letter-spacing:.005em; color:var(--ink);
}
.hero-dawn{
  font-size:clamp(30px,5.4vw,66px); font-weight:700; line-height:1.02; letter-spacing:-.018em;
  background:var(--grad-dawn);               /* худшая точка 6.83:1 */
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-bottom:.06em;                      /* иначе background-clip срезает хвосты букв */
}
.hero-sub{
  font-size:clamp(15px,2.4vw,30px); font-weight:700; line-height:1.24;
  text-transform:uppercase; letter-spacing:.07em; color:var(--ink);
  max-width:none;
}
.br-lg{display:none}
@media (min-width:768px){ .br-lg{display:inline} }
.hero-tag{
  margin-top:clamp(18px,2.6vh,28px);
  font-size:clamp(15px,1.8vw,20px); font-weight:300; color:var(--ink-2);
}

.hero-act{margin-top:clamp(32px,5vh,52px)}

.hero-scroll{
  position:absolute; left:50%; bottom:34px; translate:-50% 0; z-index:1;
  display:grid; place-items:center; width:34px; height:34px;
  color:var(--ink); opacity:.85;
  filter:drop-shadow(0 1px 6px rgba(2,18,47,.85));
  animation:bob 2.6s ease-in-out infinite;
}
.hero-scroll svg{width:22px; height:22px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* ============ СЕКЦИИ ============ */
.sec{
  padding-block:var(--pad); position:relative; isolation:isolate;
  --edge:max(0px, calc((100% - var(--shell)) / 2));
}
.sec-tight{padding-block:calc(var(--pad) * .6)}
/* горизонтальных разделителей между секциями нет — блоки разводит
   только сетка паттерна и смена фоновой подсветки */

.sec-top{margin-bottom:52px; max-width:860px}
.sec-top h2{
  font-size:clamp(26px,4vw,44px); font-weight:700; letter-spacing:-.018em;
  width:fit-content; max-width:100%;
}
.sec-top h2::after{
  content:""; display:block; width:100%; height:3px; margin-top:20px;
  border-radius:2px; background:var(--grad-line);
}
.panel--light .sec-top h2::after{background:var(--grad-line-lt)}

.sec-top--row{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; max-width:none;
}
.sec-lede{margin-top:20px; color:var(--ink-2); max-width:64ch; font-size:18px}

/* ============ ПАНЕЛИ ============ */
.panel{border-radius:var(--r-panel); padding:clamp(26px,4vw,52px)}
.panel.glass{
  background:var(--glass);
  border:1px solid rgba(143,183,255,.14);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  box-shadow:0 0 70px rgba(0,43,255,.22);
}
.panel--light{
  background:linear-gradient(158deg,var(--panel-a),var(--panel-b));
  color:var(--panel-ink);
  border-radius:var(--r-panel);
  padding:clamp(26px,4vw,52px);
  box-shadow:0 0 90px rgba(0,43,255,.30);
}
.panel--light h2,.panel--light h3,.panel--light h4{color:var(--panel-ink)}
.panel--light p{color:var(--panel-ink-2)}
.panel--light b{color:var(--panel-ink)}
.panel--light a{color:var(--panel-accent)}
.panel--light .btn-ghost{color:var(--panel-ink-2); border-bottom-color:rgba(10,26,61,.26)}
.panel--light .btn-ghost:hover{color:var(--panel-ink); border-bottom-color:var(--pink-deep)}

/* ============================================================
   02 · О КОНФЕРЕНЦИИ
   Шесть абзацев заказчика разложены по весу: вводный крупно,
   два опорных в колонки, «центральное событие» — тёмной выноской
   со стеклянным кубом, выставка и деловая часть — двумя картами.
   ============================================================ */
.about-lead{
  font-size:clamp(18px,2.1vw,23px); line-height:1.5;
  color:var(--panel-ink) !important; font-weight:400;
  max-width:none; letter-spacing:-.01em;
}

.about-cols{
  display:grid; grid-template-columns:1fr 1.18fr; gap:clamp(26px,3.4vw,48px);
  margin-top:clamp(30px,4vw,48px);
  padding-top:clamp(28px,3.6vw,42px);
  border-top:1px solid rgba(10,26,61,.14);
}
.about-cols p{font-size:16.5px; line-height:1.66}
.about-cols p + p{margin-top:16px}

/* тёмная выноска внутри светлой панели */
.about-key{
  position:relative; overflow:hidden;
  margin-top:clamp(32px,4.4vw,56px);
  border-radius:var(--r-panel);
  background:
    radial-gradient(120% 140% at 82% 108%, rgba(248,96,224,.30), transparent 62%),
    radial-gradient(90% 120% at 10% -10%, rgba(0,43,255,.55), transparent 66%),
    var(--bg);
  padding:clamp(28px,3.8vw,46px);
  display:grid; grid-template-columns:1fr minmax(0,300px); gap:clamp(20px,3.4vw,48px); align-items:center;
  box-shadow:inset 0 0 0 1px rgba(143,183,255,.16);
}
/* Картинка развёрнута по горизонтали: после отражения пучок линий
   сходится справа — ровно там, где стоит схема с узлом. */
.key-bg{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  object-fit:cover; object-position:58% 50%;
  transform:scaleX(-1);
}
/* Слева, под текстом, картинка почти гасится; справа остаётся видна. */
.key-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(97deg,
      rgba(2,18,47,.96) 0 30%,
      rgba(2,18,47,.86) 44%,
      rgba(2,18,47,.55) 62%,
      rgba(2,18,47,.18) 80%,
      rgba(2,18,47,.06) 100%),
    radial-gradient(70% 120% at 12% 50%, rgba(2,18,47,.75), transparent 70%);
}
.about-key > p,
.about-key > .key-art{position:relative; z-index:2}
.about-key p{
  color:var(--ink) !important;                 /* 17.34:1 */
  font-size:clamp(19px,2.2vw,27px); font-weight:400; line-height:1.36;
  letter-spacing:-.012em; max-width:30ch;
}
.about-key b{color:var(--ink); font-weight:700}
/* Схема «единого инструмента»: трассы сходятся в один узел,
   по ним бежит свет, узел пульсирует. */
.key-art{width:100%; height:auto; overflow:visible}
.key-trace path{fill:none; stroke:rgba(143,183,255,.30); stroke-width:1.4; stroke-linecap:round}
.key-run path{
  fill:none; stroke:var(--blue-3); stroke-width:2; stroke-linecap:round;
  stroke-dasharray:34 400; stroke-dashoffset:434;
  animation:key-run 4.4s linear infinite;
}
.key-run .r2{stroke:var(--pink); animation-delay:-1.1s}
.key-run .r3{animation-delay:-2.2s}
.key-run .r4{animation-delay:-3.3s}
@keyframes key-run{to{stroke-dashoffset:0}}
.key-dot circle{fill:var(--blue-3); stroke:none; opacity:.55}
.key-halo{
  fill:none; stroke:var(--pink); stroke-width:1; opacity:.35;
  transform-origin:232px 125px; animation:key-pulse 3.2s ease-in-out infinite;
}
.key-ring{fill:none; stroke:var(--blue-3); stroke-width:1.4; opacity:.7}
.key-hub{fill:var(--pink); stroke:none; filter:drop-shadow(0 0 10px rgba(248,96,224,.9))}
@keyframes key-pulse{
  0%,100%{transform:scale(.88); opacity:.42}
  50%    {transform:scale(1.10); opacity:.12}
}

.about-more{
  display:grid; grid-template-columns:1.65fr 1fr; gap:clamp(18px,2.2vw,26px);
  margin-top:clamp(18px,2.2vw,26px);
}
.about-card{
  border-radius:var(--r-card);
  background:rgba(10,26,61,.05);
  box-shadow:inset 0 0 0 1px rgba(10,26,61,.12);
  padding:clamp(22px,2.6vw,32px);
}
.about-card p{font-size:16px; line-height:1.64}
.about-card--accent{
  display:flex; flex-direction:column; justify-content:center; gap:16px;
  background:
    linear-gradient(150deg, rgba(0,43,255,.10), rgba(248,96,224,.12));
  box-shadow:inset 0 0 0 1px rgba(0,43,255,.22);
}
.about-card--accent p{font-size:17px; color:var(--panel-ink) !important; font-weight:400}

/* ============ 03 · О ПРОДУКТЕ ============ */
.prodshot{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center;
  background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-panel);
  padding:clamp(22px,3vw,40px);
}
.prodshot-img{
  position:relative; border-radius:18px; padding:2px;
  background:linear-gradient(140deg,var(--blue-3),var(--blue) 46%,var(--pink));
  box-shadow:0 0 60px rgba(0,43,255,.40);
}
.prodshot-img picture{display:block; border-radius:16px; overflow:hidden; position:relative}
.prodshot-img picture::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(160deg,transparent 58%,rgba(0,43,255,.24));
}
.prodshot-txt{display:flex; flex-direction:column; gap:22px}
.prodshot-txt li{display:flex; align-items:flex-start; gap:18px}
.pico{
  flex:none; width:48px; height:48px; display:grid; place-items:center;
  color:var(--blue-3);
}
.pico svg{width:44px; height:44px; stroke-width:1.4}
.pico svg rect:first-child{stroke:rgba(143,183,255,.34)}
.prodshot-txt p{color:var(--ink-2); font-size:16.5px; line-height:1.62}
.prodshot-txt b{color:var(--ink); font-weight:700}

/* ============ 04 · ПРОГРАММА ============ */
.prog-when{
  display:flex; align-items:center; gap:12px; padding-bottom:2px;
  font-size:15px; font-weight:400; color:var(--ink-2); white-space:nowrap;
}
.prog-when i{color:var(--pink); font-style:normal}

.prog{margin:0}
.prog li{
  display:grid; grid-template-columns:76px 1fr; gap:26px;
  padding-block:30px; border-bottom:1px solid rgba(10,26,61,.14);
}
.prog li:last-child{border-bottom:none}
.prog-n{
  font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
  background:var(--grad-line-lt);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.prog-body h3{font-size:20px; color:var(--panel-ink); margin-bottom:12px; letter-spacing:-.01em}
.prog-body p{font-size:16px; color:var(--panel-ink-2); line-height:1.62; max-width:74ch}
.prog-note{
  margin-top:28px; padding-top:22px; border-top:1px solid rgba(10,26,61,.14);
  font-size:14.5px; color:var(--panel-ink-2);
}

/* ============ 05 · РЕГИСТРАЦИЯ ============ */
.reg{display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:start}
/* стеклянное кольцо — ядро за формой */

#regform{display:grid; grid-template-columns:1fr 1fr; gap:20px 18px}

.f-opt{
  font-size:12px; color:var(--ink-3); letter-spacing:.02em;
  margin-left:6px; text-transform:lowercase;
}
.req-note{
  grid-column:1/-1; font-size:13px; color:var(--ink-3);
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:2px;
}
.f{display:flex; flex-direction:column; min-width:0}
.f-wide{grid-column:1/-1}
/* ФИО тремя полями: у ДепРег это три отдельных поля, и разбирать одну
   строку на сервере было гаданием. Правило стоит ниже .f намеренно —
   у них одинаковая специфичность, и display:flex из .f иначе побеждает. */
.f-fio{display:grid; grid-template-columns:1fr 1fr; gap:20px 18px}
.f-fio > .f:first-child{grid-column:1/-1}   /* фамилия на всю строку */
.f label{font-size:13.5px; color:var(--ink-2); margin-bottom:8px}
.f label i{color:var(--pink); font-style:normal; margin-left:2px}
.f input[type=text],.f input[type=email],.f input[type=tel]{
  height:54px; padding-inline:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--field-bd); border-radius:var(--r-field);
  color:var(--ink); font:inherit; font-size:15.5px;
  transition:border-color .18s ease, box-shadow .18s ease;
  min-width:0; width:100%;
}
.f input::placeholder{color:var(--ink-3)}
.f input:hover{border-color:#5F84BE}
.f input:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(248,96,224,.28)}
.f.ok input{border-color:rgba(52,211,153,.55)}
.f.bad input{border-color:var(--err)}
.f-e{font-size:13px; color:var(--err); margin-top:7px; min-height:0}
.f-e:empty{display:none}

.f-check{flex-direction:row; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-top:4px}
.f-check input{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; flex:none; margin-top:2px;
  border:1px solid var(--field-bd); border-radius:6px;
  background:rgba(255,255,255,.04); cursor:pointer;
  transition:border-color .18s ease, background .18s ease;
}
.f-check input:checked{
  border-color:var(--blue-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:12px 10px;
  background-color:var(--cta-a);
}
.f-check input:focus-visible{outline:2px solid var(--pink); outline-offset:2px}
.f-check label{flex:1 1 240px; margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); cursor:pointer}
.f-check label a{color:var(--blue-3); text-underline-offset:3px}
.f-check.bad input{border-color:var(--err)}
.f-check .f-e{flex-basis:100%; margin-top:2px}

/* ============================================================
   ПОДСКАЗКИ DaData
   Список висит под полем; поле остаётся обычным, если сервис молчит.
   ============================================================ */
.f{position:relative}
.sg{
  position:absolute; left:0; right:0; top:100%; z-index:40;
  margin-top:6px; max-height:290px; overflow-y:auto;
  background:#08183A; border:1px solid var(--field-bd); border-radius:var(--r-field);
  box-shadow:0 18px 44px rgba(0,0,0,.5);
}
.sg[hidden]{display:none}
.sg-item{
  display:flex; flex-direction:column; gap:3px; width:100%;
  padding:11px 15px; text-align:left; cursor:pointer;
  background:none; border:none; border-bottom:1px solid rgba(143,183,255,.09);
}
.sg-item:last-child{border-bottom:none}
.sg-item:hover,
.sg-item[aria-selected="true"]{background:rgba(58,123,255,.18)}
.sg-item[aria-selected="true"]{box-shadow:inset 2px 0 0 var(--pink)}
.sg-main{font-size:14.5px; color:var(--ink); line-height:1.35}
.sg-sub{font-size:12.5px; color:var(--ink-2); line-height:1.35}

.hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}

.f-act{grid-column:1/-1; display:flex; flex-direction:column; gap:14px; margin-top:6px}
.f-act .btn{align-self:flex-start}
.f-fail{font-size:14px; color:var(--err)}

.reg-side{display:flex; flex-direction:column; gap:14px}
.side-card{
  background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-card);
  padding:24px 24px 26px;
}
/* Иконки — те же кнопки в круге: та же заливка, та же вращающаяся
   коническая обводка, тот же розовый на наведении карточки. */
.side-ic{
  --hl:var(--blue-3);
  --duration:6s;
  --ease:cubic-bezier(.25,1,.5,1);
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; place-items:center; width:48px; height:48px;
  border:1px solid transparent; border-radius:50%;
  color:#fff; margin-bottom:16px;
  background:
    linear-gradient(162deg,var(--cta-a),var(--cta-b)) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),
      transparent,
      var(--hl) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--hl) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow:inset 0 0 0 1px rgba(143,183,255,.55), 0 0 20px rgba(248,96,224,.18);
  animation:gradient-angle var(--duration) linear infinite;
  transition:box-shadow .5s var(--ease),
             --gradient-percent .8s var(--ease),
             --gradient-shine .8s var(--ease);
}
.side-ic svg{position:relative; z-index:1}
.side-card:hover .side-ic{
  --hl:var(--pink);
  --gradient-percent:22%;
  --gradient-shine:#FFC9F4;
  box-shadow:inset 0 0 0 1px var(--pink), 0 0 32px rgba(248,96,224,.5);
}
.side-ic svg{width:22px; height:22px}
.side-card h3{font-size:16px; margin-bottom:8px}
.side-card p{font-size:14.5px; color:var(--ink-2); line-height:1.55}
.side-card a{
  display:inline-block; margin-top:10px; font-size:14.5px;
  color:var(--blue-3); text-underline-offset:3px;
}

/* ============ 06 · КОНТАКТЫ ============ */
/* Правая колонка по содержимому, а не по доле сетки: при 1.3fr/1fr
   между текстом и почтой оставалось 250 px пустоты. Разделитель
   задаёт структуру вместо случайного зазора. */
.cont{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(28px,4vw,60px); align-items:center;
  border-radius:var(--r-panel); padding:clamp(28px,3.4vw,48px);
}
.cont.panel--light{border:none}
.cont-org p{font-size:15.5px; max-width:44ch; line-height:1.6}
.cont-mail{
  display:flex; flex-direction:column; gap:10px;
  padding-left:clamp(28px,4vw,60px);
  border-left:1px solid rgba(10,26,61,.14);
}
.cont-mail span{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--panel-ink-2)}
.cont-mail a{
  font-size:clamp(19px,2.3vw,27px); font-weight:700; letter-spacing:-.01em;
  text-decoration:none; color:var(--panel-accent);
  border-bottom:1px solid rgba(0,43,255,.38); padding-bottom:5px; align-self:flex-start;
  transition:border-color .2s ease, color .2s ease;
}
.cont-mail a:hover{color:var(--pink-deep); border-bottom-color:var(--pink-deep)}

/* ============ 07 · КАК ДОБРАТЬСЯ ============ */
.route{display:grid; grid-template-columns:1fr 1.5fr; gap:24px; align-items:stretch}
.route-info{
  position:relative;
  background:var(--bg-2); border:1px solid var(--hair); border-radius:var(--r-panel);
  padding:34px 30px; display:flex; flex-direction:column;
}
.route-orb{
  position:absolute; right:-14px; top:-78px; width:152px; height:auto;
  opacity:.9; pointer-events:none; z-index:2;
  filter:drop-shadow(0 16px 34px rgba(0,43,255,.45));
}
.route-info > *:not(.route-orb){position:relative; z-index:1}
.route-addr{padding-bottom:22px; border-bottom:1px solid var(--hair); margin-bottom:22px}
.route-addr h3{font-size:19px; margin-bottom:8px}
.route-addr p{color:var(--ink-2); font-size:15.5px}
.route-info h4{font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:16px}
.metro{display:flex; flex-direction:column; gap:14px; margin-bottom:28px}
.metro li{display:flex; align-items:center; gap:11px; font-size:15px}
.metro b{margin-left:auto; font-size:13.5px; font-weight:400; color:var(--ink-3); white-space:nowrap}
.m-dot{width:10px; height:10px; border-radius:50%; background:var(--m); flex:none}
.route-info .btn-ghost{margin-top:auto; align-self:flex-start}

.route-map{
  border-radius:var(--r-panel); overflow:hidden; border:1px solid var(--hair);
  background:var(--bg-2); min-height:400px; position:relative;
}
.map-load{
  position:absolute; inset:0; width:100%; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  background:
    radial-gradient(60% 60% at 50% 46%, rgba(0,43,255,.30), transparent 70%),
    repeating-linear-gradient(0deg, rgba(143,183,255,.05) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(90deg, rgba(143,183,255,.05) 0 1px, transparent 1px 44px),
    var(--bg-3);
  color:var(--ink); transition:background-color .2s ease;
}
.map-load:hover{background-color:#0B2252}
.map-pin{
  --hl:var(--blue-3); --duration:6s;
  position:relative; isolation:isolate;
  display:grid; place-items:center; width:58px; height:58px;
  border:1px solid transparent; border-radius:50%; color:#fff;
  background:
    linear-gradient(162deg,var(--cta-a),var(--cta-b)) padding-box,
    conic-gradient(from var(--gradient-angle),
      transparent, var(--hl) var(--gradient-percent),
      var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--hl) calc(var(--gradient-percent) * 3),
      transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow:inset 0 0 0 1px rgba(143,183,255,.55), 0 0 28px rgba(248,96,224,.30);
  margin-bottom:6px; animation:gradient-angle var(--duration) linear infinite;
  transition:box-shadow .4s ease;
}
.map-load:hover .map-pin{--hl:var(--pink); box-shadow:inset 0 0 0 1px var(--pink), 0 0 42px rgba(248,96,224,.55)}
.map-pin svg{width:27px; height:27px}
.map-cta{font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase}
.map-sub{font-size:13.5px; color:var(--ink-3)}
/* Яндекс.Карта в нашем визуале: контейнер даёт тёмную подложку и
   скруглённый край, метка — та же пилюля со свечением, что и кнопки. */
.route-map .ymap{position:absolute; inset:0; width:100%; height:100%}
.route-map .ymaps3x0--map{background:var(--bg-2) !important}
.route-map .ymaps3x0--map-copyrights{filter:saturate(.6) opacity(.75)}
.map-mark{
  position:relative; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50% 50% 50% 4px;
  transform:rotate(-45deg) translate(-2px,-2px);
  background:linear-gradient(162deg,var(--cta-a),var(--cta-b));
  border:1px solid var(--blue-3);
  box-shadow:0 0 0 6px rgba(248,96,224,.16), 0 0 26px rgba(248,96,224,.5);
}
.map-mark i{
  display:block; width:13px; height:13px; border-radius:50%;
  background:var(--pink); transform:rotate(45deg);
}
.map-tip{
  position:absolute; left:50%; bottom:calc(100% + 14px); translate:-50% 0;
  white-space:nowrap; padding:9px 14px; border-radius:10px;
  background:rgba(2,18,47,.94); border:1px solid var(--hair-2);
  color:var(--ink); font-size:13px; line-height:1.35;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.map-tip b{display:block; font-size:13.5px}
.map-tip span{color:var(--ink-2)}
.map-fail{
  position:absolute; inset:0; display:grid; place-items:center; padding:24px;
  text-align:center; color:var(--ink-2); font-size:15px; line-height:1.55;
}
.map-fail a{color:var(--blue-3)}

/* ============ ФУТЕР ============ */
.ftr{
  border-top:1px solid var(--hair);
  padding-block:52px 44px; padding-bottom:calc(44px + env(safe-area-inset-bottom,0px));
}
.ftr-in{display:grid; grid-template-columns:1fr auto; gap:32px 48px; align-items:start}
.ftr-logos{display:flex; align-items:center; gap:22px; margin-bottom:14px}
.ftr-logos img{width:auto}
.ftr-logos .lg-am{height:34px}
.ftr-logos .lg-tvel{height:32px}
.ftr-brand p{font-size:14.5px; color:var(--ink-2)}
.ftr-nav{display:flex; flex-direction:column; gap:10px; text-align:right}
.ftr-nav a{font-size:14px; color:var(--ink-2); text-decoration:none; transition:color .18s ease}
.ftr-nav a:hover{color:var(--blue-3)}
.ftr-cp{grid-column:1/-1; padding-top:26px; border-top:1px solid var(--hair); font-size:13px; color:var(--ink-2)}

/* ============ НАВЕРХ ============ */
.totop{
  position:fixed; right:32px; bottom:32px; z-index:90;
  width:52px; height:52px; border-radius:50%; border:1px solid var(--hair-2);
  background:rgba(5,24,60,.9); backdrop-filter:blur(12px);
  display:grid; place-items:center; cursor:pointer;
  transition:opacity .22s ease, transform .22s ease, border-color .18s ease, background .18s ease;
  margin-bottom:env(safe-area-inset-bottom,0px);
}
.totop[hidden]{display:none}
.totop.in{opacity:1; transform:translateY(0)}
.totop.out{opacity:0; transform:translateY(10px)}
.totop:hover{border-color:var(--pink); background:rgba(248,96,224,.16)}
.totop svg{width:21px; height:21px; stroke-width:1.9}

/* ============ МОДАЛКА ============ */
.modal{position:fixed; inset:0; z-index:150; display:grid; place-items:center; padding:24px}
.modal[hidden]{display:none}
.modal-bd{position:absolute; inset:0; background:rgba(1,8,22,.84); backdrop-filter:blur(10px)}
.modal-box{
  position:relative; width:100%; max-width:480px; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 112%, rgba(248,96,224,.22), transparent 60%),
    linear-gradient(180deg,#0A2150,#05183C);
  border:1px solid rgba(143,183,255,.26); border-radius:var(--r-panel);
  padding:44px 36px 38px;
  box-shadow:0 0 90px rgba(0,43,255,.45);
}
.modal-logo{height:40px; width:auto; margin:0 auto 24px}
.modal-ic{display:grid; place-items:center; width:58px; height:58px; margin:18px auto 20px; color:var(--ok)}
.modal-ic svg{width:58px; height:58px; stroke-width:1.5}
.modal-box h2{font-size:26px; margin-bottom:14px}
.modal-box p{color:var(--ink-2); font-size:15.5px}
.modal-when{
  margin-block:22px; padding:18px; border-radius:var(--r-card);
  background:rgba(255,255,255,.05); border:1px solid var(--hair);
  font-size:15px; line-height:1.6;
}
.modal-when b{color:var(--ink)}
.modal-mail{font-size:14px; margin-bottom:26px}
.modal-mail a{color:var(--blue-3)}

/* окно «почта уже зарегистрирована» */
.modal-ic--warn{color:var(--pink)}
.modal-mailbox{
  margin:14px auto 18px; padding:12px 18px; max-width:100%;
  border-radius:var(--r-card); word-break:break-all;
  background:rgba(248,96,224,.10); border:1px solid rgba(248,96,224,.32);
  color:var(--ink) !important; font-size:16px; font-weight:700;
}
.modal-act{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:24px}
.modal-act .btn,.modal-act .btn-out{height:48px; font-size:12.5px; padding-inline:22px}

/* ============ ПОЯВЛЕНИЕ ============ */
.js .sec-top,.js .panel,.js .prog,.js .prodshot,.js .side-card,
.js .route-info,.js .route-map,.js .cont{opacity:0; transform:translateY(16px)}
.js .seen{
  opacity:1; transform:none;
  transition:opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);
}
.js .side-card:nth-child(2){transition-delay:.07s}
.js .side-card:nth-child(3){transition-delay:.14s}

.js.revealed-all .sec-top,.js.revealed-all .panel,.js.revealed-all .prog,
.js.revealed-all .prodshot,.js.revealed-all .side-card,.js.revealed-all .route-info,
.js.revealed-all .route-map,.js.revealed-all .cont{opacity:1; transform:none}

@media print{
  .js .sec-top,.js .panel,.js .prog,.js .prodshot,
  .js .side-card,.js .route-info,.js .route-map,.js .cont{opacity:1 !important; transform:none !important}
}

/* ============ АДАПТИВ ============ */
@media (max-width:1024px){
  :root{--pad:96px; --shell:944px}
  .shell,.hdr-in{padding-inline:40px}
  .hdr-nav,.hdr-cta{display:none}
  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; margin-left:auto; padding:0;
    background:none; border:none; cursor:pointer;
  }
  .burger span{display:block; height:2px; width:24px; background:var(--ink); border-radius:2px; transition:transform .25s ease, opacity .2s ease}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .about-more{grid-template-columns:1fr}
  .reg{grid-template-columns:1fr}
  .reg-side{flex-direction:row; flex-wrap:wrap}
  .side-card{flex:1 1 240px}
  .route{grid-template-columns:1fr}
  .cont{grid-template-columns:1fr}
  .prodshot{grid-template-columns:1fr}
}

@media (max-width:767px){
  :root{--pad:72px}
  body{font-size:16px}
  .shell,.hdr-in{padding-inline:20px}

  /* первый экран держит высоту окна и на телефоне: рассвет должен
     дочитываться до линии горизонта, иначе метафора рассыпается */
  .hero{min-height:100svh; padding-top:32px; padding-bottom:92px}
  /* На узком экране slice показывал только погашенный зенит: viewBox
     2.29:1 против почти квадратного кадра срезал фланги. Даём элементу
     пропорцию самого viewBox — дуга влезает целиком, ножки с мягким
     входом оказываются у боковых кромок. */
  .hero-arc{width:100%; height:21%}

  .hero-h1{gap:12px}
  .hero-logos{gap:16px; margin-bottom:34px}
  .lg-sep{display:none}
  .hero-logos{flex-wrap:wrap}
  .hero-meta{gap:8px; letter-spacing:.1em; line-height:1.7}
  .hero-sub{max-width:none; letter-spacing:.05em}
  .hero-act{width:100%}
  .hero-act .btn{width:100%; justify-content:space-between}
  .hero-scroll{bottom:20px}
  .btn-lg{height:56px}

  .about-cols{grid-template-columns:1fr; gap:16px}
  .about-key{grid-template-columns:1fr; text-align:left}
  .about-key p{max-width:none}
  .about-key{grid-template-columns:1fr}
  .key-art{max-width:300px; justify-self:center}

  .sec-top{margin-bottom:34px}
  .sec-lede{font-size:16.5px}
  #regform{grid-template-columns:1fr}
  .f-fio{grid-template-columns:1fr; gap:20px}
  .orb{width:clamp(96px,30vw,150px)}
  .orb.in{opacity:.38}
  .orb--e.in{opacity:.24}
  .prog li{grid-template-columns:1fr; gap:10px; padding-block:24px}
  .prog-n{font-size:26px}
  .prog-body h3{font-size:18px}
  .cont-org{flex-direction:column; align-items:flex-start; gap:16px}
  .ftr-in{grid-template-columns:1fr}
  .ftr-nav{text-align:left}
  .totop{right:20px; bottom:20px; width:48px; height:48px}
  .modal-box{padding:34px 24px 30px}
  .f-act .btn{align-self:stretch; justify-content:space-between}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .trace-run,.key-run path{display:none}
  .preload-bar i{animation:none}
  .orb{transition:opacity .01ms}
  .btn::before,.btn::after{display:none}
  .btn,.side-ic,.map-pin{animation:none}
  .key-halo{animation:none}
  .js .sec-top,.js .panel,.js .prog,.js .prodshot,
  .js .side-card,.js .route-info,.js .route-map,.js .cont{opacity:1 !important; transform:none !important}
}