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

   body {
     font-family: 'Segoe UI', sans-serif;
     min-height: 100vh;
     background: #f0fdf4;
   }

   /* ── Header ── */
   header {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 50;
     width: 100%;
     padding: 16px;
   }

   nav {
     max-width: 1400px;
     margin: 0 auto;
     animation: slideDown 0.7s ease forwards;
   }

   @keyframes slideDown {
     from {
       transform: translateY(-80px);
       opacity: 0;
     }

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

   /* ── Main bar ── */
   .navbar-bar {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: space-between;
     height: 78px;
     padding: 0 32px;
     border-radius: 24px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: #ffffff;
     backdrop-filter: blur(24px);
     box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
     overflow: hidden;
   }

   /* ── Logo ── */
   .logo {
     position: relative;
     z-index: 20;
     display: flex;
     align-items: center;
     text-decoration: none;
   }

   .logo img {
     width: 200px;
     object-fit: contain;
   }

   /* Fallback text logo if image path is missing */
   .logo-text {
     font-size: 22px;
     font-weight: 700;
     color: #009241;
     letter-spacing: -0.5px;
   }

   /* ── Desktop nav links ── */
   .nav-links {
     position: relative;
     z-index: 20;
     display: flex;
     align-items: center;
     gap: 40px;
     list-style: none;
   }

   .nav-links a {
     position: relative;
     color: rgba(0, 0, 0, 0.8);
     text-decoration: none;
     font-size: 15px;
     font-weight: 500;
     transition: color 0.3s;
   }

   .nav-links a::after {
     content: '';
     position: absolute;
     left: 0;
     bottom: -8px;
     width: 0;
     height: 2px;
     background: linear-gradient(to right, #10B981, #14B8A6);
     transition: width 0.3s;
   }

   .nav-links a:hover {
     color: #000;
   }

   .nav-links a:hover::after {
     width: 100%;
   }

   /* ── CTA button ── */
   .cta-wrapper {
     position: relative;
     z-index: 20;
     display: flex;
     align-items: center;
     gap: 16px;
   }

   .btn-upload {
     position: relative;
     overflow: hidden;
     height: 50px;
     padding: 0 28px;
     border-radius: 9999px;
     background: linear-gradient(to right, #009241, #009241);
     color: #fff;
     font-weight: 600;
     font-size: 15px;
     border: none;
     cursor: pointer;
     box-shadow: 0 10px 35px rgba(16, 185, 129, 0.35);
     transition: transform 0.3s;
   }

   .btn-upload:hover {
     transform: scale(1.05);
   }

   .btn-upload .shine {
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, 0.2);
     transform: skewX(12deg);
     transition: left 0.7s;
   }

   .btn-upload:hover .shine {
     left: 120%;
   }

   .btn-upload span {
     position: relative;
     z-index: 1;
   }

   /* ── Hamburger ── */
   .hamburger {
     position: relative;
     z-index: 30;
     display: none;
     width: 46px;
     height: 46px;
     border-radius: 12px;
     border: 1px solid rgba(0, 0, 0, 1);
     background: rgba(26, 101, 94, 1);
     backdrop-filter: blur(12px);
     align-items: center;
     justify-content: center;
     cursor: pointer;
     color: #fff;
     font-size: 24px;
   }

   /* ── Mobile menu ── */
   .mobile-menu {
     max-height: 0;
     overflow: hidden;
     opacity: 0;
     transform: translateY(-30px);
     transition: max-height 0.35s ease, opacity 0.3s ease, transform 0.3s ease, margin-top 0.3s;
   }

   .mobile-menu.open {
     max-height: 500px;
     opacity: 0;
     transform: translateY(0);
     margin-top: 16px;
   }

   .mobile-menu-inner {
     border-radius: 28px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(5, 46, 43, 0.95);
     backdrop-filter: blur(24px);
     padding: 24px;
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
   }

   .mobile-nav-links {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 24px;
   }

   .mobile-nav-links a {
     color: rgba(255, 255, 255, 0.8);
     text-decoration: none;
     font-size: 18px;
     font-weight: 500;
     transition: color 0.3s;
   }

   .mobile-nav-links a:hover {
     color: #6EE7B7;
   }

   .divider {
     width: 100%;
     height: 1px;
     background: rgba(255, 255, 255, 0.1);
     margin: 24px 0;
   }

   .btn-upload-mobile {
     width: 100%;
     height: 54px;
     border-radius: 16px;
     background: linear-gradient(to right, #009241, #009241);
     color: #fff;
     font-weight: 600;
     font-size: 16px;
     border: none;
     cursor: pointer;
     box-shadow: 0 10px 35px rgba(16, 185, 129, 0.35);
   }

   /* ── Responsive ── */
   @media (max-width: 1023px) {

     .nav-links,
     .cta-wrapper {
       display: none;
     }

     .hamburger {
       display: flex;
     }
   }

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

   :root {
     --green: #009241;
     --emerald: #10B981;
     --teal: #14B8A6;
     --light: #D1FAE5;
     --mint: #A7F3D0;
     --bright: #34D399;
     --dark: #031B19;
   }

   body {
     font-family: 'Manrope', sans-serif;
     background: var(--dark);
   }

   /* ── HERO SECTION ── */
   .hero {
     position: relative;
     width: 100%;
     min-height: 100vh;
     overflow: hidden;
     background-image: url('./NewImage/genericbgimage.png');
     background-size: cover;
     background-position: center;
     padding-top: 120px;
   }

   /* Overlays */
   .overlay-dark {
     position: absolute;
     inset: 0;
     background: rgba(5, 46, 43, 0);
   }

   .overlay-gradient {
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, rgba(6, 78, 73, .90), rgba(6, 95, 91, .70), rgba(6, 78, 73, .40));
   }

   .glow-tl {
     position: absolute;
     top: -120px;
     left: -120px;
     width: 320px;
     height: 320px;
     background: rgba(16, 185, 129, .20);
     filter: blur(120px);
     border-radius: 50%;
   }

   .glow-br {
     position: absolute;
     bottom: -150px;
     right: -120px;
     width: 350px;
     height: 350px;
     background: rgba(20, 184, 166, .20);
     filter: blur(140px);
     border-radius: 50%;
   }

   .grid-overlay {
     position: absolute;
     inset: 0;
     opacity: .06;
     background-image: linear-gradient(to right, #fff 1px, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px);
     background-size: 70px 70px;
   }

   /* Container */
   .container {
     position: relative;
     z-index: 20;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 48px;
     min-height: 100vh;
     display: flex;
     align-items: center;
   }

   .grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 64px;
     align-items: center;
     width: 100%;
   }

   /* ── LEFT SIDE ── */
   .badge {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 12px 20px;
     border-radius: 9999px;
     border: 1px solid rgba(255, 255, 255, .10);
     background: rgba(255, 255, 255, .10);
     backdrop-filter: blur(16px);
     box-shadow: 0 0 40px rgba(16, 185, 129, .15);
     margin-bottom: 32px;
     opacity: 1;
     animation: fadeUp .6s ease forwards;
   }

   .badge-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: var(--bright);
     animation: pulse 1.5s ease-in-out infinite;
   }

   .badge-text {
     color: var(--mint);
     font-size: 14px;
     font-weight: 500;
     letter-spacing: .05em;
   }

   h1 {
     color: #fff;
     font-size: clamp(40px, 6vw, 78px);
     line-height: 1.05;
     font-weight: 900;
     letter-spacing: -2px;
     opacity: 1;
     animation: fadeUp .9s ease .1s forwards;
   }

   .gradient-text {
     background: linear-gradient(to right, var(--green), var(--green));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }

   .description {
     color: rgba(209, 250, 229, .80);
     font-size: 18px;
     line-height: 1.8;
     max-width: 620px;
     margin-top: 32px;
     opacity: 1;
     animation: fadeUp 1s ease .2s forwards;
   }

   .btns {
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     margin-top: 40px;
     opacity: 1;
     animation: fadeUp 1s ease .4s forwards;
   }

   .btn-primary {
     height: 62px;
     padding: 0 32px;
     border-radius: 16px;
     background: linear-gradient(to right, var(--green), var(--green));
     color: #fff;
     font-weight: 600;
     font-size: 18px;
     border: none;
     cursor: pointer;
     box-shadow: 0 15px 50px rgba(16, 185, 129, .35);
     display: inline-flex;
     align-items: center;
     gap: 12px;
     transition: transform .3s;
     font-family: 'Manrope', sans-serif;
   }

   .btn-primary:hover {
     transform: scale(1.05);
   }

   .btn-primary svg {
     transition: transform .3s;
   }

   .btn-primary:hover svg {
     transform: translateX(4px);
   }

   .btn-secondary {
     height: 62px;
     padding: 0 32px;
     border-radius: 16px;
     border: 1px solid rgba(255, 255, 255, .15);
     background: rgba(255, 255, 255, .10);
     backdrop-filter: blur(16px);
     color: #fff;
     font-weight: 500;
     font-size: 18px;
     cursor: pointer;
     transition: background .3s;
     font-family: 'Manrope', sans-serif;
   }

   .btn-secondary:hover {
     background: rgba(255, 255, 255, .15);
   }

   .stats {
     display: flex;
     flex-wrap: wrap;
     gap: 32px;
     margin-top: 56px;
     opacity: 1;
     animation: fadeIn 1s ease .8s forwards;
   }

   .stat {
     display: flex;
     align-items: center;
     gap: 12px;
   }

   .stat-icon {
     color: var(--green);
     font-size: 20px;
     flex-shrink: 0;
   }

   .stat h4 {
     color: #fff;
     font-weight: 700;
     font-size: 15px;
   }

   .stat p {
     color: rgba(209, 250, 229, .60);
     font-size: 13px;
   }

   /* ── RIGHT SIDE ── */
   .right-side {
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 1;
     animation: scaleIn 1s ease .1s forwards;
   }

   .ring-wrap {
     position: relative;
     width: 520px;
     height: 520px;
   }

   .ring-ping {
     position: absolute;
     inset: 0;
     border-radius: 50%;
     border: 1px solid rgba(52, 211, 153, .20);
     animation: ping 2s ease-in-out infinite;
   }

   .ring-static {
     position: absolute;
     inset: 40px;
     border-radius: 50%;
     border: 1px solid rgba(52, 211, 153, .10);
   }

   .glass-card {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 360px;
     transform: translate(-50%, -50%);
     border-radius: 40px;
     border: 1px solid rgba(255, 255, 255, .10);
     background: rgba(255, 255, 255, .10);
     backdrop-filter: blur(24px);
     padding: 32px;
     box-shadow: 0 25px 80px rgba(0, 0, 0, .35);
     animation: float 5s ease-in-out infinite;
   }

   .search-bar {
     background: #fff;
     border-radius: 16px;
     height: 70px;
     display: flex;
     align-items: center;
     padding: 0 24px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, .10);
     gap: 16px;
   }

   .search-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: var(--emerald);
     animation: pulse 1.5s ease-in-out infinite;
     flex-shrink: 0;
   }

   .search-input {
     flex: 1;
     border: 1px solid #e5e7eb;
     border-radius: 8px;
     padding: 8px 16px;
     font-size: 14px;
     color: #6b7280;
     outline: none;
     font-family: 'Manrope', sans-serif;
     transition: box-shadow .2s, border-color .2s;
   }

   .search-input:focus {
     box-shadow: 0 0 0 3px rgba(59, 130, 246, .25);
     border-color: #3b82f6;
   }

   .mini-cards {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
     margin-top: 32px;
   }

   .mini-card-dark {
     background: rgba(255, 255, 255, .10);
     border: 1px solid rgba(255, 255, 255, .10);
     border-radius: 16px;
     padding: 20px;
     backdrop-filter: blur(16px);
   }

   .mini-card-dark h4 {
     color: #6EE7B7;
     font-size: 24px;
     font-weight: 700;
   }

   .mini-card-dark p {
     color: rgba(255, 255, 255, .70);
     font-size: 13px;
     margin-top: 4px;
   }

   .mini-card-green {
     background: linear-gradient(to right, var(--green), var(--green));
     border-radius: 16px;
     padding: 20px;
   }

   .mini-card-green h4 {
     color: #fff;
     font-size: 24px;
     font-weight: 700;
   }

   .mini-card-green p {
     color: rgba(255, 255, 255, .80);
     font-size: 13px;
     margin-top: 4px;
   }

   .tags {
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 32px;
   }

   .tag {
     padding: 8px 16px;
     border-radius: 9999px;
     background: rgba(255, 255, 255, .10);
     border: 1px solid rgba(255, 255, 255, .10);
     color: var(--light);
     font-size: 14px;
     backdrop-filter: blur(16px);
     cursor: pointer;
     transition: transform .2s, background .2s;
   }

   .tag:hover {
     transform: scale(1.05);
     background: rgba(255, 255, 255, .18);
   }

   /* Bottom Fade */
   .bottom-fade {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 180px;
     background: linear-gradient(to top, var(--dark), transparent);
   }

   /* ── ANIMATIONS ── */
   @keyframes fadeUp {
     from {
       opacity: 1;
       transform: translateY(30px)
     }

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

   @keyframes fadeIn {
     from {
       opacity: 1
     }

     to {
       opacity: 1
     }
   }

   @keyframes scaleIn {
     from {
       opacity: 1;
       transform: scale(.8) translateX(80px)
     }

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

   @keyframes float {

     0%,
     100% {
       transform: translate(-50%, -50%) translateY(0)
     }

     50% {
       transform: translate(-50%, -50%) translateY(-15px)
     }
   }

   @keyframes ping {

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

     50% {
       transform: scale(1.06);
       opacity: .8
     }
   }

   @keyframes pulse {

     0%,
     100% {
       opacity: 1
     }

     50% {
       opacity: .3
     }
   }

   /* ── RESPONSIVE ── */
   @media(max-width:1024px) {
     .grid {
       grid-template-columns: 1fr;
       gap: 48px;
     }

     .right-side {
       display: none;
     }

     .container {
       padding: 0 24px;
     }
   }

   @media(max-width:640px) {
     h1 {
       font-size: 38px;
       letter-spacing: -1px;
     }

     .description {
       font-size: 16px;
     }

     .btn-primary,
     .btn-secondary {
       font-size: 16px;
       height: 54px;
     }

     .stats {
       gap: 20px;
     }
   }

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

   :root {
     --green: #009241;
     --emerald: #10B981;
     --teal: #14B8A6;
     --dark: #031B19;
     --bg: #F8FFFD;
     --white: #ffffff;
     --gray: #4B5563;
   }

   body {
     font-family: 'DM Sans', sans-serif;
     background: var(--bg);
   }

   /* ── SECTION ── */
   .section {
     position: relative;
     overflow: hidden;
     padding: 96px 0;
   }

   /* blobs */
   .blob-tl,
   .blob-br {
     position: absolute;
     border-radius: 50%;
     filter: blur(120px);
     pointer-events: none;
   }

   .blob-tl {
     top: -120px;
     left: -120px;
     width: 300px;
     height: 300px;
     background: rgba(16, 185, 129, .10);
   }

   .blob-br {
     bottom: -150px;
     right: -120px;
     width: 350px;
     height: 350px;
     background: rgba(20, 184, 166, .10);
     filter: blur(140px);
   }

   /* grid pattern */
   .grid-pattern {
     position: absolute;
     inset: 0;
     opacity: .04;
     background-image:
       linear-gradient(to right, #0f172a 1px, transparent 1px),
       linear-gradient(to bottom, #0f172a 1px, transparent 1px);
     background-size: 70px 70px;
     pointer-events: none;
   }

   .container {
     position: relative;
     z-index: 10;
     max-width: 1280px;
     margin: 0 auto;
     padding: 0 24px;
   }

   /* ── HEADER ── */
   .header {
     max-width: 850px;
     margin: 0 auto;
     text-align: center;
   }

   .badge {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 12px 20px;
     border-radius: 999px;
     border: 1px solid rgba(16, 185, 129, .20);
     background: rgba(16, 185, 129, .05);
     backdrop-filter: blur(20px);
     margin-bottom: 32px;
   }

   .badge-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: #34D399;
     animation: pulse 1.8s ease-in-out infinite;
   }

   @keyframes pulse {

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

     50% {
       opacity: .5;
       transform: scale(1.25);
     }
   }

   .badge span {
     color: #0D9488;
     font-size: 14px;
     font-weight: 600;
     letter-spacing: .05em;
     font-family: 'DM Sans', sans-serif;
   }

   .heading {
     font-family: 'Syne', sans-serif;
     font-size: clamp(40px, 6vw, 72px);
     font-weight: 900;
     line-height: 1.05;
     letter-spacing: -3px;
     color: var(--dark);
   }

   .heading .gradient-text {
     background: linear-gradient(90deg, var(--green), var(--green));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }

   .subtitle {
     color: var(--gray);
     font-size: 18px;
     line-height: 2;
     margin-top: 32px;
     max-width: 760px;
     margin-left: auto;
     margin-right: auto;
   }

   /* ── GRID ── */
   .cards-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
     gap: 32px;
     margin-top: 80px;
   }

   /* ── CARD ── */
   .card {
     position: relative;
     overflow: hidden;
     border-radius: 32px;
     border: 1px solid var(--white);
     background: rgba(255, 255, 255, .80);
     backdrop-filter: blur(24px);
     padding: 32px;
     box-shadow: 0 15px 60px rgba(0, 0, 0, .06);
     transition: transform .4s ease, box-shadow .4s ease;
     cursor: default;
   }

   .card:hover {
     /* transform: translateY(1px); */
     box-shadow: 0 25px 80px rgba(16, 185, 129, .18);
   }

   /* hover overlay */
   .card-overlay {
     position: absolute;
     inset: 0;
     opacity: 0;
     background: linear-gradient(135deg, rgba(16, 185, 129, .10), transparent, rgba(20, 184, 166, .10));
     transition: opacity .5s ease;
     pointer-events: none;
   }

   .card:hover .card-overlay {
     opacity: 1;
   }

   /* ghost number */
   .card-number {
     position: absolute;
     top: 32px;
     right: 32px;
     font-family: 'Syne', sans-serif;
     font-size: 70px;
     font-weight: 900;
     color: rgba(16, 185, 129, .05);
     line-height: 1;
     user-select: none;
   }

   .card-icon {
     position: relative;
     z-index: 10;
     width: 74px;
     height: 74px;
     border-radius: 16px;
     background: linear-gradient(135deg, var(--green), var(--green));
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 15px 40px rgba(16, 185, 129, .35);
   }

   .card-icon svg {
     width: 30px;
     height: 30px;
     stroke: white;
     fill: none;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
   }

   .card h3 {
     position: relative;
     z-index: 10;
     font-family: 'Syne', sans-serif;
     font-size: 22px;
     font-weight: 700;
     color: var(--dark);
     margin-top: 32px;
   }

   .card p {
     position: relative;
     z-index: 10;
     color: var(--gray);
     line-height: 2;
     margin-top: 20px;
   }

   .card-line {
     position: relative;
     z-index: 10;
     width: 70px;
     height: 4px;
     border-radius: 999px;
     background: linear-gradient(90deg, var(--green), var(--green));
     margin-top: 32px;
   }

   /* ── CTA BANNER ── */
   .cta-banner {
     position: relative;
     overflow: hidden;
     border-radius: 40px;
     background: linear-gradient(135deg, var(--green), var(--green));
     padding: 64px;
     margin-top: 96px;
     box-shadow: 0 25px 80px rgba(16, 185, 129, .25);
   }

   .cta-grid-pattern {
     position: absolute;
     inset: 0;
     opacity: .10;
     background-image:
       linear-gradient(to right, #ffffff 1px, transparent 1px),
       linear-gradient(to bottom, #ffffff 1px, transparent 1px);
     background-size: 60px 60px;
     pointer-events: none;
   }

   .cta-inner {
     position: relative;
     z-index: 10;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
   }

   .cta-text {
     max-width: 700px;
   }

   .cta-text h2 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(32px, 4vw, 54px);
     font-weight: 900;
     color: white;
     line-height: 1.1;
     letter-spacing: -2px;
   }

   .cta-text p {
     color: rgba(255, 255, 255, .80);
     font-size: 18px;
     line-height: 2;
     margin-top: 24px;
   }

   .cta-btn {
     position: relative;
     overflow: hidden;
     height: 64px;
     padding: 0 40px;
     border-radius: 16px;
     border: none;
     background: white;
     color: var(--dark);
     font-family: 'Syne', sans-serif;
     font-weight: 700;
     font-size: 18px;
     cursor: pointer;
     box-shadow: 0 10px 40px rgba(0, 0, 0, .20);
     transition: transform .3s ease;
     white-space: nowrap;
   }

   .cta-btn:hover {
     transform: scale(1.05);
   }

   .cta-btn::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: rgba(16, 185, 129, .20);
     transform: skewX(12deg);
     transition: left .7s ease;
   }

   .cta-btn:hover::after {
     left: 120%;
   }

   .cta-btn span {
     position: relative;
     z-index: 10;
   }

   /* ── ANIMATE ON SCROLL ── */
   .fade-up {
     opacity: 1;
     transform: translateY(50px);
     transition: opacity .7s ease, transform .7s ease;
   }

   .fade-up.visible {
     opacity: 1;
     transform: translateY(0);
   }

   @media (max-width: 640px) {
     .cta-banner {
       padding: 36px 24px;
     }

     .heading {
       letter-spacing: -1px;
     }
   }

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

   :root {
     --green: #009241;
     --green-light: #10B981;
     --teal: #0D9488;
     --teal-light: #14B8A6;
     --pulse: #34D399;
     --bg-from: #ECFDF5;
     --bg-mid: #F8FFFD;
     --bg-to: #D1FAE5;
     --text-dark: #031B19;
     --text-body: #4B5563;
     --text-muted: #6B7280;
   }

   body {
     font-family: 'Inter', sans-serif;
     background: #fff;
   }

   /* ── Section ── */
   .section {
     position: relative;
     overflow: hidden;
     padding: 96px 0;
     background: linear-gradient(135deg, var(--bg-from), var(--bg-mid), var(--bg-to));
   }

   /* Mesh gradient overlay */
   .section::before {
     content: '';
     position: absolute;
     inset: 0;
     background:
       radial-gradient(circle at top right, rgba(16, 185, 129, .12), transparent 30%),
       radial-gradient(circle at bottom left, rgba(20, 184, 166, .12), transparent 30%);
     pointer-events: none;
   }

   /* Grid overlay */
   .section::after {
     content: '';
     position: absolute;
     inset: 0;
     opacity: .04;
     background-image:
       linear-gradient(to right, #0f172a 1px, transparent 1px),
       linear-gradient(to bottom, #0f172a 1px, transparent 1px);
     background-size: 70px 70px;
     pointer-events: none;
   }

   .container {
     position: relative;
     z-index: 10;
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 48px;
   }

   /* ── Badge ── */
   .badges {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 12px 20px;
     border-radius: 9999px;
     border: 1px solid rgba(16, 185, 129, .2);
     background: rgba(255, 255, 255, .7);
     backdrop-filter: blur(20px);
     box-shadow: 0 4px 24px rgba(0, 0, 0, .06);
     margin-bottom: 32px;
     opacity: 1;
     transform: translateY(30px);
     animation: fadeUp .7s ease forwards;
   }

   .badge-dot {
     width: 12px;
     height: 12px;
     border-radius: 50%;
     background: var(--pulse);
     animation: pulse 2s ease-in-out infinite;
   }

   @keyframes pulse {

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

     50% {
       opacity: .6;
       transform: scale(1.2);
     }
   }

   .badge span {
     color: var(--teal);
     font-size: 13px;
     font-weight: 600;
     letter-spacing: .05em;
   }

   /* ── Heading ── */
   .heading-block {
     max-width: 850px;
   }

   h2.main-title {
     font-family: 'Syne', sans-serif;
     font-size: clamp(40px, 6vw, 70px);
     line-height: 1.05;
     font-weight: 900;
     letter-spacing: -3px;
     color: var(--text-dark);
     opacity: 1;
     transform: translateY(40px);
     animation: fadeUp .8s .1s ease forwards;
   }

   h2.main-title .accent {
     background: linear-gradient(90deg, var(--green), var(--green));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
   }

   .subtitle {
     color: var(--text-body);
     font-size: 18px;
     line-height: 1.8;
     margin-top: 32px;
     max-width: 700px;
     opacity: 1;
     transform: translateY(30px);
     animation: fadeUp .9s .2s ease forwards;
   }

   /* ── Grid ── */
   .cards-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 32px;
     margin-top: 80px;
   }

   .cards-grids {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 32px;
     margin-top: 80px;
   }

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

     .container {
       padding: 0 24px;
     }

     h2.main-title {
       letter-spacing: -1.5px;
     }
   }

   /* ── Card ── */
   .card {
     position: relative;
     overflow: hidden;
     border-radius: 36px;
     border: 1px solid rgba(255, 255, 255, .5);
     background: rgba(255, 255, 255, .7);
     backdrop-filter: blur(20px);
     padding: 40px;
     box-shadow: 0 20px 70px rgba(16, 185, 129, .08);
     transition: transform .4s ease, box-shadow .4s ease;
     opacity: 1;
     transform: translateY(70px);
     cursor: default;
   }

   .card.visible {
     animation: fadeUp .7s ease forwards;
   }

   .card:hover {
     /* transform: translateY(1px); */
     box-shadow: 0 30px 90px rgba(16, 185, 129, .18);
   }

   /* Card glow on hover */
   .card-glow {
     position: absolute;
     inset: 0;
     opacity: 1;
     background: linear-gradient(135deg, rgba(16, 185, 129, .1), transparent, rgba(20, 184, 166, .1));
     transition: opacity .5s ease;
     pointer-events: none;
   }

   .card:hover .card-glow {
     opacity: 1;
   }

   /* Animated border */
   .card-border {
     position: absolute;
     inset: 0;
     border-radius: 36px;
     border: 1px solid transparent;
     transition: border-color .5s ease;
     pointer-events: none;
   }

   .card:hover .card-border {
     border-color: rgba(16, 185, 129, .2);
   }

   /* ── Card Top ── */
   .card-top {
     position: relative;
     z-index: 10;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: 24px;
   }

   .tag {
     display: inline-flex;
     padding: 8px 16px;
     border-radius: 9999px;
     background: var(--green);
     color: #fff;
     font-size: 13px;
     font-weight: 600;
     box-shadow: 0 4px 16px rgba(0, 146, 65, .3);
   }

   .card-title {
     font-family: 'Syne', sans-serif;
     font-size: 28px;
     font-weight: 900;
     color: var(--text-dark);
     line-height: 1.2;
     margin-top: 24px;
   }

   .price-block {
     text-align: right;
     flex-shrink: 0;
   }

   .price {
     font-family: 'Syne', sans-serif;
     font-size: 40px;
     font-weight: 900;
     color: var(--text-dark);
     line-height: 1;
   }

   .price-label {
     font-size: 13px;
     color: var(--text-muted);
     margin-top: 4px;
   }

   /* ── Description ── */
   .card-desc {
     position: relative;
     z-index: 10;
     color: var(--text-body);
     line-height: 1.8;
     margin-top: 28px;
     max-width: 520px;
   }

   /* ── Features ── */
   .features {
     position: relative;
     z-index: 10;
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
     margin-top: 28px;
   }

   .feature-pill {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 16px;
     border-radius: 16px;
     background: rgba(255, 255, 255, .7);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(16, 185, 129, .1);
     box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
   }

   .feature-pill svg {
     width: 16px;
     height: 16px;
     color: var(--green-light);
     flex-shrink: 0;
   }

   .feature-pill span {
     font-size: 13px;
     font-weight: 500;
     color: var(--text-dark);
   }

   /* ── Button ── */
   .btn-wrap {
     position: relative;
     z-index: 10;
     margin-top: 36px;
   }

   .btn-book {
     position: relative;
     display: inline-flex;
     align-items: center;
     gap: 12px;
     height: 58px;
     padding: 0 32px;
     border-radius: 16px;
     background: var(--green);
     color: #fff;
     font-size: 15px;
     font-weight: 600;
     border: none;
     cursor: pointer;
     box-shadow: 0 15px 50px rgba(16, 185, 129, .25);
     transition: transform .3s ease, box-shadow .3s ease;
     overflow: hidden;
   }

   .btn-book:hover {
     transform: scale(1.05);
     box-shadow: 0 20px 60px rgba(16, 185, 129, .35);
   }

   .btn-book svg {
     width: 18px;
     height: 18px;
     transition: transform .3s ease;
   }

   .btn-book:hover svg {
     transform: translateX(4px);
   }

   /* Shine effect */
   .btn-book::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: rgba(255, 255, 255, .2);
     transform: skewX(12deg);
     transition: left .7s ease;
   }

   .btn-book:hover::after {
     left: 120%;
   }

   /* ── Large BG Number ── */
   .card-number {
     position: absolute;
     bottom: -25px;
     right: 24px;
     font-family: 'Syne', sans-serif;
     font-size: 120px;
     font-weight: 900;
     color: rgba(16, 185, 129, .05);
     line-height: 1;
     pointer-events: none;
     user-select: none;
   }

   /* ── Fade Up keyframe ── */
   @keyframes fadeUp {
     to {
       opacity: 1;
       transform: translateY(0);
     }
   }

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

   body {
     background: #002a0d;
   }

   /* ── Footer ─────────────────────────────────────── */
   #FooterSection {
     background: #002a0d;
     color: #fff;
     font-family: 'Segoe UI', sans-serif;
     font-weight: 700;
     padding: 80px 24px 40px;
     position: relative;
     overflow: hidden;
   }

   /* Background glows */
   #FooterSection::before,
   #FooterSection::after {
     content: '';
     position: absolute;
     width: 300px;
     height: 300px;
     background: rgba(193, 154, 107, .10);
     border-radius: 50%;
     filter: blur(60px);
     pointer-events: none;
   }

   #FooterSection::before {
     top: 0;
     left: 0;
   }

   #FooterSection::after {
     bottom: 0;
     right: 0;
   }

   .footer-inner {
     position: relative;
     z-index: 10;
     max-width: 1280px;
     margin: 0 auto;
   }

   /* ── Grid ───────────────────────────────────────── */
   .footer-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 40px;
   }

   @media (max-width: 900px) {
     .footer-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }

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

   /* ── Brand col ──────────────────────────────────── */
   .col-brand {
     padding: 20px;
   }

   .col-brand img {
     width: 250px;
     max-width: 100%;
     display: block;
   }

   /* ── Column headings ────────────────────────────── */
   .footer-col h3 {
     font-size: 1rem;
     font-weight: 600;
     margin-bottom: 16px;
     color: #fff;
   }

   /* ── Lists ──────────────────────────────────────── */
   .footer-col ul {
     list-style: none;
   }

   .footer-col ul li {
     font-size: .875rem;
     font-weight: 400;
     color: #9ca3af;
     margin-bottom: 8px;
     cursor: pointer;
     transition: color .2s;
   }

   .footer-col ul li:hover {
     color: #024700;
   }

   /* ── Contact text ───────────────────────────────── */
   .footer-col p {
     font-size: .875rem;
     font-weight: 400;
     color: #9ca3af;
     margin-top: 8px;
     line-height: 1.5;
   }

   .footer-col p:first-of-type {
     margin-top: 0;
   }

   /* ── Social icons ───────────────────────────────── */
   .social-row {
     display: flex;
     gap: 16px;
     margin-top: 20px;
   }

   .social-row a {
     width: 40px;
     height: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
     background: rgba(255, 255, 255, .10);
     color: #fff;
     font-size: .9rem;
     text-decoration: none;
     transition: background .25s;
   }

   .social-row a:hover {
     background: #024700;
   }

   /* ── Divider ────────────────────────────────────── */
   .footer-divider {
     border: none;
     border-top: 1px solid rgba(255, 255, 255, .10);
     margin: 40px 0;
   }

   /* ── Copyright ──────────────────────────────────── */
   .footer-copy {
     text-align: center;
     font-size: .875rem;
     font-weight: 400;
     color: #6b7280;
   }

   .footer-copy a {
     color: inherit;
     text-decoration: none;
   }

   .footer-copy a:hover {
     text-decoration: underline;
   }

   /* ── Scroll-in animation ────────────────────────── */
   .anim {
     opacity: 1;
     transform: translateY(40px);
     transition: opacity .6s ease, transform .6s ease;
   }

   .anim.visible {
     opacity: 1;
     transform: translateY(0);
   }

   .anim:nth-child(1) {
     transition-delay: .0s;
   }

   .anim:nth-child(2) {
     transition-delay: .12s;
   }

   .anim:nth-child(3) {
     transition-delay: .24s;
   }

   .anim:nth-child(4) {
     transition-delay: .36s;
   }