/* Base theme and layout */
:root {
  --bg: #03010a;
  --surface: rgba(15, 23, 42, 0.92);
  --border: rgba(56, 189, 248, 0.16);
  --text: #e8e0ff;
  --muted: #94a3b8;
  --accent-cyan: #22d3ee;
  --accent-pink: #fb7185;
  --accent-fuchsia: #c026d3;
  --accent-gold: #facc15;
  --accent-lime: #84cc16;
  --nav-h: 56px;
}

* { box-sizing: border-box; margin:0; padding:0 }
html { scroll-behavior: smooth }
body { min-height:100vh; background:var(--bg); color:var(--text); font-family: 'Inter', system-ui, -apple-system, sans-serif; overflow-x:hidden }

#starfield { position:fixed; inset:0; z-index:0; pointer-events:none }
body::after { content:''; position:fixed; inset:0; z-index:1; background:repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.03) 3px); pointer-events:none }

nav { position:fixed; inset-inline:0; top:0; height:var(--nav-h); z-index:100; display:flex; align-items:center; justify-content:space-between; padding:0 1.25rem; background:rgba(3,1,10,0.82); backdrop-filter:blur(14px); border-bottom:1px solid rgba(14,165,233,0.12) }
.nav-logo { font-weight:700; font-size:0.9rem; letter-spacing:0.28em; color:var(--accent-cyan); text-decoration:none; text-transform:uppercase }
.hamburger { display:flex; flex-direction:column; justify-content:center; width:20px; height:14px; background:none; border:none; padding:0; cursor:pointer; gap:4px; z-index:110 }
.hamburger span { display:block; height:2px; width:100%; border-radius:999px; background:var(--accent-cyan); box-shadow:0 0 8px var(--accent-cyan); transition:transform .25s,opacity .25s,width .25s }

.nav-menu { position:fixed; top:var(--nav-h); left:0; right:0; z-index:99; background:rgba(3,1,10,0.98); border-bottom:1px solid rgba(251,113,133,0.06); display:flex; flex-direction:column; align-items:center; max-height:0; overflow:hidden; transition:max-height .32s, opacity .32s }
.nav-menu a { width:100%; padding:1rem 1.25rem; text-align:center; text-decoration:none; color:var(--accent-pink); border-bottom:1px solid rgba(255,255,255,0.03) }
.nav-menu.open { max-height:260px; opacity:1 }

