/* header {
    background-color: var(--bg-white) !important;
    background: var(--bg-white) !important;
} */

body,
html {
    background-color: var(--bg-white) !important;
}

/* @media (max-width: 768px) {
    header {
        background-color: var(--bg-white) !important;
        background: var(--bg-white) !important;
    }
} */

/* === Base Styles & Variables === */
:root {
    --primary-color: #14b8a6; /* Teal */
    --primary-dark: #0d9488;
    --primary-light: #ccfbf1;
    --primary-gradient: linear-gradient(135deg, #14b8a6, #0d9488);
    --primary-bg: #f0fdfa;
    --coffee-gradient: linear-gradient(to right, #ff9500, #ff5733);

    --secondary-color: #e8eaf6; /* Light Lavender for gradients */

    --accent-color: #6366f1; /* Indigo for highlights */
    --accent-light: #c7d2fe;

    --text-dark: #1d1e20;
    --text-medium: #374151;
    --text-light: #6b7280;
    --text-white: #ffffff;
    --text-on-primary: #ffffff;
    --text-footer: #9ca3af;

    --bg-white: #ffffff;
    --bg-light-gray: #f8fafc;
    --bg-dark: #111827; /* Darker footer */

    --border-color: #e5e7eb;
    --border-light: #f3f4f6;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 20px 40px -5px rgba(0, 0, 0, 0.1);

    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px; /* Increased for more modern look */
    --border-radius-full: 9999px;

    --transition-fast: all 0.2s ease-in-out;
    --transition-medium: all 0.3s ease-in-out;
    --transition-slow: all 0.5s ease-in-out;
    --transition-bounce: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* Animation timing variables */
    --animation-slow: 1.2s;
    --animation-medium: 0.8s;
    --animation-fast: 0.5s;
    --animation-delay-base: 0.1s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: var(--transition-medium); /* Applied broadly, consider specificity */
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* Offset for fixed header */
}

body {
    overflow-x: hidden;
    background-color: var(--bg-white);
    font-family: 'DM Sans', sans-serif;
    line-height: 1.7; /* Slightly increased line-height */
    color: var(--text-medium);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--primary-dark);
}

ul {
    list-style: none;
}

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

h1,
h2,
h3 {
    font-weight: 700;
    line-height: 1.3;
    color: var(--text-dark);
    letter-spacing: -0.02em; /* Slightly tighter spacing */
}

h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
} /* Responsive font size */
h2 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
}
h3 {
    font-size: clamp(1.2rem, 3vw, 1.5rem);
}

/* === Utility Classes === */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.cta-button {
    position: relative;
    z-index: 1;
    display: inline-block;
    padding: 14px 28px;
    border: none;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: var(--primary-gradient);
    box-shadow: var(--shadow-md);
    font-weight: 600;
    color: var(--text-on-primary);
    text-align: center;
    transition: var(--transition-bounce);
    cursor: pointer;
}

.cta-button:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0d9488, #0e766e);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cta-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-lg);
    color: var(--text-on-primary);
}

.cta-button:hover:before {
    opacity: 1;
}

.cta-button:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease-out, height 0.6s ease-out;
}

.cta-button:hover:after {
    width: 300px;
    height: 300px;
}

.section-header {
    max-width: 750px;
    margin: 0 auto 50px auto; /* Standardized bottom margin */
    text-align: center;
}

.section-subtitle {
    margin-bottom: 12px;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-title {
    margin-bottom: 20px; /* Add some space below title */
    font-size: clamp(2rem, 4vw, 2.75rem); /* Adjusted title size */
    font-weight: 700;
}

/* === Header === */
header {
    position: fixed;
    top: 0;
    left: 0; /* Added for completeness with top:0, width:100% */
    z-index: 2000;
    width: 100%;
    padding: 12px 0;
    /* border-bottom: 1px solid rgba(229, 231, 235, 0.5); */
    /* background-color: #ffffff !important;  */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03); */
    transition: var(--transition-medium);
}

header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}

header.scrolled {
    padding: 8px 0;
    background-color: #ffffff !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

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

.logo {
    color: var(--primary-color);
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.footer-logo {
    color: var(--primary-light);
} /* Specific logo color for footer */

.nav-menu {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 35px; /* Increased gap */
}

.nav-link {
    position: relative;
    padding: 5px 0; /* Add padding for easier clicking */
    color: var(--text-medium);
    font-weight: 500;
    transition: var(--transition-fast);
}
/* Underline effect on hover */
.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-color);
}
.nav-link:hover::after {
    width: 100%;
}

.nav-cta {
    padding: 10px 24px; /* Adjusted nav CTA padding to be closer to standard */
    font-size: 0.9rem;
}

/* Mobile menu toggle */
.menu-toggle {
    position: relative;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: var(--primary-color);
    transition: all 0.3s ease;
}

/* Mobile menu structure - hidden checkbox and its effects */
#mobile-menu-toggle {
    display: none;
}

#mobile-menu-toggle:checked ~ .menu-toggle span:nth-child(1) {
    transform: translateY(9px) rotate(45deg);
}

#mobile-menu-toggle:checked ~ .menu-toggle span:nth-child(2) {
    opacity: 0;
}

#mobile-menu-toggle:checked ~ .menu-toggle span:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}

