/* ===== HERO ===== */
.wy2-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background: linear-gradient(180deg, #EDFAFF 0%,#EDFAFF 30%, #FFF 100%);
  color:#fff; text-align:center;
  padding: 96px 0 56px;
}
.wy2-hero__inner{ position:relative; z-index:2; }
.wy2-hero__title{
  font:700 clamp(32px,5vw,56px)/1.1 Inter,system-ui,sans-serif;
  margin:0 0 10px; color: black;
}
.wy2-hero__lead{ max-width:920px; margin:0 auto 18px; opacity:.95; }
.wy2-btn{ border-radius:8px;  }
.wy2-btn--lg{ height:52px; padding:0 22px; }
.wy2-btn--xl{ height:56px; padding:0 28px; font-size:18px; }
.wy2-hero__actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-bottom:24px; }

.wy2-hero__divider{
  width:min(820px, 88%); height:1px; margin:18px auto 12px; border:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}

.wy2-hero__facts{
  display:flex; gap:28px; justify-content:center; flex-wrap:wrap;
  list-style:none; padding:0; margin:0;
}
.wy2-hero__facts li{ display:flex; align-items:center; gap:10px; opacity:.95; }
.wy2-hero__facts img{ width:22px; height:22px; filter: brightness(0) invert(1) opacity(.9); }

