/* ============================================================
   SURIYA P — style.css
   Dark theme (default) + Light theme (data-theme="light")
   Gold accent scheme throughout
============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

/* ============================================================
   DESIGN TOKENS — DARK (default)
============================================================ */
:root,
[data-theme="dark"] {
  --bg:          #080d1a;
  --bg2:         #0c1220;
  --bg3:         #060b16;
  --bg-card:     rgba(255,255,255,0.03);
  --bg-card-h:   rgba(255,255,255,0.05);

  --gold:        #c9a84c;
  --gold-lt:     #e2c97e;
  --gold-dk:     #9a7230;
  --gold-glow:   rgba(201,168,76,0.22);

  --text:        #f0f2f7;
  --muted:       rgba(240,242,247,0.62);
  --slate:       #8892a4;

  --border:      rgba(255,255,255,0.08);
  --border-g:    rgba(201,168,76,0.2);
  --border-g2:   rgba(201,168,76,0.38);

  --nav-bg:      rgba(8,13,26,0.9);
  --footer-bg:   #060b16;
  --drop-bg:     rgba(8,13,26,0.97);

  --shadow-soft: 0 8px 28px rgba(0,0,0,0.35);
  --shadow-deep: 0 20px 70px rgba(0,0,0,0.6);

  --curtain-blend: normal;
}

/* ============================================================
   DESIGN TOKENS — LIGHT
============================================================ */
[data-theme="light"] {
  --bg:          #faf6ee;
  --bg2:         #f4ede0;
  --bg3:         #efe6d5;
  --bg-card:     rgba(255,255,255,0.75);
  --bg-card-h:   rgba(255,255,255,0.95);

  --gold:        #8a6220;
  --gold-lt:     #b8922e;
  --gold-dk:     #6a4810;
  --gold-glow:   rgba(138,98,32,0.15);

  --text:        #0e0a02;
  --muted:       rgba(14,10,2,0.7);
  --slate:       #5a4e38;

  --border:      rgba(26,20,8,0.1);
  --border-g:    rgba(154,114,48,0.25);
  --border-g2:   rgba(154,114,48,0.5);

  --nav-bg:      rgba(250,246,238,0.92);
  --footer-bg:   #efe6d5;
  --drop-bg:     rgba(250,246,238,0.98);

  --shadow-soft: 0 8px 28px rgba(26,20,8,0.12);
  --shadow-deep: 0 20px 70px rgba(26,20,8,0.18);
}

/* ============================================================
   RESET / BASE
============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior:smooth; overflow-y:scroll; overflow-x:hidden; scrollbar-gutter:stable; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  padding-top: 70px;
  transition: background 0.4s ease, color 0.4s ease;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a, a:visited, a:hover, a:active { text-decoration: none; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }

/* ============================================================
   CANVAS
============================================================ */
#net {
  position: fixed; inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; z-index: 1;
  opacity: 1;
}
[data-theme="light"] #net { opacity: 0.65; }

/* ============================================================
   NAVBAR
============================================================ */
.navbar {
  position: fixed; top:0; left:0; right:0;
  height: 70px; padding: 0 5%;
  display: flex; justify-content: space-between; align-items: center;
  background: var(--nav-bg);
  backdrop-filter: blur(20px);
  z-index: 9999;
  border-bottom: 1px solid var(--border-g);
  transition: background 0.4s ease, border-color 0.4s ease;
}

.logo {
  font-family: 'Syne', sans-serif;
  font-size: 1.45rem; font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.05em;
  padding-left: 1.5rem;
}

.page-wrap, .page-container, .certifications,
.volunteering, .organizations, main, section, .container {
  position: relative; z-index: 2;
}

/* Nav links */
.nav-links {
  display: flex; gap: 0.4rem; list-style: none; align-items: center;
}

.nav-links a {
  color: var(--muted);
  font-size: 0.88rem; font-weight: 400;
  padding: 0.48rem 0.85rem;
  border-radius: 999px; border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: var(--text); background: var(--bg-card); border-color: var(--border); }
.nav-links a.active { color: var(--gold); background: var(--gold-glow); border-color: var(--border-g2); }

/* Theme button */
.theme-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-g);
  color: var(--gold);
  width: 36px; height: 36px;
  border-radius: 10px;
  cursor: pointer; font-size: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.theme-btn:hover { background: var(--gold-glow); border-color: var(--gold); transform: rotate(20deg); }

/* Dropdown */
.dropdown { position: relative; }
.dropbtn {
  cursor: pointer; color: var(--muted);
  font-size: 0.88rem; font-weight: 400;
  padding: 0.48rem 0.85rem; border-radius: 999px;
  border: 1px solid transparent;
  display: inline-flex; align-items: center; gap: 0.3rem;
  transition: color 0.2s, background 0.2s; user-select: none;
}
.dropbtn:hover { color: var(--text); background: var(--bg-card); }
.caret { transition: transform 0.25s; display: inline-block; }
.dropdown:hover .caret { transform: rotate(180deg); }

