/* ===== posting.life — forked-from-the-future console ===== */
:root{
  --base:#171421; --panel:#1f1b2e; --panel2:#28213a; --line:#342c4a; --line2:#41365c;
  --volt:#8b6cff; --volt2:#a992ff; --cyan:#35e0d8; --signal:#3ddc97; --amber:#ffb347; --rose:#ff6b8b;
  --txt:#eeecf8; --mut:#a5a0bd; --mut2:#7c7696;
  --grid:rgba(255,255,255,.03);
  --shadow:0 1px 0 0 rgba(255,255,255,.04) inset, 0 22px 60px -30px rgba(0,0,0,.8);
  --glow:0 0 0 1px rgb(139 108 255 / .35), 0 8px 40px -8px rgb(139 108 255 / .45);
  --maxw:1180px;
  --grad:linear-gradient(100deg,var(--volt),var(--cyan));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--base);color:var(--txt);
  font-family:Inter,"Noto Sans Thai",system-ui,-apple-system,sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.mono{font-family:"JetBrains Mono","Noto Sans Thai",ui-monospace,Menlo,monospace}
/* Thai uses a taller script → give the proportional Thai face a touch more line-height for legibility */
:root[lang="th"] body,:root[lang="th"]{line-height:1.7}
a{color:inherit;text-decoration:none}
h1,h2{letter-spacing:-.02em;font-weight:800}
::selection{background:rgb(139 108 255 / .4)}

.bg-grid{background-image:
  radial-gradient(60rem 60rem at 78% -12%,rgba(139,108,255,.20),transparent 60%),
  radial-gradient(46rem 46rem at -6% 16%,rgba(53,224,216,.10),transparent 55%),
  radial-gradient(42rem 42rem at 50% 118%,rgba(176,107,255,.10),transparent 60%),
  linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,100% 100%,46px 46px,46px 46px;background-attachment:fixed}
.scanline{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.18) 2px 3px);mix-blend-mode:overlay}
.gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- bar ---- */
.bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;flex-wrap:nowrap;
  max-width:var(--maxw);margin:0 auto;padding:16px 22px;backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;flex:none;white-space:nowrap}
.brand-name .dim{color:var(--mut2)}
.brand-logo{width:24px;height:24px;border-radius:7px;border:2px solid var(--volt);position:relative;flex:none;box-shadow:0 0 18px -2px var(--volt)}
.brand-logo::before,.brand-logo::after{content:"";position:absolute;top:50%;width:6px;height:6px;border-radius:50%;transform:translateY(-50%)}
.brand-logo::before{left:4px;background:var(--cyan)} .brand-logo::after{left:12px;background:var(--volt2)}
.brand-logo.small{width:18px;height:18px}
.ver{color:var(--mut2);font-size:12px;margin-left:2px}
.alpha-badge{margin-left:7px;font-size:9.5px;font-weight:800;letter-spacing:.12em;color:#5cff9f;
  border:1px solid rgba(92,255,159,.5);border-radius:6px;padding:2px 6px;line-height:1;
  background:rgba(92,255,159,.08);text-shadow:0 0 8px rgba(92,255,159,.6);box-shadow:0 0 12px rgba(92,255,159,.2) inset}
.bar-nav{display:flex;align-items:center;gap:22px;margin-left:auto;font-size:13px;color:var(--mut)}
.bar-nav a{white-space:nowrap;flex:none}
.bar-nav a:hover{color:var(--cyan)}
.bar-right{display:flex;align-items:center;gap:14px;flex:none;flex-wrap:nowrap}
.bar-right>*{flex:none}
.status{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--mut);white-space:nowrap}
.status .dot{width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal);animation:pulseDot 1.6s ease-in-out infinite;flex:none}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
.lang{background:transparent;border:1px solid var(--line2);color:var(--mut);border-radius:7px;padding:6px 9px;font-size:12px;cursor:pointer;max-width:9.5rem}
.lang span{opacity:.4;margin:0 4px}
.btn-volt.btn{white-space:nowrap}
/* Burger (mobile nav trigger) - hidden on desktop, shown when nav collapses */
.nav-burger{display:none;flex:none;width:40px;height:40px;padding:0;margin-left:auto;box-sizing:border-box;
  border:1px solid var(--line2);border-radius:10px;background:rgba(20,16,32,.6);cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-burger:hover{border-color:var(--volt)}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--txt);transition:transform .22s ease,opacity .22s ease}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;
  font-weight:700;font-size:14.5px;cursor:pointer;border:1px solid transparent;padding:12px 18px;transition:.15s}
