/* ============================================================
   MAUSTION · REFLEX — site styles
   Материал: liquid glass (светлый .glass, тёмный .glass-dark).
   Палитра: аврора (одно семейство) + тёплый акцент только для «внимания».
   ============================================================ */
:root{
  --paper:#EEF1F5;--ink:#12151C;--muted:#4B5260;--muted2:#6B7280;--night:#0B1220;
  --deep:#1E6F8C;--mid:#3DD5C4;--light:#7EF2C0;--violet:#5B6CF0;--warm:#FF8A5B;
  --font:"Onest",system-ui,-apple-system,sans-serif;--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --spring:cubic-bezier(.2,.9,.25,1);
  --gap:120px;--r:26px;
  --edge-l:inset 1px 1px 0 rgba(255,255,255,.75),inset -1px -1px 0 rgba(0,0,0,.10),inset 0 0 0 1px rgba(255,255,255,.28);
  --shadow-l:0 1px 2px rgba(10,14,24,.06),0 18px 40px -12px rgba(10,14,24,.28),0 40px 90px -30px rgba(10,14,24,.22);
  --edge-d:inset 1px 1px 0 rgba(255,255,255,.28),inset -1px -1px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.08);
  --shadow-d:0 1px 2px rgba(0,0,0,.25),0 22px 48px -14px rgba(0,0,0,.55),0 50px 100px -40px rgba(0,0,0,.5);
}
@media (max-width:760px){:root{--gap:72px}}
*{box-sizing:border-box}
html{background:var(--paper);scroll-behavior:smooth}
/* body без своего фона: иначе он рисуется поверх fixed‑авроры с z-index:-1 (так делал хост превью) */
body{background:transparent!important}
html,body{margin:0;padding:0;overflow-x:clip;color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}
a{color:inherit}
img{max-width:100%}
button,input,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer}
.container{max-width:1200px;margin:0 auto;padding:0 24px}
section{position:relative}
.sec{padding:0 24px var(--gap);max-width:1200px;margin:0 auto}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);margin-bottom:18px}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
h2{font-size:clamp(28px,3.4vw,42px);line-height:1.05;margin-bottom:20px}
.lead{font-size:17px;line-height:1.55;color:var(--muted);margin:0;text-wrap:pretty}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:32px;align-items:start}
.two .lead+.lead{margin-top:16px}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.hide{display:none!important}

/* ---------- фон страницы ---------- */
.page-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;background:
  linear-gradient(168deg,transparent 18%,rgba(61,213,196,.16) 34%,transparent 46%),
  linear-gradient(168deg,transparent 48%,rgba(91,108,240,.12) 62%,transparent 74%),
  linear-gradient(168deg,transparent 70%,rgba(126,242,192,.14) 84%,transparent 96%),var(--paper)}
/* живая аврора на WebGL (js/aurora-bg.js); .page-bg остаётся запасным фоном */
.page-aurora{position:fixed;inset:0;z-index:-1;pointer-events:none;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.page-aurora.on{opacity:1}

/* ---------- стекло: светлое ---------- */
.glass{position:relative;border-radius:var(--r);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.06) 45%,rgba(255,255,255,.03) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(185%) brightness(1.02);backdrop-filter:blur(16px) saturate(185%) brightness(1.02);
  box-shadow:var(--edge-l),var(--shadow-l)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 18%),radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.35) 0,rgba(255,255,255,0) 55%)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:9px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  -webkit-backdrop-filter:blur(4px) saturate(220%) brightness(1.18) contrast(1.08);backdrop-filter:blur(4px) saturate(220%) brightness(1.18) contrast(1.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.glass>*{position:relative;z-index:1}
/* ---------- стекло: тёмное ---------- */
.glass-dark{position:relative;border-radius:var(--r);overflow:hidden;color:var(--paper);
  background:linear-gradient(180deg,rgba(20,24,34,.34) 0%,rgba(14,17,23,.28) 50%,rgba(10,12,18,.32) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(175%);backdrop-filter:blur(16px) saturate(175%);box-shadow:var(--edge-d),var(--shadow-d)}
.glass-dark::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 14%),radial-gradient(110% 55% at 0% 0%,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 55%)}
.glass-dark::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:9px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  -webkit-backdrop-filter:blur(3px) saturate(200%) brightness(1.25);backdrop-filter:blur(3px) saturate(200%) brightness(1.25);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10)}
.glass-dark>*{position:relative;z-index:1}
/* сцена под стеклом: пятна цвета живут снаружи панели */
.scene{position:relative;isolation:isolate}
.scene>.glass,.scene>.glass-dark,.scene>.showcase{z-index:1}

