/* ========== BASE RESET & THEME ========== */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root{
  --bg:#030618;
  --bg2:#071026;
  --card: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.06);
  --accent:#00e5ff; /* cyan/aqua accent */
  --muted: rgba(255,255,255,0.72);
  --radius:14px;
}

/* Light theme variables (toggles when body gets .light) */
body.light{
  --bg: linear-gradient(180deg,#f6f8fb,#eef3fb);
  --card: rgba(10,10,10,0.03);
  --glass-border: rgba(0,0,0,0.06);
  --muted: #1a2130;
  color:#081022;
}

/* BODY + LAYOUT */
html,body{ height:100%; font-family:"Poppins",system-ui,Arial; background:var(--bg); color: #fff; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.wrap{ width:90%; max-width:1200px; margin:0 auto; position:relative; z-index:12; }

/* PARTICLES canvas sits behind everything */
#particles-canvas{ position:fixed; inset:0; z-index:0; display:block; }

/* CURSOR GLOW */
#cursor-glow{ position:fixed; width:140px; height:140px; border-radius:50%; pointer-events:none; transform:translate(-50%,-50%); background: radial-gradient(circle, rgba(0,229,255,0.16) 0%, rgba(0,229,255,0.06) 25%, transparent 55%); mix-blend-mode:screen; z-index:999; transition:transform .12s linear; }

/* LOADER */
#loader{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:var(--bg); z-index:9999; }
.loader-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--muted); }
.loader-ring{ width:70px; height:70px; }
.loader-stroke{ stroke:var(--accent); stroke-dasharray:80; stroke-dashoffset:60; animation:spin 1.2s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg);} }

/* HEADER */
.site-header{ position:sticky; top:12px; z-index:50; display:flex; align-items:center; justify-content:center; padding:12px 0; }
.site-header .wrap{ display:flex; justify-content:space-between; align-items:center; gap:12px; }
.brand{ font-weight:800; letter-spacing:2px; color:var(--accent); text-decoration:none; font-size:1.2rem; }
.brand span{ color:transparent; background:linear-gradient(90deg,var(--accent),#7be7ff); -webkit-background-clip:text; background-clip:text; font-weight:900; }
.nav a{ margin-left:18px; color:var(--muted); text-decoration:none; font-weight:600; transition:all .16s; }
.nav a:hover{ color:var(--accent); transform:translateY(-3px); }

/* THEME BTN */
#theme-btn{ position:fixed; right:20px; top:18px; z-index:60; border:none; background:var(--card); padding:10px; border-radius:10px; cursor:pointer; color:var(--muted); box-shadow:0 6px 18px rgba(0,0,0,0.35); }
#theme-btn i{ width:18px; height:18px; display:inline-block; }

/* FLOATING SOCIALS */
.socials{ position:fixed; left:18px; top:40%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:12px; }
.socials a{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:var(--card); color:var(--muted); text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,0.35); transition:all .16s; }
.socials a:hover{ transform:translateY(-6px); color:var(--accent); }

/* HERO */
.section{ padding:80px 0; position:relative; z-index:10; }
.hero-grid{ display:grid; grid-template-columns: 360px 1fr; gap:36px; align-items:center; }
.profile-card{ width:320px; background:var(--card); padding:18px; border-radius:16px; border:1px solid var(--glass-border); box-shadow:0 10px 30px rgba(2,8,23,0.6); text-align:center; }
.profile-img{ width:160px; height:160px; border-radius:50%; object-fit:cover; border:4px solid rgba(0,229,255,0.12); }
.profile-badge{ margin-top:12px; display:inline-block; padding:6px 10px; border-radius:999px; background:linear-gradient(90deg, rgba(0,229,255,0.08), rgba(0,229,255,0.02)); color:var(--muted); font-weight:600; }

/* HERO TEXT */
.hero-title{ font-size:1.6rem; margin-bottom:8px; color:#fff; }
.hero-title span{ display:block; font-size:1.2rem; color:var(--accent); margin-top:6px; font-weight:700; }
.typewriter{ font-weight:600; color:var(--accent); margin:10px 0 14px; min-height:28px; }
.hero-desc{ color:var(--muted); margin-bottom:18px; max-width:680px; }

/* BUTTONS */
.btn{ display:inline-block; text-decoration:none; padding:10px 18px; border-radius:999px; font-weight:700; margin-right:10px; border:1px solid transparent; cursor:pointer; }
.btn.primary{ background:linear-gradient(90deg,var(--accent),#63f1ff); color:#021021; box-shadow:0 10px 30px rgba(0,229,255,0.08); }
.btn.outline{ background:transparent; color:var(--muted); border:1px solid rgba(255,255,255,0.04); }

/* ABOUT */
.about-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:18px; margin-top:18px; }
.about-card{ background:var(--card); padding:18px; border-radius:12px; border:1px solid var(--glass-border); }

/* SKILLS */
.skills-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); margin-top:18px; }
.skill-item{ background:var(--card); padding:18px; border-radius:12px; border:1px solid var(--glass-border); }
.bar{ height:14px; background:rgba(255,255,255,0.04); border-radius:999px; overflow:hidden; margin-top:10px; }
.bar-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),#66f6ff); transition:width 1.2s cubic-bezier(.2,.9,.2,1); }

/* RINGS */
.rings-grid{ display:flex; align-items:center; gap:12px; }
.ring{ width:80px; height:80px; transform:rotate(-90deg); }
.ring .ring-bg{ fill:none; stroke:rgba(255,255,255,0.06); stroke-width:3; }
.ring-label{ color:var(--muted); font-size:0.9rem; }

/* PROJECTS (SWIPER) */
.swiper{ width:100%; padding:24px 0; margin-top:18px; }
.project-card{ background:var(--card); padding:20px; border-radius:12px; border:1px solid var(--glass-border); height:220px; display:flex; flex-direction:column; justify-content:space-between; }

/* CONTACT */
.contact-grid{ display:grid; grid-template-columns: 1fr 320px; gap:20px; align-items:start; margin-top:18px; }
.contact-form input, .contact-form textarea{ width:100%; padding:12px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:inherit; outline:none; }
#form-status{ margin-top:10px; color:var(--muted); font-size:0.95rem; }

/* FOOTER */
.site-footer{ padding:24px 0; color:var(--muted); text-align:center; margin-top:40px; }

/* SCROLL TOP */
#scrollTop{ position:fixed; right:18px; bottom:20px; width:46px; height:46px; border-radius:10px; background:var(--card); color:var(--muted); border:none; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 30px rgba(0,0,0,0.35); z-index:60; cursor:pointer; }

/* REVEAL */
.reveal{ opacity:0; transform:translateY(28px); transition:all .9s cubic-bezier(.2,.9,.3,1); }
.reveal.active{ opacity:1; transform:none; }

/* RESPONSIVE */
@media (max-width:980px){ .hero-grid{ grid-template-columns: 1fr; text-align:center; } .contact-grid{ grid-template-columns:1fr; } .socials{ left:8px; } .nav{ display:none; } .wrap{ width:92%; } }