@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

/*
 * Global Styles
 */
:root {
  --color-bg: #0c0c10;
  /* A slightly lighter background for alternating sections */
  --color-bg-secondary: #14141a;
  --color-primary: #e03232;
  --color-primary-light: #ff4a4a;
  --color-success: #16a34a;
  --color-success-light: #33d17a;
  --color-text: #e5e7eb;
  --color-text-muted: #9ca3af;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: 12px;
  --radius: 20px;
  --transition-fast: 0.3s ease;
  --transition-slow: 0.6s ease;
  /* Additional colors for glows and highlights */
  --color-glow-red: rgba(224, 50, 50, 0.4);
  --color-glow-green: rgba(40, 209, 97, 0.5);
  --color-glow-blue: rgba(50, 100, 220, 0.4);
  /* Section heading colors */
  --heading-large-opacity: 0.12;
  --heading-blur-opacity: 0.02;
  /* Additional glow colors for bonuses and cheat codes */
  --color-cheat-glow: rgba(255, 0, 80, 0.4);

  /* Additional colours for badges and highlights */
  --color-badge-danger-bg: rgba(224, 50, 50, 0.15);
  --color-badge-danger-text: #e03232;
  --color-badge-success-bg: rgba(40, 209, 97, 0.15);
  --color-badge-success-text: #22c55e;

  /* Weapon-specific glow colors for bonus cards */
  --weapon-glow-red: rgba(224, 50, 50, 0.5);
  --weapon-glow-blue: rgba(50, 100, 220, 0.5);
  --weapon-glow-gold: rgba(255, 215, 0, 0.5);
  --weapon-glow-green: rgba(40, 209, 97, 0.5);
}

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