/* === Hero Section === */
.hero {
    position: relative;
    z-index: 1;
    padding: 160px 0 0 0; /* Adjusted bottom padding based on context */
    overflow: visible;
    background: linear-gradient(170deg, #ccfbf1b0 0%, var(--bg-white) 50%);
    text-align: center;
    animation: heroGradientAnimation 10s ease infinite; /* Improved animation timing */
    background-size: 200% 200%; /* Added for better gradient animation */
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero-title {
    display: inline-block; /* For background-clip to work */
    max-width: 850px;
    margin: 0 auto 40px;
    background: linear-gradient(to right, var(--text-dark), var(--primary-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    line-height: 1.2;
    animation: fadeInUp 1s ease-out;
}

/* Typing effect for hero title */
.hero-title .typing-text {
    position: relative;
    display: inline-block;
    min-width: 10px; /* Ensures there's always space even when empty */
    min-height: 1.2em; /* Ensures consistent height */
    color: var(--primary-color);
    font-weight: 700;
    vertical-align: bottom; /* Keeps alignment consistent */
}

.hero-title .typing-text::after {
    content: '|';
    position: absolute;
    right: -8px;
    bottom: 0; /* Anchor to bottom */
    color: var(--primary-color);
    animation: cursor-blink 1.2s ease-in-out infinite;
}

.hero-description {
    max-width: 650px;
    margin: 0 auto 45px;
    color: var(--text-light);
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    animation: fadeInUp 1s 0.2s both ease-out;
}

.hero-cta {
    width: 100%;
    max-width: 500px;
    padding: 16px 32px;
    box-shadow: var(--shadow-lg);
    font-size: 1.1rem;
    font-weight: 500;
    animation: fadeInUp 1s 0.4s both ease-out;
}

.hero-cta:hover {
    transform: translateY(-3px) scale(1.03); /* Already in .cta-button:hover */
    box-shadow: var(--shadow-xl); /* Already in .cta-button:hover */
}

.hero-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1240px;
    height: auto;
    margin: 0 auto;
    padding-top: 20px;
    animation: fadeIn 1.5s 0.6s both ease-out;
}
.hero-image-wrapper {
    position: relative;
    margin: 0 auto 0 40px; /* Original: margin: 0px auto 0px 40px; */
}

/* === Benefits Section === */
.benefits {
    position: relative;
    padding: 100px 0;
    overflow: hidden;
    background-color: var(--bg-white);
}

.benefits::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(180deg, rgba(240, 253, 250, 0.8) 0%, rgba(255, 255, 255, 0) 100%);
}

.benefits .section-header {
    position: relative;
    z-index: 2;
}

.benefits-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
}

.benefit-card {
    position: relative;
    margin: 0 auto 20px;
    padding: 40px 30px;
    border: 1px solid rgba(229, 231, 235, 0.5);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: var(--transition-bounce);
}

.benefit-card:hover {
    border-color: transparent;
    background-color: var(--bg-white); /* Explicit for hover, though same as base */
    transform: translateY(-12px);
    box-shadow: var(--shadow-hover);
}

.benefit-icon-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
    border-radius: 50%;
    background-color: var(--primary-light);
    color: var(--primary-dark);
    transition: var(--transition-bounce);
}

.benefit-icon-wrapper::after {
    content: '';
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.benefit-card:hover .benefit-icon-wrapper {
    color: var(--text-on-primary);
    transform: scale(1.1) rotate(5deg);
}

.benefit-card:hover .benefit-icon-wrapper::after {
    opacity: 1;
}

.benefit-icon {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

.benefit-card:hover .benefit-icon {
    transform: scale(1.1);
}

.benefit-title {
    margin-bottom: 15px;
    color: var(--text-dark);
    font-size: 1.35rem;
    font-weight: 600;
    transition: var(--transition-medium);
}

.benefit-card:hover .benefit-title {
    color: var(--primary-dark);
}

.benefit-description {
    color: var(--text-light);
    font-size: 0.95rem;
    line-height: 1.7;
}

.benefit-card.animate-on-scroll:nth-child(1) {
    transition-delay: calc(var(--animation-delay-base) * 1);
}
.benefit-card.animate-on-scroll:nth-child(2) {
    transition-delay: calc(var(--animation-delay-base) * 2);
}
.benefit-card.animate-on-scroll:nth-child(3) {
    transition-delay: calc(var(--animation-delay-base) * 3);
}
.benefit-card.animate-on-scroll:nth-child(4) {
    transition-delay: calc(var(--animation-delay-base) * 4);
}

/* === Features Accordion Section === */
.feature-container-wrapper {
    position: relative;
    padding: 0 0 100px 0; /* Original: 0px 0 100px 0 */
    overflow: hidden;
    background-color: var(--bg-light-gray);
    text-align: center;
}

.feature-container-wrapper::before,
.feature-container-wrapper::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    /* background: radial-gradient(circle, rgba(20, 184, 166, 0.05) 0%, rgba(20, 184, 166, 0) 70%); */
}

.feature-container-wrapper::before {
    top: -300px;
    right: -300px;
    width: 800px;
    height: 800px;
}

.feature-container-wrapper::after {
    bottom: -200px;
    left: -200px;
    width: 600px;
    height: 600px;
}

.feature-container-wrapper .section-header {
    position: relative;
    z-index: 1;
    margin-bottom: 50px;
}

.layout-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 0 60px;
}

.accordion-column {
    flex: 1 1 500px;
    min-width: 300px;
    max-width: 600px;
    margin: 0 auto;
}

.image-column {
    position: sticky;
    top: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 500px;
    min-width: 300px;
    max-width: 550px;
    height: calc(100vh - 140px);
    max-height: 500px;
    margin: 0 auto;
}

.image-column .image-container {
    box-shadow: none;
    border: none;
}

.accordion {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    border: none;
    border-radius: 0; /* Redundant with border:none */
    overflow: visible;
    box-shadow: none;
    gap: 20px;
}

.accordion-item {
    position: relative;
    border: 1px solid rgba(229, 231, 235, 0.8);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-sm);
    font-family: 'DM Sans', sans-serif;
    transition: all 0.4s ease;
}

.accordion-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 5px;
    height: 100%;
    border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
    background: var(--primary-gradient);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.accordion-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20px 24px;
    background-color: transparent;
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    transition: all 0.3s ease;
    cursor: pointer;
}

.accordion-header:hover {
    color: var(--primary-color);
}

.header-title {
    flex-grow: 1;
    margin-right: 15px;
    line-height: 1.4;
}

.accordion-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 15px;
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.accordion-icon::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-style: solid;
    border-width: 0 2px 2px 0;
    border-color: var(--primary-color);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.accordion-content {
    max-height: 0;
    padding: 0 24px;
    overflow: hidden;
    background-color: transparent;
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.7;
    text-align: left;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), padding-top 0.5s ease-out, padding-bottom 0.5s ease-out;
}

/* Checked State Styling - updated selectors */
#feature1-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature1-toggle"])::before,
#feature2-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature2-toggle"])::before,
#feature3-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature3-toggle"])::before,
#feature4-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature4-toggle"])::before,
/* #feature5-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature5-toggle"])::before, */
#feature6-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature6-toggle"])::before,
#feature7-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature7-toggle"])::before {
    opacity: 1;
}

