@layer components{.about-page-container{container-type:inline-size;max-width:var(--container-max-width, 75rem);margin-inline:auto;padding-inline:var(--container-padding, var(--space-4))}.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:"";position:absolute;top:-50%;right:-50%;width:100%;height:100%;background:radial-gradient(circle,rgb(from var(--color-brand) r g b / 5%) 0%,transparent 70%);animation:about-float 6s ease-in-out infinite;pointer-events:none}}.about-content-grid{display:grid;grid-template-columns:1fr;gap:var(--space-8);margin-bottom:var(--space-16);@container (min-width: 768px){grid-template-columns:repeat(2,1fr);gap:var(--space-10)}@container (min-width: 1024px){gap:var(--space-12)}@container (max-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);position:relative;overflow:hidden;transition:transform var(--transition-normal),box-shadow var(--transition-normal),background var(--transition-theme);&:before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:linear-gradient(90deg,var(--color-brand),var(--color-accent),var(--color-brand));background-size:300% 100%;animation:gradient-slide 3s ease infinite}&:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}&: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}&:nth-child(1){animation-delay:0s}&:nth-child(2){animation-delay:.08s}&: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 (max-width: 767px){padding:var(--space-6)}@container (max-width: 480px){padding:var(--space-4)}}.about-card-title{font-size:var(--text-2xl);font-weight:700;color:var(--color-brand);margin-bottom:var(--space-4);display:flex;align-items:center;gap:var(--space-3);transition:color var(--transition-theme);&:before{content:"";width:.5rem;height:.5rem;background:currentColor;border-radius:50%;flex-shrink:0}@container (max-width: 767px){font-size:var(--text-xl);margin-bottom:var(--space-3)}@container (max-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{font-weight:600;color:var(--color-text)}@container (max-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;position:relative;overflow:hidden;transition:background var(--transition-theme);&:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgb(from var(--color-brand) r g b / 5%) 0%,transparent 50%);animation:pulse-bg 4s ease-in-out infinite;pointer-events:none}@container (max-width: 640px){padding:var(--space-8)}}.contact-cta-text{font-size:var(--text-xl);color:var(--color-text-muted);margin-bottom:var(--space-8);max-width:37.5rem;margin-inline:auto;line-height:1.6;position:relative;z-index:1;transition:color var(--transition-theme);@container (max-width: 640px){font-size:var(--text-lg);margin-bottom:var(--space-6)}}.contact-cta-buttons{display:flex;gap:var(--space-4);justify-content:center;flex-wrap:wrap;position:relative;z-index:1;@container (max-width: 640px){flex-direction:column;align-items:center;gap:var(--space-3)}}.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:"";position:absolute;bottom:var(--space-4);right:var(--space-4);width:1.25rem;height:1.25rem;background:linear-gradient(45deg,#df202e,oklch(65% .18 50));border-radius:50%;opacity:0;transition:opacity var(--transition-normal)}.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:"✨";position:absolute;top:var(--space-4);right:var(--space-4);font-size:var(--text-xl);opacity:0;scale:.8;transition:opacity var(--transition-normal),scale var(--transition-normal)}.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%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes pulse-bg{0%,to{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}