html {
    scroll-behavior: smooth;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
  text-decoration: none !important;
}

/* Container for the video and the absolutely positioned image */
.video-section-host {
  position: relative; /* Establishes a positioning context for the absolute image */
  max-width: 820px;   /* Same max-width as your video wrapper, to keep the video centered as before */
  margin: 40px auto 30px auto; /* Centers this container and provides vertical spacing (same as original .demo-video-wrapper) */
}

/* Adjust .demo-video-wrapper since its parent .video-section-host now handles centering and main vertical margins */
.video-section-host > .demo-video-wrapper {
  margin: 0; /* Remove its own auto margins for horizontal centering and outer vertical spacing */
  width: 100%;     /* Make it fill the .video-section-host */
  max-width: 100%; /* Ensure it doesn't exceed .video-section-host */
  /* display: flex, justify-content: center, align-items: center for the video element inside are still active from its original rule */
}

#smoothie-in-action-image {
  position: absolute;
  width: 400px; /* Or your desired width */
  height: auto;
  top: 70%;
  left:-11%;
  right: 0px;;
  /* The base transform is effectively set by the 'from' and 'to' states in the animation */
  z-index: 10;
  /* Updated animation property: */
  animation: smoothWiggle 10s ease-in-out infinite alternate; /*
                      smoothWiggle: New keyframe name
                      0.8s: Duration for one direction (left-to-right). Full cycle (left-right-left) is 1.6s. Adjust for speed.
                      ease-in-out: Smooth acceleration/deceleration
                      infinite: Loop forever
                      alternate: Plays forwards, then backwards, creating a smooth back-and-forth
                    */
}

/* Updated keyframes to work with the new base transform */
@keyframes smoothWiggle {
  from { /* Starting point of the wiggle (e.g., left side) */
    transform: translate(calc(-75% - 15px), calc(-20% - 2px)) rotate(-2deg);
    /*
      calc(-75% - 15px): Base horizontal position, shifted 15px further left.
      calc(-50% - 2px): Base vertical position, shifted 2px up. (Subtle Y movement)
      rotate(-2deg): Slight counter-clockwise rotation.
    */
  }
  to { /* Ending point of the wiggle (e.g., right side) */
    transform: translate(calc(-75% + 15px), calc(-50% + 2px)) rotate(2deg);
    /*
      calc(-75% + 15px): Base horizontal position, shifted 15px further right. (Total 30px L-R motion)
      calc(-50% + 2px): Base vertical position, shifted 2px down.
      rotate(2deg): Slight clockwise rotation.
    */
  }
}

/* Responsive adjustments */
@media (max-width: 960px) { /* Adjust breakpoint as needed */
  #smoothie-in-action-image {
    width: 250px; /* Slightly smaller image */
    transform: translate(-70%, -50%); /* Adjust protrusion/overlap if needed */
  }
}

@media (max-width: 520px) { /* For very small screens */
  .video-section-host {
    /* Ensure host doesn't cause horizontal scroll with padding/margins on small screens */
    margin-left: 15px;
    margin-right: 15px;
    max-width: calc(100% - 30px); /* Allow it to be almost full width */
  }
  #smoothie-in-action-image {
    width: 180px; /* Significantly smaller image */
    transform: translate(-65%, -50%); /* Reduce overlap or protrusion further */
    /* Alternatively, you could hide it: display: none; */
  }
}


.popup-content {
  background-color: #ffffff; /* Or your preferred popup background */
  padding: 20px; /* Example padding */
  border-radius: 12px; /* Example */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25); /* Example */
  max-width: 650px; /* Default max-width for wider popups like FAQ/Terms */
  width: 90%;     /* Responsive width */
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  /* Add any other common styles for all popups */
}

/* Styles ONLY for the Ko-fi popup */
.popup-overlay.popup-kofi-active .popup-content {
  max-width: 370px; /* Adjust this value to perfectly fit Ko-fi content */
                  /* Try values between 340px and 380px */
  width: 90%; 
  background-color: white;    /* Still responsive, but capped by the new max-width */
  /* You might not need !important here anymore due to increased specificity */
}