/* тонкие круги */
.wy2-hero__decor{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.wy2-ring{
  position:absolute; width:240px; height:240px; border-radius:50%;
  border: 1.6px solid #C9DDFF;
}
.wy2-ring--tl{ left:36px; top:52px; }
.wy2-ring--tr{ right:36px; top:88px; }
.wy2-ring--bl{ left:380px; bottom:120px; width:320px; height:320px; }
.wy2-ring--br{ right:48px; bottom:40px; width:300px; height:300px; }

/* белый фейд вниз */
.wy2-hero__fade{
  position:absolute; left:0; right:0; bottom:-1px; height:150px; z-index:1;
  background: linear-gradient(180deg, rgba(56,107,255,0) 0%, rgba(255,255,255,.85) 50%, #fff 100%);
}

.wy2-about{ background:#fff; padding:48px 0 10px; }
.wy2-split{ display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:center; }
.wy2-split--center{ align-items:stretch; }
.wy2-split__col p{ color:#223046; }
.wy2-illus{ position:relative; min-height:260px; }
.wy2-blob{ position:absolute; inset:auto; right:14%; top:10%; width:200px; height:200px; border-radius:50%; background:#E6EEFF; filter:blur(2px); box-shadow:0 22px 40px rgba(36,61,126,.14); }
.wy2-blob--2{ right:4%; top:46%; width:120px; height:120px; opacity:.8; }
.wy2-bullets .li{ position:relative; padding-left:30px; margin-top:8px; }
.wy2-bullets .li::before{
content:""; position:absolute; left:0; top:8px; width:18px; height:18px; border-radius:6px;
background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.55 17.05L4.5 12l1.4-1.4l3.65 3.6L18.1 5.65l1.4 1.4Z'/%3E%3C/svg%3E") no-repeat center/14px 14px;
}
.wy2-title{ font:500 clamp(22px,3.4vw,34px)/1.2 Inter,sans-serif; margin:0 0 6px; color:#0b1420; }
/* ============================================================
   WHY US — стиль как у главной (индивидуалы)
   ============================================================ */

/* Палитра/токены (используем те же значения, что и на главной) */
:root{
  --accent:#3972FE;
  --ink:#0b1420;
  --hero-bg:#EDFAFF;
  --hero-soft:#C9DDFF;
  --border:#E6EDFF;
  --surface:#FFFFFF;
  --soft:#F6F8FF;

  --r-lg:22px;
  --r-xl:24px;
  --shadow:0 18px 48px rgba(8,21,65,.08);
  --shadow-strong:0 26px 60px rgba(36,61,126,.18);
}

/* Контейнеры как у главной */
:root{
  --container-max: 1200px;
  --page-pad: clamp(16px, 4vw, 64px);
}
.wy2-container{
  width: min(var(--container-max), 100% - var(--page-pad)*2);
  margin-inline: auto;
  padding-inline: 0;
}

/* ---------------------
   HERO (оставлен как есть)
   Подтягиваем только цвета/маски под главную
---------------------- */
.wy2-hero{
  background: var(--hero-bg);
  color: var(--ink);
  isolation:isolate;
  position:relative;
}
.wy2-hero__title{
  font-family:"DM Sans", Inter, system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-.02em;
  color: var(--ink);
}
.wy2-hero__lead{ color:#2d3845; font-size:clamp(16px,1.4vw,18px); }
.wy2-hero__divider{
  background:linear-gradient(90deg,transparent,rgba(57,114,254,.35),transparent);
}
.wy2-hero__facts img{ filter:none; }
.wy2-hero__fade{
  position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width: calc(100vw - (100vw - 100%));
  height: 220px;
  background: linear-gradient(180deg,
    rgba(237,250,255,0) 0%,
    rgba(237,250,255,0) 35%,
    rgba(255,255,255,.65) 70%,
    #FFFFFF 100%);
  pointer-events:none; z-index:1;
}
@supports (width:100dvw){ .wy2-hero__fade{ width:100dvw; } }

/* ============================================================
   BRAND / LOGO SHOWCASE
============================================================ */
.wy2-brand{
  background:#fff;
  padding: clamp(40px, 6vw, 72px) 0;
}
.wy2-brand__inner{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(20px,3vw,40px);
  align-items:center;
}
@media (max-width: 980px){
  .wy2-brand__inner{ grid-template-columns:1fr; }
}

.wy2-brand__text .kicker{
  display:inline-block; padding:6px 12px; border-radius:999px;
  background:rgba(57,114,254,.10); color:var(--accent); font-weight:700; font-size:14px;
}
.wy2-brand__text .title{
  margin:8px 0 10px; font-weight:800; letter-spacing:-.01em;
  font-size: clamp(24px, 3.4vw, 40px); color:var(--ink);
}
.wy2-brand__text .lead{
  color:#2a3445; max-width: 720px; margin:0 0 14px; font-size:16px;
}
.wy2-brand__text .bullets{
  list-style:none; margin:0 0 14px; padding:0; display:grid; gap:8px;
}
.wy2-brand__text .bullets li{
  position:relative; padding-left:26px; color:#1f2a37;
}
.wy2-brand__text .bullets li::before{
  content:""; position:absolute; left:0; top:.35em; width:18px; height:18px; border-radius:6px;
  background:rgba(57,114,254,.15)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%233972FE' d='M9.55 17.05L4.5 12l1.4-1.4l3.65 3.6L18.1 5.65l1.4 1.4Z'/%3E%3C/svg%3E")
    no-repeat center/14px 14px;
}
.wy2-brand__text .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }

.wy2-brand__art{ position:relative; justify-self:end; }
.wy2-brand__art .blob{
  position:absolute; inset:auto; right:0; top:0;
  width: clamp(260px, 36vw, 480px); height: clamp(260px, 36vw, 480px);
  border-radius:999px; filter: blur(8px); opacity:.9; z-index:0;
  background: radial-gradient(65% 65% at 30% 30%, rgba(201,221,255,.95), rgba(201,221,255,0));
}
.wy2-brand__art .ring{
  position:absolute; right:6%; top:6%;
  width: clamp(200px, 28vw, 340px); height: clamp(200px, 28vw, 340px);
  border-radius:50%; border:1px solid rgba(57,114,254,.18); z-index:0;
}
.wy2-brand__art .logo-wrap{
  position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center;
  border-radius:18px;  
  border:1px solid var(--border); box-shadow: var(--shadow-strong);
  padding: clamp(10px, 2vw, 16px);
}
.logo-whyus{
  display:block; width: clamp(220px, 26vw, 320px); height:auto;
}

/* ============================================================
   VALUE PILLARS
============================================================ */
.wy2-pillars{
  background:#fff; padding: clamp(40px, 6vw, 72px) 0;
}
.section-title{
  font-size: 36px;
  line-height: 1.15;
  text-align: center;
  font-weight: 700;
  margin: 0 0 10px;
}
.pillars-grid{
  display:grid; grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}
@media (max-width: 980px){ .pillars-grid{ grid-template-columns:1fr; } }

.pillar{
  position:relative; background:#fff; border:1px solid var(--border);
  border-radius: var(--r-xl); padding: clamp(22px, 2.6vw, 28px);
  box-shadow: var(--shadow); overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pillar::before{
  content:""; position:absolute; left:10%; right:10%; bottom:-18px; height:36px; border-radius:999px;
  background: radial-gradient(60% 60% at 50% 0%, rgba(57,114,254,.20), rgba(57,114,254,0));
  filter: blur(8px); z-index:-1;
}
.pillar::after{
  content:""; position:absolute; inset:0 0 auto 0; height:36px;
  background: linear-gradient(180deg, rgba(57,114,254,.06), transparent 65%);
}
.pillar:hover{ transform: translateY(-3px); box-shadow:0 22px 60px rgba(36,61,126,.14); }

.pillar .ico{
  width:56px; height:56px; border-radius:16px;
  background:var(--accent); color:#fff; display:grid; place-items:center;
  box-shadow:0 14px 36px rgba(57,114,254,.35); margin-bottom:10px;
}
.pillar .ico svg{ width:28px; height:28px; }
.pillar h3{ margin:0 0 6px; font-weight:800; color:#0b1220; letter-spacing:-.005em; }
.pillar p{ margin:0; color:#223046; }

/* ============================================================
   STATS BAND
============================================================ */
.wy2-stats{
  background:#fff; padding: 10px 0 28px;
}
.stats-grid{
  display:grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 22px);
  align-items:stretch;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding: 18px 0;
}
@media (max-width: 860px){ .stats-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .stats-grid{ grid-template-columns: 1fr; } }

.stat{
  display:flex; align-items:center; gap:12px; justify-content:center;
  padding: 12px 0; position:relative;
}
.stat strong{
  font-weight:800; color:#0b1220; line-height:1;
  font-size: clamp(24px, 3.2vw, 36px);
}
.stat span{ color:#475467; font-weight:600; }

/* ============================================================
   COMPARISON TABLE
============================================================ */
.wy2-compare{
  background:#fff; padding: clamp(40px, 6vw, 72px) 0;
}
.table-wrap{
  background:#fff; border:1px solid var(--border); border-radius: var(--r-xl);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.cmp{
  width:100%; border-collapse:separate; border-spacing:0;
  font-size:16px;
}
.cmp thead th{
  background: #F6F8FF; color:#0b1220;
  padding:14px 16px; text-align:left; font-weight:700;
  border-bottom:1px solid var(--border);
}
.cmp tbody th{
  font-weight:600; color:#0b1220; padding:14px 16px; width:40%;
  border-bottom:1px solid #EEF2F7;
}
.cmp tbody td{
  padding:14px 16px; border-bottom:1px solid #EEF2F7; vertical-align:middle;
}
.cmp td.ok{
  color:#0b1220; font-weight:700;
  position:relative; padding-left:42px;
}
.cmp td.ok::before{
  content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:8px; background:var(--accent);
  box-shadow:0 12px 28px rgba(57,114,254,.28);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'white\' d=\'M9.55 17.54L4.5 12.49l1.77-1.77l3.28 3.29l7.68-7.68l1.77 1.77z\'/%3E%3C/svg%3E") center/16px 16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'white\' d=\'M9.55 17.54L4.5 12.49l1.77-1.77l3.28 3.29l7.68-7.68l1.77 1.77z\'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}
.cmp td.na{
  color:#6b778e; font-weight:600;
}

/* Примечание под таблицей */
.table-note{
  margin: 10px 16px 14px; color:#475467; font-size:14px;
}

/* ============================================================
   HOW IT WORKS
============================================================ */
.wy2-how{
  background:#fff; padding: clamp(36px, 6vw, 64px) 0;
}
.steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 2vw, 20px);
}
@media (max-width: 980px){ .steps{ grid-template-columns:1fr; } }

.steps li{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; box-shadow: var(--shadow);
}
.steps .badge{
  width:34px; height:34px; border-radius:10px; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-weight:800;
  box-shadow:0 14px 36px rgba(57,114,254,.35);
}
.steps .txt h3{ margin:0 0 6px; font-weight:800; color:#0b1220; }
.steps .txt p{ margin:0; color:#223046; }

/* ============================================================
   TRUST / QUOTES
============================================================ */
.wy2-trust2{
  background: linear-gradient(180deg,#FFFFFF 0%, #F6F8FF 100%);
  padding: clamp(36px, 6vw, 64px) 0;
}
.trust-grid{
  display:grid; grid-template-columns:1fr 1fr; gap: clamp(12px, 2vw, 20px);
}
@media (max-width: 860px){ .trust-grid{ grid-template-columns:1fr; } }

.q{
  position:relative; background:#fff; border:1px solid var(--border);
  border-radius: var(--r-xl); padding: clamp(18px, 2.6vw, 24px);
  box-shadow: var(--shadow);
}
.q::before{
  content:""; position:absolute; left:16px; top:16px; width:42px; height:42px; border-radius:14px;
  background:var(--accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'white\' d=\'M7.17 6A5 5 0 0 0 2 11v7h7v-7H6.83A3 3 0 0 1 10 8a3 3 0 0 1 3 3v7h7v-7a5 5 0 0 0-5-5z\'/%3E%3C/svg%3E") center/22px 22px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox=\'0 0 24 24\'%3E%3Cpath fill=\'white\' d=\'M7.17 6A5 5 0 0 0 2 11v7h7v-7H6.83A3 3 0 0 1 10 8a3 3 0 0 1 3 3v7h7v-7a5 5 0 0 0-5-5z\'/%3E%3C/svg%3E") center/22px 22px no-repeat;
  box-shadow:0 14px 36px rgba(57,114,254,.35);
}
.q p{
  margin:0 0 10px; padding-left: 64px; color:#0b1220; font-weight:600;
}
.q footer{ color:#475467; padding-left:64px; }

/* ============================================================
   FINAL CTA (в стиле главной Support CTA)
============================================================ */
.wy2-final-cta{
  position:relative; background: var(--hero-bg);
  padding: clamp(44px, 7vw, 80px) 0;
}
.wy2-final-cta::after{
  /* мягкие водяные знаки Q (как на главной) */


  content:"";
  position:absolute;
  top:-10px;                 /* высота «полосы» над футером */
  left:50%;
  transform:translateX(-50%);
  width:100vw;                /* растягиваем на всю ширину окна */
  height:60px;
  pointer-events:none;
  background: linear-gradient(
    180deg,
    /* сверху — голубой (секция выше футера) */
    #FFFFFF 0%,              /* к низу — белый (цвет футера) */
    #FFFFFF 15%
    #EDFAFF 85%,   
    #EDFAFF 100%,               /* сверху — голубой (секция выше футера) */
  );

}
.cta-card{
  position:relative; background:#fff; border:1px solid var(--border);
  border-radius: 22px; box-shadow: var(--shadow-strong);
  text-align:center; padding: clamp(24px, 4vw, 40px);
}
.cta-card::after{
  content:""; position:absolute; left:10%; right:10%; bottom:-18px; height:36px;
  border-radius:999px; background: radial-gradient(60% 60% at 50% 0%, rgba(57,114,254,.20), rgba(57,114,254,0));
  filter: blur(8px); z-index:-1;
}
.cta-card h2{
  margin: 0 0 8px; font-weight:800; font-size: clamp(22px, 3.6vw, 36px); color:var(--ink);
}
.cta-card p{ margin:0 0 14px; color:#2a3445; }
.cta-card .actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.cta-card .btn.btn-primary{
  box-shadow: 0 16px 36px rgba(57,114,254,.28);
  border-radius: 12px;
}

/* ============================================================
   ДЕКОР — водяные знаки в секциях преимуществ/доверия
============================================================ */
.wy2-pillars, .wy2-trust2{
  position:relative; overflow:hidden;
}
.wy2-pillars::after{
  content:""; position:absolute; left:-80px; bottom:-40px; width:320px; height:320px;
  opacity:.7; pointer-events:none;
  background-color: rgba(201,221,255,.28);
  -webkit-mask: url("../images/Os-watermark1.png") center/contain no-repeat;
          mask: url("../images/Os-watermark1.png") center/contain no-repeat;
}
.wy2-trust2::after{
  content:""; position:absolute; right:-40px; top:6%; width:220px; height:220px;
  opacity:.8; pointer-events:none;
  background-color: rgba(201,221,255,.35);
  -webkit-mask: url("../images/Os-watermark1.png") center/contain no-repeat;
          mask: url("../images/Os-watermark1.png") center/contain no-repeat;
}

/* ============================================================
   МЕЛОЧИ / АДАПТИВ
============================================================ */
.wy2-btn{ border-radius:12px; font-weight:600; }
.wy2-btn--lg{ height:52px; padding:0 22px; }
.wy2-btn--xl{ height:56px; padding:0 28px; font-size:18px; }

@media (max-width: 640px){
  .cta-card .btn{ height:48px; }
}

.wu_subtitle{
  font-weight: 500;
  font-size: clamp(18px, 2vw, 24px);
  margin: 0 0 8px;
}