/* Josh Yeung — Portfolio Styles */

:root {
  --color-accent: #10b981; /* Modern green accent like Legions.dev */
  --color-accent-hover: #059669; /* Darker green for hover states */
  --color-bg: #0a0a0a; /* Deeper black background */
  --color-text: #f9fafb; /* Slightly warmer white */
  --color-text-secondary: #9ca3af; /* Softer gray for secondary text */
  --color-surface: #111111; /* Slightly lighter than background for cards */
  --color-border: #1f2937; /* Subtle border color */
  --color-section-light: #111111; /* Dark section background */
  --color-section-dark: #0a0a0a; /* Even darker section background */
  --color-text-on-light: #f9fafb; /* Text color on light sections */
  --color-text-on-dark: #f9fafb; /* Text color on dark sections */
  --color-text-secondary-on-light: #9ca3af; /* Secondary text on light sections */
  --color-text-secondary-on-dark: #9ca3af; /* Secondary text on dark sections */
  --color-success: #10b981; /* Success/primary action color */
  --color-warning: #f59e0b; /* Warning/secondary accent */
  --color-danger: #ef4444; /* Error/danger color */
  --shadow-elev-1: 0 10px 30px rgba(16, 185, 129, 0.08);
  --shadow-elev-2: 0 20px 50px rgba(0, 0, 0, 0.3);
  --radius: 12px;
  --container-w: 1100px;
  --section-pad-y: clamp(60px, 8vw, 100px);
  --gap: 24px;
  --sidebar-w: 72px; /* icons-only width */
}



* {
  box-sizing: border-box;
}

html, body {
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.03) 0%, transparent 50%);
  line-height: 1.6;
  font-size: 16px;
  font-weight: 400;
}

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

.container {
  width: min(100% - 32px, var(--container-w));
  margin-inline: auto;
}

/* Card Stack Styles - Replacing Image Carousel */
.card-stack-container {
  position: relative;
  width: min(85vw, 500px);
  height: min(65vw, 380px);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stack-container {
  position: relative;
  width: 580px;
  height: 360px;
  perspective: 1000px;
  cursor: grab;
}

.stack-container:active {
  cursor: grabbing;
}

.card-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
  cursor: grab;
  user-select: none;
}

.card-wrapper:active {
  cursor: grabbing;
}

.card {
  width: 100%;
  height: 100%;
  border-radius: 16px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  background: var(--color-surface);
  transition: all 0.3s ease;
  position: relative;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(16, 185, 129, 0.2);
  border-color: rgba(16, 185, 129, 0.3);
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform 0.3s ease;
}

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



/* Section Backgrounds with Curved Sides */
.section {
  padding-block: var(--section-pad-y);
  position: relative;
}

/* Hero section - dark background like rest of site */
.hero {
  background: var(--color-section-dark);
  min-height: 100svh;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
}

/* About section - slightly lighter dark background */
.about {
  background: var(--color-section-light);
  position: relative;
}

/* Remove curved sections for cleaner look like Legions.dev */
.about::before {
  display: none;
}

.about::after {
  display: none;
}

/* Projects section - dark background */
.projects {
  background: var(--color-section-dark);
  position: relative;
}

.projects::before {
  display: none;
}

/* Experience section - slightly lighter dark background */
.experience {
  background: var(--color-section-light);
  position: relative;
}

.experience::before {
  display: none;
}

.experience::after {
  display: none;
}

/* CV section - dark background */
.cv {
  background: var(--color-section-dark);
  position: relative;
}

.cv::before {
  display: none;
}

/* Contact section - slightly lighter dark background */
.contact {
  background: var(--color-section-light);
  position: relative;
}

.contact::before {
  display: none;
}

/* Consistent text colors for dark theme */
.hero, .projects, .cv, .about, .experience, .contact {
  color: var(--color-text-on-dark);
}

.hero h1, .hero h2, .hero h3, .projects h1, .projects h2, .projects h3, 
.cv h1, .cv h2, .cv h3, .about h1, .about h2, .about h3, 
.experience h1, .experience h2, .experience h3, .contact h1, .contact h2, .contact h3 {
  color: var(--color-text-on-dark);
}

