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

body {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
   line-height: 1.6;
   color: #333;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   min-height: 100vh;
}

.hidden {
   display: none !important;
}

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

/* Header */
.header {
   background: rgba(255, 255, 255, 0.95);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
   padding: 15px 0;
   position: sticky;
   top: 0;
   z-index: 100;
}

.header .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo {
   font-size: 24px;
   font-weight: 700;
   color: #4c63d2;
}

.urgency-badge {
   background: #ff4757;
   color: white;
   padding: 8px 16px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 600;
   animation: pulse 2s infinite;
}

@keyframes pulse {
   0%,
   100% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.05);
   }
}

/* Hero Section */
.hero {
   background: white;
   padding: 60px 0;
   text-align: center;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.hero h1 {
   font-size: 3.5rem;
   font-weight: 800;
   color: #2c3e50;
   margin-bottom: 20px;
   line-height: 1.2;
}

.hero .highlight {
   color: #e74c3c;
   text-decoration: underline;
   text-decoration-color: #f39c12;
}

.hero .subhead {
   font-size: 1.4rem;
   color: #555;
   max-width: 800px;
   margin: 0 auto 40px;
   font-weight: 500;
}

.deadline {
   background: linear-gradient(135deg, #ff6b6b, #ee5a52);
   color: white;
   display: inline-block;
   padding: 15px 30px;
   border-radius: 8px;
   font-size: 1.2rem;
   font-weight: 700;
   margin-bottom: 40px;
   box-shadow: 0 4px 15px rgba(238, 90, 82, 0.3);
}

/* Benefits Section */
.benefits {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 30px;
   margin: 50px 0;
}

.benefit {
   background: white;
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   text-align: left;
   border-left: 4px solid #4c63d2;
}

.benefit-icon {
   width: 60px;
   height: 60px;
   background: linear-gradient(135deg, #4c63d2, #667eea);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   font-size: 24px;
   color: white;
}

.benefit h3 {
   font-size: 1.3rem;
   color: #2c3e50;
   margin-bottom: 10px;
   font-weight: 700;
}

.benefit p {
   color: #666;
   line-height: 1.6;
}

/* Guarantee Bar */
.guarantee {
   background: linear-gradient(135deg, #2ecc71, #27ae60);
   color: white;
   padding: 30px;
   border-radius: 12px;
   text-align: center;
   margin: 50px 0;
   box-shadow: 0 5px 20px rgba(46, 204, 113, 0.3);
}

.guarantee h2 {
   font-size: 2rem;
   margin-bottom: 15px;
   font-weight: 700;
}

.guarantee p {
   font-size: 1.2rem;
   opacity: 0.95;
}

/* Pricing Section */
.pricing {
   background: transparent;
   padding: 60px 0;
   margin: 50px 0;
}

.pricing .container {
   background: white;
   padding: 50px;
   border-radius: 12px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   border-left: 4px solid #4c63d2;
}

.pricing-header {
   text-align: center;
   margin-bottom: 50px;
}

.pricing-header h2 {
   font-size: 2.5rem;
   color: #2c3e50;
   margin-bottom: 15px;
   font-weight: 700;
}

.pricing-subtitle {
   font-size: 1.3rem;
   color: #e74c3c;
   font-weight: 600;
   margin: 0;
}

.pricing-main {
   display: flex;
   justify-content: center;
   margin-bottom: 50px;
}

.pricing-highlight {
   position: relative;
   max-width: 600px;
   width: 100%;
}

.highlight-badge {
   position: absolute;
   top: -15px;
   left: 50%;
   transform: translateX(-50%);
   background: linear-gradient(135deg, #ff6b6b, #ee5a52);
   color: white;
   padding: 8px 20px;
   border-radius: 20px;
   font-size: 0.9rem;
   font-weight: 700;
   z-index: 10;
   box-shadow: 0 4px 15px rgba(238, 90, 82, 0.3);
}

.pricing-card {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
   padding: 40px;
   border-radius: 16px;
   text-align: center;
   box-shadow: 0 10px 30px rgba(76, 99, 210, 0.3);
   position: relative;
   overflow: hidden;
}

.pricing-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 16px;
}

.pricing-title {
   font-size: 1.8rem;
   font-weight: 700;
   margin-bottom: 30px;
   position: relative;
   z-index: 2;
   color: white;
}

.pricing-section {
   margin-bottom: 30px;
   position: relative;
   z-index: 2;
}

.pricing-section.ongoing {
   border-top: 2px solid rgba(255, 255, 255, 0.3);
   padding-top: 25px;
   margin-top: 25px;
}

.section-label {
   font-size: 1.2rem;
   font-weight: 600;
   color: white;
   margin-bottom: 15px;
   display: block;
}

.pricing-amount {
   margin-bottom: 15px;
}

.price {
   font-size: 3rem;
   font-weight: 800;
   display: block;
   line-height: 1;
   color: white;
}

.period {
   font-size: 1.1rem;
   opacity: 0.9;
   font-weight: 500;
   color: white;
}

.pricing-breakdown {
   background: rgba(255, 255, 255, 0.2);
   border-radius: 8px;
   padding: 15px;
   margin-bottom: 0;
   position: relative;
   z-index: 2;
}

.breakdown-item {
   display: flex;
   justify-content: space-between;
   margin-bottom: 6px;
   color: white !important;
   font-size: 0.9rem;
}

.breakdown-item:last-child {
   margin-bottom: 0;
}

.breakdown-label {
   font-weight: 500;
   color: white !important;
}

.breakdown-value {
   font-weight: 700;
   color: white !important;
}

.monthly-price {
   margin-bottom: 15px;
}

.monthly-amount {
   font-size: 2.2rem;
   font-weight: 800;
   color: white;
   margin-bottom: 8px;
}

.monthly-period {
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.8);
}

.monthly-daily {
   font-size: 1rem;
   color: rgba(255, 255, 255, 0.9);
   font-weight: 500;
   margin-bottom: 6px;
}

.monthly-users {
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.8);
   font-style: italic;
}

.monthly-rule {
   background: rgba(255, 255, 255, 0.15);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 6px;
   padding: 12px;
   text-align: center;
   font-size: 0.9rem;
   color: white;
   margin-top: 15px;
}

.pricing-benefits {
   text-align: left;
   position: relative;
   z-index: 2;
   border-top: 2px solid rgba(255, 255, 255, 0.3);
   padding-top: 25px;
   margin-top: 25px;
}

.pricing-benefits .benefit {
   margin-bottom: 8px;
   font-weight: 500;
   color: white !important;
   background: transparent !important;
   padding: 0 !important;
   border-radius: 0 !important;
   box-shadow: none !important;
   border-left: none !important;
   text-align: left !important;
   font-size: 0.95rem;
}

.pricing-trust {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 25px;
   margin-bottom: 50px;
}

.trust-item {
   background: #f8f9fa;
   padding: 25px;
   border-radius: 8px;
   text-align: center;
   box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
   border-left: 4px solid #4c63d2;
   border: 2px solid #e1e8ed;
}

.trust-icon {
   font-size: 2rem;
   margin-bottom: 15px;
}

.trust-text {
   font-size: 0.95rem;
   color: #333;
   line-height: 1.5;
}

.pricing-cta {
   background: linear-gradient(135deg, #2ecc71, #27ae60);
   color: white;
   padding: 40px;
   border-radius: 12px;
   text-align: center;
   box-shadow: 0 8px 25px rgba(46, 204, 113, 0.3);
}

.cta-text h3 {
   font-size: 2rem;
   margin-bottom: 15px;
   font-weight: 700;
   color: white;
}

.cta-text p {
   font-size: 1.1rem;
   margin-bottom: 30px;
   opacity: 0.95;
   color: white;
}

.pricing-cta-button {
   background: white;
   color: #27ae60;
   border: none;
   padding: 18px 40px;
   border-radius: 50px;
   font-size: 1.2rem;
   font-weight: 700;
   cursor: pointer;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
   margin-bottom: 15px;
}

.pricing-cta-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.cta-note {
   font-size: 0.9rem;
   opacity: 0.9;
   font-style: italic;
   color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
   .pricing .container {
      padding: 30px 20px;
   }

   .pricing-main {
      padding: 0 10px;
   }

   .pricing-header h2 {
      font-size: 2rem;
   }

   .price {
      font-size: 2.5rem;
   }

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

   .monthly-amount {
      font-size: 1.8rem;
   }

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

   .cta-text h3 {
      font-size: 1.5rem;
   }
}

/* Form Section */
.form-section {
   background: white;
   padding: 50px;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   margin: 50px 0;
}

.form-header {
   text-align: center;
   margin-bottom: 40px;
}

.form-header h2 {
   font-size: 2.5rem;
   color: #2c3e50;
   margin-bottom: 15px;
   font-weight: 700;
}

.deposit-info {
   background: #f8f9fa;
   padding: 20px;
   border-radius: 8px;
   margin-bottom: 30px;
   border-left: 4px solid #4c63d2;
}

.form-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 20px;
   margin-bottom: 30px;
}

.form-group {
   display: flex;
   flex-direction: column;
}

.form-group label {
   font-weight: 600;
   margin-bottom: 8px;
   color: #333;
}

.form-group input,
.form-group select {
   padding: 12px;
   border: 2px solid #e1e8ed;
   border-radius: 6px;
   font-size: 16px;
   transition: border-color 0.3s;
}

.form-group input:focus,
.form-group select:focus {
   outline: none;
   border-color: #4c63d2;
   box-shadow: 0 0 0 3px rgba(76, 99, 210, 0.1);
}

/* Jumpbutton CTA Styling */
#jumpbutton {
   display: inline-block;
   padding: 14px 28px;
   margin-top: 1rem;
   font-size: 1.1rem;
   font-weight: 700;
   text-transform: uppercase;
   text-decoration: none;
   text-align: center;
   border-radius: 9999px; /* pill shape */
   background: #ff5722; /* bold orange against green */
   color: #fff;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
   cursor: pointer;
   transition: all 0.25s ease-in-out;
}

/* Hover effect */
#jumpbutton:hover {
   background: #e64a19;
   transform: translateY(-2px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
   text-decoration: none;
}

/* Active/click effect */
#jumpbutton:active {
   background: #d84315;
   transform: translateY(1px);
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Focus accessibility */
#jumpbutton:focus {
   outline: 3px solid #fff;
   outline-offset: 2px;
}

