:root {
  /* ═══════════════════════════════════════════════════════════
     💝 FOR EVE - The day everything changed: October 4th, 2025
     Every variable, every animation, every line of code is a
     reminder of how you inspire me. This isn't just a website,
     it's a digital love letter celebrating your brilliance.
     ═══════════════════════════════════════════════════════════ */

  --the-day-i-asked-you-out: '2025-10-04';
  --days-of-loving-you: infinite;
  --reasons-why-youre-amazing: countless;

  /* Typography - crafted with love for the most amazing person */
  --font-display: 'Playfair Display', serif;
  --font-body: 'Outfit', sans-serif;

  /* Colors - Sophisticated green palette */
  --color-bg: #fafbfa;
  --color-bg-secondary: #f4f6f4;
  --color-bg-tertiary: #e8ede8;
  --color-text-primary: #0a1f0f;
  --color-text-secondary: #2d5a3f;
  --color-text-muted: #546e5e;

  /* Green accent system - evee-green-spectrum */
  --color-green-50: #f0fdf4;
  --color-green-100: #dcfce7;
  --color-green-200: #bbf7d0;
  --color-green-300: #86efac;
  --color-green-400: #4ade80;
  --color-green-500: #22c55e;
  --color-green-600: #16a34a;
  --color-green-700: #15803d;
  --color-green-800: #166534;
  --color-green-900: #14532d;

  /* Primary accent */
  --color-primary: var(--color-green-600);
  --color-primary-light: var(--color-green-500);
  --color-primary-dark: var(--color-green-700);

  /* Borders & Dividers */
  --color-border-light: rgba(22, 163, 74, 0.08);
  --color-border: rgba(22, 163, 74, 0.15);
  --color-border-strong: rgba(22, 163, 74, 0.25);

  /* Shadows - evee-shadow-gallery */
  --shadow-xs: 0 1px 2px rgba(10, 31, 15, 0.05);
  --shadow-sm: 0 2px 8px rgba(10, 31, 15, 0.08);
  --shadow-md: 0 4px 16px rgba(10, 31, 15, 0.1);
  --shadow-lg: 0 8px 32px rgba(22, 163, 74, 0.12);
  --shadow-xl: 0 16px 48px rgba(22, 163, 74, 0.15);
  --shadow-2xl: 0 24px 64px rgba(22, 163, 74, 0.18);

  /* Spacing scale */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Mode Theme */
[data-theme="dark"] {
  /* Dark backgrounds */
  --color-bg: #0a1410;
  --color-bg-secondary: #0f1e16;
  --color-bg-tertiary: #152820;

  /* Dark text colors */
  --color-text-primary: #e8f5e9;
  --color-text-secondary: #a5d6a7;
  --color-text-muted: #81c784;

  /* Adjusted green accent for dark mode */
  --color-green-50: #1b3a27;
  --color-green-100: #224d2f;
  --color-green-200: #2a6039;
  --color-green-300: #357544;
  --color-green-400: #4ade80;
  --color-green-500: #66de8f;
  --color-green-600: #4ade80;
  --color-green-700: #81e69a;
  --color-green-800: #a5edb5;
  --color-green-900: #c3f4cf;

  /* Dark mode primary colors */
  --color-primary: var(--color-green-500);
  --color-primary-light: var(--color-green-400);
  --color-primary-dark: var(--color-green-600);

  /* Dark borders */
  --color-border-light: rgba(74, 222, 128, 0.1);
  --color-border: rgba(74, 222, 128, 0.2);
  --color-border-strong: rgba(74, 222, 128, 0.3);

  /* Dark shadows with green tint */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(74, 222, 128, 0.15);
  --shadow-xl: 0 16px 48px rgba(74, 222, 128, 0.2);
  --shadow-2xl: 0 24px 64px rgba(74, 222, 128, 0.25);
}

/* ============================================
   COMPREHENSIVE DARK MODE OVERRIDES
   ============================================ */

/* Background overrides for ALL white backgrounds */
[data-theme="dark"] .hero-stats,
[data-theme="dark"] .stat-item,
[data-theme="dark"] .highlight-card,
[data-theme="dark"] .achievement-card,
[data-theme="dark"] .pillar,
[data-theme="dark"] .writing-card,
[data-theme="dark"] .blog-card,
[data-theme="dark"] .panel-content,
[data-theme="dark"] .blog-modal-content,
[data-theme="dark"] .modal-close,
[data-theme="dark"] .button.secondary,
[data-theme="dark"] .download-resume-mobile,
[data-theme="dark"] .coin-wrapper,
[data-theme="dark"] .achievement-badge,
[data-theme="dark"] .narrative-accordion,
[data-theme="dark"] .about-card,
[data-theme="dark"] .connect-card,
[data-theme="dark"] .social-link,
[data-theme="dark"] .certificate-download-btn {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

/* Header and navigation */
[data-theme="dark"] .site-header {
  background: rgba(10, 20, 16, 0.9) !important;
  border-bottom-color: var(--color-border);
}

[data-theme="dark"] .main-nav a,
[data-theme="dark"] .brand-name,
[data-theme="dark"] .brand-tagline {
  color: var(--color-text-secondary);
}

/* Hero section */
[data-theme="dark"] .hero-stats {
  background: var(--color-bg-secondary) !important;
}

[data-theme="dark"] .hero-image::before {
  opacity: 0.3;
}

[data-theme="dark"] .hero-image {
  border-color: var(--color-border);
}

/* Loading screen */
[data-theme="dark"] .loading-screen {
  background: var(--color-bg) !important;
}

[data-theme="dark"] .loading-backdrop {
  background: var(--color-bg-secondary) !important;
}

[data-theme="dark"] .coin-face--front,
[data-theme="dark"] .coin-face--back {
  background: var(--color-bg-tertiary) !important;
  color: var(--color-text-primary) !important;
}

/* Mobile navigation */
[data-theme="dark"] .mobile-sidebar {
  background: var(--color-bg-secondary) !important;
  border-left-color: var(--color-border);
}

[data-theme="dark"] .mobile-sidebar-backdrop {
  background: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .mobile-menu-toggle span {
  background: var(--color-text-primary) !important;
}

/* Narrative and about sections */
[data-theme="dark"] .narrative-panel {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .narrative-header {
  background: transparent !important;
}

[data-theme="dark"] .narrative-content {
  background: var(--color-bg-tertiary) !important;
}

[data-theme="dark"] .narrative-philosophy {
  background: var(--color-bg-tertiary) !important;
}

[data-theme="dark"] .philosophy-content {
  background: transparent !important;
}

/* Buttons */
[data-theme="dark"] .button.primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-400)) !important;
  color: var(--color-bg) !important;
}

[data-theme="dark"] .button.secondary {
  background: transparent !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Panels and modals */
[data-theme="dark"] .panel-photo,
[data-theme="dark"] .panel-certificate {
  background: var(--color-bg-tertiary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .panel-image-section {
  background: transparent !important;
}

[data-theme="dark"] .panel-info-section {
  background: transparent !important;
}

[data-theme="dark"] .panel-backdrop {
  background: rgba(0, 0, 0, 0.8) !important;
}

[data-theme="dark"] .modal-backdrop {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* Achievement categories */
[data-theme="dark"] .achievement-category-header {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
}

[data-theme="dark"] .achievement-category-grid {
  background: transparent !important;
}

/* Highlights section */
[data-theme="dark"] .highlights-grid {
  background: transparent !important;
}

[data-theme="dark"] .highlight-content {
  background: transparent !important;
}

[data-theme="dark"] .highlight-image {
  border-color: var(--color-border) !important;
}

/* Sections with gradient backgrounds */
[data-theme="dark"] .blog-section {
  background: linear-gradient(180deg, var(--color-bg), var(--color-bg-secondary)) !important;
}

[data-theme="dark"] .section.highlights {
  background: linear-gradient(180deg, var(--color-bg-secondary), var(--color-bg)) !important;
}

[data-theme="dark"] .section.writing {
  background: linear-gradient(180deg, var(--color-bg), var(--color-bg-secondary)) !important;
}

/* Footer */
[data-theme="dark"] .site-footer {
  background: var(--color-bg-secondary) !important;
  border-top-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

/* Scroll progress and back to top */
[data-theme="dark"] .scroll-progress-bar {
  background: var(--color-primary) !important;
}

[data-theme="dark"] .back-to-top {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-primary) !important;
}

[data-theme="dark"] .back-to-top:hover {
  background: var(--color-primary) !important;
  color: var(--color-bg) !important;
}

/* Contact section */
[data-theme="dark"] .contact-cta {
  background: transparent !important;
}

[data-theme="dark"] .connect-links a {
  color: var(--color-text-secondary) !important;
}

/* Badges and special elements */
[data-theme="dark"] .badge,
[data-theme="dark"] .tag {
  background: var(--color-bg-tertiary) !important;
  color: var(--color-primary) !important;
}

/* Download resume button */
[data-theme="dark"] .download-resume-btn,
[data-theme="dark"] .download-resume-mobile {
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-400)) !important;
  color: var(--color-bg) !important;
}

/* Involvement/Pillars section */
[data-theme="dark"] .pillars {
  background: transparent !important;
}

[data-theme="dark"] .pillar-badge {
  background: var(--color-bg-tertiary) !important;
  color: var(--color-primary) !important;
}

[data-theme="dark"] .pillar-cta {
  color: var(--color-primary) !important;
}

/* Writing section */
[data-theme="dark"] .writing-grid {
  background: transparent !important;
}

[data-theme="dark"] .writing-icon {
  background: var(--color-bg-tertiary) !important;
  color: var(--color-primary) !important;
}

[data-theme="dark"] .writing-cta {
  color: var(--color-primary) !important;
}

/* Blog/Activity feed - already covered above but adding specifics */
[data-theme="dark"] .blog-category {
  background: var(--color-green-200) !important;
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .blog-date {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .blog-read-more {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: transparent !important;
}

[data-theme="dark"] .blog-read-more:hover {
  background: var(--color-primary) !important;
  color: var(--color-bg) !important;
}

/* Section headings */
[data-theme="dark"] .section-heading {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .section-heading h2 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .section-heading p {
  color: var(--color-text-secondary) !important;
}

/* Category icons and markers */
[data-theme="dark"] .category-icon,
[data-theme="dark"] .section-marker {
  color: var(--color-primary) !important;
}

/* Highlight underlines and accents */
[data-theme="dark"] .highlight-green::after {
  background: linear-gradient(90deg, var(--color-green-300), var(--color-green-400)) !important;
}

/* Coin/Loading animation */
[data-theme="dark"] .coin-inner {
  background: transparent !important;
}

[data-theme="dark"] .coin-front-title,
[data-theme="dark"] .coin-back-caption {
  color: var(--color-text-primary) !important;
}

/* Scroll indicator */
[data-theme="dark"] .scroll-indicator {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .scroll-indicator svg {
  color: var(--color-primary) !important;
}

/* Achievement legend */
[data-theme="dark"] .achievement-legend {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .legend-dot {
  background: var(--color-primary) !important;
}

/* Quote marks and special typography */
[data-theme="dark"] .quote-mark {
  color: var(--color-primary) !important;
  opacity: 0.3;
}

[data-theme="dark"] blockquote {
  border-left-color: var(--color-primary) !important;
  color: var(--color-text-secondary) !important;
}

/* Links and interactive elements */
[data-theme="dark"] a {
  color: var(--color-primary) !important;
}

[data-theme="dark"] a:hover {
  color: var(--color-green-400) !important;
}

/* Form elements if any */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background: var(--color-bg-tertiary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

/* Panel sections */
[data-theme="dark"] .panel-body {
  background: transparent !important;
}

[data-theme="dark"] .panel-summary,
[data-theme="dark"] .panel-meta,
[data-theme="dark"] .panel-meta li {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] #panel-title {
  color: var(--color-text-primary) !important;
}

/* Narrative accordion */
[data-theme="dark"] .narrative-header {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .narrative-heading h3 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .narrative-summary {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .narrative-caret {
  color: var(--color-primary) !important;
}

[data-theme="dark"] .narrative-content p {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .lead-narrative {
  color: var(--color-text-secondary) !important;
}

/* About section specifics */
[data-theme="dark"] .about-narrative {
  background: transparent !important;
}

[data-theme="dark"] .narrative-intro {
  background: transparent !important;
}

[data-theme="dark"] .about-connect {
  background: transparent !important;
}

[data-theme="dark"] .about-connect h3 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .about-connect p {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .connect-link {
  background: var(--color-bg-secondary) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .connect-link:hover {
  background: var(--color-bg-tertiary) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}

/* Category titles and headers */
[data-theme="dark"] .category-title {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .achievement-category {
  background: transparent !important;
}

/* Twitter feed dark mode support */
[data-theme="dark"] .twitter-feed-container {
  background: transparent !important;
}

[data-theme="dark"] .twitter-feed-header h3 {
  color: var(--color-text-primary) !important;
}

/* Activity feed items (additional coverage) */
[data-theme="dark"] .activity-icon svg {
  color: white !important;
}

/* Post body content */
[data-theme="dark"] .blog-post-body h1,
[data-theme="dark"] .blog-post-body h2,
[data-theme="dark"] .blog-post-body h3 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .blog-post-body p,
[data-theme="dark"] .blog-post-body li {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .blog-post-body a {
  color: var(--color-primary) !important;
}

[data-theme="dark"] .blog-post-body a:hover {
  color: var(--color-green-400) !important;
}

[data-theme="dark"] .blog-post-header {
  border-bottom-color: var(--color-border) !important;
}

/* Hero title and text */
[data-theme="dark"] .hero-title {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .hero-lead {
  color: var(--color-text-secondary) !important;
}

/* Achievement and category specific */
[data-theme="dark"] .achievement-card h3,
[data-theme="dark"] .achievement-card p {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .achievement-card span {
  color: var(--color-text-secondary) !important;
}

/* Pillar specific */
[data-theme="dark"] .pillar h3 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .pillar ul li {
  color: var(--color-text-secondary) !important;
}

/* Writing card specific */
[data-theme="dark"] .writing-card h3 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .writing-card p {
  color: var(--color-text-secondary) !important;
}

/* Highlight card specific */
[data-theme="dark"] .highlight-card h3 {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .highlight-card p {
  color: var(--color-text-secondary) !important;
}

/* Make sure SVG icons adapt */
[data-theme="dark"] svg {
  color: inherit !important;
}

/* Panel close button */
[data-theme="dark"] .panel-close {
  color: var(--color-text-muted) !important;
  background: transparent !important;
}

[data-theme="dark"] .panel-close:hover {
  color: var(--color-primary) !important;
}

/* Mobile sidebar nav links */
[data-theme="dark"] .mobile-sidebar-nav a {
  color: var(--color-text-secondary) !important;
}

[data-theme="dark"] .mobile-sidebar-nav a:hover {
  color: var(--color-primary) !important;
  background: var(--color-bg-tertiary) !important;
}

[data-theme="dark"] .mobile-sidebar-header {
  border-bottom-color: var(--color-border) !important;
}

[data-theme="dark"] .mobile-sidebar-title {
  color: var(--color-text-primary) !important;
}

[data-theme="dark"] .mobile-sidebar-close {
  color: var(--color-text-muted) !important;
}

[data-theme="dark"] .mobile-sidebar-close:hover {
  color: var(--color-primary) !important;
}

/* END OF COMPREHENSIVE DARK MODE OVERRIDES */

/* Theme transition */
* {
  transition: background-color var(--transition-base),
              color var(--transition-base),
              border-color var(--transition-base);
}

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

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1, 'liga' 1;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
}

.page-shell {
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.page-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    radial-gradient(circle 800px at 10% 20%, var(--color-green-100), transparent 70%),
    radial-gradient(circle 600px at 90% 80%, var(--color-green-50), transparent 70%),
    radial-gradient(circle 400px at 50% 50%, var(--color-green-50), transparent 60%);
  background-repeat: no-repeat;
  transition: opacity var(--transition-slow);
}

.page-shell::after {
  content: 'evee-youre-soo-cool';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--color-bg);
  pointer-events: none;
  font-size: 0;
  color: transparent;
  transition: background-color var(--transition-slow);
}

body:not(.site-ready) .page-shell > main,
body:not(.site-ready) .page-shell > footer {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: blur(14px);
  pointer-events: none;
}

body.site-ready .page-shell > main,
body.site-ready .page-shell > footer {
  pointer-events: auto;
  animation: revealingYourBrilliance 1s cubic-bezier(0.21, 0.82, 0.25, 1) forwards;
}

/* Header - evee-navigation-excellence */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) clamp(var(--space-xl), 5vw, var(--space-4xl));
  backdrop-filter: blur(16px) saturate(180%);
  background: rgba(250, 251, 250, 0.85);
  border-bottom: 1px solid var(--color-border-light);
  transition: all var(--transition-base);
  will-change: transform, opacity;
  transform: translateZ(0);
}

body:not(.site-ready) .site-header {
  opacity: 0;
  transform: translateY(-48px);
  filter: blur(14px);
  pointer-events: none;
}

body.site-ready .site-header {
  animation: headerReveal 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: transform 0.7s cubic-bezier(0.24, 0.86, 0.31, 1), opacity 0.7s cubic-bezier(0.24, 0.86, 0.31, 1), filter 0.7s ease;
}

body:not(.site-ready) .brand {
  opacity: 0;
  transform: translateY(-12px) scale(0.92);
  filter: blur(12px);
}

body.site-ready .brand {
  animation: brandGlow 0.9s cubic-bezier(0.2, 1, 0.32, 1) forwards;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.3px;
  color: var(--color-text-primary);
  font-weight: 600;
  transition: color var(--transition-base);
}

.brand:hover .brand-name {
  color: var(--color-primary);
}

.brand-tagline {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.main-nav {
  display: flex;
  gap: var(--space-xl);
  font-size: 0.9375rem;
}

.main-nav a {
  position: relative;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 600;
  padding: var(--space-xs) 0;
  transition:
    color var(--transition-base),
    transform 0.7s cubic-bezier(0.2, 1, 0.32, 1),
    opacity 0.7s cubic-bezier(0.2, 1, 0.32, 1),
    filter 0.7s ease;
}

body:not(.site-ready) .main-nav a {
  opacity: 0;
  transform: translateY(26px) scale(0.86);
  filter: blur(12px);
}

body.site-ready .main-nav a {
  animation: navDustReveal 0.9s cubic-bezier(0.2, 1, 0.32, 1) forwards;
}

body.site-ready .main-nav a:nth-of-type(1) { animation-delay: 0.32s; }
body.site-ready .main-nav a:nth-of-type(2) { animation-delay: 0.41s; }
body.site-ready .main-nav a:nth-of-type(3) { animation-delay: 0.5s; }
body.site-ready .main-nav a:nth-of-type(4) { animation-delay: 0.59s; }
body.site-ready .main-nav a:nth-of-type(5) { animation-delay: 0.68s; }

.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--color-primary), var(--color-green-400));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.main-nav a:hover,
.main-nav a:focus {
  color: var(--color-primary);
}

.main-nav a:hover::after,
.main-nav a:focus::after {
  transform: scaleX(1);
}

main {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-block: 0;
}

section {
  padding-inline: clamp(var(--space-md), 5vw, var(--space-4xl));
  max-width: 100%;
  overflow-x: hidden;
}

/* ════════════════════════════════════════════════════════════════
   Hero Section - Where your brilliance shines brightest
   Just like you light up every room you enter, this section
   welcomes everyone to your incredible journey
   ════════════════════════════════════════════════════════════════ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-block: var(--space-4xl);
  overflow: hidden;
}

.hero-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl);
  align-items: center;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  overflow: hidden;
}

.hero-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  animation: theFirstTimeISawYou 1s ease-out;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-text-primary);
  font-weight: 700;
  animation: howYouLiftMeUp 0.8s ease-out 0.2s both;
}

.highlight-green {
  position: relative;
  color: var(--color-primary);
  display: inline-block;
}

.highlight-green::after {
  content: '';
  position: absolute;
  bottom: 0.1em;
  left: 0;
  right: 0;
  height: 0.3em;
  background: linear-gradient(90deg, var(--color-green-200), var(--color-green-300));
  opacity: 0.4;
  z-index: -1;
  border-radius: 4px;
  animation: scaleIn 0.6s ease-out 0.7s both;
  transform-origin: left;
}

.hero-lead {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  max-width: 600px;
  margin: 0;
  animation: howYouLiftMeUp 0.8s ease-out 0.5s both;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  padding: var(--space-xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  animation: howYouLiftMeUp 0.8s ease-out 0.6s both;
  transition: all var(--transition-base);
}

.hero-stats:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--transition-base);
}

.stat-item:hover {
  transform: scale(1.05);
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-display);
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: var(--space-xs);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  animation: howYouLiftMeUp 0.8s ease-out 0.7s both;
}

.hero-image {
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-2xl);
  border: 3px solid white;
  animation: youChangedEverything 1s ease-out 0.4s both;
  transition: all var(--transition-slow);
  align-self: start;
  margin-top: calc(var(--space-lg) * -1);
}

.hero-image::before {
  content: '';
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 25%, rgba(59, 130, 246, 0.22), transparent 60%),
    radial-gradient(circle at 75% 80%, rgba(74, 222, 128, 0.2), transparent 65%);
  opacity: 0.85;
  pointer-events: none;
  mix-blend-mode: screen;
  animation: theGlowYouBringToMyLife 12s ease-in-out infinite;
  transition: opacity var(--transition-slow);
}

.hero-image:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 32px 80px rgba(22, 163, 74, 0.25);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slower);
}

.hero-image:hover img {
  transform: scale(1.05);
}

.scroll-indicator {
  position: absolute;
  bottom: 8rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  font-size: 0.875rem;
  font-weight: 500;
  animation: myHeartBeatsForYou 2s ease-in-out infinite;
  z-index: 2;
  cursor: pointer;
  transition: all var(--transition-base);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.scroll-indicator:hover {
  color: var(--color-primary);
  transform: translateX(-50%) scale(1.05);
  animation: none;
}

.scroll-indicator svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  transition: all var(--transition-base);
}

.scroll-indicator:hover svg {
  transform: translateY(4px);
}

/* 💕 This animation reminds me of my heart when I see you */
@keyframes myHeartBeatsForYou {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* Section navigation buttons - guiding people through your amazing journey */
.section-nav-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: var(--space-3xl) auto;
  padding: var(--space-lg) var(--space-2xl);
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: white;
  border: none;
  border-radius: var(--radius-full);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
  text-decoration: none;
  gap: var(--space-sm);
}

.section-nav-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-xl);
}

.section-nav-button:active {
  transform: translateY(-1px);
}

.section-nav-button svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-base);
}

.section-nav-button:hover svg {
  transform: translateY(4px);
}

[data-theme="dark"] .section-nav-button {
  background: linear-gradient(135deg, var(--color-green-500), var(--color-green-400)) !important;
  color: var(--color-bg) !important;
  box-shadow: 0 8px 32px rgba(74, 222, 128, 0.3) !important;
}

[data-theme="dark"] .section-nav-button:hover {
  box-shadow: 0 12px 40px rgba(74, 222, 128, 0.5) !important;
  transform: translateY(-3px);
}

/* ════════════════════════════════════════════════════════════════
   ✨ ANIMATIONS - Each one named after how you make me feel ✨
   Every gentle fade, every graceful movement reminds me of you
   ════════════════════════════════════════════════════════════════ */

/* Like how you appeared in my life - beautifully, softly */
@keyframes theWayYouEnteredMyLife {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* How you lifted me up from the very first moment */
@keyframes howYouLiftMeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Like the moment I first saw you - from the left, unexpectedly perfect */
@keyframes theFirstTimeISawYou {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* How you walked into my world and changed everything */
@keyframes youChangedEverything {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Like revealing the most beautiful thing I've ever seen */
@keyframes revealingYourBrilliance {
  0% {
    opacity: 0;
    transform: translateY(42px) scale(0.96);
    filter: blur(18px);
  }
  55% {
    opacity: 1;
    transform: translateY(-6px) scale(1.005);
    filter: blur(6px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes headerReveal {
  0% {
    opacity: 0;
    transform: translateY(-72px);
    filter: blur(18px);
  }
  60% {
    opacity: 1;
    transform: translateY(8px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes brandGlow {
  0% {
    opacity: 0;
    transform: translateY(-18px) scale(0.9);
    filter: blur(12px);
  }
  40% {
    opacity: 1;
    transform: translateY(6px) scale(1.02);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes navDustReveal {
  0% {
    opacity: 0;
    transform: translateY(32px) scale(0.82) rotate(-1.5deg);
    filter: blur(18px);
  }
  65% {
    opacity: 1;
    transform: translateY(-6px) scale(1.04) rotate(0.25deg);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* The radiant glow you bring to my life */
@keyframes theGlowYouBringToMyLife {
  0%, 100% {
    transform: scale(1);
    opacity: 0.75;
  }
  50% {
    transform: scale(1.05) translate(-2%, -2%);
    opacity: 1;
  }
}

/* Like how my heart pulses when I think of you */
@keyframes myHeartWhenIThinkOfYou {
  0%, 100% {
    box-shadow: 0 12px 28px rgba(20, 83, 45, 0.12);
  }
  50% {
    box-shadow: 0 18px 36px rgba(22, 101, 52, 0.2);
  }
}

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

.hero {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-size: 0.75rem;
  color: var(--color-accent);
  font-weight: 600;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
  line-height: 1.2;
  color: var(--color-text);
}

h1 {
  font-size: clamp(2.6rem, 4.8vw, 3.8rem);
  letter-spacing: -0.5px;
}

h2 {
  font-size: clamp(2.1rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}

.lead {
  font-size: 1.1rem;
  color: var(--color-muted);
  max-width: 620px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Buttons - evee-button-artistry */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-lg) var(--space-2xl);
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.button svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-base);
}

.button.primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-500));
  color: white;
  box-shadow: var(--shadow-lg);
  border-color: var(--color-primary);
}

.button.primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--color-green-500), var(--color-green-400));
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: 0;
}

.button.primary span,
.button.primary svg {
  position: relative;
  z-index: 1;
}

.button.primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-2xl);
}

.button.primary:hover::before {
  opacity: 1;
}

.button.primary:hover svg {
  transform: translateX(4px);
}

.button.primary:active {
  transform: translateY(-1px) scale(1);
}

.button.secondary {
  background: white;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.button.secondary:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-green-50);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.button.secondary:active {
  transform: translateY(-1px);
}

.button.ghost {
  background: transparent;
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.button.ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-green-50);
}

.hero-art {
  position: relative;
  display: grid;
  gap: 1.5rem;
}

.hero-card {
  position: relative;
  padding: 1.75rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(6px);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}

.hero-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #10b981, #34d399, #6ee7b7);
  border-radius: 24px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.4s ease;
}

.hero-card p {
  margin: 0.75rem 0 0;
  color: var(--color-muted);
}

.hero-card .card-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #16a34a;
  text-shadow: 0 1px 2px rgba(21, 128, 61, 0.15);
}

.hero-card.floating {
  transform: translateY(10px);
}

.hero-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 64px rgba(21, 128, 61, 0.18);
}

.hero-card:hover::before {
  opacity: 0.08;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  padding-block: 5rem;
}

.section-heading {
  max-width: 600px;
  animation: howYouLiftMeUp 0.8s ease-out;
}

.section-heading h2 {
  margin-bottom: var(--space-md);
}

.section-heading.centered {
  text-align: center;
  max-width: 700px;
  margin-inline: auto;
}

.section-heading.wide {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  max-width: none;
}

.section-heading p {
  margin: 0.5rem 0 0;
  color: var(--color-text-muted);
  font-size: 1.125rem;
  line-height: 1.7;
}

.about-hero {
  display: flex;
  justify-content: center;
  margin-block: 2rem;
}

.about-spotlight {
  max-width: 900px;
  width: 100%;
}

.spotlight-quote {
  position: relative;
  padding: 2.5rem 3rem;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(236, 253, 243, 0.95), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(21, 128, 61, 0.15);
  box-shadow: 0 28px 60px rgba(21, 128, 61, 0.12);
  backdrop-filter: blur(10px);
}

.quote-icon {
  width: 42px;
  height: 42px;
  color: var(--color-accent);
  opacity: 0.3;
  margin-bottom: 1.25rem;
}

.spotlight-quote p {
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--color-text);
  margin: 0;
  font-weight: 400;
}

.about-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-block: 3rem;
}

.about-card {
  position: relative;
  padding: 2.25rem;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
}

.about-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-accent), #34d399);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.about-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 32px 70px rgba(15, 23, 42, 0.15);
  border-color: rgba(21, 128, 61, 0.2);
}

.about-card:hover::before {
  opacity: 1;
}

.card-icon {
  width: 54px;
  height: 54px;
  padding: 12px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.1), rgba(52, 211, 153, 0.08));
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-accent);
}

.about-card h3 {
  font-size: 1.5rem;
  margin: 0;
}

.about-card > p {
  color: var(--color-muted);
  line-height: 1.7;
  margin: 0;
  font-size: 1rem;
}

.about-highlights {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.about-highlights li {
  position: relative;
  padding-left: 1.75rem;
  color: var(--color-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.about-highlights li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px rgba(21, 128, 61, 0.12);
}

.connect-card {
  margin-top: 2.5rem;
  padding: 3rem;
  border-radius: 32px;
  background: linear-gradient(135deg, rgba(21, 128, 61, 0.04), rgba(52, 211, 153, 0.04));
  border: 1px solid rgba(21, 128, 61, 0.15);
  box-shadow: 0 24px 56px rgba(21, 128, 61, 0.1);
}

.connect-content {
  text-align: center;
  max-width: 800px;
  margin-inline: auto;
}

.connect-content h3 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.connect-content > p {
  color: var(--color-muted);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  justify-content: center;
  align-items: center;
}

.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(21, 128, 61, 0.15);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.social-link svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent);
  transition: transform 0.3s ease;
}

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(21, 128, 61, 0.2);
  border-color: var(--color-accent);
  background: rgba(236, 253, 243, 0.95);
}

.social-link:hover svg {
  transform: scale(1.1);
}

.social-link.email:hover {
  background: rgba(239, 246, 255, 0.95);
  border-color: #3b82f6;
}

.social-link.email:hover svg {
  color: #3b82f6;
}

.social-link.twitter:hover {
  background: rgba(240, 249, 255, 0.95);
  border-color: #0ea5e9;
}

.social-link.twitter:hover svg {
  color: #0ea5e9;
}

.social-link.github:hover {
  background: rgba(244, 244, 245, 0.95);
  border-color: #3f3f46;
}

.social-link.github:hover svg {
  color: #3f3f46;
}

.highlights {
  background: var(--color-bg);
}

.highlights-grid {
  display: grid;
  gap: var(--space-3xl);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.highlight-card {
  border-radius: var(--radius-xl);
  background: white;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-slow);
}

.highlight-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-2xl);
  border-color: var(--color-primary);
}

