/* ===== Вход: «Liquid Signal» — текст и кнопка слева, живая стеклянная N справа ===== */
.lg{position:relative;min-height:100vh;min-height:100dvh;overflow:hidden;isolation:isolate;color:#F5F3FF;
  background:
    radial-gradient(1000px 760px at 74% 46%,rgba(91,43,255,.20),transparent 62%),
    radial-gradient(700px 520px at 92% 8%,rgba(255,79,216,.045),transparent 60%),
    radial-gradient(900px 700px at -5% 105%,rgba(201,184,255,.04),transparent 60%),
    linear-gradient(170deg,#08061A 0%,#060512 55%,#050410 100%);
  display:grid;grid-template-rows:auto 1fr auto;font-family:Onest,system-ui,sans-serif}
/* зерно */
.lg::after{content:"";position:absolute;inset:-50%;z-index:-1;pointer-events:none;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:lgGrain 1.2s steps(4) infinite}
@keyframes lgGrain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}

.lg-mono{font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(201,184,255,.62)}
.lg-top{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:28px clamp(20px,6vw,88px)}
.lg-brand{display:flex;align-items:center;gap:12px;color:#F5F3FF}
.lg-brand img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 10px rgba(201,184,255,.45))}
.lg-brand b{font:700 15px 'Inter Tight',Onest,sans-serif;letter-spacing:.22em}
.lg-lang{display:flex;padding:3px;border-radius:999px;background:rgba(245,243,255,.05);border:1px solid rgba(201,184,255,.14)}
.lg-lang button{border:0;background:none;padding:6px 12px;border-radius:999px;cursor:pointer;color:rgba(201,184,255,.6);font:500 12px 'JetBrains Mono',monospace;letter-spacing:.12em;transition:background .25s,color .25s}
.lg-lang button.on{background:rgba(201,184,255,.14);color:#F5F3FF}

/* левая колонка */
.lg-main{position:relative;z-index:3;display:flex;align-items:center;padding:0 clamp(20px,6vw,88px) 8vh;pointer-events:none}
.lg-copy>*{pointer-events:auto}
.lg-copy{max-width:600px;display:flex;flex-direction:column;align-items:flex-start}
.lg-kicker{display:inline-flex;align-items:center;gap:10px;margin-bottom:28px}
.lg-kicker i{width:7px;height:7px;border-radius:50%;background:#C9B8FF;box-shadow:0 0 0 0 rgba(201,184,255,.6);animation:lgPing 2.4s infinite}
@keyframes lgPing{0%{box-shadow:0 0 0 0 rgba(201,184,255,.55)}70%,100%{box-shadow:0 0 0 10px rgba(201,184,255,0)}}
.lg-h{margin:0;font:800 clamp(44px,5.8vw,86px)/1.0 'Inter Tight',Onest,sans-serif;letter-spacing:-.035em;color:#F5F3FF}
.lg-line{white-space:nowrap;display:inline-block;padding-bottom:.06em}
.lg-dot{color:#7C5CFF}
.lg-rot{display:inline-block;position:relative;padding:0 .12em .16em 0;margin:0 -.08em -.16em 0;
  background:linear-gradient(95deg,#E4DAFF 0%,#A68BFF 45%,#7C5CFF 75%,#FF7BE5 120%);-webkit-background-clip:text;background-clip:text;color:transparent;
  transition:opacity .45s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1),filter .45s}
.lg-rot.out{opacity:0;transform:translateY(-.28em);filter:blur(10px)}
.lg-rot.in{opacity:0;transform:translateY(.32em);filter:blur(10px);transition:none}
.lg-sub{margin:26px 0 40px;max-width:470px;font-size:clamp(16px,1.25vw,19px);line-height:1.55;color:rgba(222,214,255,.72)}

/* главная кнопка — тёмное стекло */
.lg-btn{--mx:50%;--my:50%;position:relative;display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 22px 0 8px;border-radius:999px;cursor:pointer;
  color:#F5F3FF;font:500 16px Onest,sans-serif;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,rgba(124,92,255,.16),rgba(91,43,255,.08));border:1px solid rgba(201,184,255,.18);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  box-shadow:0 10px 40px -12px rgba(91,43,255,.55);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s,background .35s}
.lg-btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;transition:opacity .3s;
  background:radial-gradient(140px 80px at var(--mx) var(--my),rgba(201,184,255,.22),transparent 70%)}
.lg-btn:hover{transform:translateY(-1px);border-color:rgba(201,184,255,.32);background:linear-gradient(180deg,rgba(124,92,255,.24),rgba(91,43,255,.12));box-shadow:0 16px 50px -12px rgba(91,43,255,.8)}
.lg-btn:hover::after{opacity:1}
.lg-btn:active{transform:scale(.97);transition-duration:.12s}
.lg-btn .ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(91,43,255,.55);color:#fff}
.lg-btn .ic svg{width:19px;height:19px}
.lg-btn .ar{opacity:.55;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.lg-btn:hover .ar{transform:translateX(4px);opacity:1}
.lg-btn .sh{position:absolute;top:0;bottom:0;width:35%;left:-60%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(201,184,255,.18),transparent);transform:skewX(-18deg);animation:lgShine 6s 1.6s infinite}
@keyframes lgShine{0%{left:-60%}22%,100%{left:130%}}
.lg-btn .rp{position:absolute;border-radius:50%;pointer-events:none;z-index:-1;transform:translate(-50%,-50%) scale(0);width:300px;height:300px;
  background:radial-gradient(circle,rgba(201,184,255,.4),rgba(201,184,255,.08) 40%,transparent 70%);animation:lgRipple .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes lgRipple{to{transform:translate(-50%,-50%) scale(1.2);opacity:0}}
.lg-note{display:flex;align-items:center;gap:8px;margin-top:18px;font-size:13.5px;color:rgba(201,184,255,.55)}
.lg-note svg{width:14px;height:14px;opacity:.8}
.lg-note a{color:rgba(222,214,255,.85);text-decoration:none;border-bottom:1px solid rgba(201,184,255,.25)}

/* ожидание подтверждения */
.lg-wait{display:flex;align-items:center;gap:16px;padding:16px 20px 16px 16px;border-radius:22px;max-width:470px;
  background:linear-gradient(180deg,rgba(245,243,255,.07),rgba(245,243,255,.03));border:1px solid rgba(201,184,255,.18);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 20px 50px -20px rgba(0,0,0,.6);animation:lgUp .5s cubic-bezier(.2,.8,.2,1) both}
.lg-orb{flex:0 0 auto;width:46px;height:46px;border-radius:50%;position:relative;background:radial-gradient(circle at 35% 30%,#B9A3FF,#5B2BFF 55%,#2A0F8F);box-shadow:0 0 24px rgba(91,43,255,.8)}
.lg-orb::before,.lg-orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(201,184,255,.5);animation:lgOrb 1.8s infinite}
.lg-orb::after{animation-delay:.9s}
@keyframes lgOrb{from{transform:scale(.8);opacity:1}to{transform:scale(1.5);opacity:0}}
.lg-wait b{display:block;font-size:16px;margin-bottom:3px}
.lg-wait span{font-size:13.5px;line-height:1.45;color:rgba(222,214,255,.65)}
.lg-wait .row{display:flex;gap:14px;margin-top:8px;font-size:13px}
.lg-wait .row a,.lg-wait .row button{background:none;border:0;padding:0;cursor:pointer;color:#C9B8FF;font:500 13px Onest,sans-serif;text-decoration:none}
.lg-wait .row button{color:rgba(201,184,255,.55)}

/* правая сцена: жидкое стекло */
.lg-stage{position:absolute;z-index:1;top:50%;right:clamp(-60px,-2vw,0px);width:min(58vw,860px);aspect-ratio:1;transform:translateY(-50%)}
.lg-glow{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle,rgba(124,92,255,.38),rgba(91,43,255,.12) 50%,transparent 72%);filter:blur(50px);pointer-events:none;animation:lgBreath 7s ease-in-out infinite}
@keyframes lgBreath{0%,100%{opacity:.7;scale:.94}50%{opacity:1;scale:1.06}}
.lg-blob{position:absolute;inset:0;width:100%;height:100%;cursor:grab;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side,#000 62%,transparent 100%);touch-action:none;-webkit-tap-highlight-color:transparent}
.lg-blob:active{cursor:grabbing}

/* появление */
.lg-a{animation:lgUp .9s cubic-bezier(.2,.8,.2,1) both}
.lg-a:nth-child(1){animation-delay:.05s}.lg-a:nth-child(2){animation-delay:.15s}.lg-a:nth-child(3){animation-delay:.27s}.lg-a:nth-child(4){animation-delay:.39s}
@keyframes lgUp{from{opacity:0;transform:translateY(18px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.lg-stage-in{animation:lgIn 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes lgIn{from{opacity:0;filter:blur(18px);scale:.9}to{opacity:1;filter:none;scale:1}}
.lg-top{animation:lgFade 1.2s .2s both}
@keyframes lgFade{from{opacity:0}to{opacity:1}}

@media (max-width:900px){
  .lg-stage{top:0;right:50%;width:min(96vw,520px);transform:translate(50%,2%);opacity:.95}
  .lg-main{align-items:flex-start;padding-bottom:32px}
  .lg-copy{padding-top:calc(min(96vw,520px) - 70px)}
  .lg-h{font-size:clamp(40px,11vw,60px)}
  .lg-sub{margin:18px 0 28px}
}
@media (prefers-reduced-motion:reduce){
  .lg *:not(canvas),.lg::after{animation:none!important;transition:none!important}
}

/* доверие и возможности */
.lg-trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:26px}
.lg-trust span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:rgba(222,214,255,.6)}
.lg-trust span::before{content:"";width:5px;height:5px;border-radius:50%;background:#9BF0C5;box-shadow:0 0 8px rgba(155,240,197,.7)}
.lg-feats{position:relative;z-index:3;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;padding:0 clamp(20px,6vw,88px) 34px}
.lg-feat{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;min-width:0;
  background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);animation:lgUp .8s cubic-bezier(.2,.8,.2,1) both;transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .3s}
.lg-feat:hover{transform:translateY(-3px);border-color:rgba(201,184,255,.22)}
.lg-feat img{width:38px;height:38px;flex:0 0 auto;transition:scale .4s cubic-bezier(.2,.8,.2,1),filter .4s}
.lg-feat:hover img{scale:1.12;filter:drop-shadow(0 0 12px rgba(255,255,255,.3))}
.lg-feat span{display:flex;flex-direction:column;gap:2px;min-width:0}
.lg-feat b{font-size:14px;color:#F5F3FF;font-weight:600}
.lg-feat i{font-style:normal;font-size:11.5px;line-height:1.35;color:rgba(222,214,255,.5);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
@media (max-width:1200px){.lg-feats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.lg-feats{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:24px}.lg-feat{flex:0 0 240px;scroll-snap-align:start}}
.lg-grow{flex:1 1 auto}
.lg-link{border:0;background:none;cursor:pointer;color:rgba(222,214,255,.75);font:500 14px Onest,sans-serif;padding:8px 12px;border-radius:999px;transition:background .2s,color .2s}
.lg-link:hover{background:rgba(255,255,255,.06);color:#fff}
@media (max-width:760px){
  .lg-top{padding:16px 16px 0;gap:8px}
  .lg-brand b{font-size:12px;letter-spacing:.16em}
  .lg-brand img{width:28px;height:28px}
  .lg-link{font-size:12.5px;padding:6px 10px;background:rgba(255,255,255,.05);white-space:nowrap}
  .lg-stage{width:min(78vw,300px)!important;transform:translate(50%,6%)!important}
  .lg-copy{padding-top:min(66vw,250px)!important}
  .lg-main{padding:0 18px 20px!important}
  .lg-kicker{margin-bottom:14px;font-size:10.5px}
  .lg-h{font-size:clamp(36px,11vw,48px)!important}
  .lg-sub{margin:14px 0 22px!important;font-size:15px}
  .lg-btn{width:100%;justify-content:center}
  .lg-trust{margin-top:18px;gap:6px 12px}
  .lg-trust span{font-size:12px}
  .lg-feats{padding:0 16px calc(20px + env(safe-area-inset-bottom))}
}

/* ===== v81 · вход через Telegram: ожидание с QR, копированием ссылки и запасными кнопками ===== */
.lg-wait.lg-wait2{display:block;max-width:520px;padding:18px 20px 16px}
.lg-wait-h{display:flex;align-items:center;gap:16px}
.lg-wait-h b{display:block;font-size:16px;margin-bottom:3px}
.lg-orb.off{background:radial-gradient(circle at 35% 30%,#8f86b3,#3b3360 60%,#221c3d);box-shadow:none}
.lg-orb.off::before,.lg-orb.off::after{display:none}
.lg-wait-warn{margin:14px 0 0;padding:10px 12px;border-radius:12px;font-size:13px;line-height:1.45;color:#ffd9e4;background:rgba(255,92,138,.1);border:1px solid rgba(255,92,138,.28)}
.lg-wait-body{display:flex;align-items:flex-start;gap:18px;margin-top:16px}
.lg-qr{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;width:148px}
.lg-qr[hidden]{display:none}
.lg-qr svg{display:block;width:148px;height:148px;border-radius:14px;box-shadow:0 0 0 1px rgba(201,184,255,.25),0 14px 34px -12px rgba(91,43,255,.6)}
.lg-qr small{font-size:11.5px;line-height:1.35;text-align:center;color:rgba(201,184,255,.6)}
.lg-wait-acts{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.lg-wbtn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 14px;border-radius:13px;cursor:pointer;
  font:500 14px Onest,sans-serif;color:#E9E3FF;text-decoration:none;text-align:center;background:rgba(245,243,255,.05);border:1px solid rgba(201,184,255,.18);
  transition:background .2s,border-color .2s,transform .15s;-webkit-tap-highlight-color:transparent}
.lg-wbtn:hover{background:rgba(245,243,255,.09);border-color:rgba(201,184,255,.32)}
.lg-wbtn:active{transform:scale(.98)}
.lg-wbtn:focus-visible,.lg-wlink:focus-visible{outline:2px solid #B9A3FF;outline-offset:2px}
.lg-wbtn .ic{display:inline-flex;width:18px;height:18px}
.lg-wbtn .ic svg{width:18px;height:18px}
.lg-wbtn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-wbtn.pri{color:#fff;border-color:rgba(185,163,255,.45);background:linear-gradient(180deg,rgba(124,92,255,.85),rgba(91,43,255,.85));box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 10px 26px -10px rgba(91,43,255,.9)}
.lg-wbtn.pri:hover{background:linear-gradient(180deg,rgba(138,108,255,.95),rgba(101,56,255,.95))}
.lg-wait2.blocked .lg-wbtn.pri{animation:lgPulse 1.6s ease-in-out infinite}
@keyframes lgPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 0 rgba(124,92,255,.55)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 7px rgba(124,92,255,0)}}
.lg-wbtn.ok{color:#c8ffe1;border-color:rgba(80,220,150,.4);background:rgba(80,220,150,.1)}
.lg-wlink{align-self:center;background:none;border:0;padding:6px 8px;cursor:pointer;color:rgba(201,184,255,.55);font:500 13px Onest,sans-serif}
.lg-wlink:hover{color:#C9B8FF}
.lg-wait-hint{margin:14px 0 0;font-size:12.5px;line-height:1.45;color:rgba(201,184,255,.5)}
.lg-err{color:#ffb3c8}
@media (max-width:560px){
  .lg-wait.lg-wait2{max-width:none;padding:16px}
  .lg-wait-body{flex-direction:column;align-items:stretch}
  .lg-qr{align-self:center}
  .lg-wbtn{min-height:46px}
}
/* узкие телефоны (360px): блок с текстом и карточкой входа не шире экрана */
.lg{grid-template-columns:minmax(0,1fr)}
.lg-main{min-width:0;max-width:100%;box-sizing:border-box}
.lg-copy{min-width:0;max-width:min(600px,100%)}
.lg-act{max-width:100%}
@media (max-width:380px){.lg-top{gap:6px}.lg-link{font-size:12px;padding:6px 8px}.lg-brand b{letter-spacing:.1em}}
.lg-wait2 .lg-wbtn span{color:inherit;font-size:inherit;line-height:inherit}

/* ===== v83 · пятна и зерно не выходят за край экрана ===== */
/* слой зерна был вдвое больше страницы (inset:-50%): теперь он ровно по экрану, а «дрожит» сдвигом фона, а не всего слоя */
.lg::after{inset:0;animation-name:lgGrainBg}
@keyframes lgGrainBg{0%{background-position:0 0}25%{background-position:-11px 7px}50%{background-position:7px -11px}75%{background-position:-7px -4px}100%{background-position:0 0}}
/* ПК: сцена с пятнами больше не вылезает за правый край */
@media (min-width:901px){.lg .lg-stage{right:0}}