.hero p, .projects p, .cv p, .about p, .experience p, .contact p {
  color: var(--color-text-secondary-on-dark);
}

.hero .hero-tagline {
  color: var(--color-accent);
  font-weight: 600;
}

h1, h2, h3 {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.3;
  margin: 0 0 16px 0;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  font-weight: 800;
  letter-spacing: -0.03em;
}

h2 { 
  font-size: clamp(1.75rem, 4vw, 2.5rem); 
  margin-bottom: 24px; 
  font-weight: 700;
}

h3 { 
  font-size: clamp(1.25rem, 2.5vw, 1.5rem); 
  font-weight: 600;
}

p { 
  margin: 0 0 16px; 
  color: var(--color-text-secondary);
  font-size: 1rem;
  line-height: 1.7;
}

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

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

.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 16px; top: 16px; width: auto; height: auto; padding: 8px 12px; background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: 8px; z-index: 1000;
}



/* Sidebar */
.sidebar { 
  position: fixed; 
  top: 80px;
  left: 24px;
  bottom: 80px;
  width: var(--sidebar-w); 
  background: rgba(17, 17, 17, 0.8); 
  border: 1px solid rgba(31, 41, 55, 0.3);
  z-index: 60; 
  transform: translateX(0); 
  transition: transform .25s ease, width .25s ease;
  border-radius: var(--radius);
  box-shadow: 
    0 20px 40px rgba(0,0,0,.3),
    0 8px 24px rgba(0,0,0,.2),
    inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
}



.sidebar-inner { height: 100%; display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.brand { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; height: 40px; }
.brand span { display: none; }
.sidebar-social { display: flex; flex-direction: column; gap: 10px; }
.sidebar .site-nav ul { display: flex; flex-direction: column; gap: 6px; }
.sidebar .site-nav a.nav-link { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 0; 
  color: var(--color-text-secondary); 
  padding: 12px 0px; 
  border-radius: 10px; 
  white-space: nowrap; 
  position: relative; 
  transition: all .2s ease; 
}

.sidebar .site-nav .nav-icon { 
  width: 24px; 
  height: 24px; 
  color: var(--color-text-secondary); 
  flex-shrink: 0; 
  transition: color .2s ease;
}

.sidebar .site-nav .nav-label { 
  display: none; 
}

.sidebar .site-nav a.nav-link.active, 
.sidebar .site-nav a.nav-link:hover { 
  color: var(--color-text); 
  background: rgba(16, 185, 129, 0.15); 
  transform: scale(1.05);
}

.sidebar .site-nav a.nav-link.active .nav-icon, 
.sidebar .site-nav a.nav-link:hover .nav-icon { 
  color: var(--color-accent); 
}
.icon-link, .sidebar .site-nav a.nav-link { outline: none; }
.icon-link { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); }
.sidebar-divider { height: 1px; width: 100%; background: var(--color-border); }


/* Off-canvas toggle button (mobile) */
.nav-toggle { 
  position: fixed; 
  top: 16px; 
  left: 16px; 
  z-index: 70; 
  display: none; 
  align-items: center; 
  justify-content: center; 
  width: 44px; 
  height: 44px; 
  border-radius: 12px; 
  border: 1px solid rgba(42, 42, 42, 0.3); 
  background: rgba(26, 26, 26, 0.8); 
  color: var(--color-text); 
  box-shadow: 0 10px 30px rgba(0,0,0,.15); 
  backdrop-filter: blur(20px);
  cursor: pointer;
  transition: all 0.2s ease;
}

.nav-toggle:hover {
  background: rgba(26, 26, 26, 0.9);
  transform: scale(1.05);
}

