.sasc-wrapper { font-family: sans-serif; color: #333; }
.sasc-hero { min-height: 60vh; background-color: #222; display: flex; align-items: center; justify-content: center; position: relative; color: white; text-align: center; padding: 2rem; }
.sasc-hero h1 { font-weight: bold; text-transform: uppercase; margin-bottom: 1rem; color: white; }
.sasc-hero h2 { font-weight: normal; font-size: 1.2rem; color: #eee; max-width: 800px; margin: 0 auto; }

.sasc-purpose, .sasc-structure { display: flex; flex-direction: row; flex-wrap: wrap; margin-bottom: 2rem; }
.sasc-col { padding: 2rem; box-sizing: border-box; }
.sasc-purpose-left { width: 30%; }
.sasc-purpose-right { width: 70%; background: #f9f9f9; padding: 40px; border-radius: 8px; }
.sasc-purpose-right ul { columns: 3; list-style: none; padding: 0; margin: 0; }
.sasc-purpose-right li { margin-bottom: 1rem; }

.sasc-structure-left, .sasc-structure-right { width: 50%; }
.sasc-info-box { background: #f5f5f5; padding: 1rem; margin-bottom: 1rem; border-left: 4px solid #1e3a8a; transition: transform 0.3s; }
.sasc-info-box:hover { transform: translateX(10px); }

.sasc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sasc-card { background: white; box-shadow: 0 4px 6px rgba(0,0,0,0.05); padding: 1.5rem; text-align: center; border-radius: 8px; }
.sasc-icon { height: 40px; width: 40px; background: #ddd; border-radius: 50%; margin: 0 auto 1rem; }

@media (max-width: 768px) {
    .sasc-purpose-left, .sasc-purpose-right, .sasc-structure-left, .sasc-structure-right { width: 100%; }
    .sasc-purpose-right ul { columns: 1; }
}