:root { --primary-color: #1e88e5; --secondary-color: #42a5f5; --accent-color: #64b5f6; --light-blue: #e3f2fd; --success-color: #4caf50; --danger-color: #f44336; --warning-color: #ff9800; --info-color: #00bcd4; --light-color: #fafafa; --dark-color: #263238; --white-color: #ffffff; --gray-color: #757575; --border-radius: 12px; --box-shadow: 0 8px 25px rgba(30, 136, 229, 0.15); --box-shadow-hover: 0 12px 35px rgba(30, 136, 229, 0.25); --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --gradient-primary: linear-gradient(135deg, #1e88e5 0%, #42a5f5 100%); --gradient-secondary: linear-gradient(135deg, #42a5f5 0%, #64b5f6 100%); --gradient-light: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);}* { margin: 0; padding: 0; box-sizing: border-box;}body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; color: var(--dark-color); background: var(--gradient-primary); min-height: 100vh; overflow-x: hidden;}.navbar { background: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(15px); box-shadow: var(--box-shadow); transition: var(--transition); border-bottom: 1px solid rgba(30, 136, 229, 0.1);}.navbar-brand { font-weight: 700; color: var(--primary-color) !important; font-size: 1.5rem;}.navbar-nav .nav-link { font-weight: 500; transition: var(--transition); color: var(--dark-color) !important; margin: 0 0.5rem; border-radius: var(--border-radius); padding: 0.5rem 1rem !important;}.navbar-nav .nav-link:hover { color: var(--primary-color) !important; background: var(--light-blue); transform: translateY(-2px);}.hero-section { padding: 140px 0 100px; color: var(--white-color); text-align: center; position: relative; overflow: hidden; background: var(--gradient-primary);}.hero-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>'); z-index: 1;}.hero-section .container { position: relative; z-index: 2;}.hero-section h1 { font-size: 4rem; font-weight: 800; margin-bottom: 1.5rem; text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); background: linear-gradient(45deg, #ffffff, #e3f2fd); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.hero-section .lead { font-size: 1.4rem; margin-bottom: 2.5rem; opacity: 0.95; font-weight: 300; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.btn { border-radius: var(--border-radius); font-weight: 600; padding: 0.875rem 2rem; transition: var(--transition); border: none; text-decoration: none; display: inline-block; cursor: pointer; position: relative; overflow: hidden; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.9rem;}.btn::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s;}.btn:hover::before { left: 100%;}.btn-primary { background: var(--gradient-primary); color: var(--white-color); box-shadow: var(--box-shadow);}.btn-primary:hover { transform: translateY(-3px); box-shadow: var(--box-shadow-hover); color: var(--white-color);}.btn-light { background: var(--white-color); color: var(--primary-color); box-shadow: var(--box-shadow);}.btn-light:hover { background: var(--light-blue); transform: translateY(-3px); box-shadow: var(--box-shadow-hover); color: var(--primary-color);}.btn-outline-light { border: 2px solid var(--white-color); color: var(--white-color); background: transparent; backdrop-filter: blur(10px);}.btn-outline-light:hover { background: var(--white-color); color: var(--primary-color); transform: translateY(-3px); box-shadow: var(--box-shadow-hover);}.btn-outline-primary { border: 2px solid var(--primary-color); color: var(--primary-color); background: transparent;}.btn-outline-primary:hover { background: var(--primary-color); color: var(--white-color); transform: translateY(-3px); box-shadow: var(--box-shadow-hover);}.feature-card { background: var(--white-color); border-radius: var(--border-radius); padding: 2.5rem 2rem; margin: 1rem 0; box-shadow: var(--box-shadow); transition: var(--transition); text-align: center; height: 100%; border: 1px solid rgba(30, 136, 229, 0.1); position: relative; overflow: hidden;}.feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary);}.feature-card:hover { transform: translateY(-8px); box-shadow: var(--box-shadow-hover); border-color: rgba(30, 136, 229, 0.3);}.feature-icon { font-size: 3.5rem; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1.5rem; display: block;}.feature-card h4 { color: var(--dark-color); margin-bottom: 1rem; font-weight: 700; font-size: 1.3rem;}.feature-card p { color: var(--gray-color); line-height: 1.7; font-size: 1rem;}section { padding: 80px 0;}section:nth-child(even) { background: var(--light-color);}.footer { background: var(--gradient-primary); color: var(--white-color); padding: 4rem 0 2rem; margin-top: 0; position: relative; overflow: hidden;}.footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');}.footer h5 { color: var(--white-color); margin-bottom: 1rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}.footer p { opacity: 0.9; line-height: 1.7;}.form-container { background: var(--white-color); border-radius: var(--border-radius); padding: 3rem; box-shadow: var(--box-shadow); max-width: 500px; margin: 2rem auto; border: 1px solid rgba(30, 136, 229, 0.1); position: relative; overflow: hidden;}.form-container::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--gradient-primary);}.form-control { border-radius: var(--border-radius); border: 2px solid #e9ecef; padding: 0.875rem 1.25rem; transition: var(--transition); font-size: 1rem; background: var(--white-color);}.form-control:focus { border-color: var(--primary-color); box-shadow: 0 0 0 0.2rem rgba(30, 136, 229, 0.25); background: var(--light-blue); outline: none;}.form-control:hover { border-color: var(--accent-color);}.form-label { font-weight: 600; color: var(--dark-color); margin-bottom: 0.5rem;}.card { border-radius: var(--border-radius); border: none; box-shadow: var(--box-shadow); transition: var(--transition);}.card:hover { transform: translateY(-5px); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);}.card-header { background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); color: var(--white-color); border-radius: var(--border-radius) var(--border-radius) 0 0 !important; font-weight: 600;}.table { border-radius: var(--border-radius); overflow: hidden; box-shadow: var(--box-shadow);}.table thead th { background: var(--primary-color); color: var(--white-color); border: none; font-weight: 600;}.table tbody tr:hover { background: rgba(102, 126, 234, 0.05);}.alert { border-radius: var(--border-radius); border: none; font-weight: 500;}.alert-success { background: rgba(40, 167, 69, 0.1); color: var(--success-color);}.alert-danger { background: rgba(220, 53, 69, 0.1); color: var(--danger-color);}.alert-warning { background: rgba(255, 193, 7, 0.1); color: var(--warning-color);}.alert-info { background: rgba(23, 162, 184, 0.1); color: var(--info-color);}.badge { border-radius: 20px; padding: 0.5rem 1rem; font-weight: 500;}.badge-primary { background: var(--primary-color);}.badge-success { background: var(--success-color);}.badge-danger { background: var(--danger-color);}.badge-warning { background: var(--warning-color); color: var(--dark-color);}.spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto;}@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}@media (max-width: 768px) { .hero-section h1 { font-size: 2.8rem; } .hero-section .lead { font-size: 1.2rem; } .feature-card { margin: 1rem 0; padding: 2rem 1.5rem; } .form-container { padding: 2rem; margin: 1rem; } section { padding: 60px 0; } .navbar-nav .nav-link { margin: 0.25rem 0; padding: 0.75rem 1rem !important; }}@media (max-width: 576px) { .hero-section h1 { font-size: 2rem; } .btn { padding: 0.5rem 1rem; font-size: 0.9rem; } .form-container { margin: 1rem; padding: 1.5rem; }}.text-gradient { background: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}.bg-gradient { background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);}.shadow-custom { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);}.rounded-custom { border-radius: var(--border-radius);}.transition-custom { transition: var(--transition);}.fade-in { animation: fadeIn 0.5s ease-in;}@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); }}.slide-in-left { animation: slideInLeft 0.5s ease-out;}@keyframes slideInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); }}.slide-in-right { animation: slideInRight 0.5s ease-out;}@keyframes slideInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); }}@media print { .navbar, .footer, .btn, .no-print { display: none !important; } body { background: white !important; color: black !important; } .card { box-shadow: none !important; border: 1px solid #ddd !important; }}