.nav-toggle:active {
  transform: scale(0.95);
}
.nav-toggle .nav-toggle-icon { width: 20px; height: 20px; display: block; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle .nav-icon-close { position: absolute; opacity: 0; transform: rotate(-90deg) scale(.8); }
.nav-toggle[aria-expanded="true"] .nav-icon-hamburger { opacity: 0; transform: rotate(90deg) scale(.8); }
.nav-toggle[aria-expanded="true"] .nav-icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Content shift to make room for sidebar */
main { margin-left: 0; transition: margin-left .25s ease; }
.site-footer { margin-left: 0; transition: margin-left .25s ease; }

/* Staggered Menu Styles */
.staggered-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
  --sm-accent: var(--color-accent);
}

.staggered-menu-wrapper > * {
  pointer-events: auto;
}

.staggered-menu-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 2em;
  background: transparent;
  pointer-events: none;
  z-index: 9999;
}

.staggered-menu-header > * {
  pointer-events: auto;
}

.sm-logo {
  display: flex;
  align-items: center;
  user-select: none;
}

.sm-logo-img {
  display: block;
  height: 40px;
  width: 40px;
  object-fit: contain;
}

.sm-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text);
  font-weight: 500;
  line-height: 1;
  overflow: visible;
  font-family: inherit;
}

.sm-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

.sm-toggle-textWrap {
  position: relative;
  display: inline-block;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  width: var(--sm-toggle-width, auto);
  min-width: var(--sm-toggle-width, auto);
}

.sm-toggle-textInner {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.sm-toggle-line {
  display: block;
  height: 1em;
  line-height: 1;
}

.sm-icon {
  position: relative;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  will-change: transform;
}

.sm-icon-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transform: translate(-50%, -50%);
  will-change: transform;
}

.sm-icon-line-v {
  transform: translate(-50%, -50%) rotate(90deg);
}

.staggered-menu-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: clamp(260px, 38vw, 420px);
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  padding: 6em 2em 2em 2em;
  overflow-y: auto;
  z-index: 1000;
}

[data-position='left'] .staggered-menu-panel {
  right: auto;
  left: 0;
}

.sm-prelayers {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(260px, 38vw, 420px);
  pointer-events: none;
  z-index: 5;
}

[data-position='left'] .sm-prelayers {
  right: auto;
  left: 0;
}

.sm-prelayer {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  transform: translateX(100%);
}

.sm-panel-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.sm-panel-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sm-panel-itemWrap {
  position: relative;
  overflow: hidden;
  line-height: 1;
}

.sm-panel-item {
  position: relative;
  color: var(--color-bg);
  font-weight: 600;
  font-size: 3.5rem;
  cursor: pointer;
  line-height: 1;
  letter-spacing: -2px;
  text-transform: uppercase;
  transition: color 0.25s;
  display: inline-block;
  text-decoration: none;
  padding-right: 1.4em;
}

.sm-panel-itemLabel {
  display: inline-block;
  will-change: transform;
  transform-origin: 50% 100%;
}

.sm-panel-item:hover {
  color: var(--sm-accent, var(--color-accent));
}

.sm-panel-list[data-numbering] {
  counter-reset: smItem;
}

.sm-panel-list[data-numbering] .sm-panel-item::after {
  counter-increment: smItem;
  content: counter(smItem, decimal-leading-zero);
  position: absolute;
  top: 0.1em;
  right: 2.8em;
  font-size: 18px;
  font-weight: 400;
  color: var(--sm-accent, var(--color-accent));
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
  opacity: var(--sm-num-opacity, 0);
}

.sm-socials {
  margin-top: auto;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sm-socials-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--sm-accent, var(--color-accent));
}

.sm-socials-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.sm-socials-link {
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-bg);
  text-decoration: none;
  position: relative;
  padding: 2px 0;
  display: inline-block;
  transition: color 0.3s ease, opacity 0.3s ease;
  opacity: 1;
}

.sm-socials-link:hover {
  color: var(--sm-accent, var(--color-accent));
}

.sm-socials-link:focus-visible {
  outline: 2px solid var(--sm-accent, var(--color-accent));
  outline-offset: 3px;
}

.sm-socials-list:hover .sm-socials-link {
  opacity: 0.35;
}

