/* Лендинг в стиле личного кабинета (skin.css): тёмный фон, салатовый акцент, оранжевое свечение, крупные карточки */
.lnav { max-width: 1120px; padding: 16px 24px; }
.lnav .tb-brand { font-size: 1.3rem; gap: 8px; }
.lnav .tb-logo, .lnav .tb-logo svg { width: 38px; height: 38px; }
.lnav .tb-beta { margin-left: 4px; }
.lnav-r .btn, .lnav-r .btn-ghost { border-radius: 999px; }
.lmain { max-width: 1120px; }

.lbeta { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; font-size: .84rem; font-weight: 600;
  color: var(--orange-2); background: var(--orange-soft); border: 1px solid rgba(255, 122, 26, .25); margin-bottom: 18px; }
.lbeta .ic { width: 15px; height: 15px; }
a.lbeta { text-decoration: none; transition: border-color .2s, background .2s; }
a.lbeta:hover { border-color: var(--orange); }
.lbeta-go { margin-left: 4px; padding-left: 10px; border-left: 1px solid rgba(255, 122, 26, .3); color: var(--orange); }
/* инвайт сразу под формой: без кода дальше входа не пройти, поэтому он виден на первом экране */
.linv { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 12px; max-width: 560px; padding: 10px 10px 10px 16px;
  border-radius: 18px; background: var(--orange-soft); border: 1px solid rgba(255, 122, 26, .25); }
.linv span { flex: 1 1 220px; color: var(--ink-2); font-size: .92rem; }
.linv a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 700; text-decoration: none;
  color: #1A0F08; background: var(--orange); white-space: nowrap; transition: filter .2s; }
.linv a:hover { filter: brightness(1.08); }
.linv .ic { width: 18px; height: 18px; }
.lnav-inv { color: var(--orange-2); border-color: rgba(255, 122, 26, .35); }
.h2 h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 4.8vw, 3.4rem); letter-spacing: -.035em; }
.h2 h1 .hl { color: var(--accent); }
.lform { border-radius: 999px; padding: 6px 6px 6px 10px; background: var(--surface); }
.lform .btn { border-radius: 999px; }
.lplats { display: flex; align-items: center; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.lplats .pl { width: 36px; height: 36px; border-radius: 11px; }
.lplats .pl .ic { width: 20px; height: 20px; }
.lplats .pl.yt .ic { width: 24px; height: 24px; }
.lplats .pl.kk .ic { width: 17px; height: 17px; }   /* «K» Kick — сплошной квадрат, на 20 px смотрится крупнее соседей */
.lplats .pl.vk .ic, .lplats .pl.ru .ic { width: 36px; height: 36px; }
.lplats small { color: var(--muted); font-size: .84rem; margin-left: 4px; }
.h2-proof { border-left-color: var(--orange); }

/* оранжевое свечение за лентой клипов и за Клипышем внизу */
.h2-clips { isolation: isolate; }
.lglow { position: absolute; z-index: -1; left: 50%; top: 45%; width: 520px; height: 520px; max-width: 120%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 122, 26, .28), rgba(255, 122, 26, .08) 55%, transparent); filter: blur(10px); pointer-events: none; }
.reel-item { border-color: #141416; border-radius: 22px; }

/* что в кабинете */
.lfeat { margin-top: clamp(56px, 10vh, 110px); text-align: center; }
.lfeat h2, .how h2, .lcta h2 { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.lsub { color: var(--muted); margin-top: 8px; }
.lfeat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; text-align: left; }
.lcard { display: grid; gap: 6px; align-content: start; padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s, transform .2s; }
.lcard:hover { border-color: rgba(181, 227, 90, .35); transform: translateY(-2px); }
.lc-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 8px; }
.lc-ic.lc-tg { background: none; }                         /* официальный логотип Telegram: свой круг и цвета */
.lc-ic .tg-logo { width: 44px; height: 44px; display: block; }
.lc-ic .ic { width: 22px; height: 22px; }
.lcard b { font-size: 1.05rem; }
.lcard small { color: var(--muted); font-size: .9rem; line-height: 1.5; }

