/* =======================================================
   FEATURES (cards)
   ======================================================= */
.features{display:grid; grid-template-columns:repeat(4,1fr); gap:22px}
@media (max-width:980px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.features{grid-template-columns:1fr}}
@media (max-width:760px){.features{grid-template-columns:1fr; gap:var(--m-space)}}

.feature{
  position:relative; padding:24px; border-radius:16px; background:#0f0f0f;
  border:1px solid rgba(255,223,138,.16); box-shadow:0 12px 26px rgba(0,0,0,.4);
  isolation:isolate; overflow:hidden;
  transition:transform .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth), border-color .25s var(--ease-smooth), filter .25s;
}
.feature::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; background:var(--gold-grad);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.75; pointer-events:none; transition:opacity .25s;
}
.feature::before{
  content:""; position:absolute; left:12%; right:12%; bottom:-12%; height:45%; border-radius:50%;
  background:radial-gradient(50% 60% at 50% 0%,rgba(232,199,103,.22),transparent 80%); filter:blur(22px); opacity:0; transition:opacity .25s;
}
.feature i{font-size:22px; color:#e8c767; margin-bottom:10px; transition:transform .25s, filter .25s, color .25s}
.feature h3{
  margin:.25rem 0 .35rem; font-family:"Fraunces",Georgia,serif; font-weight:700;
  background:var(--gold-grad); -webkit-background-clip:text; color:transparent; transition:filter .25s;
}
.feature p{color:#d9d2bd}
.feature:hover{
  transform:translateY(-6px); border-color:rgba(255,223,138,.35);
  box-shadow:0 22px 50px rgba(232,199,103,.16),0 14px 36px rgba(0,0,0,.55); filter:saturate(1.03);
}
.feature:hover::after{opacity:1}
.feature:hover::before{opacity:.9}
.feature:hover i{transform:translateY(-2px); filter:brightness(1.05) saturate(1.05)}
.feature:focus-within{outline:2px solid #ffe29a; outline-offset:3px}

@media (max-width:760px){
  .feature{padding:18px; border-radius:14px}
  .feature h3{font-size:1.25rem}
}