:root {
     --primary: #1e3a8a;
     --accent: #06b6d4;
     --glass: rgba(255, 255, 255, 0.8);
     --bg-mesh: radial-gradient(at 0% 0%, hsla(210, 100%, 98%, 1) 0, transparent 50%),
         radial-gradient(at 100% 100%, hsla(190, 100%, 95%, 1) 0, transparent 50%);
 }

 body {
     font-family: 'Outfit', sans-serif;
     background-color: #fcfdfe;
     background-image: var(--bg-mesh);
     color: #1e293b;
     overflow-x: hidden;
     scroll-behavior: smooth;
 }

 /* Animations */
 @keyframes float {
     0% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-20px);
     }

     100% {
         transform: translateY(0px);
     }
 }

 .floating {
     animation: float 5s ease-in-out infinite;
 }

 /* Glassmorphism Refined */
 .glass-panel {
     background: var(--glass);
     backdrop-filter: blur(15px) saturate(180%);
     -webkit-backdrop-filter: blur(15px) saturate(180%);
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: 24px;
     box-shadow: 0 8px 32px rgba(31, 38, 135, 0.05);
 }

 .navbar {
     transition: all 0.3s ease;
 }

 .navbar.scrolled {
     margin-top: 10px !important;
     margin-bottom: 10px;
     background: rgba(255, 255, 255, 0.9) !important;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
 }

 .hero-section {
     padding: 120px 0 60px;
 }

 .btn-fintech {
     background: linear-gradient(135deg, var(--primary), var(--accent));
     color: white;
     border: none;
     padding: 14px 35px;
     border-radius: 14px;
     font-weight: 600;
     box-shadow: 0 10px 20px rgba(30, 58, 138, 0.15);
     transition: 0.3s;
 }

 .btn-fintech:hover {
     transform: translateY(-3px) scale(1.02);
     color: white;
     box-shadow: 0 15px 30px rgba(30, 58, 138, 0.25);
 }

 .service-card {
     border: none;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
 }

 .service-card:hover {
     transform: translateY(-12px);
     background: #fff;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05) !important;
 }

 .trust-bar {
     margin-top: -50px;
     position: relative;
     z-index: 10;
 }

 .promo-banner {
     background: var(--primary);
     background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
     color: white;
     border-radius: 40px;
     padding: 80px 60px;
     overflow: hidden;
 }

 .form-control {
     padding: 12px 20px;
     border: 1px solid #e2e8f0;
     background: rgba(255, 255, 255, 0.5);
 }

 .form-control:focus {
     background: #fff;
     box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.1);
     border-color: var(--accent);
 }

 /* Subtle hover effect for footer links */
 .hover-primary:hover {
     color: var(--primary) !important;
     padding-left: 5px;
     transition: all 0.3s ease;
 }

 /* About page */
 .glass-panel {
     background: var(--glass);
     backdrop-filter: blur(12px) saturate(180%);
     -webkit-backdrop-filter: blur(12px) saturate(180%);
     border: 1px solid rgba(255, 255, 255, 0.4);
     border-radius: 24px;
     padding: 40px;
     transition: transform 0.3s ease;
 }

 /* Hero Styling */
 .about-hero {
     padding: 160px 0 80px;
     background: radial-gradient(at 0% 0%, hsla(210, 100%, 98%, 1) 0, transparent 50%),
         radial-gradient(at 100% 100%, hsla(190, 100%, 95%, 1) 0, transparent 50%);
 }

 .section-title {
     font-weight: 700;
     letter-spacing: -1px;
     color: var(--primary);
 }

 /* Bento Grid for Mission/Vision */
 .bento-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 24px;
 }

 .mission-box {
     background: linear-gradient(135deg, var(--primary), #1e40af);
     color: white;
 }

 .vision-box {
     background: white;
     border: 1px solid #e2e8f0;
 }

 @media (max-width: 768px) {
     .bento-grid {
         grid-template-columns: 1fr;
     }
 }

 .footer-link:hover {
     color: var(--accent) !important;
     padding-left: 5px;
     transition: all 0.3s ease;
 }

 /* Service */
 /* Service Cards - Brand Integrated */
 .service-card-pro {
     background: #ffffff;
     border: 1px solid rgba(30, 64, 175, 0.1);
     border-radius: 24px;
     padding: 40px;
     transition: all 0.4s ease;
     position: relative;
     z-index: 1;
 }

 .service-card-pro:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
     border-color: var(--logo-blue);
 }

 /* Icon Design */
 .brand-icon-wrapper {
     width: 70px;
     height: 70px;
     background: linear-gradient(135deg, var(--logo-blue), var(--logo-accent));
     color: white;
     border-radius: 18px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.8rem;
     margin-bottom: 25px;
     box-shadow: 0 10px 20px rgba(30, 64, 175, 0.2);
 }

 /* Button - Logo Themed */
 .btn-brand {
     background: var(--logo-blue);
     color: white;
     border-radius: 12px;
     padding: 12px 24px;
     font-weight: 600;
     border: none;
     transition: 0.3s;
     width: 100%;
 }

 .btn-brand:hover {
     background: var(--logo-dark);
     color: white;
     box-shadow: 0 8px 15px rgba(15, 23, 42, 0.2);
 }

 /* Footer - Brand Dark */
 .footer-logo-themed {
     background: var(--logo-dark);
     color: rgba(255, 255, 255, 0.7);
     padding: 80px 0 40px;
 }

 .footer-logo-themed h6 {
     color: var(--logo-accent);
     text-transform: uppercase;
     letter-spacing: 1.5px;
     font-weight: 700;
 }

 .brand-hr {
     border-top: 1px solid rgba(255, 255, 255, 0.1);
     margin: 40px 0;
 }

 /* Contact */
 /* Glassmorphic Contact Form */
 .contact-card {
     background: #ffffff;
     border: 1px solid rgba(30, 64, 175, 0.1);
     border-radius: 32px;
     padding: 50px;
     box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05);
 }

 .form-control {
     border: 2px solid #e2e8f0;
     border-radius: 12px;
     padding: 12px 20px;
     font-size: 0.95rem;
     transition: 0.3s;
 }

 .form-control:focus {
     border-color: var(--logo-blue);
     box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.1);
 }

 /* Bento Info Tiles */
 .info-tile {
     background: white;
     border-radius: 24px;
     padding: 30px;
     border: 1px solid #e2e8f0;
     transition: 0.3s;
     height: 100%;
 }

 .info-tile:hover {
     border-color: var(--logo-blue);
     transform: translateY(-5px);
 }

 .icon-circle {
     width: 55px;
     height: 55px;
     background: rgba(30, 64, 175, 0.1);
     color: var(--logo-blue);
     border-radius: 15px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.4rem;
     margin-bottom: 20px;
 }

 /* Hero Styling */
 .contact-hero {
     padding: 180px 0 60px;
     background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent);
 }

 .btn-brand {
     background: var(--logo-blue);
     color: white;
     border-radius: 12px;
     padding: 14px 30px;
     font-weight: 700;
     border: none;
     width: 100%;
 }

 .btn-brand:hover {
     background: var(--logo-dark);
 }

 /* Footer Theming */
 .footer-logo-themed {
     background: var(--logo-dark);
     color: rgba(255, 255, 255, 0.7);
     padding: 80px 0 40px;
     border-radius: 60px 60px 0 0;
 }