body {
            background-color: #f8fafc; /* Softer white for better contrast with glass */
            color: #1e293b;
        }

        .navbar {
            background: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.6);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03);
        }

        .hero {
            background: radial-gradient(circle at 80% 20%, rgba(14, 165, 233, 0.15) 0%, rgba(248, 250, 252, 0) 50%),
                        radial-gradient(circle at 20% 80%, rgba(45, 212, 191, 0.1) 0%, rgba(248, 250, 252, 0) 50%);
            position: relative;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+CjxjaXJjbGUgY3g9IjIiIGN5PSIyIiByPSIyIiBmaWxsPSJyZ2JhKDE1LCAyMywgNDIsIDAuMDUpIi8+Cjwvc3ZnPg==') repeat;
            opacity: 0.5;
            z-index: -1;
        }

        .hero-content h1 span {
            background: linear-gradient(135deg, #0284c7 0%, #2dd4bf 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 10px 30px rgba(2, 132, 199, 0.15);
        }

        .section-tag {
            text-transform: uppercase;
            letter-spacing: 0.2em;
            font-size: 0.85rem;
            font-weight: 800;
            background: linear-gradient(135deg, #0284c7 0%, #2dd4bf 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 16px;
            display: inline-block;
            padding: 4px 12px;
            border-radius: 100px;
            background-color: rgba(2, 132, 199, 0.05);
        }

        .dept-grid, .desig-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 32px;
            margin-top: 50px;
        }

        .info-card {
            background: rgba(255, 255, 255, 0.6);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.8);
            padding: 40px;
            border-radius: 28px;
            box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
            transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }

        .info-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
            z-index: 0;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .info-card > * {
            position: relative;
            z-index: 1;
        }

        .info-card:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 30px 60px -15px rgba(2, 132, 199, 0.15), inset 0 0 0 1px rgba(255, 255, 255, 1);
            border-color: rgba(2, 132, 199, 0.2);
        }

        .info-card:hover::before {
            opacity: 1;
        }

        .info-card h4 {
            font-size: 1.4rem;
            margin-bottom: 16px;
            color: #0f172a;
            display: flex;
            align-items: center;
            gap: 14px;
            font-weight: 700;
        }

        .info-card h4 i {
            background: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 1.4rem;
        }

        .ai-feature {
            background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(20, 184, 166, 0.02) 100%);
            color: #0d9488;
            padding: 14px 20px;
            border-radius: 16px;
            font-size: 0.95rem;
            font-weight: 600;
            margin-top: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            border-left: 4px solid #2dd4bf;
            box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.5);
            transition: all 0.3s ease;
        }

        .info-card:hover .ai-feature {
            background: linear-gradient(135deg, rgba(20, 184, 166, 0.15) 0%, rgba(20, 184, 166, 0.05) 100%);
            transform: translateX(5px);
        }

        .ai-feature i {
            font-size: 1.1rem;
            color: #0f766e;
        }

        .footer {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(20px);
            border-top: 1px solid rgba(0, 0, 0, 0.05);
        }

        .logo img {
            mix-blend-mode: multiply;
        }