.highlight-image {
  width: 100%;
  height: 280px;
  overflow: hidden;
  position: relative;
}

.highlight-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 31, 15, 0.2) 100%);
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.highlight-card:hover .highlight-image::after {
  opacity: 0.7;
}

.highlight-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slower);
}

.highlight-card:hover .highlight-image img {
  transform: scale(1.1);
}

.highlight-content {
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  flex-grow: 1;
}

.highlight-content h3 {
  font-size: 1.625rem;
  color: var(--color-primary);
  margin: 0;
  font-family: var(--font-display);
  transition: color var(--transition-base);
}

.highlight-card:hover .highlight-content h3 {
  color: var(--color-primary-dark);
}

.highlight-content p {
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin: 0;
  font-size: 1.0625rem;
}

.achievements {
  position: relative;
  background: white;
  padding-bottom: var(--space-4xl);
  margin-bottom: var(--space-3xl);
}

.achievement-legend {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  animation: theWayYouEnteredMyLife 0.8s ease-out 0.3s both;
}

.legend-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-green-100);
  animation: pulse 2s ease-in-out infinite;
}

.achievements-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4xl);
}

.achievement-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-bottom: var(--space-3xl);
}

.achievement-category:last-child {
  margin-bottom: 0;
}

.achievement-category-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border-light);
  transition: all var(--transition-base);
}

