:root {
            --primary: #1877F2;
            --primary-light: #E7F3FF;
            --secondary: #42B72A;
            --dark: #050505;
            --dark-gray: #65676B;
            --light-gray: #E4E6EB;
            --light-bg: #F0F2F5;
            --white: #FFFFFF;
            --shadow-sm: 0 1px 2px rgba(0,0,0,0.1);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
            --shadow-lg: 0 8px 24px rgba(0,0,0,0.1);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
        }

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

        html, body {
            height: 100%;
            scroll-behavior: smooth;
        }


        body {
            font-family: 'Poppins', sans-serif;
            background-color: var(--light-bg);
            color: var(--dark);
            line-height: 1.6;
            display: flex;
            flex-direction: column;
        }

        /* Header Styles */
        .app-header {
            background: var(--white);
            box-shadow: var(--shadow-sm);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .container {.
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .d-flex {
            display: flex;
        }

        .justify-content-between {
            justify-content: space-between;
        }

        .align-items-center {
            align-items: center;
        }

        .py-3 {
            padding-top: 1rem;
            padding-bottom: 1rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            color: var(--primary);
            text-decoration: none;
        }

        .logo-icon {
            font-size: 1.5rem;
        }


        /* Navigation Menu */
        .nav-menu {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .nav-menu a {
            color: var(--dark-gray);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
            padding: 8px 0;
            position: relative;
        }

        .nav-menu a:hover {
            color: var(--primary);
        }

        .nav-menu a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: var(--primary);
            transition: width 0.3s;
        }

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

        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            color: var(--dark-gray);
            cursor: pointer;
        }

        /* Mobile Menu */
        .mobile-menu {
            position: fixed;
            top: 70px;
            left: 0;
            width: 100%;
            background: var(--white);
            box-shadow: var(--shadow-md);
            padding: 1rem;
            transform: translateY(-150%);
            transition: transform 0.3s ease;
            z-index: 99;
        }

        .mobile-menu.active {
            transform: translateY(0);
        }

        .mobile-menu a {
            display: block;
            padding: 12px 0;
            color: var(--dark-gray);
            text-decoration: none;
            border-bottom: 1px solid var(--light-gray);
            transition: color 0.2s;
        }

        .mobile-menu a:hover {
            color: var(--primary);
        }

        /* Footer Styles */
        .app-footer {
            background: #0e5cad;
            padding: 2rem 0;
            margin-top: auto;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }

        .footer-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .footer-logo {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 1rem;
            color: var(--primary);
            font-weight: 600;
            text-decoration: none;
        }

        .footer-links {
            display: flex;
            gap: 20px;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
            justify-content: center;
        }

        .footer-links a {
            color: var(--dark-gray);
            text-decoration: none;
            transition: color 0.2s;
        }

        .footer-links a:hover {
            color: var(--primary);
        }

        .footer-social {
            display: flex;
            gap: 15px;
            margin-bottom: 1.5rem;
        }
        
        .footer-links a {
            color: var(--white);
        }

        .footer-social a {
            color: var(--white);
            font-size: 1.2rem;
            transition: color 0.2s;
        }

        .footer-social a:hover {
            color: var(--primary);
        }

        .copyright {
            color: var(--white);
            font-size: 0.9rem;
        }

        /* Hero Section */
        .hero-section {
            background: linear-gradient(135deg, #1877f2 0%, #0e5cad 100%);
            color: var(--white);
            border-radius: var(--radius-lg);
            padding: 3rem 2rem;
            margin-bottom: 2rem;
            box-shadow: var(--shadow-md);
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .hero-section::before {
            content: '';
            position: absolute;
            top: -50px;
            right: -50px;
            width: 200px;
            height: 200px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 6s ease-in-out infinite;
        }
        
        .hero-section::after {
            content: '';
            position: absolute;
            bottom: -80px;
            left: -80px;
            width: 300px;
            height: 300px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            animation: float 8s ease-in-out infinite;
            animation-delay: 1s;
        }

        @keyframes float {
            0%, 100% {
                transform: translateY(0) translateX(0);
            }
            50% {
                transform: translateY(-20px) translateX(20px);
            }
        }

        .hero-title {
            font-weight: 700;
            margin-bottom: 1rem;
            position: relative;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            font-size: 2.5rem;
        }

        .hero-subtitle {
            opacity: 0.9;
            margin-bottom: 1.5rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            font-size: 1.1rem;
        }

        /* Main Content */
        .main-container {
            max-width: 960px;
            margin: 0 auto;
        }

        /* Input Card */
        .input-group {
            display: flex;
            max-width: 800px;
            width: 100%;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            border-radius: 50px;
            overflow: hidden;
            margin: 0 auto;
        }
        
        #link {
            flex: 1;
            padding: 20px 20px;
            font-size: 16px;
            border: none;
            outline: none;
            background: white;
            color: #333;
            width: 100%;
        }
        
        #download {
            padding: 0 30px;
            font-size: 16px;
            font-weight: 600;
            border: none;
            background-color: #1877f2;
            color: white;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        #download:hover {
            background-color: #166fe5;
        }
        

        /* Loading State */
        .loading-state {
            display: none;
            text-align: center;
            padding: 2rem;
        }

        .spinner {
            width: 48px;
            height: 48px;
            border: 4px solid var(--primary-light);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 1rem;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Results Card */
        .results-card {
            background: var(--white);
            border-radius: var(--radius-md);
            padding: 2rem;
            box-shadow: var(--shadow-sm);
            margin-top: 1rem;
            display: none;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .results-title {
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 10px;
        }

        .result-item {
            display: flex;
            justify-content: center;
            margin-bottom: 1.5rem;
        }

        .result-content {
            display: flex;
            gap: 12px;
            margin-top: 30px;
        }

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-info {
    background-color: #3a86ff;
    color: white;
}
.btn-info:hover {
    background-color: #2667cc;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
@media (max-width: 480px) {
    .result-content {
        flex-direction: row;
        width: 100%;
    }
    #download {
    padding: 0 15px;
}
    .btn {
        width: 100%;
        font-size: 13px;
    }
}
        /* How to use */
        .how-to-use {
            background-color: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: var(--shadow-sm);
            max-width: 800px;
            margin: 2rem auto;
        }

        .step {
            display: flex;
            margin-bottom: 1.5rem;
        }

        .step-number {
            background-color: var(--primary);
            color: white;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            margin-right: 1rem;
            flex-shrink: 0;
        }
        
        .step h5 {
            font-size: 1.1rem;
            font-weight: 500;
            margin-bottom: 0.3rem;
            color: var(--dark);
        }

        /* Modern UI Design Features Section - Compact Version */
        .design-features {
            background-color: var(--white);
            border-radius: var(--radius-lg);
            padding: 2rem 1rem;
            margin: 2rem auto;
            box-shadow: var(--shadow-sm);
            max-width: 1000px;
            border: 1px solid rgba(0,0,0,0.05);
        }

        .section-header {
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
        }

        .section-title {
            font-weight: 700;
            color: var(--primary);
            margin-bottom: 0.5rem;
            font-size: 1.6rem;
        }

        .section-subtitle {
            color: var(--dark-gray);
            font-size: 1rem;
            opacity: 0.9;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 1rem;
            margin-top: 2rem;
        }

        .feature-card {
            background: var(--white);
            border-radius: var(--radius-md);
            padding: 1.5rem 1rem;
            transition: all 0.3s ease;
            text-align: center;
            border: 1px solid var(--light-gray);
        }

        .feature-card:hover {
            transform: translateY(-3px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary-light);
        }

        .feature-icon {
            font-size: 2rem;
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 60px;
            background: var(--primary-light);
            border-radius: 50%;
            color: var(--primary);
        }

        .feature-title {
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: var(--dark);
            font-size: 1.1rem;
        }

        .feature-desc {
            color: var(--dark-gray);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .design-features {
                padding: 1.5rem 0.5rem;
            }
            
            .section-title {
                font-size: 1.4rem;
            }
            
            .features-grid {
                grid-template-columns: 1fr;
                gap: 0.8rem;
            }
            
            .feature-card {
                padding: 1.2rem 0.8rem;
            }
            
            .feature-icon {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
                margin-bottom: 0.8rem;
            }
        }
        
        /* FAQ Section */
        .faq-section {
            background-color: white;
            border-radius: var(--radius-md);
            padding: 2rem;
            box-shadow: var(--shadow-sm);
            margin: 2rem auto;
        }
        
        .faq-title {
            color: var(--primary);
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .faq-item {
            margin-bottom: 1rem;
            border-radius: var(--radius-sm);
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .faq-question {
            background-color: var(--primary-light);
            padding: 1rem;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s ease;
        }
        
        .faq-question:hover {
           background-color: #d0e3ff;
        }
        
        .faq-question::after {
            content: '+';
            font-size: 1.2rem;
            font-weight: bold;
            transition: transform 0.3s ease;
        }
        
        .faq-question.active::after {
            content: '-';
            transform: rotate(0deg);
        }
        
        .faq-answer {
            padding: 0 1rem;
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            background-color: var(--white);
        }
        
        .faq-answer.show {
            padding: 1rem;
            max-height: 500px;
        }


        /* Utility Classes */
        .py-4 {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }

        .flex-shrink-0 {
            flex-shrink: 0;
        }

        .text-center {
            text-align: center;
        }

        .mb-4 {
            margin-bottom: 1.5rem;
            font-size: 1.75rem;
            font-weight: 500;
        }

        .d-none {
            display: none;
        }

        @media (min-width: 576px) {
            .d-sm-inline {
                display: inline;
            }
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .hero-section {
                padding: 2rem 1rem;
            }
            
            .hero-title {
                font-size: 1.8rem;
            }
            
            .results-card {
                padding: 1.5rem;
            }
            
            .faq-section, .how-to-use {
                padding: 1.5rem;
            }

            /* Mobile menu adjustments */
            .nav-menu {
                display: none;
            }

            .mobile-menu-btn {
                display: block;
            }

        }

        @media (min-width: 769px) {
            .mobile-menu {
                display: none;
            }
        }

/* Error, thumbnail and result extras */
.fd-error {
    display: none;
    background: #fdecea;
    color: #b3261e;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-top: 1rem;
    text-align: center;
}
.results-card .thumb {
    display: block;
    max-width: 100%;
    max-height: 260px;
    border-radius: var(--radius-sm);
    margin: 0 auto 1rem;
}
.results-card .results-title {
    word-break: break-word;
}
.result-source {
    font-size: 13px;
    color: var(--dark-gray);
    word-break: break-all;
    margin-bottom: 1.5rem;
}
.result-source a {
    color: var(--dark-gray) !important;
}
.result-content {
    flex-wrap: wrap;
    justify-content: center;
}

/* Input box (pill style with Paste + Download buttons) */
.input-group {
    align-items: center;
    max-width: 760px;
    padding: 8px;
    gap: 8px;
    background: #fbfcff;
    border-radius: 999px;
    box-shadow: 0 6px 24px rgba(24, 119, 242, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.input-group #link {
    min-width: 0;
    padding: 14px 18px;
    background: transparent;
    font-size: 16px;
}
.input-group #link::placeholder {
    color: #8a8f98;
}
.paste-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 999px;
    background: #f1f2f4;
    color: #1f2937;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}
.paste-btn:hover {
    background: #e6e8ec;
}
.paste-btn i {
    color: #6b7280;
}
.input-group #download {
    flex-shrink: 0;
    padding: 8px 22px 8px 8px;
    gap: 10px;
    border-radius: 999px;
    font-size: 17px;
    font-weight: 500;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.35);
    transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.input-group #download:hover {
    background: linear-gradient(135deg, #2f78ee 0%, #1a45c4 100%);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(29, 78, 216, 0.4);
}
.input-group #download:disabled {
    opacity: 0.75;
    cursor: wait;
    transform: none;
}
.dl-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #2563eb;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}
@media (max-width: 600px) {
    .input-group { padding: 6px; gap: 6px; }
    .input-group #link { padding: 12px 10px; font-size: 14px; }
    .paste-btn { padding: 10px 12px; }
    .paste-text { display: none; }
    .input-group #download { padding: 6px 14px 6px 6px; font-size: 15px; gap: 8px; }
    .dl-icon { width: 30px; height: 30px; }
}
@media (max-width: 380px) {
    .dl-text { display: none; }
    .input-group #download { padding: 6px; }
}

/* How to download (modern cards) */
.how-to-use.how-modern {
    background: transparent;
    box-shadow: none;
    padding: 0;
    max-width: 1000px;
    margin: 3rem auto;
}
.hw-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 2.5rem;
}
.hw-eyebrow {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.hw-head h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark);
    margin: 0 0 10px;
}
.hw-head p {
    color: var(--dark-gray);
    margin: 0;
    font-size: 1.05rem;
}
.hw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    position: relative;
}
.hw-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 56px 24px 28px;
    margin-top: 34px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.hw-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 32px rgba(24, 119, 242, 0.16);
}
.hw-icon {
    position: absolute;
    top: -34px;
    left: 50%;
    transform: translateX(-50%);
    width: 68px;
    height: 68px;
    border-radius: 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.35);
}
.hw-num {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.hw-card h5 {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark);
    margin: 0 0 8px;
}
.hw-card p {
    color: var(--dark-gray);
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.55;
}
/* arrow between cards on desktop */
.hw-card:not(:last-child)::after {
    content: "\f061";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: -24px;
    transform: translate(50%, -50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
@media (max-width: 800px) {
    .hw-grid { grid-template-columns: 1fr; gap: 16px; }
    .hw-card:not(:last-child)::after { display: none; }
    .hw-head h3 { font-size: 1.6rem; }
}


/* ===== Trust strip ===== */
.trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    max-width: 760px;
    margin: 1.5rem auto 0;
}
.trust-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(24, 119, 242, 0.12);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--dark);
    box-shadow: 0 3px 10px rgba(24, 119, 242, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.trust-item:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(24, 119, 242, 0.14); }
