/* ChystoCRM landing. Tokens, fonts, buttons, fields and sheets come from /style.css; this file lays out the page. */
body.lp{background:var(--bg)}
.lp .wrap{max-width:1160px;margin:0 auto;padding:0 20px}
.lp h1,.lp h2,.lp h3{margin:0;letter-spacing:-.02em}
.lp h2{font-size:clamp(28px,4vw,40px);font-weight:800;line-height:1.15}
.lp p{line-height:1.55}
.lp a:not(.btn){color:var(--accent)}
.btn.lg{height:56px;padding:0 26px;font-size:17px}
.mark{display:inline-block;width:34px;height:34px;flex:0 0 auto}.mark svg{width:100%;height:100%;display:block}.mark.sm{width:24px;height:24px}

/* header */
.ld-top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.ld-top .wrap{display:flex;align-items:center;gap:20px;height:64px}
.ld-logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)!important;font-size:22px;font-weight:800;letter-spacing:-.02em}
.ld-logo b span{color:var(--accent);font-weight:600}
.ld-top nav{display:flex;gap:22px;margin-left:auto;align-items:center}
.ld-top nav a,.ld-top nav .link{color:var(--fg)!important;text-decoration:none;font-weight:600;font-size:15px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit}
@media (max-width:760px){.ld-top nav a{display:none}.ld-top nav{gap:14px}}

