/* =========================================================
   Debarghya Sengupta — Portfolio Design System
   Apple-style dark glassmorphism
   ========================================================= */

:root {
  --bg: #000000;
  --fg: #ffffff;
  --muted: rgba(255, 255, 255, 0.62);
  --muted-2: rgba(255, 255, 255, 0.42);
  --muted-3: rgba(255, 255, 255, 0.22);

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-strong: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-strong: rgba(255, 255, 255, 0.14);

  --accent: #ffffff;
  --accent-soft: rgba(255, 255, 255, 0.08);

  /* ---- Title cyan palette (from supplied colour swatch) ---- */
  --title-c-deep:  #06aed5;  /* deepest stripe   */
  --title-c-mid:   #4ec3d6;
  --title-c-light: #7cd8e5;
  --title-c-pale:  #b8e5ef;
  --title-c-soft:  #e0f4f9;  /* near-white pale  */

  /* ---- Aurora amber accent (complements the cyan, used for
         credentials / achievement / warm CTAs) ---- */
  --accent-amber:      #fbbf24;
  --accent-amber-soft: #fde68a;
  --accent-amber-deep: #b45309;
  --accent-amber-glow: rgba(251, 191, 36, 0.35);

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 30px 60px -30px rgba(0, 0, 0, 0.6);

  --container: 1180px;
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  position: relative;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

::selection {
  background: rgba(255, 255, 255, 0.18);
}

/* ---------- Animated background ---------- */
.bg-rays {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-rays::before {
  content: "";
  position: absolute;
  top: -40%;
  left: 50%;
  width: 140vmax;
  height: 140vmax;
  transform: translateX(-50%);
  background: conic-gradient(
    from 200deg at 50% 0%,
    transparent 0deg,
    rgba(255, 255, 255, 0.05) 30deg,
    rgba(180, 200, 255, 0.08) 60deg,
    rgba(255, 255, 255, 0.04) 90deg,
    transparent 130deg,
    transparent 230deg,
    rgba(255, 255, 255, 0.04) 270deg,
    rgba(180, 200, 255, 0.08) 300deg,
    rgba(255, 255, 255, 0.05) 330deg,
    transparent 360deg
  );
  filter: blur(60px);
  animation: rays-rotate 60s linear infinite;
  opacity: 0.9;
}

.bg-rays::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
      ellipse 80% 60% at 50% -10%,
      rgba(255, 255, 255, 0.18) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 40% at 50% 100%,
      rgba(0, 0, 0, 0.9) 0%,
      transparent 70%
    );
  mix-blend-mode: screen;
}

@keyframes rays-rotate {
  from { transform: translateX(-50%) rotate(0deg); }
  to   { transform: translateX(-50%) rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .bg-rays::before { animation: none; }
}

/* page content sits above the background */
.page-shell {
  position: relative;
  z-index: 1;
}

main {
  display: block;
  padding-top: 96px; /* room for fixed navbar */
  padding-bottom: 48px;
}

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

p { margin: 0; color: var(--muted); }
p.lead { color: rgba(255, 255, 255, 0.78); font-size: 1.05rem; }

.section-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 6px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
}