.btn:active{transform:translateY(1px)}
.btn-volt{background:var(--volt);color:#0e0a1c;box-shadow:0 10px 34px -10px rgb(139 108 255 / .7)}
.btn-volt:hover{background:var(--volt2);transform:translateY(-1px);box-shadow:0 16px 44px -12px rgb(139 108 255 / .85)}
.btn-secondary{background:rgb(139 108 255 / .12);border:1px solid rgb(139 108 255 / .42);color:#cdbcff;text-decoration:none}
.btn-secondary:hover{background:rgb(139 108 255 / .2);border-color:var(--volt);color:var(--txt);transform:translateY(-1px)}

/* ---- hero ---- */
.hero{max-width:var(--maxw);margin:0 auto;padding:42px 22px 20px;display:grid;
  grid-template-columns:1.05fr 1.1fr;gap:38px;align-items:center}
.kicker{color:var(--cyan);font-size:13px;margin-bottom:16px}
.h1{font-size:clamp(34px,5vw,60px);line-height:1.04;margin:0 0 18px;font-weight:900;text-shadow:0 2px 14px rgb(0 0 0 / .45)}
.h1 .gradient-text{display:block}
.lede{color:var(--mut);font-size:clamp(15px,1.8vw,18px);max-width:520px;margin:0 0 26px}
.join{display:flex;flex-direction:column;gap:10px;max-width:440px}
.join-dual{flex-direction:row;flex-wrap:wrap;align-items:center;gap:12px;max-width:520px}
.join-dual .btn{flex:0 1 auto;box-shadow:0 4px 16px rgb(0 0 0 / .35),0 10px 34px -10px rgb(139 108 255 / .7)}
.join-dual .btn-secondary{box-shadow:0 4px 16px rgb(0 0 0 / .35)}
@media(max-width:640px){.join-dual{flex-direction:column;width:100%}.join-dual .btn{width:100%}}
.join-in{flex:1;min-width:220px;background:#120f1e;border:1px solid var(--line2);color:var(--txt);
  border-radius:10px;padding:13px 16px;font-size:14px;outline:none;transition:.2s}
.join-in::placeholder{color:var(--mut2)}
.join-in:focus{border-color:var(--volt);box-shadow:0 0 0 3px rgb(139 108 255 / .2)}
.trust{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:12.5px;color:var(--mut)}
.trust b{color:var(--txt)}
.dot.live{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:pulseDot 1.6s infinite}

/* ---- glass / console ---- */
.glass{background:rgb(31 27 46 / .78);border:1px solid var(--line);border-radius:16px;backdrop-filter:blur(14px) saturate(1.3);box-shadow:var(--shadow)}
.console{overflow:hidden;position:relative}
.console::after{content:"";position:absolute;inset:0;border-radius:16px;box-shadow:var(--glow);pointer-events:none;opacity:.5}
.console-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--mut)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.dots i:first-child{background:var(--rose)}.dots i:nth-child(2){background:var(--amber)}.dots i:last-child{background:var(--signal)}
.ctitle{color:var(--txt)}.cpid{margin-left:auto;color:var(--mut2)}
.console-body{padding:16px}
.cmdline{display:flex;align-items:center;gap:8px;background:#120f1e;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;font-size:13.5px}
.prompt{color:var(--cyan);font-weight:600}.typed{color:var(--txt)}
.caret{color:var(--volt2);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.feed{margin-top:12px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;min-height:148px}
.feed .row{display:flex;gap:9px;align-items:baseline;opacity:0;transform:translateY(6px);
  transition:.4s cubic-bezier(.2,.8,.2,1);color:var(--mut)}
.feed .row.in{opacity:1;transform:none}
.feed .ts{color:var(--mut2)}.feed .ok{color:var(--signal)}.feed .vt{color:var(--volt2)}.feed .cy{color:var(--cyan)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.metric{background:#1a1628;border:1px solid var(--line);border-radius:10px;padding:12px;text-align:center}
.mval{font-size:22px;font-weight:800;display:block}
.mlab{font-size:10.5px;color:var(--mut2);margin-top:3px;display:block}

/* ---- ticker ---- */
.ticker{max-width:100%;overflow:hidden;margin:34px 0 6px;mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.ticker-row{display:flex;gap:10px;width:max-content;animation:scroll 34s linear infinite;font-size:12.5px;color:var(--mut)}
.ticker:hover .ticker-row{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}
.tk{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:8px;padding:8px 13px;background:rgb(31 27 46 /.5);white-space:nowrap}
.tk i{width:7px;height:7px;border-radius:50%;background:var(--volt)}

/* ---- sections ---- */
.sec-h{font-size:clamp(24px,3.6vw,36px);text-align:center;margin:0 auto 34px;max-width:760px}
.tag2{color:var(--cyan);font-size:.6em;vertical-align:middle}
.manifesto{max-width:840px;margin:62px auto;padding:0 22px;text-align:center}
.tag{color:var(--volt2);font-size:12.5px;margin-bottom:14px}
.man-h{font-size:clamp(23px,3.6vw,34px);line-height:1.16;margin:0 0 14px;font-weight:800}
.man-p{color:var(--mut);font-size:clamp(15px,2vw,17px);max-width:640px;margin:0 auto}

/* ---- panels grid ---- */
.panels{max-width:var(--maxw);margin:0 auto;padding:50px 22px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.panel{padding:18px}.panel.span2{grid-column:span 2}
.p-head{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--mut);margin-bottom:14px}
.p-stat{color:var(--cyan)}.p-stat.up{color:var(--signal)}
/* matrix */
.matrix{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:9px}
.cell{display:flex;align-items:center;gap:8px;background:#1a1628;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:12.5px}
.cell .cd{width:8px;height:8px;border-radius:50%;flex:none}
.cell .cd.posted{background:var(--signal);box-shadow:0 0 8px var(--signal)}
.cell .cd.sched{background:var(--volt2);box-shadow:0 0 8px var(--volt2)}
.cell .cd.queue{background:var(--cyan)}
.cell .cn{color:var(--txt)}.cell .cs{margin-left:auto;color:var(--mut2);font-size:10px}
/* spark */
.spark{width:100%;height:90px;display:block}
.grow-cap{margin-top:10px;font-size:13px;color:var(--mut)}.grow-cap .gradient-text{font-weight:800;font-size:18px}
/* reply */
.reply{display:flex;flex-direction:column;gap:9px;font-size:12.5px;min-height:120px}
.bub{padding:9px 12px;border-radius:11px;max-width:88%;line-height:1.4;overflow-wrap:break-word;word-break:break-word}
.bub.in{background:#1a1628;border:1px solid var(--line);color:var(--mut);align-self:flex-start}
.bub.out{background:linear-gradient(100deg,rgb(139 108 255 /.22),rgb(53 224 216 /.12));border:1px solid rgb(139 108 255 /.4);color:var(--txt);align-self:flex-end}
.bub .who{font-size:10px;color:var(--mut2);display:block;margin-bottom:2px;text-align:center}
/* caps */
.caps{list-style:none;margin:0;padding:0;columns:2;column-gap:26px;font-size:13px}
.caps li{padding:7px 0;color:var(--mut);break-inside:avoid;display:flex;gap:9px;align-items:flex-start}
.caps li::before{content:"▸";color:var(--volt2);flex:none}
.caps li b{color:var(--txt);font-weight:600}

/* ---- pain ---- */
.painx{max-width:var(--maxw);margin:50px auto;padding:40px 22px}
.px-wrap{display:flex;align-items:stretch;gap:16px;justify-content:center;flex-wrap:wrap}
.px-old,.px-new{flex:1;min-width:260px;max-width:430px;border-radius:14px;padding:20px}
.px-old{background:rgb(255 107 139 / .05);border:1px dashed rgb(255 107 139 / .3)}
.px-lab{font-size:11.5px;color:var(--rose);margin-bottom:13px}.px-lab.cy{color:var(--cyan)}
.px-mess{display:flex;flex-wrap:wrap;gap:7px;min-height:116px}
.pxchip{font-size:12px;border:1px solid var(--line);background:#1a1628;border-radius:8px;padding:6px 9px;color:var(--mut);
  display:flex;gap:6px;align-items:center;animation:jit 4s ease-in-out infinite}
.pxchip .pr{color:var(--rose);font-size:10.5px}
@keyframes jit{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.8deg) translateY(-2px)}}
.px-foot{margin-top:12px;font-size:11.5px;color:var(--rose);opacity:.85}
.px-arrow{display:flex;align-items:center;font-size:26px;color:var(--volt2);flex:none}
.px-new{display:flex;flex-direction:column;background:linear-gradient(140deg,rgb(139 108 255 /.16),rgb(53 224 216 /.06));
  border:1px solid rgb(139 108 255 /.4);box-shadow:var(--shadow)}
.px-new .px-foot{color:var(--mut)}
.px-logo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;margin:auto 0}
.px-new .px-lab{margin-bottom:0}

/* ---- AI team — ambient workers + cards ---- */
.teamx{position:relative;max-width:var(--maxw);margin:56px auto;padding:54px 22px;text-align:center;
  border-radius:22px;overflow:hidden;border:1px solid var(--line);background:rgb(31 27 46 /.35)}
.tx-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.tx-scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 90% at 50% 40%,rgb(23 20 33 /.4),rgb(23 20 33 /.82) 75%)}
.tx-fg{position:relative;z-index:2}
.tx-fg .tag{margin-bottom:14px}
.tx-sub{color:var(--mut);font-size:clamp(15px,2vw,18px);max-width:580px;margin:0 auto 30px}
.fig{position:absolute;--s:1;will-change:transform;animation:drift 7s ease-in-out infinite;opacity:.92}
.fig svg{display:block;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.fig .scene{font-size:11px;color:var(--mut2);text-align:center;margin-top:3px;white-space:nowrap;opacity:.7}
@keyframes drift{0%,100%{transform:translateY(0) scale(var(--s))}50%{transform:translateY(-12px) scale(var(--s))}}
.tx-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:920px;margin:0 auto}
.txcard{background:rgb(18 15 30 /.66);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:left}
.txcard .ic{font-size:23px;margin-bottom:8px}.txcard b{display:block;font-size:15px;margin-bottom:4px}
.txcard span{color:var(--mut);font-size:13px;line-height:1.45}
/* Team-advantage section moved to the very bottom (heading + role cards) */
.teamcmp{max-width:var(--maxw);margin:64px auto;padding:0 22px;text-align:center}
.teamcmp .tc-head{margin-bottom:24px}
.teamcmp .tc-head .tag2{display:block;margin-bottom:8px}
.teamcmp .tc-sub{color:var(--mut);font-size:clamp(14px,1.8vw,17px);max-width:560px;margin:8px auto 0}

/* ---- confetti ---- */
.confetti{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;opacity:.95;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(720deg);opacity:.4}}

/* ---- perf: skip offscreen rendering ---- */
.painx,.teamx,.panels,.faq{content-visibility:auto;contain-intrinsic-size:1px 600px}
@media(max-width:920px){.tx-cards{grid-template-columns:repeat(2,1fr)}.px-arrow{transform:rotate(90deg)}}
@media(max-width:620px){.tx-cards{grid-template-columns:1fr}.teamx{padding:40px 16px}.fig{animation:none}.fig.hide-sm{display:none}.scanline{display:none}}
/* mobile reply panel: even full-width cards, text fits, centered */
@media(max-width:560px){.reply .bub{max-width:100%;align-self:stretch}.bub.out{text-align:center}}

/* ---- game section ---- */
.game-sec{max-width:var(--maxw);margin:56px auto;padding:54px 22px;text-align:center}
.game-inner{display:flex;flex-direction:column;align-items:center;gap:22px}
/* min-height is load-bearing: the widget injects `.psim{height:100%}` onto this
   same frame, overriding `height` → collapses to 0 (no sized ancestor). min-height
   (which .psim doesn't set) holds the box open so Pixi measures a real height. */
.game-frame{width:100%;height:520px;min-height:520px;overflow:hidden;border-radius:16px;position:relative;display:flex;align-items:center;justify-content:center}
.game-loading{color:var(--mut);font-size:13px;animation:blink 1.2s step-end infinite}
@keyframes blink{50%{opacity:0}}
.game-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
@media(max-width:620px){.game-frame{height:360px;min-height:360px}.game-cta{flex-direction:column;gap:10px}}

/* ---- audience ---- */
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.aud-card{padding:22px 20px;border-radius:14px;background:rgb(31 27 46 /.7);border:1px solid var(--line);transition:.2s}
.aud-card:hover{transform:translateY(-3px);border-color:var(--volt);box-shadow:var(--glow)}
.aud-card .ac-ic{font-size:26px;margin-bottom:10px}
.aud-card h3{margin:0 0 6px;font-size:18px;font-weight:800}
.aud-card p{margin:0 0 12px;color:var(--mut);font-size:14px}
.aud-card .ac-tag{font-size:11.5px;color:var(--cyan);border:1px solid var(--line2);border-radius:7px;padding:5px 10px;display:inline-block}
.sicon{display:inline-block;vertical-align:middle;flex:none;border-radius:6px}
.tk .sicon,.cell .sicon{box-shadow:0 3px 10px -4px rgba(0,0,0,.6)}
@media(max-width:920px){.aud-grid{grid-template-columns:1fr}}

/* ---- join ---- */
.join-sec{max-width:var(--maxw);margin:24px auto;padding:24px 22px 60px}
.join-card{position:relative;overflow:hidden;text-align:center;padding:48px 26px}
.jc-grid{position:absolute;inset:0;z-index:-1;background:radial-gradient(40rem 18rem at 50% -20%,rgba(139,108,255,.3),transparent 70%)}
.join-card h2{font-size:clamp(26px,4.4vw,40px);margin:8px 0 12px}
.join-card>p{color:var(--mut);max-width:560px;margin:0 auto 24px;font-size:15.5px}
.join.big{max-width:560px;margin:0 auto}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px}
.chip{background:#1a1628;border:1px solid var(--line2);color:var(--mut);border-radius:8px;padding:7px 13px;font-size:12px;cursor:pointer;transition:.15s}
.chip:hover{color:var(--txt)}.chip.on{background:var(--volt);color:#0e0a1c;border-color:transparent}
.fine{margin-top:16px;font-size:12px;color:var(--mut2)}

/* ---- faq ---- */
.faq{max-width:780px;margin:0 auto;padding:50px 22px 20px}
.faq-list{display:flex;flex-direction:column;gap:10px}
.qa{background:rgb(31 27 46 /.6);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:17px 20px;font-weight:600;font-size:15.5px;display:flex;justify-content:space-between;gap:14px;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--cyan);font-size:20px;transition:transform .25s}
.qa[open] summary::after{transform:rotate(45deg)}
.qa .ans{padding:0 20px 18px;color:var(--mut);font-size:14.5px}

/* ---- footer ---- */
.foot{max-width:var(--maxw);margin:0 auto;padding:34px 22px 56px;text-align:center;color:var(--mut2);
  font-size:12.5px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:10px}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,150%);z-index:80;background:#1f1b2e;
  border:1px solid var(--volt);color:var(--txt);padding:13px 18px;border-radius:11px;font-size:13px;
  box-shadow:var(--glow);transition:transform .4s cubic-bezier(.2,.9,.2,1);max-width:90vw}
.toast.show{transform:translate(-50%,0)}.toast.err{border-color:var(--rose)}

/* ---- reveal ---- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---- responsive ---- */
@media(max-width:920px){
  .hero{grid-template-columns:1fr;gap:26px}
  .grid{grid-template-columns:1fr}.panel.span2{grid-column:span 1}
  .caps{columns:1}
}
@media(max-width:620px){
  .join{flex-direction:column}.join .btn{width:100%}
  .metrics{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important}.reveal{opacity:1;transform:none}}

/* ===== Immersive #team: the game IS the background, text floats on top ===== */
.teamx-immersive{position:relative;width:100vw;margin-left:calc(50% - 50vw);max-width:100vw;padding:0;min-height:94vh;overflow:hidden;display:block}
.teamx-immersive .tx-game{position:absolute;inset:0;z-index:0}
.teamx-immersive .tx-game.psim,.teamx-immersive .tx-game .psim{position:absolute;inset:0;width:100%;height:100%}
.tx-scrim2{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,18,.88) 0%,rgba(8,9,18,.35) 24%,rgba(8,9,18,0) 46%,rgba(8,9,18,0) 60%,rgba(8,9,18,.55) 84%,rgba(8,9,18,.95) 100%)}
.teamx-immersive .tx-fg{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:64px 22px 56px;min-height:94vh;display:flex;flex-direction:column;text-align:center;pointer-events:none}
.teamx-immersive .tx-fg .game-cta{margin-top:auto;pointer-events:auto}
.teamx-immersive .tx-top{pointer-events:none}
.teamx-immersive .tx-sub{max-width:560px;margin-left:auto;margin-right:auto}
/* entry flash when the director steps into the office */
.game-enter-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(60% 50% at 50% 64%,rgba(124,92,255,.55),rgba(39,230,255,.18) 40%,transparent 72%)}
.game-enter-flash.on{animation:gflash .65s ease-out}
@keyframes gflash{0%{opacity:0;transform:scale(.6)}18%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@media(max-width:620px){.teamx-immersive{min-height:88vh}.teamx-immersive .tx-fg{min-height:88vh;padding:46px 16px 40px}}

/* ===== Hero director — walks down with scroll, steps into the office ===== */
#director{position:fixed;left:50%;top:0;transform:translate(-50%,12vh);z-index:60;pointer-events:none;
  opacity:0;transition:opacity .45s ease;filter:drop-shadow(0 10px 26px rgba(124,92,255,.55));will-change:transform,opacity}
#director.entered{opacity:0;transition:opacity .5s ease}
#director svg{display:block}
#director .d-tag{position:absolute;top:-22px;left:50%;transform:translateX(-50%) translateY(4px);white-space:nowrap;
  font-size:10px;letter-spacing:.04em;color:#d7d2ff;background:rgba(10,12,28,.72);border:1px solid rgba(124,92,255,.4);
  padding:2px 8px;border-radius:9px;backdrop-filter:blur(6px);
  opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none}