/* как начать */
.how { margin-top: clamp(56px, 10vh, 110px); }
.lsteps2 { list-style: none; counter-reset: s; display: grid; gap: 10px; margin-top: 18px; }
.lsteps2 li { counter-increment: s; display: grid; grid-template-columns: 40px 1fr; column-gap: 14px; align-items: center; padding: 14px 16px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.lsteps2 li::before { content: counter(s); grid-row: span 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-weight: 800; }
.lsteps2 b { font-size: 1rem; }
.lsteps2 small { color: var(--muted); font-size: .88rem; }
.tg { border-radius: 22px; }
.tg-ava { background: var(--accent); color: var(--on-accent); }

/* финальный блок, как онбординг в приложении */
.lcta { position: relative; isolation: isolate; display: grid; justify-items: center; text-align: center; gap: 10px; margin-top: clamp(56px, 10vh, 110px);
  padding: 36px 20px 40px; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #141416, #1A0F08); border: 1px solid rgba(255, 122, 26, .2); }
.lcta .lglow { top: 30%; width: 420px; height: 420px; }
.lcta svg#ctaK { width: 130px; height: 130px; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .6)); }
.lcta p { color: var(--ink-2); opacity: .85; max-width: 44ch; }
.lcta-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

.lfoot .tb-brand { font-size: 1rem; color: var(--ink); }
.lfoot a { color: var(--muted); }

@media (max-width: 860px) { .lfeat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .lfeat-grid { grid-template-columns: 1fr; }
  .lform { border-radius: 22px; padding: 6px; }
  .lnav .tb-beta { display: none; }
  .lnav-r { gap: 6px; } .lnav-r .lnav-bot { display: none; }   /* на телефоне в шапке: Инвайт + Войти */
  .lbeta-go { display: none; }
  .linv { padding: 12px; } .linv a { flex: 1 1 100%; justify-content: center; }
  .lcta-btns > * { flex: 1 1 100%; }
  /* шапка на телефоне: «Клипни» и «Инвайт» не слипаются — компактнее кнопки и логотип, зазор не меньше 16px */
  .lnav { gap: 16px; padding: 14px 16px; }
  .lnav .tb-brand { font-size: 1.15rem; gap: 7px; flex-shrink: 0; }
  .lnav .tb-logo, .lnav .tb-logo svg { width: 32px; height: 32px; }
  .lnav-r .btn, .lnav-r .btn-ghost { padding: 9px 13px; font-size: .86rem; gap: 5px; white-space: nowrap; }
  .lnav-r .ic { width: 15px; height: 15px; }
}
@media (max-width: 350px) { .lnav-inv svg { display: none; } }

/* «Как начать»: живая переписка с ботом (index.html, #tgFeed) */
.tg-live { align-self: center; width: 100%; max-width: 420px; justify-self: center; }
.tg-feed { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 360px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 44px); mask-image: linear-gradient(to bottom, transparent 0, #000 44px); }
.tg-item { flex: none; }
.tg-item { display: grid; gap: 4px; max-width: 88%; align-self: flex-start; animation: tgIn .35s ease-out both; }
.tg-item.me { align-self: flex-end; }
.tg-item .tg-msg { padding-right: 46px; line-height: 1.35; }
.tg-item.me .tg-msg { background: #2B5278; border-radius: 12px 12px 4px 12px; padding-right: 62px; }
.tg-item .tg-btn { display: block; margin-top: 0; text-decoration: none; }
.tg-item .tg-btn:hover { background: rgba(255, 255, 255, .11); }
#tgState.typing { color: var(--accent); }
@keyframes tgIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.lsteps2 li { cursor: pointer; transition: border-color .2s, background .2s; }
.lsteps2 li.on { border-color: var(--accent); background: rgba(181, 227, 90, .06); }
.lsteps2 li:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .tg-item { animation: none; } }

/* мини-приложение в переписке: выезжает снизу по «Открыть ролики» */
.tg-live { position: relative; overflow: hidden; }
.tg-item .tg-btn { width: 100%; border: 0; font: inherit; cursor: pointer; transition: transform .15s, background .15s; }
.tg-btn.press { transform: scale(.96); background: rgba(106, 179, 243, .22); }
.tga { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #0E0F12; border-radius: inherit;
  transform: translateY(102%); transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.tga.open { transform: none; }
.tga-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: #17212B; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.tga-bar small { display: block; color: #7D8B99; font-size: .72rem; }
.tga-x { width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: #E9EEF2; cursor: pointer; }
.tga-body { display: grid; gap: 10px; padding: 12px; overflow: hidden; }
.tga-h b { display: block; font-size: 1.05rem; }
.tga-h small { color: var(--muted); font-size: .76rem; }
.tga-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tga-c { position: relative; display: grid; gap: 5px; font-size: .74rem; }
.tga-c img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: #1B1C20; display: block; }
.tga-c b { font-size: .74rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tga-pw { position: absolute; right: 5px; top: 5px; padding: 2px 6px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: var(--accent); font-weight: 700; font-size: .68rem; }
.tga-c i { position: absolute; left: 5px; top: 5px; padding: 2px 6px; border-radius: 6px; background: var(--accent); color: var(--on-accent); font-style: normal; font-weight: 700; font-size: .64rem; }
.tga-ed { text-align: center; padding: 5px 0; border-radius: 8px; background: rgba(181, 227, 90, .14); color: var(--accent); font-weight: 700; }
.tga-go { display: block; text-align: center; padding: 10px; border-radius: 12px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .tga { transition: none; } }