<!-- 4. Estilos CSS personalizados -
        /* --- Fuentes y Base --- */
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8fafc; /* Tailwind 'gray-50' */
            color: #334155; /* Tailwind 'slate-700' */
        }

        /* --- Contenedor Principal --- */
        .container {
            max-width: 1024px;
            margin: 0 auto;
            padding: 1.5rem 1rem;
        }

        /* --- Sección Hero --- */
        .hero-section {
            text-align: center;
            margin-bottom: 3rem;
        }
        .hero-title {
            font-size: 2.5rem;
            font-weight: 800;
            color: #002957; /* Color principal oscuro */
            line-height: 1.2;
            margin-bottom: 1.5rem;
        }
        .hero-subtitle {
            font-size: 1.125rem;
            color: #475569; /* Tailwind 'slate-600' */
            max-width: 800px;
            margin: 1.5rem auto 0;
        }
        .flags-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
            margin-top: 2rem;
            font-size: 2.5rem;
        }
        .flag {
            transition: transform 0.2s ease;
        }
        .flag:hover {
            transform: scale(1.2);
        }

        /* --- Tarjeta de la Calculadora --- */
        .calculator-card {
            background-color: #ffffff;
            border-radius: 1.5rem;
            box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
            overflow: hidden;
            border: 1px solid #e2e8f0; /* Tailwind 'slate-200' */
        }
        .calculator-grid {
            display: grid;
            grid-template-columns: 1fr;
            min-height: 600px;
        }
        @media (min-width: 1024px) {
            .calculator-grid {
                grid-template-columns: 45% 55%;
            }
        }

        /* --- Sección de Inputs --- */
        .input-section {
            padding: 2.5rem;
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            border-bottom: 1px solid #e2e8f0;
        }
        @media (min-width: 1024px) {
            .input-section {
                border-right: 1px solid #e2e8f0;
                border-bottom: none;
            }
        }
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }
        .form-label {
            font-size: 0.875rem;
            font-weight: 500;
            color: #475569;
        }
        .form-input, .form-select {
            width: 100%;
            padding: 0.75rem 1rem;
            border: 1px solid #cbd5e1; /* Tailwind 'slate-300' */
            border-radius: 0.75rem;
            font-size: 1rem;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        .form-input:focus, .form-select:focus {
            outline: none;
            border-color: #3B82F6; /* Tailwind 'blue-500' */
            box-shadow: 0 0 0 2px #bfdbfe; /* Tailwind 'blue-200' */
        }
        .select-wrapper {
            position: relative;
        }
        .select-wrapper::after {
            content: '▼';
            font-size: 0.75rem;
            color: #94a3b8; /* Tailwind 'slate-400' */
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }
        .form-select {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }
        .date-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }
        .btn-calculate {
            background-image: linear-gradient(to right, #3B82F6, #2563EB);
            color: white;
            font-weight: 600;
            padding: 1rem;
            border-radius: 0.75rem;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px -3px rgba(59, 130, 246, 0.4);
        }
        .btn-calculate:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 20px -3px rgba(59, 130, 246, 0.5);
        }
        .error-message {
            display: none;
            color: #ef4444; /* Tailwind 'red-500' */
            background-color: #fee2e2; /* Tailwind 'red-100' */
            border: 1px solid #fca5a5; /* Tailwind 'red-300' */
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            text-align: center;
            font-size: 0.875rem;
        }

        /* --- Sección de Resultados --- */
        .results-section {
            background-color: #f0f9ff; /* Tailwind 'blue-50' */
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .results-content {
            padding: 3rem 2.5rem;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
        }
        .results-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #002957;
            text-align: center;
            margin-bottom: 0.5rem;
        }
        .results-total {
            font-size: 3rem;
            font-weight: 800;
            color: #3B82F6;
            text-align: center;
            line-height: 1.1;
            margin-bottom: 2rem;
        }
        .results-breakdown {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 2rem;
            border-top: 1px solid #bfe3ff; /* Tailwind 'blue-200' */
            padding-top: 2rem;
        }
        .results-placeholder {
            color: #64748b; /* Tailwind 'slate-500' */
            text-align: center;
            padding-top: 2rem;
        }
        .breakdown-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #1e293b; /* Tailwind 'slate-800' */
            font-size: 0.9rem;
        }
        .breakdown-label {
            display: flex;
            align-items: center;
        }
        .font-bold { /* Clase de tu JS */
            font-weight: 600;
        }
        .action-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 1rem;
            margin-top: 1.5rem;
        }
        .btn-print, .btn-pdf, .btn-share {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            font-size: 0.875rem;
            font-weight: 500;
            border: 1px solid #93c5fd; /* Tailwind 'blue-300' */
            background-color: #ffffff;
            color: #2563EB;
            transition: all 0.2s ease;
        }
        .btn-print:hover, .btn-pdf:hover, .btn-share:hover {
            background-color: #eff6ff; /* Tailwind 'blue-100' */
        }
        .btn-print {
            display: none; /* Oculto por defecto */
        }
        #pdf-btn, #share-btn {
            display: none; /* Oculto hasta que haya resultados */
        }
        
        /* --- Tooltip --- */
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: help;
            margin-left: 0.5rem; /* Añadido */
        }
        .tooltip .tooltiptext {
            visibility: hidden;
            width: 220px;
            background-color: #1e293b; /* Tailwind 'slate-800' */
            color: #fff;
            text-align: center;
            padding: 0.5rem;
            border-radius: 0.5rem;
            position: absolute;
            z-index: 10;
            bottom: 125%;
            left: 50%;
            margin-left: -110px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.75rem;
            font-weight: 400;
        }
        .tooltip .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #1e293b transparent transparent transparent;
        }
        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }
        .tooltip svg {
            height: 1rem;
            width: 1rem;
            color: #94a3b8;
        }

        /* --- Sección Trust --- */
        .trust-section {
            padding: 4rem 1rem;
        }
        .trust-title {
            font-size: 2rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 3rem;
            color: #002957;
        }
        .trust-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 2rem;
        }
        @media (min-width: 768px) {
            .trust-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }
        .trust-card {
            background-color: #ffffff;
            padding: 2rem;
            border-radius: 1.5rem;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            text-align: center;
            border: 1px solid #e2e8f0;
        }
        .trust-icon {
            font-size: 3rem;
            margin-bottom: 1rem;
        }
        .trust-card-title {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #1e293b;
        }
        .trust-card-text {
            color: #475569;
        }

        /* --- Modal de Compartir --- */
        .share-modal {
            display: none;
            position: fixed;
            z-index: 50;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .share-modal-content {
            background-color: #fff;
            margin: 15% auto;
            padding: 2rem;
            border-radius: 1rem;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            animation: slideIn 0.3s ease;
        }
        @keyframes slideIn {
            from { transform: translateY(-30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .share-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        .share-modal-title {
            font-size: 1.5rem;
            font-weight: 600;
            color: #1e293b;
        }
        .close-modal {
            font-size: 2rem;
            color: #94a3b8;
            background: none;
            border: none;
            cursor: pointer;
            line-height: 1;
        }
        .share-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }
        .share-button {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            padding: 0.75rem;
            border-radius: 0.75rem;
            font-weight: 500;
            border: none;
            cursor: pointer;
            transition: opacity 0.2s;
        }
        .share-button:hover {
            opacity: 0.9;
        }
        .share-button i {
            font-size: 1.25rem;
        }
        .share-facebook { background-color: #1877F2; color: white; }
        .share-whatsapp { background-color: #25D366; color: white; }
        .share-twitter { background-color: #1DA1F2; color: white; }
        .share-email { background-color: #7f8c8d; color: white; }
        .share-link { background-color: #34495e; color: white; }

        /* --- Contenido de PDF (Oculto) --- */
        .pdf-export-content {
            display: none;
            position: absolute;
            left: -9999px;
            width: 800px;
        }

        /* --- Estilos de Impresión --- */
        @media print {
            body * {
                visibility: hidden;
            }
            .printable-section, .printable-section * {
                visibility: visible;
            }
            .printable-section {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                margin: 0;
                padding: 20px;
                background: #fff;
                color: #000;
            }
            .results-content {
                padding: 0;
            }
            .results-section {
                background-color: #fff;
            }
            .results-total {
                color: #3B82F6;
            }
            .action-buttons {
                display: none;
            }
            .tooltip {
                display: none;
            }
        }

    

/* ================================================
   TRANSPARENCY SECTION - FINIQUITO JUSTO HOME
   ================================================ */

.fj-transparency-section {
    margin-top: 4rem;
    background-color: #f8fafc; /* light slate */
    border-radius: 1rem; /* 16px */
    padding: 2rem;
    border: 1px solid #e2e8f0;
}

.fj-transparency-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
}

/* Desktop layout */
@media (min-width: 768px) {
    .fj-transparency-container {
        flex-direction: row;
        align-items: center;
    }
}

/* Logo Circle */
.fj-transparency-logo-wrapper {
    flex-shrink: 0;
}

.fj-transparency-logo {
    width: 6rem; /* 96px */
    height: 6rem;
    background-color: #002957; /* var(--primary-deep-blue) */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.fj-transparency-logo span {
    color: #f59e0b; /* amber-500 */
    font-weight: 900;
    font-size: 1.875rem; /* 30px */
    font-family: 'Poppins', sans-serif;
}

/* Content Area */
.fj-transparency-content {
    flex: 1;
    text-align: center;
}

@media (min-width: 768px) {
    .fj-transparency-content {
        text-align: left;
    }
}

.fj-transparency-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #002957; /* Deep Blue */
    margin-bottom: 0.75rem;
    font-family: 'Poppins', sans-serif;
}

.fj-transparency-text {
    color: #334155; /* slate-700 */
    font-size: 0.875rem; /* 14px */
    line-height: 1.625;
    margin-bottom: 1rem;
    font-family: 'Noto Sans', sans-serif;
}

/* Badges / Checkmarks */
.fj-transparency-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    font-size: 0.75rem; /* 12px */
    font-weight: 700;
    color: #002957;
}

@media (min-width: 768px) {
    .fj-transparency-badges {
        justify-content: flex-start;
    }
}

.fj-badge {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.fj-check {
    color: #16a34a; /* green-600 */
}

        /* ========================================
           FINIQUITOJUSTO BRAND VARIABLES
           ======================================== */
        :root {
            --deep-blue: #002957;
            --accent-blue: #0056b3;
            --accent-hover: #004494;
            --light-grey: #F8FAFC;
            --dark-text: #334155;
            --medium-text: #475569;
            --border-grey: #E2E8F0;
            --info-blue: #EFF6FF;
            --highlight-blue: #3B82F6;
            --white: #ffffff;
            --error-red: #dc2626;
            --success-green: #10b981;
        }

        /* ========================================
           RESET & BASE STYLES
           ======================================== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans', sans-serif;
            background-color: var(--light-grey);
            color: var(--dark-text);
            line-height: 1.6;
        }
        
        h1, h2, h3, h4 {
            font-family: 'Poppins', sans-serif;
            color: var(--deep-blue);
        }

        /* ========================================
           CONTAINER & LAYOUT
           ======================================== */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        #calculator-container {
            padding: 3rem 1rem;
        }

        /* ========================================
           HERO SECTION WITH FLAGS
           ======================================== */
        .hero-section {
            text-align: center;
            margin-bottom: 3rem;
        }

        .hero-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--deep-blue);
            margin-bottom: 1rem;
            line-height: 1.2;
        }

        .flags-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin: 1.5rem 0;
            padding: 1rem;
            background: linear-gradient(135deg, rgba(0, 86, 179, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
            border-radius: 12px;
            border: 2px solid var(--border-grey);
        }

        .flag {
            font-size: 2rem;
            display: inline-block;
            transition: transform 0.3s ease;
            cursor: default;
        }

        .flag:hover {
            transform: scale(1.2);
        }

        .hero-subtitle {
            font-size: 1.1rem;
            color: var(--medium-text);
            max-width: 800px;
            margin: 1.5rem auto 0;
            line-height: 1.7;
        }

        /* ========================================
           CALCULATOR CARD
           ======================================== */
        .calculator-card {
            max-width: 1100px;
            margin: 0 auto;
            background: var(--white);
            padding: 2.5rem;
            border-radius: 16px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border-grey);
        }

        .calculator-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2.5rem;
        }

        /* ========================================
           FORM ELEMENTS
           ======================================== */
        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-label {
            display: block;
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--deep-blue);
            margin-bottom: 0.5rem;
            font-family: 'Poppins', sans-serif;
        }

        .form-input,
        .form-select {
            width: 100%;
            padding: 0.75rem;
            font-size: 1rem;
            font-family: 'Noto Sans', sans-serif;
            color: var(--dark-text);
            background-color: var(--light-grey);
            border: 2px solid var(--border-grey);
            border-radius: 8px;
            transition: all 0.2s ease;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .form-input:focus,
        .form-select:focus {
            outline: none;
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.1);
        }

        .select-wrapper {
            position: relative;
        }

        .select-wrapper::after {
            content: '▼';
            position: absolute;
            right: 1rem;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: var(--deep-blue);
            font-size: 0.75rem;
        }

        .date-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
        }

        #vacation-days-wrapper {
            display: none;
        }

        /* ========================================
           BUTTONS
           ======================================== */
        .btn-calculate {
            width: 100%;
            padding: 1rem 1.5rem;
            font-size: 1.1rem;
            font-weight: 700;
            font-family: 'Poppins', sans-serif;
            color: var(--white);
            background: linear-gradient(135deg, var(--accent-blue), var(--accent-hover));
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
        }

        .btn-calculate:hover {
            background: linear-gradient(135deg, var(--accent-hover), var(--deep-blue));
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 86, 179, 0.3);
        }

        .btn-calculate:active {
            transform: translateY(0);
        }

        .action-buttons {
            display: flex;
            gap: 0.75rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 1.5rem;
        }

        .btn-print,
        .btn-pdf,
        .btn-share {
            padding: 0.75rem 1.5rem;
            font-size: 0.95rem;
            font-weight: 700;
            font-family: 'Poppins', sans-serif;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: none;
        }

        .btn-print {
            color: var(--accent-blue);
            background: var(--white);
            border: 2px solid var(--accent-blue);
        }

        .btn-print:hover {
            background: var(--accent-blue);
            color: var(--white);
            box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
        }

        .btn-pdf {
            color: var(--white);
            background: linear-gradient(135deg, #ef4444, #dc2626);
            border: none;
        }

        .btn-pdf:hover {
            background: linear-gradient(135deg, #dc2626, #991b1b);
            box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
        }

        .btn-share {
            color: var(--white);
            background: linear-gradient(135deg, var(--success-green), #059669);
            border: none;
        }

        .btn-share:hover {
            background: linear-gradient(135deg, #059669, #047857);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }

        /* ========================================
           SHARE MODAL
           ======================================== */
        .share-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .share-modal-content {
            background-color: var(--white);
            margin: 10% auto;
            padding: 2rem;
            border-radius: 16px;
            width: 90%;
            max-width: 500px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translateY(-50px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

        .share-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
        }

        .share-modal-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--deep-blue);
        }

        .close-modal {
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--medium-text);
            cursor: pointer;
            background: none;
            border: none;
            transition: color 0.3s ease;
        }

        .close-modal:hover {
            color: var(--deep-blue);
        }

        .share-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;
        }

        .share-button {
            padding: 1rem;
            border: none;
            border-radius: 12px;
            font-weight: 600;
            font-size: 0.9rem;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            color: var(--white);
            text-decoration: none;
        }

        .share-button:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
        }

        .share-facebook { background: linear-gradient(135deg, #1877F2, #0A66C2); }
        .share-whatsapp { background: linear-gradient(135deg, #25D366, #20BA58); }
        .share-twitter { background: linear-gradient(135deg, #1DA1F2, #1a8917); }
        .share-email { background: linear-gradient(135deg, #EA4335, #C5221F); }
        .share-link { background: linear-gradient(135deg, var(--accent-blue), var(--accent-hover)); }

        /* ========================================
           ERROR MESSAGE
           ======================================== */
        .error-message {
            display: none;
            color: var(--error-red);
            font-size: 0.875rem;
            margin-top: 0.5rem;
            font-weight: 500;
        }

        /* ========================================
           RESULTS SECTION
           ======================================== */
        .results-section {
            background: var(--info-blue);
            padding: 2rem;
            border-radius: 12px;
            border: 2px dashed var(--highlight-blue);
            min-height: 450px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .results-content {
            text-align: center;
        }

        .results-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--deep-blue);
            margin-bottom: 1rem;
        }

        .results-total {
            font-size: 3rem;
            font-weight: 700;
            color: var(--accent-blue);
            margin-bottom: 2rem;
            font-family: 'Poppins', sans-serif;
        }

        .results-breakdown {
            text-align: left;
        }

        .results-placeholder {
            color: var(--medium-text);
            text-align: center;
        }

        .breakdown-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.75rem 0;
            border-bottom: 1px solid var(--border-grey);
        }

        .breakdown-item:last-child {
            border-bottom: none;
        }

        .breakdown-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.95rem;
        }

        .breakdown-amount {
            font-weight: 700;
            color: var(--accent-blue);
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
        }

        /* ========================================
           TOOLTIPS
           ======================================== */
        .tooltip {
            position: relative;
            display: inline-block;
            cursor: pointer;
        }

        .tooltip-icon {
            width: 16px;
            height: 16px;
            color: var(--accent-blue);
        }

        .tooltiptext {
            visibility: hidden;
            width: 220px;
            background-color: var(--deep-blue);
            color: var(--white);
            text-align: center;
            border-radius: 8px;
            padding: 8px 12px;
            position: absolute;
            z-index: 10;
            bottom: 125%;
            left: 50%;
            margin-left: -110px;
            opacity: 0;
            transition: opacity 0.3s;
            font-size: 0.875rem;
            line-height: 1.4;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
            opacity: 1;
        }

        .tooltiptext::after {
            content: "";
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: var(--deep-blue) transparent transparent transparent;
        }

        /* ========================================
           TRUST SECTION
           ======================================== */
        .trust-section {
            max-width: 1100px;
            margin: 4rem auto 0;
        }

        .trust-title {
            font-size: 2rem;
            font-weight: 700;
            text-align: center;
            margin-bottom: 2.5rem;
            color: var(--deep-blue);
        }

        .trust-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
        }

        .trust-card {
            background: var(--white);
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 1px solid var(--border-grey);
            transition: all 0.3s ease;
        }

        .trust-card:hover {
            box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
            transform: translateY(-4px);
        }

        .trust-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .trust-card-title {
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--deep-blue);
            margin-bottom: 0.75rem;
        }

        .trust-card-text {
            color: var(--medium-text);
            line-height: 1.6;
        }

        /* ========================================
           PDF EXPORT STYLES
           ======================================== */
        @media print {
            body * {
                visibility: hidden;
            }
            .printable-section,
            .printable-section * {
                visibility: visible;
            }
            .printable-section {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                border: none !important;
                box-shadow: none !important;
                padding: 2rem !important;
                background-color: white !important;
            }
            .action-buttons {
                display: none !important;
            }
        }

        .pdf-export-content {
            display: none;
        }

        /* ========================================
           CUSTOM SCROLLBAR
           ======================================== */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--light-grey);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--accent-blue);
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--accent-hover);
        }

        /* ========================================
           RESPONSIVE DESIGN
           ======================================== */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 1.75rem;
            }

            .flag {
                font-size: 1.5rem;
            }

            .flags-container {
                gap: 0.35rem;
                padding: 0.75rem;
            }

            .hero-subtitle {
                font-size: 1rem;
            }

            .calculator-card {
                padding: 1.5rem;
            }

            .calculator-grid {
                grid-template-columns: 1fr;
                gap: 2rem;
            }

            .date-grid {
                grid-template-columns: 1fr;
            }

            .trust-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .results-total {
                font-size: 2rem;
            }

            .results-title {
                font-size: 1.25rem;
            }

            #calculator-container {
                padding: 2rem 1rem;
            }

            .action-buttons {
                flex-direction: column;
            }

            .btn-print,
            .btn-pdf,
            .btn-share {
                width: 100%;
            }

            .share-buttons {
                grid-template-columns: 1fr;
            }
        }

        @media (min-width: 769px) and (max-width: 1024px) {
            .hero-title {
                font-size: 2rem;
            }

            .calculator-grid {
                gap: 2rem;
            }
        }
   
    
