body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        .hero { background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1575361204480-aadea25e6e68?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80'); background-size: cover; background-position: center; color: white; padding: 150px 0; }
        .section-title { border-bottom: 3px solid #007bff; padding-bottom: 10px; margin-bottom: 30px; }
        .friendlink a.flink { display: inline-block; margin: 10px; padding: 12px 24px; background: #f8f9fa; border-radius: 8px; text-decoration: none; color: #333; transition: all 0.3s; border: 1px solid #dee2e6; }
        .friendlink a.flink:hover { background: #007bff; color: white; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,123,255,0.3); }
        .card { border: none; border-radius: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: transform 0.3s; }
        .card:hover { transform: translateY(-10px); }
        .table-hover tbody tr:hover { background-color: rgba(0,123,255,0.1); }
        footer a { text-decoration: none; }
        @media (max-width: 768px) { .hero { padding: 100px 0; } .display-4 { font-size: 2.5rem; } }