:root {
  --bg: #0d0f17;
  --bg-alt: #141826;
  --bg-glass: rgba(20,24,38,.55);
  --bg-glass-solid: rgba(20,24,38,.9);
  --text: #e6e9f3;
  --text-dim: #9aa4c3;
  --accent: #6366f1;
  --accent-rgb: 99 102 241;
  --code: #ffb86c;
  --danger: #ef4444;
  --radius: 18px;
  --gradient: radial-gradient(circle at 30% 20%,rgba(99,102,241,.35),transparent 60%),
              radial-gradient(circle at 80% 70%,rgba(236,72,153,.25),transparent 65%),
              linear-gradient(140deg,#0d0f17,#111525 65%,#0d0f17);
  --font-stack: 'Inter', system-ui,-apple-system, BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --shadow: 0 4px 18px -6px rgba(0,0,0,.55),0 8px 32px -4px rgba(0,0,0,.45);
  --focus: 0 0 0 3px rgba(var(--accent-rgb)/.55);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0;
  font-family: var(--font-stack);
  background: var(--gradient);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  line-height:1.55;
  overflow-x:hidden;
}

::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0a0c12; }
::-webkit-scrollbar-thumb { background:#272c3d; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:#333b52; }

a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }

h1,h2,h3 { line-height:1.15; font-weight:600; letter-spacing:.5px; }
h1 { font-size:clamp(2.4rem,6vw,3.6rem); margin:0 0 1rem; }
h2 { font-size:clamp(1.8rem,3.5vw,2.4rem); margin:0 0 1.25rem; }
h3 { font-size:1.05rem; margin:1.75rem 0 .75rem; font-weight:600; }
p { margin:0 0 1.1rem; max-width:760px; }

header {
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0.85rem clamp(1rem,4vw,3.5rem);
  backdrop-filter:blur(18px) saturate(1.3);
  background:linear-gradient(95deg, rgba(13,15,23,.78), rgba(20,24,38,.55) 60%, rgba(13,15,23,.78));
  border-bottom:1px solid rgba(99,102,241,.12);
  z-index:100;
}

.nav-brand { display:flex; align-items:center; gap:.75rem; font-weight:600; letter-spacing:.75px; font-size:1.05rem; }

.logo-circle {
  width:40px; height:40px;
  background:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#ec4899);
  border-radius:50%; display:grid; place-items:center;
  font-weight:700; font-size:.9rem; color:#fff;
  box-shadow:0 4px 14px -4px rgba(var(--accent-rgb)/.7);
  position:relative; overflow:hidden;
}
.logo-circle::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.25),transparent 60%);
  mix-blend-mode:overlay; opacity:.9;
}

nav ul {
  list-style:none; padding:0; margin:0;
  display:flex; gap:clamp(.75rem,1.8vw,2.2rem);
  font-size:.95rem; align-items:center;
}
nav a {
  position:relative; padding:.4rem .2rem; font-weight:500;
  color:var(--text-dim); transition:.25s ease;
}
nav a.active, nav a:hover { color:var(--text); }
nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:.1rem;
  height:2px; background:linear-gradient(90deg,var(--accent),#ec4899);
  border-radius:2px; transform:scaleX(0); transform-origin:0 50%;
  transition:.35s cubic-bezier(.65,.05,.36,1); opacity:.8;
}
nav a:hover::after, nav a.active::after { transform:scaleX(1); }

