:root {
  --bg: #2a0845;
  --bg2: #5a1a7a;
  --text: #ffffff;
  --muted: #e5d9ff;
  --accent: #e0b3ff;
  --highlight: #ffffff;
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: light) {
  :root {
    --text: #f8fafc;
  }
}

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

html, body { height: 100%; }

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  color: var(--text);
  background: radial-gradient(ellipse 100% 50% at 50% -20%, #7c3aed 0%, transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

.container { width: min(1100px, 92%); margin-inline: auto; }

.hero { padding: clamp(3rem, 5vw, 4rem) 0 4rem; min-height: 100vh; display: flex; align-items: center; }

.hero__content--center { display: grid; justify-items: center; gap: clamp(2rem, 4vw, 3rem); }

/* Avatar with dashed ring */
.avatar { position: relative; width: min(450px, 75vw); aspect-ratio: 1 / 1; display: grid; place-items: center; }
.avatar__inner { position: relative; width: 72%; aspect-ratio: 1 / 1; border-radius: 50%; background: #ffffff; box-shadow: var(--shadow); overflow: hidden; z-index: 2; 
  /* Pop-up animation */
  opacity: 0; transform: scale(0.8); transition: opacity 600ms cubic-bezier(0.34, 1.56, 0.64, 1), transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.avatar__img { width: 100%; height: 100%; object-fit: cover; }
.avatar::before { 
  content: ""; 
  position: absolute; 
  inset: 10%; 
  border-radius: 50%; 
  border: 4px dashed rgba(255,255,255,0.6); 
  z-index: 1;
  /* Rotating animation */
  animation: rotateDash 20s linear infinite;
}

/* Floating stickers */
.sticker { position: absolute; filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)); animation: float 7s ease-in-out infinite; font-size: 3rem; z-index: 3; 
  /* Pop-up animation */
  opacity: 0; transform: scale(0) rotate(-180deg); animation-fill-mode: both;
}

/* Sticker positions and unique animations */
.sticker--brain { 
  left: 12%; top: 18%; animation-delay: 0.2s; 
}
.sticker--laptop { 
  right: 8%; top: 12%; animation-delay: 0.5s;
}
.sticker--sparkles { 
  left: 18%; bottom: 15%; animation-delay: 1.1s;
}
.sticker--tool { 
  right: 22%; bottom: 8%; animation-delay: 0.35s;
}

/* Individual emoji animations */
.hero--visible .sticker--brain { 
  animation: popUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, float 7s ease-in-out 0.8s infinite, brainPulse 3s ease-in-out 2s infinite; 
}
.hero--visible .sticker--laptop { 
  animation: popUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, float 7s ease-in-out 0.8s infinite, laptopGlow 4s ease-in-out 1.5s infinite; 
}
.hero--visible .sticker--sparkles { 
  animation: popUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, float 7s ease-in-out 0.8s infinite, sparkle 2.5s ease-in-out 1.8s infinite; 
}
.hero--visible .sticker--tool { 
  animation: popUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, float 7s ease-in-out 0.8s infinite, toolWave 3.5s ease-in-out 1.2s infinite; 
}

/* Emoji-specific keyframes */
@keyframes brainPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)); }
  50% { transform: scale(1.08); filter: drop-shadow(0 8px 30px rgba(138, 43, 226, 0.6)); }
}

@keyframes laptopGlow {
  0%, 100% { filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)); }
  50% { filter: drop-shadow(0 8px 30px rgba(59, 130, 246, 0.7)) brightness(1.1); }
}

@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4)); }
  25% { transform: scale(1.12) rotate(5deg); filter: drop-shadow(0 8px 30px rgba(255, 215, 0, 0.8)); }
  50% { transform: scale(1.05) rotate(-3deg); filter: drop-shadow(0 8px 32px rgba(255, 255, 255, 0.9)); }
  75% { transform: scale(1.1) rotate(8deg); filter: drop-shadow(0 8px 30px rgba(255, 215, 0, 0.8)); }
}

@keyframes toolWave {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(10deg) scale(1.05); }
  50% { transform: rotate(-5deg) scale(1.02); }
  75% { transform: rotate(8deg) scale(1.05); }
}

/* Text */
.hero__text--center { text-align: center; max-width: 900px; }
.hero__title { margin: 0; font-size: clamp(2rem, 3vw + 1.2rem, 3.2rem); font-weight: 700; letter-spacing: 0.3px; line-height: 1.1; }
.highlight { color: var(--highlight); text-shadow: 0 4px 24px rgba(224, 179, 255, 0.4); }
.hero__subtitle { margin: 1rem auto 0; color: var(--muted); font-size: clamp(1.1rem, 0.8vw + 1rem, 1.3rem); line-height: 1.4; }

