/* ** UPDATED: Modernized Color Palette ** */
    :root {
        --primary-bg: #010a24;
        --secondary-bg: #1c2736;
        /* Updated Accent Colors */
        --accent-color: #38bdf8;      /* Tailwind sky-400 */
        --highlight-color: #facc15;   /* Tailwind yellow-400 */
        
        --text-color: #e0e0ff;
        --border-color: rgba(56, 189, 248, 0.15); /* Brighter border */
        --animation-duration: 0.3s;
        --success-color: #28a745;
        --info-color: deepskyblue;
        
        /* Updated Glow Effects */
        --accent-glow: rgba(56, 189, 248, 0.3);
        --highlight-glow: rgba(250, 204, 21, 0.3);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

    html, body {
        min-height: 100vh;
        background: linear-gradient(120deg, #061726, #0a1a44 40%, #061726);
        background-size: 200% 200%;
        animation: blueGradient 18s ease-in-out infinite;
        color: var(--text-color);
        overflow-x: hidden;
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    @keyframes blueGradient {
        0%   { background-position: 0% 50%; }
        50%  { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Header */
    .site-header {
        background-color: rgba(12, 25, 45, 0.85);
        padding: 12px 18px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        position: sticky;
        top: 0;
        z-index: 1000;
        backdrop-filter: blur(6px);
    }
    .logo { text-decoration: none; font-size: 1.25rem; font-weight: 700; color: var(--accent-color); display: flex; align-items: center; }
    .logo img { width: 34px; height: 34px; border-radius: 50%; margin-right: 10px; border: 2px solid var(--accent-color); }
    .logo span { color: #fff; }
    .header-nav { display: flex; gap: 10px; align-items: center; }
    .header-nav a { color: var(--text-color); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 6px; transition: background var(--animation-duration) ease; }
    .header-nav a:hover { background-color: rgba(56, 189, 248, 0.1); color: var(--accent-color); }

    /* ** UPDATED: Hero Banner ** */
    .hero {
        width: 100%;
        height: 340px; /* UPDATED: Taller for trust signals */
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 12px;
        overflow: hidden;
        /* UPDATED: Border moved to Tailwind class on element */
        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    }
    .hero-banner-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 30%; /* Slightly adjusted position */
        z-index: 1;
        filter: contrast(0.9) saturate(1.05);
    }
    .hero::after {
        content: '';
        position: absolute;
        inset: 0;
        /* UPDATED: Stronger gradient for text readability */
        background: linear-gradient(to top, rgba(1,10,36,1) 15%, rgba(1,10,36,0.5) 60%, rgba(1,10,36,0) 100%);
        z-index: 2;
    }

    /* Main Container */
    .main-container {
        display: flex;
        max-width: 1240px;
        margin: 28px auto;
        padding: 18px;
        gap: 32px;
        align-items: flex-start;
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.8s ease-out 0.35s forwards;
    }
    @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

    /* Product Column */
    .product-column {
        width: 65%;
        display: flex;
        flex-direction: column;
    }
    .product-column h2 {
        font-size: 2.5rem;
        font-weight: 700;
        color: #fff;
        margin-bottom: 24px; /* UPDATED: Space adjusted */
    }
    .product-column p {
        font-size: 1.1rem;
        color: var(--accent-color);
        margin-bottom: 24px;
        font-weight: 400;
    }

    /* ** REMOVED: .trust-signals and .signal-item CSS ** */
    /* (This is now handled by Tailwind classes in the HTML)    */

    /* Pack Selection Header */
    .pack-selection-header {
        font-size: 1.6rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 18px;
        padding-bottom: 10px;
        border-bottom: 1px solid var(--border-color);
    }

    /* Products grid */
    .products-grid {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 18px;
    }
    .product-card {
        background: rgba(12,20,35,0.75);
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        transition: all 0.25s ease;
        border: 1px solid var(--border-color);
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .product-card:hover:not(.out-of-stock-card) {
        transform: translateY(-6px);
        border-color: var(--accent-color);
        box-shadow: 0 10px 20px rgba(56, 189, 248, 0.15);
    }
    .product-card.selected {
        transform: translateY(-6px);
        border-color: var(--highlight-color); /* Uses new variable */
        background: rgba(25, 41, 63, 0.9);
        box-shadow: 0 0 25px var(--highlight-glow), 0 8px 15px rgba(0,0,0,0.2); /* Uses new variable */
    }
    .product-card.out-of-stock-card {
        opacity: 0.6;
        cursor: not-allowed;
        filter: grayscale(80%);
    }
    .product-card.out-of-stock-card:hover {
        transform: none;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        border-color: var(--border-color);
    }
    .product-image { width: 96px; height: 96px; object-fit: contain; margin-bottom: 12px; transition: transform 0.25s ease; }
    .product-card:hover .product-image { transform: scale(1.06); }
    .product-info { text-align: center; width: 100%; }
    .product-name { font-size: 1rem; margin-bottom: 6px; color: var(--text-color); font-weight: 600; }
    .product-price { font-weight: 800; color: var(--highlight-color); margin-bottom: 6px; } /* Uses new variable */
    .stock-status { font-size: 0.82rem; padding: 4px 8px; border-radius: 6px; display: inline-block; }
    .in-stock { background-color: var(--success-color); color: white; }
    .out-of-stock { background-color: #dc3545; color: white; }


    /* Order form (sidebar) */
    .order-form {
        width: 35%;
        padding: 30px;
        background: linear-gradient(180deg, rgba(6,20,46,0.92), rgba(8,30,66,0.85));
        border-radius: 20px;
        border: 1px solid rgba(56, 189, 248, 0.1);
        box-shadow: 0 12px 40px rgba(3,15,40,0.6);
        display: flex;
        flex-direction: column;
        align-items: center;
        position: sticky;
        top: 90px;
    }
    .order-form h2 {
        margin-bottom: 24px;
        color: var(--accent-color); /* Uses new variable */
        font-size: 1.9rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    .form-group { width: 100%; margin-bottom: 12px; }
    .form-group label {
        color: #acd9ff;
        font-weight: 600;
        font-size: 0.98rem;
        display: flex;
        margin-bottom: 8px;
        align-items: center;
        justify-content: space-between;
    }
    .info-icon {
        color: var(--accent-color);
        cursor: pointer;
        font-size: 0.9em;
        opacity: 0.7;
        transition: opacity 0.3s;
    }
    .info-icon:hover { opacity: 1; }
    
    .form-control {
        padding: 12px 14px; width: 100%; border: 1px solid var(--border-color); outline: none;
        background: rgba(255,255,255,0.03);
        color: #dbe9ff; border-radius: 12px; font-size: 1rem;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
        transition: all 0.3s ease;
    }
    .form-control::placeholder { color: #9fcfff99; font-style: italic; }
    /* ** UPDATED: Modernized Focus State ** */
    .form-control:focus {
        outline: none;
        border-color: var(--highlight-color); /* Brighter focus */
        background: rgba(255,255,255,0.05);
        box-shadow: 0 0 20px var(--highlight-glow); /* Brighter glow */
    }

    #buy-now-container { margin-top: 18px; padding: 16px; width: 100%; background: rgba(8,43,123,0.12); border-radius: 12px; border: 1px solid rgba(75,175,255,0.06); text-align: center; }
    #buy-now-container h3 { margin-bottom: 8px; color: #7fd7ff; font-size: 1.05rem; }
    .total-price { font-size: 1.14rem; margin-bottom: 10px; color: var(--text-color); }

    .btn-buy {
        margin-top: 10px; padding: 12px 0; width: 100%;
        /* UPDATED: Gradient using new colors */
        background: linear-gradient(90deg, var(--accent-color), #0177f8 95%);
        color: #07203a; font-weight: 800; font-size: 1rem; border: none; border-radius: 10px; cursor: pointer;
        box-shadow: 0 8px 28px rgba(56, 189, 248, 0.15);
        transition: all 0.3s ease;
    }
    .btn-buy:hover:not(:disabled) {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(56, 189, 248, 0.25);
        filter: brightness(1.1);
    }
    .btn-buy:disabled {
        background: #555;
        cursor: not-allowed;
        opacity: 0.6;
        transform: none;
        box-shadow: none;
    }

    /* Modal */
    .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); justify-content: center; align-items: center; z-index: 2000; padding: 20px; }
    .modal-content { background: var(--secondary-bg); padding: 12px; border-radius: 8px; max-width: 920px; width: 100%; position: relative; border: 1px solid var(--border-color); }
    .modal img { width: 100%; height: auto; border-radius: 6px; display: block; }
    .close-btn { position: absolute; top: 6px; right: 8px; background: none; border: none; color: white; font-size: 24px; cursor: pointer; }

    /* Mobile nav */
    .mobile-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(12,20,35,0.95); box-shadow: 0 -2px 8px rgba(0,0,0,0.4); z-index: 1001; border-top: 1px solid rgba(255,255,255,0.02); }
    .nav-inner { display: flex; justify-content: space-around; align-items: center; padding: 10px 6px; }
    .nav-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--text-color); font-size: 0.75rem; flex-grow: 1; }
    .nav-item i { font-size: 1.15rem; margin-bottom: 3px; }
    .nav-item.active, .nav-item:hover { color: var(--accent-color); }

    /* Footer with Home & Support (sticky) */
    .site-footer {
        display: none;
        position: fixed; right: 18px; bottom: 18px; z-index: 1200;
        gap: 8px; display: flex; flex-direction: column;
    }
    .footer-btn {
        background: linear-gradient(90deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.08));
        border: 1px solid rgba(56, 189, 248, 0.08);
        color: var(--text-color); padding: 10px 14px; border-radius: 12px; cursor: pointer; text-decoration: none; font-weight: 600;
        display: inline-flex; align-items: center; gap: 8px;
        box-shadow: 0 6px 18px rgba(8,30,60,0.35);
    }
    .footer-btn:hover { transform: translateY(-4px); }

    /* Responsive */
    @media (max-width: 992px) {
        .main-container { flex-direction: column; gap: 20px; padding: 18px; }
        .product-column, .order-form { width: 100%; }
        .order-form {
            padding: 22px;
            border-radius: 14px;
            position: static;
            top: 0;
        }
        .order-form h2 { font-size: 1.6rem; }
        .product-column h2 { font-size: 2.1rem; }
    }

    @media (max-width: 768px) {
        body { padding-bottom: 78px; } 
        
        .site-header { padding: 10px 14px; }
        .logo { font-size: 1.1rem; }
        .logo span { display: none; }
        .logo img { width: 30px; height: 30px; }
        .header-nav { display: none; }

        .hero { height: 280px; } /* Adjusted mobile hero height */
        
        /* ** REMOVED: Responsive trust signals ** */
        /* (Now handled by Tailwind's flex-wrap)    */
        
        /* Responsive pack header */
        .pack-selection-header {
            font-size: 1.3rem;
            margin-bottom: 12px;
            padding-bottom: 8px;
        }

        /* Mobile 3-column grid (compact cards) */
        .products-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .product-image { width: 56px; height: 56px; }
        
        .product-name { font-size: 0.82rem; }
        .product-price { font-size: 0.8rem; }
        .stock-status { font-size: 0.7rem; padding: 3px 6px; }

        .order-form h2 { font-size: 1.4rem; }

        .product-card {
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px;
            padding: 10px;
            background: linear-gradient(180deg, rgba(10,20,35,0.72), rgba(6,12,28,0.6));
        }
        .product-card.selected {
            border-color: var(--accent-color);
            box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);
        }

        .mobile-nav { display: block; }
        .site-footer { display: none; }
    }

    @media (max-width: 480px) {
        .hero { height: 240px; }
        .product-name { font-size: 0.78rem; }
        .order-form { padding: 18px; }
        .btn-buy { padding: 10px 0; font-size: 0.95rem; }
        .modal-content { max-height: 86vh; overflow: auto; }
    }