/* Главная · третий слайд «Почему выбирают Buckler» · 2026-08-07 */
.home-why{
  --home-why-header:76px;
  position:relative;
  height:360vh;
  min-height:2200px;
  background:
    radial-gradient(circle at 50% 45%,rgba(68,139,255,.13),rgba(68,139,255,.045) 32%,transparent 61%),
    linear-gradient(180deg,#f8fbff 0%,#f1f6fc 48%,#f8fbff 100%);
  color:#071b3a;
  overflow:clip;
  isolation:isolate;
}
.home-why__sticky{
  position:sticky;
  top:0;
  box-sizing:border-box;
  height:100svh;
  min-height:100svh;
  overflow:hidden;
  display:grid;
  place-items:center;
  padding:calc(var(--home-why-header) + 8px) 24px 18px;
}
.home-why__backdrop,
.home-why__backdrop::before,
.home-why__backdrop::after{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.home-why__backdrop{z-index:0}
.home-why__backdrop::before{
  content:"";
  left:50%;
  top:51%;
  width:min(820px,61vw);
  height:min(820px,61vw);
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:1px solid rgba(49,111,210,.095);
  box-shadow:
    0 0 0 54px rgba(49,111,210,.032),
    0 0 0 108px rgba(49,111,210,.024),
    0 0 0 162px rgba(49,111,210,.016);
}
.home-why__backdrop::after{
  content:"";
  background:
    radial-gradient(circle at 7% 52%,rgba(28,109,239,.42) 0 7px,transparent 8px),
    radial-gradient(circle at 39% 12%,rgba(28,109,239,.48) 0 10px,transparent 11px),
    radial-gradient(circle at 85% 19%,rgba(28,109,239,.45) 0 7px,transparent 8px),
    radial-gradient(circle at 92% 51%,rgba(28,109,239,.38) 0 10px,transparent 11px),
    radial-gradient(circle at 61% 62%,rgba(28,109,239,.34) 0 6px,transparent 7px),
    radial-gradient(circle at 12% 73%,rgba(28,109,239,.32) 0 8px,transparent 9px);
  opacity:.78;
  filter:drop-shadow(0 7px 10px rgba(32,93,190,.22));
}
.home-why__title-wrap{
  position:absolute;
  z-index:7;
  left:50%;
  top:clamp(110px,21vh,205px);
  width:min(610px,38vw);
  transform:translateX(-50%);
  text-align:center;
  pointer-events:none;
  opacity:var(--home-why-title-opacity,0);
  filter:blur(var(--home-why-title-blur,12px));
  clip-path:inset(var(--home-why-title-clip,52%) 0 var(--home-why-title-clip,52%) 0 round 24px);
  will-change:transform,opacity,filter,clip-path;
}
.home-why__title{
  margin:0;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(42px,4.35vw,72px);
  line-height:.94;
  letter-spacing:-.062em;
  font-weight:850;
  text-wrap:balance;
  transform:translate3d(0,var(--home-why-title-y,42px),0) rotateX(var(--home-why-title-rotate,15deg)) scale(var(--home-why-title-scale,.92));
  transform-origin:50% 100%;
  text-shadow:0 14px 38px rgba(20,62,125,.08);
  will-change:transform;
}
.home-why__title span{display:block}
.home-why__art{
  position:absolute;
  z-index:3;
  left:50%;
  top:61%;
  width:min(580px,39vw);
  aspect-ratio:1.5/1;
  transform:translate(-50%,-50%) translate3d(var(--home-why-art-x,0),var(--home-why-art-y,-300px),0) rotate(var(--home-why-art-rotate,-4deg)) scale(var(--home-why-art-scale,.72));
  opacity:var(--home-why-art-opacity,0);
  filter:drop-shadow(0 34px 48px rgba(34,86,162,.20));
  will-change:transform,opacity;
  pointer-events:none;
}
.home-why__art::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:4%;
  width:76%;
  height:19%;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(53,111,197,.19),rgba(53,111,197,0) 70%);
  filter:blur(9px);
}
.home-why__art img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain}
.home-why__cards{position:absolute;z-index:5;inset:0;pointer-events:none}
.home-why-card{
  position:absolute;
  box-sizing:border-box;
  display:grid;
  grid-template-columns:clamp(48px,3.6vw,64px) minmax(0,1fr);
  align-items:start;
  gap:clamp(12px,1.05vw,18px);
  padding:clamp(15px,1.2vw,22px);
  border:1px solid rgba(183,205,232,.62);
  border-radius:clamp(22px,1.8vw,32px);
  background:linear-gradient(145deg,rgba(255,255,255,.93),rgba(248,251,255,.83));
  box-shadow:0 25px 62px rgba(49,75,111,.105),inset 0 1px 0 rgba(255,255,255,.95);
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  opacity:var(--home-why-card-opacity,0);
  transform:translate3d(var(--home-why-card-x,0),var(--home-why-card-y,-520px),0) rotate(var(--home-why-card-rotate,0deg)) scale(var(--home-why-card-scale,.86));
  transform-origin:50% 50%;
  will-change:transform,opacity;
  pointer-events:auto;
}
.home-why-card::after{
  content:"";
  position:absolute;
  inset:1px;
  border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.40),rgba(255,255,255,0) 38%,rgba(85,151,255,.045));
  pointer-events:none;
}
.home-why-card__icon{
  position:relative;
  z-index:1;
  width:clamp(48px,3.6vw,64px);
  height:clamp(48px,3.6vw,64px);
  display:grid;
  place-items:center;
  border-radius:clamp(16px,1.25vw,22px);
  border:1px solid rgba(145,188,242,.40);
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(226,240,255,.72));
  color:#405b81;
  box-shadow:inset 0 1px 0 #fff,0 10px 24px rgba(45,99,176,.08);
}
.home-why-card__icon svg{width:52%;height:52%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-why-card__copy{position:relative;z-index:1;min-width:0}
.home-why-card h3{
  margin:1px 0 9px;
  font-size:clamp(16px,1.24vw,22px);
  line-height:1.12;
  letter-spacing:-.03em;
  font-weight:850;
  text-wrap:balance;
}
.home-why-card p{
  margin:0;
  color:#2f4668;
  font-size:clamp(11.5px,.79vw,14px);
  line-height:1.48;
  font-weight:500;
}
.home-why-card--verify{left:9.2%;top:10.2%;width:23.2%}
.home-why-card--legal{left:4.1%;top:31.4%;width:24.8%}
.home-why-card--quality{left:12.2%;top:58.5%;width:23.8%}
.home-why-card--safe-start{left:15.8%;top:78.2%;width:24.1%}
.home-why-card--control{right:13.1%;top:10.6%;width:22.1%}
.home-why-card--payment{right:4.7%;top:31.2%;width:21.6%}
.home-why-card--specialists{right:7.1%;top:58.2%;width:24.2%}
.home-why-card--data{left:40.5%;top:79.1%;width:20.9%}
.home-why-card--route{right:10.4%;top:79.0%;width:25.8%}
.home-why__progress{
  position:absolute;
  z-index:10;
  right:clamp(12px,1.4vw,24px);
  top:50%;
  width:3px;
  height:min(190px,25vh);
  transform:translateY(-50%);
  overflow:hidden;
  border-radius:999px;
  background:rgba(36,94,181,.11);
}
.home-why__progress i{display:block;width:100%;height:var(--home-why-progress,0%);border-radius:inherit;background:linear-gradient(180deg,#74b4ff,#155dcc);box-shadow:0 0 18px rgba(34,111,229,.34)}

@media (max-width:1250px){
  .home-why-card{grid-template-columns:46px minmax(0,1fr);gap:11px;padding:14px;border-radius:22px}
  .home-why-card__icon{width:46px;height:46px;border-radius:15px}
  .home-why-card h3{margin-bottom:6px;font-size:clamp(14px,1.22vw,18px)}
  .home-why-card p{font-size:clamp(10px,.83vw,12px);line-height:1.38}
  .home-why-card--verify{left:5.5%;width:26%}
  .home-why-card--legal{left:2.5%;width:27%}
  .home-why-card--quality{left:6%;width:28%}
  .home-why-card--safe-start{left:8%;width:30%}
  .home-why-card--control{right:7%;width:25%}
  .home-why-card--payment{right:2.2%;width:25%}
  .home-why-card--specialists{right:4%;width:29%}
  .home-why-card--route{right:5%;width:31%}
  .home-why-card--data{left:39.5%;width:22%}
}

@media (max-width:820px){
  .home-why{
    height:430vh;
    min-height:2200px;
    --home-why-header:64px;
  }
  .home-why__sticky{min-height:100svh;padding:calc(var(--home-why-header) + 4px) 8px 8px}
  .home-why__backdrop::before{top:39%;width:min(390px,92vw);height:min(390px,92vw);box-shadow:0 0 0 34px rgba(49,111,210,.026),0 0 0 68px rgba(49,111,210,.018)}
  .home-why__backdrop::after{opacity:.36}
  .home-why__title-wrap{top:calc(var(--home-why-header) + 10px);width:calc(100vw - 34px)}
  .home-why__title{font-size:clamp(31px,10vw,48px);line-height:.98;letter-spacing:-.055em}
  .home-why__art{top:45%;width:min(335px,76vw);opacity:calc(var(--home-why-art-opacity,0) * .42);filter:drop-shadow(0 25px 36px rgba(34,86,162,.14))}
  .home-why__cards{
    inset:calc(var(--home-why-header) + 92px) 7px 7px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-auto-rows:auto;
    align-content:start;
    gap:6px;
  }
  .home-why-card{
    position:relative;
    inset:auto!important;
    width:auto!important;
    min-height:0;
    grid-template-columns:30px minmax(0,1fr);
    gap:7px;
    padding:8px 8px 9px;
    border-radius:14px;
    background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(247,251,255,.91));
    box-shadow:0 10px 24px rgba(49,75,111,.075),inset 0 1px 0 rgba(255,255,255,.96);
  }
  .home-why-card__icon{width:30px;height:30px;border-radius:9px}
  .home-why-card h3{margin:0 0 4px;font-size:clamp(10.5px,3vw,12.5px);line-height:1.12;letter-spacing:-.025em}
  .home-why-card p{font-size:clamp(8.4px,2.35vw,10px);line-height:1.28;color:#304564}
  .home-why-card--control,.home-why-card--payment{margin-top:clamp(108px,29vw,132px)}
  .home-why-card--route{grid-column:1/-1}
  .home-why__progress{right:4px;width:2px;height:130px}
}

@media (max-width:390px){
  .home-why__cards{inset:calc(var(--home-why-header) + 82px) 5px 5px;gap:5px}
  .home-why-card{grid-template-columns:27px minmax(0,1fr);gap:6px;padding:7px 7px 8px;border-radius:12px}
  .home-why-card__icon{width:27px;height:27px;border-radius:8px}
  .home-why-card h3{font-size:10.3px;margin-bottom:3px;line-height:1.1}
  .home-why-card p{font-size:8.1px;line-height:1.22}
}

@media (max-height:690px) and (min-width:821px){
  .home-why__sticky{padding-top:74px}
  .home-why__title-wrap{top:82px}
  .home-why__title{font-size:clamp(38px,4vw,58px)}
  .home-why__art{top:59%;width:min(470px,34vw)}
  .home-why-card{padding:11px;grid-template-columns:40px minmax(0,1fr);gap:9px;border-radius:18px}
  .home-why-card__icon{width:40px;height:40px;border-radius:13px}
  .home-why-card h3{font-size:14px;margin-bottom:4px}
  .home-why-card p{font-size:10px;line-height:1.3}
}

@media (prefers-reduced-motion:reduce){
  .home-why{height:100svh;min-height:100svh}
  .home-why__title-wrap{opacity:1!important;filter:none!important;clip-path:none!important}
  .home-why__title{transform:none!important}
  .home-why__art{opacity:1!important;transform:translate(-50%,-50%)!important}
  .home-why-card{opacity:1!important;transform:none!important}
  .home-why__progress{display:none}
}

html[data-theme="dark"] .home-why{
  background:radial-gradient(circle at 50% 45%,rgba(49,121,233,.17),transparent 58%),linear-gradient(180deg,#07111f,#0b1728 48%,#07111f);
  color:#eef6ff;
}
html[data-theme="dark"] .home-why-card{background:linear-gradient(145deg,rgba(18,34,55,.92),rgba(11,25,43,.84));border-color:rgba(133,174,224,.20);box-shadow:0 26px 60px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .home-why-card p{color:#bdd0e9}
html[data-theme="dark"] .home-why-card__icon{color:#a9c9f7;background:rgba(25,50,80,.75);border-color:rgba(139,188,247,.22)}

/* Низкие альбомные экраны: весь слайд остаётся внутри одного viewport. */
@media (max-height:520px) and (min-width:821px){
  .home-why__sticky{padding:30px 10px 6px}
  .home-why__title-wrap{top:32px}
  .home-why__title{font-size:clamp(30px,3.5vw,42px);line-height:.92}
  .home-why__art{top:58%;width:min(300px,31vw)}
  .home-why__cards{transform:scale(.82);transform-origin:50% 50%}
  .home-why__progress{height:min(118px,34vh)}
}

@media (max-width:820px) and (max-height:520px){
  .home-why{--home-why-header:50px}
  .home-why__sticky{padding:52px 6px 4px}
  .home-why__title-wrap{top:52px;width:calc(100vw - 28px)}
  .home-why__title{font-size:clamp(25px,6vw,34px);line-height:.92}
  .home-why__art{top:49%;width:min(260px,55vw)}
  .home-why__cards{inset:116px 6px 4px;gap:4px}
  .home-why-card{grid-template-columns:27px minmax(0,1fr);gap:6px;padding:6px 7px;border-radius:11px}
  .home-why-card__icon{width:27px;height:27px;border-radius:8px}
  .home-why-card h3{font-size:10px;margin-bottom:2px;line-height:1.08}
  .home-why-card p{font-size:7.8px;line-height:1.17}
  .home-why-card--control,.home-why-card--payment{margin-top:66px}
  .home-why__progress{height:96px}
}


/* HOME WHY STICKY ROOT PRODUCTION 20260811 */

html,
body{
  overflow-x:clip !important;
}

@supports not (overflow:clip){
  html,
  body{
    overflow-x:visible !important;
  }
}

@media (max-width:820px){

  .home-why__sticky{
    position:-webkit-sticky;
    position:sticky;
    top:0;

    height:100svh;
    min-height:100svh;
    max-height:100svh;

    overflow:hidden;
  }

}

/* KEEP CURRENT WHY-BUCKLER BACKGROUND START */
/* ============================================================
   Главная · «Почему выбирают Buckler» · фон/арт/мобильная сцена 11.08.2026
   ============================================================ */
.home-why {
background:#fbf7f2 url('/images/home-why-buckler/background-20260811.png') center center/cover no-repeat!important;
}

html[data-theme="dark"] .home-why {
background:
    linear-gradient(rgba(5,13,24,.82),rgba(5,13,24,.84)),
    url('/images/home-why-buckler/background-20260811.png') center center/cover no-repeat!important;
}
/* KEEP CURRENT WHY-BUCKLER BACKGROUND END */

/* ============================================================
   HOME WHY SINGLE BACKGROUND FIX · 2026-08-15
   Один исходный фон 16:9 на sticky viewport.
   Убирает увеличенную копию фона с высокой scroll-секции.
   ============================================================ */

.home-why{
  background:#fbf7f2 !important;
  background-image:none !important;
}

.home-why__sticky{
  background-color:#fbf7f2 !important;
  background-image:url('/images/home-why-buckler/background-20260811.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

.home-why__backdrop,
.home-why__backdrop::before,
.home-why__backdrop::after{
  display:none !important;
  background:none !important;
  background-image:none !important;
}

.home-why__sticky::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.96) 0%,
      rgba(255,255,255,.48) 5%,
      rgba(255,255,255,.10) 10%,
      rgba(255,255,255,0) 16%,
      rgba(255,255,255,0) 84%,
      rgba(255,255,255,.10) 90%,
      rgba(255,255,255,.48) 95%,
      rgba(255,255,255,.96) 100%
    ) !important;
}

html[data-theme="dark"] .home-why{
  background:#07111f !important;
  background-image:none !important;
}

html[data-theme="dark"] .home-why__sticky{
  background-color:#07111f !important;
  background-image:url('/images/home-why-buckler/background-20260811.png') !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

html[data-theme="dark"] .home-why__sticky::before{
  background:
    linear-gradient(
      180deg,
      rgba(7,17,31,.90) 0%,
      rgba(7,17,31,.42) 5%,
      rgba(7,17,31,.08) 11%,
      rgba(7,17,31,0) 17%,
      rgba(7,17,31,0) 83%,
      rgba(7,17,31,.08) 89%,
      rgba(7,17,31,.42) 95%,
      rgba(7,17,31,.90) 100%
    ) !important;
}

@media (max-width:820px){
  .home-why{
    background:#fbf7f2 !important;
    background-image:none !important;
  }

  .home-why__sticky{
    background-image:url('/images/home-why-buckler/background-20260811.png') !important;
    background-size:cover !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
  }
}

/* HOME WHY 20260815 FINAL START */

/*
  Один фон без второй увеличенной копии.
  Новый исходник:
  ChatGPT Image 15 авг. 2026 г., 13_38_33.png
*/

.home-why{
  background:#fbf8f4 !important;
  background-image:none !important;
}

.home-why__sticky{
  isolation:isolate;
  overflow:hidden;
  background-color:#fbf8f4 !important;
  background-image:
    url('/images/home-why-buckler/background-20260815.png') !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
}

/* Полностью отключаем старый увеличенный фон */
.home-why__backdrop,
.home-why__backdrop::before,
.home-why__backdrop::after{
  background:none !important;
  background-image:none !important;
  display:none !important;
  opacity:0 !important;
}

/*
  Мягкое растворение верхнего и нижнего края,
  чтобы переходы к соседним слайдам не выглядели обрезанными.
*/
.home-why__sticky::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.52) 3.5%,
      rgba(255,255,255,.18) 7%,
      rgba(255,255,255,0) 12%,
      rgba(255,255,255,0) 88%,
      rgba(255,255,255,.17) 93%,
      rgba(255,255,255,.52) 97%,
      rgba(255,255,255,.92) 100%
    ) !important;
}

/*
  Очень лёгкая синяя подсветка.
  Её интенсивность плавно меняет JS при прокрутке слайда.
*/
.home-why__sticky::after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
  left:50%;
  top:52%;
  width:min(1040px,82vw);
  height:min(700px,72vh);
  transform:translate(-50%,-50%);
  border-radius:50%;
  opacity:var(--home-why-scroll-glow,0);
  background:
    radial-gradient(
      ellipse at center,
      rgba(40,126,255,.19) 0%,
      rgba(58,135,255,.095) 34%,
      rgba(72,143,255,.035) 57%,
      rgba(72,143,255,0) 76%
    );
  filter:blur(22px);
  transition:opacity .14s linear;
}

/* Описания карточек больше не отображаются */
.home-why-card p{
  display:none !important;
}

/* После удаления описаний выравниваем иконку и название */
.home-why-card{
  align-items:center !important;
}

.home-why-card__copy{
  display:flex !important;
  min-width:0 !important;
  align-items:center !important;
}

.home-why-card h3{
  margin:0 !important;
}

/*
  Более длинное новое название.
  На desktop даём этой карточке немного больше пространства.
*/
.home-why-card--control{
  right:10.5% !important;
  width:25.5% !important;
}


/* =========================
   MOBILE
   ========================= */

@media (max-width:820px){

  .home-why{
    height:390vh !important;
    min-height:2050px !important;
    background:none !important;
  }

  .home-why__sticky{
    background-image:
      url('/images/home-why-buckler/background-20260815.png') !important;
    background-position:center center !important;
    background-size:cover !important;
    background-repeat:no-repeat !important;
  }

  .home-why__sticky::after{
    width:118vw;
    height:61vh;
    top:52%;
    filter:blur(18px);
  }

  /*
    Не обычная вертикальная "линейка",
    а асимметричная композиция вокруг центрального арта.
  */
  .home-why__cards{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    transform:none !important;
    pointer-events:none !important;
  }

  .home-why-card{
    position:absolute !important;
    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    align-items:center !important;
    gap:8px !important;
    width:auto !important;
    min-height:50px !important;
    padding:8px 10px !important;
    border-radius:16px !important;
    background:
      linear-gradient(
        145deg,
        rgba(255,255,255,.95),
        rgba(246,250,255,.88)
      ) !important;
    border:
      1px solid rgba(151,184,226,.46) !important;
    box-shadow:
      0 13px 30px rgba(41,79,132,.10),
      inset 0 1px 0 rgba(255,255,255,.98) !important;
    backdrop-filter:
      blur(13px) saturate(108%) !important;
    -webkit-backdrop-filter:
      blur(13px) saturate(108%) !important;
  }

  .home-why-card__icon{
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
  }

  .home-why-card h3{
    margin:0 !important;
    font-size:clamp(12px,3.25vw,14px) !important;
    line-height:1.13 !important;
    letter-spacing:-.025em !important;
    text-wrap:balance;
  }

  /* Верхняя группа */
  .home-why-card--verify{
    left:3.5% !important;
    right:auto !important;
    top:22.4% !important;
    width:50% !important;
  }

  .home-why-card--legal{
    right:3.5% !important;
    left:auto !important;
    top:29.6% !important;
    width:42% !important;
  }

  .home-why-card--quality{
    left:6.5% !important;
    right:auto !important;
    top:36.2% !important;
    width:41% !important;
  }

  .home-why-card--safe-start{
    right:4.5% !important;
    left:auto !important;
    top:41.5% !important;
    width:47% !important;
  }

  /* Нижняя группа */
  .home-why-card--payment{
    right:4% !important;
    left:auto !important;
    top:58.9% !important;
    width:42% !important;
    margin:0 !important;
  }

  .home-why-card--control{
    left:3.5% !important;
    right:auto !important;
    top:62.6% !important;
    width:48% !important;
    margin:0 !important;
  }

  .home-why-card--data{
    right:4% !important;
    left:auto !important;
    top:69.3% !important;
    width:41% !important;
  }

  .home-why-card--specialists{
    left:5.5% !important;
    right:auto !important;
    top:71.5% !important;
    width:50% !important;
  }

  .home-why-card--route{
    left:15% !important;
    right:auto !important;
    top:81.2% !important;
    width:70% !important;
  }

  .home-why__progress{
    right:4px !important;
    width:2px !important;
    height:122px !important;
  }
}


@media (max-width:390px){

  .home-why-card{
    grid-template-columns:30px minmax(0,1fr) !important;
    gap:7px !important;
    min-height:46px !important;
    padding:7px 8px !important;
    border-radius:14px !important;
  }

  .home-why-card__icon{
    width:30px !important;
    height:30px !important;
    border-radius:10px !important;
  }

  .home-why-card h3{
    font-size:12px !important;
    line-height:1.12 !important;
  }

  .home-why-card--verify{
    width:51% !important;
  }

  .home-why-card--legal{
    width:43% !important;
  }

  .home-why-card--control{
    width:51% !important;
  }

  .home-why-card--specialists{
    width:51% !important;
  }

  .home-why-card--route{
    left:12% !important;
    width:76% !important;
  }
}


/* Dark theme */
html[data-theme="dark"] .home-why{
  background:#07111f !important;
  background-image:none !important;
}

html[data-theme="dark"] .home-why__sticky{
  background-image:
    linear-gradient(
      rgba(5,13,24,.79),
      rgba(5,13,24,.82)
    ),
    url('/images/home-why-buckler/background-20260815.png') !important;
}

html[data-theme="dark"] .home-why__sticky::before{
  background:
    linear-gradient(
      180deg,
      rgba(7,17,31,.92) 0%,
      rgba(7,17,31,.42) 5%,
      rgba(7,17,31,0) 12%,
      rgba(7,17,31,0) 88%,
      rgba(7,17,31,.42) 95%,
      rgba(7,17,31,.92) 100%
    ) !important;
}

/* HOME WHY 20260815 FINAL END */

/* HOME WHY MOBILE STAIRCASE 20260815 START */

/*
 * Аккуратная мобильная "лесенка".
 * Desktop не затрагивается.
 */

@media (max-width:820px){

  .home-why__cards{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    transform:none !important;
    pointer-events:none !important;
  }

  .home-why-card{
    position:absolute !important;
    right:auto;
    margin:0 !important;

    display:grid !important;
    grid-template-columns:34px minmax(0,1fr) !important;
    align-items:center !important;
    gap:9px !important;

    min-height:54px !important;
    padding:9px 12px !important;

    border-radius:17px !important;

    overflow:visible !important;
    isolation:isolate;

    transition:
      opacity .34s ease,
      transform .44s cubic-bezier(.2,.72,.2,1),
      box-shadow .35s ease !important;
  }

  .home-why-card__icon{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    border-radius:11px !important;
  }

  .home-why-card__copy{
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
  }

  .home-why-card h3{
    margin:0 !important;
    font-size:clamp(12.5px,3.45vw,14px) !important;
    line-height:1.12 !important;
    letter-spacing:-.025em !important;
    text-wrap:balance;
  }


  /*
   * ЛЕСЕНКА
   *
   * Ритм:
   * слева → справа → слева → справа
   * затем после центрального арта тот же ритм.
   *
   * Интервалы между карточками выровнены.
   */

  .home-why-card--verify{
    top:22.8% !important;
    left:3.5% !important;
    width:51% !important;
  }

  .home-why-card--legal{
    top:30.2% !important;
    left:45.5% !important;
    width:50.5% !important;
  }

  .home-why-card--quality{
    top:37.6% !important;
    left:8% !important;
    width:48% !important;
  }

  .home-why-card--safe-start{
    top:45% !important;
    left:43% !important;
    width:53% !important;
  }


  /*
   * Даём центральному арт-объекту
   * немного воздуха.
   */

  .home-why-card--payment{
    top:57.4% !important;
    left:3.5% !important;
    width:48.5% !important;
  }

  .home-why-card--control{
    top:64.8% !important;
    left:42% !important;
    width:54% !important;
  }

  .home-why-card--specialists{
    top:72.2% !important;
    left:7% !important;
    width:52% !important;
  }

  .home-why-card--data{
    top:79.6% !important;
    left:47% !important;
    width:49% !important;
  }

  /*
   * Последний блок завершает композицию
   * и визуально собирает лесенку.
   */

  .home-why-card--route{
    top:87% !important;
    left:13% !important;
    width:74% !important;
  }


  /*
   * Очень мягкая синяя вспышка ПОД карточкой.
   * Она не перекрашивает сам блок.
   */

  .home-why-card::after{
    content:"";
    position:absolute;

    left:12%;
    right:12%;
    bottom:-13px;

    height:29px;

    border-radius:50%;

    pointer-events:none;

    z-index:-1;

    opacity:0;

    transform:
      translateY(-4px)
      scaleX(.68)
      scaleY(.7);

    background:
      radial-gradient(
        ellipse at center,
        rgba(35,132,255,.30) 0%,
        rgba(44,139,255,.17) 32%,
        rgba(62,151,255,.07) 55%,
        rgba(76,158,255,0) 76%
      );

    filter:blur(10px);
  }

  .home-why-card.home-why-card--soft-flash::after{
    animation:
      homeWhyCardSoftBlueFlash
      .82s
      cubic-bezier(.18,.72,.25,1)
      both;
  }

  @keyframes homeWhyCardSoftBlueFlash{

    0%{
      opacity:0;
      transform:
        translateY(-5px)
        scaleX(.60)
        scaleY(.65);
    }

    27%{
      opacity:.72;
      transform:
        translateY(0)
        scaleX(.93)
        scaleY(1);
    }

    58%{
      opacity:.34;
      transform:
        translateY(3px)
        scaleX(1.05)
        scaleY(.92);
    }

    100%{
      opacity:0;
      transform:
        translateY(7px)
        scaleX(1.14)
        scaleY(.72);
    }
  }

}


/*
 * Более узкие iPhone.
 */

@media (max-width:430px){

  .home-why-card{
    grid-template-columns:32px minmax(0,1fr) !important;
    gap:8px !important;

    min-height:51px !important;

    padding:
      8px
      10px !important;
  }

  .home-why-card__icon{
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }

  .home-why-card h3{
    font-size:13px !important;
    line-height:1.1 !important;
  }


  .home-why-card--verify{
    left:3.5% !important;
    width:52.5% !important;
  }

  .home-why-card--legal{
    left:46% !important;
    width:50% !important;
  }

  .home-why-card--quality{
    left:7% !important;
    width:49% !important;
  }

  .home-why-card--safe-start{
    left:43% !important;
    width:53% !important;
  }


  .home-why-card--payment{
    left:3.5% !important;
    width:49% !important;
  }

  .home-why-card--control{
    left:41% !important;
    width:55% !important;
  }

  .home-why-card--specialists{
    left:6% !important;
    width:53% !important;
  }

  .home-why-card--data{
    left:46% !important;
    width:50% !important;
  }

  .home-why-card--route{
    left:11% !important;
    width:78% !important;
  }
}


@media (max-width:370px){

  .home-why-card{
    grid-template-columns:29px minmax(0,1fr) !important;
    gap:7px !important;

    min-height:47px !important;

    padding:
      7px
      8px !important;

    border-radius:14px !important;
  }

  .home-why-card__icon{
    width:29px !important;
    height:29px !important;
    min-width:29px !important;
    border-radius:9px !important;
  }

  .home-why-card h3{
    font-size:12px !important;
  }

}


/*
 * Учитываем пользователей,
 * отключивших системные анимации.
 */

@media (
  max-width:820px
) and (
  prefers-reduced-motion:reduce
){

  .home-why-card.home-why-card--soft-flash::after{
    animation:none !important;
  }

}

/* HOME WHY MOBILE STAIRCASE 20260815 END */