.about { background: var(--color-bg-alt); }
.about-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 80px); align-items: center; }
.about-image-wrapper { position: relative; display: flex; justify-content: center; align-items: center; min-height: 400px; }
.about-image-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(124,58,237,0.15), rgba(6,182,212,0.1)); border-radius: 50%; z-index: 0; }
.about-image-placeholder { width: 260px; height: 260px; border-radius: 50%; overflow: hidden; position: relative; z-index: 1; }
.about-image-placeholder img { width: 100%; height: 100%; object-fit: cover; }
.about-initial { font-family: var(--font-display); font-size: 6rem; font-weight: 800; color: #fff; opacity: 0.9; }
.about-image-ring { position: absolute; inset: -16px; border: 1px solid rgba(124,58,237,0.2); border-radius: 50%; animation: ringRotate 20s linear infinite; }
.ring-2 { inset: -36px; border-color: rgba(6,182,212,0.15); animation-direction: reverse; animation-duration: 30s; }
@keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.about-float-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 18px; background: rgba(255,255,255,0.92); backdrop-filter: blur(12px); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 600; color: var(--color-text); z-index: 2; animation: floatBounce 4s ease-in-out infinite; }
.about-float-card svg { color: var(--color-primary-light); flex-shrink: 0; }
.card-1 { top: 30px; right: 10px; animation-delay: 0s; }
.card-2 { bottom: 40px; left: 10px; animation-delay: -2s; }
@keyframes floatBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.about-content { display: flex; flex-direction: column; gap: 20px; }
.about-lead { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.7; }
.about-lead strong { color: var(--color-primary-light); font-weight: 600; }
.about-content p { color: var(--color-text-muted); line-height: 1.8; }
.about-highlights { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.highlight { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.9rem; font-weight: 500; transition: all 0.3s ease; }
.highlight:hover { border-color: var(--color-primary); background: rgba(124,58,237,0.05); }
.highlight-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(124,58,237,0.1); color: var(--color-primary-light); flex-shrink: 0; }