@font-face{font-family:'Onest';font-weight:400;font-display:swap;src:url(fonts/onest-400-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-weight:400;font-display:swap;src:url(fonts/onest-400-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
@font-face{font-family:'Onest';font-weight:500;font-display:swap;src:url(fonts/onest-500-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-weight:500;font-display:swap;src:url(fonts/onest-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
@font-face{font-family:'Onest';font-weight:600;font-display:swap;src:url(fonts/onest-600-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-weight:600;font-display:swap;src:url(fonts/onest-600-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
@font-face{font-family:'Onest';font-weight:800;font-display:swap;src:url(fonts/onest-800-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Onest';font-weight:800;font-display:swap;src:url(fonts/onest-800-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}
@font-face{font-family:'Unbounded';font-weight:500;font-display:swap;src:url(fonts/unbounded-500-cyr.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Unbounded';font-weight:500;font-display:swap;src:url(fonts/unbounded-500-lat.woff2) format('woff2');unicode-range:U+0000-00FF,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212}

/* Polymedia Immersive Day. Три сетки: 390, 768, 1440.
   1rem = 10 px сетки на любой ширине: числа в CSS — размеры сетки, делённые на 10. */
:root{
  color-scheme:dark;
  --ink:#040814;--white:#f2f5fa;--gray:#93a0b8;--soft:#c4cee0;--blue:#1a62f0;--sky:#7fb4ff;--link:#4684ff;--panel-ink:#10182e;--panel-gray:#3c4760;--card:#0b1532;
  --display:"Unbounded","Arial Black",sans-serif;--text:"Onest","Segoe UI",Arial,sans-serif;
  --grad:linear-gradient(180deg,#d0e3ff 0%,#52a2f7 51%,#1a62f0 100%);
  --grad-h:linear-gradient(90deg,#1a62f0 0%,#52a2f7 49%,#d0e3ff 100%);
  --lift:cubic-bezier(.2,.8,.2,1);
}
html{font-size:calc(100vw/39);scroll-behavior:smooth;scroll-padding-top:2rem;background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--white);font-family:var(--text);font-size:1.6rem;line-height:1.4;-webkit-font-smoothing:antialiased;overflow-x:clip}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{display:block;max-width:none}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0;font-weight:500}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:.2rem solid var(--sky);outline-offset:.3rem;border-radius:.4rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.d{display:none}
.page{position:relative;overflow:clip;max-width:1920px;margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;width:100%;height:5.2rem;border-radius:3rem;background:var(--blue);color:#fff;font-weight:600;font-size:2.4rem;line-height:1.33;transition:background .2s,transform .2s}
.btn:hover{background:#2f74ff;transform:translateY(-.2rem)}
.btn.grad{background:linear-gradient(180deg,#8fc2fb -60%,#52a2f7 0%,#1a62f0 100%)}
.btn.grad:hover{filter:brightness(1.08)}

/* Шапка */
.nav{--nav:6.8rem;position:absolute;z-index:30;top:0;left:0;right:0;height:var(--nav);background:rgba(4,8,20,.82);-webkit-backdrop-filter:blur(1.6rem);backdrop-filter:blur(1.6rem);transition:background .3s}
/* На телефоне шапка уезжает со страницей, закрепляется только с открытым меню */
.nav.open,html:not(.js) .menu:target~.nav{position:fixed}
.nav.solid{background:rgba(4,8,20,.82);-webkit-backdrop-filter:blur(1.6rem);backdrop-filter:blur(1.6rem)}
.burger-link,.burger-x{display:none}
html:not(.js) button.burger{display:none}
html:not(.js) .burger-link{display:block}
html:not(.js) .menu:target{display:flex!important}
html:not(.js) .menu:target~.nav .burger-link{display:none}
html:not(.js) .menu:target~.nav .burger-x{display:block}
.nav-in{display:flex;align-items:center;gap:1rem;max-width:1920px;margin-inline:auto;padding:1.4rem 2rem}
.logo img{width:9.2rem;height:4rem;object-fit:contain}
.links{display:none}
.nav-btn{margin-left:auto;width:auto;height:3.9rem;padding:0 1.6rem;font-size:1.6rem}
.burger{position:relative;width:4rem;height:4rem;flex:none}
.burger i{position:absolute;left:.8rem;width:2.4rem;height:.2rem;border-radius:.1rem;background:var(--white);transition:transform .25s,opacity .2s}
.burger i:nth-child(1){top:1.2rem}.burger i:nth-child(2){top:1.9rem}.burger i:nth-child(3){top:2.6rem}
.burger[aria-expanded="true"] i:nth-child(1),.burger-x i:nth-child(1){transform:translateY(.7rem) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2),.burger-x i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3),.burger-x i:nth-child(3){transform:translateY(-.7rem) rotate(-45deg)}
.menu{position:fixed;z-index:29;inset:0;background:rgba(4,8,20,.97);display:flex;flex-direction:column;gap:2.4rem;padding:10rem 2rem 3rem}
.menu a:not(.btn){font-size:3.2rem;font-weight:500}
.menu .btn{margin-top:auto}

/* Первый экран */
.hero{position:relative;padding-top:54.7rem;padding-bottom:1.4rem}
.hero .light{position:absolute;left:3rem;top:2rem;width:58rem;height:58rem;border-radius:50%;background:radial-gradient(closest-side,rgba(40,120,255,.95),rgba(26,98,240,.55) 45%,rgba(26,98,240,0) 100%)}
.hero h1{position:absolute;z-index:3;left:2rem;top:7.8rem;font-family:var(--display);font-size:3.3rem;line-height:1.12;letter-spacing:-.03em}
.ename{position:absolute;z-index:3;left:2rem;top:19.1rem;font-size:2.6rem;line-height:3.2rem;letter-spacing:-.01em;text-transform:uppercase;background:var(--grad-h);-webkit-background-clip:text;background-clip:text;color:transparent}
.sphere{position:absolute;z-index:2;left:3.9rem;top:24.4rem;width:32.7rem;height:43.8rem}
.swing{position:relative;width:100%;height:100%;transform-origin:50% 0;-webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 17%);mask-image:linear-gradient(180deg,transparent 2%,#000 17%)}
.swing>img{width:100%;height:100%;object-fit:contain}
.port{position:absolute;left:32.07%;top:44.05%;width:35.9%;height:27.32%;border-radius:50%;overflow:hidden}
.port img{position:absolute;inset:0;width:100%;height:100%}
/* Кадры по 5 секунд. Новый проявляется поверх предыдущего за 1,8 с, поэтому темной паузы между фото нет. */
.slide{opacity:0;animation:25s ease-in-out infinite both}
.slide:nth-child(1){opacity:1;animation:none}
.slide:nth-child(2){animation-name:s2}.slide:nth-child(3){animation-name:s3}.slide:nth-child(4){animation-name:s4}.slide:nth-child(5){animation-name:s5}
@keyframes s2{0%,12.8%{opacity:0}20%,40%{opacity:1}40.01%,100%{opacity:0}}
@keyframes s3{0%,32.8%{opacity:0}40%,60%{opacity:1}60.01%,100%{opacity:0}}
@keyframes s4{0%,52.8%{opacity:0}60%,80%{opacity:1}80.01%,100%{opacity:0}}
@keyframes s5{0%,72.8%{opacity:0}80%,92.8%{opacity:1}100%{opacity:0}}
.panel{position:relative;z-index:1;margin-inline:1.2rem;border-radius:2.6rem;background:linear-gradient(180deg,#fff,#deebff);color:var(--ink);padding:12rem 2rem 2.2rem;display:grid;gap:2.2rem}
.for{font-size:2.4rem;line-height:1.25;letter-spacing:-.03em}
.nums{display:flex;justify-content:space-between;padding-inline:.8rem;text-align:center}
.nums b{display:block;font-weight:800;font-size:6rem;line-height:1;letter-spacing:-.04em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.6rem}
.nums span{font-size:1.2rem;color:var(--panel-gray);line-height:1.25}
.when{font-size:1.6rem;line-height:1.4;font-weight:500;color:var(--panel-ink)}

/* Что покажем. Телефон и планшет: лента с иллюминаторами, листается вбок, сцена и тезис всегда на одном экране.
   Компьютер: большой иллюминатор, блок закреплен, тезисы меняются скроллом. */
.show{position:relative;padding:3.6rem 0 3rem}
.show-in{display:flex;flex-direction:column}
.show h2{padding:0 2rem;font-size:2.7rem;line-height:1.26;letter-spacing:-.025em}
.scope{display:none}
.ths{order:2;display:flex;gap:2rem;margin-top:1.8rem;padding:0 2rem;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 2rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ths::-webkit-scrollbar{display:none}
.th{flex:0 0 30.4rem;scroll-snap-align:start}
.th-p{position:relative;width:100%;aspect-ratio:1}
.th-p img,.sc,.rim{position:absolute;left:0;top:0;width:100%;height:100%}
.th button{display:block;width:100%;padding:1.4rem .4rem 0 0;text-align:left;font-size:1.9rem;line-height:2.7rem;cursor:default}
.lead{display:block;font-weight:500;color:var(--white)}
.rest,.rest span{color:var(--soft)}
.sc{opacity:0;transition:opacity 1.2s ease-in-out}
.sc.on{opacity:1}
.rim{transform:rotate(calc(var(--rot,0)*1deg))}
.ticks{order:3;display:flex;gap:1.3rem;margin:1.6rem 2rem 0}
.ticks i{width:.9rem;height:.9rem;border-radius:50%;background:rgba(255,255,255,.3);transition:background .3s}
.ticks i.on{background:#fff}
html:not(.js) .ticks{display:none}
@keyframes q2{0%,16%{opacity:0}25%,50%{opacity:1}50.01%,100%{opacity:0}}
@keyframes q3{0%,41%{opacity:0}50%,75%{opacity:1}75.01%,100%{opacity:0}}
@keyframes q4{0%,66%{opacity:0}75%,91%{opacity:1}100%{opacity:0}}

/* Технологии */
.tech{--px:2rem;--rx:1rem;--dw:3.8rem;position:relative;z-index:2;background:linear-gradient(180deg,#040814 0%,#081f5c 20%,#040814 100%);padding:4.4rem 2rem 4.8rem}
.tech h2{font-family:var(--display);font-size:3rem;line-height:1.18;letter-spacing:-.03em;margin-bottom:4.8rem}
.tech h2 span{background:var(--grad-h);-webkit-background-clip:text;background-clip:text;color:transparent}
.descent{position:relative;display:flow-root;margin-bottom:3rem}
.rail{position:absolute;left:1rem;top:0;bottom:2rem;width:1px;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.08))}
.fill{position:absolute;left:0;top:0;width:1px;height:100%;transform-origin:0 0;transform:scaleY(var(--p,0));background:linear-gradient(180deg,#d0e3ff,#7fb4ff);box-shadow:0 0 .8rem #7fb4ff}
#snow{position:sticky;top:0;display:block;width:calc(100% + 2*var(--px));height:100vh;margin:0 calc(-1*var(--px)) -100vh;pointer-events:none}
.diver{position:absolute;z-index:4;left:calc(var(--rx) - var(--dw)/2);top:0;width:var(--dw);transform-origin:50% 0;will-change:transform;pointer-events:none}
.diver img{width:100%;height:auto}
.pool{position:absolute;z-index:0;left:calc(var(--rx) - 30rem);top:-30rem;width:60rem;height:60rem;border-radius:50%;background:radial-gradient(closest-side,rgba(82,162,247,.3),rgba(82,162,247,.1) 50%,rgba(82,162,247,0));will-change:transform;pointer-events:none}
.gauge{position:sticky;z-index:5;top:7.4rem;height:0;text-align:right;pointer-events:none}
.gauge span{display:inline-block;padding:.5rem 1.2rem;border-radius:2rem;background:rgba(4,8,20,.72);box-shadow:inset 0 0 0 .1rem rgba(127,180,255,.28);-webkit-backdrop-filter:blur(.6rem);backdrop-filter:blur(.6rem);font-size:1.3rem;line-height:1.4;color:var(--gray);white-space:nowrap}
.gauge b{display:inline-block;min-width:6.6rem;font-weight:600;color:var(--white);font-variant-numeric:tabular-nums}
.ill{position:relative;z-index:1;opacity:calc(.2 + .8*var(--lit,1));transform:scale(calc(.92 + .08*var(--lit,1)));will-change:opacity,transform}
.in{position:relative}
.in img{display:block;width:100%;height:auto}
.in .ov{position:absolute;left:0;top:0;width:100%;height:100%}
.tt{position:relative;z-index:1;opacity:calc(.65 + .35*var(--lit,1))}
.t{position:relative;padding-left:3.4rem;margin-bottom:3.6rem}
.t .ill{width:var(--mw,30rem);margin:calc(var(--mt,0)*1rem) auto calc(var(--mb,0)*1rem)}
.t .dot{position:absolute;left:.6rem;width:.9rem;height:.9rem;border-radius:50%;background:#fff;transition:box-shadow .4s,transform .4s}
.t.on .dot{box-shadow:0 0 0 .5rem rgba(127,180,255,.25),0 0 1.4rem #7fb4ff;transform:scale(1.15)}
.t small{display:block;font-size:1.4rem;line-height:1.3;color:var(--sky)}
.t h3{font-size:2.5rem;line-height:1.18;letter-spacing:-.02em;margin:.4rem 0 0}

/* Программа */
.program{position:relative;padding:4.4rem 2rem 4rem}
.ph{font-family:var(--display);font-size:3rem;line-height:1.2;letter-spacing:-.03em}
.pdf{display:inline-block;margin:1rem 0 2.4rem;font-weight:600;font-size:1.7rem;color:var(--link)}
.pdf:hover{color:var(--sky)}
.sched li{display:grid;gap:.4rem;padding:1.4rem 0;border-top:1px solid rgba(255,255,255,.16)}
.sched li:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.sched time{font-size:1.4rem;color:var(--gray)}
.pt b{display:block;font-weight:500;font-size:2rem;line-height:1.25}
.pt span{display:block;margin-top:.3rem;font-size:1.4rem;line-height:1.35;color:var(--gray)}
.sp-n{font-size:1.4rem;line-height:1.35;color:var(--gray)}
.sp-n b{display:block;font-weight:500;color:var(--white)}

/* Спикеры */
.speakers{position:relative;padding:3.7rem .8rem 4.8rem}
.word{width:100%;height:auto;position:relative}
.word.low{display:none}
.spk{--k:.92;display:flex;flex-wrap:wrap;justify-content:center;gap:7.25rem 1.16rem;margin-top:3.5rem;position:relative}
.sp{position:relative;width:calc(18.4rem*var(--k));height:calc(28.4rem*var(--k));border-radius:1.2rem;background-color:var(--card);background-image:url(img/speaker-bg.webp);background-size:calc(209rem*var(--k)) auto;background-position:calc((-73.1rem - 19.6rem*var(--i))*var(--k)) calc(-35rem*var(--k))}
.sp img{position:absolute;left:0;top:calc(-6.4rem*var(--k));width:100%;height:calc(34.8rem*var(--k));border-radius:0 0 1.2rem 1.2rem}
.sp::after{content:"";position:absolute;inset:0;border-radius:1.2rem;background:linear-gradient(180deg,rgba(11,21,50,0) 34%,#0b1532 60%)}
.sp b,.sp span{position:absolute;z-index:1;left:calc(1.4rem*var(--k))}
.sp b{top:calc(18.2rem*var(--k));font-weight:600;font-size:calc(1.8rem*var(--k));line-height:1.33;white-space:nowrap}
.sp span{top:calc(21rem*var(--k));right:calc(1.4rem*var(--k));font-size:calc(1.3rem*var(--k));line-height:1.38;color:var(--soft)}
.speakers .btn{margin:2.8rem 1.2rem 0;width:calc(100% - 2.4rem)}

/* Демо-станции */
.stations{position:relative;padding:2rem 2rem 4.4rem}
.stations h2{font-size:3.4rem;line-height:1.18;letter-spacing:-.025em}
.hatchcard{position:relative;margin-top:12.8rem;padding:14.6rem 2rem 2.4rem;border-radius:2.2rem;background:radial-gradient(75% 70% at 50% 10%,#1a62f0 0%,#0b1532 100%)}
.hatch{position:absolute;left:6rem;top:-10.4rem;width:23rem;height:auto;animation:bob 6s ease-in-out infinite alternate}
.hatchcard h3{font-size:2.4rem;line-height:3rem;letter-spacing:-.02em;margin-bottom:1rem}
.hatchcard p{font-size:1.5rem;line-height:2.1rem;color:var(--soft)}
@keyframes bob{from{transform:translateY(-.5rem) rotate(-1.2deg)}to{transform:translateY(.5rem) rotate(1.2deg)}}
.tg{position:absolute;left:0;top:0;width:1px;height:1px;margin:0;opacity:0}
.hit{position:absolute;inset:0;z-index:3;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hit-close{display:none}
.plus{position:absolute;z-index:1;right:0;top:1.4rem;width:4rem;height:4rem;border-radius:50%;border:.15rem solid rgba(242,245,250,.45);transition:transform .4s var(--lift),background .2s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:1.6rem;height:.2rem;margin:-.1rem 0 0 -.8rem;border-radius:.1rem;background:var(--white)}
.plus::after{transform:rotate(90deg)}

/* Для кого */
.who{position:relative;overflow:hidden;padding:4rem 1.2rem 0;text-align:center}
.beam{position:absolute;left:56%;top:-9rem;width:14.4rem;height:72rem;transform:rotate(-16deg);filter:blur(2rem);background:linear-gradient(180deg,rgba(26,107,255,0) 20%,#1a6bff 46%,rgba(128,77,255,.8) 66%,rgba(128,77,255,0) 92%)}
.who .glow{position:absolute;left:50%;top:9rem;width:34rem;height:26rem;margin-left:-17rem;border-radius:50%;background:rgba(26,92,255,.4);filter:blur(3rem)}
.who h2{position:relative;font-size:5rem;line-height:1.06;letter-spacing:-.03em;text-wrap:balance}
.pills{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:2.4rem}
.pills li{padding:.9rem 1.6rem;border-radius:3rem;font-size:1.5rem;line-height:1.4;font-weight:500;background:rgba(4,8,20,.82);box-shadow:0 0 7.8rem rgba(76,85,255,.25),inset 0 .1rem 0 rgba(255,255,255,.2),inset 0 0 0 .1rem rgba(255,255,255,.06);backdrop-filter:blur(.6rem);animation:drift calc(var(--d)*1s) ease-in-out infinite alternate}
.crowd{position:relative;height:15.8rem;margin:0 -1.2rem}
.crowd::before{content:"";position:absolute;left:-15rem;right:-15rem;top:4.4rem;height:13rem;background:rgba(26,92,255,.85);filter:blur(2.5rem);opacity:.55}
.crowd img{position:absolute;left:50%;top:0;width:90rem;height:18.75rem;margin-left:-45rem}

/* Зачем приходить */
.why{position:relative;z-index:1;padding:4.4rem 2rem 3.6rem}
.why h2{position:relative;z-index:1;font-family:var(--display);font-size:4rem;line-height:1.12;letter-spacing:-.03em}
.whale{--wd:24rem;position:absolute;z-index:2;pointer-events:none;left:21.2rem;top:-10.4rem;width:35rem;height:35rem;transform:translate3d(calc(var(--wq,0)*var(--wd)),calc(var(--wq,0)*2.4rem),0) rotate(calc(var(--wq,0)*-5deg));transition:transform .6s ease-out}
.reasons{position:relative;z-index:1;margin-top:2.4rem}
.rs{position:relative;padding:1.4rem 5rem 1.4rem 0;border-top:1px solid rgba(255,255,255,.16)}
.rs:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
.bg{position:absolute;inset:-1px -1.2rem;border-radius:2.2rem;background:radial-gradient(75% 90% at 50% 0,#1a62f0 0%,#0b1532 100%);opacity:0;transition:opacity .4s}
.rs h3{position:relative;font-size:3.3rem;line-height:4rem;letter-spacing:-.02em;transition:transform .4s var(--lift)}
.body{position:relative;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--lift),transform .4s var(--lift)}
.body>div{overflow:hidden;min-height:0}
.body p{padding-top:1.2rem;font-size:1.8rem;line-height:2.6rem;color:var(--white)}
.tg:checked~.bg{opacity:1}
.tg:checked~.body{grid-template-rows:1fr}
.tg:checked~.plus{transform:rotate(45deg)}
.tg:checked~.hit-open{display:none}
.tg:checked~.hit-close{display:block}
.tg:focus-visible~.plus{outline:.2rem solid var(--sky);outline-offset:.3rem}
.rs:hover .plus{background:rgba(242,245,250,.14)}

/* Финал */
.final{position:relative;overflow:hidden;background:var(--ink)}
.final .reef{position:absolute;inset:-2rem 0;width:100%;height:calc(100% + 4rem);object-fit:cover}
.final .veil{position:absolute;inset:-2rem 0;background:linear-gradient(180deg,#040814 0%,rgba(4,8,20,.1) 70%)}
.reg{position:relative;z-index:2;margin:1.4rem 1.2rem 0;border-radius:2.6rem;background:linear-gradient(180deg,#fff,#deebff);color:var(--panel-ink);padding:2.6rem 2rem 2.4rem}
.reg h2{font-size:4.2rem;line-height:1.1;letter-spacing:-.03em;margin-bottom:1.4rem}
.reg .addr{font-size:1.6rem;font-weight:500;line-height:1.4;margin-bottom:2.4rem}
.f{position:relative;display:block;margin-bottom:1.8rem}
/* Имя и фамилия — двумя полями в одну строку: форма не выше прежней */
.f2{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.f input{display:block;width:100%;height:3.3rem;padding:0;border:0;border-bottom:1px solid rgba(16,24,46,.45);background:none;color:var(--panel-ink);font:400 1.6rem var(--text);outline:none;transition:border-color .2s}
.f input:focus{border-color:var(--blue);box-shadow:0 .1rem 0 var(--blue)}
.f span{position:absolute;left:0;top:.2rem;font-size:1.6rem;color:var(--panel-gray);pointer-events:none;transition:transform .2s,font-size .2s,color .2s;transform-origin:0 0}
.f input:focus+span,.f input:not(:placeholder-shown)+span{transform:translateY(-1.5rem);font-size:1.2rem;color:var(--blue)}
.f.bad input{border-color:#d4344a}
.err{display:none;margin-top:.4rem;font-size:1.3rem;font-style:normal;color:#c32a40}
.f.bad .err,.c.bad .err{display:block}
.c{display:grid;grid-template-columns:2rem 1fr;gap:.3rem 1.2rem;margin-bottom:1.6rem;font-size:1.5rem;line-height:1.4;cursor:pointer}
.c input{appearance:none;width:2rem;height:2rem;margin:.1rem 0 0;border:1px solid rgba(16,24,46,.6);border-radius:.4rem;background:#fff;cursor:pointer;display:grid;place-items:center}
.c input:checked{background:var(--blue);border-color:var(--blue)}
.c input:checked::after{content:"";width:1rem;height:.5rem;margin-top:-.2rem;border-left:.2rem solid #fff;border-bottom:.2rem solid #fff;transform:rotate(-45deg)}
.c .err{grid-column:2}
.reg .btn{margin-top:.6rem}
/* Кнопка серая, пока не заполнены все поля и нет согласия (без JS — по :invalid формы) */
#send:disabled,.reg form:invalid #send{background:#cfd4dd;color:#5b6475;pointer-events:none;transform:none}
.done h3{font-size:3.2rem;line-height:1.15;margin-bottom:1.2rem}
.done p{font-size:1.6rem;color:var(--panel-gray);margin-bottom:1.2rem}
.done small{display:block;font-size:1.3rem;color:var(--panel-gray);margin-bottom:1.6rem}
.again{color:var(--blue);font-weight:600;font-size:1.6rem}
.depth{position:relative;height:30.3rem}
.bigword{position:absolute;left:2rem;top:7.1rem;width:35rem;height:auto}
.coral{position:absolute;left:50%;top:3rem;width:81rem;height:auto;margin-left:-40.5rem}
.foot{position:relative;z-index:2;background:var(--ink);height:6.4rem;display:flex;align-items:center;gap:2.4rem;padding:0 2rem;font-size:1.4rem}
.foot a:hover{color:var(--sky)}
/* Правовые документы — как в подвале сайта: на телефоне столбиком под ссылками, от 1100 — справа в строку */
.foot{flex-wrap:wrap;height:auto;min-height:6.4rem;padding:2rem;row-gap:1.6rem}
.foot-legal{display:flex;flex-direction:column;gap:.8rem;width:100%;font-size:1.3rem;line-height:1.4;color:var(--gray)}

/* Telegram: в шапке (на телефоне и планшете — в меню) и в подвале */
.tgl{display:inline-flex;align-items:center;gap:.6em}
.tgl svg{width:1em;height:1em;flex:none;fill:currentColor}
.tgl:hover{color:var(--sky)}

/* Уведомление о cookie сайта (/local/cookie-notice.js) — тёмная версия для этой страницы.
   Скрипт вставляет свои стили позже этого файла, поэтому селекторы с html — сильнее. Размеры
   в px, как у самого уведомления: rem на этой странице масштабируется с шириной окна. */
html .pm-cn{background:rgba(11,21,50,.94);color:var(--white);border-color:rgba(127,180,255,.28);box-shadow:0 8px 30px rgba(0,0,0,.45),0 0 40px rgba(26,98,240,.18);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-family:var(--text)}
html .pm-cn__text a{color:var(--sky)}
html .pm-cn__text a:hover{color:var(--white)}
html .pm-cn__btn{border-color:var(--sky);color:var(--white)}
html .pm-cn__btn:hover,html .pm-cn__btn:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff}

/* Форма: ссылки на документы в согласиях, ошибка отправки */
.c a{color:var(--blue);text-decoration:underline;text-underline-offset:.2em}
.c a:hover{color:var(--link)}
.note{margin:0 0 1.2rem;font-size:1.4rem;line-height:1.4;color:#c32a40}

/* Планшет: сетка 768 */
@media (min-width:768px){
  html{font-size:calc(100vw/76.8);scroll-padding-top:10rem}
  .nav{--nav:9.2rem;position:fixed}
  .nav-in{padding:2rem 3.2rem}
  .logo img{width:12rem;height:5.2rem}
  .nav .nav-btn{width:17rem;height:4.3rem;padding:0;font-size:2rem}
  .btn{width:26.5rem;height:6.3rem;font-size:3.2rem}
  .hero{padding-top:64rem;padding-bottom:3rem}
  .hero .light{left:38rem;top:12rem}
  .hero h1{left:3.2rem;top:11rem;font-size:6.4rem}
  .ename{left:3.2rem;top:36rem;font-size:3.3rem;line-height:1.2}
  .sphere{left:38.3rem;top:28.8rem;width:37.9rem;height:50.8rem}
  .panel{margin-inline:2rem;border-radius:3.2rem;padding:3.6rem 2.8rem 3.2rem;grid-template-columns:1fr auto;gap:2.2rem 2rem}
  .for{grid-column:1/-1;font-size:3rem;line-height:4rem;max-width:40rem}
  .nums{grid-column:1/-1;justify-content:flex-start;gap:8.4rem;padding-inline:.4rem 0}
  .nums b{font-size:8.8rem;margin-bottom:.8rem}
  .nums span{font-size:1.6rem}
  .when{font-size:1.7rem;align-self:center}
  .show{padding:5.6rem 0 4.4rem}
  .show h2{padding:0 3.2rem;font-size:4rem;line-height:1.24}
  .ths{gap:3rem;margin-top:2.4rem;padding:0 3.2rem;scroll-padding:0 3.2rem}
  .th{flex-basis:47rem}
  .th button{padding-top:2rem;font-size:2.6rem;line-height:3.6rem}
  .ticks{margin:2rem 3.2rem 0}
  .tech{--px:3.2rem;--rx:1.6rem;--dw:5.6rem;padding:6.4rem 3.2rem 6.4rem}
  .gauge{top:9.8rem}
  .tech h2{font-size:4.6rem;text-align:center;margin-bottom:5.6rem}
  .descent{margin-bottom:3.6rem}
  .tech .btn{display:flex;margin-inline:auto}
  .rail{left:1.6rem;bottom:0}
  .t{display:grid;grid-template-columns:33rem 30rem;justify-content:space-between;align-items:start;height:26.8rem;padding-left:4rem;margin:0}
  .t .ill{order:2;width:30rem;margin:-6.3rem -1.8rem 0 0;justify-self:end}
  .tt{order:1}
  .t .dot{left:1.2rem;top:.2rem}
  .t h3{font-size:2.8rem;line-height:3.4rem}
  .program{padding:5.6rem 3.2rem 5.6rem}
  .phead{display:flex;justify-content:space-between;align-items:center;margin-bottom:3.2rem}
  .ph{font-size:4.2rem}
  .pdf{margin:0;font-size:2rem}
  .sched li{grid-template-columns:13.6rem 1fr;gap:.8rem 0;padding:1.8rem 0}
  .sched time{font-size:1.7rem;grid-row:1/3}
  .pt b{font-size:2.2rem}
  .pt span,.sp-n{font-size:1.5rem}
  .sp-n{grid-column:2}
  .speakers{padding:4.4rem 1.2rem 6.4rem}
  .spk{gap:7.9rem 1.2rem;margin:2.1rem auto 0;max-width:53.2rem}
  .speakers .btn{margin:2.8rem 2rem 0;width:26.5rem}
  .stations{padding:2.4rem 3.2rem 5rem}
  .stations h2{font-size:5.2rem}
  .hatchcard{display:flex;flex-direction:column;justify-content:center;height:24rem;margin-top:7.5rem;padding:0 2.8rem 0 26.4rem}
  .hatch{left:.4rem;top:-4rem;width:24rem}
  .hatchcard h3{font-size:2.6rem;line-height:3.2rem}
  .hatchcard p{font-size:1.6rem;line-height:2.3rem}
  .who{padding:4.8rem 2.4rem 0}
  .beam{width:19rem;height:96rem;top:-12rem}
  .who .glow{width:52rem;height:32rem;margin-left:-26rem;top:12rem}
  .who h2{font-size:9.6rem;line-height:1.04}
  .pills{gap:1.2rem;margin-top:3rem}
  .pills li{padding:1.2rem 2.4rem;font-size:1.9rem}
  .crowd{height:20rem;margin:-1rem -2.4rem 0}
  .crowd::before{top:7rem;height:15rem;opacity:.55}
  .crowd img{width:124rem;height:25.8rem;margin-left:-62rem}
  .why{padding:6.4rem 3.2rem 4.8rem}
  .why h2{font-size:6.6rem;line-height:1.1}
  .whale{--wd:38rem;left:42rem;top:-12rem;width:50rem;height:50rem}
  .reasons{margin-top:3rem}
  .rs{padding:1.8rem 7rem 1.8rem 0}
  .bg{left:-1.6rem;right:-1.6rem;border-radius:2.6rem}
  .rs h3{font-size:5.4rem;line-height:6.5rem}
  .body p{padding-top:1.4rem;font-size:2.2rem;line-height:3.2rem}
  .plus{top:2.6rem;width:4.8rem;height:4.8rem}
  .reg{margin:2.4rem 2rem 0;border-radius:3.2rem;padding:4rem 3.6rem 3.6rem}
  .reg h2{font-size:6.8rem;margin-bottom:1.8rem}
  .reg .addr{font-size:2rem;margin-bottom:3.2rem}
  .reg .btn{display:flex;margin:2.8rem auto 0;width:34.7rem}
  .depth{height:40.2rem}
  .bigword{left:3.2rem;top:10.7rem;width:70.4rem}
  .coral{top:5rem;width:109rem;margin-left:-54.5rem}
  .foot{min-height:7.2rem;padding:2.4rem 3.2rem;font-size:1.6rem}
  .foot-legal{flex-direction:row;flex-wrap:wrap;gap:.8rem 2.4rem;font-size:1.4rem}
}

/* Десктоп: сетка 1440, выше 1920 рост останавливается */
@media (min-width:1100px){
  html{font-size:calc(min(100vw,1920px)/144);scroll-padding-top:11rem}
  .nav{--nav:10.5rem;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
  .d{display:block}
  br.d{display:inline}
  br.m{display:none}
  .nav-in{gap:3.2rem;padding:2.4rem 6.4rem}
  .logo img{width:13.2rem;height:5.7rem}
  .links{display:flex;gap:3.2rem;font-size:2rem}
  .links a:hover{color:var(--sky)}
  .burger,html:not(.js) .burger-link{display:none}
  .nav .nav-btn{width:17.1rem;height:4.1rem;padding:0;font-size:2.07rem}
  .beams{position:absolute;left:0;top:0;width:144rem;height:148rem;pointer-events:none}
  .hero{height:102rem;padding:0}
  .hero .light{left:78rem;top:10.9rem;width:64rem;height:64rem;background:#1a62f0;filter:blur(6.5rem)}
  .hero h1{left:6rem;top:16.5rem;font-size:8.4rem;line-height:8.73rem}
  .ename{left:6rem;top:44.2rem;font-size:5.2rem;line-height:9.2rem}
  .sphere{left:89rem;top:1.3rem;width:52.7rem;height:70.6rem}
  .panel{position:absolute;left:4rem;top:56rem;width:136rem;height:42rem;margin:0;padding:4.4rem 4.8rem;display:block}
  .for{font-size:5rem;line-height:5.6rem;max-width:none}
  .nums{position:absolute;left:76rem;top:20.4rem;display:grid;gap:0;padding:0;grid-template-columns:19rem 19.6rem 19rem;text-align:left}
  .nums b{font-size:11.2rem;margin-bottom:1rem}
  .nums span{font-size:1.7rem}
  .when{position:absolute;left:4.8rem;top:23.6rem;font-size:2.2rem}
  .panel .btn{position:absolute;left:4.8rem;top:33rem}
  .show{height:calc(86rem + 240vh);padding:0}
  .show-in{display:block;position:sticky;top:calc((100vh - 86rem)/2);height:86rem;overflow:clip}
  .show h2{position:absolute;left:6.4rem;top:11.6rem;width:66rem;padding:0;font-size:3.6rem;line-height:4.4rem}
  .scope{display:block;position:absolute;left:70rem;top:0;width:86rem;height:86rem}
  .ticks{position:absolute;left:6.4rem;top:77rem;gap:1.4rem;margin:0}
  .ths{display:block;position:absolute;left:6.4rem;top:24rem;width:64rem;margin:0;padding:0;overflow:visible}
  .th{border-top:1px solid rgba(255,255,255,.16)}
  .th:last-child{border-bottom:1px solid rgba(255,255,255,.16)}
  .th-p{display:none}
  .th button{position:relative;padding:2rem 0;font-size:2.2rem;line-height:3rem;cursor:pointer;transition:padding .4s var(--lift)}
  .th button::before{content:"";position:absolute;left:0;top:2.4rem;bottom:2.4rem;width:.3rem;border-radius:.2rem;background:#52a2f7;opacity:0;transition:opacity .3s}
  .lead{display:block;color:var(--gray);transition:color .3s}
  .rest{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--lift),opacity .4s}
  .rest span{overflow:hidden;min-height:0}
  .th.on button{padding:2.4rem 0 2.4rem 2.4rem;font-size:3rem;line-height:4rem}
  .th.on button::before{opacity:1}
  .th.on .lead{color:var(--white)}
  .th.on .rest{grid-template-rows:1fr;opacity:1}
  html:not(.js) .show{height:auto}
  html:not(.js) .show-in{position:static}
  html:not(.js) .th button{padding:1.6rem 0;font-size:2rem;line-height:2.8rem}
  html:not(.js) .lead{color:var(--white)}
  html:not(.js) .rest{grid-template-rows:1fr;opacity:1}
  html:not(.js) .sc{opacity:0;transition:none;animation:20s ease-in-out infinite both}
  html:not(.js) .sc:nth-child(1){opacity:1;animation:none}
  html:not(.js) .sc:nth-child(2){animation-name:q2}html:not(.js) .sc:nth-child(3){animation-name:q3}html:not(.js) .sc:nth-child(4){animation-name:q4}
  .tech{--px:4.8rem;--rx:65.6rem;--dw:12rem;height:215.6rem;padding:9.1rem 4.8rem 0}
  .gauge{position:absolute;left:72.4rem;top:0;height:auto;text-align:left;will-change:transform}
  .tech h2{font-size:6rem;line-height:7.2rem;margin-bottom:5.6rem}
  .descent{position:relative;margin:0 1.6rem;height:170.8rem}
  .rail{left:65.6rem;top:0;bottom:0}
  .t{display:block;position:static;height:auto;padding:0;margin:0}
  .t .ill{position:absolute;left:calc(var(--ix)*.1rem);top:calc(var(--iy)*.1rem);width:calc(var(--iw)*.1rem);margin:0}
  .tt{position:absolute;left:calc(var(--tx)*.1rem);top:calc((var(--dy) + 4.5)*.1rem);width:calc(var(--tw2)*.1rem);transform:translateY(-50%)}
  .t1 .tt{top:calc(var(--ty)*.1rem);transform:none}
  .t .dot{left:65.2rem;top:calc(var(--dy)*.1rem)}
  .t small{font-size:1.6rem}
  .t h3{font-size:2.4rem;line-height:3rem;margin:.8rem 0 0}
  .tech .btn{position:absolute;left:58.8rem;top:200.2rem;margin:0}
  .program{margin-top:-6.1rem;padding:10.1rem 6.4rem 0}
  .phead{margin-bottom:3.2rem}
  .ph{font-size:4.8rem;line-height:7.2rem}
  .pdf{font-size:2.4rem}
  .sched li{grid-template-columns:13rem 72rem 39.7rem;gap:0 2.4rem;padding:2rem 0}
  .sched time{font-size:1.8rem;grid-row:auto}
  .pt b{font-size:2.4rem;line-height:3rem}
  .pt span,.sp-n{font-size:1.6rem;line-height:2.2rem}
  .sp-n{grid-column:3}
  .speakers{height:92.2rem;padding:0}
  .word{position:absolute;left:2.7rem;top:10.9rem;width:140.5rem}
  .word.low{display:block;top:56.6rem}
  .spk{--k:1;position:absolute;left:13.8rem;top:26.8rem;flex-wrap:nowrap;gap:1.2rem;margin:0;max-width:none}
  .speakers .btn{position:absolute;left:4rem;top:81rem;margin:0}
  .stations{height:65rem;padding:6rem 6.4rem 0}
  .stations h2{font-size:6.4rem;line-height:7rem}
  .hatchcard{position:absolute;left:6.4rem;top:25rem;width:131.2rem;height:30rem;margin:0;padding:0 7rem 0 56rem}
  .hatch{left:4.6rem;top:-8rem;width:44rem}
  .hatchcard h3{font-size:4rem;line-height:4.8rem;margin-bottom:1.6rem}
  .hatchcard p{font-size:2rem;line-height:2.8rem}
  .who{height:76rem;padding:0}
  .beam{left:76rem;top:-16rem;width:24rem;height:120rem;filter:blur(3rem)}
  .who .glow{left:42rem;top:24rem;width:62rem;height:32rem;margin:0;filter:blur(6rem)}
  .who h2{position:absolute;left:12rem;top:21.6rem;width:120rem;font-size:15rem;line-height:15.2rem}
  .pills{position:static;margin:0;display:block}
  .pills li:nth-child(n){position:absolute;z-index:3;left:calc(var(--x)*.1rem);top:calc(var(--y)*.1rem);padding:1.4rem 2.8rem;font-size:2.2rem;white-space:nowrap}
  .crowd{position:absolute;left:0;right:0;top:46rem;height:30rem;margin:0}
  .crowd::before{left:0;right:0;top:2.1rem;height:31rem;border-radius:50%;background:#1961f7;filter:blur(15.7rem);opacity:1}
  .crowd img{left:0;top:0;width:100%;height:100%;margin:0}
  .why{margin-top:-7.5rem;padding:12.3rem 6.4rem 8rem}
  .why h2{font-size:8.4rem;line-height:8.7rem;white-space:nowrap}
  .whale{--wd:42rem;left:103.3rem;top:-23.2rem;width:76rem;height:76rem}
  .reasons{margin-top:9rem}
  .rs{padding:2.4rem 8rem 2.4rem 0}
  .bg{left:-2.4rem;right:-2.4rem;border-radius:3.2rem}
  .rs h3{font-size:6.4rem;line-height:7.2rem}
  .tg:checked~h3,.tg:checked~.body{transform:translateX(2.4rem)}
  .body p{padding-top:2rem;max-width:120rem;font-size:2.8rem;line-height:4rem}
  .plus{top:3.2rem;width:5.6rem;height:5.6rem}
  .final{height:120.2rem}
  .final .reef,.final .veil{top:-3.8rem;height:124rem;bottom:auto}
  .reg{position:absolute;left:4rem;top:3.2rem;width:136rem;height:51rem;margin:0;padding:4.4rem 4.8rem}
  .reg h2{font-size:8.4rem;line-height:9rem;margin-bottom:3rem}
  .reg .addr{font-size:2.2rem;line-height:3.2rem;max-width:56rem}
  .reg form,.done{position:absolute;left:69.2rem;top:4.4rem;width:62rem}
  .reg .btn{position:absolute;left:13.6rem;top:36.2rem;margin:0}
  .reg .f{margin-bottom:1.8rem}
  .c{margin-bottom:1.8rem}
  .c{position:relative}
  /* Тексты согласий длиннее строки — ошибка под текстом, а не справа от галочки */
  .c .err{margin:.2rem 0 0}
  /* Ответ сервера — под кнопкой: кнопка стоит абсолютно и в поток не попадает */
  .reg .note{position:absolute;left:0;right:0;top:43.4rem;margin:0;text-align:center}
  .f .err{position:absolute;left:0;top:100%;margin-top:.2rem;font-size:1.2rem}
  .depth{position:absolute;left:0;right:0;top:54.2rem;height:57rem}
  .bigword{left:calc(50% - 61.55rem);top:17.6rem;width:123.1rem}
  .coral{left:-16rem;top:7rem;width:176rem;margin:0}
  .foot{position:absolute;left:0;right:0;top:111.2rem;height:9rem;min-height:0;padding:0 6.4rem;gap:.8rem 3rem;font-size:1.6rem;flex-wrap:nowrap}
  .foot-legal{display:grid;grid-template-columns:auto auto;width:auto;margin-left:auto;gap:.6rem 3.2rem;font-size:max(1.4rem,13px)}
}

/* Иллюстрации спуска: каждая показывает свою технологию. Работают только пока блок на экране (.tech.live). */
@property --r{syntax:"<percentage>";inherits:false;initial-value:0%}
.js .tech:not(.live) .ill *{animation-play-state:paused!important}
@keyframes glide{from{transform:translate(-2.4%,.6%) rotate(-.8deg)}to{transform:translate(2.4%,-.6%) rotate(.8deg)}}
@keyframes sweep{0%,12%{-webkit-mask-position:130% 0;mask-position:130% 0}72%,100%{-webkit-mask-position:-30% 0;mask-position:-30% 0}}
.ill[data-fx=scan] .in{animation:glide 9s ease-in-out infinite alternate}
.ill[data-fx=scan] .ov{filter:brightness(2.1) saturate(1.3);-webkit-mask:linear-gradient(100deg,transparent 42%,#000 50%,transparent 58%) 130% 0/300% 100% no-repeat;mask:linear-gradient(100deg,transparent 42%,#000 50%,transparent 58%) 130% 0/300% 100% no-repeat;animation:sweep 5s ease-in-out infinite}
@keyframes jelly{0%,100%{transform:translateY(2.4%) scale(1,1)}32%{transform:translateY(1%) scale(1.06,.93)}68%{transform:translateY(-2.6%) scale(.97,1.05)}}
@keyframes rows{0%,100%{opacity:.15}32%{opacity:.85}}
.ill[data-fx=led] .in{transform-origin:50% 32%;animation:jelly 4.6s ease-in-out infinite}
.ill[data-fx=led] .ov{filter:brightness(1.9);-webkit-mask:repeating-linear-gradient(0deg,#000 0 .2rem,transparent .2rem .6rem);mask:repeating-linear-gradient(0deg,#000 0 .2rem,transparent .2rem .6rem);animation:rows 4.6s ease-in-out infinite}
@keyframes float{from{transform:translateY(-1.8%) rotate(-1.6deg)}to{transform:translateY(1.8%) rotate(1.6deg)}}
@keyframes wave{0%{transform:scale(.3);opacity:0}12%{opacity:.8}100%{transform:scale(1.14);opacity:0}}
.ill[data-fx=echo] .in{animation:float 3.4s ease-in-out infinite alternate}
.ring{position:absolute;left:14%;top:14%;width:72%;height:72%;border-radius:50%;border:.15rem solid rgba(127,180,255,.9);box-shadow:0 0 1.6rem rgba(82,162,247,.5);animation:wave 4.2s ease-out infinite}
.ring:nth-of-type(2){animation-delay:1.4s}.ring:nth-of-type(3){animation-delay:2.8s}
@keyframes hop{0%,16%{left:45%;top:31%;width:25%;height:11%}20%,36%{left:20%;top:37%;width:20%;height:9%}40%,56%{left:58%;top:44%;width:27%;height:12%}60%,76%{left:35%;top:57%;width:26%;height:11%}80%,96%{left:32%;top:44%;width:24%;height:11%}100%{left:45%;top:31%;width:25%;height:11%}}
.ill[data-fx=lock] .in{animation:glide 7s ease-in-out infinite alternate}
.lock{position:absolute;--c:#9fd0ff;--l:1.4rem;--w:.2rem;background:linear-gradient(var(--c),var(--c)) 0 0/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 0 0/var(--w) var(--l),linear-gradient(var(--c),var(--c)) 100% 0/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 100% 0/var(--w) var(--l),linear-gradient(var(--c),var(--c)) 0 100%/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 0 100%/var(--w) var(--l),linear-gradient(var(--c),var(--c)) 100% 100%/var(--l) var(--w),linear-gradient(var(--c),var(--c)) 100% 100%/var(--w) var(--l),rgba(127,180,255,.14);background-repeat:no-repeat;box-shadow:0 0 1.8rem rgba(82,162,247,.55);animation:hop 11s cubic-bezier(.7,0,.2,1) infinite}
@keyframes bloom{from{--r:-8%}to{--r:92%}}
.ill[data-fx=grow] .in{-webkit-mask:radial-gradient(circle at 50% 88%,#000 calc(var(--g,1)*92%),transparent calc(var(--g,1)*92% + 14%));mask:radial-gradient(circle at 50% 88%,#000 calc(var(--g,1)*92%),transparent calc(var(--g,1)*92% + 14%))}
.ill[data-fx=grow] .ov{filter:brightness(2.2);-webkit-mask:radial-gradient(circle at 50% 88%,transparent calc(var(--r) - 9%),#000 var(--r),transparent calc(var(--r) + 9%));mask:radial-gradient(circle at 50% 88%,transparent calc(var(--r) - 9%),#000 var(--r),transparent calc(var(--r) + 9%));animation:bloom 4.8s cubic-bezier(.3,0,.5,1) infinite}
@keyframes swim{from{transform:translate(-2%,1.4%) rotate(-2deg)}to{transform:translate(2%,-1.4%) rotate(2deg)}}
@keyframes holo{0%,70%,100%{transform:translateX(1.2%);opacity:.35}74%{transform:translateX(-2.4%);opacity:.8}78%{transform:translateX(2.6%);opacity:.5}82%{transform:translateX(.6%);opacity:.7}}
.ill[data-fx=xr] .in{animation:swim 6s ease-in-out infinite alternate}
.ill[data-fx=xr] .ov{filter:hue-rotate(70deg) brightness(1.5);mix-blend-mode:screen;-webkit-mask:repeating-linear-gradient(0deg,#000 0 .2rem,transparent .2rem .5rem);mask:repeating-linear-gradient(0deg,#000 0 .2rem,transparent .2rem .5rem);animation:holo 5s linear infinite}

/* Запасной режим, если браузер не выполняет скрипты */
html:not(.js) .gauge,html:not(.js) .pool,html:not(.js) .diver{display:none}
@keyframes whale-loop{from{transform:translate3d(8rem,1rem,0)}to{transform:none}}
html:not(.js) .whale{transition:none;animation:whale-loop 7s ease-in-out infinite alternate}
@supports (animation-timeline:view()){
  @keyframes dive-down{from{top:0}to{top:calc(100% - 8rem)}}
  @keyframes fill-down{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  @keyframes lit-up{from{opacity:.12;transform:translateY(3rem) scale(.9)}to{opacity:1;transform:none}}
  @keyframes whale-in{from{transform:translate3d(var(--wd),2.4rem,0) rotate(-5deg)}to{transform:none}}
  html:not(.js) .descent{view-timeline:--dive block}
  html:not(.js) .diver{display:block;animation:dive-down linear both;animation-timeline:--dive;animation-range:entry 50% exit 50%}
  html:not(.js) .fill{animation:fill-down linear both;animation-timeline:--dive;animation-range:entry 50% exit 50%}
  html:not(.js) .ill{animation:lit-up linear both;animation-timeline:view();animation-range:entry 5% cover 40%}
  html:not(.js) .whale{animation:whale-in linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
}

/* Раскачивание батискафа: компьютер по наведению, телефон и планшет постоянно */
@keyframes swing{0%{transform:rotate(0)}12%{transform:rotate(2.6deg)}28%{transform:rotate(-2.2deg)}46%{transform:rotate(1.7deg)}62%{transform:rotate(-1.1deg)}78%{transform:rotate(.6deg)}90%{transform:rotate(-.25deg)}100%{transform:rotate(0)}}
@keyframes swing-loop{0%{transform:rotate(0)}6%{transform:rotate(2.4deg)}14%{transform:rotate(-2.1deg)}23%{transform:rotate(1.7deg)}31%{transform:rotate(-1.1deg)}39%{transform:rotate(.6deg)}45%{transform:rotate(-.2deg)}50%,100%{transform:rotate(0)}}
.swing.swinging{animation:swing 3.6s ease-in-out}
@media (max-width:1099px),(hover:none){.swing{animation:swing-loop 8s ease-in-out infinite}}
@keyframes drift{from{transform:translateY(-.4rem)}to{transform:translateY(.4rem)}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .swing,.swing.swinging,.pills li,.in,.ov{animation:none}
  .ring,.lock{display:none}
  .slide,.sc,.hatch{animation:none}
  .sc{transition:none}
  .show{height:auto}
  .show-in{position:static}
}

/* ===== Большие экраны: текст, первый экран, «Почему», «Для кого», шапка при прокрутке =====
   Отработано на черновике (ноябрь 2026) и перенесено сюда без изменений.
   До 1440 px всё по макету. Выше вёрстка (и с ней крупные заголовки, картинки) растёт по-прежнему —
   до 1,33 раза к 1920, — а текст для чтения только на 10 %: --trem — «rem текста». Ниже 1440 он
   равен обычному rem, поэтому на ПК 1100–1440 ничего не меняется. Межстрочные — в долях кегля,
   чтобы уменьшались вместе с текстом. Длина строки абзацев — не больше ~66 знаков. */
@media (min-width:1100px){
  :root{--trem:min(1rem,calc(10px + (min(100vw,1920px) - 1440px)*.3/144))}
  .links{font-size:calc(2*var(--trem))}
  .nav .nav-btn{width:auto;padding:0 2.4rem;font-size:calc(2.07*var(--trem))}
  .for{font-size:calc(5*var(--trem));line-height:1.12}
  .when{font-size:calc(2.2*var(--trem));line-height:1.45}
  .nums span{font-size:calc(1.7*var(--trem))}
  .th button{font-size:calc(2.2*var(--trem));line-height:1.36}
  .th.on button{font-size:calc(3*var(--trem));line-height:1.33}
  .t small{font-size:calc(1.6*var(--trem))}
  .t h3{font-size:calc(2.4*var(--trem));line-height:1.25}
  .sched time{font-size:calc(1.8*var(--trem))}
  .pt b{font-size:calc(2.4*var(--trem));line-height:1.25}
  .pt span,.sp-n{font-size:calc(1.6*var(--trem));line-height:1.375}
  .hatchcard h3{font-size:calc(4*var(--trem));line-height:1.2}
  .hatchcard p{font-size:calc(2*var(--trem));line-height:1.4}
  .pills li:nth-child(n){font-size:calc(2.2*var(--trem))}
  .rs h3{font-size:calc(6.4*var(--trem));line-height:1.125}
  .body p{max-width:66ch;font-size:calc(2.8*var(--trem));line-height:1.43}
  .reg .addr{font-size:calc(2.2*var(--trem));line-height:1.45}
  .f input,.f span{font-size:calc(1.6*var(--trem))}
  .c{font-size:calc(1.5*var(--trem))}
  .foot{font-size:calc(1.6*var(--trem))}
  .foot-legal{font-size:max(calc(1.4*var(--trem)),13px)}

  /* Первый экран: текст растёт как остальной (+10 %). Строка с названием стоит под заголовком
     из трёх строк — её место считается от его высоты, иначе между ними росла бы пустота. */
  .hero h1{font-size:calc(8.4*var(--trem));line-height:1.04}
  .ename{top:calc(16.5rem + 26.2*var(--trem) + 1.5rem);font-size:calc(5.2*var(--trem));line-height:1.77}
  .nums b{font-size:calc(11.2*var(--trem))}

  /* «Почему стоит прийти» — в масштабе остальных разделов: заголовок как «Актуальный технологический
     стек» (6rem), пункты 4rem, текст 2rem — и, как остальной текст, +10 % на больших экранах.
     «+» стоит по центру первой строки пункта: поле сверху + половина строки − половина кнопки. */
  .why h2{font-size:calc(6*var(--trem));line-height:1.1}
  .reasons{margin-top:6rem}
  .rs{padding-block:2rem}
  .rs h3{font-size:calc(4*var(--trem));line-height:1.2}
  .body p{max-width:70ch;padding-top:1.2rem;font-size:calc(2*var(--trem));line-height:1.5}
  .plus{width:4.8rem;height:4.8rem;top:calc(2rem + 2.4*var(--trem) - 2.4rem)}

  /* «Для кого конференция» — композиция целиком (высота, заголовок, плашки) не крупнее макета 1440,
     по центру страницы; силуэты зрителей — во всю ширину, как прежде. --u — единица блока вместо rem. */
  .who{--u:min(1rem,10px);--ox:calc((100% - 144*var(--u))/2);height:calc(76*var(--u))}
  .beam{left:calc(var(--ox) + 76*var(--u));top:calc(-16*var(--u));width:calc(24*var(--u));height:calc(120*var(--u))}
  .who .glow{left:calc(var(--ox) + 42*var(--u));top:calc(24*var(--u));width:calc(62*var(--u));height:calc(32*var(--u))}
  .who h2{left:calc(var(--ox) + 12*var(--u));top:calc(21.6*var(--u));width:calc(120*var(--u));font-size:calc(15*var(--u));line-height:calc(15.2*var(--u))}
  .pills li:nth-child(n){left:calc(var(--ox) + var(--x)*.1*var(--u));top:calc(var(--y)*.1*var(--u));padding:calc(1.4*var(--u)) calc(2.8*var(--u));font-size:calc(2.2*var(--u))}
  /* Силуэты — во всю ширину, высота — по пропорциям картинки (2880×600), по низу блока: при
     высоте в --u, как у остального блока, на 1920 картинка растягивалась вширь */
  .crowd{top:auto;bottom:0;height:auto;aspect-ratio:2880/600}
  /* Блок стал ниже, и размытое свечение под силуэтами и луч теперь доходят до его верхней границы, где
     overflow: hidden обрезает их ровной линией. Сверху — переход от фона страницы к прозрачному:
     линия растворяется. Заголовок поднят над переходом (плашки и так выше — z-index 3). */
  .who::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:calc(26*var(--u));
    background:linear-gradient(180deg,var(--ink) 0%,rgba(4,8,20,.85) 30%,rgba(4,8,20,0) 100%);pointer-events:none}
  .who h2{z-index:2}
  /* Свечение плашек (box-shadow) верхнего ряда тоже упирается в край блока и обрезается — плашки лежат
     поверх перехода. Поэтому ещё маска: верхние 4,4 единицы блока растворяются в фон страницы; сами
     плашки начинаются ниже (верхняя — на 4,8) и остаются целыми. */
  .who{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 calc(4.4*var(--u)));mask-image:linear-gradient(180deg,transparent 0,#000 calc(4.4*var(--u)))}
}

/* Шапка при прокрутке становится ниже (там, где она закреплена: от 768 px): на ПК 105 → 56 px
   при 1440, логотип 132 → 69 px. Класс .solid ставит
   скрипт, когда страница прокручена больше чем на 40 px. */
.nav,.nav-in,.logo img,.nav .nav-btn{transition:background .3s,height .3s,padding .3s,width .3s}
@media (min-width:768px){
  .nav.solid{--nav:5.1rem}
  .nav.solid .nav-in{padding-block:1rem}
  .nav.solid .logo img{width:6rem;height:2.6rem}
  .nav.solid .nav-btn{height:3.2rem}
}
@media (min-width:1100px){
  .nav.solid{--nav:5.6rem}
  .nav.solid .nav-in{padding-block:1rem}
  .nav.solid .logo img{width:6.9rem;height:3rem}
  .nav.solid .nav-btn{height:3.2rem}
}
@media (prefers-reduced-motion:reduce){.nav,.nav-in,.logo img,.nav .nav-btn{transition:none}}

/* Логотип в развёрнутой шапке — на 15 % меньше макета на всех ширинах. Высоту шапки задаёт --nav,
   содержимое по центру по вертикали: шапка не меняется, логотип стоит посередине. */
.nav-in{height:var(--nav);padding-block:0}
.logo img{width:7.8rem;height:3.4rem}
@media (min-width:768px){.nav-in{padding-block:0}.logo img{width:10.2rem;height:4.4rem}}
@media (min-width:1100px){.nav-in{padding-block:0}.logo img{width:11.2rem;height:4.85rem}}
@media (min-width:768px){.nav.solid .nav-in{padding-block:0}}

/* Панель первого экрана — высотой по содержимому. На макете она жёсткой высоты, а дата, кнопка и цифры
   стоят по координатам под прежний кегль: с уменьшенным текстом внизу оставалась пустота, цифры висели
   отдельно. Теперь дата с кнопкой и цифры — один ряд: верх даты по верху цифр, низ кнопки по низу подписей.
   Обёртка .pcta до 1100 px «прозрачна» (display: contents) — там раскладка панели прежняя. */
.pcta{display:contents}
@media (min-width:1100px){
  .hero{height:auto;padding:56rem 0 4rem}
  .panel{position:relative;left:auto;top:auto;width:auto;height:auto;margin:0 4rem;
    padding:calc(4.4*var(--trem)) 4.8rem;display:grid;grid-template-columns:71.2rem 57.6rem;
    row-gap:calc(4.8*var(--trem));column-gap:0}
  .for{grid-column:1/-1}
  .pcta{grid-column:1;grid-row:2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:calc(1.6*var(--trem))}
  .when,.panel .btn{position:static;align-self:flex-start}
  /* Цифры — на всю высоту ряда: цифра сверху, подпись снизу, кто бы из двух столбцов ни был выше */
  .nums{grid-column:2;grid-row:2;position:static;align-self:stretch}
  .nums li{display:flex;flex-direction:column;justify-content:space-between}
}