.sm-socials-list:hover .sm-socials-link:hover {
  opacity: 1;
}

.sm-socials-list:focus-within .sm-socials-link {
  opacity: 0.35;
}

.sm-socials-list:focus-within .sm-socials-link:focus-visible {
  opacity: 1;
}

/* Mobile responsive for staggered menu */
@media (max-width: 1024px) {
  .staggered-menu-panel {
    width: 100%;
    left: 0;
    right: 0;
  }

  .sm-prelayers {
    width: 100%;
    left: 0;
    right: 0;
  }

  .staggered-menu-wrapper[data-open] .sm-logo-img {
    filter: invert(100%);
  }
}

@media (max-width: 640px) {
  .staggered-menu-header {
    padding: 1.5em;
  }

  .sm-panel-item {
    font-size: 2.5rem;
  }

  .staggered-menu-panel {
    padding: 5em 1.5em 1.5em 1.5em;
  }

  /* Fix numbered navigation on mobile */
  .sm-panel-list[data-numbering] .sm-panel-item::after {
    font-size: 16px;
    top: 0.2em;
    opacity: var(--sm-num-opacity, 0);
  }

  .sm-panel-item {
    padding-right: 2.2em;
  }

  /* Change text color to black when menu is open on mobile */
  .staggered-menu[data-open="true"] .sm-panel-item {
    color: #000000;
  }

  .staggered-menu[data-open="true"] .sm-panel-list[data-numbering] .sm-panel-item::after {
    color: var(--sm-accent, var(--color-accent));
  }

  .staggered-menu[data-open="true"] .sm-socials-title {
    color: #000000;
  }

  .staggered-menu[data-open="true"] .sm-socials-link {
    color: #000000;
  }

  /* Change close button color to black when menu is open on mobile */
  .staggered-menu[data-open="true"] .sm-toggle {
    color: #000;
  }
  .staggered-menu[data-open="true"] .sm-toggle .sm-icon-line {
    background: #000;
  }
}

/* Hero */
.hero-inner { 
  display: grid; 
  grid-template-columns: 1.3fr 1fr; 
  gap: 48px; 
  align-items: center; 
  max-width: 1200px;
  margin: 0 auto;
}

.hero-title { 
  font-size: clamp(2.5rem, 6vw, 4rem); 
  font-weight: 800;
  letter-spacing: -0.02em; 
  margin-bottom: 12px;
  background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-height: 1.2em; /* Prevent layout shift during typing */
  display: flex;
  align-items: center;
}

/* Typing cursor styles */
.typing-cursor {
  display: inline-block;
  margin-left: 0.1em;
  font-weight: 400;
  color: var(--color-accent);
  opacity: 1;
  animation: none; /* We'll handle blinking with JavaScript */
}

.hero-tagline { 
  font-weight: 600; 
  font-size: 1.2rem;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.hero-subtext { 
  max-width: 65ch; 
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}

.hero-actions { 
  display: flex; 
  gap: 16px; 
  margin-top: 32px; 
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
}

.hero-visual { 
  position: relative; 
  display: flex;
  justify-content: center;
  align-items: center;
}
.gradient-orb {
  --size: min(60vw, 700px);
  width: var(--size); height: var(--size); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--color-accent), white 20%), transparent 70%);
  filter: blur(40px) saturate(140%);
  opacity: 0.6; transform: translateX(10%) translateY(10%);
  animation: float 16s ease-in-out infinite;
}
/* Modern visual effects and animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateX(10%) translateY(10%); 
  }
  50% { 
    transform: translateX(0%) translateY(0%); 
  }
}

/* Add subtle animations to sections */
.section {
  animation: fadeInUp 0.8s ease-out;
}

/* Enhanced icon link effects */
.icon-link { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  width: 40px; 
  height: 40px; 
  border-radius: 10px; 
  border: 1px solid var(--color-border); 
  background: var(--color-surface); 
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.icon-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.1), transparent);
  transition: left 0.5s;
}

.icon-link:hover::before {
  left: 100%;
}

