/* ==========================================================================
   Tandem About Page Section-Specific Styles
   ========================================================================== */



.about-hero-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
  width: 100%;
}

.about-hero-media .has-glow {
  position: relative;
  width: 100%;
  max-width: 580px;
  display: flex;
  justify-content: center;
  align-items: center;
  --glow-size: 550px;
  --glow-blur: 80px;
}

.about-hero-media img {
  width: 100%;
  height: auto;
  max-width: 500px;
  object-fit: contain;
  filter: drop-shadow(0 20px 50px rgba(var(--primary-purple-rgb), 0.25));
}

@media (max-width: 1280px) {
  .about-hero-media img {
    max-width: 380px;
  }
}

@media (max-width: 768px) {
  .about-hero-media img {
    max-width: 280px;
  }
}

/* --- 2. Positioning Section & 3D Crystal --- */
.about-positioning-crystal {
  bottom: -30%;
  right: -15%;
  width: 220px;
}

@media (max-width: 1280px) {
  .about-positioning-crystal {
    right: -5%;
    bottom: -25%;
  }
}

@media (max-width: 768px) {
  .about-positioning-crystal {
    width: 160px;
    right: -5%;
    bottom: -25%;
  }
}

.about-positioning-crystal .has-glow {
  --glow-size: 200px;
  --glow-blur: 40px;
}

/* --- 3. Buttons and Spacers --- */
.about-hero-section .btn-primary {
  margin-top: var(--space-xl);
}

.works-section .glass-card .btn-primary {
  margin-top: var(--space-xl);
}