.category-icon {
  width: 56px;
  height: 56px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.category-icon svg {
  width: 100%;
  height: 100%;
  color: var(--color-primary);
  transition: all var(--transition-base);
}

.category-title {
  font-size: 1.875rem;
  font-family: var(--font-display);
  color: var(--color-text-primary);
  margin: 0;
  transition: color var(--transition-base);
}

.achievement-category:hover .category-icon {
  background: var(--color-bg-tertiary);
  border-color: var(--color-primary);
  transform: scale(1.05) rotate(2deg);
  box-shadow: var(--shadow-md);
}

.achievement-category:hover .category-title {
  color: var(--color-primary);
}

.achievement-category-grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.achievement-card {
  position: relative;
  padding: var(--space-2xl);
  padding-right: var(--space-4xl);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  background: white;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.achievement-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-green-400), var(--color-green-300));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.achievement-card::after {
  content: '→';
  position: absolute;
  right: var(--space-xl);
  bottom: var(--space-md);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-primary);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.achievement-card:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-2xl);
}

.achievement-card:hover::before {
  transform: scaleX(1);
}

.achievement-card:hover::after {
  opacity: 1;
  transform: translateX(0);
}

.achievement-card span {
  font-size: 0.875rem;
  color: var(--color-primary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.achievement-card h3 {
  font-size: 1.5rem;
  line-height: 1.3;
  margin: 0;
  font-family: var(--font-display);
}

.achievement-card p {
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin: 0;
  font-size: 1.0625rem;
}

.involvement {
  background: var(--color-bg);
}

.pillars {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.pillar {
  position: relative;
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  background: white;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  transition: all 0.4s ease;
}

.pillar.interactive-pillar {
  cursor: pointer;
  overflow: hidden;
}

.pillar.interactive-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-green-400));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.pillar.interactive-pillar:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
  border-color: var(--color-primary);
}

