/* =========================================
WHY STATS — DARK HEADER BASE + WAVE PATTERN
headeriga sama toon aga tumedam
========================================= */

.section.why-stats{
  position:relative;
  padding:110px 0;
  overflow:hidden;

  /* ⭐ sama gradient mis headeril, aga tumedam */
  background:
    linear-gradient(
      90deg,
      #2e3439,
      #3a4147
    );

}


/* =========================================
VISIBLE WAVE PATTERN
suured nähtavad lained
========================================= */

.section.why-stats::before{
  content:"";
  position:absolute;
  inset:0;

  /* suured laineringid */
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.05) 0%, transparent 55%),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.05) 0%, transparent 55%),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.04) 0%, transparent 60%),

    /* lainejooned */
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 2px,
      transparent 2px,
      transparent 120px
    );

  opacity:1;
  pointer-events:none;
  z-index:0;
}


.section.why-stats > .container{
  position:relative;
  z-index:1;
}

/* Header */
.why-stats .section-header{
  margin:0 auto 42px;
  max-width:860px;
}

.why-stats .section-eyebrow{
  display:inline-block;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:#64748b;
  margin-bottom:10px;
}

.why-stats .section-header h2{
  margin:0 0 14px;
  font-size:clamp(30px, 3.2vw, 46px);
  line-height:1.08;
  letter-spacing:-.02em;
  color:#0f172a;
}

.why-stats .section-header p{
  margin:0;
  font-size:16px;
  line-height:1.75;
  color:#475569;
}

.why-stats-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:18px;
  align-items:stretch;
}

/* CARD */
/* =====================================
WHY STATS CARD — GREEN CTA STYLE
===================================== */

.why-stat-card{
  position:relative;
  padding:22px 22px 20px;
  border-radius:52px;

  /* ⭐ roheline + pattern base */
  background:
    linear-gradient(
      180deg,
      var(--brand-primary),
      #a9b43a
    ),
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(0,0,0,.06) 0px,
      rgba(0,0,0,.06) 2px,
      transparent 2px,
      transparent 120px
    );


  color:#111;

  box-shadow:
    0 20px 55px rgba(0,0,0,.25),
    inset 0 1px rgba(255,255,255,.25);

  overflow:hidden;
  min-height:140px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}


/* õrn “gold line” ülaserv */
.why-stat-card::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:14px;
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(201,161,90,.55),
    rgba(255,243,201,.75),
    rgba(201,161,90,.55),
    transparent
  );
  opacity:.9;
}




/* title */
.why-stat-card h3{
  margin:28px 0 6px; /* ⭐ lükkab alla */
  font-size:18px; /* ⭐ suurem */
  font-weight:700;
  letter-spacing:.01em;
  color:#0f172a;
}


/* description */
.why-stat-card p{
  margin:0;
  font-size:14px;
  line-height:1.6;
  color:#475569;
}

/* Hover */
@media (hover:hover){
  .why-stat-card{
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
  }
  .why-stat-card:hover{
    transform: translateY(-3px);
    box-shadow:
      0 28px 70px rgba(0,0,0,.16),
      inset 0 0 0 1px rgba(255,255,255,.75);
    filter: brightness(1.02);
  }
  .why-stat-card:hover .why-stat-number{
    animation: goldShine 5s linear infinite;
  }
}

@keyframes goldShine{
  0%{ background-position:0% 50%; }
  100%{ background-position:200% 50%; }
}

/* TABLET */
@media (max-width:1100px){
  .why-stats-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:16px;
  }
  .why-stat-number{ font-size:40px; }
}

/* MOBILE */
@media (max-width:640px){
  .section.why-stats{ padding:80px 0; }
  .why-stats-grid{
    grid-template-columns: 1fr;
    gap:14px;
  }
  .why-stat-card{
    border-radius:18px;
    padding:18px;
    min-height:auto;
  }
  .why-stat-number{ font-size:38px; }
}

/* Kui su teemas on reveal-stagger mis peidab elemendid (opacity:0),
   siis see tagab, et kaardid on ikka nähtavad. */
.reveal-stagger .why-stat-card{
  opacity:1 !important;
  transform:none !important;
  visibility:visible !important;
}

/* =====================================
   WHY STATS — GOLD LINE UNDER NUMBER
===================================== */

/* eemaldame vana joone */
.why-stat-card::before{
  display:none;
}