/* hero */
.hero{padding:64px 0 56px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.kicker{margin:0 0 14px;color:var(--accent);font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase}
.kicker.light{color:#A89CFF}
.hero h1{font-size:clamp(40px,6.4vw,68px);font-weight:800;line-height:1.02}
.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);margin:18px 0 0;max-width:560px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ticks{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:8px 20px;color:var(--muted);font-weight:600;font-size:15px}
.ticks li::before{content:"✓";color:var(--accent);font-weight:800;margin-right:6px}
.hero-demo{position:relative;display:flex;justify-content:center;padding:10px 0 40px}
.hero-demo::before{content:"";position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent)}
.phone{position:relative;width:310px;border-radius:38px;padding:10px;background:#0E1424;box-shadow:0 30px 70px rgba(14,20,36,.30)}
.ph-top{display:flex;align-items:center;gap:8px;padding:12px 14px;color:#F2F3F5;font-weight:800;font-size:15px;border-bottom:1px solid #262A31;background:#111316;border-radius:28px 28px 0 0}
.ph-body{background:#111316;color:#F2F3F5;border-radius:0 0 28px 28px;padding:12px;display:flex;flex-direction:column;gap:10px}
.ph-row,.ph-line{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ph-row b{font-size:20px}
.ph-btn{background:#A89CFF;color:#0E1424;font-weight:700;font-size:12px;border-radius:10px;padding:8px 10px}
.ph-post{background:#1C1F24;border:1px solid #30353D;border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.ph-tile{border:1px solid #30353D;border-left:4px solid #A89CFF;border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:3px}
.ph-tile.done{border-left-color:#4ADE80}.ph-tile.wait{border-left-color:#FFB066}
.ph-tile .muted{color:#A3A8B0}
.ph-tile .pill{font-style:normal;font-size:11px;padding:2px 8px;background:#262A31}
.ph-tile .pill.run{color:#A89CFF}.ph-tile .pill.done{color:#4ADE80}
.bubble{position:absolute;left:0;bottom:6px;margin:0;display:flex;gap:10px;align-items:center;max-width:280px;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:16px;padding:12px 14px;font-weight:700;font-size:14px;box-shadow:0 12px 30px rgba(14,20,36,.12)}
.bub-ico{width:28px;height:28px;border-radius:50%;background:#5EEAD4;color:#0E1424;display:grid;place-items:center;flex:0 0 auto}.bub-ico .i{width:16px;height:16px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{padding-top:36px}.bubble{left:50%;transform:translateX(-50%);bottom:0}}

/* bands */
.band{padding:72px 0}
.band.mist{background:var(--surface2)}
.band.deep{background:#0E1424;color:#F2F3F5}
.band.deep .lead,.band.deep p{color:#B9BED0}
.pains{margin-top:28px;display:flex;flex-direction:column;gap:10px}
.pains-head,.pains article{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px}
.pains-head span{font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pains-head span+span{color:var(--accent)}
.pains article{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px 20px}
.pain{margin:0;font-weight:700;font-size:17px}
.fix{margin:0;color:var(--muted)}
@media (max-width:700px){.pains-head{display:none}.pains article{grid-template-columns:1fr;gap:6px}}

.steps{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.steps li{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px}
.steps time{font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.steps h3{font-size:18px}
.steps p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:1000px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.steps{grid-template-columns:1fr}}

.det-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
.det-grid h2{color:#FFFFFF}
.det-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.det-list li{background:#1C1F24;border:1px solid #30353D;border-radius:18px;padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.det-list b{color:#FFFFFF;font-size:17px}.det-list span{color:#B9BED0;line-height:1.5}
@media (max-width:800px){.det-grid{grid-template-columns:1fr;gap:24px}}

.feats{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.feats div{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:8px}
.feats [data-icon]{width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--accent);display:grid;place-items:center}
.feats [data-icon] .i{width:22px;height:22px}
.feats b{font-size:17px}.feats p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:900px){.feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.feats{grid-template-columns:1fr}}

.why ul{list-style:none;padding:0;margin:28px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.why li{display:flex;flex-direction:column;gap:6px}
.why b{font-size:18px}.why span{color:var(--muted)}
@media (max-width:900px){.why ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.why ul{grid-template-columns:1fr}}

.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:36px}
.price .big{font-size:52px;font-weight:800;margin:14px 0 0;letter-spacing:-.02em}
.price-sub{margin:4px 0 22px;color:var(--muted)}
.price-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;font-weight:600}
.price-list li::before{content:"✓";color:var(--accent);font-weight:800;margin-right:8px}
@media (max-width:760px){.price{grid-template-columns:1fr;padding:24px}}

.su-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:40px;align-items:start}
.su-steps{padding-left:22px;margin:22px 0 0;display:flex;flex-direction:column;gap:14px}
.su-steps b{display:block;font-size:17px}.su-steps span{color:var(--muted)}
.card.su{padding:24px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.slug{display:flex;align-items:center;gap:0}
.slug input{border-top-right-radius:0;border-bottom-right-radius:0;min-width:0}
.slug .base{height:var(--ctl);display:flex;align-items:center;padding:0 12px;border:1px solid var(--line);border-left:0;border-radius:0 12px 12px 0;background:var(--surface2);color:var(--muted);white-space:nowrap;font-size:15px}
#slugHint{color:var(--muted)}#slugHint.good{color:var(--good)}#slugHint.bad{color:var(--bad)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.ok-box{display:flex;flex-direction:column;gap:10px}.ok-box .url{font-weight:800;color:var(--accent)}
@media (max-width:800px){.su-grid{grid-template-columns:1fr;gap:20px}.grid2{grid-template-columns:1fr}}

.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 20px;margin-top:10px}
.faq details:first-of-type{margin-top:24px}
.faq summary{cursor:pointer;font-weight:700;font-size:17px}
.faq details p{margin:10px 0 0;color:var(--muted)}

.final{text-align:center}
.final h2{color:#FFFFFF}
.final p{margin:12px 0 24px}
.final-sup,.sup-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 18px;margin-top:24px}
.final-sup a,.sup-row a{display:inline-flex;align-items:center;gap:6px;color:#A89CFF!important;font-weight:700}
.final-sup .i,.foot-sup .i{width:18px;height:18px}

.ld-foot{padding:28px 0;border-top:1px solid var(--line)}
.ld-foot .wrap{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;color:var(--muted);font-size:14px}
.ld-foot a{color:var(--muted)!important}
.foot-sup{margin-left:auto;display:flex;gap:14px;flex-wrap:wrap}
.foot-sup a{display:inline-flex;align-items:center;gap:6px}
.bubble{width:max-content;max-width:min(320px,92vw)}