* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: #fff; background: #0a0a0a; line-height: 1.6; overflow-x: hidden; }

/* Page Transition 
.page { opacity: 0; transform: translateX(100%); transition: opacity 0.6s ease, transform 0.6s ease; }
.page.loaded { opacity: 1; transform: translateX(0); }
*/
/* Navigation */
header { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    background: rgba(10, 10, 10, 0.7); /* Slightly more transparent for background image */
    background-image: url('/images/background3.jpg'); /* Background image */
    background-size: cover; 
    background-position: left; 
    padding: 1rem 2rem; 
    z-index: 10; 
    transition: background 0.3s; 
}
nav { 
    max-width: 1200px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
}
.logo-img { 
    width: 100%; 
    max-width: 700px; /* Native logo width */
    height: auto; 
    max-height: 40px; /* Native logo height */
    display: block; 
    margin: 0 auto 0.75rem auto; /* Consistent spacing */
    object-fit: contain; /* Preserves aspect ratio */
}
.menu-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
}
.nav-menu { 
    list-style: none; 
    display: flex; 
    gap: 2rem; 
}
.nav-menu a { 
    color: #fff; 
    text-decoration: none; 
    font-weight: 400; 
    transition: color 0.3s; 
}
.nav-menu a:hover, .nav-menu a.active { 
    color: #4e54c8; 
}

/* Hamburger Menu */
.hamburger { 
    display: none; 
    background: none; 
    border: none; 
    cursor: pointer; 
    padding: 0.5rem; 
}
.hamburger span { 
    display: block; 
    width: 25px; 
    height: 3px; 
    background: #fff; 
    margin: 5px 0; 
    transition: all 0.3s ease; 
}
.hamburger.active span:nth-child(1) { 
    transform: rotate(45deg) translate(5px, 5px); 
}
.hamburger.active span:nth-child(2) { 
    opacity: 0; 
}
.hamburger.active span:nth-child(3) { 
    transform: rotate(-45deg) translate(7px, -7px); 
}

/* Hero and Content Sections */
.hero, section { 
    padding: 6rem 2rem; 
    max-width: 1200px; 
    margin: 80px auto 0 auto; /* Consistent margin-top */
}
.hero { 
    height: 100vh; 
    background: url('https://source.unsplash.com/random/1920x1080/?technology,dark') no-repeat center/cover; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
}
.hero h2 { 
    font-size: 3rem; 
    font-weight: 700; 
    margin-bottom: 1rem; 
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); 
}
.hero p { 
    font-size: 1.5rem; 
    max-width: 800px; 
    margin-bottom: 2rem; 
}
.hero .cta { 
    background: #4e54c8; 
    color: #fff; 
    padding: 1rem 2rem; 
    text-decoration: none; 
    border-radius: 5px; 
    font-weight: 700; 
    transition: background 0.3s; 
}
.hero .cta:hover { 
    background: #8f94fb; 
}

/* Content Sections */
.services, .data-protection, .contact { 
    background: #1a1a1a; 
}
.services h3, .data-protection h3, .contact h3 { 
    font-size: 2.5rem; 
    text-align: center; 
    margin-bottom: 3rem; 
}
.grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 2rem; 
}
.card { 
    background: #2a2a2a; 
    padding: 2rem; 
    border-radius: 10px; 
    text-align: center; 
    transition: transform 0.3s; 
}
.card:hover { 
    transform: translateY(-10px); 
}
.card h4 { 
    font-size: 1.8rem; 
    margin-bottom: 1rem; 
}
.card p { 
    font-size: 1.2rem; 
}
.intro, .intro-text {
    text-align: center;
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
    font-size: 1.1rem;
}
.features-list {
    max-width: 600px;
    margin: 2rem auto;
    list-style: none;
    padding: 0;
}
.features-list li {
    background: #2a2a2a;
    margin: 1rem 0;
    padding: 1rem;
    border-radius: 5px;
    text-align: left;
    position: relative;
    padding-left: 2rem;
}
.features-list li::before {
    content: "▶";
    position: absolute;
    left: 1rem;
    color: #4e54c8;
    font-size: 1.2rem;
}
.card img, .data-protection img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1rem;
}

/* Contact Form */
.contact form { 
    max-width: 600px; 
    margin: 0 auto; 
    display: flex; 
    flex-direction: column; 
    gap: 1rem; 
}
.contact label { 
    font-size: 1.2rem; 
}
.contact input, .contact textarea { 
    padding: 0.8rem; 
    background: #2a2a2a; 
    border: 1px solid #4e54c8; 
    color: #fff; 
    border-radius: 5px; 
}
.contact textarea { 
    resize: vertical; 
    min-height: 100px; 
}
.contact button { 
    background: #4e54c8; 
    color: #fff; 
    padding: 1rem; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    transition: background 0.3s; 
}
.contact button:hover { 
    background: #8f94fb; 
}

/* Footer */
footer { 
    background: #0a0a0a; 
    padding: 2rem; 
    text-align: center; 
    border-top: 1px solid #333; 
}
footer p { 
    font-size: 0.9rem; 
}

/* Responsive */
@media (max-width: 768px) {
    .hamburger { 
        display: block; 
        margin-right: 1rem; 
    }
    .menu-container { 
        justify-content: space-between; 
    }
    .nav-menu { 
        display: none; 
        position: absolute; 
        top: 100%; 
        left: 0; 
        width: 100%; 
        background: #1a1a1a; 
        padding: 1rem; 
        flex-direction: column; 
        text-align: center; 
    }
    .nav-menu.active { 
        display: flex; 
    }
    .hero, section { 
        margin-top: 70px; /* Consistent for mobile */
    }
    .logo-img { 
        max-width: 100%; 
        max-height: 32px; /* Smaller for mobile */
        margin-bottom: 0.5rem; 
    }
}