*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0a0f;--bg-card:#15151e;--bg-card-hover:#1c1c2a;
  --text:#f0f0f5;--text-muted:#8888a0;
  --accent:#c084fc;--accent-glow:rgba(192,132,252,.25);
  --radius:16px;--radius-sm:10px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6;-webkit-font-smoothing:antialiased}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Header */
.site-header{padding:24px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.site-header .container{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text)}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,#a855f7,#6366f1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
.logo-text{font-size:20px;font-weight:800;letter-spacing:-.5px}
.header-tagline{color:var(--text-muted);font-size:13px;margin-left:auto}

/* Hero */
.hero-section{text-align:center;padding:60px 0 40px}
.hero-section h1{font-size:clamp(28px,5vw,48px);font-weight:800;background:linear-gradient(135deg,#fff 30%,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:12px}
.hero-desc{color:var(--text-muted);font-size:16px;max-width:600px;margin:0 auto}

/* Empty */
.empty-state{text-align:center;padding:80px 20px;color:var(--text-muted)}
.empty-state i{font-size:48px;margin-bottom:16px;opacity:.4}

/* Grid */
.profiles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;padding-bottom:80px}

/* Card */
.profile-card{display:block;position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/4;text-decoration:none;color:var(--text);transition:transform .3s,box-shadow .3s}
.profile-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.card-bg{position:absolute;inset:0}
.card-bg video,.card-bg img{width:100%;height:100%;object-fit:cover}
.card-bg-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#1a1a2e,#2d2d44)}
.card-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.85) 0%,rgba(0,0,0,.2) 50%,transparent 100%);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:24px;text-align:center}
.card-avatar{width:72px;height:72px;border-radius:50%;border:3px solid rgba(255,255,255,.3);object-fit:cover;margin-bottom:12px}
.card-avatar-placeholder{width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-size:28px;color:rgba(255,255,255,.4);margin-bottom:12px}
.card-name{font-size:18px;font-weight:700;margin-bottom:4px}
.card-location{font-size:13px;color:var(--text-muted)}
.card-location i{margin-right:4px;font-size:11px}

/* Footer */
.site-footer{padding:32px 0;border-top:1px solid rgba(255,255,255,.06);text-align:center;color:var(--text-muted);font-size:13px}
.footer-nav{margin-top:8px;opacity:.6}

@media(max-width:640px){
  .profiles-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .profile-card{aspect-ratio:2/3}
  .card-avatar{width:56px;height:56px}
  .card-name{font-size:15px}
  .hero-section{padding:40px 0 24px}
}