/* number wrapper */
.why-stat-number{
  position:relative;
  padding-bottom:16px;
  margin-bottom:14px;
}


/* =====================================
   PREMIUM GOLD SHINE — NO BLUR
===================================== */

.vl24-why-cards .why-left h2{

  position:relative;

  background:
    linear-gradient(
      120deg,

      #120b05 0%,
      #2a1a0b 15%,
      #6b4a1f 30%,
      #c9a15a 45%,
      #fff3c9 50%,
      #c9a15a 55%,
      #6b4a1f 70%,
      #2a1a0b 85%,
      #120b05 100%
    );

  background-size:300% 100%;
  background-position:0% 0%;

  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;

  text-shadow:
    0 1px 2px rgba(0,0,0,.35);

  animation:goldShine 6s linear infinite;

  will-change:background-position;
}


/* SHINE MOVE */

@keyframes goldShine{

  0%   { background-position:0% 0; }
  50%  { background-position:100% 0; }
  100% { background-position:0% 0; }

}


.vl24-why-cards .why-left h2{
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.vl24-why-cards{
  padding:40px 0 110px;
}

/* =====================================
   TABLET = DESKTOP LAYOUT (901px–1200px)
   Pane faili kõige lõppu
===================================== */

@media (min-width:901px) and (max-width:1200px){

  /* restore 2 column layout */
  .vl24-why-cards .vl24-wrap{
    grid-template-columns: 420px 1fr !important;
    gap:56px;
  }

  /* vasak sticky nagu desktop */
  .why-left{
    position:sticky !important;
    top:120px;
    padding:50px 0 70px 0;
  }

  /* tabs ei ole sticky mobile bar */
  .why-tabs-wrap{
    position:static !important;
    margin:0;
    padding:0;
    backdrop-filter:none;
  }

  /* parem blokk */
  .why-right{
    width:auto;
  }

}

/* =====================================
WHY STATS NUMBER — TOP LEFT BADGE (FORCE)
===================================== */

.why-stat-card{
  position:relative; /* kui juba on, jääb */
  padding-top:96px;  /* ruum badge jaoks */
}

.why-stat-number{
  position:absolute !important;
  top:10px !important;
  left:10px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:92px !important;
  height:92px !important;

  border-radius:999px !important;

  background:#fff !important;
  color:#111 !important;

  font-size:26px !important;
  font-weight:900 !important;

  line-height:1 !important;
  text-align:center !important;

  padding-top:14px; /* ⭐ LIIGUTAB AINULT NUMBRIT */

  border:2px solid rgba(255,255,255,.9) !important;
}

/* =================================
WHY STATS HEADER — HERO STYLE
================================= */

/* EYEBROW text */
.why-stats .hero-eyebrow{
  font-family:"Space Grotesk",sans-serif;
  font-size:12px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:#fff;
}

/* HERO pill copy */
.why-stats .vl24-eyebrow-pill{
  display:inline-flex;
  align-items:center;

  padding:6px 14px;
  border-radius:999px;

  background:rgba(255,255,255,.08);
  backdrop-filter:blur(12px);

  border:1px solid var(--brand-primary);

  max-width:160px;
  overflow:hidden;
  margin-bottom:16px;
}

/* scroll */
.why-stats .vl24-eyebrow-track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  animation:vl24InfiniteScroll 14s linear infinite;
}

/* TITLE — hero color */
.why-stats .section-header h2{
  color:#fff !important;
}

/* TEXT — hero color */
.why-stats .section-header p{
  color:rgba(255,255,255,.85) !important;
}

/* =========================================
WHY STATS CARD — STRONG VISIBLE PATTERN
========================================= */

.why-stat-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;

  /* ⭐ palju tugevam pattern */
  background:
    radial-gradient(circle at 20% 30%, rgba(0,0,0,.18) 0%, transparent 60%),
    radial-gradient(circle at 80% 60%, rgba(0,0,0,.18) 0%, transparent 60%),
    radial-gradient(circle at 40% 80%, rgba(0,0,0,.12) 0%, transparent 70%),

    repeating-radial-gradient(
  circle at 20% 32%,
      rgba(0,0,0,.12) 0px,
      rgba(0,0,0,.12) 2px,
      transparent 2px,
      transparent 40px
    );

  opacity:.4; /* ⭐ VÄGA nähtav */
  pointer-events:none;
  z-index:0;
}

/* content patternist üle */
.why-stat-card > *{
  position:relative;
  z-index:1;
}