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

   body {
     font-family: 'Poppins', sans-serif;
     background: #ffffff;
     color: #333;
     overflow-x: hidden;
   }

   /* Animated Background */
   .bg-animation {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     background: linear-gradient(135deg, #80cc28 0%, #FF9800 100%);
     opacity: 0.05;
   }

   .butterfly {
     position: absolute;
     font-size: 40px;
     opacity: 0.3;
     animation: float 20s infinite ease-in-out;
   }

   @keyframes float {

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

     25% {
       transform: translate(100px, -100px) rotate(90deg);
     }

     50% {
       transform: translate(200px, 50px) rotate(180deg);
     }

     75% {
       transform: translate(50px, 100px) rotate(270deg);
     }
   }

   /* Header */
   header {
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(10px);
     padding: 10px 60px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     position: sticky;
     top: 0;
     z-index: 1000;
     border-bottom: 2px solid rgba(139, 195, 74, 0.2);
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   }

   .logo {
     display: flex;
     align-items: center;
     gap: 15px;
   }

   .logo img {
     height: 70px;
   }

   nav a {
     margin-left: 30px;
     text-decoration: none;
     color: #333;
     font-weight: 600;
     transition: all 0.3s;
     position: relative;
   }

   nav a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, #80cc28 0%, #FF9800 100%);
     transition: width 0.3s;
   }

   nav a:hover {
     color: #80cc28;
   }

   nav a:hover::after {
     width: 100%;
   }

   /* Hero Section */
   .hero {
     padding: 150px 60px 100px;
     text-align: center;
     position: relative;
     overflow: hidden;
     background: linear-gradient(135deg, #f5f9f3 0%, #fff8f0 100%);
   }

   .hero::before {
     content: '🦋';
     position: absolute;
     font-size: 400px;
     opacity: 0.03;
     top: -100px;
     right: -100px;
     animation: rotate 30s infinite linear;
   }

   @keyframes rotate {
     from {
       transform: rotate(0deg);
     }

     to {
       transform: rotate(360deg);
     }
   }

   .hero h1 {
     font-size: 72px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(90deg, #80cc28 0%, #FF9800 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     line-height: 1.2;
   }

   .hero .subtitle {
     font-size: 24px;
     max-width: 800px;
     margin: 0 auto 40px;
     color: #666;
     font-weight: 300;
   }

   .cta-button {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: linear-gradient(90deg, #80cc28 0%, #FF9800 100%);
     border: none;
     padding: 18px 50px;
     font-size: 20px;
     color: white;
     border-radius: 50px;
     cursor: pointer;
     font-weight: 700;
     box-shadow: 0 10px 40px rgba(139, 195, 74, 0.3);
     transition: all 0.3s;
     position: relative;
     overflow: hidden;
     text-decoration: none;
   }


   .cta-button:hover {
     transform: translateY(-3px);
     box-shadow: 0 15px 50px rgba(139, 195, 74, 0.5);
   }

   .cta-button::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     transform: translate(-50%, -50%);
     transition: width 0.6s, height 0.6s;
   }

   .cta-button:hover::before {
     width: 300px;
     height: 300px;
   }

   /* Features Section */
   .features-section {
     padding: 100px 60px;
     max-width: 1400px;
     margin: 0 auto;
   }

   .section-title {
     text-align: center;
     font-size: 48px;
     font-weight: 800;
     margin-bottom: 20px;
     background: linear-gradient(90deg, #80cc28 0%, #FF9800 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }

   .section-subtitle {
     text-align: center;
     font-size: 18px;
     color: #666;
     margin-bottom: 60px;
   }

   .features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 30px;
   }

   .feature-card {
     background: #ffffff;
     border-radius: 20px;
     padding: 40px;
     border: 2px solid rgba(139, 195, 74, 0.1);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
     text-align: center;
   }

   .feature-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(139, 195, 74, 0.05) 0%, rgba(255, 152, 0, 0.05) 100%);
     opacity: 0;
     transition: opacity 0.4s;
   }

   .feature-card:hover::before {
     opacity: 1;
   }

   .feature-card:hover {
     transform: translateY(-10px);
     border-color: rgba(139, 195, 74, 0.4);
     box-shadow: 0 20px 60px rgba(139, 195, 74, 0.2);
   }

   .feature-icon {
     font-size: 50px;
     margin-bottom: 20px;
     display: block;

   }

   .feature-card h3 {
     font-size: 24px;
     margin-bottom: 15px;
     font-weight: 700;
     color: #333;
   }

   .feature-card p {
     color: #666;
     line-height: 1.6;
     font-size: 16px;
   }

   /* Stats Section */
   .stats-section {
     padding: 80px 60px;
     background: linear-gradient(135deg, rgba(139, 195, 74, 0.05) 0%, rgba(255, 152, 0, 0.05) 100%);
     text-align: center;
   }

   .stats-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 40px;
     max-width: 1200px;
     margin: 0 auto;
   }

   .stat-item {
     padding: 30px;
   }

   .stat-number {
     font-size: 56px;
     font-weight: 800;
     background: linear-gradient(90deg, #80cc28 0%, #FF9800 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     margin-bottom: 10px;
   }

   .stat-label {
     font-size: 18px;
     color: #666;
   }

   /* About Section */
   .about-section {
     padding: 100px 60px;
     max-width: 1000px;
     margin: 0 auto;
     text-align: center;
   }

   .developer-card {
     background: #ffffff;
     border-radius: 20px;
     padding: 50px;
     border: 2px solid rgba(139, 195, 74, 0.1);
     margin-top: 40px;
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
   }

   .developer-card p {
     font-size: 18px;
     color: #666;
     line-height: 1.8;
     margin-bottom: 30px;
   }

   /* Contact Section */
   .contact-section {
     padding: 100px 60px;
     background: linear-gradient(135deg, rgba(139, 195, 74, 0.05) 0%, rgba(255, 152, 0, 0.05) 100%);
     text-align: center;
   }

   .contact-links {
     display: flex;
     justify-content: center;
     gap: 30px;
     flex-wrap: wrap;
     margin-top: 40px;
   }

   .contact-link {
     background: #ffffff;
     border: 2px solid rgba(139, 195, 74, 0.2);
     padding: 20px 40px;
     border-radius: 15px;
     text-decoration: none;
     color: #333;
     font-weight: 600;
     transition: all 0.3s;
     display: flex;
     align-items: center;
     gap: 10px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
   }

   .contact-link:hover {
     background: linear-gradient(90deg, #80cc28 0%, #FF9800 100%);
     color: white;
     transform: translateY(-5px);
     box-shadow: 0 10px 30px rgba(139, 195, 74, 0.3);
   }

   .contact-link svg {
     width: 24px;
     height: 24px;
   }

   .contact-link:hover svg path {
     fill: white;
   }

   /* Footer */
   footer {
     background: #252525;
     padding: 40px;
     text-align: center;
   }

   footer p {
     color: #999;
   }

   /* Responsive */
   @media (max-width: 768px) {
     .hero h1 {
       font-size: 42px;
     }

     .hero .subtitle {
       font-size: 18px;
     }

     header {
       padding: 15px 30px;
     }

     nav a {
       margin-left: 15px;
       font-size: 14px;
     }

     .features-grid {
       grid-template-columns: 1fr;
     }

     .section-title {
       font-size: 36px;
     }
   }