* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
    --icici-blue: #1A1F71;
    --icici-orange: #F37021;
    --orange-hover: #FF8C42;
    --white: #ffffff;
    --light-gray: #F8F9FA;
    --gray: #6C757D;
    --dark: #212529;
}
html { scroll-behavior: smooth; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--dark); overflow-x: hidden; }

nav {
    background: linear-gradient(135deg, var(--icici-blue) 0%, #0B2340 100%);
    backdrop-filter: blur(10px);
    padding: 1rem 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(26, 31, 113, 0.3);
    transition: all 0.3s ease;
}
nav.scrolled { padding: 0.5rem 0; box-shadow: 0 4px 30px rgba(26, 31, 113, 0.4); }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display: flex; justify-content: space-between; align-items: center; }
.logo { color: var(--white); font-size: 1.5rem; font-weight: bold; text-decoration: none; transition: transform 0.3s; display: flex; align-items: center; gap: 0.5rem; }
.logo::before { content: '⚙️'; font-size: 1.8rem; }
.logo:hover { transform: scale(1.05); }
.nav-menu { display: flex; list-style: none; gap: 2rem; }
.nav-menu a { color: var(--white); text-decoration: none; font-weight: 500; transition: all 0.3s; position: relative; padding: 0.5rem 0; }
.nav-menu a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--icici-orange); transition: width 0.3s; }
.nav-menu a:hover::after { width: 100%; }
.mobile-toggle { display: none; background: none; border: none; color: var(--white); font-size: 1.5rem; cursor: pointer; }

.hero {
    position: relative;
    background: linear-gradient(135deg, var(--icici-blue) 0%, var(--icici-orange) 100%);
    color: var(--white);
    text-align: center;
    padding: 200px 20px 120px;
    overflow: hidden;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#particles-js { position: absolute; width: 100%; height: 100%; top: 0; left: 0; }
.hero-content { position: relative; z-index: 10; animation: fadeInUp 1s ease-out; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.hero h1 { font-size: 4rem; margin-bottom: 1rem; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); animation: fadeInUp 1s ease-out 0.2s both; }
.hero .tagline { font-size: 1.4rem; margin-bottom: 2rem; color: rgba(255, 255, 255, 0.95); animation: fadeInUp 1s ease-out 0.4s both; }
.btn {
    display: inline-block;
    padding: 18px 40px;
    background: var(--icici-orange);
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-weight: bold;
    transition: all 0.3s;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    animation: fadeInUp 1s ease-out 0.6s both;
    box-shadow: 0 8px 20px rgba(243, 112, 33, 0.4);
}
.btn:hover { background: var(--orange-hover); transform: translateY(-3px); box-shadow: 0 12px 30px rgba(243, 112, 33, 0.5); }

.stats-section { background: linear-gradient(180deg, var(--white) 0%, var(--light-gray) 100%); padding: 80px 20px; text-align: center; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 3rem; max-width: 1200px; margin: 0 auto; }
.stat-item { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
.stat-item.animate { opacity: 1; transform: translateY(0); }
.stat-number { font-size: 3.5rem; font-weight: bold; background: linear-gradient(135deg, var(--icici-blue), var(--icici-orange)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.5rem; }
.stat-label { font-size: 1.1rem; color: var(--gray); font-weight: 600; }

section { padding: 80px 20px; max-width: 1200px; margin: 0 auto; }
.section-title { font-size: 2.8rem; color: var(--icici-blue); margin-bottom: 3rem; text-align: center; position: relative; opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
.section-title.animate { opacity: 1; transform: translateY(0); }
.section-title::after { content: ''; display: block; width: 80px; height: 4px; background: linear-gradient(90deg, var(--icici-orange), var(--orange-hover)); margin: 1rem auto; transition: width 0.3s; }
.section-title:hover::after { width: 120px; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 2rem; }
.card {
    background: var(--white);
    padding: 2.5rem;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(26, 31, 113, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    transform: translateY(30px);
    position: relative;
    overflow: hidden;
    border-left: 4px solid transparent;
}
.card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--icici-orange), var(--orange-hover)); transform: scaleX(0); transition: transform 0.3s; }
.card:hover::before { transform: scaleX(1); }
.card.animate { opacity: 1; transform: translateY(0); }
.card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 40px rgba(243, 112, 33, 0.2); border-left-color: var(--icici-orange); }
.card h3 { color: var(--icici-blue); font-size: 1.5rem; margin-bottom: 1rem; transition: color 0.3s; }
.card:hover h3 { color: var(--icici-orange); }
.card p { color: var(--gray); line-height: 1.8; }

.vision-mission { background: linear-gradient(135deg, #F8F9FA 0%, #E8EEF2 100%); position: relative; }
.vm-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 3rem; }
.vm-box {
    background: var(--white);
    padding: 3rem;
    border-radius: 15px;
    border-left: 5px solid var(--icici-orange);
    box-shadow: 0 10px 30px rgba(26, 31, 113, 0.1);
    transition: all 0.4s;
    opacity: 0;
    transform: translateX(-30px);
    position: relative;
    overflow: hidden;
}
.vm-box::after { content: ''; position: absolute; top: 0; right: 0; width: 100px; height: 100px; background: radial-gradient(circle, rgba(243, 112, 33, 0.1), transparent); border-radius: 50%; transform: translate(30%, -30%); }
.vm-box:nth-child(2) { transform: translateX(30px); border-left-color: var(--icici-blue); }
.vm-box.animate { opacity: 1; transform: translateX(0); }
.vm-box:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(243, 112, 33, 0.2); }
.vm-box h3 { color: var(--icici-blue); font-size: 2rem; margin-bottom: 1rem; }

.progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: linear-gradient(90deg, var(--icici-orange), var(--orange-hover)); z-index: 9999; transition: width 0.1s; }
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } }
.float-animation { animation: float 3s ease-in-out infinite; }