@font-face {
  font-family: 'Copperplate Gothic 32 BC';
  src: url('/wp-content/themes/hello-elementor/fonts/CopperplateGothicStd-32BC.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

.offer-logo-main {
  font-family: 'Copperplate Gothic 32 BC', sans-serif !important;
  letter-spacing: -5px !important;
  font-weight: 900 !important;
}



@font-face {
  font-family: 'Gotham Bold';
  src: url('/wp-content/themes/hello-elementor/fonts/GOTHAM-BOLD.TTF') format('opentype');
  font-weight: 700;
}

.code-text {
    font-family: 'Gotham Bold', sans-serif !important;
}

.mobile-text {
    font-family: 'Gotham Bold', sans-serif !important;
    font-weight: 900 !important;
}
    
body {
  font-family: 'Montserrat', sans-serif;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.6;
  overflow-x: hidden;
}

section {
  padding: 50px 5vw;
  position: relative;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 5vw;
  background: rgba(10, 10, 13, 0.7);
  backdrop-filter: blur(10px);
  z-index: 100;
}
.nav-brand {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
}
.nav-links a {
  margin-right: 1.5rem;
  font-size: 0.9rem;
  text-decoration: none;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}
.nav-links a:hover {
  color: var(--color-primary);
}
.cta-button {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: background var(--transition-fast);
}
.cta-button:hover {
  background: var(--color-primary-light);
}

/* Hero Video */
.hero-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

/* Hero background: swirling red smoke image */
.hero-bg {
  background-image: url('assets/hero-bg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Hero bullets */
.hero-bullets {
  list-style: none;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  align-items: center;
  max-width: 640px;
}
.hero-bullets li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-bullets i {
  color: var(--color-primary);
}
.video-container {
  position: relative;
  width: 100%;
  height: 80vh;
  max-height: 700px;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #111;
}
.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
  padding: 0 20px;
}
.hero-overlay h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.hero-overlay .hero-subtext {
  font-size: 1rem;
  max-width: 600px;
  color: var(--color-text-muted);
}
.scroll-indicator {
  margin-top: 20px;
  color: var(--color-primary);
  font-size: 2rem;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(10px); }
  60% { transform: translateY(5px); }
}

/* Background text for sections */
.section-background-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10vw;
  font-weight: 800;
  /* Base colour for huge section headings; slightly more visible */
  color: rgba(255, 255, 255, var(--heading-large-opacity));
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 1;
  filter: blur(0);
  transition: opacity var(--transition-slow), filter var(--transition-slow), transform var(--transition-slow);
}

/* Blur state for background heading when card appears */
.section-background-text.blur {
  /* When a card slides up the big heading fades and blurs further into the background */
  opacity: var(--heading-blur-opacity);
  filter: blur(6px);
  transform: translate(-50%, -50%) scale(1.1);
}

/* Glass card style */
.glass-card {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  border-radius: var(--radius);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
  transform: translateY(40px) scale(0.95);
  opacity: 0;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.glass-card h2 {
  font-size: 1.6rem;
  margin-bottom: 20px;
}

/* Visible state for glass cards */
.glass-card.visible {
  transform: translateY(0) scale(1);
  opacity: 1;
}
.glass-card ul {
  list-style: none;
  margin-bottom: 20px;
}
.glass-card li {
  margin-bottom: 12px;
  padding-left: 1.2rem;
  position: relative;
}
.glass-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.pain-cta, .promise-cta {
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: 10px;
}

.scroll-indicator-white{
    text-align: center;
}

/* Pain & Promise section specific styling */
.pain-section {
  padding-top: 180px;
  /* Subtle radial gradient to hint at heat/pain */
  background-image: radial-gradient(circle at center, rgba(255, 0, 60, 0.06), transparent 70%);
}
.promise-section {
  padding-top: 180px;
  /* Subtle radial gradient to hint at relief/change */
  background-image: radial-gradient(circle at center, rgba(50, 210, 100, 0.05), transparent 70%);
}

/* Next title preview shown at bottom of pain section */
.next-title {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  font-size: 8vw;
  font-weight: 800;
  letter-spacing: -2px;
  /* base opacity for next section heading */
  color: rgba(255, 255, 255, 0.12);
  text-transform: uppercase;
  pointer-events: none;
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.pain-section.in-view .next-title {
  transform: translate(-50%, 0%);
  opacity: 0.08;
}





section.testimonials-section p.path-subheading {
    text-align: center;
    margin-bottom: 50px;
}




/* Hide only the seek bar/progress line, keep play, volume, fullscreen */
.hero-video::-webkit-media-controls-timeline,
.hero-video::-webkit-media-controls-seek-back-button,
.hero-video::-webkit-media-controls-seek-forward-button {
  display: none !important;
}

.hero-video::-moz-range-track,
.hero-video::-moz-progress-bar {
  display: none !important;
}

.hero-video::-ms-timeline {
  display: none !important;
}




/* outer wrapper */
    .countdown-wrap{
      padding: 28px 40px;
      display:flex;
      gap:0px;
      align-items:center;
      justify-content:center;
      max-width:450px;
      margin: 0 auto;
    }
    
    .countdown-offer-btn {
        text-align: center;
        margin: 0 auto;
        margin-bottom: 20px;
    }
    
    a.cta-button-offer {
        color: #fff;
        text-decoration: none;
        background: #e03332;
        padding: 16px 60px;
        border-radius: 15px 0px;
        font-size: 20px;
        font-weight: 600;
    }
    
    section#video-btn {
    padding: 10px;
}

    /* each time column */
    .time-block{
      text-align:center;
      min-width:86px;
      flex:1;
    }

    .time-value{
      font-size:36px;           /* large number */
      line-height:1;
      font-weight:700;
      color:#e03332;
      letter-spacing:0px;
      display:block;
      padding:0px 0px;
      text-shadow: 0 3px 12px rgba(229,57,53,0.15);
      font-feature-settings: "tnum";
      font-variant-numeric: tabular-nums;
    }

    /* small label under number */
    .time-label{
      margin-top:0px;
      display:block;
      font-weight:300;
      font-size:16px;
      color:var(--label);
      opacity:0.9;
      text-transform: none; /* keep original capitalization from your screenshot */
    }

    /* thin vertical separators like the screenshot spacing (subtle) */
    .divider{
      width:1px;
      height:58px;
      background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
      opacity:0.04;
    }

    /* smaller screens */
    @media (max-width:520px){
      .countdown-wrap{
        gap: 0px;
        padding:18px 18px;
      }
      .time-value{
        font-size:36px;
      }
      .time-label{
        font-size:13px;
      }
      .divider{
        display:none;
      }
    }





/* Offer section */
.offer-section {
  /* Deep dark background for the offer area */
  background: var(--color-bg);
  padding-top: 80px;
  padding-bottom: 0px;
}
.offer-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  justify-content: center;
}
.offer-image {
  flex: 0 0 400px;
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Neon framed container for book and phone */
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius);
  border: 3px solid rgba(255, 0, 60, 0.7);
  box-shadow:
    0 0 20px rgba(255, 0, 60, 0.4),
    0 0 60px rgba(255, 0, 60, 0.3),
    0 0 120px rgba(255, 0, 60, 0.2);
  position: relative;
  overflow: hidden;
}

