body {
            font-family: 'Segoe UI', sans-serif;
            background: url('/assets/img/starfield-animated.gif') repeat top center;
            background-size: cover;
            color: #ffffff;
            margin: 0;
            padding-bottom: 100px;
            /* space for fixed footer */
            overflow-x: hidden;
        }

        .hero {
            background: rgba(0, 0, 0, 0.6);
            padding: 60px 0;
            text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.6);
        }

        .feature-card {
            background: rgba(30, 30, 60, 0.85);
            border: 1px solid #333;
            border-radius: 15px;
            transition: transform 0.3s, box-shadow 0.3s;
            height: 100%;
        }

        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 20px #00bcd4;
        }

        .feature-card img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            margin-bottom: 1rem;
        }

        .timeline {
            background: linear-gradient(to right, #1f1f2c, #10101a);
        }

        .btn-primary {
            background-color: #00bcd4;
            border-color: #00bcd4;
        }

        .btn-outline-light {
            border-color: #00bcd4;
            color: #00bcd4;
        }

        .btn-outline-light:hover {
            background-color: #00bcd4;
            color: #fff;
        }

        footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            background-color: #111;
            color: #ccc;
            text-align: center;
            padding: 15px 0;
            border-top: 1px solid #222;
            z-index: 10;
        }

        .rotate-banner {
            transform: rotate(-45deg) translate(-30%, -80%);
            display: inline-block;
            border-radius: 3px;
            z-index: 2;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        .char-card.char-blue:hover {
            transform: scale(1.03);
            box-shadow: 0 0 20px rgba(0, 188, 212, 0.5);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .char-card.char-orange:hover {
            transform: scale(1.03);
            box-shadow: 0 0 20px rgba(255, 165, 0, 0.4);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .char-blue {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .char-blue:hover {
            transform: scale(1.03);
            box-shadow: 0 0 25px rgba(0, 188, 212, 0.8);
        }

        .char-orange {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .char-orange:hover {
            transform: scale(1.03);
            box-shadow: 0 0 25px rgba(255, 165, 0, 0.7);
        }

        .bg-purple {
            background-color: #9b59b6 !important;
        }