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

 body {
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     line-height: 1.6;
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* ------------------------------
   PRICING SECTION STYLES
--------------------------------*/
 .pricing-section {
     position: relative;
     z-index: 999;
     text-align: center;
     padding: 100px 0 80px;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     overflow: hidden;
     margin-top: 0;
     clear: both;
 }

 .pricing-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="rgba(255,255,255,0.05)"><polygon points="0,0 1000,100 1000,0"/></svg>');
     pointer-events: none;
 }

 .pricing-section h2 {
     font-size: clamp(28px, 5vw, 42px);
     margin-bottom: 15px;
     font-weight: 700;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .pricing-section .lead {
     font-size: clamp(16px, 3vw, 20px);
     margin-bottom: 60px;
     opacity: 0.9;
     max-width: 600px;
     margin-left: auto;
     margin-right: auto;
 }

 /* ------------------------------
   PRICING GRID
--------------------------------*/
 .pricing-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
     max-width: 1100px;
     margin: 0 auto;
     padding: 0 20px;
 }

 /* ------------------------------
   PRICING CARDS
--------------------------------*/
 .pricing-card {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 20px;
     padding: 40px 30px;
     text-align: center;
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     position: relative;
     overflow: hidden;
     color: #333;
     transform: translateY(0);
     opacity: 0;
     animation: fadeInUp 0.8s ease forwards;
 }

 .pricing-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: left 0.5s ease;
 }

 .pricing-card:hover::before {
     left: 100%;
 }

 .pricing-card:hover {
     transform: translateY(-20px) scale(1.03);
     box-shadow: 0 30px 60px rgba(102, 126, 234, 0.25);
     border-color: rgba(102, 126, 234, 0.5);
 }

 .pricing-card h3 {
     font-size: 24px;
     color: #667eea;
     margin-bottom: 20px;
     text-transform: uppercase;
     font-weight: 700;
     letter-spacing: 1px;
 }

 .pricing-card .price {
     font-size: clamp(36px, 6vw, 48px);
     margin: 25px 0;
     color: #333;
     font-weight: 800;
     line-height: 1;
 }

 .pricing-card .price span {
     font-size: clamp(14px, 3vw, 16px);
     color: #777;
     font-weight: 500;
     display: block;
     margin-top: 8px;
 }

 /* ------------------------------
   FEATURES LIST
--------------------------------*/
 .pricing-features {
     list-style: none;
     padding: 0;
     margin: 30px 0;
     text-align: left;
 }

 .pricing-features li {
     font-size: 15px;
     color: #555;
     display: flex;
     align-items: flex-start;
     margin-bottom: 15px;
     padding: 10px 0;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     transition: all 0.3s ease;
 }

 .pricing-features li:hover {
     background: rgba(102, 126, 234, 0.05);
     padding-left: 15px;
     border-radius: 8px;
     border-bottom-color: transparent;
 }

 .pricing-features li:last-child {
     border-bottom: none;
 }

 .pricing-features li i {
     color: #667eea;
     margin-right: 12px;
     font-size: 16px;
     margin-top: 2px;
     flex-shrink: 0;
 }

 /* ------------------------------
   HIGHLIGHTED CARD (VIP)
--------------------------------*/
 .pricing-card.highlighted {
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     color: white;
     border: 2px solid rgba(255, 255, 255, 0.3);
     transform: scale(1.05);
     z-index: 3;
 }

 .pricing-card.highlighted h3 {
     color: white;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);

 }

 .pricing-card.highlighted .price {
     color: white;
 }

 .pricing-card.highlighted .pricing-features li {
     color: rgba(255, 255, 255, 0.9);
     border-bottom-color: rgba(255, 255, 255, 0.1);
 }

 .pricing-card.highlighted .pricing-features li:hover {
     background: rgba(255, 255, 255, 0.1);
 }

 .pricing-card.highlighted .pricing-features li i {
     color: #fff;
 }

 .pricing-card.highlighted .popular-tag {
     position: absolute;
     top: 2px;
     left: 75%;
     transform: translateX(0%) rotate(30deg);
     background: linear-gradient(45deg, #ff6b6b, #ee5a24);
     color: #fff;
     font-size: 10px;
     font-weight: bold;
     padding: 8px 20px;
     border-radius: 20px;
     box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
     text-transform: uppercase;
     letter-spacing: 1px;
 }


 /* ------------------------------
   BUTTONS
--------------------------------*/
 .btn-pricing {
     background: linear-gradient(45deg, #667eea, #764ba2);
     color: #fff;
     border: none;
     border-radius: 50px;
     padding: 18px 35px;
     cursor: pointer;
     font-size: 16px;
     font-weight: 600;
     transition: all 0.3s ease;
     margin-top: 25px;
     text-transform: uppercase;
     letter-spacing: 1px;
     width: 100%;
     position: relative;
     overflow: hidden;
 }

 .btn-pricing::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transition: left 0.5s ease;
 }

 .btn-pricing:hover::before {
     left: 100%;
 }

 .btn-pricing:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 30px rgba(102, 126, 234, 0.4);
 }

 .pricing-card.highlighted .btn-pricing {
     background: linear-gradient(45deg, #ff6b6b, #ee5a24);
 }

 .pricing-card.highlighted .btn-pricing:hover {
     box-shadow: 0 12px 30px rgba(255, 107, 107, 0.4);
 }

 /* Bootstrap button compatibility */
 .btn-block {
     display: block;
     width: 100%;
 }

 .btn {
     display: inline-block;
     text-align: center;
     vertical-align: middle;
     cursor: pointer;
     border: 1px solid transparent;
     white-space: nowrap;
     line-height: 1.42857143;
     text-decoration: none;
 }

 /* ------------------------------
   FREE BADGE
--------------------------------*/
 .free-badge {
     position: absolute;
     top: 20px;
     right: 20px;
     background: linear-gradient(45deg, #2ecc71, #27ae60);
     color: white;
     padding: 6px 15px;
     border-radius: 15px;
     font-size: 11px;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 /* ------------------------------
   RESPONSIVE DESIGN
--------------------------------*/
 @media (max-width: 1024px) {
     .pricing-grid {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
         gap: 25px;
     }
 }

 @media (max-width: 768px) {
     .pricing-section {
         padding: 80px 0 60px;
         margin-top: 100px;


     }

     .pricing-grid {
         grid-template-columns: 1fr;
         gap: 25px;
         padding: 0 15px;
     }

     .pricing-card {
         padding: 35px 25px;
         margin: 0;
     }

     .pricing-card.highlighted {
         transform: none;
         padding-top: 10px;
         margin: 15px 0;
     }

     .container {
         padding: 0 15px;
     }

     .pricing-card.highlighted .popular-tag {
         position: absolute;
         top: 10px;
         left: 88%;
         transform: translateX(0%) rotate(30deg);
         background: linear-gradient(45deg, #ff6b6b, #ee5a24);
         color: #fff;
         font-size: 10px;
         font-weight: bold;
         padding: 8px 20px;
         border-radius: 20px;
         box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
         text-transform: uppercase;
         letter-spacing: 1px;
     }

 }

 @media (max-width: 480px) {
     .pricing-section {
         padding: 60px 0 50px;
         margin-top: 100px;
     }

     .pricing-card {
         padding: 30px 20px;
     }

     .pricing-features li {
         font-size: 14px;
         padding: 8px 0;
     }

     .btn-pricing {
         padding: 15px 30px;
         font-size: 14px;
     }

     .free-badge {
         position: absolute;
         top: 2px;
         right: -5px;
         background: linear-gradient(45deg, #2ecc71, #27ae60);
         color: white;
         padding: 6px 15px;
         border-radius: 15px;
         font-size: 11px;
         font-weight: bold;
         text-transform: uppercase;
         letter-spacing: 0.5px;
     }


     .pricing-card.highlighted .popular-tag {
         position: relative;
         display: inline-block;
         top: 4px;
         left: 42%;
         background: linear-gradient(45deg, #ff6b6b, #ee5a24);
         color: #fff;
         font-size: 8px;
         font-weight: bold;
         padding: 8px 20px;
         border-radius: 20px;
         box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
         text-transform: uppercase;
         letter-spacing: 1px;
     }

 }

 /* ------------------------------
   ANIMATION ON SCROLL
--------------------------------*/
 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(40px);
     }

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

 .pricing-card:nth-child(1) {
     animation-delay: 0.2s;
 }

 .pricing-card:nth-child(2) {
     animation-delay: 0.4s;
 }

 .pricing-card:nth-child(3) {
     animation-delay: 0.6s;
 }

 /* ------------------------------
   INTERSECTION OBSERVER SUPPORT
--------------------------------*/
 .pricing-card.animate-in {
     animation-play-state: running;
 }

 .pricing-card.animate-in:nth-child(1) {
     animation-delay: 0.2s;
 }

 .pricing-card.animate-in:nth-child(2) {
     animation-delay: 0.4s;
 }

 .pricing-card.animate-in:nth-child(3) {
     animation-delay: 0.6s;
 }