.toggle-theme {
  background:var(--bg-alt); color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px; padding:.55rem .95rem;
  font-size:.75rem; cursor:pointer;
  display:flex; align-items:center; gap:.5rem;
  letter-spacing:.5px; position:relative; overflow:hidden;
  transition:.35s cubic-bezier(.55,.15,.25,.95);
}
.toggle-theme:hover { background:#1d2333; box-shadow:0 4px 20px -6px rgba(var(--accent-rgb)/.4); }
.toggle-theme:focus-visible { outline:none; box-shadow:var(--focus); }

.section { padding:clamp(4.5rem,11vh,8.5rem) clamp(1rem,4.2vw,4.5rem); position:relative; }
.hero {
  min-height:100dvh; display:flex; flex-direction:column;
  justify-content:center; padding-top:calc(80px + 2rem); gap:1.75rem;
}

.gradient-text {
  background:linear-gradient(90deg,#6366f1,#8b5cf6 50%,#ec4899);
  -webkit-background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 16px rgba(99,102,241,.15));
}

.subtitle {
  font-size:clamp(1.05rem,2.1vw,1.35rem);
  font-weight:400; max-width:820px; color:var(--text-dim);
}

.inline-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem .4rem;
  background:linear-gradient(95deg,#202532,#282f42);
  border:1px solid rgba(255,255,255,.07);
  font-size:.7rem; letter-spacing:1px; font-weight:500;
  text-transform:uppercase; border-radius:999px;
  position:relative; overflow:hidden;
}
.inline-badge::before {
  content:""; position:absolute; top:0; left:-30%; width:60%; height:100%;
  background:linear-gradient(95deg,rgba(255,255,255,.15),rgba(255,255,255,0));
  transform:skewX(-25deg); animation:sheen 6s linear infinite;
}
@keyframes sheen {
  0% { transform:translateX(0) skewX(-25deg); opacity:0; }
  55% { opacity:1; }
  70% { opacity:0; }
  100% { transform:translateX(260%) skewX(-25deg); opacity:0; }
}

.actions { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; }

.btn {
  --btn-bg:linear-gradient(95deg,#6366f1,#8b5cf6 55%,#ec4899);
  position:relative; border:none; cursor:pointer;
  font-weight:600; letter-spacing:.5px;
  padding:.95rem 1.35rem 1rem; font-size:.9rem;
  border-radius:.9rem; display:inline-flex; align-items:center; gap:.65rem;
  color:#fff; background:var(--btn-bg);
  box-shadow:0 10px 28px -10px rgba(var(--accent-rgb)/.55);
  transition:.4s cubic-bezier(.65,.05,.36,1); overflow:hidden;
}
.btn::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.3),transparent 60%);
  opacity:0; transition:.45s;
}
.btn:hover::after { opacity:.7; }
.btn:hover { transform:translateY(-4px); box-shadow:0 14px 38px -10px rgba(var(--accent-rgb)/.75); }
.btn:focus-visible { outline:none; box-shadow:var(--focus); }

.btn.secondary {
  background:var(--bg-glass-solid); color:var(--text);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 6px 20px -8px rgba(0,0,0,.55);
}
.btn.secondary:hover {
  background:#222a3c;
  box-shadow:0 12px 26px -10px rgba(0,0,0,.65);
  transform:translateY(-4px);
}

.grid {
  --min:320px;
  display:grid; gap:clamp(1.25rem,2.5vw,2rem);
  grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));
}

.card {
  background:var(--bg-glass);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:1.3rem 1.35rem 1.4rem;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column; gap:.85rem;
  min-height:210px;
  box-shadow:0 8px 26px -10px rgba(0,0,0,.5);
  transition:.5s cubic-bezier(.55,.15,.25,.95);
  isolation:isolate;
}
.card::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 75% 15%,rgba(99,102,241,.22),transparent 65%),
    radial-gradient(circle at 15% 85%,rgba(236,72,153,.17),transparent 60%);
  opacity:.75; mix-blend-mode:color-dodge; pointer-events:none; transition:.6s;
}
.card:hover {
  transform:translateY(-8px) scale(1.02);
  border-color:rgba(99,102,241,.45);
  box-shadow:0 12px 42px -12px rgba(0,0,0,.65), 0 0 0 1px rgba(99,102,241,.35);
}
.card:hover::before { opacity:1; }
.card h3 { margin:.25rem 0 .35rem; font-size:1.05rem; font-weight:600; }
.card p { font-size:.85rem; color:var(--text-dim); margin:0; flex-grow:1; }
.card .tags { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.35rem; }

.tag {
  font-size:.6rem; letter-spacing:.75px; text-transform:uppercase;
  background:linear-gradient(95deg,#242b3c,#2d364b);
  padding:.4rem .6rem .43rem; border-radius:999px;
  font-weight:500; border:1px solid rgba(255,255,255,.07);
  color:#cbd5f6; position:relative; overflow:hidden;
}

.section-head { display:flex; align-items:flex-end; flex-wrap:wrap; gap:1.25rem; margin-bottom:2.5rem; }
.section-head p { margin:0; }
.divider {
  height:1px; width:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.12),rgba(255,255,255,0));
  margin:3.5rem 0 2rem;
}

