:root{
  --bg:#EDEFF2;
  --bg-2:#E5E8EC;
  --surface:#FFFFFF;
  --dark:#2C3138;
  --dark-2:#363D45;
  --ink:#2C3138;
  --ink-soft:#697079;
  --ink-faint:#9AA1A9;
  --accent:#2F80C9;
  --accent-2:#2569AC;
  --accent-soft:#E4F0FB;
  --teal:#3FA7C4;
  --green:#5B9E76;
  --line:#DBE0E5;
  --line-soft:#E7EBEF;
  --shadow:0 18px 44px -26px rgba(44,49,56,.34);
  --shadow-sm:0 8px 22px -16px rgba(44,49,56,.4);
  --display:'Nunito',system-ui,sans-serif;
  --body:'Manrope',system-ui,sans-serif;
  --maxw:1140px;
  --r:18px;
  --r-lg:24px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 26px}
section{position:relative}

.eyebrow{font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.03em;color:var(--accent-2);display:inline-flex;align-items:center;gap:9px;background:var(--accent-soft);padding:7px 15px;border-radius:8px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
h2.title{font-family:var(--display);font-weight:800;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.12;letter-spacing:-.01em;margin:.5em 0 .25em;color:var(--ink)}
.title .hl{color:var(--accent)}
.lead{color:var(--ink-soft);max-width:600px;font-size:1.06rem}

.btn{font-family:var(--display);font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:9px;padding:14px 28px;border-radius:10px;cursor:pointer;border:1.5px solid transparent;transition:.25s ease;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-2px)}
.btn-soft{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-soft:hover{border-color:var(--accent);color:var(--accent-2);transform:translateY(-2px)}

/* header — dark bar */
header{position:fixed;top:0;left:0;right:0;z-index:50;background:var(--dark);transition:.3s ease}
header.shrink{box-shadow:0 6px 22px -16px rgba(0,0,0,.6)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand img{height:30px;width:auto}
.menu{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0}
.menu a{font-family:var(--display);font-weight:600;font-size:.95rem;color:#C9CFD6;position:relative;padding:4px 0;transition:.2s}
.menu a:hover{color:#fff}
.menu a::after{content:"";position:absolute;left:0;right:100%;bottom:-3px;height:2px;background:var(--accent);border-radius:2px;transition:.25s}
.menu a:hover::after{right:0}
.nav .btn{padding:11px 22px;font-size:.92rem}
.burger{display:none;background:var(--dark-2);border:1px solid rgba(255,255,255,.12);border-radius:11px;cursor:pointer;padding:12px;flex-direction:column;gap:5px}
.burger span{width:22px;height:2px;background:#fff;display:block;border-radius:2px;transition:.25s}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{padding:140px 0 66px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-120px;right:-80px;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,#D6E2EF,transparent 68%);opacity:.8;pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;gap:50px;align-items:center}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,2.3vw,3.6rem);line-height:1.08;letter-spacing:-.015em;margin:.55em 0 .4em}
.hero h1 .hl{color:var(--accent)}
.hero p.sub{color:var(--ink-soft);font-size:1.13rem;max-width:520px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap}
.trust{display:flex;align-items:center;gap:14px;margin-top:30px;color:var(--ink-soft);font-size:.92rem}
.avatars{display:flex}
.avatars span{width:38px;height:38px;border-radius:50%;border:3px solid var(--bg);margin-left:-12px;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.85rem;color:#fff}
.avatars span:first-child{margin-left:0}
.trust b{color:var(--ink)}
.trust .stars{color:var(--accent)}

/* hero banner */
.heroart{position:relative}
.herobanner{background:#DCE8F4;border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;padding:6px}
.herobanner svg{display:block;width:100%;height:auto;border-radius:18px}
.floatpill{position:absolute;background:var(--surface);border-radius:14px;padding:12px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:.9rem;z-index:3}
.floatpill .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}
.fp1{top:-18px;right:18px;color:var(--accent-2)}
.fp1 .ic{background:var(--accent-soft);color:var(--accent)}
.fp2{bottom:-18px;left:18px;color:var(--ink)}
.fp2 .ic{background:#E4F1EA;color:var(--green)}

/* features strip */
.feats{padding:8px 0 4px}
.feats .wrap{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.feat{display:inline-flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:11px 20px;font-size:.94rem;color:var(--ink-soft)}
.feat b{color:var(--ink);font-weight:600}
.feat .em{font-size:1.1rem}

/* catalog */
.catalog{padding:88px 0 78px}
.head-row{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:46px}
.grid-cat{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cat{display:flex;flex-direction:column;gap:10px;min-height:158px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);transition:.25s ease}
.cat:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.cat .ico{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;background:var(--accent-soft)}
.cat:nth-child(2) .ico{background:#E9EDF1}
.cat:nth-child(3) .ico{background:#E2F1F2}
.cat:nth-child(4) .ico{background:#E4F0FB}
.cat:nth-child(5) .ico{background:#E9EDF1}
.cat:nth-child(6) .ico{background:#E2F1F2}
.cat:nth-child(7) .ico{background:#E4F0FB}
.cat .name{font-family:var(--display);font-weight:700;font-size:1.18rem;line-height:1.15;margin-top:auto}
.cat .cnt{font-size:.85rem;color:var(--ink-faint)}
.cat.all{background:var(--accent);border-color:var(--accent);justify-content:center;text-align:left}
.cat.all .ico{background:rgba(255,255,255,.18)}
.cat.all .name,.cat.all .cnt{color:#fff}
.cat.all .cnt{color:rgba(255,255,255,.85)}
.cat.all:hover{background:var(--accent-2)}

/* steps */
.steps{padding:84px 0;background:var(--bg-2)}
.steps .head-row{margin-bottom:54px}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:30px 24px;text-align:center;transition:.25s}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.step .node{width:62px;height:62px;border-radius:18px;margin:0 auto 20px;display:grid;place-items:center;background:var(--accent-soft);font-family:var(--display);font-weight:800;font-size:1.4rem;color:var(--accent-2)}
.step h4{font-family:var(--display);font-weight:700;font-size:1.18rem;margin:0 0 9px}
.step p{color:var(--ink-soft);font-size:.94rem;margin:0}

/* form */
.cta-form{padding:88px 0}
.formwrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;display:grid;grid-template-columns:.92fr 1.08fr}
.form-copy{background:#EAF1F8;padding:54px 48px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}
.form-copy::after{content:"";position:absolute;bottom:-80px;right:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,#D6E2EF,transparent 70%);opacity:.8}
.form-copy>*{position:relative;z-index:1}
.form-copy h2{font-family:var(--display);font-weight:800;font-size:clamp(1.7rem,3.2vw,2.4rem);line-height:1.12;margin:.4em 0 .35em}
.form-copy h2 .hl{color:var(--accent)}
.form-copy p{color:var(--ink-soft)}
.form-perks{list-style:none;padding:0;margin:24px 0 0}
.form-perks li{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;color:var(--ink);font-size:.96rem}
.form-perks .tick{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;margin-top:1px}
.form-fields{padding:50px 48px}
form{display:flex;flex-direction:column;gap:17px}
.field label{display:block;font-family:var(--display);font-size:.9rem;font-weight:600;color:var(--ink);margin-bottom:7px}
.field input,.field select{width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:11px;padding:14px 16px;color:var(--ink);font-family:var(--body);font-size:1rem;transition:.2s}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23697079' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field input::placeholder{color:var(--ink-faint)}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 4px rgba(47,128,201,.15)}
/* поле телефона с выбором страны (intl-tel-input) */
.iti{width:100%;display:block}
.iti__flag{background-image:url("../vendor/intl-tel-input/img/flags.png")}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.iti__flag{background-image:url("../vendor/intl-tel-input/img/flags@2x.png")}}
.iti--separate-dial-code .iti__selected-flag{background:var(--bg);border-radius:11px 0 0 11px}
.iti__country-list{font-family:var(--body);font-size:.95rem;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:220px}
.iti__country.iti__highlight{background:var(--accent-soft)}
.iti__divider{border-bottom:1px solid var(--line)}
/* чтобы input телефона совпадал с остальными полями и не «прыгал» при фокусе */
.field .iti input#phone{padding-left:96px}
.check{display:flex;gap:11px;align-items:flex-start;cursor:pointer;font-size:.86rem;color:var(--ink-soft);line-height:1.5}
.check input{position:absolute;opacity:0;width:0;height:0}
.check .box{flex:0 0 auto;width:21px;height:21px;border:1.5px solid var(--line);border-radius:6px;display:grid;place-items:center;transition:.2s;margin-top:1px;background:var(--bg)}
.check input:checked+.box{background:var(--accent);border-color:var(--accent)}
.check .box svg{opacity:0;transition:.15s}
.check input:checked+.box svg{opacity:1}
.check a{color:var(--accent-2);text-decoration:underline}
.field-err input,.field-err .flag{border-color:var(--accent)!important;background:var(--accent-soft)!important}
.errmsg{color:var(--accent-2);font-size:.8rem;margin-top:6px;display:none}
.field-err .errmsg{display:block}
.submit{margin-top:4px;justify-content:center;width:100%;font-size:1.05rem;padding:16px}
.form-note{font-size:.8rem;color:var(--ink-faint);text-align:center;margin-top:2px}
.hp{position:absolute!important;left:-9999px!important;top:-9999px!important;width:1px;height:1px;overflow:hidden}
.form-error{display:none;color:#C0392B;background:#FCEDEC;border:1px solid #F3CFCB;border-radius:10px;font-size:.86rem;text-align:center;padding:11px 14px;margin-top:4px}
.form-error.show{display:block}
.submit[disabled]{opacity:.6;cursor:default;transform:none}
.success{display:none;text-align:center;padding:40px 10px}
.success.show{display:block}
.success .ok{width:78px;height:78px;border-radius:50%;background:var(--green);display:grid;place-items:center;margin:0 auto 22px}
.success h3{font-family:var(--display);font-weight:800;font-size:1.55rem;margin:0 0 10px}
.success p{color:var(--ink-soft);margin:0}

/* faq */
.faq{padding:86px 0;background:var(--bg-2)}
.faq .head-row{margin-bottom:44px}
.acc{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:.2s}
.item.open{box-shadow:var(--shadow);border-color:transparent}
.q{width:100%;background:none;border:0;cursor:pointer;color:var(--ink);text-align:left;display:flex;justify-content:space-between;align-items:center;gap:18px;padding:22px 26px;font-family:var(--display);font-weight:700;font-size:1.08rem}
.q .plus{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--accent-soft);position:relative;transition:.25s}
.q .plus::before,.q .plus::after{content:"";position:absolute;background:var(--accent-2);top:50%;left:50%;transform:translate(-50%,-50%);border-radius:2px}
.q .plus::before{width:12px;height:2px}
.q .plus::after{width:2px;height:12px;transition:.25s}
.item.open .plus{background:var(--accent)}
.item.open .plus::before,.item.open .plus::after{background:#fff}
.item.open .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.a p{color:var(--ink-soft);padding:0 26px 24px;margin:0}
.a b{color:var(--ink);font-weight:700}

/* footer — dark */
footer{background:var(--dark);padding:60px 0 30px;color:#C9CFD6}
.foot{display:flex;justify-content:space-between;align-items:flex-start;gap:34px;flex-wrap:wrap}
.foot-col h5{font-family:var(--display);font-weight:700;font-size:1rem;margin:0 0 12px;color:#fff}
.foot-col a,.foot-col span{display:block;color:#A7AEB7;font-size:.94rem;margin-bottom:7px}
.foot-col a:hover{color:#fff}
.foot-lead{color:#A7AEB7;max-width:240px;margin:16px 0 0;font-size:.94rem}
.socials{display:flex;gap:11px;margin-top:16px}
.socials a{width:42px;height:42px;border-radius:12px;background:var(--dark-2);display:grid;place-items:center;color:#C9CFD6;transition:.2s;margin:0}
.socials a:hover{background:var(--accent);color:#fff;transform:translateY(-2px)}
.copy{text-align:center;color:#7E868F;font-size:.85rem;margin-top:30px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.copy a{color:#A7AEB7}
.copy a:hover{color:#fff}

.reveal{opacity:0;transform:translateY(20px);transition:.6s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media(max-width:980px){
  .hero .wrap{grid-template-columns:1fr;gap:54px}
  .grid-cat{grid-template-columns:repeat(2,1fr)}
  .flow{grid-template-columns:repeat(2,1fr)}
  .formwrap{grid-template-columns:1fr}
  .form-copy{padding:40px 34px}.form-fields{padding:36px 34px}
}
@media(max-width:760px){
  .menu,.nav>.btn{display:none}
  .burger{display:flex}
  .menu.open{display:flex;position:fixed;top:80px;left:18px;right:18px;flex-direction:column;background:var(--dark-2);padding:22px;gap:18px;border-radius:var(--r);box-shadow:var(--shadow);align-items:flex-start}
  .hero{padding:116px 0 58px}
  .foot{flex-direction:column;gap:26px}
}
@media(max-width:480px){
  .grid-cat{grid-template-columns:1fr}.flow{grid-template-columns:1fr}
  body{font-size:16px}.form-copy,.form-fields{padding:30px 24px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}