/* ==================================================================
   ELI · 2026-09-23
   רצועת ארבע הסטטיסטיקות שמתחת לפתיחה

   הרעיון: לא ארבעה כרטיסים עם רווחים, אלא רצועה אחת
   שנחתכה באלכסון לארבעה חלקים. כל אריח רחב מהעמודה
   שלו בדיוק ברוחב החתך, דוחף את שכנו ויושב מעליו — כך
   המשולש שנוצר מהאלכסון מתמלא בצבע האריח שמתחתיו
   ולא ברקע הדף. אין אף פעם רווח ריק בין שני אריחים.
   ================================================================== */

.stats{
  position:relative;
  z-index:2;
  margin:0;
}

.stats__band{
  --cut:clamp(16px, 3vw, 46px);

  display:grid;
  grid-template-columns:repeat(var(--stats-n, 4), minmax(0, 1fr));
  isolation:isolate;
}

.stat{
  position:relative;
  justify-self:start;

  /*
   * האריח רחב מהעמודה שלו במדויק ברוחב החתך, וב-RTL
   * justify-self:start נועל אותו לקצה הימני של התא — כך העודף
   * גולש שמאלה ומכסה את תחילת האריח הבא.
   */
  inline-size:calc(100% + var(--cut));

  min-block-size:clamp(128px, 13vw, 160px);
  padding:clamp(12px, 1.5vw, 20px) clamp(8px, 1.2vw, 18px);
  padding-inline-end:calc(var(--cut) + clamp(8px, 1.2vw, 18px));

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(4px, .6vw, 9px);
  text-align:center;

  clip-path:polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%);
  transition:filter .3s ease;
}

/* הראשון למעלה, וכך האלכסון שלו חושף את צבע הבא אחריו */
.stat--1{ z-index:4; }
.stat--2{ z-index:3; }
.stat--3{ z-index:2; }
.stat--4{ z-index:1; }

/* האחרון סוגר את הרצועה בקצה ישר — אחרת הרקע היה מציץ מהצד */
.stat:last-child{
  inline-size:100%;
  padding-inline-end:clamp(8px, 1.2vw, 18px);
}

/* ---------- קרם, שחור, קרם, שחור ---------- */