/* Success message box */
#success-message {
   display: none; /* hidden by default, shown with .show */
   margin-top: 2rem;
   padding: 2rem;
   border-radius: 12px;
   background: #e9f8ef; /* soft mint green */
   border: 1px solid #b2e0c2;
   color: #2e7d32; /* deep green for text */
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
   text-align: center;
   animation: fadeIn 0.5s ease forwards;
}

#success-message.show {
   display: block;
}

/* Headline */
#success-message h3 {
   margin-top: 0;
   margin-bottom: 0.5rem;
   font-size: 1.4rem;
   color: #1b5e20; /* slightly darker for emphasis */
}

/* Paragraph text */
#success-message p {
   margin: 0.5rem 0 1.5rem;
   font-size: 1rem;
   line-height: 1.6;
   color: #2e7d32;
}

/* Smooth fade in */
@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

.cta-button {
   background: linear-gradient(135deg, #4c63d2, #667eea);
   color: white;
   padding: 18px 40px;
   border: none;
   border-radius: 8px;
   font-size: 1.3rem;
   font-weight: 700;
   cursor: pointer;
   width: 100%;
   transition: transform 0.2s, box-shadow 0.2s;
   margin-top: 20px;
   position: relative;
}

.cta-button:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 25px rgba(76, 99, 210, 0.3);
}