.section-heading {
  font-size: clamp(2.2rem, 5.2vw, 3.8rem);
  font-weight: 600;
  padding-bottom:10px !important;
  letter-spacing: -0.04em;
  line-height: 1.05;
  background: linear-gradient(
    180deg,
    var(--title-c-soft) 0%,
    var(--title-c-pale) 35%,
    var(--title-c-light) 65%,
    var(--title-c-deep) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin-top: 18px;
}

.section-subhead {
  margin-top: 18px;
  max-width: 720px;
  color: var(--muted);
  font-size: 1.05rem;
}

.gradient-text {
  background: linear-gradient(
    180deg,
    var(--title-c-soft) 0%,
    var(--title-c-pale) 35%,
    var(--title-c-light) 65%,
    var(--title-c-deep) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* Book titles — italic, solid warm amber. Restrained on purpose:
   gradients on small italic runs read messy, and "less, but better"
   is the section's whole tone. */
.book-title {
  font-style: italic;
  font-weight: 500;
  color: var(--accent-amber);
}

/* ---------- Typewriter (hero rotating role) ----------
 * Sized smaller than the name so longer phrases (e.g. "Cloud Computing
 * Lead at MSA GNIT.") fit inside the hero's left column instead of
 * sliding under the profile photo on the right. Also wraps gracefully
 * if a phrase ever exceeds one line.
 */
.typewriter {
  display: inline-block;
  max-width: 100%;
  margin-top: 10px;       /* breathing room under the name line */
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.25;
  min-height: 1.25em;     /* don't collapse when text is empty between phrases */
  overflow-wrap: break-word;
  word-break: normal;
  /* same gradient as .gradient-text — keeps the rotating words on-brand */
  background: linear-gradient(
    180deg,
    var(--title-c-soft) 0%,
    var(--title-c-pale) 35%,
    var(--title-c-light) 65%,
    var(--title-c-deep) 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.tw-cursor {
  display: inline-block;
  margin-left: 3px;
  /* the cursor isn't gradient-clipped — give it a solid mid-tone cyan */
  -webkit-text-fill-color: var(--title-c-mid);
  color: var(--title-c-mid);
  font-weight: 400;
  animation: tw-blink 1.05s step-end infinite;
}

@keyframes tw-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tw-cursor { animation: none; opacity: 0.6; }
}

/* Section wrapper */
section.section {
  padding: 80px 0;
}

section.section + section.section {
  padding-top: 0;
}

.section-head {
  text-align: left;
  margin-bottom: 48px;
}

.section-head.center { text-align: center; }
.section-head.center .section-subhead { margin-left: auto; margin-right: auto; }

/* ---------- Glass primitives ---------- */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.25s ease, transform 0.25s ease,
    background 0.25s ease;
}

.glass-card.is-hoverable:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
  background: var(--glass-bg-strong);
}

.glass-card .card-body {
  padding: 28px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
}
.tag-pill img,
.tag-pill > svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.tag-pill .invert-dark { filter: invert(1) brightness(1.1); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease,
    border-color 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); }

.btn-primary {
  background: #ffffff;
  color: #000000;
  border: 1px solid #ffffff;
}
.btn-primary:hover { opacity: 0.92; }

/* Aurora CTA — soft cyan → amber gradient with a warm glow.
   Used on the hero "Expand the full story" button. */
.btn-aurora {
  background: linear-gradient(
    95deg,
    var(--title-c-pale) 0%,
    var(--title-c-soft) 45%,
    var(--accent-amber-soft) 100%
  );
  color: #0a1929;
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.35) inset,
    0 8px 24px -10px rgba(251, 191, 36, 0.45),
    0 4px 18px -8px rgba(78, 195, 214, 0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease, opacity 0.22s ease;
}
.btn-aurora:hover {
  transform: translateY(-2px);
  opacity: 0.97;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 14px 32px -8px rgba(251, 191, 36, 0.6),
    0 6px 22px -6px rgba(78, 195, 214, 0.45);
}
.btn-aurora svg { color: #0a1929; }

.btn-secondary {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
  border: 1px solid var(--glass-border-strong);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.1); }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  padding: 10px 16px;
}
.btn-ghost:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

.btn-icon {
  width: 40px; height: 40px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  color: var(--muted);
  background: var(--glass-bg);
}
.btn-icon:hover { color: #fff; border-color: var(--glass-border-strong); }

/* ---------- Navbar ---------- */
.nav {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 28px);
  max-width: var(--container);
  z-index: 50;
  background: rgba(8, 8, 8, 0.55);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 0.98rem;
}
.nav-brand img { width: 28px; height: 28px; border-radius: 8px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.92rem;
  color: var(--muted);
  border-radius: 999px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); }
