/* Vexon - единый стиль сайта. Те же токены, что в приложении. */
:root{
  --void:#050506; --deep:#0A0A0C; --panel:#111114; --panel2:#17171B;
  --line:#232329; --line-soft:#1A1A1F;
  --bone:#F2F1EE; --text:#E6E5E1; --mute:#8A8A93; --dim:#55555E;
  --signal:#9FE8C0; --glow:#B9D9FF; --warn:#E3C378;
  --pad:clamp(18px,4vw,56px); --r:14px; --rl:22px;
  --max:1420px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);color:var(--text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.display{
  font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 112,"wght" 700;
  letter-spacing:-.03em;line-height:1;
}
.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}

/* ── шапка ── */
.hdr{
  position:sticky;top:0;z-index:60;
  background:rgba(5,5,6,.82);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line-soft);
}
.hdr-in{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px}
.brand{
  display:flex;align-items:center;gap:9px;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 118,"wght" 700;
  font-size:15px;letter-spacing:.22em;
}
.brand i{width:7px;height:7px;border-radius:50%;background:var(--signal);display:block}
.nav{display:flex;align-items:center;gap:28px}
.nav a{font-size:14px;color:var(--mute);transition:color .2s}
.nav a:hover{color:var(--bone)}
@media(max-width:900px){.nav a:not(.btn){display:none}
  .nav{gap:8px}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-size:14px;font-weight:600;padding:12px 22px;border-radius:99px;
  border:1px solid transparent;transition:transform .18s cubic-bezier(.2,.7,.3,1),opacity .2s,background .2s;
  white-space:nowrap;cursor:pointer;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--bone);color:var(--void)}
