/* Moonlight Technology Website Styles */

:root {
    --primary-color: #1a365d;
    --secondary-color: #2c5282;
    --accent-color: #4299e1;
    --text-color: #2d3748;
    --light-text: #718096;
    --bg-color: #ffffff;
    --light-bg: #f7fafc;
    --border-color: #e2e8f0;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

* {
    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-color);
    background-color: var(--bg-color);
}

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

/* Header */
header {
    color: white;
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

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

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-icon {
    font-size: 2rem;
}

.logo-img {
    border-radius: 50%;
    object-fit: cover;
    width: 48px;
    height: 46px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
    transition: filter 0.3s ease, transform 0.3s ease;
}

.logo-img:hover {
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
    transform: scale(1.05);
}

.logo-text {
    font-size: 1.65rem;
    font-weight: 700;
}

nav {
    display: flex;
    gap: 2rem;
}

nav a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
    padding: 0.5rem 0;
}

nav a:hover,
nav a.active {
    color: white;
    border-bottom: 2px solid var(--accent-color);
}

/* Sticky header scrolled state */
header.scrolled {
    background: rgba(10, 10, 26, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Starfield Background */
.starfield {
    background: 
        radial-gradient(2px 2px at 20px 30px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 50px 90px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 80px 50px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 120px 20px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 150px 80px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 180px 40px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 200px 100px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 250px 60px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 300px 30px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 320px 90px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 350px 50px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 400px 70px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 450px 20px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 500px 85px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 550px 45px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 600px 95px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 650px 35px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 700px 75px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 750px 55px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 50px 150px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 150px 180px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 250px 140px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 350px 160px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 450px 130px, rgba(255,255,255,0.8), transparent),
        radial-gradient(2px 2px at 550px 170px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 650px 145px, rgba(255,255,255,0.9), transparent),
        radial-gradient(2px 2px at 750px 165px, rgba(255,255,255,0.7), transparent),
        linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d1b2a 100%);
    background-size: 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 800px 200px, 100% 100%;
}

/* Hero Wrapper - contains header + hero with single star background */
.hero-wrapper {
    background: url('stars.jpg') center/cover no-repeat,
                linear-gradient(135deg, #0a0a1a 0%, #1a1a3e 50%, #0d1b2a 100%);
    position: relative;
    box-shadow: var(--shadow);
}

.hero-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.hero-wrapper > * {
    position: relative;
    z-index: 2;
}

/* Hero Section */
.hero {
    color: white;
    padding: 5rem 0;
    text-align: center;
    background: transparent !important;
}

.hero .container {
    position: relative;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 40px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

.tagline {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: rgba(200, 225, 255, 0.9);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.6);
    letter-spacing: 0.3px;
}

.established {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(200, 225, 255, 0.9);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

/* Page Header Wrapper - for inner pages */
.page-header-wrapper {
    background: url('stars.jpg') center/cover no-repeat,
                linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    position: relative;
    box-shadow: var(--shadow);
}

.page-header-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.page-header-wrapper > * {
    position: relative;
    z-index: 2;
}

/* Page Header */
.page-header {
    color: white;
    padding: 3rem 0;
    text-align: center;
    background: transparent !important;
}

.page-header h1 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    color: white;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 0, 0, 0.5);
}

.last-updated {
    font-size: 1.1rem;
    font-weight: 500;
    color: rgba(200, 225, 255, 0.9);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 15px rgba(0, 0, 0, 0.5);
    letter-spacing: 0.5px;
}

/* Sections */
section {
    padding: 4rem 0;
}

section:nth-child(even) {
    background-color: var(--light-bg);
}

h2 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 700;
}

h3 {
    font-size: 1.25rem;
    color: #1a365d;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

p {
    margin-bottom: 1rem;
    color: var(--text-color);
}

/* About Section */
.about p {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.1rem;
}

/* Services Grid */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.service-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.service-card h3 {
    margin-bottom: 1rem;
    color: #1a365d;
    font-weight: 700;
}

/* Products Section */
.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 3rem;
    margin-top: 2rem;
}

.product {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
}

.product h3 {
    font-size: 1.5rem;
    color: #1a365d;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent-color);
    font-weight: 700;
}

.product ul {
    margin-left: 1.5rem;
    margin-top: 1rem;
}

.product li {
    margin-bottom: 0.5rem;
    color: var(--text-color);
}

/* Contact CTA */
.contact-cta {
    text-align: center;
}

.contact-cta p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.btn-primary {
    display: inline-block;
    background: var(--accent-color);
    color: white;
    padding: 1rem 2rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease, transform 0.2s ease;
}

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

/* Contact Page */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
}

.contact-details h2,
.contact-form-section h2 {
    text-align: left;
    margin-bottom: 2rem;
    color: var(--primary-color);
    font-weight: 700;
}

.info-item {
    margin-bottom: 1.5rem;
}

.info-item h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #4a5568;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.info-item p {
    font-size: 1.1rem;
    margin-bottom: 0;
}

.info-item a {
    color: var(--accent-color);
    text-decoration: none;
}

.info-item a:hover {
    text-decoration: underline;
}

.services-list {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--light-bg);
    border-radius: 8px;
}

.services-list h3 {
    margin-bottom: 1rem;
    color: #1a365d;
    font-weight: 700;
}

.services-list ul {
    margin-left: 1.5rem;
}

.services-list li {
    margin-bottom: 0.5rem;
}

/* Legal Content */
.legal-content {
    max-width: 900px;
    margin: 0 auto;
}

.legal-content h2 {
    text-align: left;
    margin-top: 2rem;
    font-size: 1.5rem;
    color: var(--primary-color);
    font-weight: 700;
}

.legal-content h3 {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    color: #1a365d;
    font-weight: 600;
}

.legal-content p,
.legal-content ul {
    margin-bottom: 1rem;
}

.legal-content ul {
    margin-left: 2rem;
}

.legal-content li {
    margin-bottom: 0.5rem;
}

.legal-content a {
    color: var(--accent-color);
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

/* Footer */
footer {
    background: var(--primary-color);
    color: white;
    padding: 2rem 0;
    text-align: center;
}

footer p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 2rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        gap: 1rem;
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .tagline {
        font-size: 1.1rem;
    }

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

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

    section {
        padding: 3rem 0;
    }
}

@media (max-width: 480px) {
    .logo-text {
        font-size: 1.2rem;
    }

    .hero h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    .footer-links {
        flex-direction: column;
        gap: 1rem;
    }
}