/* Styling for the product cover image */
.offer-book-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  /* subtle inner glow around the book cover */
  box-shadow: 0 0 30px rgba(224, 50, 50, 0.35);
}
.book-placeholder {
  color: var(--color-text-muted);
  font-size: 1rem;
  text-align: center;
  padding: 20px;
}
.offer-details {
  max-width: 700px;
}
.offer-details h2 {
  font-size: 45px;
  margin-bottom: 24px;
  line-height: 1.3;
}

/* Offer heading lines */
.offer-line1 {
  color: #ffffff;
  font-weight: 700;
}
.offer-line2 {
  color: var(--color-primary);
  font-weight: 800;
}
.offer-description {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 20px;
}
.offer-features {
  list-style: none;
  margin-bottom: 20px;
}
.offer-features li {
  margin-bottom: 10px;
  position: relative;
  padding-left: 1.6rem;
}
.offer-features li i {
  position: absolute;
  left: 0;
  top: 2px;
  color: var(--color-success);
}
.price-wrapper {
  display: flex;
  align-items: center;
  font-size: 1.4rem;
  margin-bottom: 24px;
}
.old-price {
  text-decoration: line-through;
  color: #f87171;
  margin-right: 8px;
}
.new-price {
  color: #33d17a;
  font-weight: 800;
  text-shadow: 0 0 12px rgba(50, 210, 100, 0.6);
}
.arrow {
  margin-right: 8px;
  margin-left: 8px;
  color: #33d17a;
  font-weight: 500;
  font-size: 1.4rem;
}

/* Price in PKR */
.price-pkr {
  font-size: 0.85rem;
  color: var(--color-success);
  margin-bottom: 8px;
}

/* Urgency note in offer */
.offer-urgency {
  font-size: 0.6rem;
  color: var(--color-primary-light);
  margin-bottom: 12px;
  font-style: italic;
}
.primary-btn {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: background var(--transition-fast), transform var(--transition-fast);
  margin-bottom: 10px;
}
.primary-btn:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
}
.down-arrow {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  cursor: pointer;
  gap: 6px;
  margin-top: 50px;
  margin-left: 35px;
  font-style: italic;
}
.down-arrow:hover {
  color: var(--color-primary);
}

a i.fa-solid.fa-angle-down {
    color: #e03332;
}

/* Path section */
.path-section {
  /* Dark base with subtle radial highlight */
  background: var(--color-bg);
  background-image: radial-gradient(circle at center, rgba(224, 50, 50, 0.03), transparent 70%);
  overflow: hidden;
  padding-bottom: 10px;
}
.path-section .section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}

/* Subheading for the transformation path section */
.path-section .path-subheading {
  text-align: center;
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-top: -20px;
  margin-bottom: 40px;
}
.path-carousel {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 30px;
  padding-top: 30px;
}

.offer-author::before,
.offer-author::after {
  content: "";
  display: inline-block;
  width: 230px;
  height: 2px;
  background: #e03232; /* red line */
  vertical-align: middle;
  margin: 0 25px;
}

/* Wrapper around each card and its week label to treat them as a single scroll unit */
.path-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 300px;
  width: 300px;
  scroll-snap-align: center;
}

/* Week label outside the card */
.path-item .week-label {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--color-primary-light);
  text-align: center;
  /* Fade and blur week labels for unselected cards */
  opacity: 0.4;
  filter: blur(1px);
}
.path-card {
  flex: 0 0 300px;
  scroll-snap-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 30px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  backdrop-filter: blur(var(--glass-blur));
  /* Ensure all phase cards share the same vertical size regardless of content length */
  /* Increased height so longer bullet lists fit cleanly */
}