<!-- CSS FOR EXAMPLES SECTION -->

.examples-section {
    max-width: 1400px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 1rem;
}

.section-intro {
    font-size: 1.1rem;
    color: #475569;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.example-card {
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.example-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-8px);
    border-color: #0056b3;
}

.example-header {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    padding: 1.5rem;
}

.country-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.example-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.example-content {
    padding: 1.5rem;
}

.story-intro {
    margin-bottom: 1.5rem;
}

.story-text {
    color: #475569;
    line-height: 1.6;
    font-size: 0.95rem;
    margin: 0;
}

.calculation-box {
    background: #f8fafc;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.calc-title {
    font-weight: 700;
    color: #002957;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.calc-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
    padding: 0.5rem 0;
}

.detail-label {
    color: #475569;
    font-weight: 500;
}

.detail-value {
    color: #0056b3;
    font-weight: 600;
}

.breakdown-box {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 2px dashed #3B82F6;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.breakdown-title {
    font-weight: 700;
    color: #002957;
    margin: 0 0 1rem;
    font-size: 0.9rem;
}

.breakdown-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    font-size: 0.85rem;
    border-bottom: 1px solid #cbd5e1;
}

.breakdown-row:last-child {
    border-bottom: none;
}

.breakdown-row span:first-child {
    color: #475569;
}