.project-list {
  display:grid;
  gap:clamp(1.15rem,2vw,1.85rem);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:.75rem;
}

.repo-card {
  background:linear-gradient(155deg,#1a2030,#161c29 55%,#1d2536);
  border:1px solid rgba(255,255,255,.07);
  border-radius:16px;
  padding:1.05rem 1.1rem 1.15rem;
  display:flex; flex-direction:column; gap:.6rem;
  min-height:180px; position:relative; overflow:hidden;
  transition:.45s; text-decoration:none; color:inherit;
}
.repo-card::after {
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 85% 15%,rgba(99,102,241,.25),transparent 60%);
  mix-blend-mode:color-dodge; opacity:.7; pointer-events:none; transition:.45s;
}
.repo-card:hover {
  transform:translateY(-6px);
  border-color:rgba(99,102,241,.35);
  box-shadow:0 10px 34px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(99,102,241,.25);
}
.repo-card:hover::after { opacity:1; }
.repo-card h4 { margin:0; font-size:.95rem; font-weight:600; display:flex; align-items:center; gap:.5rem; }
.repo-meta {
  display:flex; flex-wrap:wrap; gap:.75rem;
  font-size:.65rem; letter-spacing:.5px; text-transform:uppercase;
  color:var(--text-dim); font-weight:500; margin-top:.25rem;
}
.lang-color { display:inline-block; width:10px; height:10px; border-radius:50%; box-shadow:0 0 0 2px rgba(0,0,0,.35); }
.repo-desc { font-size:.72rem; color:var(--text-dim); line-height:1.4; margin:.15rem 0 .2rem; flex-grow:1; max-width:430px; }
.status-badge {
  position:absolute; top:10px; right:10px;
  font-size:.55rem; padding:.35rem .55rem .4rem;
  font-weight:600; letter-spacing:.75px;
  background:linear-gradient(95deg,#313d55,#283146);
  border:1px solid rgba(255,255,255,.08);
  border-radius:8px; text-transform:uppercase;
}

.contact-grid {
  --min:260px;
  display:grid; gap:1.35rem;
  grid-template-columns:repeat(auto-fit,minmax(var(--min),1fr));
  margin-top:1.75rem;
}
.contact-card {
  background:linear-gradient(155deg,#1a2030,#161c29 55%,#1d2536);
  border:1px solid rgba(255,255,255,.08);
  padding:1.2rem 1.2rem 1.3rem;
  border-radius:18px;
  display:flex; flex-direction:column; gap:.55rem;
  position:relative; overflow:hidden; transition:.4s;
}
.contact-card:hover {
  transform:translateY(-6px);
  border-color:rgba(99,102,241,.35);
  box-shadow:0 10px 32px -10px rgba(0,0,0,.75),0 0 0 1px rgba(99,102,241,.25);
}
.contact-card h4 {
  margin:0; font-size:.85rem; font-weight:600;
  letter-spacing:.75px; text-transform:uppercase;
}
.contact-card a.inline-link {
  font-size:.75rem; align-self:flex-start;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.45rem .75rem .5rem; background:#242c3d;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px; font-weight:500; letter-spacing:.4px;
  transition:.35s; text-decoration:none; color:var(--text-dim);
}
.contact-card a.inline-link:hover {
  background:#2d374c; text-decoration:none;
  box-shadow:0 4px 18px -6px rgba(0,0,0,.6); color:var(--text);
}

footer {
  padding:4rem 1.5rem 3.5rem; text-align:center;
  font-size:.7rem; color:var(--text-dim);
  background:linear-gradient(to top,#0b0d13,rgba(11,13,19,.4));
  margin-top:4rem; position:relative;
}
footer .socials {
  display:flex; justify-content:center;
  gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap;
}
footer .socials a {
  display:inline-flex; align-items:center; gap:.45rem;
  background:#1d2432; padding:.55rem .85rem .6rem;
  font-size:.65rem; font-weight:500; letter-spacing:.75px;
  border-radius:10px; border:1px solid rgba(255,255,255,.07);
  text-transform:uppercase; position:relative;
  overflow:hidden; transition:.45s; text-decoration:none;
  color:var(--text-dim);
}
footer .socials a:hover {
  background:#252f42; color:var(--text);
  box-shadow:0 6px 22px -8px rgba(0,0,0,.7);
  transform:translateY(-3px);
}

hr.fine {
  border:none; height:1px; width:100%;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.14),rgba(255,255,255,0));
  margin:3.5rem auto 3rem; max-width:900px;
}

.muted { color:var(--text-dim); }
.small { font-size:.72rem; line-height:1.4; }

#backToTop {
  position:fixed; bottom:22px; right:22px;
  width:50px; height:50px; display:grid; place-items:center;
  background:linear-gradient(135deg,#6366f1,#8b5cf6 55%,#ec4899);
  border:none; border-radius:14px; cursor:pointer;
  color:#fff; font-weight:600; letter-spacing:.5px; font-size:.65rem;
  box-shadow:0 10px 30px -10px rgba(var(--accent-rgb)/.6);
  opacity:0; transform:translateY(12px) scale(.85);
  pointer-events:none;
  transition:.5s cubic-bezier(.55,.15,.25,.95); z-index:200;
}
#backToTop.visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#backToTop:hover {
  transform:translateY(-4px) scale(1.05);
  box-shadow:0 14px 36px -12px rgba(var(--accent-rgb)/.8);
}

