/* Лендинг на экране входа (вариант C «синие полосы»): виден только гостю без сессии.
   Свои токены и префикс .ld-, чтобы не задевать стили приложения. */
#gateScreen { display: block; min-height: 0; padding: 0; }
#gateScreen[hidden] { display: none; }

.ld {
  --ld-bg: #F3F6FC; --ld-surface: #FFFFFF; --ld-ink: #0B1530; --ld-muted: #55627E; --ld-line: #DCE3F0;
  --ld-blue: #1F5BFF; --ld-navy: #0B1E5B; --ld-sky: #CFE0FF; --ld-ice: #E8F0FF; --ld-lime: #D7F36B; --ld-lime-ink: #0B1530;
  --ld-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --ld-body: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--ld-bg); color: var(--ld-ink); font-family: var(--ld-body); font-size: 16px; line-height: 1.55;
  text-align: left; min-height: 100vh;
}
/* всегда светлый: так выбрал владелец */
.ld { color-scheme: light; }
.ld *, .ld *::before, .ld *::after { box-sizing: border-box; }
.ld h1, .ld h2 { font-family: var(--ld-display); text-wrap: balance; margin: 0; letter-spacing: -.01em; color: inherit; }
.ld p { margin: 0; }
.ld a { color: inherit; }
.ld :focus-visible { outline: 3px solid var(--ld-blue); outline-offset: 3px; border-radius: 8px; }
.ld-wrap { max-width: 1180px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

.ld-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 16px var(--ld-body); border-radius: 999px;
  padding: 14px 26px; min-height: 50px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .15s ease, background-color .2s ease; }