#director .d-tag.show{opacity:1;transform:translateX(-50%) translateY(0)}
#director .leg{transform-box:fill-box;transform-origin:50% 0}
#director.walking svg{animation:dirbob .46s ease-in-out infinite}
#director.walking .l1{animation:legA .46s linear infinite}
#director.walking .l2{animation:legB .46s linear infinite}
#director.walking .d-sh{animation:dsh .46s ease-in-out infinite}
#director.walking .d-visor{animation:dvisor 1.6s linear infinite}
@keyframes dirbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes legA{0%,100%{transform:rotate(18deg)}50%{transform:rotate(-18deg)}}
@keyframes legB{0%,100%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}}
@keyframes dsh{0%,100%{opacity:.5;transform:scaleX(1)}50%{opacity:.3;transform:scaleX(.8)}}
@keyframes dvisor{0%,100%{fill:#27e6ff}50%{fill:#7c5cff}}
@media(max-width:620px){#director{transform:translate(-50%,12vh) scale(.82)}}

/* ===== Hero glitch: ~~форкнули~~ ХАКНУЛИ ===== */
.h1 .struck{position:relative;color:var(--mut);opacity:.5;text-decoration:none;font-weight:800;margin-right:.06em}
.h1 .struck::after{content:'';position:absolute;left:-3%;right:-3%;top:54%;height:.085em;background:currentColor;transform:rotate(-3.5deg);border-radius:2px}
.glitch-word{position:relative;display:inline-block;color:#fff;font-weight:900;text-shadow:0 0 18px rgba(124,92,255,.5)}
.glitch-word::before,.glitch-word::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none;mix-blend-mode:screen}
.glitch-word::before{color:#27e6ff;animation:glx1 2.6s infinite steps(1) alternate}
.glitch-word::after{color:#ff3df0;animation:glx2 2.15s infinite steps(1) alternate}
@keyframes glx1{0%{transform:translate(0,0);clip-path:inset(0 0 82% 0)}20%{transform:translate(-2px,-1px);clip-path:inset(18% 0 42% 0)}40%{transform:translate(2px,1px);clip-path:inset(62% 0 6% 0)}60%{transform:translate(-1px,1px);clip-path:inset(32% 0 48% 0)}80%{transform:translate(2px,-1px);clip-path:inset(8% 0 72% 0)}100%{transform:translate(0,0);clip-path:inset(46% 0 34% 0)}}
@keyframes glx2{0%{transform:translate(0,0);clip-path:inset(72% 0 4% 0)}25%{transform:translate(2px,1px);clip-path:inset(14% 0 56% 0)}50%{transform:translate(-2px,-1px);clip-path:inset(52% 0 20% 0)}75%{transform:translate(1px,1px);clip-path:inset(4% 0 82% 0)}100%{transform:translate(-1px,0);clip-path:inset(36% 0 40% 0)}}
@media(prefers-reduced-motion:reduce){.glitch-word::before,.glitch-word::after{animation:none;opacity:.35}}

/* ======================================================================
   GAMIFICATION LAYER — toggle between a serious landing and a whole-page
   "quest" experience. Game elements are hidden unless body.gamified.
   ====================================================================== */
/* --- the toggle switch in the header --- */
.gamify-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--line2);
  background:rgba(20,16,32,.6);border-radius:999px;padding:5px 11px 5px 6px;color:var(--txt);font-size:12px;transition:.18s}
.gamify-toggle:hover{border-color:var(--volt)}
.gt-track{position:relative;width:34px;height:18px;border-radius:999px;background:#2a2340;border:1px solid var(--line2);flex:none;transition:.2s}
.gt-knob{position:absolute;top:1px;left:1px;width:14px;height:14px;border-radius:50%;background:var(--mut2);transition:.2s cubic-bezier(.3,1.3,.5,1)}
body.gamified .gt-track{background:linear-gradient(90deg,var(--volt),var(--cyan));border-color:transparent}
body.gamified .gt-knob{left:17px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6)}
.gt-lab .gt-on{display:none}.gt-lab .gt-off{display:inline}
body.gamified .gt-lab .gt-on{display:inline}body.gamified .gt-lab .gt-off{display:none}
@media(max-width:620px){.gt-lab{display:none}.gamify-toggle{padding:5px 6px}}

/* --- elements that exist ONLY in gamified mode --- */
#director,.tx-game,.tx-scrim2,.game-enter-flash,.quest-hud{display:none}
body.gamified #director{display:block}
body.gamified .tx-game,body.gamified .tx-scrim2,body.gamified .game-enter-flash{display:block}
body.gamified .quest-hud{display:flex}
body.gamified .teamx-immersive .tx-cards{display:none} /* hide only cards inside the game block; bottom advantage cards stay in both modes */

/* --- serious mode: revert the team section to a normal block --- */
body:not(.gamified) .teamx-immersive{width:auto;margin:56px auto;max-width:var(--maxw);min-height:0;padding:54px 22px;display:block}
body:not(.gamified) .teamx-immersive .tx-fg{min-height:0;padding:0;pointer-events:auto;display:block}
body:not(.gamified) .teamx-immersive .game-cta{margin-top:24px}

/* --- gamified body: a touch more "alive / 2035 OS" --- */
body.gamified{--grid:rgba(124,92,255,.05)}
body.gamified .scanline{opacity:.7}

/* --- per-section QUEST badge (injected by JS) --- */
.quest-badge{display:inline-flex;align-items:center;gap:9px;margin:0 auto 14px;padding:5px 13px 5px 7px;
  border:1px solid var(--line2);border-radius:999px;background:rgba(20,16,34,.7);backdrop-filter:blur(8px);
  font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mut);letter-spacing:.04em;
  opacity:0;transform:translateY(8px);transition:.5s}
.quest-badge.in{opacity:1;transform:none}
.quest-badge .qb-n{display:grid;place-items:center;min-width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--volt),var(--cyan));color:#0e0a1c;font-weight:800;font-size:10.5px}
.quest-badge.done{border-color:var(--signal)}
.quest-badge.done .qb-n{background:var(--signal)}
.quest-badge .qb-check{color:var(--signal);font-weight:800;display:none}
.quest-badge.done .qb-check{display:inline}
.quest-wrap{text-align:center}

/* --- floating QUEST HUD (left rail) — your journey through the page --- */
.quest-hud{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:48;
  flex-direction:column;gap:0;align-items:flex-start;pointer-events:none}
.quest-hud .qh-title{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--mut2);letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:10px;padding-left:2px}
.quest-hud .qh-xp{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--cyan);margin-bottom:12px;padding-left:2px}
.quest-hud .qh-xp b{color:#fff;font-size:13px}
.qh-item{display:flex;align-items:center;gap:9px;height:30px;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--mut2);transition:.3s}
.qh-item .qh-dot{position:relative;width:11px;height:11px;border-radius:50%;border:2px solid var(--line2);flex:none;transition:.3s}
.qh-item .qh-line{position:absolute;left:4px;top:11px;width:2px;height:19px;background:var(--line2)}
.qh-item:last-child .qh-line{display:none}
.qh-item .qh-name{opacity:0;transform:translateX(-6px);transition:.3s;white-space:nowrap;max-width:0;overflow:hidden}
.quest-hud:hover .qh-name{opacity:1;transform:none;max-width:200px}
.qh-item.active{color:var(--txt)}
.qh-item.active .qh-dot{border-color:var(--volt);box-shadow:0 0 0 4px rgba(124,92,255,.18)}
.qh-item.done{color:var(--signal)}
.qh-item.done .qh-dot{border-color:var(--signal);background:var(--signal)}
.qh-item.done .qh-line{background:var(--signal)}
@media(max-width:820px){.quest-hud{display:none!important}}

/* --- XP pop on quest complete --- */
.xp-pop{position:fixed;z-index:49;pointer-events:none;font-family:"JetBrains Mono",monospace;font-weight:800;
  font-size:14px;color:var(--cyan);text-shadow:0 2px 10px rgba(53,224,216,.6);animation:xppop 1.1s ease-out forwards}
@keyframes xppop{0%{opacity:0;transform:translateY(0) scale(.7)}18%{opacity:1;transform:translateY(-12px) scale(1.1)}100%{opacity:0;transform:translateY(-46px) scale(1)}}

/* quest badges live only in gamified mode */
.quest-wrap{display:none}
body.gamified .quest-wrap{display:block}

/* ===== Director picker (choose your star-archetype) ===== */
.dir-btn{display:none;align-items:center;gap:5px;cursor:pointer;border:1px solid var(--line2);background:rgba(20,16,32,.6);border-radius:999px;padding:6px 12px;color:var(--txt);font-size:12.5px;transition:.18s}
.dir-btn:hover{border-color:var(--volt)}
body.gamified .dir-btn{display:inline-flex}
@media(max-width:620px){.db-lab{display:none}.dir-btn{padding:6px 9px}}
.dir-picker{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(8,8,16,.42);backdrop-filter:blur(2.5px)}
.dp-here{display:block;text-align:center;font-size:11.5px;color:var(--mut);opacity:.85;margin:-4px 0 10px}
.dir-picker.show{display:flex;animation:dpfade .2s ease}
@keyframes dpfade{from{opacity:0}to{opacity:1}}
.dp-card{position:relative;width:min(820px,96vw);max-height:92vh;overflow:auto;background:linear-gradient(160deg,#1b1730,#141021);border:1px solid var(--line2);border-radius:20px;padding:22px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8),var(--glow)}
.dp-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.dp-title{font-size:20px;font-weight:800}.dp-sub{color:var(--mut2);font-size:12px;font-weight:400;margin-left:6px}
.dp-x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid var(--line2);background:transparent;color:var(--mut);cursor:pointer;font-size:14px}
.dp-x:hover{color:#fff;border-color:var(--volt)}
.dp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:620px){.dp-grid{grid-template-columns:repeat(2,1fr)}}
.dp-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 10px 12px;cursor:pointer;background:rgba(255,255,255,.03);border:2px solid var(--line);border-radius:16px;transition:.15s;color:var(--txt)}
.dp-item:hover{transform:translateY(-2px);border-color:var(--line2);background:rgba(255,255,255,.06)}
.dp-item.on{border-color:var(--volt);box-shadow:0 0 0 3px rgba(124,92,255,.2)}
.dp-prev{height:104px;display:grid;place-items:end center;filter:drop-shadow(0 8px 18px rgba(124,92,255,.4))}
.dp-name{font-weight:800;font-size:13.5px}
.dp-vibe{font-size:10.5px;color:var(--mut2);text-align:center}
.dp-acc{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:16px}
.dp-acclab{color:var(--mut2);font-size:11px;margin-right:2px}
.dp-acc-b{padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:transparent;color:var(--mut);font-size:12px;cursor:pointer;transition:.15s}
.dp-acc-b:hover{color:var(--txt)}
.dp-acc-b.on{border-color:var(--volt);color:#fff;background:rgba(124,92,255,.18)}
.dp-foot{display:flex;align-items:center;gap:14px;margin-top:16px}
.dp-hint{color:var(--mut);font-size:12.5px}.dp-foot .btn-volt{margin-left:auto}
/* premium reveal — аура + «ура, премиум!» при «Войти в офис» (вместо нижней кнопки-переключателя) */
.dp-celebrate{position:absolute;inset:0;display:none;align-items:center;justify-content:center;border-radius:20px;z-index:3;
  background:radial-gradient(70% 60% at 50% 45%,rgba(255,211,107,.22),rgba(20,16,33,.92))}
.dp-celebrate.on{display:flex;animation:dpfade .25s ease}
.dp-celebrate .dpc-card{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 20px}
.dp-celebrate .dpc-card::before{content:'';position:absolute;width:300px;height:300px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,211,107,.5),rgba(124,92,255,.2),rgba(53,224,216,.4),rgba(255,211,107,.5));
  filter:blur(26px);opacity:.85;z-index:-1;animation:dpcAura 4s linear infinite}
