:root {
    --bg-color: #0f172a;
    --text-color: #f8fafc;
    --primary-blue: #0ea5e9;
    --accent-blue: #38bdf8;
    --glass-bg: rgba(30, 41, 59, 0.4);
    --glass-border: rgba(255, 255, 255, 0.05);
    --blur-amount: 16px;
    --card-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body {
    background: var(--bg-color);
    background: radial-gradient(circle at top left, #1e1b4b, var(--bg-color));
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    animation: fadeIn 0.6s ease-out;
}

/* Glassmorphism Classes */
.glass-header {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(var(--blur-amount));
    border-bottom: 1px solid var(--glass-border);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-amount));
    border: 1px solid var(--glass-border);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    transform: translateY(-5px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 40px -10px rgba(14, 165, 233, 0.15);
}

.btn-glass {
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--accent-blue);
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    font-weight: 500;
}

.btn-glass:hover {
    background: rgba(14, 165, 233, 0.2);
    border-color: var(--accent-blue);
    color: white;
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);
    transform: scale(1.02);
}

/* Layout Utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.grid {
    display: grid;
    gap: 2rem;
}

.grid-cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Typography */
/* Typography */
h1,
h2,
h3 {
    color: white;
    font-weight: 700;
    margin-top: 0;
}

h1 {
    font-size: 4.5rem;
    /* Increased size */
    line-height: 1.1;
    background: linear-gradient(135deg, white 0%, var(--accent-blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 10;
}

/* Hero Enhancements */
.hero {
    position: relative;
    overflow: hidden;
}

.hero-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    z-index: 0;
    pointer-events: none;
    animation: pulseGlow 4s infinite alternate;
}

@keyframes pulseGlow {
    from {
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.badge-pill {
    display: inline-block;
    background: rgba(14, 165, 233, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: var(--accent-blue);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(4px);
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.1);
    animation: fadeIn 0.8s ease-out;
}

/* Tech Stack Grid */
.tech-stack {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 4rem;
    flex-wrap: wrap;
    opacity: 0.7;
}

.tech-icon {
    font-size: 1.5rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

/* Navbar */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    text-decoration: none;
    letter-spacing: -0.05em;
}

.nav-links a {
    color: #94a3b8;
    text-decoration: none;
    margin-left: 2rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: white;
}

/* Admin Tables */
.admin-table-wrapper {
    overflow-x: auto;
    margin-top: 1.5rem;
}

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: #cbd5e1;
}

.admin-table th {
    text-align: left;
    padding: 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.05);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: middle;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.btn-delete {
    background: rgba(239, 68, 68, 0.1);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.btn-delete:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #ef4444;
}

/* Footer */
footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 4rem 0;
    margin-top: 6rem;
    text-align: center;
    color: #64748b;
    font-size: 0.9rem;
}

/* Chat Widget */
#chat-open-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(14, 165, 233, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    z-index: 9999;
    transition: transform 0.2s;
}

#chat-open-btn:hover {
    transform: scale(1.1);
}

#chat-widget {
    position: fixed;
    bottom: 6rem;
    right: 2rem;
    width: 350px;
    height: 500px;
    background: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
    font-family: 'Inter', sans-serif;
}

.chat-header {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
    padding: 1rem;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-header h4 {
    margin: 0;
    font-size: 1rem;
}

#chat-close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}

#chat-messages {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    background: rgba(15, 23, 42, 0.95);
}

.chat-message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}

.chat-message.guest {
    align-self: flex-end;
    align-items: flex-end;
}

.chat-message.admin {
    align-self: flex-start;
    align-items: flex-start;
}

.msg-bubble {
    padding: 0.8rem 1rem;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
}

.guest .msg-bubble {
    background: var(--primary-blue);
    color: white;
    border-bottom-right-radius: 2px;
}

.admin .msg-bubble {
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border-bottom-left-radius: 2px;
}

#chat-form {
    padding: 1rem;
    background: rgba(30, 41, 59, 0.8);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    gap: 0.5rem;
}

#chat-input {
    flex: 1;
    padding: 0.75rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
    color: white;
    outline: none;
}

#chat-input:focus {
    border-color: var(--accent-blue);
}

.chat-send-btn {
    background: var(--accent-blue);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: none;
    /* Hidden by default on desktop */
    justify-content: space-around;
    padding: 0.8rem 0;
    z-index: 10000;
}

.mobile-nav-item {
    color: #94a3b8;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    gap: 0.3rem;
    transition: color 0.2s;
}

.mobile-nav-item span {
    font-size: 1.4rem;
}

.mobile-nav-item.active,
.mobile-nav-item:hover {
    color: var(--primary-blue);
}

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
    }

    /* Adjust Chat Widget to default position (might overlap, so let's move it up or keep it) */
    /* Actually better to hide the floating chat button on mobile if we have a bottom nav, 
       OR move it up. Let's move it up. */
    #chat-open-btn {
        bottom: 5rem;
        right: 1.5rem;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }

    #chat-widget {
        bottom: 6rem;
        right: 0;
        left: 0;
        width: 100%;
        height: 80vh;
        border-radius: 20px 20px 0 0;
    }

    body {
        padding-bottom: 4rem;
        /* Space for nav */
    }

    /* Mobile Top Header Optimization */
    .nav-links {
        display: none;
        /* Hide desktop links */
    }

    .nav-container {
        justify-content: center;
        /* Center Logo */
    }

    .glass-header {
        padding: 0.8rem 0;
        /* Slimmer header */
    }

    /* Hide WhatsApp button on mobile header too if desired, or keep it. 
       Let's keep it visible but maybe smaller or just hide to match "Clean" request. 
       The user said "Hide Desktop Links... Center Logo... Clean Look". 
       Let's hide the CTA button too for maximum cleanliness, as Contact is in bottom nav. */
    .glass-header .btn-glass {
        display: none;
    }

    /* Force single column for grids on mobile */
    .grid-cols-2,
    .grid-cols-3 {
        grid-template-columns: 1fr;
    }
}