/* Highlight active item */
#feature1-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature1-toggle"]),
#feature2-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature2-toggle"]),
#feature3-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature3-toggle"]),
#feature4-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature4-toggle"]),
/* #feature5-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature5-toggle"]), */
#feature6-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature6-toggle"]),
#feature7-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature7-toggle"]) {
    border-color: var(--primary-color); /* Highlight border */
    box-shadow: var(--shadow-md); /* Add shadow */
    /* background-color: var(--primary-bg); Slightly different bg */
}

/* Style active header */
#feature1-toggle:checked ~ .layout-wrapper label[for="feature1-toggle"],
#feature2-toggle:checked ~ .layout-wrapper label[for="feature2-toggle"],
#feature3-toggle:checked ~ .layout-wrapper label[for="feature3-toggle"],
#feature4-toggle:checked ~ .layout-wrapper label[for="feature4-toggle"],
/* #feature5-toggle:checked ~ .layout-wrapper label[for="feature5-toggle"], */
#feature6-toggle:checked ~ .layout-wrapper label[for="feature6-toggle"],
#feature7-toggle:checked ~ .layout-wrapper label[for="feature7-toggle"] {
    color: var(--primary-color); /* Highlight header text */
    font-weight: 700; /* Bolder */
}

/* Expand content */
#feature1-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature1-toggle"]) .accordion-content,
#feature2-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature2-toggle"]) .accordion-content,
#feature3-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature3-toggle"]) .accordion-content,
#feature4-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature4-toggle"]) .accordion-content,
/* #feature5-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature5-toggle"]) .accordion-content, */
#feature6-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature6-toggle"]) .accordion-content,
#feature7-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for="feature7-toggle"]) .accordion-content {
    max-height: 600px; /* Increased to accommodate the image + text */
    padding-top: 8px; /* Adjusted gap after header */
    padding-bottom: 24px; /* Match header padding */
}

/* Rotate icon */
#feature1-toggle:checked ~ .layout-wrapper label[for="feature1-toggle"] .accordion-icon::before,
#feature2-toggle:checked ~ .layout-wrapper label[for="feature2-toggle"] .accordion-icon::before,
#feature3-toggle:checked ~ .layout-wrapper label[for="feature3-toggle"] .accordion-icon::before,
#feature4-toggle:checked ~ .layout-wrapper label[for="feature4-toggle"] .accordion-icon::before,
/* #feature5-toggle:checked ~ .layout-wrapper label[for="feature5-toggle"] .accordion-icon::before, */
#feature6-toggle:checked ~ .layout-wrapper label[for="feature6-toggle"] .accordion-icon::before,
#feature7-toggle:checked ~ .layout-wrapper label[for="feature7-toggle"] .accordion-icon::before {
    transform: translateY(0px) rotate(-135deg); /* Rotate up */
}

/* Image Container Styling */
.image-container {
    position: relative;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    /* background-color: var(--bg-white); */
    box-shadow: var(--shadow-xl);
    aspect-ratio: 4 / 3;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.image-column .image-container {
    box-shadow: none;
    border: none;
}

.feature-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-lg); /* Match container */
    object-fit: cover; /* Cover the container */
    opacity: 0;
    transform: scale(1.05); /* Start slightly zoomed */
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.image-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0; /* Behind images */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-light-gray); /* Placeholder background */
    color: var(--text-light);
    text-align: center;
}
.placeholder-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 15px;
    stroke: var(--primary-light); /* Lighter stroke for placeholder */
}
.image-placeholder span {
    font-size: 1rem;
    font-weight: 500;
}

/* Show active image */
#feature1-toggle:checked ~ .layout-wrapper .image-container .feature-image[data-image-for="feature1-toggle"],
#feature2-toggle:checked ~ .layout-wrapper .image-container .feature-image[data-image-for="feature2-toggle"],
#feature3-toggle:checked ~ .layout-wrapper .image-container .feature-image[data-image-for="feature3-toggle"],
#feature4-toggle:checked ~ .layout-wrapper .image-container .feature-image[data-image-for="feature4-toggle"],
/* #feature5-toggle:checked ~ .layout-wrapper .image-container .feature-image[data-image-for="feature5-toggle"], */
#feature6-toggle:checked ~ .layout-wrapper .image-container .feature-image[data-image-for="feature6-toggle"],
#feature7-toggle:checked ~ .layout-wrapper .image-container .feature-image[data-image-for="feature7-toggle"] {
    z-index: 2; /* Bring to front */
    opacity: 1;
    transform: scale(1); /* Zoom in to normal scale */
}

/* Hide placeholder when an image is active */
#feature1-toggle:checked ~ .layout-wrapper .image-container .image-placeholder,
#feature2-toggle:checked ~ .layout-wrapper .image-container .image-placeholder,
#feature3-toggle:checked ~ .layout-wrapper .image-container .image-placeholder,
#feature4-toggle:checked ~ .layout-wrapper .image-container .image-placeholder,
/* #feature5-toggle:checked ~ .layout-wrapper .image-container .image-placeholder, */
#feature6-toggle:checked ~ .layout-wrapper .image-container .image-placeholder,
#feature7-toggle:checked ~ .layout-wrapper .image-container .image-placeholder {
    z-index: -1; /* Send to back */
    opacity: 0;
}

/* === Pricing Section === */
.pricing {
    position: relative;
    padding: 60px 0 0 0;
    overflow: hidden;
    background-color: var(--bg-white);
}

.pricing .section-header {
    position: relative;
    z-index: 1;
}

.pricing-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    max-width: 900px;
    margin: 0 auto;
    gap: 40px;
}

.pricing-card {
    position: relative;
    padding: 0;
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: var(--transition-bounce);
}

.pricing-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-hover);
    animation: pricingPulse 2s infinite;
}

.pricing-card--support {
    margin-top: 15px; /* Visual offset */
    transform: scale(0.95);
    transform-origin: top center;
}

.pricing-card--support:hover {
    transform: scale(0.95) translateY(-10px);
}

.pricing-header {
    position: relative;
    padding: 40px 20px;
    overflow: hidden;
    background: var(--primary-gradient);
    color: var(--text-on-primary);
}

