:root{
  --bg: #0f1720;
  --surface: #0b1220;
  --card: #0f1726;
  --text: #e6eef8;
  --muted: #9fb0c7;
  --accent: #7dd3fc; /* cyan */
  --accent-2: #ffd166; /* yellow */
  --glass: rgba(255,255,255,0.04);
  --shadow: 0 6px 30px rgba(2,6,23,0.6);
  --radius: 14px;
  --container: 1100px;
}

/* Light theme overrides */
:root.light{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --card: #ffffff;
  --text: #0b1220;
  --muted: #6b7280;
  --glass: rgba(2,6,23,0.03);
  --shadow: 0 8px 30px rgba(15,23,42,0.06);
}

/* Global reset & base */
* { box-sizing: border-box; }
html,body { height:100%; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(125,211,252,0.06), transparent 8%),
              radial-gradient(900px 500px at 90% 90%, rgba(255,209,102,0.04), transparent 8%),
              var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height: 1.5;
  transition: background .3s ease, color .2s ease;
}

/* Container */
.container{ max-width:var(--container); margin:0 auto; padding:0 2rem; }

/* NAV */
.nav {
  position:sticky; top:0; z-index:60;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-bottom: 1px solid rgba(255,255,255,0.02);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:var(--container); margin:0 auto; padding:0.9rem 2rem;
}
.brand{ font-weight:800; color:var(--accent); text-decoration:none; font-size:1.05rem; }
nav a{ margin-left:1.25rem; color:var(--muted); text-decoration:none; font-weight:600; }
#theme-toggle{
  margin-left:0.9rem;
  background:transparent; border:0; cursor:pointer; font-size:1.05rem;
  color:var(--muted);
}

/* HERO */
.hero{ min-height:84vh; display:flex; align-items:center; position:relative; padding:3.5rem 0; overflow:visible; }
.hero-bg{
  position:absolute; inset:0; pointer-events:none; filter:blur(60px) saturate(120%);
  background: linear-gradient(135deg, rgba(125,211,252,0.06), rgba(255,209,102,0.04));
  mix-blend-mode:screen;
}
.hero-grid{
  display:grid; grid-template-columns:1fr 420px; gap:2.5rem; align-items:center; width:100%;
  max-width:var(--container); margin:0 auto; padding:0 2rem;
}
.hero-left h1{ font-size:2.6rem; margin-bottom:0.6rem; line-height:1.05; }
.accent{ color:var(--accent-2); }
.lead{ color:var(--muted); max-width:48ch; margin-bottom:1.25rem; }

/* CTAs */
.btn{
  display:inline-flex; align-items:center; gap:0.6rem; padding:0.7rem 1.1rem; border-radius:999px; font-weight:700; cursor:pointer;
  text-decoration:none; border:0;
}
.btn.primary{ background: linear-gradient(90deg,var(--accent),var(--accent-2)); color:#072033; box-shadow: 0 8px 22px rgba(7,32,51,0.12);}
.btn.ghost{ background:transparent; color:var(--text); border:1px solid rgba(255,255,255,0.06); }

/* Profile card */
.profile-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:20px; padding:1.25rem; box-shadow: var(--shadow); color:var(--text);
  border:1px solid rgba(255,255,255,0.03);
}
/* Header avatar: circular, cropped and consistent fallback */
.pc-header { display:flex; align-items:center; gap:12px; }

/* Fallback avatar (text) - use when no image is available */
.avatar {
  width:56px;
  height:56px;
  border-radius:50%;       /* circular */
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  background: linear-gradient(90deg, var(--accent), #8be9fd);
  color: #04202a;
  flex-shrink:0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: 2px solid rgba(255,255,255,0.03);
}

/* Actual image avatar */
.avatar-img {
  width:56px;
  height:56px;
  border-radius:50%;       /* IMPORTANT: makes the image circular */
  object-fit:cover;        /* crop to fill the circle */
  display:block;
  flex-shrink:0;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border: 2px solid rgba(255,255,255,0.03);
  background-color: transparent;
  /* optional: slight inner shadow to hide tiny white borders */
  -webkit-mask-image: -webkit-radial-gradient(circle, #000 100%, #000 100%);
  mask-image: radial-gradient(circle, #000 100%, #000 100%);
}

.skills{ list-style:none; padding:0; margin:0; color:var(--muted); }
.skills li{ padding:0.25rem 0; font-weight:600; }

/* SECTIONS */
.section{ padding:4rem 0; }
.section h2{ text-align:center; margin-bottom:1rem; font-size:1.7rem; }
.muted{ color:var(--muted); text-align:center; margin-bottom:1.5rem; }

/* INFO CARDS */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.25rem; margin-top:1.5rem; }
.info-card{
  background:var(--card); padding:1.2rem; border-radius:12px; box-shadow:0 6px 18px rgba(2,6,23,0.45); border:1px solid rgba(255,255,255,0.02);
  transition:transform .18s ease, box-shadow .18s ease;
}
.info-card:hover{ transform:translateY(-6px); box-shadow:0 14px 36px rgba(2,6,23,0.6); }

/* PROJECTS GRID */
.project-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; margin-top:1.5rem; }
.project-card{
  padding:1.15rem; border-radius:12px; background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);
  border:1px solid rgba(255,255,255,0.03); box-shadow: var(--shadow); transition:transform .18s;
}
.project-card:hover{ transform:translateY(-8px); }
.pc-head{ display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:0.65rem; }
.tag{ background:rgba(255,255,255,0.03); padding:0.25rem 0.6rem; border-radius:999px; font-size:0.8rem; color:var(--muted); font-weight:700; }
.card-link{ color:var(--accent); text-decoration:none; font-weight:700; display:inline-block; margin-top:0.75rem; }

/* CONTACT FORM */
.contact-form{ max-width:760px; margin:1rem auto 0; display:flex; flex-direction:column; gap:0.9rem; }
.contact-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; }
.contact-form input, .contact-form textarea{
  padding:0.9rem 1rem; border-radius:10px; border:1px solid rgba(255,255,255,0.03); background:transparent; color:var(--text);
}
.contact-form textarea{ min-height:140px; resize:vertical; }
.form-actions{ display:flex; gap:0.8rem; align-items:center; }
.form-status{color:var(--accent); font-weight:700;}

/* FOOTER */
.footer{ padding:1.25rem 0; border-top:1px solid rgba(255,255,255,0.02); margin-top:2rem; }
.footer .container{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; }
.socials a{ color:var(--muted); text-decoration:none; margin-left:0.8rem; }

/* SMALL SCREENS */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; text-align:left; padding:0 1rem; }
  .hero-right{ order:2; display:flex; justify-content:center; }
  .nav-inner{ padding:0.7rem 1rem; }
  .contact-form .row{ grid-template-columns:1fr; }
}

/* SCROLL REVEAL helper */
.reveal {
  opacity: 0;
  transform: translateY(18px) scale(.995);
  transition: opacity 560ms cubic-bezier(.2,.9,.2,1), transform 560ms cubic-bezier(.2,.9,.2,1);
}
.reveal.show{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* small micro interactions */
a:hover, button:hover{ transform: translateY(-1px); transition: .18s ease; }