* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #0f0f23, #1a1a2e, #16213e);
            color: white;
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* Connecting Dots Background */
        .dots-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .dot {
            position: absolute;
            width: 3px;
            height: 3px;
            background: rgba(64, 224, 255, 0.6);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }

        .dot::before {
            content: '';
            position: absolute;
            width: 100px;
            height: 1px;
            background: linear-gradient(90deg, rgba(64, 224, 255, 0.3), transparent);
            top: 50%;
            left: 3px;
            transform: translateY(-50%);
            animation: pulse 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px) translateX(0px); }
            25% { transform: translateY(-10px) translateX(5px); }
            50% { transform: translateY(5px) translateX(-3px); }
            75% { transform: translateY(-7px) translateX(8px); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 0.3; }
            50% { opacity: 0.8; }
        }

        /* Main Content */
        .container {
            position: relative;
            z-index: 1;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 2rem;
        }

        /* Logo Placeholder */
        .logo-container {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 1rem;
            width: 500px;
            height: 150px;
            background-color: #ffffff;
            border-radius: 10px;
            margin-bottom: 3rem;
        }

        .logo-container img {
           border-radius: 10px;
        }

        .logo-placeholder {
            width: 470px;
            height: 106px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Neon Glow Effect for "The Future Awaits" */
        .subtitle {
            font-size: 2rem;
            margin-bottom: 3rem;
            color: #40e0ff;
            font-weight: 300;
            letter-spacing: 3px;
            text-transform: uppercase;
        }

        .subtitle-text {
            display: inline-block;
            animation: neonGlow 2s ease-in-out infinite alternate;
            text-shadow: 
                0 0 5px #40e0ff,
                0 0 10px #40e0ff,
                0 0 20px #40e0ff,
                0 0 40px #40e0ff,
                0 0 80px #40e0ff;
        }

        @keyframes neonGlow {
            0% { 
                text-shadow: 
                    0 0 5px #40e0ff,
                    0 0 10px #40e0ff,
                    0 0 20px #40e0ff,
                    0 0 40px #40e0ff,
                    0 0 80px #40e0ff,
                    0 0 120px #40e0ff;
                color: #40e0ff;
            }
            25% {
                text-shadow: 
                    0 0 2px #40e0ff,
                    0 0 5px #40e0ff,
                    0 0 10px #40e0ff,
                    0 0 20px #40e0ff,
                    0 0 35px #40e0ff,
                    0 0 80px #40e0ff;
                color: #66f0ff;
            }
            50% {
                text-shadow: 
                    0 0 10px #40e0ff,
                    0 0 20px #40e0ff,
                    0 0 30px #40e0ff,
                    0 0 50px #40e0ff,
                    0 0 100px #40e0ff,
                    0 0 150px #40e0ff;
                color: #00ccff;
            }
            75% {
                text-shadow: 
                    0 0 5px #40e0ff,
                    0 0 15px #40e0ff,
                    0 0 25px #40e0ff,
                    0 0 45px #40e0ff,
                    0 0 90px #40e0ff,
                    0 0 130px #40e0ff;
                color: #80f5ff;
            }
            100% { 
                text-shadow: 
                    0 0 8px #40e0ff,
                    0 0 18px #40e0ff,
                    0 0 35px #40e0ff,
                    0 0 60px #40e0ff,
                    0 0 120px #40e0ff,
                    0 0 180px #40e0ff;
                color: #ffffff;
            }
        }

        .services {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 600px;
        }

        .service-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(64, 224, 255, 0.2);
            border-radius: 15px;
            padding: 1.5rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(64, 224, 255, 0.1), transparent);
            transition: left 0.5s;
        }

        .service-card:hover::before {
            left: 100%;
        }

        .service-card:hover {
            transform: translateY(-5px);
            border-color: rgba(64, 224, 255, 0.5);
            box-shadow: 0 10px 30px rgba(64, 224, 255, 0.2);
        }

        .service-title {
            font-size: 1.3rem;
            color: #40e0ff;
            margin-bottom: 0.5rem;
        }

        .service-desc {
            color: #b3d9ff;
            opacity: 0.8;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .sgc-glow-btn {
        margin-top: 20px;
        padding: 12px 28px;
        font-size: 16px;
        font-weight: 500;
        color: #fff;
        text-decoration: none;
        border-radius: 30px;
        border: 1px solid rgba(64, 224, 255, 0.4);
        background: rgba(255, 255, 255, 0.05);
        backdrop-filter: blur(8px);
        position: relative;
        overflow: hidden;
        z-index: 1;
        transition: all 0.3s ease;
        }

        /* 🔵 Rotating Light Ring */
        .sgc-glow-btn::before {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 30px;
        background: conic-gradient(
        from 0deg,
        transparent,
        #40e0ff,
        transparent,
        #00ccff,
        transparent
        );
        animation: rotateLight 4s linear infinite;
        z-index: -1;
        }

        /* Inner layer (keeps button clean) */
        .sgc-glow-btn::after {
        content: "";
        position: absolute;
        inset: 2px;
        background: rgba(15, 15, 35, 0.95);
        border-radius: 30px;
        z-index: -1;
        }

        /* Rotation animation */
        @keyframes rotateLight {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
        }

        /* Hover enhancement */
        .sgc-glow-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(64, 224, 255, 0.6);
        }

        /* Footer with Social Links */
        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: rgba(15, 15, 35, 0.9);
            backdrop-filter: blur(10px);
            padding: 1rem 0;
            z-index: 10;
        }

        .social-links {
            display: flex;
            justify-content: center;
            gap: 2rem;
        }

        .social-icon {
            width: 40px;
            height: 40px;
            border: 2px solid rgba(64, 224, 255, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #40e0ff;
            text-decoration: none;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .social-icon::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(64, 224, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        .social-icon:hover::before {
            left: 100%;
        }

        .social-icon:hover {
            border-color: #40e0ff;
            color: white;
            transform: translateY(-3px) scale(1.1);
            box-shadow: 0 5px 15px rgba(64, 224, 255, 0.3);
        }

        .social-icon svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }
        @media (max-width: 768px) {
            .logo {
                font-size: 2.5rem;
            }
            
            .tagline {
                font-size: 1.2rem;
            }
            
            .subtitle {
                font-size: 1.5rem;
            }
            
            .container {
                padding: 1rem;
            }
        }