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

:root{
    --nav-bg: #081a56;
    --hero-bg: #051a5f;
    --accent: #07246f;
    --white: #ffffff;
}
:root{ --footer-accent: #1332ff }

body{
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    color: #222;
    background: #fff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

.container{
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Header / Nav */
.header{
    background: var(--nav-bg);
    color: var(--white);
    padding: 24px 0;
}
.nav{ display:flex; align-items:center; justify-content:space-between; }
.logo{ 
    color:var(--white); 
    font-weight:700; 
    font-size:1.25rem; 
    text-decoration:none;
    display: flex;
    align-items: center;
}
.logo img{
    height: 60px;
    width: auto;
    display: block;
}
.nav nav ul{ list-style:none; display:flex; gap:36px; align-items:center }
.nav nav ul li a{ color:var(--white); text-decoration:none; letter-spacing:1px; text-transform:uppercase; font-size:0.95rem }

/* Mobile menu toggle */
.menu-toggle{
    display: none;
    background: transparent;
    border: 2px solid #ffffff;
    width: 44px;
    height: 40px;
    border-radius: 8px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex-direction: column;
    cursor: pointer;
}

.menu-toggle span{
    display: block;
    width: 22px;
    height: 2px;
    background: #ffffff;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav.nav-open .menu-toggle span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
}
.nav.nav-open .menu-toggle span:nth-child(2){
    opacity: 0;
}
.nav.nav-open .menu-toggle span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
}

/* Hero banner */
.hero{
    background: linear-gradient(135deg, var(--hero-bg) 0%, var(--accent) 50%, #0a1a47 100%);
    color: var(--white);
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

.hero-bg-decoration{
    position: absolute;
    top: -50%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.hero-inner{ 
    display:flex; 
    gap:60px; 
    align-items:center;
    position: relative;
    z-index: 2;
}
.hero-left{ flex:1; }
.hero-left h1{
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.hero-left p.lead{ 
    font-size:1.2rem; 
    opacity:0.95; 
    margin-bottom:40px;
    line-height: 1.6;
}

.cta-buttons{
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
}

.btn{
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 14px 32px;
    font-size: 1rem;
}

.btn-primary{
    background: #fff;
    color: var(--hero-bg);
}

.btn-primary:hover{
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(255,255,255,0.2);
}

.btn-secondary{
    background: transparent;
    color: #fff;
    border: 2px solid #fff;
}

.btn-secondary:hover{
    background: rgba(255,255,255,0.1);
    transform: translateY(-3px);
}

.avatar-row{ 
    display:flex; 
    gap:12px; 
    align-items:center;
    margin-bottom: 12px;
}
.avatar{ 
    width:56px; 
    height:56px; 
    border-radius:50%; 
    overflow:hidden; 
    border:3px solid #fff; 
    box-shadow:0 4px 12px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}
.avatar:hover{
    transform: scale(1.1);
}
.avatar img{ 
    width:100%; 
    height:100%; 
    object-fit:cover;
}

.avatar-text{
    font-size: 0.95rem;
    opacity: 0.9;
    margin: 0;
}

/* Contact card */
.hero-right{ 
    width:400px;
    position: relative;
    z-index: 3;
}
.contact-card{ 
    background:#fff; 
    color:#071a56; 
    padding:40px; 
    border-radius:16px; 
    box-shadow:0 20px 60px rgba(4,21,66,0.25);
    backdrop-filter: blur(10px);
}
.contact-card h2{ 
    margin:0 0 24px; 
    font-size:1.8rem; 
    text-align:center; 
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}
.contact-card form{ 
    display:flex; 
    flex-direction:column; 
    gap:16px;
}
.contact-card input, 
.contact-card textarea{ 
    padding:14px 16px; 
    border:2px solid #e0e6f2; 
    border-radius:8px; 
    font-size:0.95rem;
    font-family: 'Inter', sans-serif;
    transition: border-color 0.3s ease;
}
.contact-card input:focus,
.contact-card textarea:focus{
    outline: none;
    border-color: var(--footer-accent);
    box-shadow: 0 0 0 3px rgba(19, 50, 255, 0.1);
}
.contact-card textarea{ 
    min-height:120px; 
    resize:vertical;
}
.contact-card .btn-primary{ 
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, var(--footer-accent) 0%, #0a1fbf 100%);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 8px;
    box-shadow: 0 4px 15px rgba(19, 50, 255, 0.3);
}

.contact-card .btn-primary:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(19, 50, 255, 0.4);
}

.contact-card .btn-primary:active{
    transform: translateY(0);
}

/* Features Section */
.features{
    padding: 120px 0;
    background: linear-gradient(135deg, #f8f9fc 0%, #f0f3ff 100%);
    position: relative;
    overflow: hidden;
}

.features::before{
    content: '';
    position: absolute;
    top: -50%;
    left: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(19, 50, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.features::after{
    content: '';
    position: absolute;
    bottom: -30%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(19, 50, 255, 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.features-title{
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: var(--hero-bg);
    text-align: center;
    margin: 0 0 20px 0;
    letter-spacing: -0.02em;
}

.features-subtitle{
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #666;
    text-align: center;
    margin: 0 0 70px 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.features-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    position: relative;
    z-index: 2;
}

.feature{
    padding: 40px 30px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(19, 50, 255, 0.08);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.feature::before{
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(19, 50, 255, 0.08) 50%, transparent 100%);
    transition: left 0.5s ease;
}

.feature:hover::before{
    left: 100%;
}

.feature:hover{
    transform: translateY(-15px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.12);
    border-color: rgba(19, 50, 255, 0.15);
}

.icon-box{
    width: 90px;
    height: 90px;
    margin: 0 auto 24px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    font-size: 3.5rem;
}

.icon-1{ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.icon-2{ background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
.icon-3{ background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
.icon-4{ background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }

.feature:hover .icon-box{
    transform: scale(1.12) rotate(-5deg);
    box-shadow: 0 12px 30px rgba(0,0,0,0.2);
}

.feature h4{
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 14px 0;
    position: relative;
    z-index: 1;
}
    color: var(--hero-bg);
    margin: 0 0 12px 0;
}

.feature p{
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Other sections kept simple */
.services{ padding:70px 0 }
.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:25px }
.card{ padding:25px; border-radius:8px; background:#fff }

.footer{ padding:25px 0; text-align:center; background:#071a56; color:#fff }

/* Footer styles */
.site-footer{ background:var(--nav-bg); color:var(--white); padding:56px 0 0 }
.site-footer .footer-top{ display:flex; gap:36px; align-items:flex-start; padding:36px 0; justify-content:space-between }
.site-footer .footer-col{ flex:0 0 33% }
.footer-left .footer-logo{ font-size:1.8rem; font-weight:800; display:flex; align-items:center; gap:16px }
.footer-left .footer-logo img{ height:72px }
.footer-desc{ margin-top:18px; max-width:420px; color:rgba(255,255,255,0.95); line-height:1.7 }
.footer-center{ text-align:center }
.footer-center h4{ margin-bottom:18px; font-size:1.05rem }
.footer-links-list{ list-style:none; padding:0; margin:0 }
.footer-links-list li{ margin:10px 0 }
.footer-links-list li a{ color:rgba(255,255,255,0.92); text-decoration:none }
.footer-right h4{ margin-bottom:12px }
.contact-item{ display:flex; gap:12px; align-items:flex-start; color:rgba(255,255,255,0.95); margin:8px 0 }
.contact-item svg{ width:18px; height:18px; flex:0 0 18px; margin-top:2px; opacity:0.95 }
.contact-item a{ color:rgba(255,255,255,0.95); text-decoration:none }
.footer-bottom{ background:var(--footer-accent); padding:12px 0; text-align:center; color:#fff; margin-top:18px }

@media (max-width:900px){
    .site-footer .footer-top{ flex-direction:column; gap:24px }
    .site-footer .footer-col{ flex:1 }
    .footer-left .footer-logo img{ height:56px }
}

/* Analytics / Console section */
/* Analytics section styles */
.analytics{ 
    padding: 100px 0; 
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
    color: var(--nav-bg);
    position: relative;
    overflow: hidden;
}

.analytics::after{
    content: '';
    position: absolute;
    bottom: -20%;
    left: -10%;
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(19, 50, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.analytics-inner{ 
    display: flex; 
    gap: 80px; 
    align-items: center;
    position: relative;
    z-index: 2;
}

.analytics-left{ 
    flex: 1;
}

.analytics-badge{
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--footer-accent);
    background: rgba(19, 50, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.analytics-title{ 
    font-family: 'Poppins', sans-serif; 
    font-size: 3rem; 
    font-weight: 800;
    margin-bottom: 24px; 
    color: var(--nav-bg);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.analytics-text{ 
    font-family: 'Inter', sans-serif;
    color: #666; 
    line-height: 1.8; 
    margin: 0;
    font-size: 1.05rem;
}

.analytics-right{ 
    flex: 1;
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 24px;
}

.analytics-card{
    background: var(--white);
    padding: 40px;
    border-radius: 16px;
    border: 2px solid #f0f3ff;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    position: relative;
    overflow: hidden;
}

.analytics-card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--footer-accent) 0%, #764ba2 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.analytics-card:hover::before{
    transform: scaleX(1);
}

.analytics-card:hover{
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(19, 50, 255, 0.15);
    border-color: rgba(19, 50, 255, 0.2);
}

.analytics-icon{
    font-size: 2.5rem;
    margin-bottom: 16px;
    display: inline-block;
}

.analytics-card-title{ 
    font-family: 'Poppins', sans-serif;
    font-weight: 700; 
    color: var(--hero-bg); 
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.analytics-card-desc{ 
    font-family: 'Inter', sans-serif;
    color: #666; 
    line-height: 1.6;
    font-size: 0.95rem;
}

@media (max-width:900px){
    .analytics-inner{ 
        flex-direction: column;
        gap: 50px;
    }
    
    .analytics-title{
        font-size: 2.2rem;
    }
    
    .analytics-right{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px){
    .analytics{
        padding: 70px 0;
    }
    
    .analytics-badge{
        font-size: 0.75rem;
        padding: 6px 12px;
    }
    
    .analytics-title{
        font-size: 1.8rem;
        margin-bottom: 16px;
    }
    
    .analytics-card{
        padding: 30px;
    }
}

/* Collaboration section styles */
/* Collaboration section styles */
.collab{ 
    padding: 100px 0; 
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
    color: var(--nav-bg);
    position: relative;
    overflow: hidden;
}

.collab::before{
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(19, 50, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.collab-inner{ 
    display: flex; 
    gap: 80px; 
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.collab-left{ 
    flex: 1;
}

.collab-badge{
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--footer-accent);
    background: rgba(19, 50, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.collab-title{ 
    font-family: 'Poppins', sans-serif; 
    font-size: 3rem; 
    font-weight: 800;
    margin-bottom: 24px; 
    color: var(--nav-bg);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.collab-text{ 
    font-family: 'Inter', sans-serif;
    color: #666; 
    line-height: 1.8; 
    margin: 0;
    font-size: 1.05rem;
}

.collab-right{ 
    flex: 1;
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 24px;
}

.collab-feature{
    background: var(--white);
    padding: 40px;
    border-radius: 16px;
    border: 2px solid #f0f3ff;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    position: relative;
    overflow: hidden;
}

.collab-feature::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--footer-accent) 0%, #764ba2 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.collab-feature:hover::before{
    transform: scaleX(1);
}

.collab-feature:hover{
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(19, 50, 255, 0.15);
    border-color: rgba(19, 50, 255, 0.2);
}

.collab-icon{
    font-size: 2.5rem;
    margin-bottom: 16px;
    display: inline-block;
}

.collab-feature-title{ 
    font-family: 'Poppins', sans-serif;
    font-weight: 700; 
    color: var(--hero-bg); 
    margin-bottom: 12px;
    font-size: 1.2rem;
}

.collab-feature-desc{ 
    font-family: 'Inter', sans-serif;
    color: #666; 
    line-height: 1.6;
    font-size: 0.95rem;
}

@media (max-width: 900px){
    .collab-inner{ 
        flex-direction: column;
        gap: 50px;
    }
    
    .collab-title{
        font-size: 2.2rem;
    }
}

@media (max-width: 720px){
    .collab{
        padding: 70px 0;
    }
    
    .collab-badge{
        font-size: 0.75rem;
        padding: 6px 12px;
    }
    
    .collab-title{
        font-size: 1.8rem;
        margin-bottom: 16px;
    }
    
    .collab-feature{
        padding: 30px;
    }
}

/* Testimonials / Feedback section */
/* Testimonials section */
.testimonials{ 
    padding: 100px 0; 
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
    color: var(--nav-bg);
    position: relative;
    overflow: hidden;
}

.testimonials::after{
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(19, 50, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.testimonials-badge{
    display: block;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--footer-accent);
    background: rgba(19, 50, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    margin: 0 auto 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    width: fit-content;
}

.testimonials-title{ 
    text-align: center;
    font-family: 'Poppins', sans-serif; 
    font-size: 3rem; 
    font-weight: 800;
    margin-bottom: 16px; 
    color: var(--nav-bg);
    letter-spacing: -0.02em;
    line-height: 1.2;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.testimonials-subtitle{
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #666;
    margin-bottom: 60px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.testi-grid{ 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 24px; 
    max-width: 1200px; 
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.testi{ 
    background: var(--white); 
    padding: 40px; 
    border-radius: 16px; 
    border: 2px solid #f0f3ff;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08); 
    display: flex; 
    flex-direction: column;
    gap: 16px;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    position: relative;
    overflow: hidden;
}

.testi::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--footer-accent) 0%, #764ba2 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.testi:hover::before{
    transform: scaleX(1);
}

.testi:hover{
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(19, 50, 255, 0.15);
    border-color: rgba(19, 50, 255, 0.2);
}

.testi-content{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.testi-stars{
    font-size: 1.3rem;
    letter-spacing: 2px;
}

.testi-quote{ 
    font-family: 'Inter', sans-serif;
    font-style: italic; 
    color: #556; 
    line-height: 1.8;
    font-size: 0.95rem;
}

.testi-author{ 
    font-family: 'Poppins', sans-serif;
    margin-top: 8px; 
    font-weight: 700; 
    color: var(--hero-bg);
    font-size: 1rem;
}

.testi-role{
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #999;
    font-weight: 500;
}

@media (max-width: 1000px){
    .testi-grid{ grid-template-columns: repeat(2, 1fr) }
    .testimonials-title{
        font-size: 2.2rem;
    }
}

@media (max-width: 720px){
    .testimonials{
        padding: 70px 0;
    }
    
    .testimonials-badge{
        font-size: 0.75rem;
        padding: 6px 12px;
    }
    
    .testimonials-title{
        font-size: 1.8rem;
        margin-bottom: 12px;
    }
    
    .testimonials-subtitle{
        margin-bottom: 40px;
        font-size: 1rem;
    }
    
    .testi{
        padding: 30px;
    }
}

@media (max-width: 520px){
    .testi-grid{ grid-template-columns: 1fr }
}

/* Subscribe CTA */
.subscribe-cta{ background:var(--hero-bg); color:var(--white); padding:60px 0; border-radius:10px; margin:40px 0 }
.subscribe-cta .container{ text-align:center }
.subscribe-cta h2{ font-family:'Poppins', sans-serif; font-size:clamp(1.8rem,4vw,3.2rem); margin-bottom:14px; color:var(--white) }
.subscribe-cta .sub-lead{ color:rgba(255,255,255,0.9); max-width:760px; margin:0 auto 26px }
.subscribe-form{ display:inline-flex; gap:0; align-items:center; background:#fff; padding:4px; border-radius:6px; box-shadow:0 6px 22px rgba(0,0,0,0.08) }
.subscribe-form input[type="email"]{ border:0; padding:12px 18px; width:360px; font-size:1rem; outline:none }
.subscribe-form button{ background:var(--hero-bg); color:var(--white); border:2px solid var(--white); padding:10px 18px; border-radius:6px; cursor:pointer; font-weight:600 }

@media (max-width:720px){
    .subscribe-form{ flex-direction:column; width:100%; display:flex; max-width:420px; margin:0 auto }
    .subscribe-form input[type="email"]{ width:100%; }
    .subscribe-form button{ width:100%; }
}


@media (max-width: 900px){
    .hero-inner{ flex-direction:column; align-items:stretch }
    .hero-right{ width:100% }
    .hero-left h1{ font-size:2.4rem }
    .nav nav ul{ gap:18px }
}

/* Features / second section */
.features{ padding:80px 0; background:#fff; color:#071a56 }
.features .features-title{ text-align:center; font-family:'Poppins', sans-serif; font-size:2.75rem; color:var(--nav-bg); margin-bottom:48px; font-weight:700 }
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:36px; align-items:start }
.feature{ text-align:left }
.feature .icon-box{ width:72px; height:72px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow: 0 6px 20px rgba(7,26,86,0.06) }
.feature .icon-box img{ width:36px; height:36px }
.feature h4{ margin:0 0 12px; font-size:1.05rem; color:var(--nav-bg); font-weight:600 }
.feature p{ color:#556; line-height:1.7 }

/* subtle gradients for icon boxes */
.icon-1{ background: linear-gradient(135deg,#eaf6ff,#d6f0ff) }
.icon-2{ background: linear-gradient(135deg,#fff4e6,#fff0d6) }
.icon-3{ background: linear-gradient(135deg,#fff1ea,#ffe9dd) }
.icon-4{ background: linear-gradient(135deg,#faf0ff,#fff0fb) }

@media (max-width: 900px){
    .features-grid{ grid-template-columns:repeat(2,1fr); gap:28px }
    .features .features-title{ font-size:2rem }
}

@media (max-width: 480px){
    .features-grid{ grid-template-columns:1fr }
    .features{ padding:48px 0 }
}

@media (max-width: 900px){
    .about-inner{
        flex-direction: column;
        gap: 50px;
    }
    
    .about-title{
        font-size: 2.2rem;
    }
    
    .about-right{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px){
    .about-cta{
        padding: 70px 0;
    }
    
    .about-badge{
        font-size: 0.75rem;
        padding: 6px 12px;
    }
    
    .about-title{
        font-size: 1.8rem;
        margin-bottom: 16px;
    }
    
    .metric{
        padding: 30px;
    }
}

/* About / Metrics section styles */
.about-cta{ 
    padding: 100px 0; 
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fc 100%);
    color: var(--nav-bg);
    position: relative;
    overflow: hidden;
}

.about-cta::before{
    content: '';
    position: absolute;
    top: -30%;
    right: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(19, 50, 255, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.about-inner{ 
    display: flex; 
    gap: 80px; 
    align-items: center;
    position: relative;
    z-index: 2;
}

.about-left{
    flex: 1;
}

.about-badge{
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--footer-accent);
    background: rgba(19, 50, 255, 0.1);
    padding: 8px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.about-title{
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 800;
    color: var(--hero-bg);
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.about-text{
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    color: #666;
    line-height: 1.8;
    margin: 0 0 28px 0;
}

.about-link{
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--footer-accent);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 12px 0;
    border-bottom: 2px solid var(--footer-accent);
}

.about-link:hover{
    padding-right: 8px;
    transform: translateX(4px);
}

.about-right{
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.metric{
    padding: 40px;
    background: var(--white);
    border-radius: 16px;
    border: 2px solid #f0f3ff;
    box-shadow: 0 10px 35px rgba(0,0,0,0.08);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.metric::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--footer-accent) 0%, #764ba2 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.metric:hover::before{
    transform: scaleX(1);
}

.metric:hover{
    transform: translateY(-12px);
    box-shadow: 0 20px 50px rgba(19, 50, 255, 0.15);
    border-color: rgba(19, 50, 255, 0.2);
}

.metric-icon{
    font-size: 2.5rem;
    margin-bottom: 16px;
    display: inline-block;
}

.metric-number{
    font-family: 'Poppins', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--hero-bg);
    margin: 16px 0;
    letter-spacing: -0.02em;
}

.metric-symbol{
    font-size: 1.5rem;
    color: var(--footer-accent);
}

.metric-label{
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #666;
    font-weight: 600;
    margin: 0;
    line-height: 1.4;
}
.about-left{ flex:1 }
.about-sub{ font-family:'Poppins', sans-serif; color:var(--nav-bg); font-size:0.95rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:12px }
.about-title{ font-family:'Poppins', sans-serif; font-size:2rem; margin-bottom:18px; color:var(--nav-bg); line-height:1.12 }
.about-text{ color:#334; line-height:1.8 }
.about-right{ width:360px; display:flex; flex-direction:column; gap:18px }
.metric{ background:#fff; padding:18px; border-radius:12px; box-shadow:0 8px 20px rgba(7,26,86,0.06); }
.metric-number{ font-family:'Poppins', sans-serif; font-size:2.4rem; color:var(--hero-bg); font-weight:700 }
.metric-symbol{ font-size:1rem; vertical-align:super; margin-left:4px }
.metric-label{ font-weight:600; margin-top:6px; color:var(--nav-bg) }
.metric-desc{ color:#556; margin-top:8px; font-size:0.95rem; line-height:1.6 }

/* ABOUT PAGE HERO */
.about-hero{
    background: linear-gradient(135deg, var(--hero-bg) 0%, #051a5f 100%);
    padding: 120px 0;
    text-align: center;
}

.about-hero-inner h1{
    font-family: 'Poppins', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 20px 0;
}

.about-hero-subtitle{
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #b0c4ff;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
}

/* SERVICES PAGE HERO */
.services-hero{
    background: linear-gradient(135deg, var(--hero-bg) 0%, #051a5f 100%);
    padding: 120px 0;
    text-align: center;
}

.services-hero-inner h1{
    font-family: 'Poppins', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 20px 0;
}

.services-hero-subtitle{
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #b0c4ff;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
}

/* ABOUT CONTENT */
.about-content{
    padding: 80px 0;
    background: var(--white);
}

.about-intro-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-intro h2{
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 30px 0;
}

.about-intro p{
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #555;
    line-height: 1.8;
    margin: 0 0 20px 0;
    max-width: 100%;
}

.about-intro p:last-child{
    margin-bottom: 0;
}

.about-image{
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.about-image img{
    width: 100%;
    height: auto;
    display: block;
}

/* OUR APPROACH */
.our-approach{
    padding: 80px 0;
    background: #f8f9fc;
}

.our-approach h2{
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 50px 0;
    text-align: center;
}

.approach-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.approach-card{
    background: var(--white);
    padding: 40px 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.approach-card:hover{
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.approach-number{
    font-family: 'Poppins', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
    margin: 0 0 15px 0;
    opacity: 0.3;
}

.approach-card h3{
    font-family: 'Poppins', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 15px 0;
}

.approach-card p{
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* WHAT WE DO */
.what-we-do{
    padding: 80px 0;
    background: var(--white);
}

.what-we-do h2{
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 20px 0;
    text-align: center;
}

.section-intro{
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #666;
    text-align: center;
    margin: 0 auto 50px;
    max-width: 600px;
    line-height: 1.8;
}

.services-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.service-item{
    padding: 30px;
    background: #f8f9fc;
    border-left: 4px solid var(--accent);
    border-radius: 5px;
    transition: background 0.3s ease;
}

.service-item:hover{
    background: #f0f3ff;
}

.service-item h3{
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 10px 0;
}

.service-item p{
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* MISSION & VISION */
.mission-vision{
    padding: 80px 0;
    background: linear-gradient(135deg, var(--hero-bg) 0%, #051a5f 100%);
}

.mission-vision-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.mission-card, .vision-card{
    padding: 50px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.mission-card h3, .vision-card h3{
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 20px 0;
}

.mission-card p, .vision-card p{
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #e8f0ff;
    line-height: 1.8;
    margin: 0;
}

@media (max-width: 900px){
    .about-inner{ flex-direction:column; align-items:stretch }
    .about-right{ width:100% }
    .about-title{ font-size:1.6rem }
    
    .about-hero{
        padding: 80px 0;
    }
    
    .about-hero-inner h1{
        font-size: 2.5rem;
    }
    
    .about-hero-subtitle{
        font-size: 1rem;
    }
    
    .about-intro-container{
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .approach-grid{
        grid-template-columns: 1fr;
    }
    
    .services-list{
        grid-template-columns: 1fr;
    }
    
    .mission-vision-grid{
        grid-template-columns: 1fr;
    }
    
    .about-intro h2,
    .our-approach h2,
    .what-we-do h2{
        font-size: 2rem;
    }
    
    .services-grid{
        grid-template-columns: repeat(2, 1fr);
    }
    
    .services-intro h2{
        font-size: 2rem;
    }
    
    .services-cta h2{
        font-size: 2rem;
    }
}

@media (max-width: 720px){
    .services-grid{
        grid-template-columns: 1fr;
    }
    
    .services-intro{
        padding: 60px 0;
    }
    
    .services-section{
        padding: 60px 0;
    }
    
    .services-cta{
        padding: 60px 0;
    }
}

/* SERVICES INTRO */
.services-intro{
    padding: 80px 0;
    background: var(--white);
    text-align: center;
}

.services-intro h2{
    font-family: 'Poppins', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 30px 0;
}

.intro-text{
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #666;
    line-height: 1.8;
    margin: 0 auto;
    max-width: 700px;
}

/* SERVICES GRID */
.services-section{
    padding: 80px 0;
    background: #f8f9fc;
}

.services-grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card{
    background: var(--white);
    padding: 40px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.service-card:hover{
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.15);
}

.service-icon{
    font-size: 3rem;
    margin: 0 0 20px 0;
    display: inline-block;
}

.service-card h3{
    font-family: 'Poppins', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 15px 0;
}

.service-card p{
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #666;
    line-height: 1.7;
    margin: 0;
}

/* SERVICES CTA */
.services-cta{
    padding: 80px 0;
    background: linear-gradient(135deg, var(--hero-bg) 0%, #051a5f 100%);
    text-align: center;
}

.services-cta h2{
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 20px 0;
}

.services-cta p{
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #b0c4ff;
    margin: 0 0 40px 0;
    line-height: 1.6;
}

.cta-button{
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    background: var(--accent);
    padding: 14px 40px;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-button:hover{
    background: #0a1fbf;
    transform: scale(1.05);
}

/* CONTACT PAGE HERO */
.contact-hero{
    background: linear-gradient(135deg, var(--hero-bg) 0%, #051a5f 100%);
    padding: 120px 0;
    text-align: center;
}

.contact-hero-inner h1{
    font-family: 'Poppins', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: var(--white);
    margin: 0 0 20px 0;
}

.contact-hero-subtitle{
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: #b0c4ff;
    margin: 0;
    font-weight: 400;
    line-height: 1.6;
}

/* CONTACT CONTENT */
.contact-content{
    padding: 80px 0;
    background: var(--white);
}

.contact-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

.contact-info-section h2,
.contact-form-section h2{
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 40px 0;
}

.contact-info-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.info-card{
    padding: 30px;
    background: #f8f9fc;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
}

.info-card:hover{
    background: #f0f3ff;
    transform: translateY(-5px);
}

.info-icon{
    font-size: 2.5rem;
    margin: 0 0 15px 0;
    display: inline-block;
}

.info-card h3{
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 10px 0;
}

.info-card p{
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #666;
    margin: 0;
    line-height: 1.6;
}

.info-card a{
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.info-card a:hover{
    color: #0a1fbf;
}

/* CONTACT FORM */
.contact-form-section{
    padding: 40px;
    background: #f8f9fc;
    border-radius: 12px;
}

.contact-form{
    display: flex;
    flex-direction: column;
}

.form-group{
    margin: 0 0 20px 0;
}

.form-group label{
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--hero-bg);
    margin: 0 0 8px 0;
}

.form-group input,
.form-group textarea{
    width: 100%;
    padding: 12px 15px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #333;
    background: var(--white);
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.form-group input:focus,
.form-group textarea:focus{
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(19, 50, 255, 0.1);
}

.form-group textarea{
    resize: vertical;
    min-height: 120px;
}

.submit-btn{
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white);
    background: var(--accent);
    padding: 14px 30px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.submit-btn:hover{
    background: #0a1fbf;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(19, 50, 255, 0.3);
}

/* MAP SECTION */
.map-section{
    padding: 80px 0;
    background: #f8f9fc;
}

.map-section h2{
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--hero-bg);
    margin: 0 0 40px 0;
    text-align: center;
}

.map-container{
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.map-container iframe{
    display: block;
}

@media (max-width: 900px){
    .contact-hero-inner h1{
        font-size: 2.5rem;
    }
    
    .contact-hero-subtitle{
        font-size: 1rem;
    }
    
    .contact-container{
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .contact-info-grid{
        grid-template-columns: 1fr;
    }
    
    .contact-form-section h2,
    .contact-info-section h2{
        font-size: 1.6rem;
    }
}