/* Общее для обоих вариантов мобильного лендинга Blipli: токены, шапка, липкая кнопка,
   компоненты приложения (билет, посты, чат, карта) и сцена приветствия с порталом. */
:root{
  --sky:#0b0716; --ink:#f4f0fb; --mute:#a59cb8; --dim:#6f6684; --line:rgba(255,255,255,.1);
  --violet:#7d43ff; --violet-hi:#a57bff; --lilac:#c6b1fd; --pen:#120d1c; --green:#5be37d;
  --f-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-brand:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-app:-apple-system,BlinkMacSystemFont,"SF Pro Text","Onest",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--sky);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sky);color:var(--ink);font:16px/1.5 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--lilac);outline-offset:3px;border-radius:8px}
.tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;padding:6px 11px;border-radius:999px;background:rgba(125,67,255,.2);color:var(--lilac);font:600 11.5px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase}
.tag.soon{background:rgba(91,227,125,.14);color:var(--green)}

/* шапка */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 10px) 16px 10px;transition:background .3s,backdrop-filter .3s}
.top.solid{background:rgba(11,7,22,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font:800 18px/1 var(--f-brand)}
.brand img{width:30px;height:30px}
.top .sp{flex:1}
.pillbtn{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--mute);font:600 13px/1 var(--f-body);text-decoration:none;cursor:pointer}
.pillbtn svg{width:16px;height:16px}
.back{display:none}
.solo .back{display:inline-flex}

/* липкая кнопка «Скачать» снизу — всегда под большим пальцем */
.cta{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(rgba(11,7,22,0),rgba(11,7,22,.88) 45%);transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .3s}
.cta.away{transform:translateY(110%);opacity:0;pointer-events:none}
.dl{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border:0;border-radius:18px;width:100%;cursor:pointer;color:#fff;text-decoration:none;font:700 18px/1 var(--f-body);
  background:linear-gradient(180deg,#9566ff,#6a2ef5);box-shadow:0 14px 34px -12px rgba(125,67,255,.95),inset 0 1px 0 rgba(255,255,255,.28)}
.dl svg{width:24px;height:24px;animation:dlb 2.6s ease-in-out infinite}
.dl::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.36) 50%,transparent 65%);transform:translateX(-120%);animation:shine 5.5s ease-in-out 1.5s infinite}
.dl:active{transform:scale(.97)}
@keyframes shine{0%,72%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes dlb{0%,60%,100%{transform:translateY(0)}75%{transform:translateY(4px)}88%{transform:translateY(-1px)}}

/* реплики студентов — стекло */
.say{position:absolute;z-index:6;padding:8px 12px;border-radius:16px 16px 16px 5px;font:500 13px/1.25 var(--f-body);white-space:nowrap;color:var(--ink);
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(12px) saturate(1.5);-webkit-backdrop-filter:blur(12px) saturate(1.5);box-shadow:0 12px 30px -12px rgba(0,0,0,.6);
  opacity:0;animation:sayin .6s cubic-bezier(.2,1.4,.4,1) forwards,bob 6s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .6s)}
.say.r{border-radius:16px 16px 5px 16px;background:linear-gradient(160deg,rgba(165,123,255,.55),rgba(106,46,245,.5))}
@keyframes sayin{from{opacity:0;scale:.6;translate:0 10px}to{opacity:1;scale:1;translate:0 0}}
@keyframes bob{50%{transform:translateY(-6px)}}

/* сцена приветствия: координаты экрана приложения 390×N, масштабируется целиком */
.scene{position:relative;width:390px;height:520px;transform-origin:0 0}
.scene .w-hero{top:0}
.scene .pglow{top:335px}