/* Ensure the body of the popup can hold the iframe */
#popup-body.popup-body-content {
  padding: 0; /* If Ko-fi iframe should go edge-to-edge within the narrowed popup-content */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto; /* If Ko-fi content itself scrolls */
}

#popup-body #kofiframePopup {
  width: 100%;
  height: 560px; /* From your JS. Adjust if Ko-fi content is shorter/taller */
  min-height: 450px; /* Prevent it from collapsing too much */
  display: block;
  border: none;
  background: transparent;
  flex-grow: 1; /* Helps fill vertical space if #popup-body is flex */
}
:root {
    --text-dark: #0e0e0e;
    --text-light: #ffffff;
    --text-muted: #25515f;
    --bg-main-content: rgb(233, 248, 252);
    --bg-card: #f8f9fa;
    --bg-dark-section: #0a1217;
    --border-color: #e0e0e0;
    --border-color-active: #8610e7;
    --testimonial-border-color: #89da89;
    --shadow-color: rgba(0, 0, 0, 0.08);
    --shadow-color-strong: rgba(0, 0, 0, 0.12);
    --toggle-bg: #ffffff88;
    --toggle-border: #d7d7eb;
    --toggle-indicator-bg: #404be6;
    --toggle-text-active: var(--text-light);
    --toggle-text-inactive: var(--text-muted);
    --toggle-shadow: var(--shadow-color);
    --toggle-duration: 0.5s;
    --toggle-ease: ease-out;
    --gradient-body-start: #9be15d;
    --gradient-body-end: #05b9a1;
    --demo-video-bg: #00bfa5;
    --demo-video-shadow-color1: rgba(115, 116, 75, 0.7);
    --demo-video-shadow-color2: rgba(94, 214, 70, 0.932);
    --cta-pro-button-bg: #0c0c0e;
    --cta-button-bg: #404be6;
    --cta-button-shadow-color: rgba(64, 75, 230, 0.25);
    --cta-pro-button-shadow-color: rgba(0, 0, 0, 0.2);
    --cta-button-hover-bg: #0c8ce2;
    --cta-button-hover-shadow-color: rgba(1, 187, 152, 0.3);
    --cta-secondary-bg: #bfe8ff;
    --cta-secondary-color: #404be6;
    --cta-secondary-border-color: #404be6;
    --cta-secondary-hover-bg: #0c8ce231;
    --section-divider-color: #16ca8e;
    --features-h4-border-color: #00e3ae;
    --main-features-li-icon-content: "🔥";
    --plan-features-li-icon-content: "✓";
    --features-li-icon-color: #25515f;
    --simple-list-icon-color: #8610e7;
    --footer-link-color: var(--text-muted);
    --pro-card-special-text-color: #8610e7;
    --pro-tier-card-gradient-end: #e3edfafb;
    --pro-highlight-gradient-color1: #8610e7;
    --pro-highlight-gradient-color2: #404be6;
}

body {
    background: linear-gradient(130deg, var(--gradient-body-start) 0%, var(--gradient-body-end) 100%);
    color: var(--text-dark);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

header {
    text-align: center;
    padding: 70px 20px 40px 20px;
}

header img.logo {
    width: 100%;
    max-width: 480px;
    margin-bottom: 24px;
}

#heart-source {
    display: inline-block;
    position: relative;
    font-size: 1.5rem;
    cursor: default;
}

.heart {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.2rem;
    color: #e0245e;
    opacity: 0;
    pointer-events: none;
    user-select: none;
    animation: floatUp 1s ease-in-out forwards;
}

@keyframes floatUp {
    0% {
        transform: translateX(-50%) translateY(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(calc(-50% + var(--drift))) translateY(-80px) scale(20);
        opacity: 0;
    }
}



.demo-video-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px auto 30px auto;
    max-width: 820px;
}