.dropdown-menu {
  position: absolute; top: 2.8rem; right: 0; min-width: 195px;
  list-style: none; padding: 0.55rem;
  background: var(--drop-bg); backdrop-filter: blur(20px);
  border: 1px solid var(--border-g); border-radius: 14px;
  opacity: 0; transform: translateY(8px) scale(0.98);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: var(--shadow-deep); z-index: 10000;
}
.dropdown:hover .dropdown-menu { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.dropdown-menu li a {
  display: block; padding: 0.58rem 0.75rem;
  border-radius: 9px; color: var(--muted); font-size: 0.86rem;
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s;
}
.dropdown-menu li a:hover { color: var(--gold); background: var(--gold-glow); border-color: var(--border-g); }

/* Nav toggle */
.nav-toggle { display:none; background:none; border:none; cursor:pointer; }
.nav-toggle span { display:block; width:24px; height:2px; margin:5px 0; background:var(--text); border-radius:2px; }

/* ============================================================
   HERO
============================================================ */
.hero {
  min-height: calc(100vh - 70px);
  display: flex; align-items: center;
  padding: 4% 5%; position: relative; z-index: 2; gap: 4rem;
}

.hero-content { flex:1; max-width: 56%; }

.hero-greeting {
  font-size: 0.82rem; font-weight: 300; color: var(--muted);
  letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 0.9rem;
}

.hero-name {
  display: flex; flex-direction: column;
  line-height: 1.0; margin-bottom: 1rem; gap: 0.04em;
}

/* ── NAME SHIMMER ANIMATIONS ── */
.name-first {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: linear-gradient(
    120deg,
    #d4aa50 0%,
    #d4aa50 20%,
    #ffffff 40%,
    #fffef8 50%,
    #ffffff 60%,
    #d4aa50 80%,
    #d4aa50 100%
  );
  background-size: 200% 100%;
  background-position: 100% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerFirst 4s linear infinite;
}

.name-last {
  font-family: 'Syne', sans-serif;
  font-size: clamp(1.8rem, 3vw, 3.2rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: linear-gradient(
    120deg,
    #8a6010 0%,
    #c9a84c 20%,
    #ffffff 40%,
    #fffef8 50%,
    #ffffff 60%,
    #c9a84c 80%,
    #8a6010 100%
  );
  background-size: 200% 100%;
  background-position: 100% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerLast 4s linear infinite;
}

@keyframes shimmerFirst {
  0%   { background-position: 100% center; }
  100% { background-position: -100% center; }
}

@keyframes shimmerLast {
  0%   { background-position: 100% center; }
  100% { background-position: -100% center; }
}

/* Light theme overrides */
[data-theme="light"] .name-first {
  background: linear-gradient(
    120deg,
    #6a4810 0%,
    #6a4810 20%,
    #2a1a00 40%,
    #3a2400 50%,
    #2a1a00 60%,
    #6a4810 80%,
    #6a4810 100%
  );
  background-size: 200% 100%;
  background-position: 100% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerFirst 4s linear infinite;
}

[data-theme="light"] .name-last {
  background: linear-gradient(
    120deg,
    #4a3008 0%,
    #8a6220 20%,
    #d4920a 40%,
    #e8a820 50%,
    #d4920a 60%,
    #8a6220 80%,
    #4a3008 100%
  );
  background-size: 200% 100%;
  background-position: 100% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerLast 4s linear infinite;
}

.hero-role {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 1.3rem; min-height: 1.6rem;
}
.role-dash { display:inline-block; width:26px; height:2px; background:var(--gold); flex-shrink:0; }

#typing-text {
  font-size: 0.88rem; font-weight: 500;
  color: var(--gold-lt); letter-spacing: 0.08em; text-transform: uppercase;
}
.typing-caret { color: var(--gold); animation: blink 0.9s infinite; font-weight:300; }
@keyframes blink { 0%,100%{opacity:0.1;} 50%{opacity:1;} }

.hero-bio {
  font-size: 0.97rem; color: var(--muted);
  max-width: 500px; line-height: 1.8;
  margin-bottom: 1.8rem; font-weight: 300;
}

/* Buttons */
.hero-buttons { display:flex; gap:0.7rem; flex-wrap:wrap; margin-bottom:1.5rem; }

.cta-button, .cta-primary, .cta-secondary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.78rem 1.5rem; border-radius: 10px;
  font-size: 0.86rem; font-weight: 500; letter-spacing: 0.04em;
  font-family: 'DM Sans', sans-serif;
  transition: transform 0.22s, box-shadow 0.22s, background 0.22s, border-color 0.22s;
}
.cta-button i, .cta-primary i, .cta-secondary i { font-size: 0.9rem; }

