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

 body {
     font-family: 'Montserrat', sans-serif;
     color: #343435;
     background-color: #ffffff;
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -webkit-overflow-scrolling: touch;
     scroll-behavior: smooth;
 }

 .container {
     width: 100%;
     margin: 0 auto;
     padding: 0 16px;
 }

 @media (min-width: 640px) {
     .container {
         max-width: 640px;
     }
 }

 @media (min-width: 768px) {
     .container {
         max-width: 768px;
     }
 }

 @media (min-width: 1024px) {
     .container {
         max-width: 1024px;
         padding: 0 48px;
     }
 }

 @media (min-width: 1280px) {
     .container {
         max-width: 1280px;
     }
 }

 @media (min-width: 1536px) {
     .container {
         max-width: 1536px;
     }
 }

 /* Header Styles - from mao-index.html structure */
 header {
     background-color: #faf6f1;
     color: #343435;
     padding: 1rem 0;
     position: sticky;
     top: 0;
     z-index: 100;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
     border-bottom: 1px solid #e5e7eb;
 }

 nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     position: relative;
 }

 .mobile-menu-toggle {
     display: none;
     background: none;
     border: none;
     color: #343435;
     font-size: 1.5rem;
     cursor: pointer;
     padding: 8px;
     border-radius: 4px;
     transition: background 0.3s;
 }

 .mobile-menu-toggle:hover {
     background: rgba(52, 52, 53, 0.1);
 }

 .logo {
     height: 2.2rem;
     width: auto;
     font-size: 1.8rem;
     font-weight: 800;
     display: flex;
     align-items: center;
     color: #343435;
 }

 .logo i {
     margin-right: 10px;
     color: #32A728;
 }

 .nav-links {
     display: flex;
     list-style: none;
     gap: 2rem;
     flex-wrap: wrap;
 }

 .nav-links a {
     color: #343435;
     text-decoration: none;
     transition: all 0.3s;
     font-weight: 500;
     padding: 8px 16px;
     border-radius: 25px;
     background: transparent;
 }

 .nav-links a:hover {
     background: rgba(50, 167, 40, 0.1);
     color: #32A728;
     transform: translateY(-2px);
 }

 /* Header Logo Image */
 .header-logo {
     height: 2.5rem;
     width: auto;
     margin-top: 1rem;
 }

 /* Main Content Sections */
 .section {
     padding: 4px 0;
 }

 .section-small {
     padding: 1px 0;
 }

 .section-medium {
     padding: 5px 0;
 }

 .section-large {
     padding: 80px 0;
 }

 /* Typography */
 .text-center {
     text-align: center;
 }

 .title-large {
     font-size: 2.5em;
     font-weight: 700;
     color: #343435;
 }

 .title-medium {
     font-size: 2em;
     font-weight: 700;
     color: #343435;
 }

 .text-large {
     font-size: 1.2em;
 }

 .text-small {
     font-size: 1em;
 }

 .text-bold {
     font-weight: 700;
 }

 .text-italic {
     font-style: italic;
 }

 .text-underline {
     text-decoration: underline;
 }

 /* Image Styles - Enhanced Mobile Optimization */
 .hero-image {
     width: 100%;
     max-width: 480px;
     height: auto;
     border-radius: 12px;
     margin: 20px auto;
     display: block;
     transition: transform 0.3s ease;
     /* Enhanced mobile performance */
     image-rendering: -webkit-optimize-contrast;
     backface-visibility: hidden;
     transform: translateZ(0);
 }

 @media (max-width: 768px) {
     .hero-image {
         max-width: calc(100vw - 32px);
         margin: 16px auto;
         border-radius: 10px;
         max-height: 300px;
         object-fit: cover;
     }
 }

 @media (max-width: 480px) {
     .hero-image {
         width: calc(100vw - 32px);
         max-width: 320px;
         border-radius: 8px;
         margin: 12px auto;
         max-height: 250px;
     }
 }

 @media (max-width: 360px) {
     .hero-image {
         width: calc(100vw - 24px);
         max-width: 280px;
         margin: 10px auto;
         max-height: 220px;
     }
 }

 /* Image loading and performance optimization */
 .hero-image {
     object-fit: cover;
     image-rendering: -webkit-optimize-contrast;
     image-rendering: crisp-edges;
 }

 /* Prevent image shift during loading */
 .hero-image::before {
     content: '';
     display: block;
     background-color: #f5f5f5;
     border-radius: inherit;
 }

 /* Mobile-specific image optimizations */
 @media (max-width: 768px) {
     .hero-image {
         image-rendering: auto;
         will-change: transform;
     }
 }

 /* Button Styles - Enhanced for mobile */
 .btn {
     display: inline-block;
     padding: 18px 32px;
     background-color: #32A728;
     color: white;
     text-decoration: none;
     border-radius: 8px;
     font-weight: 700;
     font-size: 1.1em;
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
     margin: 12px 0;
     min-height: 48px;
     box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;
     touch-action: manipulation;
     /* Enhanced touch target */
     position: relative;
     overflow: hidden;
 }

 .btn:hover {
     background-color: #279020;
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(50, 167, 40, 0.3);
     text-decoration: none;
     color: white;
 }

 .btn:active {
     transform: translateY(0);
     box-shadow: 0 2px 6px rgba(50, 167, 40, 0.3);
 }

 .btn-center {
     text-align: center;
     margin: 2px 0;
 }

 /* List Styles */
 .feature-list {
     list-style: none;
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
     max-width: 800px;
     margin: 0 auto;
     text-align: left;
 }

 @media (min-width: 768px) {
     .feature-list {
         grid-template-columns: 1fr 1fr;
     }
 }

 .feature-item {
     box-sizing: border-box;
     display: flex;
     width: 100%;
     vertical-align: top;
     align-items: flex-start;
     padding: 6px;
     background-color: #f9f9f9;
     border-radius: 6px;
 }

 .feature-emoji {
     font-size: 1.4em;
     margin-right: 20px;
     flex-shrink: 0;
     line-height: 1;
     display: inline-block;
 }

 .feature-content h3 {
     font-weight: 700;
     margin-bottom: 5px;
     color: #343435;
 }

 .feature-content p {
     color: #666;
     margin: 0;
 }

 /* Checklist Styles */
 .checklist {
     list-style: none;
     display: grid;
     grid-template-columns: 1fr;
     gap: 24px;
     max-width: 800px;
     margin: 0 auto;
     text-align: left;
 }

 @media (min-width: 768px) {
     .checklist {
         grid-template-columns: 1fr 1fr;
     }
 }

 .checklist-item {
     display: flex;
     align-items: flex-start;
     padding: 5px;
     background-color: #f0f8ff;
     border-radius: 6px;
     border-left: 4px solid #32A728;
 }

 .checklist-emoji {
     font-size: 1.4em;
     margin-right: 15px;
     color: #32A728;
     line-height: 1;
     display: inline-block;
 }

 .checklist-text {
     font-size: 1em;
     color: #343435;
 }

 /* Expert Section */
 .expert-section {
     border-radius: 12px;
     margin: 2px 0;
     padding: 20px 0;
 }

 /* Hero Section - Enhanced typography */
 .hero {
     padding: 3rem 0;
     text-align: center;
 }

 .hero h1 {
     font-size: 2.5rem;
     margin-bottom: 1rem;
     font-weight: 700;
     color: #343435;
     line-height: 1.2;
     letter-spacing: -0.02em;
 }

 .hero .subtitle {
     font-size: 1.3rem;
     margin-bottom: 1rem;
     color: #343435;
     font-weight: 700;
     line-height: 1.3;
 }

 .hero p {
     font-size: 1.2rem;
     margin-bottom: 2rem;
     color: #343435;
     line-height: 1.6;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 /* Features Section */
 .features {
     padding: 3rem 0;
 }

 .features h2 {
     text-align: center;
     font-size: 2rem;
     margin-bottom: 2rem;
     color: #343435;
 }

 /* Disclaimers Section - from mao-index.html */
 .disclaimers {
     background-color: #f8f9fa;
     color: #343435;
     padding: 3rem 0;
     margin-top: 4rem;
     border-top: 1px solid #e5e7eb;
 }

 .disclaimers h2 {
     text-align: center;
     font-size: 2.2rem;
     margin-bottom: 2rem;
     color: #32A728;
 }

 .disclaimer-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
     background-color: #ffffff;
     padding: 2rem;
     border-radius: 15px;
     border: 1px solid #e5e7eb;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
 }

 .disclaimer-content p {
     margin-bottom: 1rem;
     font-size: 0.95rem;
     line-height: 1.7;
     color: #343435;
 }

 .disclaimer-content .highlight {
     color: #32A728;
     font-weight: bold;
 }

 /* Footer */
 footer {
     background-color: #ffffff;
     color: rgba(52, 52, 53, 0.8);
     padding: 2rem 0;
     border-top: 1px solid #e5e7eb;
 }

 .footer-text {
     font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     font-size: 0.75rem;
     line-height: 1.5;
     color: rgba(0, 0, 0, 0.6);
     text-align: center;
     margin: 0;
     letter-spacing: 0.01em;
 }

 .footer-text a {
     color: rgba(0, 0, 0, 0.6);
     text-decoration: none;
     transition: color 0.2s ease;
 }

 .footer-text a:hover {
     color: rgba(0, 0, 0, 0.8);
     text-decoration: underline;
 }

 .footer-separator {
     display: inline-block;
     margin: 0 6px;
     color: rgba(0, 0, 0, 0.4);
     font-weight: 300;
 }

 /* Enhanced Mobile Responsive Design */
 @media (max-width: 768px) {
     nav {
         flex-wrap: nowrap;
         gap: 1rem;
         padding: 12px 0;
     }

     .logo {
         font-size: 1.3rem;
         flex: 1;
         min-width: 0;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
     }

     .mobile-menu-toggle {
         display: block;
         flex-shrink: 0;
         min-width: 44px;
         min-height: 44px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .nav-links {
         display: none;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         background-color: #ffffff;
         flex-direction: column;
         gap: 0;
         padding: 0;
         border-radius: 0 0 20px 20px;
         box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
         border: 1px solid #e5e7eb;
         border-top: none;
         z-index: 1000;
         /* Enhanced mobile performance */
         transform: translateZ(0);
         backface-visibility: hidden;
     }

     .nav-links.active {
         display: flex;
         animation: slideDown 0.3s ease-out;
     }

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

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

     .nav-links li {
         width: 100%;
     }

     .nav-links a {
         display: block;
         padding: 16px 20px;
         font-size: 1.1rem;
         text-align: center;
         color: #343435;
         border-bottom: 1px solid #e5e7eb;
         transition: all 0.3s;
         background: transparent;
         border-left: 3px solid transparent;
         min-height: 48px;
         display: flex;
         align-items: center;
         justify-content: center;
     }

     .nav-links a:hover,
     .nav-links a:active {
         background-color: rgba(50, 167, 40, 0.1);
         border-left-color: #32A728;
         color: #32A728;
         transform: translateX(3px);
     }

     .nav-links li:last-child a {
         border-bottom: none;
     }

     .title-large {
         font-size: 2rem;
         line-height: 1.2;
         margin-bottom: 1rem;
         letter-spacing: -0.01em;
     }

     .title-medium {
         font-size: 1.6rem;
         line-height: 1.3;
         margin-bottom: 1.5rem;
     }

     .text-large {
         font-size: 1.1rem;
         line-height: 1.6;
     }

     .container {
         padding: 0 16px;
     }

     .btn {
         padding: 14px 18px;
         font-size: 1.1rem;
         min-height: 48px;
         margin: 8px 0;
         width: auto;
         min-width: 200px;
         border-radius: 12px;
     }

     .feature-emoji {
         margin-right: 12px;
         margin-bottom: 0;
         font-size: 1.6rem;
         min-width: 2em;
     }

     .checklist-emoji {
         font-size: 1.4rem;
         margin-right: 12px;
         min-width: 1.8em;
     }

     .section {
         padding: 2rem 0;
     }

     .section-medium {
         padding: 1.5rem 0;
     }

     .hero {
         padding: 2rem 0;
     }

     .hero h1 {
         font-size: 2rem;
         margin-bottom: 1rem;
     }

     .hero .subtitle {
         font-size: 1.2rem;
         margin-bottom: 1rem;
     }

     .hero p {
         font-size: 1.1rem;
         margin-bottom: 1.5rem;
         padding: 0 8px;
     }

     .features {
         padding: 2rem 0;
     }

     .features h2 {
         font-size: 1.8rem;
         margin-bottom: 2rem;
     }

     .feature-list {
         gap: 1.5rem;
     }

     .feature-item {
         padding: 1rem;
         border-radius: 8px;
     }

     .checklist {
         gap: 1rem;
     }

     .checklist-item {
         padding: 1rem;
         border-radius: 8px;
     }
 }

 /* Enhanced Small Screen Optimizations */
 @media (max-width: 480px) {
     .title-large {
         font-size: 1.75rem;
         line-height: 1.2;
         letter-spacing: -0.01em;
         margin-bottom: 1rem;
     }

     .title-medium {
         font-size: 1.5rem;
         line-height: 1.2;
         margin-bottom: 1.5rem;
     }

     .container {
         padding: 0 16px;
     }

     .feature-list {
         gap: 1rem;
     }

     .checklist {
         gap: 0.75rem;
     }

     .feature-item {
         padding: 1rem;
         flex-direction: row;
         align-items: flex-start;
         border-radius: 8px;
     }

     .checklist-item {
         padding: 1rem;
         border-radius: 8px;
     }

     .logo {
         font-size: 1.2rem;
     }

     .header-logo {
         height: 1.4rem;
     }

     .hero {
         padding: 1.5rem 0;
     }

     .hero h1 {
         font-size: 1.75rem;
         margin-bottom: 1rem;
     }

     .hero .subtitle {
         font-size: 1.1rem;
         margin-bottom: 0.75rem;
     }

     .hero p {
         font-size: 1rem;
         line-height: 1.5;
         margin-bottom: 1.5rem;
         padding: 0 4px;
     }

     .btn {
         padding: 12px 18px;
         font-size: 1rem;
         min-height: 44px;
         margin: 6px 0;
         width: 100%;
         max-width: 280px;
     }

     .btn-center {
         margin: 1rem 0;
     }

     .features {
         padding: 1.5rem 0;
     }

     .features h2 {
         font-size: 1.6rem;
         margin-bottom: 1.5rem;
     }

     .expert-section {
         padding: 1rem 0;
     }

     .section {
         padding: 1.5rem 0;
     }

     .section-medium {
         padding: 1rem 0;
     }

     .section-small {
         padding: 0.5rem 0;
     }

     footer {
         padding: 1.5rem 0;

     }

     .footer-text {
         font-size: 0.75rem;
         line-height: 1.5;
         padding: 0 8px;
     }

     .disclaimers {
         padding: 2rem 0;
         /* margin-top: 2rem; */
         margin-top: -2rem;
     }

     .disclaimer-content {
         padding: 1.5rem;
         border-radius: 12px;
     }

     .disclaimer-content p {
         font-size: 0.9rem;
         line-height: 1.6;
     }
 }

 /* Spacing utilities */
 .mb-small {
     margin-bottom: 2px;
 }

 .mb-large {
     margin-bottom: 6px;
 }

 .mt-small {
     margin-top: 2px;
 }

 .mt-medium {
     margin-top: 2px;
 }

 .mt-large {
     margin-top: 6px;
 }

 /* Background colors */
 .bg-light {
     background-color: #f8f9fa;
 }

 /* Enhanced Touch Device Optimizations */
 @media (hover: none) and (pointer: coarse) {
     .btn:hover {
         background-color: #32A728;
         transform: none;
         box-shadow: none;
     }

     .btn:active {
         background-color: #279020;
         transform: scale(0.96);
         transition: all 0.1s ease;
     }

     /* Enhanced touch feedback */
     .btn::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background: rgba(255, 255, 255, 0.1);
         border-radius: inherit;
         opacity: 0;
         transition: opacity 0.2s ease;
         pointer-events: none;
     }

     .btn:active::before {
         opacity: 1;
     }

     /* Prevent text selection on touch */
     .btn,
     .feature-emoji,
     .checklist-emoji,
     .nav-links a {
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
         -webkit-touch-callout: none;
     }

     /* Improve scrolling on iOS */
     body {
         -webkit-overflow-scrolling: touch;
     }
 }

 /* Prevent text selection on touch devices */
 @media (pointer: coarse) {

     .btn,
     .feature-emoji,
     .checklist-emoji {
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
     }
 }

 /* Improve focus states for accessibility */
 .btn:focus {
     outline: 2px solid #32A728;
     outline-offset: 2px;
 }

 /* Enhanced Safe Area Support for Modern Devices */
 @supports (padding: max(0px)) {
     .container {
         padding-left: max(16px, env(safe-area-inset-left));
         padding-right: max(16px, env(safe-area-inset-right));
     }

     header {
         padding-top: env(safe-area-inset-top);
     }

     footer {
         padding-bottom: env(safe-area-inset-bottom);
     }
 }

 /* Performance optimizations for mobile */
 @media (max-width: 768px) {
     * {
         /* Reduce repaints and reflows */
         backface-visibility: hidden;
         -webkit-backface-visibility: hidden;
     }

     .hero-image,
     .feature-item,
     .checklist-item,
     .btn {
         /* Enable hardware acceleration */
         transform: translateZ(0);
         will-change: transform;
     }

     /* Reduce animation complexity on low-end devices */
     @media (prefers-reduced-motion: reduce) {

         *,
         *::before,
         *::after {
             animation-duration: 0.01ms !important;
             animation-iteration-count: 1 !important;
             transition-duration: 0.01ms !important;
         }
     }
 }

 /* Touch device specific optimizations */
 .touch-device .btn:focus {
     outline: none;
     box-shadow: 0 0 0 3px rgba(50, 167, 40, 0.3);
 }

 .touch-device .nav-links a:focus {
     outline: none;
     background-color: rgba(50, 167, 40, 0.1);
 }

 /* Extra small screens (< 360px) */
 @media (max-width: 359px) {
     .container {
         padding: 0 12px;
     }

     .hero h1 {
         font-size: 1.5rem;
     }

     .title-medium {
         font-size: 1.3rem;
     }

     .btn {
         font-size: 0.95rem;
         padding: 10px 20px;
         min-width: 160px;
     }

     .feature-item,
     .checklist-item {
         padding: 0.75rem;
     }

     .feature-emoji,
     .checklist-emoji {
         font-size: 1.2rem;
     }
 }

 .btn-bg {
     display: inline-block;
     width: 22rem;
     height: 7.9rem;
     background: url(./static/picture/Join\ WhatsApp\ Group.webp) no-repeat;
     background-size: 100%;
 }