.cta-button:disabled {
   cursor: not-allowed;
   opacity: 0.7;
   transform: none !important;
   box-shadow: none !important;
}

.cta-button .button-text,
.cta-button .button-spinner {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.cta-button .button-spinner.hidden {
   display: none;
}

.cta-button .button-text.hidden {
   display: none;
}

.cta-button .spinner {
   width: 20px;
   height: 20px;
   animation: spin 1s linear infinite;
}

.cta-button .spinner .path {
   stroke-dasharray: 90, 150;
   stroke-dashoffset: 0;
   stroke-linecap: round;
   animation: dash 1.5s ease-in-out infinite;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

@keyframes dash {
   0% {
      stroke-dasharray: 1, 150;
      stroke-dashoffset: 0;
   }
   50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -35;
   }
   100% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -124;
   }
}

/* Scarcity Band */
.scarcity {
   background: linear-gradient(135deg, #f39c12, #e67e22);
   color: white;
   padding: 20px;
   text-align: center;
   border-radius: 8px;
   margin: 30px 0;
   font-weight: 600;
   font-size: 1.1rem;
}

.slots-remaining {
   font-size: 1.5rem;
   font-weight: 700;
   margin-bottom: 10px;
}

/* Social Proof */
.social-proof {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   gap: 30px;
   margin: 50px 0;
}

.proof-item {
   background: white;
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   text-align: center;
}

.proof-image {
   width: 100%;
   height: 200px;
   background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 20px;
   filter: blur(3px);
   opacity: 0.8;
}

.proof-label {
   font-weight: 600;
   color: #2c3e50;
   margin-bottom: 10px;
}

.proof-description {
   color: #666;
   font-size: 0.9rem;
}

/* Footer */
.footer {
   background: white;
   padding: 30px 0;
   text-align: center;
   margin-top: 50px;
   border-top: 1px solid #e1e8ed;
}

.footer-message {
   font-size: 1.2rem;
   color: #4c63d2;
   font-weight: 600;
}

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

   .hero .subhead {
      font-size: 1.2rem;
   }

   .form-section {
      padding: 30px 20px;
   }

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

/* Cookie Consent Styles */
#cookie-consent-banner {
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(44, 62, 80, 0.95);
   backdrop-filter: blur(10px);
   border-top: 3px solid #4c63d2;
   z-index: 10000;
   padding: 20px;
   box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
}

