/* URL2REEL v2.2 — герой «5 агентов делают ролик» (three.js-сцена из v2/hero.js) и блок «The crew».
   Всё ограничено классами .hero2 / .crew, чтобы не задевать общие стили из style.css (лендинг, /app, /admin, /docs).
   Перенесено из черновика v2.2 (ветка v2-draft, site/v2.html); keyframes flow → s2flow (имя занято в style.css). */
.hero2{padding-top:0;min-height:0}
.hero2 .eyebrow{text-transform:none;letter-spacing:.02em;margin-bottom:0;font-weight:500}
.hero2{position:relative;height:100svh;min-height:820px;max-height:1200px;overflow:hidden;display:flex;flex-direction:column;isolation:isolate;
  background:radial-gradient(50% 45% at 72% 62%,rgba(99,91,255,.22),transparent 70%),radial-gradient(45% 40% at 25% 55%,rgba(151,252,215,.12),transparent 70%),#050607}
.hero2 #hero-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .9s ease}
.hero2.gl-ready #hero-canvas{opacity:1}
.hero2 .copy{position:relative;z-index:5;text-align:center;padding:84px 16px 0;max-width:1000px;margin:0 auto;pointer-events:none}
.hero2 .copy>*{pointer-events:auto}
.hero2 .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 10px;border-radius:99px;border:1px solid rgba(151,252,215,.22);background:rgba(8,14,13,.6);backdrop-filter:blur(8px);font:500 12px "JetBrains Mono",monospace;color:#bfeedd;letter-spacing:.02em}
.hero2 .eyebrow i{width:7px;height:7px;border-radius:50%;background:#97FCD7;box-shadow:0 0 0 0 rgba(151,252,215,.7);animation:ping 1.8s infinite}
@keyframes ping{70%{box-shadow:0 0 0 8px rgba(151,252,215,0)}100%{box-shadow:0 0 0 0 rgba(151,252,215,0)}}
.hero2 h1{font:800 clamp(36px,3.9vw,66px)/1 Inter,system-ui,sans-serif;letter-spacing:-.045em;margin:16px 0 0;color:#f4f8f6;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hero2 h1 em{font:italic 400 1.12em/0.9 "Instrument Serif",Georgia,serif;letter-spacing:-.01em;background:linear-gradient(100deg,#97FCD7 10%,#d9fff1 45%,var(--acc,#8C85FF) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.hero2 .sub{margin:12px auto 0;max-width:760px;color:#a3b2ad;font-size:16.5px;line-height:1.5;text-shadow:0 1px 20px rgba(0,0,0,.8)}
.hero2 .stage{position:relative;z-index:1;flex:1;min-height:360px;width:min(70vw,1300px);margin:0 auto}
.hero2 .fallback{position:absolute;left:50%;top:50%;width:min(56%,560px);transform:translate(-50%,-52%) perspective(1200px) rotateX(6deg);border-radius:14px;overflow:hidden;background:#13181a;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 120px rgba(0,0,0,.6),0 0 120px -30px rgba(99,91,255,.6);transition:opacity .6s}
.hero2 .fallback .bar{display:flex;align-items:center;gap:6px;padding:9px 12px}
.hero2 .fallback .bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}
.hero2 .fallback .bar i:nth-child(2){background:#febc2e}
.hero2 .fallback .bar i:nth-child(3){background:#28c840}
.hero2 .fallback .bar span{flex:1;margin:0 18% 0 12%;background:#0a0d0e;border-radius:99px;padding:3px 12px;font:500 11px "JetBrains Mono",monospace;color:#cfd8d5;text-align:center}
/* vidgen/024: height:auto обязателен: иначе атрибут height="800" на <img> растягивает заглушку до ~834 px, и она наезжает на строку бейджей, пока 3D-сцена не загрузилась */
.hero2 .fallback img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.hero2.gl-ready .fallback{opacity:0;pointer-events:none}
.hero2 #labels{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .8s .3s}
.hero2.gl-ready #labels{opacity:1}
.hero2 .agent{position:absolute;left:0;top:0;translate:-50% 26px;--c:#97FCD7;padding:7px 12px 8px;border-radius:12px;background:rgba(7,11,12,.74);border:1px solid rgba(255,255,255,.09);backdrop-filter:blur(10px);text-align:center;min-width:128px;transition:border-color .3s,box-shadow .3s,background .3s;will-change:transform}
.hero2 .agent.above{translate:-50% calc(-100% - 26px)}
.hero2 .agent.right{translate:30px -50%;text-align:left}
.hero2 .agent.right b{justify-content:flex-start}
.hero2 .agent b{display:flex;align-items:center;justify-content:center;gap:7px;font:650 13px Inter,system-ui,sans-serif;color:#f1f6f4;letter-spacing:-.005em}
.hero2 .agent b i{width:7px;height:7px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
.hero2 .agent .st{display:block;margin-top:2px;font:400 11px/1.35 "JetBrains Mono",monospace;color:#73837e;white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}
.hero2 .agent.on{border-color:color-mix(in srgb,var(--c) 75%,transparent);background:color-mix(in srgb,var(--c) 14%,rgba(7,11,12,.82));box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 14%,transparent),0 0 40px -6px color-mix(in srgb,var(--c) 70%,transparent)}
.hero2 .agent.on .st{color:#f4f8f6}
.hero2 .agent.done .st{color:#97FCD7}
.hero2 .reelcap{position:absolute;left:0;top:0;translate:-50% 0;padding:7px 13px;border-radius:99px;background:rgba(6,22,17,.85);border:1px solid rgba(151,252,215,.5);color:#97FCD7;font:500 12px "JetBrains Mono",monospace;white-space:nowrap;opacity:0;box-shadow:0 0 30px -6px rgba(151,252,215,.6)}
.hero2 .agent .role{display:block;margin-top:1px;font:500 9.5px/1.3 "JetBrains Mono",monospace;letter-spacing:.09em;text-transform:uppercase;color:color-mix(in srgb,var(--c) 75%,#fff)}
.hero2 .elabel{position:absolute;left:0;top:0;translate:-50% -50%;padding:3px 9px;border-radius:99px;font:500 10.5px "JetBrains Mono",monospace;color:#8fa29b;background:rgba(6,9,10,.78);border:1px dashed rgba(255,255,255,.16);white-space:nowrap;transition:color .3s,border-color .3s,box-shadow .3s;--c:#97FCD7}
.hero2 .elabel::before{content:"→ ";color:var(--c)}
.hero2 .elabel.on{color:#fff;border:1px solid var(--c);box-shadow:0 0 22px -4px var(--c)}
.hero2 .elabel.e1{translate:-50% -50%}
.hero2 .elabel.e0{translate:-108% -50%}
.hero2 .elabel.e2{translate:8% -50%}
.hero2 .elabel.e3{translate:12% -50%}
.hero2 .elabel.e4{translate:-112% -50%}
.hero2 .dchip{position:absolute;left:0;top:0;translate:-50% -50%;white-space:nowrap;font:500 11.5px "JetBrains Mono",monospace;color:#fff;padding:5px 10px;border-radius:9px;background:rgba(8,12,13,.86);
  border:1px solid color-mix(in srgb,var(--c,#97FCD7) 75%,transparent);box-shadow:0 0 26px -6px var(--c,#97FCD7);will-change:transform,opacity;--c:#97FCD7}
.hero2 .dchip.page{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px}
.hero2 .dchip.page .th{width:66px;height:41px;border-radius:5px;background-size:260% auto;background-color:#fff;flex:none}
.hero2 .dchip.page small{display:block;font-size:8.5px;color:#93a59f;text-transform:uppercase;letter-spacing:.1em}
.hero2 .dchip.txt{font:italic 400 17px "Instrument Serif",Georgia,serif;padding:4px 11px}
.hero2 .dchip.font b{font:700 15px Inter,sans-serif;margin-right:3px}
.hero2 .dchip.font i{display:inline-block;width:11px;height:11px;border-radius:50%;margin-left:4px;vertical-align:-1px;border:1px solid rgba(255,255,255,.55)}
.hero2 .dchip.beat{font-size:9.5px;padding:2px 7px;letter-spacing:.08em;color:var(--c);border-radius:6px}
.hero2 .dchip.qa{translate:-100% -50%;display:flex;align-items:center;gap:8px;color:#c4d2cd;border-color:rgba(151,252,215,.3);box-shadow:none}
.hero2 .dchip.qa i{width:15px;height:15px;border-radius:50%;border:1.5px solid #5d6e69;flex:none;transition:all .25s}
.hero2 .dchip.qa.ok{color:#fff;border-color:rgba(151,252,215,.75);box-shadow:0 0 22px -6px #97FCD7}
.hero2 .dchip.qa.ok i{border-color:#97FCD7;background:#97FCD7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5' fill='none' stroke='%2306241c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.crew{position:relative;padding:72px clamp(16px,4vw,48px) 40px;background:linear-gradient(180deg,#050607,#070a0b 60%,#050607)}
.crew-head{text-align:center;max-width:760px;margin:0 auto 40px}
.crew-head .k{font:500 12px "JetBrains Mono",monospace;letter-spacing:.14em;color:#97FCD7}
.crew-head h2{font:800 clamp(30px,3.4vw,50px)/1.05 Inter,sans-serif;letter-spacing:-.04em;margin:12px 0 0;color:#f4f8f6}
.crew-head h2 em{font:italic 400 1.12em "Instrument Serif",Georgia,serif;color:#97FCD7}
.crew-head p{color:#9aaaa5;font-size:16.5px;line-height:1.55;margin:14px auto 0;max-width:640px}
.crew-graph{display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr 60px 1fr 60px 1fr;grid-template-rows:auto 56px;max-width:1320px;margin:0 auto;align-items:stretch}
.crew .ag{--c:#97FCD7;position:relative;padding:18px 16px 20px;border-radius:16px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.08);transition:border-color .35s,box-shadow .35s,background .35s,transform .35s;overflow:hidden}
.crew .ag::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,transparent,var(--c),transparent);opacity:.5}
.crew .ag-top{display:flex;justify-content:space-between;align-items:center;font:500 11px "JetBrains Mono",monospace;color:#6c7c77}
.crew .ag-dot{display:inline-flex;align-items:center;gap:7px}
.crew .ag-dot i{width:9px;height:9px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.crew .ag-state{padding:2px 8px;border-radius:99px;border:1px solid rgba(255,255,255,.1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:72%}
.crew .ag h3{margin:14px 0 2px;font:700 20px Inter,sans-serif;letter-spacing:-.02em;color:#fff}
.crew .ag .ag-role{font:500 10.5px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
.crew .ag p{margin:10px 0 14px;color:#9aaaa5;font-size:14px;line-height:1.5}
.crew .ag .io{display:flex;flex-direction:column;gap:5px;font:400 11px/1.35 "JetBrains Mono",monospace;color:#7f908a}
.crew .ag .io b{color:#cfdcd7;font-weight:500}
.crew .ag .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--c);box-shadow:0 0 12px var(--c)}
.crew .ag.on{border-color:color-mix(in srgb,var(--c) 70%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 16%,transparent),rgba(255,255,255,.01));box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 10%,transparent),0 20px 60px -20px color-mix(in srgb,var(--c) 60%,transparent);transform:translateY(-4px)}
.crew .ag.on .ag-state{color:#fff;border-color:var(--c)}
.crew .ag.on .bar{animation:agfill 2.1s linear forwards}
.crew .ag.done .ag-state{color:#97FCD7;border-color:rgba(151,252,215,.4)}
.crew .ag.done .bar{width:100%;opacity:.35}
@keyframes agfill{from{width:0}to{width:100%}}
.crew .lnk{position:relative;display:flex;align-items:center;justify-content:center}
.crew .lnk::before{content:"";position:absolute;left:-2px;right:6px;top:50%;height:2px;margin-top:-1px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 6px,transparent 6px 11px);border-radius:2px}
.crew .lnk::after{content:"";position:absolute;right:0;top:50%;margin-top:-5px;border:5px solid transparent;border-left:7px solid rgba(255,255,255,.3)}
.crew .lnk span{position:absolute;bottom:calc(50% + 10px);left:50%;translate:-50% 0;font:500 9.5px "JetBrains Mono",monospace;color:#7d8f89;white-space:nowrap;letter-spacing:.02em}
.crew .lnk.on::before{background:repeating-linear-gradient(90deg,var(--c) 0 8px,transparent 8px 14px);background-size:28px 2px;animation:s2flow .5s linear infinite;box-shadow:0 0 12px var(--c)}
.crew .lnk.on::after{border-left-color:var(--c)}
.crew .lnk.on span{color:#fff}
.crew .lnk.done::before{background:color-mix(in srgb,var(--c) 55%,transparent)}
@keyframes s2flow{to{background-position:28px 0}}
.crew .fb{grid-column:7/10;grid-row:2;position:relative}
.crew .fb::before{content:"";position:absolute;left:14%;right:14%;top:0;height:24px;border:1.5px dashed rgba(255,255,255,.2);border-top:0;border-radius:0 0 22px 22px}
.crew .fb span{position:absolute;left:50%;top:14px;translate:-50% 0;padding:3px 10px;border-radius:99px;background:#070a0b;font:500 10.5px "JetBrains Mono",monospace;color:#8fa29b;white-space:nowrap}
.crew .fb.on::before{border-color:#97FCD7;box-shadow:0 6px 18px -8px #97FCD7}
.crew .fb.on span{color:#97FCD7}
@media (max-width:1100px){
.crew-graph{grid-template-columns:1fr;grid-template-rows:none;max-width:560px}
.crew .lnk{height:44px}
.crew .lnk::before{left:50%;right:auto;top:0;bottom:8px;height:auto;width:2px;margin:0 0 0 -1px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 6px,transparent 6px 11px)}
.crew .lnk::after{right:auto;left:50%;top:auto;bottom:0;margin:0 0 0 -5px;border:5px solid transparent;border-top:7px solid rgba(255,255,255,.3)}
.crew .lnk.on::after{border-left-color:transparent;border-top-color:var(--c)}
.crew .lnk.on::before{background:repeating-linear-gradient(180deg,var(--c) 0 8px,transparent 8px 14px);background-size:2px 28px;animation:flowv .5s linear infinite}
.crew .lnk span{bottom:auto;top:50%;left:calc(50% + 14px);translate:0 -50%}
.crew .fb{grid-column:auto;grid-row:auto;height:40px}
.crew .fb::before{left:auto;right:50%;width:40%;top:-8px;height:36px}
.crew .fb span{top:auto;bottom:0}
}
@keyframes flowv{to{background-position:0 28px}}
.hero2 .side{position:absolute;top:0;bottom:0;width:26vw;z-index:2;perspective:1100px;pointer-events:none}
.hero2 .side-l{left:0}
.hero2 .side-r{right:0}
.hero2 .sreel{position:absolute;margin:0;width:var(--w);aspect-ratio:9/16;transform-style:preserve-3d;
  transform:translate3d(calc(var(--px,0) * var(--d) * -46px),calc(var(--py,0) * var(--d) * -30px),0) rotateY(calc(var(--ry) + var(--px,0) * 8deg)) rotateX(calc(var(--py,0) * -6deg))}
.hero2 .sreel .rc{position:relative;width:100%;height:100%;border-radius:18px;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.65),0 0 60px -14px var(--g,rgba(151,252,215,.45))}
.hero2 .sreel .rc::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 30%);pointer-events:none}
.hero2 .sreel video{display:block;width:100%;height:100%;object-fit:cover}
.hero2 .sreel figcaption{position:absolute;left:10px;bottom:10px;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:99px;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);font:500 10.5px "JetBrains Mono",monospace;color:#e6efec}
.hero2 .sreel figcaption i{width:6px;height:6px;border-radius:50%;background:#97FCD7}
.hero2 .sreel.dim .card{filter:brightness(.72) saturate(.9)}
.hero2 .s1{--w:clamp(140px,10.4vw,230px);top:15%;--d:1}
.hero2 .s2{--w:clamp(104px,7.4vw,170px);top:47%;--d:.55}
.hero2 .s3{--w:clamp(100px,7vw,156px);top:68%;--d:.8}
.hero2 .side-l .s1{left:2.4vw;--ry:20deg}
.hero2 .side-l .s2{left:8vw;--ry:26deg}
.hero2 .side-l .s3{left:1.6vw;--ry:16deg}
.hero2 .side-r .s1{right:2.4vw;--ry:-20deg}
.hero2 .side-r .s2{right:8vw;--ry:-26deg}
.hero2 .side-r .s3{right:1.6vw;--ry:-16deg}
.hero2 .copy>*{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero2 .copy>:nth-child(2){animation-delay:.08s}
.hero2 .copy>:nth-child(3){animation-delay:.16s}
.hero2 .copy>:nth-child(4){animation-delay:.24s}
.hero2 .copy>:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@media (max-width:1599px){
.hero2 .side .s2{display:none}
}
@media (max-width:1100px){
.hero2 .s3{display:none}
.hero2 .side-l .s2{left:3vw;top:60%}
.hero2 .side-r .s2{right:3vw;top:60%}
.hero2 .stage{width:76vw}
}
@media (min-width:1101px){
.hero2 .br-m{display:none}
}
.hero2 .ew-s,.hero2 .sidecap{display:none}
@media (max-width:760px){
.hero2{height:auto;min-height:100svh;max-height:none}
.hero2 .ew-l,.hero2 .m-hide{display:none}
.hero2 .ew-s{display:inline}
.hero2 .copy{padding-top:72px}
.hero2 h1{font-size:clamp(32px,9.4vw,42px);margin-top:12px}
.hero2 .sub{font-size:14.5px;margin-top:10px}
.hero2 .stage{width:100%;flex:none;height:480px;min-height:0;margin-top:16px}
.hero2 .side-l,.hero2 .side-r .s2,.hero2 .side-r .s3{display:none}
.hero2 .side-r{position:relative;order:5;width:auto;top:auto;bottom:auto;display:flex;align-items:center;gap:18px;padding:0 20px 34px;perspective:900px}
.hero2 .side-r .s1{position:relative;--w:118px;top:auto;right:auto;--ry:14deg;flex:none}
.hero2 .sidecap{display:block;margin:0;color:#a3b2ad;font-size:14px;line-height:1.45}
.hero2 .sidecap b{color:#fff}
.hero2 .sidecap a{color:#97FCD7;text-decoration:none}
.hero2 .agent{min-width:0;padding:5px 9px}
.hero2 .agent b{font-size:11.5px}
.hero2 .agent .st,.hero2 .agent .role{display:none}
.hero2 .reelcap{font-size:10.5px}
.hero2 .fallback{width:84%}
}
@media (prefers-reduced-motion:reduce){
.hero2 .copy>*{animation:none}
.hero2 .eyebrow i{animation:none}
}
/* ---- форма в герое: общий composer (app.js: data-composer, input.url, .gen), стиль под v2.2 ---- */
.hero2 .composer{width:min(680px,100%);margin:20px auto 0;padding:6px;border-radius:16px;background:rgba(9,13,14,.74);border:1px solid rgba(151,252,215,.22);
  box-shadow:0 0 0 6px rgba(151,252,215,.035),0 24px 60px rgba(0,0,0,.55),0 0 80px -20px rgba(151,252,215,.35);transition:border-color .2s,box-shadow .2s}
.hero2 .composer:focus-within{border-color:rgba(151,252,215,.6)}
.hero2 .urlrow{background:transparent;border:0;padding:0 0 0 12px}
.hero2 .urlrow .url{font:500 15px "JetBrains Mono",monospace;padding:12px 4px}
.hero2 .gen{background:linear-gradient(180deg,#b4ffe3,#97FCD7);box-shadow:0 8px 30px -8px rgba(151,252,215,.7),inset 0 1px 0 rgba(255,255,255,.6);padding:13px 20px;border-radius:11px}
.hero2 .modes-row{padding:8px 6px 2px;justify-content:center;gap:6px 10px}
.hero2 .mode{padding:6px 11px;font-size:12.5px}
.hero2 .mode:not(.on){background:rgba(0,0,0,.25)}
.hero2 .mode .mp{font-family:"JetBrains Mono",monospace;font-weight:600;margin-left:2px;opacity:.85}
.hero2 .mode.on .mp{opacity:1}
.hero2 .opts{margin:2px 6px 0;text-align:left}
.hero2 .opts>summary{list-style:none;cursor:pointer;font-size:12px;color:var(--dim);padding:6px 0;text-align:center}
.hero2 .opts>summary::-webkit-details-marker{display:none}
.hero2 .opts>summary::after{content:" ▾"}.hero2 .opts[open]>summary::after{content:" ▴"}
.hero2 .opts .chips{padding-top:4px}
.hero2 .url-hint{margin:8px 0 0;font-size:13px;color:#ffd27a;text-align:center}
.hero2 .url-hint[hidden]{display:none}
.hero2 .shake{animation:s2shake .35s}
@keyframes s2shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.hero2 .pricing-line{margin:10px 0 0;font-size:13px;color:#a3b2ad}
.hero2 .pricing-line b{color:#f4f8f6;font-weight:600}
.hero2 .pricing-line a{color:#97FCD7;text-decoration:none;white-space:nowrap}
.hero2 .micro{margin-top:8px;font-size:12.5px;color:#7f908a;gap:6px 18px}
.hero2 .micro span::before{color:#97FCD7}
@media (max-width:760px){
  .hero2 .copy{padding-top:76px}
  .hero2 .composer{margin-top:16px}
  .hero2 .urlrow{padding:4px 4px 4px 10px}
  .hero2 .gen{padding:13px 14px;font-size:14px}
  .hero2 .micro{font-size:12px;gap:4px 12px}
  .hero2 .pricing-line{font-size:12.5px}
}
/* /app и /admin: героя нет (style.css прячет main > :not(.dapp)), сцену не запускаем — см. assets/hero2.js */
.hero2 .examples{justify-content:center;padding:8px 6px 2px}
.hero2 .ex-note{color:#6f807a;margin-left:6px}
@media (max-width:640px){.hero2 .ex-note{display:none}}

/* LIVE в шапке рядом с логотипом (раньше — отдельная плашка над заголовком героя) */
.nav .live-pill{display:inline-flex;align-items:center;gap:6px;margin-left:10px;padding:3px 9px 3px 7px;border-radius:99px;border:1px solid rgba(151,252,215,.25);background:rgba(8,14,13,.6);font:600 10.5px "JetBrains Mono",monospace;letter-spacing:.06em;color:#bfeedd;vertical-align:middle}
.nav .live-pill i{width:6px;height:6px;border-radius:50%;background:#97FCD7;box-shadow:0 0 0 0 rgba(151,252,215,.7);animation:ping 1.8s infinite}
@media (prefers-reduced-motion:reduce){.nav .live-pill i{animation:none}}

/* шапка: $URL2REEL одной высоты с кнопками; X и Telegram пока неактивны (ссылок ещё нет) */
.navcta .ticker-pill{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--navbtn-h,42px);padding:0 13px}
.navcta .soc{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:var(--navbtn-h,42px);height:var(--navbtn-h,42px);border-radius:999px;border:1px solid var(--line2);opacity:.45;cursor:not-allowed}
.navcta .soc svg{width:15px;height:15px;fill:currentColor}
/* X открыт (horse/089): ссылка вместо заглушки «coming soon» — полная яркость, кликабельна */
.navcta a.soc-on{opacity:1;cursor:pointer;color:inherit;text-decoration:none}
.navcta a.soc-on:hover{border-color:var(--acc1);color:var(--acc1)}
@media (max-width:900px){.navcta .soc{display:none}}
.navcta [hidden]{display:none !important}