/* --- Universal Setup & Variables --- */
        :root {
            --color-background: #0A0A0A;
            --color-surface: #1C1C1C;
            --color-accent: #00FF7F;
            --color-text-primary: #F5F5F5;
            --color-text-secondary: #AAAAAA;
            --color-shadow: rgba(0, 255, 127, 0.1);

            --font-heading: 'Georgia', 'Times New Roman', serif;
            --font-body: 'Arial', 'Helvetica', sans-serif;
            
            --transition-fast: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            --transition-medium: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* --- Base & Typography --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--color-background);
            color: var(--color-text-primary);
            font-family: var(--font-body);
            font-size: 16px;
            line-height: 1.7;
            overflow-x: hidden;
        }

        h1, h2, h3, h4 {
            font-family: var(--font-heading);
            color: var(--color-text-primary);
            font-weight: 400;
        }

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

        h2 {
            font-size: clamp(2rem, 5vw, 2.75rem);
            line-height: 1.2;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--color-accent);
            display: inline-block;
        }
        
        h3 {
             font-size: clamp(1.2rem, 3vw, 1.5rem);
             margin-bottom: 0.75rem;
        }

        p {
            margin-bottom: 1.5rem;
            color: var(--color-text-secondary);
        }
        
        a {
            color: var(--color-accent);
            text-decoration: none;
            transition: var(--transition-fast);
        }

        a:hover {
            opacity: 0.8;
        }
        
        .main-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }
        
        section {
            padding: 100px 0;
        }

        .section-label {
            font-family: var(--font-body);
            text-transform: uppercase;
            font-size: 0.8em;
            letter-spacing: 2px;
            color: var(--color-accent);
            margin-bottom: 1rem;
            font-weight: bold;
        }

        /* --- Header & Navigation --- */
        .primary-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            padding: 20px 0;
            background-color: rgba(10, 10, 10, 0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

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

        .logo-link {
            font-family: var(--font-heading);
            font-size: 1.5rem;
            color: var(--color-text-primary);
            font-weight: bold;
        }

        .menu-toggle {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 30px;
            height: 24px;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1002;
        }

        .menu-toggle .bar {
            width: 30px;
            height: 2px;
            background-color: var(--color-text-primary);
            border-radius: 10px;
            transition: all 0.3s ease-in-out;
        }
        
        .menu-toggle.active .bar:nth-child(1) {
            transform: translateY(11px) rotate(45deg);
        }
        .menu-toggle.active .bar:nth-child(2) {
            opacity: 0;
        }
        .menu-toggle.active .bar:nth-child(3) {
            transform: translateY(-11px) rotate(-45deg);
        }

        .nav-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(10, 10, 10, 0.98);
            backdrop-filter: blur(5px);
            z-index: 1001;
            display: flex;
            justify-content: center;
            align-items: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0.4s ease;
        }

        .nav-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .main-nav {
            list-style: none;
            text-align: center;
        }

        .main-nav li {
            margin: 20px 0;
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .nav-overlay.active .main-nav li {
            opacity: 1;
            transform: translateY(0);
        }
        .nav-overlay.active .main-nav li:nth-child(1) { transition-delay: 0.1s; }
        .nav-overlay.active .main-nav li:nth-child(2) { transition-delay: 0.15s; }
        .nav-overlay.active .main-nav li:nth-child(3) { transition-delay: 0.2s; }
        .nav-overlay.active .main-nav li:nth-child(4) { transition-delay: 0.25s; }
        .nav-overlay.active .main-nav li:nth-child(5) { transition-delay: 0.3s; }
        .nav-overlay.active .main-nav li:nth-child(6) { transition-delay: 0.35s; }
        .nav-overlay.active .main-nav li:nth-child(7) { transition-delay: 0.4s; }


        .main-nav a {
            font-family: var(--font-heading);
            font-size: clamp(1.5rem, 5vw, 2.5rem);
            color: var(--color-text-primary);
        }
        
        .main-nav .nav-label {
            font-family: var(--font-body);
            text-transform: uppercase;
            font-size: 0.8rem;
            letter-spacing: 2px;
            color: var(--color-accent);
            margin-top: 30px;
            margin-bottom: 0px;
        }

        /* --- Hero Section --- */
        .hero-section {
            padding-top: 180px;
            padding-bottom: 120px;
            min-height: 90vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }
        
        .hero-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 800px;
            height: 800px;
            background: radial-gradient(circle, rgba(0, 255, 127, 0.1), transparent 60%);
            z-index: -1;
            pointer-events: none;
        }

        .hero-content {
            text-align: center;
            max-width: 900px;
            margin: 0 auto;
        }

        .hero-content h1 {
            color: var(--color-text-primary);
        }

        .hero-content .subtitle {
            font-size: 1.2rem;
            max-width: 600px;
            margin: 1.5rem auto 2.5rem;
            color: var(--color-text-secondary);
        }

        .cta-group {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            flex-wrap: wrap;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 35px;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: var(--transition-medium);
            border: 2px solid transparent;
        }

        .cta-button-primary {
            background-color: var(--color-accent);
            color: var(--color-background);
        }

        .cta-button-primary:hover {
            background-color: transparent;
            color: var(--color-accent);
            border-color: var(--color-accent);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 255, 127, 0.2);
        }

        .cta-button-secondary {
            background-color: transparent;
            color: var(--color-text-primary);
            border: 2px solid var(--color-surface);
        }

        .cta-button-secondary:hover {
            background-color: var(--color-surface);
            color: var(--color-text-primary);
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(42, 42, 42, 0.3);
        }

        /* --- Sections & Cards --- */
        .floating-card {
            background-color: var(--color-surface);
            padding: 30px;
            border-radius: 16px;
            box-shadow: 0 15px 30px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05);
            transition: var(--transition-medium);
            position: relative;
            overflow: hidden;
        }

        .floating-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(0, 255, 127, 0.2);
        }

        /* --- Advantages Section --- */
        .advantages-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .advantage-card .icon-container {
            width: 60px;
            height: 60px;
            background-color: rgba(0, 255, 127, 0.1);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
        }
        
        .advantage-card .icon-container svg {
            width: 32px;
            height: 32px;
            stroke: var(--color-accent);
        }

        /* --- Article Section --- */
        .article-wrapper {
            background: linear-gradient(180deg, var(--color-background) 0%, var(--color-surface) 15%, var(--color-surface) 85%, var(--color-background) 100%);
        }
        
        .article-container {
            background-color: var(--color-surface);
            padding: 50px 40px;
            border-radius: 20px;
        }
        
        .article-intro {
            text-align: center;
            margin-bottom: 4rem;
        }
        
        .article-intro .section-heading {
             font-family: var(--font-heading);
             font-size: clamp(2rem, 5vw, 2.75rem);
             line-height: 1.2;
             margin-bottom: 1rem;
             color: var(--color-text-primary);
        }
        
        .article-intro p {
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .article-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .article-content h2 {
            margin-top: 3rem;
            margin-bottom: 1.5rem;
        }
        
        .article-content img {
            width: 100%;
            height: auto;
            border-radius: 12px;
            margin: 2rem 0;
        }

        .article-content ul, .article-content ol {
            padding-left: 20px;
            margin-bottom: 1.5rem;
            color: var(--color-text-secondary);
        }
        
        .article-content li {
            margin-bottom: 0.75rem;
        }
        
        .article-content strong {
            color: var(--color-text-primary);
            font-weight: 600;
        }
        
        .article-content table {
            width: 100%;
            border-collapse: collapse;
            margin: 2rem 0;
            background-color: rgba(10, 10, 10, 0.2);
        }

        .article-content th, .article-content td {
            text-align: left;
            padding: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .article-content th {
            font-family: var(--font-body);
            text-transform: uppercase;
            font-size: 0.8em;
            letter-spacing: 1px;
            color: var(--color-accent);
        }

        /* --- Product Composition --- */
        .composition-grid {
            margin-top: 3rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            align-items: center;
            gap: 4rem;
        }

        .composition-list ul {
            list-style: none;
        }

        .composition-list li {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
            font-size: 1.1rem;
        }

        .composition-list .item-icon {
            width: 24px;
            height: 24px;
            stroke: var(--color-accent);
            margin-right: 1rem;
        }
        
        .composition-visual {
            background: var(--color-surface);
            border-radius: 16px;
            padding: 3rem;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .composition-visual svg {
           width: 70%;
           max-width: 250px;
           height: auto;
           filter: drop-shadow(0 0 20px var(--color-shadow));
        }

        @media (max-width: 768px) {
            .composition-grid {
                grid-template-columns: 1fr;
            }
        }

        /* --- Testimonials Section --- */
        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }
        
        .testimonial-card {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .testimonial-card .testimonial-text {
            flex-grow: 1;
        }
        
        .testimonial-footer {
            display: flex;
            align-items: center;
            margin-top: 2rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .testimonial-footer img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 1rem;
            border: 2px solid var(--color-accent);
        }
        
        .testimonial-info .name {
            font-weight: bold;
            color: var(--color-text-primary);
        }
        
        .testimonial-info .detail {
            font-size: 0.9rem;
            color: var(--color-text-secondary);
        }

        /* --- FAQ Section --- */
        .faq-container {
            max-width: 800px;
            margin: 3rem auto 0;
        }
        .faq-item {
            background-color: var(--color-surface);
            border-radius: 12px;
            margin-bottom: 1rem;
            overflow: hidden;
            transition: var(--transition-medium);
        }
        
        .faq-question {
            width: 100%;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            background: none;
            border: none;
            text-align: left;
            font-size: 1.1rem;
            font-family: var(--font-body);
            font-weight: bold;
            color: var(--color-text-primary);
        }
        
        .faq-question:hover {
            color: var(--color-accent);
        }
        
        .faq-icon {
            width: 24px;
            height: 24px;
            stroke: var(--color-text-secondary);
            transition: var(--transition-fast);
            flex-shrink: 0;
            margin-left: 20px;
        }
        
        .faq-item.active .faq-icon {
            transform: rotate(45deg);
            stroke: var(--color-accent);
        }
        
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
        }

        .faq-answer p {
            padding: 0 30px 20px;
            margin-bottom: 0;
        }

        .faq-item.active .faq-answer {
            max-height: 500px; /* Adjust as needed */
            transition: max-height 1s ease-in-out;
        }

        /* --- How It Works Section --- */
        .how-it-works-steps {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
            position: relative;
        }
        
        .step-card {
            text-align: center;
            padding: 30px;
        }
        
        .step-number {
            display: inline-flex;
            width: 60px;
            height: 60px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: var(--color-background);
            border: 2px solid var(--color-accent);
            font-family: var(--font-heading);
            font-size: 1.5rem;
            color: var(--color-accent);
            margin-bottom: 1.5rem;
            box-shadow: 0 0 15px var(--color-shadow);
        }
        
        .step-card h3 {
             color: var(--color-text-primary);
        }

        /* --- Footer --- */
        .primary-footer {
            background-color: #000;
            padding: 80px 0 40px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-bottom: 4rem;
        }
        
        .footer-column .column-title {
            font-family: var(--font-body);
            text-transform: uppercase;
            font-size: 0.9em;
            letter-spacing: 1.5px;
            color: var(--color-accent);
            margin-bottom: 1.5rem;
            font-weight: bold;
        }
        
        .footer-column ul {
            list-style: none;
        }
        
        .footer-column li {
            margin-bottom: 1rem;
        }
        
        .footer-column a {
            color: var(--color-text-secondary);
        }
        .footer-column a:hover {
            color: var(--color-text-primary);
        }
        
        .footer-brand {
            grid-column: 1 / -1;
            text-align: center;
            margin-bottom: 2rem;
        }
        
        @media (min-width: 768px) {
            .footer-brand {
                grid-column: 1 / 2;
                text-align: left;
            }
        }
        
        .footer-brand .logo-link {
            font-size: 2rem;
            margin-bottom: 1rem;
            display: block;
        }
        
        .footer-brand p {
            max-width: 300px;
            margin-bottom: 0;
            font-size: 0.9rem;
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .footer-bottom p {
            color: var(--color-text-secondary);
            font-size: 0.8rem;
            margin-bottom: 0;
        }

        /* --- Animation --- */
        .animate-on-scroll {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

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


/* --- Universal Setup & Variables --- */         :root {             --color-background: #0A0A0A;             --color-surface: #1C1C1C;             --color-accent: #00FF7F;             --color-text-primary: #F5F5F5;             --color-text-secondary: #AAAAAA;             --color-shadow: rgba(0, 255, 127, 0.1);              --font-heading: 'Georgia', 'Times New Roman', serif;             --font-body: 'Arial', 'Helvetica', sans-serif;                          --transition-fast: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);             --transition-medium: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);         }          /* --- Base & Typography --- */         * {             margin: 0;             padding: 0;             box-sizing: border-box;         }          html {             scroll-behavior: smooth;         }          body {             background-color: var(--color-background);             color: var(--color-text-primary);             font-family: var(--font-body);             font-size: 16px;             line-height: 1.7;             overflow-x: hidden;         }          h1, h2, h3, h4 {             font-family: var(--font-heading);             color: var(--color-text-primary);             font-weight: 400;         }          h1 {             font-size: clamp(2.5rem, 6vw, 4.5rem);             line-height: 1.1;         }          h2 {             font-size: clamp(2rem, 5vw, 2.75rem);             line-height: 1.2;             margin-bottom: 1rem;             padding-bottom: 0.5rem;             border-bottom: 1px solid var(--color-accent);             display: inline-block;         }                  h3 {              font-size: clamp(1.2rem, 3vw, 1.5rem);              margin-bottom: 0.75rem;         }          p {             margin-bottom: 1.5rem;             color: var(--color-text-secondary);         }                  a {             color: var(--color-accent);             text-decoration: none;             transition: var(--transition-fast);         }          a:hover {             opacity: 0.8;         }                 .main-container {             width: 100%;             max-width: 1200px;             margin: 0 auto;             padding: 0 20px;         }                  section {             padding: 100px 0;         }         .section-label {             font-family: var(--font-body);             text-transform: uppercase;             font-size: 0.8em;             letter-spacing: 2px;             color: var(--color-accent);             margin-bottom: 1rem;             font-weight: bold;         }          /* --- Header & Navigation --- */        .primary-header {             position: fixed;             top: 0;             left: 0;             width: 100%;             z-index: 1000;             padding: 20px 0;             background-color: rgba(10, 10, 10, 0.8);             backdrop-filter: blur(10px);             -webkit-backdrop-filter: blur(10px);             border-bottom: 1px solid rgba(255, 255, 255, 0.1);         }         .header-container {             display: flex;             justify-content: space-between;             align-items: center;         }         .logo-link {             font-family: var(--font-heading);             font-size: 1.5rem;             color: var(--color-text-primary);             font-weight: bold;         }         .menu-toggle {             display: flex;             flex-direction: column;             justify-content: space-around;             width: 30px;             height: 24px;             background: transparent;             border: none;             cursor: pointer;             padding: 0;             z-index: 1002;         }         .menu-toggle .bar {             width: 30px;             height: 2px;             background-color: var(--color-text-primary);             border-radius: 10px;             transition: all 0.3s ease-in-out;         }                 .menu-toggle.active .bar:nth-child(1) {             transform: translateY(11px) rotate(45deg);         }        .menu-toggle.active .bar:nth-child(2) {             opacity: 0;         }        .menu-toggle.active .bar:nth-child(3) {             transform: translateY(-11px) rotate(-45deg);         }         .nav-overlay {             position: fixed;             top: 0;             left: 0;             width: 100%;             height: 100%;             background-color: rgba(10, 10, 10, 0.98);             backdrop-filter: blur(5px);             z-index: 1001;             display: flex;             justify-content: center;             align-items: center;             opacity: 0;             visibility: hidden;             transition: opacity 0.4s ease, visibility 0.4s ease;         }         .nav-overlay.active {             opacity: 1;             visibility: visible;         }         .main-nav {             list-style: none;             text-align: center;         }         .main-nav li {             margin: 20px 0;             opacity: 0;             transform: translateY(20px);             transition: opacity 0.4s ease, transform 0.4s ease;         }         .nav-overlay.active .main-nav li {             opacity: 1;             transform: translateY(0);         }        .nav-overlay.active .main-nav li:nth-child(1) { transition-delay: 0.1s; }        .nav-overlay.active .main-nav li:nth-child(2) { transition-delay: 0.15s; }        .nav-overlay.active .main-nav li:nth-child(3) { transition-delay: 0.2s; }        .nav-overlay.active .main-nav li:nth-child(4) { transition-delay: 0.25s; }        .nav-overlay.active .main-nav li:nth-child(5) { transition-delay: 0.3s; }        .nav-overlay.active .main-nav li:nth-child(6) { transition-delay: 0.35s; }        .nav-overlay.active .main-nav li:nth-child(7) { transition-delay: 0.4s; }          .main-nav a {             font-family: var(--font-heading);             font-size: clamp(1.5rem, 5vw, 2.5rem);             color: var(--color-text-primary);         }                 .main-nav .nav-label {             font-family: var(--font-body);             text-transform: uppercase;             font-size: 0.8rem;             letter-spacing: 2px;             color: var(--color-accent);             margin-top: 30px;             margin-bottom: 0px;         }          /* --- Hero Section --- */        .hero-section {             padding-top: 180px;             padding-bottom: 120px;             min-height: 90vh;             display: flex;             align-items: center;             position: relative;             overflow: hidden;         }                 .hero-section::before {             content: '';             position: absolute;             top: 0;             left: 50%;             transform: translateX(-50%);             width: 800px;             height: 800px;             background: radial-gradient(circle, rgba(0, 255, 127, 0.1), transparent 60%);             z-index: -1;             pointer-events: none;         }         .hero-content {             text-align: center;             max-width: 900px;             margin: 0 auto;         }         .hero-content h1 {             color: var(--color-text-primary);         }         .hero-content .subtitle {             font-size: 1.2rem;             max-width: 600px;             margin: 1.5rem auto 2.5rem;             color: var(--color-text-secondary);         }         .cta-group {             display: flex;             justify-content: center;             gap: 1.5rem;             flex-wrap: wrap;         }         .cta-button {             display: inline-block;             padding: 15px 35px;             border-radius: 50px;             font-size: 1rem;             font-weight: bold;             text-transform: uppercase;             letter-spacing: 1px;             transition: var(--transition-medium);             border: 2px solid transparent;         }         .cta-button-primary {             background-color: var(--color-accent);             color: var(--color-background);         }         .cta-button-primary:hover {             background-color: transparent;             color: var(--color-accent);             border-color: var(--color-accent);             transform: translateY(-3px);             box-shadow: 0 10px 20px rgba(0, 255, 127, 0.2);         }         .cta-button-secondary {             background-color: transparent;             color: var(--color-text-primary);             border: 2px solid var(--color-surface);         }         .cta-button-secondary:hover {             background-color: var(--color-surface);             color: var(--color-text-primary);             transform: translateY(-3px);             box-shadow: 0 10px 20px rgba(42, 42, 42, 0.3);         }          /* --- Sections & Cards --- */        .floating-card {             background-color: var(--color-surface);             padding: 30px;             border-radius: 16px;             box-shadow: 0 15px 30px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05);             transition: var(--transition-medium);             position: relative;             overflow: hidden;         }         .floating-card:hover {             transform: translateY(-10px);             box-shadow: 0 25px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(0, 255, 127, 0.2);         }          /* --- Advantages Section --- */        .advantages-grid {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));             gap: 2rem;             margin-top: 3rem;         }         .advantage-card .icon-container {             width: 60px;             height: 60px;             background-color: rgba(0, 255, 127, 0.1);             border-radius: 12px;             display: flex;             align-items: center;             justify-content: center;             margin-bottom: 1.5rem;         }                 .advantage-card .icon-container svg {             width: 32px;             height: 32px;             stroke: var(--color-accent);         }          /* --- Article Section --- */        .article-wrapper {             background: linear-gradient(180deg, var(--color-background) 0%, var(--color-surface) 15%, var(--color-surface) 85%, var(--color-background) 100%);         }                 .article-container {             background-color: var(--color-surface);             padding: 50px 40px;             border-radius: 20px;         }                 .article-intro {             text-align: center;             margin-bottom: 4rem;         }                 .article-intro .section-heading {              font-family: var(--font-heading);              font-size: clamp(2rem, 5vw, 2.75rem);              line-height: 1.2;              margin-bottom: 1rem;              color: var(--color-text-primary);         }                 .article-intro p {             max-width: 700px;             margin-left: auto;             margin-right: auto;         }                 .article-content {             max-width: 800px;             margin: 0 auto;         }         .article-content h2 {             margin-top: 3rem;             margin-bottom: 1.5rem;         }                 .article-content img {             width: 100%;             height: auto;             border-radius: 12px;             margin: 2rem 0;         }         .article-content ul,.article-content ol {             padding-left: 20px;             margin-bottom: 1.5rem;             color: var(--color-text-secondary);         }                 .article-content li {             margin-bottom: 0.75rem;         }                 .article-content strong {             color: var(--color-text-primary);             font-weight: 600;         }                 .article-content table {             width: 100%;             border-collapse: collapse;             margin: 2rem 0;             background-color: rgba(10, 10, 10, 0.2);         }         .article-content th,.article-content td {             text-align: left;             padding: 15px;             border-bottom: 1px solid rgba(255, 255, 255, 0.1);         }         .article-content th {             font-family: var(--font-body);             text-transform: uppercase;             font-size: 0.8em;             letter-spacing: 1px;             color: var(--color-accent);         }          /* --- Product Composition --- */        .composition-grid {             margin-top: 3rem;             display: grid;             grid-template-columns: 1fr 1fr;             align-items: center;             gap: 4rem;         }         .composition-list ul {             list-style: none;         }         .composition-list li {             display: flex;             align-items: center;             margin-bottom: 1.5rem;             font-size: 1.1rem;         }         .composition-list .item-icon {             width: 24px;             height: 24px;             stroke: var(--color-accent);             margin-right: 1rem;         }                 .composition-visual {             background: var(--color-surface);             border-radius: 16px;             padding: 3rem;             position: relative;             display: flex;             align-items: center;             justify-content: center;         }                 .composition-visual svg {            width: 70%;            max-width: 250px;            height: auto;            filter: drop-shadow(0 0 20px var(--color-shadow));         }          @media (max-width: 768px) {            .composition-grid {                 grid-template-columns: 1fr;             }         }          /* --- Testimonials Section --- */        .testimonials-grid {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));             gap: 2rem;             margin-top: 3rem;         }                 .testimonial-card {             display: flex;             flex-direction: column;             justify-content: space-between;         }                 .testimonial-card .testimonial-text {             flex-grow: 1;         }                 .testimonial-footer {             display: flex;             align-items: center;             margin-top: 2rem;             padding-top: 1.5rem;             border-top: 1px solid rgba(255, 255, 255, 0.1);         }                 .testimonial-footer img {             width: 50px;             height: 50px;             border-radius: 50%;             margin-right: 1rem;             border: 2px solid var(--color-accent);         }                 .testimonial-info .name {             font-weight: bold;             color: var(--color-text-primary);         }                 .testimonial-info .detail {             font-size: 0.9rem;             color: var(--color-text-secondary);         }          /* --- FAQ Section --- */        .faq-container {             max-width: 800px;             margin: 3rem auto 0;         }        .faq-item {             background-color: var(--color-surface);             border-radius: 12px;             margin-bottom: 1rem;             overflow: hidden;             transition: var(--transition-medium);         }                 .faq-question {             width: 100%;             padding: 20px 30px;             display: flex;             justify-content: space-between;             align-items: center;             cursor: pointer;             background: none;             border: none;             text-align: left;             font-size: 1.1rem;             font-family: var(--font-body);             font-weight: bold;             color: var(--color-text-primary);         }                 .faq-question:hover {             color: var(--color-accent);         }                 .faq-icon {             width: 24px;             height: 24px;             stroke: var(--color-text-secondary);             transition: var(--transition-fast);             flex-shrink: 0;             margin-left: 20px;         }                 .faq-item.active .faq-icon {             transform: rotate(45deg);             stroke: var(--color-accent);         }                 .faq-answer {             max-height: 0;             overflow: hidden;             transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);         }         .faq-answer p {             padding: 0 30px 20px;             margin-bottom: 0;         }         .faq-item.active .faq-answer {             max-height: 500px; /* Adjust as needed */             transition: max-height 1s ease-in-out;         }          /* --- How It Works Section --- */        .how-it-works-steps {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));             gap: 2rem;             margin-top: 3rem;             position: relative;         }                 .step-card {             text-align: center;             padding: 30px;         }                 .step-number {             display: inline-flex;             width: 60px;             height: 60px;             align-items: center;             justify-content: center;             border-radius: 50%;             background-color: var(--color-background);             border: 2px solid var(--color-accent);             font-family: var(--font-heading);             font-size: 1.5rem;             color: var(--color-accent);             margin-bottom: 1.5rem;             box-shadow: 0 0 15px var(--color-shadow);         }                 .step-card h3 {              color: var(--color-text-primary);         }          /* --- Footer --- */        .primary-footer {             background-color: #000;             padding: 80px 0 40px;             border-top: 1px solid rgba(255, 255, 255, 0.1);         }                 .footer-grid {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));             gap: 2rem;             margin-bottom: 4rem;         }                 .footer-column .column-title {             font-family: var(--font-body);             text-transform: uppercase;             font-size: 0.9em;             letter-spacing: 1.5px;             color: var(--color-accent);             margin-bottom: 1.5rem;             font-weight: bold;         }                 .footer-column ul {             list-style: none;         }                 .footer-column li {             margin-bottom: 1rem;         }                 .footer-column a {             color: var(--color-text-secondary);         }        .footer-column a:hover {             color: var(--color-text-primary);         }                 .footer-brand {             grid-column: 1 / -1;             text-align: center;             margin-bottom: 2rem;         }                  @media (min-width: 768px) {            .footer-brand {                 grid-column: 1 / 2;                 text-align: left;             }         }                 .footer-brand .logo-link {             font-size: 2rem;             margin-bottom: 1rem;             display: block;         }                 .footer-brand p {             max-width: 300px;             margin-bottom: 0;             font-size: 0.9rem;         }                 .footer-bottom {             text-align: center;             padding-top: 2rem;             border-top: 1px solid rgba(255, 255, 255, 0.1);         }                 .footer-bottom p {             color: var(--color-text-secondary);             font-size: 0.8rem;             margin-bottom: 0;         }          /* --- Animation --- */        .animate-on-scroll {             opacity: 0;             transform: translateY(30px);             transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);         }         .animate-on-scroll.is-visible {             opacity: 1;             transform: translateY(0);         }

.faq-page-content {
            padding-top: 60px;
            padding-bottom: 100px;
        }
        .hero-section.faq-hero {
            min-height: 60vh;
            padding-bottom: 60px;
            text-align: center;
        }
        .hero-section .cta-group {
            margin-top: 3rem;
        }
        .faq-page-content .faq-container {
            margin-top: 2rem;
        }
        .faq-page-content h2 {
            text-align: center;
        }
        .cta-banner-section {
            background-color: var(--color-surface);
            padding: 80px 0;
            text-align: center;
        }
        .cta-banner-section h2 {
            border: none;
            margin-bottom: 2rem;
        }

.article-feature-image {

            width: 100%;

            height: auto;

            border-radius: 16px;

            margin-bottom: 2rem;

            display: block;

        }

        .hero-section .cta-group {

            display: none;

        }


.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
}

.blog-post-card {
    background-color: var(--color-surface);
    border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.05);
    transition: var(--transition-medium);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.blog-post-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.3), 0 0 0 1px rgba(0, 255, 127, 0.2);
}

.blog-post-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: var(--transition-fast);
}

.blog-post-card:hover .blog-post-card-image {
    transform: scale(1.05);
}

.blog-post-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-post-card-content h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    margin-top: 0;
    font-family: var(--font-heading);
}

.blog-post-card-content h3 a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.blog-post-card-content h3 a:hover {
    color: var(--color-accent);
    opacity: 1;
}

.blog-post-card-content p {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.read-more-link {
    font-weight: bold;
    color: var(--color-accent);
    text-decoration: none;
    align-self: flex-start;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}