.btn-primary:hover{background:#fff}

/* Кнопки шапки. Селектор с .nav обязателен: правило .nav a задаёт
   серый цвет и по специфичности перебивает одиночный класс. */

/* Начать: белая, при наведении переворачивается в чёрную */
.nav a.btn-accent{
  background:#F2F1EE;color:#08080A;font-weight:700;
  border-color:#F2F1EE;
}
.nav a.btn-accent:hover{
  background:#08080A;color:#F2F1EE;
  border-color:#F2F1EE;
}

/* Кабинет: чёрная, при наведении переворачивается в белую */
.nav a.btn-ghost{
  background:#08080A;color:#F2F1EE;
  border-color:#2E2E38;font-weight:600;
}
.nav a.btn-ghost:hover{
  background:#F2F1EE;color:#08080A;
  border-color:#F2F1EE;
}
.btn-ghost{border-color:var(--line);color:var(--text);background:var(--panel)}
.btn-ghost:hover{border-color:var(--dim)}
.btn-lg{padding:16px 30px;font-size:15px}
.btn-sm{padding:9px 17px;font-size:13.5px;font-weight:600}
/* Кнопки в шапке стоят вплотную друг к другу, отделяясь от ссылок */
.nav .btn-sm{margin-left:-16px}
.nav .btn-sm + .btn-sm{margin-left:0}

/* ── герой ── */
.hero{padding:clamp(48px,8vw,96px) 0 clamp(40px,6vw,72px);position:relative;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero h1{font-size:clamp(40px,6.4vw,86px);margin:20px 0 0}
.hero h1 .thin{display:block;font-variation-settings:"wdth" 112,"wght" 500;color:var(--mute)}
.hero .lead{margin-top:24px;max-width:46ch;color:var(--mute);font-size:16.5px}
.actions{display:flex;flex-wrap:wrap;gap:11px;margin-top:32px}
.note{margin-top:16px;font-size:13px;color:var(--dim)}

/* Подсказка для тех, у кого не открывается Telegram: без неё
   человек упирается в замкнутый круг и уходит с сайта. */
.hint-tg{
  display:flex;align-items:center;gap:14px;margin-top:26px;
  background:linear-gradient(135deg,rgba(56,176,227,.10),rgba(56,176,227,.02));
  border:1px solid rgba(56,176,227,.24);border-radius:16px;
  padding:14px 18px;max-width:520px;
  transition:border-color .25s ease,background .25s ease,transform .18s cubic-bezier(.2,.7,.3,1);
}
.hint-tg:hover{
  border-color:rgba(56,176,227,.45);transform:translateY(-2px);
  background:linear-gradient(135deg,rgba(56,176,227,.16),rgba(56,176,227,.04));
}
.hint-tg:active{transform:translateY(0) scale(.99)}
.hint-tg .ic{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:rgba(56,176,227,.14);color:#5FC6EE;
}
.hint-tg .ic svg{width:19px;height:19px}
.hint-tg b{display:block;color:var(--bone);font-size:14.5px;font-weight:600}
.hint-tg span{display:block;color:var(--mute);font-size:13px;margin-top:3px}
.hint-tg .go{margin-left:auto;color:#5FC6EE;font-size:19px;flex:none}
@media(max-width:520px){.hint-tg{padding:13px 15px;gap:11px}.hint-tg .ic{width:34px;height:34px}}

.globe-box{
  display:grid;place-items:center;position:relative;
  min-height:clamp(320px,42vw,560px);
}
.globe{width:100%;max-width:560px;height:auto;overflow:visible}
.globe .grid-line{stroke:#2A2A33;fill:none;stroke-width:.9}
.globe .grid-line.lit{stroke:#3D4A52}
.meridians{transform-origin:center;animation:spin 44s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.globe .node{fill:var(--signal)}
.globe .node.pulse{animation:beat 3.2s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.35;r:2.4}50%{opacity:1;r:4}}
.globe .arc{stroke:var(--signal);fill:none;stroke-width:1.1;opacity:.5;
  stroke-dasharray:5 7;animation:flow 3s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}

/* ── полоса метрик ── */
.strip{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.strip-grid{display:grid;grid-template-columns:repeat(6,1fr)}
@media(max-width:1180px){.strip-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.strip-grid{grid-template-columns:repeat(2,1fr)}}
.metric{padding:30px 0 30px 22px;border-left:1px solid var(--line-soft)}
.metric:first-child{border-left:0;padding-left:0}
@media(max-width:1180px){
  .metric:nth-child(4){border-left:0;padding-left:0}
  .metric:nth-child(n+4){border-top:1px solid var(--line-soft)}
}
@media(max-width:680px){
  .metric{padding-left:18px}
  .metric:nth-child(odd){border-left:0;padding-left:0}
  .metric:nth-child(n+3){border-top:1px solid var(--line-soft)}
}
.metric b{
  display:block;font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 110,"wght" 600;
  font-size:clamp(19px,2.2vw,27px);letter-spacing:-.02em;color:var(--bone);
}
.metric small{display:block;margin-top:7px;font-size:12.5px;color:var(--mute);line-height:1.45}

/* ── секции ── */
.sec{padding:clamp(56px,8vw,104px) 0}
.sec-hd{margin-bottom:clamp(30px,4vw,48px)}
.sec-hd h2{font-size:clamp(27px,4vw,44px);margin-top:14px;max-width:20ch}
.sec-hd p{margin-top:14px;color:var(--mute);max-width:54ch;font-size:15.5px}

.cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--rl);overflow:hidden}
@media(max-width:1180px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cols{grid-template-columns:1fr}}
.cell{background:var(--deep);padding:26px 22px}
.cell .num{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;color:var(--dim);display:block;margin-bottom:14px}
.cell h3{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108,"wght" 600;font-size:18px;letter-spacing:-.01em;margin-bottom:10px;color:var(--bone)}
.cell p{font-size:14.5px;color:var(--mute)}

/* ── тарифы ── */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:880px){.plans{grid-template-columns:1fr}}
.plan{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--rl);
  padding:30px 26px;display:flex;flex-direction:column;position:relative;
}
.plan.pick{border-color:#3A5A46;background:linear-gradient(160deg,#141A16,#0D0F0E)}
.plan .term{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.plan .price{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 112,"wght" 700;font-size:clamp(36px,4.4vw,48px);letter-spacing:-.035em;margin-top:16px;line-height:1;color:var(--bone)}
.plan .per{margin-top:9px;font-size:13.5px;color:var(--mute)}
.plan ul{list-style:none;margin:24px 0 26px;font-size:14.5px;flex:1}
.plan li{padding:9px 0;border-top:1px solid var(--line-soft);color:var(--mute);display:flex;gap:9px}
.plan li:first-child{border-top:0}
.plan li::before{content:"·";color:var(--signal)}
.plan .btn{width:100%}
.badge{
  position:absolute;top:-1px;right:20px;
  font-family:"IBM Plex Mono",monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;background:var(--signal);color:#05170D;
  padding:5px 11px;border-radius:0 0 8px 8px;font-weight:700;
}

/* ── шаги ── */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media(max-width:1100px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--rl);padding:26px 24px}
.step .n{
  width:30px;height:30px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line);display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--mute);margin-bottom:16px;
}
.step h3{font-size:17px;font-weight:600;margin-bottom:9px;color:var(--bone)}
.step p{font-size:14.5px;color:var(--mute)}

/* ── faq ── */
.faq{border-top:1px solid var(--line)}
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  cursor:pointer;list-style:none;padding:22px 0;display:flex;gap:18px;
  align-items:baseline;font-size:16.5px;color:var(--text);transition:color .2s;
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--bone)}
.qa summary::before{content:"+";font-family:"IBM Plex Mono",monospace;color:var(--dim);flex:none}
.qa[open] summary::before{content:"–"}
.qa p{padding:0 0 24px 30px;color:var(--mute);max-width:68ch;font-size:15px}

