@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700;900&family=Syne:wght@700;800&display=swap');

/* ─── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:        #1a1a1a;
  --fg:        #ffffff;
  --mid:       rgba(255,255,255,0.55);
  --lens-size: 340px;
  --font-display: 'Arial Black', 'Helvetica Neue', Arial, sans-serif;
  --font-ui:      'Helvetica Neue', Helvetica, Arial, sans-serif;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

html, body {
  width: 100%;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
  cursor: crosshair;
}

/* ─── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 48px;
}
.nav-logo {
  text-decoration: none;
  font-family: 'Syne', var(--font-display);
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--fg);
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.logo-char {
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  display: inline-block;
}
.logo-a {
  color: #ffffff;
  -webkit-text-stroke: 1.5px transparent;
}
.logo-slash {
  font-weight: 200;
  opacity: 0.45;
}
.logo-s {
  color: transparent;
  -webkit-text-stroke: 1.5px #ffffff;
}
.nav-logo:hover .logo-a {
  color: transparent;
  -webkit-text-stroke: 1.5px #ffffff;
  transform: translateX(-2px);
}
.nav-logo:hover .logo-s {
  color: #ffffff;
  -webkit-text-stroke: 1.5px transparent;
  transform: translateX(2px);
}
.nav-logo:hover .logo-slash {
  opacity: 1;
  transform: rotate(20deg) scale(1.1);
}

.nav-links {
  display: flex;
  gap: 48px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  opacity: 0.85;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s;
}
.nav-links a::before {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  color: white;
  transition: top 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  white-space: nowrap;
}
.nav-links a span {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover span { transform: translateY(-100%); }
.nav-links a:hover::before { top: 0; }
.nav-links a:hover { opacity: 1; }

.nav-contact {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  border: 1.5px solid white;
  padding: 10px 28px;
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: color 0.4s ease;
}
.nav-contact::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%;
  height: 100%;
  background: white;
  transition: left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.nav-contact:hover::before { left: 0; }
.nav-contact:hover { color: #1a1a1a; }

/* ─── Sticky Menu Bar ───────────────────────────────────────── */
.sticky-menu {
  position: fixed;
  top: 32px;
  right: 32px;
  left: auto;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-20px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
.sticky-menu.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  z-index: 998;
  pointer-events: none;
}
.menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.sticky-menu-active .nav {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: none;
}
.sticky-menu-toggle {
  width: 76px;
  height: 76px;
  background: rgba(26, 26, 26, 0.95);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 1001;
}
.sticky-menu-toggle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.sticky-menu:hover .sticky-menu-toggle {
  background: #0055ff;
  border-color: #0055ff;
  transform: scale(1.05);
}
.sticky-menu:hover .sticky-menu-toggle::before {
  inset: -8px;
  border-color: rgba(255, 255, 255, 0.2);
}
.sticky-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 1px;
}
.sticky-menu-toggle.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.sticky-menu-toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.sticky-menu-toggle.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.sticky-menu-links {
  position: absolute;
  top: 92px;
  right: 0;
  width: auto;
  background: transparent;
  border: none;
  padding: 0;
  list-style: none;
  transform: translateY(-15px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.4s;
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-end;
}
.sticky-menu-links.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.sticky-menu-links li { margin: 0; }
.sticky-menu-links a {
  display: inline-block;
  padding: 8px 0;
  font-family: 'Syne', var(--font-display);
  font-size: clamp(28px, 4.5vh, 48px);
  font-weight: 800;
  letter-spacing: -1.5px;
  text-transform: uppercase;
  color: var(--fg);
  text-decoration: none;
  opacity: 0.7;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-text-stroke: 1.5px transparent;
}
.sticky-menu-links a:hover {
  opacity: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px #ffffff;
  transform: translateX(-10px);
}
.sticky-menu-links a span {
  display: inline-block;
  transition: none !important;
  transform: none !important;
}
.sticky-menu-links a::before { display: none !important; }

/* ─── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.hero-bg {
  position: absolute;
  inset: -60px;
  z-index: 0;
}
.hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: blur(18px) brightness(0.45);
  transform: scale(1);
}
.roles {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 60px;
  z-index: 999;
  pointer-events: none;
}
.roles span {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mid);
}
.glass-lens {
  position: fixed;
  top: 0; left: 0;
  width: var(--lens-size);
  height: var(--lens-size);
  z-index: 10;
  pointer-events: none;
  overflow: hidden;
  will-change: transform;
  outline: 1.5px solid rgba(255,255,255,0.40);
  background: transparent;
  cursor: crosshair;
}
.glass-img {
  position: absolute;
  width: 100vw;
  height: 100vh;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  filter: brightness(0.9);
  transform-origin: top left;
}
.hero-name {
  position: absolute;
  bottom: 0; /* Positioned at the absolute bottom edge like at first */
  left: 0;   /* Positioned at the extreme left as requested */
  z-index: 9999;
  font-family: 'Syne', sans-serif;
  font-size: clamp(60px, 8vw, 110px); /* Scaled down for perfect visibility */
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
@media (prefers-reduced-motion: reduce) { .glass-lens { transition: none; } }
@media (max-width: 768px) {
  html, body { overflow: auto; cursor: crosshair; }
  .glass-lens { display: none; }
  .roles { flex-direction: column; gap: 10px; padding: 0 24px; top: 60%; }
  .hero-name { font-size: clamp(36px, 10vw, 64px); left: 0; bottom: 0; } /* Scaled down, aligned to extreme left and bottom edge */
  .nav { padding: 18px 24px; }
  .nav-links { gap: 20px; }
  .sticky-menu { top: 24px; right: 24px; left: auto; }
  .sticky-menu-toggle { width: 68px; height: 68px; }
  .sticky-menu-toggle span { width: 22px; }
  .sticky-menu-links { top: 80px; right: 0; width: 200px; padding: 16px 0; }
}

/* ─── Loader ────────────────────────────────────────────────── */
.loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0e0e0e;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: loaderFadeOut 0.8s cubic-bezier(0.85, 0, 0.15, 1) 2.0s forwards;
  pointer-events: none;
  overflow: hidden;
}
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  animation: loaderScaleUp 0.8s cubic-bezier(0.85, 0, 0.15, 1) 2.0s forwards;
}
.loader-logo {
  font-family: 'Syne', var(--font-display);
  font-size: clamp(45px, 8vw, 80px);
  font-weight: 800;
  letter-spacing: -3px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  line-height: 1;
}
.loader-char {
  display: inline-block;
  opacity: 0;
}
.loader-a {
  color: #ffffff;
  transform: translateX(-25px) scale(0.95);
  animation: charAssembleA 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.loader-slash {
  font-weight: 200;
  color: #ffffff;
  opacity: 0;
  transform: translateY(15px) rotate(-30deg);
  animation: charAssembleSlash 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}
.loader-s {
  color: transparent;
  -webkit-text-stroke: 1.5px #ffffff;
  transform: translateX(25px) scale(0.95);
  animation: charAssembleS 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
}
.loader-line-container {
  width: 80px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.15);
  overflow: hidden;
  position: relative;
  border-radius: 1px;
  opacity: 0;
  animation: fadeIn 0.4s ease 0.8s forwards;
}
.loader-line {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  position: absolute;
  left: -100%;
  animation: lineScan 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s infinite;
}
.loader-text {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.25em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(8px);
  animation: textReveal 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards;
}
@keyframes charAssembleA {
  0% {
    opacity: 0;
    transform: translateX(-25px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes charAssembleSlash {
  0% {
    opacity: 0;
    transform: translateY(15px) rotate(-30deg);
  }
  100% {
    opacity: 0.45;
    transform: translateY(0) rotate(0deg);
  }
}
@keyframes charAssembleS {
  0% {
    opacity: 0;
    transform: translateX(25px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes textReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes lineScan {
  0% { left: -100%; }
  100% { left: 100%; }
}
@keyframes loaderScaleUp {
  0% {
    transform: scale(1);
    filter: blur(0);
  }
  100% {
    transform: scale(1.35);
    filter: blur(10px);
    opacity: 0;
  }
}
@keyframes loaderFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}
.hero-bg-img {
  opacity: 0;
  filter: blur(18px) brightness(0.55);
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.2s forwards;
}
.roles {
  opacity: 0;
  animation: fadeUpClean 0.9s cubic-bezier(0.22, 1, 0.36, 1) 2.5s forwards;
}
.hero-name {
  opacity: 0;
}
.typing-cursor {
  display: inline-block;
  width: 0.08em;
  height: 0.85em;
  background-color: var(--fg);
  margin-left: 0.05em;
  vertical-align: middle;
  animation: blink-cursor 0.75s step-end infinite;
}
@keyframes blink-cursor {
  from, to { background-color: transparent }
  50% { background-color: var(--fg) }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); filter: blur(18px) brightness(0.55); }
  to   { opacity: 1; transform: translateY(0);    filter: blur(18px) brightness(0.55); }
}
@keyframes fadeUpClean {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── About ─────────────────────────────────────────────────── */
.about {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 50px 80px 50px 80px;
  background-color: #f5f5f7;
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.about-badge {
  position: absolute;
  bottom: 40px;
  left: 48px;
  z-index: 2;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.about.is-visible .about-badge {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.35s;
}
.about-badge-circle {
  width: 135px;
  height: 135px;
  border-radius: 50%;
  background: #1a1a1a;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  animation: badgeFloat 6s ease-in-out infinite;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: default;
}
.about-badge-circle:hover {
  background: #0055ff;
  border-color: #0055ff;
  transform: scale(1.08);
  box-shadow: 0 20px 40px rgba(0, 85, 255, 0.3);
}
.about-badge-text {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: #ffffff;
  text-transform: uppercase;
  margin-right: -0.3em;
}
@keyframes badgeFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0px); }
}
.about-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 3vh, 32px);
}
.about-statement {
  font-family: var(--font-display);
  font-size: clamp(36px, 6vh, 60px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #1a1a1a;
  opacity: 0;
  transform: translateY(-30px);
  margin-bottom: 36px;
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.about-statement span {
  display: block;
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
  cursor: default;
}
.about-statement:hover span { opacity: 0.35; }
.about-statement span:hover { opacity: 1; transform: translateX(8px); color: #000000; }
.about.is-visible .about-statement {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s;
}
.about-grid {
  display: grid;
  grid-template-columns: 1.38fr 1px 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: stretch;
}
.about-col-bio {
  padding-bottom: 110px;
  opacity: 0;
  transform: translateY(-30px);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.about.is-visible .about-col-bio {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.35s;
}
.about-bio-text {
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.8;
  color: #111111;
  font-weight: 500;
}
.about-cards-wrapper {
  position: relative;
  width: 100%;
  height: 660px;
  z-index: 10;
}

/* ── About Single Zig-Zag Card ──────────────────────────────── */
.about-single-card {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #0a0a0c;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.05);
  
  /* Spawn entrance state */
  opacity: 0;
  transform: translateY(35px) scale(0.97);
  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.about.is-visible .about-single-card {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0.45s;
}

.card-slice {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

/* Diagonal clip path coordinates & Black-and-White theme */
.slice-ai-ml {
  clip-path: polygon(0 0, 100% 0, 100% 28%);
  background: linear-gradient(135deg, #0d0d10 0%, #08080a 100%);
  --slice-accent: #ffffff;
  --slice-accent-rgb: 255, 255, 255;
  --slice-hover-bg: #ffffff;
}

.slice-open-source {
  clip-path: polygon(0 0, 100% 28%, 0 52%);
  background: linear-gradient(135deg, #111114 0%, #0a0a0c 100%);
  --slice-accent: #ffffff;
  --slice-accent-rgb: 255, 255, 255;
  --slice-hover-bg: #ffffff;
}

.slice-web-dev {
  clip-path: polygon(100% 28%, 0 52%, 100% 76%);
  background: linear-gradient(135deg, #0f0f12 0%, #08080a 100%);
  --slice-accent: #ffffff;
  --slice-accent-rgb: 255, 255, 255;
  --slice-hover-bg: #ffffff;
}

.slice-sports-fitness {
  clip-path: polygon(0 52%, 100% 76%, 100% 100%, 0 100%);
  background: linear-gradient(135deg, #131316 0%, #0c0c0e 100%);
  --slice-accent: #ffffff;
  --slice-accent-rgb: 255, 255, 255;
  --slice-hover-bg: #ffffff;
}

/* Inner contents positioning and typography */
.slice-inner {
  position: absolute;
  width: 65%;
  pointer-events: none; /* Let hovers pass through to the slice container */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  color: rgba(255, 255, 255, 0.7);
  z-index: 5;
}

/* Text alignments per slice */
.slice-ai-ml .slice-inner {
  top: 30px;
  right: 40px;
  text-align: right;
}

.slice-open-source .slice-inner {
  top: 155px;
  left: 40px;
  text-align: left;
}

.slice-web-dev .slice-inner {
  top: 310px;
  right: 40px;
  text-align: right;
}

.slice-sports-fitness .slice-inner {
  bottom: 40px;
  left: 40px;
  text-align: left;
}

/* Text Swapping Wrappers */
.slice-text-wrapper {
  position: relative;
  width: 100%;
}

.slice-title-block {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: inherit;
}

/* Reverse flex layout for right-aligned columns */
.slice-ai-ml .slice-title-block,
.slice-web-dev .slice-title-block {
  flex-direction: row-reverse;
}

.slice-num {
  font-family: monospace;
  font-size: 13px;
  letter-spacing: 1.5px;
  opacity: 0.6;
  color: var(--slice-accent);
}

.slice-title {
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: #ffffff;
  margin: 0;
  transition: color 0.3s ease;
}

.slice-desc-block {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.5;
  color: #000000; /* Pure black text on white hovered background */
}

/* Hover swaps & Bump Up Scale */
.card-slice:hover {
  z-index: 15;
  background: var(--slice-hover-bg) !important;
  transform: scale(1.025); /* Bump up */
}

.card-slice:hover .slice-title-block {
  opacity: 0;
  transform: translateY(-15px);
  pointer-events: none;
}

.card-slice:hover .slice-desc-block {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  animation: glitch-bw 0.45s steps(2, start) forwards; /* Glitch unlock definition */
}

/* Pure Black & White Text Glitch Animation */
@keyframes glitch-bw {
  0% {
    clip-path: inset(40% 0 61% 0);
    transform: skew(0.3deg) translate(-2px, 1px);
    text-shadow: 2px 0 #ffffff, -2px 0 #000000;
  }
  20% {
    clip-path: inset(92% 0 1% 0);
    transform: skew(-0.5deg) translate(1px, -1px);
    text-shadow: -1px 0 #ffffff, 1px 0 #000000;
  }
  40% {
    clip-path: inset(15% 0 80% 0);
    transform: skew(0.5deg) translate(-1px, 2px);
    text-shadow: 2px 0 #000000, -2px 0 #ffffff;
  }
  60% {
    clip-path: inset(80% 0 5% 0);
    transform: skew(-0.3deg) translate(2px, -1px);
    text-shadow: -2px 0 #ffffff, 2px 0 #000000;
  }
  80% {
    clip-path: inset(3% 0 92% 0);
    transform: skew(0.8deg) translate(-2px, 1px);
    text-shadow: 1px 0 #000000, -1px 0 #ffffff;
  }
  100% {
    clip-path: inset(0 0 0 0);
    transform: none;
    text-shadow: none;
  }
}

/* Spotlight tracking flare overlay (Pure B&W light glow) */
.card-slice::after {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: radial-gradient(circle 120px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.12) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 3;
}
.card-slice:hover::after {
  opacity: 1;
}

/* Dim down other segments when one is hovered */
.about-single-card:hover .card-slice:not(:hover) {
  opacity: 0.25;
  filter: grayscale(1) blur(1px);
}

/* SVG divider overlay lines */
.card-dividers-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

/* Glowing Border SVG and Polygons - Shining Corners */
.card-borders-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  pointer-events: none;
  overflow: visible; /* Let glows extend beyond card bounds */
}
.border-polygon {
  stroke: transparent;
  stroke-width: 0;
  transition: stroke 0.3s ease, stroke-width 0.3s ease, filter 0.3s ease;
}

/* Parent triggers via JS to light up borders and corners */
.about-single-card.active-slice-0 .poly-ai-ml,
.about-single-card.active-slice-1 .poly-open-source,
.about-single-card.active-slice-2 .poly-web-dev,
.about-single-card.active-slice-3 .poly-sports-fitness {
  stroke: #ffffff;
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95));
}

#about-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 768px) {
  .about { padding: 80px 24px; }
  .about-badge { position: relative; top: auto; left: auto; margin-bottom: 20px; display: flex; justify-content: flex-start; }
  .about-content { gap: 40px; }
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-grid-divider { display: none; }
  .about-bio-text { font-size: 16px; }
  .about-cards-wrapper {
    height: auto;
    margin-top: 20px;
  }
  .about-single-card {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
  }
  .card-dividers-svg,
  .card-borders-svg {
    display: none;
  }
  .card-slice {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 110px;
    clip-path: none !important;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(135deg, #111114 0%, #0a0a0c 100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .card-slice:hover {
    background: #ffffff !important;
    transform: scale(1.02);
  }
  .slice-inner {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    text-align: left !important;
  }
  .slice-header {
    flex-direction: row !important;
  }
  .about-single-card:hover .card-slice:not(:hover) {
    opacity: 0.6;
    filter: none;
  }
  .sticky-menu-links { top: 80px; right: 0; width: auto; padding: 0; align-items: flex-end; }
  .sticky-menu-links a { font-size: 24px; padding: 6px 0; }
}

/* ═══════════════════════════════════════════════════════════════
   SKILLS SECTION — The Skill Ecosystem Telemetry Deck
   ═══════════════════════════════════════════════════════════════ */

.skills {
  min-height: 100vh;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f7; /* Matching the about page background */
  background-image: radial-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px);
  background-size: 40px 40px; /* Crisp grid matrix matching about style */
  position: relative;
  overflow: hidden;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.skills-container {
  display: flex;
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  justify-content: stretch;
  align-items: stretch;
  box-sizing: border-box;
  z-index: 10;
}

.skills-column {
  flex: 1;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  background: transparent;
  
  /* Stagger entrance state */
  opacity: 0;
  transform: translateY(25px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s ease;
}

.skills-column:last-child {
  border-right: none;
}

.skills-column.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Category Accent lines (thin top border, no glow) & Light Category Backgrounds */
.division-ml {
  border-top: 4px solid #ab3c2d;
  background-color: #fff6f4; /* Light peach tint */
}
.division-web {
  border-top: 4px solid #1a6b7d;
  background-color: #f2fafc; /* Light teal tint */
}
.division-sys {
  border-top: 4px solid #2e425a;
  background-color: #f6f5fa; /* Light lavender tint */
}

/* Column Header Specifications */
.column-header {
  height: 14vh;
  min-height: 90px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
}

.column-num {
  font-family: var(--font-ui), monospace;
  font-size: 14px;
  font-weight: 700;
  margin-right: 12px;
  letter-spacing: 0.5px;
}

.division-ml .column-num { color: #ab3c2d; }
.division-web .column-num { color: #1a6b7d; }
.division-sys .column-num { color: #2e425a; }

.column-title {
  font-family: 'Syne', var(--font-display);
  font-size: clamp(14px, 1.2vw, 16px);
  font-weight: 800;
  color: #1c1c1e;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* Grid Layout Inside Columns (Full-Bleed cells stretching to match height) */
.column-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
  flex: 1;
  box-sizing: border-box;
}

.division-ml .column-grid {
  grid-template-rows: repeat(3, 1fr);
}
.division-web .column-grid {
  grid-template-rows: repeat(4, 1fr);
}
.division-sys .column-grid {
  grid-template-rows: repeat(4, 1fr);
}

/* Technology Cards (Grid puzzle boxes) */
.tech-logo-card {
  width: 100%;
  height: 100%;
  border-right: 1px solid rgba(0, 0, 0, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  pointer-events: auto;
  
  /* Stagger entrance state */
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s ease;
}

.skills-column.revealed .tech-logo-card {
  opacity: 1;
  transform: scale(1);
}

/* Grid border alignment fixes */
.column-grid .tech-logo-card:nth-child(even) {
  border-right: none;
}

/* Bottom row cards get no bottom border */
.division-ml .column-grid .tech-logo-card:last-child {
  grid-column: span 2;
  border-bottom: none;
  border-right: none;
}
.division-web .column-grid .tech-logo-card:last-child {
  grid-column: span 2;
  border-bottom: none;
  border-right: none;
}
.division-sys .column-grid .tech-logo-card:nth-child(7),
.division-sys .column-grid .tech-logo-card:nth-child(8) {
  border-bottom: none;
}

/* Stagger transition delays for logo cards */
.skills-column.revealed .tech-logo-card:nth-child(1) { transition-delay: 0.04s; }
.skills-column.revealed .tech-logo-card:nth-child(2) { transition-delay: 0.08s; }
.skills-column.revealed .tech-logo-card:nth-child(3) { transition-delay: 0.12s; }
.skills-column.revealed .tech-logo-card:nth-child(4) { transition-delay: 0.16s; }
.skills-column.revealed .tech-logo-card:nth-child(5) { transition-delay: 0.2s; }
.skills-column.revealed .tech-logo-card:nth-child(6) { transition-delay: 0.24s; }
.skills-column.revealed .tech-logo-card:nth-child(7) { transition-delay: 0.28s; }
.skills-column.revealed .tech-logo-card:nth-child(8) { transition-delay: 0.32s; }

/* Interactive Cursor Spotlight Glare */
.tech-logo-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle 100px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.14) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.tech-logo-card:hover::before {
  opacity: 1;
}

/* Card hover dynamics */
.tech-logo-card:hover {
  transform: scale(1.02); /* Crisp scale shift */
  z-index: 5;
}

.tech-logo-card[data-category="ml"]:hover {
  background-color: #ab3c2d; /* Solid terracotta */
}
.tech-logo-card[data-category="web"]:hover {
  background-color: #1a6b7d; /* Solid slate-teal */
}
.tech-logo-card[data-category="sys"]:hover {
  background-color: #2e425a; /* Solid deep indigo */
}

/* Target swap layouts: Logo vs. Name text */
.card-logo {
  width: 44%;
  height: 44%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.card-logo svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.card-name {
  position: absolute;
  opacity: 0;
  transform: scale(0.85);
  font-family: 'Space Grotesk', 'Syne', sans-serif;
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 800;
  color: #ffffff; /* Clean white text on hovered solid backgrounds */
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  width: 90%;
  padding: 10px;
  box-sizing: border-box;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 3;
}

/* Swap state triggers */
.tech-logo-card:hover .card-logo {
  opacity: 0;
  transform: scale(0.7);
}

.tech-logo-card:hover .card-name {
  opacity: 1;
  transform: scale(1);
}

/* ── Ambient Breathing SVG Micro-animations ────────────────── */
@keyframes python-breathe { 0%,100%{transform:translate(0,0);} 50%{transform:translate(1px,-1px) rotate(1deg);} }
.tech-logo-card .py-snake-1 { animation: python-breathe 4s ease-in-out infinite; transform-origin: center; }

@keyframes pytorch-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.tech-logo-card .pytorch-path-1,
.tech-logo-card .pytorch-path-2 { animation: pytorch-pulse 3s ease-in-out infinite; transform-origin: center; }

@keyframes slow-swing { 0%,100%{transform:rotate(0);} 50%{transform:rotate(1.5deg);} }
.tech-logo-card svg.tech-icon { transform-origin: bottom center; }
.tech-logo-card[id*="flask"] svg { animation: slow-swing 5s ease-in-out infinite; }

@keyframes slow-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.tech-logo-card .html-shield-1,
.tech-logo-card .html-shield-2 { animation: slow-rotate 25s linear infinite; transform-origin: center; }

@keyframes card-breath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.tech-logo-card .c-circle,
.tech-logo-card .cpp-circle { animation: card-breath 3.5s ease-in-out infinite; transform-origin: center; }

@keyframes js-ts-tilt { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1deg); } }
.tech-logo-card .js-rect,
.tech-logo-card .ts-rect { animation: js-ts-tilt 4s ease-in-out infinite; transform-origin: center; }

/* ── Responsive Columns Media Queries ─────────────────────── */
@media (max-width: 1024px) {
  .skills {
    height: auto;
    min-height: 100vh;
    padding: 100px 20px;
    box-sizing: border-box;
  }
  .skills-container {
    flex-direction: column;
    height: auto;
    gap: 40px;
    padding: 0;
  }
  .skills-column {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
  .skills-column:last-child {
    border-bottom: none;
  }
  .column-header {
    height: auto;
    padding: 24px 20px;
  }
  .column-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto !important;
  }
  .tech-logo-card {
    aspect-ratio: 1.1;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    grid-column: span 1 !important;
  }
  
  .column-grid .tech-logo-card:nth-child(3n) {
    border-right: none !important;
  }
}

@media (max-width: 600px) {
  .column-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tech-logo-card {
    aspect-ratio: 1;
  }
  .column-grid .tech-logo-card:nth-child(even) {
    border-right: none !important;
  }
  .column-grid .tech-logo-card:nth-child(odd) {
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  }
}

@media (max-height: 720px) and (min-width: 1025px) {
  .column-header {
    height: 12vh;
    min-height: 70px;
  }
}

/* ── Skills Curtain Entry Overlay ────────────────────────── */
.skills-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 100;
  pointer-events: none;
  overflow: hidden;
  visibility: visible;
}

.skills-curtain-panel {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  pointer-events: auto;
  transition: transform 1.2s cubic-bezier(0.85, 0, 0.15, 1);
  box-sizing: border-box;
  background-color: #0a0a0c; /* B&W dark theme background */
}

.panel-ml {
  width: 33.333%;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-web {
  width: 33.333%;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-sys {
  width: 33.334%;
}

.curtain-text {
  font-family: 'Space Grotesk', 'Syne', sans-serif;
  font-size: clamp(60px, 8vw, 160px);
  font-weight: 900;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: -2px;
  user-select: none;
  transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.8s ease;
}

/* Slide Up Timings & Stagger */
.curtain-revealed .panel-ml {
  transform: translateY(-100%);
  transition-delay: 0.1s;
}

.curtain-revealed .panel-web {
  transform: translateY(-100%);
  transition-delay: 0.25s;
}

.curtain-revealed .panel-sys {
  transform: translateY(-100%);
  transition-delay: 0.4s;
}

/* Staggered text shift as curtains slide away */
.curtain-revealed .skills-curtain-panel .curtain-text {
  transform: translateY(-60px);
  opacity: 0;
}

/* Hide curtain completely after transition completes */
.curtain-revealed .skills-curtain {
  visibility: hidden;
  transition: visibility 0s linear 1.6s;
}

/* Mobile responsive fixes for the curtain */
@media (max-width: 1024px) {
  .skills-curtain {
    position: fixed;
    height: 100vh;
  }
  .curtain-text {
    font-size: clamp(40px, 12vw, 80px);
  }
}

/* ─── Projects Section ───────────────────────────────────────── */
.projects {
  height: 100vh;
  min-height: 100vh;
  padding: 0;
  background-color: #ffffff; /* White Background */
  background-image: radial-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px); /* Subtle dark grid points */
  background-size: 24px 24px;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  scroll-snap-align: none;
  scroll-snap-stop: none;
}

/* Transitions for other sections when modal is open */
section, nav, .sticky-menu {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

body.project-modal-open section:not(#project-overlay), 
body.project-modal-open nav, 
body.project-modal-open .sticky-menu {
  opacity: 0.12;
  filter: blur(8px) grayscale(0.4);
  transform: scale(0.96);
  pointer-events: none;
}

body.project-modal-open {
  overflow: hidden;
}

/* Vertical PROJECTS Loader Sidebar (Spans Entire Left Vertical Height, Moved to Extreme Left) */
.projects-sidebar {
  position: absolute;
  top: 0;
  left: 0; /* Flush with extreme left edge */
  bottom: 0;
  width: 120px; /* Width of white vertical strip */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 5;
  background-color: #000000; /* Black vertical strip */
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

/* Minimalist Typing Cursor block (Resized for doubled font) */
.projects-typing-cursor {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 32px; /* Doubled cursor width to match text */
  height: 5px;
  background-color: #ffffff;
  z-index: 4;
  animation: projects-cursor-blink 0.8s step-end infinite;
  transition: top 0.2s cubic-bezier(0.16, 1, 0.3, 1), left 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes projects-cursor-blink {
  from, to { background-color: transparent; }
  50% { background-color: #ffffff; }
}

/* Vertical text stacked evenly along full height */
.projects-vertical-text {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 40px 0;
}

.projects-vertical-text span {
  font-family: 'Syne', sans-serif;
  font-size: clamp(38px, 4.5vw, 62px); /* Doubled font size for maximum presence */
  font-weight: 800;
  color: #ffffff; /* White text on black vertical strip */
  text-align: center;
  user-select: none;
  opacity: 0; /* Hidden by default, typed in via JS */
  transform: scale(0.75);
  transition: opacity 0.15s ease, transform 0.25s ease;
  letter-spacing: -2px;
}

/* Styled active/typed state */
.projects-vertical-text span.typed {
  opacity: 1;
  transform: scale(1);
}

/* Projects Layout Container (Expanded to occupy ALL available space) */
.projects-container {
  width: 100%;
  height: 100%;
  padding-left: 170px; /* clears the absolute sidebar + spacing */
  padding-right: 60px; /* spacing on the right */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

/* Projects List View */
.projects-list {
  width: 100%;
  height: calc(100% - 120px); /* Leave 60px padding top and bottom */
  display: flex;
  flex-direction: column;
  gap: 28px; /* Separates the project rows visually */
  overflow-y: auto;
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}
.projects-list::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.project-list-item {
  flex: 0 0 calc((100% - 56px) / 3); /* Exactly 3 items visible */
  height: calc((100% - 56px) / 3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 48px;
  background-color: #fafafa; /* Soft off-white baseline background */
  border: 1px solid rgba(0, 0, 0, 0.06); /* Clean boundary outline */
  border-radius: 16px; /* Rounded card boundaries */
  cursor: pointer;
  position: relative;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.015);
}

.project-item-title-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-item-subtitle-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.project-item-subtitle-tags span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.4);
  letter-spacing: 0.08em;
  transition: color 0.3s ease;
}

.project-item-subtitle-tags .separator {
  color: rgba(0, 0, 0, 0.15);
  font-size: 9px;
  user-select: none;
}

.project-item-left {
  display: flex;
  align-items: center;
  gap: 40px;
}

.project-item-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.35);
  transition: color 0.3s ease;
}

.project-item-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -1px;
  line-height: 1.1;
  transition: color 0.3s ease, transform 0.3s ease;
}

/* Hover highlights with soft theme pastels and boundary borders */
.project-list-item[data-project="neerakshak"]:hover {
  background: linear-gradient(135deg, #eafaf1 0%, #d5f5e3 100%);
  border-color: rgba(39, 174, 96, 0.25);
  box-shadow: 0 12px 30px rgba(39, 174, 96, 0.08);
  padding-left: 58px;
}
.project-list-item[data-project="neerakshak"]:hover .project-item-title {
  color: #0c2616;
}
.project-list-item[data-project="neerakshak"]:hover .project-item-number {
  color: #27ae60;
}
.project-list-item[data-project="neerakshak"]:hover .project-item-subtitle-tags span:not(.separator) {
  color: #1e8449;
}

.project-list-item[data-project="churn"]:hover {
  background: linear-gradient(135deg, #fefde8 0%, #fef9c3 100%);
  border-color: rgba(202, 138, 4, 0.25);
  box-shadow: 0 12px 30px rgba(202, 138, 4, 0.08);
  padding-left: 58px;
}
.project-list-item[data-project="churn"]:hover .project-item-title {
  color: #332a00;
}
.project-list-item[data-project="churn"]:hover .project-item-number {
  color: #ca8a04;
}
.project-list-item[data-project="churn"]:hover .project-item-subtitle-tags span:not(.separator) {
  color: #a16207;
}

.project-list-item[data-project="healthcare"]:hover {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: rgba(239, 68, 68, 0.2);
  box-shadow: 0 12px 30px rgba(239, 68, 68, 0.08);
  padding-left: 58px;
}
.project-list-item[data-project="healthcare"]:hover .project-item-title {
  color: #3e1212;
}
.project-list-item[data-project="healthcare"]:hover .project-item-number {
  color: #ef4444;
}
.project-list-item[data-project="healthcare"]:hover .project-item-subtitle-tags span:not(.separator) {
  color: #b91c1c;
}

.project-list-item[data-project="unigo"]:hover {
  background: linear-gradient(135deg, #ebf5fb 0%, #d6eaf8 100%);
  border-color: rgba(41, 128, 185, 0.25);
  box-shadow: 0 12px 30px rgba(41, 128, 185, 0.08);
  padding-left: 58px;
}
.project-list-item[data-project="unigo"]:hover .project-item-title {
  color: #1b4f72;
}
.project-list-item[data-project="unigo"]:hover .project-item-number {
  color: #2980b9;
}
.project-list-item[data-project="unigo"]:hover .project-item-subtitle-tags span:not(.separator) {
  color: #21618c;
}

/* Project dynamic color vars */
.project-list-item[data-project="neerakshak"] {
  --theme-color: #27ae60;
  --theme-color-rgb: 39, 174, 96;
}
.project-list-item[data-project="churn"] {
  --theme-color: #ca8a04;
  --theme-color-rgb: 202, 138, 4;
}
.project-list-item[data-project="healthcare"] {
  --theme-color: #ef4444;
  --theme-color-rgb: 239, 68, 68;
}
.project-list-item[data-project="unigo"] {
  --theme-color: #2980b9;
  --theme-color-rgb: 41, 128, 185;
}

.project-item-right {
  display: flex;
  align-items: center;
  gap: 36px;
}

.project-item-tech {
  display: flex;
  gap: 10px;
  align-items: center;
}

.project-item-tech span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.55);
  padding: 6px 12px;
  border-radius: 8px;
  background-color: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  letter-spacing: 0.02em;
  transition: all 0.3s ease;
}

/* Tech tag styling changes on hover for seamless blending */
.project-list-item[data-project="neerakshak"]:hover .project-item-tech span {
  background: rgba(46, 204, 113, 0.08);
  color: #1e8449;
  border-color: rgba(46, 204, 113, 0.15);
}
.project-list-item[data-project="churn"]:hover .project-item-tech span {
  background: rgba(234, 179, 8, 0.08);
  color: #a16207;
  border-color: rgba(234, 179, 8, 0.15);
}
.project-list-item[data-project="healthcare"]:hover .project-item-tech span {
  background: rgba(239, 68, 68, 0.06);
  color: #b91c1c;
  border-color: rgba(239, 68, 68, 0.12);
}
.project-list-item[data-project="unigo"]:hover .project-item-tech span {
  background: rgba(41, 128, 185, 0.08);
  color: #21618c;
  border-color: rgba(41, 128, 185, 0.15);
}

/* Floating Hover Preview Card */
.project-hover-preview {
  position: absolute;
  top: 0;
  left: 0;
  width: 320px;
  background-color: #151518;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.15);
  pointer-events: none; /* Crucial so it doesn't block hover events on items underneath */
  opacity: 0;
  transform: translate3d(var(--hover-x, 0px), var(--hover-y, 0px), 0) scale(0.85);
  transform-origin: 160px 180px;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}

.project-hover-preview.active {
  opacity: 1;
  transform: translate3d(var(--hover-x, 0px), var(--hover-y, 0px), 0) scale(1);
}

.preview-img-container {
  width: 100%;
  height: 180px;
  position: relative;
  background-color: #0c0c0e;
  overflow: hidden;
}

.preview-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-hover-preview.active img {
  transform: scale(1.05);
}

.project-hover-preview[data-theme="neerakshak"] {
  --preview-theme: #27ae60;
}
.project-hover-preview[data-theme="churn"] {
  --preview-theme: #ca8a04;
}
.project-hover-preview[data-theme="healthcare"] {
  --preview-theme: #ef4444;
}
.project-hover-preview[data-theme="unigo"] {
  --preview-theme: #2980b9;
}

.preview-overlay-btn {
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--preview-theme, #ffffff);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 255, 255, 0.15);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none; /* Let clicks pass through */
  z-index: 10;
}

.project-hover-preview[data-theme="churn"] .preview-overlay-btn {
  color: #000000;
}

.project-hover-preview.active .preview-overlay-btn {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}


.preview-desc-container {
  padding: 18px;
  background-color: #151518;
}

.preview-desc-container p {
  font-family: var(--font-ui), sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}

/* ─── Minimalist Spherical Overlay Detail Modal (Off-White) ───── */
.project-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  overflow: hidden;
  pointer-events: none;
}

.overlay-ball {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center center;
  transition: transform 1.2s cubic-bezier(0.86, 0, 0.07, 1), 
              top 1.2s cubic-bezier(0.86, 0, 0.07, 1), 
              background-color 0.4s ease;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.08);
}

/* Overlay themes with high-quality minimalist off-whites */
.project-overlay[data-theme="neerakshak"] .overlay-ball {
  background: #f2fbf7;
}
.project-overlay[data-theme="churn"] .overlay-ball {
  background: #fffdf2;
}
.project-overlay[data-theme="healthcare"] .overlay-ball {
  background: #fff6f6;
}
.project-overlay[data-theme="unigo"] .overlay-ball {
  background: #f4f9fd;
}

.project-overlay.active {
  pointer-events: auto;
}

.project-overlay.active .overlay-ball {
  top: 50%;
  transform: translate(-50%, -50%) scale(28);
}

.overlay-content {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease 0.8s;
  overflow-y: auto;
  padding: 60px 40px;
}

.project-overlay.active .overlay-content {
  opacity: 1;
  pointer-events: auto;
}

.overlay-close-btn {
  position: fixed;
  top: 40px;
  right: 40px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #ffffff;
  color: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10001;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.overlay-close-btn:hover {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
  transform: rotate(90deg) scale(1.05);
}

.overlay-details-wrapper {
  width: 100%;
  max-width: 960px;
  color: #111111;
  opacity: 0;
  transform: translateY(30px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s, 
              opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.9s;
  margin: auto;
}

.project-overlay.active .overlay-details-wrapper {
  opacity: 1;
  transform: translateY(0);
}

.overlay-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 24px;
  margin-bottom: 35px;
}

.overlay-badge {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  opacity: 0.65;
  text-transform: uppercase;
}

.overlay-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(34px, 5.5vw, 64px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1;
  margin-top: 10px;
}

.overlay-body {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 50px;
}

.section-subtitle {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.15em;
  opacity: 0.45;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.overlay-desc {
  font-family: var(--font-ui), sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: #222222;
  margin-bottom: 35px;
  font-weight: 500;
}

.overlay-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.overlay-list li {
  font-family: var(--font-ui), sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: #333333;
  margin-bottom: 14px;
  position: relative;
  padding-left: 28px;
  font-weight: 500;
}

.overlay-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: #1a1a1a;
  font-weight: 700;
}

.overlay-info-right {
  display: flex;
  flex-direction: column;
}

.overlay-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.overlay-tags span {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.overlay-meta-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 40px;
}

.overlay-meta-table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.overlay-meta-table td {
  padding: 14px 0;
  font-family: var(--font-ui), sans-serif;
  font-size: 14px;
}

.overlay-meta-table td:first-child {
  font-weight: 700;
  opacity: 0.55;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}

.overlay-meta-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: #1a1a1a;
}

.overlay-github-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  background: #111111;
  color: #ffffff;
  border: 1px solid #111111;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.overlay-github-link:hover {
  background: transparent;
  color: #111111;
}

.overlay-github-link svg {
  transition: transform 0.3s ease;
}

.overlay-github-link:hover svg {
  transform: translateY(-2px);
}

/* ─── Media Queries ──────────────────────────────────────────── */
@media (max-width: 1100px) {
  .projects {
    padding: 80px 4%;
    height: auto;
    min-height: 100vh;
    display: block; /* Flow naturally instead of absolute center */
    overflow-y: auto;
  }
  
  .projects-container {
    padding-left: 0;
    padding-right: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }
  
  .projects-sidebar {
    position: relative;
    width: 100%;
    height: 80px;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 0;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    background-color: #000000; /* Reverted to black sidebar on mobile */
  }
  
  .projects-typing-cursor {
    width: 4px;
    height: 20px;
    transform: translateY(-50%);
    background-color: #ffffff; /* Reverted to white cursor on mobile */
  }
  
  .projects-vertical-text {
    flex-direction: row;
    width: 100%;
    height: auto;
    padding: 0 20px;
    justify-content: space-between;
    align-items: center;
  }
  
  .projects-vertical-text span {
    font-size: 20px;
    color: #ffffff; /* Reverted to white text on mobile */
  }

  .projects-list {
    height: auto;
    border-top: none;
    gap: 16px;
  }

  .project-list-item {
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
    background-color: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
  }

  .project-list-item:hover {
    padding-left: 24px;
    padding-right: 24px;
  }

  .project-list-item[data-project="neerakshak"]:hover {
    background: linear-gradient(135deg, #eafaf1 0%, #d5f5e3 100%);
  }
  .project-list-item[data-project="churn"]:hover {
    background: linear-gradient(135deg, #fefde8 0%, #fef9c3 100%);
  }
  .project-list-item[data-project="healthcare"]:hover {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  }
  .project-list-item[data-project="unigo"]:hover {
    background: linear-gradient(135deg, #ebf5fb 0%, #d6eaf8 100%);
  }

  .project-item-left {
    gap: 20px;
  }

  .project-item-title {
    font-size: 26px;
  }

  .project-item-right {
    width: 100%;
    justify-content: space-between;
    gap: 15px;
    padding-left: 38px; /* Alignment with title text offset */
  }

  .project-hover-preview {
    display: none !important; /* Hide floating card on mobile devices */
  }
}

@media (max-width: 900px) {
  .overlay-body {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .overlay-close-btn {
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
  }
  
  .overlay-content {
    padding: 80px 20px 40px;
  }
}

@media (max-width: 600px) {
  .project-item-right {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding-left: 0;
  }

  .project-item-tech {
    flex-wrap: wrap;
    gap: 8px;
  }

}

@media (max-width: 480px) {
  .projects-vertical-text {
    padding: 0 10px;
  }
  .projects-vertical-text span {
    font-size: 16px;
  }
}

/* ─── Contact Section ────────────────────────────────────────── */
/* ─── Contact Section (rebuilt) ──────────────────────────────
   Layout: 3-column grid so the ID card (left), LET'S CONNECT
   title (center) and social pills (right) never overlap.
   Pills fall from above and land stacked in the right column.
   The ID card responds to the cursor with a 3D tilt + lanyard swing. */

.contact {
  min-height: 100vh;
  padding: 120px 64px 80px;
  background-color: #d2cbb5;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: grid;
  grid-template-columns: 380px 1fr;
  align-items: center;
  gap: 50px;
  perspective: 1400px;
}

/* ─── Hanging ID Card (Absolute positioning to top, scaled up) ─── */
.hanging-card-wrapper {
  position: absolute;
  top: 0;
  left: 64px;
  width: 380px;
  height: 720px;
  transform-style: preserve-3d;
  will-change: transform;
}

.lanyard-string {
  position: absolute;
  top: 0;
  left: 50%;
  width: 3px;
  height: 180px;
  background: linear-gradient(to bottom, #1a1a1a, #333);
  transform-origin: top center;
  transform: translateX(-50%);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  z-index: 1;
  animation: lanyard-idle-swing 6s ease-in-out infinite;
}

.id-badge {
  position: absolute;
  top: 180px;
  left: 50%;
  width: 330px;
  height: 480px;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  box-shadow: 0 35px 70px rgba(0,0,0,0.18), 0 5px 12px rgba(0,0,0,0.06);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #1a1a1a;
  transform-origin: top center;
  transform: translateX(-50%) rotate(-3deg);
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.35s ease;
  animation: badge-idle-swing 6s ease-in-out infinite;
}

.hanging-card-wrapper:hover .id-badge {
  animation-play-state: paused;
  box-shadow: 0 45px 90px rgba(0,0,0,0.28), 0 8px 22px rgba(0,0,0,0.1);
}
.hanging-card-wrapper:hover .lanyard-string {
  animation-play-state: paused;
}

@keyframes badge-idle-swing {
  0%, 100% { transform: translateX(-50%) rotate(-4deg); }
  50%      { transform: translateX(-50%) rotate(4deg); }
}

@keyframes lanyard-idle-swing {
  0%, 100% { transform: translateX(-50%) rotate(-2.4deg); }
  50%      { transform: translateX(-50%) rotate(2.4deg); }
}

.badge-slot {
  width: 60px;
  height: 12px;
  background: #1a1a1a;
  border-radius: 10px;
  margin-bottom: 24px;
}
.badge-header { margin-bottom: 12px; }
.badge-dept {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: rgba(0,0,0,0.45);
}
.badge-photo {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #1a1a1a;
  margin-bottom: 24px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}
.badge-photo img { width: 100%; height: 100%; object-fit: cover; }
.badge-name {
  font-family: 'Syne', sans-serif;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 0;
  line-height: 1.1;
}
.badge-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: rgba(0,0,0,0.5);
  margin: 6px 0 28px;
  text-transform: uppercase;
}
.badge-barcode {
  display: flex;
  align-items: flex-end;
  height: 28px;
  gap: 3.5px;
  margin-bottom: 6px;
}
.barcode-line { height: 100%; background: #1a1a1a; border-radius: 1px; }
.barcode-line.w-1 { width: 1.5px; }
.barcode-line.w-2 { width: 3px; }
.barcode-line.w-3 { width: 4.5px; }
.barcode-text {
  font-family: monospace;
  font-size: 9.5px;
  color: rgba(0,0,0,0.6);
  letter-spacing: 1px;
}

/* ─── Right Content Column (Rearranged positions) ─────────── */
.contact-right-content {
  grid-column: 2; /* Force to second column so it leaves the first column empty for the absolute ID card */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  z-index: 2;
}

.contact-title-container {
  margin-bottom: 48px;
}
.contact-pretitle {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.15em;
  color: rgba(26, 26, 26, 0.65);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.contact-title-container h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(48px, 7.2vw, 128px);
  font-weight: 800;
  color: #1a1a1a;
  letter-spacing: -1px;
  line-height: 0.92;
  text-transform: uppercase;
  margin: 0;
  display: block;
}

/* Each word sits on its own line */
.connect-word {
  display: block;
  white-space: nowrap;
  margin-left: -0.06em;
}

/* Individual letters react on their own — not the heading as a whole */
.connect-letter {
  display: inline-block;
  padding: 0 2px;
  border-radius: 14px;
  cursor: default;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              color 0.35s ease,
              background-color 0.35s ease;
}

.connect-letter:hover {
  color: #d2cbb5;
  background-color: #1a1a1a;
  transform: translateY(-0.12em) scale(1.08) rotate(-4deg);
}

.connect-letter:nth-child(even):hover {
  transform: translateY(-0.12em) scale(1.08) rotate(4deg);
}

/* Staggered Pills Grid */
.pills-grid-container {
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: 100%;
  max-width: 1180px;
}

.pills-grid-row {
  display: flex;
  column-gap: 26px;
  row-gap: 28px;
  width: 100%;
  align-items: stretch;
  flex-wrap: wrap; /* Prevent overflow on medium screens */
}

.pills-grid-row.top-row {
  justify-content: flex-start;
}

.pills-grid-row.bottom-row {
  justify-content: flex-start;
  padding-left: 64px; /* Offset to stagger like bricks */
}

/* Capsule Pills & Circular Arrow Button */
.contact-pill, .contact-pill-arrow {
  position: relative;
  display: flex;
  text-decoration: none;
  box-shadow: 0 15px 35px rgba(0,0,0,0.12), 0 3px 8px rgba(0,0,0,0.05);
  opacity: 0;
  transform: translateY(-100vh) rotate(-12deg);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  will-change: transform, opacity;
}

.pill-white { background: #fff; color: #1a1a1a; border: 1px solid rgba(0,0,0,0.05); }
.pill-black { background: #1a1a1a; color: #fff; }

.contact-pill {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: clamp(14px, 1.6vw, 22px) clamp(28px, 3vw, 40px) clamp(14px, 1.6vw, 22px) clamp(18px, 2vw, 24px);
  border-radius: 100px;
  flex: 1 1 260px;
  min-width: 220px;
}

.pill-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 3.4vw, 56px);
  height: clamp(44px, 3.4vw, 56px);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  flex-shrink: 0;
}
.pill-black .pill-icon-wrapper {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.pill-white .pill-icon-wrapper {
  background: rgba(0, 0, 0, 0.05);
  color: #1a1a1a;
}

.pill-icon {
  stroke-width: 2.2px;
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.pill-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.pill-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.6;
  margin-bottom: 2px;
}
.pill-value {
  font-family: 'Syne', sans-serif;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.1;
  white-space: nowrap;
}

/* Vertical Accent overrides simplified */
.pill-vertical {
  padding: clamp(14px, 1.6vw, 22px) clamp(28px, 3vw, 40px) clamp(14px, 1.6vw, 22px) clamp(18px, 2vw, 24px);
}

/* Email is now the sole top-row pill — full width, same height as the pills below */
.pill-email-full {
  flex: 1 1 100%;
  width: 100%;
}

.contact-pill-arrow {
  width: clamp(72px, 5.5vw, 88px);
  height: clamp(72px, 5.5vw, 88px);
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,0.05);
  flex-shrink: 0;
}
.contact-pill-arrow svg { transition: transform 0.3s ease; }
.contact-pill-arrow:hover svg { transform: translateY(-4px); } /* Chevron up moves up on hover */

/* Hover animations */
.contact-pill:hover,
.contact-pill-arrow:hover {
  box-shadow: 0 22px 50px rgba(0,0,0,0.18), 0 6px 16px rgba(0,0,0,0.08);
  transform: translateY(-4px) rotate(var(--rest-rot)) scale(1.025) !important;
}

.contact-pill:hover .pill-icon-wrapper {
  transform: scale(1.1);
}
.pill-black:hover .pill-icon-wrapper {
  background: rgba(255, 255, 255, 0.2);
}
.pill-white:hover .pill-icon-wrapper {
  background: rgba(0, 0, 0, 0.1);
}

/* Landing state configuration */
.pill-1 { --rest-rot: -3deg; }
.pill-2 { --rest-rot:  2deg; }
.pill-3 { --rest-rot: -2deg; }
.pill-4 { --rest-rot:  3deg; }
.pill-5 { --rest-rot:  0deg; }

.contact.active .contact-pill,
.contact.active .contact-pill-arrow {
  animation: pill-drop 1.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.contact.active .pill-1 { animation-delay: 0.10s; }
.contact.active .pill-2 { animation-delay: 0.22s; }
.contact.active .pill-3 { animation-delay: 0.34s; }
.contact.active .pill-4 { animation-delay: 0.46s; }
.contact.active .pill-5 { animation-delay: 0.58s; }

@keyframes pill-drop {
  0%   { transform: translateY(-100vh) rotate(-12deg); opacity: 0; }
  70%  { transform: translateY(12px)   rotate(var(--rest-rot)); opacity: 1; }
  85%  { transform: translateY(-4px)   rotate(var(--rest-rot)); }
  100% { transform: translateY(0)      rotate(var(--rest-rot)); opacity: 1; }
}

/* ─── Responsive overrides ─────────────────────────────────── */
@media (max-width: 1100px) {
  .contact {
    grid-template-columns: 1fr;
    padding: 100px 32px 60px;
    gap: 40px;
  }
  .hanging-card-wrapper {
    position: relative;
    left: auto;
    width: 330px;
    height: 620px;
    margin: 0 auto;
  }
  .hanging-card-wrapper .lanyard-string {
    height: 140px;
  }
  .hanging-card-wrapper .id-badge {
    top: 140px;
    width: 310px;
    height: 450px;
  }
  .contact-right-content {
    grid-column: auto; /* Reset grid column on tablet */
    align-items: center;
  }
  .contact-title-container {
    text-align: center;
    margin-bottom: 30px;
  }
  .pills-grid-container {
    align-items: center;
  }
  .pills-grid-row {
    justify-content: center;
  }
  .pills-grid-row.bottom-row {
    padding-left: 0; /* Remove stagger offset on tablets */
  }
}

@media (max-width: 768px) {
  .contact {
    min-height: auto;
    padding: 80px 20px 60px;
    scroll-snap-align: none;
    scroll-snap-stop: none;
  }
  .hanging-card-wrapper {
    display: none;
  }
  .pills-grid-row {
    flex-direction: column;
    gap: 16px;
    padding-left: 0 !important;
  }
  .contact-pill {
    width: 100%;
    min-width: 0;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
  .contact-pill-arrow {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    align-self: center;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1024px) and (orientation: landscape) {
  /* Disable scroll snapping in CSS for landscape mobile viewports */
  html {
    scroll-snap-type: none !important;
  }
  section, nav, .sticky-menu {
    scroll-snap-align: none !important;
    scroll-snap-stop: none !important;
    min-height: auto !important;
    height: auto !important;
  }
  /* Specific styling overrides for contact section in landscape mobile */
  .contact {
    padding: 60px 24px !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .hanging-card-wrapper {
    display: none !important; /* Hide massive ID card in mobile landscape */
  }
  .contact-right-content {
    grid-column: auto !important;
    align-items: center !important;
  }
  .contact-title-container {
    text-align: center !important;
    margin-bottom: 24px !important;
  }
  .pills-grid-container {
    align-items: center !important;
    max-width: 100% !important;
  }
  .pills-grid-row {
    justify-content: center !important;
    flex-direction: row !important;
    row-gap: 16px !important;
  }
  .pills-grid-row.bottom-row {
    padding-left: 0 !important;
  }
  .contact-pill {
    width: auto !important;
    flex: 0 1 auto !important;
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
  .contact-pill-arrow {
    transform: none !important;
    animation: none !important;
    opacity: 1 !important;
  }
}