.breakdown-row span:last-child {
    color: #0056b3;
    font-weight: 600;
}

.breakdown-row.highlight {
    background: rgba(0, 86, 179, 0.08);
    font-weight: 600;
}

.breakdown-row.highlight span:first-child {
    color: #0056b3;
}

.breakdown-row.total {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%);
    border-top: 2px solid #0056b3;
    font-weight: 700;
    padding: 1rem;
}

.breakdown-row.total span {
    color: #0056b3;
    font-weight: 700;
}

.result-message {
    background: #f0fdf4;
    border-left: 4px solid #10b981;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #166534;
    line-height: 1.5;
}

.statistics-section {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    margin-bottom: 3rem;
}

.stats-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    color: #ffffff;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.stat-card {
    background: rgba(255, 255, 255, 0.1);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #10b981;
}

.stat-label {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}

.cta-section {
    text-align: center;
    padding: 2rem;
    background: #f8fafc;
    border: 2px dashed #0056b3;
    border-radius: 12px;
}

.cta-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #002957;
    margin-bottom: 1rem;
}

.cta-text {
    font-size: 1.05rem;
    color: #475569;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.cta-button {
    background: linear-gradient(135deg, #0056b3, #002957);
    color: #ffffff;
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
}

.cta-button:hover {
    background: linear-gradient(135deg, #002957, #00193f);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 86, 179, 0.3);
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .examples-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .cta-title {
        font-size: 1.5rem;
    }
}

   /* ===============================================
           BRAND COLORS - YOUR EXACT COLORS
           =============================================== */
        :root {
            --primary-dark: #002957;
            --primary-blue: #0056b3;
            --accent-green: #10b981;
            --text-primary: #334155;
            --text-secondary: #64748b;
            --white: #ffffff;
            --bg-light: #F8FAFC;
            --border-gray: #E2E8F0;
            --bg-light-blue: #EFF6FF;
            --light-blue: #3B82F6;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans', sans-serif;
            background: var(--bg-light);
            color: var(--text-primary);
        }
 /* ===============================================
           HOW IT WORKS SECTION
           =============================================== */
        .how-it-works-section {
            background: var(--white);
            padding: 5rem 2rem;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Section Header */
        .section-title {
            font-family: 'Poppins', sans-serif;
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary-dark);
            text-align: center;
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-green));
            border-radius: 2px;
        }

        .section-intro {
            text-align: center;
            font-size: 1.1rem;
            color: var(--text-secondary);
            max-width: 900px;
            margin: 2rem auto 4rem;
            line-height: 1.8;
        }

        /* Steps Container */
        .steps-container {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        /* Step Card */
        .step-card {
            background: var(--white);
            border: 2px solid var(--border-gray);
            border-radius: 16px;
            padding: 2rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 41, 87, 0.05);
        }

        .step-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--primary-blue), var(--accent-green));
        }

        .step-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary-blue);
            box-shadow: 0 10px 30px rgba(0, 86, 179, 0.12);
        }

        /* Step Header */
        .step-header {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .step-number {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-green));
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Poppins', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(0, 86, 179, 0.25);
        }

        .step-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
        }

        /* Step Content */
        .step-content {
            padding-left: 4rem;
        }

        .step-description {
            font-size: 1rem;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }

        .step-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin: 1.5rem 0;
        }

        .step-list li {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            font-size: 0.95rem;
            color: var(--text-primary);
            line-height: 1.6;
        }

        .step-list li::before {
            content: '✓';
            color: var(--accent-green);
            font-weight: bold;
            font-size: 1.2rem;
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 50%;
        }

        .step-list li strong {
            color: var(--primary-dark);
        }

        /* Technical Note */
        .technical-note {
            background: var(--bg-light-blue);
            border-left: 4px solid var(--primary-blue);
            padding: 1.25rem;
            border-radius: 8px;
            margin-top: 1.5rem;
            color: var(--text-primary);
        }

        .technical-note strong {
            color: var(--primary-blue);
        }

        /* Code Example */
        .code-example {
            background: var(--bg-light);
            border: 2px solid var(--border-gray);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }

        .code-example strong {
            color: var(--primary-blue);
            display: block;
            margin-bottom: 1rem;
        }

        .code-example pre {
            background: var(--white);
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
            border: 1px solid var(--border-gray);
        }

        .code-example code {
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            color: var(--primary-dark);
            line-height: 1.6;
        }

        /* Formula Box */
        .formula-box {
            background: #FEF3C7;
            border: 2px solid #FCD34D;
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }

        .formula-box strong {
            color: var(--primary-dark);
            display: block;
            margin-bottom: 1rem;
        }

        .formula-box code {
            background: var(--white);
            color: var(--primary-blue);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            display: block;
            font-family: 'Courier New', monospace;
            margin: 0.75rem 0;
            border: 1px solid #FCD34D;
        }

        .formula-note {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 0.75rem;
            font-style: italic;
        }

        /* Country Example */
        .country-example {
            background: var(--bg-light-blue);
            border: 2px solid var(--primary-blue);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0;
        }

        .country-example h4 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .calculation-breakdown {
            margin-top: 1rem;
        }

        .calculation-breakdown strong {
            color: var(--primary-blue);
            display: block;
            margin-bottom: 0.75rem;
        }

        .concept-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            margin-top: 1rem;
        }

        .concept-list li {
            background: var(--white);
            padding: 1rem;
            border-radius: 8px;
            border-left: 4px solid var(--accent-green);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .concept-list li strong {
            color: var(--accent-green);
            display: block;
            margin-bottom: 0.5rem;
        }

        .concept-list li code {
            background: var(--bg-light);
            color: var(--primary-blue);
            padding: 0.5rem;
            border-radius: 6px;
            display: block;
            font-family: 'Courier New', monospace;
            margin: 0.5rem 0;
            font-size: 0.85rem;
            border: 1px solid var(--border-gray);
        }

        .concept-note {
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin-top: 0.5rem;
            font-style: italic;
        }

        /* All Countries Note */
        .all-countries-note {
            background: var(--white);
            border: 2px solid var(--accent-green);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 2rem;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
        }

        .all-countries-note strong {
            color: var(--accent-green);
            display: block;
            margin-bottom: 0.75rem;
        }

        /* Results Example */
        .results-example {
            margin-top: 1.5rem;
        }

        .results-example strong {
            color: var(--primary-blue);
            display: block;
            margin-bottom: 1rem;
        }

        .mock-result {
            background: var(--bg-light);
            border: 2px solid var(--primary-blue);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 86, 179, 0.1);
        }

        .mock-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .mock-total {
            font-family: 'Poppins', sans-serif;
            font-size: 3rem;
            font-weight: 800;
            color: var(--primary-blue);
            margin-bottom: 2rem;
        }

        .mock-breakdown {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .mock-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background: var(--white);
            border-radius: 8px;
            border-left: 4px solid var(--accent-green);
        }

        .mock-item span:first-child {
            color: var(--text-primary);
        }

        .mock-item span:last-child {
            color: var(--accent-green);
            font-weight: 700;
        }

        /* Currency Formatting */
        .currency-formatting {
            background: var(--white);
            border: 2px solid var(--border-gray);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .currency-formatting strong {
            color: var(--primary-blue);
            display: block;
            margin-bottom: 1rem;
        }

        .currency-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 0.75rem;
        }

        .currency-list li {
            background: var(--bg-light-blue);
            padding: 0.75rem;
            border-radius: 6px;
            font-size: 0.9rem;
            color: var(--text-primary);
            border-left: 3px solid var(--primary-blue);
        }

        /* Technical Details */
        .technical-details {
            background: var(--white);
            border: 2px solid var(--border-gray);
            border-radius: 16px;
            padding: 2.5rem;
            margin-top: 3rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .tech-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 2rem;
            text-align: center;
        }

        .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

        .tech-item {
            background: var(--bg-light-blue);
            border: 2px solid var(--primary-blue);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 86, 179, 0.08);
        }

        .tech-item h4 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

        .tech-item ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .tech-item ul li {
            color: var(--text-primary);
            font-size: 0.9rem;
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .tech-item ul li::before {
            content: '→';
            color: var(--accent-green);
            flex-shrink: 0;
            font-weight: bold;
        }

        .tech-item ul li strong {
            color: var(--accent-green);
        }

        /* Algorithm Flow */
        .algorithm-flow {
            background: var(--white);
            border: 2px solid var(--border-gray);
            border-radius: 16px;
            padding: 2.5rem;
            margin-top: 3rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .flow-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 2rem;
            text-align: center;
        }

        .flow-diagram {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .flow-step {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .flow-box {
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-green));
            color: var(--white);
            padding: 1rem 2rem;
            border-radius: 12px;
            font-weight: 600;
            text-align: center;
            min-width: 300px;
            box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
            transition: all 0.3s ease;
        }

        .flow-box:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 86, 179, 0.3);
        }

        .flow-box.last {
            background: linear-gradient(135deg, var(--accent-green), #059669);
        }

        .flow-arrow {
            font-size: 2rem;
            color: var(--primary-blue);
            margin: 0.5rem 0;
        }

        /* Accuracy Notice */
        .accuracy-notice {
            background: #FEF3C7;
            border: 3px solid #FCD34D;
            border-radius: 16px;
            padding: 2rem;
            margin-top: 3rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .accuracy-notice h3 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .accuracy-notice p {
            color: var(--text-primary);
            margin-bottom: 1rem;
            line-height: 1.7;
        }

        .warning-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .warning-list li {
            color: var(--text-primary);
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            line-height: 1.6;
        }

        .warning-list li::before {
            content: '⚠️';
            flex-shrink: 0;
        }

        .warning-list li strong {
            color: var(--primary-dark);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .section-title {
                font-size: 1.75rem;
            }

            .section-intro {
                font-size: 1rem;
            }

            .step-content {
                padding-left: 0;
            }

            .step-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .mock-total {
                font-size: 2rem;
            }

            .flow-box {
                min-width: 250px;
                font-size: 0.9rem;
            }

            .tech-grid {
                grid-template-columns: 1fr;
            }
        }
    
.pro-tips-section {
    max-width: 1400px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 1rem;
}

.section-intro {
    font-size: 1.1rem;
    color: #475569;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.tip-card {
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tip-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-6px);
    border-color: #0056b3;
}

.tip-header {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tip-number {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tip-country {
    font-weight: 700;
    font-size: 1.1rem;
}

.tip-content {
    padding: 1.5rem;
    position: relative;
}

.tip-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0056b3;
    margin: 0 0 1rem;
    font-family: 'Poppins', sans-serif;
}

.tip-text {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.tip-icon {
    font-size: 2.5rem;
    opacity: 0.1;
    position: absolute;
    top: -10px;
    right: 10px;
}

.tip-action {
    background: #f0f9ff;
    border-left: 4px solid #10b981;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #166534;
    line-height: 1.5;
}

.quick-reference {
    background: #f8fafc;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.reference-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 2rem;
}

.table-wrapper {
    overflow-x: auto;
}

.reference-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.reference-table thead {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
}

.reference-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    border: 1px solid #E2E8F0;
}

.reference-table td {
    padding: 0.75rem 1rem;
    border: 1px solid #E2E8F0;
    font-size: 0.95rem;
}

.reference-table tbody tr:nth-child(odd) {
    background: #f8fafc;
}

.reference-table tbody tr:hover {
    background: #eff6ff;
}

.key-takeaways {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 2px dashed #0056b3;
    border-radius: 12px;
    padding: 2rem;
}

.takeaways-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 2rem;
}

.takeaways-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.takeaway-item {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #0056b3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.takeaway-item:hover {
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.15);
    transform: translateY(-4px);
}

