/* About Page Styles - PortalPL */
.about-hero {
  position: relative;
  background: radial-gradient(1200px 400px at 10% 10%, var(--color-primary-subtle), transparent 60%),
              radial-gradient(800px 300px at 90% 30%, rgba(0, 217, 255, 0.08), transparent 70%),
              linear-gradient(180deg, var(--color-background) 0%, var(--color-surface) 100%);
  padding: var(--space-16) 0 var(--space-12);
  overflow: hidden;
}
.about-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 0,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 32px
  );
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0));
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .hero-inner { grid-template-columns: 1.1fr 0.9fr; align-items: center; }
}
.hero-copy h1 { margin-bottom: var(--space-4); }
.hero-subtitle { font-size: var(--font-size-lg); color: var(--color-text-secondary); margin-bottom: var(--space-6); }
.hero-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hero-media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), var(--shadow-glow); border: 1px solid var(--color-neutral-700); }

.about-section { padding: var(--space-12) 0; }
.media-img { border-radius: var(--radius-lg); box-shadow: var(--shadow-base); border: 1px solid var(--color-neutral-700); }

.about-cta { padding: var(--space-12) 0 var(--space-16); }
.about-cta .cta-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }

/* Minor enhancements for cards in grid */
.card ul { margin-top: var(--space-2); }
.card li { list-style: disc; }

/* Accessibility: focus ring harmonization (already present in base.css, here only slight tweak for hero buttons) */
.hero-actions .btn:focus-visible { box-shadow: 0 0 0 3px var(--color-primary-subtle); }