:root{
  --bg-1:#2b0033; --bg-2:#660044; --bg-3:#b30059;
  --accent:#ff007f; --accent-2:#811e4f;
  --muted:#e8cfff; --glass:rgba(0,0,0,0.25);
  --max-w:1200px;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Poppins",sans-serif;
  background:linear-gradient(135deg,var(--bg-1),var(--bg-2),var(--bg-3));
  color:#fff; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Header ---------- */
header{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 32px;flex-wrap:wrap;
  background:rgba(0,0,0,0.35);backdrop-filter:blur(5px);
  position:sticky;top:0;z-index:100;
}
.brand{display:flex;align-items:center;gap:14px}
.avatar{
  width:64px;height:64px;border-radius:50%;
  border:2px solid #fff;object-fit:cover;
}
.name{font-weight:600;font-size:clamp(1rem,2vw,1.4rem)}
.role{font-size:clamp(0.8rem,1.2vw,1rem);color:var(--muted)}

/* ---------- Navigation ---------- */
nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
nav a{
  color:#fff;text-decoration:none;font-weight:500;
  padding:6px 10px;transition:all .3s;
}
nav a:hover{color:var(--accent)}
.cta{
  background:var(--accent);padding:8px 16px;border-radius:20px;
}
.cta:hover{background:#b54a7a}

/* ---------- Hero Section ---------- */
.hero{
  display:flex;flex-wrap:wrap;gap:30px;
  justify-content:space-between;
  max-width:var(--max-w);margin:auto;
  padding:40px 20px;
}
.hero-card{flex:1 1 480px}
.hero-card h1{
  font-size:clamp(1.5rem,3vw,2.4rem);margin-bottom:16px;
}
.lead{color:#ffd9f5;font-size:clamp(1rem,1.5vw,1.1rem)}
.features{margin:20px 0}
.chip{
  background:rgba(255,255,255,0.15);
  padding:8px 12px;border-radius:18px;
  display:inline-block;margin:4px;
  font-size:0.9rem;
}

/* ---------- About Section ---------- */
.about{margin-top:40px}
.quote{
  font-size:clamp(1rem,2vw,1.2rem);
  color:var(--muted);margin:12px 0;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;margin-top:20px;
}
.card{
  background:var(--glass);
  padding:18px;border-radius:12px;
}
.card h3{margin-bottom:6px}
.muted{color:var(--muted);font-size:0.9rem}

/* ---------- Profile Sidebar ---------- */
.hero-card.profile{
  flex:0 0 280px;
  background:var(--glass);
  border-radius:16px;
  text-align:center;
  padding:20px;
}
.hero-card.profile .btn{
  display:inline-block;
  background:var(--accent-2);
  padding:10px 18px;border-radius:22px;
  color:#fff;text-decoration:none;margin:6px;
  transition:background .3s;
}
.hero-card.profile .btn:hover{background:#5e1a3d}

/* ---------- Dropdown ---------- */
.dropdown{position:relative;display:inline-block}
.dropdown-content{
  position:absolute;
  top:calc(100% + 8px);left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.7);
  border-radius:10px;padding:8px 0;width:150px;
  opacity:0;visibility:hidden;transition:all .25s;
}
.dropdown-content a{
  display:block;color:#fff;padding:8px 16px;text-decoration:none;
}
.dropdown-content a:hover{background:rgba(255,255,255,0.1)}
.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(4px);
}

/* ---------- Responsive ---------- */

/* Tablets */
@media (max-width:992px){
  .hero{flex-direction:column;align-items:center;text-align:center}
  .hero-card.profile{width:100%;max-width:420px}
  .grid{gap:16px}
  header{padding:14px 20px}
}

/* Phones */
@media (max-width:600px){
  body{font-size:15px}
  header{flex-direction:column;align-items:flex-start}
  nav{width:100%;justify-content:space-around;margin-top:10px}
  .avatar{width:56px;height:56px}
  .hero{padding:24px 14px}
  .hero-card.profile{
    flex-direction:column;align-items:center;
  }
  .dropdown-content{
    position:static;transform:none;opacity:1;visibility:visible;
    display:none;background:rgba(0,0,0,0.25);
  }
  .dropdown:focus-within .dropdown-content,
  .dropdown:active .dropdown-content{display:block}
  .cta{font-size:0.9rem;padding:6px 14px}
}

/* Small Phones */
@media (max-width:400px){
  .name{font-size:1rem}
  .role{font-size:0.8rem}
  .chip{font-size:0.8rem;padding:6px 10px}
  .grid{grid-template-columns:1fr}
  nav{gap:10px}
}