/* ═══════════════════════════════════════════════════════════════════════════
   «Приложение Stars» (/prilozhenie) и заставка при входе.
   Сцена — как в кинематографичных роликах о приложениях: тёмный «космос», сетка-чертёж с метками, свет за телефоном,
   3D-телефон с настоящими экранами Stars, заголовок печатается по буквам. Всё движение выключается, если в системе
   включено «Уменьшить движение».
   ═══════════════════════════════════════════════════════════════════════════ */
.ap-page{color:#EDE9FF}
.ap-stage{position:relative;overflow:hidden;padding:22px 0 56px;isolation:isolate;
  background:radial-gradient(900px 560px at 74% 48%,rgba(139,108,246,.24),transparent 62%),
    radial-gradient(640px 420px at 12% 18%,rgba(232,184,75,.13),transparent 62%),
    linear-gradient(180deg,rgba(7,6,15,.2) 0%,rgba(13,11,26,.65) 55%,rgba(7,6,15,.9) 100%)}
.ap-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 48% 66% at 72% 48%,#000 30%,transparent 78%);
  mask-image:radial-gradient(ellipse 48% 66% at 72% 48%,#000 30%,transparent 78%)}
/* метки «+» на каждом четвёртом пересечении сетки — как на чертеже */
.ap-grid::after{content:"";position:absolute;inset:0;background-size:224px 224px;background-position:-6px -6px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='224' height='224'%3E%3Cpath d='M0 6h12M6 0v12' stroke='%23E8B84B' stroke-opacity='.65' stroke-width='1.2'/%3E%3C/svg%3E")}
.ap-hud{position:relative;display:flex;justify-content:space-between;gap:12px;max-width:1180px;margin:0 auto;padding:0 16px 6px;
  font:600 11px/1.2 var(--font);letter-spacing:.26em;color:rgba(237,233,255,.5)}
.ap-hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center;min-height:600px}
.ap-kick{font:700 12px/1 var(--font);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:6px 0 16px}
.ap-page .ap-h1{font-family:var(--display);font-weight:400;font-size:clamp(40px,6.4vw,74px);line-height:1.02;letter-spacing:-.02em;color:#fff;
  margin:0 0 16px;text-shadow:0 0 40px rgba(139,108,246,.35)}
.ap-typed .ap-g{color:var(--gold-2);text-shadow:0 0 34px rgba(232,184,75,.4)}
.ap-typed .ap-w{display:inline-block;white-space:nowrap}
.ap-typed .ap-ch{display:inline-block;opacity:0;transform:translateY(.14em);filter:blur(7px);
  animation:apChar .5s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--d) + var(--i) * var(--s))}
.ap-caret{display:inline-block;width:.06em;height:.9em;margin-left:.06em;vertical-align:-.08em;background:var(--gold-2);border-radius:2px;
  animation:apCaret .9s steps(1) infinite,apCaretOut .3s ease forwards;animation-delay:0s,calc(var(--d) + var(--n) * var(--s) + 1.6s)}
@keyframes apChar{to{opacity:1;transform:none;filter:none}}
@keyframes apCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@keyframes apCaretOut{to{visibility:hidden;width:0}}
.ap-lead{max-width:540px;color:#CFC8EC;font-size:17.5px;line-height:1.6;margin:0 0 22px;
  opacity:0;animation:apFade .8s ease forwards 1.3s}