.nav-link.active { color: #fff; background: rgba(255, 255, 255, 0.08); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-search {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  min-width: 180px;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-search:hover { border-color: var(--glass-border-strong); color: #fff; }
.nav-search .kbd {
  margin-left: auto;
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.7rem;
  padding: 2px 6px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  color: var(--muted-2);
}

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  align-items: center; justify-content: center;
}

@media (max-width: 880px) {
  .nav-links, .nav-search { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    padding: 12px;
    background: rgba(8, 8, 8, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
  }
  .nav-mobile-open .nav-link { padding: 12px 14px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 80px 0 60px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 6.5vw, 4.6rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.hero .hero-lede {
  margin-top: 22px;
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 560px;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.hero-photo-wrap {
  position: relative;
  display: flex;
  justify-content: center;

}

.hero-photo {
  width: clamp(220px, 30vw, 320px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-border-strong);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.7),
    0 0 0 6px rgba(255, 255, 255, 0.03);
}

.hero-photo-glow {
  position: absolute;
  inset: -40px;
  background: radial-gradient(
    closest-side,
    rgba(255, 255, 255, 0.18),
    transparent 70%
  );
  filter: blur(20px);
  z-index: -1;
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; text-align: left; }
  .hero-photo-wrap { order: -1; }
}

/* ---------- Stat row ---------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 40px;
}

.stat-row a {
  display: block;
  padding: 18px 20px;
  border-radius: var(--radius-md);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.stat-row a:hover {
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
}
.stat-row .stat-value { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; }
.stat-row .stat-label { font-size: 0.82rem; color: var(--muted-2); margin-top: 4px; }

@media (max-width: 720px) {
  .stat-row { grid-template-columns: 1fr; }
}

/* ---------- About / Quick facts ---------- */
.two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
}
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Skill bars ---------- */
.skill-list { display: flex; flex-direction: column; gap: 18px; }

.skill-item .skill-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.skill-item .skill-name { font-size: 0.95rem; font-weight: 500; color: #fff; }
.skill-item .skill-pct { font-size: 0.85rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }

.skill-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}
.skill-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.6));
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Card grids ---------- */
.card-grid {
  display: grid;
  gap: 20px;
}
.card-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) {
  .card-grid.cols-2, .card-grid.cols-3 { grid-template-columns: 1fr; }
}