.pillar.interactive-pillar:hover::before {
  transform: scaleX(1);
}

.pillar-badge {
  width: 60px;
  height: 60px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}

.pillar.interactive-pillar:hover .pillar-badge {
  background: var(--color-bg-tertiary);
  border-color: var(--color-primary);
  transform: scale(1.1) rotate(5deg);
}

.pillar-badge svg {
  width: 100%;
  height: 100%;
  color: var(--color-primary);
}

.pillar h3 {
  font-size: 1.625rem;
  font-family: var(--font-display);
}

.pillar ul {
  margin: 0;
  padding-left: var(--space-lg);
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex-grow: 1;
  line-height: 1.75;
}

.pillar ul li {
  font-size: 1.0625rem;
}

.pillar-cta {
  margin-top: auto;
  padding-top: var(--space-lg);
  color: var(--color-primary);
  font-weight: 600;
  font-size: 1rem;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.pillar.interactive-pillar:hover .pillar-cta {
  opacity: 1;
  transform: translateX(8px);
}

.writing {
  background: white;
}

.writing-grid {
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.writing-card {
  position: relative;
  padding: var(--space-3xl);
  border-radius: var(--radius-xl);
  background: white;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  transition: all 0.4s ease;
}

.writing-card.interactive-writing {
  cursor: pointer;
  overflow: hidden;
}

.writing-card.interactive-writing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6, #d946ef);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.writing-card.interactive-writing:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 64px rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.3);
}

.writing-card.interactive-writing:hover::before {
  transform: scaleX(1);
}

.writing-icon {
  width: 60px;
  height: 60px;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.1));
  background-size: 180% 180%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  animation: gradientShift 8s ease-in-out infinite;
}

.writing-card.interactive-writing:hover .writing-icon {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.25), rgba(139, 92, 246, 0.15));
  transform: scale(1.1) rotate(-5deg);
}

.writing-icon svg {
  width: 100%;
  height: 100%;
  color: #6366f1;
}

.writing-card h3 {
  font-size: 1.625rem;
  font-family: var(--font-display);
}

.writing-card > p {
  color: var(--color-text-secondary);
  line-height: 1.8;
  flex-grow: 1;
  font-size: 1.0625rem;
}

.writing-cta {
  margin-top: auto;
  padding-top: var(--space-lg);
  color: #6366f1;
  font-weight: 600;
  font-size: 1rem;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.writing-card.interactive-writing:hover .writing-cta {
  opacity: 1;
  transform: translateX(8px);
}

.contact {
  background: var(--color-bg);
}

.contact-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  justify-content: center;
  animation: howYouLiftMeUp 0.8s ease-out 0.4s both;
}

.site-footer {
  padding: 4rem clamp(var(--space-xl), 5vw, var(--space-4xl));
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  background: var(--color-green-900);
  color: rgba(255, 255, 255, 0.7);
}

.site-footer p {
  margin: 0;
}

.achievement-panel {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 20;
}

.achievement-panel.open {
  pointer-events: all;
}

.panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.achievement-panel.open .panel-backdrop {
  opacity: 1;
}

