/* Critical CSS - Above the fold only - Mobile First */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-behavior:smooth}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
  line-height:1.6;color:#0f172a;background:#ffffff;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeSpeed;
}

/* Prevent Layout Shift - Image containers with aspect ratios */
.project-image{
  position:relative;width:100%;height:200px;overflow:hidden;
  border-radius:0.5rem;background:#f8fafc;
}
.project-image::before{
  content:'';display:block;width:100%;height:0;
  padding-bottom:56.25%;background-color:#e2e8f0;
}
.project-image img,.project-image picture{
  position:absolute;top:0;left:0;width:100%;height:100%;
  object-fit:cover;object-position:center;
}

/* Critical Navigation */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(255,255,255,0.95);backdrop-filter:blur(10px);
  transition:background-color 0.3s ease;border-bottom:1px solid rgba(226,232,240,0.5);
  height:60px;will-change:transform;
}
.nav-container{
  max-width:1200px;margin:0 auto;padding:0 1rem;
  display:flex;align-items:center;justify-content:space-between;height:100%;
}
.nav-logo a{
  font-size:1.25rem;font-weight:600;color:#2563eb;text-decoration:none;
}

/* Critical Hero Section */
.hero{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%);
  padding:1rem;position:relative;overflow:hidden;
}
.hero-content{
  text-align:center;max-width:800px;padding:0 1rem;z-index:2;
}
.hero-title{
  font-size:clamp(2rem,5vw,4rem);font-weight:600;color:#ffffff;
  margin-bottom:1rem;line-height:1.1;
}
.hero-subtitle{
  font-size:clamp(1.125rem,2.5vw,1.5rem);color:rgba(255,255,255,0.9);
  margin-bottom:1rem;font-weight:500;
}
.hero-description{
  font-size:clamp(1rem,2vw,1.125rem);color:rgba(255,255,255,0.8);
  margin-bottom:2rem;max-width:600px;margin-left:auto;margin-right:auto;
}

/* Loading Screen */
#loading-screen{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:#ffffff;display:flex;align-items:center;justify-content:center;
  z-index:9999;transition:opacity 0.35s ease;
}
#loading-screen.hidden{opacity:0;pointer-events:none;}
.loading-animation,.dna-helix{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.dna-helix::before{
  content:'';width:40px;height:40px;border:3px solid #e2e8f0;
  border-top:3px solid #2563eb;border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Mobile Navigation */
.nav-toggle{
  display:none;flex-direction:column;cursor:pointer;padding:5px;
}
.nav-toggle span{
  width:25px;height:2px;background:#2563eb;margin:3px 0;
  transition:0.3s;
}
.nav-menu{
  display:flex;align-items:center;gap:2rem;
}
.nav-link{
  color:#475569;text-decoration:none;font-weight:500;
  transition:color 0.3s ease;padding:0.5rem 0;
}
.nav-link:hover,.nav-link.active{color:#2563eb;}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .hero{min-height:calc(100vh - 60px);padding:2rem 1rem;}
  .nav-menu{
    position:fixed;top:60px;left:-100%;width:100%;height:calc(100vh - 60px);
    background:rgba(255,255,255,0.98);backdrop-filter:blur(10px);
    flex-direction:column;justify-content:flex-start;padding:2rem 1rem;
    transition:left 0.3s ease;box-shadow:0 4px 6px rgba(0,0,0,0.1);
  }
  .nav-menu.active{left:0;}
  .nav-toggle{display:flex;}
  .nav-toggle.active span:nth-child(1){transform:rotate(-45deg) translate(-5px,6px);}
  .nav-toggle.active span:nth-child(2){opacity:0;}
  .nav-toggle.active span:nth-child(3){transform:rotate(45deg) translate(-5px,-6px);}
}