/* ─────────────────────────────────────────────────────────────────────────────
   «Ключ» — лендінг.
   Ідея: мова навігаційних табличок і ключниці. Номер приміщення — головний
   графічний елемент; латунь — лише там, де «ключ»; решта — тиха й точна.
   Кольори 60 / 30 / 10: папір і білий · лісовий зелений · латунь.
   Контраст тексту ≥ 4.5:1 (WCAG 2.2 AA), великі заголовки ≥ 3:1.
   ───────────────────────────────────────────────────────────────────────────── */
:root{
  --lp-paper:#F3F4F0; --lp-white:#FFFFFF; --lp-ink:#121A17; --lp-graphite:#56625D; --lp-line:#DCE1DC;
  --lp-forest:#173F33; --lp-forest-2:#1E5A47; --lp-sage:#E2EAE4; --lp-sage-2:#CFDCD3;
  --lp-brass:#D4AE55; --lp-brass-soft:#F3E7C6; --lp-brass-ink:#8A6A22;
  --lp-red:#B8402F; --lp-amber:#A86A12;
  --lp-display:'Unbounded',system-ui,sans-serif; --lp-body:'Onest',system-ui,sans-serif;
  --lp-r:14px; --lp-r-lg:22px;
}
body.lp{background:var(--lp-paper);color:var(--lp-ink)}
.lp main{overflow-x:clip}
.lp .wrap{max-width:1200px}
.lp h1,.lp h2,.lp h3{font-family:var(--lp-body);letter-spacing:-.02em}
.lp h2{font-size:clamp(28px,3.6vw,44px);font-weight:600;line-height:1.1;margin:0 0 14px}
.lp h3{font-size:19px;font-weight:600;line-height:1.3;margin:0 0 6px}
.lp p{max-width:62ch}
.lp-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--lp-graphite)}
.lp-kicker{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--lp-forest-2);margin:0 0 14px;font-size:15px}
.lp-kicker::before{content:'';width:18px;height:2px;background:var(--lp-brass)}
.lp-section{padding:clamp(64px,8vw,112px) 0}
.lp-section.tint{background:var(--lp-white);border-block:1px solid var(--lp-line)}
.lp-head{max-width:720px;margin-bottom:clamp(32px,4vw,52px)}

/* шапка */
.lp .top{background:rgba(243,244,240,.86)}
/* шапка однакова на всіх сторінках — задається в site.css */
@media(max-width:720px){.lp .top nav > a:not(.nav-cta):not(:last-of-type){display:none}}