.pricing-header::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
}

.pricing-title {
    position: relative;
    margin-bottom: 15px;
    color: var(--text-on-primary);
    font-size: 1.8rem;
    font-weight: 700;
}

.pricing-price {
    position: relative;
    opacity: 0.95;
    font-size: 1.2rem;
    font-weight: 500;
}

.pricing-body {
    padding: 40px 30px;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, rgba(255, 255, 255, 1) 100%);
}

.pricing-description {
    margin-bottom: 30px;
    color: var(--text-light);
    font-size: 1rem;
}

.pricing-features {
    display: flex;
    flex-direction: column;
    margin-bottom: 35px;
    text-align: left;
    gap: 15px;
}

.pricing-feature {
    display: flex;
    align-items: flex-start;
    color: var(--text-medium);
    font-size: 0.95rem;
    gap: 12px;
}

.feature-check {
    flex-shrink: 0;
    margin-top: 3px;
    color: var(--primary-color);
}

.feature-check svg {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(20, 184, 166, 0.3));
}

.pricing-cta {
    width: 100%;
    padding: 16px 28px;
    font-size: 1.05rem;
}

/* Coffee button styles */
.coffee-btn {
    background: var(--coffee-gradient) !important;
}

.coffee-btn:before {
    background: linear-gradient(135deg, #ff9500, #ff5733) !important;
}

/* === FAQ Section === */
.faq {
    position: relative;
    padding: 90px 0 0 0; /* Adjusted bottom padding */
    overflow: visible;
    background-color: var(--bg-light-gray);
}

.faq::before,
.faq::after {
    content: '';
    position: absolute;
    z-index: 0;
    border-radius: 50%;
}

.faq::after {
    top: 100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.03) 0%, rgba(99, 102, 241, 0) 70%);
}

.faq .section-header {
    position: relative;
    z-index: 1;
}

.faq-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    margin: 0 auto;
    gap: 20px;
}

.faq-item {
    padding: 0;
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    background-color: var(--bg-white);
    box-shadow: var(--shadow-card);
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Refined from var(--transition-medium) */
}

.faq-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.faq-question {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 24px;
    background-color: transparent;
    color: var(--text-dark);
    font-family: 'DM Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    transition: all 0.3s ease; /* Refined from var(--transition-fast) */
    cursor: pointer;
}

.faq-question:hover {
    color: var(--primary-color);
}

.faq-question span {
    flex-grow: 1;
    margin-right: 15px;
}

.faq-answer {
    max-height: 0;
    padding: 0 24px;
    overflow: hidden;
    background-color: transparent; /* Added for consistency if needed */
    color: var(--text-light);
    font-size: 1rem;
    line-height: 1.7;
    opacity: 0; /* For enhanced animation */
    transform: translateY(-10px); /* For enhanced animation */
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); /* Refined from ease-out */
}

.faq-answer p {
    padding-bottom: 22px;
}

.faq-toggle {
    display: none;
}

.faq-toggle:checked + .faq-question {
    color: var(--primary-color);
}

.faq-toggle:checked + .faq-question + .faq-answer {
    max-height: 300px; /* Ensure this is enough for content */
    padding-top: 0; /* Was already 0 */
    padding-bottom: 24px;
    opacity: 1; /* For enhanced animation */
    transform: translateY(0); /* For enhanced animation */
}

.faq-icon {
    flex-shrink: 0;
    color: var(--primary-color);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Refined from ease */
}

.faq-toggle:checked + .faq-question .faq-icon {
    transform: rotate(180deg);
}

/* === Newsletter Section (Original Simple) === */
.newsletter {
    padding: 100px 0 0 0; /* Standardized top padding, remove bottom */
    background-color: var(--primary-bg); /* Use light primary bg */
    background-image: linear-gradient(to bottom, var(--primary-bg), var(--bg-white));
    text-align: center;
}

.newsletter .section-header {
    margin-bottom: 30px; /* Adjusted margin */
}

.newsletter-description {
    /* This refers to the simple newsletter's description */
    max-width: 550px;
    margin: 0 auto 30px auto; /* Adjusted margin, centered */
    color: var(--text-light);
}

.newsletter-form {
    /* This refers to the simple newsletter's form */
    position: relative;
    max-width: 650px;
    margin: 0 auto; /* Centered */
    /* display: flex; If input and button are direct children */
}

.newsletter-input {
    /* This refers to the simple newsletter's input */
    flex-grow: 1; /* If form is flex */
    width: 100%; /* Make it full width of its container */
    padding: 14px 20px; /* Adjusted padding */
    padding-right: 150px; /* Space for button, assumes button is absolutely positioned or similar trick */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-full); /* Pill shape */
    background-color: var(--bg-white); /* Ensure background */
    box-shadow: var(--shadow-sm);
    font-family: 'DM Sans', sans-serif;
    font-size: 1rem;
    transition: var(--transition-fast);
}

.newsletter-input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2); /* Focus ring */
}

.newsletter-button {
    /* This refers to the simple newsletter's button */
    /* position: absolute; right: 5px; top: 5px; height: calc(100% - 10px); Example if inside input */
    padding: 0 28px; /* Adjust padding */
    border: none;
    border-radius: var(--border-radius-full); /* Match input */
    background-color: var(--primary-color);
    box-shadow: var(--shadow-sm);
    color: var(--text-on-primary);
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    transition: var(--transition-medium);
    cursor: pointer;
    /* height: auto; Let padding define height */
}

.newsletter-button:hover {
    background-color: var(--primary-dark);
    box-shadow: var(--shadow-md);
    transform: scale(1.03); /* Slight scale effect */
}

.newsletter-spam-info {
    margin-top: 12px; /* Adjusted margin */
    color: var(--text-light);
    font-size: 0.85rem;
}

/* === Footer === */
footer {
    padding: 60px 0 30px; /* Adjusted padding */
    background-color: var(--bg-light-gray);
    color: var(--text-footer);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive grid */
    margin-bottom: 40px; /* Adjusted space before bottom */
    gap: 30px 40px; /* Adjusted row and column gap */
}