.icon-link:hover { 
  transform: translateY(-2px) scale(1.05); 
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.2);
  border-color: var(--color-accent);
  background: rgba(16, 185, 129, 0.1);
}

/* Enhanced back to top button */
.back-to-top { 
  position: fixed; 
  right: 24px; 
  bottom: 24px; 
  width: 50px; 
  height: 50px; 
  border-radius: var(--radius); 
  border: 1px solid var(--color-border); 
  background: var(--color-surface); 
  color: var(--color-text); 
  box-shadow: 0 8px 25px rgba(0,0,0,.2); 
  cursor: pointer; 
  opacity: 0; 
  visibility: hidden; 
  transform: translateY(20px); 
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1); 
  font-size: 1.2rem;
  font-weight: 600;
}

.back-to-top.show { 
  opacity: 1; 
  visibility: visible; 
  transform: translateY(0); 
}

.back-to-top:hover {
  background: var(--color-accent);
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.3);
}

/* Buttons */
.btn { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  padding: 14px 24px; 
  border-radius: var(--radius); 
  border: 2px solid transparent; 
  font-weight: 600; 
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.btn-primary { 
  background: var(--color-accent); 
  color: #ffffff; 
  border-color: var(--color-accent);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-primary:hover { 
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  transform: translateY(-2px); 
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
}

.btn-outline { 
  background: transparent; 
  color: var(--color-accent); 
  border-color: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
}

.btn-outline:hover { 
  background: var(--color-accent);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
}

/* About */
.about-inner { 
  display: grid; 
  grid-template-columns: 1fr 1.4fr; 
  gap: 24px; 
  align-items: center; 
  min-height: clamp(70svh, 85svh, 90svh); 
}

.about-media img { 
  width: 100%; 
  border-radius: var(--radius); 
  border: 1px solid var(--color-border); 
  box-shadow: 0 20px 60px rgba(0,0,0,.25); 
  object-fit: cover; 
  aspect-ratio: 4/5; 
}

/* Tech Stack Styling - Similar to Legion's design */
.tech-stack {
  margin-top: 32px;
}

.tech-stack h4 {
  color: var(--color-text);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tech-stack h4::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  flex-shrink: 0;
}

.tech-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.tech-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(16, 185, 129, 0.05);
  border: 1px solid rgba(16, 185, 129, 0.1);
  border-radius: 8px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.tech-item:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1);
}

.tech-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  object-fit: contain;
}

.tech-item span {
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
}

.tags { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px; 
  margin-top: 10px; 
}

.tags li { 
  padding: 6px 10px; 
  background: color-mix(in oklab, var(--color-surface), transparent 30%); 
  border: 1px solid var(--color-border); 
  border-radius: 999px; 
  font-size: 0.9rem; 
}

/* Tags in light sections */
.hero .tags li, .projects .tags li, .cv .tags li {
  color: var(--color-text-on-light);
}

/* Tags in dark sections */
.about .tags li, .experience .tags li, .contact .tags li {
  color: var(--color-text-on-dark);
}

/* Projects */
.projects .project-grid { 
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); 
  gap: 32px; 
}

.project-card { 
  background: var(--color-surface); 
  border: 1px solid var(--color-border); 
  border-radius: var(--radius); 
  overflow: hidden; 
  display: grid; 
  grid-template-rows: auto 1fr; 
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
  border-color: var(--color-accent);
}

.project-card img { 
  width: 100%; 
  height: 200px; 
  object-fit: cover; 
  transition: transform 0.3s ease;
}

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

.project-body { 
  padding: 24px; 
}

.project-body h3 {
  color: var(--color-text) !important;
  margin-bottom: 8px;
  font-size: 1.3rem;
  font-weight: 600;
}