/* Managing card */
.managing-card { display: flex; gap: 20px; align-items: flex-start; }
.managing-card .managing-logo {
  width: 64px; height: 64px;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid var(--glass-border-strong);
  flex-shrink: 0;
}
.managing-card h3 { font-size: 1.1rem; }
.managing-card .managing-role {
  font-size: 0.85rem;
  color: var(--muted-2);
  margin-bottom: 8px;
}
.managing-card a.club-link {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 1px;
}
.managing-card a.club-link:hover { border-color: #fff; }
.managing-card p { margin-top: 10px; font-size: 0.92rem; }

/* Certificate card — amber-tinted icon = "achievement" */
.cert-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; }
.cert-card .cert-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent-amber);
  transition: background 0.25s ease, border-color 0.25s ease,
    box-shadow 0.25s ease, color 0.25s ease;
}
.cert-card:hover .cert-icon {
  background: rgba(251, 191, 36, 0.16);
  border-color: var(--accent-amber);
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.10);
  color: #ffd96b;
}
.cert-card .cert-meta { flex: 1; min-width: 0; }
.cert-card .cert-title { font-size: 0.96rem; font-weight: 500; color: #fff; }
.cert-card .cert-issuer { font-size: 0.82rem; color: var(--muted-2); margin-top: 2px; }
.cert-card .cert-arrow {
  color: var(--muted-2);
  transition: color 0.2s ease, transform 0.2s ease;
}
.cert-card:hover .cert-arrow { color: #fff; transform: translateX(4px); }

/* ---------- Project card ---------- */
.project-card { display: flex; flex-direction: column; gap: 14px; }
.project-card .card-body { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.project-card h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
.project-card .project-tagline { color: rgba(255, 255, 255, 0.85); font-size: 0.95rem; }
.project-card .project-desc { color: var(--muted); font-size: 0.92rem; }
.project-card .project-stack {
  font-size: 0.82rem;
  color: var(--muted-2);
  border-top: 1px dashed var(--glass-border);
  padding-top: 14px;
  margin-top: auto;
}
.project-card .project-stack b { color: #fff; font-weight: 500; }
.project-card .project-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.project-card .note {
  font-size: 0.78rem;
  color: var(--accent-amber);
  opacity: 0.92;
}

/* ---------- Skills page ---------- */
.skill-group .skill-group-title {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.skill-group .skill-group-title .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
}
.skill-group .skill-group-desc { color: var(--muted-2); font-size: 0.86rem; margin-top: 4px; }

.tech-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 18px;
}
.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 0.86rem;
  color: rgba(255, 255, 255, 0.85);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.tech-chip:hover { border-color: var(--glass-border-strong); background: rgba(255, 255, 255, 0.07); }
.tech-chip img {
  width: 22px; height: 22px;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.95);
  padding: 2px;
  border-radius: 6px;
}

/* ---------- Footer ---------- */
.footer {
  margin-top: 80px;
  border-top: 1px solid var(--glass-border);
  padding: 60px 0 40px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
}
.footer h4 {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 16px;
}
.footer ul { display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: var(--muted); font-size: 0.92rem; transition: color 0.2s ease; }
.footer ul a:hover { color: #fff; }
.footer-brand p { font-size: 0.92rem; max-width: 380px; }
.footer-brand .footer-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; letter-spacing: -0.02em; margin-bottom: 14px;
}
.footer-brand .footer-logo img { width: 28px; height: 28px; border-radius: 8px; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--glass-border);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--muted-2);
}
.social-row { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 720px) {
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- Command palette ---------- */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 16px 16px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cmdk.is-open { display: flex; animation: fade-in 0.18s ease; }

.cmdk-panel {
  width: 100%;
  max-width: 560px;
  background: rgba(14, 14, 14, 0.86);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border-strong);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8);
  animation: slide-down 0.2s ease;
}

.cmdk-input-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--glass-border);
}
.cmdk-input-wrap svg { color: var(--muted-2); flex-shrink: 0; }
.cmdk-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: #fff;
  font-size: 1rem;
}
.cmdk-input::placeholder { color: var(--muted-2); }

