/* Small helper classes to keep HTML clean */
.navlink{ @apply text-slate-700 hover:text-brand-800 font-medium; }

.hero-bg{
  background:
    radial-gradient(800px 400px at 20% 10%, rgba(16,185,129,0.25), transparent 60%),
    radial-gradient(700px 350px at 80% 20%, rgba(163,230,53,0.25), transparent 60%),
    radial-gradient(600px 300px at 50% 90%, rgba(5,150,105,0.18), transparent 60%),
    linear-gradient(180deg, rgba(236,253,245,1) 0%, rgba(255,255,255,1) 65%);
}

.stat{ @apply rounded-2xl bg-white/75 ring-1 ring-white/70 p-3; }
.stat_k{ @apply text-xs font-semibold text-slate-700; }
.stat_v{ @apply text-sm font-bold text-brand-900 mt-1; }

.mini-card{ @apply rounded-2xl bg-white/75 ring-1 ring-white/70 p-3 text-center; }
.mini-badge{ @apply text-xs font-semibold text-brand-800; }
.mini-title{ @apply text-sm font-bold text-slate-900 mt-1; }

.pill{ @apply rounded-2xl bg-white ring-1 ring-slate-200 px-4 py-3 font-semibold text-slate-800; }

.feature{ @apply rounded-3xl bg-white ring-1 ring-slate-200 p-6 shadow-sm; }
.feature_icon{ @apply text-2xl; }
.feature_title{ @apply mt-3 font-bold; }
.feature_desc{ @apply mt-1 text-sm text-slate-600; }

.faq{ @apply rounded-3xl bg-white ring-1 ring-slate-200 p-5; }
.faq summary{ @apply cursor-pointer font-semibold; }
.faq p{ @apply mt-2 text-sm text-slate-600; }

.contactCard{ @apply flex items-center gap-3 rounded-3xl bg-white ring-1 ring-slate-200 p-4 hover:bg-slate-50; }
.contactIcon{ @apply grid h-10 w-10 place-items-center rounded-2xl bg-brand-50 text-brand-900 ring-1 ring-brand-100; }

/* Product cards */
.prod{ @apply rounded-3xl bg-white ring-1 ring-slate-200 p-5 shadow-sm flex flex-col; }
.prod_top{ @apply flex items-start justify-between gap-4; }
.prod_name{ @apply text-lg font-bold; }
.prod_meta{ @apply text-sm text-slate-600 mt-1; }
.prod_price{ @apply font-extrabold text-brand-900; }
.prod_tag{ @apply inline-flex items-center rounded-full bg-brand-50 text-brand-800 ring-1 ring-brand-100 px-3 py-1 text-xs font-semibold; }
.prod_actions{ @apply mt-4 flex items-center gap-2; }
.prod_btn{ @apply flex-1 rounded-2xl bg-brand-700 px-4 py-2.5 text-white font-semibold hover:bg-brand-800; }
.prod_btn2{ @apply rounded-2xl border border-slate-200 px-4 py-2.5 font-semibold hover:bg-slate-50; }

/* Cart */
.cartRow{ @apply flex items-center justify-between gap-3 rounded-2xl border border-slate-200 p-3; }
.cartLeft{ @apply flex flex-col; }
.cartTitle{ @apply font-semibold; }
.cartSub{ @apply text-xs text-slate-500; }
.cartRight{ @apply flex items-center gap-2; }
.qtyBtn{ @apply rounded-xl border border-slate-200 px-3 py-2 text-sm hover:bg-slate-50; }

/* Tailwind CDN doesn't process @apply in plain CSS in some setups.
   If GoDaddy doesn't apply these, remove @apply and rely on inline classes.
   For safety, we keep most styling in HTML and only a few helpers here.
*/