/* ——— Root variables & base ——— */
:root {
  --bg: #1a1a1a;
  --surface: #2a2a2a;
  --fg: #f0f0f0;
  --muted: #b0b0b0;
  --accent: #ffffff;
  --accent-2: #dcdcdc;
  --ring: rgba(255,255,255,0.1);
  --maxw: 1120px;
  --radius: 16px;
}

@media (prefers-color-scheme: light) {
  :root { 
    --bg:#fafafa; 
    --surface:#ffffff; 
    --fg:#0a0a0a; 
    --muted:#52525b; 
    --ring: rgba(0,0,0,0.1);
  }
  .card { box-shadow: 0 1px 2px rgba(0,0,0,.06); }
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font:16px/1.6 -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial;
  color:var(--fg);
  background: var(--bg);
}
a { color:inherit; text-decoration:none; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
section { padding:96px 0; }

/* ——— Header ——— */
header {
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(26,26,26,0.9);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:8px 0;
}
header .inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.3px; }
.brand .logo-img { width:32px; height:32px; border-radius:8px; }
nav a {
  padding:10px 12px;
  border-radius:10px;
  color:var(--fg);
  transition: all 0.3s ease;
}
nav a:hover { color:var(--accent-2); text-decoration:underline; }

.mobile-toggle {
  display:none;
  background:none;
  border:none;
  font-size:28px;
  color:var(--fg);
  cursor:pointer;
}

@media(max-width:720px) {
  .nav-links { display:none; width:100%; flex-direction:column; gap:12px; margin-top:10px; }
  .nav-links.active { display:flex; }
  .mobile-toggle { display:block; }
}

/* ——— Hero ——— */
.hero { display:grid; align-items:center; min-height:82vh; text-align:left; }
.eyebrow { letter-spacing:.18em; text-transform:uppercase; font-size:12px; color:var(--muted); }
h1 { font-size: clamp(36px, 6vw, 64px); line-height:1.05; margin:10px 0 14px; }
.lede { font-size: clamp(16px, 2.5vw, 20px); color:var(--muted); max-width:60ch; }
.cta { display:flex; gap:12px; margin-top:28px; }
.btn {
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:14px; font-weight:600;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  transition: all 0.3s ease;
}
.btn.primary {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color:#071318; border-color: transparent;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(255,255,255,0.1); }
.btn:focus-visible { outline:none; box-shadow: 0 0 0 6px var(--ring); }

/* ——— Sections ——— */
.section-title { font-size: clamp(22px, 3vw, 28px); margin:0 0 16px; }
.muted { color:var(--muted); }

.about { display:grid; grid-template-columns: 140px 1fr; gap:24px; align-items:start; }
.avatar { inline-size:120px; block-size:120px; border-radius:50%; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
.avatar img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s ease, box-shadow 0.4s ease; }
.avatar img:hover { transform: scale(1.05); box-shadow: 0 8px 16px rgba(255,255,255,0.1); }

.chips { display:flex; flex-wrap:wrap; gap:10px; }
.chip { padding:8px 12px; border-radius:999px; font-size:14px; color:var(--fg); border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); }

.grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.card {
  position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid rgba(255,255,255,.08);
  background:var(--surface); transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.card:hover { transform:translateY(-5px) scale(1.02); box-shadow:0 12px 20px rgba(255,255,255,0.05); }
.card .thumb { aspect-ratio:16/9; background: #0e0e0e; display:grid; place-items:center; color:var(--muted); font-size:14px; }
.card .body { padding:14px 14px 18px; }
.card h3 { margin:0 0 6px; font-size:18px; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.tag { font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.15); color:#9bdcfb; border:1px solid rgba(255,255,255,.35); }

.timeline { position:relative; padding-left:20px; }
.timeline:before { content:""; position:absolute; left:7px; top:0; bottom:0; width:2px; background:linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0)); }
.titem { position:relative; margin:0 0 24px; padding-left:16px; }
.titem:before { content:""; position:absolute; left:-1px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--accent-2); box-shadow:0 0 0 4px rgba(255,255,255,.2); }
.trole { margin:0; font-weight:600; }
.tmeta { margin:2px 0 8px; font-size:14px; color:var(--muted); }

/* ——— Social buttons ——— */
.social { display:flex; gap:12px; }
.iconbtn { display:inline-grid; place-items:center; width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.02); }
.iconbtn:hover { border-color:rgba(255,255,255,.5); }

/* ——— Reveal animations ——— */
.reveal { opacity:0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ——— Footer ——— */
footer { padding:32px 0; color:var(--muted); border-top:1px solid rgba(255,255,255,.06); }

@media (max-width:720px) {
  .about { grid-template-columns:1fr; }
  .avatar { inline-size:96px; block-size:96px; }
  nav { width:100%; }
  header .inner { gap:10px; }
}

/* ——— Contact ——— */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:20px; }
@media(max-width:720px) { .contact-grid { grid-template-columns:1fr; } }
.contact-column { display:flex; flex-direction:column; gap:12px; }
.contact-column h3 { margin:0 0 8px; font-size:18px; color: var(--fg); }
.contact-item { display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.03); color:var(--fg); text-decoration:none; transition: transform .2s ease, border-color .2s ease, background .2s ease; width:fit-content; }
.contact-item:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.contact-item .icon { width:20px; height:20px; object-fit:contain; }
.contact-item .label { font-size:15px; white-space:nowrap; }

/* ——— Parallax Sections ——— */
.parallax {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  z-index: 0;
}
.parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4); /* overlay for readability */
  z-index: -1;
}

/* Specific backgrounds (replace with your own images) */
.hero.parallax { background-image: url("Resources/Hero-bg.jpg"); }
#about.parallax { background-image: url("Resources/About-bg.jpg"); }
#skills.parallax { background-image: url("Resources/Skills-bg.jpg"); }
#projects.parallax { background-image: url("Resources/Projects-bg.jpg"); }