.dp-celebrate .dpc-crown{font-size:64px;filter:drop-shadow(0 6px 20px rgba(255,211,107,.7));animation:dpcPop .5s cubic-bezier(.2,1.4,.4,1)}
.dp-celebrate .dpc-card b{font:900 26px/1.1 Inter,sans-serif;background:linear-gradient(100deg,#ffe08a,#ffd36b,#ff9a3c);-webkit-background-clip:text;background-clip:text;color:transparent}
.dp-celebrate .dpc-card small{color:#cdbcff;font:700 13px/1.4 "JetBrains Mono",monospace}
@keyframes dpcAura{to{transform:rotate(360deg)}}
@keyframes dpcPop{from{transform:scale(.2);opacity:0}to{transform:scale(1);opacity:1}}
.dp-back{background:var(--panel);border:1px solid var(--line);color:var(--mut)}
.dp-back:hover{color:var(--txt);border-color:var(--line2)}
/* step 2 live preview — chosen character, updates instantly on accessory change */
.dp-bigprev{display:flex;justify-content:center;align-items:flex-end;min-height:170px;margin:6px 0 4px;
  background:radial-gradient(60% 80% at 50% 30%,rgba(124,92,255,.14),transparent 70%);border-radius:18px}
.dp-bigprev .dp-bp-inner{transform-origin:bottom center;animation:dpbpin .35s cubic-bezier(.2,1.4,.4,1)}
.dp-bigprev svg{display:block;filter:drop-shadow(0 10px 26px rgba(124,92,255,.45))}
@keyframes dpbpin{0%{transform:scale(.6);opacity:0}100%{transform:scale(1);opacity:1}}

/* ===== Worlds preview (galaxy of offices) ===== */
.wm-card{width:min(720px,96vw)}
.wm-soon{font-size:10px;color:#0e0a1c;background:linear-gradient(90deg,var(--volt),var(--cyan));padding:2px 9px;border-radius:999px;margin-left:10px;font-weight:700;vertical-align:middle;letter-spacing:.06em}
.wm-galaxy{background:radial-gradient(60% 70% at 50% 45%,rgba(124,92,255,.14),transparent 70%),#0c0a18;border:1px solid var(--line2);border-radius:16px;padding:10px;margin-bottom:14px;overflow:hidden}
.wm-galaxy svg{display:block}
.wm-node{animation:wmpulse 3s ease-in-out infinite}
.wm-node:nth-child(2n){animation-delay:1.4s}
@keyframes wmpulse{0%,100%{opacity:.82}50%{opacity:1}}
.wm-copy{color:var(--mut);font-size:14px;line-height:1.6;margin:0}
.wm-copy b{color:var(--txt)}

/* ===== Footer = LIVE task board (cards move as the AI team works) ===== */
.foot-board{display:none;max-width:var(--maxw);margin:24px auto 0;padding:30px 22px 44px}
body.gamified .foot-board{display:block}
body.gamified #footSimple{display:none}
.fb-head{text-align:center;margin-bottom:22px}
.fb-badge{color:var(--volt2);font-size:12px}
.fb-title{font-size:clamp(19px,2.6vw,27px);margin:8px 0 0}
.fb-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* телефон: НЕ схлопываем в 1 колонку — оставляем 3 узких как настоящий канбан,
   карточки ужимаем в мини-режим (заголовок + цветной кант приоритета).
   .game-board-префикс — чтобы перебить .game-board .fb-* выше по specificity. */
@media(max-width:760px){
  .game-board .fb-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px 8px 4px}
  .game-board .fb-col{padding:7px 5px;border-radius:10px;min-width:0}
  .game-board .fb-card .fc-t,.game-board .fb-card .fc-tag{overflow-wrap:anywhere;word-break:break-word}
  .game-board .fb-col-h{font-size:8.5px;gap:4px;margin-bottom:6px;letter-spacing:.01em}
  .game-board .fb-col-h i{width:6px;height:6px}
  .game-board .fb-col-h .fb-ch{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .game-board .fb-col-h b{font-size:10px}
  .game-board .fb-card{padding:6px 7px;gap:5px;border-left-width:2px;border-radius:8px;margin-bottom:5px}
  .game-board .fb-card .fc-t{font-size:10px;-webkit-line-clamp:3}
  .game-board .fb-card .fc-pri{font-size:7px;padding:1px 4px}
  .game-board .fb-card .fc-tags{display:none}
  .game-board .fb-card .fc-mleft{font-size:8px;gap:5px}
  .game-board .fb-card .fc-av{width:14px;height:14px;font-size:8px}
}
.fb-col{background:rgb(31 27 46 /.5);border:1px solid var(--line);border-radius:14px;padding:12px}
.fb-col-h{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mut);margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em}
.fb-col-h i{width:8px;height:8px;border-radius:50%;flex:none}
.fb-col[data-col=backlog] .fb-col-h i{background:var(--amber)}
.fb-col[data-col=doing] .fb-col-h i{background:var(--cyan)}
.fb-col[data-col=done] .fb-col-h i{background:var(--signal)}
.fb-col-h b{margin-left:auto;color:var(--txt);font-size:12px}
.fb-list{display:flex;flex-direction:column;gap:8px;min-height:46px}
.fb-card{display:flex;flex-direction:column;gap:7px;background:#1a1628;border:1px solid var(--line);border-left:3px solid var(--volt);border-radius:10px;padding:10px 11px;margin-bottom:8px;animation:fbin .35s ease}
.fb-card .fc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.fb-card .fc-t{margin:0;font-size:12.5px;font-weight:600;color:var(--txt);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fb-card .fc-pri{flex:none;font-size:9px;text-transform:uppercase;letter-spacing:.05em;padding:2px 6px;border:1px solid;border-radius:6px;white-space:nowrap;line-height:1.4}
.fb-card .fc-tags{display:flex;flex-wrap:wrap;gap:5px}
.fb-card .fc-tag{font-size:9.5px;padding:1px 7px;border:1px solid;border-radius:999px;opacity:.92}
.fb-card .fc-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:1px}
.fb-card .fc-mleft{display:flex;gap:10px;font-size:10px;color:var(--mut)}
.fb-card .fc-av{flex:none;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#0c0a14}
@keyframes fbin{from{opacity:0;transform:translateY(-7px) scale(.97)}to{opacity:1;transform:none}}
.fb-foot{text-align:center;color:var(--mut2);font-size:12px;margin-top:24px;display:flex;align-items:center;gap:8px;justify-content:center}

/* heading no longer collides with the office: stronger top/bottom scrim band */
.teamx-immersive .tx-scrim2{background:linear-gradient(180deg,rgba(8,9,18,.96) 0%,rgba(8,9,18,.82) 13%,rgba(8,9,18,.32) 27%,rgba(8,9,18,0) 43%,rgba(8,9,18,0) 58%,rgba(8,9,18,.62) 82%,rgba(8,9,18,.97) 100%)}
body.gamified .teamx-immersive{min-height:86vh}
body.gamified .teamx-immersive .tx-fg{min-height:86vh;padding-top:52px}
body.gamified .teamx-immersive .tx-top{max-width:680px;margin:0 auto}

/* ===== Director GUIDE — side pointer, wealth arc, hop between slides ===== */
#director{left:0;top:0}
#director.entered{transition:opacity .5s ease!important}
#director.stage-poor{filter:grayscale(.55) brightness(.82)}
#director.stage-money{filter:grayscale(.12) drop-shadow(0 0 14px rgba(255,211,107,.35))}
#director.stage-hustler{filter:drop-shadow(0 8px 26px rgba(124,92,255,.6)) drop-shadow(0 0 14px rgba(255,211,107,.5))}
/* before a character is picked → mysterious SHADOW (тень). html-prefix wins over body.premium/stage filters */
html body.dir-unpicked #director{filter:brightness(0) drop-shadow(0 0 13px rgba(124,92,255,.6)) drop-shadow(0 0 28px rgba(53,224,216,.3))!important}
body.dir-unpicked #director .d-tag{display:none}
/* constant gentle float when standing → reads as alive + smooth */
body.gamified #director:not(.walking):not(.teleport):not(.falling):not(.hop) svg{animation:dIdle 3.6s ease-in-out infinite}
@keyframes dIdle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(-1.1deg)}}
#director::before{position:absolute;top:-8px;font-size:15px;opacity:0;transition:opacity .4s;pointer-events:none}
#director[data-side=l]::before{right:-12px}#director[data-side=r]::before{left:-12px}
#director.stage-money::before{content:'✨';opacity:1;animation:dfloat 2s ease-in-out infinite}
#director.stage-hustler::before{content:'💰';opacity:1;animation:dfloat 2s ease-in-out infinite}
@keyframes dfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
#director::after{position:absolute;top:36px;font-size:17px;opacity:.9;pointer-events:none}
#director[data-side=l]::after{content:'👉';right:-26px;animation:dpoint 1.2s ease-in-out infinite}
#director[data-side=r]::after{content:'👈';left:-26px;animation:dpointL 1.2s ease-in-out infinite}
@keyframes dpoint{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
/* Director teleport-OUT at the window: stretches into a glowing beam and vanishes into the office */
#director.teleport svg{transform-origin:50% 92%;animation:dteleport .56s ease-in forwards;filter:drop-shadow(0 0 16px #7cdcff) drop-shadow(0 0 32px #9b7cff)}
#director.teleport::after,#director.teleport .d-tag,#director.teleport .d-bubble{opacity:0!important}
@keyframes dteleport{0%{opacity:1;transform:translateY(0) scale(1)}42%{opacity:1;transform:translateY(-6px) scaleX(.66) scaleY(1.2)}100%{opacity:0;transform:translateY(-36px) scaleX(.04) scaleY(.2)}}
@keyframes dpointL{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}
#director.hop svg{animation:dhop .58s cubic-bezier(.34,1.56,.64,1)}
@keyframes dhop{0%{transform:translateY(0)}38%{transform:translateY(-24px)}100%{transform:translateY(0)}}
@media(max-width:620px){#director::after{display:none}#director svg{width:52px;height:80px}}

/* ===== Header: single clean line on desktop across all 11 locales ===== */
/* Laptops (1024-1400): tighten gaps + font and drop decorative bits so long locales
   (es / pt-BR / de) never wrap or collide. Full header with status+version only shows >1400px,
   where even the widest locale (~1390px intrinsic) fits comfortably. */
@media(min-width:1024px) and (max-width:1400px){
  .bar{gap:12px;padding:16px 18px}
  .bar-nav{gap:15px;font-size:12.5px}
  .bar-right{gap:9px}
  .status{display:none}                       /* "agent online" is decorative - drop it first when space is tight */
  .lang{padding:5px 7px;font-size:11.5px}
  .ver{display:none}                          /* version text eats width - ALPHA badge carries the vibe */
  .db-lab{display:none}                        /* образ/миры buttons go icon-only when space is tight */
  .dir-btn{padding:6px 9px}
}
/* Gamified mode adds the образ/миры buttons to the bar: keep the tightened layout across all desktop
   widths so those extra controls never push the header into a second line. */
@media(min-width:1024px){
  body.gamified .status{display:none}
  body.gamified .ver{display:none}
  body.gamified .db-lab{display:none}          /* icon-only образ/миры whenever the bar is busy */
  body.gamified .dir-btn{padding:6px 9px}
  body.gamified .bar-nav{gap:15px}
  body.gamified .bar-right{gap:9px}
}
/* ===== Below 1024px: nav collapses into a burger drawer (nav links stay reachable) ===== */
@media(max-width:1023px){
  .bar{gap:12px;padding:14px 16px}
  .bar .status{display:none}
  .nav-burger{display:flex}
  .bar-right{margin-left:0;gap:9px}
  /* nav becomes a dropdown panel anchored under the bar; toggled by .bar-nav.open */
  .bar-nav{position:absolute;top:100%;right:12px;left:12px;margin:0;flex-direction:column;align-items:stretch;
    gap:0;padding:6px;font-size:15px;border:1px solid var(--line2);border-radius:14px;
    background:rgba(16,13,28,.98);backdrop-filter:blur(14px);box-shadow:0 24px 60px rgba(0,0,0,.55);
    max-height:0;overflow:hidden;opacity:0;pointer-events:none;transform:translateY(-6px);
    transition:opacity .2s ease,transform .2s ease,max-height .2s ease}
  .bar-nav.open{max-height:70vh;opacity:1;pointer-events:auto;transform:none}
  .bar-nav a{padding:11px 14px;border-radius:9px}
  .bar-nav a:hover{background:rgb(139 108 255 / .12)}
}
/* Phones: icon-only toggles, drop version, tighten brand. Keep CTA + lang + burger visible. */
@media(max-width:560px){
  .gt-lab,.db-lab{display:none}               /* icon-only toggles on phones */
  .gamify-toggle{padding:5px 7px}
  .lang{padding:5px 7px;max-width:6.2rem}
  .ver{display:none}                          /* version text eats width - ALPHA badge stays */
  .brand{gap:6px}
  .alpha-badge{margin-left:4px}
  .bar-right{gap:7px}
}
/* Narrow phones: bar CTA + gamify toggle crowd the burger - drop the non-essentials.
   Nav (via burger), language selector and the burger itself always stay reachable. */
@media(max-width:460px){
  .bar-right .btn-volt{display:none}          /* hero has its own CTAs - bar CTA is redundant here */
  .gamify-toggle{display:none}                /* game/normal mode toggle - not essential on a phone */
  .alpha-badge{display:none}                  /* ALPHA badge eats ~47px - brand name carries it */
  .lang{max-width:5rem}
}
/* tablets: a touch more breathing room on the immersive team block */
@media(min-width:621px) and (max-width:1024px){
  body.gamified .teamx-immersive{min-height:78vh}
  body.gamified .teamx-immersive .tx-fg{min-height:78vh}
}

/* ===== Director thought bubble (pains up top → confidence lower) ===== */
.d-bubble{position:absolute;top:-46px;left:50%;transform:translateX(-50%) translateY(6px);white-space:nowrap;
  background:rgba(12,14,28,.96);border:1px solid var(--volt);color:var(--txt);font-size:15.5px;font-weight:600;line-height:1.15;
  padding:9px 15px;border-radius:15px;opacity:0;transition:opacity .3s ease,transform .3s ease;pointer-events:none;
  font-family:Inter,system-ui,sans-serif;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 22px -6px var(--volt)}
.d-bubble.show{opacity:1;transform:translateX(-50%) translateY(0)}
.d-bubble::after{content:'';position:absolute;bottom:-5px;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:rgba(12,14,28,.94)}

/* ===== Neon-glitch highlight (premium offer in hero) ===== */
.neon-glitch{position:relative;display:inline-block;color:#5cff9f;font-weight:800;letter-spacing:.01em;
  text-shadow:0 0 6px rgba(92,255,159,.75),0 0 16px rgba(53,224,216,.5)}
.neon-glitch::before,.neon-glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none;mix-blend-mode:screen}
.neon-glitch::before{color:#27e6ff;animation:ng1 2.4s infinite steps(1) alternate}
.neon-glitch::after{color:#ff3df0;animation:ng2 2s infinite steps(1) alternate}
@keyframes ng1{0%{transform:translate(0,0);clip-path:inset(0 0 80% 0)}30%{transform:translate(-1px,0);clip-path:inset(40% 0 30% 0)}60%{transform:translate(1px,0);clip-path:inset(70% 0 5% 0)}100%{transform:translate(0,0);clip-path:inset(20% 0 55% 0)}}
@keyframes ng2{0%{transform:translate(0,0);clip-path:inset(65% 0 8% 0)}35%{transform:translate(1px,0);clip-path:inset(10% 0 60% 0)}70%{transform:translate(-1px,0);clip-path:inset(45% 0 25% 0)}100%{transform:translate(0,0);clip-path:inset(30% 0 45% 0)}}
@media(prefers-reduced-motion:reduce){.neon-glitch::before,.neon-glitch::after{animation:none;opacity:.4}}

/* ===== Premium section (serious perks · gamified neon world + skins + powers) ===== */
.premium{max-width:var(--maxw);margin:56px auto;padding:50px 22px;text-align:center}
.prem-head{margin-bottom:28px}
.prem-sub{color:var(--mut);max-width:620px;margin:6px auto 0;font-size:15px}
.prem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:30px}
/* на телефоне — 2 колонки (а не 1): компактнее, меньше скролла */
@media(max-width:760px){.prem-grid{grid-template-columns:1fr 1fr;gap:10px}}
@media(max-width:480px){.prem-grid .prem-card{padding:13px 12px}.prem-grid .prem-card .pc-ic{font-size:21px;margin-bottom:5px}.prem-grid .prem-card b{font-size:13.5px}.prem-grid .prem-card span{font-size:11.5px}}
.prem-card{background:rgb(31 27 46/.5);border:1px solid var(--line);border-radius:14px;padding:18px 16px;text-align:left;transition:.15s}
.prem-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.prem-card .pc-ic{font-size:24px;margin-bottom:8px}
.prem-card b{display:block;font-size:15px}
.prem-card span{display:block;color:var(--mut);font-size:12.5px;margin-top:4px;line-height:1.45}
.prem-block{margin:34px 0}
.prem-h3{font-size:clamp(18px,2.4vw,24px);margin:0 0 6px}
.prem-note{color:var(--mut2);font-size:12px;margin:0 0 16px}
.pw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:860px;margin:0 auto}
@media(max-width:760px){.pw-grid{grid-template-columns:1fr 1fr}}
.pw-card{background:rgb(31 27 46/.5);border:1px solid var(--line);border-top:2px solid var(--pc);border-radius:14px;padding:16px 12px;cursor:pointer;transition:.15s;position:relative}
.pw-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px -16px var(--pc)}
.pw-card.pw-selected{border-color:var(--pc);border-width:2px;background:rgba(124,92,255,.18);box-shadow:0 0 0 2px var(--pc),0 14px 34px -14px var(--pc);transform:translateY(-3px)}
.pw-card.pw-selected::after{content:'✓';position:absolute;top:8px;right:10px;font-size:16px;font-weight:900;color:var(--pc)}
.pw-confirm{display:none;margin:18px auto 0;text-align:center}
.pw-confirm.show{display:block}
.pw-confirm .pw-confirm-btn{padding:12px 28px;border:0;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#d946ef);color:#fff;font-weight:700;font-size:15px;cursor:pointer;transition:.15s;min-height:44px}
.pw-confirm .pw-confirm-btn:hover{transform:translateY(-2px);box-shadow:0 10px 28px -8px rgba(217,70,239,.7)}
.pw-confirm .pw-confirm-name{display:inline-block;margin-right:8px;opacity:.85}
.pw-card .pw-ic{font-size:26px}
.pw-card b{display:block;margin-top:6px;font-size:14px}
.pw-card span{display:block;color:var(--mut);font-size:11.5px;margin-top:4px;line-height:1.4}
.skin-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.skin-chip{position:relative;width:108px;height:124px;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#0e0a1c;font-weight:800;box-shadow:0 12px 30px -12px rgba(0,0,0,.7);overflow:hidden}
.skin-chip .sk-e{font-size:36px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.skin-chip .sk-n{font-size:13px;text-shadow:0 1px 2px rgba(0,0,0,.25)}
.skin-chip .sk-lock{position:absolute;top:8px;right:9px;font-size:12px;opacity:.85}
.prem-cta{display:flex;align-items:center;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
/* gamified amplification — neon + fire */
body.gamified .prem-card,body.gamified .pw-card{background:rgba(20,16,40,.6);box-shadow:inset 0 0 0 1px rgba(124,92,255,.15)}
body.gamified .prem-card:hover{box-shadow:0 0 0 1px var(--volt),0 14px 34px -14px var(--volt)}
body.gamified .prem-h3{text-shadow:0 0 16px rgba(124,92,255,.45)}
body.gamified .skin-chip{animation:skinpulse 3s ease-in-out infinite}
body.gamified .skin-chip:hover{transform:translateY(-4px) scale(1.04)}
@keyframes skinpulse{0%,100%{filter:saturate(1) brightness(1)}50%{filter:saturate(1.35) brightness(1.14)}}

/* ===== Premium activate button + MAGIC + premium mode ===== */
.prem-activate{margin-top:20px}
.btn-prem{display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:0;border-radius:14px;font-weight:800;font-size:16px;
  padding:16px 26px;color:#1a0e04;background:linear-gradient(100deg,#ff8a3a,#ffd36b 38%,#5cff9f 72%,#27e6ff);background-size:200% 100%;
  box-shadow:0 14px 40px -10px rgba(255,138,58,.6),inset 0 0 0 1px rgba(255,255,255,.18);animation:premsweep 5s linear infinite;transition:transform .15s}
.btn-prem:hover{transform:translateY(-2px) scale(1.02)}
.btn-prem.on{cursor:default;animation:none;background:linear-gradient(100deg,#5cff9f,#27e6ff)}
@keyframes premsweep{to{background-position:200% 0}}
.prem-star{color:var(--mut2);font-size:12px;margin-top:10px}
.prem-form{display:none;justify-content:center;gap:10px;max-width:480px;margin:16px auto 0}
.prem-form.show{display:flex}
@media(max-width:520px){.prem-form{flex-direction:column}.prem-form .btn{width:100%}}
.prem-flash{position:fixed;inset:0;z-index:90;pointer-events:none;background:radial-gradient(60% 50% at 50% 50%,rgba(255,211,107,.55),rgba(92,255,159,.3) 40%,rgba(39,230,255,.18) 62%,transparent 78%);animation:premflash .95s ease-out forwards}
@keyframes premflash{0%{opacity:0;transform:scale(.4)}20%{opacity:1}100%{opacity:0;transform:scale(1.7)}}
body.premium{--volt:#a06bff;--volt2:#c0a4ff}
body.premium .bg-grid{background-image:radial-gradient(60rem 60rem at 78% -12%,rgba(255,138,58,.18),transparent 60%),radial-gradient(46rem 46rem at -6% 16%,rgba(39,230,255,.14),transparent 55%),radial-gradient(42rem 42rem at 50% 118%,rgba(176,107,255,.16),transparent 60%),linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)}
body.premium .prem-card,body.premium .pw-card{border-color:rgba(255,138,58,.35);box-shadow:0 0 0 1px rgba(255,138,58,.25),0 14px 34px -16px rgba(255,138,58,.45)}
body.premium .prem-h3,body.premium .sec-h{text-shadow:0 0 18px rgba(255,138,58,.4)}
body.premium #director{filter:drop-shadow(0 0 16px rgba(255,138,58,.75)) drop-shadow(0 0 30px rgba(124,92,255,.6))!important}
body.premium .glass{box-shadow:var(--shadow),0 0 0 1px rgba(255,138,58,.18)}
body.premium .brand-name::after{content:' ✦';color:#ffd36b}

/* ===== Live board now flows directly out of the game (overlaps slightly) ===== */
.game-board{display:none;max-width:940px;margin:-130px auto 0;padding:0;position:relative;z-index:4;overflow:hidden;background:rgb(17 14 28 /.95);border:1px solid var(--line2);border-radius:18px;backdrop-filter:blur(12px);box-shadow:0 28px 80px -18px rgba(0,0,0,.9),0 0 42px -8px rgba(140,108,255,.42)}
body.gamified .game-board{display:block}
body.gamified #footSimple{display:flex}      /* simple footer is the only footer now */
.game-board .fb-head{text-align:center;margin-bottom:16px}
.game-board::before{content:'';position:absolute;left:0;right:0;top:-46px;height:64px;background:linear-gradient(180deg,transparent,var(--base) 78%);pointer-events:none}

/* ===== FINALE — drive into the sunset ===== */
.sunset{position:relative;min-height:96vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  background:linear-gradient(180deg,#160e2e 0%,#2c1747 30%,#5e2a5c 54%,#b8455e 74%,#ff8a4a 90%,#ffc070 100%)}
.sunset .ss-sun{position:absolute;left:50%;top:60%;width:300px;height:300px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,#fff3cf 0%,#ffb05a 42%,rgba(255,138,74,.5) 60%,transparent 72%);filter:blur(.5px)}
.sunset .ss-haze{position:absolute;left:0;right:0;top:66%;height:18%;background:linear-gradient(180deg,rgba(255,180,120,.45),transparent);pointer-events:none}
.sunset .ss-road{position:absolute;left:50%;bottom:0;width:120%;height:34%;transform:translateX(-50%);
  background:linear-gradient(180deg,#241634 0%,#160d22 100%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);overflow:hidden}
.sunset .ss-road i{position:absolute;left:50%;width:5px;background:#ffd87a;opacity:.85;border-radius:3px}
.sunset .ss-road i:nth-child(1){bottom:4%;height:10%;transform:translateX(-50%) scale(2.2)}
.sunset .ss-road i:nth-child(2){bottom:24%;height:8%;transform:translateX(-50%) scale(1.5)}
.sunset .ss-road i:nth-child(3){bottom:44%;height:6%;transform:translateX(-50%) scale(1)}
.sunset .ss-road i:nth-child(4){bottom:62%;height:4%;transform:translateX(-50%) scale(.7)}
.sunset .ss-road i:nth-child(5){bottom:78%;height:3%;transform:translateX(-50%) scale(.5)}
.sunset .ss-rig{position:absolute;left:50%;bottom:15%;transform:translateX(-50%);z-index:3;will-change:transform,opacity}
.sunset .ss-car{display:block;filter:drop-shadow(0 14px 30px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(124,92,255,.5))}
.sunset .ss-char{position:absolute;left:50%;bottom:46px;transform:translateX(-46%);z-index:4;pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));animation:ssbob 2.6s ease-in-out infinite}
.sunset .ss-char svg{display:block;width:58px;height:auto}
@keyframes ssbob{0%,100%{transform:translateX(-46%) translateY(0)}50%{transform:translateX(-46%) translateY(-3px)}}
.sunset .ss-cta{position:relative;z-index:5;text-align:center;margin-top:9vh;padding:0 20px;max-width:560px}
.sunset .ss-h{font-size:clamp(26px,4.4vw,46px);font-weight:900;line-height:1.06;margin:10px 0 8px;
  color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.sunset .ss-sub{color:#ffe9d6;font-size:clamp(14px,1.9vw,17px);margin:0 auto 18px;max-width:440px}
.sunset .ss-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.sunset .ss-form .join-in{min-width:200px}
.sunset .ss-form .btn-volt{box-shadow:0 10px 30px -8px rgba(124,92,255,.8)}
@media(max-width:520px){.sunset .ss-form{flex-direction:column;align-items:stretch}.sunset .ss-rig{bottom:11%}}
/* engine ignition → drive off into the sunset */
.sunset.driving .ss-rig{animation:ssdrive 2.3s cubic-bezier(.45,0,.85,1) forwards}
.sunset.driving .ss-char{animation:none;transform:translateX(-46%)}
.sunset.driving .ss-flame{opacity:.95;animation:ssflk .1s infinite alternate}
.sunset.driving .ss-cta{opacity:.25;transition:opacity .6s ease}
.sunset.driving .ss-sun{animation:sspulse 2.3s ease}
/* drift (fishtail donut) on the spot, then accelerate AWAY down the road into the sunset (toward the
   centre horizon, shrinking + fading) — never exits sideways. */
@keyframes ssdrive{
  0%  {transform:translateX(-50%) rotate(0deg)}
  9%  {transform:translateX(-50%) translateX(-34px) translateY(2px) rotate(11deg)}
  20% {transform:translateX(-50%) translateX(32px)  translateY(1px) rotate(-13deg)}
  31% {transform:translateX(-50%) translateX(-20px) rotate(9deg)}
  40% {transform:translateX(-50%) translateX(12px)  rotate(-5deg)}
  47% {transform:translateX(-50%) rotate(0deg)}
  70% {transform:translateX(-50%) translateY(-24vh) scale(.18);opacity:.3}
  100%{transform:translateX(-50%) translateY(-30vh) scale(.06);opacity:0}
}

/* ===== MEN-IN-BLACK floor burst (one-shot on game→fall) ===== */
.mib-burst{position:fixed;inset:0;z-index:46;pointer-events:none;display:none}
.mib-burst.go{display:block}
.mib-burst .mib-flash{position:absolute;inset:0;background:radial-gradient(40vw 30vh at 50% 34%,rgba(155,233,255,.5),rgba(124,92,255,.12) 40%,transparent 72%);opacity:0;animation:mibFlash .7s ease-out forwards}
.mib-burst .mib-rip{position:absolute;left:50%;top:34%;height:6px;width:10px;transform:translate(-50%,-50%);border-radius:4px;
  background:linear-gradient(90deg,transparent,#fff,#9be9ff,#fff,transparent);box-shadow:0 0 34px 10px rgba(120,200,255,.85);
  opacity:0;animation:mibRip .55s cubic-bezier(.2,.7,.25,1) forwards}
.mib-burst .mib-beam{position:absolute;left:50%;top:34%;width:34vw;height:64vh;transform:translateX(-50%);mix-blend-mode:screen;
  background:linear-gradient(180deg,rgba(155,233,255,.6),rgba(124,92,255,.14) 45%,transparent);
  clip-path:polygon(43% 0,57% 0,100% 100%,0 100%);opacity:0;animation:mibBeam 1s ease-out .12s forwards}
.mib-burst .mib-ring{position:absolute;left:50%;top:34%;width:34px;height:12px;transform:translate(-50%,-50%);
  border:2px solid rgba(155,233,255,.85);border-radius:50%;opacity:0;animation:mibRing .85s ease-out .04s forwards}
.mib-burst .mib-shard{position:absolute;left:50%;top:34%;width:16px;height:5px;border-radius:2px;background:#cbb8ff;
  box-shadow:0 0 8px rgba(155,233,255,.7);opacity:0}
.mib-burst.go .mib-shard{animation:mibShard .72s cubic-bezier(.3,.6,.4,1) forwards}
.mib-shard.s1{--dx:-44vw;--dy:9vh;--r:-160deg} .mib-shard.s2{--dx:-26vw;--dy:16vh;--r:120deg}
.mib-shard.s3{--dx:-10vw;--dy:22vh;--r:-90deg}  .mib-shard.s4{--dx:12vw;--dy:21vh;--r:140deg}
.mib-shard.s5{--dx:28vw;--dy:14vh;--r:-130deg}  .mib-shard.s6{--dx:46vw;--dy:8vh;--r:100deg}
@keyframes mibFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
@keyframes mibRip{0%{width:10px;opacity:0}22%{opacity:1}100%{width:96vw;opacity:0}}
@keyframes mibBeam{0%{opacity:0;transform:translateX(-50%) scaleY(.15)}28%{opacity:1}100%{opacity:0;transform:translateX(-50%) scaleY(1.12)}}
@keyframes mibRing{0%{opacity:.95;width:30px;height:10px}100%{opacity:0;width:86vw;height:32vh}}
@keyframes mibShard{0%{opacity:1;transform:translate(-50%,-50%) rotate(0)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) rotate(var(--r))}}
@media(prefers-reduced-motion:reduce){.mib-burst{display:none!important}}
@keyframes ssflk{0%{opacity:.6;transform:scaleX(1)}100%{opacity:1;transform:scaleX(1.4)}}
@keyframes sspulse{0%{filter:brightness(1)}40%{filter:brightness(1.5)}100%{filter:brightness(1)}}
/* the DOM director "lands" into the car — hidden once the finale owns the avatar */
body.finale-landed #director{opacity:0!important}

/* director streaking DOWN to the finale (post-game ride) */
#director.falling svg{animation:dfall .55s ease-in-out infinite;filter:drop-shadow(0 14px 22px rgba(124,92,255,.55))}
@keyframes dfall{0%,100%{transform:rotate(-7deg) scaleY(1.04)}50%{transform:rotate(7deg) scaleY(.98)}}
#director.falling::after{content:'';position:absolute;left:50%;top:-46px;width:4px;height:42px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent,rgba(124,92,255,.6));border-radius:3px;pointer-events:none}

/* ===== FINALE — cinematic grade (ocean + sun-glitter + letterbox + grain + flare) ===== */
.sunset{min-height:100vh;background:linear-gradient(180deg,#120a26 0%,#2a1545 26%,#5a2a5e 48%,#a83f5e 66%,#ff7e45 82%,#ffd187 100%)}
.sunset .ss-sun{top:55%;width:340px;height:340px;
  background:radial-gradient(circle,#fff6d8 0%,#ffc266 40%,rgba(255,150,80,.55) 58%,transparent 70%);
  box-shadow:0 0 120px 40px rgba(255,150,80,.35);animation:sshover 9s ease-in-out infinite}
@keyframes sshover{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-53%)}}
/* anamorphic lens flare — a bright horizontal streak + soft dots */
.sunset .ss-flare{position:absolute;left:0;right:0;top:55%;height:3px;transform:translateY(-50%);z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,225,180,.55) 38%,#fff 50%,rgba(255,225,180,.55) 62%,transparent);
  filter:blur(1px);animation:ssflare 6s ease-in-out infinite}
@keyframes ssflare{0%,100%{opacity:.5}50%{opacity:.9}}
/* ocean band at the horizon with a shimmering sun-reflection column */
.sunset .ss-ocean{position:absolute;left:0;right:0;top:62%;height:13%;z-index:2;overflow:hidden;
  background:linear-gradient(180deg,#ffb877 0%,#c8627e 30%,#5b3a78 70%,#2a2150 100%)}
.sunset .ss-ocean::after{content:'';position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.18) 0 1px,transparent 1px 5px);animation:sswave 5s linear infinite}
@keyframes sswave{to{background-position:0 10px}}
.sunset .ss-glit{position:absolute;left:50%;top:0;bottom:0;width:54px;transform:translateX(-50%);
  background:radial-gradient(60% 100% at 50% 0,rgba(255,240,200,.95),rgba(255,200,140,.35) 50%,transparent 80%);
  mix-blend-mode:screen;animation:ssglit 2.6s ease-in-out infinite}
@keyframes ssglit{0%,100%{opacity:.7;transform:translateX(-50%) scaleX(1)}50%{opacity:1;transform:translateX(-50%) scaleX(1.25)}}
/* drifting cloud silhouettes */
.sunset .ss-clouds{position:absolute;inset:0;z-index:1;pointer-events:none}
.sunset .ss-clouds i{position:absolute;height:14px;border-radius:14px;background:rgba(30,16,40,.5);filter:blur(2px)}
.sunset .ss-clouds i:nth-child(1){top:24%;left:-20%;width:160px;animation:sscloud 46s linear infinite}
.sunset .ss-clouds i:nth-child(2){top:33%;left:-30%;width:110px;opacity:.7;animation:sscloud 62s linear infinite 6s}
.sunset .ss-clouds i:nth-child(3){top:18%;left:-25%;width:90px;opacity:.6;animation:sscloud 72s linear infinite 12s}
.sunset .ss-clouds i:nth-child(4){top:40%;left:-15%;width:200px;opacity:.5;animation:sscloud 54s linear infinite 3s}
@keyframes sscloud{to{transform:translateX(150vw)}}
/* road foreground (over the ocean horizon) with always-flowing centre line */
.sunset .ss-road{top:auto;bottom:0;height:38%;background:linear-gradient(180deg,#1f1330 0%,#0e0819 100%)}
/* dashes are STATIC at rest (no idle repaint) — they only stream during the drive-off */
.sunset.driving .ss-road i{animation:ssline .45s linear infinite}
.sunset.driving .ss-road i:nth-child(2){animation-delay:-.09s}.sunset.driving .ss-road i:nth-child(3){animation-delay:-.18s}
.sunset.driving .ss-road i:nth-child(4){animation-delay:-.27s}.sunset.driving .ss-road i:nth-child(5){animation-delay:-.36s}
@keyframes ssline{0%{opacity:.25}50%{opacity:.9}100%{opacity:.25}}
/* headlight wash from the car */
.sunset .ss-rig::after{content:'';position:absolute;left:50%;bottom:30px;width:240px;height:120px;transform:translateX(-50%);
  background:radial-gradient(60% 100% at 50% 100%,rgba(255,240,200,.28),transparent 70%);pointer-events:none;z-index:-1}
/* warm color grade + vignette */
.sunset .ss-grade{position:absolute;inset:0;z-index:7;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 46%,transparent 52%,rgba(20,6,30,.55) 100%),linear-gradient(0deg,rgba(255,120,60,.06),transparent)}
/* film grain */
.sunset .ss-grain{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;animation:ssgrain .6s steps(2) infinite}
@keyframes ssgrain{0%{background-position:0 0}50%{background-position:90px 50px}100%{background-position:30px 110px}}
/* cinematic letterbox bars — slide in like a movie when the finale takes over */
.sunset .ss-bars{position:absolute;inset:0;z-index:9;pointer-events:none}
.sunset .ss-bars::before,.sunset .ss-bars::after{content:'';position:absolute;left:0;right:0;height:7vh;background:#000;transition:transform .9s cubic-bezier(.2,.85,.25,1)}
.sunset .ss-bars::before{top:0;transform:translateY(-100%);box-shadow:0 8px 22px rgba(0,0,0,.55)}
.sunset .ss-bars::after{bottom:0;transform:translateY(100%);box-shadow:0 -8px 22px rgba(0,0,0,.55)}
body.finale-landed .sunset .ss-bars::before,body.finale-landed .sunset .ss-bars::after{transform:translateY(0)}
.sunset .ss-cta{margin-top:7vh}
@media(prefers-reduced-motion:reduce){.sunset *{animation:none!important}}

.sunset .ss-road{z-index:3}
.sunset .ss-rig{z-index:4}

/* ===== Per-world tint — the landing shifts its accent + ambient wash to match the game's current world ===== */
:root{--world:#8b6cff}
.world-wash{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1s ease, background 1s ease;mix-blend-mode:screen}
body.gamified .world-wash{opacity:1}
/* smooth the accent recolour on the load-bearing accent elements */
.brand-logo,.btn-volt,.tk i,.chip.on,.dot.live{transition:background-color .8s ease,border-color .8s ease,box-shadow .8s ease}

.bar-nav .nav-arcade{color:var(--cyan)}
.nav-login{color:var(--volt)}
.nav-login:hover{color:var(--cyan)}
.hero-login{margin-left:14px;font-size:12px;opacity:.85}
.bar-nav .nav-arcade:hover{color:var(--volt)}

/* anchor jumps land BELOW the sticky header (fixes "scrolls to the wrong place"), iOS-friendly */
html{scroll-padding-top:74px}
@supports(-webkit-touch-callout:none){ /* iOS: avoid content-visibility scroll-anchor jumps while typing */
  body.kb-open .painx,body.kb-open .teamx,body.kb-open .panels,body.kb-open .faq{content-visibility:visible}
}

/* LEFT PANEL: manual-vs-postim killer stat (replaces the decorative quest log) */
.quest-hud.time-panel{width:182px;background:rgba(12,10,22,.46);border:1px solid rgba(255,255,255,.07);border-radius:18px;padding:14px 14px;
  backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 18px 46px -18px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.03) inset;
  opacity:0;transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.quest-hud.time-panel.vis{opacity:1;pointer-events:auto}
.time-panel .qh-title{font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--mut2);letter-spacing:.12em;text-transform:uppercase;margin-bottom:11px}
.time-panel .tp-row{display:flex;flex-direction:column;line-height:1.04}
.time-panel .tp-row b{font:900 23px/1 "JetBrains Mono",monospace}
.time-panel .tp-row span{font-size:10.5px;color:var(--mut);margin-top:3px}
.time-panel .tp-bad b{color:var(--rose)} .time-panel .tp-good b{color:var(--signal);text-shadow:0 0 18px rgba(61,220,151,.45)}
.time-panel .tp-list{list-style:none;margin:10px 0;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.time-panel .tp-list li{display:flex;justify-content:space-between;gap:8px;font:600 10.5px/1.85 "JetBrains Mono",monospace;color:var(--mut)}
.time-panel .tp-list li i{color:var(--mut2);font-style:normal}
.time-panel .tp-arrow{text-align:center;color:var(--cyan);font:800 13px/1 "JetBrains Mono",monospace;margin:9px 0}
/* TIME MATH — the killer stat written out as its own block-section */
.timemath{max-width:1000px;margin:0 auto;padding:6px 22px 8px}
.tm-tag{text-align:center;color:var(--mut2);font-size:12px;letter-spacing:.14em;margin:0 0 12px}
.tm-h{text-align:center;font-size:clamp(22px,3.4vw,34px);line-height:1.26;margin:0 auto 28px;max-width:740px;font-weight:800;letter-spacing:-.01em}
.tm-h b{font-weight:900}
.tm-rose{color:var(--rose)} .tm-cy{color:var(--cyan)}
.tm-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:18px}
.tm-card{background:rgba(31,27,46,.5);border:1px solid var(--line);border-radius:20px;padding:20px 22px}
.tm-new{background:linear-gradient(160deg,rgba(53,224,216,.09),rgba(139,108,255,.06));border-color:rgba(53,224,216,.32);
  text-align:center;display:flex;flex-direction:column;gap:9px;justify-content:center;align-items:center}
.tm-lab{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut2);margin-bottom:14px}
.tm-lab.cy{color:var(--cyan)}
.tm-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.tm-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14.5px;color:var(--mut);
  border-bottom:1px dashed rgba(255,255,255,.07);padding:9px 0}
.tm-list li:last-child{border-bottom:0}
.tm-list i{font-style:normal;font-family:"JetBrains Mono",monospace;color:var(--rose);font-size:13px;white-space:nowrap}
.tm-sum{margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:13.5px;font-weight:700}
.tm-old .tm-sum{text-align:right}
.tm-arrow{display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--volt2)}
.tm-big{font-size:clamp(36px,6.4vw,56px);font-weight:900;letter-spacing:-.02em;line-height:1;text-shadow:0 0 26px rgba(53,224,216,.4)}
.tm-sub{font-size:13.5px;color:var(--mut);max-width:220px}
@media(max-width:760px){
  .tm-grid{grid-template-columns:1fr;gap:12px}
  .tm-arrow{transform:rotate(90deg)}
  .tm-old .tm-sum{text-align:left}
}
/* manifesto: social-network / unite-to-build-the-content-factory line */
.man-unite{margin:16px auto 0;max-width:560px;color:var(--mut);font-size:clamp(14px,1.9vw,17px);line-height:1.5}
.man-unite b{color:var(--cyan)}

.game-poke{display:block;font-size:12.5px;color:var(--volt,#c8ff4d);opacity:.92;margin-bottom:10px;animation:pokepulse 2.2s ease-in-out infinite}
@keyframes pokepulse{0%,100%{opacity:.55}50%{opacity:1}}


/* ===== footBoard «по-хорошему»: окно настоящего трекера ===== */
.game-board::before{display:none}
.fb-chrome{display:flex;align-items:center;gap:10px;padding:9px 14px;background:rgb(30 25 48 /.92);border-bottom:1px solid var(--line)}
.fb-dots{display:flex;gap:5px;flex:none}
.fb-dots i{width:9px;height:9px;border-radius:50%}
.fb-dots i:nth-child(1){background:#ff5f57}.fb-dots i:nth-child(2){background:#febc2e}.fb-dots i:nth-child(3){background:#28c840}
.fb-app{font-size:11px;color:var(--txt);opacity:.85}
.fb-live{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;letter-spacing:.1em;color:#4ade80;border:1px solid rgba(74,222,128,.4);border-radius:999px;padding:2px 8px}
.fb-live i{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:fblive 1.6s ease-in-out infinite}
@keyframes fblive{0%,100%{opacity:1}50%{opacity:.2}}
.fb-sync{margin-left:auto;font-size:10px;color:var(--mut2)}
.game-board .fb-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;text-align:left;margin:0;padding:12px 16px 0}
.game-board .fb-title{font-size:clamp(14px,1.8vw,18px);margin:0}
.game-board .fb-badge{display:none}
.fb-stats{margin-left:auto;font-size:10.5px;color:var(--mut)}
.game-board .fb-cols{gap:10px;padding:10px 14px 4px}
.game-board .fb-col{padding:8px;border-radius:11px;background:rgb(36 30 56 /.45)}
.game-board .fb-col-h{font-size:10px;margin-bottom:7px}
.game-board .fb-list{gap:6px;min-height:36px;max-height:172px;overflow:hidden;position:relative}
.game-board .fb-list::after{content:'';position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(180deg,transparent,rgb(17 14 28 /.95));pointer-events:none}
.game-board .fb-card{padding:7px 9px;margin-bottom:0;border-radius:9px;gap:5px;will-change:transform}
.game-board .fb-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgba(0,0,0,.7)}
.game-board .fb-card .fc-t{font-size:11px}
.game-board .fb-card .fc-pri{font-size:8px;padding:1px 5px}
.game-board .fb-card .fc-tag{font-size:8.5px}
.fb-card.fb-moved{box-shadow:0 0 0 1px rgba(140,108,255,.65),0 8px 22px -8px rgba(140,108,255,.55);z-index:2}
.fc-bar{height:3px;border-radius:99px;background:rgb(255 255 255 /.08);overflow:hidden}
.fc-bar i{display:block;height:100%;border-radius:99px;transition:width .6s ease}
.fb-card.working .fc-bar i{background-size:200% 100%;animation:fcwork 2.2s linear infinite}
@keyframes fcwork{from{filter:brightness(1)}50%{filter:brightness(1.55)}to{filter:brightness(1)}}
.fb-card.working .fc-av{box-shadow:0 0 0 0 rgba(140,108,255,.7);animation:fcav 1.8s ease-out infinite}
@keyframes fcav{from{box-shadow:0 0 0 0 rgba(140,108,255,.55)}to{box-shadow:0 0 0 7px rgba(140,108,255,0)}}
.fb-feed{display:flex;flex-direction:column;gap:3px;padding:7px 16px;border-top:1px dashed var(--line);min-height:22px}
.fb-feed .ff{font-size:10.5px;color:var(--mut);animation:ffin .4s ease}
.fb-feed .ff b{color:var(--txt);font-weight:600}
@keyframes ffin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.fb-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 16px 12px;border-top:1px solid var(--line);background:rgb(26 21 42 /.65)}
.fb-cta span{font-size:11.5px;color:var(--mut)}
.fb-cta .btn{padding:8px 14px;font-size:12.5px}
@media(max-width:760px){.game-board{margin:-90px 14px 0}.fb-sync{display:none}.fb-stats{margin-left:0;width:100%}}

/* ===== ARCADE PICK (выбор игры после супер-способностей) ===== */
.arcade-pick{max-width:var(--maxw);margin:0 auto;padding:64px 22px 30px}
.ap-head{text-align:center;margin-bottom:30px}
.ap-sub{max-width:620px;margin:12px auto 0;color:var(--mut);font-size:15px;line-height:1.6}
.ap-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ap-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:22px 20px;border-radius:18px;
  background:linear-gradient(165deg,var(--panel2),var(--panel));border:1px solid var(--line2);
  text-decoration:none;color:var(--txt);overflow:hidden;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.ap-card::before{content:"";position:absolute;inset:0;opacity:.14;background:radial-gradient(120% 90% at 80% -10%,var(--ac,#8b6cff),transparent 60%);pointer-events:none}
.ap-race{--ac:#35e0d8}.ap-skate{--ac:#ff6b8b}.ap-crash{--ac:#a992ff}.ap-drift{--ac:#ffb454}.ap-snake{--ac:#7be08a}.ap-locked{--ac:#6a6a8a}
.ap-tanks{--ac:#ffd36b}.ap-hype{--ac:#6bd0ff}.ap-match3{--ac:#ff8ad6}.ap-dress{--ac:#c89bff}.ap-cafe{--ac:#ffae73}
/* "🟢 онлайн" бейдж на играх с живым мультиплеером (race/tanks/snake) */
.ap-online-badge{position:absolute;top:12px;right:12px;z-index:2;display:inline-flex;align-items:center;gap:5px;
  font:800 9.5px/1 "JetBrains Mono",monospace;letter-spacing:.05em;color:#06210f;
  background:linear-gradient(135deg,#7be08a,#35e0d8);padding:5px 8px;border-radius:8px;box-shadow:0 4px 14px -4px rgba(123,224,138,.7)}
.ap-online-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#06210f;box-shadow:0 0 0 2px rgba(6,33,15,.35);animation:apPulse 1.6s ease-in-out infinite}
@keyframes apPulse{0%,100%{opacity:1}50%{opacity:.35}}
.ap-card.ap-is-online{border-color:rgba(123,224,138,.4)}
.ap-card:hover{transform:translateY(-5px);border-color:var(--ac);box-shadow:0 18px 50px -22px var(--ac)}
.ap-emoji{font-size:42px;line-height:1;filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.ap-body{display:flex;flex-direction:column;gap:7px;flex:1}
.ap-body b{font-size:18px;font-weight:800}
.ap-body span{font-size:13px;line-height:1.55;color:var(--mut)}
.ap-go{align-self:flex-start;font-size:12.5px;font-weight:700;color:#0e0a1c;background:linear-gradient(135deg,var(--ac),#fff8);
  padding:9px 15px;border-radius:11px;transition:transform .15s ease}
.ap-card:hover .ap-go{transform:scale(1.04)}
.ap-all{display:block;text-align:center;margin-top:22px;color:var(--mut);font-size:13px;text-decoration:none;transition:color .15s}
.ap-all:hover{color:var(--cyan)}
@media(max-width:820px){.ap-grid{grid-template-columns:1fr;gap:13px}.arcade-pick{padding:48px 16px 24px}
  .ap-card{flex-direction:row;align-items:center;gap:16px;padding:18px}
  .ap-emoji{font-size:38px;flex-shrink:0}.ap-go{align-self:center;white-space:nowrap}
  .ap-body b{font-size:16px}.ap-body span{font-size:12.5px}}
@media(max-width:540px){.ap-card{flex-direction:column;align-items:stretch}.ap-go{align-self:flex-start}}

/* ===== POSTIM WORLD hero + мини-аркада (мультивселенная) ===== */
.world-hero{position:relative;display:flex;align-items:center;gap:20px;margin:0 0 26px;padding:26px;border-radius:22px;text-decoration:none;color:var(--txt);
  background:linear-gradient(120deg,rgba(124,92,255,.18),rgba(53,224,216,.1) 60%,rgba(255,95,162,.12));
  border:1px solid rgba(124,92,255,.45);overflow:hidden;transition:transform .18s,box-shadow .18s,border-color .18s;box-shadow:0 24px 70px -28px rgba(124,92,255,.7)}
.world-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(80% 140% at 12% 0%,rgba(124,92,255,.35),transparent 55%);opacity:.7;pointer-events:none}
.world-hero:hover{transform:translateY(-4px);border-color:var(--volt);box-shadow:0 30px 80px -26px rgba(124,92,255,.85)}
.wh-badge{position:absolute;top:14px;right:16px;font:800 10px/1 "JetBrains Mono",monospace;letter-spacing:.08em;color:#0e0a1c;background:linear-gradient(135deg,#ffd36b,#ff9a3c);padding:5px 9px;border-radius:8px}
.wh-emoji{font-size:64px;line-height:1;flex:0 0 auto;filter:drop-shadow(0 8px 20px rgba(124,92,255,.6))}
.wh-body{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.wh-body b{font:900 clamp(20px,3vw,28px)/1.1 Inter,sans-serif;background:linear-gradient(100deg,#fff,#cdbcff);-webkit-background-clip:text;background-clip:text;color:transparent}
.wh-body span{color:var(--mut);font-size:14px;line-height:1.55;max-width:640px}
.wh-go{flex:0 0 auto;align-self:center;font:800 14px/1 "JetBrains Mono",monospace;color:#0e0a1c;background:linear-gradient(135deg,var(--volt),var(--cyan));padding:14px 20px;border-radius:13px;white-space:nowrap;transition:transform .15s}
.world-hero:hover .wh-go{transform:scale(1.05)}
.ap-mini-lab{text-align:center;color:var(--mut2);font-size:12px;margin:0 0 16px;letter-spacing:.03em}
.ap-grid.mini{grid-template-columns:repeat(3,1fr)}
.ap-grid.mini .ap-card{gap:10px;padding:16px}
.ap-grid.mini .ap-emoji{font-size:34px}
.ap-grid.mini .ap-body b{font-size:15px}
.ap-grid.mini .ap-body span{font-size:12px}
.ap-locked{opacity:.6}
.ap-locked .ap-go{background:#2a2440;color:var(--mut)}
@media(max-width:820px){
  .world-hero{flex-direction:column;text-align:center;gap:12px;padding:22px 18px}
  .wh-emoji{font-size:54px}.wh-go{align-self:stretch;text-align:center}
  .ap-grid.mini{grid-template-columns:1fr 1fr;gap:10px}
  .ap-grid.mini .ap-card{flex-direction:column;align-items:stretch;padding:13px}
  .ap-grid.mini .ap-emoji{font-size:28px}.ap-grid.mini .ap-go{align-self:flex-start}
}

/* ===== FOOTER (новый, богатый) ===== */
.foot-x{position:relative;max-width:var(--maxw);margin:60px auto 0;padding:46px 26px 34px;
  border-top:1px solid var(--line);overflow:hidden}
.fx-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 120% at 50% 0,rgba(139,108,255,.12),transparent 55%)}
.fx-top{position:relative;display:flex;justify-content:space-between;gap:38px;flex-wrap:wrap;margin-bottom:30px}
.fx-brand{display:flex;align-items:center;gap:13px;max-width:280px}
.fx-name{font-size:21px;font-weight:800;letter-spacing:-.02em}
.fx-name span{color:var(--volt2)}
.fx-tag{font-size:11.5px;color:var(--mut2);margin-top:3px}
.fx-cols{display:flex;gap:46px;flex-wrap:wrap}
.fx-col{display:flex;flex-direction:column;gap:9px}
.fx-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut2);margin-bottom:3px}
.fx-col a{color:var(--mut);text-decoration:none;font-size:13.5px;transition:color .15s ease}
.fx-col a:hover{color:var(--txt)}
.fx-cta{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
  margin:6px 0 26px;padding:16px 22px;border-radius:15px;text-decoration:none;
  background:var(--grad);color:#0e0a1c;font-weight:800;font-size:15.5px;
  box-shadow:0 14px 44px -16px rgba(139,108,255,.8);transition:transform .16s ease,box-shadow .16s ease}
.fx-cta:hover{transform:translateY(-2px);box-shadow:0 20px 56px -16px rgba(139,108,255,.95)}
.fx-cta-arrow{font-size:20px;transition:transform .16s ease}
.fx-cta:hover .fx-cta-arrow{transform:translateX(5px)}
.fx-bottom{position:relative;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:20px;border-top:1px solid var(--line);font-size:11.5px;color:var(--mut2)}
.fx-legal a{color:var(--mut2);text-decoration:none;border-bottom:1px dotted var(--line2)}
.fx-legal a:hover{color:var(--mut)}
@media(max-width:760px){.foot-x{padding:36px 16px 28px}.fx-top{gap:26px}.fx-cols{gap:30px}
  .fx-cta{font-size:14px;padding:15px 18px}.fx-bottom{flex-direction:column;gap:8px;text-align:center;justify-content:center}}

/* ===== AI-TEAM SIMPLIFIED — #ai-team-simple ===== */
.ait-wrap{max-width:var(--maxw);margin:64px auto;padding:0 22px}
.ait-head{text-align:center;margin-bottom:38px}
.ait-sub{color:var(--mut);font-size:clamp(14px,1.8vw,17px);max-width:540px;margin:0 auto}

/* office grid: isometric-looking card row */
.ait-office{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:28px
}

/* worker card */
.ait-card{
  position:relative;
  background:rgb(31 27 46 /.75);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px 16px 16px;
  text-align:center;
  overflow:hidden;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
  cursor:default
}
.ait-card::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:16px;
  opacity:0;
  transition:opacity .22s ease;
  background:radial-gradient(80% 80% at 50% 0,var(--ait-glow,rgba(34,197,94,.18)),transparent 70%)
}
.ait-card:hover{transform:translateY(-4px);border-color:var(--ait-col,#22C55E);box-shadow:0 12px 36px -12px var(--ait-glow,rgba(34,197,94,.35))}
.ait-card:hover::before{opacity:1}

/* figure: SVG person + desk, pure CSS */
.ait-figure{
  position:relative;
  width:72px;
  height:80px;
  margin:0 auto 12px
}

/* pulsing activity dot */
.ait-dot{
  position:absolute;
  top:4px;right:4px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--ait-col,#22C55E);
  box-shadow:0 0 0 0 var(--ait-col,#22C55E);
  animation:aitPulse 2.2s ease-in-out infinite
}
@keyframes aitPulse{
  0%,100%{box-shadow:0 0 0 0 var(--ait-col,rgba(34,197,94,.7))}
  50%{box-shadow:0 0 0 5px rgba(34,197,94,0)}
}

.ait-role{
  font-size:13px;
  font-weight:800;
  color:var(--txt);
  margin-bottom:4px
}
.ait-action{
  font-size:11.5px;
  color:var(--mut);
  line-height:1.4;
  font-family:"JetBrains Mono","Noto Sans Thai",monospace
}
/* animated "typing" action indicator */
.ait-action::after{
  content:'_';
  color:var(--ait-col,#22C55E);
  animation:blink 1s steps(2) infinite;
  margin-left:1px
}

/* activity ticker below the office grid */
.ait-ticker{
  overflow:hidden;
  margin:0 0 32px;
  mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.ait-ticker-row{
  display:flex;
  gap:10px;
  width:max-content;
  animation:scroll 28s linear infinite;
  font-size:11.5px;
  color:var(--mut)
}
.ait-ticker:hover .ait-ticker-row{animation-play-state:paused}
.ait-tick{
  display:flex;align-items:center;gap:7px;
  border:1px solid var(--line);border-radius:8px;
  padding:6px 12px;background:rgb(31 27 46 /.5);white-space:nowrap
}
.ait-tick-dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--ait-col,#22C55E)}

.ait-cta{
  display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap;
  padding-top:8px
}
.ait-note{font-size:12px;color:var(--mut2)}

/* SVG figures — person silhouettes per role colour */
.ait-person{transform-origin:bottom center}
.ait-card:hover .ait-person{animation:aitBob .55s ease-in-out infinite}
@keyframes aitBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
/* desk shadow */
.ait-shadow{opacity:.28}

/* staggered entry animation — no IntersectionObserver dependency */
.ait-entryin{
  opacity:0;
  transform:translateY(18px);
  animation:aitEntry .55s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(var(--ait-i,0) * 80ms + 120ms)
}
@keyframes aitEntry{
  to{opacity:1;transform:translateY(0)}
}
@media(prefers-reduced-motion:reduce){.ait-entryin{animation:none;opacity:1;transform:none}}

/* responsive */
@media(max-width:900px){.ait-office{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){
  .ait-office{grid-template-columns:repeat(2,1fr);gap:10px}
  .ait-card{padding:14px 12px 12px}
  .ait-figure{width:60px;height:68px}
}

/* ===== MIR MODAL (world.postim.life в iframe) ===== */
#mirModal{
  position:fixed;inset:0;z-index:95;
  display:none;flex-direction:column;
  background:rgba(8,6,18,.78);
  backdrop-filter:blur(4px);
  animation:mirfadein .22s ease;
}
#mirModal.mir-open{display:flex}
@keyframes mirfadein{from{opacity:0}to{opacity:1}}

.mir-bar{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  background:#110e1e;
  border-bottom:1px solid #2c2646;
  flex-shrink:0;
}
.mir-bar-title{
  font-family:"JetBrains Mono",monospace;font-size:.82rem;
  color:#a5a0bd;letter-spacing:.04em;
  flex:1;
}
.mir-bar-title span{color:#8b6cff}
.mir-close{
  width:44px;height:44px;border-radius:50%;
  border:1px solid #2c2646;background:transparent;
  color:#a5a0bd;cursor:pointer;font-size:18px;
  display:flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s;
  flex-shrink:0;
}
.mir-close:hover,.mir-close:focus-visible{color:#fff;border-color:#8b6cff;outline:none}

.mir-frame-wrap{
  flex:1;position:relative;overflow:hidden;
}
#mirFrame{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
  background:#0c0a18;
}
.mir-fallback{
  position:absolute;bottom:12px;right:14px;
  font-family:"JetBrains Mono",monospace;font-size:.75rem;
  color:#7c7696;
  background:rgba(10,8,20,.8);
  padding:5px 10px;border-radius:8px;
  border:1px solid #2c2646;
  text-decoration:none;
  transition:color .15s;
  z-index:2;
}
.mir-fallback:hover{color:#a992ff}

@media(max-width:600px){
  .mir-bar{padding:8px 10px}
  .mir-bar-title{font-size:.74rem}
  .mir-frame-wrap{height:calc(100dvh - 52px)}
}
/* ===== /MIR MODAL ===== */