/* «چرا کارو؟» — frosted-glass cards and one teal power line over the shared atmosphere. */
.why{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:center;padding:120px 0;overflow:clip}
/* While this is the last section, it must be tall enough for the hero's exit scroll to land exactly on its top. */
.why:last-child{min-height:100svh}
.why-inner{width:var(--container);margin:0 auto}

.why-head{max-width:640px;margin:0 auto 96px;text-align:center}
.why-title{margin:0;font-size:clamp(28px,3.4vw,44px);line-height:1.3;letter-spacing:-.05em;font-weight:700;color:var(--white)}
.why-sub{margin:12px 0 0;color:var(--muted);font-size:15px;line-height:1.9}

.why-grid{position:relative}


.why-cards{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:20px;row-gap:0;margin:0;padding:0;list-style:none}

/* Subgrid: icon / title / text / metric rows are shared across a row of cards, so every title sits at the same
   height directly under the icon and heights match with or without a metric. An empty metric row collapses to 0. */
.why-card{--why-frost:blur(24px) saturate(160%);position:relative;isolation:isolate;grid-row:span 4;display:grid;grid-template-rows:subgrid;row-gap:0;padding:28px 24px 30px;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02)),rgba(8,19,29,.34);box-shadow:0 24px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.14);-webkit-backdrop-filter:var(--why-frost);backdrop-filter:var(--why-frost);transition:box-shadow .45s var(--ease),opacity .8s var(--ease)}
/* Edge light: 1px gradient border, brighter at the top. */
.why-card:before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.06));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
/* Specular sheen across the upper part; slides slowly on hover. */
.why-card:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(118deg,transparent 22%,rgba(255,255,255,.075) 40%,rgba(255,255,255,.02) 52%,transparent 64%) 0 0/160% 100% no-repeat;-webkit-mask:linear-gradient(180deg,#000,transparent 62%);mask:linear-gradient(180deg,#000,transparent 62%);transition:background-position 2.4s var(--ease)}
.why-card>*{position:relative;z-index:1}

.why-card__head{grid-row:1;display:flex;align-items:center;margin-bottom:22px}
.why-card__icon{display:block;width:28px;height:28px;color:var(--cyan-2);transition:color .35s var(--ease),filter .35s var(--ease)}
/* 1.3 user units in a 24-unit box rendered at 28px ≈ 1.5px. */
.why-card__icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.why-card__title{grid-row:2;margin:0 0 10px;color:var(--white);font-size:16px;font-weight:700;line-height:1.65;letter-spacing:-.02em;text-wrap:balance}
.why-card__hl,.why-title__hl{color:var(--cyan);text-shadow:0 0 8px rgba(0,209,193,.28),0 0 20px rgba(0,209,193,.12);animation:whyBreathe 4s ease-in-out infinite}
@keyframes whyBreathe{0%,100%{text-shadow:0 0 8px rgba(0,209,193,.28),0 0 20px rgba(0,209,193,.12)}50%{text-shadow:0 0 10px rgba(0,209,193,.46),0 0 26px rgba(0,209,193,.22)}}
/* Secondary text (#A9BDC0) keeps AA on the lighter glass. */
.why-card__text{grid-row:3;margin:0;color:#a9bdc0;font-size:13px;line-height:2;text-wrap:pretty}
.why-card__metric{grid-row:4;align-self:end;margin:20px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);color:var(--cyan);font-size:18px;font-weight:700;line-height:1.5;letter-spacing:-.02em}
@supports not (grid-template-rows:subgrid){.why-card{display:flex;flex-direction:column}.why-card__metric{margin-top:auto}.why-card__text{margin-bottom:20px}}

.why-card:hover,.why-card:focus-within{box-shadow:0 24px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(0,209,193,.4)}
.why-card:hover:after,.why-card:focus-within:after{background-position:20% 0}
.why-card:hover .why-card__icon,.why-card:focus-within .why-card__icon{color:var(--cyan);filter:drop-shadow(0 0 6px rgba(0,209,193,.45))}
.why-card:focus-visible{outline:1px solid var(--cyan);outline-offset:3px}

/* Power line */
.why-line{position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;overflow:visible;pointer-events:none}
.why-line__base{fill:none;stroke:var(--cyan-2);stroke-width:1;opacity:.34}
.why-line__node{fill:var(--cyan-2);opacity:.6}
.why-line__pulse{opacity:0}
.why-line__pulse path,.why-line__tap path{fill:none;stroke:var(--cyan);stroke-linecap:round}
.why-line__p-glow{stroke-width:7;opacity:.3}
.why-line__p-tail{stroke-width:1.5;opacity:.26}
.why-line__p-mid{stroke-width:1.5;opacity:.6}
.why-line__p-core{stroke-width:2}
.why-line__tap path{opacity:0}
.why-line__t-glow{stroke-width:6}
.why-line__t-core{stroke-width:1.8}

/* Entrance: cards wait dimmed until the pulse reaches their branch. Only armed by JS when motion is allowed. */
.why--armed .why-card{opacity:.35}
.why--armed .why-card.why-card--lit{opacity:1;animation:whyFlash 1.6s var(--ease)}
.why--armed .why-card__icon svg *{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1s var(--ease) .08s}
.why--armed .why-card--lit .why-card__icon svg *{stroke-dashoffset:0}
.why--armed :is(.why-card__title,.why-card__text,.why-card__metric){opacity:.4;transform:translateY(8px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.why--armed .why-card--lit :is(.why-card__title,.why-card__text,.why-card__metric){opacity:1;transform:none}
.why--armed .why-card--lit .why-card__title{transition-delay:.1s}
.why--armed .why-card--lit .why-card__text{transition-delay:.18s}
.why--armed .why-card--lit .why-card__metric{transition-delay:.26s}
@keyframes whyFlash{0%{box-shadow:0 24px 60px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(0,209,193,.6),0 0 34px rgba(0,209,193,.16)}}

@media (max-width:980px) and (min-width:681px){
  .why-head{margin-bottom:88px}
  .why-cards{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
  .why-card:nth-child(n+3){margin-top:60px} /* row spacing as margin: a parent row-gap would leak into the subgrid rows */
}
@media (max-width:680px){
  .why{padding:80px 0}
  .why-head{margin-bottom:64px}
  .why-title{font-size:30px}
  .why-sub{font-size:14px}
  /* The vertical power line runs in this right-hand (RTL start) gutter. */
  .why-cards{grid-template-columns:minmax(0,1fr);padding-inline-start:24px}
  .why-card:nth-child(n+2){margin-top:16px}
  .why-card{--why-frost:blur(16px) saturate(160%);padding:24px 20px 26px}
  .why-card__head{margin-bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  .why-card,.why-card__icon,.why-card:after{transition:none}
  .why-card__hl,.why-title__hl{animation:none}
}