:root {
  --primary: #6c5ce7;
  --secondary: #a29bfe;
  --dark: #2d3436;
  --light: #dfe6e9;
  --accent: #fd79a8;
}
body { margin:0; font-family: 'Inter', system-ui, sans-serif; background:#f8f9fa; color:var(--dark); }
.nav { background:var(--dark); color:white; padding:15px 30px; display:flex; justify-content:space-between; align-items:center; }
.nav a { color:var(--secondary); text-decoration:none; font-weight:600; }
.hero { background:linear-gradient(135deg, #6c5ce7, #a29bfe); color:white; padding:70px 20px; text-align:center; }
.hero h1 { font-size:2.8em; margin:0; }
.profiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:25px; padding:40px 20px; max-width:1400px; margin:0 auto; }
.card { background:white; border-radius:16px; overflow:hidden; box-shadow:0 6px 20px rgba(0,0,0,0.08); transition:transform .3s; }
.card:hover { transform:translateY(-8px); }
.card img { width:100%; height:280px; object-fit:cover; }
.card-content { padding:16px; text-align:center; }
.card h3 { margin:0 0 8px; color:var(--primary); }
.btn { background:var(--primary); color:white; padding:12px 24px; border-radius:30px; text-decoration:none; display:inline-block; margin-top:10px; font-weight:600; }
.btn:hover { background:#5b4cdb; }
.content { max-width:900px; margin:40px auto; background:white; padding:40px; border-radius:16px; line-height:1.8; }
.sticky { position:fixed; bottom:0; left:0; right:0; background:var(--dark); color:white; padding:12px; text-align:center; z-index:999; display:flex; justify-content:center; align-items:center; gap:15px; }
.sticky .num { font-size:1.3em; font-weight:bold; color:var(--accent); }
footer { background:#2d3436; color:#b2bec3; text-align:center; padding:30px; }