/* Socials */
.socials { margin-top: 1.8rem; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.social-link { width: 48px; height: 48px; display: inline-grid; place-items: center; color: #ffffff; background: rgba(255,255,255,0.15); border-radius: 50%; transition: transform 200ms ease, background-color 200ms ease; }
.social-link:hover { transform: translateY(-3px); background: rgba(255,255,255,0.25); }
.social-link svg { width: 24px; height: 24px; display: block; }

/* Pop-up keyframes */
@keyframes popUp {
  0% { opacity: 0; transform: scale(0) rotate(-180deg); }
  60% { transform: scale(1.1) rotate(-10deg); }
  80% { transform: scale(0.95) rotate(5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* Float animation (existing) */
@keyframes float { 0%{ transform: translateY(0) rotate(0deg) } 50%{ transform: translateY(-10px) rotate(2deg) } 100%{ transform: translateY(0) rotate(0deg) } }

/* Reveal animations */
.hero__text, .avatar { opacity: 0; transform: translateY(15px); transition: opacity 700ms ease, transform 700ms ease; }
.hero--visible .hero__text, .hero--visible .avatar { opacity: 1; transform: translateY(0); }
.hero--visible .avatar { transition-delay: 150ms; }

/* When hero becomes visible, trigger sticker and avatar animations */
.hero--visible .sticker:not(.sticker--brain):not(.sticker--laptop):not(.sticker--sparkles):not(.sticker--tool) { 
  animation: popUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, float 7s ease-in-out 0.8s infinite; 
}
.hero--visible .avatar__inner { opacity: 1; transform: scale(1); transition-delay: 0.3s; }

@media (max-width: 640px) {
  .hero { padding-top: 2.5rem; }
  .avatar { width: min(380px, 85vw); }
  .sticker { font-size: 2rem; }
  .sticker img { width: 50px; height: 50px; }
}

/* =======================
   Experience Section
   ======================= */
.exp { padding: 2rem 0; background: #ffffff; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.section-header { text-align: center; margin-bottom: 2rem; }
.section-title { margin: 0; font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem); font-weight: 800; letter-spacing: 0.2px; color: #0f172a; }
.section-subtitle { margin: 0.75rem auto 0; max-width: 900px; color: #374151; font-size: clamp(1rem, 0.6vw + 0.95rem, 1.2rem); }

.exp__stage { position: relative; width: min(600px, 90%); margin: 0 auto; aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }

/* Orbit */
.exp__orbit { position: absolute; inset: -30%; border-radius: 50%; display: grid; place-items: center; z-index: 1; }
.exp__ring { position: absolute; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(99, 102, 241, 0.4); }

/* Orbit lines */
.exp__orbit::before { 
  content: "";
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.3) 0%, rgba(99, 102, 241, 0.1) 50%, rgba(99, 102, 241, 0.3) 100%);
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.exp__orbit::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(99, 102, 241, 0.3) 0%, rgba(99, 102, 241, 0.1) 50%, rgba(99, 102, 241, 0.3) 100%);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.orbit__item { position: absolute; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: #1a1133; background: #e6c6ff; border: 2px solid #ffffff; box-shadow: 0 10px 24px rgba(0,0,0,0.2); cursor: pointer; 
  /* Place items around the circle using a simpler approach */
  --radius: 200px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle)));
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.orbit__item:hover { 
  box-shadow: 0 12px 28px rgba(0,0,0,0.28); 
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius))) rotate(calc(-1 * var(--angle))) scale(1.05); 
}
.orbit__item img { width: 70%; height: 70%; object-fit: contain; }

