:root {
            --bg-dark-blue: #0a192f;
            --accent-sky-blue: #64ffda;
            --accent-steel: #8892b0;
            --text-light: #ccd6f6;
            --text-white: #e6f1ff;
            --card-surface: #112240;
            --font-main: 'SF Pro Display', 'Roboto', 'Arial', sans-serif;
            --font-headings: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;
        }

        /* --- Base & Reset --- */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
            font-size: 16px;
        }

        body {
            background-color: var(--bg-dark-blue);
            color: var(--text-light);
            font-family: var(--font-main);
            font-weight: 400;
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* --- Typography --- */
        h1, h2, h3, h4, h5, h6 {
            font-family: var(--font-headings);
            color: var(--text-white);
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 1.25rem;
        }

        h1 {
            font-size: clamp(2.5rem, 5vw, 4.5rem);
            font-weight: 800;
        }

        h2 {
            font-size: clamp(1.75rem, 4vw, 2.5rem);
            position: relative;
            padding-bottom: 0.5rem;
        }
        
        h2::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: var(--accent-sky-blue);
        }

        p {
            margin-bottom: 1rem;
            max-width: 100%; /* No max-width restriction */
        }
        
        a {
            color: var(--accent-sky-blue);
            text-decoration: none;
            transition: color 0.3s ease;
        }

        a:hover {
            color: var(--text-white);
        }

        /* --- Layout --- */
        .cosmic-container {
            width: 90%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 6rem 0;
        }

        /* --- Header --- */
        .galaxy-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1rem 5%;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: rgba(10, 25, 47, 0.85);
            backdrop-filter: blur(10px);
            transition: top 0.3s ease;
        }
        
        .galaxy-header.header-scrolled {
            box-shadow: 0 5px 20px rgba(2, 12, 27, 0.7);
        }

        .org-brand {
            font-family: var(--font-headings);
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--text-white);
        }
        .org-brand span {
            color: var(--accent-sky-blue);
        }

        .stellar-nav ul {
            display: flex;
            list-style: none;
            gap: 1.5rem;
        }

        .stellar-nav a {
            font-family: var(--font-headings);
            font-weight: 500;
            text-transform: uppercase;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            color: var(--text-light);
            position: relative;
            padding-bottom: 5px;
        }
        
        .stellar-nav a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--accent-sky-blue);
            transition: width 0.3s ease;
        }

        .stellar-nav a:hover::after {
            width: 100%;
        }

        .mobile-nav-toggle {
            display: none;
        }

        /* --- Hero Section --- */
        #hero-nexus {
            min-height: 100vh;
            display: flex;
            align-items: center;
            padding-top: 80px;
        }
        
        .hero-content {
            max-width: 750px;
        }
        
        .hero-content .pre-title {
            color: var(--accent-sky-blue);
            font-family: var(--font-headings);
            font-weight: 500;
            margin-bottom: 1rem;
        }
        
        .hero-content p {
            font-size: 1.1rem;
            max-width: 600px;
            margin: 1.5rem 0 2.5rem;
        }

        .cta-button {
            display: inline-block;
            background-color: var(--accent-sky-blue);
            color: var(--bg-dark-blue);
            padding: 1rem 2.5rem;
            font-family: var(--font-headings);
            font-weight: 600;
            font-size: 1rem;
            border: 2px solid var(--accent-sky-blue);
            border-radius: 4px;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        .cta-button:hover {
            background-color: transparent;
            color: var(--accent-sky-blue);
        }

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

        .benefit-card {
            background-color: var(--card-surface);
            padding: 2.5rem 2rem;
            border-radius: 8px;
            border: 1px solid #1d2f50;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            text-align: center;
        }

        .benefit-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
        }
        
        .card-icon {
            margin-bottom: 1.5rem;
            color: var(--accent-sky-blue);
            width: 48px;
            height: 48px;
        }

        .benefit-card h3 {
            font-size: 1.25rem;
            color: var(--text-white);
            margin-bottom: 0.5rem;
        }

        .benefit-card p {
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 1.5rem;
        }
        
        .card-cta {
            font-weight: 600;
        }

        /* --- Article Section --- */
        #article-feature .article-container {
            background: linear-gradient(145deg, var(--card-surface), #132749);
            padding: 3rem;
            border-radius: 8px;
            border: 1px solid #1d2f50;
            margin-top: 3rem;
        }

        #article-feature h2 {
            margin-top: 2.5rem;
            margin-bottom: 1.5rem;
            font-size: 1.7rem;
            color: var(--text-white);
        }
        
        #article-feature h2:first-of-type {
            margin-top: 0;
        }

        #article-feature p {
            color: var(--text-light);
            margin-bottom: 1.5rem;
        }
        
        #article-feature ul, #article-feature ol {
            margin-left: 20px;
            margin-bottom: 1.5rem;
        }
        
        #article-feature li {
            margin-bottom: 0.75rem;
        }
        
        #article-feature b, #article-feature strong {
            color: var(--text-white);
            font-weight: 600;
        }

        #article-feature img {
            width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 1.5rem 0;
            border: 1px solid var(--accent-steel);
        }
        
        #article-feature table {
            width: 100%;
            border-collapse: collapse;
            margin: 2rem 0;
            font-size: 0.95rem;
        }

        #article-feature th, #article-feature td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid #1d2f50;
        }

        #article-feature th {
            color: var(--text-white);
            background-color: #1d2f50;
            font-weight: 600;
        }
        
        #article-feature td {
            vertical-align: top;
        }
        
        #article-feature tr:last-child td {
            border-bottom: none;
        }

        /* --- What's Included Section --- */
        #whats-included {
            background-color: var(--card-surface);
        }
        #whats-included .cosmic-container {
            display: flex;
            gap: 3rem;
            align-items: center;
        }
        .package-content, .package-visual {
            flex: 1;
        }
        .package-visual {
            text-align: center;
            padding: 2rem;
            border: 2px dashed var(--accent-steel);
            border-radius: 8px;
            position: relative;
        }
        .package-visual::before {
            content: 'Ledger Nano X';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 2rem;
            font-weight: 700;
            color: var(--accent-steel);
            opacity: 0.5;
            z-index: 1;
        }
        .package-content ul {
            list-style: none;
            margin-top: 2rem;
        }
        .package-content li {
            padding-left: 2rem;
            position: relative;
            margin-bottom: 1rem;
            font-size: 1.1rem;
        }
        .package-content li::before {
            content: '✓';
            color: var(--accent-sky-blue);
            position: absolute;
            left: 0;
            top: 0;
            font-weight: bold;
        }

        /* --- Step-by-step Process --- */
        .step-card {
            background-color: var(--card-surface);
            padding: 2rem;
            border-radius: 8px;
            position: relative;
            border: 1px solid transparent;
            transition: border-color 0.3s ease;
        }

        .step-card:hover {
            border-color: var(--accent-sky-blue);
        }

        .step-number {
            position: absolute;
            top: 1rem;
            left: 1.5rem;
            font-size: 3rem;
            font-weight: 800;
            color: var(--bg-dark-blue);
            -webkit-text-stroke: 1px var(--accent-steel);
            opacity: 0.5;
            z-index: 0;
        }
        
        .step-card h3 {
            font-size: 1.2rem;
            margin-top: 1.5rem;
            position: relative;
            z-index: 1;
        }
        
        .step-card p {
            font-size: 0.9rem;
            margin-bottom: 0;
             position: relative;
            z-index: 1;
        }

        /* --- FAQ Section --- */
        #faq-section {
            background-color: var(--card-surface);
        }
        .faq-item {
            border-bottom: 1px solid #1d2f50;
            padding: 1.5rem 0;
        }
        .faq-item:last-child {
            border-bottom: none;
        }
        .faq-question {
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--text-white);
        }
        .faq-question::after {
            content: '+';
            font-size: 2rem;
            color: var(--accent-sky-blue);
            transition: transform 0.3s ease;
        }
        .faq-item.active .faq-question::after {
            transform: rotate(45deg);
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease-in-out;
        }
        .faq-answer p {
            padding-top: 1rem;
            margin-bottom: 0;
        }


        /* --- Testimonials Section --- */
        .testimonial-card {
            background-color: var(--card-surface);
            padding: 2rem;
            border-radius: 8px;
            border-left: 4px solid var(--accent-sky-blue);
        }
        
        .testimonial-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .testimonial-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 1rem;
            border: 2px solid var(--accent-steel);
        }
        .testimonial-author h4 {
            margin: 0;
            font-size: 1.1rem;
            color: var(--text-white);
        }
        .testimonial-author span {
            font-size: 0.9rem;
            color: var(--accent-steel);
        }
        .testimonial-card p {
            font-style: italic;
            margin-bottom: 0;
        }


        /* --- Footer --- */
        .nebula-footer {
            background-color: #081428;
            padding: 4rem 5%;
            font-size: 0.9rem;
            border-top: 2px solid var(--accent-sky-blue);
        }
        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }
        .footer-column h4 {
            font-size: 1.1rem;
            margin-bottom: 1.5rem;
            color: var(--text-white);
            font-weight: 600;
        }
        .footer-column ul {
            list-style: none;
        }
        .footer-column li {
            margin-bottom: 0.75rem;
        }
        .footer-column a {
            color: var(--accent-steel);
        }
        .footer-column a:hover {
            color: var(--accent-sky-blue);
            padding-left: 5px;
        }
        .footer-bottom {
            text-align: center;
            padding-top: 2rem;
            border-top: 1px solid #1d2f50;
            color: var(--accent-steel);
        }
        
        /* --- Animation Utility --- */
        .reveal-element {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .reveal-element.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Responsive Styles --- */
        @media (max-width: 768px) {
            h1 { font-size: 2.2rem; }
            h2 { font-size: 1.5rem; }

            .stellar-nav {
                position: fixed;
                top: 0;
                right: -100%;
                width: 70%;
                height: 100vh;
                background-color: var(--card-surface);
                flex-direction: column;
                justify-content: center;
                align-items: center;
                transition: right 0.5s ease;
            }
            
            .stellar-nav.active {
                right: 0;
            }
            
            .stellar-nav ul {
                flex-direction: column;
                text-align: center;
                gap: 2.5rem;
            }

            .mobile-nav-toggle {
                display: block;
                z-index: 1001;
                cursor: pointer;
                background: none;
                border: none;
                padding: 0;
            }
            
            .hamburger {
                width: 30px;
                height: 22px;
                position: relative;
            }
            
            .hamburger span {
                display: block;
                position: absolute;
                height: 3px;
                width: 100%;
                background: var(--text-white);
                border-radius: 3px;
                opacity: 1;
                left: 0;
                transform: rotate(0deg);
                transition: .25s ease-in-out;
            }
            
            .hamburger span:nth-child(1) { top: 0px; }
            .hamburger span:nth-child(2), .hamburger span:nth-child(3) { top: 9px; }
            .hamburger span:nth-child(4) { top: 18px; }
            
            .mobile-nav-toggle.is-active .hamburger span:nth-child(1) { top: 9px; width: 0%; left: 50%; }
            .mobile-nav-toggle.is-active .hamburger span:nth-child(2) { transform: rotate(45deg); }
            .mobile-nav-toggle.is-active .hamburger span:nth-child(3) { transform: rotate(-45deg); }
            .mobile-nav-toggle.is-active .hamburger span:nth-child(4) { top: 9px; width: 0%; left: 50%; }

            #whats-included .cosmic-container {
                flex-direction: column;
            }
        }