.cmdk-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 8px;
}
.cmdk-group-label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 10px 12px 6px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.86);
  transition: background 0.15s ease;
}
.cmdk-item:hover,
.cmdk-item.is-active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.cmdk-item .cmdk-item-sub { color: var(--muted-2); font-size: 0.78rem; margin-left: auto; }
.cmdk-empty { padding: 28px 16px; text-align: center; color: var(--muted-2); font-size: 0.9rem; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-down {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal.delay-1 { transition-delay: 0.08s; }
.reveal.delay-2 { transition-delay: 0.16s; }
.reveal.delay-3 { transition-delay: 0.24s; }
.reveal.delay-4 { transition-delay: 0.32s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 18px;
  background: rgba(20, 20, 20, 0.92);
  border: 1px solid var(--glass-border-strong);
  border-radius: 999px;
  font-size: 0.86rem;
  color: #fff;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 80;
  pointer-events: none;
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- 404 ---------- */
.notfound {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 24px;
}
.notfound-code {
  font-size: clamp(6rem, 18vw, 12rem);
  font-weight: 600;
  letter-spacing: -0.06em;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}

/* ---------- Utility ---------- */
.mt-0 { margin-top: 0 !important; }
.mt-12 { margin-top: 12px; }
.mt-24 { margin-top: 24px; }
.mt-40 { margin-top: 40px; }

.flex { display: flex; }
.gap-12 { gap: 12px; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }

.divider {
  height: 1px;
  background: var(--glass-border);
  margin: 60px 0;
  border: 0;
}


/* =========================================================
   Tech-stack grid (per-category card with chip pills)
   Inspired by gauravnetes/portfolio
   ========================================================= */

.techstack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

.techstack-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.techstack-card .cat-title {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.techstack-card .cat-title .slash {
  color: var(--muted-2);
  font-weight: 400;
}

.techstack-card .chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tech-chip-v2 {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  transition: transform 0.2s ease, border-color 0.2s ease,
    background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}
.tech-chip-v2:hover {
  border-color: var(--glass-border-strong);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -8px rgba(255, 255, 255, 0.18);
}
.tech-chip-v2 img,
.tech-chip-v2 svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.tech-chip-v2 .invert-dark { filter: invert(1) brightness(1.1); }

/* small inline-SVG fallback icon styling */
.tech-chip-v2 .svg-fallback {
  color: rgba(255, 255, 255, 0.7);
}
.tech-chip-v2:hover .svg-fallback { color: #fff; }

/* =========================================================
   Project video (YouTube iframe / local <video>)
   + Demo toggle button
   ========================================================= */

.project-card .video-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: #000;
  margin-top: 4px;
}

.project-card .video-container iframe,
.project-card .video-container video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

.project-card .video-container[hidden] { display: none; }

.project-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.project-card .header-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  cursor: pointer;
  white-space: nowrap;
}
.btn-pill:hover {
  color: #fff;
  border-color: var(--glass-border-strong);
  background: rgba(255, 255, 255, 0.05);
}

.btn-pill.is-active {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.1);
}

.btn-pill svg {
  flex-shrink: 0;
}



/* =========================================================
   About — story-style section + expand-to-modal
   Inspired by gauravnetes/portfolio About + a fullscreen
   "enlarge" pattern.
   ========================================================= */

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
@media (max-width: 980px) {
  .story-grid { grid-template-columns: 1fr; gap: 36px; }
}

.story-text p {
  font-size: 1.02rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
  margin-bottom: 18px;
}
.story-text p:last-child { margin-bottom: 0; }
.story-text strong { color: #fff; font-weight: 600; }
.story-text em { color: #fff; font-style: italic; }

.story-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Timeline ---------- */
.story-timeline {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

.timeline-title {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
}

.timeline-list { display: flex; flex-direction: column; }

.timeline-year {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 16px;
  position: relative;
  padding-bottom: 24px;
}
.timeline-year::before {
  content: "";
  position: absolute;
  left: 26px;
  top: 22px;
  bottom: 0;
  width: 1px;
  background: var(--glass-border);
}
.timeline-year:last-child { padding-bottom: 0; }
.timeline-year:last-child::before { display: none; }

.year-label {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  padding-top: 2px;
  position: relative;
}
.year-label::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
}

.year-items { display: flex; flex-direction: column; gap: 8px; }
.year-items li {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 12px;
  border-left: 2px solid var(--glass-border);
  transition: border-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}
.year-items li:hover {
  border-left-color: rgba(255, 255, 255, 0.6);
  color: #fff;
  padding-left: 16px;
}

/* ---------- About modal (fullscreen "enlarge") ---------- */
.about-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow-y: auto;
}
.about-modal.is-open {
  display: flex;
  animation: fade-in 0.22s ease;
}

.about-modal-panel {
  width: 100%;
  max-width: 1080px;
  margin: 32px auto;
  background: rgba(14, 14, 14, 0.86);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border-strong);
  border-radius: 24px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.85);
  position: relative;
  animation: slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  z-index: 2;
}
.about-modal-close:hover {
  color: #fff;
  border-color: var(--glass-border-strong);
  background: rgba(255, 255, 255, 0.08);
}

.about-modal-head { padding: 48px 48px 0; }
.about-modal-body { padding: 32px 48px 48px; }
@media (max-width: 720px) {
  .about-modal-head { padding: 40px 24px 0; }
  .about-modal-body { padding: 24px 24px 36px; }
}

.off-topic-wrap { margin-top: 32px; }
.off-topic-content {
  margin-top: 16px;
  padding-left: 16px;
  border-left: 2px solid var(--glass-border-strong);
  animation: fade-in 0.25s ease;
}
.off-topic-content p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 14px;
}
.off-topic-content code {
  font-family: "SF Mono", ui-monospace, Menlo, monospace;
  font-size: 0.82rem;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  border-radius: 6px;
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* lock body scroll when modal open */
body.is-modal-open { overflow: hidden; }

/* =========================================================
   GitHub contribution graph (last 6 months)
   ========================================================= */

.github-graph-card {
  width: 100%;
  min-height: 180px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gg-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
}
.gg-total {
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
}
.gg-range {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 0.78rem;
  color: var(--muted-2);
  letter-spacing: 0.04em;
}

.gg-svg-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 4px;
  min-height: 220px;
}
.gg-svg-wrap svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}
.gg-svg-wrap .gg-label {
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10px;
  fill: var(--muted-2);
}

