:root {
  --text: #e6eaf2;
  --muted: #a7b0c0;
  --brand: #7c5cff;
  --brand-2: #00e0ff;
  --surface: rgba(18, 21, 29, 0.7);
  --border: #1f2430;

  /* Themeable colors */
  --bg: #0d1117;
  --panel: #161b22;
  --panel-border: #30363d;

  --fs-hero: clamp(1.6rem, 1.2rem + 2vw, 3rem);
  --fs-h2: clamp(1.8rem, 1.2rem + 2vw, 2.5rem);
  --fs-body: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);

  --space-section: clamp(1.5rem, 1rem + 3vw, 3rem);
  --radius: 12px;
}

/* Light theme overrides (GitHub-like) */
.theme-light {
  --text: #24292f;
  --muted: #57606a;
  --bg: #f6f8fa;
  --panel: #ffffff;
  --panel-border: #d0d7de;
}

/* ---------------- Light mode (GitHub-like) refinements ---------------- */
.theme-light body { background: var(--bg); color: var(--text); }

/* Headings: remove gradients/glow in light */
.theme-light #projects h2,
.theme-light #journey h2 {
  background: none;
  -webkit-background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--text);
  text-shadow: none;
  animation: none;
}

/* Panels and cards */
.theme-light .projects-box,
.theme-light .glass,
.theme-light .milestone-content,
.theme-light .card,
.theme-light .site-footer {
  background: var(--panel);
  border-color: var(--panel-border);
  box-shadow: none;
}
.theme-light .card { background: var(--panel); }

