body { 
    font-family: 'DM Sans', sans-serif; 
    background: #f4f7fb; 
    padding-top: 85px; 
}

/* ─────────────────────────────
   HERO BANNER
───────────────────────────── */
.hero-banner { 
    background: linear-gradient(135deg, #0d2b5e, #1e4d8c); 
    color: white; 
    padding: 4.5rem 0; 
    border-radius: 0 0 40px 40px; 
    margin-bottom: 4rem; 
    box-shadow: 0 10px 30px rgba(13, 43, 94, 0.15);
}

/* ─────────────────────────────
   RULE CARDS & ICONS
───────────────────────────── */
.rule-card { 
    border: 1px solid rgba(0,0,0,0.05); 
    border-radius: 20px; 
    background: #ffffff;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; 
}

.rule-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); 
    border-color: rgba(46, 204, 113, 0.3);
}

.icon-box { 
    width: 65px; 
    height: 65px; 
    background: rgba(46, 204, 113, 0.12); 
    color: #2ecc71; 
    border-radius: 18px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    font-size: 2rem; 
    margin-bottom: 1.5rem; 
    transition: background 0.3s ease;
}

.rule-card:hover .icon-box {
    background: rgba(46, 204, 113, 0.2);
}

/* ─────────────────────────────
   UTILITIES
───────────────────────────── */
.tracking-wide {
    letter-spacing: 1.5px;
}