.cta-button, .cta-primary {
  background: var(--gold); color: #080d1a; border: none;
  box-shadow: 0 4px 22px var(--gold-glow);
}
.cta-button:hover, .cta-primary:hover {
  transform: translateY(-2px); background: var(--gold-lt);
  box-shadow: 0 8px 30px rgba(201,168,76,0.4);
}
[data-theme="light"] .cta-button, [data-theme="light"] .cta-primary { color: #fff; }

.cta-button.secondary, .cta-secondary {
  background: transparent; color: var(--text);
  border: 1px solid var(--border-g);
}
.cta-button.secondary:hover, .cta-secondary:hover {
  transform: translateY(-2px); border-color: var(--gold);
  background: var(--gold-glow);
}

/* Social */
.hero-social { display:flex; gap:0.7rem; }
.hero-social a {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px; border: 1px solid var(--border-g);
  background: var(--bg-card); color: var(--slate);
  transition: transform 0.2s, border-color 0.2s, color 0.2s, background 0.2s;
}
.hero-social a:hover { transform:translateY(-3px); border-color:var(--gold); color:var(--gold); background:var(--gold-glow); }
.hero-social i { font-size: 1.15rem; }

/* ============================================================
   PROFILE IMAGE + CANVAS FX
============================================================ */
.hero-image { flex:1; display:flex; align-items:center; justify-content:center; position:relative; z-index:2; }

.profile-ring-wrap {
  position: relative; width: min(340px,48vw); height: min(340px,48vw);
  display: flex; align-items:center; justify-content:center;
}

.profile-canvas {
  position: absolute;
  inset: -60px;
  width: calc(100% + 120px);
  height: calc(100% + 120px);
  pointer-events: none;
  z-index: 1;
}

.profile-img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; object-position: center top;
  border: 2.5px solid rgba(201,168,76,0.5);
  box-shadow: 0 0 35px rgba(201,168,76,0.12), var(--shadow-deep);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  position: relative; z-index: 2;
  cursor: pointer;
}
.profile-ring-wrap:hover .profile-img {
  transform: scale(1.03) translateY(-4px);
  border-color: var(--gold);
  box-shadow: 0 0 0 6px rgba(201,168,76,0.08), 0 0 50px rgba(201,168,76,0.25), var(--shadow-deep);
}

/* ============================================================
   STATS BAR
============================================================ */
.hero-stats {
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  padding:1.6rem 5%;
  border-top:1px solid var(--border-g); border-bottom:1px solid var(--border);
  background: rgba(12,18,32,0.5);
  backdrop-filter:blur(10px);
  transition: background 0.4s;
}
[data-theme="light"] .hero-stats { background: rgba(244,237,224,0.6); }

.stat-item { flex:1; text-align:center; padding:0.4rem 1rem; display:flex; flex-direction:column; align-items:center; gap:3px; }
.stat-num { font-family:'Syne',sans-serif; font-size:2rem; font-weight:800; color:var(--gold); line-height:1; }
.stat-label { font-size:0.72rem; font-weight:400; color:var(--slate); text-transform:uppercase; letter-spacing:0.1em; }
.stat-divider { width:1px; height:36px; background:var(--border-g); flex-shrink:0; }

/* ============================================================
   FOOTER
============================================================ */
footer {
  position:relative; z-index:2;
  background:var(--footer-bg); padding:2.8rem 5%;
  text-align:center; border-top:1px solid var(--border);
  transition: background 0.4s;
  margin-top: auto;
}
footer p { color:var(--slate); font-size:0.86rem; }
.social-links { margin-top:1.3rem; display:flex; justify-content:center; gap:1.6rem; }
.social-links a { display:inline-flex; align-items:center; justify-content:center; }
.social-links i { color:var(--slate); font-size:1.3rem; cursor:pointer; transition:color 0.2s,transform 0.2s; }
.social-links i:hover { color:var(--gold); transform:translateY(-3px); }

/* ============================================================
   PAGE CONTAINER
============================================================ */
.page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3.5rem 5% 5rem;
  flex: 1;
}

/* ============================================================
   ABOUT / EXPERIENCE
============================================================ */
.about-section {
  margin-bottom:4rem; padding:0 0 2rem;
  border-bottom:1px solid var(--border-g);
}
.about-section h1 {
  font-family:'Syne',sans-serif; font-size:clamp(1.8rem,3vw,2.6rem);
  font-weight:800; margin-bottom:1.2rem; color:var(--text);
}
.about-section p { max-width:640px; font-size:1rem; color:var(--muted); margin-bottom:1rem; line-height:1.8; }

.experience-section { position:relative; padding-left:3rem; }
.experience-section::before {
  content:""; position:absolute; top:0; left:1.1rem; width:2px; height:100%;
  background:linear-gradient(180deg,transparent,var(--border-g2),var(--border-g),transparent);
}
.experience-section h2 { font-family:'Syne',sans-serif; font-size:clamp(1.7rem,2.8vw,2.3rem); font-weight:800; margin-bottom:2.5rem; color:var(--text); }