/* Buttons */
.theme-light .btn { 
  background: #0969da;
  box-shadow: none;
}
.theme-light .btn:hover { background: #0759b5; box-shadow: none; }
.theme-light .btn--ghost { border-color: #0969da; color: #0969da; }
.theme-light .btn--ghost:hover { background: #0969da; color: #fff; }
.theme-light .btn--journey { background: #0969da; color: #fff; box-shadow: none; }

/* Search input */
.theme-light #searchInput {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--panel-border);
  box-shadow: none;
}
.theme-light #searchInput:focus { box-shadow: none; border-color: #0969da; }

/* Particles off for clean light mode */
.theme-light .code-particles { display: none; }

/* Journey timeline: simplify path and markers */
.theme-light #journeyTimeline::before {
  background: #d0d7de;
  animation: none;
  box-shadow: none;
}
.theme-light .milestone::before {
  background: #fff;
  border-color: #0969da;
  box-shadow: none;
  animation: none;
}
.theme-light .milestone-icon {
  background: #0969da;
  box-shadow: none;
  animation: none;
}

/* Tables */
.theme-light .course-table.neat {
  border-color: var(--panel-border);
  box-shadow: none;
}
.theme-light .course-table.neat th {
  background: #f6f8fa;
  color: var(--text);
  text-shadow: none;
}
.theme-light .course-table.neat tfoot td {
  background: #f6f8fa;
  color: var(--text);
  border-top: 1px solid var(--panel-border);
}

/* SGPA badge: tone down */
.theme-light .sgpa-badge {
  background: #0969da;
  border: 1px solid #0759b5;
  box-shadow: none;
}

/* Ongoing text: reduce glow */
.theme-light .ongoing-text { text-shadow: none; }
.theme-light .ongoing-text::before { color: #2da44e; }

/* Theme toggle button clarity in light */
.theme-light .theme-toggle { background: var(--panel); border-color: var(--panel-border); }

/* Profile picture: white background in day mode */
.theme-light .profile-pic {
  background: #ffffff;
  border-color: var(--panel-border);
  box-shadow: none;
}

/* About section panel on white */
.theme-light .about-top {
  background: var(--panel);
  border-bottom: 1px solid var(--panel-border);
}

/* Floating icons visible on white */
.theme-light .code-particles { display: block; }
.theme-light .code-particles i {
  opacity: 0.6;
  animation: floatIcon 12s ease-in-out infinite;
}

/* Ensure social icons remain visible in day mode */
.theme-light .socials a#githubLink { background: #181717; }
.theme-light .socials a#githubLink i { color: #fff; }
.theme-light .socials a#linkedinLink { background: #0A66C2; }
.theme-light .socials a#linkedinLink i { color: #fff; }
.theme-light .socials a#twitterLink { background: #000000; }
.theme-light .socials a#twitterLink i { color: #fff; }
.theme-light .socials a#emailLink { background: #EA4335; }
.theme-light .socials a#emailLink i { color: #fff; }

/* ---------- Day mode typography and accents ---------- */
.theme-light .text-gradient {
  background: linear-gradient(135deg, #0969da, #1f6feb);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.theme-light .intro-subtitle { color: #1f6feb; text-shadow: none; }
.theme-light .intro-description { color: var(--muted); text-shadow: none; }

/* Headings accent underline in projects */
.theme-light #projects h2::after {
  background: #0969da;
  box-shadow: none;
}

/* Milestones: calmer, readable */
.theme-light .milestone-date {
  color: #57606a;
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}
.theme-light .milestone-content h3 {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #24292f;
  text-shadow: none;
}
.theme-light .milestone-content p { color: #57606a; }

/* Buttons inside content */
.theme-light .toggle-result { background: #0969da; }
.theme-light .toggle-result:hover { background: #0759b5; box-shadow: none; }

/* Tables in day mode */
.theme-light .course-table { border-color: var(--panel-border); }
.theme-light .course-table th { background: #f6f8fa; color: #24292f; }
.theme-light .course-table td { border-color: var(--panel-border); }
.theme-light .course-table tr:nth-child(even) { background: #f6f8fa; }
.theme-light .course-table.neat td.course-title { color: #24292f; }

/* Progress indicator colors */
.theme-light .progress-bar { background: #eaeef2; box-shadow: none; }
.theme-light .progress-fill { background: #0969da; box-shadow: none; }
.theme-light .progress-text { color: #57606a; }
.theme-light .progress-percentage { color: #0969da; text-shadow: none; }

/* Links */
.theme-light a { color: #0969da; }

/* Improve legibility on white backgrounds */
.theme-light .about-top h1 { color: var(--text); text-shadow: none; }
.theme-light .about-top p { color: var(--muted); text-shadow: none; }
.theme-light .card h3 { color: var(--text); }
.theme-light #journey p { color: var(--muted); }
.theme-light .intro-description { color: var(--muted); }
.theme-light .contact-subtitle { color: var(--muted); }
.theme-light .contact-email {
  background: #fff;
  border-color: var(--panel-border);
  color: #24292f;
}
.theme-light .milestone-content p { color: #57606a; }
.theme-light .milestone-date { color: #57606a; }
.theme-light .card a.btn { box-shadow: none; }

/* 🔮 Neon background */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
}
body::before, body::after { display: none; }
/* --- Social Icon Buttons --- */
.socials a {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 1.3rem;
  color: #fff; /* default fallback */
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

/* GitHub */
.socials a#githubLink {
  background: #181717;
}
.socials a#githubLink i { color: #fff; }

/* LinkedIn */
.socials a#linkedinLink {
  background: #0A66C2;
}
.socials a#linkedinLink i { color: #fff; }

/* Twitter/X */
.socials a#twitterLink {
  background: #000000;
}
.socials a#twitterLink i { color: #fff; }

/* Facebook */
.socials a#facebookLink { background: #1877F2; }
.socials a#facebookLink i { color: #fff; }

/* WhatsApp */
.socials a#whatsappLink { background: #25D366; }
.socials a#whatsappLink i { color: #fff; }

/* Email */
.socials a#emailLink {
  background: #EA4335;
}
.socials a#emailLink i { color: #fff; }

/* Hover effect */
.socials a:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 0 16px rgba(255,255,255,0.7);
}

/* ---------------- Scroll Indicator ---------------- */
.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 200;
  border: 1px solid var(--panel-border);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: .5rem .75rem;
  cursor: pointer;
  box-shadow: none;
}
.theme-toggle:hover { filter: brightness(1.05); }
.theme-icon { display: inline-block; font-size: 1rem; }

.scroll-indicator {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.scroll-indicator:hover {
  opacity: 1;
}

.scroll-line {
  width: 2px;
  height: 60px;
  background: linear-gradient(180deg, var(--brand), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

.scroll-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.8rem;
  color: var(--brand);
  font-weight: 600;
  letter-spacing: 1px;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ---------------- Intro ---------------- */
.about-top {
  text-align: center;
  background: var(--surface);
  padding: 8rem 1rem 3rem;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.profile-wrapper { position: relative; display: inline-block; z-index: 2; }
.profile-pic {
  width: clamp(120px, 25vw, 220px);
  height: clamp(120px, 25vw, 220px);
  border-radius: 50%;
  border: 4px solid var(--brand);
  object-fit: cover;
  margin-top: 7rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 0 20px rgba(124,92,255,0.7), 0 0 40px rgba(0,224,255,0.5);
}

.text-gradient {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Enhanced intro styling */
.intro-subtitle {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--brand-2);
  margin: 0.5rem 0 1rem 0;
  text-shadow: 0 0 10px rgba(0,224,255,0.3);
}

.intro-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #ccc;
  max-width: 600px;
  margin: 0 auto;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* 🌟 Floating code icons */
.code-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.code-particles i {
  position: absolute;
  font-size: 1.8rem;
  opacity: 0.25;
  animation: none;
}
/* Make floating icons behind the profile picture larger in the hero/about section */
.about-top .code-particles i { font-size: 3rem; }
@keyframes floatIcon {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.6; }
  25%  { transform: translateY(-20px) rotate(8deg); opacity: 1; }
  50%  { transform: translateY(0) rotate(0deg); opacity: 0.8; }
  75%  { transform: translateY(20px) rotate(-8deg); opacity: 1; }
  100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
}

/* Spread icons (example positions) */
.code-particles i:nth-child(1)  { top: 5%; left: 8%; color:#e44d26; }
.code-particles i:nth-child(2)  { top: 15%; right: 10%; color:#1572b6; }
.code-particles i:nth-child(3)  { top: 28%; left: 15%; color:#f7df1e; }
.code-particles i:nth-child(4)  { top: 40%; right: 20%; color:#61dbfb; }
.code-particles i:nth-child(5)  { top: 55%; left: 25%; color:#3c873a; }
.code-particles i:nth-child(6)  { top: 70%; right: 12%; color:#3776ab; }
.code-particles i:nth-child(7)  { top: 82%; left: 18%; color:#276dc3; }
.code-particles i:nth-child(8)  { bottom: 12%; right: 28%; color:#f89820; }
.code-particles i:nth-child(9)  { bottom: 25%; left: 12%; color:#9c27b0; }
.code-particles i:nth-child(10) { bottom: 35%; right: 8%; color:#4caf50; }
.code-particles i:nth-child(11) { top: 22%; left: 50%; color:#f05032; }
.code-particles i:nth-child(12) { bottom: 15%; right: 50%; color:#181717; }
.code-particles i:nth-child(13) { top: 50%; left: 80%; color:#2496ed; }
.code-particles i:nth-child(14) { bottom: 45%; left: 70%; color:#fcc624; }
.code-particles i:nth-child(15) { top: 10%; left: 35%; color:#9e9e9e; }
.code-particles i:nth-child(16) { top: 32%; right: 35%; color:#2196f3; }
.code-particles i:nth-child(17) { bottom: 28%; left: 40%; color:#ff9800; }
.code-particles i:nth-child(18) { bottom: 10%; right: 15%; color:#00e0ff; }
.code-particles i:nth-child(19) { top: 65%; left: 5%; color:#00bcd4; }

/* ---------------- Hero ---------------- */
.hero { 
  text-align: center; 
  padding: 3rem 1rem; 
  position: relative;
}

.hero__cta { 
  display: flex; 
  gap: 1rem; 
  flex-wrap: wrap; 
  justify-content: center; 
  margin-bottom: 2rem;
}

.btn { 
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0.8rem 1.5rem; 
  border-radius: var(--radius); 
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); 
  color: #fff; 
  text-decoration: none; 
  font-weight: 600; 
  font-size: 1rem;
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
  box-shadow: 0 4px 15px rgba(124,92,255,0.25);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(124,92,255,0.35);
}
.btn:focus-visible {
  outline: none;
  border-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 3px rgba(124,92,255,0.35);
}

.btn--ghost { 
  background: transparent; 
  border: 1.5px solid var(--brand); 
  color: var(--brand);
  box-shadow: none;
}

.btn--ghost:hover {
  background: rgba(124,92,255,0.1);
  color: var(--text);
  transform: translateY(-2px);
  border-color: rgba(124,92,255,0.65);
}
.btn--ghost:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124,92,255,0.35);
}

/* Highlight the Full Portfolio button */
#portfolioLink {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #111;
  border: 0;
  font-weight: 700;
  padding: 0.9rem 1.6rem;
  box-shadow: 0 10px 24px rgba(0,224,255,.22), 0 8px 20px rgba(124,92,255,.28);
}
#portfolioLink::after { content: " ↗"; font-weight: 800; }
#portfolioLink:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,224,255,.32), 0 10px 26px rgba(124,92,255,.38);
}

.socials { 
  list-style: none; 
  display: flex; 
  justify-content: center; 
  gap: 1.2rem; 
  margin-top: 2rem; 
  padding: 0; 
}

.socials-lead {
  margin: 1rem 0 .25rem;
  text-align: center;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .2px;
}

.socials a { 
  display: grid; 
  place-items: center; 
  width: 55px; 
  height: 55px; 
  border-radius: 50%; 
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); 
  color: #fff; 
  font-size: 1.4rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(124,92,255,0.3);
}

.socials a:hover {
  transform: translateY(-3px) scale(1.1);
  box-shadow: 0 8px 25px rgba(124,92,255,0.5);
}

/* ---------------- Projects ---------------- */
.section { padding: var(--space-section) 1rem; }
.projects-box {
  margin-inline: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
  width: min(95%, 960px);
  padding: 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: none;
}
#projects h2 {
  text-align: center;
  font-size: var(--fs-h2);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}
#projects h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  margin: 0.5rem auto 1.5rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  border-radius: 2px;
  box-shadow: 0 0 12px rgba(124,92,255,0.7), 0 0 20px rgba(0,224,255,0.5);
}

/* Search */
#searchInput {
  display: block;
  margin: 0 auto 2rem;
  width: min(90%, 420px);
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  color: var(--text);
  font-size: 1rem;
  outline: none;
  box-shadow: 0 0 8px rgba(124, 92, 255, 0.4);
  transition: border 0.2s ease, box-shadow 0.2s ease;
  background-image: url("https://cdn-icons-png.flaticon.com/512/622/622669.png");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: 14px center;
}
#searchInput:focus {
  border-color: var(--brand);
  box-shadow: 0 0 16px rgba(124, 92, 255, 0.8),
              0 0 24px rgba(0,224,255,0.6);
}

/* Grid + Cards */
.grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
/* --- Project Cards --- */
.card {
  text-align: left;
  padding: 1rem;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--panel-border);
  transition: transform 0.15s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.card h3 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text);
}

.project-desc { color: var(--muted); margin: 0 0 .75rem; line-height: 1.5; }
.project-meta { display: flex; flex-wrap: wrap; gap: .4rem .6rem; margin: 0 0 .9rem; }
.badge { display: inline-block; padding: .2rem .5rem; border-radius: 999px; font-size: .8rem; border: 1px solid var(--panel-border); color: var(--text); }
.badge--muted { color: var(--muted); }
.badge--lang { background: rgba(255,255,255,0.04); }

.card a.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  text-decoration: none;
  box-shadow: 0 0 8px rgba(124, 92, 255, 0.4);
  transition: transform 0.2s ease, box-shadow 0.3s ease;
}

.card a.btn:hover { transform: translateY(-2px); }

/* Card hover effect */
.card:hover {
  transform: translateY(-4px);
  border-color: #3d444d;
}

/* ---------------- Contact Section ---------------- */
.contact-content {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.contact-content h2 {
  font-size: var(--fs-h2);
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

.contact-subtitle {
  font-size: 1.1rem;
  color: #bbb;
  margin-bottom: 2rem;
  line-height: 1.6;
}

.btn--contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  transition: all 0.3s ease;
}

.btn--contact:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(124,92,255,0.4);
}

.contact-info {
  margin-top: 1rem;
}

.contact-email {
  font-size: 1rem;
  color: #999;
  font-family: 'Courier New', monospace;
  background: rgba(255,255,255,0.05);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
}

/* ---------------- Footer ---------------- */
.site-footer {
  padding: 1rem;
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--panel-border);
}

/* --- Keep intro text safely above particles --- */
.about-container {
  position: relative;
  z-index: 3;            /* text & photo above icons */
}
.code-particles {
  z-index: 1;            /* icons behind */
}

/* Optional readability boost on busy backgrounds */
.about-top h1,
.about-top p {
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

/* ---------- MOBILE FIXES: <= 600px ---------- */
@media (max-width: 600px) {
  /* Wrap social icons to multiple centered rows on narrow screens */
  .socials {
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem 1rem;
  }
  .socials li { flex: 0 0 auto; }
  .socials a { width: 48px; height: 48px; font-size: 1.2rem; }
  /* Make icons smaller and reduce count */
  .code-particles i {
    font-size: 1.8rem;       /* match desktop size on mobile */
    opacity: 0.7;
    animation-duration: 16s; /* a bit calmer on mobile */
  }
  .about-top .code-particles i { font-size: 3rem; }  /* match desktop size on mobile */

  /* Hide extra icons — keep only the first 8 (enough to feel lively) */
  .code-particles i:nth-child(n+9) {
    display: none !important;
  }

  /* Reposition the first 8 to avoid the center "no-fly zone"
     (keeps area around the name/about text clear) */
  .code-particles i:nth-child(1)  { top: 4%;  left: 6%;   }
  .code-particles i:nth-child(2)  { top: 8%;  right: 6%;  }
  .code-particles i:nth-child(3)  { top: 22%; left: 4%;   }
  .code-particles i:nth-child(4)  { top: 24%; right: 6%;  }

  /* skip the middle vertically to protect the text block */
  .code-particles i:nth-child(5)  { bottom: 28%; left: 8%; }
  .code-particles i:nth-child(6)  { bottom: 26%; right: 8%; }
  .code-particles i:nth-child(7)  { bottom: 10%; left: 12%; }
  .code-particles i:nth-child(8)  { bottom: 8%;  right: 12%; }

  /* Extra safety: a subtle vignette behind the center text area */
  .about-top::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(60% 38% at 50% 36%,
        rgba(18,21,29,0.55) 0%,
        rgba(18,21,29,0.35) 50%,
        transparent 70%);
    pointer-events: none;
    z-index: 2; /* sits between icons (1) and text (3) */
  }
}

/* ---------- TABLET TUNE: 601px–900px ---------- */
@media (min-width: 601px) and (max-width: 900px) {
  .code-particles i { font-size: 1.5rem; }
  /* Hide some, keep 12 for balance */
  .code-particles i:nth-child(n+13) { display: none !important; }

  /* Edge-biased layout to keep the middle clearer */
  .code-particles i:nth-child(1)  { top: 5%;  left: 8%;  }
  .code-particles i:nth-child(2)  { top: 10%; right: 10%; }
  .code-particles i:nth-child(3)  { top: 28%; left: 6%;  }
  .code-particles i:nth-child(4)  { top: 30%; right: 8%; }
  .code-particles i:nth-child(5)  { top: 52%; left: 10%; }
  .code-particles i:nth-child(6)  { top: 56%; right: 10%; }
  .code-particles i:nth-child(7)  { bottom: 24%; left: 10%; }
  .code-particles i:nth-child(8)  { bottom: 22%; right: 12%; }
  .code-particles i:nth-child(9)  { bottom: 10%; left: 14%; }
  .code-particles i:nth-child(10) { bottom: 8%;  right: 14%; }
  .code-particles i:nth-child(11) { top: 16%; left: 28%; }
  .code-particles i:nth-child(12) { top: 16%; right: 28%; }
}

/* Bigger avatar on small phones */
@media (max-width: 600px) {
  .profile-pic {
    /* scales with screen, but never too huge */
    width: clamp(180px, 52vw, 200px);
    height: clamp(180px, 52vw, 200px);
    margin-top: 5rem; /* keep your spacing */
  }
}

/* Extra bump for Pixel/large phones (~360–430px wide) */
@media (min-width: 360px) and (max-width: 430px) {
  .profile-pic {
    /* Pixel 6 Pro (412px) -> ~247px */
    width: clamp(180px, 60vw, 180px);
    height: clamp(180px, 60vw, 180px);
  }
}
/* --- Individual floating animations --- */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@keyframes floatLeftRight {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(18px); }
}
@keyframes floatDiagonal {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(14px, -14px); }
}
@keyframes floatWobble {
  0%, 100% { transform: rotate(0deg) translate(0,0); }
  25% { transform: rotate(6deg) translateY(-10px); }
  75% { transform: rotate(-6deg) translateY(10px); }
}

/* Reset icons so they don’t all share the same */
.code-particles i {
  position: absolute;
  font-size: 2rem;
  opacity: 0.8;
}

/* Assign different animations */
.code-particles i:nth-child(1)  { animation: floatUpDown 6s ease-in-out infinite; }
.code-particles i:nth-child(2)  { animation: floatLeftRight 7s ease-in-out infinite; }
.code-particles i:nth-child(3)  { animation: floatDiagonal 8s ease-in-out infinite; }
.code-particles i:nth-child(4)  { animation: floatWobble 9s ease-in-out infinite; }
.code-particles i:nth-child(5)  { animation: floatUpDown 7s ease-in-out infinite reverse; }
.code-particles i:nth-child(6)  { animation: floatLeftRight 6s ease-in-out infinite reverse; }
.code-particles i:nth-child(7)  { animation: floatDiagonal 10s ease-in-out infinite reverse; }
.code-particles i:nth-child(8)  { animation: floatWobble 8s ease-in-out infinite reverse; }
/* ...continue pattern for remaining icons */

/* --- University Journey Timeline & Table --- */
.timeline {
  border-left: 3px solid var(--brand);
  margin: 2rem auto;
  padding-left: 1rem;
  max-width: 640px;
}
.timeline-item {
  margin: 1.5rem 0;
  padding-left: 1rem;
  position: relative;
}
.timeline-item::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 0.6rem;
  width: 15px;
  height: 15px;
  background: var(--brand);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(124,92,255,0.7), 0 0 20px rgba(0,224,255,0.5);
}
.course-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
  font-size: 0.9rem;
}
.course-table th,
.course-table td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
  text-align: center;
}
.course-table th {
  background: var(--surface);
  font-weight: 600;
}
.course-table tr:nth-child(even) {
  background: rgba(255,255,255,0.03);
}

/* Journey Cards */
.journey-card {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.journey-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.sgpa-badge {
  background: var(--brand);
  color: #fff;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-weight: 600;
}

/* Enhanced Table Styling */
.course-table.neat {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
}

.course-table.neat th {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 1rem 0.8rem;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.course-table.neat td {
  padding: 0.8rem;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.course-table.neat td.course-title {
  text-align: left;
  font-weight: 600;
  color: #e0e0e0;
}

.course-table.neat tr:nth-child(even) {
  background: rgba(255,255,255,0.03);
}

.course-table.neat tr:hover {
  background: rgba(124,92,255,0.1);
  transform: scale(1.01);
  transition: all 0.2s ease;
}

.course-table.neat tfoot td {
  background: linear-gradient(135deg, rgba(124,92,255,0.15), rgba(0,224,255,0.1));
  font-weight: 700;
  color: #fff;
  text-align: center;
  padding: 1rem 0.8rem;
  border-top: 2px solid var(--brand);
}

/* Expandable result styles */
.toggle-result {
  margin-top: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}
.toggle-result:hover {
  background: #5e46c6;
}
.result-table.hidden {
  display: none;
  margin-top: 1rem;
}

/* --- Beautiful Journey CTA on home --- */
.hero__cta-row {
  margin-top: 0.9rem;
  display: flex;
  justify-content: center;
}
.btn--journey {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(135deg, #7c5cff, #00e0ff);
  color: #111;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0,224,255,.22), 0 6px 18px rgba(124,92,255,.3);
  transition: transform .15s ease, box-shadow .3s ease;
}
.btn--journey:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,224,255,.35), 0 8px 26px rgba(124,92,255,.45); }

/* Contact button refinement */
.btn--contact {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border: 1px solid transparent;
}
.btn--contact:hover { box-shadow: 0 8px 22px rgba(124,92,255,0.35); transform: translateY(-2px); }
.btn--contact:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(124,92,255,0.35); }

/* Resume button variant */
.btn--resume { background: #2ea043; border-color: rgba(46,160,67,.5); }
.btn--resume:hover { background: #2a9440; box-shadow: 0 8px 20px rgba(46,160,67,.25); }

/* Skills */
.skills-box {
  margin-inline: auto;
  width: min(90%, 960px);
  padding: 1rem;
  border: 1px solid var(--panel-border);
  border-radius: 8px;
  background: var(--panel);
}
.skills-box h2 { 
  text-align: center; 
  font-size: var(--fs-h2);
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.skills-list { 
  display: flex; flex-wrap: wrap; 
  justify-content: center; gap: .6rem; 
  list-style: none; padding: 0; margin: 0; 
}
.skills-list li { 
  padding: .45rem .8rem; 
  border: 1px solid var(--panel-border);
  border-radius: 999px; 
  background: rgba(255,255,255,0.04);
}

/* Contact form */
.contact-form { margin-top: 1rem; display: grid; gap: .8rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.contact-form input, .contact-form textarea {
  width: 100%;
  padding: .7rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--panel-border);
  background: var(--bg);
  color: var(--text);
}
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(124,92,255,.25); }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }

/* --- Journey improvements: SGPA badge, responsive table, meaningful path --- */
.milestone-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.sgpa-badge {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 
    0 0 15px rgba(124,92,255,0.6),
    0 0 30px rgba(0,224,255,0.3);
  border: 1px solid rgba(255,255,255,0.2);
  animation: badgeGlow 2s ease-in-out infinite alternate;
  position: relative;
  overflow: hidden;
}

.sgpa-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: badgeShine 3s ease-in-out infinite;
}

@keyframes badgeGlow {
  0% { 
    box-shadow: 
      0 0 15px rgba(124,92,255,0.6),
      0 0 30px rgba(0,224,255,0.3);
  }
  100% { 
    box-shadow: 
      0 0 25px rgba(124,92,255,0.8),
      0 0 50px rgba(0,224,255,0.5);
  }
}

@keyframes badgeShine {
  0% { left: -100%; }
  50% { left: 100%; }
  100% { left: 100%; }
}

/* More meaningful animated path with step dots */
#journeyTimeline {
  position: relative;
  margin: 2rem auto;
  padding-left: 2.2rem;
  border-left: 0; /* replace with custom gradient line */
  max-width: 900px;
}

/* Enhanced animated path with flowing gradient */
#journeyTimeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(
    180deg, 
    rgba(124,92,255,1) 0%,
    rgba(0,224,255,0.8) 25%,
    rgba(255,61,181,0.6) 50%,
    rgba(0,224,255,0.8) 75%,
    rgba(124,92,255,1) 100%
  );
  background-size: 100% 200%;
  animation: pathFlow 8s ease-in-out infinite;
  box-shadow: 
    0 0 20px rgba(124,92,255,0.6),
    0 0 40px rgba(0,224,255,0.4),
    inset 0 0 10px rgba(255,255,255,0.1);
  border-radius: 2px;
}

@keyframes pathFlow {
  0% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}

/* Enhanced step dots on the path */
.milestone::before {
  content: attr(data-step);
  position: absolute;
  left: -2px;
  top: 0;
  transform: translate(-50%, 0);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
  color: #fff;
  border: 3px solid var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .9rem;
  font-weight: 700;
  box-shadow: 
    0 0 20px rgba(124,92,255,0.7),
    0 0 40px rgba(0,224,255,0.4),
    inset 0 2px 4px rgba(255,255,255,0.2);
  animation: stepPulse 3s ease-in-out infinite;
  z-index: 2;
}

@keyframes stepPulse {
  0%, 100% { 
    transform: translate(-50%, 0) scale(1);
    box-shadow: 
      0 0 20px rgba(124,92,255,0.7),
      0 0 40px rgba(0,224,255,0.4),
      inset 0 2px 4px rgba(255,255,255,0.2);
  }
  50% { 
    transform: translate(-50%, 0) scale(1.1);
    box-shadow: 
      0 0 30px rgba(124,92,255,1),
      0 0 60px rgba(0,224,255,0.6),
      inset 0 2px 4px rgba(255,255,255,0.3);
  }
}

/* Enhanced icon circle */
.milestone-icon {
  position: absolute;
  left: -42px;
  top: 40px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  font-size: 1.2rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 25px rgba(124,92,255,0.8),
    0 0 50px rgba(0,224,255,0.4),
    inset 0 2px 4px rgba(255,255,255,0.3);
  animation: iconFloat 4s ease-in-out infinite;
  z-index: 3;
}

@keyframes iconFloat {
  0%, 100% { 
    transform: translateY(0) rotate(0deg);
    box-shadow: 
      0 0 25px rgba(124,92,255,0.8),
      0 0 50px rgba(0,224,255,0.4),
      inset 0 2px 4px rgba(255,255,255,0.3);
  }
  50% { 
    transform: translateY(-8px) rotate(5deg);
    box-shadow: 
      0 0 35px rgba(124,92,255,1),
      0 0 70px rgba(0,224,255,0.6),
      inset 0 2px 4px rgba(255,255,255,0.4);
  }
}

/* Enhanced card and responsive table inside milestone */
.milestone {
  position: relative;
  margin: 2rem 0 3rem;
  padding-left: 3.2rem;
  opacity: 0;
  transform: translateX(50px);
  animation: slideInMilestone 0.8s ease-out forwards;
}

.milestone:nth-child(1) { animation-delay: 0.2s; }
.milestone:nth-child(2) { animation-delay: 0.4s; }
.milestone:nth-child(3) { animation-delay: 0.6s; }
.milestone:nth-child(4) { animation-delay: 0.8s; }
.milestone:nth-child(5) { animation-delay: 1.0s; }
.milestone:nth-child(6) { animation-delay: 1.2s; }
.milestone:nth-child(7) { animation-delay: 1.4s; }

@keyframes slideInMilestone {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.milestone-content {
  background: var(--panel);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: none;
  border: 1px solid var(--panel-border);
  transition: transform 0.2s ease;
  position: relative;
  overflow: hidden;
}

.milestone-content::before { display: none; }

.milestone-content:hover { transform: translateY(-2px); }
.milestone-date { 
  font-size: .95rem; 
  color: #bbb; 
  display: inline-block; 
  margin: .25rem 0 .6rem; 
  font-weight: 600;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(124,92,255,0.5);
}

.milestone-content h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  background: linear-gradient(135deg, #fff, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.milestone-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #ddd;
  margin: 0.5rem 0 1rem 0;
}

/* Live "Ongoing" text styling */
.ongoing-text {
  background: linear-gradient(45deg, #00e0ff, #ff3db5, #7c5cff, #00e0ff);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ongoingPulse 2s ease-in-out infinite, ongoingGradient 3s ease infinite;
  font-weight: 900;
  text-shadow: 0 0 20px rgba(0,224,255,0.6);
  position: relative;
  display: inline-block;
}

.ongoing-text::before {
  content: "●";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  color: #00ff00;
  font-size: 0.8rem;
  animation: liveDot 1.5s ease-in-out infinite;
}

@keyframes ongoingPulse {
  0%, 100% { 
    transform: scale(1);
    filter: brightness(1);
  }
  50% { 
    transform: scale(1.05);
    filter: brightness(1.2);
  }
}

@keyframes ongoingGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes liveDot {
  0%, 100% { 
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% { 
    opacity: 0.3;
    transform: translateY(-50%) scale(1.2);
  }
}

/* Enhanced expandable panel styles */
.result-wrapper { 
  margin-top: 1rem; 
  position: relative;
}

.toggle-result {
  margin-top: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: none;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all .3s ease;
  box-shadow: 
    0 6px 20px rgba(124,92,255,0.4),
    0 0 15px rgba(0,224,255,0.2);
  position: relative;
  overflow: hidden;
}

.toggle-result::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
}

.toggle-result:hover::before {
  left: 100%;
}

.toggle-result:hover { 
  transform: translateY(-2px); 
  background: linear-gradient(135deg, #5e46c6, #00b8d4);
  box-shadow: 
    0 8px 25px rgba(124,92,255,0.6),
    0 0 20px rgba(0,224,255,0.4);
}

.result-table { margin-top: .8rem; }
.result-table.hidden { display: none; }

/* Make result table usable on phones */
.milestone .course-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .milestone-content { padding: .9rem; }
  .milestone .course-table th, .milestone .course-table td { font-size: .85rem; padding: .35rem .45rem; }
}
/* Keep result table inside the container */
.result-table {
  margin-top: .8rem;
  overflow-x: auto;
}
.result-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}
/* Eye-catching Journey heading */
#journey h2 {
  font-size: 2.5rem;
  text-align: center;
  font-weight: 800;
  background: linear-gradient(90deg, #7c5cff, #00e0ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: 1.2px;
  margin-bottom: 0.8rem;
  text-shadow: 0 0 20px rgba(124,92,255,0.7), 0 0 40px rgba(0,224,255,0.5);
  animation: glowPulse 3s ease-in-out infinite;
}

#journey p {
  text-align: center;
  font-size: 1.1rem;
  color: #bbb;
  margin-bottom: 2rem;
}

/* Subtle glow animation */
@keyframes glowPulse {
  0% { text-shadow: 0 0 20px rgba(124,92,255,0.7), 0 0 40px rgba(0,224,255,0.5); }
  50% { text-shadow: 0 0 30px rgba(124,92,255,1), 0 0 60px rgba(0,224,255,0.8); }
  100% { text-shadow: 0 0 20px rgba(124,92,255,0.7), 0 0 40px rgba(0,224,255,0.5); }
}
/* --- Journey Page Header --- */
/* --- Ultra Eye-Catching Journey Heading --- */
.journey-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 4rem;
  text-align: center;
  position: relative;
  padding: 2rem 1rem;
  background: radial-gradient(ellipse at center, rgba(124,92,255,0.1) 0%, transparent 70%);
  border-radius: 20px;
  overflow: hidden;
}

.journey-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 30%, rgba(0,224,255,0.05) 50%, transparent 70%);
  animation: shimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.journey-logo {
  width: 110px;
  height: auto;
  filter: drop-shadow(0 0 20px rgba(124,92,255,0.8)) drop-shadow(0 0 40px rgba(0,224,255,0.4));
  transition: transform 0.3s ease;
}

.journey-logo:hover {
  transform: scale(1.1) rotate(5deg);
}

.journey-title h2 {
  font-size: 3.5rem;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(
    45deg,
    #7c5cff 0%,
    #00e0ff 25%,
    #ff3db5 50%,
    #00e0ff 75%,
    #7c5cff 100%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientFlow 4s ease infinite, textGlow 2s ease-in-out infinite alternate;
  letter-spacing: 3px;
  margin: 0;
  position: relative;
  text-shadow: 0 0 30px rgba(124,92,255,0.5);
  line-height: 1.1;
}

.journey-title h2::before {
  content: "🎓";
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  animation: iconBounce 2s ease-in-out infinite;
}

.journey-title h2::after {
  content: "🚀";
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  animation: iconBounce 2s ease-in-out infinite reverse;
}

@keyframes iconBounce {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50% { transform: translateY(-50%) scale(1.2); }
}

.journey-title h2::after { content: none; }

@keyframes underlineGlow {
  0%, 100% { 
    box-shadow: 
      0 0 20px rgba(0,224,255,0.8),
      0 0 40px rgba(255,61,181,0.6);
  }
  50% { 
    box-shadow: 
      0 0 30px rgba(0,224,255,1),
      0 0 60px rgba(255,61,181,0.8);
  }
}

@keyframes textGlow {
  0% { 
    text-shadow: 0 0 30px rgba(124,92,255,0.5);
    filter: brightness(1);
  }
  100% { 
    text-shadow: 0 0 50px rgba(124,92,255,0.8), 0 0 80px rgba(0,224,255,0.4);
    filter: brightness(1.1);
  }
}

.journey-title p {
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 2px;
  margin-top: 1.5rem;
  text-shadow: 
    0 0 15px rgba(0,224,255,0.8), 
    0 0 25px rgba(255,61,181,0.6),
    0 2px 4px rgba(0,0,0,0.3);
  font-family: "Poppins", sans-serif;
  position: relative;
  animation: subtitlePulse 3s ease-in-out infinite;
}

@keyframes subtitlePulse {
  0%, 100% { 
    transform: scale(1);
    text-shadow: 
      0 0 15px rgba(0,224,255,0.8), 
      0 0 25px rgba(255,61,181,0.6),
      0 2px 4px rgba(0,0,0,0.3);
  }
  50% { 
    transform: scale(1.02);
    text-shadow: 
      0 0 25px rgba(0,224,255,1), 
      0 0 40px rgba(255,61,181,0.8),
      0 2px 4px rgba(0,0,0,0.3);
  }
}

/* Gradient flowing animation */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Mobile responsiveness for journey header */
@media (max-width: 768px) {
  .journey-title h2 {
    font-size: 2.5rem;
    letter-spacing: 2px;
  }
  
  .journey-title h2::before,
  .journey-title h2::after {
    display: none; /* Hide emojis on mobile for cleaner look */
  }
  
  .journey-title p {
    font-size: 1.1rem;
    letter-spacing: 1px;
  }
  
  .journey-logo {
    width: 90px;
  }
  
  .journey-header {
    padding: 1.5rem 1rem;
    margin-bottom: 3rem;
  }
}

@media (max-width: 480px) {
  .journey-title h2 {
    font-size: 2rem;
    letter-spacing: 1px;
  }
  
  .journey-title p {
    font-size: 1rem;
  }
  
  .journey-logo {
    width: 80px;
  }
}
/* =====================
   ⚡ Performance Helpers
   ===================== */

/* Avoid layout/paint cost until scrolled into view */
.section, .projects-box, .about-top, .card {
  content-visibility: auto;
  contain-intrinsic-size: 600px 800px; /* fallback size to prevent jumps */
}

/* Prefer GPU-friendly transforms only; tone down super heavy shadows on mobile */
@media (max-width: 600px) {
  .card, .projects-box, .about-top, .milestone-content {
    box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  }
}

/* Respect user's reduced motion setting: pause heavy animations */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  body { animation: none !important; }
  body::before, body::after { animation: none !important; }
  .code-particles i { animation: none !important; }
  .journey-title h2 { animation: none !important; }
  #journey h2 { animation: none !important; }
}

/* Lower baseline animation workload slightly for all devices */
body { animation-duration: 45s; }            /* was ~30s */
.code-particles i { animation-duration: calc(1.15 * 8s); } /* slower, lighter */

/* --- (trimmed) end smoothness helpers --- */
 Promote hover elements to their own layers and hint transforms */
.card,
.card a.btn,
.btn,
.toggle-result {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Pause animations when the section is off-screen (via script) */
.about-top .code-particles,
#journeyTimeline,
#journey h2,
.journey-title h2 {
  animation-play-state: paused;
}
.about-top .code-particles.animating,
#journeyTimeline.animating,
#journey h2.animating,
.journey-title h2.animating {
  animation-play-state: running;
}

/* Tighten hover shadows slightly (same look, cheaper paint) */
.card:hover {
  box-shadow:
    0 8px 20px rgba(0,0,0,0.32),
    0 0 16px rgba(124,92,255,0.28);
}

/* Projects grid: avoid reflow spikes during hover animations */
#projects .grid { contain: layout paint; }

/* -------- Low-performance mode (auto via script) -------- */

/* Tone down the heaviest glow/pulse effects in lowperf */

/* Extra mobile protection: fewer floating icons when viewport is short */
@media (max-height: 700px) {
  .code-particles i:nth-child(n+13) { display: none !important; }
}

/* Journey result table containment (safety) */
.milestone .result-table {
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* --- Glass card for journey header (non-breaking) --- */
.glass {
  background: var(--panel);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--panel-border);
  box-shadow: none;
}

/* Low-perf: disable expensive filters/shadows on Journey */

/* base */
#journeyTimeline::before { z-index: 0; position: absolute; }         /* path line */

.milestone { position: relative; }                                   /* ensure a stacking context */
.milestone::before { z-index: 1; position: absolute; }               /* numbered step dot */
.milestone-icon { z-index: 2; position: absolute; }                  /* FA circle icon stays on top */
.milestone-content { position: relative; z-index: 1; }               /* card above path line */
/* 1) Undo content-visibility on timeline/milestones so abs-pos icons paint reliably */
#journeyTimeline,
#journeyTimeline .milestone {
  content-visibility: visible;           /* override perf helper for this block */
  contain-intrinsic-size: auto;          /* cancel the placeholder size */
  overflow: visible;                     /* allow icon to sit outside the left padding */
}

/* 2) Explicit stacking order: path line lowest, step dot above, card above, icon on top */
#journeyTimeline { position: relative; z-index: 0; }
#journeyTimeline::before { position: absolute; z-index: 0; }  /* vertical path */
.milestone { position: relative; z-index: 0; }
.milestone::before { position: absolute; z-index: 1; }        /* numbered step dot */
.milestone-content { position: relative; z-index: 1; }
.milestone-icon { position: absolute; z-index: 3; pointer-events: none; }

/* 3) Ensure icon sits visually over the path at the expected spot */
.milestone-icon {
  left: -36px;        /* keep your existing layout */
  top: 34px;
}

/* 4) Safety: if low-perf mode is on, keep the icon still prominent (no style changes) */

/* Journey Progress Indicator */
.journey-progress {
  margin: 2rem auto 3rem;
  max-width: 900px;
  padding: 0 1rem;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.3);
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), #ff3db5);
  border-radius: 4px;
  width: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  will-change: transform;
  transition: transform 0.12s ease-out;
  box-shadow: 0 0 10px rgba(124,92,255,0.5);
}

.progress-text {
  text-align: center;
  color: #bbb;
  font-weight: 600;
  font-size: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  align-items: center;
}

.progress-label {
  color: #ddd;
  font-size: 1rem;
  font-weight: 700;
}

.progress-percentage {
  color: var(--brand);
  font-weight: 700;
  font-size: 1.2rem;
  text-shadow: 0 0 10px rgba(124,92,255,0.5);
}

.progress-detail {
  color: #aaa;
  font-size: 0.85rem;
  font-weight: 500;
}

/* --- Journey stacking: path < dot < card < icon --- */
#journeyTimeline { position: relative; z-index: 0; }
#journeyTimeline::before { position: absolute; z-index: 0; }
.milestone { position: relative; z-index: 0; }
.milestone::before { position: absolute; z-index: 1; }
.milestone-content { position: relative; z-index: 1; }
.milestone-icon { position: absolute; z-index: 3; pointer-events: none; }