:root {
     --primary-blue: #0056A4;
     --accent-red: #D62828;
     --white: #FFFFFF;
     --light-gray: #F5F5F5;
     --dark-graphite: #222222;
 }

 * {
     font-family: 'Inter', system-ui, -apple-system, sans-serif;
 }

 .primary-blue {
     background-color: var(--primary-blue);
 }

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

 .border-primary-blue {
     border-color: var(--primary-blue);
 }

 .accent-red {
     background-color: var(--accent-red);
 }

 .text-accent-red {
     color: var(--accent-red);
 }

 .border-accent-red {
     border-color: var(--accent-red);
 }

 .bg-light-gray {
     background-color: var(--light-gray);
 }

 .text-dark-graphite {
     color: var(--dark-graphite);
 }

 .btn-primary {
     background-color: var(--primary-blue);
     color: var(--white);
     transition: all 0.3s ease;
     box-shadow: 0 4px 15px rgba(0, 86, 164, 0.3);
 }

 .btn-primary:hover {
     background-color: var(--accent-red);
     transform: translateY(-2px);
     box-shadow: 0 8px 25px rgba(214, 40, 40, 0.4);
 }

 .fade-in-up {
     opacity: 0;
     transform: translateY(40px);
     transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .fade-in-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 .fade-in-left {
     opacity: 0;
     transform: translateX(-40px);
     transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .fade-in-left.visible {
     opacity: 1;
     transform: translateX(0);
 }

 .fade-in-right {
     opacity: 0;
     transform: translateX(40px);
     transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

 .fade-in-right.visible {
     opacity: 1;
     transform: translateX(0);
 }

 .hero-image {
     filter: drop-shadow(0 20px 40px rgba(0, 86, 164, 0.2));
     animation: float 6s ease-in-out infinite;
 }

 @keyframes float {

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

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

 .benefit-card {
     transition: all 0.3s ease;
     border: 2px solid transparent;
 }

 .benefit-card:hover {
     border-color: var(--primary-blue);
     transform: translateY(-8px);
     box-shadow: 0 15px 35px rgba(0, 86, 164, 0.15);
 }

 .testimonial-card {
     border-left: 4px solid var(--primary-blue);
     transition: all 0.3s ease;
 }

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

 .countdown-box {
     background: linear-gradient(135deg, var(--primary-blue) 0%, #0066CC 100%);
     border: 3px solid var(--accent-red);
     box-shadow: 0 0 25px rgba(214, 40, 40, 0.3);
 }

 .countdown-digit {
     background: var(--white);
     color: var(--accent-red);
     border-radius: 8px;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
 }

 .faq-item {
     border: 1px solid #e5e7eb;
     transition: all 0.3s ease;
 }

 .faq-item:hover {
     border-color: var(--primary-blue);
     box-shadow: 0 4px 15px rgba(0, 86, 164, 0.1);
 }

 .sticky-header {
     backdrop-filter: blur(15px);
     background: rgba(255, 255, 255, 0.95);
     border-bottom: 1px solid rgba(0, 86, 164, 0.1);
 }

 .pulse-red {
     animation: pulse-red 2s infinite;
 }

 @keyframes pulse-red {

     0%,
     100% {
         color: var(--accent-red);
     }

     50% {
         color: #FF6B6B;
     }
 }

 .shimmer {
     position: relative;
     overflow: hidden;
 }

 .shimmer::after {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     animation: shimmer 2s infinite;
 }

 @keyframes shimmer {
     0% {
         left: -100%;
     }

     100% {
         left: 100%;
     }
 }

 /* Fixed Order Now Button */
 .fixed-order-button {
     position: fixed;
     bottom: 20px;
     right: 20px;
     z-index: 999;
     background: linear-gradient(135deg, #0033A0 0%, #0044CC 50%, #0033A0 100%);
     color: white;
     padding: 16px 24px;
     border-radius: 50px;
     font-weight: 900;
     font-size: 16px;
     letter-spacing: 0.5px;
     text-transform: uppercase;
     text-decoration: none;
     box-shadow: 0 8px 25px rgba(0, 51, 160, 0.4), 0 0 0 3px rgba(255, 111, 0, 0.3);
     border: 2px solid #FF6F00;
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     min-width: 180px;
     backdrop-filter: blur(10px);
     animation: pulse-glow-fixed 3s ease-in-out infinite;
 }

 .fixed-order-button:hover {
     background: linear-gradient(135deg, #0044CC 0%, #0055DD 50%, #0044CC 100%);
     transform: scale(1.05) translateY(-2px);
     box-shadow: 0 15px 35px rgba(0, 51, 160, 0.6), 0 0 0 4px rgba(255, 111, 0, 0.5);
     filter: brightness(1.1);
 }

 .fixed-order-button:active {
     transform: scale(0.98) translateY(0px);
     transition: all 0.1s ease;
 }

 .fixed-order-button .button-text {
     position: relative;
     z-index: 2;
 }

 .fixed-order-button .button-icon {
     transition: transform 0.3s ease;
     filter: drop-shadow(0 0 3px rgba(255, 111, 0, 0.8));
 }

 .fixed-order-button:hover .button-icon {
     transform: translateX(3px) scale(1.1);
 }

 .fixed-order-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, rgba(255, 111, 0, 0.2) 0%, transparent 50%, rgba(255, 111, 0, 0.2) 100%);
     border-radius: 50px;
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .fixed-order-button:hover::before {
     opacity: 1;
 }

 @keyframes pulse-glow-fixed {

     0%,
     100% {
         box-shadow: 0 8px 25px rgba(0, 51, 160, 0.4), 0 0 0 3px rgba(255, 111, 0, 0.3);
     }

     50% {
         box-shadow: 0 12px 30px rgba(0, 51, 160, 0.6), 0 0 0 5px rgba(255, 111, 0, 0.5);
     }
 }

 /* Mobile optimization */
 @media (max-width: 768px) {
     .fixed-order-button {
         bottom: 15px;
         right: 15px;
         padding: 14px 20px;
         font-size: 14px;
         min-width: 160px;
     }
 }

 /* Urgency indicator */
 .urgency-dot {
     position: absolute;
     top: -2px;
     right: -2px;
     width: 12px;
     height: 12px;
     background: #FF6F00;
     border-radius: 50%;
     border: 2px solid white;
     animation: urgency-pulse 2s ease-in-out infinite;
 }

 @keyframes urgency-pulse {

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

     50% {
         transform: scale(1.3);
         opacity: 0.8;
     }
 }

 .star-rating {
     color: #FFD700;
 }

 .problem-icon {
     color: var(--accent-red);
     background: rgba(214, 40, 40, 0.1);
 }

 .solution-icon {
     color: var(--primary-blue);
     background: rgba(0, 86, 164, 0.1);
 }

 @media (max-width: 768px) {
     .hero-title {
         font-size: 2.5rem;
         line-height: 1.2;
     }

     .mobile-center {
         text-align: center;
     }

     .mobile-product-container {
         order: -1;
         margin-bottom: 2rem;
         padding: 1rem;
     }

     .mobile-product-image {
         max-width: 280px;
         margin: 0 auto;
         display: block;
     }

     .mobile-hero-content {
         order: 2;
         padding: 0 1rem;
     }

     .mobile-floating-badges {
         transform: scale(0.8);
     }

     .mobile-countdown {
         max-width: 320px;
         margin: 0 auto;
         padding: 1rem;
     }

     .mobile-text-spacing {
         margin-bottom: 1.5rem;
     }

     .mobile-cta-spacing {
         margin-top: 2rem;
         margin-bottom: 2rem;
     }
 }

 @media (max-width: 640px) {
     .mobile-product-image {
         max-width: 240px;
     }

     .mobile-countdown {
         max-width: 280px;
         padding: 0.75rem;
     }

     .hero-title {
         font-size: 2rem;
     }
 }

 /* Main Header Styles */
 #mainHeader {
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 }

 #mainHeader.scrolled {
     background: rgba(30, 58, 138, 0.95);
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
 }

 /* Mobile Menu Styles */
 #mobileMenuPanel {
     background: rgba(255, 255, 255, 0.98);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }

 #mobileMenuPanel.active {
     transform: translateY(0) !important;
     opacity: 1 !important;
 }

 .mobile-nav-link {
     transition: all 0.2s ease;
 }

 .mobile-nav-link:hover {
     transform: translateX(4px);
 }

 /* Mobile menu button animation */
 #mobileToggleBtn {
     transition: all 0.3s ease;
     z-index: 50;
 }

 #mobileToggleBtn:hover {
     transform: scale(1.1);
 }

 /* Prevent body scroll when menu is open */
 body.mobile-menu-open {
     overflow: hidden;
 }

 /* Section scroll offset for fixed header */
 section[id] {
     scroll-margin-top: 80px;
 }

 /* Mobile responsiveness */
 @media (max-width: 768px) {
     #mainHeader nav {
         display: none;
     }

     #mobileToggleBtn {
         display: block !important;
     }

     section[id] {
         scroll-margin-top: 100px;
     }
 }

 @media (max-width: 640px) {
     #mainHeader .container {
         padding-left: 1rem;
         padding-right: 1rem;
     }

     #mainHeader .text-2xl {
         font-size: 1.25rem;
     }

     #mainHeader .text-xs {
         font-size: 0.625rem;
     }
 }