:root {             --bg-dark-blue: #0a192f;             --accent-sky-blue: #64ffda;             --accent-steel: #8892b0;             --text-light: #ccd6f6;             --text-white: #e6f1ff;             --card-surface: #112240;             --font-main: 'SF Pro Display', 'Roboto', 'Arial', sans-serif;             --font-headings: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;         }          /* --- Base & Reset --- */         *, *::before, *::after {             box-sizing: border-box;             margin: 0;             padding: 0;         }          html {             scroll-behavior: smooth;             font-size: 16px;         }          body {             background-color: var(--bg-dark-blue);             color: var(--text-light);             font-family: var(--font-main);             font-weight: 400;             line-height: 1.6;             -webkit-font-smoothing: antialiased;             -moz-osx-font-smoothing: grayscale;         }          /* --- Typography --- */         h1, h2, h3, h4, h5, h6 {             font-family: var(--font-headings);             color: var(--text-white);             font-weight: 700;             line-height: 1.2;             margin-bottom: 1.25rem;         }          h1 {             font-size: clamp(2.5rem, 5vw, 4.5rem);             font-weight: 800;         }          h2 {             font-size: clamp(1.75rem, 4vw, 2.5rem);             position: relative;             padding-bottom: 0.5rem;         }                  h2::after {             content: '';             position: absolute;             bottom: 0;             left: 0;             width: 50px;             height: 3px;             background-color: var(--accent-sky-blue);         }          p {             margin-bottom: 1rem;             max-width: 100%; /* No max-width restriction */         }                  a {             color: var(--accent-sky-blue);             text-decoration: none;             transition: color 0.3s ease;         }          a:hover {             color: var(--text-white);         }          /* --- Layout --- */        .cosmic-container {             width: 90%;             max-width: 1100px;             margin: 0 auto;             padding: 6rem 0;         }          /* --- Header --- */        .galaxy-header {             position: fixed;             top: 0;             left: 0;             width: 100%;             padding: 1rem 5%;             z-index: 1000;             display: flex;             justify-content: space-between;             align-items: center;             background-color: rgba(10, 25, 47, 0.85);             backdrop-filter: blur(10px);             transition: top 0.3s ease;         }                 .galaxy-header.header-scrolled {             box-shadow: 0 5px 20px rgba(2, 12, 27, 0.7);         }         .org-brand {             font-family: var(--font-headings);             font-size: 1.5rem;             font-weight: 800;             color: var(--text-white);         }        .org-brand span {             color: var(--accent-sky-blue);         }         .stellar-nav ul {             display: flex;             list-style: none;             gap: 1.5rem;         }         .stellar-nav a {             font-family: var(--font-headings);             font-weight: 500;             text-transform: uppercase;             font-size: 0.9rem;             letter-spacing: 0.5px;             color: var(--text-light);             position: relative;             padding-bottom: 5px;         }                 .stellar-nav a::after {             content: '';             position: absolute;             bottom: 0;             left: 0;             width: 0;             height: 2px;             background-color: var(--accent-sky-blue);             transition: width 0.3s ease;         }         .stellar-nav a:hover::after {             width: 100%;         }         .mobile-nav-toggle {             display: none;         }          /* --- Hero Section --- */         #hero-nexus {             min-height: 100vh;             display: flex;             align-items: center;             padding-top: 80px;         }                 .hero-content {             max-width: 750px;         }                 .hero-content.pre-title {             color: var(--accent-sky-blue);             font-family: var(--font-headings);             font-weight: 500;             margin-bottom: 1rem;         }                 .hero-content p {             font-size: 1.1rem;             max-width: 600px;             margin: 1.5rem 0 2.5rem;         }         .cta-button {             display: inline-block;             background-color: var(--accent-sky-blue);             color: var(--bg-dark-blue);             padding: 1rem 2.5rem;             font-family: var(--font-headings);             font-weight: 600;             font-size: 1rem;             border: 2px solid var(--accent-sky-blue);             border-radius: 4px;             transition: background-color 0.3s ease, color 0.3s ease;         }         .cta-button:hover {             background-color: transparent;             color: var(--accent-sky-blue);         }          /* --- Key Benefits Section --- */        .grid-matrix {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));             gap: 2rem;             margin-top: 3rem;         }         .benefit-card {             background-color: var(--card-surface);             padding: 2.5rem 2rem;             border-radius: 8px;             border: 1px solid #1d2f50;             transition: transform 0.3s ease, box-shadow 0.3s ease;             text-align: center;         }         .benefit-card:hover {             transform: translateY(-10px);             box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);         }                 .card-icon {             margin-bottom: 1.5rem;             color: var(--accent-sky-blue);             width: 48px;             height: 48px;         }         .benefit-card h3 {             font-size: 1.25rem;             color: var(--text-white);             margin-bottom: 0.5rem;         }         .benefit-card p {             font-size: 0.95rem;             line-height: 1.5;             margin-bottom: 1.5rem;         }                 .card-cta {             font-weight: 600;         }          /* --- Article Section --- */         #article-feature.article-container {             background: linear-gradient(145deg, var(--card-surface), #132749);             padding: 3rem;             border-radius: 8px;             border: 1px solid #1d2f50;             margin-top: 3rem;         }          #article-feature h2 {             margin-top: 2.5rem;             margin-bottom: 1.5rem;             font-size: 1.7rem;             color: var(--text-white);         }                  #article-feature h2:first-of-type {             margin-top: 0;         }          #article-feature p {             color: var(--text-light);             margin-bottom: 1.5rem;         }                  #article-feature ul, #article-feature ol {             margin-left: 20px;             margin-bottom: 1.5rem;         }                  #article-feature li {             margin-bottom: 0.75rem;         }                  #article-feature b, #article-feature strong {             color: var(--text-white);             font-weight: 600;         }          #article-feature img {             width: 100%;             height: auto;             border-radius: 8px;             margin: 1.5rem 0;             border: 1px solid var(--accent-steel);         }                  #article-feature table {             width: 100%;             border-collapse: collapse;             margin: 2rem 0;             font-size: 0.95rem;         }          #article-feature th, #article-feature td {             padding: 1rem;             text-align: left;             border-bottom: 1px solid #1d2f50;         }          #article-feature th {             color: var(--text-white);             background-color: #1d2f50;             font-weight: 600;         }                  #article-feature td {             vertical-align: top;         }                  #article-feature tr:last-child td {             border-bottom: none;         }          /* --- What's Included Section --- */         #whats-included {             background-color: var(--card-surface);         }         #whats-included.cosmic-container {             display: flex;             gap: 3rem;             align-items: center;         }        .package-content,.package-visual {             flex: 1;         }        .package-visual {             text-align: center;             padding: 2rem;             border: 2px dashed var(--accent-steel);             border-radius: 8px;             position: relative;         }        .package-visual::before {             content: 'Ledger Nano X';             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);             font-size: 2rem;             font-weight: 700;             color: var(--accent-steel);             opacity: 0.5;             z-index: 1;         }        .package-content ul {             list-style: none;             margin-top: 2rem;         }        .package-content li {             padding-left: 2rem;             position: relative;             margin-bottom: 1rem;             font-size: 1.1rem;         }        .package-content li::before {             content: '✓';             color: var(--accent-sky-blue);             position: absolute;             left: 0;             top: 0;             font-weight: bold;         }          /* --- Step-by-step Process --- */        .step-card {             background-color: var(--card-surface);             padding: 2rem;             border-radius: 8px;             position: relative;             border: 1px solid transparent;             transition: border-color 0.3s ease;         }         .step-card:hover {             border-color: var(--accent-sky-blue);         }         .step-number {             position: absolute;             top: 1rem;             left: 1.5rem;             font-size: 3rem;             font-weight: 800;             color: var(--bg-dark-blue);             -webkit-text-stroke: 1px var(--accent-steel);             opacity: 0.5;             z-index: 0;         }                 .step-card h3 {             font-size: 1.2rem;             margin-top: 1.5rem;             position: relative;             z-index: 1;         }                 .step-card p {             font-size: 0.9rem;             margin-bottom: 0;              position: relative;             z-index: 1;         }          /* --- FAQ Section --- */         #faq-section {             background-color: var(--card-surface);         }        .faq-item {             border-bottom: 1px solid #1d2f50;             padding: 1.5rem 0;         }        .faq-item:last-child {             border-bottom: none;         }        .faq-question {             display: flex;             justify-content: space-between;             align-items: center;             cursor: pointer;             font-size: 1.1rem;             font-weight: 600;             color: var(--text-white);         }        .faq-question::after {             content: '+';             font-size: 2rem;             color: var(--accent-sky-blue);             transition: transform 0.3s ease;         }        .faq-item.active.faq-question::after {             transform: rotate(45deg);         }        .faq-answer {             max-height: 0;             overflow: hidden;             transition: max-height 0.5s ease-in-out;         }        .faq-answer p {             padding-top: 1rem;             margin-bottom: 0;         }           /* --- Testimonials Section --- */        .testimonial-card {             background-color: var(--card-surface);             padding: 2rem;             border-radius: 8px;             border-left: 4px solid var(--accent-sky-blue);         }                 .testimonial-header {             display: flex;             align-items: center;             margin-bottom: 1rem;         }         .testimonial-avatar {             width: 50px;             height: 50px;             border-radius: 50%;             margin-right: 1rem;             border: 2px solid var(--accent-steel);         }        .testimonial-author h4 {             margin: 0;             font-size: 1.1rem;             color: var(--text-white);         }        .testimonial-author span {             font-size: 0.9rem;             color: var(--accent-steel);         }        .testimonial-card p {             font-style: italic;             margin-bottom: 0;         }           /* --- Footer --- */        .nebula-footer {             background-color: #081428;             padding: 4rem 5%;             font-size: 0.9rem;             border-top: 2px solid var(--accent-sky-blue);         }        .footer-grid {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));             gap: 2rem;             margin-bottom: 3rem;         }        .footer-column h4 {             font-size: 1.1rem;             margin-bottom: 1.5rem;             color: var(--text-white);             font-weight: 600;         }        .footer-column ul {             list-style: none;         }        .footer-column li {             margin-bottom: 0.75rem;         }        .footer-column a {             color: var(--accent-steel);         }        .footer-column a:hover {             color: var(--accent-sky-blue);             padding-left: 5px;         }        .footer-bottom {             text-align: center;             padding-top: 2rem;             border-top: 1px solid #1d2f50;             color: var(--accent-steel);         }                  /* --- Animation Utility --- */        .reveal-element {             opacity: 0;             transform: translateY(20px);             transition: opacity 0.8s ease, transform 0.8s ease;         }         .reveal-element.is-visible {             opacity: 1;             transform: translateY(0);         }          /* --- Responsive Styles --- */         @media (max-width: 768px) {             h1 { font-size: 2.2rem; }             h2 { font-size: 1.5rem; }             .stellar-nav {                 position: fixed;                 top: 0;                 right: -100%;                 width: 70%;                 height: 100vh;                 background-color: var(--card-surface);                 flex-direction: column;                 justify-content: center;                 align-items: center;                 transition: right 0.5s ease;             }                         .stellar-nav.active {                 right: 0;             }                         .stellar-nav ul {                 flex-direction: column;                 text-align: center;                 gap: 2.5rem;             }             .mobile-nav-toggle {                 display: block;                 z-index: 1001;                 cursor: pointer;                 background: none;                 border: none;                 padding: 0;             }                         .hamburger {                 width: 30px;                 height: 22px;                 position: relative;             }                         .hamburger span {                 display: block;                 position: absolute;                 height: 3px;                 width: 100%;                 background: var(--text-white);                 border-radius: 3px;                 opacity: 1;                 left: 0;                 transform: rotate(0deg);                 transition:.25s ease-in-out;             }                         .hamburger span:nth-child(1) { top: 0px; }            .hamburger span:nth-child(2),.hamburger span:nth-child(3) { top: 9px; }            .hamburger span:nth-child(4) { top: 18px; }                         .mobile-nav-toggle.is-active.hamburger span:nth-child(1) { top: 9px; width: 0%; left: 50%; }            .mobile-nav-toggle.is-active.hamburger span:nth-child(2) { transform: rotate(45deg); }            .mobile-nav-toggle.is-active.hamburger span:nth-child(3) { transform: rotate(-45deg); }            .mobile-nav-toggle.is-active.hamburger span:nth-child(4) { top: 9px; width: 0%; left: 50%; }              #whats-included.cosmic-container {                 flex-direction: column;             }         } /* --- Additional styles for the Privacy Policy page --- */        .policy-container {            background: var(--card-surface);            padding: 3rem;            border-radius: 8px;            border: 1px solid #1d2f50;            margin-top: 3rem;        }        #privacy-policy .hero-content {            padding-top: 80px;            max-width: 100%;        }        .policy-container h2 {            margin-top: 2.5rem;            margin-bottom: 1.5rem;            font-size: 1.7rem;            color: var(--text-white);        }        .policy-container h2::after {            left: 0;        }        .policy-container h2:first-of-type {            margin-top: 0;        }        .policy-container h3 {             font-size: 1.3rem;             color: var(--accent-sky-blue);             margin-top: 2rem;             margin-bottom: 1rem;             font-weight: 600;        }        .policy-container p {            color: var(--text-light);            margin-bottom: 1.5rem;        }        .policy-container ul {            list-style-type: disc;            margin-left: 20px;            margin-bottom: 1.5rem;        }        .policy-container li {            margin-bottom: 0.75rem;        }        .policy-container a {            font-weight: 600;        }

:root {             --bg-dark-blue: #0a192f;             --accent-sky-blue: #64ffda;             --accent-steel: #8892b0;             --text-light: #ccd6f6;             --text-white: #e6f1ff;             --card-surface: #112240;             --font-main: 'SF Pro Display', 'Roboto', 'Arial', sans-serif;             --font-headings: 'Inter', 'Helvetica Neue', 'Arial', sans-serif;         }          /* --- Base & Reset --- */         *, *::before, *::after {             box-sizing: border-box;             margin: 0;             padding: 0;         }          html {             scroll-behavior: smooth;             font-size: 16px;         }          body {             background-color: var(--bg-dark-blue);             color: var(--text-light);             font-family: var(--font-main);             font-weight: 400;             line-height: 1.6;             -webkit-font-smoothing: antialiased;             -moz-osx-font-smoothing: grayscale;         }          /* --- Typography --- */         h1, h2, h3, h4, h5, h6 {             font-family: var(--font-headings);             color: var(--text-white);             font-weight: 700;             line-height: 1.2;             margin-bottom: 1.25rem;         }          h1 {             font-size: clamp(2.5rem, 5vw, 4.5rem);             font-weight: 800;         }          h2 {             font-size: clamp(1.75rem, 4vw, 2.5rem);             position: relative;             padding-bottom: 0.5rem;         }                  h2::after {             content: '';             position: absolute;             bottom: 0;             left: 0;             width: 50px;             height: 3px;             background-color: var(--accent-sky-blue);         }          p {             margin-bottom: 1rem;             max-width: 100%; /* No max-width restriction */         }                  a {             color: var(--accent-sky-blue);             text-decoration: none;             transition: color 0.3s ease;         }          a:hover {             color: var(--text-white);         }          /* --- Layout --- */        .cosmic-container {             width: 90%;             max-width: 1100px;             margin: 0 auto;             padding: 6rem 0;         }          /* --- Header --- */        .galaxy-header {             position: fixed;             top: 0;             left: 0;             width: 100%;             padding: 1rem 5%;             z-index: 1000;             display: flex;             justify-content: space-between;             align-items: center;             background-color: rgba(10, 25, 47, 0.85);             backdrop-filter: blur(10px);             transition: top 0.3s ease;         }                 .galaxy-header.header-scrolled {             box-shadow: 0 5px 20px rgba(2, 12, 27, 0.7);         }         .org-brand {             font-family: var(--font-headings);             font-size: 1.5rem;             font-weight: 800;             color: var(--text-white);         }        .org-brand span {             color: var(--accent-sky-blue);         }         .stellar-nav ul {             display: flex;             list-style: none;             gap: 1.5rem;         }         .stellar-nav a {             font-family: var(--font-headings);             font-weight: 500;             text-transform: uppercase;             font-size: 0.9rem;             letter-spacing: 0.5px;             color: var(--text-light);             position: relative;             padding-bottom: 5px;         }                 .stellar-nav a::after {             content: '';             position: absolute;             bottom: 0;             left: 0;             width: 0;             height: 2px;             background-color: var(--accent-sky-blue);             transition: width 0.3s ease;         }         .stellar-nav a:hover::after {             width: 100%;         }         .mobile-nav-toggle {             display: none;         }          /* --- Hero Section --- */         #hero-nexus {             min-height: 100vh;             display: flex;             align-items: center;             padding-top: 80px;         }                 .hero-content {             max-width: 750px;         }                 .hero-content .pre-title {             color: var(--accent-sky-blue);             font-family: var(--font-headings);             font-weight: 500;             margin-bottom: 1rem;         }                 .hero-content p {             font-size: 1.1rem;             max-width: 600px;             margin: 1.5rem 0 2.5rem;         }         .cta-button {             display: inline-block;             background-color: var(--accent-sky-blue);             color: var(--bg-dark-blue);             padding: 1rem 2.5rem;             font-family: var(--font-headings);             font-weight: 600;             font-size: 1rem;             border: 2px solid var(--accent-sky-blue);             border-radius: 4px;             transition: background-color 0.3s ease, color 0.3s ease;         }         .cta-button:hover {             background-color: transparent;             color: var(--accent-sky-blue);         }          /* --- Key Benefits Section --- */        .grid-matrix {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));             gap: 2rem;             margin-top: 3rem;         }         .benefit-card {             background-color: var(--card-surface);             padding: 2.5rem 2rem;             border-radius: 8px;             border: 1px solid #1d2f50;             transition: transform 0.3s ease, box-shadow 0.3s ease;             text-align: center;         }         .benefit-card:hover {             transform: translateY(-10px);             box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);         }                 .card-icon {             margin-bottom: 1.5rem;             color: var(--accent-sky-blue);             width: 48px;             height: 48px;         }         .benefit-card h3 {             font-size: 1.25rem;             color: var(--text-white);             margin-bottom: 0.5rem;         }         .benefit-card p {             font-size: 0.95rem;             line-height: 1.5;             margin-bottom: 1.5rem;         }                 .card-cta {             font-weight: 600;         }          /* --- Article Section --- */         #article-feature .article-container {             background: linear-gradient(145deg, var(--card-surface), #132749);             padding: 3rem;             border-radius: 8px;             border: 1px solid #1d2f50;             margin-top: 3rem;         }          #article-feature h2 {             margin-top: 2.5rem;             margin-bottom: 1.5rem;             font-size: 1.7rem;             color: var(--text-white);         }                  #article-feature h2:first-of-type {             margin-top: 0;         }          #article-feature p {             color: var(--text-light);             margin-bottom: 1.5rem;         }                  #article-feature ul, #article-feature ol {             margin-left: 20px;             margin-bottom: 1.5rem;         }                  #article-feature li {             margin-bottom: 0.75rem;         }                  #article-feature b, #article-feature strong {             color: var(--text-white);             font-weight: 600;         }          #article-feature img {             width: 100%;             height: auto;             border-radius: 8px;             margin: 1.5rem 0;             border: 1px solid var(--accent-steel);         }                  #article-feature table {             width: 100%;             border-collapse: collapse;             margin: 2rem 0;             font-size: 0.95rem;         }          #article-feature th, #article-feature td {             padding: 1rem;             text-align: left;             border-bottom: 1px solid #1d2f50;         }          #article-feature th {             color: var(--text-white);             background-color: #1d2f50;             font-weight: 600;         }                  #article-feature td {             vertical-align: top;         }                  #article-feature tr:last-child td {             border-bottom: none;         }          /* --- What's Included Section --- */         #whats-included {             background-color: var(--card-surface);         }         #whats-included .cosmic-container {             display: flex;             gap: 3rem;             align-items: center;         }        .package-content,.package-visual {             flex: 1;         }        .package-visual {             text-align: center;             padding: 2rem;             border: 2px dashed var(--accent-steel);             border-radius: 8px;             position: relative;         }        .package-visual::before {             content: 'Ledger Nano X';             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);             font-size: 2rem;             font-weight: 700;             color: var(--accent-steel);             opacity: 0.5;             z-index: 1;         }        .package-content ul {             list-style: none;             margin-top: 2rem;         }        .package-content li {             padding-left: 2rem;             position: relative;             margin-bottom: 1rem;             font-size: 1.1rem;         }        .package-content li::before {             content: '✓';             color: var(--accent-sky-blue);             position: absolute;             left: 0;             top: 0;             font-weight: bold;         }          /* --- Step-by-step Process --- */        .step-card {             background-color: var(--card-surface);             padding: 2rem;             border-radius: 8px;             position: relative;             border: 1px solid transparent;             transition: border-color 0.3s ease;         }         .step-card:hover {             border-color: var(--accent-sky-blue);         }         .step-number {             position: absolute;             top: 1rem;             left: 1.5rem;             font-size: 3rem;             font-weight: 800;             color: var(--bg-dark-blue);             -webkit-text-stroke: 1px var(--accent-steel);             opacity: 0.5;             z-index: 0;         }                 .step-card h3 {             font-size: 1.2rem;             margin-top: 1.5rem;             position: relative;             z-index: 1;         }                 .step-card p {             font-size: 0.9rem;             margin-bottom: 0;              position: relative;             z-index: 1;         }          /* --- FAQ Section --- */         #faq-section, #faq-main-content {             background-color: var(--card-surface);         }        .faq-item {             border-bottom: 1px solid #1d2f50;             padding: 1.5rem 0;         }        .faq-item:last-child {             border-bottom: none;         }        .faq-question {             display: flex;             justify-content: space-between;             align-items: center;             cursor: pointer;             font-size: 1.1rem;             font-weight: 600;             color: var(--text-white);         }        .faq-question::after {             content: '+';             font-size: 2rem;             color: var(--accent-sky-blue);             transition: transform 0.3s ease;         }        .faq-item.active .faq-question::after {             transform: rotate(45deg);         }        .faq-answer {             max-height: 0;             overflow: hidden;             transition: max-height 0.5s ease-in-out;         }        .faq-answer p {             padding-top: 1rem;             margin-bottom: 0;         }           /* --- Testimonials Section --- */        .testimonial-card {             background-color: var(--card-surface);             padding: 2rem;             border-radius: 8px;             border-left: 4px solid var(--accent-sky-blue);         }                 .testimonial-header {             display: flex;             align-items: center;             margin-bottom: 1rem;         }         .testimonial-avatar {             width: 50px;             height: 50px;             border-radius: 50%;             margin-right: 1rem;             border: 2px solid var(--accent-steel);         }        .testimonial-author h4 {             margin: 0;             font-size: 1.1rem;             color: var(--text-white);         }        .testimonial-author span {             font-size: 0.9rem;             color: var(--accent-steel);         }        .testimonial-card p {             font-style: italic;             margin-bottom: 0;         }           /* --- Footer --- */        .nebula-footer {             background-color: #081428;             padding: 4rem 5%;             font-size: 0.9rem;             border-top: 2px solid var(--accent-sky-blue);         }        .footer-grid {             display: grid;             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));             gap: 2rem;             margin-bottom: 3rem;         }        .footer-column h4 {             font-size: 1.1rem;             margin-bottom: 1.5rem;             color: var(--text-white);             font-weight: 600;         }        .footer-column ul {             list-style: none;         }        .footer-column li {             margin-bottom: 0.75rem;         }        .footer-column a {             color: var(--accent-steel);         }        .footer-column a:hover {             color: var(--accent-sky-blue);             padding-left: 5px;         }        .footer-bottom {             text-align: center;             padding-top: 2rem;             border-top: 1px solid #1d2f50;             color: var(--accent-steel);         }                  /* --- Animation Utility --- */        .reveal-element {             opacity: 0;             transform: translateY(20px);             transition: opacity 0.8s ease, transform 0.8s ease;         }         .reveal-element.is-visible {             opacity: 1;             transform: translateY(0);         }          /* --- Responsive Styles --- */         @media (max-width: 768px) {             h1 { font-size: 2.2rem; }             h2 { font-size: 1.5rem; }             .stellar-nav {                 position: fixed;                 top: 0;                 right: -100%;                 width: 70%;                 height: 100vh;                 background-color: var(--card-surface);                 flex-direction: column;                 justify-content: center;                 align-items: center;                 transition: right 0.5s ease;             }                         .stellar-nav.active {                 right: 0;             }                         .stellar-nav ul {                 flex-direction: column;                 text-align: center;                 gap: 2.5rem;             }             .mobile-nav-toggle {                 display: block;                 z-index: 1001;                 cursor: pointer;                 background: none;                 border: none;                 padding: 0;             }                         .hamburger {                 width: 30px;                 height: 22px;                 position: relative;             }                         .hamburger span {                 display: block;                 position: absolute;                 height: 3px;                 width: 100%;                 background: var(--text-white);                 border-radius: 3px;                 opacity: 1;                 left: 0;                 transform: rotate(0deg);                 transition:.25s ease-in-out;             }                         .hamburger span:nth-child(1) { top: 0px; }            .hamburger span:nth-child(2),.hamburger span:nth-child(3) { top: 9px; }            .hamburger span:nth-child(4) { top: 18px; }                         .mobile-nav-toggle.is-active .hamburger span:nth-child(1) { top: 9px; width: 0%; left: 50%; }            .mobile-nav-toggle.is-active .hamburger span:nth-child(2) { transform: rotate(45deg); }            .mobile-nav-toggle.is-active .hamburger span:nth-child(3) { transform: rotate(-45deg); }            .mobile-nav-toggle.is-active .hamburger span:nth-child(4) { top: 9px; width: 0%; left: 50%; }              #whats-included .cosmic-container {                 flex-direction: column;             }         }         /* --- Additional Styles for FAQ Page --- */         #faq-hero {             min-height: 60vh;             display: flex;             align-items: center;             text-align: center;             padding-top: 80px;             background: linear-gradient(180deg, rgba(10, 25, 47, 0) 0%, var(--bg-dark-blue) 100%), radial-gradient(circle at top center, rgba(17, 34, 64, 0.6) 0%, rgba(10, 25, 47, 0) 60%);         }         #faq-hero .hero-content {             max-width: 800px;             margin: 0 auto;         }                  #faq-hero .pre-title {             color: var(--accent-sky-blue);             font-family: var(--font-headings);             font-weight: 500;             margin-bottom: 1rem;             text-transform: uppercase;             letter-spacing: 1px;         }         #faq-main-content {             padding-top: 0;             padding-bottom: 6rem;             background-color: transparent;         }






/* --- Blog Listing Page --- */
#blog-hero {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 80px;
}

#blog-hero .hero-content {
    margin: 0 auto;
    max-width: 850px;
}