.footer-column {
    margin-bottom: 15px; /* Adjusted space for stacking on mobile */
}
.footer-about p {
    margin-top: 15px; /* Adjusted margin */
    font-size: 0.9rem;
    line-height: 1.6;
}

.footer-title {
    margin-bottom: 20px; /* Adjusted margin */
    color: var(--primary-dark); /* White title */
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.footer-link {
    display: block;
    margin-bottom: 10px; /* Adjusted margin */
    color: var(--text-footer);
    font-size: 0.95rem;
    transition: var(--transition-fast);
}

.footer-link:hover {
    color: var(--primary-color); /* Added hover color for consistency */
    transform: translateX(3px);
}

.footer-contact-item {
    display: flex;
    align-items: center; /* Center align icon and text */
    margin-bottom: 12px; /* Adjusted margin */
    color: var(--text-footer);
    font-size: 0.95rem;
    gap: 10px; /* Adjusted gap */
}

.contact-icon {
    flex-shrink: 0;
    color: var(--primary-color);
    /* margin-top: 2px; Fine-tune alignment */
}

.footer-bottom {
    padding-top: 25px; /* Adjusted padding */
    border-top: 1px solid #dbdee1; /* Darker border */
    color: var(--text-footer);
    font-size: 0.85rem;
    text-align: center;
}

/* === Speech Bubble === */
[speech-bubble],
[speech-bubble] * {
    box-sizing: border-box;
}

[speech-bubble] {
    --bbColor: rgb(255, 255, 255);
    --bbArrowSize: 1.5rem;
    --bbBorderRadius: 0.25rem;
    --bbPadding: 1rem;
    position: relative;
    padding: var(--bbPadding);
    border-radius: var(--bbBorderRadius);
    background: var(--bbColor);
    filter: drop-shadow(0px 0px 0.1rem rgba(100, 100, 100, 0.5));
    opacity: 0;
    transform: scale(0.1);
    transform-origin: bottom right;
    transition: transform 0.25s ease; /* Base transition */
}

[speech-bubble].animate {
    animation: speechBubbleInflate 0.8s cubic-bezier(0.17, 0.67, 0.4, 1.4) forwards, speechBubbleFloat 3s ease-in-out 0.8s infinite;
}

/* Add speech bubble text fade-in */
[speech-bubble] span {
    display: inline-block; /* Or block if needed */
    overflow: visible; /* Or hidden if animating width */
    white-space: normal;
    opacity: 0;
}

[speech-bubble].animate span {
    animation: speechFadeIn 0.5s ease-out 0.6s forwards;
}

[speech-bubble]::before {
    content: '';
    position: absolute;
    background: var(--bbColor);
    transform-origin: bottom right; /* Consistent with bubble transform-origin */
}

[speech-bubble][pbottom] {
    margin-bottom: var(--bbArrowSize);
}

[speech-bubble][pbottom]::before {
    --width: calc(var(--bbArrowSize) / 2 * 3); /* Variable for clarity */
    top: calc(100% - 2px); /* Overlap slightly to avoid gaps */
    width: var(--width);
    height: var(--bbArrowSize);
    /* clip-path defined in specific direction [aright] etc. */
}

[speech-bubble].animate[pbottom]::before {
    /* Arrow animation for floating effect */
    animation: speechBubbleFloatArrow 3s ease-in-out 0.8s infinite;
}

[speech-bubble][pbottom][aright]::before {
    right: 1rem; /* Position of the arrow */
    clip-path: polygon(0 0, 75% 0, 100% 100%);
}

/* === Animations Keyframes === */
@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(3deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

@keyframes breathe {
    0% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.8;
        transform: scale(1);
    }
}

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

@keyframes pulse {
    /* From Hero section */
    0% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.05);
    }
    100% {
        opacity: 0.5;
        transform: scale(1);
    }
}

