:root {
     --primary-color: #000;
     --secondary-color: #fff;
     --accent-color: #90ee90;
     --text-color: #333;
     --gray-color: #54595f;
     --spacing-unit: 1rem;
     --border-radius: 8px;
     --transition-speed: 0.3s;
     --container-width: 1200px;
     --font-primary: "Roboto", sans-serif;
     --font-secondary: "Alumni Sans Pinstripe", sans-serif;
 }

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

 body {
     font-family: var(--font-primary);
     background-color: var(--primary-color);
     color: var(--secondary-color);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 img {
     max-width: 100%;
     height: auto;
     display: block;
 }

 .container {
     max-width: var(--container-width);
     margin: 0 auto;
     padding: 0 var(--spacing-unit) var(--spacing-unit);
     overflow: hidden;
 }

 .lazy {
     opacity: 0;
     transition: opacity var(--transition-speed) ease-in;
 }

 .lazy.loaded {
     opacity: 1;
 }

 .cta-button,
 .buy-button {
     display: inline-block;
     padding: 0.6em 1.1em;
     border-radius: var(--border-radius);
     text-decoration: none;
     font-weight: 600;
     text-transform: uppercase;
     transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
     cursor: pointer;
 }

 .cta-button {
     background-color: var(--secondary-color);
     color: var(--primary-color);
     font-family: var(--font-secondary);
     font-size: 1.5rem;
     letter-spacing: 2px;
 }

 .buy-button {
     background-color: var(--accent-color);
     color: var(--primary-color);
     font-size: 1.25rem;
     padding: 1em 2em;
 }

 .cta-button:hover,
 .buy-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 .fade-in {
     animation: fadeIn var(--transition-speed) ease-in;
 }

 @media (max-width: 768px) {
     :root {
         --spacing-unit: 0.8rem;
     }

     .container {
         padding: 0 var(--spacing-unit);
     }

     h1 {
         font-size: 1.8rem;
     }

     h2 {
         font-size: 1.5rem;
     }

     p {
         font-size: 1rem;
     }

     .cta-button,
     .buy-button {
         font-size: 1.2rem;
         padding: 0.8em 1.6em;
     }
 }

 @media screen and (prefers-reduced-motion: reduce) {
     * {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
     }
 }

 .will-change {
     will-change: transform;
 }

 @media print {
     .no-print {
         display: none !important;
     }
 }

 .header {
     text-align: center;
     background-image: url("../images/background_top.webp");
     background-size: cover;
     background-position: top center;
     background-repeat: no-repeat;
     padding-top: 500px;
     width: 100%;
     position: relative;
     margin: 0;
     padding-bottom: calc(var(--spacing-unit) * 2);
     box-sizing: border-box;
     z-index: 1;
 }

 .logo {
     max-width: 272px;
     height: auto;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }

 h1,
 h2 {
     margin: calc(var(--spacing-unit) * 1.5) 0;
     font-family: "Roboto", sans-serif;
     font-weight: 600;
     line-height: 1.2;
     font-size: 1.2rem;
 }

 .header h2 {
     margin: 0;
     font-weight: 22px;
 }

 .header h1 {
    margin: 0;
    letter-spacing: 3.9px;
    font-weight: 500;
}

 .subtitle {
     font-size: 14px;
     font-weight: 300;
     line-height: 1.2em;
 }

 .benefits {
     background-image: url("../images/background_1.webp");
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     padding: var(--spacing-unit) 0;
     margin: 0;
 }

 .benefit-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--spacing-unit);
     margin: calc(var(--spacing-unit) * 2) 0;
     justify-items: center;
     align-items: center;
 }

 .benefit-item {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
 }

 .benefit-item img {
     max-width: 72%;
     height: auto;
     margin: 0 auto;
 }

 .benefits h2 {
     text-align: center;
     font-weight: 600;
     margin-top: var(--spacing-unit);
 }

 .faq {
     padding: 40px 20px;
     background-color: #000;
     width: 100%;
     max-width: 100%;
     box-sizing: border-box;
     overflow: hidden;
 }

 .faq h2 {
     color: #fff;
     text-align: center;
     font-size: 28px;
     margin-bottom: 30px;
 }

 .accordion {
     max-width: 800px;
     margin: 0 auto;
     padding: 0 15px;
 }

 .accordion-item {
     background-color: #54595f;
     border-radius: 8px;
     overflow: hidden;
     margin-bottom: 10px;
     width: 100%;
 }

 .accordion-header {
     padding: 15px 20px;
     display: flex;
     align-items: flex-start;
     gap: 15px;
     cursor: pointer;
     width: 100%;
     box-sizing: border-box;
 }

 .plus-icon {
     color: #fff;
     font-size: 24px;
     font-weight: bold;
     min-width: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .accordion-header h3 {
     margin: 0;
     font-size: 16px;
     line-height: 1.4;
     flex: 1;
     font-weight: 400;
     word-wrap: break-word;
     overflow-wrap: break-word;
 }

 @media (max-width: 768px) {
     .faq {
         padding: 30px 15px;
     }

     .faq h2 {
         font-size: 24px;
     }

     .accordion-header {
         padding: 12px 15px;
     }

     .accordion-header h3 {
         font-size: 14px;
     }
 }

 .footer {
     text-align: center;
     padding: calc(var(--spacing-unit) * 2) 0;
     width: 100%;
     box-sizing: border-box;
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 .footer-logo {
     max-width: 100%;
     height: auto;
     margin: 0 auto var(--spacing-unit);
     padding: 0 var(--spacing-unit);
     box-sizing: border-box;
     display: block;
 }

 @media (max-width: 768px) {
     .header {
         min-height: 80vh;
         padding: 150px var(--spacing-unit) 0 var(--spacing-unit);
         display: flex;
         gap: 20px;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         width: 100vw;
         margin-left: -50vw;
         left: 50%;
     }

     h1 {
         font-size: 1.8rem;
     }

     h2 {
         font-size: 1rem;
     }

     .header h2 {
        font-size: 22px;
     }

     .benefit-item {
         padding: 0;
         width: 100%;
     }

     .benefit-item img {
        height: 240px;
         width: 100%;
     }

     .conectivity {
         width: 100vw;
         position: relative;
         left: 50%;
         right: 50%;
         margin-left: -50vw;
         margin-right: -50vw;
     }

     .footer {
         padding: var(--spacing-unit);
     }

     .footer-logo {
         width: 100%;
         max-width: 300px;
     }
 }

 @media (min-width: 769px) {
     .header {
         padding-top: 550px !important;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         gap: 20px;
     }

     .header h1 {
        font-size: 2.5rem;
     }

     .header h2 {
        font-size: 22px;
     }

     .conectivity-spacer {
         display: none;
     }
 }

 .conectivity {
     background-image: url("../images/background_2.webp");
     background-size: cover;
     background-position: top;
     background-repeat: no-repeat;
     padding: calc(var(--spacing-unit) * 4) 0;
     text-align: center;
 }

 .conectivity-content {
     max-width: 600px;
     margin: 0 auto;
     padding: 0 var(--spacing-unit);
 }

 .conectivity h2 {
     font-size: 2rem;
     margin-bottom: calc(var(--spacing-unit) * 2);
 }

 .conectivity p {
     font-size: 1.1rem;
     line-height: 1.6;
     margin-bottom: calc(var(--spacing-unit) * 2);
 }

 .conectivity .disclaimer {
     font-size: 0.9rem;
     opacity: 0.8;
     margin-top: calc(var(--spacing-unit) * 2);
 }

 .conectivity-spacer {
     height: 340px;
 }

 @media (max-width: 768px) {
     .conectivity h2 {
         font-size: 1.5rem;
     }

     .conectivity p {
         font-size: 1rem;
     }
 }

 .trial {
     background-image: url("../images/background_1.webp");
     background-size: auto;
     background-position: center;
     background-repeat: no-repeat;
     padding: calc(var(--spacing-unit) * 4) 0;
     text-align: center;
     width: 100vw;
     position: relative;
     left: 50%;
     right: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
 }

 .trial-content {
     max-width: 600px;
     margin: 0 auto;
     padding: 0 var(--spacing-unit);
 }

 .trial h2 {
     font-size: 2rem;
     margin-bottom: calc(var(--spacing-unit) * 1.5);
 }

 .trial .highlight {
     font-size: 3rem;
     display: block;
     margin-top: 0.5rem;
 }

 .trial p {
     font-size: 1.1rem;
     line-height: 1.6;
     margin-bottom: calc(var(--spacing-unit) * 2);
     opacity: 0.9;
 }

 @media (max-width: 768px) {
     .trial h2 {
         font-size: 1.5rem;
     }

     .trial .highlight {
         font-size: 2rem;
     }

     .trial p {
         font-size: 1rem;
     }
 }

 .spacex-section {
     background-color: #000;
     color: #fff;
     padding: 40px 20px;
     text-align: center;
 }

 .spacex-content {
     max-width: 800px;
     margin: 0 auto;
 }

 .spacex-content h2 {
     font-size: 24px;
     margin-bottom: 20px;
     color: #fff;
 }

 .spacex-content p {
     font-size: 16px;
     line-height: 1.6;
 }

 .exclusive-offer {
     background-color: #000;
     color: #fff;
     padding: 40px 0;
     text-align: center;
     width: 100%;
     position: relative;
 }

 .offer-content {
     max-width: 800px;
     margin: 0 auto;
 }

 .offer-content h2 {
     font-size: 24px;
     margin-bottom: 20px;
     color: #fff;
 }

 .offer-content p {
     font-size: 16px;
     line-height: 1.6;
     margin-bottom: 30px;
 }

 .countdown {
     display: flex;
     justify-content: center;
     gap: 10px;
     margin: 30px auto;
     flex-wrap: nowrap;
     max-width: 100%;
     padding: 0 10px;
 }

 .countdown-item {
     background: rgba(255, 255, 255, 0.1);
     padding: 10px;
     border-radius: 10px;
     min-width: 80px;
     flex: 1;
     max-width: 120px;
 }

 .countdown-item span {
     display: block;
     font-size: 32px;
     font-weight: bold;
     color: #fff;
 }

 .countdown-item .label {
     font-size: 12px;
     margin-top: 2px;
     color: #ccc;
 }

 .offer-note {
     font-size: 14px;
     color: #ccc;
     font-style: italic;
 }

 @media (max-width: 768px) {
     .countdown-item {
         padding: 8px;
         min-width: 60px;
     }

     .countdown-item span {
         font-size: 24px;
     }

     .countdown-item .label {
         font-size: 10px;
     }
 }

 .price-section {
     background-color: #0f0f0f;
     width: 100%;
     text-align: center;
     overflow: hidden;
 }

 @media (max-width: 768px) {
     .price-section {
         width: 100vw;
         position: relative;
         left: 50%;
         right: 50%;
         margin-left: -50vw;
         margin-right: -50vw;
     }

     .price-content {
         padding: 0;
     }

     .price-image {
         width: 120vw;
         max-width: none;
         position: relative;
         left: 50%;
         transform: translateX(-50%);
         margin-bottom: 2rem;
     }
 }

 .price-content {
     max-width: 500px;
     margin: 0 auto;
     border-radius: 10px;
     padding: 20px;
     position: relative;
 }

 .price-image {
     width: 100%;
     height: auto;
     margin: 0 auto;
     display: block;
 }

 @media (max-width: 768px) {
     .price-image {
         width: 100vw;
         position: relative;
         left: 50%;
         transform: translateX(-50%);
     }
 }

 .price-section h2 {
     margin-top: 30px;
     color: #fff;
     font-size: 28px;
     margin: 0;
     text-transform: uppercase;
 }

 .no-fees {
     color: #B4EB1C;
     font-size: 20px;   
     font-weight: bold;
     margin: 0;
     text-transform: uppercase;
     font-weight: 500;
     letter-spacing: 1.8px;
 }

 .discount-badge {
     background-color: #A9BCBD;
     color: #000;
     padding: 0px 50px;
     border-radius: 25px;
     display: inline-block;
     margin: 5px 0;
     font-weight: bold;
     letter-spacing: 1.5px;
 }

 .price-info {
     margin: 10px 0 0 0;
 }

 .original-price {
     color: #999;
     text-decoration: line-through;
     font-size: 20px;
     margin: 0 0 5px 0;
     font-weight: 400;
     letter-spacing: 0.4px;
     line-height: 1.3em;
 }

 .final-price {
     color: #fff;
     font-size: 35px;
     font-weight: bold;
     margin: 0;
     line-height: 1em;
     letter-spacing: 0.4px;
 }

 .extra-discount {
     color: #fff;
     font-size: 12px;
     margin: 0;
     font-weight: 300;
 }

 .buy-button {
     display: inline-block;
     background-color: #B4EB1C;
     color: #000;
     padding: 15px 40px;
     border-radius: 8px;
     text-decoration: none;
     font-weight: bold;
     font-size: 18px;
     margin: 20px 0 0 0;
     text-transform: uppercase;
     transition: all 0.3s ease;
 }

 .buy-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 8px rgba(144, 238, 144, 0.3);
 }

 .stock-info {
     color: #999;
     font-size: 14px;
     font-style: italic;
     margin-top: 10px;
     line-height: 1.4;
 }

 @media (max-width: 768px) {
     .price-content {
         padding: 0 15px 15px 15px;
     }

     .price-section h2 {
         font-size: 24px;
     }

     .no-fees {
         font-size: 18px;
     }

     .final-price {
         font-size: 35px;
     }

     .buy-button {
         padding: 12px 50px;
         font-size: 18px;
     }
 }

 .included-section {
     padding: 40px 20px;
     width: 100%;
     box-sizing: border-box;
 }

 .included-content {
     max-width: 800px;
     margin: 0 auto;
     text-align: center;
 }

 .included-items {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 20px;
     margin-top: 30px;
 }

 .included-item {
     width: 100%;
     max-width: 500px;
 }

 .included-image {
     width: 100%;
     height: auto;
     display: block;
 }

 @media (max-width: 768px) {
     .included-section {
         padding: 20px 15px;
     }

     .included-item {
         max-width: 100%;
     }

     .included-image {
         max-width: 100%;
     }
 }

 @media (max-width: 768px) {
     .benefits {
         width: 100vw;
         position: relative;
         left: 50%;
         right: 50%;
         margin-left: -50vw;
         margin-right: -50vw;
         padding: var(--spacing-unit) 20px;
     }

     .benefit-grid {
         max-width: 100%;
         overflow: hidden;
     }
 }

 .checkout-secure-img {
     max-width: 300px;
     height: auto;
     margin: 20px auto 0;
     display: block
 }