.experience-item {
  position:relative; margin-bottom:2.8rem; padding:1.8rem 2.2rem;
  border-radius:16px; border:1px solid var(--border);
  background:var(--bg-card); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-soft);
  transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s;
}
.experience-item::before {
  content:""; position:absolute; left:-2.35rem; top:2.2rem;
  width:12px; height:12px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 5px var(--gold-glow),0 0 18px var(--gold-glow);
}
.experience-item:hover { transform:translateY(-4px); border-color:var(--border-g); box-shadow:0 24px 70px rgba(0,0,0,0.4); }
.experience-item h3 { font-size:1.15rem; font-weight:600; margin-bottom:0.4rem; color:var(--text); }
.experience-item .role {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.86rem; font-weight:500; padding:0.38rem 0.8rem; margin-bottom:1.1rem;
  color:var(--gold-lt); border-radius:999px; border:1px solid var(--border-g);
  background:var(--gold-glow); width:fit-content;
}
.experience-item ul { padding-left:1.2rem; }
.experience-item li { margin-bottom:0.55rem; color:var(--muted); line-height:1.6; }
.experience-item li::marker { color:var(--gold); }

/* ============================================================
   PROJECTS
============================================================ */
.projects-page h1 { font-family:'Syne',sans-serif; font-size:clamp(2rem,3.5vw,3rem); font-weight:800; margin-bottom:0.85rem; color:var(--text); }
.projects-intro { max-width:820px; color:var(--muted); font-size:1.02rem; line-height:1.75; margin-bottom:1.8rem; }

.project-pills { display:flex; flex-wrap:wrap; gap:0.65rem; margin:1rem 0 2.2rem; }
.pill {
  appearance:none; cursor:pointer; font-family:'DM Sans',sans-serif;
  padding:0.5rem 0.95rem; border-radius:999px; font-size:0.86rem;
  color:var(--muted); background:var(--bg-card); border:1px solid var(--border);
  transition:transform 0.18s,background 0.2s,border-color 0.2s,color 0.2s;
}
.pill:hover { transform:translateY(-2px); color:var(--text); border-color:var(--border-g); background:var(--gold-glow); }
.pill.active { color:var(--gold); background:var(--gold-glow); border-color:var(--border-g2); }

/* 2-column grid — wider cards */
.projects-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.6rem; }

.project-card {
  position:relative; padding:1.6rem 1.6rem 1.3rem;
  border-radius:16px; border:1px solid var(--border);
  background:var(--bg-card); backdrop-filter:blur(12px);
  box-shadow:var(--shadow-soft);
  transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s;
  overflow:hidden;
}
.project-card:hover { transform:translateY(-4px); border-color:var(--border-g); box-shadow:0 24px 70px rgba(0,0,0,0.4); }
.project-card.featured { border-color:var(--border-g); background:var(--bg-card-h); }
.project-card.ghost { opacity:0.82; }
.project-card.ghost:hover { opacity:1; }