/* ── портал в магазин ── */
.portal{
  position:relative;border:1px solid var(--line);border-radius:var(--rl);
  overflow:hidden;background:linear-gradient(140deg,#100D14,#08080A 60%);
  display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:center;
}
@media(max-width:900px){.portal{grid-template-columns:1fr}}
.portal-text{padding:clamp(30px,4vw,54px);position:relative;z-index:2}
.portal-text h2{font-size:clamp(24px,3.2vw,38px);margin-top:14px}
.portal-text p{color:var(--mute);font-size:15px;margin-top:16px;max-width:44ch}
.portal-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.portal-tags span{
  font-size:12.5px;color:var(--mute);background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;
}
.portal-vis{position:relative;min-height:clamp(240px,26vw,340px);display:grid;place-items:center}
.portal-vis svg{width:100%;max-width:380px;overflow:visible}
.pring{transform-origin:center;animation:spin 30s linear infinite}
.pring.rev{animation:spin 46s linear infinite reverse}
.portal-core{
  position:absolute;width:104px;height:104px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#4A3A6B,#1B1526 58%,#0C0A12);
  border:1px solid #3A2E52;display:grid;place-items:center;
  box-shadow:0 0 70px rgba(150,110,220,.22);
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 116,"wght" 700;
  font-size:15px;letter-spacing:.14em;color:#E9E2F5;
}

/* ── призыв ── */
.band{
  border:1px solid var(--line);border-radius:var(--rl);
  background:linear-gradient(150deg,#141418,#0A0A0C);
  padding:clamp(32px,5vw,56px);display:flex;flex-wrap:wrap;gap:24px;
  align-items:center;justify-content:space-between;
}
.band h2{font-size:clamp(24px,3.4vw,38px);max-width:18ch}
.band p{color:var(--mute);font-size:14.5px;margin-top:10px}

/* ── подвал ── */
.ftr{border-top:1px solid var(--line-soft);padding:44px 0 56px;margin-top:clamp(48px,6vw,80px)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
@media(max-width:760px){.ftr-grid{grid-template-columns:1fr;gap:26px}}
.ftr h4{font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.ftr ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ftr a{font-size:14px;color:var(--mute);transition:color .2s}
.ftr a:hover{color:var(--bone)}
.ftr .legal{margin-top:28px;padding-top:22px;border-top:1px solid var(--line-soft);font-size:12.5px;color:var(--dim);line-height:1.7}

/* ── текстовые страницы ── */
.doc{padding:clamp(40px,6vw,72px) 0 0;max-width:760px}
.doc h1{font-size:clamp(28px,4vw,42px);margin-bottom:12px}
.doc .updated{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--dim);margin-bottom:36px}
.doc h2{font-size:19px;font-weight:600;color:var(--bone);margin:34px 0 12px}
.doc p{color:var(--mute);font-size:15px;margin-bottom:14px}
.doc ul{color:var(--mute);font-size:15px;margin:0 0 16px 20px;display:flex;flex-direction:column;gap:8px}
.doc table{width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:14.5px}
.doc td,.doc th{padding:11px 0;border-bottom:1px solid var(--line-soft);text-align:left;color:var(--mute)}
.doc th{color:var(--dim);font-weight:500;font-size:12.5px}
.doc td:first-child{color:var(--text);width:40%}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}


/* ══ живой фон первого экрана ══════════════════════════════════════ */
.hero{position:relative;isolation:isolate}
.bg{position:absolute;inset:-10% -5% 0;z-index:-1;pointer-events:none;overflow:hidden}

/* сетка перспективы */
.bg-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(140,160,190,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(140,160,190,.055) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 35%,#000 20%,transparent 78%);
}

/* мягкие пятна света, медленно дышат */
.aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.aurora.a1{
  width:44vw;height:44vw;left:-8vw;top:-6vw;
  background:radial-gradient(circle,rgba(120,170,255,.30),transparent 68%);
  animation:drift1 26s ease-in-out infinite;
}
.aurora.a2{
  width:38vw;height:38vw;right:-6vw;top:12vw;
  background:radial-gradient(circle,rgba(159,232,192,.22),transparent 68%);
  animation:drift2 32s ease-in-out infinite;
}
.aurora.a3{
  width:30vw;height:30vw;left:38vw;top:26vw;
  background:radial-gradient(circle,rgba(150,110,220,.18),transparent 70%);
  animation:drift1 38s ease-in-out infinite reverse;
}
@keyframes drift1{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(4vw,3vw) scale(1.12)}
}
@keyframes drift2{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-5vw,2vw) scale(1.08)}
}

