/* ════════════════════════════════════════════
   ABOUT SECTION
   about.css
════════════════════════════════════════════ */
#about {
  background: var(--black2);
  position: relative;
  z-index: 2;
  overflow: hidden;
}

/* ── Floating ambient orbs ── */
#about::before {
  content: ''; position: absolute;
  top: -10vw; right: -10vw;
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, rgba(255,184,0,0.06) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}
#about::after {
  content: ''; position: absolute;
  bottom: -10vw; left: -10vw;
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, rgba(255,107,53,0.05) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none;
}

/* ── Bento Grid Layout ── */
.about-bento {
  display: grid;
  grid-template-columns: 4.5fr 7.5fr;
  gap: 24px;
  perspective: 1200px;
}

/* ── Main Portrait Card ── */
.about-visual-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 32px;
  padding: 12px;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s;
}
.about-visual-card:hover {
  transform: translateY(-10px) rotateY(-4deg) rotateX(2deg);
  box-shadow: 0 40px 100px rgba(0,0,0,0.8), 0 0 60px rgba(255,184,0,0.1);
  border-color: rgba(255,184,0,0.3);
}

.portrait-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  border-radius: 20px;
  overflow: hidden;
  background: #111;
}
.portrait-img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: contrast(1.1) grayscale(20%);
  transition: transform 1s ease, filter 0.6s ease;
}
.about-visual-card:hover .portrait-img {
  transform: scale(1.05);
  filter: contrast(1.1) grayscale(0%);
}

/* ── 3D Floating Rings over Portrait ── */
.ring-accent {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,184,0,0.4);
  pointer-events: none;
  transform-style: preserve-3d;
}
.ring-1 {
  width: 140%; height: 140%;
  top: -20%; left: -20%;
  border-top-color: transparent; border-bottom-color: transparent;
  box-shadow: 0 0 40px rgba(255,184,0,0.1);
}
.ring-2 {
  width: 180%; height: 180%;
  top: -40%; left: -40%;
  border-left-color: transparent; border-right-color: transparent;
  border-color: rgba(255,107,53,0.3);
}

/* ── Stats overlays on portrait ── */
.glass-stat {
  position: absolute;
  background: rgba(13,13,13,0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 20px 24px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
  transform-style: preserve-3d;
  transition: transform 0.4s;
}
.about-visual-card:hover .glass-stat {
  transform: translateZ(40px); /* Pops out in 3D on hover */
}
.stat-1 { bottom: 20px; left: -30px; }
.stat-2 { top: 40px; right: -40px; }

.stat-num {
  font-family: var(--font-display);
  font-size: 2.8rem; font-weight: 700; font-style: italic;
  background: linear-gradient(135deg, var(--gold), var(--coral));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; text-shadow: 0 10px 20px rgba(255,184,0,0.2);
}
.stat-label {
  font-family: var(--font-head);
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--cream); line-height: 1.4;
}

/* ── Content Side (Right) ── */
.about-content-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* The massive text card */
.about-text-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 32px;
  padding: 56px;
  flex: 1;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22,1,0.36,1), box-shadow 0.6s;
}
.about-text-card:hover {
  transform: translateY(-8px) rotateY(2deg);
  box-shadow: 0 40px 80px rgba(0,0,0,0.6);
  border-color: rgba(255,255,255,0.1);
}

.about-text-card .section-title {
  font-size: clamp(2.5rem, 4vw, 3.8rem);
  margin-bottom: 32px;
}
.about-text {
  font-size: 1.15rem; color: var(--muted2);
  line-height: 1.8; margin-bottom: 24px;
}
.about-text strong {
  color: var(--cream); font-weight: 600;
}

/* Philosophy cards row below text */
.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.phil-card {
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  transform-style: preserve-3d;
}
.phil-icon {
  font-size: 2rem; margin-bottom: 16px;
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(255,184,0,0.3));
}
.phil-title {
  font-family: var(--font-head);
  font-size: 1.1rem; font-weight: 700;
  color: var(--cream); margin-bottom: 8px;
}
.phil-desc {
  font-size: 0.9rem; color: var(--muted); line-height: 1.6;
}

@media (max-width: 1024px) {
  .about-bento { grid-template-columns: 1fr; }
  .stat-1 { left: 20px; }
  .stat-2 { right: 20px; }
  .portrait-wrap { max-width: 500px; margin: 0 auto; }
}
@media (max-width: 768px) {
  .philosophy-grid { grid-template-columns: 1fr; }
  .about-text-card { padding: 40px 24px; }
}