/* Soliqchi AI — стили сайта
   Палитра и ограничения — из DESIGN.md.
   Флаговые цвета только заливкой; для текста — затемнённые варианты. */

:root{
  --blue:#0099B5;
  --green:#1EB53A;
  --red:#CE1126;
  --blue-ink:#00647A;
  --green-ink:#14802A;
  --bg:#F5F7F8;
  --surface:#FFFFFF;
  --border:#E3E8EA;
  --text:#101418;
  --muted:#5A6570;
  --radius:14px;
  --maxw:1120px;
  --shadow:0 1px 2px rgba(16,20,24,.04), 0 8px 24px rgba(16,20,24,.05);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--blue-ink); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
     backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex; align-items:center; gap:20px; height:66px}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; font-size:18px;
      color:var(--text); letter-spacing:-.02em}
.logo:hover{text-decoration:none}
.logo .dot{width:26px; height:26px; border-radius:8px; flex:0 0 auto;
           background:linear-gradient(135deg,var(--blue),var(--green))}
.nav{display:flex; gap:4px; margin-left:auto; align-items:center}
.nav a{padding:9px 13px; border-radius:9px; color:var(--muted); font-size:15px; font-weight:600}
.nav a:hover{background:var(--bg); color:var(--text); text-decoration:none}
.nav a.on{color:var(--text); background:var(--bg)}
.burger{display:none; margin-left:auto; background:none; border:1px solid var(--border);
        border-radius:9px; width:44px; height:44px; cursor:pointer; align-items:center; justify-content:center}
.burger span{display:block; width:18px; height:2px; background:var(--text); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--text)}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;
     padding:14px 24px; border-radius:11px; font-weight:700; font-size:16px;
     border:1px solid transparent; cursor:pointer; min-height:50px; transition:.15s}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--blue-ink); color:#fff}
