/* «Алина»: минималистичная страница ИИ-менеджера. Светлое сиреневое поле
   первого экрана с телефоном, сравнение «менеджер и «Алина»», возможности
   списком, цены строками. Чат в телефоне повторяет настоящий диалог бота
   в Telegram (тёмная тема), без служебных уведомлений. */

.al { --al: #b9a2ff; --al-ink: #cdbcff; --al-field: #ece6ff; --al-deep: #170c3d; }

/* ---------- первый экран: поле цвета, текст и телефон ---------- */
.al-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, calc(4vw / var(--z, 1)), 64px); align-items: center; margin-top: clamp(16px, calc(2vw / var(--z, 1)), 28px); padding: clamp(40px, calc(5vw / var(--z, 1)), 72px) clamp(28px, calc(5vw / var(--z, 1)), 80px); border-radius: 40px; background: var(--al-field); color: var(--al-deep); }
.al .al-hero h1 { font-size: clamp(28px, calc(3.7vw / var(--z, 1)), 54px); line-height: 1.05; color: var(--al-deep); }
.al-hero .lead { margin-top: 24px; max-width: 25em; font-size: var(--fs-lead); font-weight: 300; line-height: 1.45; color: rgba(23, 12, 61, .74); }
.al-hero .hero-actions { justify-content: flex-start; margin-top: 36px; }
.al-hero .btn { min-height: 57px; font-size: 20px; }
.al-hero .btn-dark { background: var(--al-deep); color: #fff; font-weight: 300; }
.al-hero .btn-dark:hover { background: #2a1a63; }
.al-hero .btn-line { color: var(--al-deep); border-color: rgba(23, 12, 61, .22); }
.al-hero .btn-line:hover { border-color: rgba(23, 12, 61, .5); }
.al-hero-art { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.al-credit { margin-top: 32px; font-size: 12px; color: var(--faint); }
.al-credit a { padding: 10px 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- телефон с Telegram ---------- */
/* Фото настоящего iPhone в руке; экран телефона закрашен, поверх него
   экран с Telegram (360×773), натянутый скриптом на четырёхугольник экрана
   на фото (matrix3d). Без скрипта экран стоит по приблизительным долям. */
.al-device { position: relative; width: min(420px, 100%); }
.al-photo { display: block; width: 100%; height: auto; border-radius: 28px; box-shadow: 0 40px 80px -36px rgba(40, 16, 120, .55); }
.al-scr { position: absolute; left: 14.56%; top: 6.01%; width: 360px; height: 773px; display: flex; flex-direction: column; overflow: hidden; border-radius: 47px; background: #0e1621; font-family: -apple-system, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif; color: #f5f5f5;
  transform-origin: 0 0; transform: scale(.84); }
.al-scr.is-mapped { left: 0; top: 0; }
.al-scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 4; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .055) 42%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 30%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 0 6px rgba(0, 0, 0, .5); }
.al-island { position: absolute; top: 12px; left: 50%; width: 100px; height: 29px; margin-left: -50px; border-radius: 20px; background: #000; z-index: 3; }
.al-home { position: absolute; bottom: 7px; left: 50%; width: 128px; height: 5px; margin-left: -64px; border-radius: 3px; background: rgba(255, 255, 255, .85); z-index: 3; }
.al-status { display: flex; justify-content: space-between; align-items: center; padding: 6px 30px 0 40px; height: 52px; font-size: 15px; font-weight: 600; flex: none; }
.al-status svg { height: 11px; width: auto; fill: #fff; }
.al-status span:last-child { display: flex; gap: 5px; align-items: center; }
.al-tg-head { display: flex; align-items: center; gap: 10px; padding: 6px 14px 9px; background: #17212b; border-bottom: 1px solid #0b1118; flex: none; }
.al-back { width: 10px; height: 10px; border-left: 2px solid #5eb5f7; border-bottom: 2px solid #5eb5f7; transform: rotate(45deg); margin: 0 2px 0 6px; }
.al-tg-ava { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(160deg, #a58bff, #6a4be0); font-size: 16px; font-weight: 600; color: #fff; flex: none; }
.al-tg-head b { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.al-tg-head small { display: block; font-size: 13px; color: #7f91a4; }
.al-tg-body { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 5px; min-height: 0; overflow: hidden; padding: 10px 9px 8px;
  background: #0e1621 radial-gradient(circle at 20% 30%, rgba(90, 120, 160, .06) 0 2px, transparent 3px) 0 0 / 34px 34px; }
.al-day { align-self: center; margin: 2px 0 6px; padding: 3px 10px; border-radius: 12px; background: rgba(23, 33, 43, .85); font-size: 12.5px; color: #c9d4de; }
.al-m { position: relative; max-width: 84%; padding: 6px 10px 6px 11px; border-radius: 15px; background: #182533; font-size: 14px; line-height: 1.34; overflow-wrap: anywhere; }
.al-m.is-me { align-self: flex-end; background: #2b5278; border-bottom-right-radius: 5px; }
.al-m:not(.is-me) { align-self: flex-start; border-bottom-left-radius: 5px; }
.al-m p + p { margin-top: 6px; }
.al-m p { color: inherit; }
.al-m b { font-weight: 600; }
.al-t { float: right; margin: 6px 0 -4px 10px; font-size: 11.5px; color: #6d8299; line-height: 1; }
.al-m.is-me .al-t { color: #7da8d3; }
.al-t i { display: inline-block; width: 13px; height: 7px; margin-left: 3px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M1 5l3 3 6-7M7 7l1 1 6-7' fill='none' stroke='%237da8d3' stroke-width='1.6'/%3E%3C/svg%3E"); }
.al-rec { margin: 6px 0 2px; padding: 8px 10px; border-left: 2px solid #5eb5f7; border-radius: 4px; background: rgba(94, 181, 247, .08); }
.al-rec b { display: block; font-size: 14px; }
.al-rec span { display: block; font-size: 13px; color: #a9bccd; }
.al-kb { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; align-self: flex-start; width: 84%; }
.al-kb span { padding: 7px 4px; border-radius: 8px; background: rgba(43, 82, 120, .55); font-size: 13px; text-align: center; color: #fff; }
.al-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 13px; border-radius: 15px 15px 15px 5px; background: #182533; }
.al-typing i { width: 6px; height: 6px; border-radius: 50%; background: #6d8299; animation: al-dot 1.1s infinite ease-in-out; }
.al-typing i:nth-child(2) { animation-delay: .15s; }
.al-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes al-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.al-input { display: flex; align-items: center; gap: 10px; padding: 8px 14px 28px; background: #17212b; flex: none; }
.al-input span { flex: 1; padding: 8px 14px; border-radius: 18px; background: #0e1621; font-size: 14px; color: #6d8299; }
.al-input i { width: 22px; height: 22px; flex: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='3' width='6' height='12' rx='3' fill='none' stroke='%237f91a4' stroke-width='1.8'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3' fill='none' stroke='%237f91a4' stroke-width='1.8'/%3E%3C/svg%3E"); }
.al-input i.is-clip { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 11l-8 8a5 5 0 0 1-7-7l8-8a3.5 3.5 0 0 1 5 5l-8 8a2 2 0 0 1-3-3l7-7' fill='none' stroke='%237f91a4' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* сценарий: без скрипта виден весь диалог, со скриптом сообщения появляются по очереди */
.al-chat.is-play [data-step], .al-chat.is-play .al-typing { display: none; }
.al-chat.is-play [data-step].is-on { display: block; animation: al-in .38s var(--ease-out) both; }
.al-chat.is-play .al-kb.is-on { display: grid; }
.al-chat.is-play .al-typing.is-on { display: flex; }
@keyframes al-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }

/* ---------- где работает ---------- */
.al-where { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-bottom: 1px solid var(--glass-line); }
.al-where li { list-style: none; padding: 28px 28px 30px 0; font-size: 17px; font-weight: 300; line-height: 1.45; color: var(--soft); }
.al-where li + li { padding-left: 28px; border-left: 1px solid var(--glass-line); }
.al-where b { display: block; margin-bottom: 6px; font-weight: 400; font-size: 24px; color: var(--ink-2); }

/* ---------- холодные лиды ---------- */
.al-cold { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, calc(6vw / var(--z, 1)), 112px); align-items: end; }
.al-num { font-family: var(--f-num); font-weight: 300; font-size: clamp(80px, calc(9.4vw / var(--z, 1)), 136px); line-height: .82; letter-spacing: -.05em; color: var(--al); white-space: nowrap; }
.al-num small { display: block; margin-bottom: 18px; font-size: clamp(22px, calc(2vw / var(--z, 1)), 28px); letter-spacing: -.01em; color: var(--al-ink); }
.al-cold h2 { font-size: var(--fs-h2); }
.al-cold p { margin-top: 18px; font-size: var(--fs-body); font-weight: 300; line-height: 1.5; }
.al-vs { margin-top: clamp(48px, calc(5vw / var(--z, 1)), 72px); }
.al-vs-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--glass-line); font-size: 17px; font-weight: 300; line-height: 1.45; color: var(--soft); }
.al-vs-row > span:first-child { color: var(--ink-2); font-weight: 400; }
.al-vs-row > span:last-child { color: var(--ink-2); }
.al-vs-row.is-head { padding-top: 0; font-size: 15px; color: var(--faint); }
.al-vs-row.is-head > span:last-child { color: var(--al-ink); }
.al-vs-row.is-head > span:first-child { color: var(--faint); font-weight: 300; }

/* ---------- возможности ---------- */
.al-caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(28px, calc(3vw / var(--z, 1)), 48px); margin: clamp(40px, calc(4vw / var(--z, 1)), 56px) 0 0; padding: 0; }
.al-caps li { list-style: none; padding-top: 22px; border-top: 1px solid rgba(185, 162, 255, .28); }
.al .al-caps h3 { font-size: clamp(22px, calc(1.9vw / var(--z, 1)), 27px); line-height: 1.15; }
.al-caps p { margin-top: 12px; font-size: 17px; font-weight: 300; line-height: 1.5; }

/* ---------- эффект и цены ---------- */
.al-money { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, calc(6vw / var(--z, 1)), 96px); }
.al-money h2 { font-size: var(--fs-h2); }
.al-eff { margin: 32px 0 0; }
.al-eff div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 20px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--glass-line); }
.al-eff dt { font-family: var(--f-num); font-size: clamp(30px, calc(3vw / var(--z, 1)), 42px); font-weight: 300; color: var(--ink-2); white-space: nowrap; }
.al-eff dd { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.45; color: var(--soft); }
.al-eff-note { margin-top: 16px; font-size: 15px !important; color: var(--faint) !important; }
.al-price-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; padding: 22px 0; border-top: 1px solid var(--glass-line); }
.al-price-row:first-of-type { margin-top: 32px; }
.al-price-row span { font-size: 22px; color: var(--ink-2); }
.al-price-row b { font-family: var(--f-num); font-weight: 400; font-size: clamp(24px, calc(2.2vw / var(--z, 1)), 32px); color: var(--al-ink); white-space: nowrap; }
.al-price-row p { grid-column: 1 / -1; font-size: 16px; font-weight: 300; line-height: 1.45; }

/* ---------- блог ---------- */
.al-blog-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.al-blog-head h2 { font-size: var(--fs-h2); }
.bl-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.bl-grid.is-single .bl-link { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, calc(4vw / var(--z, 1)), 56px); align-items: center; }
.pp .bl-grid.is-single .bl-title { font-size: clamp(24px, calc(2.4vw / var(--z, 1)), 32px); line-height: 1.15; padding-right: 0; }
.bl-grid.is-single .bl-note { font-size: 15px; }

/* ---------- призыв ---------- */
.al-cta { display: grid; justify-items: center; gap: 18px; padding: clamp(48px, calc(6vw / var(--z, 1)), 88px) clamp(24px, calc(4vw / var(--z, 1)), 64px); border-radius: 36px; background: var(--al-field); text-align: center; color: var(--al-deep); }
.al .al-cta h2 { font-size: var(--fs-h2); color: var(--al-deep); }
.al-cta p { max-width: 32em; font-size: 18px; line-height: 1.5; color: rgba(23, 12, 61, .72); }
.al-cta .btn-dark { background: var(--al-deep); color: #fff; font-weight: 300; }
.al-cta .btn-line { color: var(--al-deep); border-color: rgba(23, 12, 61, .22); }
.al-cta .hero-actions { justify-content: center; margin-top: 10px; }

@media (max-width: 980px) {
  .al-hero { grid-template-columns: minmax(0, 1fr); padding-bottom: 48px; }
  .al-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-money { grid-template-columns: minmax(0, 1fr); }
  .al-cold { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 720px) {
  .al-hero { padding: 36px 20px 28px; border-radius: 28px; }
  .al-hero .hero-actions { flex-wrap: wrap; }
  .al-where { grid-template-columns: minmax(0, 1fr); }
  .al-where li, .al-where li + li { padding: 22px 0; border-left: 0; }
  .al-where li + li { border-top: 1px solid var(--glass-line); }
  .al-vs-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 16px; font-size: 16px; }
  .al-vs-row > span:first-child { grid-column: 1 / -1; }
  .al-vs-row.is-head > span:first-child { display: none; }
  .al-caps { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .al-eff div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .al-blog-head { margin-bottom: 28px; }
  .bl-grid.is-single .bl-link { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .al-cta { border-radius: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .al-typing i { animation: none; }
}