/* Tailwind base is loaded via CDN. This file contains tiny custom utilities for cards, badges, KPIs, etc. */

.card { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); padding: 1.5rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; transition: background-color .2s ease; }
.card:hover { background: rgba(255,255,255,0.04); }
.card-title { font-size: 1.125rem; font-weight: 600; color: #fff; margin-bottom: .5rem; }
.card-body { color: rgb(212 212 216); margin-bottom: 1rem; }
.card-list { margin-top: .5rem; display: grid; gap: .25rem; font-size: .875rem; color: rgb(161 161 170); }
.card-list li::before { content: "• "; color: rgb(62 157 145); }

.kpi { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); padding: 1.5rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }
.kpi-number { font-size: 2.25rem; font-weight: 800; background: linear-gradient(to right, rgb(62 157 145), rgb(15 125 109), rgb(102 185 171)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kpi-label { margin-top: .5rem; font-size: .875rem; color: rgb(161 161 170); }

.case { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); padding: 1.5rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }
.case-accent { pointer-events: none; position: absolute; inset: -0.25rem; z-index: -10; filter: blur(32px); background-image: linear-gradient(to bottom right, transparent, transparent); }
.case-title { font-size: 1.125rem; font-weight: 600; color: #fff; margin-bottom: .5rem; }
.case-body { color: rgb(212 212 216); margin-bottom: 1rem; }
.case-tags { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .75rem; color: rgb(212 212 216); }
.case-tags li { border-radius: 9999px; background: rgba(255,255,255,0.05); padding: .25rem .75rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }

.step { position: relative; overflow: hidden; border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.02); padding: 1.5rem; box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }
.step-index { font-size: .75rem; color: rgb(161 161 170); }
.step-title { margin-top: .25rem; color: #fff; font-weight: 600; }
.step-body { margin-top: .25rem; color: rgb(212 212 216); font-size: .875rem; }

.badge { border-radius: 9999px; background: rgba(255,255,255,0.05); padding: .25rem .75rem; font-size: .75rem; color: rgb(212 212 216); box-shadow: 0 0 0 1px rgba(255,255,255,0.1) inset; }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }