/* =========================
   GLOBAL
========================= */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        "Inter",
        "Helvetica Neue",
        Arial,
        sans-serif;

    background: #071B34;
    color: white;

    line-height: 1.6;

}


a {

    color: inherit;
    text-decoration: none;

}


.container {

    width: min(1200px, 90%);
    margin: auto;

}



/* =========================
   HEADER
========================= */


#header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    padding: 14px 0;

    background: #050F20;

    border-bottom: 1px solid rgba(255,255,255,0.08);

    transition: 0.2s ease;

}


#header.scrolled {

    background: rgba(5,15,32,0.85);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    padding: 12px 0;

}



.nav-container {

    display:flex;

    align-items:center;

    justify-content:space-between;

}




.logo {

    font-size: 32px;

    font-weight:700;

    letter-spacing:-1px;

}



.logo span {

    color:#4D9AFF;

}




nav {

    display:flex;

    gap:35px;

}


nav a {

    font-size:15px;

    color:#d9e2ef;

    transition:0.3s;

}



nav a:hover {

    color:white;

}



.language {

    display:flex;

    gap:10px;

    font-size:14px;

}


.language .active {

    color:#4D9AFF;

}



/* =========================
   HERO
========================= */


.hero {

    height:100vh;

    min-height:750px;

    position:relative;

    display:flex;

    align-items:center;


    background-image:

    url("../images/hero.jpg");


    background-size:cover;

    background-position:center;

}



.hero-overlay {

    position:absolute;

    inset:0;


    background:

    linear-gradient(
        90deg,
        rgba(7,27,52,0.95),
        rgba(7,27,52,0.55),
        rgba(7,27,52,0.2)
    );

}




.hero-content {

    position:relative;

    max-width:900px;

    padding-top:160px;

}



.eyebrow {

    text-transform:uppercase;

    letter-spacing:4px;

    font-size:14px;

    color:#7fb7ff;

    margin-bottom:30px;

}



.hero h1 {

    font-size:

    clamp(48px,6vw,85px);

    line-height:1.05;

    letter-spacing:-3px;

    font-weight:700;

}



.hero-text {

    margin-top:35px;

    max-width:650px;

    font-size:20px;

    color:#d2d9e3;

}



.button {

    display:inline-block;

    margin-top:45px;

    padding:

    16px 38px;


    background:white;

    color:#071B34;

    font-weight:600;

    transition:0.3s;

}



.button:hover {

    transform:translateY(-3px);

    background:#dceaff;

}





/* =========================
   SECTIONS
========================= */


.section {

    padding:

    140px 0;

}



.section h2 {

    font-size:

    clamp(38px,5vw,60px);

    letter-spacing:-2px;

    margin-bottom:40px;

}



.two-columns {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

}



.two-columns p {

    font-size:22px;

    color:#cbd5e1;

}





/* =========================
   PILLARS
========================= */


.dark {

    background:#0B2548;

}



.cards {

    display:grid;

    grid-template-columns:

    repeat(3,1fr);

    gap:30px;

}



.card {

    padding:45px;

    border:

    1px solid rgba(255,255,255,0.12);

    transition:0.4s;

}



.card:hover {

    transform:translateY(-8px);

    border-color:#4D9AFF;

}



.card h3 {

    font-size:25px;

    margin-bottom:20px;

}



.card p {

    color:#cbd5e1;

}





/* =========================
   VISION
========================= */


.vision {

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}



.vision p {

    color:#cbd5e1;

    font-size:20px;

}



.image-placeholder {

    height:500px;

    background:

    url("../images/cleanroom.jpg");

    background-size:cover;

    background-position:center;

}





/* =========================
   DEVELOPMENT
========================= */


.development {

    padding:120px 0;

    text-align:center;

    background:#0B2548;

}



.development h2 {

    font-size:45px;

}



.development p {

    margin-top:20px;

    color:#cbd5e1;

}





/* =========================
   FOOTER
========================= */


footer {

    background:#050F20;

    padding:80px 0 30px;

}



.footer-grid {

    display:grid;

    grid-template-columns:repeat(4, auto);

    justify-content:center;

    gap:120px;

    text-align:center;

}



footer h4 {

    margin-bottom:25px;

}



footer a {

    display:block;

    color:#94a3b8;

    margin-bottom:12px;

    transition:0.3s;

}



footer a:hover {

    color:white;

}




.footer-bottom {

    margin-top:70px;

    padding-top:25px;

    border-top:
    1px solid rgba(255,255,255,0.1);

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:20px;

}




/* =========================
   RESPONSIVE
========================= */


@media(max-width:900px){


nav {

    display:none;

}


.two-columns,
.vision,
.cards,
.footer-grid {

    grid-template-columns:1fr;

}



.hero h1 {

    letter-spacing:-1px;

}



.footer-bottom {

    flex-direction:column;

}


}

/* =========================
   ANIMATIONS
========================= */


.reveal {

    opacity:0;

    transform:
    translateY(40px);

    transition:
    opacity 0.8s ease,
    transform 0.8s ease;

}



.reveal.visible {

    opacity:1;

    transform:
    translateY(0);

}

.logo-image {
    height: 100px;
    width: auto;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 120px;
}

/* =========================
   UNDER CONSTRUCTION PAGE
========================= */


.development-page {

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    background:#071B34;

    padding:40px;

}



.development-container {

    max-width:750px;

    display:flex;

    flex-direction:column;

    align-items:center;

}



.development-container .logo-image {

    height:200px;

    width:auto;

    margin-bottom:20px;

}



.development-page .eyebrow {

    margin:0 0 20px;

    color:#4D9AFF;

    font-size:14px;

    letter-spacing:4px;

    text-transform:uppercase;

}



.development-page h1 {

    font-size:clamp(40px,5vw,65px);

    line-height:1.1;

    letter-spacing:-2px;

    margin-bottom:20px;

}



.development-text {

    max-width:650px;

    color:#cbd5e1;

    font-size:20px;

    line-height:1.7;

    margin-bottom:20px;

}