.panel-content {
  position: relative;
  width: min(480px, 100%);
  height: 100%;
  background: rgba(255, 255, 255, 0.96);
  border-left: 1px solid rgba(21, 128, 61, 0.1);
  transform: translateX(100%);
  transition: transform 0.4s ease;
  display: flex;
  flex-direction: column;
}

.achievement-panel.open .panel-content {
  transform: translateX(0);
  box-shadow: -32px 0 96px rgba(15, 23, 42, 0.25);
}

.panel-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-muted);
  transition: color 0.2s ease;
}

.panel-close:hover {
  color: var(--color-text);
}

.panel-body {
  display: grid;
  gap: 1.75rem;
  padding: 3.75rem 2.5rem 2.5rem;
  overflow-y: auto;
}

.panel-media {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.panel-photo,
.panel-certificate {
  border-radius: 18px;
  border: 1px dashed rgba(21, 128, 61, 0.3);
  background: rgba(236, 253, 243, 0.6);
  min-height: 180px;
  display: grid;
  place-items: center;
  font-size: 0.9rem;
  color: var(--color-accent);
  text-align: center;
  padding: 1rem;
}

.panel-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel-summary {
  color: var(--color-muted);
  font-size: 1rem;
}

.panel-meta {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  color: var(--color-muted);
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(32px) scale(0.98);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.9s cubic-bezier(0.4, 0, 0.2, 1),
              filter 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Staggered animation delays for grid items */
.highlights-grid .scroll-reveal:nth-child(1) { transition-delay: 0.1s; }
.highlights-grid .scroll-reveal:nth-child(2) { transition-delay: 0.2s; }
.highlights-grid .scroll-reveal:nth-child(3) { transition-delay: 0.3s; }
.highlights-grid .scroll-reveal:nth-child(4) { transition-delay: 0.4s; }

.about-grid .scroll-reveal:nth-child(1) { transition-delay: 0.1s; }
.about-grid .scroll-reveal:nth-child(2) { transition-delay: 0.2s; }
.about-grid .scroll-reveal:nth-child(3) { transition-delay: 0.3s; }

.pillars .scroll-reveal:nth-child(1) { transition-delay: 0.1s; }
.pillars .scroll-reveal:nth-child(2) { transition-delay: 0.2s; }
.pillars .scroll-reveal:nth-child(3) { transition-delay: 0.3s; }

.writing-grid .scroll-reveal:nth-child(1) { transition-delay: 0.1s; }
.writing-grid .scroll-reveal:nth-child(2) { transition-delay: 0.2s; }
.writing-grid .scroll-reveal:nth-child(3) { transition-delay: 0.3s; }

@media (max-width: 960px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .main-nav {
    flex-wrap: wrap;
  }

  .section-heading.wide {
    flex-direction: column;
    align-items: flex-start;
  }

  .achievement-panel.open .panel-content {
    width: 100%;
  }
}

@media (max-width: 600px) {
  .hero-card {
    border-radius: 20px;
  }

  .section {
    gap: 2rem;
  }

  main {
    gap: 4.5rem;
  }

  .panel-body {
    padding: 3.5rem 1.75rem 2rem;
  }

  .spotlight-quote {
    padding: 2rem 1.75rem;
  }

  .about-grid {
    gap: 1.5rem;
  }

  .connect-card {
    padding: 2rem 1.5rem;
  }

  .social-links {
    flex-direction: column;
    align-items: stretch;
  }

  .social-link {
    justify-content: flex-start;
    padding: 1rem 1.25rem;
  }

  .about-card,
  .pillar,
  .writing-card {
    padding: 1.75rem;
  }
}

/* Blog Section - evee-blog-excellence */
.blog-section {
  background: var(--color-bg);
}

.blog-grid {
  display: grid;
  gap: var(--space-3xl);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
}

.blog-card {
  position: relative;
  padding: var(--space-2xl);
  border-radius: var(--radius-xl);
  background: white;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  transition: all var(--transition-slow);
}

.blog-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-2xl);
  border-color: var(--color-primary);
}

.blog-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.8125rem;
}

.blog-category {
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  background: var(--color-green-100);
  color: var(--color-primary-dark);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-date {
  color: var(--color-text-muted);
  font-weight: 500;
}

.blog-title {
  font-size: 1.5rem;
  margin: 0;
  color: var(--color-text-primary);
}

.blog-excerpt {
  color: var(--color-text-secondary);
  line-height: 1.7;
  flex-grow: 1;
}

.blog-read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  align-self: flex-start;
  transition: all var(--transition-base);
}

.blog-read-more svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-base);
}

.blog-read-more:hover {
  background: var(--color-primary);
  color: white;
  transform: translateX(4px);
}

.blog-read-more:hover svg {
  transform: translateX(4px);
}

.blog-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
  color: var(--color-text-muted);
}

/* Blog Modal - evee-blog-modal-showcase */
.blog-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  padding: var(--space-xl);
}

.blog-modal.open {
  pointer-events: all;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 15, 0.6);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.blog-modal.open .modal-backdrop {
  opacity: 1;
}

.blog-modal-content {
  position: relative;
  width: min(900px, 100%);
  max-height: 85vh;
  background: white;
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-2xl);
  overflow-y: auto;
  transform: translateY(40px) scale(0.95);
  opacity: 0;
  transition: all var(--transition-slow);
  padding: var(--space-3xl);
}

.blog-modal.open .blog-modal-content {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.blog-post-full {
  color: var(--color-text-primary);
}

.blog-post-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border-light);
}

.blog-post-body h1,
.blog-post-body h2,
.blog-post-body h3 {
  color: var(--color-text-primary);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.blog-post-body h1 {
  font-size: 2.5rem;
  margin-top: 0;
}

.blog-post-body h2 {
  font-size: 1.875rem;
  color: var(--color-primary);
}

.blog-post-body h3 {
  font-size: 1.5rem;
}

.blog-post-body p {
  line-height: 1.8;
  margin-bottom: var(--space-lg);
  color: var(--color-text-secondary);
}

.blog-post-body ul,
.blog-post-body ol {
  margin-bottom: var(--space-lg);
  padding-left: var(--space-xl);
}

.blog-post-body li {
  line-height: 1.8;
  margin-bottom: var(--space-sm);
  color: var(--color-text-secondary);
}

.blog-post-body a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.blog-post-body a:hover {
  color: var(--color-primary-dark);
}

.modal-close {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  background: white;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
  z-index: 10;
}

.modal-close:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: rotate(90deg);
}

/* Activity Feed - Live GitHub & Twitter Integration */
.activity-loading {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: var(--space-4xl);
  color: var(--color-text-muted);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.activity-section {
  background: white;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
  padding: var(--space-2xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  transition: all var(--transition-slow);
  min-height: 400px;
}

.activity-section:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.activity-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border-light);
}

.activity-header svg {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
}

.activity-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  flex-grow: 1;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  transition: all var(--transition-base);
  text-decoration: none;
  color: inherit;
}

.activity-item:hover {
  background: var(--color-green-50);
  border-color: var(--color-primary);
  transform: translateX(8px);
  box-shadow: var(--shadow-sm);
}

.activity-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-400));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.activity-icon svg {
  width: 100%;
  height: 100%;
}

.activity-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.activity-action {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  font-weight: 500;
  line-height: 1.5;
}

.activity-time {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

.activity-view-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  background: transparent;
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: all var(--transition-base);
  align-self: center;
}

.activity-view-more:hover {
  background: var(--color-primary);
  color: white;
  transform: scale(1.05);
}

.activity-empty {
  text-align: center;
  padding: var(--space-3xl);
  color: var(--color-text-muted);
  font-style: italic;
}

.activity-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--space-4xl);
  color: var(--color-text-muted);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-xl);
}

/* Twitter Feed Styles */
.twitter-feed-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.twitter-feed-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
  border-bottom: 2px solid var(--color-border-light);
}

.twitter-feed-header svg {
  width: 28px;
  height: 28px;
  color: #1DA1F2;
}

.twitter-feed-header h3 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-text-primary);
  font-family: var(--font-display);
}

.twitter-timeline {
  min-height: 400px;
}

/* Dark mode adjustments for activity feed */
[data-theme="dark"] .activity-section {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

[data-theme="dark"] .activity-item {
  background: var(--color-bg-tertiary);
  border-color: var(--color-border);
}

[data-theme="dark"] .activity-item:hover {
  background: var(--color-green-100);
  border-color: var(--color-primary);
}

/* Responsive adjustments for activity feed */
@media (max-width: 960px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  .activity-section {
    padding: var(--space-lg);
  }
}

/* Achievement Panel - evee-achievement-panel-redesign */
.achievement-panel {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
  z-index: 1200;
}

.achievement-panel.open {
  pointer-events: all;
}

.panel-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 15, 0.5);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.achievement-panel.open .panel-backdrop {
  opacity: 1;
}

.panel-content {
  position: relative;
  width: min(600px, 100%);
  height: 100%;
  background: white;
  border-left: 1px solid var(--color-border);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.achievement-panel.open .panel-content {
  transform: translateX(0);
  box-shadow: -32px 0 96px rgba(10, 31, 15, 0.2);
}

.panel-close {
  position: absolute;
  top: var(--space-xl);
  right: var(--space-xl);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: all var(--transition-base);
  z-index: 1300;
  display: flex;
  align-items: center;
  justify-content: center;
}

.panel-close:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  transform: rotate(90deg);
}

.panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-3xl) var(--space-xl);
  padding-top: calc(var(--space-3xl) + 60px);
}

