/* ===== YOUR EXACT CSS – FULLY PRESERVED ===== */
 :root {

     /* Primary Brand Color (Shopify Inspired Green) */
     --cue-green: #95BF47;
     /* Shopify primary green */
     --border-color: #95BF4733;
     /* Light transparent green */
     --cue-dark: #5E8E3E;
     /* Deep Shopify green */

     /* Text Colors */
     --text-main: #212B36;
     /* Shopify dark text tone */
     --text-light: #637381;
     /* Shopify muted gray */

     /* Backgrounds */
     --bg-light: #F4F6F8;
     /* Shopify dashboard light gray */
     --white: #ffffff;

     /* Glass effect */
     --glass: rgba(255, 255, 255, 0.85);

     /* Supporting Shades */
     --primary-green: #95BF47;
     --light-green: #A6CE39;
     --dark-green: #5E8E3E;

 }



 body {
     font-family: 'Inter', sans-serif;
     color: var(--text-main);
     background-color: var(--white);
     overflow-x: hidden;
     scroll-behavior: smooth;
 }

 h1,
 h2,
 h3,
 .nav-link {
     font-family: 'Plus Jakarta Sans', sans-serif;
     font-weight: 700;
 }

 /* --- Navbar --- */
 .navbar {
     backdrop-filter: blur(10px);
     background: var(--glass);
     border-bottom: 1px solid rgba(226, 232, 240, 0.8);
     padding: 15px 0;
     transition: all 0.3s;
 }

 .header-logo-img {
     height: 60px;
     width: auto;
 }

 .nav-link {
     color: var(--text-main);
     font-size: 15px;
     margin: 0 15px;
     transition: color 0.2s;
     position: relative;
 }

 .nav-link:hover {
     color: var(--cue-green);
 }

 /* Animated underline */
 .nav-link::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 50%;
     transform: translateX(-50%) scaleX(0);
     width: 80%;
     height: 2px;
     background: var(--cue-green);
     transition: transform 0.25s ease-out;
     transform-origin: center;
 }

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

 /* --- Buttons --- */
 .btn-cue {
     background-color: var(--cue-green);
     color: white;
     font-weight: 600;
     padding: 12px 28px;
     border-radius: 10px;
     border: none;
     transition: all 0.3s;
     box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.2);
     position: relative;
     overflow: hidden;
 }

 .btn-cue:hover {
     background-color: var(--cue-dark);
     transform: translateY(-3px);
     color: white;
     box-shadow: 0 20px 25px -5px rgba(16, 185, 129, 0.3);
 }

 .btn-outline-cue {
     border: 2px solid var(--cue-green);
     color: var(--cue-green);
     font-weight: 600;
     padding: 10px 25px;
     border-radius: 10px;
     transition: all 0.2s;
 }

 .btn-outline-cue:hover {
     background: var(--cue-green);
     color: white;
     transform: translateY(-2px);
 }

 /* --- Hero Section --- */
 .hero-section {
     padding: 130px 0 100px;
     background: radial-gradient(circle at top right, rgba(16, 185, 129, 0.05), transparent),
         radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.05), transparent);
     position: relative;
     isolation: isolate;
 }

 /* animated floating orbs */
 .hero-section::before {
     content: '';
     position: absolute;
     inset: 0;
     background: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 1200 800" xmlns="http://www.w3.org/2000/svg"><circle cx="200" cy="200" r="80" fill="%2310b981" opacity="0.03"/><circle cx="900" cy="400" r="120" fill="%2310b981" opacity="0.03"/><circle cx="600" cy="600" r="100" fill="%2310b981" opacity="0.02"/></svg>');
     background-size: cover;
     animation: slowFloat 30s infinite alternate;
     z-index: -1;
 }

 @keyframes slowFloat {
     0% {
         transform: translate(0, 0) scale(1);
     }

     100% {
         transform: translate(-20px, -20px) scale(1.05);
     }
 }

 .hero-title {
     font-size: clamp(2.5rem, 5vw, 4rem);
     line-height: 1.1;
     margin-bottom: 25px;
     letter-spacing: -2px;
 }

 .text-gradient {
     background: linear-gradient(135deg, var(--cue-green), #059669);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .hero-mockup {
     position: relative;
     top: -40px;
     z-index: 1;
     width: 110%;
 }

 .hero-mockup img {
     border-radius: 24px;
     box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.15);
     border: 8px solid var(--white);
     transition: transform 0.4s;
     max-width: 100%;
 }

 .hero-mockup img:hover {
     transform: scale(1.02);
 }

 .floating-badge {
     position: absolute;
     background: var(--white);
     padding: 15px 20px;
     border-radius: 15px;
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
     display: flex;
     align-items: center;
     gap: 12px;
     z-index: 2;
     animation: float 4s ease-in-out infinite;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-10px);
     }
 }

 /* pulse animation for icons */
 .pulse-icon {
     animation: pulse 2s infinite;
 }

 @keyframes pulse {
     0% {
         box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
     }

     70% {
         box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
     }

     100% {
         box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
     }
 }

 /* --- Features Section --- */
 .section-tag {
     color: var(--cue-green);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     font-size: 13px;
     display: block;
     margin-bottom: 10px;
 }

 .feature-card {
     padding: 40px;
     border-radius: 20px;
     background: var(--white);
     border: 1px solid #f1f5f9;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     height: 100%;
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.7s ease, transform 0.7s ease, border-color 0.3s, box-shadow 0.3s;
 }

 .feature-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .feature-card:hover {
     border-color: var(--cue-green);
     transform: translateY(-10px) scale(1.02);
     box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.1);
 }

 .icon-box {
     height: 60px;
     width: 60px;
     background: rgba(16, 185, 129, 0.1);
     color: var(--cue-green);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 30px;
     margin-bottom: 25px;
     transition: all 0.3s;
 }

 .feature-card:hover .icon-box {
     background: var(--cue-green);
     color: white;
     transform: rotate(5deg) scale(1.1);
 }

 /* --- Pricing Section --- */
 .pricing-section {
     background-color: var(--bg-light);
     padding: 100px 0;
 }

 .price-card {
     background: var(--white);
     padding: 50px 40px;
     border-radius: 24px;
     border: 1px solid #e2e8f0;
     transition: all 0.3s;
     position: relative;
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.7s ease, transform 0.7s ease, border 0.2s, box-shadow 0.3s;
 }

 .price-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .price-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 30px 40px -15px rgba(0, 0, 0, 0.1);
 }

 .price-card.featured {
     border: 2.5px solid var(--cue-green);
     transform: scale(1.05);
     z-index: 2;
     animation: borderPulse 2s infinite;
 }

 @keyframes borderPulse {
     0% {
         border-color: var(--cue-green);
     }

     50% {
         border-color: #34d399;
         box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.1);
     }

     100% {
         border-color: var(--cue-green);
     }
 }

 .price-tag {
     font-size: 48px;
     font-weight: 800;
     margin: 20px 0;
 }

 .price-tag span {
     font-size: 16px;
     color: var(--text-light);
     font-weight: 400;
 }

 /* --- Stats section glow --- */
 .stats-number {
     display: inline-block;
     animation: glowPulse 3s infinite;
 }

 @keyframes glowPulse {
     0% {
         text-shadow: 0 0 0 rgba(16, 185, 129, 0.2);
     }

     50% {
         text-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
     }

     100% {
         text-shadow: 0 0 0 rgba(16, 185, 129, 0.2);
     }
 }

 /* --- Contact Section (preserved) --- */
 .contact-info-card {
     background: linear-gradient(135deg, var(--cue-green), var(--cue-dark));
     color: white;
     padding: 40px;
     border-radius: 24px;
     height: 100%;
 }

 .contact-form-card {
     background: #ffffff;
     padding: 40px;
     border-radius: 24px;
     border: 1px solid var(--border-color);
     box-shadow: 0 15px 30px rgba(0, 0, 0, 0.03);
 }

 .contact-item-link {
     display: flex;
     align-items: center;
     gap: 15px;
     color: rgba(255, 255, 255, 0.9);
     text-decoration: none;
     margin-bottom: 25px;
     transition: 0.3s;
 }

 .contact-item-link:hover {
     color: white;
     transform: translateX(5px);
 }

 .contact-icon-circle {
     height: 44px;
     width: 44px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 20px;
 }

 .form-floating>.form-control {
     border-radius: 12px;
     border: 1.5px solid var(--border-color);
     transition: border 0.2s, box-shadow 0.2s;
 }

 .form-floating>.form-control:focus {
     border-color: var(--cue-green);
     box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
 }

 /* --- Footer (Updated to Match Theme) --- */
 .footer {
     background: var(--white);
     color: var(--cue-green);
     padding: 80px 0 30px;
     border-top: 1px solid #e2e8f0;
 }

 .footer-logo {
     filter: none;
     /* remove invert because bg is white */
     height: 45px;
     margin-bottom: 25px;
 }

 .footer h5 {
     color: var(--cue-dark);
     margin-bottom: 25px;
 }

 .footer-links {
     list-style: none;
     padding: 0;
 }

 .footer-links li {
     margin-bottom: 12px;
 }

 .footer-links a {
     color: var(--cue-green);
     text-decoration: none;
     transition: all 0.2s ease;
 }

 .footer-links a:hover {
     color: var(--cue-dark);
     transform: translateX(4px);
 }

 /* --- Scroll reveal base --- */
 .fade-up,
 .section-header,
 .stat-item,
 .platform-strip,
 .contact-info-card,
 .contact-form-card {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.7s ease, transform 0.7s ease;
 }

 .fade-up.visible,
 .section-header.visible,
 .stat-item.visible,
 .platform-strip.visible,
 .contact-info-card.visible,
 .contact-form-card.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* --- Platform strip icons --- */
 .platform-strip {
     display: flex;
     gap: 8px;
     margin-top: 10px;
     flex-wrap: wrap;
 }

 .platform-icon {
     background: rgba(255, 255, 255, 0.9);
     border-radius: 50px;
     padding: 5px 15px;
     font-size: 14px;
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.02);
     transition: transform 0.2s;
 }

 .platform-icon:hover {
     transform: scale(1.05);
     box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05);
 }

 .ph-whatsapp-logo {
     color: #25D366;
 }

 .ph-messenger-logo {
     color: #0084FF;
 }

 .ph-instagram-logo {
     color: #E1306C;
 }

 /* ========== 🚀 ENHANCED MOBILE RESPONSIVENESS ========== */
 @media (max-width: 991px) {
     .hero-mockup {
         margin-top: 60px;
         width: 100%;
     }

     .price-card.featured {
         transform: scale(1);
         margin: 20px 0;
     }

     .floating-badge {
         padding: 10px 15px;
     }

     .floating-badge .icon-box {
         height: 32px !important;
         width: 32px !important;
         font-size: 16px !important;
     }
 }

 @media (max-width: 767px) {

     /* Adjust hero padding and title */
     .hero-section {
         padding: 100px 0 60px;
     }

     .hero-title {
         font-size: 2.2rem;
         letter-spacing: -1px;
     }

     /* Fix floating badges position on mobile */
     .floating-badge {
         padding: 8px 12px;
         gap: 8px;
     }

     .floating-badge:nth-child(1) {
         top: 0;
         left: 0;
     }

     .floating-badge:nth-child(2) {
         bottom: 10%;
         right: 0;
     }

     .floating-badge:nth-child(3) {
         top: 30%;
         right: 0;
     }

     /* Feature & price cards */
     .feature-card,
     .price-card {
         padding: 30px 25px;
     }

     .price-tag {
         font-size: 40px;
     }

     /* Stats */
     .stat-item {
         margin-bottom: 20px;
     }

     .stat-item h2 {
         font-size: 2rem;
     }

     /* Contact section stacking */
     .contact-info-card,
     .contact-form-card {
         padding: 30px 25px;
     }

     /* Footer */
     .footer .col-lg-4,
     .footer .col-6 {
         text-align: left;
     }

     .footer-logo {
         margin-bottom: 15px;
     }
 }

 @media (max-width: 575px) {

     /* Navbar brand size */
     .navbar-brand span {
         font-size: 1.5rem !important;
     }

     /* Hero */
     .hero-title {
         font-size: 1.9rem;
     }

     .btn-cue,
     .btn-outline-cue {
         width: 100%;
         text-align: center;
     }

     /* Hide some floating badges on very small devices to avoid overlap */
     .floating-badge:nth-child(3) {
         display: none;
     }

     /* Feature & pricing */
     .feature-card {
         padding: 25px 20px;
     }

     .price-card {
         padding: 40px 25px;
     }

     .price-tag {
         font-size: 36px;
     }

     /* Section headings */
     .display-5 {
         font-size: 1.9rem;
     }

     /* Contact */
     .contact-info-card h2 {
         font-size: 1.8rem;
     }

     .contact-item-link {
         flex-wrap: wrap;
     }

     /* Platform strip */
     .platform-icon {
         font-size: 12px;
         padding: 4px 12px;
     }

     /* Footer columns */
     .footer .col-6 {
         width: 100%;
         margin-bottom: 25px;
     }

     .footer h5 {
         margin-bottom: 15px;
     }
 }

 /* Ensure no horizontal overflow */
 html,
 body {
     overflow-x: hidden;
 }

 .container {
     padding-left: 15px;
     padding-right: 15px;
 }