:root {
         --primary: #1DAA61;
         --dark: #121212;
         --light: #f5f6fa;
         }
         body {
          font-family: 'Segoe UI', sans-serif;
          background: #f5f6fa;
          color: #333;
         }
         .navbar {
          background: white;
          box-shadow: 0 2px 10px rgba(0,0,0,0.08);
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          z-index: 999;
         }
         .hero {
          background: linear-gradient(to right, #1DAA61, #15884d);
          color: white;
          padding: 90px 0 140px;
          position: relative;
         }
         .btn-login{
            background-color: #1DAA61;
            color: #ffffff;
         }
         .btn-login:hover{
            background-color: #ffffff;
            color: #1DAA61;
            border: 1px solid #1DAA61;
         }
         .hero-wave {
          position: absolute;
          bottom: -1px;
          left: 0;
          width: 100%;
          height: 120px;
         }
         .btn-primary-custom {
         background: white;
         color: var(--primary);
         font-weight: bold;
         border-radius: 6px;
         padding: 10px 20px;
         }
         .btn-primary-custom:hover {
         border: 1px solid white;
         font-weight: bold;
         }
         .features {
         padding: 70px 0;
         }
         .feature-card {
         border-radius: 12px;
         padding: 25px;
         background: white;
         border: 1px solid #eee;
         transition: 0.3s;
         height: 100%;
         }
         .feature-card:hover {
         transform: translateY(-6px);
         box-shadow: 0 8px 25px rgba(0,0,0,0.08);
         }
         .feature-card h5 {
         color: var(--primary);
         }
         .section-title {
         font-weight: 700;
         }
         /* Pricing Section */
         .pricing {
         padding: 70px 0;
         background: #f4f6f5;
         }
         .pricing-wrapper {
         display: flex;
         gap: 25px;
         flex-wrap: wrap;
         justify-content: center;
         }
         /* Card */
         .pricing-card {
         background: white;
         border-radius: 12px;
         overflow: hidden;
         flex: 1 1 420px;
         max-width: 500px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         box-shadow: 0 10px 25px rgba(0,0,0,0.08);
         transition: 0.3s;
         }
         .pricing-card:hover {
         transform: translateY(-8px);
         }
         /* HEADER FIXED (SVG background wave) */
         .pricing-header {
         position: relative;
         overflow: hidden;
         padding: 40px 20px 60px;
         text-align: center;
         color: white;
         background: linear-gradient(135deg,#1DAA61,#66bb6a);
         }
         /* SVG wave */
         .pricing-header svg {
         position: absolute;
         bottom: -1px;
         left: 0;
         width: 100%;
         height: 120px;
         z-index: 0;
         }
         /* content above svg */
         .pricing-header .content {
         position: relative;
         z-index: 1;
         }
         /* Featured header */
         .pricing-card.featured .pricing-header {
         background: linear-gradient(135deg,#0693E3,#60c1fa);
         }
         /* Reduce spacing above price */
         .price {
         font-size: 28px;
         font-weight: bold;
         margin-top: 0;   /* ⬅️ important fix */
         line-height: 1.1;
         }
         .pricing-header .content {
         margin-top: 0;   /* ensures no extra spacing */
         padding-top: 0;
         padding-bottom: 30PX;
         }
         /* Make BOTH SVGs same height */
         .pricing-header svg {
         position: absolute;
         bottom: -1px;
         left: 0;
         width: 100%;
         height: 90px;   /* ⬅️ unified height (adjust if needed) */
         z-index: 0;
         }
         .period {
         font-size: 13px;
         display: block;
         }
         /* Body */
         .plan-detail {
         padding: 20px;
         border-bottom: 1px solid #eee;
         }
         .plan-detail ul {
         list-style: none;
         padding: 0;
         }
         .plan-detail li {
         display: flex;
         justify-content: space-between;
         padding: 5px 0;
         align-items: center;
         }
         /* Features */
         .feature-list {
         padding: 20px;
         list-style: none;
         flex-grow: 1;
         }
         .feature-list li {
         display: flex;
         justify-content: space-between;
         padding: 6px 0;
         font-size: 14px;
         }
         /* Button */
         .btn-buy {
         margin: 20px;
         padding: 12px;
         border: none;
         border-radius: 6px;
         background: var(--primary);
         color: white;
         font-weight: bold;
         }
         .pricing-card.featured .btn-buy {
         background: #0693E3;
         }
         /* Footer */
         .footer {
         background: var(--dark);
         color: white;
         text-align: center;
         padding: 20px;
         }
         .pricing-price {
         font-size: 40px !important;
         font-weight: bold;
         padding: 0;
         color: #fff;
         margin: 0 0 0.25em 0;
         line-height: 0.75;
         }
         .pricing-currency {
         font-size: 18px;
         vertical-align: top;
         }
         .pricing-period {
         font-size: 13px;
         padding: 0 0 0 0.5em;
         font-family: 'Poppins';
         font-weight: 500;
         }
         /* Eye icon */
         .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #1DAA61;
            z-index: 10;
         }
         .password-toggle:hover {
         color: #000;
         }
         .btn-trial {
         background-color: #111827;
         color: #ffffff; /* dark text for contrast */
         }
         .btn-trial:hover {
            background-color: #ffffff;
            color: #111827;
            border: 1px solid #111827;
         }
         .wave-header {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 120px;
         overflow: hidden;
         z-index: 0;
         }
         .wave-header svg {
         width: 100%;
         height: 100%;
         padding-bottom: 23px;
         margin-left: -35px;
         }
         .modal-header {
         background: #1DAA61;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;
         overflow: hidden;
         }
         .modal-title {
         position: relative;
         z-index: 2;
         }
         .btn-close {
         z-index: 2;
         filter: invert(1);
         }