.trust-item i {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 11px;
    flex-shrink: 0;
}

/* ===== Download options ===== */
.options-section { max-width: 1000px; margin: 3.5rem auto; }
.opt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.opt-card {
    position: relative;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 20px;
    padding: 32px 24px 28px;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    overflow: hidden;
}
.opt-card::before {
    content: "";
    position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, #3b82f6, #1d4ed8);
}
.opt-card:nth-child(2)::before { background: linear-gradient(90deg, #a78bfa, #7c3aed); }
.opt-card:nth-child(3)::before { background: linear-gradient(90deg, #4ade80, #16a34a); }
.opt-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(24, 119, 242, 0.16); }
.opt-badge {
    position: absolute; top: 18px; right: 18px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em;
    background: var(--primary-light); color: var(--primary);
}
.opt-badge-alt { background: #EDE9FE; color: #7c3aed; }
.opt-badge-green { background: #DCFCE7; color: #16a34a; }
.opt-icon {
    width: 60px; height: 60px;
    border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: #fff;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.3);
    margin-bottom: 18px;
}
.opt-card:nth-child(2) .opt-icon { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 8px 20px rgba(124, 58, 237, 0.3); }
.opt-card:nth-child(3) .opt-icon { background: linear-gradient(135deg, #4ade80, #16a34a); box-shadow: 0 8px 20px rgba(22, 163, 74, 0.3); }
.opt-card h4 { font-size: 1.2rem; font-weight: 600; margin-bottom: 6px; color: var(--dark); }
.opt-card p { color: var(--dark-gray); font-size: 0.95rem; margin-bottom: 14px; }
.opt-list { list-style: none; display: grid; gap: 8px; }
.opt-list li { font-size: 0.9rem; color: var(--dark); display: flex; align-items: center; gap: 10px; }
.opt-list i {
    width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--primary-light); color: var(--primary);
    font-size: 10px; flex-shrink: 0;
}

/* ===== Supported links ===== */
.support-section {
    max-width: 1000px;
    margin: 3.5rem auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 32px;
    align-items: center;
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.06);
}
.support-text h3 { font-size: 1.8rem; font-weight: 700; color: var(--dark); margin: 0 0 10px; line-height: 1.3; }
.support-text p { color: var(--dark-gray); font-size: 1rem; }
.support-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.support-chip {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 10px 16px;
    background: var(--light-bg);
    border: 1px solid var(--light-gray);
    border-radius: 999px;
    font-size: 0.92rem; font-weight: 500; color: var(--dark);
    transition: all 0.25s ease;
}
.support-chip i { color: var(--primary); font-size: 15px; }
.support-chip:hover {
    background: var(--primary); border-color: var(--primary); color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(24, 119, 242, 0.3);
}
.support-chip:hover i { color: #fff; }

/* ===== Call to action ===== */
.cta-banner {
    position: relative;
    overflow: hidden;
    max-width: 1000px;
    margin: 3.5rem auto;
    padding: 56px 24px;
    text-align: center;
    color: #fff;
    border-radius: 28px;
    background: linear-gradient(135deg, #1877F2 0%, #1d4ed8 55%, #4f46e5 100%);
    box-shadow: 0 18px 40px rgba(29, 78, 216, 0.35);
}
.cta-banner::before, .cta-banner::after {
    content: ""; position: absolute; border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
}
.cta-banner::before { width: 260px; height: 260px; top: -110px; left: -70px; }
.cta-banner::after { width: 340px; height: 340px; bottom: -190px; right: -90px; }
.cta-glow {
    position: absolute; inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.22), transparent 60%);
    pointer-events: none;
}
.cta-banner h3 { position: relative; font-size: 2rem; font-weight: 700; margin-bottom: 10px; }
.cta-banner p { position: relative; font-size: 1.05rem; opacity: 0.92; margin-bottom: 26px; }
.cta-btn {
    position: relative;
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px;
    background: #fff; color: var(--primary);
    font-weight: 600; font-size: 1rem;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28); }

@media (max-width: 800px) {
    .trust-strip { grid-template-columns: repeat(2, 1fr); margin-top: 1.5rem; }
    .opt-grid { grid-template-columns: 1fr; gap: 16px; }
    .support-section { grid-template-columns: 1fr; padding: 28px 20px; gap: 20px; }
    .support-text h3 { font-size: 1.5rem; }
    .cta-banner { padding: 40px 20px; border-radius: 22px; }
    .cta-banner h3 { font-size: 1.5rem; }
}
@media (max-width: 420px) {
    .trust-item { font-size: 0.74rem; padding: 7px 6px; gap: 6px; }
    .trust-item i { width: 22px; height: 22px; font-size: 10px; }
}


/* ===== Dynamic pages, blog, logo image ===== */
.logo-img { height: var(--logo-h, 40px); max-height: none; width: auto; max-width: 100%; display: block; }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.content-card {
    background: var(--white);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 24px;
    padding: 40px;
    margin: 2rem auto;
    max-width: 860px;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.06);
}
.content-card > h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; line-height: 1.3; }
.content-body { color: #2b2d31; font-size: 1.02rem; line-height: 1.8; }
.content-body h2 { font-size: 1.35rem; font-weight: 600; color: var(--primary); margin: 1.8rem 0 0.6rem; }
.content-body h3 { font-size: 1.15rem; font-weight: 600; margin: 1.4rem 0 0.5rem; }
.content-body p, .content-body ul, .content-body ol, .content-body blockquote { margin-bottom: 1rem; }
.content-body ul, .content-body ol { padding-left: 1.4rem; }
.content-body a { color: var(--primary); }
.content-body img { max-width: 100%; height: auto; border-radius: 12px; }
.content-body blockquote { border-left: 4px solid var(--primary); background: var(--primary-light); padding: 12px 18px; border-radius: 0 12px 12px 0; }
.content-body pre, .content-body code { background: var(--light-bg); border-radius: 6px; padding: 2px 6px; font-size: 0.92em; }
.content-body pre { padding: 14px; overflow-x: auto; }
.cta-inline { display: inline-block; padding: 12px 28px; background: var(--primary); color: #fff; border-radius: 999px; text-decoration: none; font-weight: 600; }

.blog-head { text-align: center; max-width: 640px; margin: 2.5rem auto 2rem; }
.blog-head h1 { font-size: 2.2rem; font-weight: 700; margin: 10px 0; }
.blog-head p { color: var(--dark-gray); }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 2rem 0; }
.post-card {
    background: var(--white); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 20px; overflow: hidden;
    box-shadow: 0 4px 16px rgba(24, 119, 242, 0.06); transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex; flex-direction: column;
}
.post-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(24, 119, 242, 0.16); }
.post-cover {
    display: flex; align-items: center; justify-content: center; height: 170px;
    background: linear-gradient(135deg, #dbeafe, #e0e7ff) center / cover no-repeat; color: var(--primary); font-size: 2.2rem;
}
.post-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.post-date { font-size: 0.8rem; color: var(--dark-gray); font-weight: 500; }
.post-body h2 { font-size: 1.1rem; font-weight: 600; margin: 6px 0 8px; line-height: 1.4; }
.post-body h2 a { color: var(--dark); text-decoration: none; }
.post-body p { color: var(--dark-gray); font-size: 0.92rem; margin-bottom: 14px; flex: 1; }
.post-more { color: var(--primary); font-weight: 600; font-size: 0.9rem; text-decoration: none; }
.pager { display: flex; justify-content: center; gap: 8px; margin: 1rem 0 2rem; }
.pager a { min-width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--white); color: var(--dark); text-decoration: none; font-weight: 600; border: 1px solid var(--light-gray); }
.pager a.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.post-single .post-hero { width: 100%; max-height: 380px; object-fit: cover; border-radius: 16px; margin: 1rem 0; }
.post-back { display: inline-block; margin-bottom: 1rem; color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
    .blog-grid { grid-template-columns: 1fr; }
    .content-card { padding: 24px 18px; border-radius: 18px; }
    .content-card > h1 { font-size: 1.5rem; }
}

/* ===== Advertisements ===== */
.ad-slot { margin: 1.5rem auto; text-align: center; max-width: 100%; overflow: hidden; clear: both; }
.ad-label { display: block; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #94a3b8; margin-bottom: 6px; }
.blog-grid .ad-infeed { grid-column: 1 / -1; margin: 0.5rem 0; }
.ad-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; background: #fff; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12); padding: 6px 6px 4px; text-align: center; max-height: 110px; }
.ad-close { position: absolute; top: -24px; right: 8px; width: 28px; height: 24px; border: none; border-radius: 8px 8px 0 0; background: #fff; box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.1); font-size: 18px; line-height: 1; color: #64748b; cursor: pointer; }
@media (max-width: 768px) { .ad-dev-desktop { display: none !important; } }
@media (min-width: 769px) { .ad-dev-mobile { display: none !important; } }