:root {
     /* TyTil Brand Color Palette */
     --TyTil-primary: #2563eb;
     /* TyTil brand blue */
     --TyTil-primary-dark: #1d4ed8;
     /* darker blue for hover */
     --TyTil-secondary: #f97316;
     /* TyTil accent orange */
     --TyTil-success: #10b981;
     /* success green */
     --TyTil-warning: #f59e0b;
     /* warning yellow */
     --TyTil-danger: #ef4444;
     /* danger red */
     --TyTil-dark: #1e293b;
     /* dark slate */
     --TyTil-card: #334155;
     /* card background */
     --TyTil-white: #ffffff;
     /* white */
     --TyTil-gray: #64748b;
     /* gray text */
     --TyTil-light-gray: #f1f5f9;
     /* light gray */
 }

 html,
 body {
     height: 100%;
     background: var(--TyTil-light-gray);
     color: #1e293b;
     font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
 }

 .text-muted-80 {
     color: var(--TyTil-gray) !important;
 }

 .text-muted-70 {
     color: var(--TyTil-white) !important;
 }

 .text-muted-60 {
     color: rgba(255, 255, 255, 0.7) !important;
 }

 .text-muted-40 {
     color: rgba(100, 116, 139, .5) !important;
 }

 .packages-main {
     position: relative;
     min-height: 70vh;
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 48px 0;
     background: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.85)), url("https://i.pinimg.com/1200x/11/7a/55/117a550a41583be8a579e1333f795aad.jpg") center/cover no-repeat fixed;
     background-size: 100% auto;
 }

 .packages-main h1 {
     font-weight: 700;
     letter-spacing: .3px;
     color: white !important;
 }

 .packages-main .badge-promise {
     background: rgba(255, 255, 255, 0.95);
     color: #222;
     border-radius: 10px;
     padding: 6px 10px;
     font-weight: 600;
     font-size: .85rem;
 }

 .prime-orange {
     color: var(--TyTil-secondary) !important;
 }

 /* Pricing Compare Card */
 .compare-card {
     background: var(--TyTil-white);
     border-radius: 28px;
     box-shadow: 0 12px 40px rgba(37, 99, 235, .15);
     border: 1px solid rgba(37, 99, 235, .1);
 }

 .compare-inner {
     padding: 28px 28px 6px;
 }

 .chip {
     font-weight: 700;
     font-size: .9rem;
     padding: 6px 14px;
     border-radius: 8px;
     letter-spacing: .2px;
     display: inline-block;
 }

 .chip-free {
     background: var(--TyTil-gray);
     color: var(--TyTil-white);
 }

 .chip-basic {
     background: var(--TyTil-success);
     color: var(--TyTil-white);
 }

 .chip-pro {
     background: var(--TyTil-warning);
     color: var(--TyTil-white);
 }

 .chip-enterprise {
     background: var(--TyTil-primary);
     color: var(--TyTil-white);
 }

 .feature-row {
     display: grid;
     grid-template-columns: 1.4fr repeat(4, 1fr);
     gap: 16px;
     align-items: center;
     padding: 18px 0;
     border-top: 1px solid rgba(37, 99, 235, .1);
 }

 .feature-row:first-of-type {
     border-top-color: transparent;
 }

 .feature-title {
     font-weight: 500;
 }

 .marker {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     border: 2px solid rgba(37, 99, 235, .3);
 }

 .marker.ok {
     border-color: var(--TyTil-success);
 }

 .marker.ok svg {
     color: var(--TyTil-success);
 }

 .marker.no svg {
     color: var(--TyTil-gray);
 }

 /* Pricing Cards row */
 .packages-row {
     background: rgba(37, 99, 235, .05);
     padding: 22px 28px;
     border-top: 1px solid rgba(37, 99, 235, .1);
 }

 .package-card {
     background: var(--TyTil-white);
     border: 1px solid rgba(37, 99, 235, .2);
     border-radius: 14px;
     padding: 18px 18px;
     position: relative;
     transition: all .2s ease;
     height: 100%;
     box-shadow: 0 2px 8px rgba(37, 99, 235, .08);
 }

 .package-card:hover {
     border-color: var(--TyTil-primary);
     transform: translateY(-2px);
     box-shadow: 0 4px 16px rgba(37, 99, 235, .15);
 }

 .pkg-label {
     position: absolute;
     top: -12px;
     left: 14px;
 }

 .pkg-radio {
     position: absolute;
     top: 14px;
     right: 16px;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     border: 2px solid rgba(37, 99, 235, .4);
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .pkg-radio .dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: transparent;
 }

 .package-card.active {
     border-color: var(--TyTil-primary);
     box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) inset;
 }

 .package-card.active .pkg-radio {
     border-color: var(--TyTil-primary);
 }

 .package-card.active .pkg-radio .dot {
     background: var(--TyTil-primary);
 }

 /* Pricing Cards Active State */
 .pricing-card.active {
     border-color: var(--TyTil-primary);
     box-shadow: 0 0 0 3px rgba(37, 99, 235, .18) inset;
     transform: translateY(-2px);
 }

 .pricing-card.active .popular-badge {
     background: var(--TyTil-primary);
     color: var(--TyTil-white);
 }

 .strike {
     text-decoration: line-through;
     color: var(--TyTil-gray);
     font-size: .95rem;
     margin-left: 6px;
 }

 .cta-primary {
     background: var(--TyTil-primary);
     color: var(--TyTil-white);
     font-weight: 600;
     padding: 14px 22px;
     border-radius: 10px;
     border: none;
     transition: all .2s ease;
 }

 .cta-primary:hover {
     background: var(--TyTil-primary-dark);
     color: #fff;
     transform: translateY(-1px);
 }

 /* Floating support pill */
 .support-pill {
     position: fixed;
     right: 16px;
     top: 40%;
     transform: translateY(-50%);
     background: rgba(37, 99, 235, .1);
     backdrop-filter: blur(6px);
     color: var(--TyTil-secondary);
     border: 1px solid rgba(37, 99, 235, .2);
     border-radius: 30px;
     padding: 10px 14px;
     z-index: 50;
 }

 /* Sticky bottom selection bar */
 .sticky-offer {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     background: var(--TyTil-white);
     border-top: 1px solid rgba(37, 99, 235, .1);
     transform: translateY(100%);
     transition: transform .35s ease;
     z-index: 1040;
     /* above content */
     padding: 16px 12px;
     box-shadow: 0 -4px 20px rgba(37, 99, 235, .1);
 }

 .sticky-offer.show {
     transform: translateY(0%);
 }

 .sticky-card {
     border: 1px solid rgba(37, 99, 235, .2);
     border-radius: 12px;
     padding: 10px 12px;
     min-width: 150px;
     display: flex;
     flex-direction: column;
     gap: 4px;
     background: var(--TyTil-white);
 }

 .sticky-radio {
     width: 20px;
     height: 20px;
     border-radius: 50%;
     border: 2px solid rgba(37, 99, 235, .4);
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .sticky-radio .dot {
     width: 8px;
     height: 8px;
     border-radius: 50%;
 }

 .sticky-card.active {
     border-color: var(--TyTil-primary);
     box-shadow: 0 0 0 2px rgba(37, 99, 235, .15) inset;
 }

 .sticky-card.active .sticky-radio {
     border-color: var(--TyTil-primary);
 }

 .sticky-card.active .sticky-radio .dot {
     background: var(--TyTil-primary);
 }

 .tag-reco {
     position: absolute;
     top: -10px;
     left: 18px;
     background: var(--TyTil-secondary);
     color: #fff;
     font-size: .72rem;
     font-weight: 800;
     padding: 4px 8px;
     border-radius: 4px;
     transform: skewX(-10deg);
 }

 /* Main Section Styling */
 .main-section {
     background: var(--TyTil-dark);
     color: var(--TyTil-white);
 }

 .main-section h2,
 .main-section h3,
 .main-section h4,
 .main-section h5,
 .main-section h6 {
     color: var(--TyTil-white) !important;
 }



 /* Testimonial Header */
 .testimonial-header {
     margin-bottom: 3rem;
 }

 /* Testimonial Container */
 .testimonial-container {
     max-width: 900px;
     margin: 0 auto;
     position: relative;
 }

 /* Swiper Testimonial Slider */
 .testimonial-swiper {
     overflow: hidden;
     position: relative;
     padding: 20px 0;
     min-height: 400px;
 }

 .swiper-slide {
     height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .testimonial-card {
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
     backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 20px;
     padding: 40px;
     text-align: center;
     position: relative;
     max-width: 600px;
     width: 100%;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
 }

 .testimonial-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 80%;
     height: 3px;
     background: linear-gradient(90deg, var(--TyTil-primary), var(--TyTil-secondary));
     border-radius: 0 0 10px 10px;
 }

 .testimonial-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
 }

 .quote-icon {
     position: absolute;
     top: -15px;
     right: 30px;
     width: 40px;
     height: 40px;
     background: linear-gradient(135deg, var(--TyTil-primary), var(--TyTil-secondary));
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
 }

 .quote-icon i {
     color: white;
     font-size: 18px;
 }

 .stars {
     margin-bottom: 20px;
     display: flex;
     justify-content: center;
     gap: 5px;
 }

 .stars i {
     color: #ffd700;
     font-size: 20px;
     filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
 }

 .testimonial-text {
     font-size: 18px;
     line-height: 1.6;
     color: var(--TyTil-white);
     margin-bottom: 30px;
     font-style: italic;
 }

 .testimonial-author {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
 }

 .author-avatar {
     width: 60px;
     height: 60px;
     border-radius: 50%;
     overflow: hidden;
     border: 3px solid var(--TyTil-primary);
     box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
 }

 .avatar-img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .author-info {
     text-align: left;
 }

 .author-name {
     color: var(--TyTil-white);
     margin: 0 0 5px 0;
     font-weight: 600;
 }

 .author-title {
     color: var(--TyTil-gray);
     margin: 0 0 8px 0;
     font-size: 14px;
 }

 .package-used {
     background: var(--TyTil-primary);
     color: white;
     padding: 4px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 500;
 }

 /* Swiper Navigation */
 .swiper-button-next,
 .swiper-button-prev {
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: var(--TyTil-white);
     transition: all 0.3s ease;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
     cursor: pointer;
 }

 .swiper-button-next {
     right: 20px;
 }

 .swiper-button-prev {
     left: 20px;
 }

 .swiper-button-next:hover,
 .swiper-button-prev:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-50%) scale(1.1);
 }

 .swiper-button-next::after,
 .swiper-button-prev::after {
     font-size: 20px;
     font-weight: bold;
     color: var(--TyTil-white);
 }

 .swiper-button-next::after {
     content: '→';
 }

 .swiper-button-prev::after {
     content: '←';
 }

 /* Swiper Pagination */
 .swiper-pagination {
     position: relative;
     margin-top: 30px;
 }

 .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background: rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     transition: all 0.3s ease;
 }

 .swiper-pagination-bullet-active {
     background: var(--TyTil-primary);
     transform: scale(1.2);
 }

 /* Responsive Testimonial */
 @media (max-width: 768px) {
     .testimonial-container {
         max-width: 100%;
         padding: 0 15px;
     }

     .testimonial-card {
         padding: 25px 20px;
     }

     .testimonial-text {
         font-size: 1rem;
     }

     .testimonial-author {
         flex-direction: column;
         gap: 15px;
         text-align: center;
     }

     .author-info {
         text-align: center;
     }

     .avatar-img {
         width: 60px;
         height: 60px;
     }

     .quote-icon {
         top: -10px;
         right: 20px;
         width: 35px;
         height: 35px;
         font-size: 1rem;
     }

     /* Mobile Navigation Arrows */
     .swiper-button-next,
     .swiper-button-prev {
         width: 40px;
         height: 40px;
     }

     .swiper-button-next {
         right: 10px;
     }

     .swiper-button-prev {
         left: 10px;
     }

     .swiper-button-next::after,
     .swiper-button-prev::after {
         font-size: 16px;
     }
 }

 /* small helpers */
 .cursor-pointer {
     cursor: pointer;
 }

 .rounded-24 {
     border-radius: 24px;
 }

 .rounded-20 {
     border-radius: 20px;
 }

 @media (max-width: 991.98px) {
     .feature-row {
         grid-template-columns: 1.2fr repeat(4, .8fr);
         gap: 12px;
     }

     .packages-row {
         padding: 16px;
     }
 }

 @media (max-width: 767.98px) {
     .feature-row {
         grid-template-columns: 1fr;
     }

     .packages-row .row>[class*="col"] {
         margin-bottom: 12px;
     }

     .sticky-card {
         min-width: 160px;
     }
 }

 /* Offers Banner Styles */
 .offers-banner {
     position: relative;
     overflow: hidden;
     min-height: 200px;
 }

 .offers-banner::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 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="50" cy="10" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="10" cy="60" r="0.5" fill="rgba(255,255,255,0.05)"/><circle cx="90" cy="40" r="0.5" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
     opacity: 0.3;
 }

 .banner-content {
     position: relative;
     z-index: 2;
 }

 .offer-badge {
     background: rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 25px;
     padding: 6px 12px;
     font-size: 0.85rem;
     font-weight: 600;
     transition: all 0.3s ease;
 }

 .offer-badge:hover {
     background: rgba(255, 255, 255, 0.3);
     transform: translateY(-2px);
 }

 .package-cards-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 15px;
     position: relative;
     z-index: 2;
 }

 .package-card-item {
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(15px);
     border: 1px solid rgba(255, 255, 255, 0.3);
     border-radius: 15px;
     padding: 15px 12px;
     text-align: center;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
 }

 .package-card-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--TyTil-secondary), var(--TyTil-primary));
 }

 .package-card-item:hover {
     transform: translateY(-5px);
     background: rgba(255, 255, 255, 0.25);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
 }

 .card-icon {
     font-size: 1.5rem;
     margin-bottom: 8px;
     filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
 }

 .price-tag {
     background: var(--TyTil-secondary);
     color: white;
     padding: 3px 8px;
     border-radius: 12px;
     font-weight: bold;
     font-size: 0.8rem;
     margin-top: 5px;
     display: inline-block;
 }

 /* Responsive Banner Styles */
 @media (max-width: 991.98px) {
     .package-cards-grid {
         gap: 12px;
     }

     .package-card-item {
         padding: 12px 10px;
     }

     .card-icon {
         font-size: 1.3rem;
     }
 }

 @media (max-width: 767.98px) {
     .offers-banner {
         text-align: center;
     }

     .banner-content h2 {
         font-size: 1.8rem;
     }

     .package-cards-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 10px;
         margin-top: 1.5rem;
     }

     .package-card-item {
         padding: 10px 8px;
     }

     .card-icon {
         font-size: 1.2rem;
         margin-bottom: 6px;
     }

     .price-tag {
         font-size: 0.75rem;
         padding: 2px 6px;
     }

     .offer-badge {
         font-size: 0.8rem;
         padding: 5px 10px;
     }
 }

 @media (max-width: 575.98px) {
     .package-cards-grid {
         grid-template-columns: repeat(3, 1fr);
         gap: 8px;
     }

     .package-card-item {
         padding: 8px 6px;
     }

     .card-icon {
         font-size: 1rem;
     }

     .banner-content h2 {
         font-size: 1.5rem;
     }

     .package-card-item h6 {
         font-size: 0.8rem;
     }

     .package-card-item p {
         font-size: 0.7rem;
     }
 }