/* veyr.uz - the styles of the pages (task 146). Phone first (360 px); IBM Plex Sans (SIL OFL 1.1, fonts/LICENSE-ibm-plex-sans.txt), self-hosted. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-cyrillic-400-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-sans-cyrillic-600-normal.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

:root{--bg:#f5f7f6;--surface:#fff;--border:#e5ebe8;--text:#183330;--text2:#405950;--muted:#4f655b;--primary:#087f70;--primary-hover:#08695e;--soft:#e8f5f0;--radius:12px;--font:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--font);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary)}
h1,h2,h3{line-height:1.2;margin:0 0 .6em;font-weight:600}
h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.1rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--primary);outline-offset:2px}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.wrap--narrow{max-width:760px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:10px;border:2px solid var(--primary);font:600 1rem/1 var(--font);text-decoration:none;cursor:pointer;text-align:center}
.btn--primary{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn--ghost{background:transparent;color:var(--primary)}
.btn--ghost:hover{background:var(--soft)}
.btn--sm{min-height:40px;padding:0 16px;font-size:.95rem}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border)}
.top__in{display:flex;align-items:center;gap:12px;min-height:60px}
.logo{display:block;line-height:0;flex:none}
.nav{display:none;gap:20px;margin-left:12px}
.nav a,.burger__panel a{color:var(--text);text-decoration:none;font-weight:500}
.nav a:hover{color:var(--primary)}
.top__right{display:flex;align-items:center;gap:10px;margin-left:auto}
.top__phone{display:none;color:var(--text);font-weight:600;text-decoration:none}
.lang,.burger{position:relative}
.lang summary,.burger summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;font-weight:600;padding:0 6px}
.lang summary::-webkit-details-marker,.burger summary::-webkit-details-marker{display:none}
.lang ul{position:absolute;right:0;top:100%;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--border);border-radius:10px;min-width:150px;box-shadow:0 8px 24px rgba(24,51,48,.12)}
.lang li a{display:block;padding:10px 12px;color:var(--text);text-decoration:none;border-radius:8px}
.lang li a:hover,.lang li a[aria-current]{background:var(--soft)}
.burger summary span,.burger summary span::before,.burger summary span::after{display:block;width:22px;height:2px;background:var(--text);position:relative;content:""}
.burger summary span::before{position:absolute;top:-7px}.burger summary span::after{position:absolute;top:7px}
.burger__panel{position:absolute;right:0;top:100%;display:flex;flex-direction:column;min-width:220px;padding:8px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(24,51,48,.12)}
.burger__panel a{padding:12px}
.top__apply{display:none}

/* sections */
.sec{padding:40px 0}
.sec__intro{color:var(--text2);max-width:640px}
.hero{padding:28px 0 36px;background:linear-gradient(180deg,#fff 0,var(--bg) 100%)}
.hero__in{display:grid;gap:24px}
.hero__sub{font-size:1.05rem;color:var(--text2)}
.hero__actions{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.hero__points{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:6px}
.hero__points:empty{display:none}
.hero__points li::before{content:"\2713";color:var(--primary);font-weight:600;margin-right:8px}
.hero__trust{font-size:.9rem;color:var(--muted);margin:0}
.hero__media img{border-radius:var(--radius);border:1px solid var(--border);box-shadow:0 12px 32px rgba(24,51,48,.12)}

.cards__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px}
.card h3{margin-bottom:.4em}.card p{margin:0;color:var(--text2)}
.card img{margin-top:14px;border-radius:8px;border:1px solid var(--border)}
.card__n{display:none}
.cards--steps .card__n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--primary);color:#fff;font-weight:600;margin-bottom:10px}
.cards--pains .card{border-left:4px solid var(--primary)}
.cards--mini .card{padding:14px}

.textimage__in{display:grid;gap:20px;align-items:center}
.textimage__media img{border-radius:var(--radius);border:1px solid var(--border)}
.gallery__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.gallery figure{margin:0}.gallery img{border-radius:var(--radius);border:1px solid var(--border)}
.gallery figcaption{font-size:.9rem;color:var(--muted);margin-top:6px}

.compare__scroll{overflow-x:auto;margin-top:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}
.compare table{border-collapse:collapse;width:100%;min-width:520px}
.compare th,.compare td{padding:12px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top;font-size:.95rem}
.compare thead th{font-weight:600}
.compare tbody th{font-weight:500}
.compare__us{background:var(--soft);font-weight:600}
.compare__note{font-size:.85rem;color:var(--muted);margin-top:10px}

.price__card{max-width:560px;margin-top:16px;padding:22px;background:var(--surface);border:2px solid var(--primary);border-radius:var(--radius)}
.price__main{font-size:1.4rem;font-weight:600;margin-bottom:12px}
.price__list{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:6px}
.price__list li::before{content:"\2713";color:var(--primary);font-weight:600;margin-right:8px}
.calc{display:grid;gap:8px;margin:0 0 16px;padding:14px;background:var(--bg);border-radius:10px}
.calc input{width:100px;min-height:48px;padding:0 12px;font:inherit;border:2px solid var(--border);border-radius:8px;background:#fff}
.calc__result{margin:0;font-weight:600}
.price__fiscal{color:var(--muted);font-size:.95rem}

.video{position:relative;display:block;max-width:760px;margin:16px 0;border-radius:var(--radius);overflow:hidden;background:#0d2623;aspect-ratio:16/9}
.video img{width:100%;height:100%;object-fit:cover}
.video video{width:100%;height:100%}
.video__play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;background:rgba(8,127,112,.92)}
.video__play::after{content:"";position:absolute;left:29px;top:22px;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent}
.demo__actions,.buttons__list,.lead__actions{display:flex;flex-direction:column;gap:12px;margin:16px 0}
.demo__logins{display:grid;gap:10px;margin:18px 0;padding:16px;background:var(--surface);border:1px dashed var(--primary);border-radius:var(--radius)}
.demo__logins dt{font-weight:600}.demo__logins dd{margin:0}
code{font:500 .95em ui-monospace,Consolas,monospace;background:var(--soft);padding:2px 6px;border-radius:6px}
.demo__note,.lead__promise{color:var(--muted);font-size:.95rem}
.stories__list{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.stories blockquote{margin:0 0 10px;padding:0;font-size:1.05rem}
.stories__name{color:var(--muted);margin:0}

.faq__list{display:grid;gap:10px;margin-top:16px}
.faq details{background:var(--surface);border:1px solid var(--border);border-radius:10px}
.faq summary{cursor:pointer;padding:16px;font-weight:600;list-style:none;min-height:48px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-size:1.3rem;line-height:1;color:var(--primary)}
.faq details[open] summary::after{content:"\2212"}
.faq .prose{padding:0 16px 8px}

.lead{background:var(--primary);color:#fff;scroll-margin-top:70px}
.lead h2{color:#fff}.lead .sec__intro,.lead__promise{color:#e8f5f0}
.lead .btn--primary{background:#fff;color:var(--primary);border-color:#fff}
.lead .btn--ghost{color:#fff;border-color:#fff}.lead .btn--ghost:hover{background:rgba(255,255,255,.12)}
.prose h2{font-size:1.3rem}.prose h3{font-size:1.1rem}.prose ul,.prose ol{padding-left:1.3em}.prose li{margin-bottom:.3em}

/* footer */
.foot{background:#10231f;color:#cfe0da;padding:32px 0 88px}
.foot a{color:#e8f5f0}
.foot__in{display:grid;gap:20px}
.foot__col{display:flex;flex-direction:column;gap:8px;font-size:.95rem}
.foot__req{margin:0;color:#9fb8b0;font-size:.9rem}
.foot .logo img{filter:brightness(0) invert(1)}
.foot__bottom{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;padding-top:16px;border-top:1px solid #24413b;font-size:.85rem;color:#9fb8b0}

/* sticky bar (phone) */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:8px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--border);transition:transform .2s}
.sticky a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:10px;border:2px solid var(--primary);color:var(--primary);font-weight:600;text-decoration:none;padding:0 6px;text-align:center}
.sticky .sticky__apply{background:var(--primary);color:#fff}
.sticky.is-hidden{transform:translateY(110%)}

@media (min-width:768px){
 h1{font-size:2.4rem}h2{font-size:1.9rem}
 .sec{padding:64px 0}.hero{padding:56px 0 64px}
 .nav{display:flex}.burger,.sticky{display:none}
 .top__phone,.top__apply{display:inline-flex}
 .hero__in{grid-template-columns:1.05fr .95fr;align-items:center;gap:40px}
 .hero__actions{flex-direction:row}
 .cards__list{grid-template-columns:repeat(2,1fr)}
 .cards--mini .cards__list,.cards--pains .cards__list{grid-template-columns:repeat(3,1fr)}
 .textimage__in{grid-template-columns:1fr 1fr;gap:40px}.textimage--left .textimage__media{order:-1}
 .gallery__list{grid-template-columns:repeat(2,1fr)}
 .demo__actions,.buttons__list,.lead__actions{flex-direction:row}
 .stories__list{grid-template-columns:repeat(2,1fr)}
 .foot{padding-bottom:32px}.foot__in{grid-template-columns:2fr 1fr 1fr}
}
@media (min-width:1024px){.cards--features .cards__list,.cards--steps .cards__list{grid-template-columns:repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* The applications (task 147): the form of the lead block, the page «Спасибо» and its chips. */
.lform{display:grid;gap:10px;max-width:560px;margin:16px 0}
.lform[hidden]{display:none}
.lform__label{display:grid;gap:6px;font-weight:600}
.lform__row{display:flex;flex-direction:column;gap:10px}
.lform__phone{min-height:48px;padding:0 14px;font:inherit;font-size:1.05rem;border:2px solid transparent;border-radius:10px;background:#fff;color:var(--text)}
.lform__trap{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.lform__error{margin:0;padding:10px 12px;border-radius:8px;background:#fff;color:#b00020;font-weight:600}
.lead__consent{font-size:.85rem;color:#e8f5f0}
.lead__consent p{margin:0}
.lead__consent a{color:#fff}
.lead [data-lead-telegram][hidden]{display:none}
.thanks{padding:40px 0}
.thanks__title{font-size:1.6rem;line-height:1.25}
.step2{margin:24px 0}
.step2[hidden],.thanks__title[hidden]{display:none}
.step2__q{margin:0 0 18px}
.step2__label{margin:0 0 8px;font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{min-height:44px;padding:0 16px;border-radius:22px;border:2px solid var(--border);background:var(--surface);color:var(--text);font:500 1rem/1 var(--font);cursor:pointer}
.chip:hover{border-color:var(--primary)}
.chip[aria-pressed=true]{background:var(--primary);border-color:var(--primary);color:#fff}
.step2__text{width:100%;max-width:360px;min-height:44px;padding:0 12px;font:inherit;border:2px solid var(--border);border-radius:10px;background:#fff}
.step2__status{min-height:1.4em;margin:0;color:var(--primary);font-weight:600}
@media (min-width:640px){.lform__row{flex-direction:row}.lform__phone{flex:1}}