.gg-loading,
.gg-error {
  font-size: 0.92rem;
  color: var(--muted);
  padding: 24px 4px;
}
.gg-error a { color: #fff; border-bottom: 1px solid rgba(255,255,255,0.3); }
.gg-error a:hover { border-bottom-color: #fff; }

.gg-source {
  font-size: 0.82rem;
  color: var(--muted-2);
}
.gg-source a { color: rgba(255,255,255,0.85); border-bottom: 1px solid var(--glass-border-strong); }
.gg-source a:hover { color: #fff; border-bottom-color: #fff; }



/* =========================================================
   GitHub Activity grid — heatmap (left) + activity graph (right)
   ========================================================= */

.github-grid {
  align-items: stretch;
}
.github-grid > .glass-card {
  display: flex;
  flex-direction: column;
}
.github-grid > .glass-card > .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Card title shared by both GitHub cards */
.github-card-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.98rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}
.github-card-title .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #39d353;
  box-shadow: 0 0 10px rgba(57, 211, 83, 0.6);
}
.github-card-title .github-card-sub {
  font-size: 0.78rem;
  color: var(--muted-2);
  font-weight: 400;
  letter-spacing: 0;
  margin-left: auto;
  font-family: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
}

/* Right-side activity graph (external SVG via <img>) */
.activity-graph-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--glass-border);
  padding: 16px;
}
.activity-graph-img {
  width: 100%;
  height: auto;
  display: block;
  max-width: 100%;
}

/* Stack the two cards on narrow screens */
@media (max-width: 980px) {
  .github-grid { grid-template-columns: 1fr; }
}
































/* =========================================================
   GitHub Section — overflow / clipping fix for mobile
   Paste at the very END of style.css (these must win)
   ========================================================= */

/* 1. The section container itself must never exceed viewport width */
#github {
  overflow: hidden;
  max-width: 100vw;
}

/* 2. Both glass cards in the github grid must clip their children */
.github-grid > .glass-card {
  overflow: hidden;
  /* Prevent the card itself from growing wider than its grid column */
  min-width: 0;
}

/* 3. The heatmap SVG wrapper — clip + touch-scroll, no scrollbar */
.gg-svg-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gg-svg-wrap::-webkit-scrollbar {
  display: none;
}

/* 4. Any SVG rendered inside the heatmap wrapper */
.gg-svg-wrap svg {
  display: block;
  /* Let it scroll rather than squash on mobile */
  max-width: none;
}

/* 5. Activity graph wrapper — hard-clip, no overflow */
.activity-graph-wrap {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* 6. The external activity graph <img> — force it to fit */
.activity-graph-img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain;
}

/* 7. On mobile, reduce card padding so content has more room */
@media (max-width: 640px) {
  .github-grid .glass-card .card-body {
    padding: 20px 16px;
  }

  .activity-graph-wrap {
    padding: 10px;
    min-height: 120px;
  }
}

/* 8. Stack the two cards on mobile (belt + suspenders) */
@media (max-width: 980px) {
  .github-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}