* { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: 'Inter', sans-serif; background: #f9fafc; color: #1a2533; scroll-behavior: smooth; }
    :root { --primary: #0a2540; --secondary: #1a2a3a; --accent: #00b4d8; --light-gray: #f1f4f8; --white: #fff; }
    h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--primary); }
    .section-padding { padding: 5rem 0; }
    .section-title { font-size: 2.4rem; font-weight: 800; margin-bottom: 0.75rem; letter-spacing: -0.02em; }
    .section-sub { color: #5a6a7a; max-width: 700px; margin: 0 auto 2.5rem; font-size: 1.1rem; }
    .btn-primary-custom { background: var(--primary); border: none; color: #fff; padding: 0.7rem 2rem; border-radius: 50px; font-weight: 600; transition: all 0.2s; }
    .btn-primary-custom:hover { background: #0b2b4a; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(10,37,64,0.15); color: #fff; }
    .btn-outline-custom { border: 2px solid var(--primary); color: var(--primary); background: transparent; padding: 0.7rem 2rem; border-radius: 50px; font-weight: 600; transition: all 0.2s; }
    .btn-outline-custom:hover { background: var(--primary); color: #fff; transform: translateY(-2px); }
    .btn-accent { background: var(--accent); border: none; color: #fff; padding: 0.7rem 2rem; border-radius: 50px; font-weight: 600; transition: all 0.2s; }
    .btn-accent:hover { background: #0096b8; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,180,216,0.3); color: #fff; }
    .shadow-card { box-shadow: 0 10px 30px rgba(0,0,0,0.04), 0 1px 6px rgba(0,0,0,0.02); transition: all 0.25s; border: none; border-radius: 20px; background: #fff; }
    .shadow-card:hover { box-shadow: 0 20px 40px rgba(0,0,0,0.07); transform: translateY(-6px); }
    .navbar { background: rgba(255,255,255,0.85); backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0,0,0,0.03); padding: 0.7rem 0; }
    .navbar-brand { font-weight: 800; font-size: 1.5rem; color: var(--primary); letter-spacing: -0.5px; }
    .navbar-brand span { color: var(--accent); }
    .nav-link { font-weight: 500; color: #1f2a3a !important; margin: 0 0.4rem; transition: 0.15s; }
    .nav-link:hover { color: var(--accent) !important; }
    .navbar .btn-accent { padding: 0.4rem 1.4rem; font-size: 0.9rem; }
    .hero { background: linear-gradient(145deg, #ffffff 0%, #f4f8fc 100%); padding: 2rem 0 4rem; }
    .hero h1 { font-size: 3.4rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--primary); }
    .hero p { color: #3d4e62; font-size: 1.15rem; max-width: 540px; }
    .trust-badge { background: rgba(10,37,64,0.03); border-radius: 60px; padding: 0.3rem 1.2rem; font-size: 0.85rem; font-weight: 500; color: var(--primary); display: inline-block; margin-right: 0.5rem; }
    .hero-image { width: 100%; max-width: 600px; border-radius: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.08); transition: transform 0.3s ease; }
    .hero-image:hover { transform: scale(1.02); }
    .about-image { width: 100%; max-width: 550px; border-radius: 30px; box-shadow: 0 20px 60px rgba(0,0,0,0.06); transition: transform 0.3s ease; }
    .about-image:hover { transform: scale(1.02); }
    .stat-card { background: #fff; border-radius: 24px; padding: 1.8rem 1rem; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.02); transition: 0.2s; border: 1px solid rgba(0,0,0,0.02); }
    .stat-card:hover { transform: scale(1.02); box-shadow: 0 12px 30px rgba(0,0,0,0.05); }
    .stat-number { font-size: 2.6rem; font-weight: 800; color: var(--primary); }
    .service-card { border: none; border-radius: 24px; padding: 2rem 1.5rem; background: #fff; height: 100%; transition: 0.2s; box-shadow: 0 6px 20px rgba(0,0,0,0.02); }
    .service-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
    .service-icon { font-size: 2.6rem; color: var(--accent); margin-bottom: 1rem; }
    .tech-badge { background: #fff; border-radius: 60px; padding: 0.5rem 1.2rem; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.02); border: 1px solid #e9edf4; display: inline-block; margin: 0.3rem; }
    .process-step { position: relative; padding: 1.2rem 0; border-bottom: 1px dashed #e2e8f0; }
    .process-step:last-child { border: none; }
    .step-num { font-weight: 800; font-size: 1.8rem; color: var(--accent); opacity: 0.4; }
    .filter-btn { background: transparent; border: none; font-weight: 600; padding: 0.4rem 1.2rem; border-radius: 40px; color: #4a5a6a; transition: 0.15s; }
    .filter-btn.active, .filter-btn:hover { background: var(--primary); color: #fff; }
    .testimonial-card { background: #fff; border-radius: 28px; padding: 2rem; box-shadow: 0 8px 24px rgba(0,0,0,0.02); }
    .carousel-control-prev-icon, .carousel-control-next-icon { background-color: var(--primary); border-radius: 50%; padding: 1.5rem; }
    .cta-section { background: linear-gradient(135deg, #0a1f2f 0%, #12344a 100%); color: #fff; border-radius: 40px; margin: 2rem 0; }
    .cta-section h2 { color: #fff; }
    .footer { background: #0d1b28; color: #cbd5e1; padding: 3rem 0 1rem; }
    .footer a { color: #b0c4d9; text-decoration: none; transition: 0.15s; }
    .footer a:hover { color: #fff; }
    .footer .social-icon { font-size: 1.2rem; margin-right: 1rem; color: #b0c4d9; }
    .footer .social-icon:hover { color: var(--accent); }
    #scrollTop { position: fixed; bottom: 2rem; right: 2rem; background: var(--primary); color: #fff; border: none; border-radius: 60px; padding: 0.7rem 1rem; font-size: 1.2rem; box-shadow: 0 6px 20px rgba(0,0,0,0.1); display: none; z-index: 999; transition: 0.2s; }
    #scrollTop:hover { background: #0b2b4a; transform: translateY(-3px); }
    .portfolio-item { transition: all 0.3s ease; }
    .portfolio-item.hidden { display: none; }
    .portfolio-img { width: 100%; height: 200px; object-fit: cover; border-radius: 16px; background: #eaf0f8; }
    .service-img { width: 100%; height: 220px; object-fit: cover; border-radius: 16px 16px 0 0; }
    .service-card-img { border-radius: 24px; overflow: hidden; background: #fff; height: 100%; transition: 0.2s; box-shadow: 0 6px 20px rgba(0,0,0,0.02); }
    .service-card-img:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }
    .service-card-img .card-body { padding: 1.5rem; }
    .hero-img-container { position: relative; display: inline-block; }
    .hero-img-container .badge-float { position: absolute; bottom: 20px; right: -10px; background: white; padding: 12px 20px; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,0.1); font-weight: 600; color: var(--primary); font-size: 0.9rem; }
    .hero-img-container .badge-float i { color: var(--accent); margin-right: 8px; }

    /* Toast Notification */
    .toast-container { position: fixed; top: 100px; right: 20px; z-index: 9999; }
    .toast-custom { background: white; padding: 20px 30px; border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); margin-bottom: 15px; min-width: 300px; animation: slideIn 0.5s ease; border-left: 5px solid var(--accent); }
    .toast-custom.success { border-left-color: #28a745; }
    .toast-custom.error { border-left-color: #dc3545; }
    .toast-custom .toast-title { font-weight: 700; font-size: 1.1rem; color: var(--primary); }
    .toast-custom .toast-body { color: #5a6a7a; margin-top: 5px; }
    .toast-custom .toast-close { float: right; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #999; }
    .toast-custom .toast-icon { font-size: 1.8rem; margin-right: 12px; }
    .toast-custom.success .toast-icon { color: #28a745; }
    .toast-custom.error .toast-icon { color: #dc3545; }

    /* Spinner */
    .spinner { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255,255,255,0.3); border-radius: 50%; border-top-color: #fff; animation: spin 0.8s ease-in-out infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
    .btn-loading { opacity: 0.7; pointer-events: none; }

    .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 0.2rem rgba(0,180,216,0.25); }
    .form-control.is-invalid { border-color: #dc3545; }
    .invalid-feedback { display: none; color: #dc3545; font-size: 0.875rem; margin-top: 0.25rem; }
    .form-control.is-invalid ~ .invalid-feedback { display: block; }

    @media (max-width: 768px) {
      .hero h1 { font-size: 2.4rem; }
      .section-title { font-size: 2rem; }
      .cta-section { border-radius: 20px; padding: 2rem 1rem; }
      .portfolio-img { height: 150px; }
      .service-img { height: 160px; }
      .hero-image { max-width: 100%; }
      .about-image { max-width: 100%; }
      .toast-custom { min-width: auto; width: 90%; }
    }