.cookie-consent-content {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px;
}

.cookie-text {
   flex: 1;
   color: white;
}

.cookie-text h3 {
   font-size: 1.2rem;
   margin-bottom: 8px;
   font-weight: 700;
}

.cookie-text p {
   font-size: 0.95rem;
   line-height: 1.5;
   opacity: 0.9;
}

.cookie-actions {
   display: flex;
   gap: 15px;
   flex-shrink: 0;
}

.cookie-btn {
   padding: 12px 24px;
   border: 2px solid transparent;
   border-radius: 6px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
   font-size: 0.9rem;
   text-decoration: none;
   display: inline-block;
}

.cookie-accept-btn {
   background: linear-gradient(135deg, #4c63d2, #667eea);
   color: white;
   border-color: #4c63d2;
}

.cookie-accept-btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(76, 99, 210, 0.4);
}

.cookie-reject-btn {
   background: transparent;
   color: #e74c3c;
   border-color: #e74c3c;
}

.cookie-reject-btn:hover {
   background: #e74c3c;
   color: white;
}

.cookie-settings-btn {
   background: transparent;
   color: white;
   border-color: rgba(255, 255, 255, 0.5);
}

.cookie-settings-btn:hover {
   background: white;
   color: #2c3e50;
}

/* Cookie Modal Styles */
#cookie-modal {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.7);
   z-index: 10001;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}

.cookie-modal-content {
   background: white;
   border-radius: 12px;
   max-width: 600px;
   width: 100%;
   max-height: 80vh;
   overflow-y: auto;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cookie-modal-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 30px 30px 20px;
   border-bottom: 1px solid #e1e8ed;
}

.cookie-modal-header h2 {
   font-size: 1.5rem;
   color: #2c3e50;
   margin: 0;
   font-weight: 700;
}

.cookie-close-btn {
   background: none;
   border: none;
   font-size: 24px;
   color: #666;
   cursor: pointer;
   padding: 5px;
   line-height: 1;
}

.cookie-close-btn:hover {
   color: #333;
}

.cookie-modal-body {
   padding: 20px 30px;
}

.cookie-category {
   margin-bottom: 30px;
   padding-bottom: 20px;
   border-bottom: 1px solid #f5f5f5;
}

.cookie-category:last-child {
   border-bottom: none;
   margin-bottom: 0;
}

.cookie-category-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 10px;
}

.cookie-category h3 {
   font-size: 1.1rem;
   color: #2c3e50;
   margin: 0;
   font-weight: 600;
}

.cookie-category p {
   color: #666;
   line-height: 1.5;
   margin: 0;
   font-size: 0.9rem;
}

.cookie-status {
   padding: 4px 12px;
   border-radius: 4px;
   font-size: 0.8rem;
   font-weight: 600;
}

.cookie-status.required {
   background: #e8f5e8;
   color: #27ae60;
}

/* Toggle Switch */
.cookie-toggle {
   position: relative;
   display: inline-block;
   width: 50px;
   height: 24px;
}

.cookie-toggle input {
   opacity: 0;
   width: 0;
   height: 0;
}

.cookie-slider {
   position: absolute;
   cursor: pointer;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: #ccc;
   transition: 0.4s;
   border-radius: 24px;
}

.cookie-slider:before {
   position: absolute;
   content: "";
   height: 18px;
   width: 18px;
   left: 3px;
   bottom: 3px;
   background-color: white;
   transition: 0.4s;
   border-radius: 50%;
}

input:checked + .cookie-slider {
   background-color: #4c63d2;
}

input:checked + .cookie-slider:before {
   transform: translateX(26px);
}

.cookie-modal-footer {
   padding: 20px 30px 30px;
   display: flex;
   gap: 15px;
   justify-content: flex-end;
}

/* Responsive Cookie Consent */
@media (max-width: 768px) {
   .cookie-consent-content {
      flex-direction: column;
      text-align: center;
      gap: 20px;
   }

   .cookie-actions {
      flex-direction: column;
      width: 100%;
   }

   .cookie-btn {
      width: 100%;
      justify-content: center;
   }

   .cookie-modal-content {
      margin: 20px;
      max-height: calc(100vh - 40px);
   }

   .cookie-modal-header,
   .cookie-modal-body,
   .cookie-modal-footer {
      padding-left: 20px;
      padding-right: 20px;
   }

   .cookie-modal-footer {
      flex-direction: column;
   }
}