/* CSS RESET AND FONT SETUP */
        :root {
            --bg-milky-white: #FDFDFD;
            --primary-dark-pink: #E03D84;
            --text-grey: #4A4A4A;
            --surface-powder: #F5E9F0;
            --header-font: 'Manrope', 'Helvetica Neue', 'Segoe UI', 'Roboto', sans-serif;
            --body-font: 'Inter', 'Helvetica', 'Arial', sans-serif;
            --scroll-padding: 80px; /* Header height */
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: var(--scroll-padding);
        }

        body {
            background-color: var(--bg-milky-white);
            color: var(--text-grey);
            font-family: var(--body-font);
            line-height: 1.6;
            font-size: 16px;
            overflow-x: hidden;
        }

        /* TYPOGRAPHY */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--header-font);
            font-weight: 700;
            color: #222;
        }

        h1 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            line-height: 1.1;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.75rem);
            margin-bottom: 1.5rem;
            color: var(--primary-dark-pink);
        }

        h3 {
            font-size: clamp(1.2rem, 3vw, 1.5rem);
        }

        p {
            margin-bottom: 1.25em;
            max-width: 100%;
        }

        a {
            color: var(--primary-dark-pink);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #c5296e;
        }

        .container-fluid {
            width: 100%;
            padding: 4rem 2rem;
            margin: 0 auto;
        }
        
        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* ANIMATIONS */
        .animated-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }

        .animated-item.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* HEADER */
        .site-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem 2rem;
            background: rgba(253, 253, 253, 0.85);
            backdrop-filter: blur(10px);
            z-index: 1000;
            height: var(--scroll-padding);
            border-bottom: 1px solid var(--surface-powder);
        }
        
        .header-content {
            width: 100%;
            max-width: 1200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-family: var(--header-font);
            font-size: 1.5rem;
            font-weight: 800;
            color: #222;
        }
        .logo span {
            color: var(--primary-dark-pink);
        }

        .main-nav {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .main-nav a, .dropdown-trigger {
            font-family: var(--header-font);
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-grey);
            padding: 0.5rem 0;
            position: relative;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: color 0.3s ease, border-color 0.3s ease;
        }

        .main-nav a:hover, .dropdown-trigger:hover {
            color: var(--primary-dark-pink);
            border-bottom-color: var(--primary-dark-pink);
        }

        /* DROPDOWN COMPONENT */
        .dropdown {
            position: relative;
        }
        .dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
        .dropdown-trigger svg {
            width: 12px;
            height: 12px;
            transition: transform 0.3s ease;
        }
        .dropdown-content {
            list-style: none;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            background-color: var(--bg-milky-white);
            border: 1px solid var(--surface-powder);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            min-width: 220px;
            padding: 0.5rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        }
        .dropdown.active .dropdown-content {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .dropdown.active .dropdown-trigger svg {
            transform: rotate(180deg);
        }
        .dropdown-content a {
            display: block;
            padding: 0.75rem 1rem;
            color: var(--text-grey);
            font-weight: 400;
            border-radius: 4px;
            white-space: nowrap;
        }
        .dropdown-content a:hover {
            background-color: var(--surface-powder);
            color: var(--primary-dark-pink);
        }

        /* HERO SECTION */
        .hero-section {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 80vh;
            padding-top: var(--scroll-padding);
            background-color: var(--bg-milky-white);
            position: relative;
        }
        
        .hero-section .container {
           position: relative;
           z-index: 2;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            margin: 1.5rem 0 2.5rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .cta-button {
            display: inline-block;
            background-color: var(--primary-dark-pink);
            color: #fff;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 15px rgba(224, 61, 132, 0.4);
            font-family: var(--header-font);
        }
        .cta-button:hover {
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(224, 61, 132, 0.5);
        }

        .scroll-hint {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            color: var(--text-grey);
        }
        .scroll-hint::after {
            content: '';
            display: block;
            width: 1px;
            height: 40px;
            background: var(--primary-dark-pink);
            margin: 8px auto 0;
        }
        .next-section-peek {
            height: 15vh;
            background: var(--surface-powder);
        }

        /* BENEFITS SECTION */
        .benefits-section {
            background: var(--surface-powder);
            text-align: center;
        }
        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
            text-align: left;
        }
        .benefit-card {
            background: var(--bg-milky-white);
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.03);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .benefit-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 8px 30px rgba(0,0,0,0.07);
        }
        .benefit-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--surface-powder);
            margin-bottom: 1.5rem;
        }
        .benefit-icon svg {
            width: 30px;
            height: 30px;
            stroke: var(--primary-dark-pink);
        }
        .benefit-card h3 {
            margin-bottom: 0.5rem;
        }

        /* ARTICLE SECTION */
        .article-wrapper {
            background-color: var(--bg-milky-white);
        }
        .article-intro {
            text-align: center;
            margin-bottom: 3rem;
        }
        .article-intro .section-label {
            font-family: var(--header-font);
            font-weight: 600;
            color: var(--primary-dark-pink);
            margin-bottom: 0.5rem;
            display: block;
        }
        .article-intro .section-subtitle {
            font-size: 1.25rem;
            max-width: 800px;
            margin: 0 auto;
        }
        .article-content {
            max-width: 800px;
            margin: 0 auto;
        }
        .article-content a {
            text-decoration: underline;
        }
        .article-content b, .article-content strong {
            color: #222;
        }
        .article-content h2 {
            border-left: 4px solid var(--primary-dark-pink);
            padding-left: 1rem;
            margin-top: 3rem;
            margin-bottom: 1.5rem;
        }
        .article-content img {
            width: 100%;
            height: auto;
            border-radius: 12px;
            margin: 2rem 0;
            object-fit: cover;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }
        .article-content ul, .article-content ol {
            padding-left: 2rem;
            margin-bottom: 1.25em;
        }
        .article-content li {
            margin-bottom: 0.5em;
        }
        .article-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 2rem 0;
            font-family: var(--body-font);
            box-shadow: 0 2px 10px rgba(0,0,0,0.04);
        }
        .article-content th, .article-content td {
            padding: 0.75rem 1rem;
            border: 1px solid #eee;
            text-align: left;
        }
        .article-content th {
            background-color: var(--surface-powder);
            font-weight: 600;
            color: #222;
        }

        /* HOW IT WORKS SECTION */
        .steps-section {
            background-color: var(--surface-powder);
        }
        .steps-container {
            display: flex;
            flex-direction: column;
            gap: 2rem;
            position: relative;
            margin-top: 4rem;
        }
        .step-item {
            display: flex;
            align-items: flex-start;
            gap: 2rem;
            background: #fff;
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.03);
            position: relative;
            z-index: 2;
        }
        .step-number {
           flex-shrink: 0;
           font-size: 3rem;
           font-weight: 800;
           color: var(--primary-dark-pink);
           font-family: var(--header-font);
           line-height: 1;
           opacity: 0.15;
           position: absolute;
           top: 1rem;
           left: 2rem;
        }
        .step-content {
           padding-left: 4.5rem;
        }
        .step-content h3 {
           margin-bottom: 0.5rem;
        }

        /* TESTIMONIALS SECTION */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        .testimonial-card {
            background-color: var(--surface-powder);
            padding: 2rem;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
        }
        .testimonial-text {
            font-style: italic;
            margin-bottom: 1.5rem;
            flex-grow: 1;
            position: relative;
            padding-left: 2rem;
        }
        .testimonial-text::before {
            content: '“';
            position: absolute;
            left: 0;
            top: -0.5rem;
            font-size: 2.5rem;
            color: var(--primary-dark-pink);
            opacity: 0.3;
            font-family: Georgia, serif;
        }
        .testimonial-author {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        .author-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--primary-dark-pink);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 1.2rem;
        }
        .author-info h4 {
            font-size: 1rem;
            margin: 0;
        }
        .author-info span {
            font-size: 0.9rem;
            opacity: 0.7;
        }

        /* FAQ SECTION */
        .faq-section {
            background-color: var(--bg-milky-white);
        }
        .faq-container {
            max-width: 800px;
            margin: 3rem auto 0;
        }
        .faq-item {
            border-bottom: 1px solid var(--surface-powder);
        }
        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0;
            cursor: pointer;
        }
        .faq-question h3 {
            font-size: 1.2rem;
            font-weight: 500;
        }
        .faq-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            transition: transform 0.4s ease;
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
        }
        .faq-answer p {
            padding-bottom: 1.5rem;
            margin: 0;
        }
        .faq-item.active .faq-answer {
             max-height: 500px; /* Adjust as needed */
        }
        .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }

        /* PRODUCT COMPOSITION */
        .product-section {
            background-color: var(--surface-powder);
        }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 1.5rem;
            margin-top: 3rem;
        }
        .product-feature {
            display: flex;
            align-items: start;
            gap: 1rem;
            padding: 1.5rem;
            background: #fff;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        .product-feature:hover {
            transform: scale(1.03);
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
        }
        .feature-icon {
            color: var(--primary-dark-pink);
            flex-shrink: 0;
            margin-top: 4px;
        }
        .feature-icon svg {
             width: 24px;
             height: 24px;
        }

        /* FOOTER */
        .site-footer {
            background-color: #222;
            color: #ccc;
            padding: 4rem 2rem 2rem;
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid #444;
        }
        
        .footer-column h4 {
            color: #fff;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column li {
            margin-bottom: 0.75rem;
        }
        
        .footer-column a {
            color: #ccc;
            transition: color 0.3s ease;
        }
        
        .footer-column a:hover {
            color: var(--primary-dark-pink);
        }
        
        .footer-bottom {
            padding-top: 2rem;
            text-align: center;
            font-size: 0.9rem;
            color: #888;
        }

        @media (max-width: 768px) {
            .site-header {
                padding: 1rem;
            }
            main {
                padding-top: var(--scroll-padding);
            }
            .main-nav {
                display: none; /* Simple hiding for mobile, for a real project a menu button is needed */
            }
            h1 { font-size: 2.2rem; }
            h2 { font-size: 1.8rem; }
            .container-fluid { padding: 3rem 1rem; }
            .step-item {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            .step-content {
                padding-left: 0;
            }
            .step-number {
                position: static;
                font-size: 2rem;
                opacity: 0.3;
            }
        }


/* CSS RESET AND FONT SETUP */         :root {             --bg-milky-white: #FDFDFD;             --primary-dark-pink: #E03D84;             --text-grey: #4A4A4A;             --surface-powder: #F5E9F0;             --header-font: 'Manrope', 'Helvetica Neue', 'Segoe UI', 'Roboto', sans-serif;             --body-font: 'Inter', 'Helvetica', 'Arial', sans-serif;             --scroll-padding: 80px; /* Header height */         }          *, *::before, *::after {             box-sizing: border-box;             margin: 0;             padding: 0;         }          html {             scroll-behavior: smooth;             scroll-padding-top: var(--scroll-padding);         }          body {             background-color: var(--bg-milky-white);             color: var(--text-grey);             font-family: var(--body-font);             line-height: 1.6;             font-size: 16px;             overflow-x: hidden;         }          /* TYPOGRAPHY */         h1, h2, h3, h4, h5, h6 {             font-family: var(--header-font);             font-weight: 700;             color: #222;         }          h1 {             font-size: clamp(2.5rem, 6vw, 4.5rem);             line-height: 1.1;         }          h2 {             font-size: clamp(2rem, 5vw, 2.75rem);             margin-bottom: 1.5rem;             color: var(--primary-dark-pink);         }          h3 {             font-size: clamp(1.2rem, 3vw, 1.5rem);         }          p {             margin-bottom: 1.25em;             max-width: 100%;         }          a {             color: var(--primary-dark-pink);             text-decoration: none;             transition: color 0.3s ease;         }          a:hover {             color: #c5296e;         }         .container-fluid {             width: 100%;             padding: 4rem 2rem;             margin: 0 auto;         }                 .container {             max-width: 1100px;             margin: 0 auto;             padding: 0 1rem;         }          /* ANIMATIONS */        .animated-item {             opacity: 0;             transform: translateY(30px);             transition: opacity 0.8s ease-out, transform 0.8s ease-out;         }         .animated-item.is-visible {             opacity: 1;             transform: translateY(0);         }          /* HEADER */        .site-header {             position: fixed;             top: 0;             left: 0;             width: 100%;             display: flex;             justify-content: center;             align-items: center;             padding: 1rem 2rem;             background: rgba(253, 253, 253, 0.85);             backdrop-filter: blur(10px);             z-index: 1000;             height: var(--scroll-padding);             border-bottom: 1px solid var(--surface-powder);         }                 .header-content {             width: 100%;             max-width: 1200px;             display: flex;             justify-content: space-between;             align-items: center;         }         .logo {             font-family: var(--header-font);             font-size: 1.5rem;             font-weight: 800;             color: #222;         }        .logo span {             color: var(--primary-dark-pink);         }         .main-nav {             display: flex;             align-items: center;             gap: 1.5rem;         }         .main-nav a,.dropdown-trigger {             font-family: var(--header-font);             font-size: 1rem;             font-weight: 500;             color: var(--text-grey);             padding: 0.5rem 0;             position: relative;             cursor: pointer;             border-bottom: 2px solid transparent;             transition: color 0.3s ease, border-color 0.3s ease;         }         .main-nav a:hover,.dropdown-trigger:hover {             color: var(--primary-dark-pink);             border-bottom-color: var(--primary-dark-pink);         }          /* DROPDOWN COMPONENT */        .dropdown {             position: relative;         }        .dropdown-trigger {             display: flex;             align-items: center;             gap: 0.3rem;         }        .dropdown-trigger svg {             width: 12px;             height: 12px;             transition: transform 0.3s ease;         }        .dropdown-content {             list-style: none;             position: absolute;             top: calc(100% + 10px);             right: 0;             background-color: var(--bg-milky-white);             border: 1px solid var(--surface-powder);             border-radius: 8px;             box-shadow: 0 4px 20px rgba(0,0,0,0.05);             min-width: 220px;             padding: 0.5rem;             opacity: 0;             visibility: hidden;             transform: translateY(10px);             transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;         }        .dropdown.active .dropdown-content {             opacity: 1;             visibility: visible;             transform: translateY(0);         }        .dropdown.active .dropdown-trigger svg {             transform: rotate(180deg);         }        .dropdown-content a {             display: block;             padding: 0.75rem 1rem;             color: var(--text-grey);             font-weight: 400;             border-radius: 4px;             white-space: nowrap;         }        .dropdown-content a:hover {             background-color: var(--surface-powder);             color: var(--primary-dark-pink);         }          /* HERO SECTION */        .hero-section {             display: flex;             align-items: center;             justify-content: center;             text-align: center;             min-height: 80vh;             padding-top: var(--scroll-padding);             background-color: var(--bg-milky-white);             position: relative;         }                 .hero-section.container {            position: relative;            z-index: 2;         }         .hero-subtitle {             font-size: 1.25rem;             margin: 1.5rem 0 2.5rem;             max-width: 700px;             margin-left: auto;             margin-right: auto;         }         .cta-button {             display: inline-block;             background-color: var(--primary-dark-pink);             color: #fff;             padding: 1rem 2.5rem;             border-radius: 50px;             font-size: 1.1rem;             font-weight: 600;             text-transform: uppercase;             letter-spacing: 1px;             transition: transform 0.3s ease, box-shadow 0.3s ease;             box-shadow: 0 4px 15px rgba(224, 61, 132, 0.4);             font-family: var(--header-font);         }        .cta-button:hover {             color: #fff;             transform: translateY(-3px);             box-shadow: 0 8px 25px rgba(224, 61, 132, 0.5);         }         .scroll-hint {             position: absolute;             bottom: 30px;             left: 50%;             transform: translateX(-50%);             font-size: 0.8rem;             color: var(--text-grey);         }        .scroll-hint::after {             content: '';             display: block;             width: 1px;             height: 40px;             background: var(--primary-dark-pink);             margin: 8px auto 0;         }        .next-section-peek {             height: 15vh;             background: var(--surface-powder);         }          /* BENEFITS SECTION */        .benefits-section {             background: var(--surface-powder);             text-align: center;         }        .benefits-grid {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));             gap: 2rem;             margin-top: 3rem;             text-align: left;         }        .benefit-card {             background: var(--bg-milky-white);             padding: 2rem;             border-radius: 12px;             box-shadow: 0 2px 10px rgba(0,0,0,0.03);             transition: transform 0.3s ease, box-shadow 0.3s ease;         }        .benefit-card:hover {             transform: translateY(-8px);             box-shadow: 0 8px 30px rgba(0,0,0,0.07);         }        .benefit-icon {             display: flex;             align-items: center;             justify-content: center;             width: 60px;             height: 60px;             border-radius: 50%;             background-color: var(--surface-powder);             margin-bottom: 1.5rem;         }        .benefit-icon svg {             width: 30px;             height: 30px;             stroke: var(--primary-dark-pink);         }        .benefit-card h3 {             margin-bottom: 0.5rem;         }          /* ARTICLE SECTION */        .article-wrapper {             background-color: var(--bg-milky-white);         }        .article-intro {             text-align: center;             margin-bottom: 3rem;         }        .article-intro .section-label {             font-family: var(--header-font);             font-weight: 600;             color: var(--primary-dark-pink);             margin-bottom: 0.5rem;             display: block;         }        .article-intro .section-subtitle {             font-size: 1.25rem;             max-width: 800px;             margin: 0 auto;         }        .article-content {             max-width: 800px;             margin: 0 auto;         }        .article-content a {             text-decoration: underline;         }        .article-content b,.article-content strong {             color: #222;         }        .article-content h1 {
            font-size: clamp(2.2rem, 5vw, 3rem);
            margin-bottom: 1rem;
            border-bottom: 3px solid var(--surface-powder);
            padding-bottom: 1rem;
        }
        .article-content h2 {
            border-left: 4px solid var(--primary-dark-pink);
            padding-left: 1rem;
            margin-top: 3rem;
            margin-bottom: 1.5rem;
            font-size: clamp(1.5rem, 4vw, 1.8rem);
        }
        .article-content h3 {
            margin-top: 2rem;
            margin-bottom: 0.5rem;
            color: #333;
        }

       .article-content img {             width: 100%;             height: auto;             border-radius: 12px;             margin: 2rem 0;             object-fit: cover;             box-shadow: 0 4px 20px rgba(0,0,0,0.05);         }        .article-content ul,.article-content ol {             padding-left: 2rem;             margin-bottom: 1.25em;         }        .article-content li {             margin-bottom: 0.5em;         }        .article-content table {             width: 100%;             border-collapse: collapse;             margin: 2rem 0;             font-family: var(--body-font);             box-shadow: 0 2px 10px rgba(0,0,0,0.04);         }        .article-content th,.article-content td {             padding: 0.75rem 1rem;             border: 1px solid #eee;             text-align: left;         }        .article-content th {             background-color: var(--surface-powder);             font-weight: 600;             color: #222;         }          /* HOW IT WORKS SECTION */        .steps-section {             background-color: var(--surface-powder);         }        .steps-container {             display: flex;             flex-direction: column;             gap: 2rem;             position: relative;             margin-top: 4rem;         }        .step-item {             display: flex;             align-items: flex-start;             gap: 2rem;             background: #fff;             padding: 2rem;             border-radius: 16px;             box-shadow: 0 4px 15px rgba(0,0,0,0.03);             position: relative;             z-index: 2;         }        .step-number {            flex-shrink: 0;            font-size: 3rem;            font-weight: 800;            color: var(--primary-dark-pink);            font-family: var(--header-font);            line-height: 1;            opacity: 0.15;            position: absolute;            top: 1rem;            left: 2rem;         }        .step-content {            padding-left: 4.5rem;         }        .step-content h3 {            margin-bottom: 0.5rem;         }          /* TESTIMONIALS SECTION */        .testimonials-grid {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));             gap: 2rem;             margin-top: 3rem;         }        .testimonial-card {             background-color: var(--surface-powder);             padding: 2rem;             border-radius: 12px;             display: flex;             flex-direction: column;         }        .testimonial-text {             font-style: italic;             margin-bottom: 1.5rem;             flex-grow: 1;             position: relative;             padding-left: 2rem;         }        .testimonial-text::before {             content: '“';             position: absolute;             left: 0;             top: -0.5rem;             font-size: 2.5rem;             color: var(--primary-dark-pink);             opacity: 0.3;             font-family: Georgia, serif;         }        .testimonial-author {             display: flex;             align-items: center;             gap: 1rem;         }        .author-avatar {             width: 50px;             height: 50px;             border-radius: 50%;             background-color: var(--primary-dark-pink);             color: #fff;             display: flex;             align-items: center;             justify-content: center;             font-weight: 600;             font-size: 1.2rem;         }        .author-info h4 {             font-size: 1rem;             margin: 0;         }        .author-info span {             font-size: 0.9rem;             opacity: 0.7;         }          /* FAQ SECTION */        .faq-section {             background-color: var(--bg-milky-white);         }        .faq-container {             max-width: 800px;             margin: 3rem auto 0;         }        .faq-item {             border-bottom: 1px solid var(--surface-powder);         }        .faq-question {             display: flex;             justify-content: space-between;             align-items: center;             padding: 1.5rem 0;             cursor: pointer;         }        .faq-question h3 {             font-size: 1.2rem;             font-weight: 500;         }        .faq-icon {             width: 24px;             height: 24px;             flex-shrink: 0;             transition: transform 0.4s ease;         }                 .faq-answer {             max-height: 0;             overflow: hidden;             transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;         }        .faq-answer p {             padding-bottom: 1.5rem;             margin: 0;         }        .faq-item.active .faq-answer {              max-height: 500px; /* Adjust as needed */         }        .faq-item.active .faq-icon {             transform: rotate(45deg);         }          /* PRODUCT COMPOSITION */        .product-section {             background-color: var(--surface-powder);         }        .product-grid {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));             gap: 1.5rem;             margin-top: 3rem;         }        .product-feature {             display: flex;             align-items: start;             gap: 1rem;             padding: 1.5rem;             background: #fff;             border-radius: 8px;             transition: all 0.3s ease;         }        .product-feature:hover {             transform: scale(1.03);             box-shadow: 0 5px 20px rgba(0,0,0,0.05);         }        .feature-icon {             color: var(--primary-dark-pink);             flex-shrink: 0;             margin-top: 4px;         }        .feature-icon svg {              width: 24px;              height: 24px;         }          /* FOOTER */        .site-footer {             background-color: #222;             color: #ccc;             padding: 4rem 2rem 2rem;         }                 .footer-grid {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));             gap: 2rem;             padding-bottom: 3rem;             border-bottom: 1px solid #444;         }                 .footer-column h4 {             color: #fff;             font-size: 1.1rem;             margin-bottom: 1rem;         }                 .footer-column ul {             list-style: none;         }                 .footer-column li {             margin-bottom: 0.75rem;         }                 .footer-column a {             color: #ccc;             transition: color 0.3s ease;         }                 .footer-column a:hover {             color: var(--primary-dark-pink);         }                 .footer-bottom {             padding-top: 2rem;             text-align: center;             font-size: 0.9rem;             color: #888;         }          @media (max-width: 768px) {            .site-header {                 padding: 1rem;             }             main {                 padding-top: var(--scroll-padding);             }            .main-nav {                 display: none; /* Simple hiding for mobile, for a real project a menu button is needed */             }             h1 { font-size: 2.2rem; }             h2 { font-size: 1.8rem; }            .container-fluid { padding: 3rem 1rem; }            .step-item {                 flex-direction: column;                 align-items: center;                 text-align: center;             }            .step-content {                 padding-left: 0;             }            .step-number {                 position: static;                 font-size: 2rem;                 opacity: 0.3;             }         }

/* CSS RESET AND FONT SETUP */
        :root {
            --bg-milky-white: #FDFDFD;
            --primary-dark-pink: #E03D84;
            --text-grey: #4A4A4A;
            --surface-powder: #F5E9F0;
            --header-font: 'Manrope', 'Helvetica Neue', 'Segoe UI', 'Roboto', sans-serif;
            --body-font: 'Inter', 'Helvetica', 'Arial', sans-serif;
            --scroll-padding: 80px; /* Header height */
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: var(--scroll-padding);
        }

        body {
            background-color: var(--bg-milky-white);
            color: var(--text-grey);
            font-family: var(--body-font);
            line-height: 1.6;
            font-size: 16px;
            overflow-x: hidden;
        }

        /* TYPOGRAPHY */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--header-font);
            font-weight: 700;
            color: #222;
        }

        h1 {
            font-size: clamp(2.5rem, 6vw, 4.5rem);
            line-height: 1.1;
        }

        h2 {
            font-size: clamp(2rem, 5vw, 2.75rem);
            margin-bottom: 1.5rem;
            color: var(--primary-dark-pink);
        }

        h3 {
            font-size: clamp(1.2rem, 3vw, 1.5rem);
        }

        p {
            margin-bottom: 1.25em;
            max-width: 100%;
        }

        a {
            color: var(--primary-dark-pink);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: #c5296e;
        }
        .container-fluid {
            width: 100%;
            padding: 4rem 2rem;
            margin: 0 auto;
        }
                .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        /* ANIMATIONS */
       .animated-item {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease-out, transform 0.8s ease-out;
        }
        .animated-item.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* HEADER */
       .site-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem 2rem;
            background: rgba(253, 253, 253, 0.85);
            backdrop-filter: blur(10px);
            z-index: 1000;
            height: var(--scroll-padding);
            border-bottom: 1px solid var(--surface-powder);
        }
                .header-content {
            width: 100%;
            max-width: 1200px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .logo {
            font-family: var(--header-font);
            font-size: 1.5rem;
            font-weight: 800;
            color: #222;
        }
       .logo span {
            color: var(--primary-dark-pink);
        }
        .main-nav {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }
        .main-nav a,.dropdown-trigger {
            font-family: var(--header-font);
            font-size: 1rem;
            font-weight: 500;
            color: var(--text-grey);
            padding: 0.5rem 0;
            position: relative;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: color 0.3s ease, border-color 0.3s ease;
        }
        .main-nav a:hover,.dropdown-trigger:hover {
            color: var(--primary-dark-pink);
            border-bottom-color: var(--primary-dark-pink);
        }

        /* DROPDOWN COMPONENT */
       .dropdown {
            position: relative;
        }
       .dropdown-trigger {
            display: flex;
            align-items: center;
            gap: 0.3rem;
        }
       .dropdown-trigger svg {
            width: 12px;
            height: 12px;
            transition: transform 0.3s ease;
        }
       .dropdown-content {
            list-style: none;
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            background-color: var(--bg-milky-white);
            border: 1px solid var(--surface-powder);
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
            min-width: 220px;
            padding: 0.5rem;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
        }
       .dropdown.active .dropdown-content {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
       .dropdown.active .dropdown-trigger svg {
            transform: rotate(180deg);
        }
       .dropdown-content a {
            display: block;
            padding: 0.75rem 1rem;
            color: var(--text-grey);
            font-weight: 400;
            border-radius: 4px;
            white-space: nowrap;
        }
       .dropdown-content a:hover {
            background-color: var(--surface-powder);
            color: var(--primary-dark-pink);
        }

        /* HERO SECTION - REUSED FOR FAQ HEADER */
       .hero-section, .faq-hero-section {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding-top: var(--scroll-padding);
            background-color: var(--bg-milky-white);
            position: relative;
        }
        .faq-hero-section {
            min-height: 50vh;
            padding-top: calc(var(--scroll-padding) + 2rem);
            padding-bottom: 4rem;
        }

        .hero-subtitle {
            font-size: 1.25rem;
            margin: 1.5rem 0 2.5rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        .cta-button {
            display: inline-block;
            background-color: var(--primary-dark-pink);
            color: #fff;
            padding: 1rem 2.5rem;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            box-shadow: 0 4px 15px rgba(224, 61, 132, 0.4);
            font-family: var(--header-font);
        }
       .cta-button:hover {
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(224, 61, 132, 0.5);
        }
        .next-section-peek {
            height: 15vh;
            background: var(--surface-powder);
        }

        /* FAQ SECTION */
       .faq-section {
            background-color: var(--surface-powder);
        }
        #faq-page-content{
             background-color: var(--surface-powder);
             padding-top: 0;
        }
       .faq-container {
            max-width: 800px;
            margin: 0 auto;
            background: var(--bg-milky-white);
            padding: 1rem 2rem;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(0,0,0,0.05);
        }
       .faq-item {
            border-bottom: 1px solid var(--surface-powder);
        }
        .faq-item:last-child {
            border-bottom: none;
        }
       .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.5rem 0;
            cursor: pointer;
        }
       .faq-question h3 {
            font-size: 1.2rem;
            font-weight: 500;
            margin: 0;
        }
       .faq-icon {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
            transition: transform 0.4s ease;
            stroke: var(--primary-dark-pink);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out, padding-bottom 0.5s ease-in-out;
        }
       .faq-answer p {
            padding-bottom: 0;
            margin: 0;
            line-height: 1.7;
        }
       .faq-item.active .faq-answer {
             max-height: 500px; /* Adjust as needed */
             padding-bottom: 1.5rem;
        }
       .faq-item.active .faq-icon {
            transform: rotate(45deg);
        }

        /* FOOTER */
       .site-footer {
            background-color: #222;
            color: #ccc;
            padding: 4rem 2rem 2rem;
        }
                .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid #444;
        }
                .footer-column h4 {
            color: #fff;
            font-size: 1.1rem;
            margin-bottom: 1rem;
        }
                .footer-column ul {
            list-style: none;
        }
                .footer-column li {
            margin-bottom: 0.75rem;
        }
                .footer-column a {
            color: #ccc;
            transition: color 0.3s ease;
        }
                .footer-column a:hover {
            color: var(--primary-dark-pink);
        }
                .footer-bottom {
            padding-top: 2rem;
            text-align: center;
            font-size: 0.9rem;
            color: #888;
        }

        @media (max-width: 768px) {
           .site-header {
                padding: 1rem;
            }
            main {
                padding-top: var(--scroll-padding);
            }
           .main-nav {
                display: none; /* Simple hiding for mobile, for a real project a menu button is needed */
            }
            h1 { font-size: 2.2rem; }
            h2 { font-size: 1.8rem; }
           .container-fluid { padding: 3rem 1rem; }
           .faq-hero-section { min-height: auto; padding-bottom: 2rem; }
           .faq-container { padding: 0.5rem 1rem; }
        }