.stat--1,
.stat--3{
  background:var(--c-plate, #F5EFE7);
  color:var(--c-ink, #231F20);
}

.stat--2,
.stat--4{
  background:var(--c-ink, #231F20);
  color:var(--c-plate, #F5EFE7);
}

/* ---------- התוכן ---------- */

.stat__ico{
  display:block;
  line-height:0;
  color:var(--c-orange, #F14B1C);
}

.stat__svg{
  inline-size:clamp(21px, 2.2vw, 30px);
  block-size:clamp(21px, 2.2vw, 30px);
  display:block;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}

.stat__val{
  margin:0;
  font-family:var(--font-display, 'Karantina', sans-serif);
  font-weight:700;
  font-size:clamp(30px, 4.2vw, 60px);
  line-height:.88;
  letter-spacing:0;
  direction:ltr;
  unicode-bidi:isolate;
}

.stat__lab{
  margin:0;
  font-size:clamp(9px, 1.1vw, 16px);
  font-weight:var(--w-black, 900);
  line-height:1.35;
  text-wrap:balance;
}

.stat--1 .stat__lab,
.stat--3 .stat__lab{ color:rgba(35,31,32,.72); }

.stat--2 .stat__lab,
.stat--4 .stat__lab{ color:rgba(245,239,231,.74); }

/* ---------- אנימציה מאופקת, כל אחד בתורו ---------- */

.stat__svg{
  animation-duration:4.2s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-delay:calc(var(--stat-i, 0) * .8s);
  transform-box:fill-box;
  transform-origin:50% 50%;
}

.stat__svg--store{ animation-name:beast-stat-float; }
.stat__svg--users{ animation-name:beast-stat-sway; }
.stat__svg--bike{  animation-name:beast-stat-roll; }
.stat__svg--heart{ animation-name:beast-stat-beat; animation-duration:3.4s; }

@keyframes beast-stat-float{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-3px); }
}

@keyframes beast-stat-sway{
  0%, 100% { transform:rotate(0deg); }
  35%      { transform:rotate(1.8deg); }
  70%      { transform:rotate(-1.8deg); }
}

@keyframes beast-stat-roll{
  0%, 100% { transform:translateX(0); }
  45%      { transform:translateX(3px); }
}

@keyframes beast-stat-beat{
  0%, 62%, 100% { transform:scale(1); }
  68%           { transform:scale(1.11); }
  76%           { transform:scale(1); }
  82%           { transform:scale(1.06); }
}

@media (hover:hover) and (pointer:fine){
  .stat:hover .stat__svg{ transform:translateY(-2px); }
  .stat:hover{ filter:brightness(1.04); }
}

@media (prefers-reduced-motion: reduce){
  .stat__svg{ animation:none; transition:none; }
  .stat:hover .stat__svg{ transform:none; }
}

/* ---------- מסך צר: ארבעה בשורה, רק קומפקטיים יותר ---------- */

@media (max-width:760px){
  .stats__band{ --cut:clamp(12px, 3.4vw, 22px); }

  .stat{
    padding:12px 6px;
    padding-inline-end:calc(var(--cut) + 6px);
    gap:5px;
  }

  .stat:last-child{ padding-inline-end:6px; }

  .stat__lab{ font-size:clamp(9px, 2.6vw, 11px); line-height:1.25; }
  .stat__val{ font-size:clamp(28px, 8.4vw, 38px); }
  .stat__svg{ inline-size:21px; block-size:21px; }
}

@media (max-width:380px){
  .stat{ min-block-size:120px; }
  .stat__lab{ font-size:9px; }
  .stat__val{ font-size:26px; }
}

/* ==================================================================
   הפתיחה והרצועה הישנה

   רצועת חמש הסיבות ירדה לאמצע העמוד, ולכן היא חוזרת
   להתנהגות של סקשן רגיל: רווחים מסביב ובלי הדבקה לקצה המסך.
   ================================================================== */

.feats-band{
  padding-block:clamp(26px, 3.4vw, 48px);
}

.feats-band > .wrap{ padding-right:var(--gutter); }

.feats-band .feats-box{ margin-right:0; }

.feats-band .feats-box{ box-shadow:none; }

/* הפתיחה מפנה מקום לרצועת הנתונים, שנמוכה מהרצועה הקודמת */
@media (max-width:760px){
  :root{ --hero-fill:.78; }
}

@media (max-width:480px){
  :root{ --hero-fill:.74; }
}


/* ==================================================================
   stats-exact — הקיטום והצבעים בדיוק לפי הצילום

   מדדתי את התמונה: התפר בין שני אריחים אינו אלכסון מלא
   אלא קו אנכי עם קיטום קטן בשתי הפינות — כ-12px על אריח
   בגובה 162px. כל אריח חתוך בשתי פינותיו הפיזיות הימניות,
   והאריח שמימינו ממלא את המשולשים — לכן החפיפה וסדר
   השכבות הפוך מקודם: האריח השמאלי ביותר הוא העליון.

   צבעים שנדגמו מהתמונה: קרם #F7EFE3, שחור #201B19,
   כתום #E84700, וטקסט על קרם #15100F.
   ================================================================== */

.stats__band{
  --cut:clamp(9px, 1vw, 14px);
  --c-stat-cream:#F7EFE3;
  --c-stat-ink:#201B19;
  --c-stat-orange:#E84700;
  --c-stat-dark:#15100F;
}

/* האריח הימני ביותר נשאר ישר — זהו קצה הרצועה */
.stat{
  inline-size:100%;
  justify-self:stretch;
  clip-path:none;
  padding-inline:clamp(8px, 1.2vw, 18px);
}

/*
 * כל אריח פרט לימני ביותר גולש ימינה ברוחב הקיטום
 * וחתוך בשתי פינותיו הימניות. המשולשים שנותרים
 * מתמלאים באריח שמתחתיו — לעולם לא ברקע הדף.
 */
.stat:not(.stat--1){
  inline-size:calc(100% + var(--cut));
  justify-self:end;
  padding-inline-start:calc(var(--cut) + clamp(8px, 1.2vw, 18px));
  clip-path:polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% calc(100% - var(--cut)),
    calc(100% - var(--cut)) 100%,
    0 100%
  );
}

/* השמאלי ביותר מעל כולם, וכך הקיטום שלו חושף את שכנו */
.stat--1{ z-index:1; }
.stat--2{ z-index:2; }
.stat--3{ z-index:3; }
.stat--4{ z-index:4; }

/* ---------- הצבעים המדויקים ---------- */

.stat--1,
.stat--3{
  background:var(--c-stat-cream);
  color:var(--c-stat-dark);
}

.stat--2,
.stat--4{
  background:var(--c-stat-ink);
  color:var(--c-stat-cream);
}

.stat--1 .stat__val,
.stat--3 .stat__val{ color:var(--c-stat-dark); }

.stat--2 .stat__val,
.stat--4 .stat__val{ color:var(--c-stat-orange); }

.stat--1 .stat__lab,
.stat--3 .stat__lab{ color:var(--c-stat-dark); }

.stat--2 .stat__lab,
.stat--4 .stat__lab{ color:var(--c-stat-cream); }

.stat--1 .stat__ico,
.stat--3 .stat__ico{ color:var(--c-stat-dark); }

.stat--2 .stat__ico,
.stat--4 .stat__ico{ color:var(--c-stat-cream); }

/* ---------- המספר והאייקון בשורה אחת, הכיתוב מתחת ---------- */

.stat__row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(7px, 1vw, 14px);
}

.stat__val{ line-height:1; }

.stat__svg{
  inline-size:clamp(24px, 2.6vw, 38px);
  block-size:clamp(24px, 2.6vw, 38px);
}

@media (max-width:760px){
  .stat__row{ gap:6px; }
  .stat__svg{ inline-size:24px; block-size:24px; }
  .stats__band{ --cut:9px; }
  .stat{ padding-inline:6px; }
  .stat:not(.stat--1){ padding-inline-start:calc(var(--cut) + 6px); }
}


/* ==================================================================
   stats-flip — הקיטום עובר לצד השני

   קודם כל אריח היה חתוך בשתי פינותיו הימניות וגלש ימינה.
   עכשיו הפוך: החתך בשתי הפינות השמאליות והגלישה שמאלה,
   ולכן האריח הימני ביותר הוא העליון בערימה והשמאלי ביותר
   הוא זה שנשאר ישר — הוא קצה הרצועה.

   הבוררים כותבים גם בצורה הקודמת (‎:not(.stat--1)‎) כדי לגבור
   על הספציפיות של הבלוק שלמעלה, בלי לגעת בו.
   ================================================================== */

.stat,
.stat:not(.stat--1){
  inline-size:calc(100% + var(--cut));
  justify-self:start;
  padding-inline-start:clamp(8px, 1.2vw, 18px);
  padding-inline-end:calc(var(--cut) + clamp(8px, 1.2vw, 18px));
  clip-path:polygon(
    var(--cut) 0,
    100% 0,
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut)),
    0 var(--cut)
  );
}

/* האריח השמאלי ביותר הוא קצה הרצועה ונשאר ישר */
.stat--4,
.stat:last-child{
  inline-size:100%;
  justify-self:stretch;
  clip-path:none;
  padding-inline-end:clamp(8px, 1.2vw, 18px);
}

/* הימני מעל כולם, וכך הקיטום שלו חושף את שכנו שמשמאל */
.stat--1{ z-index:4; }
.stat--2{ z-index:3; }
.stat--3{ z-index:2; }
.stat--4{ z-index:1; }

@media (max-width:760px){
  .stat,
  .stat:not(.stat--1){
    padding-inline-start:6px;
    padding-inline-end:calc(var(--cut) + 6px);
  }

  .stat--4,
  .stat:last-child{ padding-inline-end:6px; }
}