/* =========================================================================
   FAISAL PREMIUM 2026 — Premium Homepage Cards (#3)
   Glassmorphism-inspired, soft shadows, subtle gradients, elegant borders,
   GPU-accelerated hover lift + glow, staggered fade-in. RTL-safe. No CLS.
   Loaded after the base card styles so it refines them authoritatively.
   ========================================================================= */

/* ---------- Shared premium surface for all homepage cards ---------- */
.card,
.stat-card,
.contact-card,
.step-card{
  position:relative;
  background:linear-gradient(160deg,#ffffff 0%, #fcfaf6 100%);
  border:1px solid rgba(226,216,202,.85);
  border-radius:var(--radius-lg);
  box-shadow:0 1px 2px rgba(6,20,16,.04), 0 10px 24px rgba(6,20,16,.05);
  /* GPU-accelerated, no layout-shifting properties animated */
  transition:transform .35s cubic-bezier(.4,0,.2,1), box-shadow .35s cubic-bezier(.4,0,.2,1), border-color .35s ease;
  will-change:transform;
  overflow:hidden;
  isolation:isolate;
}

/* Subtle top sheen + gold edge accent (elegant border) */
.card::before,
.stat-card::before,
.contact-card::before,
.step-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 80% at 50% -20%, rgba(201,168,124,.10), transparent 60%);
  opacity:0;transition:opacity .35s ease;
}

/* Soft brand glow that fades in on hover (desktop) */
.card::after,
.stat-card::after,
.contact-card::after,
.step-card::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:-1;
  box-shadow:0 24px 60px rgba(0,104,55,.16);
  opacity:0;transition:opacity .4s ease;
}

/* ---------- Hover (desktop only — pointer:fine) ---------- */
@media (hover:hover) and (pointer:fine){
  .card:hover,
  .stat-card:hover,
  .contact-card:hover,
  .step-card:hover{
    transform:translateY(-8px);
    border-color:rgba(201,168,76,.55);
    box-shadow:0 6px 14px rgba(6,20,16,.06), 0 26px 52px rgba(6,20,16,.12);
  }
  .card:hover::before,
  .stat-card:hover::before,
  .contact-card:hover::before,
  .step-card:hover::before{opacity:1}
  .card:hover::after,
  .stat-card:hover::after,
  .contact-card:hover::after,
  .step-card:hover::after{opacity:1}
}

/* ---------- Premium icon treatment ---------- */
.icon-box{
  position:relative;
  background:linear-gradient(140deg, rgba(0,104,55,.12), rgba(0,104,55,.05));
  border:1px solid rgba(0,104,55,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .35s ease, color .35s ease, box-shadow .35s ease;
}
.icon-box--gold{
  background:linear-gradient(140deg, rgba(201,168,76,.18), rgba(201,168,76,.06));
  border-color:rgba(201,168,76,.22);
}
@media (hover:hover) and (pointer:fine){
  .card:hover .icon-box,
  .stat-card:hover .icon-box,
  .contact-card:hover .icon-box{
    transform:scale(1.1) rotate(-4deg);
    background:linear-gradient(140deg, var(--primary), var(--primary-light));
    color:#fff;border-color:transparent;
    box-shadow:0 10px 22px rgba(0,104,55,.30);
  }
  .card:hover .icon-box--gold,
  .stat-card:hover .icon-box--gold,
  .contact-card:hover .icon-box--gold{
    background:linear-gradient(140deg, var(--gold), var(--gold-light));
    color:var(--dark);box-shadow:0 10px 22px rgba(201,168,76,.32);
  }
}
.icon-box svg{width:26px;height:26px;display:block}

/* ---------- Typography & layout polish (equal heights via flex) ---------- */
/* Centered content for all homepage cards (icons, titles, text, buttons). */
.card,
.stat-card,
.contact-card,
.step-card{display:flex;flex-direction:column;height:100%;align-items:center;text-align:center}
.card .icon-box,
.stat-card .icon-box,
.contact-card .icon-box{margin-inline:auto;margin-bottom:1rem}
.card__title{font-size:1.15rem;font-weight:800;letter-spacing:-.01em;margin-bottom:.45rem;text-align:center}
.card__text{color:var(--text-muted);font-size:.95rem;line-height:1.75;margin:0;text-align:center}
.card .card__cta{margin-top:auto;padding-top:1rem;font-weight:700;color:var(--primary);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;align-self:center}
.card .btn,.stat-card .btn,.contact-card .btn{align-self:center}

/* Exception: a multi-item checklist inside a card reads better start-aligned,
   but stays visually centered as a block. */
.card ul{align-self:stretch;text-align:start;max-width:16rem;margin-inline:auto}
[dir="rtl"] .card ul{text-align:right}

/* RTL: directional CTA icon mirrors */
[dir="rtl"] .card .card__cta .fa-arrow-left,[dir="rtl"] .post-card__more .fa-arrow-left{transform:scaleX(-1)}

/* ---------- Staggered fade-in on load (GPU transform only) ---------- */
.js .grid > .reveal,
.js .steps-grid > .reveal,
.js .contact-grid > .reveal{opacity:0;transform:translate3d(0,26px,0)}
.js .grid > .reveal.in,
.js .steps-grid > .reveal.in,
.js .contact-grid > .reveal.in{opacity:1;transform:none;transition:opacity .55s ease, transform .55s cubic-bezier(.4,0,.2,1)}
/* Stagger via per-card delay set by JS (--d) */
.js .reveal.in{transition-delay:var(--d, 0ms)}

/* ---------- Touch / mobile: lighter interaction, no perf hit ---------- */
@media (hover:none),(pointer:coarse){
  .card:active,.stat-card:active,.contact-card:active,.step-card:active{transform:translateY(-2px)}
  .card,.stat-card,.contact-card,.step-card{box-shadow:0 1px 2px rgba(6,20,16,.05), 0 8px 18px rgba(6,20,16,.06)}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .card,.stat-card,.contact-card,.step-card,.icon-box{transition:none!important}
  .js .reveal{opacity:1!important;transform:none!important}
}

/* ---------- Responsive spacing safety (no overflow, equal gaps) ---------- */
@media (max-width:480px){
  .card,.stat-card,.contact-card{padding:1.4rem 1.25rem}
}