/* ===== Base / Reset ===== */
*,
*::before,
*::after { box-sizing: border-box; }

html { font-size:16px; -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

:root{
  --bg:#0a0a0a;
  --fg:#f5f5f5;
  --muted:#cfcfcf;
  --border:#ffffff12;
  --accent:#6a3df0;
  --accent-2:#8a5bff;
  --radius:12px;
  --container:1100px;
  --line:1.75;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s6:3rem;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height:var(--line);
}

h1,h2,h3{ line-height:1.2; margin:0 0 var(--s2) }
h1{ font-family:"Space Grotesk",Inter,sans-serif; font-size:clamp(2rem,3.5vw,3rem) }
h2{ font-family:"Space Grotesk",Inter,sans-serif; font-size:clamp(1.5rem,2.5vw,2rem); text-align:center }
h3{ font-size:clamp(1.125rem,2vw,1.25rem) }
p,ul,ol{ margin:0 0 var(--s2); color:var(--muted) }
a{ color:var(--fg); text-decoration:underline; text-underline-offset:2px }
a:hover{ color:#fff }

/* Layout helpers */
.container{ width:min(100% - 2*var(--s4), var(--container)); margin-inline:auto; }
section{ padding-block:var(--s6); border-top:1px solid var(--border); scroll-margin-top:80px; backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); }
section:first-of-type{ border-top:0 }

/* ===== Header (sticky / fixed) ===== */
.site-header{
  position:fixed; top:0; left:0; right:0;
  height:64px;
  z-index:2000;
  background:rgba(10,10,10,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.site-header .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-block:var(--s2); padding-inline:24px;
}
.site-title{ font-size:1.125rem; margin:0 }
.site-title a{ text-decoration:none }

/* Nav */
.site-nav ul{ display:flex; gap:var(--s3); list-style:none; margin:0; padding:0 }
.site-nav a{
  position:relative; text-decoration:none; color:var(--muted);
  padding:.25rem .125rem; transition:color .2s ease, text-shadow .2s ease;
}
.site-nav a:hover, .site-nav a:focus, .site-nav .is-active{ color:#fff; text-shadow:0 0 12px rgba(138,91,255,.35) }
.site-nav .is-active::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:2px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),var(--accent));
  background-size:200% 100%; animation:underline-glow 2s linear infinite;
  border-radius:2px; box-shadow:0 0 8px rgba(138,91,255,.6);
}
@keyframes underline-glow{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* Keep content below fixed header */
main{ margin-top:64px }

/* ===== Global background canvas ===== */
.bg-canvas{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
/* Content above canvas */
main, footer{ position:relative; z-index:1 }

/* ===== Hero ===== */
.hero{ position:relative; min-height:80vh; display:grid; place-items:center; overflow:hidden; border-bottom:1px solid var(--border) }
.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hero-inner{ position:relative; z-index:1; text-align:center; padding:var(--s6) var(--s4) }
.hero h1 .accent{ color:#fff; text-shadow:0 0 24px rgba(138,91,255,.35) }
.cta{
  display:inline-flex; margin-top:var(--s3); padding:.8rem 1.2rem;
  border-radius:999px; border:1px solid var(--border); background:#0f0f12; text-decoration:none; transition:.2s;
}
.cta:hover{ border-color:var(--accent); box-shadow:0 0 24px rgba(138,91,255,.25); transform:translateY(-1px) }

/* Reduced motion fallback */
@media (prefers-reduced-motion: reduce){
  .hero{ background:radial-gradient(1200px 800px at 50% 30%, #17151f 0, #0a0a0a 60%) }
  .hero-canvas{ display:none }
}

/* ===== Projects / Slider ===== */
.slider{
  width:min(100%,960px); aspect-ratio:16/9; height:clamp(320px,60vh,720px);
  position:relative; border-radius:18px; overflow:hidden; background:#111525;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.slide{ position:absolute; inset:0; opacity:0; transition:opacity .5s ease }
.slide.is-active{ opacity:1 }
.slide img{ width:100%; height:100%; object-fit:cover; display:block }
.overlay{
  position:absolute; inset:auto 16px 16px 16px;
  background:rgba(0,0,0,.55); padding:16px 18px; border-radius:14px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.dots{ position:absolute; left:0; right:0; bottom:14px; display:flex; justify-content:center; gap:10px }
.dot{ width:12px; height:12px; border-radius:50%; border:0; background:#9aa3b2; cursor:pointer }
.dot[aria-selected="true"]{ background:var(--accent) }

/* ===== About ===== */
#about .container{ display:grid; gap:var(--s4) }
.profile{ display:grid; justify-items:center; gap:var(--s1) }
.profile img{
  width:140px; height:140px; object-fit:cover; border-radius:50%;
  box-shadow:0 6px 24px rgba(0,0,0,.35); border:1px solid var(--border);
}

/* ===== Skills ===== */
#skills .skill + .skill{ margin-top:var(--s3) }
#skills progress{
  width:100%; height:10px; appearance:none; /* removed huge paddings */
}
#skills progress::-webkit-progress-bar{ background:#111; border-radius:999px }
#skills progress::-webkit-progress-value{ background:var(--accent); border-radius:999px }
#skills progress::-moz-progress-bar{ background:var(--accent); border-radius:999px }

/* ===== Contact ===== */
#contact{ padding-top:0 } /* header offset handled by main margin-top */
.contact-form{
  max-width:600px; margin:var(--s4) auto; display:grid; gap:var(--s3); text-align:left;
}
.contact-form .form-group{ display:grid; gap:var(--s1) }
.contact-form label{ font-weight:600; color:var(--fg) }
.contact-form input, .contact-form textarea{
  padding:.75rem 1rem; border-radius:var(--radius); border:1px solid var(--border);
  background:#111; color:var(--fg); font:inherit; font-size:1rem;
}
.contact-form input:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 8px rgba(138,91,255,.35);
}
.contact-form button.cta{ justify-self:start }

/* ===== Footer ===== */
.site-footer{ border-top:1px solid var(--border); padding-block:var(--s4) }
.site-footer .container{ display:grid; gap:var(--s2); justify-items:center; text-align:center }
.social-links ul{ display:flex; gap:var(--s3); list-style:none; margin:0; padding:0 }
.social-links a{
  display:inline-flex; width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  align-items:center; justify-content:center; transition:.2s;
}
.social-links a:hover{ border-color:var(--accent); box-shadow:0 0 12px rgba(138,91,255,.35) }
.social-links i{ font-size:1.1rem }

/* ================================
   Mobile / Responsive overrides
   (kept at the end so they win)
   ================================ */

/* Safer gutters on very small screens */
@media (max-width:480px){
  .container{ width:min(100% - 2*var(--s2), var(--container)) }
}

/* Header / nav: compact on phones */
@media (max-width:600px){
  .site-header{ height:56px }
  main{ margin-top:56px } /* match header height */
  .site-header .container{ padding-block:.5rem; gap:.5rem }
  .site-title{ font-size:1rem }

  .site-nav ul{ flex-wrap:wrap; gap:.75rem }
  .site-nav a{ padding:.25rem .125rem; font-size:.95rem }
  .site-nav .is-active::after{ bottom:-3px; height:2px }
  *,
*::before,
*::after { box-sizing: content-box !important; }
}

/* Typography & spacing tweaks */
@media (max-width:600px){
  h1{ font-size:clamp(1.6rem,6vw,2.1rem) }
  h2{ font-size:clamp(1.25rem,4.8vw,1.6rem) }
  h3{ font-size:clamp(1.05rem,4.2vw,1.2rem) }
  p{ font-size:.98rem; max-width:65ch }
  section{ padding-block:var(--s4); scroll-margin-top:64px }
}

/* Hero */
@media (max-width:600px){
  .hero{ min-height:64vh }
  .hero-inner{ padding:var(--s4) var(--s2) }
  .cta{ padding:.65rem .95rem; font-size:.95rem }
}

/* Projects */
@media (max-width:600px){
  #projects{ margin:32px 0; display:block }
  .slider{ height:46vh; border-radius:12px; }
  .overlay{ inset:auto 12px 12px 12px; font-size:.95rem }
  .dot{ width:10px; height:10px }
}

/* About */
@media (max-width:600px){
  #about .container{ grid-template-columns:1fr !important; gap:var(--s3) }
  .profile{ justify-items:center }
  .profile img{ width:120px; height:120px }
}

/* Skills */
@media (max-width:600px){
  #skills .skill + .skill{ margin-top:var(--s2) }
  #skills progress{ width:100%; height:10px }
}

/* Contact */
@media (max-width:600px){
  .contact-form{ max-width:560px; margin:var(--s3) auto; gap:var(--s2); padding-inline:var(--s2) }
  .contact-form button.cta{ padding:.65rem .95rem }
}

/* Footer icons */
@media (max-width:600px){
  .social-links a{ width:36px; height:36px }
  .social-links i{ font-size:1rem }
}

/* Safety: prevent accidental horizontal scroll */
@media (max-width:600px){
  html, body{ overflow-x:hidden }
  img, video, canvas, iframe{ max-width:100%; height:auto }
}


/* --- Projects: keep the H2 above and centered, slider centered --- */
#projects { display: block; }                  /* kill any old flex */
#projects .container { display: block; }       /* no flex grid here */

#projects h2 {
  display: block;
  text-align: center;
  margin: 0 auto var(--s4);                    /* space between title & slider */
  position: relative;                          /* so it sits above any overlays */
  z-index: 2;
}

#projects .slider {
  margin-inline: auto;                         /* centers the slider */
  z-index: 1;
}

#projects .slide img { position: relative; z-index: 0; }