.demo-video {
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: 30px;
    box-shadow: 0 0px 80px var(--demo-video-shadow-color1), 0px 0px 70px var(--demo-video-shadow-color2);
    background: var(--demo-video-bg);
    outline: none;
    margin-top: 50px;
}

h1 {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    margin: 0 0 18px 0;
    font-weight: 800;
    letter-spacing: -1.5px;
    color: var(--text-dark);
    line-height: 1.2;
}

h2.subtitle {
    font-size: clamp(1rem, 2.5vw, 1.3rem);
    font-weight: 400;
    margin: 0 auto 35px auto;
    color: var(--text-muted);
    max-width: 100%;
}

h3.section-title,
main.content-wrapper h3:not(.testimonial-block h4) {
    font-size: clamp(1.2rem, 3.5vw, 1.2rem);
    color: var(--text-dark);
    margin-top: 20px;
    margin-bottom: 10px;
    text-align: left;
    font-weight: 600;
}


h3.section-title {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 30px;
}

.procenter {
    text-align: center;
    font-size: 1.6em;
    font-weight: 600;
    margin-top: 100px;
    margin-bottom: 30px;

}


.cta-container {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    text-decoration: none;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 30px;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.25s ease;
    text-decoration: none;
}

.cta-button.secondary {
    background: var(--cta-secondary-bg);
    color: var(--cta-secondary-color);
    border: 2px solid var(--cta-secondary-border-color);
    box-shadow: none;
}

.cta-button.secondary:hover {
    background: var(--cta-secondary-bg);
    transform: translateY(-2px);
}

.cta-button.animated-pro-button {
    /* Header PRO Button */
    background: var(--cta-pro-button-bg);
    color: var(--text-light);
    box-shadow: 0 4px 10px var(--cta-pro-button-shadow-color);
    text-decoration: none;
}

.pro-lifetime-breathe {
  color: #ffffff;
  /* starting glow */
  text-shadow: 0 0 2px rgba(0, 174, 255, 0.952);
  /* slow “inhale–exhale” */
  animation: breathe-glow 4s ease-in-out infinite;
}

@keyframes breathe-glow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(254, 253, 255, 0.39);
  }
  50% {
    text-shadow: 0 0 80px rgb(255, 251, 17);
  }
}

.animated-pro-button span {
    position: relative;
    z-index: 1;
    text-decoration: none;
}

.animated-pro-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px var(--cta-pro-button-shadow-color);
    text-decoration: none;
}

.animated-pro-button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    text-decoration: none;
    background: linear-gradient(90deg,
            var(--pro-highlight-gradient-color1),
            var(--pro-highlight-gradient-color2),
            var(--pro-highlight-gradient-color1));
    background-size: 100% auto;
    animation: shimmerLine 2.5s linear infinite;
}

@keyframes shimmerLine {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}


main.content-wrapper {
    max-width: 750px;
    background: var(--bg-main-content);
    margin: 40px auto;
    border-radius: 25px;
    box-shadow: 0 10px 40px var(--shadow-color);
    padding: 30px 35px;
}

main.content-wrapper p,
main.content-wrapper li {
    font-size: 1.05rem;
    color: var(--text-dark);
}

main.content-wrapper strong {
    font-weight: 700;
}

main.content-wrapper a {
    color: var(--cta-button-bg);
    text-decoration: none;
}

main.content-wrapper a:hover {
    text-decoration: underline;
}

ul.main-features {
    list-style: none;
    padding-top: 0%;
    margin: 60px 0;
}

ul.main-features li {
    margin-bottom: 12px;
    padding-left: 2.0em;
    position: relative;
}

ul.main-features li::before {
    content: var(--main-features-li-icon-content);
    position: absolute;
    left: 0;
    top: 1px;
    font-size: 1.1em;
    color: var(--features-li-icon-color);
}