/* Icon at top of each phase card */
.phase-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  color: var(--color-primary);
}
.path-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}
.path-card.highlight {
  border-color: var(--color-primary);
  box-shadow: 0 0 40px rgba(224, 50, 50, 0.7), 0 0 10px rgba(224, 50, 50, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

/* Highlighted text glow within path cards */
.path-card.highlight .phase-title {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.path-card.highlight .phase-description {
  color: var(--color-text);
}
.path-card.highlight .week-label {
  color: var(--color-primary-light);
}
.phase-number {
  font-size: 1rem;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.phase-title {
  font-size: 1.3rem;
  margin-bottom: 10px;
}
.phase-description {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}
/* Default styling for week labels when used inside legacy cards */
.week-label {
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--color-primary-light);
}

/* Bullet list styling inside each phase card */
.phase-bullets {
  list-style-type: disc;
  margin-left: 1.2rem;
  margin-top: 6px;
  margin-bottom: 6px;
  color: var(--color-text-muted);
  /* Slightly smaller font so longer lists fit comfortably */
  font-size: 0.8rem;
  line-height: 1.4;
}
.phase-bullets li {
  /* Tighten spacing between bullet points */
  margin-bottom: 20px;
}

/* Brighten bullets when their card is highlighted */
.path-card.highlight .phase-bullets li {
  color: var(--color-text);
}

/* Make the week label brighter when its preceding card is highlighted */
/* When a card is highlighted, its adjacent week label becomes sharp and fully opaque */
.path-card.highlight + .week-label {
  color: var(--color-primary-light);
  opacity: 1;
  filter: none;
}

/* Testimonials */
.testimonials-section {
  background: var(--color-bg-secondary);
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.02), transparent 70%);
  padding-top: 70px;
  padding-bottom: 70px;
}
.testimonials-section .section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}
.testimonials-carousel {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 20px;
}
.testimonial-card {
  flex: 0 0 280px;
  scroll-snap-align: center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 30px;
  color: var(--color-text);
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* Testimonial image */
.testimonial-img {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 12px;
  box-shadow: 0 0 10px rgba(255, 0, 60, 0.3);
}
.testimonial-stars {
  display: flex;
  justify-content: center;
  gap: 2px;
  color: #facc15;
  font-size: 0.8rem;
  margin-bottom: 8px;
}
.testimonial-text {
  font-size: 1rem;
  margin-bottom: 16px;
  color: var(--color-text);
}
.testimonial-author {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* Bonuses */
/* Bonuses */
.bonuses-section {
  background: var(--color-bg-secondary);
  padding-bottom: 50px;
}
.bonuses-section .section-title {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 40px;
}
/* Container list of bonus rows */
.bonuses-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* Each bonus row appears as a glassy card with image and description */
.bonus-row {
  display: flex;
  align-items: center;
  gap: 24px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 0, 60, 0.15);
  backdrop-filter: blur(var(--glass-blur));
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.bonus-row:hover {
  transform: translateY(-8px);
  box-shadow: 0 8px 30px rgba(255, 0, 60, 0.35), 0 0 40px rgba(255, 0, 60, 0.25);
}
.bonus-cover img {
  width: 120px;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(224, 50, 50, 0.4);
  transition: transform var(--transition-fast);
}
.bonus-row:hover .bonus-cover img {
  transform: scale(1.05) rotate(-1deg);
}
.bonus-content {
  flex: 1;
}
.bonus-heading {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--color-primary-light);
}
.bonus-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.bonus-region {
  font-size: 0.7rem;
  color: var(--color-success);
  font-style: italic;
  margin-bottom: 4px;
}
.bonus-price {
  font-size: 0.9rem;
  font-weight: 600;
}
.bonus-price .bonus-old {
  text-decoration: line-through;
  color: #ef4444;
  margin-right: 6px;
}
.bonus-price .bonus-free {
  color: #22c55e;
  font-weight: 700;
}
.bonus-summary {
  margin-top: 30px;
  text-align: center;
  font-size: 1rem;
}
.bonus-summary span {
  color: var(--color-success-light);
  font-weight: 700;
}

/* Final Offer Section */
.final-offer-section {
  background: var(--color-bg);
  text-align: center;
  padding-top: 100px;
  padding-bottom: 60px;
}
section#faq {
  text-align: center;
}
section#faq h2 {
  text-align: center;
  padding-bottom: 50px;
}
.final-offer-container {
  max-width: 800px;
  margin: 0 auto;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 50px 20px;
}
.final-offer-list {
  list-style: none;
  margin: 20px 0;
  padding: 0;
  text-align: left;
  font-size: 0.95rem;
}
.final-offer-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-left: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 10px 0;
  color: var(--color-text);
}
.final-offer-list li:last-child {
  border-bottom: none;
}
.final-price {
  display: none;
}
.final-old-price {
  display: none;
}
.final-new-price {
  display: none;
}
.final-btn {
  margin-top: 5px;
}
.final-note {
  margin-top: 15px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* New lifetime deal elements */
.lifetime-tag {
  display: inline-block;
  padding: 6px 30px;
  border: 2px solid;
  border-radius: 999px;
  color: #ff7474;
  font-size: 16px;
  margin-bottom: 20px;
  letter-spacing: 1px;
  font-weight: 500;
}
.offer-logo-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
}
.offer-logo {
  position: relative;
  padding: 10px 0;
  text-align: center;
}
.offer-logo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 15px;
  background: linear-gradient(to right, #ff5757, #9e005d) !important;
  border-radius: 2px;
}
.offer-logo-top {
  font-size: 14px;
  font-weight: 100;
  color: #fff;
  margin-top: 50px;
  text-shadow: 0px 0px 28px #FFFFFF;
}
.code-text {
  font-size: 70px !important;
  font-weight: 700 !important;
  margin-top: auto !important;
}
.offer-logo-main {
  font-size: 70px;
  font-weight: 100;
  color: #ff003b;
  text-transform: uppercase;
  text-shadow: 0px 0px 28px #ff5757;
  margin-top: -45px;
}
.offer-subheading {
  margin-top: 10px;
  margin-bottom: 20px;
  font-size: 14px;
  color: #ffffff;
}

