:root {
            --yellow: #F6F09F;
            --cream: #F8F3E1;
            --black: #000000;
            --white: #ffffff;
            --gray: #e0e0e0;
            --transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Roboto Condensed', sans-serif;
            background-color: var(--white);
            color: var(--black);
            line-height: 1.7;
            overflow-x: hidden;
        }

        /* --- Components --- */
        .container { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
        .section-padding { padding: 120px 0; }
        h1, h2, h3, h4 { text-transform: uppercase; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; }
        p { font-size: 1.15rem; margin-bottom: 1.5rem; font-weight: 300; }
        
        .btn {
            display: inline-block; padding: 18px 40px; background: var(--black);
            color: var(--yellow); text-decoration: none; font-weight: 700;
            border: none; cursor: pointer; transition: var(--transition);
            text-transform: uppercase; font-size: 0.95rem; letter-spacing: 1px;
        }
        .btn:hover { transform: scale(1.05); color: var(--white); background: #222; }
        .btn-outline { background: transparent; border: 2px solid var(--black); color: var(--black); }

        /* --- Header --- */
        header {
            background-color: var(--yellow);
            height: 100px; display: flex; align-items: center;
            padding: 0 5%; position: sticky; top: 0; z-index: 1000;
            border-bottom: 2px solid var(--black);
        }
.logo {
    font-size: 1.8rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 10px;
}

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


.menu-toggle{
    display:none;
    font-size:32px;
    background:none;
    border:none;
    cursor:pointer;
    margin-left:auto;
}

/* Mobile Navigation */

@media (max-width: 900px){

    nav{
        position:absolute;
        top:100px;
        left:0;
        width:100%;
        background:var(--yellow);
        flex-direction:column;
        align-items:center;
        gap:25px;
        padding:30px 0;
        border-bottom:2px solid var(--black);
        display:none;
    }

    nav.active{
        display:flex;
    }

    .menu-toggle{
        display:block;
    }

    .contact-btn{
        margin-top:10px;
    }
}

        nav { margin-left: auto; display: flex; align-items: center; gap: 35px; }
        nav a { 
            text-decoration: none; color: var(--black); font-weight: 700; 
            text-transform: uppercase; font-size: 0.9rem; position: relative;
            padding: 5px 0;
        }
        nav a::after {
            content: ''; position: absolute; width: 0; height: 2px; 
            bottom: 0; left: 0; background: var(--black); transition: 0.3s;
        }
        nav a:hover::after { width: 100%; }
        .contact-btn {
            background: var(--black); color: var(--yellow); padding: 12px 25px;
            transition: var(--transition);
        }
        .contact-btn:hover { transform: scale(1.1); filter: invert(1); }

        /* --- Page Routing System --- */
        .page-content { display: none; min-height: 80vh; }
        .page-content.active { display: block; animation: fadeIn 0.6s ease; }

        /* --- Hero Section --- */
        .hero { display: flex; min-height: 95vh; border-bottom: 2px solid var(--black); }
        .hero-left { 
            flex: 1; background: var(--cream); padding: 100px 80px; 
            display: flex; flex-direction: column; justify-content: center;
        }
        .hero-left h1 { font-size: 5.5rem; margin-bottom: 40px; }
        .hero-left img { width: 100%; max-width: 450px; margin: 40px 0; animation: float 6s ease-in-out infinite; }
        .hero-right { 
            flex: 1; background: url('https://i.pinimg.com/1200x/f8/ec/f9/f8ecf93f3e9f86173faa92c7507e4d24.jpg') center/cover no-repeat;
            position: relative; display: flex; align-items: flex-end; padding: 60px;
        }
        .hero-right::after { 
            content: ''; position: absolute; inset: 0; 
            background: linear-gradient(transparent, rgba(0,0,0,0.85)); 
        }
        .hero-overlay { position: relative; z-index: 1; color: white; max-width: 550px; }
        .hero-overlay h3 { font-size: 2.5rem; margin-bottom: 20px; }

        /* --- Services Section --- */
        .service-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 60px; }
        .service-card { 
            padding: 60px 40px; border: 3px solid var(--black); transition: var(--transition);
            background: white; display: flex; flex-direction: column;
        }
        .service-card:hover { transform: translateY(-15px); box-shadow: 15px 15px 0 var(--yellow); }
        .service-icon { font-size: 4rem; margin-bottom: 30px; }

        /* --- Technology Flow --- */
        .tech-split { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; background: var(--cream); padding: 100px; border-bottom: 2px solid var(--black); }
        .tech-list { display: flex; flex-direction: column; gap: 30px; position: relative; }
        .tech-card { 
            background: white; padding: 35px; border: 2px solid var(--black); 
            position: relative; z-index: 2; transition: var(--transition);
        }
        .tech-card:hover { background: var(--yellow); }
        .tech-line { 
            position: absolute; left: -50px; top: 40px; bottom: 40px; 
            width: 2px; border-left: 2px dashed var(--black); z-index: 1; 
        }

        /* --- Staggered Blog --- */
        .blog-filter { display: flex; justify-content: center; gap: 20px; margin-bottom: 60px; }
        .filter-chip { 
            padding: 10px 25px; border: 2px solid var(--black); 
            background: none; font-weight: 700; cursor: pointer; text-transform: uppercase;
        }
        .filter-chip.active { background: var(--black); color: var(--yellow); }
        
        .blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; }
        .blog-item { border: 2px solid var(--black); transition: var(--transition); background: white; }
        .blog-item:nth-child(even) { transform: translateY(80px); }
        .blog-img { width: 100%; height: 400px; object-fit: cover; border-bottom: 2px solid var(--black); filter: grayscale(100%); transition: 0.5s; }
        .blog-item:hover .blog-img { filter: grayscale(0%); }
        .blog-content { padding: 40px; }

        /* --- Knowledge Panel --- */
        .knowledge-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; }
        .kb-block { padding: 40px 0; border-bottom: 1px solid rgba(0,0,0,0.1); }
        .kb-block:last-child { border: none; }

        /* --- Footer --- */
        footer { background: var(--black); color: var(--yellow); padding: 120px 0 40px; margin-top: 100px; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 80px; margin-bottom: 80px; }
        .footer-grid h4 { color: white; margin-bottom: 30px; font-size: 1.2rem; }
        .footer-link { display: block; color: var(--yellow); text-decoration: none; margin-bottom: 15px; opacity: 0.7; font-size: 1rem; transition: 0.3s; }
        .footer-link:hover { opacity: 1; text-decoration: underline; padding-left: 5px; }

        /* --- Overlay Guide --- */
        .overlay {
            position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 2000;
            display: none; align-items: center; justify-content: center; padding: 40px;
        }
        .overlay-content {
            background: var(--white); width: 100%; max-width: 1000px; max-height: 85vh;
            padding: 80px; overflow-y: auto; border: 6px solid var(--black); position: relative;
        }
        .close-overlay { position: absolute; top: 30px; right: 30px; font-size: 4rem; cursor: pointer; border: none; background: none; line-height: 1; }

        /* --- Animations --- */
        @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes float { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } }
        
        .reveal { opacity: 0; transform: translateY(40px); transition: 0.8s ease-out; }
        .reveal.active { opacity: 1; transform: translateY(0); }

        /* --- Responsive --- */
        @media (max-width: 1024px) {
            .hero, .tech-split, .service-grid, .blog-grid, .footer-grid, .knowledge-layout { 
                grid-template-columns: 1fr; gap: 40px;
            }
            .hero-left h1 { font-size: 3.5rem; }
            .blog-item:nth-child(even) { transform: none; }
        }