/* ---------- витрина 3D: без коробки ----------
   Карта висит в воздухе над фоном страницы (spatial): у витрины нет фона, рамки и тени.
   Края холста карты мягко растворяются (маска в reflex-map.js), поэтому ничего не обрезается видимой линией.
   Холст чуть шире колонки, чтобы плита и организмы не упирались в границу. */
.showcase{position:relative}
.showcase .map{position:absolute;inset:-28px -36px}
.hero .showcase .map{inset:-72px -84px -72px -24px} /* в hero пространство шире колонки — края растворяются далеко от карты */
@media (max-width:760px){.showcase .map{inset:0}.hero .showcase .map{inset:-24px 0}} /* на телефоне не шире экрана — иначе нижний лист карты обрезается */

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:99px;border:none;font-weight:600;font-size:15px;line-height:1;color:var(--ink);text-decoration:none;cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.35));-webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
  box-shadow:var(--edge-l),0 14px 30px -12px rgba(10,14,24,.3);transition:transform .35s var(--spring),box-shadow .35s var(--spring)}
.btn:hover{transform:translateY(-2px) scale(1.01);box-shadow:var(--edge-l),0 18px 36px -12px rgba(10,14,24,.35)}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn.dark{color:#fff;background:linear-gradient(180deg,rgba(18,21,28,.92),rgba(18,21,28,.8));box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(0,0,0,.4),0 14px 30px -12px rgba(10,14,24,.5)}
.btn.on-dark{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));box-shadow:inset 1px 1px 0 rgba(255,255,255,.4),inset -1px -1px 0 rgba(0,0,0,.3),0 14px 30px -12px rgba(0,0,0,.6)}
.link{font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:opacity .25s,transform .35s var(--spring)}
.link:hover{opacity:.65;transform:translateY(-1px)}
.link.on-dark{color:#fff}

/* ---------- навбар‑таблетка ---------- */
.nav{position:sticky;top:14px;z-index:30;height:52px;margin-top:14px;padding:0 12px;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.nav .pill{position:relative;pointer-events:auto;width:min(720px,100%);height:52px;border-radius:99px;transition:width .4s var(--spring),height .4s var(--spring)}
.nav.shrunk .pill{width:min(660px,92%);height:44px}
.nav .skin{position:absolute;inset:0;border-radius:inherit;pointer-events:none;transition:opacity .4s var(--spring)}
.nav .skin.l{background:linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,.16) 45%,rgba(255,255,255,.12));-webkit-backdrop-filter:blur(22px) saturate(185%) brightness(1.04);backdrop-filter:blur(22px) saturate(185%) brightness(1.04);box-shadow:var(--edge-l),var(--shadow-l)}
.nav .skin.d{opacity:0;background:linear-gradient(180deg,rgba(20,24,34,.20),rgba(14,17,23,.14) 50%,rgba(10,12,18,.18));--x0:-60px;--x1:-60px;--y0:-60px;--y1:-60px;-webkit-mask:linear-gradient(90deg,transparent calc(var(--x0) - 16px),#000 calc(var(--x0) + 16px),#000 calc(var(--x1) - 16px),transparent calc(var(--x1) + 16px)),linear-gradient(180deg,transparent calc(var(--y0) - 6px),#000 calc(var(--y0) + 6px),#000 calc(var(--y1) - 6px),transparent calc(var(--y1) + 6px));-webkit-mask-composite:source-in;mask:linear-gradient(90deg,transparent calc(var(--x0) - 16px),#000 calc(var(--x0) + 16px),#000 calc(var(--x1) - 16px),transparent calc(var(--x1) + 16px)),linear-gradient(180deg,transparent calc(var(--y0) - 6px),#000 calc(var(--y0) + 6px),#000 calc(var(--y1) - 6px),transparent calc(var(--y1) + 6px));mask-composite:intersect;-webkit-backdrop-filter:blur(16px) saturate(175%);backdrop-filter:blur(16px) saturate(175%);box-shadow:var(--edge-d),0 18px 40px -14px rgba(0,0,0,.55)}
.nav .skin::before{content:"";position:absolute;inset:0;border-radius:inherit;mix-blend-mode:screen;background:linear-gradient(180deg,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 22%),radial-gradient(120% 60% at 0% 0%,rgba(255,255,255,.3) 0,rgba(255,255,255,0) 55%)}
.nav .skin.d::before{background:linear-gradient(180deg,rgba(255,255,255,.22) 0,rgba(255,255,255,0) 30%)}
.nav .skin::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:6px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;-webkit-backdrop-filter:blur(4px) saturate(220%) brightness(1.18);backdrop-filter:blur(4px) saturate(220%) brightness(1.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
/* светлое стекло остаётся всегда; тёмное проявляется только в зоне над тёмным блоком (маска из site.js) */
.nav.over-dark .skin.d{opacity:1}
.nav .inner{position:relative;z-index:2;height:100%;display:flex;align-items:center;justify-content:space-between;padding:0 8px 0 18px;gap:8px;transition:padding .4s var(--spring)}
.nav.shrunk .inner{padding:0 6px 0 14px}
.nav .logo{display:flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--ink);transition:color .4s,text-shadow .4s;text-shadow:0 0 10px rgba(255,255,255,.85),0 1px 0 rgba(255,255,255,.5)}
.nav .logo img{height:22px;width:auto;display:block;transition:filter .4s;filter:drop-shadow(0 0 6px rgba(255,255,255,.8))}
.nav .logo.dk{color:#fff;text-shadow:0 0 12px rgba(6,10,18,.55),0 1px 2px rgba(0,0,0,.45)}.nav .logo.dk img{filter:invert(1) brightness(2) drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.nav .links{display:flex;align-items:center;gap:2px}
.nav .links a{padding:9px 13px;border-radius:99px;font-size:14px;font-weight:500;text-decoration:none;color:var(--ink);text-shadow:0 0 10px rgba(255,255,255,.85),0 1px 0 rgba(255,255,255,.5);transition:background .3s,color .4s,text-shadow .4s,box-shadow .4s,transform .3s var(--spring)}
.nav .links a:hover{background:rgba(18,21,28,.06)}.nav .links a:active{transform:scale(.97)}
.nav .links a.on{background:rgba(18,21,28,.08)}
.nav .links a.dk{color:#fff;text-shadow:0 0 12px rgba(6,10,18,.55),0 1px 2px rgba(0,0,0,.5)}.nav .links a.dk:hover{background:rgba(255,255,255,.1)}.nav .links a.dk.on{background:rgba(255,255,255,.16);box-shadow:inset 1px 1px 0 rgba(255,255,255,.22)}
.seg{position:relative;display:inline-flex;flex-wrap:wrap;max-width:100%;gap:2px;padding:3px;border-radius:99px;background:rgba(18,21,28,.08);box-shadow:inset 1px 1px 0 rgba(255,255,255,.35),inset -1px -1px 0 rgba(0,0,0,.06);overflow:visible}
.seg .thumb{position:absolute;top:3px;left:3px;height:calc(100% - 6px);border-radius:99px;background:rgba(255,255,255,.85);box-shadow:inset 1px 1px 0 #fff,0 2px 6px rgba(10,14,24,.18);transition:left .45s var(--spring),width .45s var(--spring),transform .45s var(--spring);z-index:0}
.seg button{position:relative;z-index:1;border:none;background:none;padding:8px 13px;border-radius:99px;font-size:12px;font-weight:500;color:var(--muted);transition:color .3s;white-space:nowrap}
.seg button.on{color:var(--ink)}
.seg.sm button{padding:7px 10px;font-size:11px;font-family:var(--mono);letter-spacing:.06em}
.nav .seg{transition:background .4s,box-shadow .4s}
.nav .seg.dk{background:rgba(8,10,16,.38);box-shadow:inset 1px 1px 0 rgba(255,255,255,.10),inset -1px -1px 0 rgba(0,0,0,.3)}
.nav .seg.dk .thumb{background:rgba(255,255,255,.16);box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.25)}
.nav .seg.dk button{color:rgba(238,241,245,.72)}.nav .seg.dk button.on{color:#fff}
.seg.dark{background:rgba(8,10,16,.38);box-shadow:inset 1px 1px 0 rgba(255,255,255,.10),inset -1px -1px 0 rgba(0,0,0,.3)}
.seg.dark .thumb{background:rgba(255,255,255,.14);box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.25)}
.seg.dark button{color:rgba(238,241,245,.6)}.seg.dark button.on{color:#fff}
.nav .burger{display:none;width:40px;height:40px;border-radius:99px;border:none;background:transparent;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.nav .burger span{width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--spring),background .4s}
.nav .burger.dk span{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.4)}
.nav.open .burger span:first-child{transform:translateY(3.5px) rotate(45deg)}.nav.open .burger span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.nav .pill{flex-shrink:0}
/* шапка — flex‑колонка высотой 52px: без flex-shrink:0 меню сжималось до тонкой полоски из одних отступов */
.nav .menu{display:none;position:relative;pointer-events:auto;margin-top:8px;width:min(720px,100%);padding:10px;flex-direction:column;gap:4px;flex-shrink:0}
.nav.open .menu{display:flex;animation:mpanel .4s var(--spring) both}
.nav .menu.glass{background:linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,.44));-webkit-backdrop-filter:blur(28px) saturate(170%);backdrop-filter:blur(28px) saturate(170%)} /* меню лежит поверх текста — стекло плотнее, чтобы пункты читались */
.nav .menu a{padding:12px 14px;border-radius:14px;text-decoration:none;font-weight:500}
.nav .menu a:hover{background:rgba(18,21,28,.06)}
@media (max-width:760px){.nav .links,.nav .inner .seg{display:none}.nav .burger{display:flex}}
@keyframes mpanel{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

/* ---------- hero главной ---------- */
.hero{max-width:1280px;margin:0 auto;padding:clamp(72px,10vh,120px) 24px var(--gap);display:grid;grid-template-columns:minmax(0,4.5fr) minmax(0,7.5fr);gap:40px;align-items:center;min-height:calc(100vh - 66px)}
@media (max-width:900px){.hero{grid-template-columns:1fr;gap:36px}}
.hero h1{font-size:clamp(44px,6vw,84px);line-height:.98;letter-spacing:-.05em;margin-bottom:22px}
.hero .sub{font-size:clamp(18px,1.8vw,22px);line-height:1.4;color:var(--muted);margin:0 0 30px;max-width:520px;text-wrap:pretty}
.hero .ctas{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.hero .showcase{height:clamp(480px,66vh,620px)}
@media (max-width:760px){.hero{min-height:0;padding-top:48px}.hero .showcase{height:440px;min-height:0}}

/* ---------- карточка Reflex на главной ---------- */
.rxcard{padding:36px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:32px;align-items:center;border-radius:36px}
.rxcard .kick{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2)}
.rxcard .kick img{height:22px}
.rxcard .cardlead{font-size:clamp(20px,2.2vw,26px);line-height:1.3;letter-spacing:-.02em;margin:0;text-wrap:pretty}
.rxcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.rxcard li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--muted)}
.rxcard li span:first-child{font-family:var(--mono);font-size:12px;color:var(--muted2);padding-top:3px}
.rxcard .col{display:flex;flex-direction:column;gap:22px}
.rxcard .mini{position:relative;display:flex;flex-direction:column;gap:10px} /* карта на прозрачном фоне, висит над стеклом карточки */
.rxcard .mini img{width:100%;height:auto;display:block;filter:drop-shadow(0 24px 30px rgba(10,14,24,.18))}
.rxcard .mini .cap{order:-1;display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}

/* ---------- Reflex: hero + демо ---------- */
.rxhero{max-width:1200px;margin:0 auto;padding:clamp(56px,8vh,96px) 24px var(--gap)}
.rxhero .top{display:flex;flex-direction:column;gap:22px;max-width:820px}
.rxhero .top .kicker{display:flex;align-items:center;gap:10px;margin:0}
.rxhero h1{font-size:clamp(32px,3.8vw,46px);line-height:1.05;letter-spacing:-.04em}
.rxhero .lead{font-size:19px;max-width:560px}
.rxhero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.demo{margin-top:56px}
.demo .ctrl{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding:8px 8px 8px 20px;border-radius:26px}
.demo .ctrl .grp{display:flex;align-items:center;gap:12px;min-width:0;max-width:100%}
.demo .ctrl .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);white-space:nowrap}
.demo .ctrl .seg{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
.demo .ctrl .seg::-webkit-scrollbar{display:none}
.demo .meta{display:flex;justify-content:space-between;gap:12px;margin:12px 4px 0}
.demo .meta .name{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
@media (max-width:760px){.demo .ctrl{padding:12px;border-radius:22px}.demo .ctrl .grp{flex-direction:column;align-items:flex-start;gap:8px;width:100%}.demo .ctrl .lbl{padding-left:6px}}
.demo .showcase{height:min(88vh,820px);min-height:560px}
.demo .disclaimer{font-size:13px;color:var(--muted);margin:24px 0 0;max-width:720px}
@media (max-width:760px){.demo .showcase{height:72vh;min-height:520px}}

/* ---------- карточки ---------- */
.card{padding:26px 28px;display:flex;flex-direction:column;gap:14px;transition:transform .35s var(--spring)}
.card:hover{transform:translateY(-2px) scale(1.01)}
.card .n{font-family:var(--mono);font-size:12px;color:var(--muted2)}
.card .t{font-size:20px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
.card p{margin:0;font-size:15px;line-height:1.5;color:var(--muted)}
.card .mini{aspect-ratio:16/9;overflow:visible} /* иллюстрации висят на стекле карточки, без подложки */
.card .mini svg{width:100%;height:100%;display:block}
.pillar .t{font-weight:700}
.faq .t{font-size:17px;font-weight:600;letter-spacing:-.01em}

/* ---------- области ---------- */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));gap:32px;align-items:start}
.arealist{display:flex;flex-direction:column;gap:8px}
.arow{padding:16px 18px;cursor:pointer;transition:transform .35s var(--spring)}
.arow:hover{transform:translateY(-2px) scale(1.01)}
.arow .head{display:flex;align-items:center;gap:12px}
.arow .dot{width:12px;height:12px;border-radius:50%;background:var(--mid);box-shadow:0 0 0 3px rgba(61,213,196,.2);flex:none;transition:background .3s}
.arow .num{font-family:var(--mono);font-size:11px;color:var(--muted2);width:20px}
.arow .title{font-size:16px;font-weight:600;letter-spacing:-.01em}
.arow .body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--spring)}
.arow.open .body{grid-template-rows:1fr}
.arow .body>div{min-height:0;overflow:hidden}
.arow .body p{margin:10px 0 8px 44px;font-size:15px;line-height:1.5;color:var(--muted)}
.arow .linked{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;margin-left:44px;padding-bottom:4px}
.arow .linked .lk{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2)}
.arow .linked span.chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.6);padding:5px 10px;border-radius:99px;box-shadow:inset 1px 1px 0 #fff,inset 0 0 0 1px rgba(18,21,28,.06)}
.arow .linked span.chip i{width:6px;height:6px;border-radius:50%;background:var(--mid)}
.arow.open .dot{background:var(--violet);box-shadow:0 0 0 3px rgba(91,108,240,.2)}
.note{font-size:13px;color:#5B6474;margin:14px 0 0}
.areamap{padding:18px;position:sticky;top:90px}
.areamap .cap{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);margin-bottom:12px}
.areamap .pic{position:relative} /* обёртка ровно по картинке — хотспоты в % от неё */
.areamap .pic img{width:100%;height:auto;display:block;filter:drop-shadow(0 20px 26px rgba(10,14,24,.16))}
.areamap .hot{position:absolute;width:9%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 2px rgba(61,213,196,0),0 0 24px rgba(61,213,196,0);transition:box-shadow .35s}
.areamap .hot.on{box-shadow:0 0 0 2px rgba(43,179,166,.95),0 0 28px rgba(61,213,196,.7)}