.testimonial-block {
    background: #dcf3f1;
    border-left: 5px solid var(--testimonial-border-color);
    padding: 15px 22px;
    margin: 30px 0;
    font-size: 1.05rem;
    color: #3f8a76;
    border-radius: 25px;
}

.testimonial-block h4 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-top: 0;
    margin-bottom: 8px;
    text-align: left;
}

.section-divider {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, var(--section-divider-color), transparent);
    margin: 50px auto;
    max-width: 1000px;
}

.simple-list {
    list-style: none;
    padding-left: 0;
    margin: 15px 0;
}

.simple-list li {
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
    font-size: 1.05rem;
}

.simple-list li::before {
    content: "•";
    color: var(--text-dark);
    position: absolute;
    left: 0;
    font-weight: bold;
}

#support-footer-section {
    background-color: var(--bg-dark-section);
    color: var(--text-light);
    padding: 30px 20px;
    margin: 40px -35px -40px -35px;
    border-radius: 0 0 25px 25px;
    position: relative;
}

#support-footer-section p {
    color: var(--text-light);
    text-align: center;
}

#support-footer-section a {
    color: var(--gradient-body-end);
    font-weight: 600;
}

#support-footer-section a:hover {
    color: var(--text-light);
}

.plan-toggle-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 35px;
    margin-top: 20px;
}

.plan-toggle-control {
    position: relative;
    width: 240px;
    height: 42px;
    background-color: var(--toggle-bg);
    border-radius: 50px;
    border: 1px solid var(--toggle-border);
    padding: 3px;
    box-shadow: inset 0 1px 3px #0000000d, 0 1px 2px var(--toggle-shadow);
    display: flex;
    font-size: 0.9rem;
    font-weight: 600;
}

.plan-toggle-control input[type="radio"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.plan-toggle-control label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
    color: var(--toggle-text-inactive);
    transition: color var(--toggle-duration) var(--toggle-ease);
    z-index: 1;
    text-align: center;
}

.plan-toggle-indicator {
    position: absolute;
    top: 3px;
    bottom: 3px;
    width: calc(50% - 3px);
    background-color: var(--toggle-indicator-bg);
    border-radius: 50px;
    box-shadow: 0 2px 5px var(--cta-button-shadow-color);
    transition: transform var(--toggle-duration) var(--toggle-ease);
    z-index: 0;
}

.plan-toggle-control input#plan-pro:checked~.plan-toggle-indicator {
    transform: translateX(0%);
}

.plan-toggle-control input#plan-free:checked~.plan-toggle-indicator {
    transform: translateX(calc(100% - 3px));
}

.plan-toggle-control input#plan-pro:checked+label {
    color: var(--toggle-text-active);
}

.plan-toggle-control input#plan-pro:checked~label[for="plan-free"] {
    color: var(--toggle-text-inactive);
}

.plan-toggle-control input#plan-free:checked~label[for="plan-pro"] {
    color: var(--toggle-text-inactive);
}

.plan-toggle-control input#plan-free:checked+label[for="plan-free"] {
    color: var(--toggle-text-active);
}

.features-list-wrapper {
    margin-top: 20px;
    position: relative;
}

.features-list-content {
    padding: 25px;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--bg-card);
    box-shadow: 0 5px 20px var(--shadow-color);
    margin-bottom: 20px;
    position: relative;
}

.features-list-content.pro-tier-features {
    border: 1px solid var(--border-color-active);
    background: linear-gradient(145deg, var(--bg-card) 0%, var(--pro-tier-card-gradient-end) 100%);
}

.features-list-content h4 {
    margin-top: 0;
    color: var(--text-dark);
    font-size: 1.4rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--features-h4-border-color);
}

.features-list-content.pro-tier-features h4 {
    border-bottom-color: var(--border-color-active);
}

.features-list-content.pro-tier-features.pro-highlight-active {
    border-color: transparent;
}