.section { position:relative; z-index:2; min-height:calc(100vh - var(--nav-h)); padding:calc(var(--nav-h) + 1.5rem) 1.25rem 3rem; display:flex; flex-direction:column; justify-content:center; align-items:center; scroll-margin-top:calc(var(--nav-h) + 1rem); }
.hero-eyebrow { font-size:.78rem; letter-spacing:.34em; color:var(--accent-lime); text-transform:uppercase }
.hero-title { font-size:clamp(2.6rem,10vw,5rem); color:#fff; text-align:center }
.hero-sub { font-size:clamp(.75rem,2.2vw,1rem); color:var(--accent-fuchsia); text-transform:uppercase; margin-top:.5rem; text-align:center }
.hero-sub a {
  color: var(--accent-fuchsia);
  text-decoration: none;
  text-transform: uppercase;
}
.hero-sub a:hover {
  color: var(--accent-cyan);
}
.hero-divider { width:min(260px,80vw); height:2px; background:linear-gradient(90deg,transparent,var(--accent-pink),var(--accent-cyan),var(--accent-fuchsia),transparent); border-radius:999px }
.hero-cta { display:inline-flex; align-items:center; padding:.95rem 1.9rem; background:linear-gradient(135deg,var(--accent-pink),var(--accent-cyan)); color:#021124; text-decoration:none; border-radius:999px }

.about-wrapper { width:100%; max-width:560px; text-align:center }
.about-bio { color:var(--muted); font-size:1rem; line-height:1.7 }

.social-links { display:flex; justify-content:center; gap:1rem; margin-top:1.75rem }
.social-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:999px;
  background:rgba(15,23,42,0.86); border:1px solid rgba(56,189,248,0.16);
  color:var(--text); transition:color .2s, border-color .2s, transform .2s;
}
.social-icon:hover { color:var(--accent-cyan); border-color:var(--accent-cyan); transform:translateY(-3px) }

.skills-grid { width:100%; max-width:720px; display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:1.1rem }
.skill-tile {
  display:flex; flex-direction:column; align-items:center; gap:.7rem;
  padding:1.25rem .75rem; background:rgba(15,23,42,0.86);
  border:1px solid rgba(56,189,248,0.1); border-radius:14px;
  transition:transform .2s, border-color .2s;
}
.skill-tile:hover { transform:translateY(-4px); border-color:var(--accent-cyan) }
.skill-icon-badge {
  width:48px; height:48px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem; color:#021124; letter-spacing:.02em;
}
.skill-name { font-size:.72rem; letter-spacing:.1em; color:var(--muted); text-transform:uppercase }

/* reveal */
.reveal { opacity:0; transform:translateY(20px); transition:opacity .7s, transform .7s }
.reveal.visible { opacity:1; transform:translateY(0) }

/* Settings toggle */
.settings-toggle { position:fixed; right:.75rem; bottom:.75rem; z-index:115; width:44px; height:44px; border-radius:12px; background:rgba(7,16,29,0.95); color:var(--text); border:1px solid rgba(56,189,248,0.08); display:inline-flex; align-items:center; justify-content:center; cursor:pointer }

.starfield-panel { position:fixed; right:0.75rem; bottom:4.5rem; z-index:115; width:min(320px,calc(100vw - 2rem)); background:rgba(7,16,29,0.98); border:1px solid rgba(56,189,248,0.08); border-radius:12px; padding:.9rem; backdrop-filter:blur(12px) }
.starfield-panel.hidden { display:none }
.panel-title { color:var(--accent-cyan); font-size:0.9rem; letter-spacing:.14em; margin-bottom:.5rem }
.panel-label { display:block; font-size:.78rem; color:var(--muted); margin-top:.6rem }
.panel-row { display:flex; gap:.6rem; align-items:center; margin-top:.75rem }
.panel-note { color:var(--muted); font-size:.82rem }

.lightspeed-btn {
  position:fixed;
  left:.75rem;
  bottom:.75rem;
  z-index:115;
  width:30px;
  height:30px;
  margin-top:0.75rem;
  padding:0;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-cyan));
  color: #021124;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45);
}

@media(min-width:900px) {
  .nav-menu { position:fixed; top:0; left:auto; right:1.25rem; width:auto; height:var(--nav-h); max-height:none; display:flex; flex-direction:row; align-items:center; gap:1.75rem; background:transparent; border:none; overflow:visible; z-index:101; }
  .nav-menu a { width:auto; border:none; padding:0; color:var(--text); }
  .hamburger { display:none; }
 }

.section-header {
  text-align:center;
  margin-bottom:1.25rem;
}

.section-title {
  font-size:clamp(1.4rem,3vw,2rem);
  letter-spacing:.2em;
  color:#fff;
  text-transform:uppercase;
}

.section-tag {
  display:block;
  margin-bottom:.35rem;
  color:var(--accent-cyan);
  font-size:.82rem;
  letter-spacing:.24em;
}

.page-shell {
  min-height: 100vh;
  padding: 3rem 1.25rem;
  color: var(--text);
}

.back-link {
  display: inline-block;
  margin-bottom: 1.25rem;
  color: var(--accent-cyan);
  text-decoration: none;
}

.page-title {
  margin-bottom: 1.25rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.project-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.project-card {
  padding: 1rem;
  border: 1px solid rgba(56, 189, 248, 0.16);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.86);
}

.project-card--link {
  border-color: rgba(251, 113, 133, 0.3);
}

.project-tag {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-lime);
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent-cyan);
  text-decoration: none;
}

.project-link:hover {
  color: var(--accent-pink);
}

.project-link-icon {
  flex: none;
  color: var(--accent-fuchsia);
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.lightspeed-btn {
  position: static;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-cyan));
  color: #021124;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.45);
}

.hamburger.active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}