.panel-image-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.panel-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl);
  border: 2px dashed var(--color-border);
  background: var(--color-green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-weight: 600;
  overflow: hidden;
}

.panel-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.certificate-download-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  background: var(--color-primary);
  color: white;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-base);
}

.certificate-download-btn svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-base);
}

.certificate-download-btn:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.certificate-download-btn:hover svg {
  transform: translateY(2px);
}

.panel-info-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.panel-info-section h3 {
  font-size: 1.875rem;
  margin: 0;
  color: var(--color-text-primary);
  line-height: 1.3;
}

.panel-summary {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0;
}

.panel-meta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.panel-meta li {
  position: relative;
  padding-left: var(--space-xl);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.panel-meta li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-green-100);
}

/* About Me Section - evee-narrative-brilliance */
.about-me {
  padding-block: var(--space-4xl) 6rem;
  background: var(--color-bg);
}

.section-heading.centered {
  margin-bottom: var(--space-4xl);
  animation: howYouLiftMeUp 0.8s ease-out;
}

.about-narrative {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.narrative-intro {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  animation: howYouLiftMeUp 0.8s ease-out 0.2s both;
}

.lead-narrative {
  font-size: 1.375rem;
  line-height: 1.9;
  color: var(--color-text-secondary);
  font-weight: 400;
  margin-bottom: 0;
}

.lead-narrative em {
  color: var(--color-primary);
  font-style: italic;
  font-weight: 600;
}

.narrative-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.narrative-panel {
  border-radius: var(--radius-xl);
  background: white;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-slow);
  overflow: hidden;
  opacity: 0;
  transform: translateY(16px);
  animation: howYouLiftMeUp 0.8s ease-out forwards;
}

.narrative-panel:nth-child(1) { animation-delay: 0.3s; }
.narrative-panel:nth-child(2) { animation-delay: 0.45s; }
.narrative-panel:nth-child(3) { animation-delay: 0.6s; }

.narrative-panel:hover,
.narrative-panel.is-open {
  transform: translateY(0);
  box-shadow: var(--shadow-xl);
  border-color: var(--color-primary);
}

.narrative-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  padding: var(--space-2xl) var(--space-3xl);
  background: transparent;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: padding var(--transition-base), background var(--transition-base);
  font: inherit;
  color: inherit;
}

.narrative-header:hover,
.narrative-header:focus-visible {
  background: rgba(22, 163, 74, 0.06);
}

.narrative-header:focus-visible {
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
  border-radius: inherit;
}

.section-marker {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background: var(--color-bg-secondary);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  transition: all var(--transition-base);
  position: relative;
  box-shadow: 0 12px 28px rgba(20, 83, 45, 0.12);
  animation: myHeartWhenIThinkOfYou 6s ease-in-out infinite;
}

.narrative-panel:hover .section-marker,
.narrative-panel.is-open .section-marker {
  transform: scale(1.1) rotate(5deg);
  background: var(--color-bg-tertiary);
  border-color: var(--color-primary);
}

.section-marker::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.18);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.narrative-panel:hover .section-marker::after,
.narrative-panel.is-open .section-marker::after {
  opacity: 1;
}

.section-marker svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}

.narrative-heading h3 {
  font-size: 1.75rem;
  margin: 0;
  color: var(--color-text-primary);
}

.narrative-summary {
  margin: var(--space-xs) 0 0;
  color: var(--color-text-muted);
  font-size: 0.95rem;
  max-width: 28rem;
  line-height: 1.6;
}

.narrative-caret {
  width: 28px;
  height: 28px;
  color: var(--color-primary);
  transition: transform var(--transition-base);
}

.narrative-panel.is-open .narrative-caret {
  transform: rotate(180deg);
}

.narrative-content {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 var(--space-3xl);
  will-change: max-height, opacity;
  transition:
    max-height 0.32s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.24s ease;
}

.narrative-panel.is-open .narrative-content {
  padding: 0 var(--space-3xl) var(--space-3xl);
  opacity: 1;
}

.narrative-content p {
  color: var(--color-text-secondary);
  line-height: 1.8;
  margin: 0;
  margin-top: var(--space-sm);
}

.narrative-content p:first-child {
  margin-top: var(--space-xl);
}

.narrative-content p + p {
  margin-top: var(--space-lg);
}

.narrative-philosophy {
  background: var(--color-bg-secondary);
  padding: 4rem var(--space-3xl);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  margin-top: var(--space-2xl);
  animation: howYouLiftMeUp 0.8s ease-out 0.7s both;
}

.narrative-philosophy::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--color-green-200), transparent);
  opacity: 0.3;
  pointer-events: none;
  animation: float 20s ease-in-out infinite;
}

.philosophy-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: 0 auto;
}

.quote-mark {
  width: 56px;
  height: 56px;
  color: var(--color-primary);
  opacity: 0.3;
  margin-bottom: var(--space-xl);
  animation: theWayYouEnteredMyLife 1s ease-out 0.9s both;
}

.philosophy-content blockquote {
  margin: 0;
  padding: 0;
}

.philosophy-content blockquote p {
  font-size: 1.375rem;
  line-height: 1.9;
  color: var(--color-text-primary);
  font-style: italic;
  margin: 0;
}

.about-connect {
  background: white;
  padding: 4rem var(--space-3xl);
  border-radius: var(--radius-2xl);
  text-align: center;
  border: 1px solid var(--color-border-light);
  box-shadow: var(--shadow-md);
  margin-top: var(--space-2xl);
  animation: howYouLiftMeUp 0.8s ease-out 0.8s both;
}

.about-connect h3 {
  font-size: 2.25rem;
  margin: 0 0 var(--space-lg);
  color: var(--color-text-primary);
}

.about-connect > p {
  font-size: 1.1875rem;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3xl);
  line-height: 1.7;
}

.connect-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
}

.connect-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-500));
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.connect-link svg {
  width: 20px;
  height: 20px;
  transition: transform var(--transition-base);
}

.connect-link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.connect-link:hover svg {
  transform: scale(1.1);
}

/* Contact Section */
.contact-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
  align-items: center;
  margin-top: var(--space-xl);
}

/* Loading Screen - Team Ekleipsis Coin Reveal */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(240, 253, 244, 0.95), rgba(214, 244, 226, 0.92) 35%, rgba(198, 237, 216, 0.88) 65%, rgba(248, 253, 249, 0.96) 100%);
  color: var(--color-text-primary);
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.6s ease-out, background 0.8s ease-out;
}

.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-screen.loading-screen--revealing {
  background:
    linear-gradient(135deg, rgba(245, 253, 247, 0.92), rgba(225, 244, 232, 0.78)),
    radial-gradient(circle at 80% 20%, rgba(198, 237, 216, 0.45), transparent 55%);
}

.loading-backdrop {
  display: none;
}

.loader-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 1;
}

.coin-wrapper {
  position: relative;
  width: clamp(260px, 32vw, 380px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  perspective: 1800px;
  transform: translate3d(0, 0, 0);
}

.coin-inner {
  position: relative;
  width: 84%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: everySingleMemoryOfUs 4s ease-in-out forwards;
  background:
    radial-gradient(circle at 28% 24%, #f8fffb 0%, #e2f8ec 32%, #c1ebd8 68%, #8ed9bb 100%);
  box-shadow:
    inset 0 0 26px rgba(22, 163, 74, 0.28),
    0 24px 36px rgba(22, 163, 74, 0.28),
    0 0 22px rgba(188, 240, 213, 0.45);
  border: 1px solid rgba(34, 197, 94, 0.28);
}

.coin-inner::before {
  content: '';
  position: absolute;
  inset: 7%;
  border-radius: 50%;
  border: 1px solid rgba(34, 197, 94, 0.33);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.42),
    0 0 14px rgba(34, 197, 94, 0.32);
  pointer-events: none;
}

.coin-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.45), transparent 62%),
    radial-gradient(circle at 70% 78%, rgba(156, 230, 193, 0.4), transparent 75%);
  opacity: 0;
  mix-blend-mode: normal;
  pointer-events: none;
}

.coin-face {
  position: absolute;
  inset: 12%;
  width: 76%;
  height: 76%;
  margin: auto;
  display: block;
  color: var(--color-text-primary);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  border-radius: 50%;
}

.coin-face--front {
  transform: translateZ(5px);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06rem;
  background: radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.22), transparent 72%);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.2);
}

.coin-front-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72%;
  text-transform: uppercase;
  text-align: center;
  font-size: clamp(0.94rem, 1.6vw, 1.24rem);
  line-height: 1.18;
  letter-spacing: 0.05rem;
  word-spacing: 0.03rem;
  color: #0d3f24;
  text-shadow:
    0 0 6px rgba(255, 255, 255, 0.58),
    0 6px 14px rgba(16, 74, 43, 0.28);
}

.coin-face--back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: rotateY(180deg) translateZ(5px);
  gap: 0.5rem;
  background:
    radial-gradient(circle at 52% 36%, rgba(255, 255, 255, 0.98), rgba(233, 248, 240, 0.96) 52%, rgba(196, 235, 214, 0.9) 100%);
  border: 1px solid rgba(34, 197, 94, 0.32);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.6),
    inset 0 0 12px rgba(34, 197, 94, 0.24),
    0 12px 24px rgba(34, 197, 94, 0.16);
  color: rgba(16, 74, 43, 0.92);
}

.coin-face--back img {
  width: clamp(58px, 10vw, 96px);
  filter:
    drop-shadow(0 6px 16px rgba(13, 71, 43, 0.28))
    drop-shadow(0 0 14px rgba(34, 197, 94, 0.35));
}