.project-body p {
  color: var(--color-text-secondary) !important;
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.project-body .tags { 
  margin: 12px 0 16px; 
}

.project-body .tags li {
  color: var(--color-text) !important;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  font-size: 0.8rem;
  padding: 4px 8px;
  font-weight: 500;
}

.project-links { 
  display: flex; 
  gap: 12px; 
  margin-bottom: 16px; 
}

.project-links .link { 
  color: var(--color-accent); 
  font-weight: 600; 
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.2s ease;
}

.project-links .link:hover {
  color: var(--color-accent-hover);
}

.video-embed { position: relative; width: 100%; padding-top: 50%; border-radius: 10px; overflow: hidden; border: 1px solid var(--color-border); background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.video-embed.image-embed { padding-top: 0; aspect-ratio: 16/9; background: #000; }
.video-embed.image-embed img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Experience */
.experience .experience-list { display: grid; gap: 16px; min-height: auto; }
.experience-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; }
.experience-item header { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.experience-item .meta { font-size: 0.95rem; }
.experience-item ul { list-style: disc; margin-left: 22px; }

/* Experience meta text in dark sections */
.experience .experience-item .meta {
  color: var(--color-text-secondary-on-dark);
}

/* CV */
.cv .cv-inner { min-height: clamp(50svh, 55svh, 60svh); display: grid; place-items: center; }
.cv .cv-content { text-align: center; max-width: 680px; }
.cv .cv-actions { display: flex; gap: 12px; justify-content: center; margin-top: 12px; }

/* Contact */
.contact .contact-inner { 
  min-height: clamp(70svh, 75svh, 80svh); 
  text-align: center; 
}

.contact-form { 
  max-width: 600px; 
  display: grid; 
  gap: 20px; 
  margin: 0 auto; 
  text-align: left; 
  padding: 32px;
  background: rgba(17, 17, 17, 0.8);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(10px);
}

.form-field { 
  display: grid; 
  gap: 8px; 
}

label { 
  font-weight: 600; 
  color: var(--color-text);
  font-size: 0.9rem;
}

input, textarea {
  padding: 14px 16px; 
  border-radius: var(--radius); 
  border: 2px solid var(--color-border); 
  background: var(--color-surface); 
  color: var(--color-text);
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.2s ease;
}

input[type="email"] {
  min-width: 0;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

input:focus, textarea:focus { 
  outline: none; 
  border-color: var(--color-accent); 
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
  background: rgba(17, 17, 17, 0.9);
}

input::placeholder, textarea::placeholder { 
  color: var(--color-text-secondary); 
  opacity: 0.7;
}

.error { 
  color: var(--color-danger); 
  min-height: 20px; 
  font-size: 0.85rem; 
  font-weight: 500;
}

.form-status { 
  min-height: 24px; 
  font-weight: 500;
}

.contact-social { display: flex; align-items: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; justify-content: center; } /* Added justify-content: center; */
.icon-link:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.location { 
  margin-left: 8px; 
  text-align: center;
  width: 100%;
  margin-top: 8px;
  font-size: 0.9rem;
  word-break: break-word;
  hyphens: auto;
}

/* Contact form status in dark sections */
.contact .form-status {
  color: var(--color-text-secondary-on-dark);
}

/* Contact social icons in dark sections */
.contact .icon-link {
  color: var(--color-text-on-dark);
}

/* Contact location in dark sections */
.contact .location {
  color: var(--color-text-secondary-on-dark);
}

/* Footer */
.site-footer { 
  border-top: 1px solid var(--color-border); 
  padding: 24px 0;
}

.footer-inner { 
  display: grid; 
  place-items: center; 
  gap: 16px; 
  min-height: min(20svh, 220px); 
}

.footer-nav { 
  display: flex; 
  gap: 12px; 
  flex-wrap: wrap; 
  justify-content: center; 
  max-width: 100%;
}

.footer-nav a { 
  color: var(--color-text-secondary); 
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.footer-nav a:hover { 
  color: var(--color-text); 
  background: rgba(255, 255, 255, 0.05);
}



/* Responsive */
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; }
  .about-inner { grid-template-columns: 1fr; }

  .card-stack-container {
    width: min(90vw, 700px);
    height: min(70vw, 280px);
    margin-top: 32px;
  }
  
  .stack-container {
    width: 450px;
    height: 270px;
  }
}

@media (max-width: 780px) {
  :root { --sidebar-w: 72px; }
  .nav-toggle { display: inline-flex; }
  .sidebar { 
    left: 0;
    transform: translateX(-100%); 
    box-shadow: none; 
    top: 120px;
    bottom: 120px;
    background: rgba(26, 26, 26, 0.6);
    border: 1px solid rgba(42, 42, 42, 0.2);
    backdrop-filter: blur(30px);
  }
  .sidebar.open { 
    transform: translateX(0); 
    left: 15px;
    width: var(--sidebar-w); 
    border-radius: var(--radius);
    box-shadow: 
      0 25px 80px rgba(0,0,0,.25),
      0 8px 32px rgba(0,0,0,.15),
      inset 0 1px 0 rgba(255,255,255,.1);
  }

  main { margin-left: 0; }
  .site-footer { margin-left: 0; }
  .projects .project-grid { grid-template-columns: 1fr; }
  
  /* Adjust curved sections for mobile */
  .about::before, .projects::before, .experience::before, .cv::before, .contact::before {
    height: 40px;
    border-radius: 0 0 50% 50% / 0 0 60px 60px;
  }

    /* Optional: further tweak specific sections */
    .hero { padding-block: 48px; }
    .about { padding-block: 150px; }
    .projects { padding-block: 100px; }
    .experience { padding-block: 100px; }
    .cv { padding-block: 30px; }
    .contact { padding-block: 100px; }

  /* Card stack mobile adjustments */
  .card-stack-container {
    width: min(90vw, 650px);
    height: min(70vw, 260px);
  }
  
  .stack-container {
    width: 400px;
    height: 250px;
  }

  /* Better contact section handling on mobile */
  .contact-social {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }

  .contact-social .icon-link {
    margin: 0;
  }

  .location {
    margin-left: 0;
    margin-top: 4px;
    font-size: 0.85rem;
    max-width: 90vw;
    line-height: 1.4;
  }

  /* Make contact form more mobile-friendly */
  .contact-form {
    max-width: 100%;
    padding: 0 16px;
  }

  /* Tech stack mobile adjustments */
  .tech-items {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }

  .tech-item {
    padding: 8px 10px;
  }

  .tech-item span {
    font-size: 0.85rem;
  }

  .tech-icon {
    width: 18px;
    height: 18px;
  }

  /* Better button sizing on mobile */
  .hero-actions {
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
  }

  .hero-actions .btn {
    flex: 1;
    min-width: 140px;
    max-width: 200px;
  }

  .cv-actions {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .cv-actions .btn {
    width: 100%;
    max-width: 280px;
  }
}

/* Additional breakpoint for very small mobile devices */
@media (max-width: 480px) {
  :root {
    --sidebar-w: 64px;
  }

  .container {
    width: min(100% - 40px, var(--container-w));
  }

  .nav-toggle {
    top: 12px;
    left: 12px;
    width: 40px;
    height: 40px;
  }

  .sidebar {
    top: 80px;
    bottom: 80px;
  }

  .sidebar.open {
    left: 8px;
    width: var(--sidebar-w);
  }

  .location {
    font-size: 0.8rem;
    max-width: 95vw;
    padding: 0 8px;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  .contact-form {
    padding: 0 8px;
  }

  .hero-actions .btn,
  .cv-actions .btn {
    max-width: 100%;
    font-size: 0.9rem;
    padding: 10px 16px;
  }

  .footer-nav {
    gap: 6px;
    font-size: 0.85rem;
    padding: 0 8px;
  }

  .footer-nav a {
    padding: 3px 6px;
    font-size: 0.85rem;
  }

  /* Ensure icons in sidebar remain accessible on very small screens */
  .sidebar .site-nav .nav-icon {
    width: 22px;
    height: 22px;
  }

  .icon-link {
    width: 32px;
    height: 32px;
  }

  .brand img {
    width: 32px;
    height: 32px;
  }

  /* Prevent horizontal overflow */
  body {
    overflow-x: hidden;
  }

  .container {
    overflow-x: hidden;
  }
}