/* ============================================================
   JET ATLAS — ht-why (« Pourquoi » premium numbered cards)
   Ported 1:1 from home-two.css.
   ============================================================ */
.ht-why { background: var(--ht-paper); padding: clamp(76px,12vw,150px) 0; }
.ht-why__head { display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; margin-bottom: clamp(40px,5vw,64px); }
.ht-why__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,1.6vw,22px); }
.ht-why__card { position: relative; overflow: hidden; background: var(--ht-white); border: 1px solid var(--ht-line); border-radius: 22px; padding: clamp(32px,3.4vw,46px) clamp(28px,3vw,38px) clamp(42px,4vw,52px); display: flex; flex-direction: column; gap: 16px; align-items: flex-start; transition: transform .45s var(--ht-ease), box-shadow .45s var(--ht-ease); }
.ht-why__card:hover { transform: translateY(-8px); box-shadow: 0 34px 64px -36px rgba(10,10,10,0.32); }
.ht-why__card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 4px; }
.ht-why__ico { width: 50px; height: 50px; border-radius: 14px; background: var(--ht-lime); color: var(--ht-ink); display: grid; place-items: center; font-size: 20px; }
.ht-why__num { font-family: var(--ht-data); font-weight: 700; font-size: clamp(38px,4vw,54px); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ht-why-stroke, rgba(10,10,10,0.18)); }
.ht-why__card h3 { font-family: var(--ht-serif); font-weight: 500; font-size: clamp(25px,2.6vw,32px); line-height: 1.08; color: var(--ht-ink); }
.ht-why__card p { color: var(--ht-mut); line-height: 1.66; font-size: clamp(15px,1.4vw,16.5px); }
.ht-why__line { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--ht-lime); transition: width .55s var(--ht-ease); }
.ht-why__card:hover .ht-why__line { width: 100%; }

/* Dark variant (section bg + card_bg set to ink via the widget's Style controls;
   `ht-on-dark` recolours the bits with no colour control — see ht-core.css). */
.ht-on-dark .ht-why__card { border-color: rgba(255, 255, 255, 0.10); }
.ht-on-dark .ht-why__card p { color: rgba(255, 255, 255, 0.64); }
.ht-on-dark .ht-why__card:hover { box-shadow: 0 30px 60px -38px rgba(0, 0, 0, 0.8); border-color: rgba(220, 255, 0, 0.32); }

@media (max-width: 1100px) {
  .ht-why__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .ht-why__grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
  .ht-why__card { align-items: center; text-align: center; }
  .ht-why__card-top { justify-content: center; gap: 18px; }
}