/* Center avatar */
.exp__avatar { position: relative; width: min(300px, 50%); aspect-ratio: 1 / 1; display: grid; place-items: center; z-index: 2; }
.exp__avatar-bg { position: absolute; inset: 12%; background: #d7a8ff; border-radius: 50%; filter: saturate(110%); }
.exp__avatar img { position: relative; width: 78%; transform: translateY(10%); filter: drop-shadow(0 18px 30px rgba(0,0,0,0.15)); }

/* Popover - fixed z-index */
.exp-popover { position: fixed; inset: 0; pointer-events: none; z-index: 1000; }
.exp-popover[aria-hidden="true"] { display: block; }
.exp-popover__content { position: absolute; min-width: 220px; max-width: 280px; background: #1e1236; color: #fff; border-radius: 14px; padding: 0.9rem 1rem; box-shadow: 0 16px 40px rgba(0,0,0,0.35); translate: -50% calc(-100% - 16px); opacity: 0; transform: scale(0.98); transition: opacity 160ms ease, transform 160ms ease; pointer-events: auto; }
.exp-popover.open .exp-popover__content { opacity: 1; transform: scale(1); }
.exp-popover__title { margin: 0 1.5rem 0.25rem 0; font-size: 1rem; }
.exp-popover__body { margin: 0; color: #d9ccff; font-size: 0.95rem; }
.exp-popover__close { position: absolute; inset: 8px 8px auto auto; width: 28px; height: 28px; border: none; border-radius: 50%; background: rgba(255,255,255,0.15); color: #fff; cursor: pointer; display: grid; place-items: center; }

/* Bubbles row */
.exp__bubbles { margin: 2rem auto 0; display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; max-width: 980px; }
.bubble { padding: 0.45rem 0.75rem; border-radius: 999px; background: #f1f5f9; color: #0f172a; border: 1px solid #e2e8f0; font-weight: 600; font-size: 0.95rem; }

@media (max-width: 640px) {
  .orbit__item { width: 56px; height: 56px; }
  .exp__avatar { width: min(250px, 55%); }
  .exp__stage { width: min(500px, 95%); }
}

/* Global overflow safety */
html, body { overflow-x: hidden; } 

/* Rotating dashed ring animation */
@keyframes rotateDash {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} 

/* =======================
   Projects Section - Random Dense Positioning
   ======================= */
.projects { 
  padding: clamp(3rem, 6vw, 5rem) 0; 
  background: radial-gradient(ellipse 100% 50% at 50% -20%, #7c3aed 0%, transparent 60%), linear-gradient(180deg, #2a0845 0%, #5a1a7a 100%);
  color: #ffffff;
  min-height: 100vh; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
}

.projects .section-title { color: #ffffff; }
.projects .section-subtitle { color: #e5d9ff; }

.projects__stage { 
  position: relative; 
  width: 800px; 
  height: 400px; 
  margin: 3rem auto 0; 
  overflow: hidden; 
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
}

/* Simple bubble styling - sizes will be set dynamically by JavaScript */
.project-bubble { 
  /* Remove fixed width/height - will be set by JS */
  min-width: 45px; 
  min-height: 45px; 
  border-radius: 50%; 
  background: rgba(255, 255, 255, 0.95); 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  /* Remove fixed font-size - will be set by JS */
  min-font-size: 1.2rem;
  cursor: pointer; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
  backdrop-filter: blur(10px); 
  border: 2px solid rgba(255, 255, 255, 0.4);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  position: absolute;
  z-index: 1;
  animation: subtleFloat 6s ease-in-out infinite;
  
  /* Ensure content stays centered regardless of size */
  text-align: center;
  line-height: 1;
}

/* Remove all previous positioning rules */
.project-bubble:nth-child(n) {
  /* Position and size will be set by JavaScript */
}

/* Enhanced staggered animation delays for Apple Watch feel */
.project-bubble:nth-child(2n) { animation-delay: -0.3s; }
.project-bubble:nth-child(3n) { animation-delay: -0.7s; }
.project-bubble:nth-child(4n) { animation-delay: -1.1s; }
.project-bubble:nth-child(5n) { animation-delay: -1.5s; }
.project-bubble:nth-child(6n) { animation-delay: -1.9s; }

/* Smoother floating animation */
@keyframes subtleFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-4px) scale(1.02); }
}

/* Hover effect that scales based on current size */
.project-bubble:hover { 
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
  background: rgba(255, 255, 255, 1);
  border-color: rgba(124, 58, 237, 0.3);
}

/* Click effect */
.project-bubble:active { 
  transform: scale(0.95); 
  transition-duration: 0.1s; 
}

/* Remove lens effect for now - focus on positioning first */
.projects__stage::before {
  display: none;
}

/* =======================
   Achievements Section - Vertical Timeline
   ======================= */
.achievements {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: #ffffff;
  color: #1a1a1a;
  min-height: 100vh;
}

.achievements .section-title {
  color: #1a1a1a;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
}

.achievements .section-subtitle {
  color: #666666;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
  line-height: 1.6;
}

.timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Vertical timeline line */
.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #7c3aed;
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-item {
  position: relative;
  margin-bottom: 3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; /* This should center all items */
  gap: 0;
  min-height: 120px; /* Ensure consistent height for alignment */
}

/* Position content on left side for odd items */
.timeline-item:nth-child(odd) .timeline-content {
  grid-column: 1;
  grid-row: 1;
  margin-right: 15px; /* Small gap from timeline */
  justify-self: end;
  align-self: center; /* Force center alignment */
}

.timeline-item:nth-child(odd) .timeline-date {
  grid-column: 2;
  grid-row: 1;
  align-self: center; /* Force center alignment */
}

/* Create empty placeholder for even items on left */
.timeline-item:nth-child(odd)::before {
  content: '';
  grid-column: 3;
  grid-row: 1;
}

/* Position content on right side for even items */
.timeline-item:nth-child(even) .timeline-content {
  grid-column: 3;
  grid-row: 1;
  margin-left: 15px; /* Small gap from timeline */
  justify-self: start;
  align-self: center; /* Force center alignment */
}

.timeline-item:nth-child(even) .timeline-date {
  grid-column: 2;
  grid-row: 1;
  align-self: center; /* Force center alignment */
}

/* Create empty placeholder for odd items on right */
.timeline-item:nth-child(even)::before {
  content: '';
  grid-column: 1;
  grid-row: 1;
}

.timeline-date {
  width: 80px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: #7c3aed;
  background: #ffffff;
  border: 2px solid #7c3aed;
  border-radius: 50px;
  padding: 0.5rem 1rem;
  position: relative;
  z-index: 2;
}

.timeline-content {
  width: 300px; /* Fixed width for consistency */
  background: #f8fafc;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #e2e8f0;
  position: relative;
}

/* Timeline content arrows for left side (odd items) */
.timeline-item:nth-child(odd) .timeline-content::before {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #f8fafc;
  z-index: 1;
}

.timeline-item:nth-child(odd) .timeline-content::after {
  content: '';
  position: absolute;
  right: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 13px solid #e2e8f0;
  z-index: 0;
}

/* Timeline content arrows for right side (even items) */
.timeline-item:nth-child(even) .timeline-content::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right: 12px solid #f8fafc;
  z-index: 1;
}

.timeline-item:nth-child(even) .timeline-content::after {
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-right: 13px solid #e2e8f0;
  z-index: 0;
}

.timeline-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0.5rem;
}

.timeline-description {
  color: #4a5568;
  line-height: 1.6;
  margin: 0;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .timeline::before {
    left: 30px;
  }

  .timeline-item {
    flex-direction: row !important;
    margin-left: 60px;
  }

  .timeline-item:nth-child(even) {
    flex-direction: row !important;
  }

  .timeline-date {
    position: absolute;
    left: -90px;
    flex: none;
    width: 80px;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }

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

  .timeline-content {
    margin-left: 0;
  }
}

/* =======================
   Hobbies Section - Moving Hobby Cards
   ======================= */
.hobbies {
  padding: clamp(3rem, 6vw, 4rem) 0 0 0; /* Reduced padding, no bottom padding */
  background: radial-gradient(ellipse 100% 50% at 50% -20%, #7c3aed 0%, transparent 60%), 
              linear-gradient(180deg, #2a0845 0%, #5a1a7a 100%);
  color: #ffffff;
  height: 100vh; /* Increased from 80vh to 90vh */
  position: relative; /* Added relative positioning */
  overflow: hidden;
}

.hobbies .section-title {
  color: #ffffff;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
}

.hobbies .section-subtitle {
  color: #e5d9ff;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 2rem; /* Reduced margin from 4rem to 2rem */
  line-height: 1.6;
}

.hobbies-content {
  position: relative;
  height: calc(100% - 120px); /* Take available height minus header space */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Changed from center to flex-start */
  align-items: center;
  padding-top: 1rem; /* Small top padding */
}

.hobby-rows {
  width: 100%;
  position: relative;
  z-index: 1;
}

.hobby-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem; /* Reduced from 2rem */
  width: max-content;
  animation-duration: 35s; /* Slower animation - increased from 20s to 35s */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.hobby-row--left {
  animation-name: scrollLeft;
}

.hobby-row--right {
  animation-name: scrollRight;
}

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

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

.hobby-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 1.25rem 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  transition: transform 0.3s ease;
}

.hobby-card:hover {
  transform: translateY(-5px);
}

.hobby-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}

.hobby-text {
  color: #1a1a1a;
  font-weight: 500;
  font-size: 1rem;
}

.hobby-avatar {
  position: absolute; /* Changed back from fixed to absolute */
  bottom: 0; /* Stick to section bottom */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 400px; /* Increased from 300px */
  height: 400px; /* Increased from 300px */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none; /* Allow interactions to pass through */
}

.hobby-avatar__image {
  width: 380px; /* Increased from 280px */
  height: 380px; /* Increased from 280px */
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hobby-card {
    padding: 1rem 1.5rem;
    gap: 0.5rem;
  }
  
  .hobby-icon {
    font-size: 1.25rem;
  }
  
  .hobby-text {
    font-size: 0.875rem;
  }
  
  .hobby-avatar {
    width: 200px;
    height: 200px;
  }
  
  .hobby-avatar__image {
    width: 180px;
    height: 180px;
  }
}

/* Project modal styles remain the same */
.project-modal { 
  position: fixed; 
  inset: 0; 
  z-index: 2000; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  opacity: 0; 
  visibility: hidden; 
  transition: opacity 0.3s ease, visibility 0.3s ease; 
}

.project-modal.open { 
  opacity: 1; 
  visibility: visible; 
}

.project-modal__backdrop { 
  position: absolute; 
  inset: 0; 
  background: rgba(0, 0, 0, 0.7); 
  backdrop-filter: blur(8px); 
}

.project-modal__content { 
  position: relative; 
  width: min(500px, 90%); 
  background: #ffffff; 
  border-radius: 20px; 
  padding: 2rem; 
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); 
  transform: scale(0.9) translateY(20px); 
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); 
  text-align: center;
}

.project-modal.open .project-modal__content { 
  transform: scale(1) translateY(0); 
}

.project-modal__close { 
  position: absolute; 
  top: 1rem; 
  right: 1rem; 
  width: 32px; 
  height: 32px; 
  border: none; 
  background: rgba(0, 0, 0, 0.1); 
  border-radius: 50%; 
  cursor: pointer; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 1.2rem; 
  color: #666;
  transition: background-color 0.2s ease;
}

.project-modal__close:hover { 
  background: rgba(0, 0, 0, 0.2); 
}

.project-modal__icon { 
  font-size: 3rem; 
  margin-bottom: 1rem; 
}

.project-modal__title { 
  margin: 0 0 0.5rem; 
  font-size: 1.5rem; 
  font-weight: 700; 
  color: #1a1a1a; 
}

.project-modal__description { 
  margin: 0 0 1rem; 
  color: #666; 
  line-height: 1.5; 
}

.project-modal__tech { 
  margin-bottom: 1.5rem; 
  display: flex; 
  flex-wrap: wrap; 
  gap: 0.5rem; 
  justify-content: center; 
}

.project-modal__tech::before { 
  content: attr(data-tech); 
}

.project-modal__actions { 
  display: flex; 
  gap: 1rem; 
  justify-content: center; 
}

/* Button styles for modal */
.btn { 
  padding: 0.75rem 1.5rem; 
  border-radius: 10px; 
  font-weight: 600; 
  text-decoration: none; 
  border: none; 
  cursor: pointer; 
  transition: all 0.2s ease; 
  display: inline-block;
}

.btn--primary { 
  background: #7c3aed; 
  color: #ffffff; 
}

.btn--primary:hover { 
  background: #6d28d9; 
  transform: translateY(-2px); 
}

.btn--ghost { 
  background: transparent; 
  color: #7c3aed; 
  border: 2px solid #7c3aed; 
}

.btn--ghost:hover { 
  background: #7c3aed; 
  color: #ffffff; 
  transform: translateY(-2px); 
}

@media (max-width: 768px) {
  .projects__stage {
    max-width: 95%;
    height: 50vh;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  .project-bubble { 
    width: 35px; 
    height: 35px; 
    font-size: 1rem;
    position: static !important;
    display: inline-block !important;
    margin: 5px !important;
    left: auto !important;
    top: auto !important;
  }
  
  .projects__stage::before {
    width: 100px;
    height: 100px;
  }
}

@media (max-width: 480px) {
  .project-bubble { 
    width: 30px; 
    height: 30px; 
    font-size: 0.8rem; 
  }
} 

/* =======================
   Blog Section
   ======================= */
.blog {
  padding: clamp(4rem, 8vw, 6rem) 0;
  background: #ffffff;
  color: #1a1a1a;
  min-height: 100vh;
}

.blog .section-title {
  color: #1a1a1a;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
}

.blog .section-subtitle {
  color: #666666;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem;
  line-height: 1.6;
}

/* Blog Filters */
.blog-filters {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  border: 2px solid #e2e8f0;
  background: #ffffff;
  color: #64748b;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.filter-btn:hover {
  border-color: #c8a2c8;
  background: #faf5ff;
  transform: translateY(-2px);
}

.filter-btn--active {
  border-color: #c8a2c8;
  background: #f3e8ff;
  color: #7c3aed;
}

.filter-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.filter-text {
  font-weight: 500;
}

/* Blog Grid */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Blog Cards */
.blog-card {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 280px; /* Fixed height to match mockup */
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
  border-color: #c8a2c8;
}

.blog-card__content {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 1rem;
  line-height: 1.4;
}

.blog-card__excerpt {
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 auto;
  font-size: 0.95rem;
}

.blog-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #f1f5f9;
  font-size: 0.875rem;
}

.blog-card__date {
  color: #64748b;
  font-weight: 500;
}

.blog-card__category {
  color: #7c3aed;
  font-weight: 500;
  background: #f3e8ff;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.8rem;
}

/* Blog Actions */
.blog-actions {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.btn--load-more {
  background: #c8a2c8;
  color: #ffffff;
  padding: 1rem 2.5rem;
  border-radius: 50px;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn--load-more:hover {
  background: #b794b7;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(200, 162, 200, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
  .blog-filters {
    gap: 0.75rem;
  }
  
  .filter-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
  }
  
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .blog-card {
    height: auto;
  }
  
  .blog-card__content {
    padding: 1.5rem;
  }
} 

/* =======================
   Contact Section
   ======================= */
.contact {
  padding: clamp(4rem, 8vw, 6rem) 0 0 0; /* Remove bottom padding */
  background: radial-gradient(ellipse 100% 50% at 50% -20%, #7c3aed 0%, transparent 60%), 
              linear-gradient(180deg, #2a0845 0%, #5a1a7a 100%);
  color: #ffffff;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Push content to top and bottom */
}

.contact .section-title {
  color: #ffffff;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
}

.contact .section-subtitle {
  color: #e5d9ff;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 4rem;
  line-height: 1.6;
}

/* Contact Content Layout */
.contact-content {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Align to bottom */
  position: relative;
  margin-top: auto; /* Push to bottom */
  margin-bottom: 0; /* Remove bottom margin */
}

/* Contact Card */
.contact-card {
  background: #ffffff;
  border-radius: 24px 24px 0 0; /* Remove bottom border radius */
  padding: 3rem 6rem 4rem 6rem; /* Add more bottom padding */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  max-width: 900px;
  width: 100%;
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 0; /* Ensure no bottom margin */
}

.contact-section {
  margin-bottom: 2.5rem;
}

.contact-section:last-child {
  margin-bottom: 0;
}

.contact-heading {
  color: #1a1a1a;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 1.5rem;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.contact-link {
  color: #64748b;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  padding: 0.25rem 0;
}

.contact-link:hover {
  color: #7c3aed;
  transform: translateY(-2px);
}

/* Contact Avatar */
.contact-avatar {
  position: absolute;
  left: 50px;
  bottom: 0;
  width: 450px;
  height: 450px;
  z-index: 2;
  pointer-events: none;
}

.contact-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2));
  animation: wave 2s ease-in-out infinite;
}

/* Waving animation for contact avatar */
@keyframes wave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

/* Remove old form styles */
.contact-form-container,
.contact-form,
.form-group,
.form-label,
.form-input,
.form-textarea,
.btn--contact,
.btn-text,
.btn-icon,
.contact-info,
.contact-item,
.contact-icon {
  display: none;
}

/* Responsive Design */
@media (max-width: 968px) {
  .contact-content {
    flex-direction: column;
    align-items: center;
  }
  
  .contact-card {
    padding: 3rem 2rem;
    margin-bottom: 2rem;
    max-width: 500px;
  }
  
  .contact-avatar {
    position: static;
    transform: none;
    width: 220px;
    height: 220px;
    margin-top: -30px;
  }
}

@media (max-width: 768px) {
  .contact-card {
    padding: 2.5rem 1.5rem;
    margin: 0 1rem 2rem;
  }
  
  .contact-heading {
    font-size: 1.5rem;
  }
  
  .contact-link {
    font-size: 1rem;
  }
  
  .contact-avatar {
    width: 180px;
    height: 180px;
    margin-top: -20px;
  }
}