.features-list-content.pro-tier-features.pro-highlight-active::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 18px;
    background: linear-gradient(90deg,
            var(--pro-highlight-gradient-color1),
            var(--pro-highlight-gradient-color2),
            var(--pro-highlight-gradient-color1));
    background-size: 250% 100%;
    animation: rotateCardBorder 1s linear infinite;
    z-index: -1;
}

@keyframes rotateCardBorder {
    0% {
        background-position: 0% center;
    }

    100% {
        background-position: -250% center;
    }
}

.features-list-content ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 25px;
}

.features-list-content ul li {
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.features-list-content ul li strong {
    color: var(--text-dark);
}

.features-list-content ul li::before {
    content: var(--plan-features-li-icon-content);
    color: var(--features-li-icon-color);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.1em;
}

.features-list-content.pro-tier-features ul li::before {
    color: var(--border-color-active);
}

.features-list-content .cta-button {
    display: block;
    width: fit-content;
    margin: 20px auto 0 auto;
    text-align: center;
}

.plan-toggle-wrapper:has(input#plan-free:checked)~.features-list-wrapper .pro-tier-features {
    display: none;
}

.plan-toggle-wrapper:has(input#plan-pro:checked)~.features-list-wrapper .free-tier-features {
    display: none;
}

.free-tier-features,
.pro-tier-features {
    display: block;
}

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

.text-muted {
    color: var(--text-muted);
}

footer {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 10px 20px 50px 20px;
}

footer a {
    color: var(--footer-link-color);
    text-decoration: none;
    font-weight: 600;
}

footer a:hover {
    text-decoration: underline;
}

.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
}

.popup-overlay.visible {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.popup-content {
    background-color: #e2fffb;
    color: var(--text-dark);
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.95);
    opacity: 0;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.popup-overlay.visible .popup-content {
    transform: scale(1);
    opacity: 1;
}

.popup-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    font-weight: 300;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.popup-close:hover {
    color: var(--text-dark);
}

.popup-content h2 {
    margin-top: 0;
    color: var(--text-dark);
    font-weight: 700;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.popup-body-content {
    font-size: 0.95rem;
    line-height: 1.7;
}

.popup-body-content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-top: 15px;
    margin-bottom: 5px;
}

.popup-body-content strong {
    font-weight: 600;
    color: var(--text-dark);
}

.popup-body-content ul,
.popup-body-content ol {
    padding-left: 20px;
    margin-top: 10px;
}

.popup-body-content ul li,
.popup-body-content ol li {
    margin-bottom: 8px;
    color: var(--text-dark);
}

.popup-body-content .faq-container h2 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--text-dark);
    font-size: 1.6rem;
}

.popup-body-content .faq-item {
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
}

.popup-body-content .faq-item:last-child {
    border-bottom: none;
}

.popup-body-content .question {
    cursor: pointer;
    position: relative;
    font-weight: 600;
    color: var(--text-dark);
    transition: color 0.2s ease-in-out;
    padding-right: 25px;
    line-height: 1.4;
}

.popup-body-content .question:hover {
    color: var(--cta-button-bg);
}

.popup-body-content .answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out, padding-top 0.35s ease-out, opacity 0.3s ease-in-out;
    padding-left: 10px;
    color: var(--text-muted);
    font-size: 0.9rem;
    opacity: 0;
    line-height: 1.5;
}

.popup-body-content .answer.open {
    padding-top: 10px;
    max-height: 300px;
    opacity: 1;
}

.popup-body-content .question::after {
    content: '+';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    font-weight: 600;
    color: var(--cta-button-bg);
    transition: transform 0.3s ease-in-out;
}

.popup-body-content .question.open::after {
    content: '−';
    transform: translateY(-50%) rotate(0deg);
}


@media (max-width: 768px) {
    main.content-wrapper {
        padding: 20px;
    }

    #support-footer-section {
        margin-left: -20px;
        margin-right: -20px;
        padding: 25px 15px;
    }

    .popup-content {
        padding: 20px;
        width: 95%;
    }

    .popup-close {
        top: 10px;
        right: 15px;
        font-size: 1.8rem;
    }
}