/* ============================================================
   VAZIVA.COM LP sections (matches live-site structure:
   section_top_block / avantages_info / what_to_do / section_gradient_2)
   Loads AFTER vaziza.css. Uses DS tokens from vaziva-ds.css.
   ============================================================ */
.lpv { padding: 90px 0; }
body.vz { padding-top: 86px; }
body.vz a.btn_orange, .lp a.btn_orange, body.vz a.btn_orange:hover { color: #fff; }
body.vz a.btn_white, .lp a.btn_white { color: var(--vz-orange); }
.lpv--tight { padding: 60px 0; }
.lpv .text_18.lp-sub { max-width: 840px; margin: 14px auto 0; text-align: center; }

/* ---------- HERO ---------- */
.section_top_block { position: relative; border-radius: 0 0 60px 60px; overflow: hidden; background: #F4F4F8; display: grid; grid-template-columns: minmax(420px, 42%) 1fr; min-height: 600px; }
.stb_info { display: flex; align-items: center; padding: 70px 56px 70px max(56px, calc((100vw - var(--vz-container)) / 2)); }
.stb_h1 { font-family: var(--vz-font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 3.6vw, 58px); line-height: 0.98; color: #1B1B1B; margin: 0 0 16px; }
.stb_subtitle { font-size: 19px; font-weight: 700; color: #1B1B1B; line-height: 1.4; margin: 0 0 16px; }
.stb_text p { font-size: 14.5px; line-height: 1.65; color: #55555F; margin: 0 0 12px; }
.stb_checks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.stb_checks li { position: relative; padding-left: 30px; font-size: 14.5px; font-weight: 600; color: #2B2B33; }
.stb_checks li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--vz-grad-135); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.stb_btns { margin-top: 28px; }
.stb_media { position: relative; min-height: 360px; }
.stb_media image-slot { position: absolute; inset: 0; display: block; }
.stb_media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }
.stb_media__ph { position: absolute; inset: 40px; }

/* ---------- POURQUOI (avantages) ---------- */
.avantages_info__wrapper { position: relative; display: grid; grid-template-columns: 1fr minmax(240px, 320px) 1fr; gap: 44px; align-items: center; margin-top: 60px; background: linear-gradient(180deg, #F7F7FB, #FDFDFF); border-radius: 32px; padding: 60px 52px; }
.ai_mockup { align-self: center; }
.ai_mockup img { width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 44px rgba(20,20,42,0.2)); }
.ai_title { font-family: var(--vz-font-display); font-weight: 800; text-transform: uppercase; font-size: 21px; line-height: 1.15; color: #1B1B1B; text-align: center; margin: 0 0 16px; }
.ai_title .color_orange { color: var(--vz-orange); }
.ai_text { font-size: 14px; line-height: 1.65; color: #55555F; margin: 0 0 20px; }
.ai_list { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ai_list li { position: relative; padding-left: 30px; font-size: 14.5px; line-height: 1.5; color: #2B2B33; font-weight: 500; }
.ai_list li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--vz-grad-135); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.ai_bottom { display: flex; align-items: center; gap: 12px; background: #F1F1F7; border-radius: 100px; padding: 9px 20px 9px 9px; }
.ai_bottom__icon { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--vz-grad-135); color: #fff; display: flex; align-items: center; justify-content: center; }
.ai_bottom__icon i { font-size: 19px; line-height: 1; }
.ai_bottom__info { font-size: 13px; font-weight: 600; color: #2B2B33; line-height: 1.4; }

/* ---------- COMPARISON ---------- */
.cmp2 { max-width: 960px; margin: 56px auto 0; background: #fff; border-radius: 28px; box-shadow: 0 24px 60px rgba(20,20,42,0.10); overflow: hidden; }
.cmp2 table { width: 100%; border-collapse: collapse; }
.cmp2 th { padding: 26px 26px 20px; font-family: var(--vz-font-display); font-weight: 800; text-transform: uppercase; font-size: 15px; text-align: left; }
.cmp2 th.cmp2_classic { color: #8A8A9A; }
.cmp2 th.cmp2_vz { color: var(--vz-orange); }
.cmp2 td { padding: 17px 26px; border-top: 1px solid #F0F0F5; font-size: 14.5px; vertical-align: middle; }
.cmp2 td.cmp2_ic { width: 58px; color: var(--vz-orange); font-size: 20px; }
.cmp2 td.cmp2_no { color: #7A7A88; }
.cmp2 td.cmp2_no::before { content: "✕"; color: #C43A3A; font-weight: 700; margin-right: 10px; }
.cmp2 td.cmp2_yes { color: #1B1B1B; font-weight: 600; }
.cmp2 td.cmp2_yes::before { content: "✓"; color: #2E9E5B; font-weight: 700; margin-right: 10px; }

/* ---------- WHAT TO DO (photo cards) ---------- */
.what_to_do { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
.wtd_item { border-radius: 22px; overflow: hidden; background: #fff; box-shadow: var(--vz-shadow-sm); display: flex; flex-direction: column; }
.wtd_item image-slot { display: block; width: 100%; aspect-ratio: 4 / 3; }
.wtd_ph { display: block; width: 100%; aspect-ratio: 4 / 3; background: #EEEEF6; }
.wtd_foot { padding: 18px 20px 22px; }
.wtd_info { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.wtd_icon { width: 40px; height: 40px; border-radius: 50%; background: var(--vz-grad-135); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.wtd_icon i { font-size: 19px; line-height: 1; }
.wtd_name { font-family: var(--vz-font-display); font-weight: 800; text-transform: uppercase; font-size: 15px; color: var(--vz-ink); }
.wtd_caption { font-size: 13.5px; font-weight: 500; color: var(--vz-body); line-height: 1.5; }

/* ---------- CTA (gradient band) ---------- */
.section_gradient_2 .sg2_row { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 48px; align-items: center; padding: 76px 0; }
.sg2_btns { margin-top: 24px; }
.img_card_wr { text-align: center; }
.img_card { width: 100%; max-width: 420px; height: auto; filter: drop-shadow(0 26px 46px rgba(20,20,42,0.18)); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .section_top_block { grid-template-columns: 1fr; border-radius: 0 0 36px 36px; }
  .stb_info { padding: 48px 28px; }
  .stb_media { min-height: 320px; }
  .avantages_info__wrapper { grid-template-columns: 1fr; padding: 40px 28px; gap: 36px; }
  .ai_mockup { order: -1; max-width: 340px; margin: 0 auto; }
  .what_to_do { grid-template-columns: 1fr 1fr; }
  .section_gradient_2 .sg2_row { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; text-align: left; }
}
@media (max-width: 640px) {
  .lpv { padding: 56px 0; }
  .what_to_do { grid-template-columns: 1fr; }
  .cmp2 th, .cmp2 td { padding: 14px 14px; font-size: 13px; }
  .cmp2 td.cmp2_ic { width: 40px; font-size: 16px; }
}