.takeaway-number {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #0056b3, #002957);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.takeaway-item h4 {
    font-size: 1.1rem;
    color: #002957;
    margin: 0 0 0.5rem;
}

.takeaway-item p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
    }
    
    .reference-table {
        font-size: 0.85rem;
    }
    
    .reference-table th,
    .reference-table td {
        padding: 0.5rem 0.75rem;
    }
    
    .takeaways-grid {
        grid-template-columns: 1fr;
    }
}

.faq-section {
    max-width: 1400px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 1rem;
}

.section-intro {
    font-size: 1.1rem;
    color: #475569;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.country-filter {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
}

.filter-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: #0056b3;
    color: #0056b3;
}

.filter-btn.active {
    background: linear-gradient(135deg, #0056b3, #002957);
    color: #ffffff;
    border-color: #0056b3;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.faq-card {
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.faq-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
    border-color: #0056b3;
}

.faq-country-header {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    padding: 1rem;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
}

.faq-item {
    padding: 1rem;
    border-bottom: 1px solid #E2E8F0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item:hover {
    background: #f8fafc;
}

.faq-question {
    font-weight: 700;
    color: #0056b3;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.faq-question::before {
    content: "Q";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #10b981;
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-answer {
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .country-filter {
        gap: 0.25rem;
    }
    
    .filter-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.related-section {
    max-width: 1400px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 1rem;
}

.section-intro {
    font-size: 1.1rem;
    color: #475569;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.main-calculator-container {
    margin-bottom: 4rem;
}

.main-calculator-card {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 86, 179, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.main-calc-header {
    padding: 2rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.main-calc-icon {
    font-size: 3rem;
}

.main-calc-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.main-calc-content {
    padding: 2.5rem;
    text-align: center;
}

.main-calc-description {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.main-calc-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.feature {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.btn-main-calc {
    display: inline-block;
    background: #10b981;
    color: #ffffff;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-main-calc:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.calculators-section {
    margin-bottom: 4rem;
}

.section-subtitle {
    font-size: 2rem;
    font-weight: 700;
    color: #002957;
    margin-bottom: 0.5rem;
    text-align: center;
}

.section-desc {
    text-align: center;
    color: #475569;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.calculators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.calc-card {
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.calc-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-8px);
    border-color: #0056b3;
}

.calc-header {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.calc-flag {
    font-size: 2.5rem;
}

.calc-country {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.calc-body {
    padding: 1.5rem;
}

.calc-info {
    color: #475569;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.calc-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.calc-features span {
    background: #f0f9ff;
    color: #0056b3;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #3B82F6;
}

.calc-link {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, #0056b3, #002957);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.calc-link:hover {
    background: linear-gradient(135deg, #002957, #00193f);
    transform: translateY(-2px);
}

.resources-section {
    margin-bottom: 4rem;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.resource-card {
    background: #f8fafc;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.resource-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: #0056b3;
}

.resource-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.resource-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #002957;
    margin-bottom: 0.75rem;
}

.resource-desc {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.resource-link {
    display: inline-block;
    color: #0056b3;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.resource-link:hover {
    color: #002957;
    border-bottom-color: #0056b3;
}

.quick-links {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 2px dashed #0056b3;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.quick-link {
    background: #ffffff;
    color: #0056b3;
    padding: 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    border: 2px solid #0056b3;
    transition: all 0.3s ease;
}

.quick-link:hover {
    background: #0056b3;
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .main-calc-header {
        flex-direction: column;
    }
    
    .main-calc-title {
        font-size: 1.3rem;
    }
    
    .calculators-grid {
        grid-template-columns: 1fr;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.disclaimer-section {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #dc2626;
    text-align: center;
    margin-bottom: 2rem;
}

.alert-banner {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
    border: 3px solid #dc2626;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.alert-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.alert-content h3 {
    color: #991b1b;
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
}

.alert-content p {
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

.disclaimer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.disclaimer-card {
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.disclaimer-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: #dc2626;
}

.disclaimer-header {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(239, 68, 68, 0.05) 100%);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 2px solid #E2E8F0;
}

.disclaimer-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.disclaimer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #991b1b;
    margin: 0;
}

.disclaimer-content {
    padding: 1.5rem;
}

.disclaimer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.disclaimer-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #E2E8F0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.6;
}

.disclaimer-list li:last-child {
    border-bottom: none;
}

.disclaimer-list strong {
    color: #002957;
}

.legal-notice {
    background: #fef2f2;
    border: 3px solid #dc2626;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.legal-title {
    color: #991b1b;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.legal-text {
    color: #475569;
    line-height: 1.7;
}

.legal-text p {
    margin-bottom: 1rem;
}

.legal-text p:last-child {
    margin-bottom: 0;
}

.legal-list {
    list-style: none;
    padding: 0 0 0 1.5rem;
    margin: 1rem 0;
}

.legal-list li {
    padding: 0.5rem 0;
    padding-left: 1rem;
    position: relative;
    color: #475569;
}

.legal-list li::before {
    content: "✗";
    position: absolute;
    left: 0;
    color: #dc2626;
    font-weight: 700;
}

.recommendations {
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.rec-title {
    color: #166534;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.rec-item {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    border-left: 4px solid #10b981;
}

.rec-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.rec-item h4 {
    color: #166534;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.rec-item p {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.contact-disclaimer {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 2px solid #3B82F6;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.contact-title {
    color: #0056b3;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.contact-text {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.contact-note {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    font-style: italic;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .alert-banner {
        flex-direction: column;
    }
    
    .disclaimer-grid {
        grid-template-columns: 1fr;
    }
    
    .rec-grid {
        grid-template-columns: 1fr;
    }
}

   /* ===============================================
           BRAND COLORS - YOUR EXACT COLORS
           =============================================== */
        :root {
            --primary-dark: #002957;
            --primary-blue: #0056b3;
            --accent-green: #10b981;
            --text-primary: #334155;
            --text-secondary: #64748b;
            --white: #ffffff;
            --bg-light: #F8FAFC;
            --border-gray: #E2E8F0;
            --bg-light-blue: #EFF6FF;
            --light-blue: #3B82F6;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Noto Sans', sans-serif;
            background: var(--bg-light);
            color: var(--text-primary);
        }
 /* ===============================================
           HOW IT WORKS SECTION
           =============================================== */
        .how-it-works-section {
            background: var(--white);
            padding: 5rem 2rem;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Section Header */
        .section-title {
            font-family: 'Poppins', sans-serif;
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--primary-dark);
            text-align: center;
            margin-bottom: 1rem;
            position: relative;
            display: inline-block;
            width: 100%;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-blue), var(--accent-green));
            border-radius: 2px;
        }

        .section-intro {
            text-align: center;
            font-size: 1.1rem;
            color: var(--text-secondary);
            max-width: 900px;
            margin: 2rem auto 4rem;
            line-height: 1.8;
        }

        /* Steps Container */
        .steps-container {
            display: flex;
            flex-direction: column;
            gap: 2rem;
        }

        /* Step Card */
        .step-card {
            background: var(--white);
            border: 2px solid var(--border-gray);
            border-radius: 16px;
            padding: 2rem;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 41, 87, 0.05);
        }

        .step-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--primary-blue), var(--accent-green));
        }

        .step-card:hover {
            transform: translateY(-5px);
            border-color: var(--primary-blue);
            box-shadow: 0 10px 30px rgba(0, 86, 179, 0.12);
        }

        /* Step Header */
        .step-header {
            display: flex;
            align-items: center;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .step-number {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-green));
            color: var(--white);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Poppins', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            flex-shrink: 0;
            box-shadow: 0 4px 15px rgba(0, 86, 179, 0.25);
        }

        .step-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
        }

        /* Step Content */
        .step-content {
            padding-left: 4rem;
        }

        .step-description {
            font-size: 1rem;
            color: var(--text-primary);
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }

        .step-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin: 1.5rem 0;
        }

        .step-list li {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            font-size: 0.95rem;
            color: var(--text-primary);
            line-height: 1.6;
        }

        .step-list li::before {
            content: '✓';
            color: var(--accent-green);
            font-weight: bold;
            font-size: 1.2rem;
            flex-shrink: 0;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(16, 185, 129, 0.1);
            border-radius: 50%;
        }

        .step-list li strong {
            color: var(--primary-dark);
        }

        /* Technical Note */
        .technical-note {
            background: var(--bg-light-blue);
            border-left: 4px solid var(--primary-blue);
            padding: 1.25rem;
            border-radius: 8px;
            margin-top: 1.5rem;
            color: var(--text-primary);
        }

        .technical-note strong {
            color: var(--primary-blue);
        }

        /* Code Example */
        .code-example {
            background: var(--bg-light);
            border: 2px solid var(--border-gray);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }

        .code-example strong {
            color: var(--primary-blue);
            display: block;
            margin-bottom: 1rem;
        }

        .code-example pre {
            background: var(--white);
            padding: 1rem;
            border-radius: 8px;
            overflow-x: auto;
            border: 1px solid var(--border-gray);
        }

        .code-example code {
            font-family: 'Courier New', monospace;
            font-size: 0.9rem;
            color: var(--primary-dark);
            line-height: 1.6;
        }

        /* Formula Box */
        .formula-box {
            background: #FEF3C7;
            border: 2px solid #FCD34D;
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
        }

        .formula-box strong {
            color: var(--primary-dark);
            display: block;
            margin-bottom: 1rem;
        }

        .formula-box code {
            background: var(--white);
            color: var(--primary-blue);
            padding: 0.5rem 1rem;
            border-radius: 8px;
            display: block;
            font-family: 'Courier New', monospace;
            margin: 0.75rem 0;
            border: 1px solid #FCD34D;
        }

        .formula-note {
            color: var(--text-secondary);
            font-size: 0.9rem;
            margin-top: 0.75rem;
            font-style: italic;
        }

        /* Country Example */
        .country-example {
            background: var(--bg-light-blue);
            border: 2px solid var(--primary-blue);
            border-radius: 12px;
            padding: 1.5rem;
            margin: 1.5rem 0;
        }

        .country-example h4 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .calculation-breakdown {
            margin-top: 1rem;
        }

        .calculation-breakdown strong {
            color: var(--primary-blue);
            display: block;
            margin-bottom: 0.75rem;
        }

        .concept-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1.25rem;
            margin-top: 1rem;
        }

        .concept-list li {
            background: var(--white);
            padding: 1rem;
            border-radius: 8px;
            border-left: 4px solid var(--accent-green);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }

        .concept-list li strong {
            color: var(--accent-green);
            display: block;
            margin-bottom: 0.5rem;
        }

        .concept-list li code {
            background: var(--bg-light);
            color: var(--primary-blue);
            padding: 0.5rem;
            border-radius: 6px;
            display: block;
            font-family: 'Courier New', monospace;
            margin: 0.5rem 0;
            font-size: 0.85rem;
            border: 1px solid var(--border-gray);
        }

        .concept-note {
            color: var(--text-secondary);
            font-size: 0.85rem;
            margin-top: 0.5rem;
            font-style: italic;
        }

        /* All Countries Note */
        .all-countries-note {
            background: var(--white);
            border: 2px solid var(--accent-green);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 2rem;
            box-shadow: 0 2px 8px rgba(16, 185, 129, 0.1);
        }

        .all-countries-note strong {
            color: var(--accent-green);
            display: block;
            margin-bottom: 0.75rem;
        }

        /* Results Example */
        .results-example {
            margin-top: 1.5rem;
        }

        .results-example strong {
            color: var(--primary-blue);
            display: block;
            margin-bottom: 1rem;
        }

        .mock-result {
            background: var(--bg-light);
            border: 2px solid var(--primary-blue);
            border-radius: 12px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 86, 179, 0.1);
        }

        .mock-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .mock-total {
            font-family: 'Poppins', sans-serif;
            font-size: 3rem;
            font-weight: 800;
            color: var(--primary-blue);
            margin-bottom: 2rem;
        }

        .mock-breakdown {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .mock-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem;
            background: var(--white);
            border-radius: 8px;
            border-left: 4px solid var(--accent-green);
        }

        .mock-item span:first-child {
            color: var(--text-primary);
        }

        .mock-item span:last-child {
            color: var(--accent-green);
            font-weight: 700;
        }

        /* Currency Formatting */
        .currency-formatting {
            background: var(--white);
            border: 2px solid var(--border-gray);
            border-radius: 12px;
            padding: 1.5rem;
            margin-top: 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        }

        .currency-formatting strong {
            color: var(--primary-blue);
            display: block;
            margin-bottom: 1rem;
        }

        .currency-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 0.75rem;
        }

        .currency-list li {
            background: var(--bg-light-blue);
            padding: 0.75rem;
            border-radius: 6px;
            font-size: 0.9rem;
            color: var(--text-primary);
            border-left: 3px solid var(--primary-blue);
        }

        /* Technical Details */
        .technical-details {
            background: var(--white);
            border: 2px solid var(--border-gray);
            border-radius: 16px;
            padding: 2.5rem;
            margin-top: 3rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .tech-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 2rem;
            text-align: center;
        }

        .tech-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
        }

        .tech-item {
            background: var(--bg-light-blue);
            border: 2px solid var(--primary-blue);
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0, 86, 179, 0.08);
        }

        .tech-item h4 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--primary-blue);
            margin-bottom: 1rem;
        }

        .tech-item ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .tech-item ul li {
            color: var(--text-primary);
            font-size: 0.9rem;
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
        }

        .tech-item ul li::before {
            content: '→';
            color: var(--accent-green);
            flex-shrink: 0;
            font-weight: bold;
        }

        .tech-item ul li strong {
            color: var(--accent-green);
        }

        /* Algorithm Flow */
        .algorithm-flow {
            background: var(--white);
            border: 2px solid var(--border-gray);
            border-radius: 16px;
            padding: 2.5rem;
            margin-top: 3rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        .flow-title {
            font-family: 'Poppins', sans-serif;
            font-size: 1.75rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 2rem;
            text-align: center;
        }

        .flow-diagram {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .flow-step {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .flow-box {
            background: linear-gradient(135deg, var(--primary-blue), var(--accent-green));
            color: var(--white);
            padding: 1rem 2rem;
            border-radius: 12px;
            font-weight: 600;
            text-align: center;
            min-width: 300px;
            box-shadow: 0 4px 12px rgba(0, 86, 179, 0.2);
            transition: all 0.3s ease;
        }

        .flow-box:hover {
            transform: scale(1.05);
            box-shadow: 0 8px 20px rgba(0, 86, 179, 0.3);
        }

        .flow-box.last {
            background: linear-gradient(135deg, var(--accent-green), #059669);
        }

        .flow-arrow {
            font-size: 2rem;
            color: var(--primary-blue);
            margin: 0.5rem 0;
        }

        /* Accuracy Notice */
        .accuracy-notice {
            background: #FEF3C7;
            border: 3px solid #FCD34D;
            border-radius: 16px;
            padding: 2rem;
            margin-top: 3rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        .accuracy-notice h3 {
            font-family: 'Poppins', sans-serif;
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--primary-dark);
            margin-bottom: 1rem;
        }

        .accuracy-notice p {
            color: var(--text-primary);
            margin-bottom: 1rem;
            line-height: 1.7;
        }

        .warning-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }

        .warning-list li {
            color: var(--text-primary);
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            line-height: 1.6;
        }

        .warning-list li::before {
            content: '⚠️';
            flex-shrink: 0;
        }

        .warning-list li strong {
            color: var(--primary-dark);
        }

        /* Responsive */
        @media (max-width: 768px) {
            .section-title {
                font-size: 1.75rem;
            }

            .section-intro {
                font-size: 1rem;
            }

            .step-content {
                padding-left: 0;
            }

            .step-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .mock-total {
                font-size: 2rem;
            }

            .flow-box {
                min-width: 250px;
                font-size: 0.9rem;
            }

            .tech-grid {
                grid-template-columns: 1fr;
            }
        }
    
.pro-tips-section {
    max-width: 1400px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 1rem;
}

.section-intro {
    font-size: 1.1rem;
    color: #475569;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.tip-card {
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.tip-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-6px);
    border-color: #0056b3;
}

.tip-header {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tip-number {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.tip-country {
    font-weight: 700;
    font-size: 1.1rem;
}

.tip-content {
    padding: 1.5rem;
    position: relative;
}

.tip-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #0056b3;
    margin: 0 0 1rem;
    font-family: 'Poppins', sans-serif;
}

.tip-text {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.tip-icon {
    font-size: 2.5rem;
    opacity: 0.1;
    position: absolute;
    top: -10px;
    right: 10px;
}

.tip-action {
    background: #f0f9ff;
    border-left: 4px solid #10b981;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #166534;
    line-height: 1.5;
}

.quick-reference {
    background: #f8fafc;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.reference-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 2rem;
}

.table-wrapper {
    overflow-x: auto;
}

.reference-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.reference-table thead {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
}

.reference-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 700;
    border: 1px solid #E2E8F0;
}

.reference-table td {
    padding: 0.75rem 1rem;
    border: 1px solid #E2E8F0;
    font-size: 0.95rem;
}

.reference-table tbody tr:nth-child(odd) {
    background: #f8fafc;
}

.reference-table tbody tr:hover {
    background: #eff6ff;
}

.key-takeaways {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 2px dashed #0056b3;
    border-radius: 12px;
    padding: 2rem;
}

.takeaways-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 2rem;
}

.takeaways-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.takeaway-item {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    border-left: 4px solid #0056b3;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.takeaway-item:hover {
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.15);
    transform: translateY(-4px);
}

.takeaway-number {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #0056b3, #002957);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.takeaway-item h4 {
    font-size: 1.1rem;
    color: #002957;
    margin: 0 0 0.5rem;
}

.takeaway-item p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .tips-grid {
        grid-template-columns: 1fr;
    }
    
    .reference-table {
        font-size: 0.85rem;
    }
    
    .reference-table th,
    .reference-table td {
        padding: 0.5rem 0.75rem;
    }
    
    .takeaways-grid {
        grid-template-columns: 1fr;
    }
}