/* ── Category banner ── */
.project-card .card-banner {
  margin: -1.6rem -1.6rem 1.2rem -1.6rem;
  padding: 0.65rem 1.2rem;
  font-size: 0.73rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

/* Banner colour variants */
.card-banner.tag-ml   { background:linear-gradient(90deg,rgba(99,102,241,0.3),rgba(99,102,241,0.08));  color:#a5b4fc; }
.card-banner.tag-nlp  { background:linear-gradient(90deg,rgba(20,184,166,0.3),rgba(20,184,166,0.08));  color:#5eead4; }
.card-banner.tag-de   { background:linear-gradient(90deg,rgba(245,158,11,0.3),rgba(245,158,11,0.08));  color:#fcd34d; }
.card-banner.tag-fc   { background:linear-gradient(90deg,rgba(239,68,68,0.3),rgba(239,68,68,0.08));    color:#fca5a5; }
.card-banner.tag-bi   { background:linear-gradient(90deg,rgba(16,185,129,0.3),rgba(16,185,129,0.08));  color:#6ee7b7; }
.card-banner.tag-more { background:linear-gradient(90deg,rgba(201,168,76,0.2),rgba(201,168,76,0.04));  color:var(--gold-lt); }

[data-theme="light"] .card-banner.tag-ml   { background:linear-gradient(90deg,rgba(99,102,241,0.12),rgba(99,102,241,0.04));  color:#4338ca; }
[data-theme="light"] .card-banner.tag-nlp  { background:linear-gradient(90deg,rgba(20,184,166,0.12),rgba(20,184,166,0.04));  color:#0f766e; }
[data-theme="light"] .card-banner.tag-de   { background:linear-gradient(90deg,rgba(245,158,11,0.12),rgba(245,158,11,0.04));  color:#92400e; }
[data-theme="light"] .card-banner.tag-fc   { background:linear-gradient(90deg,rgba(239,68,68,0.12),rgba(239,68,68,0.04));    color:#991b1b; }
[data-theme="light"] .card-banner.tag-bi   { background:linear-gradient(90deg,rgba(16,185,129,0.12),rgba(16,185,129,0.04));  color:#065f46; }
[data-theme="light"] .card-banner.tag-more { background:linear-gradient(90deg,rgba(201,168,76,0.1),rgba(201,168,76,0.02));   color:var(--gold-dk); }

.project-card h2 { font-size:1.08rem; font-weight:600; color:var(--text); margin-bottom:0.4rem; line-height:1.25; }
.project-card .meta { font-size:0.88rem; color:var(--muted); margin-bottom:0.85rem; }
.project-card p { color:var(--muted); font-size:0.95rem; line-height:1.65; margin-bottom:1.05rem; }

.project-card .badge {
  display:inline-flex; align-items:center; gap:0.4rem;
  padding:0.28rem 0.65rem; margin-bottom:0.75rem;
  font-size:0.74rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  border-radius:999px; color:var(--gold-lt); border:1px solid var(--border-g); background:var(--gold-glow);
}

.chips { display:flex; flex-wrap:wrap; gap:0.45rem; margin-bottom:1rem; }

.chip {
  padding:0.3rem 0.6rem; border-radius:999px; font-size:0.8rem;
  color:var(--muted); background:var(--bg-card); border:1px solid var(--border);
  transition:border-color 0.2s,color 0.2s,background 0.2s;
  cursor:default; user-select:none;
}
.chip:hover { border-color:var(--border-g); color:var(--gold-lt); }
.project-card:hover .chip { border-color:var(--border-g); }

/* chip colours */
.chip.blue   { border-color:rgba(77,183,255,0.28); background:rgba(77,183,255,0.06); color:rgba(180,220,255,0.85); }
.chip.purple { border-color:rgba(138,92,255,0.28);  background:rgba(138,92,255,0.06); color:rgba(210,185,255,0.85); }
.chip.teal   { border-color:rgba(80,220,190,0.25);  background:rgba(80,220,190,0.06); color:rgba(150,240,220,0.85); }
.chip.green  { border-color:rgba(100,220,120,0.25); background:rgba(100,220,120,0.06);color:rgba(170,245,180,0.85); }
.chip.yellow { border-color:rgba(240,200,80,0.28);  background:rgba(240,200,80,0.06); color:rgba(245,220,130,0.85); }
.chip.orange { border-color:rgba(240,140,60,0.28);  background:rgba(240,140,60,0.06); color:rgba(255,190,140,0.85); }
.chip.red    { border-color:rgba(240,90,90,0.28);   background:rgba(240,90,90,0.06);  color:rgba(255,170,170,0.85); }
.chip.dark   { border-color:var(--border); background:var(--bg-card); }

[data-theme="light"] .chip.blue   { color:rgba(30,100,180,0.9);  }
[data-theme="light"] .chip.purple { color:rgba(90,40,160,0.9);   }
[data-theme="light"] .chip.teal   { color:rgba(20,140,120,0.9);  }
[data-theme="light"] .chip.green  { color:rgba(30,140,60,0.9);   }
[data-theme="light"] .chip.yellow { color:rgba(150,110,10,0.9);  }
[data-theme="light"] .chip.orange { color:rgba(170,80,20,0.9);   }
[data-theme="light"] .chip.red    { color:rgba(180,30,30,0.9);   }

.github-link {
  display:inline-flex; align-items:center; gap:0.5rem;
  padding:0.62rem 0.9rem; border-radius:10px; font-size:0.86rem;
  color:var(--muted); background:var(--bg-card); border:1px solid var(--border);
  transition:transform 0.2s,border-color 0.2s,color 0.2s;
}
.github-link:hover { transform:translateY(-2px); color:var(--gold); border-color:var(--border-g); }

/* ============================================================
   SKILLS
============================================================ */
.skills-page { max-width:860px; margin:0 auto; overflow-x:clip; }
.skills-page h1 { font-family:'Syne',sans-serif; font-size:clamp(2rem,3.5vw,3rem); font-weight:800; margin-bottom:0.8rem; color:var(--text); }
.skills-intro { max-width:860px; color:var(--muted); font-size:1.02rem; line-height:1.75; margin-bottom:2.2rem; }

.skill-block {
  margin-bottom:1.4rem; padding:1.5rem 1.65rem;
  border-radius:16px; border:1px solid var(--border);
  background:var(--bg-card); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-soft);
  transition:transform 0.25s,border-color 0.25s,box-shadow 0.25s;
}
.skill-block:hover { transform:translateY(-3px); border-color:var(--border-g); }

.skill-block h2 {
  font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700;
  margin-bottom:0.95rem; color:var(--text);
  display:flex; align-items:center; gap:0.55rem;
}
.skill-block h2::before {
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 4px var(--gold-glow); flex:0 0 auto;
}
.chip-row { display:flex; flex-wrap:wrap; gap:0.5rem; align-items:center; }

/* ============================================================
   CONTACT
============================================================ */
.contact-page { max-width:800px; margin:0 auto; overflow-x:clip; }
.contact-header { text-align:center; margin-bottom:2.4rem; }
.contact-header h1 { font-family:'Syne',sans-serif; font-size:clamp(2rem,3.5vw,3rem); font-weight:800; color:var(--text); margin-bottom:0.8rem; }
.contact-header p { max-width:780px; margin:0 auto; color:var(--muted); font-size:1.02rem; line-height:1.78; }

.contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; margin-bottom:2rem; }

.contact-card {
  display:flex; gap:1rem; align-items:center;
  padding:1.3rem 1.45rem; border-radius:16px;
  border:1px solid var(--border); background:var(--bg-card); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-soft); transition:transform 0.25s,border-color 0.25s;
}
.contact-card:hover { transform:translateY(-3px); border-color:var(--border-g); }

.contact-icon { width:50px; height:50px; border-radius:13px; display:grid; place-items:center; border:1px solid var(--border-g); background:var(--gold-glow); }
.contact-icon i { font-size:1.2rem; color:var(--gold); }

.contact-info { display:flex; flex-direction:column; gap:0.2rem; }
.contact-label { font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate); }
.contact-value { font-size:1rem; font-weight:500; color:var(--text); }
a.contact-value { transition:color 0.2s; }
a.contact-value:hover { color:var(--gold); }

.contact-social { display:flex; justify-content:center; gap:0.8rem; flex-wrap:wrap; }
.social-circle {
  display:inline-flex; align-items:center; gap:0.55rem;
  padding:0.75rem 1rem; border-radius:999px;
  border:1px solid var(--border); background:var(--bg-card);
  color:var(--muted); font-size:0.9rem;
  transition:transform 0.22s,border-color 0.22s,color 0.22s,background 0.22s;
}
.social-circle i { font-size:1.1rem; }
.social-circle span { font-weight:500; }
.social-circle:hover { transform:translateY(-3px); color:var(--gold); border-color:var(--border-g); background:var(--gold-glow); }

/* ============================================================
   EDUCATION
============================================================ */
.education-page { max-width:820px; margin:0 auto; padding-left:3rem; overflow-x:clip; position:relative; }
.education-page::after {
  content:""; position:absolute; top:100px; bottom:0; left:1.2rem; width:2px;
  background:linear-gradient(180deg,transparent,var(--border-g2),var(--border-g),transparent);
  opacity:0.8; pointer-events:none;
}
.education-page h1 { font-family:'Syne',sans-serif; font-size:clamp(2rem,3.5vw,3rem); font-weight:800; color:var(--text); margin-bottom:0.8rem; }
.edu-intro { max-width:860px; color:var(--muted); font-size:1.02rem; line-height:1.78; margin-bottom:2rem; }

.edu-card {
  position:relative; display:grid; grid-template-columns:70px 1fr; gap:1rem;
  align-items:start; padding:1.45rem 1.55rem; margin-bottom:1.25rem;
  border-radius:16px; border:1px solid var(--border);
  background:var(--bg-card); backdrop-filter:blur(14px);
  box-shadow:var(--shadow-soft); transition:transform 0.25s,border-color 0.25s;
}
.edu-card:hover { transform:translateY(-3px); border-color:var(--border-g); }

.edu-card .edu-icon { position:relative; }
.edu-card .edu-icon::before {
  content:""; position:absolute; left:-2.52rem; top:10px;
  width:12px; height:12px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 5px var(--gold-glow);
}
.edu-icon { width:56px; height:56px; border-radius:14px; display:grid; place-items:center; border:1px solid var(--border-g); background:var(--gold-glow); }
.edu-icon i { font-size:1.25rem; color:var(--gold); }

.edu-content h2 { font-family:'Syne',sans-serif; font-size:1.15rem; font-weight:700; color:var(--text); margin-bottom:0.28rem; }
.edu-degree { font-size:0.97rem; font-weight:500; color:var(--gold-lt); margin-bottom:0.7rem; }
.edu-meta { display:flex; flex-wrap:wrap; gap:0.8rem; margin-bottom:0.8rem; color:var(--muted); font-size:0.9rem; }
.edu-meta i { margin-right:0.38rem; color:var(--slate); }
.edu-content p { color:var(--muted); line-height:1.75; margin-bottom:0.8rem; }
.edu-tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin:0.7rem 0; }
.edu-list { margin:0; padding-left:1.1rem; }
.edu-list li { margin-bottom:0.5rem; color:var(--muted); line-height:1.65; }
.edu-list li::marker { color:var(--gold); }

/* ============================================================
   CERTIFICATIONS
============================================================ */
.certifications { max-width:980px; margin:0 auto; padding:4rem 5% 6rem; }
.page-title { text-align:center; font-family:'Syne',sans-serif; font-size:clamp(2.2rem,4vw,3.4rem); font-weight:800; margin-bottom:0.7rem; color:var(--text); }
.cert-intro { text-align:center; max-width:860px; margin:0 auto 2.2rem; color:var(--muted); font-size:1.02rem; line-height:1.78; }
.cert-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }

.cert-card {
  position:relative; padding:1.5rem 1.5rem 1.3rem; padding-top:3.8rem;
  border-radius:16px; border:1px solid var(--border); background:var(--bg-card);
  backdrop-filter:blur(14px); box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  transition:transform 0.25s,border-color 0.25s;
}
.cert-card:hover { transform:translateY(-3px); border-color:var(--border-g); }
.cert-icon { position:absolute; top:1rem; left:1rem; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--border-g); background:var(--gold-glow); }
.cert-icon i { font-size:1rem; color:var(--gold); }
.cert-card h3 { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:0.38rem; line-height:1.25; }
.cert-org { color:var(--gold-lt); font-weight:500; font-size:0.87rem; margin-bottom:0.75rem; }
.cert-card p { color:var(--muted); line-height:1.7; margin-bottom:0.85rem; font-size:0.93rem; }
.cert-date { margin-top:auto; display:inline-flex; align-items:center; gap:0.45rem; padding:0.42rem 0.7rem; border-radius:999px; font-size:0.8rem; color:var(--slate); border:1px solid var(--border); background:var(--bg-card); }

/* ============================================================
   VOLUNTEERING
============================================================ */
.volunteering { max-width:860px; margin:0 auto; padding:4rem 5% 6rem; }
.vol-list { position:relative; padding-left:3rem; }
.vol-list::before { content:""; position:absolute; top:0; bottom:0; left:1.15rem; width:2px; background:linear-gradient(180deg,transparent,var(--border-g2),var(--border-g),transparent); }

.vol-card {
  position:relative; display:grid; grid-template-columns:55px 1fr; gap:1rem;
  padding:1.45rem 1.6rem; margin-bottom:1.6rem;
  border-radius:16px; border:1px solid var(--border); background:var(--bg-card);
  backdrop-filter:blur(14px); box-shadow:var(--shadow-soft);
  transition:transform 0.25s,border-color 0.25s;
}
.vol-card:hover { transform:translateY(-3px); border-color:var(--border-g); }
.vol-icon { position:relative; width:50px; height:50px; border-radius:14px; display:grid; place-items:center; background:var(--gold-glow); border:1px solid var(--border-g); }
.vol-icon::before { content:""; position:absolute; left:-2.5rem; top:50%; transform:translateY(-50%); width:11px; height:11px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 5px var(--gold-glow); }
.vol-icon i { font-size:1.15rem; color:var(--gold); }
.vol-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; margin-bottom:0.55rem; }
.vol-header h2 { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:0.18rem; }
.vol-header h3 { font-size:0.88rem; color:var(--muted); }
.vol-date { font-size:0.78rem; padding:0.28rem 0.62rem; border-radius:999px; color:var(--slate); border:1px solid var(--border); background:var(--bg-card); white-space:nowrap; }
.vol-content p { color:var(--muted); line-height:1.7; margin-bottom:0.75rem; font-size:0.93rem; }
.vol-tag { display:inline-block; padding:0.3rem 0.7rem; border-radius:999px; font-size:0.77rem; font-weight:500; color:var(--gold-lt); background:var(--gold-glow); border:1px solid var(--border-g); }

/* ============================================================
   ORGANIZATIONS
============================================================ */
.organizations { max-width:980px; margin:0 auto; padding:4rem 5% 6rem; }
.organizations .page-title { margin-bottom:2.2rem; }
.org-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }

.org-card {
  position:relative; padding:1.5rem 1.5rem 1.3rem; padding-top:4rem;
  border-radius:16px; border:1px solid var(--border); background:var(--bg-card);
  backdrop-filter:blur(14px); box-shadow:var(--shadow-soft);
  display:flex; flex-direction:column;
  transition:transform 0.25s,border-color 0.25s;
}
.org-card:hover { transform:translateY(-3px); border-color:var(--border-g); }
.org-icon { position:absolute; top:1rem; left:1rem; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; border:1px solid var(--border-g); background:var(--gold-glow); transition:transform 0.22s; }
.org-icon i { font-size:1rem; color:var(--gold); }
.org-card:hover .org-icon { transform:translateY(-2px) rotate(-3deg); }
.org-card h2 { font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:0.28rem; }
.org-card h3 { font-size:0.87rem; color:var(--muted); margin-bottom:0.85rem; }
.org-card p { color:var(--muted); line-height:1.7; margin-bottom:1rem; font-size:0.93rem; }
.org-footer { margin-top:auto; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding-top:0.85rem; border-top:1px solid var(--border); color:var(--slate); font-size:0.82rem; }

/* ============================================================
   SCROLL REVEAL
============================================================ */
.reveal { opacity:0; transform:translateY(18px); transition:opacity 0.7s ease,transform 0.7s ease; will-change:opacity,transform; }
.reveal.in-view { opacity:1; transform:translateY(0); }
.reveal.left  { transform:translateX(-28px); }
.reveal.right { transform:translateX(28px); }
.reveal.in-view.left,.reveal.in-view.right { transform:translateX(0); }

/* ============================================================
   CARD SPOTLIGHT
============================================================ */
.card-spotlight { position:relative; overflow:hidden; }
.card-spotlight::before {
  content:""; position:absolute; inset:-2px;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),var(--gold-glow),transparent 55%);
  opacity:0; transition:opacity 0.25s; pointer-events:none;
}
.card-spotlight:hover::before { opacity:1; }

