/* Modern Reset & Base - v2 (Normalized Sizing) */
:root {
    --primary-blue: #002D72; /* Deep Navy */
    --light-blue: #e3f2fd;
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.3);
    /* Fonts */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Colors */
    --accent-blue: #007BFF;
    --text-primary: #1A1A1A;
    --text-secondary: #4A4A4A;
}

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

body {
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-y: hidden; /* Force Single Page */
    position: relative;
    background: linear-gradient(135deg, #000428 0%, #004e92 100%);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    margin: 0;
    font-weight: 700;
}

/* Hero Section */
.hero {
    height: 100vh; /* Forced Single Page */
    max-height: 100vh; /* Prevent growth */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Distribute vertical space */
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 2vh 2vw; /* Use VH/VW for padding */
    overflow: hidden; /* CUT OFF overflow */
    background: #000428; 
}

/* ... existing background code ... */

.logo-container {
    background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 70%);
    padding: 1rem; /* Compact */
    border-radius: 50%;
    margin-top: 5vh; /* Push down slightly */
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    flex-shrink: 1; /* Allow shrinking */
}

/* ... existing h1/tagline code ... */

/* Trust & Certifications */
.trust-container {
    margin-top: auto; /* Push to bottom */
    padding-top: 1vh;
    padding-bottom: 1vh;
    width: 100%;
    max-width: 95vw;
    animation: fadeUp 1s ease-out 1.2s backwards;
    text-align: center;
    /* Ensure it doesn't take easier shrinking priority than nav */
    flex-shrink: 0; 
}

.trust-label {
    font-size: 1rem; /* Slightly smaller to save vertical space */
    letter-spacing: 3px;
    color: var(--light-blue);
    margin-bottom: 0.5rem;
    opacity: 0.9;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Trust Grid Layout */
.trust-logos-grid {
    display: flex;
    flex-wrap: nowrap; /* Force single line if possible, or wrap gracefully */
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    max-width: 100%;
    margin-top: 1rem;
    padding: 0 1rem;
    overflow-x: auto; /* Allow scroll on tiny screens if needed */
}

.trust-logo-item {
    height: 80px; /* Standardize height */
    width: auto;
    max-width: 150px;
    object-fit: contain;
    transition: transform 0.3s;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
    background: rgba(255, 255, 255, 0.9); /* Add white backing for transparency consistency */
    padding: 10px;
    border-radius: 8px; /* Soft edges */
}

.trust-logo-item:hover {
    transform: scale(1.1);
    background: #fff;
    z-index: 10;
}

.trust-text-item {
    font-family: var(--font-heading);
    color: #fff;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: 2px;
    border: 2px solid rgba(255,255,255,0.3);
    padding: 0.5rem 1rem;
    border-radius: 8px;
}

/* Cinematic Background */
.cinema-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: cinemaFade 16s infinite;
}

/* Specific Slide Images (We will assume they are in images/ folder) */
.slide-1 {
    background-image: url('hero_scene_1.png');
    animation-delay: 0s;
}

.slide-2 {
    background-image: url('hero_scene_2.png');
    animation-delay: 8s; /* Start halfway through */
}

/* Dark Overlay to ensure text readability */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 4, 40, 0.85) 0%, rgba(0, 78, 146, 0.75) 100%);
    z-index: 0;
}

/* Keyframes for Cross-Fade & Ken Burns Effect */
@keyframes cinemaFade {
    0% {
        opacity: 0;
        transform: scale(1);
    }
    10% {
        opacity: 1;
    }
    40% {
        opacity: 1;
    }
    50% {
        opacity: 0;
        transform: scale(1.05); /* Subtle Zoom */
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

.logo-container {
    position: absolute;
    top: 3vh;
    right: 3vw;
    padding: 20px; /* Give space for glow */
    margin: 0;
    z-index: 100;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 80%); /* Brighter Glow */
    border-radius: 50%;
}

.logo-container img {
    max-width: 140px; 
    width: 12vw;
    height: auto;
    filter: drop-shadow(0 0 20px rgba(255,255,255,0.6)); /* Stronger Drop Shadow */
}


h1 {
    font-family: 'Khula', sans-serif;
    font-size: clamp(3rem, 6vw, 5rem);
    font-weight: 800;
    color: #fff;
    text-shadow: 0 5px 20px rgba(0,0,0,0.3);
    margin: 0; 
    letter-spacing: -2px;
    line-height: 1.1;
    animation: fadeUp 1s ease-out 0.3s backwards;
}

.main-content-block {
    margin-top: 25vh; /* Pushed significantly lower */
    margin-bottom: 2rem;
    animation: fadeUp 1s ease-out 0.6s backwards;
    width: 100%;
}

@media (max-width: 768px) {
    h1 { font-size: 3.2rem; }
    .logo-container { top: 1rem; right: 1rem; }
    .logo-container img { max-width: 100px; }
}

.ai-use-cases {
    font-size: 1.2rem;
    color: #e3f2fd;
    font-weight: 500;
    text-shadow: 0 3px 8px rgba(0,0,0,0.25);
    line-height: 1.6;
    margin-top: 1rem;
}

/* Navigation Buttons */
.nav-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    animation: fadeUp 1s ease-out 0.9s backwards;
    padding-bottom: 2vh;
    margin-bottom: 8vh; /* Adjusted to sit exactly ~1 inch above certs */
}

