/* Features grid styles (scoped) */
:root{
  --surface:#f6f6f7;
  --surface-strong:#ffffff;
  --text:#1a1a1a;
  --muted:#6b7280;
  --accent-amber:#C47B2A;
  --accent-neon:#FFC06A; /* brighter for glow */
  --ring-amber:rgba(196,123,42,0.25);
}

.visually-hidden{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.features{padding:4rem 1rem}
.features__grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px}
@media (min-width:768px){.features__grid{grid-template-columns:repeat(2, minmax(0,1fr));gap:28px}}
@media (min-width:1024px){.features__grid{grid-template-columns:repeat(3, minmax(0,1fr));gap:32px}}

.feature-card{position:relative; isolation:isolate; border-radius:16px; padding:24px; 
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(196,123,42,.10), rgba(196,123,42,0) 60%),
    linear-gradient(180deg, #14171b, #0b0e12);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 2px 12px rgba(0,0,0,.35);
  transition:transform .22s ease, box-shadow .22s ease; outline:0; opacity:0; transform:translateY(20px);
  transition-property: opacity, transform, box-shadow; transition-duration:.5s, .5s, .22s; transition-delay:var(--reveal-delay, 0ms)
}
/* Neon top line with glow */
.feature-card::before{content:""; position:absolute; left:12px; right:12px; top:10px; height:2px; 
  background:linear-gradient(90deg, rgba(255,192,106,.95), rgba(255,192,106,.35), rgba(255,192,106,.95));
  box-shadow:0 0 8px rgba(255,192,106,.65), 0 0 14px rgba(196,123,42,.55);
  border-radius:2px; opacity:.95}
/* Ambient glow behind card */
.feature-card::after{content:""; position:absolute; inset:-2px; z-index:-1; border-radius:inherit; background:
  radial-gradient(120% 80% at 10% -10%, rgba(196,123,42,.14), rgba(196,123,42,0) 60%),
  radial-gradient(80% 100% at 100% 50%, rgba(196,123,42,.08), rgba(196,123,42,0) 60%);
  filter:blur(20px); opacity:.6; transition:opacity .25s ease, filter .25s ease}
.feature-card.visible{opacity:1; transform:none}

.feature-card:hover, .feature-card:focus-within{transform:translateY(-6px); box-shadow:0 14px 34px rgba(0,0,0,.12), 0 0 0 4px var(--ring-amber)}
.feature-card:hover::after, .feature-card:focus-within::after{opacity:.9; filter:blur(22px)}
.feature-card:focus-visible{outline:3px solid var(--accent-amber); outline-offset:3px}

.feature-card__icon{position:relative; display:inline-flex; align-items:center; justify-content:center; width:auto; height:auto; line-height:0}
.feature-card__icon::before{content:""; position:absolute; left:50%; top:50%; width:120px; height:120px; transform:translate(-50%,-50%); pointer-events:none; border-radius:999px; background:radial-gradient(closest-side, rgba(255,192,106,.18), rgba(255,192,106,0) 70%); filter:blur(8px); opacity:.9}
.feature-card__icon::after{content:""; position:absolute; left:-16px; right:-16px; top:calc(50% + 12px); height:2px; background:linear-gradient(90deg, rgba(255,192,106,0), rgba(255,192,106,.28), rgba(255,192,106,0)); filter:blur(3px); opacity:.8; pointer-events:none}
.feature-card__content{margin-top:10px}
.feature-card__title{font-weight:600;color:#f3f4f6;font-size:1rem;margin:0 0 .25rem}
.feature-card__text{color:#cbd5e1;font-size:.95rem;line-height:1.5;margin:0}

.icon-placeholder{width:36px;height:36px;border-radius:8px;background:var(--accent-amber);opacity:.7;transition:transform .22s ease}
.feature-card__icon img,.feature-card__icon svg{width:56px;height:56px;display:block}
.feature-card:hover .icon-placeholder, .feature-card:focus-within .icon-placeholder,
.feature-card:hover .feature-card__icon img, .feature-card:focus-within .feature-card__icon img{transform:scale(1.1)}

/* Masked neon icons */
.fi{display:inline-block; width:56px; height:56px; background:var(--accent-neon);
  -webkit-mask-size:contain; mask-size:contain; -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; -webkit-mask-position:center; mask-position:center;
  filter: drop-shadow(0 0 6px rgba(255,192,106,.85)) drop-shadow(0 0 12px rgba(196,123,42,.55));
  transition:transform .22s ease, filter .2s ease}
.feature-card:hover .fi, .feature-card:focus-within .fi{transform:scale(1.08); filter: drop-shadow(0 0 10px rgba(255,192,106,.95)) drop-shadow(0 0 18px rgba(196,123,42,.65))}

/* Map each data-icon to the uploaded SVG */
.fi[data-icon="on-demand"]{ -webkit-mask-image:url('/assets/icons/On Demand Rides.svg'); mask-image:url('/assets/icons/On Demand Rides.svg'); }
.fi[data-icon="hotel"]{ -webkit-mask-image:url('/assets/icons/Hotel Booking.svg'); mask-image:url('/assets/icons/Hotel Booking.svg'); }
.fi[data-icon="drivers"]{ -webkit-mask-image:url('/assets/icons/Local Drivers.svg'); mask-image:url('/assets/icons/Local Drivers.svg'); }
.fi[data-icon="airport"]{ -webkit-mask-image:url('/assets/icons/Airport Pickups.svg'); mask-image:url('/assets/icons/Airport Pickups.svg'); }
.fi[data-icon="luxury"]{ -webkit-mask-image:url('/assets/icons/Luxury Vehicles.svg'); mask-image:url('/assets/icons/Luxury Vehicles.svg'); }
.fi[data-icon="corporate"]{ -webkit-mask-image:url('/assets/icons/Corporate Accounts.svg'); mask-image:url('/assets/icons/Corporate Accounts.svg'); }

@media (max-width:768px){
  .feature-card{padding:22px}
  .feature-card__icon::before{width:96px;height:96px}
  .feature-card__icon img,.feature-card__icon svg,.icon-placeholder,.fi{width:44px;height:44px}
}

@media (prefers-reduced-motion: reduce){
  .feature-card,.icon-placeholder{transition:none}
  .feature-card:hover, .feature-card:focus-within{transform:none}
}