/* ===== BASE STYLES ===== */
 body {
     font-family: 'Inter', 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
     -webkit-text-size-adjust: 100%;
     line-height: 1.6;
     color: var(--color-text);
     overflow-x: hidden;
 }

 /* ===== REMOVE UNDERLINE ON ALL LINKS HOVER ===== */
 a:hover,
 a:focus,
 a:active {
     text-decoration: none !important;
 }

 /* ===== COLORS ===== */
 /* Primary Green Palette (ตรงกับ tokens.css) */
 :root {
     /* Primary Green Palette */
     --palette-primary-soft: #DCFCDD;
     --palette-primary-soft-dark: #BBF7BD;
     --palette-primary-light: #86EF8B;
     --palette-primary-bright: #4EDF56;
     --palette-primary-500: #22C52C;
     --palette-primary-700: #16A31E;
     --palette-primary-900: #15803D;

     /* Neutral Gray Palette */
     --palette-neutral-white: #ffffff;
     --palette-neutral-gray-50: #F6F7F9;
     --palette-neutral-gray-100: #D1D5DB;
     --palette-neutral-gray-200: #9CA3AF;
     --palette-neutral-gray-400: #8697AA;
     --palette-neutral-gray-500: #6B7280;
     --palette-neutral-gray-600: #4b5563;
     --palette-neutral-gray-700: #374151;
     --palette-neutral-gray-800: #1f2937;
     --palette-neutral-gray-900: #171A1F;

     /* Effects Alpha Palette - White */
     --palette-alpha-white-95: rgba(255, 255, 255, 0.95);
     --palette-alpha-white-90: rgba(255, 255, 255, 0.9);
     --palette-alpha-white-80: rgba(255, 255, 255, 0.8);
     --palette-alpha-white-40: rgba(255, 255, 255, 0.4);
     --palette-alpha-white-30: rgba(255, 255, 255, 0.3);
     --palette-alpha-white-10: rgba(255, 255, 255, 0.1);

     /* Effects Alpha Palette - Black */
     --palette-alpha-black-30: rgba(0, 0, 0, 0.3);
     --palette-alpha-black-25: rgba(0, 0, 0, 0.25);
     --palette-alpha-black-20: rgba(0, 0, 0, 0.2);
     --palette-alpha-black-15: rgba(0, 0, 0, 0.15);
     --palette-alpha-black-10: rgba(0, 0, 0, 0.1);
     --palette-alpha-black-06: rgba(0, 0, 0, 0.06);
     --palette-alpha-black-05: rgba(0, 0, 0, 0.05);

     /* Effects Alpha Palette - Green */
     --palette-alpha-green-50: rgba(34, 197, 44, 0.5);
     --palette-alpha-green-40: rgba(34, 197, 44, 0.4);
     --palette-alpha-green-30: rgba(34, 197, 44, 0.3);
     --palette-alpha-green-20: rgba(34, 197, 44, 0.2);
     --palette-alpha-green-10: rgba(34, 197, 44, 0.1);
     --palette-alpha-green-05: rgba(34, 197, 44, 0.05);

     /* Brand Colors (Third-Party) */
     --brand-facebook: #1877F2;
     --brand-facebook-hover: #166FE5;
     --brand-linkedin: #0077B5;
     --brand-linkedin-hover: #006399;
     --brand-messenger: #0084FF;
     --brand-messenger-hover: #0073E6;
     --brand-x: #1DA1F2;
     --brand-x-hover: #1a91da;
     --brand-line: #00C300;
     --brand-line-hover: #00B000;
     --brand-whatsapp: #25D366;
     --brand-whatsapp-hover: #20BA5A;
     --brand-instagram: linear-gradient(45deg, #F56040 0%, #E1306C 25%, #C13584 50%, #833AB4 75%, #5851DB 100%);
     --brand-instagram-hover: linear-gradient(45deg, #E04F2F 0%, #C81F5B 25%, #A82673 50%, #722A9F 75%, #4740C8 100%);
     --brand-twitch: #9146FF;
     --brand-twitch-hover: #7C3AED;
     --brand-youtube: #FF0000;
     --brand-youtube-hover: #E60000;

     /* Semantic Tokens (ตรงกับ themes.css - Green Theme) */
     --color-bg: var(--palette-neutral-white);
     --color-surface: var(--palette-neutral-white);
     --color-surface-2: var(--palette-neutral-gray-50);
     --color-text: var(--palette-neutral-gray-900);
     --color-text-muted: var(--palette-neutral-gray-500);
     --color-text-inverse: var(--palette-neutral-white);
     --color-primary: var(--palette-primary-500);
     --color-primary-hover: var(--palette-primary-700);
     --color-primary-soft: var(--palette-primary-soft);
     --color-primary-contrast: var(--palette-primary-soft);
     --color-primary-light: var(--palette-primary-light);

     /* Gradients */
     --gradient-primary: linear-gradient(135deg, var(--palette-primary-700) 0%, var(--palette-primary-500) 100%);
     --gradient-primary-hero: linear-gradient(135deg, var(--palette-primary-700) 0%, var(--palette-primary-500) 50%, var(--palette-primary-light) 100%);
     --gradient-soft: linear-gradient(135deg, var(--palette-primary-soft) 0%, var(--palette-primary-soft-dark) 100%);

     /* Legacy Variables (สำหรับ backward compatibility) */
     --primary-green: var(--palette-primary-500);
     --primary-green-dark: var(--palette-primary-700);
     --primary-green-light: var(--palette-primary-light);
     --primary-green-soft: var(--palette-primary-soft);
     --white: var(--palette-neutral-white);
     --gray-50: var(--palette-neutral-gray-50);
     --gray-100: var(--palette-neutral-gray-100);
     --gray-400: var(--palette-neutral-gray-400);
     --gray-600: var(--palette-neutral-gray-600);
     --gray-800: var(--palette-neutral-gray-800);
     --gray-900: var(--palette-neutral-gray-900);
     --text-dark: var(--palette-neutral-gray-900);
     --text-muted: var(--palette-neutral-gray-500);
 }

 .section-header {
     text-align: center;
     margin-bottom: 3rem;
     position: relative;
     z-index: 2;
 }

 .badge-soft {
     display: inline-block;
     background-color: var(--badge-bg);
     color: var(--badge-text);
     padding: 0.5rem 1rem;
     border-radius: 50px;
     font-size: 0.85rem;
     font-weight: 600;
     margin-bottom: 1rem;
 }

 .section-title {
     font-size: 2.5rem;
     font-weight: 800;
     color: var(--text-dark);
     margin-bottom: 1rem;
     letter-spacing: -0.025em;
 }

 .section-subtitle {
     color: var(--text-muted);
     font-size: 1.1rem;
     max-width: 600px;
     margin: 0 auto;
 }

 /* ===== MARQUEE STYLES ===== */
 .marquee-wrapper {
     position: relative;
     overflow: hidden;
     padding: 2rem 0;
     mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
     -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
 }

 .marquee-track {
     display: flex;
     gap: 2rem;
     width: max-content;
 }

 .logo-card {
     background: #fff;
     border-radius: 12px;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
     width: 200px;
     /* Fixed width */
     height: 80px;
     /* Fixed height */
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 1rem;
     transition: transform 0.3s ease;
 }

 .logo-card:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }

 .logo-card img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     filter: grayscale(100%);
     opacity: 0.6;
     transition: all 0.3s ease;
 }

 .logo-card:hover img {
     filter: grayscale(0%);
     opacity: 1;
 }

 /* Placeholder styling if no images */
 .logo-placeholder {
     font-size: 1.5rem;
     color: #9CA3AF;
     font-weight: 700;
     display: flex;
     align-items: center;
     gap: 0.5rem;
 }

 .logo-card:hover .logo-placeholder {
     color: var(--text-dark);
 }

 /* ANIMATIONS */
 .scroll-left {
     animation: scrollLeft 40s linear infinite;
 }

 .scroll-right {
     animation: scrollRight 40s linear infinite;
 }

 @keyframes scrollLeft {
     0% {
         transform: translateX(0);
     }

     100% {
         transform: translateX(-50%);
     }

     /* Moves -50% because we duplicate content once. 
               Ensure content is wide enough that 50% is the full original set length */
 }

 @keyframes scrollRight {
     0% {
         transform: translateX(-50%);
     }

     100% {
         transform: translateX(0);
     }
 }

 /* Pause on hover optional */
 .marquee-wrapper:hover .marquee-track {
     animation-play-state: paused;
 }


 /* Language Dropdown Styles */
 #language-dropdown {
     animation: fadeInDown 0.2s ease-out;
 }

 #language-dropdown.d-none {
     display: none !important;
 }

 @keyframes fadeInDown {
     from {
         opacity: 0;
         transform: translateY(-10px);
     }

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

 #language-button[aria-expanded="true"] .fa-chevron-down {
     transform: rotate(180deg);
 }

 [data-lang]:hover {
     background-color: var(--palette-neutral-gray-100) !important;
 }

 /* Language Dropdown - White Background */
 #language-dropdown {
     background-color: var(--palette-neutral-white) !important;
     border-color: var(--palette-neutral-gray-200) !important;
 }

 #language-dropdown button {
     color: var(--palette-neutral-gray-900) !important;
 }

 #language-dropdown button:hover {
     background-color: var(--palette-neutral-gray-100) !important;
 }

 #language-dropdown [data-lang-check]:not(.d-none) {
     color: var(--color-primary) !important;
     display: inline-block !important;
 }

 /* Header Login Button - 3D Effect (ธีมเดิม) */
 .site-header .login-button {
     /* Background - ธีมเดิม (ขาว) */
     background-color: rgba(255, 255, 255, 0.95) !important;
     color: #22C52C !important;
     border: 1px solid rgba(34, 197, 44, 0.3) !important;

     /* 3D Shadow Effect */
     box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1) !important;

     /* Transition */
     transition: all 0.15s ease-in-out;

     /* Transform base */
     transform: translateY(0);
 }

 .site-header .login-button:hover {
     /* ลดเงาลง */
     box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1) !important;

     /* เลื่อนปุ่มลง */
     transform: translateY(3px);

     /* รักษาสีเดิม */
     background-color: rgba(255, 255, 255, 1) !important;
     color: #16A31E !important;
     border-color: rgba(34, 197, 44, 0.5) !important;
 }

 .site-header .login-button:active,
 .site-header .login-button:focus {
     /* กดลงไปสุด */
     box-shadow: none !important;
     transform: translateY(6px);

     /* รักษาสีเดิม */
     background-color: rgba(255, 255, 255, 1) !important;
     color: #16A31E !important;
 }

 .site-header .login-button:focus {
     outline: none !important;
 }

 .site-header .login-button i,
 .site-header .login-button span {
     color: #22C52C !important;
 }

 .site-header .login-button:hover i,
 .site-header .login-button:hover span {
     color: #16A31E !important;
 }

 /* Signup Button in Header */
 /* Header Signup Button - 3D Effect */
 .site-header .signup-button {
     /* Background Gradient - ใช้สีเขียวของธีม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: white !important;
     border: none !important;

     /* 3D Shadow Effect */
     box-shadow: 0 6px 0 #0F7A15 !important;

     /* Transition */
     transition: all 0.15s ease-in-out;

     /* Transform base */
     transform: translateY(0);
 }

 .site-header .signup-button:hover {
     /* ลดเงาลง */
     box-shadow: 0 3px 0 #0F7A15 !important;

     /* เลื่อนปุ่มลง */
     transform: translateY(3px);

     /* รักษาสีเดิม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: white !important;
     border: none !important;
 }

 .site-header .signup-button:active,
 .site-header .signup-button:focus {
     /* กดลงไปสุด */
     box-shadow: none !important;
     transform: translateY(6px);

     /* รักษาสีเดิม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: white !important;
 }

 .site-header .signup-button:focus {
     outline: none !important;
 }

 .site-header .signup-button i,
 .site-header .signup-button span {
     color: white !important;
 }

 /* Text Colors */
 .text-inverse {
     color: white;
 }

 /* Responsive adjustments */
 @media (max-width: 767px) {
     .site-header nav {
         padding: 15px;
     }
 }

 /* ===== HERO SECTION ===== */
 .hero {
     background: var(--gradient-primary-hero);
     padding: 0;
     margin-top: 76px;
     color: var(--color-text-inverse);
     text-align: center;
     overflow: hidden;
     position: relative;
 }

 .hero-background {
     background: var(--gradient-primary);
 }

 .hero-title {
     margin-bottom: 1.5rem;
 }

 .hero-title-line--primary {
     color: var(--color-text-inverse);
     text-shadow: 0 2px 8px var(--palette-alpha-black-15);
 }

 .hero-title-line--secondary {
     color: var(--palette-neutral-gray-800);
     text-shadow: 0 2px 8px var(--palette-alpha-black-15);
 }

 .hero-subtitle {
     color: var(--color-text-inverse);
     opacity: 0.95;
 }

 .hero-section {
     padding-top: 80px;
     padding-bottom: 0;
 }

 .hero__content {
     position: relative;
     z-index: 10;
 }

 .hero__mockup {
     position: relative;
     z-index: 20;
 }

 /* Hero Mockup Frame - Responsive Border Radius */
 .mockup-frame {
     border-top-left-radius: 24px;
     border-top-right-radius: 24px;
 }

 @media (min-width: 640px) {
     .mockup-frame {
         border-top-left-radius: 32px;
         border-top-right-radius: 32px;
     }
 }

 @media (min-width: 768px) {
     .mockup-frame {
         border-top-left-radius: 48px;
         border-top-right-radius: 48px;
     }
 }

 /* Hero Mockup Image - Responsive Border Radius */
 .mockup-image {
     border-top-left-radius: 16px;
     border-top-right-radius: 16px;
 }

 @media (min-width: 640px) {
     .mockup-image {
         border-top-left-radius: 24px;
         border-top-right-radius: 24px;
     }
 }

 @media (min-width: 768px) {
     .mockup-image {
         border-top-left-radius: 36px;
         border-top-right-radius: 36px;
     }
 }

 /* Feature Card Overlay - Responsive Border Radius */
 .feature-card-overlay {
     border-radius: 12px;
     /* rounded-xl */
 }

 @media (min-width: 640px) {
     .feature-card-overlay {
         border-radius: 16px;
         /* rounded-2xl */
     }
 }

 .hero-curve-wrapper {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     width: 100%;
     z-index: 30;
 }

 .hero-curve-wrapper svg {
     width: 100%;
     height: auto;
     display: block;
 }

 .hero-curve-wrapper path {
     fill: #ffffff;
     vector-effect: non-scaling-stroke;
 }

 /* Floating Elements Animation */
 @keyframes fadeInTop {
     from {
         opacity: 0;
         transform: translateY(-20px);
     }

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

 @keyframes floating {

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

     25% {
         transform: translateY(-10px) translateX(5px);
     }

     50% {
         transform: translateY(-20px) translateX(0px);
     }

     75% {
         transform: translateY(-10px) translateX(-5px);
     }
 }

 /* Floating Animation - เบาๆ สวยๆ */
 @keyframes float {

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

     25% {
         transform: translateY(-8px) translateX(3px) rotate(0.5deg);
     }

     50% {
         transform: translateY(-12px) translateX(-2px) rotate(-0.5deg);
     }

     75% {
         transform: translateY(-8px) translateX(2px) rotate(0.3deg);
     }
 }

 .floating-animation {
     animation: float 8s ease-in-out infinite;
     transition: transform 0.3s ease;
 }

 /* Combine fade-in-top with floating animation */
 .floating-animation.fade-in-top {
     animation-name: fadeInTop, float;
     animation-duration: 0.8s, 8s;
     animation-timing-function: ease-out, ease-in-out;
     animation-fill-mode: forwards, both;
     animation-iteration-count: 1, infinite;
 }

 /* Specific delays for each element */
 .floating-card-right.fade-in-top {
     animation: fadeInTop 0.8s ease-out 0.3s forwards, float 9s ease-in-out 1.1s infinite;
 }

 /* Rocket Launch Animation - พุ่งเข้ามาเหมือนจรวดจริง */
 @keyframes rocketLaunch {
     0% {
         opacity: 0;
         transform: translate(200%, 200%) scale(0.2) rotate(-45deg);
         filter: blur(8px) drop-shadow(0 0 30px rgba(255, 140, 0, 0.9)) drop-shadow(0 0 60px rgba(255, 200, 0, 0.6));
     }

     15% {
         opacity: 0.8;
         transform: translate(120%, 120%) scale(0.4) rotate(-35deg);
         filter: blur(5px) drop-shadow(0 0 25px rgba(255, 140, 0, 0.7)) drop-shadow(0 0 50px rgba(255, 200, 0, 0.5));
     }

     30% {
         opacity: 1;
         transform: translate(70%, 70%) scale(0.6) rotate(-25deg);
         filter: blur(3px) drop-shadow(0 0 20px rgba(255, 140, 0, 0.6)) drop-shadow(0 0 40px rgba(255, 200, 0, 0.4));
     }

     50% {
         transform: translate(35%, 35%) scale(0.75) rotate(-12deg);
         filter: blur(1.5px) drop-shadow(0 0 15px rgba(255, 140, 0, 0.4)) drop-shadow(0 0 30px rgba(255, 200, 0, 0.3));
     }

     70% {
         transform: translate(12%, 12%) scale(0.88) rotate(-5deg);
         filter: blur(0.8px) drop-shadow(0 0 10px rgba(255, 140, 0, 0.3)) drop-shadow(0 0 20px rgba(255, 200, 0, 0.2));
     }

     85% {
         transform: translate(3%, 3%) scale(0.95) rotate(-1deg);
         filter: blur(0.3px) drop-shadow(0 0 8px rgba(255, 140, 0, 0.2));
     }

     100% {
         opacity: 1;
         transform: translate(0, 0) scale(1) rotate(0deg);
         filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
     }
 }

 .floating-rocket.fade-in-top {
     /* Rocket launch animation (1.5s) then float */
     animation: rocketLaunch 1.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.6s forwards,
         float 8s ease-in-out 2.1s infinite;
     opacity: 0;
     transform-origin: center center;
 }

 .floating-card-bottom.fade-in-top {
     animation: fadeInTop 0.8s ease-out 0.9s forwards, float 10s ease-in-out 1.7s infinite;
 }

 /* Floating Elements Styles */
 .floating-rocket,
 .floating-card {
     filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25));
     will-change: transform;
     transition: transform 0.3s ease, filter 0.3s ease;
 }

 .floating-rocket {
     filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
 }

 .floating-card {
     filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
 }

 /* .floating-card,
        .floating-rocket {
            display: none;
        } */

 @media (min-width: 992px) {

     .floating-card,
     .floating-rocket {
         display: block;
     }
 }

 @media (max-width: 991px) {
     /* .floating-card,
            .floating-rocket {
                display: none !important;
            }
            
            .feature-card-overlay {
                display: none !important;
            } */
 }

 /* ===== CUSTOM ROUNDED UTILITIES ===== */
 .rounded-xl {
     border-radius: 0.75rem !important;
     /* 12px */
 }

 /* ===== SECTION COMMON STYLES ===== */
 .section {
     padding: 5rem 0;
 }

 .section-white {
     background: var(--white);
 }

 .section-gray {
     background: var(--gray-50);
 }

 .section-title {
     text-align: center;
     font-size: clamp(1.875rem, 4vw, 3rem);
     font-weight: 800;
     color: var(--gray-900);
     margin-bottom: 0;
 }

 .badge-primary {
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     padding: 0.5rem 1.5rem;
     border-radius: 9999px;
     /* rounded-full = 50% */
     background: var(--gradient-soft);
     margin-bottom: 1.5rem;
 }

 .badge-primary i {
     color: var(--color-primary);
     font-size: 0.875rem;
 }

 .badge-primary span {
     color: var(--palette-neutral-gray-600);
     font-size: 0.875rem;
     font-weight: 500;
 }

 .section-header {
     text-align: center;
     margin-bottom: 3rem;
 }

 .section-subtitle {
     font-size: 1.125rem;
     color: var(--color-text-muted);
     margin-top: 1rem;
     max-width: 42rem;
     margin-left: auto;
     margin-right: auto;
 }

 /* ===== CLIENT TRUST SECTION ===== */
 .client-logo {
     opacity: 0.6;
     transition: opacity 0.3s;
     filter: grayscale(100%);
 }

 .client-logo:hover {
     opacity: 1;
     filter: grayscale(0%);
 }

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

 /* ===== SERVICES SECTION ===== */
 .service-card {
     background: var(--color-surface-2);
     padding: 2rem;
     border-radius: 16px;
     /* rounded-2xl = 24px แต่ service card ใช้ 16px */
     text-align: center;
     border: 1px solid var(--palette-alpha-green-10);
     transition: all 0.3s;
     height: 100%;
 }

 .service-card:hover {
     border-color: var(--palette-alpha-green-30);
     transform: translateY(-4px);
     box-shadow: 0 8px 24px var(--palette-alpha-green-10);
 }

 .service-icon {
     width: 72px;
     height: 72px;
     background: var(--gradient-primary);
     border-radius: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     color: var(--color-text-inverse);
     font-size: 1.75rem;
     box-shadow: 0 4px 12px var(--palette-alpha-green-30);
     transition: all 0.3s ease;
 }

 .service-card:hover .service-icon {
     transform: translateY(-4px) scale(1.05);
     box-shadow: 0 8px 20px var(--palette-alpha-green-40);
 }

 .service-card h3 {
     font-size: 1.25rem;
     font-weight: 700;
     color: var(--color-text);
     margin-bottom: 0.75rem;
     line-height: 1.4;
 }

 .service-card p {
     color: var(--color-text-muted);
     font-size: 0.95rem;
     line-height: 1.7;
     margin-bottom: 0;
 }

 /* ===== FEATURED FEATURES SECTION ===== */
 .feature-image {
     border-radius: 16px;
     overflow: hidden;
 }

 .feature-content h3 {
     font-size: 2rem;
     font-weight: 700;
     color: var(--gray-900);
     margin-bottom: 1rem;
     line-height: 1.3;
 }

 .feature-content p {
     line-height: 1.75;
     margin-bottom: 1rem;
 }

 .feature-content ul {
     list-style: none;
     margin-top: 1.5rem;
     margin-bottom: 0;
     padding: 0;
 }

 .feature-content li {
     padding: 0.625rem 0;
     margin-bottom: 0.25rem;
     color: var(--text-muted);
     display: flex;
     align-items: flex-start;
     gap: 0.875rem;
     line-height: 0.05;
 }

 .feature-content li:last-child {
     margin-bottom: 0;
 }

 .feature-content li::before {
     content: '✓';
     color: var(--primary-green);
     font-weight: bold;
     font-size: 1.125rem;
     flex-shrink: 0;
     margin-top: 0.125rem;
 }

 /* ===== ADDITIONAL FEATURES SECTION ===== */
 /* ===== FEATURE ITEMS SECTION ===== */
 .feature-item {
     text-align: center;
     padding: 1rem;
 }

 .feature-icon-wrapper {
     margin-bottom: 1.5rem;
 }

 .feature-icon {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--gradient-feature);
     background-image: linear-gradient(135deg, rgb(78, 223, 86) 0%, rgb(22, 163, 30) 100%);
     background-position-x: initial;
     background-position-y: initial;
     background-size: initial;
     background-repeat: initial;
     background-attachment: initial;
     background-origin: initial;
     background-clip: initial;
     background-color: initial;
     box-shadow: 0 4px 6px -1px var(--shadow-color-1);
     transition: all 0.3s ease;
     margin: 0 auto;
 }

 .feature-icon i {
     font-size: 2rem;
     color: var(--color-text-inverse);
     transition: all 0.3s;
 }

 .feature-item:hover .feature-icon {
     background: var(--gradient-soft);
     transform: translateY(-5px);
 }

 .feature-item:hover .feature-icon i {
     color: var(--color-primary);
 }

 .feature-item h3 {
     font-size: 1.125rem;
     font-weight: 700;
     color: var(--color-text);
     margin-bottom: 0.5rem;
 }

 .feature-item p {
     font-size: 0.875rem;
     color: var(--color-text-muted);
     line-height: 1.7;
     margin-bottom: 0;
 }

 /* ===== STATISTICS SECTION ===== */
 .stat-number {
     font-weight: 800;
     color: var(--color-primary);
     line-height: 1;
     margin-bottom: 0.5rem;
 }

 .stat-label {
     color: var(--color-text-muted);
     font-size: 0.875rem;
 }

 .statistics-image {
     border-radius: 24px;
     /* rounded-2xl */
     overflow: hidden;
     position: relative;
 }

 @media (min-width: 640px) {
     .statistics-image {
         border-radius: 30px;
         /* rounded-3xl */
     }
 }

 .customer-feedback-overlay {
     background: var(--palette-alpha-white-95);
     backdrop-filter: blur(10px);
     border-radius: 12px;
     /* rounded-xl */
     transition: transform 0.3s;
 }

 @media (min-width: 640px) {
     .customer-feedback-overlay {
         border-radius: 12px;
         /* rounded-xl */
     }
 }

 .customer-feedback-overlay:hover {
     transform: scale(1.05);
 }

 .try-button {
     background: var(--gradient-primary);
     color: var(--color-primary-contrast);
     border: none;
     transition: all 0.3s;
 }

 .try-button:hover {
     background: linear-gradient(135deg, var(--palette-primary-700) 0%, var(--palette-primary-500) 100%);
     transform: translateY(-2px);
     box-shadow: 0 6px 16px var(--palette-alpha-green-40);
     color: var(--color-primary-contrast);
 }

 .btn-primary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
     border-radius: 9999px;
     /* rounded-full */
     padding: 1rem 2.5rem;
     font-size: 1.1rem;
     font-weight: 600;
     box-shadow: 0 4px 12px var(--palette-alpha-green-30);
     transition: all 0.3s;
 }

 .btn-primary:hover {
    background-color: var(--primary-700, var(--primary));
     transform: translateY(-2px);
     box-shadow: 0 6px 16px var(--palette-alpha-green-40);
     color: var(--color-primary-contrast);
 }

 /* ===== PRICING SECTION ===== */
 .pricing-card {
     background: var(--color-surface);
     border-radius: 24px;
     /* rounded-2xl */
     overflow: hidden;
     border: 1px solid var(--palette-alpha-green-10);
     transition: all 0.3s;
     height: 100%;
 }

 @media (min-width: 640px) {
     .pricing-card {
         border-radius: 30px;
         /* rounded-3xl */
     }
 }

 .pricing-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 12px 32px var(--palette-alpha-green-15);
     border-color: var(--palette-alpha-green-30);
 }

 /* Pricing Card Side (Free & Enterprise) */
 .pricing-card-side {
     background: var(--color-surface);
 }

 .pricing-card-side .pricing-card-header {
     background: var(--gradient-soft);
 }

 /* Pricing Card Premium */
 .pricing-card-premium {
     background: var(--gradient-primary);
     border: 3px solid var(--palette-alpha-white-30);
     position: relative;
     z-index: 10;
     box-shadow: 0 25px 50px -12px var(--palette-alpha-black-25), 0 0 0 1px var(--palette-alpha-green-20);
     min-height: 100%;
 }

 .pricing-card-premium .pricing-card-header-premium {
     padding-bottom: 1.5rem;
 }

 .pricing-card-premium .premium-features-box {
     margin-top: 1rem;
 }

 .pricing-card-premium::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     background: var(--gradient-primary);
     border-radius: 24px;
     /* rounded-2xl */
     z-index: -1;
     opacity: 0.15;
 }

 @media (min-width: 640px) {
     .pricing-card-premium::before {
         border-radius: 30px;
         /* rounded-3xl */
     }
 }

 @media (min-width: 768px) {
     .pricing-card-premium {
         transform: scale(1.1);
         align-self: stretch;
         margin-top: -20px;
         margin-bottom: -20px;
         min-height: calc(100% + 40px);
         height: auto;
     }

     .pricing-card-premium .pricing-card-header-premium {
         padding: 2rem 1.5rem 2rem 1.5rem;
     }

     .pricing-card-premium .premium-features-box {
         padding: 1.25rem 1.5rem;
         margin: 1rem 1rem 1.5rem 1rem;
     }

     .pricing-card-premium:hover {
         transform: scale(1.12) translateY(-6px);
         box-shadow: 0 30px 60px -12px var(--palette-alpha-black-30), 0 0 0 1px var(--palette-alpha-green-30);
     }
 }

 @media (min-width: 992px) {
     .pricing-card-premium {
         transform: scale(1.12);
         margin-top: -30px;
         margin-bottom: -30px;
         min-height: calc(100% + 60px);
     }

     .pricing-card-premium .pricing-card-header-premium {
         padding: 2.5rem 2rem 2.5rem 2rem;
     }

     .pricing-card-premium .premium-features-box {
         padding: 1.5rem 2rem;
         margin: 1.25rem 1.5rem 2rem 1.5rem;
     }

     .pricing-card-premium:hover {
         transform: scale(1.15) translateY(-8px);
     }
 }

 .pricing-card-header {
     position: relative;
     overflow: hidden;
 }

 .pricing-card-header-premium {
     padding: 2rem 2.5rem;
 }

 @media (min-width: 768px) {
     .pricing-card-header-premium {
         padding: 2.5rem 3rem;
     }
 }

 /* Pricing Card Text Spacing */
 .pricing-card-header p,
 .pricing-card-header-premium p {
     line-height: 1.7;
 }

 .premium-features-box span {
     line-height: 1.7;
 }

 /* Premium Features Box - White Background */
 .premium-features-box {
     background: var(--color-surface);
     border-radius: 24px;
     /* rounded-2xl */
     box-shadow: 0 4px 6px -1px var(--palette-alpha-black-10), 0 2px 4px -1px var(--palette-alpha-black-06);
 }

 @media (min-width: 640px) {
     .premium-features-box {
         border-radius: 30px;
         /* rounded-3xl */
     }
 }

 /* เส้นประใต้หัวข้อย่อยแต่ละอัน */
 .premium-features-box .border-dashed,
 .premium-features-box .border-bottom.border-dashed {
     border-style: none !important;
     border-top: none !important;
     border-left: none !important;
     border-right: none !important;
     border-bottom: 1px dashed var(--palette-alpha-black-10) !important;
 }

 /* ลบ border อื่นๆ ที่ไม่ใช่เส้นประ */
 .premium-features-box {
     border: none !important;
 }

 .premium-features-box>div {
     border-top: none !important;
     border-left: none !important;
     border-right: none !important;
 }

 /* Item สุดท้ายไม่มี border */
 .premium-features-box>div:last-child {
     border-bottom: none !important;
 }

 /* ตรวจสอบให้แน่ใจว่า border-bottom เป็น dashed */
 .premium-features-box>div.border-bottom {
     border-bottom: 1px dashed var(--palette-alpha-black-10) !important;
 }

 /* Checkmark Gradient */
 .checkmark-gradient {
     background: var(--gradient-primary);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     font-size: 1rem;
 }

 /* Signup Button */
 /* ===== 3D SIGNUP BUTTON - ธีมเขียว ===== */
 .signup-button {
     /* Background Gradient - ใช้สีเขียวของธีม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;

     /* Text */
     color: #ffffff !important;
     font-weight: bold;

     /* Border */
     border: none !important;

     /* 3D Shadow Effect - สีเขียวเข้ม */
     box-shadow: 0 6px 0 #0F7A15 !important;

     /* Transition */
     transition: all 0.15s ease-in-out;

     /* Transform base */
     transform: translateY(0);
 }

 .signup-button:hover {
     /* ลดเงาลง */
     box-shadow: 0 3px 0 #0F7A15 !important;

     /* เลื่อนปุ่มลง */
     transform: translateY(3px);

     /* รักษาสีเดิม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: #ffffff !important;
 }

 .signup-button:active,
 .signup-button:focus {
     /* กดลงไปสุด */
     box-shadow: none !important;
     transform: translateY(6px);

     /* รักษาสีเดิม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: #ffffff !important;
 }

 .signup-button:focus {
     /* ปิด outline */
     outline: none !important;
 }

 /* Icon และ Text สีขาว */
 .signup-button i,
 .signup-button span {
     color: #ffffff !important;
 }

 .signup-button:hover i,
 .signup-button:hover span,
 .signup-button:active i,
 .signup-button:active span {
     color: #ffffff !important;
 }

 /* Login Button */
 /* ===== 3D LOGIN BUTTON - ธีมเดิม (ขาว+เขียว) ===== */
 .login-button {
     /* Background - ธีมเดิม (ขาว) */
     background: rgba(255, 255, 255, 0.95) !important;

     /* Text - ธีมเดิม (เขียว) */
     color: #22C52C !important;
     font-weight: bold;

     /* Border - ธีมเดิม (เขียวอ่อน) */
     border: 1px solid rgba(34, 197, 44, 0.3) !important;

     /* 3D Shadow Effect - สีเทาเข้ม */
     box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1) !important;

     /* Transition */
     transition: all 0.15s ease-in-out;

     /* Transform base */
     transform: translateY(0);
 }

 .login-button:hover {
     /* ลดเงาลง */
     box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1) !important;

     /* เลื่อนปุ่มลง */
     transform: translateY(3px);

     /* รักษาสีเดิม */
     background: rgba(255, 255, 255, 1) !important;
     color: #16A31E !important;
     border: 1px solid rgba(34, 197, 44, 0.5) !important;
 }

 .login-button:active,
 .login-button:focus {
     /* กดลงไปสุด */
     box-shadow: none !important;
     transform: translateY(6px);

     /* รักษาสีเดิม */
     background: rgba(255, 255, 255, 1) !important;
     color: #16A31E !important;
 }

 .login-button:focus {
     /* ปิด outline */
     outline: none !important;
 }

 /* Icon และ Text สีเขียว */
 .login-button i,
 .login-button span {
     color: #22C52C !important;
 }

 .login-button:hover i,
 .login-button:hover span {
     color: #16A31E !important;
 }

 /* Text Colors */
 .text-primary {
     color: var(--color-primary) !important;
 }

 .text-primary-900 {
     color: var(--color-text);
 }

 .text-primary-700 {
     color: var(--palette-neutral-gray-700);
 }

 .bg-soft {
     background: var(--gradient-soft);
 }

 /* ===== INTEGRATION SECTION ===== */
 .integration-section {
     background-color: var(--white);
     position: relative;
     overflow: hidden;
 }

 .integration-connection-lines {
     opacity: 0.6;
     z-index: 1;
     transition: all 0.3s ease;
 }

 .integration-connection-lines path {
     transition: d 0.3s ease, stroke-dashoffset 0.3s ease;
     vector-effect: non-scaling-stroke;
 }

 .svg-stroke-muted {
     stroke: var(--text-muted, #6b7280);
 }

 .integration-icons-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .integration-icon-wrapper {
     position: absolute;
     transition: all 0.3s ease;
     pointer-events: all;
     z-index: 10;
 }

 /* Icon Size Variations */
 .integration-icon-small {
     width: 55px;
     height: 55px;
 }

 .integration-icon-medium {
     width: 75px;
     height: 75px;
 }

 .integration-icon-large {
     width: 95px;
     height: 95px;
 }

 .integration-icon-wrapper img {
     filter: grayscale(100%);
     opacity: 0.8;
     transition: all 0.3s ease;
     transform: scale(1);
 }

 .integration-icon-wrapper:hover img,
 .integration-icon-wrapper.scaled img {
     filter: grayscale(0%);
     opacity: 1;
     transform: scale(1.2);
 }

 /* Bubble Animation - ฟองสบู่ลอยขึ้นลง + Scale Pulse */
 @keyframes bubbleFloat {

     0%,
     100% {
         transform: translateY(0px) translateX(0px) scale(1);
     }

     25% {
         transform: translateY(-20px) translateX(8px) scale(1.05);
     }

     50% {
         transform: translateY(-30px) translateX(-5px) scale(1.1);
     }

     75% {
         transform: translateY(-20px) translateX(-8px) scale(1.05);
     }
 }

 /* Bubble Float สำหรับ mid icons ที่มี translateY(-50%) */
 @keyframes bubbleFloatMid {

     0%,
     100% {
         transform: translateY(-50%) translateX(0px) scale(1);
     }

     25% {
         transform: translateY(calc(-50% - 20px)) translateX(8px) scale(1.05);
     }

     50% {
         transform: translateY(calc(-50% - 30px)) translateX(-5px) scale(1.1);
     }

     75% {
         transform: translateY(calc(-50% - 20px)) translateX(-8px) scale(1.05);
     }
 }

 .integration-icon-wrapper {
     animation: bubbleFloat 8s ease-in-out infinite;
 }

 /* Mid icons ใช้ animation พิเศษ */
 .integration-icon-mid-left,
 .integration-icon-mid-right {
     animation: bubbleFloatMid 8s ease-in-out infinite;
 }

 /* Stagger animation delays for each icon */
 .integration-icon-top-left {
     animation-delay: 0s;
 }

 .integration-icon-mid-top-left {
     animation-delay: 0.5s;
 }

 .integration-icon-mid-left {
     animation-delay: 1s;
 }

 .integration-icon-mid-bottom-left {
     animation-delay: 1.5s;
 }

 .integration-icon-bottom-left {
     animation-delay: 2s;
 }

 .integration-icon-top-right {
     animation-delay: 0.3s;
 }

 .integration-icon-mid-top-right {
     animation-delay: 0.8s;
 }

 .integration-icon-mid-right {
     animation-delay: 1.3s;
 }

 .integration-icon-mid-bottom-right {
     animation-delay: 1.8s;
 }

 .integration-icon-bottom-right {
     animation-delay: 2.3s;
 }

 /* Left Side Icons Positioning - Arc Pattern */
 .integration-icon-top-left {
     top: 10%;
     left: 2%;
 }

 .integration-icon-mid-top-left {
     top: 25%;
     left: 4%;
 }

 .integration-icon-mid-left {
     top: 50%;
     left: 6%;
     transform: translateY(-50%);
 }

 .integration-icon-mid-bottom-left {
     bottom: 25%;
     left: 4%;
 }

 .integration-icon-bottom-left {
     bottom: 10%;
     left: 2%;
 }

 /* Right Side Icons Positioning - Arc Pattern */
 .integration-icon-top-right {
     top: 10%;
     right: 2%;
 }

 .integration-icon-mid-top-right {
     top: 25%;
     right: 4%;
 }

 .integration-icon-mid-right {
     top: 50%;
     right: 6%;
     transform: translateY(-50%);
 }

 .integration-icon-mid-bottom-right {
     bottom: 25%;
     right: 4%;
 }

 .integration-icon-bottom-right {
     bottom: 10%;
     right: 2%;
 }

 /* Responsive adjustments for Integration */
 @media (min-width: 640px) {
     .integration-icon-small {
         width: 60px;
         height: 60px;
     }

     .integration-icon-medium {
         width: 80px;
         height: 80px;
     }

     .integration-icon-large {
         width: 100px;
         height: 100px;
     }
 }

 @media (min-width: 768px) {
     .integration-icon-small {
         width: 65px;
         height: 65px;
     }

     .integration-icon-medium {
         width: 85px;
         height: 85px;
     }

     .integration-icon-large {
         width: 105px;
         height: 105px;
     }
 }

 @media (min-width: 1024px) {
     .integration-icon-small {
         width: 70px;
         height: 70px;
     }

     .integration-icon-medium {
         width: 90px;
         height: 90px;
     }

     .integration-icon-large {
         width: 115px;
         height: 115px;
     }
 }

 @media (max-width: 640px) {
     .integration-section .position-relative {
         min-height: 400px;
     }

     .integration-icon-small {
         width: 45px;
         height: 45px;
     }

     .integration-icon-medium {
         width: 60px;
         height: 60px;
     }

     .integration-icon-large {
         width: 75px;
         height: 75px;
     }
 }

 /* ===== SLICK CAROUSEL ARROWS ===== */
 .slick-prev,
 .slick-next {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     width: 44px;
     height: 44px;
     background: rgba(255, 255, 255, 0.95);
     /* White/Glass background */
     backdrop-filter: blur(10px);
     border: 2px solid rgba(34, 197, 44, 0.3);
     /* เขียวอ่อน border */
     border-radius: 50%;
     color: var(--color-primary, #22C52C);
     font-size: 1.125rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
     opacity: 1;
 }

 .slick-prev:hover,
 .slick-next:hover {
     transform: translateY(-50%) scale(1.05);
     background: rgba(34, 197, 44, 0.1);
     /* Background tint เขียวอ่อน */
     border-color: rgba(34, 197, 44, 0.5);
     box-shadow: 0 4px 12px rgba(34, 197, 44, 0.3);
     /* ยกเงา */
 }

 .slick-prev:hover i,
 .slick-next:hover i {
     color: var(--color-primary, #22C52C);
 }

 .slick-prev:disabled,
 .slick-next:disabled,
 .slick-prev.slick-disabled,
 .slick-next.slick-disabled {
     opacity: 0.4;
     box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
     /* ลดเงา */
     cursor: not-allowed;
     background: rgba(255, 255, 255, 0.6);
     border-color: rgba(34, 197, 44, 0.15);
 }

 .slick-prev:disabled i,
 .slick-next:disabled i,
 .slick-prev.slick-disabled i,
 .slick-next.slick-disabled i {
     color: rgba(34, 197, 44, 0.4);
 }

 .slick-prev {
     left: -24px;
 }

 .slick-next {
     right: -24px;
 }

 .slick-prev:before,
 .slick-next:before {
     display: none;
 }

 .slick-prev i,
 .slick-next i {
     color: var(--color-primary, #16A31E);
     /* เขียวเข้ม */
 }

 /* Hide arrows on mobile */
 @media (max-width: 1024px) {

     .slick-prev,
     .slick-next {
         display: none !important;
     }
 }

 /* Adjust carousel container for arrows */
 .testimonials-carousel,
 .blogs-carousel {
     position: relative;
     padding: 0 60px;
 }

 @media (max-width: 1024px) {

     .testimonials-carousel,
     .blogs-carousel {
         padding: 0 20px;
     }
 }

 /* Ensure slick carousel displays correctly */
 .testimonials-carousel.slick-initialized {
     display: block !important;
 }

 .testimonials-carousel.slick-initialized .testimonial-item {
     display: block !important;
 }

 /* Force slick to work on mobile */
 @media (max-width: 767px) {
     .testimonials-carousel {
         opacity: 1 !important;
         visibility: visible !important;
     }

     .testimonials-carousel.slick-initialized {
         display: block !important;
     }

     .testimonials-carousel:not(.slick-initialized) {
         display: none !important;
         /* Hide until slick initializes */
     }

     .testimonials-carousel .slick-slide {
         opacity: 1 !important;
     }

     .testimonials-carousel .slick-slide.slick-active {
         opacity: 1 !important;
     }
 }

 /* ===== SLICK CAROUSEL DOTS ===== */
 /* Mobile: 8px (inactive), 10px (active) - เล็กและเหมาะกับมือถือ */
 .testimonials-carousel .slick-dots,
 .blogs-carousel .slick-dots {
     bottom: 15px;
     display: flex !important;
     justify-content: center;
     align-items: center;
     gap: 6px;
     padding: 0;
     margin: 0;
     list-style: none;
     position: relative;
     z-index: 1;
 }

 .testimonials-carousel .slick-dots li,
 .blogs-carousel .slick-dots li {
     width: 8px;
     height: 8px;
     margin: 0;
     padding: 0;
     position: relative;
     display: inline-block;
 }

 /* ซ่อน dots บน mobile */
 @media (max-width: 767px) {

     .testimonials-carousel .slick-dots,
     .blogs-carousel .slick-dots {
         display: none !important;
     }
 }

 .testimonials-carousel .slick-dots li button,
 .blogs-carousel .slick-dots li button {
     width: 8px;
     height: 8px;
     padding: 0;
     border-radius: 50%;
     background: rgba(209, 213, 219, 0.8);
     /* เทา - ไม่ใช่เขียวอ่อน */
     border: 1px solid rgba(255, 255, 255, 0.7);
     /* ring ขาวบาง */
     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
     /* shadow เบา */
     transition: all 0.3s ease;
     cursor: pointer;
     position: relative;
     z-index: 1;
 }

 .testimonials-carousel .slick-dots li button:before,
 .blogs-carousel .slick-dots li button:before {
     display: none;
 }

 /* Active dot: fill เขียว + ring ขาว 1.5px + shadow ฟุ้งนิ่ม - ขนาด 10px */
 .testimonials-carousel .slick-dots li.slick-active button,
 .blogs-carousel .slick-dots li.slick-active button {
     background: var(--color-primary, #22C52C);
     /* fill เขียว */
     border: 1.5px solid white;
     /* ring ขาว 1.5px */
     box-shadow: 0 0 5px rgba(34, 197, 44, 0.5), 0 1px 3px rgba(34, 197, 44, 0.3);
     /* shadow ฟุ้งนิ่ม */
     transform: scale(1.25);
     /* 8px * 1.25 = 10px */
     width: 8px;
     height: 8px;
     position: relative;
     z-index: 2;
 }

 /* Hover/Focus: ขยายเล็กน้อย + shadow ชัดขึ้น */
 .testimonials-carousel .slick-dots li button:hover,
 .testimonials-carousel .slick-dots li button:focus,
 .blogs-carousel .slick-dots li button:hover,
 .blogs-carousel .slick-dots li button:focus {
     transform: scale(1.15);
     box-shadow: 0 2px 6px rgba(34, 197, 44, 0.4);
     /* shadow ชัดขึ้น */
     background: rgba(34, 197, 44, 0.5);
     border-color: rgba(255, 255, 255, 0.9);
 }

 .testimonials-carousel .slick-dots li.slick-active button:hover,
 .testimonials-carousel .slick-dots li.slick-active button:focus,
 .blogs-carousel .slick-dots li.slick-active button:hover,
 .blogs-carousel .slick-dots li.slick-active button:focus {
     background: var(--color-primary, #22C52C);
     border: 2px solid white;
     box-shadow: 0 0 8px rgba(34, 197, 44, 0.6), 0 2px 6px rgba(34, 197, 44, 0.4);
     transform: scale(1.2);
 }

 /* Desktop: 12-14px */
 @media (min-width: 768px) {

     .testimonials-carousel .slick-dots,
     .blogs-carousel .slick-dots {
         bottom: 20px;
         gap: 10px;
     }

     .testimonials-carousel .slick-dots li,
     .blogs-carousel .slick-dots li {
         width: 14px;
         height: 14px;
         margin: 0;
     }

     .testimonials-carousel .slick-dots li button,
     .blogs-carousel .slick-dots li button {
         width: 14px;
         height: 14px;
     }

     .testimonials-carousel .slick-dots li.slick-active button,
     .blogs-carousel .slick-dots li.slick-active button {
         width: 14px;
         height: 14px;
     }

     /* Desktop: แสดง dots ครบ */
     .testimonials-carousel .slick-dots li:nth-child(n+5),
     .blogs-carousel .slick-dots li:nth-child(n+5) {
         display: inline-block !important;
     }
 }

 /* ===== TESTIMONIALS SECTION ===== */
 .testimonial-card {
     background: var(--color-surface);
     padding: 2rem;
     border-radius: 16px;
     /* rounded-2xl = 24px แต่ testimonial card ใช้ 16px */
     border: 1px solid var(--palette-alpha-green-10);
     box-shadow: 0 4px 12px var(--palette-alpha-black-05);
     height: 100%;
 }

 .testimonial-stars {
     color: var(--color-rating);
     font-size: 1.25rem;
     margin-bottom: 1rem;
 }

 .testimonial-text {
     color: var(--text-muted);
     margin-bottom: 1.5rem;
     line-height: 1.7;
     /* จำกัด 3 บรรทัด และแสดง ... เมื่อเกิน */
     display: -webkit-box;
     -webkit-line-clamp: 3;
     line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     max-height: calc(1.7em * 3);
     /* line-height * 3 lines */
 }

 .testimonial-author {
     display: flex;
     align-items: center;
     gap: 1rem;
 }

 .testimonial-avatar {
     width: 48px;
     height: 48px;
     background: var(--gradient-primary);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-text-inverse);
     font-weight: bold;
 }

 .testimonial-name {
     font-weight: 600;
     color: var(--gray-900);
 }

 /* ===== BLOG SECTION ===== */
 .blog-card {
     background: var(--color-surface);
     border-radius: 16px;
     /* rounded-2xl = 24px แต่ blog card ใช้ 16px */
     overflow: hidden;
     border: 1px solid var(--palette-alpha-green-10);
     transition: all 0.3s;
     height: 100%;
 }

 .blog-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
 }

 .blog-image {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .blog-content {
     padding: 1.5rem;
 }

 .blog-title {
     font-size: 1.25rem;
     font-weight: 700;
     color: var(--gray-900);
     margin-bottom: 1rem;
     /* จำกัด 2 บรรทัด และแสดง ... เมื่อเกิน */
     display: -webkit-box;
     -webkit-line-clamp: 2;
     line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 1.5;
     max-height: calc(1.5em * 2);
     /* line-height * 2 lines */
 }

 .blog-button {
     color: var(--primary-green);
     font-weight: 600;
     display: inline-flex;
     align-items: center;
     gap: 0.5rem;
     margin-top: 1rem;
 }

 .blog-button:hover {
     color: var(--primary-green-dark);
     text-decoration: none;
 }

 /* ===== CTA SECTIONS ===== */
 /* ===== CTA SECTIONS STYLES ===== */
 .cta-section-card {
     background: var(--color-surface);
     border-radius: 24px;
     padding: 2.5rem;
     box-shadow: 0 4px 12px var(--palette-alpha-black-05);
     transition: all 0.3s ease;
     height: 100%;
     border: 1px solid var(--palette-alpha-green-10);
 }

 .cta-section-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 8px 24px var(--palette-alpha-green-15);
     border-color: var(--palette-alpha-green-20);
 }

 .cta-content {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--color-text);
     margin-bottom: 1rem;
     line-height: 1.4;
 }

 .cta-features {
     list-style: none;
     padding: 0;
     margin: 0 0 1.5rem 0;
 }

 .cta-features li {
     padding: 0.5rem 0;
     font-size: 0.9375rem;
     color: var(--color-text-muted);
     line-height: 1.6;
     display: flex;
     align-items: flex-start;
     gap: 0.75rem;
 }

 .cta-features li::before {
     content: "✓";
     color: var(--color-primary);
     font-weight: bold;
     font-size: 1rem;
     flex-shrink: 0;
     margin-top: 0.125rem;
 }

 .cta-image-container {
     position: relative;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: 0 8px 24px var(--palette-alpha-black-10);
     transition: transform 0.3s ease;
 }

 .cta-image-container:hover {
     transform: scale(1.02);
 }

 .cta-image-container img {
     width: 100%;
     height: auto;
     display: block;
     transition: transform 0.5s ease;
 }

 .cta-image-container:hover img {
     transform: scale(1.05);
 }

 .cta-button-large {
     font-size: 1rem;
     padding: 0.875rem 2rem;
     border-radius: 9999px;
     font-weight: 600;
     white-space: nowrap;
     transition: all 0.3s ease;
 }

 .cta-button-large:hover {
     transform: translateY(-2px);
     box-shadow: 0 6px 16px var(--palette-alpha-green-40);
 }

 @media (min-width: 768px) {
     .cta-section-card {
         padding: 3rem;
     }

     .cta-content {
         font-size: 1.75rem;
         margin-bottom: 1.25rem;
     }

     .cta-features li {
         font-size: 1rem;
         padding: 0.625rem 0;
     }

     .cta-button-large {
         font-size: 1.125rem;
         padding: 1rem 2.5rem;
     }
 }

 /* ===== FAQ SECTION ===== */
 .faq-item {
     border: 1px solid var(--palette-alpha-green-10);
     border-radius: 12px;
     /* rounded-xl */
     margin-bottom: 1rem;
     overflow: hidden;
     background: var(--color-surface);
     box-shadow: 0 2px 8px var(--palette-alpha-black-05);
     transition: all 0.3s;
 }

 .faq-item:hover {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .faq-question {
     padding: 1.5rem;
     background: var(--white);
     cursor: pointer;
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     font-weight: 600;
     color: var(--gray-900);
     transition: all 0.3s;
 }

 .faq-question:hover {
     background: var(--gray-50);
 }

 .faq-question.active {
     background: rgba(34, 197, 44, 0.05);
     border-bottom: 1px solid rgba(34, 197, 44, 0.1);
 }

 .faq-question-number {
     color: var(--primary-green);
     font-weight: 700;
     margin-right: 0.75rem;
     flex-shrink: 0;
 }

 .faq-question-text {
     flex: 1;
 }

 .faq-question-subtitle {
     font-size: 0.875rem;
     color: var(--text-muted);
     font-weight: 500;
     margin-top: 0.5rem;
     margin-left: 2rem;
 }

 .faq-chevron {
     transition: transform 0.3s;
     flex-shrink: 0;
     color: var(--primary-green);
 }

 .faq-question.active .faq-chevron {
     transform: rotate(180deg);
 }

 .faq-answer {
     padding: 0 1.5rem;
     max-height: 0;
     overflow: hidden;
     transition: max-height 0.3s, padding 0.3s;
     color: var(--text-muted);
     line-height: 1.7;
 }

 .faq-answer.active {
     padding: 1.5rem;
     max-height: 1000px;
 }

 .faq-answer-content {
     padding-left: 2rem;
 }

 .faq-answer h6 {
     font-size: 0.875rem;
     font-weight: 600;
     color: var(--gray-900);
     margin-top: 1rem;
     margin-bottom: 0.5rem;
 }

 .faq-answer ul {
     list-style: disc;
     padding-left: 1.5rem;
     margin-top: 0.5rem;
 }

 .faq-answer li {
     font-size: 0.875rem;
     margin-bottom: 0.25rem;
 }

 /* ===== CTA SECTION ===== */
 .cta-section {
     background: var(--white);
     position: relative;
     overflow: hidden;
 }

 .cta-container {
     background: var(--gradient-primary);
     border-radius: 24px;
     /* rounded-2xl */
     position: relative;
     box-shadow: 0 25px 50px -12px var(--palette-alpha-black-25);
 }

 @media (min-width: 640px) {
     .cta-container {
         border-radius: 30px;
         /* rounded-3xl */
     }
 }

 /* CTA Image Wrapper - Premium Design */
 .cta-image-wrapper {
     position: relative;
     overflow: hidden;
     border-radius: 24px;
     box-shadow: 0 20px 60px -12px var(--palette-alpha-black-30);
 }

 @media (min-width: 640px) {
     .cta-image-wrapper {
         border-radius: 30px;
     }
 }

 .cta-image-wrapper::before {
     content: '';
     position: absolute;
     inset: 0;
     background: linear-gradient(135deg, rgba(34, 197, 44, 0.1) 0%, rgba(22, 163, 30, 0.2) 100%);
     z-index: 1;
     pointer-events: none;
 }

 .cta-image-wrapper img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
     filter: brightness(0.95);
 }

 .cta-image-wrapper:hover img {
     transform: scale(1.08);
     filter: brightness(1);
 }

 /* Chat Message Bubbles - Premium Glassmorphism */
 .cta-chat-bubble {
     position: absolute;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1.5px solid rgba(255, 255, 255, 0.8);
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
     border-radius: 18px;
     padding: 14px 18px;
     max-width: 220px;
     z-index: 20;
     animation: chatFloat 3s ease-in-out infinite;
 }

 .cta-chat-bubble::before {
     content: '';
     position: absolute;
     width: 0;
     height: 0;
     border-style: solid;
 }

 /* Chat bubble tail - pointing left */
 .cta-chat-bubble.chat-left::before {
     left: -8px;
     top: 20px;
     border-width: 8px 8px 8px 0;
     border-color: transparent rgba(255, 255, 255, 0.95) transparent transparent;
 }

 /* Chat bubble tail - pointing right */
 .cta-chat-bubble.chat-right::before {
     right: -8px;
     top: 20px;
     border-width: 8px 0 8px 8px;
     border-color: transparent transparent transparent rgba(255, 255, 255, 0.95);
 }

 .cta-chat-bubble:hover {
     transform: translateY(-4px) scale(1.02);
     box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
     background: rgba(255, 255, 255, 1);
 }

 .cta-chat-bubble .chat-avatar {
     width: 32px;
     height: 32px;
     border-radius: 50%;
     background: var(--gradient-primary);
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: bold;
     font-size: 0.875rem;
     margin-bottom: 8px;
     flex-shrink: 0;
 }

 .cta-chat-bubble .chat-name {
     font-size: 0.75rem;
     font-weight: 600;
     color: var(--color-primary);
     margin-bottom: 4px;
 }

 .cta-chat-bubble .chat-message {
     font-size: 0.875rem;
     color: var(--color-text);
     line-height: 1.5;
     margin: 0;
 }

 .cta-chat-bubble .chat-time {
     font-size: 0.625rem;
     color: var(--color-text-muted);
     margin-top: 6px;
     text-align: right;
 }

 /* Chat Animation */
 @keyframes chatFloat {

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

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

 /* Different animation delays for multiple bubbles */
 .cta-chat-bubble:nth-of-type(1) {
     animation-delay: 0s;
 }

 .cta-chat-bubble:nth-of-type(2) {
     animation-delay: 0.5s;
 }

 .cta-chat-bubble:nth-of-type(3) {
     animation-delay: 1s;
 }

 .cta-chat-bubble:nth-of-type(4) {
     animation-delay: 1.5s;
 }

 .cta-chat-bubble:nth-of-type(5) {
     animation-delay: 2s;
 }

 /* Responsive Chat Bubbles */
 @media (max-width: 767px) {
     .cta-chat-bubble {
         max-width: 180px;
         padding: 12px 14px;
         font-size: 0.8125rem;
     }
 }

 @media (min-width: 768px) {
     .cta-chat-bubble {
         max-width: 240px;
         padding: 16px 20px;
     }
 }

 @media (min-width: 640px) {
     .cta-feedback-badge {
         border-radius: 12px;
         /* rounded-xl */
     }
 }

 /* CTA Feedback Badge - Mobile: ซ่อนทั้งหมด */
 @media (max-width: 768px) {
     .cta-feedback-badge {
         display: none !important;
     }

     .marquee-wrapper {
         padding: 1rem 0;
     }
 }

 /* CTA Feedback Badge - Fade In Top Animation (Chat-like bounce) */
 @keyframes fadeInTopBounce {
     0% {
         opacity: 0;
         transform: translateY(-30px) scale(0.7);
     }

     40% {
         opacity: 0.6;
         transform: translateY(8px) scale(1.08);
     }

     70% {
         opacity: 0.9;
         transform: translateY(-3px) scale(0.98);
     }

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

 .cta-feedback-badge.fade-in-top {
     animation: fadeInTopBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
     opacity: 0;
 }

 /* CTA Buttons */
 /* CTA Signin Button - 3D Effect (ธีมเดิม) */
 .cta-signin-button {
     /* Background - ธีมเดิม (ขาว) */
     background: #ffffff !important;

     /* Text - ธีมเดิม (เขียว) */
     color: #22C52C !important;
     font-weight: bold;

     /* Border - ธีมเดิม (เขียวอ่อน) */
     border: 1px solid rgba(34, 197, 44, 0.3) !important;

     /* 3D Shadow Effect */
     box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1) !important;

     /* Transition */
     transition: all 0.15s ease-in-out;

     /* Transform base */
     transform: translateY(0);
 }

 .cta-signin-button:hover {
     /* ลดเงาลง */
     box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1) !important;

     /* เลื่อนปุ่มลง */
     transform: translateY(3px);

     /* รักษาสีเดิม */
     background: #ffffff !important;
     color: #16A31E !important;
     border-color: rgba(34, 197, 44, 0.5) !important;
 }

 .cta-signin-button:active,
 .cta-signin-button:focus {
     /* กดลงไปสุด */
     box-shadow: none !important;
     transform: translateY(6px);

     /* รักษาสีเดิม */
     background: #ffffff !important;
     color: #16A31E !important;
 }

 .cta-signin-button:focus {
     outline: none !important;
 }

 /* Icon และ Text สีเขียว */
 .cta-signin-button i,
 .cta-signin-button span {
     color: #22C52C !important;
 }

 .cta-signin-button:hover i,
 .cta-signin-button:hover span {
     color: #16A31E !important;
 }

 /* CTA Signup Button - 3D Effect */
 .cta-signup-button {
     /* Background Gradient - ใช้สีเขียวของธีม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;

     /* Text */
     color: #ffffff !important;
     font-weight: bold;

     /* Border */
     border: none !important;

     /* 3D Shadow Effect */
     box-shadow: 0 6px 0 #0F7A15 !important;

     /* Transition */
     transition: all 0.15s ease-in-out;

     /* Transform base */
     transform: translateY(0);
 }

 .cta-signup-button:hover {
     /* ลดเงาลง */
     box-shadow: 0 3px 0 #0F7A15 !important;

     /* เลื่อนปุ่มลง */
     transform: translateY(3px);

     /* รักษาสีเดิม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: #ffffff !important;
 }

 .cta-signup-button:active,
 .cta-signup-button:focus {
     /* กดลงไปสุด */
     box-shadow: none !important;
     transform: translateY(6px);

     /* รักษาสีเดิม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: #ffffff !important;
 }

 .cta-signup-button:focus {
     outline: none !important;
 }

 /* Icon และ Text สีขาว */
 .cta-signup-button i,
 .cta-signup-button span {
     color: #ffffff !important;
 }

 /* Text Colors */
 .text-body {
     color: var(--gray-900);
 }

 .text-inverse {
     color: white;
 }

 /* ===== FOOTER ===== */
 .footer-section {
     background-color: var(--palette-neutral-gray-900);
     color: var(--palette-neutral-gray-400);
 }

 /* Footer Text */
 .footer-text {
     color: var(--palette-neutral-gray-400);
     font-size: 0.875rem;
     line-height: 1.6;
 }

 @media (min-width: 640px) {
     .footer-text {
         font-size: 1rem;
     }
 }

 /* Footer Heading */
 .footer-heading {
     color: var(--color-text-inverse);
     font-size: 1.125rem;
     font-weight: 700;
     text-shadow: 0 1px 2px var(--palette-alpha-black-20);
     opacity: 1;
 }

 @media (min-width: 640px) {
     .footer-heading {
         font-size: 1.25rem;
     }
 }

 /* Footer Icon */
 .footer-icon {
     color: var(--palette-neutral-gray-400);
     font-size: 1rem;
     width: 20px;
 }

 /* Footer Link */
 .footer-link {
     color: var(--palette-neutral-gray-400);
     transition: color 0.3s ease;
     text-decoration: none;
 }

 .footer-link:hover {
     color: var(--color-text-inverse);
     text-decoration: none;
 }

 /* Footer Social Icon */
 .footer-social-icon {
     width: 40px;
     height: 40px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--color-text-inverse);
     transition: all 0.3s ease;
     text-decoration: none;
     background: var(--palette-alpha-white-10);
 }

 .footer-social-icon:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px var(--palette-alpha-black-30);
     text-decoration: none;
 }

 .footer-social-icon i {
     font-size: 1rem;
     color: white !important;
 }

 /* Social Icon Colors */
 .footer-social-icon[data-social="facebook"] {
     background-color: var(--brand-facebook);
 }

 .footer-social-icon[data-social="facebook"]:hover {
     background-color: var(--brand-facebook-hover);
 }

 .footer-social-icon[data-social="linkedin"] {
     background-color: var(--brand-linkedin);
 }

 .footer-social-icon[data-social="linkedin"]:hover {
     background-color: var(--brand-linkedin-hover);
 }

 .footer-social-icon[data-social="messenger"] {
     background-color: var(--brand-messenger);
 }

 .footer-social-icon[data-social="messenger"]:hover {
     background-color: var(--brand-messenger-hover);
 }

 .footer-social-icon[data-social="x"] {
     background-color: #000000 !important;
     /* X (Twitter) brand color - black */
 }

 .footer-social-icon[data-social="x"]:hover {
     background-color: #1a1a1a !important;
     /* Darker on hover */
 }

 .footer-social-icon[data-social="x"] i,
 .footer-social-icon[data-social="x"] i.fab,
 .footer-social-icon[data-social="x"] i.fa-x-twitter {
     color: #ffffff !important;
     font-size: 1rem !important;
 }

 .footer-social-icon[data-social="x"]:hover i,
 .footer-social-icon[data-social="x"]:hover i.fab,
 .footer-social-icon[data-social="x"]:hover i.fa-x-twitter {
     color: #ffffff !important;
 }

 .footer-social-icon[data-social="line"] {
     background-color: var(--brand-line);
 }

 .footer-social-icon[data-social="line"]:hover {
     background-color: var(--brand-line-hover);
 }

 .footer-social-icon[data-social="whatsapp"] {
     background-color: var(--brand-whatsapp);
 }

 .footer-social-icon[data-social="whatsapp"]:hover {
     background-color: var(--brand-whatsapp-hover);
 }

 .footer-social-icon[data-social="instagram"] {
     background: var(--brand-instagram);
 }

 .footer-social-icon[data-social="instagram"]:hover {
     background: var(--brand-instagram-hover);
 }

 .footer-social-icon[data-social="twitch"] {
     background-color: var(--brand-twitch);
 }

 .footer-social-icon[data-social="twitch"]:hover {
     background-color: var(--brand-twitch-hover);
 }

 .footer-social-icon[data-social="youtube"] {
     background-color: var(--brand-youtube);
 }

 .footer-social-icon[data-social="youtube"]:hover {
     background-color: var(--brand-youtube-hover);
 }

 /* Footer Floating Buttons */
 .footer-floating-button {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: none;
     cursor: pointer;
     transition: all 0.3s ease;
     font-size: 1.25rem;
 }

 /* Footer Floating Signup Button - 3D Effect */
 .footer-floating-button.signup-button {
     /* Background Gradient - ใช้สีเขียวของธีม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: #ffffff !important;
     border: none !important;

     /* 3D Shadow Effect */
     box-shadow: 0 6px 0 #0F7A15 !important;

     /* Transition */
     transition: all 0.15s ease-in-out;

     /* Transform base */
     transform: translateY(0);
 }

 .footer-floating-button.signup-button i {
     color: #ffffff !important;
 }

 .footer-floating-button.signup-button:hover {
     /* ลดเงาลง */
     box-shadow: 0 3px 0 #0F7A15 !important;

     /* เลื่อนปุ่มลง */
     transform: translateY(3px);

     /* รักษาสีเดิม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: #ffffff !important;
 }

 .footer-floating-button.signup-button:active {
     /* กดลงไปสุด */
     box-shadow: none !important;
     transform: translateY(6px);

     /* รักษาสีเดิม */
     background: linear-gradient(to bottom, #22C52C, #16A31E) !important;
     color: #ffffff !important;
 }

 .footer-floating-button.signup-button:focus {
     outline: none !important;
 }

 .theme-fab-inline {
     background: rgba(255, 255, 255, 0.1) !important;
     color: white !important;
 }

 .theme-fab-inline:hover {
     background: rgba(255, 255, 255, 0.2) !important;
     transform: translateY(-3px);
 }

 .theme-fab-icon {
     width: 20px;
     height: 20px;
 }

 /* Responsive adjustments for Footer */
 @media (max-width: 768px) {
     .footer-section {
         padding-bottom: 5rem;
     }

     .footer-floating-button {
         width: 44px !important;
         height: 50px !important;
         font-size: 1rem !important;
     }

     .text-header-title-bio {
         top: -35px !important;
     }
 }

 /* ===== SCROLL TO TOP ===== */
 .scroll-to-top {
     position: fixed;
     bottom: 2rem;
     right: 2rem;
     width: 48px;
     height: 48px;
     background: var(--primary-green);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s;
     z-index: 999;
     border: none;
 }

 .scroll-to-top.visible {
     opacity: 1;
     visibility: visible;
 }

 .scroll-to-top:hover {
     background: var(--primary-green-dark);
     transform: translateY(-4px);
     color: white;
 }

 /* ===== AOS ANIMATION FIXES FOR MOBILE ===== */
 /* Disable AOS animations on mobile - Show elements immediately */
 @media (max-width: 767px) {

     /* Remove all AOS animations on mobile */
     [data-aos] {
         opacity: 1 !important;
         transform: none !important;
         transition: none !important;
     }

     /* Ensure elements are visible immediately */
     [data-aos]:not(.aos-animate),
     [data-aos].aos-animate {
         opacity: 1 !important;
         transform: none !important;
     }

     /* Fix min-height for CTA section image container on mobile */
     .col-lg-6.position-relative[style*="min-height: 450px"] {
         min-height: auto !important;
     }
 }

 /* ===== RESPONSIVE ===== */

 /* Mobile First - Base styles for mobile */
 @media (max-width: 767px) {
     .mobile-menu-link.text-white {
         color: var(--palette-neutral-gray-50) !important;
     }

     /* Hero Section - Mobile */
     .hero-section {
         padding-top: 90px !important;
         padding-bottom: 0 !important;
         min-height: auto !important;
     }

     .hero__content {
         padding-top: 1.5rem !important;
         padding-bottom: 2rem !important;
         padding-left: 1rem !important;
         padding-right: 1rem !important;
     }

     .hero-title {
         margin-bottom: 1.5rem !important;
     }

     .hero-title-line--primary,
     .hero-title-line--secondary {
         font-size: clamp(1.5rem, 5vw, 2rem) !important;
         line-height: 1.2 !important;
         word-break: keep-all;
         overflow-wrap: break-word;
     }

     .hero-subtitle {
         font-size: clamp(0.875rem, 3vw, 1rem) !important;
         line-height: 1.6 !important;
         margin-top: 1rem;
         padding-left: 1rem !important;
         padding-right: 1rem !important;
     }

     /* Hero Mockup - Mobile */
     .hero__mockup {
         padding-left: 1rem !important;
         padding-right: 1rem !important;
         padding-bottom: 0 !important;
     }

     .mockup-frame {
         padding: 0.5rem !important;
         max-width: 100% !important;
     }

     /* Hide floating elements on mobile */
     /* .floating-elements,
            .floating-card,
            .floating-rocket {
                display: none !important;
            }
            
            .feature-card-overlay {
                display: none !important;
            } */

     /* Header - Mobile */
     .site-header {
         height: 64px !important;
     }

     .navbar-custom {
         padding-left: 1rem !important;
         padding-right: 1rem !important;
         height: 64px !important;
     }

     /* Mobile Menu - Enhanced Mobile Styles */
     #mobile-menu {
         top: 64px !important;
     }

     .mobile-menu-nav {
         padding: 1.25rem 0.875rem !important;
         background: var(--gradient-primary);
     }

     .mobile-menu-link {
         padding: 0.875rem 1rem !important;
         font-size: 0.9375rem !important;
         min-height: 52px !important;
     }

     .mobile-menu-link i {
         width: 24px !important;
         height: 24px !important;
         font-size: 1.125rem !important;
         margin-right: 0.875rem !important;
         min-width: 24px !important;
         min-height: 24px !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
     }

     .mobile-menu-nav>div:first-of-type,
     .mobile-menu-nav>div:last-of-type {
         margin-top: 0.75rem !important;
         padding-top: 2.65rem !important;
     }

     .mobile-menu-nav>div:first-of-type button {
         padding: 0.75rem 1rem !important;
         font-size: 0.875rem !important;
     }

     #mobile-menu-toggle {
         width: 44px !important;
         height: 44px !important;
         min-width: 44px !important;
         min-height: 44px !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
     }

     #mobile-menu-toggle .mobile-menu-icon {
         width: 24px !important;
         height: 24px !important;
         font-size: 1.25rem !important;
     }

     /* Section Headers - Mobile */
     .section-header {
         margin-bottom: 2rem !important;
     }

     .section-title {
         font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
         line-height: 1.2 !important;
     }

     .badge-primary {
         padding: 0.5rem 1rem !important;
         font-size: 0.75rem !important;
         margin-bottom: 1rem !important;
     }

     /* Services Section - Mobile */
     .service-card {
         padding: 1.25rem !important;
         margin-bottom: 1.5rem !important;
     }

     .service-icon {
         width: 56px !important;
         height: 56px !important;
         font-size: 1.5rem !important;
         margin-bottom: 1rem !important;
     }

     /* Service Icon Responsive - Ensure touch-friendly */
     @media (max-width: 767px) {
         .service-icon {
             min-width: 56px !important;
             min-height: 56px !important;
         }
     }

     .service-card h3 {
         font-size: 1.125rem !important;
         margin-bottom: 0.75rem !important;
     }

     .service-card p {
         font-size: 0.875rem !important;
         line-height: 1.6 !important;
     }

     /* Features Section - Mobile 2 Columns */
     .features-section .row {
         gap: 0.75rem !important;
     }

     .feature-item {
         padding: 1rem 0.75rem !important;
     }

     .feature-icon {
         width: 64px !important;
         height: 64px !important;
         font-size: 1.75rem !important;
         margin-bottom: 0.75rem !important;
     }

     /* Feature Icon Responsive - Ensure touch-friendly */
     @media (max-width: 767px) {
         .feature-icon {
             min-width: 64px !important;
             min-height: 64px !important;
         }
     }

     /* ===== INDEX.PHP MOBILE FIXES ===== */

     /* Hero Section Mobile */
     .vuto-hero-title {
         font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
         line-height: 1.2 !important;
         margin-top: 2rem !important;
         padding: 0 1rem !important;
         word-break: break-word;
     }

     .vuto-hero-subtitle {
         font-size: clamp(0.875rem, 4vw, 1.125rem) !important;
         padding: 0 1rem !important;
         margin-top: 1rem !important;
         line-height: 1.6 !important;
     }

     .vuto-store-btns {
         flex-direction: column !important;
         gap: 0.75rem !important;
         padding: 0 1rem !important;
         margin-top: 1.5rem !important;
         align-items: center !important;
         justify-content: center !important;
     }

     .vuto-btn-store {
         width: 100% !important;
         max-width: 280px !important;
         margin: 0 auto !important;
         padding: 0.75rem 1.25rem !important;
         /* เพิ่มความสูงของปุ่ม */
         justify-content: center !important;
         /* จัดกึ่งกลาง content */
         align-items: center !important;
     }

     .vuto-store-icon {
         font-size: 1.75rem !important;
         /* เพิ่มขนาด icon */
     }

     .vuto-store-text {
         text-align: center !important;
         /* จัดกึ่งกลาง text */
         align-items: center !important;
     }

     .vuto-store-label {
         font-size: 0.65rem !important;
         /* เพิ่มขนาด label เล็กน้อย */
     }

     .vuto-store-name {
         font-size: 0.95rem !important;
         /* เพิ่มขนาด name */
     }

     /* Hero Section Container - Allow floating but clip overflow */
     .vuto-hero-section {
         overflow-x: hidden !important;
         /* Clip horizontal overflow */
         width: 100% !important;
         max-width: 100% !important;
     }

     .vuto-hero-section .container {
         overflow-x: hidden !important;
         /* Clip horizontal overflow */
         width: 100% !important;
         max-width: 100% !important;
         padding-left: 0.75rem !important;
         padding-right: 0.75rem !important;
     }

     .vuto-visual-container {
         margin-top: 2rem !important;
         padding: 0 0.75rem !important;
         /* Safe zone for floating pills */
         overflow: visible !important;
         /* Allow pills to float */
         width: 100% !important;
         max-width: 100% !important;
         position: relative !important;
     }

     /* Floating Pills Mobile - Float freely but stay within bounds */
     .vuto-pill {
         font-size: 0.7rem !important;
         padding: 0.45rem 0.75rem !important;
         max-width: 130px !important;
         white-space: nowrap !important;
         overflow: visible !important;
         display: flex !important;
         /* Always show on mobile */
         position: absolute !important;
         z-index: 20 !important;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
     }

     .vuto-pill i {
         font-size: 0.75rem !important;
         flex-shrink: 0 !important;
         margin-left: 0.25rem !important;
     }

     /* Pills positioning - Float near edges with safe margins */
     .vuto-pill-budget {
         left: 0.5rem !important;
         /* Safe distance from left edge */
         top: 20% !important;
         --rot: -5deg;
         transform: rotate(-5deg) !important;
         animation: vuto-float 6s ease-in-out infinite !important;
         animation-delay: 0s !important;
     }

     .vuto-pill-graphs {
         right: 0.5rem !important;
         /* Safe distance from right edge */
         top: 15% !important;
         --rot: 5deg;
         transform: rotate(5deg) !important;
         animation: vuto-float 6s ease-in-out infinite !important;
         animation-delay: 2s !important;
     }

     .vuto-pill-alerts {
         left: 0.5rem !important;
         /* Safe distance from left edge */
         bottom: 25% !important;
         --rot: 8deg;
         transform: rotate(8deg) !important;
         animation: vuto-float 6s ease-in-out infinite !important;
         animation-delay: 1s !important;
     }

     .vuto-pill-security {
         right: 0.5rem !important;
         /* Safe distance from right edge */
         bottom: 10% !important;
         --rot: -3deg;
         transform: rotate(-3deg) !important;
         animation: vuto-float 6s ease-in-out infinite !important;
         animation-delay: 3s !important;
     }

     .vuto-phone-mockup {
         max-width: 100% !important;
         height: auto !important;
     }

     /* Partners Carousel Mobile */
     .partners-carousel {
         overflow: visible !important;
         /* Allow slick to handle overflow */
         -webkit-overflow-scrolling: touch !important;
         scrollbar-width: none !important;
         display: block !important;
         /* Ensure display */
         visibility: visible !important;
         opacity: 1 !important;
     }

     .partners-carousel.slick-initialized {
         display: block !important;
         overflow: hidden !important;
         /* Let slick handle overflow */
     }

     .partners-carousel::-webkit-scrollbar {
         display: none !important;
     }

     .partner-item {
         min-width: 120px !important;
         flex-shrink: 0 !important;
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
         padding: 0.5rem !important;
     }

     .partner-item img {
         height: 50px !important;
         width: auto !important;
         max-width: 100px !important;
         display: block !important;
         visibility: visible !important;
         opacity: 0.7 !important;
         object-fit: contain !important;
     }

     /* Ensure slick slides are visible */
     .partners-carousel .slick-slide {
         display: block !important;
     }

     .partners-carousel .slick-slide>div {
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
     }

     /* Fix for slick track */
     .partners-carousel .slick-track {
         display: flex !important;
         align-items: center !important;
     }

     .partners-carousel .slick-list {
         overflow: hidden !important;
         /* Let slick handle overflow */
         margin: 0 !important;
     }

     /* Ensure images are visible in mobile */
     #partners {
         overflow: visible !important;
     }

     #partners .container {
         overflow: visible !important;
     }

     #partners .section-white {
         overflow: visible !important;
     }

     /* Fix for partner images not showing */
     .partners-carousel .partner-item .d-flex {
         display: flex !important;
         align-items: center !important;
         justify-content: center !important;
         min-height: 60px !important;
     }

     .partners-carousel .partner-item .d-flex img {
         display: block !important;
         visibility: visible !important;
         opacity: 0.7 !important;
         max-height: 60px !important;
         width: auto !important;
         height: auto !important;
     }

     /* Services Section Mobile */
     .features-cards-left,
     .features-cards-right {
         margin-bottom: 0rem !important;
     }

     .features-phone-col {
         order: -1 !important;
         margin-bottom: 2rem !important;
     }

     .features-card {
         margin-bottom: 1rem !important;
         padding: 1.25rem !important;
     }

     .features-title {
         font-size: 1.125rem !important;
     }

     .features-desc {
         font-size: 0.875rem !important;
         line-height: 1.6 !important;
     }

     /* Additional Features Grid Mobile */
     .col-6.col-md-4.col-lg-3 {
         padding-left: 0.5rem !important;
         padding-right: 0.5rem !important;
     }

     .feature-item {
         padding: 1rem 0.5rem !important;
     }

     .feature-item h3 {
         font-size: 0.9375rem !important;
     }

     .feature-item p {
         font-size: 0.8125rem !important;
     }

     /* Statistics Section Mobile */
     .col-md-6.order-2.order-md-1 {
         order: 2 !important;
     }

     .col-md-6.order-1.order-md-2 {
         order: 1 !important;
         margin-bottom: 1rem !important;
     }

     .stat-number {
         font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
     }

     .stat-label {
         font-size: 0.75rem !important;
     }

     /* Customer feedback overlay - show on mobile but smaller */
     .customer-feedback-overlay {
         max-width: 150px !important;
         padding: 8px 12px !important;
         font-size: 0.625rem !important;
     }

     /* FAQ Section Mobile */
     .col-md-6 {
         margin-bottom: 1.5rem !important;
     }

     /* FAQ Section - remove margin-bottom from columns */
     #faq .col-md-6 {
         margin-bottom: 0 !important;
     }

     #faq .faq-item {
         margin-bottom: 1rem !important;
         overflow: hidden !important;
     }

     /* Ensure all FAQ items have equal spacing - remove any last-child margin */
     #faq .faq-item:last-child {
         margin-bottom: 1rem !important;
     }

     #faq .col-md-6 .faq-item:last-child {
         margin-bottom: 1rem !important;
     }

     .faq-question {
         padding: 1rem !important;
         font-size: 0.9375rem !important;
         word-wrap: break-word !important;
         overflow-wrap: break-word !important;
     }

     .faq-question-number {
         margin-right: 0.5rem !important;
         flex-shrink: 0 !important;
     }

     .faq-question-text {
         flex: 1 !important;
         min-width: 0 !important;
         word-wrap: break-word !important;
         overflow-wrap: break-word !important;
     }

     .faq-question-subtitle {
         margin-left: 0 !important;
         margin-top: 0.5rem !important;
     }

     .faq-answer {
         padding: 0 1rem !important;
         font-size: 0.875rem !important;
         word-wrap: break-word !important;
         overflow-wrap: break-word !important;
     }

     .faq-answer.active {
         padding: 1rem !important;
     }

     .faq-answer-content {
         padding-left: 0 !important;
         word-wrap: break-word !important;
         overflow-wrap: break-word !important;
     }

     .faq-answer h6 {
         word-wrap: break-word !important;
         overflow-wrap: break-word !important;
     }

     .faq-answer ul,
     .faq-answer ol {
         padding-left: 1.25rem !important;
         word-wrap: break-word !important;
         overflow-wrap: break-word !important;
     }

     .faq-answer li {
         word-wrap: break-word !important;
         overflow-wrap: break-word !important;
     }

     .faq-chevron {
         margin-left: 0.5rem !important;
         flex-shrink: 0 !important;
     }

     /* Marquee wrapper - reduce margin on mobile */
     .marquee-wrapper.mb-4 {
         margin-bottom: 0.5rem !important;
     }

     /* CTA Section Mobile */
     /* .cta-card {
                padding: 2rem 1rem !important;
            } */

     /* CTA Section - Remove margin-top on mobile */
     #cta-section-container {
         margin-top: 0 !important;
     }

     .col-lg-5.p-5 {
         padding: 1.5rem 1rem !important;
         text-align: center !important;
     }

     .cta-title {
         font-size: clamp(1.5rem, 6vw, 2rem) !important;
         margin-bottom: 1rem !important;
     }

     .cta-lead-text {
         font-size: clamp(0.875rem, 3vw, 1rem) !important;
         margin-bottom: 1.5rem !important;
     }

     .cta-bottom-flush-mobile {
         margin-top: 1.5rem !important;
     }

     .cta-phones-wrapper {
         transform: scale(1.35) !important;
         transform-origin: bottom center !important;
         margin-top: -20px !important;
     }

     .cta-phone-img {
         max-width: 135px !important;
     }

     /* Section Headers Mobile */
     .section-header {
         text-align: center !important;
         padding: 0 1rem !important;
     }

     .section-subtitle {
         font-size: clamp(0.875rem, 3vw, 1rem) !important;
         padding: 0 1rem !important;
     }

     /* Testimonials Mobile - Slick Carousel Fixes */
     .testimonials-carousel {
         position: relative !important;
         min-height: 300px !important;
         width: 100% !important;
     }

     /* Hide carousel until slick initializes */
     .testimonials-carousel:not(.slick-initialized) {
         display: none !important;
     }

     /* Show carousel once slick is initialized */
     .testimonials-carousel.slick-initialized {
         display: block !important;
     }

     /* Let slick control the layout */
     .testimonials-carousel .slick-list {
         overflow: hidden !important;
         margin: 0 !important;
         width: 100% !important;
     }

     .testimonials-carousel .slick-track {
         display: flex !important;
         align-items: stretch !important;
     }

     .testimonials-carousel .slick-slide {
         height: auto !important;
         display: flex !important;
     }

     .testimonials-carousel .slick-slide>div {
         height: 100% !important;
         width: 100% !important;
     }

     .testimonial-item {
         height: 100% !important;
         width: 100% !important;
     }

     .testimonial-card {
         height: 100% !important;
         display: flex !important;
         flex-direction: column !important;
     }

     /* Ensure slick arrows are visible and touch-friendly on mobile */
     .testimonials-carousel .slick-prev,
     .testimonials-carousel .slick-next {
         display: flex !important;
         z-index: 10 !important;
         width: 44px !important;
         height: 44px !important;
         min-width: 44px !important;
         min-height: 44px !important;
         background: rgba(255, 255, 255, 0.95) !important;
         border-radius: 50% !important;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
         border: none !important;
     }

     .testimonials-carousel .slick-prev {
         left: 10px !important;
     }

     .testimonials-carousel .slick-next {
         right: 10px !important;
     }

     .testimonials-carousel .slick-prev i,
     .testimonials-carousel .slick-next i {
         font-size: 1.125rem !important;
         color: var(--primary-green) !important;
     }

     /* Slick dots mobile - make them more visible */
     .testimonials-carousel .slick-dots {
         bottom: -40px !important;
         position: relative !important;
         margin-top: 2rem !important;
     }

     .testimonials-carousel .slick-dots li {
         width: 12px !important;
         height: 12px !important;
         margin: 0 4px !important;
     }

     .testimonials-carousel .slick-dots li button {
         width: 12px !important;
         height: 12px !important;
         padding: 0 !important;
     }

     .testimonials-carousel .slick-dots li.slick-active button {
         width: 14px !important;
         height: 14px !important;
     }

     /* Blog Posts Mobile */
     .col-12.col-lg-4 {
         margin-bottom: 2rem !important;
     }

     /* Container Padding Mobile */
     .container {
         padding-left: 1rem !important;
         padding-right: 1rem !important;
     }

     /* Section Padding Mobile */
     .section {
         padding-top: 3rem !important;
         padding-bottom: 3rem !important;
     }

     .py-5 {
         padding-top: 2rem !important;
         padding-bottom: 2rem !important;
     }

     /* Buttons Mobile */
     .btn {
         padding: 0.75rem 1.5rem !important;
         font-size: 0.9375rem !important;
         min-height: 44px !important;
     }

     .try-button,
     .cta-btn-download {
         width: 100% !important;
         max-width: 300px !important;
         margin: 0 auto !important;
         display: flex !important;
         justify-content: center !important;
         align-items: center !important;
     }

     .feature-item h3 {
         font-size: 0.875rem !important;
         margin-bottom: 0.5rem !important;
         line-height: 1.3 !important;
     }

     .feature-item h3 span {
         font-size: 0.7rem !important;
         margin-top: 0.25rem;
     }

     .feature-item p {
         font-size: 0.75rem !important;
         line-height: 1.4 !important;
     }

     /* Additional Features Section - Mobile */
     .feature-card-additional {
         padding: 1.25rem !important;
         margin-bottom: 1.5rem !important;
     }

     .feature-content h3 {
         font-size: 1.125rem !important;
         margin-bottom: 0.75rem !important;
     }

     .feature-content p {
         font-size: 0.875rem !important;
         margin-bottom: 1rem !important;
     }

     .feature-content ul {
         margin-top: 1rem !important;
     }

     .feature-content li {
         font-size: 0.8125rem !important;
         padding: 0.5rem 0 !important;
         margin-bottom: 0.25rem !important;
     }

     /* Statistics Section - Mobile */
     .statistics-section .row {
         gap: 2rem !important;
     }

     .stat-number {
         font-size: clamp(1.75rem, 6vw, 2.25rem) !important;
     }

     .customer-feedback-overlay {
         display: none !important;
     }

     /* Pricing Section - Mobile */
     .pricing-card {
         margin-bottom: 1.5rem !important;
     }

     .pricing-card-premium {
         transform: none !important;
         margin-top: 0 !important;
         margin-bottom: 1.5rem !important;
         min-height: auto !important;
     }

     .pricing-card-header,
     .pricing-card-header-premium {
         padding: 1.5rem !important;
     }

     .premium-features-box {
         padding: 1rem !important;
         margin: 1rem !important;
     }

     /* Integration Section - Mobile */
     #integration {
         min-height: 300px !important;
     }

     /* Integration section elements - Keep visible on mobile */
     /* #integration .position-absolute {
                display: none !important;
            }
            
            .integration-connection-lines {
                display: none !important;
            } */

     /* Testimonials & Blog - Mobile */
     .testimonials-carousel,
     .blogs-carousel {
         padding: 0 0.5rem !important;
     }

     .testimonial-card,
     .blog-card {
         padding: 1.25rem !important;
     }

     /* CTA Section - Mobile */
     .cta-container {
         padding: 2rem 1.5rem !important;
     }

     .cta-feedback-badge {
         display: none !important;
     }

     .cta-chat-bubble {
         display: none !important;
     }

     /* Footer - Mobile */
     .footer-section .row {
         gap: 2rem !important;
     }

     .footer-section {
         padding: 2rem 0 !important;
     }

     /* General Mobile Adjustments */
     .container {
         padding-left: 1rem !important;
         padding-right: 1rem !important;
     }

     section {
         padding-top: 3rem !important;
         padding-bottom: 0rem !important;
     }

     /* Buttons - Mobile */
     .btn,
     button,
     .signup-button,
     .login-button,
     .try-button {
         padding: 0.75rem 1.5rem !important;
         font-size: 0.875rem !important;
     }

     /* Partners Section - Mobile */
     .partners-section {
         padding-top: 2rem !important;
         padding-bottom: 2rem !important;
     }

     .partner-item {
         padding: 0.5rem !important;
     }

     /* Additional Features - Mobile Layout */
     .feature-card-additional {
         flex-direction: column !important;
     }

     .feature-card-additional .feature-image {
         width: 100% !important;
         margin-bottom: 1rem !important;
     }

     /* Statistics - Mobile */
     .statistics-section .row {
         flex-direction: column-reverse !important;
     }

     .statistics-image {
         margin-bottom: 1rem !important;
     }

     /* Statistics section - reduce spacing between image and text on mobile */
     #statistics .text-muted {
         margin-bottom: 1.5rem !important;
     }

     #statistics .row.mb-4 {
         margin-bottom: 1.5rem !important;
     }

     #statistics .mb-4.mb-md-5 {
         margin-bottom: 1.5rem !important;
     }

     #statistics .col-md-6.mb-4.mb-md-0 {
         margin-bottom: 1rem !important;
     }

     /* Pricing Cards - Mobile Stack */
     .pricing-section .row {
         flex-direction: column !important;
     }

     /* CTA Section - Mobile */
     .cta-section .row {
         flex-direction: column !important;
     }

     .cta-section .cta-image-wrapper {
         margin-top: 2rem !important;
     }

     /* Footer - Mobile */
     .footer-section .row {
         flex-direction: column !important;
         gap: 2rem !important;
     }

     .footer-floating-button {
         width: 44px;
         height: 44px;
         font-size: 1rem;
     }
 }

 /* Small Mobile (≤430px) */
 @media (max-width: 430px) {

     .hero-title-line--primary,
     .hero-title-line--secondary {
         font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
     }

     .section-title {
         font-size: clamp(1.5rem, 7vw, 2rem) !important;
     }

     .service-icon {
         width: 52px !important;
         height: 52px !important;
         font-size: 1.375rem !important;
         min-width: 52px !important;
         min-height: 52px !important;
     }

     .feature-icon {
         width: 60px !important;
         height: 60px !important;
         font-size: 1.625rem !important;
         min-width: 60px !important;
         min-height: 60px !important;
     }

     .features-section .row {
         gap: 0.5rem !important;
     }

     .feature-item {
         padding: 0.75rem 0.5rem !important;
     }

     .feature-item h3 {
         font-size: 0.8rem !important;
     }

     .feature-item p {
         font-size: 0.7rem !important;
     }

     .pricing-card-header,
     .pricing-card-header-premium {
         padding: 1.25rem !important;
     }
 }

 /* Tablet (768px - 1024px) */
 @media (min-width: 768px) and (max-width: 1024px) {

     /* Header - Tablet */
     .site-header {
         height: 72px !important;
     }

     .navbar-custom {
         padding-left: 1.5rem !important;
         padding-right: 1.5rem !important;
         height: 72px !important;
     }

     /* Hero - Tablet */
     .hero__content {
         padding-top: 2rem !important;
         padding-bottom: 3rem !important;
     }

     .hero-title-line--primary,
     .hero-title-line--secondary {
         font-size: clamp(2rem, 4vw, 2.5rem) !important;
     }

     /* Section Titles - Tablet */
     .section-title {
         font-size: clamp(2rem, 4vw, 2.5rem) !important;
     }

     /* Service Icons - Tablet */
     .service-icon {
         width: 64px !important;
         height: 64px !important;
         font-size: 1.625rem !important;
     }

     /* Feature Icons - Tablet */
     .feature-icon {
         width: 72px !important;
         height: 72px !important;
         font-size: 1.875rem !important;
     }

     /* Service Cards - Tablet */
     .service-card {
         padding: 1.5rem !important;
     }

     /* Feature Items - Tablet */
     .feature-item {
         padding: 1.25rem 1rem !important;
     }

     /* Pricing Cards - Tablet */
     .pricing-card {
         min-height: 500px !important;
     }

     .pricing-card-premium {
         transform: scale(1.05) !important;
         margin-top: -15px !important;
         margin-bottom: -15px !important;
         min-height: 520px !important;
     }

     /* Integration Icons - Tablet */
     .integration-icon-small {
         width: 60px !important;
         height: 60px !important;
     }

     .integration-icon-medium {
         width: 75px !important;
         height: 75px !important;
     }

     .integration-icon-large {
         width: 90px !important;
         height: 90px !important;
     }

     /* Mobile Menu Icon - Tablet */
     .mobile-menu-link i {
         width: 24px !important;
         height: 24px !important;
         font-size: 1.125rem !important;
     }

     /* Buttons - Tablet */
     .btn,
     button,
     .signup-button,
     .login-button,
     .try-button {
         padding: 0.875rem 1.75rem !important;
         font-size: 0.9375rem !important;
     }
 }

 /* body:not(.loaded) {
            overflow: hidden;
        }
        
        body:not(.loaded) > *:not(#loading-screen) {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.2s ease-in, visibility 0.2s ease-in;
        }
        
        body.loaded > *:not(#loading-screen) {
            opacity: 1 !important;
            visibility: visible !important;
            transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
        }
        
        body.loaded #hero,
        body.loaded .hero-title,
        body.loaded .hero-subtitle {
            opacity: 1 !important;
            visibility: visible !important;
        } */

 /* Loading Screen - Show immediately */
 #loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #ffffff;
     z-index: 99999;
     display: flex;
     flex-direction: column;
     align-items: center;
     color: #000000 !important;
     justify-content: center;
     opacity: 1;
     visibility: visible;
     transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
 }

 #loading-screen.hidden {
     opacity: 0;
     visibility: hidden;
     pointer-events: none;

 }

 .loading-logo {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     margin-bottom: 1.5rem;
 }

 .loading-logo-icon {
     width: 48px;
     height: 48px;
     background: linear-gradient(135deg, #22C52C 0%, #16A31E 100%);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 12px rgba(34, 197, 44, 0.3);
     animation: pulse 2s ease-in-out infinite;
 }

 .loading-logo-icon span {
     font-size: 24px;
     font-weight: bold;
     color: white;
 }

 .loading-logo-text-container {
     position: relative;
     overflow: hidden;
     display: inline-block;
 }

 .loading-logo-text {
     font-size: 28px;
     font-weight: bold;
     color: #000000 !important;
     letter-spacing: -0.5px;
     opacity: 0;
     transform: translateY(20px);
     white-space: nowrap;
     position: relative;
     display: inline-block;
 }

 .loading-logo-text-mask {
     position: absolute;
     top: 0;
     left: 0;
     width: 0%;
     height: 100%;
     background: linear-gradient(135deg, #22C52C 0%, #16A31E 100%);
     transform-origin: left;
     mix-blend-mode: screen;
     opacity: 0.9;
     z-index: 1;
     box-shadow: 0 0 20px rgba(34, 197, 44, 0.5);
 }

 /* ===== TYPEWRITER EFFECT ===== */
 .typewriter-cursor {
     display: inline-block;
     color: var(--color-primary, #22C52C);
     font-weight: bold;
     animation: blink-cursor 1s infinite;
     margin-left: 2px;
 }

 @keyframes blink-cursor {

     0%,
     50% {
         opacity: 1;
     }

     51%,
     100% {
         opacity: 0;
     }
 }

 /* Typewriter effect for hero title */
 .hero-title-line--primary,
 .hero-title-line--secondary {
     white-space: nowrap;
     overflow: hidden;
 }

 @keyframes pulse {

     0%,
     100% {
         transform: scale(1);
         box-shadow: 0 4px 12px rgba(34, 197, 44, 0.3);
     }

     50% {
         transform: scale(1.05);
         box-shadow: 0 6px 20px rgba(34, 197, 44, 0.5);
     }
 }

 .loading-progress {
     width: 200px;
     height: 4px;
     background: #f1f1f1;
     border-radius: 2px;
     overflow: hidden;
     margin-top: 1rem;
 }

 .loading-progress-bar {
     height: 100%;
     background: linear-gradient(90deg, #22C52C 0%, #16A31E 100%);
     border-radius: 2px;
     width: 0%;
     animation: progress 1.5s ease-in-out infinite;
 }

 @keyframes progress {
     0% {
         width: 0%;
         transform: translateX(0);
     }

     50% {
         width: 70%;
     }

     100% {
         width: 100%;
         transform: translateX(0);
     }
 }

 /* ===== TYPOGRAPHY ===== */
 .features-badge-soft {
     background-color: var(--palette-primary-soft);
     color: var(--palette-primary-900);
     font-weight: 600;
     padding: 0.5rem 1rem;
     border-radius: 9999px;
     text-transform: uppercase;
     font-size: 0.75rem;
     letter-spacing: 0.05em;
     display: inline-block;
     margin-bottom: 1rem;
 }

 h2.features-section-title {
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 800;
     color: var(--palette-neutral-gray-900);
     line-height: 1.1;
     margin-bottom: 1rem;
 }

 p.features-section-subtitle {
     font-size: 1.125rem;
     color: var(--palette-neutral-gray-500);
     max-width: 600px;
     margin: 0 auto 4rem auto;
 }

 /* ===== FEATURE CARDS ===== */
 .features-card {
     background: var(--palette-neutral-white);
     border: 1px solid rgba(0, 0, 0, 0.04);
     border-radius: 1.5rem;
     padding: 1.5rem;
     margin-bottom: 1.5rem;
     display: flex;
     align-items: center;
     gap: 1.25rem;
     transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
     position: relative;
     z-index: 2;
 }

 .features-card:hover {
     transform: translateY(-5px) scale(1.02);
     box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
     border-color: var(--palette-primary-soft-dark);
     z-index: 10;
 }

 .features-icon-box {
     width: 56px;
     height: 56px;
     min-width: 56px;
     background-color: var(--palette-primary-soft);
     color: var(--palette-primary-700);
     border-radius: 1rem;
     /* Rounded square */
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     transition: all 0.3s ease;
     order: 2;
     /* Default Icon on Right for Left Side Cards? No, standard is Left. Let's make it flexible */
 }

 .features-card:hover .features-icon-box {
     background-color: var(--palette-primary-500);
     color: var(--palette-neutral-white);
     transform: rotate(-10deg) scale(1.1);
 }

 .features-content {
     flex-grow: 1;
 }

 .features-title {
     font-weight: 700;
     font-size: 1.125rem;
     color: var(--palette-neutral-gray-900);
     margin-bottom: 0.25rem;
 }

 .features-desc {
     font-size: 0.875rem;
     color: var(--palette-neutral-gray-500);
     margin: 0;
     line-height: 1.5;
 }

 /* Right side cards - Icon on Right */
 .features-cards-left .features-card {
     flex-direction: row-reverse;
     text-align: right;
 }

 .features-cards-left .features-card .features-icon-box {
     border-radius: 1rem 1rem 0 1rem;
 }

 /* Left side cards - Icon on Left */
 .features-cards-right .features-card {
     flex-direction: row;
     text-align: left;
 }

 .features-cards-right .features-card .features-icon-box {
     border-radius: 1rem 1rem 1rem 0;
 }

 /* ===== CENTRAL PHONE ===== */
 .features-phone-container {
     position: relative;
     z-index: 5;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100%;
     perspective: 1000px;
 }

 .features-mockup-img {
     max-width: 100%;
     height: auto;
     max-height: 650px;
     filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15));
     animation: float-phone 6s ease-in-out infinite;
     border-radius: 3rem;
     /* Match phone radius roughly */
 }

 /* ===== ANIMATIONS ===== */
 @keyframes float-phone {

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

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

 /* Entrance Animations */
 .features-slide-in-left {
     opacity: 0;
     animation: slidefeaturesInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }

 .features-slide-in-right {
     opacity: 0;
     animation: slideInfeaturesRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }

 .features-slide-up-main {
     opacity: 0;
     animation: slidefeaturesUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
 }

 @keyframes slidefeaturesInLeft {
     from {
         opacity: 0;
         transform: translateX(-50px);
     }

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

 @keyframes slideInfeaturesRight {
     from {
         opacity: 0;
         transform: translateX(50px);
     }

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

 @keyframes slidefeaturesUp {
     from {
         opacity: 0;
         transform: translateY(100px);
     }

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

 /* Stagger Delays */
 .delay-100 {
     animation-delay: 0.1s;
 }

 .delay-200 {
     animation-delay: 0.2s;
 }

 .delay-300 {
     animation-delay: 0.3s;
 }

 .delay-400 {
     animation-delay: 0.4s;
 }

 /* Responsive */
 @media (max-width: 991px) {
     .features-card {
         flex-direction: row !important;
         text-align: left !important;
         margin-bottom: 1rem;
     }

     .features-cards-left,
     .features-cards-right {
         order: 2;
     }

     .features-phone-col {
         order: 1;
         margin-bottom: 3rem;
     }

     .features-mockup-img {
         max-height: 500px;
     }
 }

 .cta-card {
     background: var(--gradient-primary);
     border-radius: 2rem;
     overflow: hidden;
     box-shadow: 0 25px 50px -12px var(--palette-alpha-green-40);
     position: relative;
     width: 100%;
     max-width: 1200px;
 }

 /* Subtle background pattern */
 .cta-bg-pattern {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image:
         radial-gradient(at 10% 10%, var(--palette-alpha-white-10) 0px, transparent 50%),
         radial-gradient(at 90% 90%, var(--palette-alpha-white-10) 0px, transparent 50%);
     pointer-events: none;
 }

 .cta-bg-squares {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(var(--palette-alpha-white-05) 1px, transparent 1px),
         linear-gradient(90deg, var(--palette-alpha-white-05) 1px, transparent 1px);
     background-size: 80px 80px;
     opacity: 0.3;
     pointer-events: none;
 }

 h2.cta-title {
     font-size: clamp(2rem, 5vw, 3.5rem);
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -0.02em;
     color: var(--palette-neutral-white);
     margin-bottom: 1.5rem;
 }

 p.cta-lead-text {
     color: var(--palette-alpha-white-90);
     font-size: 1.125rem;
     line-height: 1.6;
     margin-bottom: 2.5rem;
     max-width: 500px;
 }

 .cta-btn-download {
     background-color: var(--palette-neutral-white);
     color: var(--palette-primary-500);
     font-weight: 700;
     padding: 1rem 2rem;
     border-radius: 9999px;
     font-size: 1.1rem;
     display: inline-flex;
     align-items: center;
     gap: 0.75rem;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     text-decoration: none;
     box-shadow: 0 4px 6px -1px var(--palette-alpha-black-10), 0 2px 4px -1px var(--palette-alpha-black-06);
 }

 .cta-btn-download:hover {
     transform: translateY(-2px);
     box-shadow: 0 10px 15px -3px var(--palette-alpha-black-10), 0 4px 6px -2px var(--palette-alpha-black-06);
     background-color: var(--palette-primary-soft);
     color: var(--palette-primary-700);
 }

 /* IMAGES & ANIMATIONS */
 .cta-phones-wrapper {
     position: relative;
     width: 100%;
     height: 477px;
     display: flex;
     align-items: center;
     justify-content: center;
     perspective: 1001px;
 }

 .cta-phone-img {
     position: absolute;
     transition: all 0.5s ease-out;
     border-radius: 40px;
     /* Match phone radius roughly */
     /* box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.3); */
 }

 .cta-phone-center {
     z-index: 30;
     width: 320px;
     left: 50%;
     transform: translateX(-50%) translateY(50px);
     animation: slideUpCenter 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }

 .cta-phone-left {
     z-index: 20;
     width: 280px;
     left: 50%;
     transform: translateX(-110%) translateY(80px) rotate(-10deg);
     opacity: 0;
     animation: slideInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
 }

 .cta-phone-right {
     z-index: 20;
     width: 280px;
     left: 50%;
     transform: translateX(10%) translateY(80px) rotate(10deg);
     opacity: 0;
     animation: slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
 }

 @keyframes slideUpCenter {
     from {
         opacity: 0;
         transform: translateX(-50%) translateY(150px);
     }

     to {
         opacity: 1;
         transform: translateX(-50%) translateY(50px);
     }
 }

 @keyframes slideInLeft {
     from {
         opacity: 0;
         transform: translateX(-110%) translateY(150px) rotate(-10deg);
     }

     to {
         opacity: 1;
         transform: translateX(-110%) translateY(80px) rotate(-10deg);
     }
 }

 @keyframes slideInRight {
     from {
         opacity: 0;
         transform: translateX(10%) translateY(150px) rotate(10deg);
     }

     to {
         opacity: 1;
         transform: translateX(10%) translateY(80px) rotate(10deg);
     }
 }

 /* Floating Animation Loop */
 .cta-phone-center {
     animation: float-center 6s ease-in-out infinite 1.2s, slideUpCenter 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }

 .cta-phone-left {
     animation: float-left 7s ease-in-out infinite 1.4s, slideInLeft 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
 }

 .cta-phone-right {
     animation: float-right 5s ease-in-out infinite 1.6s, slideInRight 1s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
 }

 @keyframes float-center {

     0%,
     100% {
         transform: translateX(-50%) translateY(50px);
     }

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

 @keyframes float-left {

     0%,
     100% {
         transform: translateX(-110%) translateY(80px) rotate(-10deg);
     }

     50% {
         transform: translateX(-110%) translateY(70px) rotate(-10deg);
     }
 }

 @keyframes float-right {

     0%,
     100% {
         transform: translateX(10%) translateY(80px) rotate(10deg);
     }

     50% {
         transform: translateX(10%) translateY(70px) rotate(10deg);
     }
 }

 @media (min-width: 992px) {
     .cta-bottom-flush-mobile {
         height: 600px;
         min-height: 600px;
     }
 }

 @media (max-width: 991px) {
     .cta-phones-wrapper {
         height: 320px;
         /* Reduced height to fit tight */
         transform: scale(0.85);
         /* Slightly larger */
         transform-origin: bottom center;
         margin-top: -40px;
         /* Pull up to reduce gap from text */
         margin-bottom: -42px;
         /* Flush bottom */
     }

     .cta-card {
         padding-bottom: 0 !important;
     }

     .cta-bottom-flush-mobile {
         height: auto;
         padding-bottom: 0;
         margin-top: -20px;
         /* Additional pull up if needed */
     }

     .col-lg-5.p-5 {
         padding: 2rem 1.5rem 1rem 1.5rem !important;
         /* Reduced bottom padding on text */
         text-align: center;
     }

     .cta-btn-download {
         margin-bottom: 0.5rem;
     }
 }

 /* ===== NAVBAR ===== */
 .vuto-navbar {
     padding: 1rem 0;
     background: transparent;
     position: sticky;
     top: 0;
     z-index: 1000;
     transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .vuto-navbar.scrolled {
     background: rgba(255, 255, 255, 0.8);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
     padding: 0.75rem 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }

 .vuto-logo {
     display: flex;
     align-items: center;
     gap: 0.75rem;
     font-weight: 700;
     font-size: 1.25rem;
     color: var(--vuto-text-main);
     text-decoration: none;
 }

 .vuto-logo-icon {
     width: 36px;
     height: 36px;
     background: #00B050;
     color: white;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
 }

 .vuto-nav-links {
     display: flex;
     gap: 2rem;
     align-items: center;
 }

 .vuto-nav-link {
     color: var(--vuto-text-main);
     font-weight: 600;
     text-decoration: none;
     font-size: 0.95rem;
     transition: color 0.2s;
 }

 .vuto-nav-link:hover {
     color: var(--vuto-primary);
 }

 .vuto-btn-login {
     background-color: #00B050;
     color: white;
     padding: 0.5rem 1.5rem;
     border-radius: 6px;
     font-weight: 700;
     text-decoration: none;
     transition: all 0.2s;
     font-size: 0.9rem;
 }

 .vuto-btn-login:hover {
     background-color: var(--vuto-primary-hover);
     color: white;
 }

 /* Mobile Menu Icon - Theme Styled with Modern Animation */
 .vuto-mobile-menu-btn {
     width: 44px;
     height: 44px;
     border: 2px solid var(--color-primary);
     color: var(--color-primary);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-left: 0.75rem;
     background: var(--color-surface);
     cursor: pointer;
     position: relative;
     overflow: hidden;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     box-shadow: 0 2px 8px var(--palette-alpha-green-10);
 }

 /* Ripple effect background */
 .vuto-mobile-menu-btn::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: var(--palette-primary-soft);
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
     opacity: 0;
 }

 .vuto-mobile-menu-btn:hover {
     background: var(--palette-primary-soft);
     border-color: var(--color-primary-hover);
     color: var(--color-primary-hover);
     transform: translateY(-2px) scale(1.05);
     box-shadow: 0 4px 16px var(--palette-alpha-green-20);
 }

 .vuto-mobile-menu-btn:hover::before {
     width: 200%;
     height: 200%;
     opacity: 1;
 }

 .vuto-mobile-menu-btn:active {
     transform: translateY(0) scale(0.98);
     box-shadow: 0 2px 8px var(--palette-alpha-green-15);
 }

 /* Icon animation */
 .vuto-mobile-menu-btn i {
     position: relative;
     z-index: 1;
     transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
     font-size: 1.125rem;
     color: inherit;
 }

 .vuto-mobile-menu-btn:hover i {
     transform: rotate(90deg) scale(1.1);
     color: var(--color-primary-hover);
 }

 .vuto-mobile-menu-btn:active i {
     transform: rotate(90deg) scale(0.95);
     color: var(--color-primary-hover);
 }

 /* Pulse animation on focus */
 @keyframes vuto-menu-pulse {

     0%,
     100% {
         box-shadow: 0 2px 8px var(--palette-alpha-green-10);
     }

     50% {
         box-shadow: 0 2px 16px var(--palette-alpha-green-30);
     }
 }

 .vuto-mobile-menu-btn:focus {
     outline: none;
     animation: vuto-menu-pulse 2s ease-in-out infinite;
 }

 /* Active state when menu is open */
 .vuto-mobile-menu-btn.active {
     background: var(--gradient-primary);
     border-color: var(--color-primary-hover);
     color: var(--color-text-inverse);
     box-shadow: 0 4px 20px var(--palette-alpha-green-30);
 }

 .vuto-mobile-menu-btn.active i {
     transform: rotate(180deg);
     color: var(--color-text-inverse);
 }

 /* Ensure hover works even when active */
 .vuto-mobile-menu-btn.active:hover {
     background: var(--gradient-primary);
     border-color: var(--color-primary-hover);
     color: var(--color-text-inverse);
     transform: translateY(-2px) scale(1.05);
     box-shadow: 0 6px 24px var(--palette-alpha-green-30);
 }

 .vuto-mobile-menu-btn.active:hover i {
     color: var(--color-text-inverse);
     transform: rotate(180deg) scale(1.1);
 }

 .vuto-mobile-menu-btn.active:active {
     transform: translateY(0) scale(0.98);
     box-shadow: 0 4px 20px var(--palette-alpha-green-30);
 }

 .vuto-mobile-menu-btn.active:active i {
     transform: rotate(180deg) scale(0.95);
     color: var(--color-text-inverse);
 }

 /* Mobile Dropdown */
 .vuto-mobile-dropdown {
     position: absolute;
     top: 100%;
     left: 0;
     background: white;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     padding: 1rem;
     flex-direction: column;
     gap: 1rem;
     display: none;
     /* Toggled via JS */
     z-index: 99;
 }

 .vuto-mobile-dropdown.show {
     display: flex;
 }

 /* ===== HERO SECTION ===== */
 .vuto-hero-section {
     position: relative;
     padding-top: 2rem;
     /* padding-bottom: 4rem; */
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
 }

 /* Background Grid */
 .vuto-hero-bg {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-image:
         linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
         linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
     background-size: 40px 40px;
     pointer-events: none;
     z-index: -1;
 }

 /* Hero Text */
 .vuto-hero-title {
     font-size: clamp(2rem, 6vw, 3.5rem);
     font-weight: 800;
     line-height: 1.25;
     margin-bottom: 1.5rem;
     color: #111827;
     padding: 0 1rem;
 }

 /* "Grow" Coloring */
 .vuto-text-grow-g {
     color: #22C55E;
 }

 /* Green */
 .vuto-text-grow-rest {
     color: #EF4444;
 }

 /* Red/Pink */

 .vuto-hero-subtitle {
     color: #6B7280;
     max-width: 600px;
     margin: 0 auto 2.5rem auto;
     font-size: 0.95rem;
     line-height: 1.6;
     font-weight: 400;
     padding: 0 1.5rem;
 }

 /* Store Buttons */
 .vuto-store-btns {
     display: flex;
     justify-content: center;
     gap: 1rem;
     margin-bottom: 3rem;
 }

 .vuto-btn-store {
     background: black;
     color: white;
     border-radius: 10px;
     padding: 0.5rem 1rem;
     display: flex;
     align-items: center;
     gap: 0.6rem;
     text-decoration: none;
     transition: transform 0.2s;
     min-width: 150px;
 }

 .vuto-btn-store:hover {
     transform: translateY(-2px);
     color: white;
 }

 .vuto-store-icon {
     font-size: 1.5rem;
 }

 .vuto-store-text {
     display: flex;
     flex-direction: column;
     line-height: 1.1;
     text-align: left;
 }

 .vuto-store-label {
     font-size: 0.6rem;
     opacity: 0.8;
 }

 .vuto-store-name {
     font-weight: 600;
     font-size: 0.85rem;
 }

 /* ===== VISUALS ===== */
 .vuto-visual-container {
     position: relative;
     max-width: 1000px;
     margin: 0 auto;
     height: auto;
     display: flex;
     justify-content: center;
     padding: 0rem 1rem;
 }

 .vuto-phone-mockup {
     width: 100%;
     max-width: 320px;
     height: auto;
     z-index: 10;
     filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.15));
     border-radius: 40px;
 }

 /* Floating Pills - Responsive Positioning */
 .vuto-pill {
     position: absolute;
     background: white;
     padding: 0.5rem 1rem;
     border-radius: 12px;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
     font-weight: 600;
     font-size: 0.8rem;
     display: flex;
     align-items: center;
     gap: 0.4rem;
     z-index: 20;
     white-space: nowrap;
     transform-origin: center;
     animation: vuto-float 6s ease-in-out infinite;
 }

 /* Pill Variants */
 .vuto-pill-budget {
     background-color: #A5F3FC;
     /* Cyan */
     color: #0E7490;
     left: 5%;
     top: 30%;
     transform: rotate(-8deg);
     animation-delay: 0s;
 }

 .vuto-pill-alerts {
     background-color: #FDE68A;
     /* yellow */
     color: #92400E;
     left: 0%;
     bottom: 20%;
     transform: rotate(5deg);
     animation-delay: 1s;
 }

 .vuto-pill-graphs {
     background-color: #E2E8F0;
     /* Slate */
     color: #334155;
     right: 0%;
     top: 20%;
     transform: rotate(6deg);
     animation-delay: 2s;
 }

 .vuto-pill-security {
     background-color: #86EFAC;
     /* Green */
     color: #166534;
     right: 5%;
     bottom: 15%;
     transform: rotate(-4deg);
     animation-delay: 3s;
 }

 /* Floating Gear */
 .vuto-float-gear {
     position: absolute;
     top: 25%;
     right: 5%;
     width: 40px;
     height: 40px;
     background: #10B981;
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.25rem;
     box-shadow: 0 4px 10px rgba(16, 185, 129, 0.3);
     animation: vuto-spin-slow 10s linear infinite;
     z-index: 15;
 }

 /* Buy Now Button */
 .vuto-btn-buy-now {
     position: absolute;
     bottom: 12%;
     right: 5%;
     /* Adjusted for mobile view */
     background: #E11D48;
     color: white;
     font-weight: 700;
     padding: 0.5rem 1rem;
     border-radius: 8px;
     text-decoration: none;
     box-shadow: 0 4px 12px rgba(225, 29, 72, 0.3);
     z-index: 30;
     font-size: 0.85rem;
     animation: vuto-pulse-buy 2s infinite;
 }

 /* Animations */
 @keyframes vuto-float {

     0%,
     100% {
         transform: translateY(0) rotate(var(--rot));
     }

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

 @keyframes vuto-spin-slow {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes vuto-pulse-buy {
     0% {
         transform: scale(1);
     }

     50% {
         transform: scale(1.05);
     }

     100% {
         transform: scale(1);
     }
 }

 /* Mobile Specific Overrides */
 @media (max-width: 991px) {
     .vuto-nav-links {
         display: none;
     }

     /* Hero Section Mobile Fixes */
     .vuto-hero-section {
         padding-left: 0.5rem !important;
         padding-right: 0.5rem !important;
         overflow: hidden !important;
     }

     .vuto-hero-section .container {
         padding-left: 0.75rem !important;
         padding-right: 0.75rem !important;
         overflow: hidden !important;
     }

     .vuto-visual-container {
         overflow: visible !important;
         /* Allow pills to float but clip at container bounds */
         padding: 0 0.75rem !important;
         /* Add padding to create safe zone */
         max-width: 100% !important;
         position: relative !important;
         margin: 0 auto !important;
     }

     /* Pills - Float freely but stay within container bounds */
     .vuto-pill {
         padding: 0.45rem 0.75rem !important;
         font-size: 0.7rem !important;
         max-width: 130px !important;
         white-space: nowrap !important;
         overflow: visible !important;
         position: absolute !important;
         z-index: 20 !important;
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
     }

     .vuto-pill i {
         font-size: 0.75rem !important;
         flex-shrink: 0 !important;
     }

     /* Pills positioning - Float near edges but stay within bounds */
     /* Use fixed pixel values for mobile to ensure no overflow */
     .vuto-pill-budget {
         left: 0.5rem !important;
         /* Safe distance from left edge */
         top: 20% !important;
         --rot: -5deg;
         transform: rotate(-5deg) !important;
         animation: vuto-float 6s ease-in-out infinite !important;
         animation-delay: 0s !important;
     }

     .vuto-pill-graphs {
         right: 0.5rem !important;
         /* Safe distance from right edge */
         top: 15% !important;
         --rot: 5deg;
         transform: rotate(5deg) !important;
         animation: vuto-float 6s ease-in-out infinite !important;
         animation-delay: 2s !important;
     }

     .vuto-pill-alerts {
         left: 0.5rem !important;
         /* Safe distance from left edge */
         bottom: 25% !important;
         --rot: 8deg;
         transform: rotate(8deg) !important;
         animation: vuto-float 6s ease-in-out infinite !important;
         animation-delay: 1s !important;
     }

     .vuto-pill-security {
         right: 0.5rem !important;
         /* Safe distance from right edge */
         bottom: 10% !important;
         --rot: -3deg;
         transform: rotate(-3deg) !important;
         animation: vuto-float 6s ease-in-out infinite !important;
         animation-delay: 3s !important;
     }

     .vuto-float-gear {
         top: 10%;
         right: 10%;
         width: 32px;
         height: 32px;
         font-size: 1rem;
     }

     .vuto-btn-buy-now {
         bottom: 8%;
         right: 0%;
         font-size: 0.8rem;
         padding: 0.4rem 0.8rem;
     }

     .vuto-store-btns {
         flex-direction: column !important;
         align-items: center !important;
         justify-content: center !important;
         gap: 0.75rem !important;
     }

     .vuto-btn-store {
         padding: 0.75rem 1.25rem !important;
         /* เพิ่มความสูงของปุ่ม */
         justify-content: center !important;
         /* จัดกึ่งกลาง content */
         align-items: center !important;
     }

     .vuto-store-icon {
         font-size: 1.75rem !important;
         /* เพิ่มขนาด icon */
     }

     .vuto-store-text {
         text-align: center !important;
         /* จัดกึ่งกลาง text */
         align-items: center !important;
     }

     .vuto-store-label {
         font-size: 0.65rem !important;
         /* เพิ่มขนาด label เล็กน้อย */
     }

     .vuto-store-name {
         font-size: 0.95rem !important;
         /* เพิ่มขนาด name */
     }

     .vuto-hero-title {
         padding: 0 0.5rem !important;
         font-size: clamp(1.5rem, 5vw, 2.5rem) !important;
     }

     .vuto-hero-subtitle {
         padding: 0 1rem !important;
         font-size: 0.875rem !important;
     }
 }

 @media (min-width: 992px) {
     .vuto-mobile-menu-btn {
         display: none;
     }

     /* Desktop positions from center outward */
     .vuto-pill-budget {
         left: 15%;
         top: 35%;
         --rot: -5deg;
     }

     .vuto-pill-graphs {
         right: 15%;
         top: 25%;
         --rot: 5deg;
     }

     .vuto-pill-alerts {
         left: 10%;
         bottom: 25%;
         --rot: 10deg;
     }

     .vuto-pill-security {
         right: 12%;
         bottom: 20%;
         --rot: -3deg;
     }

     .vuto-float-gear {
         top: 25%;
         right: 8%;
     }

     .vuto-btn-buy-now {
         bottom: 15%;
         right: 18%;
     }
 }

 .feature-icon svg {
     width: 32px;
     height: 32px;
     color: var(--color-primary-contrast);
 }

 .feature-icon {
     color: var(--color-primary-contrast);
 }

 .goto-top-btn {
     position: fixed;
     bottom: 30px;
     right: 30px;
     width: 50px;
     height: 50px;
     min-width: 50px;
     min-height: 50px;
     max-width: 50px;
     max-height: 50px;
     background: var(--gradient-primary);
     color: var(--color-text-inverse);
     border: none;
     border-radius: 50%;
     padding: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     opacity: 0;
     visibility: hidden;
     transform: translateY(20px) scale(0.9);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: 1000;
     box-shadow: 0 4px 12px var(--palette-alpha-green-20), 0 2px 4px var(--palette-alpha-black-10);
     font-size: 1.125rem;
     overflow: hidden;
     line-height: 1;
 }

 .goto-top-btn::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--gradient-primary-hero);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .goto-top-btn.show {
     opacity: 1;
     visibility: visible;
     transform: translateY(0) scale(1);
 }

 body.has-plan-status-card .goto-top-btn {
     bottom: calc(var(--plan-card-stack-offset, 5.75rem) + env(safe-area-inset-bottom, 0px));
 }

 .goto-top-btn:hover {
     transform: translateY(-3px) scale(1.05);
     box-shadow: 0 8px 24px var(--palette-alpha-green-30), 0 4px 8px var(--palette-alpha-black-15);
     background: var(--color-primary-hover);
 }

 .goto-top-btn:hover::before {
     opacity: 1;
 }

 .goto-top-btn:active {
     transform: translateY(-1px) scale(1.02);
     box-shadow: 0 4px 12px var(--palette-alpha-green-20), 0 2px 4px var(--palette-alpha-black-10);
 }

 .goto-top-btn i {
     transition: transform 0.3s ease;
     display: inline-block;
     position: relative;
     z-index: 1;
     color: var(--color-text-inverse);
 }

 .goto-top-btn:hover i {
     transform: translateY(-2px);
 }

 /* Mobile responsive */
 @media (max-width: 767px) {
     .goto-top-btn {
         width: 44px;
         height: 44px;
         min-width: 44px;
         min-height: 44px;
         max-width: 44px;
         max-height: 44px;
         bottom: 20px;
         border-radius: 0.5rem;
         right: 20px;
         font-size: 1rem;
         box-shadow: 0 3px 10px var(--palette-alpha-green-20), 0 2px 4px var(--palette-alpha-black-10);
     }

     .goto-top-btn:hover {
         box-shadow: 0 6px 20px var(--palette-alpha-green-30), 0 3px 6px var(--palette-alpha-black-15);
     }
 }

 /* Smooth scroll for entire page */
 html {
     scroll-behavior: smooth;
 }