/* звёздная пыль */
.dust{position:absolute;inset:0;opacity:.55}
.dust span{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#F2F1EE;animation:twinkle 5s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.06}50%{opacity:.5}}

/* тонкая линия горизонта под шапкой */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(159,232,192,.22),transparent);
}

/* ══ разрыв пространства в FDS ═════════════════════════════════════ */
.rift-sec{padding:clamp(30px,5vw,60px) 0 clamp(50px,7vw,90px)}
.rift-layout{
  display:grid;grid-template-columns:1.15fr .85fr;
  gap:clamp(26px,4vw,56px);align-items:center;
}
@media(max-width:980px){.rift-layout{grid-template-columns:1fr;gap:32px}}

.rift{position:relative;aspect-ratio:16/11;min-height:280px}

/* Форма разрыва задана один раз переменной: так все слои
   гарантированно совпадают, а править нужно в одном месте. */
.rift-shape,
.rift-cut{
  position:absolute;inset:0;
  /* Форма задана кривыми в SVG - у polygon получались одинаковые
     зубцы, будто прошлись пилой. */
  clip-path:url(#riftClip);
}

/* Свечение: форма обрезается внутри обёртки, а размывается сама
   обёртка - только так ореол выходит наружу по контуру, а не
   обрезается вместе с ним. */
.glow-wrap{position:absolute;inset:-14%;pointer-events:none}
.glow-wrap .rift-shape{inset:14%}

.halo-wrap{filter:blur(46px);opacity:.55;animation:haloBreath 8s ease-in-out infinite}
.halo-wrap .rift-shape{
  background:radial-gradient(ellipse 60% 56% at 50% 50%,
    rgba(90,150,255,.85),rgba(150,110,220,.5) 58%,transparent 80%);
  transform:scale(1.1);
}
@keyframes haloBreath{
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:.72;transform:scale(1.05)}
}