footer {
    background: linear-gradient(135deg, var(--icici-blue) 0%, #0B2340 100%);
    color: var(--white);
    padding: 3rem 20px 1rem;
    text-align: center;
}
.footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-section h4 { margin-bottom: 1rem; font-size: 1.2rem; color: var(--icici-orange); }
.footer-section a { color: rgba(255, 255, 255, 0.85); text-decoration: none; display: block; margin: 0.5rem 0; transition: all 0.3s; }
.footer-section a:hover { color: var(--icici-orange); transform: translateX(5px); }
.copyright { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 1rem; margin-top: 2rem; color: rgba(255, 255, 255, 0.8); }

.loading-screen {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--icici-blue) 0%, var(--icici-orange) 100%);
    display: flex; align-items: center; justify-content: center;
    z-index: 10000; transition: opacity 0.5s, visibility 0.5s;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; }
.loader { width: 50px; height: 50px; border: 5px solid rgba(255, 255, 255, 0.3); border-top-color: var(--white); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.cta-section {
    background: linear-gradient(135deg, var(--icici-orange) 0%, var(--orange-hover) 100%);
    padding: 60px 20px; text-align: center; color: var(--white); margin-top: 40px;
}
.cta-section h2 { font-size: 2.5rem; margin-bottom: 1rem; }
.cta-section p { font-size: 1.2rem; margin-bottom: 2rem; opacity: 0.95; }
.cta-section .btn { background: var(--white); color: var(--icici-orange); }
.cta-section .btn:hover { background: var(--icici-blue); color: var(--white); }

@media (max-width: 768px) {
    .mobile-toggle { display: block; }
    .nav-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--icici-blue); flex-direction: column; padding: 1rem; gap: 0; display: none; }
    .nav-menu.active { display: flex; }
    .nav-menu li { padding: 0.5rem 0; }
    .hero h1 { font-size: 2.5rem; }
    .hero .tagline { font-size: 1.1rem; }
    .vm-container, .cards-grid { grid-template-columns: 1fr; }
    .stat-number { font-size: 2.5rem; }
}