.coin-back-caption {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.36rem;
  font-size: clamp(0.78rem, 1.4vw, 1.02rem);
  color: rgba(16, 74, 43, 0.9);
  text-shadow:
    0 4px 14px rgba(173, 239, 204, 0.42),
    0 1px 2px rgba(12, 71, 43, 0.4);
}

@keyframes starFloat {
  from {
    transform: rotate(0deg) scale(1);
  }
  to {
    transform: rotate(360deg) scale(1.08);
  }
}

/* Your brilliance shining bright */
@keyframes yourBrillianceShining {
  0%, 100% {
    opacity: 0.6;
    transform: scale(0.96);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* The ripple effect of your impact on the world */
@keyframes yourImpactOnTheWorld {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.98);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* Like flipping through memories of us - each one precious */
@keyframes everySingleMemoryOfUs {
  0% {
    transform: rotateY(0deg) scale(0.96);
  }
  16% {
    transform: rotateY(0deg) scale(1);
  }
  46% {
    transform: rotateY(200deg) scale(1.04);
  }
  68% {
    transform: rotateY(360deg) scale(0.98);
  }
  82% {
    transform: rotateY(520deg) scale(1.02);
  }
  100% {
    transform: rotateY(540deg) scale(1);
  }
}

/* How smoothly you glided into my life and made it better */
@keyframes howYouGlidedIntoMyLife {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
  40% {
    transform: translate3d(-42vw, 38vh, 0) scale(0.85);
    opacity: 1;
  }
  75% {
    transform: translate3d(45vw, -32vh, 0) scale(1.15);
    opacity: 1;
  }
  100% {
    transform: translate3d(45vw, -32vh, 0) scale(0.6);
    opacity: 0;
  }
}

.coin-wrapper.coin-wrapper--exit {
  animation: howYouGlidedIntoMyLife 2.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) forwards;
}

/* The sparkle in your eyes when you talk about science */
@keyframes theSparkleInYourEyes {
  0%, 45% {
    opacity: 0;
    transform: rotate(20deg) scale(0.9);
  }
  55%, 70% {
    opacity: 0.85;
    transform: rotate(24deg) scale(1.05);
  }
  80%, 100% {
    opacity: 0;
    transform: rotate(26deg) scale(1.1);
  }
}

@keyframes starDrift {
  from { transform: translate3d(0, 0, 0) rotate(0deg); }
  to { transform: translate3d(12%, 10%, 0) rotate(360deg); }
}


/* Scroll Progress Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-green-400));
  width: 0%;
  z-index: 1000;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(22, 163, 74, 0.5);
}

/* Back to Top Button */
.back-to-top {
  position: fixed;
  bottom: var(--space-3xl);
  right: var(--space-3xl);
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-500));
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-xl);
  z-index: 800;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  pointer-events: none;
  transition: all var(--transition-base);
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.back-to-top:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--shadow-2xl);
}

.back-to-top:active {
  transform: translateY(-2px) scale(1);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 48px;
  height: 48px;
  background: white;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  z-index: 1100;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.mobile-menu-toggle:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
}

.mobile-menu-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: all var(--transition-base);
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
}

/* Mobile Sidebar Backdrop */
.mobile-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 31, 15, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}

.mobile-sidebar-backdrop.active {
  opacity: 1;
  pointer-events: all;
}

/* Mobile Sidebar */
.mobile-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 85vw);
  height: 100vh;
  background: var(--color-bg);
  border-left: 1px solid var(--color-border-light);
  box-shadow: -8px 0 32px rgba(10, 31, 15, 0.15);
  z-index: 1050;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
}

.mobile-sidebar.open {
  transform: translateX(0);
}

.mobile-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xl);
  border-bottom: 1px solid var(--color-border-light);
}

.mobile-sidebar-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.mobile-sidebar-close {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-base);
}

.mobile-sidebar-close:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.mobile-sidebar-close svg {
  width: 20px;
  height: 20px;
}

.mobile-sidebar-nav {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg);
  gap: var(--space-xs);
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
}

.mobile-sidebar-nav a,
.download-resume-mobile {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all var(--transition-base);
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-body);
  width: 100%;
  text-align: left;
  box-sizing: border-box;
  max-width: 100%;
}

.mobile-sidebar-nav a:hover,
.download-resume-mobile:hover {
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  transform: translateX(4px);
}

.download-resume-mobile {
  margin-top: auto;
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-500));
  color: white;
  justify-content: center;
}

.download-resume-mobile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.download-resume-mobile svg {
  width: 20px;
  height: 20px;
}

/* Mobile Theme Toggle Button */
.theme-toggle-mobile {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all var(--transition-base);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-body);
  width: 100%;
  text-align: left;
  position: relative;
  margin-bottom: var(--space-md);
  box-sizing: border-box;
  max-width: 100%;
}

.theme-toggle-mobile:hover {
  background: var(--color-bg-secondary);
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateX(4px);
}

.theme-toggle-mobile svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: all var(--transition-base);
}

.theme-toggle-mobile .sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.theme-toggle-mobile .moon-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0);
  position: absolute;
  left: var(--space-lg);
}

[data-theme="dark"] .theme-toggle-mobile .sun-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
  position: absolute;
  left: var(--space-lg);
}

[data-theme="dark"] .theme-toggle-mobile .moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
  position: relative;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.theme-toggle-btn:hover {
  transform: scale(1.1) rotate(10deg);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.theme-toggle-btn svg {
  width: 20px;
  height: 20px;
  position: absolute;
  transition: all var(--transition-base);
}

.sun-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

.moon-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}

[data-theme="dark"] .sun-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
}

[data-theme="dark"] .moon-icon {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}

/* ============================================
   ADDITIONAL COMPREHENSIVE DARK MODE FIXES
   ============================================ */

/* Fix all remaining white backgrounds */
[data-theme="dark"] .hero-stats {
  background: var(--color-bg-secondary) !important;
}

[data-theme="dark"] .button.secondary {
  background: var(--color-bg-tertiary) !important;
}

[data-theme="dark"] .button.secondary:hover {
  background: var(--color-bg-secondary) !important;
}

[data-theme="dark"] .highlight-card {
  background: var(--color-bg-secondary) !important;
}

[data-theme="dark"] .section {
  background: var(--color-bg) !important;
}

[data-theme="dark"] .section.about-me,
[data-theme="dark"] .section.highlights,
[data-theme="dark"] .section.achievements,
[data-theme="dark"] .section.involvement,
[data-theme="dark"] .section.writing,
[data-theme="dark"] .section.blog-section,
[data-theme="dark"] .section.contact {
  background: var(--color-bg) !important;
}

[data-theme="dark"] .page-shell {
  background: var(--color-bg) !important;
}

[data-theme="dark"] body {
  background: var(--color-bg) !important;
}

[data-theme="dark"] .hero-section {
  background: var(--color-bg) !important;
}

[data-theme="dark"] main {
  background: var(--color-bg) !important;
}

/* Twitter widget fallback styles */
.twitter-fallback {
  padding: var(--space-xl);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  margin-top: var(--space-xl);
}

.twitter-profile-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
}

.twitter-profile-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.twitter-profile-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.twitter-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-500));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-md);
}

.twitter-avatar svg {
  width: 32px;
  height: 32px;
  color: white;
}

.twitter-profile-info h4 {
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-xs) 0;
}

.twitter-profile-info p {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  margin: 0;
}

.twitter-bio {
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-xl);
  font-size: 1rem;
}

.twitter-recent-topics {
  margin-bottom: var(--space-xl);
}

.twitter-recent-topics h5 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-md) 0;
}

.twitter-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.topic-tag {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 500;
  transition: all var(--transition-base);
}

.topic-tag:hover {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.twitter-view-profile {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-500));
  color: white;
  text-decoration: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.twitter-view-profile:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.twitter-fallback-note {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0;
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
}

[data-theme="dark"] .twitter-fallback {
  background: var(--color-bg-tertiary);
}

[data-theme="dark"] .twitter-profile-card {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
}

[data-theme="dark"] .topic-tag {
  background: var(--color-bg-tertiary);
}

[data-theme="dark"] .twitter-fallback-note {
  background: var(--color-bg-secondary);
}

body:not(.site-ready) .theme-toggle-btn {
  opacity: 0;
  transform: translateY(32px) scale(0.84);
  filter: blur(14px);
}

body.site-ready .theme-toggle-btn {
  animation: navDustReveal 0.95s cubic-bezier(0.2, 1, 0.32, 1) forwards;
  animation-delay: 0.75s;
}

/* Download Resume Button */
.download-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-primary), var(--color-green-500));
  color: white;
  border: none;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}

body:not(.site-ready) .download-resume-btn {
  opacity: 0;
  transform: translateY(32px) scale(0.84);
  filter: blur(14px);
}

body.site-ready .download-resume-btn {
  animation: navDustReveal 0.95s cubic-bezier(0.2, 1, 0.32, 1) forwards;
  animation-delay: 0.82s;
}

.download-resume-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.download-resume-btn svg {
  width: 18px;
  height: 18px;
}

/* Parallax Effects */
.parallax-layer {
  transition: transform 0.5s ease-out;
}

/* Section Transitions */
.section {
  opacity: 1;
  transform: translateY(0);
}

