/*--------------------------------------------------------------
# Variables and Base Styles
--------------------------------------------------------------*/
:root {
    /* Color Palette */
    --primary-100: #FFFFFF;
    --primary-200: #e0e0e0;
    --primary-300: #9b9b9b;
    --accent-100: #FFD700; /* Yellow Accent */
    --accent-200: #d4b500; /* Darker Yellow */
    --text-100: #FFFFFF;
    --text-200: #e0e0e0;
    --bg-100: #0F1626;      /* Dark Blue/Black - Main Background (60%) */
    --bg-200: #1e2436;      /* Mid Blue/Black - Footer/Secondary BG (Part of 30%) */
    --bg-300: #363c4f;      /* Lighter Grey/Blue - Borders/Hover (Part of 30%) */

    /* Font */
    --font-family-base: 'Roboto', sans-serif;
}

body {
    background-color: var(--bg-100); /* 60% Background */
    color: var(--text-200);          /* Default text (part of 30%) */
    font-family: var(--font-family-base);
    line-height: 1.6;
    display: flex; /* Added for footer sticking */
    flex-direction: column; /* Added for footer sticking */
    min-height: 100vh; /* Added for footer sticking */
    overflow-x: hidden; /* Prevent horizontal scroll */
}

main {
    flex-grow: 1; /* Allows main content to expand, pushing footer down */
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-100); /* Same as body background */
    z-index: 9999;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#preloader p {
    margin-top: 15px;
    color: var(--primary-200);
}

/* Simple Spinner */
.spinner {
    border: 4px solid var(--bg-300);
    border-top: 4px solid var(--accent-100); /* 10% Accent color */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Class added by JS to hide preloader */
#preloader.loaded {
    opacity: 0;
    visibility: hidden;
}

/*--------------------------------------------------------------
# Content Styling & HCI/UX Elements
--------------------------------------------------------------*/

/* Logo Styling */
.logo-container {
    max-width: 180px; /* Adjust GCUC logo size as needed */
    margin-left: auto;
    margin-right: auto;
}

#gcuc-logo { /* Specific ID for GCUC logo if needed */
    display: block;
}

/* Headings & Text */
h1, h2, h3 {
    color: var(--text-100); /* Main white text */
}

h1 {
    font-weight: 700; /* Bolder main title */
}

h2 {
    font-weight: 400;
}

.text-primary-200 { color: var(--primary-200) !important; } /* Lighter text */
.text-primary-300 { color: var(--primary-300) !important; } /* Greyer text */

.lead {
    font-size: 1.15rem;
    font-weight: 300;
}

strong {
    color: var(--primary-100); /* Make strong text slightly brighter */
    font-weight: 500;
}

/* Accent Color Usage (10%) */
.accent-text {
    color: var(--accent-100);
    font-weight: bold;
}

.accent-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), var(--accent-100), rgba(0, 0, 0, 0));
    opacity: 0.75;
    max-width: 250px;
    margin-left: auto;
    margin-right: auto;
}

/* Button Styling */
.btn-accent {
    background-color: var(--accent-100);
    color: var(--bg-100); /* High contrast text */
    border: none;
    padding: 12px 30px; /* Slightly larger padding */
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.2s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px; /* Subtle rounding */
}

.btn-accent:hover {
    background-color: var(--accent-200);
    color: var(--bg-100);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* List styling */
ul {
    padding-left: 0; /* Remove default padding */
}
ul li {
    padding-left: 0.5em;
    position: relative; /* For potential future icon positioning */
}
ul li .accent-text {
    /* Style for checkmark or icon */
    display: inline-block; /* Ensure proper spacing */
}


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
    background-color: var(--bg-200); /* 30% Secondary Background */
    border-top: 1px solid var(--bg-300); /* Subtle separator */
    /* mt-auto in HTML pushes it down */
}

/*--------------------------------------------------------------
# Responsive Adjustments
--------------------------------------------------------------*/
@media (max-width: 768px) {
    .display-5 {
        font-size: 2.2rem; /* Adjust heading size */
    }
    h2 {
       font-size: 1.4rem;
    }
    .lead {
        font-size: 1rem;
    }
     .logo-container {
        max-width: 140px; /* Smaller logo on mobile */
    }
    .btn-accent {
        padding: 10px 25px; /* Smaller button padding */
    }
    /* Adjust grid columns if needed, though Bootstrap handles stacking */
    .row.text-start {
        text-align: center !important; /* Center list text on small screens */
    }
     ul li {
        text-align: left; /* Keep list items left-aligned within the centered column */
         margin-left: auto;
         margin-right: auto;
         max-width: 90%; /* Prevent list items from stretching full width */
    }
}

@media (max-width: 576px) {
    h1.display-5 {
        font-size: 1.8rem;
    }
     h2 {
       font-size: 1.2rem;
    }
}