/* Layout and structure styles */

.bg-grid {
  position: fixed;
  inset: 0;
  background-image: 
    radial-gradient(circle, rgba(198, 125, 59, 0.15) 1px, transparent 1px),
    radial-gradient(circle, rgba(14, 59, 158, 0.1) 1.5px, transparent 1.5px);
  background-size: 80px 80px, 120px 120px;
  background-position: 0 0, 40px 40px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at 50% 50%, black 25%, transparent 100%);
}

.glow-orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
  animation: orbFloat 8s ease-in-out infinite;
}

.orb1 {
  width: 500px;
  height: 500px;
  background: rgba(124, 109, 250, 0.12);
  top: -200px;
  right: -100px;
}

.orb2 {
  width: 400px;
  height: 400px;
  background: rgba(250, 109, 154, 0.08);
  bottom: -100px;
  left: -100px;
  animation-delay: -4s;
}

.orb3 {
  width: 300px;
  height: 300px;
  background: rgba(109, 250, 212, 0.06);
  top: 40%;
  left: 40%;
  animation-delay: -2s;
}

.page {
  display: none;
  min-height: 100vh;
  padding: 100px 40px 120px;
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}

.page.active {
  display: block;
  animation: fadeIn 0.5s ease;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.skills-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 600px) {
  .skills-layout {
    grid-template-columns: 1fr;
  }
}

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

@media (max-width: 700px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
}