.about-section {
  padding: var(--space-6) var(--space-2);
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  overflow: hidden;
}

.about-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(10, 18, 34, 0.9), rgba(16, 27, 45, 0.8));
  z-index: -1;
}

.about-content {
  max-width: 800px;
  text-align: center;
  position: relative;
  padding: var(--space-4);
  background: rgba(10, 18, 34, 0.6);
  border-radius: var(--border-radius-lg);
  border: 1px solid rgba(160, 233, 255, 0.2);
  box-shadow: var(--box-shadow-lg);
  backdrop-filter: blur(5px);
}

.about-text {
  font-size: 1.5rem;
  color: var(--white);
  line-height: 1.7;
  margin-bottom: var(--space-4);
  font-family: var(--heading-font);
  font-weight: 400;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.floating-rune-divider {
  height: 40px;
  width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M1200 120L0 16.48 0 0 1200 0 1200 120z' fill='%23A0E9FF' opacity='0.1'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  position: relative;
}

.floating-rune-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='20'%3E%3Ccircle cx='50' cy='10' r='8' fill='%23F5C542' opacity='0.5'/%3E%3Ccircle cx='20' cy='10' r='4' fill='%23A0E9FF' opacity='0.3'/%3E%3Ccircle cx='80' cy='10' r='4' fill='%23A0E9FF' opacity='0.3'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 100px 20px;
  background-position: center;
  animation: floatDivider 15s linear infinite;
}

@keyframes floatDivider {
  0% {
    background-position: 0 center;
  }
  100% {
    background-position: 1000px center;
  }
}

/* Constellation grid background */
.about-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle, rgba(245, 197, 66, 0.05) 1px, transparent 1px),
    radial-gradient(circle, rgba(160, 233, 255, 0.05) 1px, transparent 1px);
  background-size: 30px 30px, 50px 50px;
  background-position: 0 0, 15px 15px;
  z-index: -1;
  opacity: 0.5;
}

/* Cloud layers */
.cloud-layer {
  position: absolute;
  width: 100%;
  height: 100px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C150,110 350,0 500,50 C650,100 850,0 1000,50 L1000,100 L0,100 Z' fill='%23A0E9FF' opacity='0.05'/%3E%3C/svg%3E");
  background-size: 1000px 100px;
  pointer-events: none;
  z-index: -1;
}

.cloud-layer-1 {
  bottom: 0;
  animation: moveCloud 60s linear infinite;
}

.cloud-layer-2 {
  bottom: 60px;
  opacity: 0.7;
  animation: moveCloud 45s linear infinite reverse;
}

@keyframes moveCloud {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

@media (max-width: 767px) {
  .about-section {
    padding: var(--space-4) var(--space-2);
    min-height: auto;
  }
  
  .about-content {
    padding: var(--space-3);
  }
  
  .about-text {
    font-size: 1.2rem;
    margin-bottom: var(--space-3);
  }
  
  .floating-rune-divider {
    height: 30px;
  }
}

@media (max-width: 480px) {
  .about-section {
    padding: var(--space-3) var(--space-1);
  }
  
  .about-content {
    padding: var(--space-2);
  }
  
  .about-text {
    font-size: 1rem;
    margin-bottom: var(--space-2);
  }
  
  .floating-rune-divider {
    height: 20px;
  }
}