.glow2-wrap{filter:blur(18px);opacity:.8;animation:riftPulse 5.5s ease-in-out infinite}
.glow2-wrap .rift-shape{
  background:linear-gradient(135deg,#7FD8FF,#4B7BFF 38%,#9A6EDC 72%,#5AE0C0);
  transform:scale(1.035);
}
@keyframes riftPulse{
  0%,100%{opacity:.6}
  50%{opacity:.95}
}

.edge-wrap{filter:blur(3px);animation:edgeShift 7s ease-in-out infinite}
.edge-wrap .rift-shape{
  background:linear-gradient(120deg,#DFF4FF,#9FC8FF 32%,#D2BCF8 62%,#A8F5DC);
  transform:scale(1.012);
}
@keyframes edgeShift{
  0%,100%{opacity:.7;filter:blur(3px) hue-rotate(0deg)}
  50%{opacity:1;filter:blur(5px) hue-rotate(20deg)}
}

/* Само окно разрыва поверх свечения */
.rift-cut{
  background:#080A10;overflow:hidden;z-index:2;
  box-shadow:inset 0 0 70px rgba(90,140,220,.32);
}

/* за разрывом - живой сайт магазина: главная и каталог сменяются */
.rift-world{position:absolute;inset:0;overflow:hidden;background:#0B0D14}
.rift-frame{
  position:absolute;left:0;top:0;
  width:280%;height:280%;border:0;
  transform:scale(.3571);transform-origin:0 0;
  pointer-events:none;opacity:0;
  /* Появление задано анимацией, а не скриптом: событие загрузки
     кадра часто происходит раньше, чем выполнится скрипт. */
  animation:frameIn 1.4s .4s ease forwards;
}
@keyframes frameIn{to{opacity:1}}

/* Пока сайт грузится - спокойный фон, без летающих картинок */
.rift-stub{
  position:absolute;inset:0;display:grid;place-items:center;
  background:
    radial-gradient(ellipse 60% 50% at 50% 40%,rgba(90,140,220,.18),transparent 70%),
    linear-gradient(160deg,#0E1220,#080A10);
}


.rift-veil{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 74% 66% at 50% 45%,transparent 34%,rgba(6,8,14,.5) 88%),
    linear-gradient(160deg,rgba(90,140,220,.10),transparent 62%);
}
.rift-scan{
  position:absolute;left:0;right:0;height:32%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(140,190,255,.09),transparent);
  animation:scan 9s linear infinite;
}
@keyframes scan{0%{top:-32%}100%{top:100%}}

.rift-link{position:absolute;inset:0;z-index:6;display:block}

.rift-text h2{font-size:clamp(26px,3.4vw,42px);margin-top:14px}
.rift-text p{color:var(--mute);font-size:15px;margin-top:16px;max-width:46ch}
.rift-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.rift-tags span{
  font-size:12.5px;color:var(--mute);background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px;
}

#shards{position:absolute;inset:-10%;z-index:5;pointer-events:none}
.shard{
  position:absolute;background:linear-gradient(140deg,#8FD4FF,#4B7BFF);
  opacity:.5;animation:float 7s ease-in-out infinite;
}
@keyframes float{
  0%,100%{transform:translate(0,0) rotate(0deg);opacity:.25}
  50%{transform:translate(6px,-14px) rotate(14deg);opacity:.7}
}

/* ══ детали первого экрана ═════════════════════════════════════════ */

/* световые лучи, медленно проходят по фону */
.beam{
  position:absolute;top:-20%;width:1px;height:140%;
  background:linear-gradient(180deg,transparent,rgba(159,232,192,.34),transparent);
  animation:beamMove 14s linear infinite;opacity:0;
}
.beam.b2{background:linear-gradient(180deg,transparent,rgba(120,170,255,.30),transparent);
  animation-duration:19s;animation-delay:4s}
.beam.b3{background:linear-gradient(180deg,transparent,rgba(150,110,220,.26),transparent);
  animation-duration:23s;animation-delay:9s}
@keyframes beamMove{
  0%{transform:translateX(0) skewX(-14deg);opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{transform:translateX(88vw) skewX(-14deg);opacity:0}
}

/* частицы, поднимающиеся снизу вверх */
.rise{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rise i{
  position:absolute;bottom:-6px;width:2px;height:2px;border-radius:50%;
  background:rgba(200,225,255,.9);
  animation:riseUp 12s linear infinite;
}
@keyframes riseUp{
  0%{transform:translateY(0) scale(.6);opacity:0}
  10%{opacity:.7}
  90%{opacity:.25}
  100%{transform:translateY(-72vh) scale(1);opacity:0}
}

/* орбиты вокруг глобуса */
.orbit-ring{
  position:absolute;border:1px solid rgba(150,190,255,.14);border-radius:50%;
  animation:spin 60s linear infinite;
}
.orbit-ring::after{
  content:"";position:absolute;top:-3px;left:50%;
  width:5px;height:5px;border-radius:50%;background:var(--signal);
  box-shadow:0 0 12px rgba(159,232,192,.9);
}
.orbit-ring.o1{inset:-6%;animation-duration:38s}
.orbit-ring.o2{inset:-16%;animation-duration:64s;animation-direction:reverse;
  border-color:rgba(150,110,220,.14)}
.orbit-ring.o2::after{background:#C4A6F5;box-shadow:0 0 12px rgba(196,166,245,.85)}

/* мягкая дымка у нижнего края экрана */
.hero-fade{
  position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--void));
}

/* заголовок проявляется при загрузке */
.hero h1 span,.hero h1{animation:fadeUp .9s cubic-bezier(.2,.7,.3,1) both}
.hero h1 .thin{animation-delay:.12s}
.hero .lead{animation:fadeUp .9s .2s cubic-bezier(.2,.7,.3,1) both}
.hero .actions{animation:fadeUp .9s .32s cubic-bezier(.2,.7,.3,1) both}
.hero .note{animation:fadeUp .9s .42s cubic-bezier(.2,.7,.3,1) both}
.hero .eyebrow{animation:fadeUp .9s cubic-bezier(.2,.7,.3,1) both}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}

/* бегущая точка на строке-подписи */
.live-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--signal);margin-right:8px;vertical-align:1px;
  animation:blink 2.4s ease-in-out infinite;
}
@keyframes blink{
  0%,100%{opacity:.35;box-shadow:0 0 0 rgba(159,232,192,0)}
  50%{opacity:1;box-shadow:0 0 10px rgba(159,232,192,.8)}
}


/* На телефонах оставляем только лёгкие эффекты: размытые пятна
   и множество слоёв заметно сажают батарею. */
@media(max-width:640px){
  .beam,.rise,.orbit-ring.o2{display:none}
  .flight .halo{display:none}
  .aurora{filter:blur(60px);opacity:.36}
  .aurora.a3{display:none}
  .halo-wrap{filter:blur(30px)}
  .edge-wrap{filter:blur(2px)}
  .dust span:nth-child(n+36){display:none}
}


/* ══ отклик кнопок ═════════════════════════════════════════════════ */
/* Любое кликабельное место должно отвечать на курсор и на нажатие -
   иначе непонятно, сработало нажатие или нет. */
.btn,button,.pay-btn,.plan-row,.acc-nav button,.qa summary,a.app{
  transition:transform .16s cubic-bezier(.2,.7,.3,1),
             background .2s ease,border-color .2s ease,
             color .2s ease,box-shadow .25s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}

.btn-primary:hover{background:#fff;box-shadow:0 6px 22px rgba(242,241,238,.20)}
.btn-primary:active{box-shadow:0 2px 8px rgba(242,241,238,.18)}

.btn-ghost:hover{border-color:var(--dim);background:var(--panel2)}
.btn-ghost:active{background:var(--panel3)}

.btn-rift:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(120,180,255,.24)}
.btn-rift:active{transform:translateY(0) scale(.97)}

/* карточки-строки в кабинете */
.plan-row:hover{transform:translateX(3px);border-color:var(--dim)}
.plan-row:active{transform:translateX(1px) scale(.995)}
.pay-btn:hover{transform:translateY(-2px);border-color:var(--dim);background:var(--panel3)}
.pay-btn:active{transform:translateY(0) scale(.98)}
.acc-nav button:hover{color:var(--text);border-color:var(--dim)}
.acc-nav button:active{transform:scale(.96)}

/* строки выбора приложения на странице подключения */
a.app:hover{transform:translateX(3px)}
a.app:active{transform:translateX(1px) scale(.99)}

/* вопросы */
.qa summary:hover{color:var(--bone)}
.qa summary:active{opacity:.8}

/* ссылки в подвале и навигации подчёркиваются при наведении */
.ftr a:hover,.nav a:not(.btn):hover{color:var(--bone)}
.nav a:not(.btn){position:relative}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;right:100%;bottom:-5px;height:1px;
  background:var(--signal);transition:right .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:not(.btn):hover::after{right:0}

/* всё кликабельное показывает курсор-руку */
.btn,button,summary,.plan-row,.pay-btn{cursor:pointer}

/* ══ пробный доступ без Telegram ════════════════════════════════════ */
.tryout{
  border:1px solid var(--line);border-radius:var(--rl);
  background:linear-gradient(150deg,#101318,#0A0B0F);
  padding:clamp(26px,4vw,48px);
}
.tryout h2{font-size:clamp(23px,3vw,34px);margin-top:12px}
.tryout p{color:var(--mute);font-size:15px;margin-top:14px;max-width:56ch}
.tryout-steps{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px;
}
@media(max-width:760px){.tryout-steps{grid-template-columns:1fr}}
.tryout-step{
  background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:18px;
}
.tryout-step b{
  display:block;font-family:"IBM Plex Mono",monospace;font-size:10px;
  letter-spacing:.18em;color:var(--dim);margin-bottom:9px;
}
.tryout-step span{color:var(--text);font-size:14px;line-height:1.5}

.tryout-result{display:none;margin-top:24px}
.tryout-result.on{display:block}
.tryout-key{
  background:var(--void);border:1px solid var(--line);border-radius:12px;
  padding:14px;font-family:"IBM Plex Mono",monospace;font-size:11.5px;
  color:var(--mute);word-break:break-all;line-height:1.6;
  max-height:74px;overflow:hidden;
}
.tryout-qr{background:#fff;border-radius:14px;padding:12px;width:190px;margin-top:16px}
.tryout-note{color:var(--warn);font-size:13px;margin-top:14px}

/* ══ самолёт летит через всю плашку призыва ═════════════════════════ */
.band{position:relative;overflow:hidden}
.band > *{position:relative;z-index:2}

.flight{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible;
  width:100%;height:100%;
}
/* Плашка ниже 340 по высоте, поэтому дуга масштабируется по ширине,
   а самолёт летит в своих координатах - иначе он бы сплющился. */
/* след: пунктирная дуга, прорисовывается перед самолётом */
.flight .trail{
  fill:none;stroke:#38B0E3;stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:7 12;opacity:.3;
  animation:trailDraw 13s linear infinite;
}
@keyframes trailDraw{
  0%{stroke-dashoffset:1400;opacity:0}
  10%{opacity:.32}
  72%{opacity:.2}
  100%{stroke-dashoffset:0;opacity:0}
}
/* сам самолёт движется по той же дуге */
.flight .jet{
  fill:#4FC0EC;
  offset-path:path("M-90 250 C 90 300, 210 150, 360 200 S 560 70, 720 150 S 900 30, 1060 110 S 1240 -20, 1380 -70");
  offset-rotate:auto;
  animation:jetFly 13s linear infinite;
}
/* Покачивание поверх движения: самолёт слегка кренится в полёте */
.flight .jet-inner{
  animation:jetSway 2.6s ease-in-out infinite;
  transform-origin:0 0;
}
@keyframes jetSway{
  0%,100%{transform:scale(2.6) rotate(-5deg)}
  50%{transform:scale(2.6) rotate(6deg)}
}
@keyframes jetFly{
  0%{offset-distance:0%;opacity:0}
  7%{opacity:1}
  90%{opacity:1}
  100%{offset-distance:100%;opacity:0}
}
/* мягкое свечение под самолётом */
.flight .halo{
  fill:#4FC0EC;opacity:.22;filter:blur(11px);
  offset-path:path("M-90 250 C 90 300, 210 150, 360 200 S 560 70, 720 150 S 900 30, 1060 110 S 1240 -20, 1380 -70");
  offset-rotate:auto;
  animation:jetFly 13s linear infinite;
}
.flight .halo g{transform:scale(3.2)}

/* Старые браузеры не знают offset-path - показываем запасной
   вариант, иначе самолёт замер бы в углу. */
@supports not (offset-path: path("M0 0 L1 1")){
  .flight .jet,.flight .halo{
    offset-path:none;
    animation:jetFallback 13s ease-in-out infinite;
  }
  @keyframes jetFallback{
    0%{transform:translate(-90px,250px) rotate(-14deg);opacity:0}
    7%{opacity:1}
    30%{transform:translate(360px,200px) rotate(-8deg)}
    55%{transform:translate(720px,150px) rotate(-14deg)}
    80%{transform:translate(1060px,110px) rotate(-6deg)}
    100%{transform:translate(1380px,-70px) rotate(-12deg);opacity:0}
  }
}