.inline-code {
  font-family:var(--mono);
  background:#232b3b;
  padding:.3rem .5rem .4rem;
  border-radius:8px;
  font-size:.75rem;
  border:1px solid rgba(255,255,255,.07);
  color:var(--code);
}

/* Animations */
.fade-up {
  opacity:0; transform:translateY(20px);
  transition:.9s cubic-bezier(.55,.15,.25,.95);
}
.fade-up.in-view {
  opacity:1; transform:translateY(0);
}

@media (max-width:860px) {
  nav ul { display:none; }
  header { justify-content:space-between; }
  .hero { padding-top:calc(70px + 1rem); }
}
@media (max-width:560px) {
  .actions { flex-direction:column; align-items:flex-start; }
  .btn, .btn.secondary { width:100%; justify-content:center; }
}

/* Light Theme Overrides */
.light {
  --bg:#f5f7fb;
  --bg-alt:#fff;
  --bg-glass:rgba(255,255,255,.65);
  --bg-glass-solid:rgba(255,255,255,.9);
  --text:#1a2130;
  --text-dim:#556070;
  --gradient:radial-gradient(circle at 20% 15%,rgba(99,102,241,.28),transparent 55%),
             radial-gradient(circle at 85% 80%,rgba(236,72,153,.25),transparent 65%),
             linear-gradient(145deg,#f5f7fb,#eef1f6 60%,#f5f7fb);
  --shadow:0 4px 20px -6px rgba(0,0,0,.12), 0 10px 34px -10px rgba(0,0,0,.08);
  --focus:0 0 0 3px rgba(var(--accent-rgb)/.4);
}
.light .card,
.light .repo-card,
.light .contact-card { background:var(--bg-glass); border-color:rgba(0,0,0,.08); }
.light nav a { color:var(--text-dim); }
.light nav a.active,
.light nav a:hover { color:var(--text); }
.light footer { background:linear-gradient(to top,#dfe3ec,rgba(240,242,247,.6)); }
.light .inline-code { background:#e7ecf4; border-color:rgba(0,0,0,.08); }
.light .btn.secondary { background:#fff; }
.light .btn.secondary:hover { background:#f2f4f9; }
.light .tag {
  background:linear-gradient(95deg,#e6ebf3,#dbe2ed);
  border-color:rgba(0,0,0,.08);
  color:#2a3242;
}
.light .contact-card a.inline-link {
  background:#e6ebf3; border-color:rgba(0,0,0,.08); color:#293241;
}
.light .contact-card a.inline-link:hover {
  background:#dbe2ed; color:#111;
}