/* ---------- стадия ---------- */
.stage{padding:6px 8px}
.stage .row{display:grid;grid-template-columns:140px 1fr;gap:16px;padding:18px 20px;align-items:start}
.stage .row+.row{box-shadow:inset 0 1px 0 rgba(18,21,28,.06)}
.stage .row .l{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted2);padding-top:3px}
.stage .row p{margin:0;font-size:16px;line-height:1.5;color:var(--ink)}
@media (max-width:560px){.stage .row{grid-template-columns:1fr;gap:6px}}

/* ---------- участие ---------- */
.join .side h3{font-size:22px;letter-spacing:-.02em;margin-bottom:12px}
.join .side p{margin:0 0 16px;font-size:16px;line-height:1.55;color:var(--muted)}
.join .bullets{display:flex;flex-direction:column;gap:8px}
.join .bullets div{display:flex;align-items:center;gap:10px;padding:12px 14px;font-size:15px}
.join .bullets i{width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.5}
.form{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;min-height:100%}
.form .seg{display:flex;width:100%;margin-bottom:22px}
.form .seg button{flex:1 1 0;min-width:0;white-space:normal;padding:10px 12px;font-size:14px;font-family:var(--font);letter-spacing:0}
.form form{display:flex;flex-direction:column;gap:14px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:500;color:var(--muted)}
.form input,.form textarea{border:none;outline:none;border-radius:14px;height:48px;padding:0 16px;font-size:15px;color:var(--ink);background:rgba(255,255,255,.55);box-shadow:inset 1px 1px 0 #fff,inset 0 0 0 1px rgba(18,21,28,.06);transition:box-shadow .25s}
.form textarea{height:96px;max-height:120px;padding:12px 16px;resize:vertical;line-height:1.45}
.form input:focus,.form textarea:focus{box-shadow:inset 1px 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.5),0 0 0 2px rgba(61,213,196,.55),0 0 0 5px rgba(61,213,196,.16)}
.form .profile{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--spring)}
.form .profile.show{grid-template-rows:1fr}
.form .profile>div{overflow:hidden;min-height:0;padding:2px;margin:-2px}
.form .submit{align-self:flex-start;margin-top:6px}
.form .fnote{font-size:13px;color:var(--muted2);margin:0;line-height:1.5}
.form .done{display:none;flex-direction:column;gap:12px;animation:mrise .4s ease both}
.form.sent form,.form.sent .seg{display:none}.form.sent .done{display:flex}
.form .done img{height:28px;align-self:flex-start}
.form .done h3{font-size:22px}
.form .done p{margin:0;color:var(--muted)}
.form .again{align-self:flex-start;background:none;border:1px solid #CFD3D8;border-radius:99px;padding:10px 16px;font-size:14px;font-weight:500;transition:transform .35s var(--spring),background .3s}
.form .again:hover{background:rgba(255,255,255,.6);transform:translateY(-2px) scale(1.01)}
@keyframes mrise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- футер ---------- */
footer{box-shadow:0 -1px 0 rgba(20,24,30,.06)}
footer .in{max-width:1200px;margin:0 auto;padding:36px 24px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
footer .brand{display:flex;flex-direction:column;gap:10px}
footer .brand img{height:26px;width:auto;display:block}
footer .cols{display:flex;gap:28px;flex-wrap:wrap;font-family:var(--mono);font-size:12px}
footer .cols>div{display:flex;flex-direction:column;gap:6px}
footer a{text-decoration:none;color:var(--ink)}

/* ---------- появление при скролле ---------- */
.rv{opacity:0;transform:translateY(14px);filter:blur(10px);transition:opacity .7s var(--spring),transform .7s var(--spring),filter .7s var(--spring)}
.rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.rv{transition:opacity .2s;transform:none;filter:none}.card:hover,.arow:hover,.btn:hover{transform:none}}
@media (prefers-reduced-transparency:reduce){.glass{background:rgba(255,255,255,.85);backdrop-filter:none}.glass-dark{background:rgba(14,17,23,.9);backdrop-filter:none}.glass::after,.glass-dark::after{display:none}}