:root {
            /* Colors */
            --my-primary: #6752a2;
            --my-primary-light: #8b7bb8;
            --my-primary-dark: #4a3a7a;
            --my-accent: #f08e41;
            --my-accent-light: #ffb366;
            --my-dark: #1d1b24;
            --my-muted: #6b6f76;
            --bs-primary: var(--my-primary);

            /* Shadows */
            --shadow-sm: 0 2px 8px rgba(103, 82, 162, .08);
            --shadow-md: 0 8px 24px rgba(103, 82, 162, .12);
            --shadow-lg: 0 16px 48px rgba(103, 82, 162, .16);
            --shadow-hover: 0 20px 40px rgba(103, 82, 162, .2);

            /* Transitions */
            --transition-fast: 0.15s ease;
            --transition-base: 0.25s ease;
            --transition-slow: 0.4s ease;
        }

        html,
        body {
            font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

        h1, h2, h3, .display-5 {
            font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
            font-weight: 700;
        }

        .icon-svg {
            width: 1em;
            height: 1em;
            vertical-align: -0.125em;
            flex-shrink: 0;
        }

        .success-icon {
            color: var(--my-accent);
        }

        .brand-logo-mark {
            border-radius: 0.5rem;
            object-fit: cover;
            box-shadow: var(--shadow-sm);
        }

        .brand-logo-wordmark-footer {
            display: block;
            width: min(100%, 190px);
            height: auto;
        }

        .play-store-footer {
            margin-top: 1rem;
        }

        .store-badges {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.75rem;
        }

        .play-store-badge-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 0;
            padding: 0;
        }

        .play-store-badge-link:focus-visible {
            outline: 2px solid rgba(240, 142, 65, 0.8);
            outline-offset: 4px;
            border-radius: 0.5rem;
        }

        .play-store-badge {
            display: block;
            width: auto;
            height: 52px;
            object-fit: contain;
        }

        .hero-playstore-option {
            margin-top: 1.25rem;
        }

        @media (min-width: 768px) {
            .store-badges {
                flex-wrap: nowrap;
            }
        }

        .article-header-logo {
            width: 56px;
            height: 56px;
            border-radius: 1rem;
            object-fit: cover;
            box-shadow: var(--shadow-sm);
        }

        .brand-gradient {
            background: radial-gradient(60rem 40rem at 10% -10%, rgba(103, 82, 162, .22), transparent 40%),
                radial-gradient(60rem 40rem at 110% -10%, rgba(240, 142, 65, .2), transparent 40%),
                linear-gradient(180deg, #fff 0%, #f8f6ff 60%, #fff 100%);
            position: relative;
            overflow: hidden;
        }

        /* Decorative road element */
        .brand-gradient::before {
            content: '';
            position: absolute;
            bottom: -50px;
            left: -10%;
            width: 120%;
            height: 200px;
            background: linear-gradient(90deg, transparent 0%, rgba(103, 82, 162, .03) 20%, rgba(103, 82, 162, .05) 50%, rgba(103, 82, 162, .03) 80%, transparent 100%);
            transform: skewY(-2deg);
            pointer-events: none;
        }

        .hero-card {
            backdrop-filter: saturate(1.2) blur(12px);
            border: 1px solid rgba(103, 82, 162, .15);
            box-shadow: var(--shadow-lg);
            transition: transform var(--transition-base), box-shadow var(--transition-base);
        }

        .hero-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }

        /* Floating animation for hero card */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }

        .float-animation {
            animation: float 4s ease-in-out infinite;
        }

        .icon-badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            border-radius: 1rem;
            background: rgba(103, 82, 162, .1);
            color: var(--my-primary);
            transition: transform var(--transition-fast), background var(--transition-fast);
        }

        .icon-badge:hover {
            transform: scale(1.1);
            background: rgba(103, 82, 162, .15);
        }

        .icon-badge.accent {
            background: rgba(240, 142, 65, .12);
            color: var(--my-accent)
        }

        .icon-badge.accent:hover {
            background: rgba(240, 142, 65, .2);
        }

        /* Large step numbers */
        .step-number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--my-primary), var(--my-primary-light));
            color: #fff;
            font-weight: 700;
            font-size: 1.25rem;
            flex-shrink: 0;
        }

        .step-number.accent {
            background: linear-gradient(135deg, var(--my-accent), var(--my-accent-light));
        }

        .btn-gradient {
            background: linear-gradient(135deg, var(--my-primary), var(--my-accent));
            color: #fff;
            border: none;
            transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
            box-shadow: 0 4px 16px rgba(103, 82, 162, .25);
        }

        .btn-gradient:hover {
            filter: brightness(1.08);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(103, 82, 162, .35);
        }

        .btn-gradient:active {
            transform: translateY(0);
        }

        /* Card hover effects */
        .card-hover {
            transition: transform var(--transition-base), box-shadow var(--transition-base);
            box-shadow: var(--shadow-sm);
        }

        .card-hover:hover {
            transform: translateY(-6px);
            box-shadow: var(--shadow-md);
        }

        /* Link arrow animation */
        .link-arrow {
            transition: color var(--transition-fast);
        }

        .link-arrow .icon-svg {
            transition: transform var(--transition-fast);
        }

        .link-arrow:hover .icon-svg {
            transform: translateX(4px);
        }

        /* Highlighted text */
        .text-gradient {
            background: linear-gradient(135deg, var(--my-primary), var(--my-accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        /* Featured card (for pricing) */
        .card-featured {
            border: 2px solid var(--my-primary) !important;
            position: relative;
        }

        .card-featured::before {
            content: 'Populair';
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            background: linear-gradient(135deg, var(--my-primary), var(--my-accent));
            color: #fff;
            font-size: 0.75rem;
            font-weight: 600;
            padding: 4px 16px;
            border-radius: 20px;
        }

        section {
            padding: 64px 0
        }

        @media(min-width:992px) {
            section {
                padding: 80px 0
            }
        }

        footer {
            background: linear-gradient(180deg, #1a1820 0%, #0f0e13 100%);
            color: #bfc3cb;
            position: relative;
        }

        footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(103, 82, 162, .3), rgba(240, 142, 65, .3), transparent);
        }

        footer a {
            color: #e7e9ee;
            text-decoration: none;
            transition: color var(--transition-fast);
        }

        footer a:hover {
            color: var(--my-accent);
            text-decoration: none;
        }

        /* Staggered card animation */
        .stagger-1 { transform: translateY(0); }
        .stagger-2 { transform: translateY(20px); }
        .stagger-3 { transform: translateY(0); }

        @media(max-width: 991.98px) {
            .stagger-1, .stagger-2, .stagger-3 { transform: none; }
        }

        /* Smoother accordion */
        .accordion-button:not(.collapsed) {
            background: rgba(103, 82, 162, .05);
            color: var(--my-primary);
        }

        .accordion-button:focus {
            box-shadow: 0 0 0 0.2rem rgba(103, 82, 162, .15);
            border-color: rgba(103, 82, 162, .3);
        }

        .accordion-collapse {
            transition: height var(--transition-slow) ease;
        }

        /* Article content styling - modern and readable */
        .article-content {
            font-size: 1.125rem;
            line-height: 1.75;
            color: #374151;
        }

        .article-content h1, 
        .article-content h2, 
        .article-content h3, 
        .article-content h4 {
            color: var(--my-dark);
            font-weight: 700;
            line-height: 1.3;
            margin-top: 3rem;
            margin-bottom: 1.5rem;
        }

        .article-content h1 {
            font-size: 2.5rem;
            margin-top: 0;
        }

        .article-content h2 {
            font-size: 2rem;
            border-bottom: 2px solid rgba(103, 82, 162, 0.1);
            padding-bottom: 0.75rem;
        }

        .article-content h3 {
            font-size: 1.5rem;
        }

        .article-content h4 {
            font-size: 1.25rem;
        }

        .article-content h1:first-child,
        .article-content h2:first-child,
        .article-content h3:first-child,
        .article-content h4:first-child {
            margin-top: 0;
        }

        .article-content p {
            margin-bottom: 1.75rem;
            line-height: 1.75;
        }

        .article-content ul, 
        .article-content ol {
            margin-bottom: 2rem;
            padding-left: 0;
            list-style: none;
        }

        .article-content li {
            margin-bottom: 0.75rem;
            line-height: 1.7;
            position: relative;
            padding-left: 1.5rem;
        }

        .article-content ul li::before {
            content: "•";
            color: var(--my-primary);
            font-weight: bold;
            font-size: 1.2em;
            position: absolute;
            left: 0;
            top: -0.1em;
        }

        .article-content ol {
            counter-reset: list-counter;
        }

        .article-content ol li {
            counter-increment: list-counter;
        }

        .article-content ol li::before {
            content: counter(list-counter) ".";
            color: var(--my-primary);
            font-weight: 600;
            position: absolute;
            left: 0;
        }

        .article-content blockquote {
            margin: 3rem 0;
            padding: 2rem;
            border-left: 4px solid var(--my-primary);
            background: linear-gradient(135deg, rgba(103, 82, 162, 0.03), rgba(240, 142, 65, 0.02));
            border-radius: 0 0.75rem 0.75rem 0;
            font-style: italic;
            font-size: 1.1em;
            position: relative;
        }

        .article-content blockquote::before {
            content: '"';
            font-size: 4rem;
            color: var(--my-primary);
            opacity: 0.3;
            position: absolute;
            top: -0.5rem;
            left: 1rem;
            font-family: Georgia, serif;
        }

        .article-content blockquote p:last-child {
            margin-bottom: 0;
        }

        .article-content code {
            background: rgba(103, 82, 162, 0.08);
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
            font-size: 0.875em;
            font-weight: 500;
            color: var(--my-primary);
        }

        .article-content pre {
            background: #f8fafc;
            padding: 1.5rem;
            border-radius: 0.75rem;
            overflow-x: auto;
            margin: 2rem 0;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .article-content pre code {
            background: none;
            padding: 0;
            color: #374151;
            font-size: 0.9rem;
        }

        .article-content strong {
            font-weight: 700;
            color: var(--my-dark);
        }

        .article-content em {
            font-style: italic;
            color: var(--my-muted);
        }

        .article-content a {
            color: var(--my-primary);
            text-decoration: none;
            font-weight: 500;
            border-bottom: 1px solid transparent;
            transition: all 0.2s ease;
        }

        .article-content a:hover {
            color: var(--my-accent);
            border-bottom-color: var(--my-accent);
        }

        /* Article sidebar styling */
        .article-sidebar .card {
            border: 1px solid rgba(103, 82, 162, 0.1);
            box-shadow: 0 4px 20px rgba(103, 82, 162, 0.08);
        }

        .article-sidebar .icon-badge {
            background: rgba(240, 142, 65, 0.1);
            color: var(--my-accent);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .article-sidebar li {
            line-height: 1.5;
            padding-left: 0 !important;
        }

        .article-sidebar li::before {
            display: none !important;
        }

        .article-sidebar .success-icon {
            color: #10b981 !important;
        }

        /* Responsive improvements */
        @media (max-width: 991.98px) {
            .article-content {
                font-size: 1.0625rem;
            }
            
            .article-content h1 {
                font-size: 2rem;
            }
            
            .article-content h2 {
                font-size: 1.75rem;
            }
            
            .article-sidebar {
                margin-top: 2rem;
            }
            
            .article-sidebar .position-sticky {
                position: static !important;
            }
        }

        /* Legacy card-body styles for backward compatibility */
        .card-body h1, .card-body h2, .card-body h3, .card-body h4 {
            color: var(--my-dark);
            margin-top: 2rem;
            margin-bottom: 1rem;
        }

        .card-body h1 {
            font-size: 2rem;
            font-weight: 700;
        }

        .card-body h2 {
            font-size: 1.5rem;
            font-weight: 600;
        }

        .card-body h3 {
            font-size: 1.25rem;
            font-weight: 600;
        }

        .card-body h4 {
            font-size: 1.125rem;
            font-weight: 500;
        }

        .card-body h1:first-child,
        .card-body h2:first-child,
        .card-body h3:first-child,
        .card-body h4:first-child {
            margin-top: 0;
        }

        .card-body p {
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }

        .card-body ul, .card-body ol {
            margin-bottom: 1.5rem;
            padding-left: 0;
            list-style: none;
        }

        .card-body li {
            margin-bottom: 0.5rem;
            line-height: 1.6;
            position: relative;
            padding-left: 1.5rem;
        }

        .card-body ul li::before {
            content: "•";
            color: var(--my-primary);
            font-weight: bold;
            font-size: 1.2em;
            position: absolute;
            left: 0;
            top: -0.1em;
        }

        .card-body ol {
            counter-reset: list-counter;
        }

        .card-body ol li {
            counter-increment: list-counter;
        }

        .card-body ol li::before {
            content: counter(list-counter) ".";
            color: var(--my-primary);
            font-weight: 600;
            position: absolute;
            left: 0;
        }

        .card-body blockquote {
            margin: 2rem 0;
            padding: 1rem 1.5rem;
            border-left: 4px solid var(--my-primary);
            background: rgba(103, 82, 162, 0.05);
            font-style: italic;
        }

        .card-body blockquote p:last-child {
            margin-bottom: 0;
        }

        .card-body code {
            background: rgba(103, 82, 162, 0.08);
            padding: 0.2rem 0.4rem;
            border-radius: 0.25rem;
            font-family: 'Monaco', 'Consolas', monospace;
            font-size: 0.9em;
        }

        .card-body pre {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 0.5rem;
            overflow-x: auto;
            margin: 1.5rem 0;
        }

        .card-body pre code {
            background: none;
            padding: 0;
        }

        .card-body strong {
            font-weight: 600;
            color: var(--my-dark);
        }

        /* Honeypot anti-spam */
        .hp-field {
        position: absolute !important;
        left: -9999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
        }

        .hp-field label {
        display: none;
        }

        /* Floating screenshot styles */
        .floating-container {
            background: linear-gradient(135deg, rgba(103, 82, 162, 0.08) 0%, rgba(240, 142, 65, 0.06) 50%, rgba(103, 82, 162, 0.04) 100%);
            border-radius: 1.5rem;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }

        .floating-container::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle at 30% 30%, rgba(103, 82, 162, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 70% 70%, rgba(240, 142, 65, 0.08) 0%, transparent 50%);
            pointer-events: none;
        }

        .floating-screenshot {
            border-radius: 1rem;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
                        0 12px 24px -8px rgba(103, 82, 162, 0.15);
            overflow: hidden;
            transition: transform var(--transition-base), box-shadow var(--transition-base);
            position: relative;
            z-index: 1;
        }

        .floating-screenshot:hover {
            transform: translateY(-4px);
            box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.3),
                        0 16px 32px -8px rgba(103, 82, 162, 0.2);
        }

        .floating-screenshot-tilt-left {
            transform: perspective(1000px) rotateY(-5deg);
        }

        .floating-screenshot-tilt-left:hover {
            transform: perspective(1000px) rotateY(-5deg) translateY(-4px);
        }

        .floating-screenshot-tilt-right {
            transform: perspective(1000px) rotateY(5deg);
        }

        .floating-screenshot-tilt-right:hover {
            transform: perspective(1000px) rotateY(5deg) translateY(-4px);
        }

        .floating-screenshot img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        @media (max-width: 991.98px) {
            .floating-screenshot-tilt-left,
            .floating-screenshot-tilt-right {
                transform: none;
            }

            .floating-screenshot-tilt-left:hover,
            .floating-screenshot-tilt-right:hover {
                transform: translateY(-4px);
            }

            .floating-container {
                padding: 1.5rem;
            }
        }