/* ============================================================
   RESUME MODAL
============================================================ */
.resume-modal { position:fixed; inset:0; display:none; z-index:5000; }
.resume-modal.is-open { display:block; }
.resume-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(6px); }
.resume-card { position:relative; width:min(980px,92vw); height:min(720px,80vh); margin:80px auto 0; background:var(--bg2); border:1px solid var(--border-g); border-radius:16px; overflow:hidden; box-shadow:var(--shadow-deep); }
.resume-header { display:flex; align-items:center; justify-content:space-between; padding:13px 15px; background:rgba(0,0,0,0.3); border-bottom:1px solid var(--border-g); }
.resume-header h3 { margin:0; font-size:0.97rem; color:var(--text); }
.resume-actions { display:flex; align-items:center; gap:9px; }
.resume-download { display:inline-flex; align-items:center; gap:7px; padding:7px 11px; border-radius:9px; border:1px solid var(--border-g); background:var(--gold-glow); color:var(--gold-lt); font-size:0.85rem; transition:background 0.2s; }
.resume-download:hover { background:rgba(201,168,76,0.2); }
.resume-close { width:36px; height:36px; border-radius:9px; border:1px solid var(--border); background:var(--bg-card); color:var(--text); cursor:pointer; font-size:0.95rem; transition:background 0.2s; }
.resume-close:hover { background:var(--bg-card-h); }
.resume-body { height:calc(100% - 54px); }
.resume-body iframe { width:100%; height:100%; border:0; background:#fff; }
body.modal-open { overflow:hidden; }

/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:900px) {
  .nav-toggle { display:block; }
  .nav-links {
    display:none; position:absolute; top:100%; left:5%; right:5%;
    background:var(--drop-bg); border:1px solid var(--border-g);
    padding:14px; border-radius:14px; flex-direction:column; gap:3px;
    backdrop-filter:blur(20px);
  }
  .nav-links.open { display:flex; }
  .nav-links a { border-radius:10px; }
}