.nav-btn {
    padding: 0.6rem 1.8rem; /* Reduced by ~50% in area impact */
    font-size: 0.9rem; /* Smaller font */
    font-weight: 800;
    color: var(--primary-blue);
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #fff;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(15px);
    text-transform: uppercase;
    letter-spacing: 1px;
    min-width: 130px; /* Reduced */
}

/* Trust & Certifications */
/* Trust & Certifications */
.trust-container {
    /* Flex space-between handles positioning */
    padding-top: 0;
    padding-bottom: 3vh;
    width: 100%;
    max-width: 95vw;
    animation: fadeUp 1s ease-out 1.2s backwards;
    text-align: center;
    flex-shrink: 0;
}

.trust-label {
    font-size: 1.4rem; /* Increased from 0.9rem */
    letter-spacing: 4px;
    color: var(--light-blue);
    margin-bottom: 2rem;
    opacity: 0.9;
    text-transform: uppercase;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Improve contrast */
}

.trust-logos {
    width: auto; /* Allow natural width */
    max-width: 100%;
    height: auto;
    max-height: 180px; /* Increased from 80px - MUCH LARGER */
    object-fit: contain;
    filter: drop-shadow(0 0 15px rgba(255,255,255,0.3));
    opacity: 1; /* Full opacity */
}

/* Modals / Popups */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: rgba(255, 255, 255, 0.98);
    width: 80%;
    max-width: 1200px; /* Allow wide capabilities */
    /* Dynamic height handling */
    max-height: 90vh;
    overflow-y: auto;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s;
    color: var(--text-primary);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.close-btn {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    background: none;
    border: none;
    font-size: 3rem; /* FIXED: Normal close button (not 6rem) */
    font-weight: 100;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 0.8;
    z-index: 10;
    transition: transform 0.2s;
}

.close-btn:hover {
    transform: rotate(90deg);
    color: var(--primary-blue);
}

/* Content Styling */
.modal-body h2 {
    font-family: var(--font-heading);
    color: var(--primary-blue);
    margin-bottom: 1rem;
    font-size: 2.5rem; /* FIXED: Standard Heading 2 */
    font-weight: 800;
    line-height: 1.2;
}

.modal-body h3 {
    font-size: 1.8rem; /* FIXED: Standard Heading 3 */
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-weight: 700;
}

.modal-body p {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 1.1rem; /* FIXED: Standard Body Text */
    color: var(--text-secondary);
}

.contact-info p {
    font-size: 1.2rem;
    margin: 0.8rem 0;
    display: flex;
    align-items: center;
}

.contact-info i {
    margin-right: 15px;
    color: var(--primary-blue);
    font-size: 1.4rem;
    width: 30px;
    text-align: center;
}

/* Capability Columns */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive Grid */
    gap: 2rem;
    margin-top: 2rem;
}

/* Force 3 columns on larger screens if possible, or 6 if extremely wide */
@media (min-width: 1600px) {
    .capabilities-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.cap-column {
    background: #f8f9fa;
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cap-column:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    background: #fff;
    border-color: var(--primary-blue);
}

.cap-column img {
    width: 100%;
    height: 180px; /* Reduced height */
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1.5rem;
}

.cap-column h3 {
    font-size: 1.3rem; /* FIXED */
    color: var(--primary-blue);
    margin-bottom: 1rem;
    min-height: 2.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.cap-column ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1.5rem;
    text-align: left;
    width: 100%;
}

.cap-column li {
    font-size: 0.95rem; /* FIXED: Readable list size */
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
    color: var(--text-secondary);
    font-weight: 500;
}

.cap-column li::before {
    content: '•';
    color: var(--primary-blue);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2rem;
}

.learn-more-btn {
    margin-top: auto;
    padding: 0.8rem 1.5rem;
    border: 2px solid var(--primary-blue);
    background: none;
    color: var(--primary-blue);
    font-weight: 700;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.cap-column:hover .learn-more-btn {
    background: var(--primary-blue);
    color: #fff;
}

/* Request Form Styling */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    transition: border-color 0.3s;
    background: #fafafa;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--primary-blue);
    outline: none;
    background: #fff;
}

.submit-btn {
    padding: 1rem 3rem;
    font-size: 1.2rem;
    background: var(--primary-blue);
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 700;
    transition: background 0.3s;
    box-shadow: 0 5px 15px rgba(0,123,255,0.3);
}

.submit-btn:hover {
    background: #0056b3;
    transform: translateY(-2px);
}