/* панель «как в приложении» без рамки телефона */
.panel{--sky:#000;position:relative;background:#000;border-radius:26px;border:1px solid rgba(255,255,255,.08);overflow:hidden;color:#f4f1fa;font-family:var(--f-app)}
.panel .post{padding:14px 0 14px 14px}
.panel .post .media div{width:130px;height:170px}

/* чат беседы намерения */
.chat{display:flex;flex-direction:column;gap:7px;padding:14px;font-family:var(--f-app)}
.chat .hd{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:4px;border-bottom:1px solid #1c1b20}
.chat .hd i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#ff6b5a,#c2305f);font-style:normal}
.chat .hd b{display:block;font-size:15.5px}
.chat .hd small{display:block;font-size:12.5px;color:#8e8a96}
.m{max-width:80%;padding:9px 13px;border-radius:18px 18px 18px 6px;background:#1c1828;font-size:15px;line-height:1.35}
.m small{display:block;font-size:11.5px;font-weight:600;color:var(--c,#b79bff);margin-bottom:2px}
.m.me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:linear-gradient(160deg,#a57bff,#6a2ef5)}
.m.sys{align-self:center;background:none;color:#8e8a96;font-size:12.5px;padding:2px 0}
.circ{align-self:flex-end;width:118px;height:118px;border-radius:50%;padding:4px;background:conic-gradient(#a57bff 0 70%,rgba(255,255,255,.15) 0)}
.circ div{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 40% 40%,#3a1f7a,#120830);display:grid;place-items:center}
.circ img{width:62%}
.play .chat > *{animation:msg .5s cubic-bezier(.2,1.2,.4,1) both;animation-delay:calc(var(--k,0)*420ms + .2s)}
@keyframes msg{from{opacity:0;transform:translateY(14px) scale(.96)}}

/* мини-карта */
.map{position:relative;border-radius:26px;overflow:hidden;background:#0e0b17;border:1px solid var(--line)}
.map svg.streets{position:absolute;inset:0;width:100%;height:100%}
.fr{position:absolute;display:flex;flex-direction:column;align-items:center;gap:5px;transform:translate(-50%,-100%);transition:left 2.5s ease-in-out,top 2.5s ease-in-out}
.fr .ph{position:relative;width:46px;height:46px;border-radius:50%;padding:3px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.5)}
.fr .ph i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;font:700 15px/1 var(--f-body);font-style:normal;color:#fff}
.fr .ph::after{content:"";position:absolute;left:50%;top:44px;border:6px solid transparent;border-top-color:#fff;margin-left:-6px}
.fr .lb{padding:4px 9px;border-radius:999px;background:rgba(20,16,33,.88);border:1px solid var(--line);font-size:11.5px;white-space:nowrap}
.pin{position:absolute;transform:translate(-50%,-100%)}
.pin .bub{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(160deg,#a57bff,#5a12f2);border:3px solid #c6b1fd;box-shadow:0 6px 14px rgba(0,0,0,.5)}
.pin .bub svg{width:20px;height:20px}
.pin .off{position:absolute;left:50%;top:100%;translate:-50% 6px;padding:4px 8px;border-radius:999px;background:var(--violet);font-size:11px;font-weight:700;white-space:nowrap}

/* вопросы */
.faq{display:flex;flex-direction:column;gap:8px}
.faq details{border-radius:18px;border:1px solid var(--line);padding:15px 16px;background:rgba(255,255,255,.03)}
.faq summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:12px;font-size:15.5px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:600 22px/1 var(--f-body);color:var(--lilac);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:8px;color:var(--mute);font-size:14.5px}
.foot{display:flex;flex-wrap:wrap;gap:8px 18px;padding:28px 0 calc(110px + env(safe-area-inset-bottom,0px));color:var(--dim);font-size:13px}
.foot a{color:var(--mute)}

.art{position:absolute;pointer-events:none;user-select:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.say{opacity:1}}
/* ---- сцена приветствия (из приложения) ---- */
.w-sky{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 46%,#1d0b46 0%,#05030b 70%)}
.w-stars{position:absolute;inset:0}
.w-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;animation:tw 4s ease-in-out infinite}
.w-sb{position:absolute;top:0;left:0;right:0;height:54px;display:flex;justify-content:space-between;align-items:center;padding:0 34px 0 44px;font:600 17px/1 -apple-system,BlinkMacSystemFont,sans-serif;z-index:5}
.w-sb::after{content:"";position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;background:#000;border-radius:20px}
.pglow{position:absolute;left:228px;top:429px;width:0;height:0;z-index:1}
.pglow i{position:absolute;left:0;top:0;border-radius:50%;translate:-50% -50%}
.pglow .rim{width:330px;height:95px;filter:blur(3px);transform:scale(var(--psx,1),var(--psy,1));opacity:var(--po,1);background:radial-gradient(closest-side,transparent 0 80%,rgba(214,196,255,.85) 84%,rgba(165,123,255,.5) 90%,rgba(125,67,255,0) 100%)}
.pglow .halo{width:470px;height:150px;filter:blur(8px);opacity:calc(.6 + .4 * var(--po,1));background:radial-gradient(closest-side,rgba(165,123,255,.6) 0 55%,rgba(125,67,255,.38) 70%,rgba(110,40,230,.14) 86%,rgba(110,40,230,0) 100%)}
.pglow .amb{width:760px;height:330px;filter:blur(18px);background:radial-gradient(closest-side,rgba(125,67,255,.32),rgba(125,67,255,.12) 55%,rgba(125,67,255,0) 100%)}
.pglow .beam{width:250px;height:300px;translate:-50% -100%;border-radius:0;filter:blur(10px);opacity:.7;background:linear-gradient(0deg,rgba(200,180,255,.45),rgba(165,123,255,.12) 45%,transparent 80%);-webkit-mask:radial-gradient(50% 100% at 50% 100%,#000 40%,transparent 100%);mask:radial-gradient(50% 100% at 50% 100%,#000 40%,transparent 100%)}
.w-hero{position:absolute;left:0;top:94px;width:390px;height:390px;z-index:3}
.doo{position:absolute;overflow:visible;z-index:2;animation:float var(--t,6s) ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes float{0%,100%{transform:translate(0,0) rotate(var(--r,0deg))}50%{transform:translate(4px,-8px) rotate(calc(var(--r,0deg) + 8deg))}}
.w-word{position:absolute;top:530px;left:3px;right:0;display:flex;justify-content:center;font:900 84px/1 var(--f-brand);letter-spacing:-.02em;color:#fff;z-index:4}
.w-word span{display:inline-block;-webkit-text-stroke:12px var(--pen);paint-order:stroke fill;text-shadow:0 7px 0 var(--pen),0 14px 26px rgba(90,18,242,.45);transform-origin:50% 100%}
.w-word.jump span{animation:hop .72s cubic-bezier(.3,.7,.3,1) both;animation-delay:calc(var(--i)*90ms)}
@keyframes hop{0%,100%{transform:translateY(0)}27%{transform:translateY(-10px) rotate(-3deg)}60%{transform:translateY(2px)}}

/* ---- билет ---- */
/* Билет: та же раскладка, что в приложении. Цвет — категория (--c), оттенок бумаги — --tint. */
.tk{--c:#c98c52;--tint:rgba(201,140,82,.10);--ln:rgba(201,140,82,.42);position:absolute;left:0;right:0;bottom:0;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Onest",sans-serif;transition:transform .55s cubic-bezier(.2,1,.3,1),opacity .45s,filter .45s}
.tk .paper{position:relative;border-radius:26px 26px 0 0;padding:18px 18px 14px;background:linear-gradient(180deg,var(--tint),rgba(0,0,0,0) 70%),#17151a}
.tk.above .stubw{visibility:hidden}
.tk.above .paper{border-radius:26px}
.tk:not(.act){pointer-events:none}
.tk.act .paper{cursor:grab;touch-action:none}
.tk.drag{transition:none}
.tk .row1{display:flex;align-items:center;gap:10px}
.tk .ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 70%,#000))}
.tk .ico svg{width:18px;height:18px}
.tk .cat{font:800 13px/1 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--c)}
.tk .num{margin-left:auto;font:700 12px/1 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.16em;color:#77737f}
.tk h3{margin-top:14px;font:800 22px/1.15 -apple-system,BlinkMacSystemFont,"SF Pro Display",sans-serif;letter-spacing:-.01em}
.tk .ds{margin-top:6px;font-size:15px;line-height:1.35;letter-spacing:.01em;color:rgba(255,255,255,.62)}
.tk .pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.tk .pill{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:999px;border:1.5px solid var(--ln);font-size:14.5px;font-weight:600}
.tk .pill svg{width:15px;height:15px;color:var(--c)}
.tk .sep{height:1px;background:rgba(255,255,255,.1);margin:14px 0}
.tk .author{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:18px;border:1.5px solid var(--ln)}
.tk .author i{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;font:700 15px/1 var(--f-body);font-style:normal}
.tk .author b{display:block;font-size:16px;font-weight:700}
.tk .author small{display:block;font-size:13.5px;color:rgba(255,255,255,.5)}
.tk .author svg{margin-left:auto;width:16px;height:16px;color:rgba(255,255,255,.5)}
.tk .crowd{display:flex;align-items:center;gap:12px;font-size:15px;color:rgba(255,255,255,.6)}
.tk .crowd .av{display:flex}
.tk .crowd .av i{width:34px;height:34px;border-radius:50%;border:2.5px solid #17151a;margin-left:-9px;display:grid;place-items:center;font:700 12px/1 var(--f-body);font-style:normal;background:#26232c;color:var(--c)}
.tk .crowd .av i:first-child{margin-left:0}
/* корешок: перфорация, вырезы, пустой контур под оторванным, рулон */
.tk .stubw{position:relative;height:64px}
.tk .stub,.tk .hole{position:absolute;inset:0;border-radius:0 0 26px 26px;
  -webkit-mask:radial-gradient(circle 12px at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 0,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 12px at 0 0,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 0,#0000 98%,#000) right/51% 100% no-repeat}
.tk .paper::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;z-index:2;
  background:radial-gradient(circle 12px at 0 100%,var(--sky) 98%,transparent) left/50% 100% no-repeat,radial-gradient(circle 12px at 100% 100%,var(--sky) 98%,transparent) right/50% 100% no-repeat}
.tk .hole{display:flex;align-items:center;padding-left:28%;gap:8px;color:var(--c);font:700 17px/1 -apple-system,BlinkMacSystemFont,sans-serif;background:#000}
.tk .hole::before{content:"";position:absolute;inset:3px 3px 3px 3px;border:1.5px dashed color-mix(in srgb,var(--c) 70%,transparent);border-top:0;border-radius:0 0 23px 23px}
.tk .stub{display:flex;align-items:center;justify-content:space-between;padding:0 18px;background:#17151a;border-top:1.5px dashed rgba(255,255,255,.14);touch-action:none;user-select:none;cursor:grab;clip-path:inset(0 0 0 var(--cut,0px))}
.tk .pull{display:flex;align-items:center;gap:10px;font:800 15px/1 -apple-system,BlinkMacSystemFont,sans-serif;color:rgba(255,255,255,.75)}
.tk .pull .ch{display:flex;gap:1px;color:rgba(255,255,255,.28);font-weight:900;letter-spacing:-.08em}
.tk .pull .ch b{animation:chev 1.4s ease-in-out infinite;animation-delay:calc(var(--k)*90ms)}
@keyframes chev{0%,60%,100%{color:rgba(255,255,255,.22)}30%{color:rgba(255,255,255,.85)}}
.tk .go{height:40px;padding:0 20px;border-radius:999px;border:0;background:var(--c);color:#1a1209;font:800 16px/1 -apple-system,BlinkMacSystemFont,sans-serif;cursor:pointer;position:relative;z-index:1}
.tk .roll{position:absolute;top:-4px;bottom:-4px;left:var(--cut,0px);width:var(--rw,0px);border-radius:6px;pointer-events:none;z-index:3;rotate:var(--rr,0deg);
  background:linear-gradient(90deg,#08080a 0%,#1b1a20 18%,#26242c 42%,#1a1920 70%,#0a0a0c 100%);box-shadow:6px 0 14px rgba(0,0,0,.55),-2px 0 6px rgba(0,0,0,.5)}
.tk .roll.fall{transition:transform .7s cubic-bezier(.5,0,.8,.4),opacity .7s;transform:translateY(260px) rotate(24deg);opacity:0}
.tk.torn .stub{display:none}

/* ---- пост ---- */
/* Пост: как в приложении — без карточки, аватар слева, лента фото вбок, капсула действий */
.post{display:grid;grid-template-columns:48px 1fr;gap:0 12px;padding:16px 0 16px 16px;border-bottom:1px solid #1c1b20;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Onest",sans-serif}
.post:last-child{border-bottom:0}
.post .ava{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font:700 17px/1 var(--f-body);color:#fff}
.post .bd{min-width:0}
.post .nm{font-size:17px;font-weight:700;letter-spacing:.01em;padding-top:2px}
.post .nm small{font-weight:400;color:#6d6a75;font-size:16px}
.post .tx{margin-top:4px;padding-right:16px;font-size:16.5px;line-height:1.4;letter-spacing:.01em}
.post .media{display:flex;gap:8px;margin-top:10px;overflow-x:auto;scrollbar-width:none;padding-right:16px}
.post .media::-webkit-scrollbar{display:none}
.post .media div{flex:none;width:170px;height:226px;border-radius:14px;position:relative;overflow:hidden}
.post .media div::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 50% at 30% 25%,rgba(255,255,255,.22),transparent)}
.post .media span{position:absolute;inset:0;display:grid;place-items:center;font-size:54px}
.post .acts{display:inline-flex;align-items:center;gap:18px;margin-top:12px;height:44px;padding:0 18px;border-radius:999px;border:1.5px solid #2a2930;color:#d6d3dc;font-size:15px}
.post .acts button,.post .acts span{all:unset;display:inline-flex;align-items:center;gap:6px;cursor:default}
.post .acts button{cursor:pointer}
.post .acts svg{width:22px;height:22px}
.post .acts button.on{color:#ff3b4a}
.post .acts button.on svg path{fill:#ff3b4a;stroke:#ff3b4a}
/* билет живёт в потоке, а не внизу колоды */
.tk{position:relative;left:auto;right:auto;bottom:auto}
.tkfit{position:relative;width:360px;transform-origin:0 0}
.tk.enter{animation:tkin .6s cubic-bezier(.2,1.1,.3,1) both}
@keyframes tkin{from{opacity:0;transform:translateY(30px) scale(.94)}}
.tk .stub,.tk.act .paper{touch-action:pan-y}
@keyframes tw{50%{opacity:.06}}
[hidden]{display:none!important}