/* ===== Why Choose MDL ===== */
:root{
  --gold:#FFD700; --gold-2:#e0bc00;
  --ink:#111; --panel:#161616; --line:#262626; --muted:#cfcfcf;
}

.why{ position:relative; background:#111; color:#fff; padding:84px 0; overflow:clip; }
.why-wrap{ position:relative; display:grid; gap:56px; grid-template-columns: 1.05fr 1.2fr; align-items:start; }

/* фон под контентом */
.honey-bg{ z-index:0; }
.why-wrap > *:not(.honey-bg){ position:relative; z-index:1; }

/* LEFT */
.why .eyebrow{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); background:rgba(255,215,0,.15); padding:6px 10px; border-radius:999px; margin-bottom:12px;
}
.why-title{ color:var(--gold); font-size:36px; line-height:1.2; margin:6px 0 12px; }
.why-lead{ color:#e7e7e7; font-size:18px; line-height:1.75; max-width:680px; }

/* RIGHT */
.why-right{ position:relative; padding-left:14px; }
.right-title{
  display:inline-block; font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); background:rgba(255,215,0,.12); border:1px solid rgba(255,215,0,.25);
  padding:6px 10px; border-radius:999px; margin:0 0 12px 8px;
}
.why-steps{ list-style:none; margin:0; padding:0; position:relative; }
.why-steps::before{
  content:""; position:absolute; left:23px; top:8px; bottom:8px; width:2px;
  background: linear-gradient(var(--gold), rgba(255,215,0,.06));
  filter: drop-shadow(0 0 6px rgba(255,215,0,.35)); opacity:.8;
}
.step{ position:relative; display:grid; grid-template-columns:62px 1fr; gap:16px; padding:14px 0 22px; }
.step:not(:last-child){ margin-bottom:2px; }
.step-icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,215,0,.1); color:var(--gold); font-size:22px;
  border:1px solid rgba(255,215,0,.25); box-shadow: inset 0 0 0 1px rgba(255,215,0,.18), 0 6px 16px rgba(0,0,0,.25);
}
.step-body{
  position:relative; background: linear-gradient(180deg, #191919, #141414);
  border:1px solid var(--line); border-radius:14px; padding:16px 18px;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; box-shadow:0 8px 20px rgba(0,0,0,.3);
}
.step-body h3{ margin:0 0 6px; font-size:18px; color:#fff; }
.step-body p{ margin:0; color:#d2d2d2; font-size:15px; line-height:1.6; }
.step:hover .step-body{ transform: translateY(-2px); box-shadow:0 16px 30px rgba(0,0,0,.35), 0 0 0 2px rgba(255,215,0,.12) inset; border-color:#2c2c2c; }
.step-body::after{
  content:""; position:absolute; inset:1px; border-radius:12px; pointer-events:none;
  background: linear-gradient(130deg, rgba(255,215,0,.18), transparent 45%); opacity:.6;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding:1px;
}

/* фон‑соты */
.honey-bg{
  position:absolute; inset:-10% -10% -40% -10%;
  background:
    radial-gradient(2px 2px at 0 0, rgba(255,215,0,.12) 99%, transparent 100%) 0 0/42px 42px,
    radial-gradient(2px 2px at 21px 21px, rgba(255,215,0,.08) 99%, transparent 100%) 0 0/42px 42px;
  opacity:.25; pointer-events:none; animation: floatHoney 16s linear infinite;
}
@keyframes floatHoney{ from{ transform: translateY(0); } to{ transform: translateY(42px); } }

/* ===== reveal override (с приоритетом) ===== */
/* видно по умолчанию */
.why .reveal{ opacity:1 !important; transform:none !important; }
/* если JS включён — анимируем */
.js .why .reveal{ opacity:0 !important; transform:translateY(14px) !important; }
.js .why .reveal.in{ opacity:1 !important; transform:none !important; transition:opacity .5s ease, transform .5s ease; }
.js .why .reveal.in:nth-child(1){ transition-delay:.04s }
.js .why .reveal.in:nth-child(2){ transition-delay:.12s }
.js .why .reveal.in:nth-child(3){ transition-delay:.20s }
.js .why .reveal.in:nth-child(4){ transition-delay:.28s }

/* Адаптив */
@media (max-width:1100px){
  .why-wrap{ grid-template-columns:1fr; gap:36px; }
  .why-right{ padding-left:0; }
  .why-steps::before{ left:23px; }
}
@media (max-width:560px){
  .why{ padding:64px 0; }
  .why-title{ font-size:28px; }
  .why-lead{ font-size:16px; }
}