/* кнопки */
.lp .btn{border-radius:12px;padding:14px 22px;font-weight:600}
.lp .btn.lg{padding:16px 26px;font-size:17px}
.lp .btn.light{background:#fff;border-color:#fff;color:var(--lp-forest)}
.lp .btn.light:hover{background:var(--lp-brass-soft);border-color:var(--lp-brass-soft)}
.lp .btn.outline-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.lp .btn.outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.lp-tg{width:20px;height:20px;flex:0 0 20px}

/* ── Герой ─────────────────────────────────────────────────────────────── */
.lp-hero{padding:clamp(40px,6vw,88px) 0 clamp(56px,7vw,96px)}
.lp-hero .wrap{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.lp-hero h1{font-family:var(--lp-display);font-weight:500;font-size:clamp(40px,6.2vw,80px);line-height:1;letter-spacing:-.035em;margin:0 0 24px}
.lp-hero h1 span{display:block}
.lp-hero .lp-lead{margin:0 0 32px;max-width:52ch}
.lp-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.lp-note{margin-top:18px;font-size:15px;color:var(--lp-graphite)}
.lp-note b{color:var(--lp-ink);font-weight:600}
@media(max-width:960px){.lp-hero .wrap{grid-template-columns:1fr}}

/* композиція: ключниця + повідомлення бота */
.lp-scene{position:relative;padding:0 0 250px 0}
.lp-board{background:var(--lp-forest);border-radius:var(--lp-r-lg);padding:26px 22px 20px;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 30px 60px -30px rgba(23,63,51,.55)}
.lp-board-top{display:flex;justify-content:space-between;align-items:baseline;color:#cfe0d7;font-size:14px;margin-bottom:18px}
.lp-board-top b{font-family:var(--lp-display);font-weight:500;color:#fff;font-size:15px;letter-spacing:0}
.lp-rail{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 12px}
.lp-rail::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:#0f2c23}
.lp-hook{display:flex;flex-direction:column;align-items:center;min-height:112px;padding-top:3px}
.lp-hook::before{content:'';width:3px;height:12px;background:#0f2c23;border-radius:0 0 2px 2px}
.lp-tag{width:100%;max-width:96px;background:linear-gradient(180deg,#E6C877,#CFA74C);color:#1d2a20;border-radius:9px 9px 16px 16px;
  padding:16px 6px 9px;text-align:center;position:relative;box-shadow:0 2px 0 #9C7A2E;transform-origin:50% 0}
.lp-tag::before{content:'';position:absolute;top:6px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:var(--lp-forest)}
.lp-tag b{display:block;font-family:var(--lp-display);font-weight:500;font-size:20px;letter-spacing:-.02em;line-height:1.1}
.lp-tag span{display:block;font-size:11.5px;line-height:1.25;opacity:.78;margin-top:2px}
.lp-hook.out .lp-tag{visibility:hidden}
.lp-hook.out::after{content:attr(data-who);margin-top:12px;font-size:12px;line-height:1.35;color:#cfe0d7;text-align:center;max-width:96px}
.lp-hook.out.late::after{color:#F2B9AE}
.lp-board-foot{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(255,255,255,.12);margin-top:10px;padding-top:12px;color:#cfe0d7;font-size:13.5px}
.lp-board-foot .late{color:#F2B9AE}

.lp-chat{position:absolute;right:-18px;bottom:0;width:min(318px,82%);background:var(--lp-white);border-radius:18px;padding:14px;
  box-shadow:0 24px 48px -20px rgba(18,26,23,.35),0 0 0 1px rgba(18,26,23,.06)}
.lp-chat-head{display:flex;align-items:center;gap:10px;padding:2px 4px 10px;border-bottom:1px solid var(--lp-line);margin-bottom:10px}
.lp-chat-head img{width:32px;height:32px;border-radius:9px}
.lp-chat-head b{display:block;font-size:14.5px}
.lp-chat-head small{color:var(--lp-graphite);font-size:12.5px}
.lp-msg{background:#EEF3EF;border-radius:4px 14px 14px 14px;padding:9px 12px;font-size:14px;line-height:1.4;margin-bottom:8px;max-width:92%}
.lp-msg time{display:block;font-size:11.5px;color:var(--lp-graphite);margin-top:3px;text-align:right}
.lp-msg.ok{background:#E3F1E8}
.lp-msg .btns{display:flex;gap:6px;margin-top:8px}
.lp-msg .btns span{flex:1;text-align:center;font-size:12.5px;font-weight:600;padding:7px 6px;border-radius:9px;background:#fff;border:1px solid var(--lp-line)}
.lp-msg .btns span.go{background:var(--lp-forest-2);color:#fff;border-color:var(--lp-forest-2)}
@media(max-width:560px){.lp-scene{padding-bottom:0}.lp-chat{position:relative;right:auto;width:100%;margin-top:-18px}
  .lp-rail{grid-template-columns:repeat(4,1fr);gap:12px 6px}.lp-tag b{font-size:16px}.lp-tag span{font-size:10px}}

/* одна оркестрована анімація героя (лише якщо користувач не вимкнув рух) */
@media (prefers-reduced-motion:no-preference){
  .lp-anim .lp-hook.take .lp-tag{animation:lpLift .9s cubic-bezier(.3,.7,.2,1) .7s both}
  .lp-anim .lp-hook.take.done::after{animation:lpFade .4s ease both}
  .lp-anim .lp-msg.m1{animation:lpIn .45s ease 1.4s both}
  .lp-anim .lp-msg.m2{animation:lpIn .45s ease 2.3s both}
  @keyframes lpLift{0%{transform:none;opacity:1}100%{transform:translateY(-26px) rotate(-10deg);opacity:0}}
  @keyframes lpFade{from{opacity:0}to{opacity:1}}
  @keyframes lpIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}
.lp-anim .lp-hook.take.done .lp-tag{visibility:hidden}

/* ── Де працює ─────────────────────────────────────────────────────────── */
.lp-where{padding:28px 0;border-block:1px solid var(--lp-line);background:var(--lp-white)}
.lp-where .wrap{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.lp-where p{margin:0;font-weight:600;flex:0 0 auto}
.lp-where ul{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:0;padding:0;color:var(--lp-graphite)}
.lp-where li{display:flex;align-items:center;gap:9px;font-size:15.5px}
.lp-where svg{width:22px;height:22px;stroke:var(--lp-forest-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── Було / стало ──────────────────────────────────────────────────────── */
.lp-compare{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);overflow:hidden;background:var(--lp-white)}
.lp-compare > div{padding:28px clamp(20px,3vw,36px)}
.lp-compare .before{background:#F7F7F4}
.lp-compare .after{background:var(--lp-white);border-left:1px solid var(--lp-line)}
.lp-compare h3{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:18px}
.lp-compare h3 small{font-weight:500;color:var(--lp-graphite);font-size:14px}
.lp-compare ul{list-style:none;margin:0;padding:0}
.lp-compare li{padding:13px 0 13px 30px;border-top:1px solid var(--lp-line);position:relative;line-height:1.45}
.lp-compare li:first-child{border-top:0}
.lp-compare .before li::before{content:'';position:absolute;left:6px;top:22px;width:12px;height:2px;background:#A7AFAA}
.lp-compare .after li::before{content:'';position:absolute;left:4px;top:16px;width:11px;height:6px;border-left:2px solid var(--lp-forest-2);border-bottom:2px solid var(--lp-forest-2);transform:rotate(-45deg)}
@media(max-width:760px){.lp-compare{grid-template-columns:1fr}.lp-compare .after{border-left:0;border-top:1px solid var(--lp-line)}}

/* ── Як підключити (послідовність) ─────────────────────────────────────── */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:st;list-style:none;padding:0;margin:0}
.lp-steps li{background:var(--lp-white);border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);padding:26px;counter-increment:st;display:flex;flex-direction:column}
.lp-steps li::before{content:counter(st);font-family:var(--lp-display);font-weight:500;font-size:44px;line-height:1;color:var(--lp-forest-2);margin-bottom:18px}
.lp-steps p{color:var(--lp-graphite);margin:0 0 18px}
.lp-mini{margin-top:auto;background:var(--lp-paper);border-radius:12px;padding:12px;font-size:13.5px}
.lp-mini .row2{display:flex;gap:6px;flex-wrap:wrap}
.lp-mini .chip{background:#fff;border:1px solid var(--lp-line);border-radius:9px;padding:7px 10px;font-weight:600}
.lp-mini .chip.go{background:var(--lp-forest-2);border-color:var(--lp-forest-2);color:#fff}
.lp-mini .line{display:flex;justify-content:space-between;padding:6px 2px;border-bottom:1px dashed var(--lp-line)}
.lp-mini .line:last-child{border-bottom:0}
.lp-mini .line b{font-family:var(--lp-display);font-weight:500}
@media(max-width:900px){.lp-steps{grid-template-columns:1fr}}

/* ── Можливості (асиметрична сітка) ────────────────────────────────────── */
.lp-feats{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.lp-feat{background:var(--lp-white);border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);padding:26px;grid-column:span 2}
.lp-feat.wide{grid-column:span 3}
.lp-feat.dark{background:var(--lp-forest);border-color:var(--lp-forest);color:#fff}
.lp-feat.dark p{color:#cfe0d7}
.lp-feat p{color:var(--lp-graphite);margin:0}
.lp-feat .ico{width:40px;height:40px;border-radius:11px;background:var(--lp-sage);display:grid;place-items:center;margin-bottom:18px}
.lp-feat.dark .ico{background:rgba(255,255,255,.1)}
.lp-feat .ico svg{width:22px;height:22px;stroke:var(--lp-forest-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-feat.dark .ico svg{stroke:var(--lp-brass)}
.lp-remind{margin-top:18px;background:rgba(255,255,255,.07);border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.45}
.lp-remind b{color:#F2B9AE;font-weight:600}
@media(max-width:960px){.lp-feat,.lp-feat.wide{grid-column:span 3}}
@media(max-width:640px){.lp-feats{grid-template-columns:1fr}.lp-feat,.lp-feat.wide{grid-column:auto}}

/* ── У роботі щодня (цифри) ────────────────────────────────────────────── */
.lp-proof{background:var(--lp-forest);color:#fff}
.lp-proof .lp-kicker{color:var(--lp-brass)}
.lp-proof h2{color:#fff}
.lp-proof .lp-lead{color:#cfe0d7}
.lp-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:40px;border-top:1px solid rgba(255,255,255,.15)}
.lp-nums div{padding:26px 22px 4px 0}
.lp-nums b{display:block;font-family:var(--lp-display);font-weight:500;font-size:clamp(38px,5vw,60px);line-height:1;letter-spacing:-.03em;color:#fff}
.lp-nums span{display:block;margin-top:10px;color:#cfe0d7;font-size:15px;max-width:22ch}
@media(max-width:760px){.lp-nums{grid-template-columns:1fr 1fr}}

/* ── Тарифи ────────────────────────────────────────────────────────────── */
.lp-period{display:inline-flex;background:var(--lp-white);border:1px solid var(--lp-line);border-radius:12px;padding:4px;margin-bottom:28px}
.lp-period button{border:0;background:transparent;font:600 15px var(--lp-body);padding:9px 16px;border-radius:9px;color:var(--lp-graphite);cursor:pointer}
.lp-period button[aria-pressed="true"]{background:var(--lp-forest-2);color:#fff}
.lp-period small{font-weight:500;opacity:.85}
.lp-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
.lp-plan{background:var(--lp-white);border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);padding:28px;display:flex;flex-direction:column}
.lp-plan.main{border:2px solid var(--lp-forest-2);box-shadow:0 24px 48px -28px rgba(30,90,71,.45)}
.lp-plan .badge{align-self:flex-start;background:var(--lp-brass-soft);color:var(--lp-brass-ink);font-weight:600;font-size:13px;border-radius:999px;padding:3px 10px;margin-bottom:10px}
.lp-plan .price{font-family:var(--lp-display);font-weight:500;font-size:40px;letter-spacing:-.03em;margin:8px 0 0}
.lp-plan .price small{font-family:var(--lp-body);font-size:15px;color:var(--lp-graphite);letter-spacing:0}
.lp-plan .per{color:var(--lp-graphite);font-size:14px;min-height:20px}
.lp-plan .limit{margin:18px 0 0;padding:12px 14px;background:var(--lp-paper);border-radius:10px;font-weight:600;font-size:15px}
.lp-plan ul{list-style:none;padding:0;margin:16px 0 24px;flex:1}
.lp-plan li{padding:6px 0 6px 26px;position:relative;font-size:15.5px}
.lp-plan li::before{content:'';position:absolute;left:3px;top:13px;width:10px;height:5px;border-left:2px solid var(--lp-forest-2);border-bottom:2px solid var(--lp-forest-2);transform:rotate(-45deg)}
.lp-plan .btn{width:100%}
.lp-plans-note{margin-top:20px;color:var(--lp-graphite);font-size:15px}
@media(max-width:960px){.lp-plans{grid-template-columns:1fr;max-width:520px}}

/* ── Дані й довіра ─────────────────────────────────────────────────────── */
.lp-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.lp-trust div{border-top:2px solid var(--lp-ink);padding-top:16px}
.lp-trust p{color:var(--lp-graphite);margin:0;font-size:15.5px}
@media(max-width:900px){.lp-trust{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.lp-trust{grid-template-columns:1fr}}

/* ── Питання ───────────────────────────────────────────────────────────── */
.lp-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px)}
.lp-faq details{border-top:1px solid var(--lp-line);padding:18px 0}
.lp-faq details:last-child{border-bottom:1px solid var(--lp-line)}
.lp-faq summary{font-size:17.5px}
.lp-faq details p{color:var(--lp-graphite)}
@media(max-width:860px){.lp-faq{grid-template-columns:1fr}}

/* ── Фінальний заклик ──────────────────────────────────────────────────── */
.lp-final{padding:0 0 clamp(64px,8vw,104px)}
.lp-final-box{background:var(--lp-forest);color:#fff;border-radius:28px;padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.4fr) auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.lp-final-box h2{color:#fff;margin-bottom:10px}
.lp-final-box p{color:#cfe0d7;margin:0}
.lp-final-box .num{position:absolute;right:-12px;bottom:-46px;font-family:var(--lp-display);font-weight:500;font-size:220px;line-height:1;color:rgba(255,255,255,.04);letter-spacing:-.05em;pointer-events:none}
.lp-final-box .lp-cta{position:relative}
@media(max-width:760px){.lp-final-box{grid-template-columns:1fr}}

/* фокус для клавіатури */
.lp a:focus-visible,.lp button:focus-visible,.lp summary:focus-visible{outline:3px solid var(--lp-brass);outline-offset:3px;border-radius:8px}

.lp-search{margin-top:18px;background:var(--lp-paper);border-radius:12px;padding:10px;font-size:14px}
.lp-search .q{background:#fff;border:1px solid var(--lp-line);border-radius:9px;padding:8px 10px;margin-bottom:6px;color:var(--lp-graphite)}
.lp-search .res{display:flex;justify-content:space-between;gap:10px;padding:8px 6px;border-bottom:1px dashed var(--lp-line)}
.lp-search .res:last-child{border-bottom:0}
.lp-search .res b{font-family:var(--lp-display);font-weight:500;margin-right:6px}
.lp-search em{font-style:normal;color:#1E7A4E;font-weight:600}
.lp-search em.busy{color:var(--lp-amber)}

/* панель і бот — два рівноправні способи */
.lp-ways{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lp-ways article{background:var(--lp-white);border:1px solid var(--lp-line);border-radius:var(--lp-r-lg);padding:28px}
.lp-ways .ico{width:44px;height:44px;border-radius:12px;background:var(--lp-sage);display:grid;place-items:center;margin-bottom:18px}
.lp-ways .ico svg{width:24px;height:24px;stroke:var(--lp-forest-2);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lp-ways p{color:var(--lp-graphite);margin:0 0 16px}
.lp-ways ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lp-ways li{display:flex;gap:10px;align-items:baseline}
.lp-ways li::before{content:'';flex:0 0 8px;height:8px;border-radius:2px;background:var(--lp-brass);transform:translateY(-1px)}
@media(max-width:760px){.lp-ways{grid-template-columns:1fr}}