:root {
               --navy: #0d1b2a;
               --navy-light: #1b263b;
               --navy-lighter: #415a77;
               --orange: #ff6b35;
               --orange-light: #ff8c5a;
               --orange-dark: #e55a2b;
               --gold: #ffd166;
               --cream: #f8f5f2;
               --white: #ffffff;
               --gray: #8d99ae;
               --gray-light: #edf2f4;
           }
   
           * {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
               font-family: 'Montserrat', sans-serif;
           }
   
           body {
               background-color: var(--cream);
               color: var(--navy);
               line-height: 1.6;
               overflow-x: hidden;
           }
   
           .container {
               width: 100%;
               max-width: 1200px;
               margin: 0 auto;
               padding: 0 20px;
           }
   
           section {
               padding: 80px 0;
           }
   
           h1, h2, h3, h4 {
               font-weight: 700;
               line-height: 1.2;
           }
   
           h1 {
               font-size: 2.5rem;
               margin-bottom: 1.5rem;
               background: linear-gradient(135deg, var(--navy) 0%, var(--orange) 100%);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
           }
   
           h2 {
               font-size: 2rem;
               margin-bottom: 2rem;
               text-align: center;
               position: relative;
           }
   
           h2:after {
               content: '';
               position: absolute;
               bottom: -15px;
               left: 50%;
               transform: translateX(-50%);
               width: 80px;
               height: 4px;
               background: linear-gradient(90deg, var(--navy), var(--orange));
               border-radius: 2px;
           }
   
           h3 {
               font-size: 1.5rem;
               margin-bottom: 1rem;
           }
   
           p {
               margin-bottom: 1.5rem;
               font-size: 1rem;
           }
   
           .btn {
               display: inline-block;
               padding: 14px 28px;
               border-radius: 50px;
               font-weight: 600;
               text-decoration: none;
               transition: all 0.4s ease;
               cursor: pointer;
               border: none;
               font-size: 0.9rem;
               position: relative;
               overflow: hidden;
               z-index: 1;
           }
   
           .btn:before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 0%;
               height: 100%;
               background: rgba(255,255,255,0.2);
               transition: all 0.4s ease;
               z-index: -1;
           }
   
           .btn:hover:before {
               width: 100%;
           }
   
           .btn-primary {
               background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
               color: var(--white);
               box-shadow: 0 15px 25px rgba(255, 107, 53, 0.3);
           }
   
           .btn-primary:hover {
               transform: translateY(-5px);
               box-shadow: 0 15px 30px rgba(255, 107, 53, 0.4);
           }
   
           .btn-secondary {
               background: #0097a7;
               color: white;
               border: 2px solid var(--navy);
           }
   
           .btn-secondary:hover {
               background: #00bcd4 ;
               color: var(--white);
           }
   
           /* Header */
           header {
               background-color: rgba(13, 27, 42, 0.95);
               padding: 15px 0;
               position: fixed;
               width: 100%;
               top: 0;
               z-index: 1000;
               backdrop-filter: blur(10px);
               transition: all 0.3s ease;
           }
   
           .header-container {
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 0;
           }
   
           .logo {
               font-size: 1.5rem;
               display: flex;
               align-items: center;
           }
   
           .logo-image {
               width: 40px;
               height: 40px;
               background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
               border-radius: 12px;
               display: flex;
               align-items: center;
               justify-content: center;
               margin-right: 10px;
               color: var(--white);
               font-size: 1.2rem;
               transform: rotate(15deg);
               box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
           }
   
           .logo-text {
               color: var(--white);
               font-size: 1.5rem;
               font-weight: 800;
           }
   
           .logo-text span {
               background: linear-gradient(135deg, var(--orange) 0%, var(--gold) 100%);
               -webkit-background-clip: text;
               -webkit-text-fill-color: transparent;
           }
   
           .nav-links {
               display: flex;
               list-style: none;
           }
   
           .nav-links li {
               margin-left: 25px;
           }
   
           .nav-links a {
               color: var(--white);
               text-decoration: none;
               font-weight: 500;
               transition: all 0.3s;
               position: relative;
               padding: 5px 0;
               font-size: 0.9rem;
           }
   
           .nav-links a:after {
               content: '';
               position: absolute;
               width: 0;
               height: 2px;
               bottom: 0;
               left: 0;
               background: linear-gradient(90deg, var(--orange), var(--gold));
               transition: width 0.3s;
           }
   
           .nav-links a:hover:after {
               width: 100%;
           }
   
           .mobile-menu {
               display: none;
               color: var(--white);
               font-size: 1.5rem;
               cursor: pointer;
               z-index: 1001;
           }
   
           /* Mobile Nav Styles */
           @media (max-width: 768px) {
               .nav-links {
                   position: fixed;
                   top: 0;
                   right: -100%;
                   width: 80%;
                   height: 100vh;
                   background: var(--navy);
                   flex-direction: column;
                   align-items: center;
                   justify-content: center;
                   transition: all 0.5s ease;
                   box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
                   z-index: 1000;
               }
   
               .nav-links.active {
                   right: 0;
               }
   
               .nav-links li {
                   margin: 20px 0;
               }
   
               .nav-links a {
                   font-size: 1.2rem;
               }
   
               .mobile-menu {
                   display: block;
               }
   
               .mobile-menu.active i:before {
                   content: '\f00d';
               }
           }
   
           /* Hero Section */
           .hero {
               padding-top: 140px;
               background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
               color: var(--white);
               position: relative;
               overflow: hidden;
               min-height: 100vh;
               display: flex;
               align-items: center;
           }
   
           .hero:before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: url('https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80') no-repeat center center;
               background-size: cover;
               opacity: 0.2;
               z-index: 0;
           }
   
           .hero-container {
               display: flex;
               align-items: center;
               justify-content: space-between;
               position: relative;
               z-index: 1;
           }
   
           .hero-content {
               flex: 1;
               max-width: 600px;
               
           }
   
           
   
           .hero-image {
               flex: 1;
               position: relative;
               text-align: center;
           }
   
           .floating-shoes {
               position: relative;
               width: 100%;
               height: 300px;
           }
   
           .shoe {
               position: absolute;
               border-radius: 20px;
               box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
               transition: transform 0.5s ease;
           }
   
           .shoe-1 {
               width: 200px;
               height: 140px;
               background: linear-gradient(135deg, #8B4513, #A0522D);
               top: 30px;
               left: 30px;
               transform: rotate(-15deg);
               z-index: 3;
           }
   
           .shoe-2 {
               width: 180px;
               height: 130px;
               background: linear-gradient(135deg, #2F4F4F, #708090);
               top: 60px;
               right: 40px;
               transform: rotate(10deg);
               z-index: 2;
           }
   
           .shoe-3 {
               width: 160px;
               height: 120px;
               background: linear-gradient(135deg, #800020, #B22222);
               bottom: 40px;
               left: 60px;
               transform: rotate(5deg);
               z-index: 1;
           }
   
           .hero-badge {
               display: inline-block;
               background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
               color: var(--white);
               padding: 8px 20px;
               border-radius: 50px;
               font-size: 0.8rem;
               font-weight: 600;
               margin-bottom: 20px;
               box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
           }
               
            .judul-gradasi {
     font-size: 3rem; /* bisa sesuaikan */
     font-weight: 800;
     background: linear-gradient(
       90deg,
         /* biru terang (masih tone navy) */
       #ff9900 100% /* oranye terang dan kontras */
     );
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     text-fill-color: transparent;
     text-shadow: 0 0 12px rgba(255, 255, 255, 0.2); /* efek glow halus opsional */
   }
           .hero-buttons {
               display: flex;
               gap: 15px;
               margin-top: 30px;
           }
   
           /* Features Section */
           .features {
               background-color: var(--white);
               position: relative;
           }
   
           .features:before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="%230d1b2a" opacity="0.03"><polygon points="0,0 1000,50 1000,100 0,100"></polygon></svg>');
               background-size: cover;
           }
   
           .features-grid {
               display: grid;
               grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
               gap: 30px;
               position: relative;
               z-index: 1;
           }
   
           .feature-card {
               background: var(--white);
               border-radius: 20px;
               padding: 30px 20px;
               text-align: center;
               transition: all 0.4s ease;
               position: relative;
               overflow: hidden;
               box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
               border: 1px solid var(--gray-light);
           }
   
           .feature-card:before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 5px;
               background: linear-gradient(90deg, var(--orange), var(--gold));
           }
   
           .feature-card:hover {
               transform: translateY(-15px);
               box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
           }
   
           .feature-icon {
               width: 70px;
               height: 70px;
               background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
               border-radius: 50%;
               display: flex;
               align-items: center;
               justify-content: center;
               margin: 0 auto 20px;
               color: var(--white);
               font-size: 1.8rem;
               box-shadow: 0 10px 20px rgba(13, 27, 42, 0.2);
           }
   
           /* Services Section */
           .services {
               background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
               color: var(--white);
               position: relative;
               overflow: hidden;
           }
   
           .services:before {
               content: '';
               position: absolute;
               top: -50%;
               right: -20%;
               width: 500px;
               height: 500px;
               background: rgba(255, 107, 53, 0.1);
               border-radius: 50%;
               z-index: 0;
           }
   
           .services h2 {
               color: var(--white);
           }
   
           .services h2:after {
               background: linear-gradient(90deg, var(--orange), var(--gold));
           }
   
           .services-grid {
               display: grid;
               grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
               gap: 25px;
               position: relative;
               z-index: 1;
           }
   
           .service-card {
               background: rgba(255, 255, 255, 0.05);
               border-radius: 20px;
               padding: 30px 20px;
               transition: all 0.4s ease;
               position: relative;
               overflow: hidden;
               backdrop-filter: blur(10px);
               border: 1px solid rgba(255, 255, 255, 0.1);
           }
   
           .service-card:hover {
               transform: translateY(-10px);
               background: rgba(255, 255, 255, 0.1);
               box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
           }
   
           .service-card:after {
               content: '';
               position: absolute;
               bottom: 0;
               right: 0;
               width: 0;
               height: 0;
               border-bottom: 40px solid var(--orange);
               border-left: 40px solid transparent;
               transition: all 0.3s ease;
           }
   
           .service-card:hover:after {
               border-bottom: 60px solid var(--orange);
               border-left: 60px solid transparent;
           }
   
           .service-price {
               color: var(--gold);
               font-size: 1.8rem;
               font-weight: 700;
               margin: 15px 0;
           }
   
           .service-features {
               list-style: none;
               margin-top: 15px;
           }
   
           .service-features li {
               margin-bottom: 8px;
               display: flex;
               align-items: center;
               font-size: 0.9rem;
           }
   
           .service-features li:before {
               content: '✓';
               color: var(--orange);
               font-weight: bold;
               margin-right: 8px;
           }
   
           /* Process Section */
           .process {
               background-color: var(--cream);
               position: relative;
           }
   
           .process-steps {
               display: flex;
               justify-content: space-between;
               position: relative;
               margin-top: 60px;
           }
   
           .process-steps:before {
               content: '';
               position: absolute;
               top: 40px;
               left: 0;
               width: 100%;
               height: 2px;
               background: linear-gradient(90deg, var(--navy), var(--orange), var(--navy));
               z-index: 1;
           }
   
           .step {
               text-align: center;
               position: relative;
               z-index: 2;
               flex: 1;
           }
   
           .step-number {
               width: 70px;
               height: 70px;
               background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
               color: var(--white);
               border-radius: 50%;
               display: flex;
               align-items: center;
               justify-content: center;
               margin: 0 auto 15px;
               font-size: 1.3rem;
               font-weight: 700;
               box-shadow: 0 10px 20px rgba(255, 107, 53, 0.3);
               position: relative;
           }
   
           .step-number:after {
               content: '';
               position: absolute;
               top: -5px;
               left: -5px;
               right: -5px;
               bottom: -5px;
               border-radius: 50%;
               border: 2px solid var(--orange);
               animation: pulse 2s infinite;
           }
   
           @keyframes pulse {
               0% { transform: scale(1); opacity: 1; }
               100% { transform: scale(1.5); opacity: 0; }
           }
   
           /* Testimonials */
           .testimonials {
               background-color: var(--white);
               position: relative;
           }
   
           .testimonial-slider-container {
               position: relative;
               max-width: 800px;
               margin: 0 auto;
           }
   
           .testimonial-slider {
               display: flex;
               overflow-x: hidden;
               scroll-behavior: smooth;
               -webkit-overflow-scrolling: touch; /* for smooth scrolling on iOS */
               transition: transform 0.5s ease-in-out;
           }
   
           .testimonial-card {
               flex: 0 0 100%;
               width: 100%;
               background: var(--cream);
               border-radius: 20px;
               padding: 40px 30px;
               box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
               text-align: center;
               position: relative;
           }
   
           .slider-btn {
               position: absolute;
               top: 50%;
               transform: translateY(-50%);
               background-color: rgba(0, 0, 0, 0.5);
               color: white;
               border: none;
               padding: 10px;
               cursor: pointer;
               z-index: 1;
           }
   
           .prev-btn {
               left: 10px;
           }
   
           .next-btn {
               right: 10px;
           }
   
           .testimonial-card:before {
               content: '\201C';
               position: absolute;
               top: 20px;
               left: 30px;
               font-size: 80px;
               color: var(--orange);
               opacity: 0.2;
               font-family: Georgia, serif;
               z-index: 1;
           }
   
           .testimonial-avatar {
               width: 70px;
               height: 70px;
               border-radius: 50%;
               background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
               margin: 0 auto 15px;
               display: flex;
               align-items: center;
               justify-content: center;
               color: var(--white);
               font-size: 1.3rem;
               font-weight: 700;
               box-shadow: 0 10px 20px rgba(13, 27, 42, 0.2);
           }
   
           .testimonial-text {
               font-style: italic;
               margin-bottom: 15px;
               position: relative;
               font-size: 1rem;
           }
   
           .testimonial-author {
               font-weight: 700;
               color: var(--navy);
               font-size: 1.1rem;
           }
   
           .testimonial-role {
               color: var(--gray);
               font-size: 0.85rem;
           }
   
           /* CTA Section */
           .cta {
               background: linear-gradient(135deg, var(--orange) 0%, var(--orange-light) 100%);
               color: var(--white);
               text-align: center;
               border-radius: 30px;
               padding: 60px 30px;
               margin: 0 auto;
               max-width: 900px;
               box-shadow: 0 20px 40px rgba(255, 107, 53, 0.3);
               position: relative;
               overflow: hidden;
           }
   
           .cta:before {
               content: '';
               position: absolute;
               top: -50%;
               left: -50%;
               width: 200%;
               height: 200%;
               background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
               z-index: 0;
           }
   
           .cta-content {
               position: relative;
               z-index: 1;
           }
   
           .cta h2 {
               color: var(--white);
               margin-bottom: 20px;
           }
   
           .cta h2:after {
               background: var(--white);
           }
   
           .cta-buttons {
               display: flex;
               justify-content: center;
               gap: 15px;
               margin-top: 25px;
           }
   
           .btn-cta {
               background: var(--navy);
               color: var(--white);
           }
   
           .btn-cta:hover {
               background: var(--navy-light);
           }
   
           .btn-cta-outline {
               background: transparent;
               color: var(--white);
               border: 2px solid var(--white);
           }
   
           .btn-cta-outline:hover {
               background: var(--white);
               color: var(--orange);
           }
   
           /* Frame styling */
   .frame {
     background: #fff;
     padding: 40px;
     border-radius: 16px;
     border: 2px solid #f0f0f0;
     box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
     max-width: 900px;
     margin: 0 auto;
     transition: 0.3s ease;
   }
   
   .frame:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
   }
   
   .about h2 {
     text-align: center;
     margin-bottom: 20px;
     font-size: 2rem;
     color: #0a0a0a;
   }
   
   .about p {
     line-height: 1.8;
     color: #333;
     margin-bottom: 15px;
   }
   
   .about-features {
     margin-top: 20px;
   }
   
   .about-feature {
     display: flex;
     align-items: center;
     margin-bottom: 10px;
     font-size: 1.1rem;
   }
   
   .about-feature i {
     color: #0d9488;
     margin-right: 10px;
     font-size: 1.3rem;
   }
   
   
           /* FAQ Section */
           .faq {
               background-color: var(--cream);
           }
   
           .faq-container {
               max-width: 800px;
               margin: 0 auto;
           }
   
           .faq-item {
               background: var(--white);
               border-radius: 15px;
               margin-bottom: 15px;
               box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
               overflow: hidden;
           }
   
           .faq-question {
               padding: 20px;
               font-weight: 600;
               cursor: pointer;
               display: flex;
               justify-content: space-between;
               align-items: center;
               transition: all 0.3s ease;
               font-size: 1rem;
           }
   
           .faq-question:hover {
               background: var(--gray-light);
           }
   
           .faq-question i {
               transition: transform 0.3s ease;
           }
   
           .faq-answer {
               padding: 0 20px;
               max-height: 0;
               overflow: hidden;
               transition: all 0.3s ease;
           }
   
           .faq-item.active .faq-answer {
               padding: 0 20px 20px;
               max-height: 500px;
           }
   
           .faq-item.active .faq-question i {
               transform: rotate(180deg);
           }
   
           /* Gallery Section */
           .gallery {
               background-color: var(--white);
           }
   
           .gallery-grid {
               display: grid;
               grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
               gap: 15px;
               margin-top: 30px;
           }
   
           .gallery-item {
               border-radius: 15px;
               overflow: hidden;
               position: relative;
               height: 200px;
               background: var(--navy);
           }
   
           .gallery-item:before {
               content: '';
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: linear-gradient(135deg, rgba(255,107,53,0.7), rgba(13,27,42,0.7));
               opacity: 0;
               transition: opacity 0.3s ease;
               z-index: 1;
           }
   
           .gallery-item:hover:before {
               opacity: 1;
           }
   
           .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     border-radius: 15px;
     transition: transform 0.3s ease;
   }
   
   .gallery-item:hover img {
     transform: scale(1.05);
   }
   
   
           /* Stats Section */
           .stats {
               background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
               color: var(--white);
               text-align: center;
           }
   
           .stats-grid {
               display: grid;
               grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
               gap: 30px;
           }
   
           .stat-item h3 {
               font-size: 2.5rem;
               color: var(--orange);
               margin-bottom: 10px;
           }
   
           /* Footer */
           footer {
               background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%);
               color: var(--white);
               padding: 60px 0 20px;
               position: relative;
           }
   
           .footer-content {
               display: grid;
               grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
               gap: 30px;
               margin-bottom: 30px;
           }
   
           .footer-column h3 {
               color: var(--gold);
               margin-bottom: 15px;
               font-size: 1.2rem;
           }
   
           .footer-links {
               list-style: none;
           }
   
           .footer-links li {
               margin-bottom: 10px;
           }
   
           .footer-links a {
               color: var(--white);
               text-decoration: none;
               transition: color 0.3s;
               display: flex;
               align-items: center;
               font-size: 0.9rem;
           }
   
           .footer-links a i {
               margin-right: 8px;
               width: 16px;
               text-align: center;
           }
   
           .footer-links a:hover {
               color: var(--orange);
           }
   
           .social-links {
               display: flex;
               gap: 12px;
               margin-top: 15px;
           }
   
           .social-icon {
               width: 35px;
               height: 35px;
               border-radius: 50%;
               background: rgba(255, 255, 255, 0.1);
               display: flex;
               align-items: center;
               justify-content: center;
               transition: all 0.3s;
           }
   
           .social-icon:hover {
               background: var(--orange);
               transform: translateY(-5px);
           }
   
           .copyright {
               text-align: center;
               padding-top: 20px;
               border-top: 1px solid rgba(255, 255, 255, 0.1);
               color: rgba(255, 255, 255, 0.7);
               font-size: 0.85rem;
           }
   
           /* PERBAIKAN: WhatsApp Float - lebih rapi di mobile */
           .whatsapp-float {
               position: fixed;
               bottom: 85px; /* Dinaikkan sedikit agar tidak bertabrakan dengan quick-nav */
               right: 20px;
               width: 55px;
               height: 55px;
               background: #25D366;
               border-radius: 50%;
               display: flex;
               align-items: center;
               justify-content: center;
               color: white;
               font-size: 1.5rem;
               box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
               z-index: 1000;
               transition: all 0.3s ease;
               animation: pulse-whatsapp 2s infinite;
           }
   
           .whatsapp-float:hover {
               transform: scale(1.1);
           }
   
           @keyframes pulse-whatsapp {
               0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
               70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
               100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
           }
   
           /* Loading Animation */
           .loading {
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: var(--navy);
               display: flex;
               justify-content: center;
               align-items: center;
               z-index: 9999;
               transition: opacity 0.5s ease;
           }
   
           .loading.hidden {
               opacity: 0;
               pointer-events: none;
           }
   
           .spinner {
               width: 50px;
               height: 50px;
               border: 5px solid rgba(255,255,255,0.3);
               border-radius: 50%;
               border-top-color: var(--orange);
               animation: spin 1s ease-in-out infinite;
           }
   
           @keyframes spin {
               to { transform: rotate(360deg); }
           }
   
           /* NEW: Back to Top Button */
           .back-to-top {
               position: fixed;
               bottom: 150px; /* Dinaikkan agar tidak bertabrakan dengan WhatsApp */
               right: 20px;
               width: 45px;
               height: 45px;
               background: var(--orange);
               border-radius: 50%;
               display: flex;
               align-items: center;
               justify-content: center;
               color: white;
               font-size: 1.1rem;
               cursor: pointer;
               opacity: 0;
               visibility: hidden;
               transition: all 0.3s ease;
               z-index: 999;
               box-shadow: 0 5px 15px rgba(255, 107, 53, 0.4);
           }
   
           .back-to-top.show {
               opacity: 1;
               visibility: visible;
           }
   
           .back-to-top:hover {
               background: var(--orange-dark);
               transform: translateY(-3px);
           }
   
           /* PERBAIKAN: Quick Navigation - lebih rapi di mobile */
           .quick-nav {
               position: fixed;
               bottom: 20px;
               left: 50%;
               transform: translateX(-50%);
               background: var(--white);
               border-radius: 50px;
               padding: 10px 15px;
               display: flex;
               gap: 15px;
               box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
               z-index: 998;
               border: 1px solid var(--gray-light);
               max-width: 90%; /* Membatasi lebar maksimum */
           }
   
           .quick-nav-item {
               display: flex;
               flex-direction: column;
               align-items: center;
               padding: 6px 12px;
               border-radius: 25px;
               cursor: pointer;
               transition: all 0.3s ease;
               min-width: 50px;
               flex: 1; /* Membuat semua item memiliki lebar yang sama */
           }
   
           .quick-nav-item i {
               font-size: 1rem;
               color: var(--navy);
               margin-bottom: 3px;
               transition: all 0.3s ease;
           }
   
           .quick-nav-item span {
               font-size: 0.6rem;
               color: var(--navy);
               font-weight: 500;
               transition: all 0.3s ease;
               white-space: nowrap; /* Mencegah teks terpotong */
           }
   
           .quick-nav-item:hover,
           .quick-nav-item.active {
               background: var(--orange);
           }
   
           .quick-nav-item:hover i,
           .quick-nav-item:hover span,
           .quick-nav-item.active i,
           .quick-nav-item.active span {
               color: var(--white);
           }
   
           /* NEW: Scroll Progress Indicator */
           .scroll-indicator {
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 3px;
               background: transparent;
               z-index: 1001;
           }
   
           .scroll-progress {
               height: 100%;
               background: linear-gradient(90deg, var(--orange), var(--gold));
               width: 0%;
               transition: width 0.1s ease;
           }
   
           /* Responsive Design */
           @media (max-width: 992px) {
               h1 {
                   font-size: 2.2rem;
               }
               
               h2 {
                   font-size: 1.8rem;
               }
               
               .hero-container {
                   flex-direction: column;
                   text-align: center;
               }
               
               .hero-content {
                   margin-bottom: 40px;
               }
               
               .hero-buttons {
                   justify-content: center;
               }
               
               .process-steps {
                   flex-direction: column;
                   gap: 40px;
               }
               
               .process-steps:before {
                   display: none;
               }
               
               .floating-shoes {
                   height: 250px;
               }
           }
   
           @media (max-width: 768px) {
               h1 {
                   font-size: 2rem;
               }
               
               h2 {
                   font-size: 1.6rem;
               }
               
               .cta-buttons, .hero-buttons {
                   flex-direction: column;
                   align-items: center;
               }
               
               .btn {
                   width: 100%;
                   max-width: 280px;
                   text-align: center;
               }
               
               .floating-shoes {
                   height: 200px;
               }
               
               .shoe-1, .shoe-2, .shoe-3 {
                   transform: scale(0.7);
               }
   
               /* PERBAIKAN: Mobile adjustments untuk elemen floating */
               .quick-nav {
                   bottom: 15px;
                   padding: 8px 12px;
                   gap: 10px;
                   max-width: 95%; /* Lebih lebar di mobile */
               }
               
               .quick-nav-item {
                   padding: 5px 10px;
                   min-width: 45px;
               }
               
               .quick-nav-item i {
                   font-size: 0.9rem;
               }
               
               .quick-nav-item span {
                   font-size: 0.55rem;
               }
   
               .back-to-top {
                   bottom: 135px; /* Disesuaikan dengan WhatsApp yang dinaikkan */
                   right: 15px;
                   width: 40px;
                   height: 40px;
               }
   
               .whatsapp-float {
                   bottom: 80px; /* Disesuaikan dengan quick-nav yang lebih kecil */
                   right: 15px;
                   width: 50px;
                   height: 50px;
                   font-size: 1.3rem;
               }
   
               .container {
                   padding: 0 15px;
               }
   
               section {
                   padding: 60px 0;
               }
           }
   
           @media (max-width: 480px) {
               h1 {
                   font-size: 1.8rem;
               }
               
               h2 {
                   font-size: 1.4rem;
               }
               
               .container {
                   padding: 0 10px;
               }
               
               section {
                   padding: 50px 0;
               }
               
               .hero {
                   padding-top: 120px;
               }
               
               .floating-shoes {
                   height: 180px;
               }
               
               .shoe-1, .shoe-2, .shoe-3 {
                   transform: scale(0.6);
               }
               
               .features-grid, .services-grid {
                   grid-template-columns: 1fr;
               }
               
               .stats-grid {
                   grid-template-columns: repeat(2, 1fr);
               }
               
               .footer-content {
                   grid-template-columns: 1fr;
               }
   
               /* PERBAIKAN: Untuk layar sangat kecil */
               .quick-nav {
                   padding: 6px 10px;
                   gap: 8px;
               }
               
               .quick-nav-item {
                   padding: 4px 8px;
                   min-width: 40px;
               }
               
               .quick-nav-item i {
                   font-size: 0.8rem;
               }
               
               .quick-nav-item span {
                   font-size: 0.5rem;
               }
   
               .whatsapp-float {
                   bottom: 75px;
                   right: 10px;
                   width: 45px;
                   height: 45px;
                   font-size: 1.2rem;
               }
   
               .back-to-top {
                   bottom: 125px;
                   right: 10px;
                   width: 35px;
                   height: 35px;
                   font-size: 1rem;
               }
           }
   
           /* PERBAIKAN: Tambahan untuk mencegah tumpang tindih elemen floating */
           @media (max-width: 360px) {
               .quick-nav {
                   gap: 5px;
                   padding: 5px 8px;
               }
               
               .quick-nav-item {
                   min-width: 35px;
                   padding: 3px 6px;
               }
               
               .quick-nav-item span {
                   font-size: 0.45rem;
               }
   
               
   
               
           }