.about-page{display:block}

.about-hero{position:relative}
.about-hero-image{width:100%;height:auto}
.about-hero-overlay{position:absolute;top:20%;left:5%;max-width:480px;background:rgba(250,247,242,0.9);padding:var(--space-md);border:2px solid var(--color-gold);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-sm)}

.about-lore{max-width:720px;margin-inline:auto;text-align:center}

.about-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-md)}
.about-card{display:flex;flex-direction:column;gap:var(--space-xs);text-align:left}

.about-dev{display:grid;grid-template-columns:60% 40%;gap:var(--space-lg);align-items:center}
.about-dev-text{min-width:0}
.about-dev-image img{width:100%;border-radius:var(--radius-md)}

.about-visual{display:grid;grid-template-columns:55% 45%;gap:var(--space-lg);align-items:center}
.about-visual-text{min-width:0}
.about-visual-image img{width:100%;border-radius:var(--radius-md)}

.about-progress{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-top:var(--space-md)}

.about-why-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);margin-top:var(--space-md);max-width:700px;margin-inline:auto;text-align:center}

.about-cta{max-width:480px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;gap:var(--space-sm)}

@media (max-width:900px){
.about-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.about-dev{grid-template-columns:1fr}
.about-visual{grid-template-columns:1fr}
.about-progress{grid-template-columns:1fr}
}

@media (max-width:768px){
.about-hero-overlay{position:static;margin:var(--space-sm);max-width:90%}
.about-cards{grid-template-columns:1fr}
.about-why-grid{grid-template-columns:1fr}
}