.btn-primary:hover{background:#00566a}
.btn-green{background:var(--green-ink); color:#fff}
.btn-green:hover{background:#116b23}
.btn-ghost{background:var(--surface); color:var(--text); border-color:var(--border)}
.btn-ghost:hover{border-color:#c9d3d7}
.btn-sm{padding:10px 16px; min-height:42px; font-size:15px}

/* ---------- sections ---------- */
section{padding:72px 0}
section.alt{background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
.eyebrow{font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
         color:var(--blue-ink); margin-bottom:14px}
h1{font-size:clamp(32px,5.2vw,54px); line-height:1.1; letter-spacing:-.025em; margin:0 0 20px; font-weight:800}
h2{font-size:clamp(26px,3.6vw,38px); line-height:1.18; letter-spacing:-.02em; margin:0 0 18px; font-weight:800}
h3{font-size:19px; line-height:1.3; margin:0 0 10px; font-weight:700}
.lead{font-size:clamp(17px,2.1vw,21px); color:var(--muted); line-height:1.55; max-width:680px; margin:0 0 28px}
.sec-intro{max-width:720px; margin-bottom:40px}
p{margin:0 0 16px}

/* ---------- hero ---------- */
.hero{padding:84px 0 76px; background:
   radial-gradient(1200px 420px at 12% -10%, rgba(0,153,181,.10), transparent 60%),
   radial-gradient(900px 380px at 92% 0%, rgba(30,181,58,.10), transparent 60%);}
.hero .badge{display:inline-flex; align-items:center; gap:9px; background:var(--surface);
  border:1px solid var(--border); border-radius:999px; padding:7px 15px 7px 11px;
  font-size:14px; font-weight:600; color:var(--muted); margin-bottom:22px}
.hero .badge b{color:var(--green-ink)}
.hero .badge i{width:8px; height:8px; border-radius:50%; background:var(--green); display:block}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px}
.hero-note{font-size:14px; color:var(--muted)}
.hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center}

/* ---------- telegram mock ---------- */
.tg{background:#EDF3F5; border:1px solid #DDE5E8; border-radius:18px; padding:16px; box-shadow:var(--shadow)}
.tg-h{display:flex; align-items:center; gap:10px; padding-bottom:11px; margin-bottom:14px;
      border-bottom:1px solid #DDE5E8; font-size:13px; color:var(--muted)}
.tg-h .av{width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--blue),var(--green))}
.tg-h b{color:var(--text); font-size:15px; display:block}
.msg{max-width:86%; padding:11px 14px; border-radius:15px; font-size:15px; line-height:1.45; margin-bottom:9px}
.msg.out{background:#D4EEF7; margin-left:auto; border-bottom-right-radius:4px}
.msg.in{background:#fff; border-bottom-left-radius:4px}
.msg .tm{font-size:11px; color:#8A959E; text-align:right; margin-top:5px}
.msg .ln{display:flex; justify-content:space-between; gap:14px; padding:3px 0}
.msg .dv{height:1px; background:var(--border); margin:8px 0}
.kbd{display:flex; gap:7px; margin-top:9px}
.kbd span{flex:1; text-align:center; background:#F2F7F9; border:1px solid #D4E2E7; border-radius:9px;
          padding:9px 6px; font-size:13px; font-weight:700; color:var(--blue-ink)}

/* ---------- cards / grids ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:26px}
section.alt .card{background:var(--bg)}
.card p:last-child{margin-bottom:0}
.card .num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:10px; background:var(--blue-ink); color:#fff; font-weight:800; font-size:15px; margin-bottom:14px}
.card.g .num{background:var(--green-ink)}
.muted{color:var(--muted)}
.small{font-size:15px}

/* stat */
.stat .n{font-size:38px; font-weight:800; color:var(--blue-ink); letter-spacing:-.02em; line-height:1}
.stat .n.g{color:var(--green-ink)}
.stat .l{color:var(--muted); font-size:15px; margin-top:10px}

/* trust ladder */
.ladder{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.rung{border-radius:12px; padding:20px 18px; background:#EDF1F3}
.rung:nth-child(2){background:#D6E6EB}
.rung:nth-child(3){background:#A9CFD9}
.rung:nth-child(4){background:var(--blue-ink)}
.rung:nth-child(4) h3,.rung:nth-child(4) p{color:#fff}
.rung:nth-child(4) p{color:#BFE3EC}
.rung h3{font-size:16px; margin-bottom:6px}
.rung p{font-size:14px; color:var(--muted); margin:0}

/* callout */
.callout{background:var(--surface); border-left:5px solid var(--blue); border-radius:0 12px 12px 0;
         padding:22px 26px; box-shadow:var(--shadow)}
.callout.g{border-left-color:var(--green)}
.callout.r{border-left-color:var(--red)}
section.alt .callout{background:var(--bg); box-shadow:none; border:1px solid var(--border); border-left:5px solid var(--blue)}
.callout p:last-child{margin-bottom:0}

/* pricing */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch}
.plan{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
      padding:30px 26px; display:flex; flex-direction:column}
.plan.hot{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,153,181,.12)}
.plan .tag{font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.1em;
           color:var(--blue-ink); margin-bottom:12px}
.plan .price{font-size:34px; font-weight:800; letter-spacing:-.02em; margin:4px 0 4px}
.plan .per{font-size:15px; color:var(--muted); margin-bottom:20px}
.plan ul{list-style:none; margin:0 0 24px; padding:0; flex:1}
.plan li{padding:9px 0 9px 27px; position:relative; font-size:16px; border-bottom:1px solid var(--border)}
.plan li:last-child{border-bottom:none}
.plan li::before{content:"✓"; position:absolute; left:0; top:9px; color:var(--green-ink); font-weight:800}
.plan li.soon{color:var(--muted)}
.plan li.soon::before{content:"○"; color:var(--muted)}

/* timeline / roadmap */
.tl{position:relative; padding-left:34px}
.tl::before{content:""; position:absolute; left:9px; top:6px; bottom:6px; width:2px; background:var(--border)}
.tl-item{position:relative; margin-bottom:34px}
.tl-item::before{content:""; position:absolute; left:-34px; top:6px; width:20px; height:20px;
  border-radius:50%; background:var(--surface); border:3px solid var(--blue)}
.tl-item.done::before{background:var(--green); border-color:var(--green)}
.tl-item.now::before{border-color:var(--blue); box-shadow:0 0 0 5px rgba(0,153,181,.16)}
.tl-item.future::before{border-color:#C3CDD2}
.tl-date{font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-ink)}
.tl-item.done .tl-date{color:var(--green-ink)}
.tl-item.future .tl-date{color:var(--muted)}
.tl-item h3{margin:6px 0 8px}
.chip{display:inline-block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.07em;
      padding:4px 10px; border-radius:999px; margin-left:8px; vertical-align:2px}
.chip.done{background:#DEF3E3; color:var(--green-ink)}
.chip.now{background:#DAEFF5; color:var(--blue-ink)}
.chip.plan{background:var(--bg); color:var(--muted); border:1px solid var(--border)}

/* faq */
.faq details{background:var(--surface); border:1px solid var(--border); border-radius:12px;
             padding:0 22px; margin-bottom:12px}
section.alt .faq details{background:var(--bg)}
.faq summary{cursor:pointer; font-weight:700; font-size:17px; padding:20px 0; list-style:none;
             display:flex; justify-content:space-between; gap:16px; align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--blue-ink); font-size:24px; line-height:1; font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details > p, .faq details > ul{padding-bottom:20px; margin:0; color:var(--muted)}
.faq details > p + p{padding-top:0; margin-top:-8px}

/* legal / doc pages */
.doc{max-width:820px}
.doc h2{font-size:24px; margin:44px 0 14px}
.doc h3{font-size:18px; margin:28px 0 10px}
.doc ol,.doc ul{padding-left:22px; color:var(--text)}
.doc li{margin-bottom:9px}
.doc .meta{font-size:14px; color:var(--muted); border-bottom:1px solid var(--border);
           padding-bottom:20px; margin-bottom:8px}
.warn{background:#FDF0F1; border:1px solid #F3CDD1; border-left:5px solid var(--red);
      border-radius:0 12px 12px 0; padding:18px 22px; margin:22px 0}
.warn b{color:#96101d}
.warn p:last-child{margin-bottom:0}

/* table */
table{width:100%; border-collapse:collapse; font-size:16px; background:var(--surface);
      border:1px solid var(--border); border-radius:var(--radius); overflow:hidden}
section.alt table{background:var(--bg)}
th{text-align:left; font-size:13px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
   padding:16px 18px; border-bottom:1px solid var(--border); font-weight:800}
td{padding:16px 18px; border-bottom:1px solid var(--border); vertical-align:top}
tr:last-child td{border-bottom:none}

/* cta band */
.band{background:var(--blue-ink); color:#fff; border-radius:20px; padding:52px 44px; text-align:center}
.band h2{color:#fff}
.band p{color:#BFE3EC; max-width:560px; margin:0 auto 28px; font-size:18px}
.band .btn-ghost{background:#fff; color:var(--blue-ink); border-color:#fff}

/* footer */
.ftr{background:var(--surface); border-top:1px solid var(--border); padding:56px 0 32px; font-size:15px}
.ftr-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; margin-bottom:40px}
.ftr h4{font-size:13px; text-transform:uppercase; letter-spacing:.09em; color:var(--muted);
        margin:0 0 14px; font-weight:800}
.ftr ul{list-style:none; margin:0; padding:0}
.ftr li{margin-bottom:10px}
.ftr a{color:var(--text)}
.ftr .about{color:var(--muted); max-width:300px}
.ftr-bottom{border-top:1px solid var(--border); padding-top:24px; color:var(--muted); font-size:14px;
            display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap}
.disclaimer{background:var(--bg); border:1px solid var(--border); border-radius:12px;
            padding:18px 22px; font-size:14px; color:var(--muted); margin-bottom:36px}

/* utils */
.mt0{margin-top:0}.mb0{margin-bottom:0}
.center{text-align:center}
.stack>*+*{margin-top:14px}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:40px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .ladder{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  section{padding:52px 0}
  .hero{padding:56px 0 52px}
  .nav{position:fixed; inset:66px 0 auto 0; background:#fff; flex-direction:column; align-items:stretch;
       padding:12px; gap:2px; border-bottom:1px solid var(--border); display:none;
       box-shadow:0 12px 30px rgba(16,20,24,.08); max-height:calc(100vh - 66px); overflow:auto}
  .nav.open{display:flex}
  .nav a{padding:14px 16px; font-size:17px}
  .burger{display:flex}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .ladder{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr}
  .band{padding:38px 24px; border-radius:16px}
  table{display:block; overflow-x:auto; white-space:nowrap}
}

/* ============================================================
   v2 — исправления и функциональные блоки
   ============================================================ */

/* ФИКС: .nav a перебивал .btn по специфичности — текст кнопки был серым */
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff; text-decoration:none}
.nav a.btn-primary,.nav a.btn-primary:hover{color:#fff; background:var(--blue-ink)}
.nav a.btn-green,.nav a.btn-green:hover{color:#fff}
.nav a.btn-green:hover{background:#116b23}
.nav a.btn-ghost,.nav a.btn-ghost:hover{color:var(--text)}

/* доступность: видимый фокус с клавиатуры */
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
  outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}

/* шапка: тень при скролле */
.hdr{transition:box-shadow .2s, background .2s}
.hdr.scrolled{box-shadow:0 4px 20px rgba(16,20,24,.07)}

/* появление при скролле */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .5s ease, transform .5s ease}
.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ---------- калькулятор ---------- */
.calc{background:var(--surface); border:1px solid var(--border); border-radius:20px;
      padding:32px; box-shadow:var(--shadow)}
section.alt .calc{background:var(--bg)}
.calc-row{margin-bottom:24px}
.calc label{display:block; font-weight:700; margin-bottom:10px; font-size:16px}
.calc .hint{font-size:14px; color:var(--muted); font-weight:400; margin-left:6px}
.calc input[type=range]{width:100%; height:34px; -webkit-appearance:none; appearance:none;
  background:transparent; cursor:pointer; margin:0}
.calc input[type=range]::-webkit-slider-runnable-track{height:8px; border-radius:4px;
  background:linear-gradient(90deg,var(--blue) var(--fill,30%), var(--border) var(--fill,30%))}
.calc input[type=range]::-moz-range-track{height:8px; border-radius:4px; background:var(--border)}
.calc input[type=range]::-moz-range-progress{height:8px; border-radius:4px; background:var(--blue)}
.calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px;
  border-radius:50%; background:#fff; border:3px solid var(--blue-ink); margin-top:-10px;
  box-shadow:0 2px 8px rgba(16,20,24,.18)}
.calc input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--blue-ink); box-shadow:0 2px 8px rgba(16,20,24,.18)}
.calc .val{font-size:28px; font-weight:800; letter-spacing:-.02em; color:var(--blue-ink)}
.calc .val small{font-size:15px; font-weight:600; color:var(--muted); margin-left:4px}
.calc .presets{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
.calc .presets button{background:var(--bg); border:1px solid var(--border); border-radius:9px;
  padding:8px 14px; font-size:14px; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s}
section.alt .calc .presets button{background:var(--surface)}
.calc .presets button:hover{border-color:var(--blue); color:var(--blue-ink)}
.calc .presets button[aria-pressed=true]{background:var(--blue-ink); color:#fff; border-color:var(--blue-ink)}

.calc-out{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px}
.calc-out .box{background:var(--bg); border-radius:12px; padding:20px}
section.alt .calc-out .box{background:var(--surface)}
.calc-out .box.win{background:var(--green-ink)}
.calc-out .box.win .k,.calc-out .box.win .v{color:#fff}
.calc-out .box.win .k{color:#C9F2D4}
.calc-out .k{font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.calc-out .v{font-size:26px; font-weight:800; letter-spacing:-.02em; margin-top:8px; color:var(--text)}
.calc-out .v.b{color:var(--blue-ink)}
.calc-note{margin-top:20px; font-size:14px; color:var(--muted)}

/* ---------- интерактивное демо ---------- */
.demo-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}
.demo-tabs button{background:var(--surface); border:1px solid var(--border); border-radius:999px;
  padding:10px 18px; font-size:14px; font-weight:700; color:var(--muted); cursor:pointer; transition:.15s}
section.alt .demo-tabs button{background:var(--bg)}
.demo-tabs button:hover{border-color:var(--blue); color:var(--blue-ink)}
.demo-tabs button[aria-selected=true]{background:var(--blue-ink); color:#fff; border-color:var(--blue-ink)}
.typing{display:inline-flex; gap:4px; align-items:center; padding:4px 0}
.typing i{width:7px; height:7px; border-radius:50%; background:#9FB2BA; display:block;
          animation:bl 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,60%,100%{opacity:.28; transform:translateY(0)}30%{opacity:1; transform:translateY(-3px)}}
.tg[data-busy="1"] .msg.in.result{display:none}

/* ---------- прогресс дорожной карты ---------- */
.progress{background:var(--surface); border:1px solid var(--border); border-radius:16px;
          padding:26px 28px; margin-bottom:36px}
section.alt .progress{background:var(--bg)}
.progress .top{display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:14px}
.progress .top b{font-size:22px; letter-spacing:-.02em}
.progress .bar{height:12px; border-radius:6px; background:var(--border); overflow:hidden; display:flex}
.progress .bar i{display:block; height:100%}
.progress .bar i.d{background:var(--green)}
.progress .bar i.n{background:var(--blue)}
.progress .legend{display:flex; gap:20px; flex-wrap:wrap; margin-top:14px; font-size:14px; color:var(--muted)}
.progress .legend span{display:inline-flex; align-items:center; gap:7px}
.progress .legend i{width:11px; height:11px; border-radius:3px; display:block}
.progress .legend i.d{background:var(--green)}
.progress .legend i.n{background:var(--blue)}
.progress .legend i.p{background:var(--border)}

/* ---------- липкая кнопка на мобильных ---------- */
.sticky-cta{position:fixed; left:12px; right:12px; bottom:12px; z-index:60; display:none;
  box-shadow:0 8px 28px rgba(16,20,24,.22)}
.sticky-cta .btn{width:100%}
@media (max-width:720px){ .sticky-cta{display:block} body{padding-bottom:76px} }

/* ---------- наверх ---------- */
.totop{position:fixed; right:20px; bottom:20px; z-index:55; width:48px; height:48px; border-radius:50%;
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow); cursor:pointer;
  display:none; align-items:center; justify-content:center; color:var(--blue-ink); font-size:20px}
.totop.show{display:flex}
@media (max-width:720px){ .totop{bottom:80px; right:14px} }

/* ---------- копирование ---------- */
.copy{background:none; border:none; cursor:pointer; color:var(--blue-ink); font-size:14px;
      font-weight:700; padding:4px 8px; border-radius:7px}
.copy:hover{background:var(--bg)}
.copy.ok{color:var(--green-ink)}

/* ---------- мелкая полировка ---------- */
.card{transition:border-color .18s, transform .18s, box-shadow .18s}
.card:hover{border-color:#CFD9DD; transform:translateY(-2px); box-shadow:var(--shadow)}
.plan{transition:transform .18s, box-shadow .18s}
.plan:hover{transform:translateY(-3px); box-shadow:var(--shadow)}
.rung{transition:transform .18s}
.rung:hover{transform:translateY(-2px)}
.hero .badge{transition:border-color .18s}
.step-anchor{scroll-margin-top:88px}
h2,h3{scroll-margin-top:88px}

@media (max-width:720px){
  .calc{padding:22px}
  .calc-out{grid-template-columns:1fr}
  .calc .val{font-size:24px}
}

/* ============================================================
   v3 — иллюстрации и графика
   ============================================================ */

/* тонкая сетка + мягкие пятна в первом экране */
.hero{position:relative; overflow:hidden}
.hero::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(0,100,122,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,100,122,.055) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(1000px 460px at 20% 0%, #000 0%, transparent 72%);
  mask-image:radial-gradient(1000px 460px at 20% 0%, #000 0%, transparent 72%)}
.hero > .wrap{position:relative; z-index:1}

/* иконки в карточках */
.ico{display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px;
  border-radius:13px; background:#E8F4F7; color:var(--blue-ink); margin-bottom:16px; flex:0 0 auto}
.ico svg{width:24px; height:24px; display:block}
.ico.g{background:#E2F5E7; color:var(--green-ink)}
.ico.r{background:#FBE9EB; color:#96101d}
.ico.n{background:var(--bg); color:var(--muted)}
section.alt .ico{background:#E8F4F7}
section.alt .ico.g{background:#E2F5E7}
.card:hover .ico{transform:scale(1.04)}
.ico{transition:transform .18s}

/* иконка в строке (списки, шаги) */
.ico-sm{display:inline-flex; width:20px; height:20px; color:var(--blue-ink); vertical-align:-4px; margin-right:8px}
.ico-sm svg{width:20px; height:20px}

/* контейнер иллюстрации */
.ill{background:var(--surface); border:1px solid var(--border); border-radius:20px;
     padding:28px; box-shadow:var(--shadow)}
section.alt .ill{background:var(--bg)}
.ill svg{width:100%; height:auto; display:block}
.ill figcaption{margin-top:16px; font-size:14px; color:var(--muted); line-height:1.5}
.ill-bare{padding:0; border:none; background:none; box-shadow:none}

/* двухколоночная секция с иллюстрацией */
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:52px; align-items:center}
.split.rev > *:first-child{order:2}
@media (max-width:980px){ .split{grid-template-columns:1fr; gap:36px} .split.rev > *:first-child{order:0} }

/* «шов» между секциями */
.seam{height:1px; background:linear-gradient(90deg,transparent,var(--border) 18%,var(--border) 82%,transparent)}

/* анимация линии в диаграммах */
@media (prefers-reduced-motion:no-preference){
  .ill .dash{stroke-dasharray:5 6; animation:flow 2.4s linear infinite}
  @keyframes flow{to{stroke-dashoffset:-44}}
  .ill .pulse{animation:pu 2.6s ease-in-out infinite}
  @keyframes pu{0%,100%{opacity:.35}50%{opacity:1}}
}

/* подпись-легенда под графикой */
.legend2{display:flex; gap:20px; flex-wrap:wrap; margin-top:16px; font-size:14px; color:var(--muted)}
.legend2 span{display:inline-flex; align-items:center; gap:8px}
.legend2 i{width:12px; height:12px; border-radius:4px; display:block}

/* ============================================================
   v4 — фиксы контраста в калькуляторе + мини-иллюстрации
   ============================================================ */

/* ФИКС: section.alt перебивал активное состояние пресетов (0,3,2 против 0,3,1) */
.calc .presets button[aria-pressed="true"],
section.alt .calc .presets button[aria-pressed="true"]{
  background:var(--blue-ink); color:#fff; border-color:var(--blue-ink)}
.calc .presets button[aria-pressed="true"]:hover,
section.alt .calc .presets button[aria-pressed="true"]:hover{
  background:#00566a; color:#fff; border-color:#00566a}
.calc .presets button{color:var(--text)}
section.alt .calc .presets button{color:var(--text)}

/* ФИКС: тот же случай для блока «Разница» */
.calc-out .box.win,
section.alt .calc-out .box.win{background:var(--green-ink)}
.calc-out .box.win .k,
section.alt .calc-out .box.win .k{color:#D6F5DE}
.calc-out .box.win .v,
section.alt .calc-out .box.win .v{color:#fff}

/* акцент на итоговом блоке */
.calc-out .box{border:1px solid var(--border)}
.calc-out .box.win{border-color:var(--green-ink); box-shadow:0 6px 18px rgba(20,128,42,.18)}

/* мини-иллюстрации в карточках возможностей */
.mini{background:linear-gradient(180deg,#F1F6F8,#FFFFFF); border:1px solid var(--border);
      border-radius:12px; padding:14px 16px; margin:0 0 18px}
section.alt .mini{background:linear-gradient(180deg,#FFFFFF,#F7FAFB)}
.mini svg{width:100%; height:auto; display:block}
.card .mini + h3{margin-top:0}

/* примечание под тарифами */
.plans-note{margin-top:24px; background:var(--surface); border:1px solid var(--border);
            border-radius:14px; padding:22px 26px; font-size:15px; color:var(--muted); line-height:1.6}
section.alt .plans-note{background:var(--bg)}
.plans-note b{color:var(--text)}

/* ============================================================
   v5 — фирменный знак
   ============================================================ */
.logo .mark{width:30px; height:auto; display:block; flex:0 0 auto}
.ftr .logo .mark{width:34px}
.hdr .logo{gap:11px}
.logo:hover .mark{opacity:.85}
.logo .mark{transition:opacity .15s}
@media (max-width:720px){ .logo .mark{width:27px} .logo{font-size:17px} }

/* знак в тёмных CTA-блоках */
.band-mark{width:46px; height:auto; margin:0 auto 18px; display:block; opacity:.95}
@media (max-width:720px){ .band-mark{width:40px; margin-bottom:14px} }

/* ============================================================
   v3 — переключатель языков
   ============================================================ */

.hdr .wrap .nav{order:2}
.hdr .wrap .langs{order:3}
.hdr .wrap .burger{order:4}

.langs{position:relative; flex:0 0 auto}
.lang-btn{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 12px;
  background:none; border:1px solid var(--border); border-radius:9px; cursor:pointer;
  color:var(--muted); font:inherit; font-size:15px; font-weight:600; line-height:1}
.lang-btn:hover{background:var(--bg); color:var(--text)}
.lang-btn svg{width:18px; height:18px; flex:0 0 auto}
.lang-btn[aria-expanded="true"]{background:var(--bg); color:var(--text)}

.lang-menu{position:absolute; top:calc(100% + 8px); right:0; min-width:186px; z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 12px 30px rgba(16,20,24,.12); padding:6px; display:flex; flex-direction:column}
.lang-menu[hidden]{display:none}
.lang-menu a{padding:10px 12px; border-radius:8px; color:var(--text);
  font-size:15px; font-weight:600; white-space:nowrap}
.lang-menu a:hover{background:var(--bg); text-decoration:none}
.lang-menu a[aria-current="true"]{color:var(--blue-ink); background:var(--bg)}
.lang-menu a[aria-current="true"]::after{content:"✓"; float:right; margin-left:14px}

@media (max-width:720px){
  .hdr .wrap .langs{margin-left:auto}
  .lang-btn span{display:none}
  .lang-btn{padding:0 10px}
}