:root {
    --primary-color: #2B5876;
    --secondary-color: #4E95C7;
    --accent-color: #E8C4A0;
    --shtf-primary: #5e7886;
    --shtf-accent: #f04c3c;
    --dark-bg: #0A1628;
    --text-light: #FFFFFF;
    --text-dark: #1A1A1A;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    padding-top: 70px;
}

/* Navigation */
.navbar {
    background: var(--dark-bg);
    padding: 1rem 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

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

.logo-container {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.nav-links a {
    color: var(--text-light);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--secondary-color);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-light);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(to bottom, #0A1628 0%, #1A3A5A 50%, #0A1628 100%);
    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxyYWRpYWxHcmFkaWVudCBpZD0iYSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzBBMTYyOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzFBM0E1QSIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjYSkiLz48L3N2Zz4=');
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
    overflow: hidden;
}

.hero-section::before,
.hero-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(3px 3px at 15% 25%, rgba(255, 255, 255, 1), transparent),
        radial-gradient(1px 1px at 78% 42%, white, transparent),
        radial-gradient(2px 2px at 34% 67%, white, transparent),
        radial-gradient(1px 1px at 91% 15%, white, transparent),
        radial-gradient(2px 2px at 52% 88%, white, transparent),
        radial-gradient(1px 1px at 8% 53%, white, transparent),
        radial-gradient(2px 2px at 67% 31%, white, transparent),
        radial-gradient(1px 1px at 23% 72%, white, transparent),
        radial-gradient(1px 1px at 88% 61%, white, transparent),
        radial-gradient(3px 3px at 45% 9%, rgba(255, 255, 255, 1), transparent),
        radial-gradient(1px 1px at 12% 81%, white, transparent),
        radial-gradient(2px 2px at 73% 54%, white, transparent),
        radial-gradient(1px 1px at 39% 23%, white, transparent),
        radial-gradient(2px 2px at 85% 78%, white, transparent),
        radial-gradient(1px 1px at 61% 46%, white, transparent),
        radial-gradient(1px 1px at 27% 34%, white, transparent),
        radial-gradient(2px 2px at 94% 89%, white, transparent),
        radial-gradient(1px 1px at 56% 12%, white, transparent),
        radial-gradient(2px 2px at 19% 58%, white, transparent),
        radial-gradient(1px 1px at 82% 27%, white, transparent);
    background-size: 400px 400px, 350px 350px, 450px 420px, 380px 390px, 420px 410px,
                     390px 380px, 410px 450px, 360px 370px, 440px 400px, 370px 430px,
                     430px 360px, 400px 440px, 460px 380px, 385px 415px, 425px 395px,
                     395px 425px, 415px 385px, 405px 405px, 435px 375px, 375px 435px;
    background-position: 0 0, 50px 70px, 130px 20px, 210px 90px, 80px 140px,
                        160px 60px, 240px 110px, 20px 180px, 190px 30px, 100px 200px,
                        280px 150px, 40px 250px, 220px 180px, 140px 80px, 300px 220px,
                        60px 120px, 180px 280px, 260px 40px, 120px 160px, 200px 240px;
    animation: stars 20s linear infinite;
    opacity: 0.6;
}

.hero-section::after {
    transform: translate(-120px, -800px);
}

@keyframes stars {
    0% { transform: translate(0, 0); }
    100% { transform: translate(120px, 400px); }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero-section h1 {
    font-size: 4.5rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 2rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.hero-tagline {
    font-size: 1.5rem;
    color: var(--secondary-color);
    font-weight: 400;
    max-width: 600px;
    margin: 0 auto;
}

/* Product Section */
.product-section {
    background: linear-gradient(180deg, #3d5a6b 0%, #2c4450 50%, #3d5a6b 100%);
    padding: 4rem 2rem;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 3rem;
    font-weight: 600;
}

/* SHTF Product section uses SHTF brand colors */
.product-section .section-title {
    color: var(--text-light);
}

.product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

.product-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 2rem;
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.product-logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
}

.product-logo img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.product-logo h3 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-light);
}

.product-description {
    color: #e0e0e0;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.product-link {
    color: var(--shtf-accent);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 2rem;
    transition: color 0.3s;
}

.product-link:hover {
    color: #d63e2f;
    text-decoration: underline;
}

.coming-soon-text {
    color: #e0e0e0;
    font-size: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.product-site {
    color: #e0e0e0;
    display: flex;
    flex-direction: row;
    font-size: 1rem;
    margin-inline: auto;
    gap: .4rem;
}

.download-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}

.store-badge {
    display: block;
    height: 60px;
    transition: transform 0.2s, opacity 0.2s;
}

.store-badge:nth-child(2) {
    height: 80px;
}

.store-badge:not(.disabled):hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.store-badge.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.store-badge img {
    height: 100%;
    width: auto;
    display: block;
}

.product-image-card {
    background: rgba(78, 149, 199, 0.3);
    border-radius: 2rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Leadership Section */
.leadership-section {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
    padding: 4rem 2rem;
    color: var(--text-dark);
}

.leadership-section .section-title {
    color: var(--primary-color);
    text-align: center;
    font-size: 2rem;
    margin-bottom: 3rem;
}

.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 3rem;
    max-width: 900px;
    margin: 0 auto;
}

.leader-card {
    text-align: center;
}

.leader-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    overflow: hidden;
    border: 4px solid var(--secondary-color);
}

.leader-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.leader-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
}

.leader-title {
    font-size: 1.1rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.leader-bio {
    font-size: 1rem;
    line-height: 1.6;
    color: #495057;
}

/* Contact Section */
.contact-section {
    background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 50%, #f8f9fa 100%);
    padding: 4rem 2rem;
    color: var(--text-dark);
}

.contact-section .section-title {
    color: var(--primary-color);
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.contact-intro {
    text-align: center;
    color: #495057;
    font-size: 1.1rem;
    margin-bottom: 3rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    color: var(--text-dark);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--secondary-color);
    border-radius: 0.5rem;
    background: #ffffff;
    color: var(--text-dark);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s, background 0.3s;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(43, 88, 118, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

.submit-btn {
    background: var(--secondary-color);
    color: var(--text-light);
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: background 0.3s, transform 0.2s;
    margin: 0 auto;
}

.submit-btn:hover:not(:disabled) {
    background: var(--primary-color);
    transform: translateY(-2px);
}

.submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.submit-btn i {
    font-size: 1.2rem;
}

.form-status {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 0.5rem;
    text-align: center;
    font-weight: 500;
    display: none;
}

.form-status.success {
    display: block;
    background: rgba(40, 167, 69, 0.2);
    color: #5cd785;
    border: 2px solid #5cd785;
}

.form-status.error {
    display: block;
    background: rgba(220, 53, 69, 0.2);
    color: #ff6b7a;
    border: 2px solid #ff6b7a;
}

/* Responsive Design */
@media (max-width: 768px) {
    body {
        padding-top: 60px;
    }

    .mobile-menu-btn {
        display: block;
    }

    .nav-links {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--dark-bg);
        flex-direction: column;
        padding: 1rem;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-links.active {
        max-height: 300px;
    }

    .nav-links li {
        width: 100%;
    }

    .nav-links a {
        display: block;
        padding: 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .hero-section {
        min-height: 50vh;
        padding: 3rem 1rem;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-tagline {
        font-size: 1.1rem;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .leadership-grid {
        grid-template-columns: 1fr;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .contact-section .section-title {
        font-size: 2rem;
    }

    .logo-text {
        font-size: 1.2rem;
    }
}