@keyframes fadeInUp {
    /* From Hero section */
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    /* From Hero section */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes speechBubbleInflate {
    /* From Speech Bubble */
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    70% {
        opacity: 1;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes speechBubbleFloat {
    /* From Speech Bubble */
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes speechFadeIn {
    /* From Speech Bubble */
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes speechBubbleFloatArrow {
    /* From Speech Bubble */
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px); /* Subtle float for arrow */
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fadeInUpSection {
    /* From Scroll Animations */
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pricingPulse {
    /* From Scroll Animations / Pricing */
    0% {
        box-shadow: var(--shadow-card);
    }
    50% {
        box-shadow: 0 15px 35px rgba(20, 184, 166, 0.2);
    }
    100% {
        box-shadow: var(--shadow-card);
    }
}

@keyframes rotation {
    /* From Page Loader */
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes cursor-blink {
    /* From Hero Typing Animation */
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* === Hero Gradient Animation === */
@keyframes heroGradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* === Animated Elements === */
.floating-robot {
    position: absolute;
    top: -40px;
    right: -30px;
    width: 80px;
    height: auto;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
    animation: float 4s ease-in-out infinite;
}

/* === Scroll Animations Classes === */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--animation-medium) ease, transform var(--animation-medium) ease;
}

.animate-on-scroll.animate {
    opacity: 1;
    transform: translateY(0);
}

/* === Page Loading Animation === */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--bg-white);
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.fade-out {
    opacity: 0;
    visibility: hidden;
}

.loader {
    position: relative;
    display: inline-block; /* Changed from block if it's centered by flex */
    width: 48px;
    height: 48px;
    border: 3px solid var(--primary-light);
    border-radius: 50%;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

.loader::after {
    content: '';
    position: absolute;
    top: 0; /* Adjusted from left:0, top:0 for centered spinner dot */
    left: 0;
    width: 100%; /* Ensure it covers parent */
    height: 100%; /* Ensure it covers parent */
    border: 3px solid transparent;
    border-top-color: var(--primary-color);
    border-radius: 50%;
    box-sizing: border-box;
}

/* === Stats Counter === */
.stats-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 900px;
    margin: 40px auto;
    gap: 20px;
}

.stat-item {
    flex: 1 1 200px;
    padding: 20px;
    border: 1px solid rgba(229, 231, 235, 0.6);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-white);
    box-shadow: var(--shadow-card);
    text-align: center;
    transition: var(--transition-medium);
}

.stat-item:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
}

.stat-number {
    margin-bottom: 10px;
    color: var(--primary-color);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    color: var(--text-light);
    font-size: 1rem;
    font-weight: 500;
}

/* === Newsletter Section (Detailed Version) === */
.newsletter-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 60px 20px 0; /* Keep top padding, bottom will be handled by content */
}

.newsletter-wrapper {
    display: flex;
    gap: 40px;
}

.newsletter-content {
    /* Text content part */
    width: 55%;
    padding-bottom: 60px; /* Spacing at the bottom of the text content */
}

.newsletter-tag {
    margin-bottom: 10px;
    color: var(--primary-color);
    font-weight: 600;
    text-align: left;
}

.newsletter-title {
    /* Detailed newsletter title */
    margin-bottom: 20px;
    color: #212121; /* Specific color, consider var(--text-dark) */
    font-size: 2.5rem;
    text-align: left;
}

.newsletter-description {
    /* Detailed newsletter description */
    max-width: 635px; /* Limit width for readability */
    margin-bottom: 30px;
    color: #6b7280; /* Specific color, consider var(--text-light) or var(--text-medium) */
    font-size: 1.1rem;
    text-align: left;
}

.newsletter-form {
    /* Detailed newsletter form container */
    max-width: 500px; /* Limit form width */
    /* text-align: left; if elements inside are inline-block */
}

.newsletter-label {
    display: block; /* Ensure it takes full width for alignment */
    margin-bottom: 8px;
    color: #4b5563; /* Specific color, consider var(--text-medium) */
    font-size: 0.9rem;
    text-align: left;
}

.newsletter-input {
    /* Detailed newsletter input field */
    width: 100%;
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #e5e7eb; /* Specific color, consider var(--border-color) */
    border-radius: 8px; /* var(--border-radius-md) */
    font-size: 0.9rem;
    /* Removed duplicated properties covered by the other .newsletter-input */
}

.newsletter-button {
    /* Detailed newsletter button */
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 8px; /* var(--border-radius-md) */
    background-color: var(--primary-color);
    color: white; /* var(--text-on-primary) */
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease; /* Redundant if * has transition */
    /* Removed duplicated properties covered by the other .newsletter-button */
}

/* Hover state for detailed newsletter button is same as general .newsletter-button:hover */

.newsletter-image {
    /* Image container for detailed newsletter */
    position: relative;
    display: flex; /* For alignment of children */
    align-items: flex-end;
    justify-content: center;
    width: 45%;
    margin: 0 auto; /* Center if it becomes block on smaller screens */
    overflow: visible; /* Important for speech bubble positioning */
}

.newsletter-speech-image-container {
    /* Wrapper for doctor image and speech bubble */
    position: relative;
    width: fit-content; /* Shrink to content */
}

.newsletter-icons {
    /* Decorative background icons for image area */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; /* Behind doctor image */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.newsletter-icons img {
    display: block; /* Standard for images */
    max-width: 100%;
    height: auto;
}

.newsletter-speech-bubble {
    position: absolute;
    bottom: calc(100% - 50px); /* Position relative to doctor image */
    right: calc(50% + 50px); /* Position relative to doctor image */
    z-index: 3; /* Above doctor image and icons */
    width: 200px; /* Fixed width */
    padding: 15px 20px;
    border-radius: 8px; /* var(--border-radius-md) */
    background-color: white; /* var(--bg-white) */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08); /* Custom shadow */
    color: #252525; /* Specific color, consider var(--text-dark) */
    font-size: 0.9rem;
    font-weight: 500;
    transform-origin: top left; /* For animations, if any */
}

.newsletter-doctor img {
    position: relative; /* To allow z-index stacking */
    z-index: 1; /* Above icons, below speech bubble if overlapping */
    display: block; /* Standard */
    max-width: 350px;
    height: auto;
}

/* === Focus Styles (Accessibility) === */
:focus {
    /* General focus style */
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* === Media Queries === */

/* Desktop Navigation Overrides (Mobile First principle) */
@media (min-width: 769px) {
    /* Hide mobile menu toggle on desktop */
    .menu-toggle,
    #mobile-menu-toggle {
        display: none !important; /* Keep !important for overriding specificity */
    }

    /* Restore nav to normal flow for desktop */
    nav {
        position: static !important; /* Override fixed positioning */
        /* top, left, right, bottom auto are defaults for static */
        z-index: auto !important;
        display: block !important; /* Ensure it's visible */
        width: auto !important;
        height: auto !important;
        background-color: transparent !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Horizontal menu layout for desktop */
    .nav-menu {
        flex-direction: row !important; /* Override column for mobile */
        align-items: center; /* Already in base, but explicit */
        justify-content: flex-end; /* Align to right */
        height: auto !important; /* Override 100% for mobile */
        padding: 0; /* Remove mobile padding */
        gap: 35px; /* Base gap, confirm if override needed */
    }

    .nav-menu li {
        width: auto; /* Override 100% for mobile */
        margin: 0; /* Remove mobile margin */
        text-align: left; /* Override center for mobile */
    }

    .nav-link {
        display: inline-block !important; /* Override block for mobile */
        padding: 5px 0 !important; /* Base padding, confirm */
        border-bottom: none !important; /* Remove mobile border */
        font-size: 1rem !important; /* Base font size, confirm */
        text-align: left; /* Override center for mobile */
    }

    .nav-link::after {
        /* Ensure underline effect is shown on desktop */
        display: block;
    }

    .nav-cta {
        width: auto !important; /* Override 90% for mobile */
        max-width: none !important;
        margin-top: 3px !important; /* Fine-tune vertical alignment */
        padding: 10px 24px !important; /* Base padding, confirm */
    }

    /* Accordion image display for desktop */
    .accordion-content .feature-mobile-image {
        display: none !important; /* Explicitly hide mobile images in accordion content */
    }
    .layout-wrapper .image-column {
        display: flex !important; /* Explicitly show desktop image column and ensure it's flex */
    }
}

@media (max-width: 992px) {
    .layout-wrapper {
        /* For features section */
        gap: 40px;
    }
    .image-column {
        /* For features section */
        position: static; /* Overrides sticky */
        order: -1; /* Moves image above accordion on tablet if layout is column */
        max-width: 100%; /* Allow full width */
        height: auto;
        max-height: none;
        margin-bottom: 40px;
    }
    .image-container {
        /* For features section */
        max-width: 100%;
    }

    .benefit-card {
        padding: 30px 25px;
    }
    .benefit-icon-wrapper {
        width: 70px;
        height: 70px;
    }

    .hero-title {
        font-size: 2.5rem; /* Consolidated */
    }

    .feature-toggle-container {
        /* For features section */
        flex-wrap: wrap;
    }

    .accordion-column {
        /* For features section */
        max-width: 100%;
    }

    /* Newsletter (Detailed) Responsive */
    .newsletter-wrapper {
        gap: 30px;
    }
    .newsletter-title {
        /* Detailed newsletter */
        font-size: 2.2rem;
    }
    .newsletter-doctor img {
        max-width: 300px;
    }
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 70px; /* Adjust for smaller fixed header */
    }

    header {
        padding: 10px 0;

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    header.scrolled {
        /* Ensure scrolled header is also solid on mobile */
        background-color: #ffffff;
    }

    .header-container {
        /* flex-direction: row; Default */
        align-items: center;
        justify-content: space-between;
    }

    /* Mobile Navigation Menu Styles (when #mobile-menu-toggle is checked) */
    nav {
        /* This is the full-screen menu container */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1999; /* Below menu-toggle button */
        background-color: #ffffff;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    #mobile-menu-toggle:checked ~ nav {
        opacity: 1;
        visibility: visible;
    }

    .nav-menu {
        /* The list of navigation links */
        display: flex; /* Overrides desktop display:flex for nav itself */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%; /* Takes full width of nav container */
        height: 100%; /* Takes full height of nav container */
        padding: 60px 20px; /* Inner padding for menu items */
        gap: 0; /* Reset desktop gap, handled by li margin */
    }
    .nav-menu li {
        width: 100%;
        margin: 12px 0;
        text-align: center;
    }
    .nav-link {
        /* Individual links */
        display: block; /* Take full width of li */
        width: 100%;
        padding: 15px 0;
        border-bottom: 1px solid var(--border-light);
        font-size: 1.2rem;
        text-align: center;
    }
    .nav-link::after {
        /* Hide desktop underline effect on mobile */
        display: none;
    }
    .nav-link:last-of-type {
        border-bottom: none;
    }
    .nav-cta {
        /* Call to action button in mobile menu */
        width: 90%; /* Make it wide */
        max-width: 80%; /* But not too wide, error in original? Check intent */
        margin-top: 15px;
        padding: 12px 20px;
        text-align: center;
    }
    /* End Mobile Navigation */

    .hero {
        padding: 120px 0 0px 0px;
    }
    .hero-title {
        margin-bottom: 25px;
        font-size: 2rem; /* Consolidated */
    }
    .hero-description {
        margin-bottom: 30px;
        padding: 0 10px; /* Add side padding for readability */
        font-size: 1rem;
    }
    .hero-cta {
        display: block; /* Make it full width within its constraints */
        width: 90%;
        max-width: 400px;
        margin: 0 auto; /* Center it */
        padding: 14px 28px;
        font-size: 1rem;
    }
    .hero-image-container {
        width: 100%; /* Was 90% */
        padding: 30px 0 !important; /* Keep important if overriding something */
    }
    .hero-image-container img {
        /* Added for better control */
        max-width: 85%;
        margin: 0 auto;
    }

    .section-header {
        margin-bottom: 40px;
        padding: 0 10px; /* Add side padding */
    }
    .section-title {
        font-size: 1.8rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr; /* Stack cards */
        gap: 20px;
    }
    .benefit-card {
        max-width: 100%; /* Allow full width within grid cell */
        margin-left: 10px; /* Small side margins */
        margin-right: 10px;
        padding: 25px;
        transform: none !important; /* Remove hover transform on mobile */
    }
    /* .benefit-card:hover {} - hover effects generally less useful on touch */

    .layout-wrapper {
        /* Features accordion */
        flex-direction: column;
        gap: 30px;
    }
    .accordion-column {
        /* Features accordion */
        width: 100%;
    }
    .image-column {
        /* Features accordion - already hidden by more specific rule later, but good to be explicit */
        display: none !important;
    }
    .accordion-header {
        /* Features accordion */
        padding: 16px 20px;
        font-size: 1rem;
    }
    .accordion-content {
        /* Features accordion */
        padding: 0 20px; /* Horizontal padding */
        font-size: 0.9rem;
    }
    /* Active accordion content padding for features */
    #feature1-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature1-toggle']) .accordion-content,
    #feature2-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature2-toggle']) .accordion-content,
    #feature3-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature3-toggle']) .accordion-content,
    #feature4-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature4-toggle']) .accordion-content,
    #feature6-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature6-toggle']) .accordion-content,
    #feature7-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature7-toggle']) .accordion-content {
        padding-top: 8px; /* Space after header */
        padding-bottom: 20px; /* Space at bottom of content */
        max-height: 800px !important; /* Accommodate mobile image + text, ensure !important is needed */
    }

    /* Feature Accordion Mobile Image Display */
    .layout-wrapper .image-column {
        /* Explicitly hide desktop image column */
        display: none !important;
    }
    .accordion-content .feature-mobile-image {
        /* Show mobile image within accordion */
        display: block !important; /* Override any default display */
        width: 100%;
        margin: 15px 0; /* Spacing around image */
        border-radius: var(--border-radius-md);
        box-shadow: var(--shadow-md);
        /* transition: transform 0.3s ease, opacity 0.3s ease; from original */
        /* opacity: 0.95; from original */
    }
    /* Animation for mobile image when accordion is open */
    #feature1-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature1-toggle']) .feature-mobile-image,
    #feature2-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature2-toggle']) .feature-mobile-image,
    #feature3-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature3-toggle']) .feature-mobile-image,
    #feature4-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature4-toggle']) .feature-mobile-image,
    #feature6-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature6-toggle']) .feature-mobile-image,
    #feature7-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature7-toggle']) .feature-mobile-image {
        opacity: 1; /* Ensure full opacity */
        transform: scale(1.02); /* Slight zoom effect */
    }

    .pricing-grid {
        grid-template-columns: 1fr; /* Stack cards */
        gap: 25px;
        margin: 0 auto; /* Center the single column */
    }
    .pricing-card {
        transform: none !important; /* Remove hover transform */
    }
    .pricing-card--support {
        /* Reset desktop scaling */
        margin-top: 0;
        transform: none !important; /* Was scale(1) which is same as none, but !important ensures */
    }

    .faq-question {
        padding: 18px 20px;
        font-size: 1rem;
    }
    .faq-answer {
        padding: 0 20px; /* Horizontal padding */
        font-size: 0.9rem;
    }
    .faq-toggle:checked + .faq-question + .faq-answer {
        padding-bottom: 20px; /* Ensure consistent bottom padding */
    }

    /* Newsletter (Simple) Responsive */
    .newsletter-form {
        /* Simple newsletter form */
        flex-direction: column; /* Stack input and button */
        align-items: stretch; /* Make children full width */
        max-width: 90%; /* Limit width */
        margin: 0 auto 20px; /* Center and add bottom margin */
        gap: 10px; /* Gap between input and button, was 0px */
    }
    .newsletter-input {
        /* Simple newsletter input */
        padding: 14px 18px; /* Adjust padding */
        padding-right: 18px; /* Remove specific right padding for button */
        border-radius: var(--border-radius-md); /* Consistent radius */
        text-align: center;
    }
    .newsletter-button {
        /* Simple newsletter button */
        position: static; /* Remove absolute if it was implied */
        width: 100%; /* Make full width */
        padding: 14px 20px;
        border-radius: var(--border-radius-md); /* Consistent radius */
    }

    /* Newsletter (Detailed) Responsive */
    .newsletter-wrapper {
        flex-direction: column;
    }
    .newsletter-content {
        /* Detailed newsletter content area */
        width: 100%;
        padding-bottom: 30px;
        text-align: center; /* Center align text content */
    }
    .newsletter-tag,
    .newsletter-title, /* Detailed newsletter title */
    .newsletter-description, /* Detailed newsletter description */
    .newsletter-label {
        text-align: center; /* Center all text elements */
    }
    .newsletter-description {
        /* Detailed newsletter description */
        margin-left: auto; /* Center block element */
        margin-right: auto;
    }
    .newsletter-form {
        /* Detailed newsletter form */
        margin: 0 auto; /* Center form */
    }
    .newsletter-image {
        /* Detailed newsletter image container */
        width: 100%; /* Full width */
        padding-top: 50px !important; /* Keep important if necessary */
        padding-left: 0; /* Remove specific padding, was 120px */
        justify-content: center; /* Center doctor image */
    }
    .newsletter {
        /* This refers to simple newsletter section */
        padding-top: 0; /* Align with other sections */
    }

    .floating-robot {
        /* Adjust floating robot for mobile */
        top: -10px !important;
        right: 1vw !important; /* Closer to edge */
        transform: scale(0.8); /* Smaller */
    }

    .footer-content {
        grid-template-columns: 1fr 1fr; /* Two columns */
        gap: 30px; /* Consistent gap */
        text-align: left; /* Align text left */
    }
    .footer-column:first-child {
        /* About column */
        grid-column: 1 / -1; /* Make it full width to stack above others */
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 1.8rem;
    }
    .hero-image-wrapper {
        /* Fine tune hero image on smallest screens */
        margin: 20px 0 0 0 !important; /* Override for centering */
        /* right: 10px; Removed, centering should handle */
        display: flex; /* To center image inside */
        justify-content: center;
    }
    .hero-image-container img,
    .image-column img {
        /* General image sizing for small screens */
        max-width: 90%; /* Ensure images are not too wide */
        margin: 0 auto; /* Center them if they are block */
    }

    .benefit-card {
        padding: 20px; /* Unified padding, was 0px for pricing, 25px for benefit */
    }
    .benefit-card:hover {
        /* Reduce hover effect further */
        transform: translateY(-5px);
    }

    .floating-robot img {
        /* Control image size inside floating robot */
        width: 50px; /* Fixed width */
        height: auto;
        /* right: 10px !important; Handled by .floating-robot positioning */
    }

    .hero-cta,
    .newsletter-button, /* Covers both simple and detailed if class is shared */
    .nav-cta {
        font-size: 0.95rem; /* Slightly smaller font for CTAs */
    }

    .section-header {
        padding: 0 10px; /* Consistent padding for section headers */
    }

    /* Newsletter (Detailed) on very small screens */
    .newsletter-container {
        /* Main container for detailed newsletter */
        padding: 40px 15px 0; /* Adjust padding */
    }
    .newsletter-image {
        /* Image area for detailed newsletter */
        padding-top: 80px !important; /* Keep important if needed */
        /* padding-left: 200px; Removed for centering */
    }
    .newsletter-speech-bubble {
        right: calc(100% - 120px);
        bottom: calc(100% - 30px);
        max-width: 200px !important;
    }
    .newsletter-title {
        /* Detailed newsletter title */
        font-size: 1.8rem;
    }
    .newsletter-description {
        /* Detailed newsletter description */
        font-size: 1rem;
    }
    .newsletter-doctor img {
        max-width: 250px; /* Smaller doctor image */
    }

    .footer-content {
        grid-template-columns: 1fr; /* Single column for footer */
    }
    .footer-column:first-child {
        /* Ensure about column is still full width */
        grid-column: 1 / -1;
    }
    .contact-icon {
        /* Footer contact icon */
        margin-right: 10px; /* Ensure spacing */
    }

    /* Feature Accordion Mobile Image on very small screens */
    .feature-mobile-image {
        margin: 10px 0 !important; /* Adjust spacing */
    }
    #feature1-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature1-toggle']) .accordion-content,
    #feature2-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature2-toggle']) .accordion-content,
    #feature3-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature3-toggle']) .accordion-content,
    #feature4-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature4-toggle']) .accordion-content,
    #feature6-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature6-toggle']) .accordion-content,
    #feature7-toggle:checked ~ .layout-wrapper .accordion-item:has(label[for='feature7-toggle']) .accordion-content {
        max-height: 500px !important; /* Slightly reduce max height */
    }
}

/* Radio button base style (essential for CSS-only toggles) */
input[type='radio'] {
    display: none;
}