/* ========== Theme variables ========== */
:root{
  --bg-900: #06080b;
  --bg-800: #0b0f14;
  --card: rgba(255,255,255,0.03);
  --glass: rgba(255,255,255,0.04);
  --muted: #98a9bb;
  --text: #e6eef6;
  --accent: #18d6f0;
  --accent-2: #9b6cff;
  --glow: rgba(24,214,240,0.12);
  --radius: 14px;
  --ff-head: 'Playfair Display', serif;
  --ff-ui: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  --elevation: 0 12px 40px rgba(2,6,12,0.6);
  --glass-border: 1px solid rgba(255,255,255,0.04);
}

[data-theme="light"]{
  --bg-900: #f6f8fb;
  --bg-800: #eef2f7;
  --card: #ffffff;
  --glass: rgba(0,0,0,0.04);
  --muted: #55637a;
  --text: #081126;
  --accent: #0ea5a3;
  --accent-2: #2563eb;
  --glow: rgba(14,165,163,0.08);
  --elevation: 0 8px 20px rgba(11,20,40,0.06);
  --glass-border: 1px solid rgba(2,6,11,0.06);
}

/* ========== Global ========== */
*{ box-sizing: border-box; transition: all 220ms cubic-bezier(.2,.9,.2,1); -webkit-tap-highlight-color: transparent; }
html,body{ height:100%; margin:0; font-family:var(--ff-ui); color:var(--text); background: radial-gradient(circle at 10% 8%, rgba(24,214,240,0.02), transparent 6%), radial-gradient(circle at 90% 88%, rgba(155,108,255,0.01), transparent 8%), var(--bg-900); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* container */
.container{ max-width:1100px; margin:28px auto; padding:18px; }

/* header */
header{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:20px; }
.brand{ display:flex; gap:12px; align-items:center; }
.logo{ width:56px; height:56px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--ff-head); color:white; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 8px 28px rgba(0,0,0,0.45); font-size:20px; }
.site-title{ line-height:1; }
.site-title h1{ margin:0; font-family:var(--ff-head); font-size:18px; letter-spacing:0.2px; }
.site-title p{ margin:0; font-size:12px; color:var(--muted); }

/* nav */
nav{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
nav a{ text-decoration:none; color:var(--muted); font-size:14px; padding:8px 10px; border-radius:8px; }
nav a:hover{ color:var(--text); background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); }

/* control chips */
.chip, .btn-chip{ padding:8px 12px; border-radius:999px; background:transparent; color:var(--muted); border:var(--glass-border); cursor:pointer; font-size:13px; }
.chip.active{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:white; box-shadow: 0 6px 22px rgba(139,92,246,0.08); }

/* hero */
.hero{ display:grid; grid-template-columns:1fr 300px; gap:22px; padding:22px; border-radius:var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); box-shadow: var(--elevation); border: var(--glass-border); }
@media(max-width:820px){ .hero{ grid-template-columns:1fr; } }

.title{ font-family:var(--ff-head); font-size:36px; margin:0; color:var(--text); }
.tagline{ color:var(--muted); margin-top:8px; font-size:15px; }
.typed{ color:var(--accent); font-weight:700; font-family:var(--ff-head); }

/* profile */
.profile{ display:flex; flex-direction:column; gap:8px; align-items:center; text-align:center; }
.avatar{ width:128px; height:128px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-family:var(--ff-head); font-weight:700; color:white; background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 10px 30px rgba(139,92,246,0.12); font-size:36px; }

/* section common */
section{ margin-bottom:17px; border-radius:14px; padding:16px; background:var(--card); border:var(--glass-border); box-shadow: 0 10px 30px rgba(0,0,0,0.35); }
.section-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:13px; }
.section-title h3{ margin:0; font-family:var(--ff-head); font-size:20px; }
.small-muted{ color:var(--muted); font-size:13px; }

/* skills */
.skills-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.skill{ padding:14px; border-radius:12px; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border: var(--glass-border); }
.skill h4{ margin:0 0 6px; font-family:var(--ff-head); font-size:16px; color:var(--text); }
.skill .muted{ font-size:13px; color:var(--muted); }
.skill .bar{ height:12px; background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent); border-radius:999px; overflow:hidden; margin-top:10px; }
.skill .bar > i{ display:block; height:100%; width:0%; border-radius:999px; background: linear-gradient(90deg,var(--accent),var(--accent-2)); box-shadow: 0 6px 18px rgba(24,214,240,0.06); }

/* projects */
.controls-row{ display:flex; gap:8px; align-items:center; margin-bottom:12px; }
.chips-wrapper{ display:flex; gap:8px; flex-wrap:wrap; }
.projects-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:14px; }
.card{ border-radius:12px; overflow:hidden; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border:var(--glass-border); padding:12px; display:flex; flex-direction:column; gap:10px; }
.card img{ width:100%; height:140px; object-fit:cover; border-radius:8px; background:#111827; display:block; }
.card h4{ margin:0; font-family:var(--ff-head); font-size:16px; }
.card .meta{ color:var(--muted); font-size:13px; }

/* project hover effect */
.card:hover{ transform: translateY(-6px) scale(1.01); box-shadow: 0 18px 50px rgba(15,23,42,0.5); border: 1px solid rgba(34,211,238,0.08); }

/* timeline */
.timeline{ display:flex; flex-direction:column; gap:12px; }
.timeline .item{ padding:12px; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.01), transparent); border:var(--glass-border); }

/* faq */
.faq q{ display:block; margin:0 0 6px; font-weight:700; }
.faq .a{ color:var(--muted); font-size:14px; }

/* contact */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:820px){ .contact-grid{ grid-template-columns:1fr; } }
.input, textarea{ width:100%; padding:12px; border-radius:10px; border:var(--glass-border); background:transparent; color:var(--text); font-size:14px; }
.btn{ padding:10px 14px; border-radius:10px; background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:white; border:none; cursor:pointer; font-weight:700; box-shadow: 0 10px 30px rgba(24,214,240,0.06); }

/* footer */
footer{ text-align:center; color:var(--muted); font-size:13px; margin-top:8px; }

/* analytics overlay */
.overlay{ position:fixed; inset:0; display:none; place-items:center; z-index:1200; background: linear-gradient(0deg, rgba(2,6,11,0.72), rgba(2,6,11,0.6)); padding:24px; }
.overlay.open{ display:grid; }
.panel{ width:100%; max-width:980px; border-radius:14px; padding:18px; background: linear-gradient(180deg, rgba(6,8,10,0.95), rgba(4,6,8,0.92)); border: var(--glass-border); box-shadow: 0 20px 80px rgba(0,0,0,0.6); }

/* responsive helpers */
@media(max-width:1100px){ .container{ padding:14px; } }
@media(max-width:680px){
  .title{ font-size:28px; }
  .logo{ width:48px; height:48px; font-size:18px; }
  nav{ display:none; } /* simplify nav on small screens */
}

.logo-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--accent);
  transition: transform 0.3s ease;
}
.logo-img:hover {
  transform: scale(1.1);
}