:root{
  --accent: #0b63d4;
  --muted: #bbb;
  --bg-overlay: rgba(0,0,0,0.46);    /* slightly lighter so bg shows through */
  --card-bg: rgba(0,0,0,0.48);
  --section-bg: rgba(255,255,255,0.04);
  --max-width: 1000px;
  --radius: 12px;
  --transition-fast: 180ms;
  --text-light: #fff;
  --text-muted: rgba(255,255,255,0.85);
}

/* Typography */
html,body{
  font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  color: var(--text-light);
  margin: 0;
  padding: 0;
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Background: use files you uploaded at repo root */
body{
  min-height: 100vh;
  background-image: url('/background.jpg');  /* root-relative path */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

/* overlay for contrast */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  z-index: 0;
}

/* ensure content sits above overlay */
header, main, footer, .container, .card { position: relative; z-index: 1; }

.container{
  width: 90%;
  max-width: var(--max-width);
  margin: 0 auto;
}

/* Header */
header{
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  position: sticky;
  top: 0;
  transition: background var(--transition-fast) ease, box-shadow var(--transition-fast) ease;
}
header.scrolled{ background: rgba(0,0,0,0.6); box-shadow: 0 10px 30px rgba(0,0,0,0.45); }

.header-inner{ display:flex; align-items:center; justify-content:space-between; padding:0.85rem 0; }

.brand{ color: var(--accent); font-weight:700; text-decoration:none; font-size:1.15rem; }
.brand:hover{ opacity:0.95; transform: translateY(-1px); }

/* Nav */
.site-nav{ display:flex; gap:1rem; align-items:center; }
.site-nav a{ color: var(--muted); text-decoration:none; font-weight:500; padding:6px 8px; border-radius:8px; transition: all var(--transition-fast); }
.site-nav a:hover{ color:#fff; background: rgba(255,255,255,0.03); }

/* mobile toggle */
.nav-toggle{ display:none; background:none; border:0; font-size:1.5rem; color:var(--muted); }

/* Hero */
.hero{ padding:4rem 0; display:flex; align-items:center; justify-content:center; text-align:center; }

.hero-card{ width:100%; max-width:720px; margin:0 auto; padding:3rem 2rem; border-radius: var(--radius); background:var(--card-bg); border:1px solid rgba(255,255,255,0.03); box-shadow: 0 20px 40px rgba(0,0,0,0.55); text-align:center; }

/* entrance animation */
.animate-enter{ opacity:0; transform: translateY(10px); animation: enter 600ms cubic-bezier(.2,.9,.2,1) 150ms forwards; }
@keyframes enter{ to { opacity:1; transform: translateY(0); } }

.profile-img{ width:110px; height:110px; border-radius:50%; object-fit:cover; border:4px solid #fff; display:block; margin:0 auto 1rem; }

/* text */
.name{ margin:0 0 0.2rem; font-size:2rem; line-height:1.05; font-weight:700; }
.subtitle{ color: var(--text-muted); margin-bottom:0.35rem; }
.location{ color:#f0c84a; margin-bottom:1rem; }
.lead{ max-width:560px; margin:0 auto 1rem; color: rgba(255,255,255,0.93); }

/* socials */
.socials{ display:flex; gap:1.25rem; justify-content:center; margin-top:1rem; font-size:1.9rem; }
.social-link{ color:inherit; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:8px; transition: transform var(--transition-fast), background var(--transition-fast); }
.social-link .icon{ width:22px; height:22px; display:block; fill:currentColor; }
.social-link:hover{ transform: translateY(-4px); opacity:1; }

/* icon colors */
.socials a:first-child{ color:#0A66C2; } /* linkedin */
.socials a:last-child{ color: #fff; background: rgba(255,255,255,0.02); padding:6px; }

/* meta */
.meta{ margin-top:1rem; color: rgba(255,255,255,0.75); font-size:0.88rem; }

/* sections */
.section{ padding:3rem 0; color: rgba(255,255,255,0.92); }
.alt-bg{ background: var(--section-bg); backdrop-filter: blur(6px); padding:1rem; border-radius:10px; border:1px solid rgba(255,255,255,0.02); }

/* ABOUT layout */
.about-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; align-items: start; }
.about-lead { margin: 0 0 1rem; color: rgba(255,255,255,0.95); line-height: 1.5; font-size: 1rem; }
.about-highlights { list-style: none; padding: 0; margin: 0 0 1rem; color: rgba(255,255,255,0.9); }
.about-highlights li { margin: .5rem 0; padding-left: .5rem; }
.about-cta { margin-top: 1rem; display:flex; gap:0.75rem; flex-wrap:wrap; }
.btn.secondary { background: transparent; border: 1px solid rgba(255,255,255,0.06); color: #fff; }

/* skills & stats */
.skills { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:0.5rem; }
.skill { background: rgba(255,255,255,0.04); padding: .35rem .6rem; border-radius: 999px; font-size: .9rem; color: #fff; border: 1px solid rgba(255,255,255,0.02); }
.stats { display:flex; gap:1rem; margin-top:0.6rem; align-items:center; }
.stat { background: rgba(255,255,255,0.03); padding:0.6rem 0.9rem; border-radius:8px; text-align:center; min-width:72px; }
.stat strong { display:block; font-size:1.1rem; }
.stat-label { font-size:0.8rem; color: rgba(255,255,255,0.8); margin-top:0.2rem; }

/* grid & cards */
.grid{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); }
.card{ padding:1rem; background: rgba(0,0,0,0.45); border-radius:10px; border:1px solid rgba(255,255,255,0.03); color:#fff; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.card:hover{ transform: translateY(-6px); box-shadow:0 18px 40px rgba(0,0,0,0.5); }

/* footer */
footer{ text-align:center; padding:1rem 0; border-top:1px solid rgba(255,255,255,0.03); color:#ccc; }

/* responsive */
@media (max-width:1024px){ .hero{ padding:3rem 0; } .name{ font-size:1.8rem; } .hero-card{ padding:2.4rem 1.5rem; } }
@media (max-width:860px){ .about-grid { grid-template-columns: 1fr; } .about-right { margin-top: 1rem; } }
@media (max-width:768px){
  .site-nav{ display:none; flex-direction:column; }
  .site-nav.open{ display:flex; }
  .nav-toggle{ display:block; }
  .hero{ padding:2rem 0; align-items:flex-start; }
  .hero-card{ margin:0 1rem; padding:1.8rem 1rem; max-width:none; }
  .container{ width:95%; }
  .grid{ grid-template-columns:1fr; gap:1rem; }
}

/* accessibility focus */
a:focus, button:focus { outline: 3px solid rgba(11,99,212,0.22); outline-offset: 3px; border-radius:6px; }