* {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 body {
     font-family: 'Inter', sans-serif;
     overflow-x: hidden
 }

 #preloader {
     position: fixed;
     inset: 0;
     background: #020617;
     z-index: 99999;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: opacity .6s, visibility .6s
 }

 #preloader.hidden {
     opacity: 0;
     visibility: hidden
 }

 .loader {
     width: 60px;
     height: 60px;
     position: relative
 }

 .loader-circle {
     width: 100%;
     height: 100%;
     border: 4px solid transparent;
     border-top-color: #2563EB;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     position: absolute
 }

 .loader-circle:nth-child(2) {
     width: 40px;
     height: 40px;
     top: 10px;
     left: 10px;
     border-top-color: #06B6D4;
     animation-direction: reverse;
     animation-duration: .8s
 }

 .loader-circle:nth-child(3) {
     width: 20px;
     height: 20px;
     top: 20px;
     left: 20px;
     border-top-color: #3B82F6;
     animation-duration: .6s
 }

 @keyframes spin {
     to {
         transform: rotate(360deg)
     }
 }

 ::-webkit-scrollbar {
     width: 8px
 }

 ::-webkit-scrollbar-track {
     background: #0F172A
 }

 ::-webkit-scrollbar-thumb {
     background: #2563EB;
     border-radius: 4px
 }

 .mobile-menu {
     transform: translateX(100%);
     transition: transform .4s cubic-bezier(.4, 0, .2, 1)
 }

 .mobile-menu.active {
     transform: translateX(0)
 }

 .mobile-overlay {
     opacity: 0;
     visibility: hidden;
     transition: opacity .4s, visibility .4s
 }

 .mobile-overlay.active {
     opacity: 1;
     visibility: visible
 }

 .hamburger span {
     display: block;
     width: 24px;
     height: 2px;
     background: #fff;
     transition: all .3s;
     border-radius: 2px
 }

 .hamburger.active span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 5px)
 }

 .hamburger.active span:nth-child(2) {
     opacity: 0
 }

 .hamburger.active span:nth-child(3) {
     transform: rotate(-45deg) translate(7px, -6px)
 }

 .dropdown-menu {
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: all .3s
 }

 .dropdown:hover .dropdown-menu {
     opacity: 1;
     visibility: visible;
     transform: translateY(0)
 }

 .mobile-dropdown-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height .3s
 }

 .mobile-dropdown-content.open {
     max-height: 300px
 }

 .navbar-scrolled {
     background: rgba(2, 6, 23, .95) !important;
     backdrop-filter: blur(20px);
     box-shadow: 0 4px 30px rgba(0, 0, 0, .3)
 }

 .gradient-text {
     background: linear-gradient(135deg, #2563EB, #06B6D4);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text
 }

 .section-divider {
     width: 60px;
     height: 4px;
     background: linear-gradient(90deg, #2563EB, #06B6D4);
     border-radius: 2px
 }

 .back-to-top {
     opacity: 0;
     visibility: hidden;
     transition: all .3s
 }

 .back-to-top.visible {
     opacity: 1;
     visibility: visible
 }

 .page-header {
     background: linear-gradient(135deg, #020617 0%, #0F172A 40%, #1E293B 100%);
     position: relative;
     overflow: hidden
 }

 .page-header::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 600px;
     height: 600px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(37, 99, 235, .15), transparent 70%)
 }

 .page-header::after {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -10%;
     width: 400px;
     height: 400px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(6, 182, 212, .1), transparent 70%)
 }

 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: #2563EB;
     border-radius: 50%;
     opacity: .3;
     animation: pf 8s infinite ease-in-out
 }

 @keyframes pf {

     0%,
     100% {
         transform: translate(0, 0);
         opacity: .3
     }

     50% {
         transform: translate(-20px, -40px);
         opacity: .6
     }
 }

 /* Contact Card */
 .contact-card {
     transition: all .4s ease
 }

 .contact-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 25px 50px rgba(37, 99, 235, .12);
     border-color: rgba(37, 99, 235, .3)
 }

 .contact-card:hover .contact-icon {
     background: linear-gradient(135deg, #2563EB, #06B6D4);
     color: white;
     transform: scale(1.1)
 }

 .contact-icon {
     transition: all .4s ease
 }

 /* Form */
 .form-input {
     transition: all .3s ease
 }

 .form-input:focus {
     border-color: #2563EB;
     box-shadow: 0 0 0 3px rgba(37, 99, 235, .1)
 }

 .form-group {
     position: relative
 }

 .form-error {
     display: none;
     color: #ef4444;
     font-size: 11px;
     margin-top: 4px
 }

 .form-group.error .form-input {
     border-color: #ef4444 !important;
     box-shadow: 0 0 0 3px rgba(239, 68, 68, .1) !important
 }

 .form-group.error .form-error {
     display: block
 }

 .form-group.success .form-input {
     border-color: #22c55e !important
 }

 /* Multi-step indicator */
 .step-indicator {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px
 }

 .step-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: #334155;
     transition: all .3s
 }

 .step-dot.active {
     background: linear-gradient(135deg, #2563EB, #06B6D4);
     width: 28px;
     border-radius: 5px
 }

 .step-dot.completed {
     background: #22c55e
 }

 .form-step {
     display: none;
     animation: fadeStep .4s ease
 }

 .form-step.active {
     display: block
 }

 @keyframes fadeStep {
     from {
         opacity: 0;
         transform: translateX(20px)
     }

     to {
         opacity: 1;
         transform: translateX(0)
     }
 }

 /* File upload */
 .file-drop {
     border: 2px dashed rgba(255, 255, 255, .1);
     transition: all .3s;
     cursor: pointer
 }

 .file-drop:hover,
 .file-drop.dragover {
     border-color: #2563EB;
     background: rgba(37, 99, 235, .03)
 }

 .file-drop .file-info {
     display: none
 }

 .file-drop.has-file .file-placeholder {
     display: none
 }

 .file-drop.has-file .file-info {
     display: flex
 }

 /* FAQ */
 .faq-content {
     max-height: 0;
     overflow: hidden;
     transition: max-height .4s ease
 }

 .faq-content.open {
     max-height: 500px
 }

 .faq-btn.active .faq-icon {
     transform: rotate(180deg)
 }

 .faq-icon {
     transition: transform .3s
 }

 /* Success Modal */
 .success-modal {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .85);
     z-index: 99998;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: all .3s
 }

 .success-modal.active {
     opacity: 1;
     visibility: visible
 }

 .success-content {
     transform: scale(.8);
     transition: transform .4s cubic-bezier(.4, 0, .2, 1)
 }

 .success-modal.active .success-content {
     transform: scale(1)
 }

 @keyframes checkPop {
     0% {
         transform: scale(0) rotate(-45deg)
     }

     60% {
         transform: scale(1.2) rotate(0deg)
     }

     100% {
         transform: scale(1) rotate(0deg)
     }
 }

 .check-animate {
     animation: checkPop .6s ease
 }

 @keyframes confetti {
     0% {
         opacity: 1;
         transform: translateY(0) rotate(0)
     }

     100% {
         opacity: 0;
         transform: translateY(-60px) rotate(360deg)
     }
 }

 .confetti-particle {
     position: absolute;
     width: 6px;
     height: 6px;
     border-radius: 50%;
     animation: confetti 1s ease forwards
 }

 /* Office Card */
 .office-card {
     transition: all .3s
 }

 .office-card:hover {
     border-color: rgba(37, 99, 235, .3);
     transform: translateY(-5px)
 }

 /* Social */
 .social-link {
     transition: all .3s
 }

 .social-link:hover {
     transform: translateY(-3px)
 }

 /* Live Chat Widget */
 .chat-widget {
     position: fixed;
     bottom: 24px;
     right: 80px;
     z-index: 50
 }

 .chat-btn {
     width: 56px;
     height: 56px;
     border-radius: 50%;
     background: linear-gradient(135deg, #25D366, #128C7E);
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 20px rgba(37, 211, 102, .3);
     transition: all .3s;
     cursor: pointer
 }

 .chat-btn:hover {
     transform: scale(1.1);
     box-shadow: 0 6px 30px rgba(37, 211, 102, .4)
 }

 .chat-tooltip {
     position: absolute;
     bottom: calc(100% + 10px);
     right: 0;
     background: #0F172A;
     border: 1px solid rgba(255, 255, 255, .1);
     color: white;
     padding: 8px 14px;
     border-radius: 10px;
     font-size: 12px;
     white-space: nowrap;
     opacity: 0;
     transform: translateY(5px);
     transition: all .3s;
     pointer-events: none
 }

 .chat-btn:hover .chat-tooltip {
     opacity: 1;
     transform: translateY(0)
 }

 .chat-tooltip::after {
     content: '';
     position: absolute;
     top: 100%;
     right: 20px;
     border: 6px solid transparent;
     border-top-color: #0F172A
 }

 /* Map */
 .map-container {
     position: relative;
     overflow: hidden
 }

 .map-container::after {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom, rgba(2, 6, 23, .2), rgba(2, 6, 23, .7));
     pointer-events: none
 }

 @keyframes ctaPulse {

     0%,
     100% {
         box-shadow: 0 0 0 0 rgba(37, 99, 235, .4)
     }

     50% {
         box-shadow: 0 0 0 20px rgba(37, 99, 235, 0)
     }
 }

 .cta-pulse {
     animation: ctaPulse 2.5s infinite
 }

 /* Schedule Badge */
 @keyframes pulse-ring {
     0% {
         transform: scale(.8);
         opacity: 1
     }

     100% {
         transform: scale(2);
         opacity: 0
     }
 }

 .schedule-pulse {
     position: relative
 }

 .schedule-pulse::before {
     content: '';
     position: absolute;
     inset: -4px;
     border-radius: 50%;
     border: 2px solid #22c55e;
     animation: pulse-ring 2s infinite
 }

 html, body {
  overflow-x: hidden;
}