:root{
    --bg:#0f1115;
    --card:#151922;
    --soft:#1b2130;
    --accent:#6EE7B7; /* мята */
    --accent-2:#60A5FA; /* голубой */
    --text:#e9eef7;
    --muted:#aab3c2;
    --danger:#ff7a7a;
    --ok:#7CFC98;
    --warning:#ffd166;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:16px;
    --radius-lg:22px;
    --container:1180px;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #e8f0ff !important;
}
input::-moz-placeholder{
    color:#999;
    opacity:1
}

input:-ms-input-placeholder{
    color:#999
}

input::-webkit-input-placeholder{
    color:#999
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.55}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 22px;border-radius:14px;border:1px solid transparent;background:linear-gradient(180deg,var(--accent),#16a34a);color:#03130a;font-weight:800;letter-spacing:.2px;box-shadow:var(--shadow);transition:.25s}
.btn:hover{transform:translateY(-1px);filter:saturate(1.1)}
.btn--ghost{background:transparent;border-color:#2a3347;color:var(--text)}
.tag{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#0f1522;border:1px solid #223051;color:#cde3ff;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.grid{display:grid;gap:24px}
.card{background:var(--card);border:1px solid #222b3b;border-radius:var(--radius);box-shadow:var(--shadow);padding: 20px}
.card--soft{background:var(--soft)}
.muted{color:var(--muted)}
.h1{font-size:clamp(30px,5vw,52px);line-height:1.1;font-weight:800;margin:0 0 12px}
.h2{font-size:clamp(22px,3.4vw,36px);line-height:1.2;font-weight:800;margin:0 0 12px}
.h3{font-size:clamp(18px,2.6vw,24px);font-weight:800;margin:0 0 8px}
.lead{font-size:clamp(16px,2.2vw,18px);color:#dbe6ff}
.list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.list li{display:flex;gap:10px}
.list .b{color:var(--accent); white-space: nowrap}
.hero{position:relative;padding:52px 0 36px}
.hero__wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:flex-start}
.hero__panel{padding:22px;border-radius:var(--radius);border:1px solid #26324a;background:linear-gradient(180deg,#111726,#0c1220)}
.hero__badges{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.demo{display:grid;gap:14px}
.demo__chat{display:grid;gap:10px}
.bubble{padding:14px 16px;border-radius:14px;max-width:100%;width:100%;border:1px solid #253049}
.bubble--ai{background:#0f1a2a}
.bubble--user{background:#121e2d}
.audio{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:12px;border:1px dashed #2b3957;border-radius:12px;background:#0c1424}
.audio small{color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.kpi{padding:14px;border:1px solid #2a3550;border-radius:12px;background:#0f1524}
.kpi b{font-size:18px;color:#c5ffdf}
.section{padding:64px 0}
.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#0e1626;border:1px solid #26324a;color:#b9c6dc;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}
.check{color:var(--ok);font-weight:800}
.x{color:var(--danger);font-weight:800}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.steps{counter-reset:s;
    --gap: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.step{position:relative;padding:18px;border:1px solid #25324b;border-radius:14px;background:#0e1423}
.step:before{counter-increment:s;content:counter(s);position:absolute;left:-8px;top:-8px;background:var(--accent-2);color:#051327;border-radius:999px;font-weight:800;padding:6px 10px}
.benefit{padding:18px;border:1px solid #27334d;border-radius:14px;background:#0f1626}
.case{padding:18px;border:1px solid #283652;border-radius:14px;background:#0d1524}
.price{padding:22px;border:1px solid #2b3955;border-radius:18px;background:linear-gradient(180deg,#111827,#0a111f)}
.price__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.price .num{font-size:28px;font-weight:800;color:#d6f5ff}
.cta-block{padding:28px;border:1px solid #26324a;border-radius:var(--radius-lg);background:linear-gradient(180deg,#101827,#0b1322);display:grid;gap:14px;justify-items:start}
.faq-item{border:1px solid #26324a;border-radius:14px;background:#0f1626;overflow:hidden}
.faq-q{width:100%;text-align:left;background:transparent;color:var(--text);font-weight:700;padding:16px;border:0;border-bottom:1px solid #26324a;cursor:pointer}
.faq-a{padding:16px;color:#c6d3ea;display:none}
.faq-item.open .faq-a{display:block}
.roi{padding:22px;border:1px solid #26324a;border-radius:16px;background:#0d1424}
.roi .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.roi label{font-size:12px;color:#b8c4db;white-space: nowrap}
input[type=text],input[type=number],input[type=tel],input[type=email],textarea{width:100%;padding:12px;border-radius:12px;border:1px solid #26324a;background:#0a1120;color:#e8f0ff;resize: vertical;font-family: Arial, sans-serif}
input[type=checkbox],#audio_bar{color-scheme: dark}
.roi__out{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.badge{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;background:#0d1423;border:1px solid #26324a;color:#d5e6ff;font-weight:700}
.badge b{color:#eafff6}
.sticky-cta{position:sticky;bottom:14px;z-index:9;margin-top: 70px}
.sticky-cta .wrap{display:flex;justify-content: space-between;align-items: center}
.sticky-cta .wrap .btn{padding:14px 20px;border-radius:999px}
footer{padding:44px 0;border-top:1px solid #26324a;background:#0c1220;margin-top:40px}
.logos{display:flex;flex-wrap:wrap;gap:16px;opacity:.9}
.logos img{height:34px;filter:grayscale(100%) opacity(.8)}
#leadForm{
    padding: 10px;
    border-radius: 10px;
}
.roi__out .h3{
    font-size: 20px;
}
.roi__out .card--soft {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between
}
.flex{
    display: flex;
}
.flex-col{
    flex-direction: column;
}
.gap-10{
    gap: 10px;
}
#leadForm .btn{
    font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 16px;
    cursor: pointer;
    justify-content: center;
}
#play__audio{
    width: 50px;
    height: 50px;
}
.tag, .pill{
    margin-bottom: 12px;
}
footer > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
footer nav a{
    margin-right: 20px;
}
footer nav a:last-child{
    margin-right: 0;
}
nav a:hover {
    filter: opacity(0.75);
}
.telephone > div{
    position: relative;
}
.telephone .telephone-country-code{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    margin: 1px;
    z-index: 1;
    font-family: Inter, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--soft);
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
    color: #999;
}
.telephone .telephone-country-code.valid{
    color: var(--accent);
}
.telephone .telephone-country-code.disabled{
    background: #fbfbff;
}
.telephone input{
    padding-left: 44px
}
@media (max-width:1024px){
    .hero__wrap{grid-template-columns:1fr}
    .kpis{grid-template-columns:1fr 1fr}
    .cols-3{grid-template-columns:1fr 1fr}
    .roi .row{grid-template-columns:1fr 1fr}
    .roi__out{grid-template-columns:1fr 1fr}
    .steps{grid-template-columns: repeat(2, 1fr)}
}
@media (max-width:800px){
    .sticky-cta .wrap{
        justify-content: center;
        flex-direction: column;
    }
    footer > div{
        flex-direction: column;
        text-align: center;
    }
}
@media (max-width:640px){
    .kpis{grid-template-columns:1fr}
    .cols-3,.cols-2{grid-template-columns:1fr}
    .hero{padding-top:34px}
    .hero__cta{gap:10px}
    .btn{width:100%;justify-content:center}
    .roi .row{grid-template-columns:1fr}
    .roi__out{grid-template-columns:1fr}
    .steps{grid-template-columns: 1fr}
}