.ap-page .btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center;opacity:0;animation:apFade .8s ease forwards 1.5s}
.ap-page .btn.glass{background:rgba(255,255,255,.09);color:#F4F2FF;border:1px solid rgba(255,255,255,.28)}
.ap-ok{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:14px;background:rgba(22,121,74,.22);color:#9FE8C2;font-weight:600}
@keyframes apFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* магазины приложений: только названия (логотипы магазинов не рисуем) */
.ap-stores{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.ap-store{display:grid;grid-template-columns:auto;padding:9px 16px 10px;border-radius:14px;min-width:150px;text-decoration:none;
  background:#05040b;border:1px solid rgba(255,255,255,.28);color:#fff!important;box-shadow:0 10px 30px -18px rgba(0,0,0,.9)}
.ap-store small{font-size:10.5px;letter-spacing:.06em;color:rgba(255,255,255,.7)}
.ap-store b{font-size:18px;line-height:1.15;letter-spacing:-.01em}
.ap-store span{font-size:11.5px;color:rgba(255,255,255,.55)}
.ap-store:hover{border-color:var(--gold)}
/* что на экране: подписи слева, активная — с золотой чертой */
.ap-tags{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:4px;max-width:520px;opacity:0;animation:apFade .8s ease forwards 1.8s}
.ap-tags button{display:grid;gap:2px;width:100%;text-align:left;background:none;border:0;border-left:2px solid rgba(255,255,255,.12);
  padding:6px 0 6px 14px;cursor:pointer;color:rgba(237,233,255,.5);transition:color .3s,border-color .3s}
.ap-tags b{font-size:14.5px;font-weight:700}
.ap-tags span{font-size:13.5px;line-height:1.45;max-height:0;overflow:hidden;transition:max-height .45s ease}
.ap-tags li.on button{color:#fff;border-left-color:var(--gold)}
.ap-tags li.on span{max-height:60px;color:#CFC8EC}
/* 3D-телефон */
.ap-phone-wrap{position:relative;display:flex;justify-content:center;align-items:center;perspective:1600px;padding:16px 0 44px}
.ap-light{position:absolute;left:50%;top:46%;width:min(560px,96vw);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(139,108,246,.42),rgba(232,184,75,.14) 45%,transparent 70%);animation:apPulse 7s ease-in-out infinite}
.ap-phone{position:relative;width:min(292px,68vw);aspect-ratio:390/844;transform-style:preserve-3d;
  transform:rotateY(-16deg) rotateX(9deg) rotateZ(1.5deg);
  animation:apIn 1.8s cubic-bezier(.16,.84,.24,1) .1s both,apFloat 9s ease-in-out 1.9s infinite}
.ap-side{position:absolute;inset:0;border-radius:48px;transform:translateZ(-14px);background:linear-gradient(90deg,#14111e,#3c3555 48%,#110f19)}
.ap-bezel{position:absolute;inset:0;border-radius:48px;padding:11px;
  background:linear-gradient(150deg,#5a5276 0%,#1a1726 24%,#0b0a12 60%,#433c5a 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.16),inset 0 0 0 5px #06050b,0 60px 100px -36px rgba(0,0,0,.95),
    0 0 90px -20px rgba(139,108,246,.45)}
.ap-bezel::before,.ap-bezel::after{content:"";position:absolute;right:-3px;width:3px;border-radius:0 3px 3px 0;background:#3a3450}
.ap-bezel::before{top:22%;height:12%} .ap-bezel::after{top:37%;height:7%}
.ap-screen{position:absolute;inset:11px;border-radius:38px;overflow:hidden;background:#0b0a12}
.ap-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transform:scale(1.05);
  transition:opacity .8s ease,transform 1.8s cubic-bezier(.2,.7,.2,1)}
.ap-screen img.on{opacity:1;transform:none}
.ap-island{position:absolute;top:9px;left:50%;width:31%;height:23px;transform:translateX(-50%);background:#000;border-radius:14px}
.ap-glare{position:absolute;inset:-30% -70%;pointer-events:none;transform:translateX(-62%);
  background:linear-gradient(105deg,transparent 43%,rgba(255,255,255,.17) 50%,transparent 57%);animation:apGlare 7.5s ease-in-out 1.6s infinite}
.ap-floor{position:absolute;bottom:4px;left:50%;width:58%;height:26px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent);filter:blur(5px)}
@keyframes apIn{from{opacity:0;transform:translateY(130px) rotateX(64deg) rotateZ(-28deg) rotateY(12deg) scale(.8);filter:blur(12px)}
  55%{filter:blur(0)}to{opacity:1;transform:rotateY(-16deg) rotateX(9deg) rotateZ(1.5deg)}}
@keyframes apFloat{0%,100%{transform:rotateY(-16deg) rotateX(9deg) rotateZ(1.5deg) translateY(0)}
  50%{transform:rotateY(-9deg) rotateX(6deg) rotateZ(.4deg) translateY(-12px)}}
@keyframes apGlare{0%,52%{transform:translateX(-62%)}78%,100%{transform:translateX(62%)}}
@keyframes apPulse{0%,100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}}
/* ролик */
.ap-sec>.wrap>.sub{max-width:760px}
.ap-film{max-width:960px;margin:0 auto;border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:#05040b;
  box-shadow:0 40px 80px -40px rgba(0,0,0,.95),0 0 0 6px rgba(255,255,255,.04)}
.ap-film.tall{max-width:340px}
.ap-film video,.ap-play img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#05040b}
.ap-film.tall video,.ap-film.tall .ap-play img{aspect-ratio:9/16}
.ap-play{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.ap-play span{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;
  padding:12px 20px 12px 12px;border-radius:999px;background:rgba(7,6,15,.72);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ap-play b{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--gold);color:#1A1330;font-size:16px;padding-left:3px}
.ap-play:hover span{border-color:var(--gold)}
/* что внутри, как установить */
.ap-feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:14px}
.ap-how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.ap-card{--c:rgba(255,255,255,.3);position:relative;border-radius:22px;padding:18px 18px 16px;
  background:linear-gradient(165deg,color-mix(in srgb,var(--c) 22%,rgba(255,255,255,.04)),rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 20px 44px -30px rgba(0,0,0,.9)}
.ap-card i{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;font-style:normal;font-size:20px;
  background:color-mix(in srgb,var(--c) 30%,rgba(255,255,255,.06));color:#fff;margin-bottom:8px}
.ap-card h3{margin:0 0 6px;font-size:19px;color:#fff}
.ap-card p,.ap-card li{color:#D6D0EE;font-size:14.8px;line-height:1.55}
.ap-card ol{margin:0;padding-left:20px}
.ap-card li+li{margin-top:4px}
.ap-card li b{color:#fff}
.ap-card li small{display:inline-block;margin-top:2px;font-size:12.8px;line-height:1.4;color:#B9B1D9}
.ap-card .ap-mini{margin-top:10px;font-size:13px}
.ap-card a{display:inline-block;margin-top:8px;font-weight:700;text-decoration:none}
.ap-card.crm{--c:#E0574A}.ap-card.nalogi{--c:#E8B84B}.ap-card.doc{--c:#4FA6E8}.ap-card.promty{--c:#8B6CF6}
.ap-card.hot{--c:#E8B84B}
.ap-card.hot::after{content:"ваш телефон";position:absolute;top:14px;right:14px;font-size:11px;font-weight:700;letter-spacing:.06em;
  color:#1A1330;background:var(--gold);padding:3px 8px;border-radius:999px}
.ap-qr{width:132px;margin-top:12px;padding:6px;background:#fff;border-radius:12px}
.ap-qr svg{display:block;width:100%;height:auto}
.ap-note{margin:18px auto 0;max-width:760px;text-align:center;color:#A9A3C7;font-size:14px}
@media (max-width:860px){
  .ap-hero{grid-template-columns:1fr;gap:8px;min-height:0;text-align:left}
  .ap-phone-wrap{order:2}
  .ap-tags{display:none}
  .ap-stage{padding-bottom:28px}
}
/* баннер на главной */
.ap-promo{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;border-radius:26px;padding:22px;overflow:hidden;position:relative;
  background:radial-gradient(420px 260px at 85% 50%,rgba(139,108,246,.35),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(232,184,75,.3)}
.ap-promo h2{text-align:left!important;margin:4px 0 6px}
.ap-promo p{color:#CFC8EC;margin:0 0 14px;max-width:560px}
.ap-promo .eyebrow{color:var(--gold);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-weight:700}
.ap-mini{width:118px;aspect-ratio:390/844;border-radius:22px;padding:5px;transform:rotate(8deg);
  background:linear-gradient(150deg,#5a5276,#0b0a12 55%,#433c5a);box-shadow:0 30px 50px -24px rgba(0,0,0,.9),0 0 60px -10px rgba(139,108,246,.6)}
.ap-mini img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:18px}
@media (max-width:560px){.ap-promo{grid-template-columns:1fr}.ap-mini{display:none}}

/* ─────────── видеозаставка при входе (index.html → #intro; показывать ли — js/early.js, ролик — js/intro.js) ─────────── */
.intro{display:none}
html.intro-on .intro{position:fixed;inset:0;z-index:2147483000;display:block;overflow:hidden;cursor:pointer;
  background:#07060F center/cover no-repeat;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  transition:opacity .45s ease,transform .45s ease}
html.intro-on body{overflow:hidden}
.intro-v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none}
.intro-play .intro-v{opacity:1}
.intro-out{opacity:0;transform:scale(1.025);pointer-events:none}
/* кнопка «Открыть Stars» — когда браузер просит касание, чтобы включить звук */
.intro-go{position:absolute;left:50%;bottom:calc(14vh + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  display:inline-flex;align-items:center;gap:12px;padding:16px 30px 16px 18px;border-radius:999px;cursor:pointer;white-space:nowrap;
  font:600 17px/1 var(--font);letter-spacing:.01em;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(232,184,75,.42);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0;animation:goIn .55s cubic-bezier(.2,.8,.2,1) .05s forwards}
.intro-go[hidden]{display:none}
.intro-go i{position:relative;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#FFE7A8,#E8B84B);
  box-shadow:0 0 0 0 rgba(232,184,75,.55);animation:goPulse 2s ease-out .6s infinite}
.intro-go i::after{content:"";position:absolute;left:11px;top:9px;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #1A1330}
.intro-go:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
/* ролик догружается (медленная связь) — тонкое кольцо */
.intro-load::after{content:"";position:absolute;left:50%;bottom:calc(16vh + env(safe-area-inset-bottom,0px));width:28px;height:28px;margin-left:-14px;
  border-radius:50%;border:2.5px solid rgba(255,231,168,.2);border-top-color:#FFE7A8;opacity:0;animation:inSpin .9s linear infinite,inFade .3s ease .6s forwards}
@keyframes goIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes goPulse{0%{box-shadow:0 0 0 0 rgba(232,184,75,.55)}70%,100%{box-shadow:0 0 0 14px rgba(232,184,75,0)}}
@keyframes inSpin{to{transform:rotate(360deg)}}
@keyframes inFade{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  .ap-page *,.ap-phone,.ap-light,.ap-glare{animation:none!important;transition:none!important}
  .ap-typed .ap-ch,.ap-lead,.ap-page .btns,.ap-tags{opacity:1;transform:none;filter:none}
  .ap-caret{display:none}
  html.intro-on .intro{display:none}
}

/* ─────────── «Stars — на экран „Домой“» (js/ui/install.js) ─────────── */
.ins h2{font-size:24px;margin:0 0 6px;padding-right:38px}
.ins .sh-lead{margin-bottom:12px}
.ins-home{position:relative;display:grid;grid-template-columns:repeat(4,50px);gap:14px 20px;justify-content:center;align-items:start;margin:34px 0 16px;
  padding:18px 12px 14px;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 30% 0%,#3A2D66 0%,#1A1330 50%,#07060F 100%)}
.ins-home::before{content:"";position:absolute;inset:0;opacity:.7;pointer-events:none;
  background-image:radial-gradient(1.2px 1.2px at 12% 24%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 78% 14%,#fff 50%,transparent 51%),
    radial-gradient(1.4px 1.4px at 88% 70%,#FFE7A8 50%,transparent 51%),radial-gradient(1px 1px at 34% 82%,#CFC4FF 50%,transparent 51%)}
.ins-home i{position:relative;width:50px;height:50px;border-radius:12px;background:rgba(255,255,255,.12)}
.ins-home b{position:relative;display:grid;justify-items:center;gap:6px;font:600 11px/1 var(--font);color:#fff}
.ins-home b img{width:50px;height:50px;border-radius:12px;box-shadow:0 0 22px rgba(232,184,75,.45),0 8px 18px rgba(0,0,0,.5);
  animation:insPop .7s cubic-bezier(.2,.9,.25,1.35) .2s both}
.ins-home.and i,.ins-home.and b img{border-radius:50%}
.ins-go{margin:2px 0 6px}
.ins-small{font-size:12.5px;color:var(--text-3);text-align:center;margin:0 0 10px}
.ins-steps{list-style:none;display:grid;gap:9px;margin:2px 0 4px;padding:0}
.ins-steps li{display:grid;grid-template-columns:24px 40px 1fr;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#F7F5FB;border:1px solid var(--line)}
.ins-n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font:700 12.5px/1 var(--font);background:#1A1330;color:var(--gold)}
.ins-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:#fff;color:#0A84FF;border:1px solid var(--line)}
.ins-ic svg{width:24px;height:24px;display:block}
.ins-ic-kebab,.ins-ic-burger,.ins-ic-out{color:#3C4043}
.ins-t{font-size:14.5px;line-height:1.45;color:var(--text)}
.ins-t b{font-weight:700}
.ins-t em{display:block;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--text-3);margin-top:3px}
.ins-qr{width:196px;margin:6px auto 4px;padding:10px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.ins-qr svg{display:block;width:100%;height:auto}
.ins-foot{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.ins-foot>.btn:only-child{grid-column:1/-1}
.ins-foot .btn{width:100%;min-height:46px;padding:10px 12px;font-size:14.5px}
.ins-foot .btn.ghost{color:var(--text)}
.ins-point{display:flex;flex-direction:column;align-items:center;gap:5px;margin:14px 0 -6px;font:600 12px/1.2 var(--font);color:var(--text-3)}
.ins-point.right{align-items:flex-end;padding-right:6px}
.ins-point i{position:relative;width:2px;height:20px;background:currentColor;border-radius:2px;animation:insBob 1.3s ease-in-out infinite}
.ins-point i::after{content:"";position:absolute;left:50%;bottom:0;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translate(-50%,2px) rotate(45deg)}
@keyframes insPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:none}}
@keyframes insBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
/* полоска под шапкой — пока Stars не стоит на экране */
.ins-bar-wrap{margin:10px 0 0}
.ins-bar{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 10px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 8px 22px -14px rgba(28,20,60,.5);color:var(--text)}
body.cosmos .ins-bar{background:rgba(255,255,255,.06);border-color:rgba(232,184,75,.35);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ins-bar-ic{width:36px;height:36px;border-radius:10px;flex:none}
.ins-bar-t{flex:1;min-width:0;display:grid;gap:1px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.ins-bar-t b{font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-bar-t span{font-size:12px;line-height:1.3;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-bar-go{flex:none;min-height:36px;padding:7px 15px;border-radius:999px;border:0;cursor:pointer;background:var(--gold);color:#1A1330;font-weight:700;font-size:13.5px}
.ins-bar-x{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:none;cursor:pointer;font-size:20px;line-height:1;color:inherit;opacity:.55}
@media (prefers-reduced-motion:reduce){.ins-home b img,.ins-point i{animation:none}}

/* ─────────── режим приложения (открыт с иконки): строка состояния телефона над шапкой, кнопка «Назад» ─────────── */
html.pwa .hd-in{padding-top:calc(8px + env(safe-area-inset-top,0px))}
html.pwa body::before{content:"";position:fixed;left:0;right:0;top:0;height:env(safe-area-inset-top,0px);background:var(--night-2);z-index:1000;pointer-events:none}
html.pwa body{overscroll-behavior-y:none}
.hd-back{flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.hd-back:active{transform:scale(.94)}