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

html{
    overflow-y:scroll;
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    line-height:1.6;
    overflow-x:hidden;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background:#f8fbfd;

    padding-top:120px;
}

/* =========================
   Navbar
========================= */

.navbar{
    padding:10px 40px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;

    position:fixed;
    top:0;
    left:0;
    width:100%;

    z-index:1000;

    background:rgba(10,77,104,0.95);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    box-shadow:0 2px 15px rgba(0,0,0,0.12);
}

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

.logo-img{
    width:50px;
    height:50px;
    object-fit:contain;

    background:white;
    border-radius:10px;
    padding:4px;

    box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.logo-text{
    color:white;
    font-size:18px;
    font-weight:700;
    line-height:1.3;
}

/* =========================
   Navigation
========================= */

.menu{
    display:flex;
    gap:28px;
}

.menu a{
    color:white;
    text-decoration:none;
    font-weight:500;
    transition:.3s;
    position:relative;
}

.menu a:hover{
    color:#ffd6a5;
}

/* Active Menu */

body.home .menu a[href="index.html"],
body.about .menu a[href="about.html"],
body.products .menu a[href="products.html"],
body.contact .menu a[href="contact.html"]{
    color:#ffd6a5;
}

body.home .menu a[href="index.html"]::after,
body.about .menu a[href="about.html"]::after,
body.products .menu a[href="products.html"]::after,
body.contact .menu a[href="contact.html"]::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:100%;
    height:2px;
    background:#ffd6a5;
    border-radius:10px;
}

/* =========================
   Running Notice
========================= */

.ticker-wrap{
    position:fixed;
    top:72px;
    left:0;
    width:100%;

    height:48px;

    overflow:hidden;

    display:flex;
    align-items:center;

    background:linear-gradient(
        to right,
        #ffffff,
        #f8fbff
    );

    border-top:1px solid #e5edf2;
    border-bottom:1px solid #e5edf2;

    box-shadow:0 2px 10px rgba(0,0,0,0.04);

    z-index:999;
}

.ticker{
    white-space:nowrap;

    color:#0a4d68;
    font-size:17px;
    font-weight:700;

    animation:marquee 6s linear infinite;
}

@keyframes marquee{
    0%{
        transform:translateX(100vw);
    }
    100%{
        transform:translateX(-100%);
    }
}

/* =========================
   Hero
========================= */

.hero{
    min-height:60vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    padding:35px 20px 50px;

    background:
    radial-gradient(circle at top right,
    rgba(10,77,104,0.12),
    transparent 35%),

    radial-gradient(circle at bottom left,
    rgba(211,47,47,0.08),
    transparent 30%),

    linear-gradient(to bottom,
    #f8fbfd,
    #eef3f8);
}

.hero-logo{
    width:100%;
    max-width:280px;

    margin-bottom:20px;

    filter:drop-shadow(
    0 10px 24px rgba(0,0,0,0.10));

    transition:.3s;
}

.hero-logo:hover{
    transform:scale(1.02);
}

.hero h1{
    color:#0a4d68;

    font-size:42px;
    font-weight:700;

    line-height:1.2;

    margin-bottom:15px;
}

.tagline{
    max-width:760px;

    font-size:20px;
    color:#555;

    line-height:1.8;

    margin-bottom:30px;
}

/* =========================
   Button
========================= */

.btn{
    display:inline-block;

    background:
    linear-gradient(
    135deg,
    #d32f2f,
    #ff5252);

    color:white;
    text-decoration:none;

    padding:14px 30px;

    border-radius:40px;

    font-size:16px;
    font-weight:600;

    transition:.3s;

    box-shadow:
    0 6px 18px rgba(211,47,47,0.22);
}

.btn:hover{
    transform:translateY(-3px);

    box-shadow:
    0 10px 24px rgba(211,47,47,0.28);
}

/* =========================
   Trust Strip
   (UNCHANGED)
========================= */

.trust-strip{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;

    padding:24px;

    background:white;
    color:#0a4d68;

    font-weight:600;
    font-size:16px;

    border-top:1px solid #eef2f5;

    box-shadow:0 -2px 12px rgba(0,0,0,0.04);
}

.trust-strip div{
    transition:.3s;
}

.trust-strip div:hover{
    transform:translateY(-2px);
}

/* =========================
   Work In Progress Pages
========================= */

.work-page{
    min-height:70vh;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;

    background:#eef3f8;
}

.loader{
    position:relative;
    width:160px;
    height:120px;
}

.loader::before{
    content:"⚙";
    position:absolute;

    font-size:90px;
    color:#0a4d68;

    animation:spin 4s linear infinite;
}

.loader::after{
    content:"⚙";
    position:absolute;

    left:70px;
    top:50px;

    font-size:55px;
    color:#d32f2f;

    animation:spinReverse 3s linear infinite;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes spinReverse{
    from{
        transform:rotate(360deg);
    }
    to{
        transform:rotate(0deg);
    }
}

.work-page h2{
    margin-top:20px;
    font-size:34px;
    color:#0a4d68;
}

.work-page p{
    color:#666;
    font-size:18px;
}

/* =========================
   Footer
   (UNCHANGED)
========================= */

footer{
    background:#0a4d68;
    color:white;

    text-align:center;

    padding:18px;
    font-size:14px;
}

/* =========================
   Mobile
========================= */

@media(max-width:768px){

    body{
        padding-top:175px;
    }

    .navbar{
        flex-direction:column;
        gap:14px;
        padding:14px 20px;
    }

    .menu{
        flex-wrap:wrap;
        justify-content:center;
        gap:18px;
    }

    .ticker-wrap{
        top:125px;
    }

    .hero{
        padding:35px 20px 50px;
    }

    .hero-logo{
        max-width:220px;
    }

    .hero h1{
        font-size:32px;
    }

    .tagline{
        font-size:17px;
    }

    .logo-text{
        font-size:16px;
        text-align:center;
    }
}