body {
     font-family: 'Poppins', sans-serif;
 }

 .nav-link {
     position: relative;
     display: inline-block;
     color: #4b5563;
     transition: color 0.3s ease;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -9px;
     width: 100%;
     height: 3px;
     border-radius: 999px;

     background: linear-gradient(90deg,
             #2563eb,
             #6fb0ff);

     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s ease;
 }

 .nav-link:hover {
     color: #2563eb;
 }

 .nav-link:hover::after {
     transform: scaleX(1);
 }

 .nav-link.active {
     color: #2563eb;
 }

 .nav-link.active::after {
     transform: scaleX(1);
 }

 .shine-text {
     position: relative;
     display: inline-block;
     overflow: hidden;
 }

 .shine-text::after {
     content: "";
     position: absolute;
     top: 0;
     left: -100%;
     width: 40%;
     height: 100%;

     background: linear-gradient(90deg,
             transparent,
             rgba(255, 255, 255, 0.9),
             transparent);

     transform: skewX(-20deg);
     animation: text-shine 5s ease-in-out infinite;
 }

 @keyframes text-shine {
     0% {
         left: -100%;
     }

     45%,
     100% {
         left: 150%;
     }
 }

 /* ================================
   Service Cards
================================ */

 .service-card {
     position: relative;
     display: flex;
     min-height: 290px;
     flex-direction: column;
     align-items: center;
     overflow: hidden;
     padding: 32px 28px;
     border-radius: 8px;
     background-color: #ffffff;
     text-align: center;
     transition: all 0.3s ease;

     box-shadow: 0 8px 35px rgba(15, 23, 42, 0.07);
 }

 .service-card:hover {
     transform: translateY(-7px);
     box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);
 }


 /* ================================
   Featured / Active Card
================================ */

 .service-card-active {
     box-shadow: 0 15px 45px rgba(15, 23, 42, 0.14);
 }

 .service-card-active:hover {
     transform: translateY(-9px);
 }


 /* ================================
   Icon
================================ */

 .service-icon {
     display: flex;
     width: 64px;
     height: 64px;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
     margin-bottom: 20px;
     color: #1e3a8a;
     transition: all 0.3s ease;
 }

 .service-card:hover .service-icon {
     transform: scale(1.1);
     color: #f97316;
 }


 /* ================================
   Title
================================ */

 .service-title {
     margin: 0;
     font-size: 17px;
     font-weight: 600;
     line-height: 1.5;
     color: #1e3a8a;
     transition: color 0.3s ease;
 }

 .service-card:hover .service-title {
     color: #f97316;
 }


 /* ================================
   Description
================================ */

 .service-description {
     max-width: 245px;
     margin-top: 12px;
     margin-bottom: 0;
     font-size: 13px;
     line-height: 24px;
     color: #64748b;
 }


 /* ================================
   Button
================================ */

 .service-button {
     margin-top: auto;
     padding: 8px 24px;
     border: none;
     border-radius: 6px;
     background-color: #f1f5f9;
     color: #64748b;
     font-size: 11px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .service-card:hover .service-button {
     background-color: #f97316;
     color: #ffffff;
     box-shadow: 0 4px 10px rgba(249, 115, 22, 0.25);
 }


 /* ================================
   Corner Decoration
================================ */

 .service-corner {
     position: absolute;
     width: 20px;
     height: 20px;
     pointer-events: none;
 }

 .service-corner-top {
     top: 0;
     left: 0;
     background-color: #f97316;

     clip-path: polygon(0 0, 100% 0, 0 100%);
 }

 .service-corner-bottom {
     right: 0;
     bottom: 0;
     background-color: #14b8a6;

     clip-path: polygon(100% 0, 100% 100%, 0 100%);
 }


 /* Corner hanya muncul pada featured card */

 .service-card:not(.service-card-active) .service-corner {
     display: none;
 }






 /* ================================
   Cara Kerja
================================ */

 .how-it-works-section {
     position: relative;
     overflow: hidden;
     padding: 90px 0;
     background-color: #f8fafc;
 }

 .how-it-works-container {
     width: 100%;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 24px;
 }


 /* ================================
   Section Heading
================================ */

 .how-it-works-heading {
     max-width: 650px;
     margin: 0 auto 60px;
     text-align: center;
 }

 .how-it-works-label {
     display: inline-block;
     margin-bottom: 12px;
     color: #f97316;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: 0.2em;
     text-transform: uppercase;
 }

 .how-it-works-title {
     margin: 0;
     color: #0f172a;
     font-size: 38px;
     font-weight: 700;
     line-height: 1.25;
 }

 .how-it-works-title span {
     color: #2563eb;
 }

 .how-it-works-description {
     margin: 16px auto 0;
     color: #64748b;
     font-size: 15px;
     line-height: 1.8;
 }


 /* ================================
   Steps Grid
================================ */

 .steps-grid {
     position: relative;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 24px;
 }


 /* ================================
   Step Card
================================ */

 .step-card {
     position: relative;
     display: flex;
     flex-direction: column;
     min-height: 245px;
     padding: 32px;
     border: 1px solid #e2e8f0;
     border-radius: 10px;
     background-color: #ffffff;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .step-card:hover {
     transform: translateY(-6px);
     border-color: #bfdbfe;
     box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
 }


 /* ================================
   Step Number
================================ */

 .step-number {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 58px;
     height: 58px;
     margin-bottom: 28px;
     border-radius: 50%;
     background-color: #eff6ff;
     color: #1d4ed8;
     font-size: 17px;
     font-weight: 700;
     transition: all 0.3s ease;
 }

 .step-card:hover .step-number {
     background-color: #2563eb;
     color: #ffffff;
 }


 /* ================================
   Step Content
================================ */

 .step-content h3 {
     margin: 0;
     color: #0f172a;
     font-size: 18px;
     font-weight: 600;
     transition: color 0.3s ease;
 }

 .step-content p {
     margin: 12px 0 0;
     color: #64748b;
     font-size: 14px;
     line-height: 1.8;
 }

 .step-card:hover .step-content h3 {
     color: #2563eb;
 }


 /* ================================
   Decorative Number
================================ */

 .step-card::after {
     position: absolute;
     right: 20px;
     bottom: -35px;
     color: #f1f5f9;
     font-size: 110px;
     font-weight: 800;
     line-height: 1;
     z-index: 0;
     pointer-events: none;
 }

 .step-card:nth-child(1)::after {
     content: "1";
 }

 .step-card:nth-child(2)::after {
     content: "2";
 }

 .step-card:nth-child(3)::after {
     content: "3";
 }

 .step-card>* {
     position: relative;
     z-index: 1;
 }


 /* ================================
   Responsive
================================ */

 @media (max-width: 900px) {
     .steps-grid {
         grid-template-columns: 1fr;
         max-width: 550px;
         margin: 0 auto;
     }

     .step-card {
         min-height: 210px;
     }
 }

 @media (max-width: 640px) {
     .how-it-works-section {
         padding: 70px 0;
     }

     .how-it-works-container {
         padding: 0 20px;
     }

     .how-it-works-heading {
         margin-bottom: 40px;
     }

     .how-it-works-title {
         font-size: 30px;
     }

     .step-card {
         padding: 28px 24px;
     }
 }