#blog-listing {
    padding-top: 0;
}

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

.blog-post-card {
    background-color: var(--card-surface);
    border-radius: 8px;
    border: 1px solid #1d2f50;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-post-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px -15px rgba(2, 12, 27, 0.7);
}

.card-link-wrapper {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.blog-card-image {
    height: 200px;
    background-color: #1d2f50;
    background: linear-gradient(35deg, var(--card-surface), #132749);
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #1d2f50;
}

.blog-card-image::before {
    content: '🛡️';
    font-size: 50px;
    color: var(--accent-steel);
    opacity: 0.2;
}

.blog-card-content {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.blog-post-card h3 {
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--text-white);
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.blog-post-card:hover h3 {
    color: var(--accent-sky-blue);
}

.blog-post-card p {
    font-size: 0.95rem;
    color: var(--accent-steel);
    margin-bottom: 1rem;
    flex-grow: 1;
}

.read-more-link {
    color: var(--accent-sky-blue);
    font-weight: 600;
    margin-top: auto; 
    font-family: var(--font-headings);
    font-size: 0.9rem;
    align-self: flex-start;
}

.read-more-link::after {
    content: ' →';
    display: inline-block;
    transition: transform 0.3s ease;
}

.blog-post-card:hover .read-more-link::after {
    transform: translateX(4px);
}