/* ==========================================================================
   mada-updates.css — עדכוני דף הנחיתה מד"א (אוקטובר 2026)
   נטען אחרי desktop.css / mobile.css.
   ========================================================================== */


/* ---------- באנר עליון ---------- */
/* הכותרת היא SVG עם קווי המתאר של הפונט מהעיצוב (Mikhmoret DL Bold),
   כך שהיא נראית זהה לעיצוב בכל דפדפן בלי צורך לטעון את הפונט. */
.hero-banner{
  position:relative;
  width:100%;
  background:#EE2D34;
  overflow:hidden;
}
.hero-labels{
  position:absolute;
  inset:0;
  margin:0;
  width:100%;
  height:100%;
  right:auto;
  bottom:auto;
  transform:none;
}
.hero-art{
  position:absolute;
  display:block;
  height:auto;
  overflow:visible;
}

/* "התפקידים שלנו" מעל שורת התפקידים */
#sect3{flex-direction:column;align-items:flex-start}
#sect3 h2{margin:0 0 1.6rem}
#sect3 .splide{width:100%}
@keyframes mada-pulse{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.035)}
  28%{transform:scale(1)}
  42%{transform:scale(1.025)}
  70%{transform:scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .hero-labels{animation:none}
}

/* ---------- אייקונים ב"למה לבחור" ---------- */
#sect2 p b.why-title{
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.35rem;
}
.why-icon{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2.6rem;
  height:2.6rem;
  border-radius:50%;
  background:#FDEAEA;
  color:#EE2D34;
}
.why-icon svg{
  width:1.5rem;
  height:1.5rem;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ---------- דסקטופ: המבנה המקורי נשמר — הבאנר תופס בדיוק את מקום ומידות הווידאו (1450x700) ---------- */
@media screen and (min-width:1001px){
  .hero-banner{aspect-ratio:1450/700}
  /* מיקום לפי העיצוב: 536–1186 / 108–420 מתוך באנר 349.6–1440 × 0–526.4 */
  .hero-art{left:17.1%;top:20.5%;width:59.6%}
  #sect2 .left{width:30rem}
}

/* ---------- מובייל ---------- */
@media screen and (max-width:1000px){
  /* המבנה המקורי: כותרת אדומה + לוגו, והבאנר במקום הווידאו (720x500) */
  #wrapper>header{width:100%}
  header>.mobile{width:100%}
  .hero-banner{aspect-ratio:720/500}
  .hero-art{left:50%;top:50%;width:88%;transform:translate(-50%,-50%)}
  #sect3 h2{text-align:right;margin:2rem 0 1rem}
  .why-icon{width:2.4rem;height:2.4rem}
  .why-icon svg{width:1.4rem;height:1.4rem}
}