:root {
    --royal-purple: #7d5fff;
    --royal-blue: #4b7bec;
    --royal-silver: #e2e2e2;
    --royal-white: #ffffff;
    --royal-dark: #1e1e2d;
    --royal-glow: 0 0 20px rgba(125, 95, 255, 0.7);
    --royal-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.page-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 8rem 2rem 4rem;
    position: relative;
    background: radial-gradient(ellipse at center, var(--royal-dark) 0%, #0a0a1a 100%);
}

.content-section {
    padding: 5rem 2rem;
    background: linear-gradient(to bottom, var(--royal-dark), #0a0a1a);
}

.content-container {
    max-width: 1200px;
    margin: 0 auto;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.content-card {
    background: rgba(30, 30, 45, 0.7);
    border-radius: 15px;
    padding: 2.5rem;
    border: 1px solid rgba(125, 95, 255, 0.3);
    box-shadow: var(--royal-shadow);
}

.content-card h2 {
    margin-bottom: 1.5rem;
    color: var(--royal-white);
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-hero {
        min-height: 50vh;
        padding: 6rem 1.5rem 3rem;
    }
    
    .content-section {
        padding: 3rem 1.5rem;
    }
}