@layer components{.about-page-container{max-width:var(--container-max-width,75rem);padding-inline:var(--container-padding,var(--space-4));margin-inline:auto;container-type:inline-size}.about-page-container .hero-section{background:linear-gradient(135deg, rgb(from var(--color-brand) r g b / 10%), rgb(from var(--color-accent) r g b / 10%));border:1px solid rgb(from var(--color-brand) r g b / 20%);position:relative;overflow:hidden;&:before{content:"";background:radial-gradient(circle, rgb(from var(--color-brand) r g b / 5%) 0%, transparent 70%);pointer-events:none;width:100%;height:100%;animation:6s ease-in-out infinite about-float;position:absolute;top:-50%;right:-50%}}.about-content-grid{gap:var(--space-8);margin-bottom:var(--space-16);grid-template-columns:1fr;display:grid;@container (width>=768px){gap:var(--space-10);grid-template-columns:repeat(2,1fr)}@container (width>=1024px){gap:var(--space-12)}@container (width<=767px){gap:var(--space-6)}}.about-card{background:var(--color-surface-raised);padding:var(--space-8);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);border:1px solid var(--color-border);transition:transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-theme);position:relative;overflow:hidden;&:before{content:"";top:0;background:linear-gradient(90deg, var(--color-brand), var(--color-accent), var(--color-brand));background-size:300% 100%;height:4px;animation:3s infinite gradient-slide;position:absolute;inset-inline:0}&:hover{box-shadow:var(--shadow-xl);transform:translateY(-4px)}&:focus-within{outline:2px solid rgb(from var(--color-brand) r g b / 50%);outline-offset:2px}transition:opacity .5s, translate .5s var(--ease-spring), transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-theme);@starting-style{opacity:0;translate:0 1.5rem}&:first-child{animation-delay:0s}&:nth-child(2){animation-delay:80ms}&:nth-child(3){animation-delay:.16s}&:nth-child(4){animation-delay:.24s}&:nth-child(5){animation-delay:.32s}&:nth-child(6){animation-delay:.4s}@container (width<=767px){padding:var(--space-6)}@container (width<=480px){padding:var(--space-4)}}.about-card-title{font-size:var(--text-2xl);color:var(--color-brand);margin-bottom:var(--space-4);align-items:center;gap:var(--space-3);transition:color var(--transition-theme);font-weight:700;display:flex;&:before{content:"";background:currentColor;border-radius:50%;flex-shrink:0;width:.5rem;height:.5rem}@container (width<=767px){font-size:var(--text-xl);margin-bottom:var(--space-3)}@container (width<=480px){font-size:var(--text-lg);gap:var(--space-2)}}.about-card-text{color:var(--color-text-muted);line-height:1.7;font-size:var(--text-lg);transition:color var(--transition-theme);& strong{color:var(--color-text);font-weight:600}@container (width<=767px){font-size:var(--text-base)}}.contact-cta-section{background:var(--color-surface-raised);padding:var(--space-12);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);text-align:center;transition:background var(--transition-theme);position:relative;overflow:hidden;&:before{content:"";background:radial-gradient(circle at 50% 50%, rgb(from var(--color-brand) r g b / 5%) 0%, transparent 50%);pointer-events:none;animation:4s ease-in-out infinite pulse-bg;position:absolute;inset:0}@container (width<=640px){padding:var(--space-8)}}.contact-cta-text{font-size:var(--text-xl);color:var(--color-text-muted);margin-bottom:var(--space-8);z-index:1;max-width:37.5rem;transition:color var(--transition-theme);margin-inline:auto;line-height:1.6;position:relative;@container (width<=640px){font-size:var(--text-lg);margin-bottom:var(--space-6)}}.contact-cta-buttons{gap:var(--space-4);z-index:1;flex-wrap:wrap;justify-content:center;display:flex;position:relative;@container (width<=640px){align-items:center;gap:var(--space-3);flex-direction:column}}.theme-power-up{& .about-card:hover{transform:translateY(-4px)rotate(-1deg)}& .about-card-title{font-family:var(--font-display-power);text-transform:uppercase;letter-spacing:.05em}& .about-card:after{content:"";bottom:var(--space-4);right:var(--space-4);opacity:0;width:1.25rem;height:1.25rem;transition:opacity var(--transition-normal);background:linear-gradient(45deg,oklch(58% .22 25),oklch(65% .18 50));border-radius:50%;position:absolute}& .about-card:hover:after{opacity:.7}}.theme-sparkle-play{& .about-card:hover{transform:translateY(-4px)rotate(.5deg)}& .about-card-title{font-family:var(--font-display-sparkle)}& .about-card:after{content:"✨";top:var(--space-4);right:var(--space-4);font-size:var(--text-xl);opacity:0;transition:opacity var(--transition-normal), scale var(--transition-normal);position:absolute;scale:.8}& .about-card:hover:after{opacity:.8;scale:1}}@media print{.about-page-container{max-width:none}.about-content-grid{display:block}.about-card{break-inside:avoid;margin-bottom:var(--space-6);box-shadow:none;border:1px solid var(--color-border)}.contact-cta-section{box-shadow:none;border:1px solid var(--color-border)}.about-card:before,.contact-cta-section:before{display:none}}}@keyframes about-float{0%,to{transform:translateY(0)rotate(0)}50%{transform:translateY(-20px)rotate(180deg)}}@keyframes gradient-slide{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@keyframes pulse-bg{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}