.faq-section {
    max-width: 1400px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 1rem;
}

.section-intro {
    font-size: 1.1rem;
    color: #475569;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2rem;
    line-height: 1.7;
}

.country-filter {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 12px;
}

.filter-btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    border-color: #0056b3;
    color: #0056b3;
}

.filter-btn.active {
    background: linear-gradient(135deg, #0056b3, #002957);
    color: #ffffff;
    border-color: #0056b3;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.faq-card {
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.faq-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
    border-color: #0056b3;
}

.faq-country-header {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    padding: 1rem;
    font-weight: 700;
    font-size: 1.2rem;
    text-align: center;
}

.faq-item {
    padding: 1rem;
    border-bottom: 1px solid #E2E8F0;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-item:hover {
    background: #f8fafc;
}

.faq-question {
    font-weight: 700;
    color: #0056b3;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.faq-question::before {
    content: "Q";
    display: inline-block;
    width: 20px;
    height: 20px;
    background: #10b981;
    color: #ffffff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}

.faq-answer {
    color: #475569;
    font-size: 0.85rem;
    line-height: 1.5;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    opacity: 0;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    opacity: 1;
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .country-filter {
        gap: 0.25rem;
    }
    
    .filter-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.related-section {
    max-width: 1400px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #002957;
    text-align: center;
    margin-bottom: 1rem;
}

.section-intro {
    font-size: 1.1rem;
    color: #475569;
    text-align: center;
    max-width: 900px;
    margin: 0 auto 3rem;
    line-height: 1.7;
}

.main-calculator-container {
    margin-bottom: 4rem;
}

.main-calculator-card {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 86, 179, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.main-calc-header {
    padding: 2rem;
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.main-calc-icon {
    font-size: 3rem;
}

.main-calc-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.main-calc-content {
    padding: 2.5rem;
    text-align: center;
}

.main-calc-description {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
    opacity: 0.95;
}

.main-calc-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.feature {
    background: rgba(255, 255, 255, 0.1);
    padding: 1rem;
    border-radius: 8px;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.btn-main-calc {
    display: inline-block;
    background: #10b981;
    color: #ffffff;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-main-calc:hover {
    background: #059669;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.calculators-section {
    margin-bottom: 4rem;
}

.section-subtitle {
    font-size: 2rem;
    font-weight: 700;
    color: #002957;
    margin-bottom: 0.5rem;
    text-align: center;
}

.section-desc {
    text-align: center;
    color: #475569;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.calculators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.calc-card {
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.calc-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-8px);
    border-color: #0056b3;
}

.calc-header {
    background: linear-gradient(135deg, #002957 0%, #0056b3 100%);
    color: #ffffff;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.calc-flag {
    font-size: 2.5rem;
}

.calc-country {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
}

.calc-body {
    padding: 1.5rem;
}

.calc-info {
    color: #475569;
    font-size: 0.95rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.calc-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.calc-features span {
    background: #f0f9ff;
    color: #0056b3;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid #3B82F6;
}

.calc-link {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: linear-gradient(135deg, #0056b3, #002957);
    color: #ffffff;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
}

.calc-link:hover {
    background: linear-gradient(135deg, #002957, #00193f);
    transform: translateY(-2px);
}

.resources-section {
    margin-bottom: 4rem;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.resource-card {
    background: #f8fafc;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.resource-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: #0056b3;
}

.resource-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.resource-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #002957;
    margin-bottom: 0.75rem;
}

.resource-desc {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.resource-link {
    display: inline-block;
    color: #0056b3;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
}

.resource-link:hover {
    color: #002957;
    border-bottom-color: #0056b3;
}

.quick-links {
    background: linear-gradient(135deg, rgba(0, 86, 179, 0.05) 0%, rgba(59, 130, 246, 0.05) 100%);
    border: 2px dashed #0056b3;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.links-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.quick-link {
    background: #ffffff;
    color: #0056b3;
    padding: 1rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    border: 2px solid #0056b3;
    transition: all 0.3s ease;
}

.quick-link:hover {
    background: #0056b3;
    color: #ffffff;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .main-calc-header {
        flex-direction: column;
    }
    
    .main-calc-title {
        font-size: 1.3rem;
    }
    
    .calculators-grid {
        grid-template-columns: 1fr;
    }
    
    .resources-grid {
        grid-template-columns: 1fr;
    }
    
    .links-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.disclaimer-section {
    max-width: 1200px;
    margin: 4rem auto;
    padding: 0 1rem;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #dc2626;
    text-align: center;
    margin-bottom: 2rem;
}

.alert-banner {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
    border: 3px solid #dc2626;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
}

.alert-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.alert-content h3 {
    color: #991b1b;
    margin: 0 0 0.75rem;
    font-size: 1.3rem;
}

.alert-content p {
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

.disclaimer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.disclaimer-card {
    background: #ffffff;
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.disclaimer-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: #dc2626;
}

.disclaimer-header {
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(239, 68, 68, 0.05) 100%);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 2px solid #E2E8F0;
}

.disclaimer-icon {
    font-size: 1.8rem;
    flex-shrink: 0;
}

.disclaimer-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #991b1b;
    margin: 0;
}

.disclaimer-content {
    padding: 1.5rem;
}

.disclaimer-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.disclaimer-list li {
    padding: 0.75rem 0;
    border-bottom: 1px solid #E2E8F0;
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.6;
}

.disclaimer-list li:last-child {
    border-bottom: none;
}

.disclaimer-list strong {
    color: #002957;
}

.legal-notice {
    background: #fef2f2;
    border: 3px solid #dc2626;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.legal-title {
    color: #991b1b;
    font-size: 1.4rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.legal-text {
    color: #475569;
    line-height: 1.7;
}

.legal-text p {
    margin-bottom: 1rem;
}

.legal-text p:last-child {
    margin-bottom: 0;
}

.legal-list {
    list-style: none;
    padding: 0 0 0 1.5rem;
    margin: 1rem 0;
}

.legal-list li {
    padding: 0.5rem 0;
    padding-left: 1rem;
    position: relative;
    color: #475569;
}

.legal-list li::before {
    content: "✗";
    position: absolute;
    left: 0;
    color: #dc2626;
    font-weight: 700;
}

.recommendations {
    background: #f0fdf4;
    border: 2px solid #86efac;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.rec-title {
    color: #166534;
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: center;
}

.rec-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.rec-item {
    background: #ffffff;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    border-left: 4px solid #10b981;
}

.rec-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.rec-item h4 {
    color: #166534;
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.rec-item p {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

.contact-disclaimer {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 2px solid #3B82F6;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.contact-title {
    color: #0056b3;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 700;
}

.contact-text {
    color: #475569;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.contact-note {
    color: #64748b;
    font-size: 0.9rem;
    margin: 0;
    font-style: italic;
}

@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .alert-banner {
        flex-direction: column;
    }
    
    .disclaimer-grid {
        grid-template-columns: 1fr;
    }
    
    .rec-grid {
        grid-template-columns: 1fr;
    }
}

    
    /* ════════════════════════════════════════════════════════
   DISCLAIMER SECTION — FiniquitoJusto.com
   Full stylesheet · All 11 cards · Updated Feb 2026
   Brand : Navy #002957 | Blue #0056b3 | Gold #F5A623
   Fonts : Poppins (headings) | Noto Sans (body)
════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Noto+Sans:wght@400;500;700&display=swap');


/* ─────────────────────────────────────────────────────
   1. SECTION WRAPPER
───────────────────────────────────────────────────── */
.disclaimer-section {
    background-color : #F8FAFC;
    padding          : 4rem 1.5rem;
    font-family      : 'Noto Sans', sans-serif;
    color            : #334155;
    box-sizing       : border-box;
}

.disclaimer-section .container {
    max-width : 1100px;
    margin    : 0 auto;
}


/* ─────────────────────────────────────────────────────
   2. SECTION TITLE
───────────────────────────────────────────────────── */
.section-title {
    font-family    : 'Poppins', sans-serif;
    font-size      : 1.875rem;
    font-weight    : 700;
    color          : #002957;
    text-align     : center;
    margin         : 0 0 2rem 0;
    padding-bottom : 1rem;
    border-bottom  : 2px solid #E2E8F0;
    line-height    : 1.3;
}
@media (max-width: 640px) {
    .section-title { font-size: 1.375rem; }
}


/* ─────────────────────────────────────────────────────
   3. ALERT BANNER
───────────────────────────────────────────────────── */
.alert-banner {
    display          : flex;
    align-items      : flex-start;
    gap              : 1.25rem;
    background-color : #FEF3C7;
    border           : 1px solid #FCD34D;
    border-left      : 5px solid #F59E0B;
    border-radius    : 0 12px 12px 0;
    padding          : 1.5rem;
    margin-bottom    : 2.5rem;
}

.alert-icon {
    font-size   : 2rem;
    flex-shrink : 0;
    line-height : 1;
    margin-top  : 0.1rem;
}

.alert-content h3 {
    font-family   : 'Poppins', sans-serif;
    font-size     : 1rem;
    font-weight   : 700;
    color         : #92400E;
    margin        : 0 0 0.5rem 0;
    line-height   : 1.4;
}

.alert-content p {
    font-family : 'Noto Sans', sans-serif;
    font-size   : 0.9rem;
    color       : #78350F;
    line-height : 1.65;
    margin      : 0;
}

.alert-content strong {
    color       : #92400E;
    font-weight : 700;
}

@media (max-width: 480px) {
    .alert-banner       { flex-direction: column; gap: 0.75rem; }
    .alert-icon         { font-size: 1.5rem; }
}


/* ─────────────────────────────────────────────────────
   4. DISCLAIMER GRID
───────────────────────────────────────────────────── */
.disclaimer-grid {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 1.5rem;
    margin-bottom         : 2.5rem;
}
@media (min-width: 768px) {
    .disclaimer-grid {
        grid-template-columns : 1fr 1fr;
    }
}


/* ─────────────────────────────────────────────────────
   5. DISCLAIMER CARD  (Cards 1–10 standard)
───────────────────────────────────────────────────── */
.disclaimer-card {
    background-color : #FFFFFF;
    border           : 1px solid #E2E8F0;
    border-radius    : 12px;
    overflow         : hidden;
    box-shadow       :
        0 4px 6px  -1px rgba(0, 41, 87, 0.05),
        0 2px 4px  -2px rgba(0, 41, 87, 0.04);
    transition       : box-shadow 0.25s ease, transform 0.25s ease;
}
.disclaimer-card:hover {
    box-shadow :
        0 10px 20px -3px rgba(0, 41, 87, 0.10),
        0  4px  8px -4px rgba(0, 41, 87, 0.06);
    transform  : translateY(-2px);
}

/* Card that spans full width (Card 11) */
.disclaimer-card--full {
    grid-column    : 1 / -1;
    margin-bottom  : 2.5rem;
}


/* ─────────────────────────────────────────────────────
   6. CARD HEADER
───────────────────────────────────────────────────── */
.disclaimer-header {
    display          : flex;
    align-items      : center;
    gap              : 0.875rem;
    padding          : 1rem 1.25rem;
    background-color : #EFF6FF;
    border-bottom    : 1px solid #DBEAFE;
}

.disclaimer-icon {
    font-size   : 1.625rem;
    flex-shrink : 0;
    line-height : 1;
}

.disclaimer-title {
    font-family : 'Poppins', sans-serif;
    font-size   : 0.9rem;
    font-weight : 700;
    color       : #002957;
    margin      : 0;
    line-height : 1.35;
}


/* ─────────────────────────────────────────────────────
   7. CARD CONTENT
───────────────────────────────────────────────────── */
.disclaimer-content {
    padding : 1.125rem 1.25rem;
}

.disclaimer-list {
    list-style : none;
    padding    : 0;
    margin     : 0;
}

.disclaimer-list li {
    font-family   : 'Noto Sans', sans-serif;
    font-size     : 0.875rem;
    color         : #475569;
    line-height   : 1.65;
    padding       : 0.5rem 0;
    border-bottom : 1px solid #F1F5F9;
    padding-left  : 0.875rem;
    position      : relative;
}
.disclaimer-list li::before {
    content     : "›";
    position    : absolute;
    left        : 0;
    color       : #0056b3;
    font-weight : 700;
    font-size   : 1rem;
    line-height : 1.5;
}
.disclaimer-list li:last-child {
    border-bottom  : none;
    padding-bottom : 0;
}
.disclaimer-list li strong {
    color       : #002957;
    font-weight : 700;
}
.disclaimer-list a {
    color           : #0056b3;
    font-weight     : 600;
    text-decoration : none;
    transition      : color 0.2s ease;
}
.disclaimer-list a:hover {
    color           : #002957;
    text-decoration : underline;
}


/* ─────────────────────────────────────────────────────
   8. CARD 11 — GOVERNMENT SOURCES  (country rows)
───────────────────────────────────────────────────── */
.source-intro {
    font-family   : 'Noto Sans', sans-serif;
    font-size     : 0.875rem;
    color         : #475569;
    line-height   : 1.65;
    margin        : 0 0 1rem 0;
}

.source-country-grid {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : 0.6rem;
}
@media (min-width: 640px) {
    .source-country-grid {
        grid-template-columns : 1fr 1fr;
    }
}

.source-country-row {
    display          : flex;
    align-items      : flex-start;
    gap              : 0.75rem;
    padding          : 0.75rem 1rem;
    background-color : #F8FAFC;
    border           : 1px solid #E2E8F0;
    border-radius    : 8px;
    transition       : background-color 0.2s ease, border-color 0.2s ease;
}
.source-country-row:hover {
    background-color : #EFF6FF;
    border-color     : #BFDBFE;
}

.source-country-flag {
    font-size   : 1.375rem;
    flex-shrink : 0;
    line-height : 1.3;
}

.source-country-body {
    flex        : 1;
    min-width   : 0;
}

.source-country-name {
    font-family  : 'Poppins', sans-serif;
    font-size    : 0.8rem;
    font-weight  : 700;
    color        : #002957;
    display      : inline;
}

.source-country-law {
    font-family : 'Noto Sans', sans-serif;
    font-size   : 0.78rem;
    color       : #64748B;
    display     : inline;
}

.source-country-links {
    display    : block;
    margin-top : 0.25rem;
    line-height: 1.6;
}

.source-country-links a {
    font-family     : 'Poppins', sans-serif;
    font-size       : 0.75rem;
    font-weight     : 600;
    color           : #0056b3;
    text-decoration : none;
    transition      : color 0.2s ease;
    white-space     : nowrap;
}
.source-country-links a:hover {
    color           : #002957;
    text-decoration : underline;
}

.source-country-links .sep {
    color        : #CBD5E1;
    margin       : 0 0.2rem;
    font-weight  : 400;
}


/* ─────────────────────────────────────────────────────
   9. LEGAL NOTICE BOX
───────────────────────────────────────────────────── */
.legal-notice {
    background-color : #002957;
    border-radius    : 14px;
    padding          : 2rem 2.25rem;
    margin-bottom    : 2.5rem;
    box-shadow       : 0 8px 20px rgba(0, 41, 87, 0.20);
}

.legal-title {
    font-family   : 'Poppins', sans-serif;
    font-size     : 1.25rem;
    font-weight   : 700;
    color         : #FFFFFF;
    margin        : 0 0 1.25rem 0;
    padding-bottom: 0.75rem;
    border-bottom : 1px solid rgba(255, 255, 255, 0.15);
}

.legal-text p {
    font-family   : 'Noto Sans', sans-serif;
    font-size     : 0.9rem;
    color         : #CBD5E1;
    line-height   : 1.75;
    margin-bottom : 0.875rem;
}
.legal-text p:last-child { margin-bottom: 0; }

.legal-text strong {
    color       : #FFFFFF;
    font-weight : 700;
}
.legal-text a {
    color           : #F5A623;
    font-weight     : 600;
    text-decoration : none;
    transition      : color 0.2s ease;
}
.legal-text a:hover {
    color           : #FFFFFF;
    text-decoration : underline;
}

.legal-list {
    list-style : none;
    padding    : 0;
    margin     : 0.75rem 0 1rem 0;
}
.legal-list li {
    font-family  : 'Noto Sans', sans-serif;
    font-size    : 0.875rem;
    color        : #CBD5E1;
    padding      : 0.3rem 0 0.3rem 1.375rem;
    position     : relative;
    line-height  : 1.5;
}
.legal-list li::before {
    content     : "›";
    position    : absolute;
    left        : 0;
    color       : #F5A623;
    font-weight : 700;
    font-size   : 1.125rem;
    line-height : 1.35;
}


/* ─────────────────────────────────────────────────────
   10. RECOMMENDATIONS BOX
───────────────────────────────────────────────────── */
.recommendations {
    background-color : #EFF6FF;
    border           : 1px solid #BFDBFE;
    border-radius    : 14px;
    padding          : 2rem 2.25rem;
    margin-bottom    : 2.5rem;
}

.rec-title {
    font-family   : 'Poppins', sans-serif;
    font-size     : 1.25rem;
    font-weight   : 700;
    color         : #002957;
    text-align    : center;
    margin        : 0 0 1.75rem 0;
}

.rec-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 1.25rem;
}
@media (min-width: 768px) {
    .rec-grid {
        grid-template-columns : repeat(3, 1fr);
    }
}
@media (max-width: 480px) {
    .rec-grid {
        grid-template-columns : 1fr;
    }
}

.rec-item {
    background-color : #FFFFFF;
    border           : 1px solid #DBEAFE;
    border-radius    : 10px;
    padding          : 1.25rem 1rem;
    text-align       : center;
    box-shadow       : 0 2px 6px rgba(0, 41, 87, 0.06);
    transition       : transform 0.2s ease, box-shadow 0.2s ease;
}
.rec-item:hover {
    transform  : translateY(-3px);
    box-shadow : 0 8px 16px rgba(0, 41, 87, 0.10);
}

.rec-icon {
    font-size     : 1.875rem;
    margin-bottom : 0.625rem;
    line-height   : 1;
    display       : block;
}

.rec-item h4 {
    font-family   : 'Poppins', sans-serif;
    font-size     : 0.875rem;
    font-weight   : 700;
    color         : #002957;
    margin        : 0 0 0.4rem 0;
    line-height   : 1.3;
}

.rec-item p {
    font-family : 'Noto Sans', sans-serif;
    font-size   : 0.8rem;
    color       : #475569;
    line-height : 1.55;
    margin      : 0;
}


/* ─────────────────────────────────────────────────────
   11. CONTACT BOX
───────────────────────────────────────────────────── */
.contact-disclaimer {
    background-color : #FFFFFF;
    border           : 1px solid #E2E8F0;
    border-left      : 4px solid #0056b3;
    border-radius    : 0 12px 12px 0;
    padding          : 1.5rem 1.75rem;
    text-align       : center;
}

.contact-title {
    font-family   : 'Poppins', sans-serif;
    font-size     : 1.125rem;
    font-weight   : 700;
    color         : #002957;
    margin        : 0 0 0.75rem 0;
}

.contact-text {
    font-family   : 'Noto Sans', sans-serif;
    font-size     : 0.9375rem;
    color         : #475569;
    line-height   : 1.65;
    margin-bottom : 0.5rem;
}
.contact-text strong {
    color       : #0056b3;
    font-weight : 700;
}

.contact-note {
    font-family  : 'Noto Sans', sans-serif;
    font-size    : 0.8375rem;
    color        : #64748B;
    font-style   : italic;
    margin       : 0;
    line-height  : 1.6;
}
.contact-note strong {
    color        : #002957;
    font-style   : normal;
    font-weight  : 700;
}


/* ─────────────────────────────────────────────────────
   12. GLOBAL MOBILE ADJUSTMENTS
───────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .disclaimer-section         { padding: 2.5rem 1rem; }
    .legal-notice               { padding: 1.5rem 1.25rem; }
    .recommendations            { padding: 1.5rem 1rem; }
    .contact-disclaimer         { padding: 1.25rem 1rem; }
    .disclaimer-header          { padding: 0.875rem 1rem; }
    .disclaimer-content         { padding: 0.875rem 1rem; }
    .source-country-grid        { grid-template-columns: 1fr; }
    .source-country-links a     { font-size: 0.7rem; }
}

    


/* ============================================================
   OPTIMIZACIÓN MÓVIL: SECCIÓN "CÓMO FUNCIONA"
   Añadir este código al final de tu hoja de estilos
   ============================================================ */

@media (max-width: 768px) {
    /* 1. Ajustes de la Sección Principal */
    .how-it-works-section {
        padding: 3rem 1rem !important;
    }

    .section-title {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        margin-bottom: 2rem !important;
    }

    .section-title::after {
        width: 60px !important;
    }

    .section-intro {
        font-size: 0.95rem !important;
        margin-bottom: 2.5rem !important;
        text-align: left !important; /* Mejor legibilidad en móvil */
    }

    /* 2. Tarjetas de Pasos (Step Cards) */
    .step-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .step-header {
        flex-direction: row !important; /* Mantenemos fila pero reducimos gap */
        gap: 1rem !important;
        align-items: center !important;
    }

    .step-number {
        width: 45px !important;
        height: 45px !important;
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    .step-title {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }

    .step-content {
        padding-left: 0 !important; /* Eliminamos el margen lateral que empuja el texto */
        margin-top: 1.25rem !important;
    }

    .step-description {
        font-size: 0.9rem !important;
    }

    .step-list li {
        font-size: 0.85rem !important;
        gap: 0.75rem !important;
    }

    /* 3. Bloques de Código y Fórmulas (Crítico para evitar scroll horizontal) */
    .code-example, .formula-box, .mock-result {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
        padding: 1rem !important;
        border-radius: 8px !important;
    }

    .code-example pre, 
    .formula-box code, 
    .concept-list li code {
        font-size: 0.75rem !important; /* Texto más pequeño para que quepa la fórmula */
        white-space: pre-wrap !important; /* Obliga al texto a saltar de línea */
        word-break: break-all !important;
        display: block !important;
        overflow-x: hidden !important;
    }

    /* 4. Ejemplos de Países */
    .country-example {
        padding: 1rem !important;
    }

    .concept-list li {
        padding: 0.85rem !important;
    }

    .concept-list li strong {
        font-size: 0.9rem !important;
    }

    /* 5. Diagrama de Flujo (Algorithm Flow) */
    .algorithm-flow {
        padding: 2rem 0.75rem !important;
    }

    .flow-box {
        min-width: 100% !important;
        width: 100% !important;
        font-size: 0.8rem !important;
        padding: 0.85rem !important;
    }

    .flow-arrow {
        font-size: 1.5rem !important;
        margin: 0.25rem 0 !important;
    }

    /* 6. Aviso de Precisión */
    .accuracy-notice {
        padding: 1.25rem !important;
        margin-top: 2.5rem !important;
    }

    .accuracy-notice h3 {
        font-size: 1.1rem !important;
    }

    .warning-list li {
        font-size: 0.85rem !important;
    }
}

/* Ajuste fino para pantallas extremadamente pequeñas */
@media (max-width: 360px) {
    .step-header {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .step-title {
        font-size: 1rem !important;
    }
}