.bio-section {
  display: grid;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-purple), transparent 93%) 0%,
    color-mix(in oklab, var(--accent-cyan), transparent 95%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.bio-section::before {
  content: '';
  position: absolute;
  inset: -200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    color-mix(in oklab, var(--accent-purple), transparent 70%) 30deg,
    transparent 60deg,
    color-mix(in oklab, var(--accent-cyan), transparent 70%) 180deg,
    transparent 210deg
  );
  animation: rotate 8s linear infinite;
  pointer-events: none;
}
.bio-section::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: var(--bg);
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
}
.bio-section > * { position: relative; z-index: 1; }

@keyframes rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.bio-text {
  font-size: clamp(var(--font-base), 1.5vw, var(--font-lg));
  line-height: 1.9;
  color: var(--ink);
}


.profile-picture { display: grid; place-items: center; }
.profile-picture img {
  inline-size: 100%;
  max-inline-size: 320px;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 3px solid var(--border);
  box-shadow: 0 12px 48px color-mix(in oklab, var(--accent-purple), transparent 80%);
  transition: all var(--transition-slow) ease;
  transform-style: preserve-3d;
}
.profile-picture img:hover {
  transform: perspective(1000px) rotateY(10deg) rotateX(-5deg) scale(1.05);
  box-shadow: 0 20px 80px color-mix(in oklab, var(--accent-purple), transparent 60%);
  border-color: var(--accent-purple);
}
.profile-picture figcaption {
  margin-block-start: var(--spacing-md);
  font-size: var(--font-sm);
  color: var(--muted);
  font-weight: 500;
}


.quick-facts {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  position: relative;
}
.quick-facts::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: 4px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan), var(--accent-pink));
  background-size: 200% 100%;
  animation: slideGradient 3s ease infinite;
  pointer-events: none;
}
@keyframes slideGradient {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 0%; }
}

.facts-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-md);
}
.facts-grid li {
  padding: var(--spacing-md);
  background: color-mix(in oklab, var(--surface-elevated), transparent 50%);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  transition: all var(--transition-base) ease;
  position: relative;
}
.facts-grid li::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  transition: opacity var(--transition-base) ease;
  pointer-events: none;
}
.facts-grid li:hover {
  transform: translateY(-4px);
  border-color: transparent;
}
.facts-grid li:hover::before { opacity: 1; }
.facts-grid li strong { color: var(--accent-purple); font-weight: 700; }


.skills-section {
  padding: var(--spacing-xl);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
}
.skills-section::before {
  content: '';
  position: absolute;
  inset-block-end: -50%;
  inset-inline-end: -20%;
  inline-size: 60%;
  block-size: 80%;
  background: radial-gradient(circle,
    color-mix(in oklab, var(--accent-cyan), transparent 85%) 0%,
    transparent 70%);
  animation: pulse 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulse {
  0%, 100% { transform: scale(1);   opacity: 0.3; }
  50%      { transform: scale(1.1); opacity: 0.5; }
}
.skills-section > * { position: relative; z-index: 1; }

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-lg);
  margin-block-end: var(--spacing-xl);
}

.skill-block {
  background: color-mix(in oklab, var(--surface-elevated), transparent 30%);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--spacing-lg);
  transition: all var(--transition-base) ease;
  position: relative;
}
.skill-block::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 3px;
  background: linear-gradient(90deg, var(--accent-purple), var(--accent-cyan));
  transition: inline-size var(--transition-base) ease;
  pointer-events: none;
}
.skill-block:hover {
  transform: translateY(-8px);
  border-color: var(--accent-purple);
  box-shadow: 0 12px 40px color-mix(in oklab, var(--accent-purple), transparent 80%);
}
.skill-block:hover::before { inline-size: 100%; }
.skill-block h3 {
  margin-block-start: 0;
  margin-block-end: var(--spacing-md);
  font-size: var(--font-xl);
}

.stack-list { list-style: none; padding: 0; }
.stack-list li {
  padding: var(--spacing-xs) 0;
  color: var(--muted);
  font-size: var(--font-sm);
  position: relative;
  padding-inline-start: var(--spacing-md);
}
.stack-list li::before {
  content: '✓';
  position: absolute;
  inset-inline-start: 0;
  color: var(--accent-cyan);
  font-weight: 700;
}

.resume-link {
  padding: var(--spacing-lg);
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-purple), transparent 90%) 0%,
    color-mix(in oklab, var(--accent-cyan), transparent 92%) 100%);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  text-align: center;
}
.resume-link span { color: var(--muted); margin-inline-end: var(--spacing-xs); }
.resume-link .link-primary:hover { color: var(--accent-cyan); }


.mission-card {
  background: var(--surface);
  padding: var(--spacing-xl);
  text-align: center;
  position: relative;
  border-radius: var(--radius);
}
.mission-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--accent-red), var(--accent-purple), var(--accent-cyan));
  border-radius: inherit;
  z-index: -1;
  background-size: 200% 200%;
  animation: gradientMove 4s ease infinite;
  pointer-events: none;
}
.mission-card h3 { font-size: var(--font-2xl); margin-block-end: var(--spacing-md); }
.mission-card p  { font-size: var(--font-base); line-height: 1.8; color: var(--muted); margin: 0; }
@keyframes gradientMove {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}


.experience-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-lg);
}
.xp-list { list-style: none; padding: 0; }
.xp-list > li {
  padding: var(--spacing-lg);
  margin-block-end: var(--spacing-md);
  background: color-mix(in oklab, var(--surface-elevated), transparent 50%);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--accent-purple);
  transition: all var(--transition-base) ease;
}
.xp-list > li:hover {
  border-inline-start-color: var(--accent-cyan);
  transform: translateX(8px);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent-purple), transparent 85%);
}
.xp-list > li strong { font-size: var(--font-lg); color: var(--ink); }
.xp-list > li ul { margin-block-start: var(--spacing-sm); padding-inline-start: var(--spacing-md); }
.xp-list > li ul li { color: var(--muted); font-size: var(--font-sm); }

.metric { color: var(--accent-cyan); font-weight: 700; }


.values-section {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--accent-purple), transparent 92%) 0%,
    color-mix(in oklab, var(--accent-cyan), transparent 94%) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--spacing-xl);
}
.principles {
  list-style: none;
  counter-reset: principle;
  padding: 0;
  display: grid;
  gap: var(--spacing-md);
}
.principles li {
  counter-increment: principle;
  padding: var(--spacing-lg);
  padding-inline-start: 4rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  position: relative;
  transition: all var(--transition-base) ease;
}
.principles li::before {
  content: counter(principle);
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: var(--spacing-md);
  transform: translateY(-50%);
  inline-size: 2rem;
  block-size: 2rem;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan));
  color: white;
  font-weight: 800;
  border-radius: 50%;
  font-size: var(--font-sm);
}
.principles li:hover {
  transform: translateX(8px);
  border-color: var(--accent-purple);
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent-purple), transparent 85%);
}
.principles li strong { color: var(--accent-purple); }

@media (max-width: 820px) {
  .bio-section,
  .skills-section,
  .mission-card,
  .values-section { padding: var(--spacing-lg); }

  .skills-grid { grid-template-columns: 1fr; }
  .facts-grid  { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .bio-section,
  .skills-section,
  .mission-card,
  .values-section { padding: var(--spacing-md); }

  .profile-picture img { max-inline-size: 100%; }
  .skill-block { padding: var(--spacing-md); }

  .principles li { padding-inline-start: 3rem; }
  .principles li::before {
    inset-inline-start: var(--spacing-sm);
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }
}