@media (max-width:768px) {
  .hero { flex-direction:column-reverse; text-align:center; padding-top:3rem; gap:2rem; }
  .hero-content { max-width:100%; }
  .hero-name,.hero-greeting { align-items:center; text-align:center; }
  .name-first,.name-last { font-size:clamp(1.7rem,7vw,2.8rem); white-space:normal; }
  .hero-role { justify-content:center; }
  .hero-buttons,.hero-social { justify-content:center; }
  .hero-bio { margin:0 auto 1.5rem; }
  .profile-ring-wrap { width:min(250px,68vw); height:min(250px,68vw); }
  .logo { padding-left:0.8rem; font-size:1.25rem; }
  .hero-stats { flex-wrap:wrap; gap:1rem; }
  .stat-divider { display:none; }
  .stat-item { min-width:40%; }
  .experience-section { padding-left:1.5rem; }
  .experience-section::before { left:0.35rem; }
  .experience-item::before { left:-1rem; }
  .education-page { padding-left:2rem; }
  .education-page::after { left:0.7rem; }
  .edu-card .edu-icon::before { left:-2rem; }
  .contact-grid { grid-template-columns:1fr; }
}

@media (max-width:1100px) {
  .cert-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .org-grid  { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:650px) {
  .projects-grid,.cert-grid,.org-grid { grid-template-columns:1fr; }
  .edu-card { grid-template-columns:1fr; }
  .edu-card .edu-icon::before { left:-1rem; top:16px; }
  .vol-card { grid-template-columns:1fr; }
  .vol-icon::before { left:-1.9rem; }
  .vol-list { padding-left:2rem; }
  .vol-list::before { left:0.75rem; }
  .education-page { padding-left:1.5rem; }
  .education-page::after { left:0.4rem; }
}

/* ============================================================
   REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion:reduce) {
  .profile-img,.ring,.cta-button,.cta-primary,.cta-secondary,
  .hero-social a,.skill-block,.project-card,.contact-card,
  .cert-card,.org-card,.vol-card,.edu-card,.experience-item,
  .theme-btn { transition:none; animation:none; }
  .typing-caret { animation:none; }
  .name-first, .name-last { animation:none; }
}