html, body {
  overflow-x: clip;
}

/* ===== Offer Circles ===== */
.offer-circle {
  width: 147px;
  height: 148px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(48, 48, 53, 0.4) 0%, rgba(55, 55, 61, 0.016) 100%);
  box-shadow: 0px 7.45px 22.36px 0px #00000033;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offer-price {
  font-size: 24px;
  background: linear-gradient(180deg, #FFFFFF 8.33%, #999999 91.67%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.offer-circle::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 1.5px;
  background: linear-gradient(180deg, #565660 0%, rgba(58, 58, 63, 0) 66.5%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== Testimonial marquee ===== */
.testimonial-track {
  animation: marquee 30s linear infinite;
  width: max-content;
}

.testimonial-track:hover {
  animation-play-state: paused;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.vertical-lines {
  background-image:
    linear-gradient(to bottom, #2C2B40 0%, #2C2B40 100%),
    linear-gradient(to bottom, #2C2B40 0%, #2C2B40 100%),
    linear-gradient(to bottom, #2C2B40 0%, #2C2B40 100%),
    linear-gradient(to bottom, #2C2B40 0%, #2C2B40 100%);
  background-size: 1px 100%;
  background-repeat: no-repeat;
  background-position:
    100px 0,
    174px 0,
    calc(100% - 100px) 0,
    calc(100% - 174px) 0;
}

@media (max-width: 767px) {
  .vertical-lines {
    background-image: none;
  }
}

.glow-hero-img {
  top: -1300px;
}

@media (min-width: 768px) {
  .glow-hero-img {
    top: -1200px;
  }
}

/* ===== Hero Heading ===== */

.hero-heading {
  background-image: linear-gradient(180deg, #FFFFFF 30.1%, rgba(255, 255, 255, 0.2) 116.84%);
}

/* ===== Glow Effects ===== */

.glow-hero {
  position: relative;
  overflow: hidden;
}

.glow-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.25) 0%, rgba(236, 72, 153, 0.1) 40%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.glow-offers {
  position: relative;
  overflow: hidden;
}

.glow-offers::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse at center, rgba(124, 58, 237, 0.3) 0%, rgba(236, 72, 153, 0.15) 50%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
}

.glow-offers::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 400px;
  height: 300px;
  background: radial-gradient(ellipse at center, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.glow-cta {
  position: relative;
  overflow: hidden;
  background: #0a0a0f;
}


/* ===== Learn More Button ===== */

.btn-learn-more {
  background: linear-gradient(180deg, #0D64FF 13.02%, #033EA8 82.81%);
  box-shadow: 0 0 0 1px #377CF7;
  position: relative;
}

.btn-learn-more::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  padding: 1px;
  background: linear-gradient(180deg, #719FF9 0%, #1E50A8 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== Section Card (shared wrapper) ===== */

.section-card {
  background: linear-gradient(180deg, #17162B 0%, #111026 100%);
  border: 1.25px solid rgba(255, 255, 255, 0.09);
  border-radius: 37px;
  backdrop-filter: blur(187px);
}

.comparison-card {
  background: linear-gradient(180deg, #121126 0%, #16152A 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 30px;
  backdrop-filter: blur(150px);
}

.faq-card {
  position: relative;
  background: linear-gradient(180deg, #121126 0%, #17162B 100%);
  border: 1px solid #27263A;
  box-shadow: 0 5px 16px 0 rgba(8, 15, 52, 0.06);
}

/* ===== Growth Section ===== */

.growth-section {
  overflow: hidden;
  padding-top: 20px;
  margin-top: 60px;
}

@media (min-width: 768px) {
  .growth-section {
    background-image: url('/skin/nutraone/img/growth_section.svg');
    background-repeat: no-repeat;
    background-position: top right;
    background-size: 600px 600px;
    margin-right: 145px;
    margin-left: 130px;
  }
}

/* ===== Decorative Circles ===== */

.decorative-circle {
  border-radius: 50%;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 40%, transparent 70%);
  border: 1.81px solid rgba(255, 255, 255, 0.04);
}

/* ===== Hero CTA Button ===== */

.btn-hero {
  background: linear-gradient(90deg, #4F39F6 0%, #B410FA 100%);
  box-shadow: 0 4px 6px -4px rgba(49, 44, 133, 0.5),
              0 10px 15px -3px rgba(49, 44, 133, 0.5);
}

/* ===== Hero Pill Badge ===== */

.hero-pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px);
  position: relative;
}

.hero-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 100px;
  padding: 1px;
  background: linear-gradient(291.01deg, rgba(255, 255, 255, 0) 57.08%, rgba(255, 255, 255, 0.24) 82.89%),
              linear-gradient(99.14deg, rgba(255, 255, 255, 0) 75.64%, rgba(255, 255, 255, 0.24) 96.21%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== Scroll Animations ===== */

.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ===== Button Glow ===== */

.btn-primary {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
  color: #ffffff;
  font-weight: 600;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 30px rgba(124, 58, 237, 0.4), 0 0 60px rgba(168, 85, 247, 0.2);
}

/* ===== FAQ Accordion ===== */

.faq-item {
  border: none;
  border-bottom: 1px solid #D9DBE9;
  border-radius: 0;
  background: transparent;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.faq-item.active .faq-answer {
  max-height: 200px;
}

.faq-v {
  transition: opacity 0.3s ease;
}

.faq-item.active .faq-v {
  opacity: 0;
}

/* ===== Decorative Pill Shape (Growth Section) ===== */

.gradient-pill {
  width: 280px;
  height: 120px;
  border-radius: 60px;
  background: linear-gradient(135deg, #0a0a0f, #111026);
  border: 2px solid transparent;
  background-clip: padding-box;
  position: relative;
}

.gradient-pill::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 62px;
  background: linear-gradient(135deg, #0071BC, #FF00FF);
  z-index: -1;
}

/* ===== Outlined Button ===== */

.btn-outlined {
  position: relative;
  background: transparent;
  box-shadow: 0 0 0 0.5px rgba(113, 159, 249, 0.3);
}

.btn-outlined::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  padding: 1px;
  background: linear-gradient(180deg, #719FF9 0%, #1E50A8 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== Icon Frame ===== */

.icon-frame {
  position: relative;
}

.icon-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 11.6px;
  padding: 1.45px;
  background: linear-gradient(147.38deg, #FFFFFF -6.71%, rgba(153, 153, 153, 0) 60.44%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ===== Comparison Chip ===== */

.comparison-chip {
  background: linear-gradient(180deg, #181A2B 0%, rgba(24, 36, 43, 0.46) 0.01%, #0E1422 100%);
  border: 1px solid rgba(37, 37, 40, 0.98);
  box-shadow: 0px 7.45px 22.36px 0px rgba(0, 0, 0, 0.2);
}

/* ===== Card Hover ===== */

.feature-card {
  background: linear-gradient(180deg, #17162B 0%, #16152A 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 30px;
  backdrop-filter: blur(150px);
  box-shadow: 24px 24px 56px 0 #0D64FF26;
  position: relative;
  z-index: 1;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.feature-card--no-shadow {
  box-shadow: none !important;
}


/* ===== Scrollbar Hide ===== */

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ===== Mobile Nav ===== */

.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.mobile-menu.open {
  max-height: 300px;
}

/* ===== Comparison Icons ===== */

.icon-x {
  color: #ef4444;
}

.icon-check {
  color: #7c3aed;
}

@media (max-width: 767px) {
  .glow-hero::before,
  .glow-offers::before,
  .glow-offers::after {
    filter: blur(60px);
    opacity: 0.7;
  }
}