.ld-btn:hover { transform: translateY(-1px); }
.ld-btn.lime { background: var(--ld-lime); color: var(--ld-lime-ink); }
.ld-btn.outline { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.ld-btn.outline:hover { border-color: #fff; }

/* шапка */
.ld-hero { background: var(--ld-navy); color: #fff; border-radius: 0 0 40px 40px; padding-top: env(safe-area-inset-top, 0px); }
.ld-nav { display: flex; align-items: center; gap: 20px; padding-block: 18px; }
.ld-logo { font: 800 20px var(--ld-display); letter-spacing: .02em; display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.ld-logo i { width: 30px; height: 30px; border-radius: 9px; background: var(--ld-lime); color: var(--ld-lime-ink); display: grid; place-items: center; font-style: normal; font-size: 14px; }
.ld-links { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 15px; }
.ld-links a { text-decoration: none; color: rgba(255, 255, 255, .72); }
.ld-links a:hover { color: #fff; }
.ld-nav .ld-btn { padding: 10px 20px; min-height: 44px; font-size: 15px; }
@media (max-width: 760px) { .ld-links { display: none; } .ld-nav .ld-btn { margin-left: auto; } }

.ld-eyebrow { display: inline-flex; font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ld-blue); }
.ld-eyebrow.on-dark { color: var(--ld-lime); }
.ld-lead { font-size: 18px; color: var(--ld-muted); max-width: 56ch; }
.ld-hero-in { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; padding-block: 30px 60px; }
.ld-hero h1 { font-size: clamp(34px, 6vw, 72px); line-height: 1.02; margin-top: 14px; }
.ld-hero .ld-lead { color: rgba(255, 255, 255, .78); margin-top: 18px; }
.ld-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ld-counter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 280px; }
.ld-counter div { background: rgba(255, 255, 255, .09); border-radius: 20px; padding: 16px; }
.ld-counter b { display: block; font: 800 34px/1 var(--ld-display); }
.ld-counter span { font-size: 13px; opacity: .75; }
@media (max-width: 900px) { .ld-hero-in { grid-template-columns: 1fr; } .ld-counter { min-width: 0; } }

/* продукты полосами */
.ld-prod { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: center; padding-block: 44px; border-bottom: 1px solid var(--ld-line); }
.ld-prod:nth-of-type(even) .ld-visual { order: -1; }
.ld-prod > div { min-width: 0; }
.ld-prod h2 { font-size: clamp(24px, 3.4vw, 38px); line-height: 1.1; margin: 10px 0 14px; }
.ld-prod ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.ld-prod li { display: flex; gap: 10px; align-items: flex-start; }
.ld-prod li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%;
  background: var(--ld-ice) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%231F5BFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
@media (max-width: 860px) { .ld-prod { grid-template-columns: 1fr; padding-block: 32px; } .ld-prod:nth-of-type(even) .ld-visual { order: 0; } }
.ld-visual { border-radius: 28px; padding: 22px; min-height: 280px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.v-blue { background: var(--ld-blue); } .v-sky { background: var(--ld-sky); } .v-navy { background: var(--ld-navy); color: #fff; } .v-lime { background: var(--ld-lime); color: var(--ld-lime-ink); }
.ld-note { font-size: 12px; opacity: .7; }

.ld-phone { width: min(280px, 100%); margin: auto; border-radius: 38px; background: #0B1530; padding: 9px; box-shadow: 0 30px 60px -20px rgba(11, 21, 48, .5); }
.ld-screen { border-radius: 30px; background: var(--ld-surface); overflow: hidden; }
.ld-chat { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; font-size: 14px; line-height: 1.4; color: var(--ld-ink); }
.ld-msg { max-width: 86%; padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--ld-ice); }
.ld-msg.me { align-self: flex-end; background: var(--ld-blue); color: #fff; border-radius: 18px 18px 6px 18px; }
.ld-msg-b { display: block; margin-top: 8px; text-align: center; font-weight: 700; background: var(--ld-surface); color: var(--ld-blue); border-radius: 10px; padding: 7px; }
.ld-comment { font-size: 12px; color: var(--ld-muted); align-self: center; background: var(--ld-bg); padding: 4px 10px; border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) {
  .ld-chat > * { animation: ldPop .5s both; }
  .ld-chat > :nth-child(2) { animation-delay: .5s; } .ld-chat > :nth-child(3) { animation-delay: 1.1s; } .ld-chat > :nth-child(4) { animation-delay: 1.7s; }
  @keyframes ldPop { from { opacity: .0001; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
.ld-q { display: flex; gap: 12px; align-items: center; background: var(--ld-surface); color: var(--ld-ink); border-radius: 14px; padding: 12px 14px; font-size: 14px; }
.ld-q time { font: 700 14px var(--ld-display); color: var(--ld-blue); font-variant-numeric: tabular-nums; flex: none; }
.ld-q span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-q em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ld-muted); flex: none; }
.ld-bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; }
.ld-bars i { flex: 1; border-radius: 8px 8px 4px 4px; background: rgba(255, 255, 255, .3); }
.ld-bars i.hi { background: var(--ld-lime); }
.ld-lead-card { background: var(--ld-surface); color: var(--ld-ink); border-radius: 14px; padding: 12px 14px; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.ld-pill { font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--ld-ice); color: var(--ld-blue); flex: none; }
.ld-pill.ok { background: var(--ld-navy); color: #fff; }

/* шаги и вопросы */
.ld-section { padding-block: 56px 8px; }
.ld-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.ld-head h2 { font-size: clamp(28px, 4.4vw, 48px); line-height: 1.08; }
.ld-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: ldstep; list-style: none; margin: 0; padding: 0; }
.ld-steps li { background: var(--ld-surface); border: 1px solid var(--ld-line); border-radius: 20px; padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ld-steps li::before { counter-increment: ldstep; content: counter(ldstep); font: 800 15px var(--ld-display); width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ld-ice); color: var(--ld-blue); }
.ld-steps b { font-size: 17px; }
.ld-steps p { color: var(--ld-muted); font-size: 15px; }
@media (max-width: 900px) { .ld-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ld-steps { grid-template-columns: 1fr; } }
.ld-faq { display: flex; flex-direction: column; gap: 10px; max-width: 860px; }
.ld-faq details { background: var(--ld-surface); border: 1px solid var(--ld-line); border-radius: 14px; padding: 4px 20px; }
.ld-faq summary { cursor: pointer; font-weight: 700; font-size: 17px; padding: 14px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after { content: "+"; color: var(--ld-blue); font-size: 22px; line-height: 1; }
.ld-faq details[open] summary::after { content: "−"; }
.ld-faq details p { color: var(--ld-muted); padding-bottom: 16px; }
.ld-band { margin-top: 56px; border-radius: 28px; background: var(--ld-navy); color: #fff; padding: clamp(28px, 5vw, 56px);
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.ld-band h2 { font-size: clamp(26px, 4vw, 42px); max-width: 18ch; }
.ld-foot { padding-block: 28px calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--ld-muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 14px 24px; }
.ld-foot a { text-decoration: none; }
.ld-foot a:hover { color: var(--ld-ink); }

/* окно входа поверх лендинга */
.login-modal { position: fixed; inset: 0; z-index: 100; background: rgba(7, 13, 31, .55); display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px)); overflow-y: auto; }
.login-modal[hidden] { display: none; }
.login-modal .gate-card { position: relative; width: 100%; max-width: 380px; margin: auto; }
.login-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: none; color: var(--hint); font-size: 26px; cursor: pointer; border-radius: 10px; }
.login-x:hover { color: var(--text); }