:root {
    --bg-color: #e2e8f0; 
    --text-main: #0f172a;
    --text-muted: #64748b;
    --primary: #0284c7;
    
    /* Ixcham Neumorphism */
    --shadow-light: #ffffff;
    --shadow-dark: #cbd5e1;
    
    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.6);
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Fon */
.mesh-background {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 10% 40%, rgba(2, 132, 199, 0.08), transparent 40%),
                radial-gradient(circle at 90% 60%, rgba(14, 165, 233, 0.08), transparent 40%);
    z-index: -1;
}

/* GLASSMORPHISM BAZA */
.glass-nav, .glass-panel, .glass-card {
    background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}
.glass-nav { box-shadow: 0 4px 20px rgba(0,0,0,0.03); }
.glass-panel { border-radius: 20px; }
.glass-card { border-radius: 16px; overflow: hidden; }

/* NEUMORPHISM: IXCHAM MEXANIK TUGMALAR */
.mech-btn {
    font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 0.9rem;
    padding: 10px 20px; border-radius: 10px; border: 1px solid transparent; 
    background: var(--bg-color); color: var(--text-main);
    cursor: pointer; transition: all 0.2s ease;
    box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light);
}
.btn-primary-mech { color: var(--primary); }

.mech-btn:active, .mech-btn.pressed, .physical-trigger:active {
    box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
    transform: translateY(1px); color: var(--primary); border: 1px solid rgba(255,255,255,0.4);
}

/* NAVIGATSIYA MENYULARI */
.nav-link.mech-hover {
    font-weight: 600; font-size: 0.9rem; color: var(--text-muted);
    padding: 8px 16px; border-radius: 8px; background: transparent; transition: all 0.3s ease;
}
@media (min-width: 1200px) {
    .nav-link.mech-hover { box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light); background: var(--bg-color); margin: 0 4px; }
    .nav-link.mech-hover.active-mech { box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light); color: var(--primary); transform: translateY(1px); }
}

/* INPUTLAR VA ICHKI EKRANLAR */
.mech-input-group, .mech-select-box, .ai-screen {
    background: var(--bg-color); border-radius: 10px; padding: 4px;
    box-shadow: inset 4px 4px 8px var(--shadow-dark), inset -4px -4px 8px var(--shadow-light);
}
.mech-input, .mech-select { width: 100%; background: transparent; border: none; padding: 10px 15px; font-weight: 500; font-size: 0.9rem; outline: none; }
.ai-screen { min-height: 180px; font-family: monospace; color: var(--primary); padding: 20px; font-size: 1rem; border: 1px solid rgba(255,255,255,0.5); }

/* TIPOGRAFIYA */
.hero-section { min-height: 100vh; padding-top: 80px; }
.hero-title { font-size: 2.6rem; font-weight: 800; line-height: 1.2; letter-spacing: -1px; color: #0f172a; }
.section-heading { font-weight: 800; font-size: 2.2rem; color: #0f172a; }
.mech-divider { width: 60px; height: 4px; background: var(--bg-color); margin: 15px auto; border-radius: 2px; box-shadow: inset 2px 2px 4px var(--shadow-dark), inset -2px -2px 4px var(--shadow-light); }
.mech-badge { display: inline-block; padding: 8px 16px; border-radius: 8px; font-weight: 700; font-size: 0.85rem; color: var(--text-main); box-shadow: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light); background: var(--bg-color); }

/* MODULLAR VA JAMOA RASMLARI */
.module-img-wrap, .team-img-wrap { width: 100%; height: 200px; border-radius: 16px 16px 0 0; overflow: hidden; border-bottom: 3px solid var(--primary); }
.module-img-wrap img, .team-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: 0.5s; }
.glass-card:hover img { transform: scale(1.05); }

/* WIDGET Ikonkalar */
.partner-logo-box { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 10px; background: var(--bg-color); color: var(--primary); box-shadow: 4px 4px 8px var(--shadow-dark), -4px -4px 8px var(--shadow-light); }
.social-btn { padding: 10px 12px; border-radius: 50%; display: inline-flex; }

/* 3D Radar Effekti (Hero) */
.glass-circle-huge { width: 350px; height: 350px; border-radius: 50%; background: var(--glass-bg); box-shadow: 15px 15px 40px var(--shadow-dark), -15px -15px 40px var(--shadow-light), inset 5px 5px 15px rgba(255,255,255,0.8); }
.radar-scan { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 70%, rgba(2, 132, 199, 0.3) 100%); animation: radarSpin 4s linear infinite; z-index: 1; }
@keyframes radarSpin { 100% { transform: rotate(360deg); } }

/* Footer Links */
.footer-links a { color: var(--text-muted); text-decoration: none; font-weight: 500; transition: 0.2s; }
.footer-links a:hover { color: var(--primary); }

/* RESPONSIVE (Mobil) */
@media (max-width: 1199px) {
    .navbar-collapse { background: var(--glass-bg); backdrop-filter: blur(15px); margin-top: 15px; padding: 20px; border-radius: 15px; box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
    .nav-link.mech-hover { margin-bottom: 10px; border-bottom: 1px solid rgba(0,0,0,0.05); border-radius: 0; }
}

@media (max-width: 767px) {
    .hero-title { font-size: 1.8rem; }
    .section-heading { font-size: 1.6rem; }
    .glass-panel { padding: 20px !important; }
    .hero-section { padding-top: 70px; min-height: auto; padding-bottom: 40px; }
}