.offer-anchor {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.offer-list li {
  display: table;
  justify-content: space-between;
  align-items: center;
  font-size: 0.95rem;
  color: var(--color-text);
  position: relative;
  padding-left: 24px;
  margin: 0 auto;
}
ul.offer-list li {
  font-size: 16px;
  width: 316px;
}
ul.offer-list {
    text-align: left;
    padding-top: 20px;
    padding-bottom: 20px;
}
.offer-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-success);
  font-size: 18px;
}
.item-name {
  flex: 1;
}
.item-price {
  margin-left: 10px;
}
.item-price.old {
  text-decoration: line-through;
  color: #ef4444;
}
.item-price.green {
  color: #14d860;
}
.price-banner {
  margin: 10px 0;
  font-size: 1.2rem;
  color: #fff;
}
.price-from {
  display: block;
  font-size: 23px;
  font-weight: 600;
  color: #f87171;
  margin-bottom: 0px;
}
.price-to {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}
.price-big {
  font-size: 60px;
  font-weight: 700;
  color: #00bf63;
  text-shadow: 0 0 15px rgba(40, 209, 97, 0.6);
}
.green-btn {
  background: linear-gradient(180deg, #00bf63 0%, #00605b 100%);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.5);
  color: #fff;
  font-weight: 700;
  padding: 16px 30px;
  display: inline-block;
  border-radius: var(--radius);
  font-size: 27px;
}
.green-btn:hover {
  filter: brightness(1.1);
}
.offer-discount {
  margin-top: 20px;
  font-size: 0.9rem;
  color: #fff;
}
.offer-note {
  font-size: 0.8rem;
  color: #fff;
  margin-top: 5px;
}
.offer-author {
  margin-top: 30px;
  font-size: 0.8rem;
  color: #eee;
  padding-top: 10px;
  font-weight: 600;
}

/* FAQ section */
.faq-section {
  background: var(--color-bg);
  padding-bottom: 96px;
}
.faq-accordion {
  max-width: 700px;
  margin: 0 auto;
}
.faq-item {
  margin-bottom: 10px;
}
.faq-question {
  width: 100%;
  padding: 12px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  font-size: 1rem;
  position: relative;
  transition: background var(--transition-fast);
}
.faq-question::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: var(--color-primary);
}
.faq-item.active .faq-question {
  background: var(--color-primary);
  color: #fff;
}
.faq-item.active .faq-question::after {
  content: '–';
  color: #fff;
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-fast) ease;
  background: rgba(255, 255, 255, 0.03);
  border-left: 1px solid var(--glass-border);
  border-right: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.faq-answer p {
  padding: 15px 20px;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------*/
/* Bonuses/Hidden Weapons redesign */
/* Section 8: Four horizontal bonus cards with unique glows and mini pitches */

/* Subheading styling for the weapons section */
.bonus-subheading {
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: -10px;
  margin-bottom: 30px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Horizontal carousel container for weapon cards */
.weapons-carousel {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 30px;
  padding-left: 5vw;
  padding-right: 5vw;
  padding-top: 30px;
}

/* Each weapon card: glassy, horizontally oriented */
.weapon-card {
  flex: 0 0 520px;
  display: flex;
  gap: 20px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  padding: 20px;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  scroll-snap-align: center;
  transform: translateY(40px);
  opacity: 0;
  transition: transform var(--transition-slow), opacity var(--transition-slow), box-shadow var(--transition-fast);
}

/* Visible state when scrolled into view */
.weapon-card.visible {
  transform: translateY(0);
  opacity: 1;
}

/* Image container inside weapon card */
.weapon-image {
  flex: 0 0 140px;
  position: relative;
}
.weapon-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Content container inside weapon card */
.weapon-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Title and price line */
.weapon-title {
  font-size: 1rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.weapon-title-main {
  color: #ffffff;
  font-weight: 700;
}
.weapon-value {
  color: #ef4444;
  text-decoration: line-through;
  font-size: 0.85rem;
  font-weight: 600;
}

/* Tagline under title */
.weapon-tagline {
  font-size: 0.85rem;
  font-style: italic;
  color: var(--color-text-muted);
  margin-top: 2px;
  margin-bottom: 8px;
}

/* Bullets list for weapon details */
.weapon-bullets {
  list-style-type: disc;
  margin-left: 1.2rem;
  margin-bottom: 10px;
}
.weapon-bullets li {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

/* Free note at bottom of each card */
.weapon-free {
  font-size: 0.85rem;
  color: var(--color-primary);
  margin-top: auto;
}
.free-text {
  color: #33d17a;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(40, 209, 97, 0.7);
}

/* Unique glow colours for each cheat code on hover */
.weapon-card.weapon-red:hover {
  box-shadow: 0 6px 25px var(--weapon-glow-red), 0 0 50px var(--weapon-glow-red);
}
.weapon-card.weapon-blue:hover {
  box-shadow: 0 6px 25px var(--weapon-glow-blue), 0 0 50px var(--weapon-glow-blue);
}
.weapon-card.weapon-gold:hover {
  box-shadow: 0 6px 25px var(--weapon-glow-gold), 0 0 50px var(--weapon-glow-gold);
}
.weapon-card.weapon-green:hover {
  box-shadow: 0 6px 25px var(--weapon-glow-green), 0 0 50px var(--weapon-glow-green);
}

/* Bonus callout at bottom of section */
.bonus-callout {
  text-align: center;
  margin-top: 30px;
  font-size: 1rem;
  color: var(--color-text);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.bonus-callout .free-text {
  color: #33d17a;
  font-weight: 700;
  text-shadow: 0 0 10px rgba(40, 209, 97, 0.8);
}
.bonus-cta {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 24px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, #16a34a 0%, #22c55e 100%);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.4);
  transition: filter var(--transition-fast), transform var(--transition-fast);
}
.bonus-cta:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Guarantee section */
.guarantee-section {
  background: var(--color-bg-secondary);
  text-align: center;
  padding: 120px 5vw;
}
.guarantee-container {
  max-width: 600px;
  margin: 0 auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 40px;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.4);
}

.guarantee-seal {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto 20px;
}
.guarantee-text {
  color: var(--color-text-muted);
  margin-bottom: 20px;
  line-height: 1.4;
}
.guarantee-btn {
  margin-top: 10px;
}

/* Responsive Styles */
@media (max-width: 768px) {
  .offer-container {
    flex-direction: column;
  }
  .path-carousel {
    gap: 16px;
  }
  .testimonials-carousel {
    gap: 16px;
  }
  .bonuses-grid {
    grid-template-columns: 1fr;
  }
}

/* ====================================================================
 * Custom Sections for high-conversion funnel
 * ==================================================================== */

/* Struggles (Are you one of these?) Section */
.struggles-section {
  background: var(--color-bg);
  background-image: radial-gradient(circle at center, rgba(255, 0, 60, 0.03), transparent 70%);
  padding: 50px 5vw;
  text-align: center;
}
.struggles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  margin-top: 40px;
}
.struggle-card {
  flex: 0 0 300px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(var(--glass-blur));
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.struggle-card:hover {
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 8px 30px rgba(255, 0, 60, 0.4), 0 0 20px rgba(255, 0, 60, 0.2);
}
.struggle-card p {
  font-size: 0.9rem;
  color: var(--color-text);
}

/* Modern Men Problem Section */
.problem-explain-section {
  background: var(--color-bg-secondary);
  background-image: radial-gradient(circle at center, rgba(255, 0, 60, 0.04), transparent 70%);
  padding: 140px 5vw;
  text-align: center;
}
.problem-explain-section h2 {
  margin-bottom: 30px;
}
.problem-explain-section p {
  max-width: 800px;
  margin: 0 auto 16px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Fall Section styles */
.fall-section {
  background: var(--color-bg-secondary);
  background-image: radial-gradient(circle at top, rgba(255, 0, 60, 0.05), transparent 70%), radial-gradient(circle at bottom, rgba(255, 0, 100, 0.05), transparent 80%);
  padding: 140px 5vw;
  text-align: center;
}
.fall-section h2 {
  margin-bottom: 30px;
  color: var(--color-primary);
}
.fall-section p {
  max-width: 800px;
  margin: 0 auto 16px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Fall section image and twist line */
.fall-image {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 30px;
  opacity: 0.85;
  box-shadow: 0 0 20px rgba(224, 50, 50, 0.4);
}

/* ------------------------------------------------------------------ */
/* Custom additions for revised header and hero section               */
/* These styles were added to fulfil the user’s requests:             */
/* 1. Centre the site title and keep the CTA button on the right.    */
/* 2. Add a testimonials strip and new headline/subheading above     */
/*    the video on the hero section.                                 */
/* ------------------------------------------------------------------ */

/* Header title sits between the left edge and the CTA button. It takes
   up the remaining horizontal space so the text remains centred while
   the CTA stays pinned to the right. */
.nav-title {
  flex: 1;
  text-align: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-primary);
  left: 60px;
  position: relative;
}

h2.section-title {
  font-size: 40px !important;
  font-weight: 800;
  line-height: normal;
  padding-bottom: 20px;
}

/* Testimonials container displayed above the video */
.testimonial-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

/* Individual testimonial item */
.testimonial {
  text-align: center;
  max-width: 240px;
}

/* Five stars styled in gold */
/* Gold stars within each testimonial. A unicode string of stars is used
   rather than icon fonts to avoid missing glyph issues. */
.testimonial .stars {
  color: #f5c518; /* gold-yellow for stars */
  font-size: 1rem;
  letter-spacing: 2px;
}

/* Quote text styling */
.testimonial .testimonial-text {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

/* Punchy headline above the video */
.video-title {
  text-align: center;
  font-size: 45px;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 12px;
}

span.red-text {
  color: #e03232;
}

/* Supporting subheading for the video */
.video-subtitle {
  text-align: center;
  font-size: 1rem;
  color: var(--color-text-muted);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40px;
}
.fall-twist {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 20px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Section subtitle for struggles */
.section-subtitle {
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-top: 10px;
}

/* Dynamic problem message */
.problem-message {
  margin-top: 30px;
  font-size: 0.9rem;
  text-align: center;
  color: var(--color-text-muted);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* After problem message (appears after selection) */
.after-problem-message {
  margin-top: 10px;
  font-size: 1rem;
  color: var(--color-primary-light);
  font-weight: 600;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Selected state for struggle cards */
.struggle-card.selected {
  border-color: var(--color-primary);
  box-shadow: 0 8px 30px var(--color-glow-red), 0 0 20px var(--color-primary-light);
  transform: translateY(-8px) scale(1.08);
}

/* Comparison support paragraph */
.comparison-support {
  max-width: 800px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Comparison subheading */
.comparison-subheading {
  text-align: center;
  margin-top: -10px;
  margin-bottom: 30px;
  font-size: 1.2rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Badges used in comparison */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.badge-danger {
  background: var(--color-badge-danger-bg);
  color: var(--color-badge-danger-text);
  border: 1px solid var(--color-badge-danger-text);
}
.badge-success {
  background: var(--color-badge-success-bg);
  color: var(--color-badge-success-text);
  border: 1px solid var(--color-badge-success-text);
}

/* Tilt card base styles */
.comparison-columns {
  perspective: 1000px;
}
.comparison-left.tilt,
.comparison-right.tilt {
  will-change: transform;
  transition: transform var(--transition-fast);
  transform-style: preserve-3d;
}

/* Bonus intro */
.bonus-intro {
  max-width: 800px;
  margin: 0 auto 30px;
  font-size: 1rem;
  text-align: center;
  color: var(--color-text-muted);
}

/* Comparison Section */
.comparison-section {
  background: var(--color-bg);
  background-image: radial-gradient(circle at center, rgba(255, 0, 60, 0.03), transparent 70%);
  padding: 50px 5vw;
}
.comparison-section .section-title {
  text-align: center;
  margin-bottom: 40px;
}
.comparison-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
}
.comparison-left, .comparison-right {
  /* flex: 0 0 300px; */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius);
  padding: 24px;
  backdrop-filter: blur(var(--glass-blur));
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.comparison-left h3, .comparison-right h3 {
  color: var(--color-primary);
  font-size: 1.2rem;
  margin-bottom: 12px;
}
.comparison-left ul, .comparison-right ul {
  list-style: none;
  padding-left: 0;
}
.comparison-left ul li, .comparison-right ul li {
  margin-bottom: 10px;
  padding-left: 20px;
  font-size: 0.9rem;
  position: relative;
  color: var(--color-text);
}
.comparison-left ul li::before {
  content: '\2717';
  color: #ef4444;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.9rem;
}
.comparison-right ul li::before {
  content: '\2713';
  color: #22c55e;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 0.9rem;
}


/* For most mobile phones (portrait & small screens) */
@media only screen and (max-width: 767px) {
  .offer-logo-main {
    font-size: 40px;
  }
  .weapon-card {
    max-width: fit-content;
    display: block;
  }
  .nav-title {
    text-align: left;
    left: auto;
  }
  section#video {
    padding-top: 80px !important;
  }
  section {
    padding: 50px 5vw;
  }
  .struggles-section {
    padding: 0px;
  }
  .video-title {
    font-size: 20px;
    line-height: 30px;
  }
  h2.section-title {
    font-size: 20px !important;
    line-height: 30px;
  }
  .offer-details h2 {
    font-size: 20px;
    line-height: 30px;
  }
  .comparison-section .section-title {
    line-height: 30px;
  }
  .code-text {
    font-size: 40px !important;
  }
  .offer-logo-main {
    font-size: 40px;
  }
  .mobile-text{
    margin-left: 0px !important;
    margin-bottom: 0px !important;
  }
  .price-big {
    font-size: 46px;
  }
  .green-btn {
    font-size: 14px;
  }
  .topbar-btn {
    padding: 6px 6px !important;
    font-size: 12px !important;
  }
  #countdown {
    font-size: 12px !important;
  }
  .topbar-countdown {
    font-size: 11px !important;
  }
  .weapon-image img {
    height: 350px !important;
  }
  .offer-logo::before {
  width: 80%;
    }
    
    .offer-author::before,
.offer-author::after {
  width: 100px;
  margin: 0 10px;
}

.offer-logo-main {
    margin-top: -28px;
}
.offer-logo {
    text-align: center !important;
}

.offer-logo-top.code-text {
    margin-top: -18px !important;
}
.offer-logo-top.mobile-text {
    text-align: center;
    font-weight: 100;
}
  
  .down-arrow {
    justify-content: center;
    margin-left: 0px;
}
  
}
.weapon-free {
    color: #ffffff !important;
}
.down-arrow {
    justify-content: center;
}