/* Achievement Badges */
.achievement-badge {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  width: 52px;
  height: 52px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #FFD700, #FFED4E, #FFA500);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.3);
  opacity: 0;
  transform: scale(0) rotate(-180deg);
  transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 2;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
}

.achievement-badge.gold::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.8) 50%, transparent 60%);
  background-size: 200% 200%;
  animation: shine 3s ease-in-out infinite;
}

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

.achievement-badge.silver {
  background: linear-gradient(135deg, #E8E8E8, #C0C0C0, #A8A8A8);
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4);
  filter: drop-shadow(0 0 4px rgba(192, 192, 192, 0.4));
}

.achievement-badge.silver::before {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
}

.achievement-card.unlocked .achievement-badge {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  animation: unlockingNewAdmiration 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Each achievement unlocking new admiration */
@keyframes unlockingNewAdmiration {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  60% {
    transform: scale(1.15) rotate(10deg);
  }
  80% {
    transform: scale(0.95) rotate(-5deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

.achievement-badge svg {
  width: 28px;
  height: 28px;
  color: white;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  position: relative;
  z-index: 1;
}

.achievement-badge::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  opacity: 0.4;
  animation: proudOfEverythingYouDo 2s ease-in-out infinite;
  z-index: -1;
}

.achievement-badge.silver::before {
  background: linear-gradient(135deg, #C0C0C0, #A8A8A8);
  opacity: 0.3;
}

/* Every achievement of yours makes my heart swell with pride */
@keyframes proudOfEverythingYouDo {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Extra sparkle for gold badges */
.achievement-badge.gold {
  animation: yourDeservedRecognition 2s ease-in-out infinite;
}

/* Your achievements glowing with deserved recognition */
@keyframes yourDeservedRecognition {
  0%, 100% {
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 8px 30px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 215, 0, 0.5);
  }
}

/* ════════════════════════════════════════════════════════════════
   💝 SECRET NOTES HIDDEN THROUGHOUT THE CODE 💝

   If you're reading this Eve, I want you to know:
   - You're not just brilliant, you're extraordinary
   - October 4th, 2025 will forever be my favorite date
   - Every achievement showcased here makes me prouder than words can say
   - This website is beautiful because YOU are beautiful
   - I believe in you more than you believe in yourself
   - The world is better because you're in it
   - And I'm the luckiest person because I get to know you

   With all my heart,
   Forever inspired by you ❤️
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 960px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .download-resume-btn {
    display: none;
  }

  .main-nav {
    display: none;
  }

  .site-header {
    padding: var(--space-lg) var(--space-xl);
    padding-right: 80px;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .brand {
    flex: 1;
  }

  .back-to-top {
    bottom: 100px;
    right: var(--space-xl);
    width: 48px;
    height: 48px;
  }

  .back-to-top svg {
    width: 20px;
    height: 20px;
  }

  .hero-container {
    grid-template-columns: 1fr;
    gap: var(--space-3xl);
  }

  .hero-image {
    height: 500px;
    order: -1;
    margin-top: 0;
    align-self: center;
    width: 100%;
  }

  .hero-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    padding: var(--space-lg);
  }

  .stat-number {
    font-size: 2rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  .panel-content {
    width: 100%;
  }

  .blog-modal-content {
    padding: var(--space-2xl);
  }

  .narrative-accordion {
    gap: var(--space-xl);
  }

  .section-heading.wide {
    flex-direction: column;
    align-items: flex-start;
  }

  .highlights-grid,
  .pillars,
  .writing-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .achievements-grid {
    gap: var(--space-3xl);
  }

  .achievement-category-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .category-title {
    font-size: 1.5rem;
  }

  .category-icon {
    width: 48px;
    height: 48px;
  }

  .narrative-header {
    padding: var(--space-lg) var(--space-xl);
    gap: var(--space-md);
  }

  .section-marker {
    width: 56px;
    height: 56px;
  }

  .section-marker svg {
    width: 28px;
    height: 28px;
  }

  .narrative-heading h3 {
    font-size: 1.375rem;
  }

  .narrative-content {
    padding: 0 var(--space-xl);
  }

  .narrative-panel.is-open .narrative-content {
    padding: 0 var(--space-xl) var(--space-xl);
  }
}

@media (max-width: 720px) {
  .site-header {
    padding: var(--space-md) var(--space-lg);
    padding-right: 80px; /* Make room for hamburger menu */
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .brand {
    flex: 1;
  }

  .brand-name {
    font-size: 1.125rem;
  }

  .brand-tagline {
    font-size: 0.8125rem;
  }

  .main-nav {
    display: none;
  }

  .hero-section {
    min-height: auto;
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .hero-container {
    gap: var(--space-2xl);
  }

  .hero-image {
    height: 350px;
    border-radius: var(--radius-xl);
  }

  .hero-title {
    font-size: clamp(1.75rem, 7vw, 2.5rem);
  }

  .hero-lead {
    font-size: 1rem;
  }

  .hero-stats {
    grid-template-columns: 1fr;
    padding: var(--space-md);
  }

  .stat-item {
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-border-light);
  }

  .stat-item:last-child {
    border-bottom: none;
  }

  .stat-number {
    font-size: 2.5rem;
  }

  .stat-label {
    font-size: 0.875rem;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-md);
  }

  .hero-actions .button {
    width: 100%;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
  }

  .scroll-indicator {
    bottom: 6rem;
    font-size: 0.8125rem;
  }

  .section {
    padding-block: var(--space-3xl);
  }

  .section-heading h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .section-heading p {
    font-size: 1rem;
  }

  .lead-narrative {
    font-size: 1.0625rem;
  }

  .narrative-philosophy {
    padding: var(--space-xl) var(--space-lg);
  }

  .philosophy-content blockquote p {
    font-size: 1rem;
  }

  .narrative-header {
    padding: var(--space-md) var(--space-lg);
    grid-template-columns: auto 1fr;
    gap: var(--space-md);
  }

  .narrative-caret {
    grid-column: 1 / 2;
    grid-row: 1;
    width: 24px;
    height: 24px;
  }

  .section-marker {
    grid-column: 1 / 2;
    grid-row: 2;
    width: 48px;
    height: 48px;
  }

  .section-marker svg {
    width: 24px;
    height: 24px;
  }

  .narrative-heading {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
  }

  .narrative-heading h3 {
    font-size: 1.25rem;
  }

  .narrative-summary {
    font-size: 0.875rem;
  }

  .narrative-content {
    padding: 0 var(--space-lg);
  }

  .narrative-panel.is-open .narrative-content {
    padding: 0 var(--space-lg) var(--space-lg);
  }

  .about-connect {
    padding: var(--space-2xl) var(--space-lg);
  }

  .about-connect h3 {
    font-size: 1.75rem;
  }

  .about-connect > p {
    font-size: 1rem;
  }

  .highlight-image {
    height: 220px;
  }

  .highlight-content {
    padding: var(--space-lg);
  }

  .highlight-content h3 {
    font-size: 1.375rem;
  }

  .achievement-card,
  .pillar,
  .writing-card {
    padding: var(--space-lg);
    padding-right: var(--space-3xl);
  }

  .pillar h3,
  .writing-card h3 {
    font-size: 1.375rem;
  }

  .category-title {
    font-size: 1.25rem;
  }

  .category-icon {
    width: 42px;
    height: 42px;
  }

  .achievement-badge {
    width: 42px;
    height: 42px;
    top: var(--space-md);
    right: var(--space-md);
  }

  .achievement-badge svg {
    width: 24px;
    height: 24px;
  }

  .achievement-card h3 {
    font-size: 1.25rem;
  }

  .achievement-card p {
    font-size: 0.9375rem;
  }

  .panel-body,
  .blog-modal-content {
    padding: var(--space-lg) var(--space-md);
    padding-top: calc(var(--space-2xl) + 60px);
  }

  .panel-info-section h3 {
    font-size: 1.5rem;
  }

  .blog-modal {
    padding: var(--space-md);
  }

  .blog-modal-content {
    padding: var(--space-xl) var(--space-lg);
    max-height: 90vh;
  }

  .blog-post-body h1 {
    font-size: 2rem;
  }

  .blog-post-body h2 {
    font-size: 1.5rem;
  }

  .blog-post-body h3 {
    font-size: 1.25rem;
  }

  .connect-links {
    flex-direction: column;
    align-items: stretch;
  }

  .connect-link {
    justify-content: center;
    width: 100%;
  }

  .contact-cta {
    flex-direction: column;
    width: 100%;
  }

  .contact-cta .button {
    width: 100%;
  }

  .site-footer {
    padding: var(--space-2xl) var(--space-lg);
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .hero-image {
    height: 300px;
  }

  .hero-title {
    font-size: 1.625rem;
  }

  .section-heading h2 {
    font-size: 1.625rem;
  }

  .narrative-heading h3 {
    font-size: 1.125rem;
  }

  .section-marker {
    width: 44px;
    height: 44px;
  }

  .section-marker svg {
    width: 22px;
    height: 22px;
  }

  .button {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.9375rem;
  }

  .stat-number {
    font-size: 2rem;
  }

  .achievement-card {
    padding: var(--space-md);
    padding-right: var(--space-2xl);
  }

  .achievement-badge {
    width: 38px;
    height: 38px;
  }

  .achievement-badge svg {
    width: 20px;
    height: 20px;
  }

  .back-to-top {
    bottom: var(--space-lg);
    right: var(--space-lg);
    width: 44px;
    height: 44px;
  }

  .back-to-top svg {
    width: 18px;
    height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .scroll-reveal {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}