:root {
        --primary-red: #dc2626;
        --primary-red-light: #ef4444;
        --primary-red-dark: #991b1b;
        --primary-blue: #2563eb;
        --primary-purple: #7c3aed;
        --primary-orange: #ea580c;
        --primary-green: #059669;
        --primary-black: #000000;
        --primary-black-light: #111827;
        --primary-white: #ffffff;
        --glass-bg: rgba(0, 0, 0, 0.85);
        --glass-border: rgba(255, 255, 255, 0.1);
        
        --gradient-primary: linear-gradient(135deg, #dc2626, #991b1b);
        --gradient-blue: linear-gradient(135deg, #2563eb, #1e40af);
        --gradient-purple: linear-gradient(135deg, #7c3aed, #6d28d9);
        --gradient-orange: linear-gradient(135deg, #ea580c, #c2410c);
        --gradient-green: linear-gradient(135deg, #059669, #047857);
        --gradient-dark: linear-gradient(135deg, #000000, #111827);
        
        --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        --radius-lg: 24px;
        --radius-full: 9999px;
        
        --transition-bounce: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    body {
        font-family: 'Inter', sans-serif;
        background: #f8fafc;
        overflow-x: hidden;
        padding-top: 80px;
    }

    .container {
        max-width: 1500px;
        margin: 0 auto;
        padding: 0 20px;
    }

    /* ===== CATEGORY OVERLAY ===== */
    .category-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        backdrop-filter: blur(20px);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

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

    .overlay-content {
        text-align: center;
        transform: scale(0.8);
        transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .category-overlay.active .overlay-content {
        transform: scale(1);
    }

    .overlay-icon {
        width: 120px;
        height: 120px;
        border-radius: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        color: white;
        margin: 0 auto 30px;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        animation: overlayPulse 2s infinite;
    }

    @keyframes overlayPulse {
        0%, 100% { transform: scale(1); box-shadow: 0 20px 40px rgba(220, 38, 38, 0.3); }
        50% { transform: scale(1.05); box-shadow: 0 30px 60px rgba(220, 38, 38, 0.5); }
    }

    .overlay-title {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 3rem;
        font-weight: 900;
        color: white;
        margin-bottom: 15px;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .overlay-subtitle {
        font-size: 1.2rem;
        color: rgba(255, 255, 255, 0.7);
        letter-spacing: 3px;
        text-transform: uppercase;
    }

    /* ===== ULTRA PREMIUM INTRODUCTION SECTION ===== */
    .intro-section {
        position: relative;
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        border-radius: 48px;
        box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.15);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        margin: 40px auto;
        max-width: 1200px;
    }

    /* Animated Background Particles */
    .intro-bg-particles {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
    }

    .particle {
        position: absolute;
        background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(153, 27, 27, 0.05));
        border-radius: 50%;
        animation: float 20s infinite ease-in-out;
    }

    .particle:nth-child(1) {
        width: 300px;
        height: 300px;
        top: -150px;
        right: -150px;
        animation-delay: 0s;
    }

    .particle:nth-child(2) {
        width: 200px;
        height: 200px;
        bottom: -100px;
        left: -100px;
        animation-delay: -5s;
    }

    .particle:nth-child(3) {
        width: 150px;
        height: 150px;
        top: 50%;
        left: 10%;
        animation-delay: -10s;
    }

    .particle:nth-child(4) {
        width: 100px;
        height: 100px;
        bottom: 20%;
        right: 15%;
        animation-delay: -15s;
    }

    .particle:nth-child(5) {
        width: 250px;
        height: 250px;
        top: 20%;
        right: 20%;
        animation-delay: -7s;
    }

    @keyframes float {
        0%, 100% { transform: translate(0, 0) rotate(0deg); }
        25% { transform: translate(30px, -30px) rotate(5deg); }
        50% { transform: translate(-20px, 20px) rotate(-5deg); }
        75% { transform: translate(-30px, -20px) rotate(3deg); }
    }

    /* Premium Header */
    .intro-header {
        position: relative;
        z-index: 10;
        padding: 60px 60px 40px;
        text-align: center;
    }

    .intro-icon-wrapper {
        position: relative;
        width: 120px;
        height: 120px;
        margin: 0 auto 30px;
    }

    .intro-icon {
        width: 100px;
        height: 100px;
        background: var(--gradient-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        font-size: 3rem;
        color: white;
        position: relative;
        z-index: 3;
        box-shadow: 0 20px 40px rgba(220, 38, 38, 0.3);
        animation: iconPulse 2s infinite;
    }

    .intro-icon-glow {
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
        background: linear-gradient(135deg, #dc2626, #991b1b);
        border-radius: 50%;
        filter: blur(20px);
        opacity: 0.3;
        animation: glowPulse 3s infinite;
        z-index: 1;
    }

    .intro-icon-ring {
        position: absolute;
        top: -15px;
        left: -15px;
        right: -15px;
        bottom: -15px;
        border: 2px solid rgba(220, 38, 38, 0.3);
        border-radius: 50%;
        animation: ringPulse 2s infinite;
        z-index: 2;
    }

    @keyframes iconPulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.05); }
    }

    @keyframes glowPulse {
        0%, 100% { opacity: 0.3; transform: scale(1); }
        50% { opacity: 0.5; transform: scale(1.1); }
    }

    @keyframes ringPulse {
        0% { transform: scale(1); opacity: 1; }
        100% { transform: scale(1.5); opacity: 0; }
    }

    .intro-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: rgba(220, 38, 38, 0.1);
        padding: 8px 20px;
        border-radius: 40px;
        margin-bottom: 25px;
        border: 1px solid rgba(220, 38, 38, 0.2);
        position: relative;
        overflow: hidden;
    }

    .badge-pulse {
        width: 8px;
        height: 8px;
        background: #dc2626;
        border-radius: 50%;
        animation: badgePulse 1.5s infinite;
    }

    .intro-badge span {
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 2px;
        color: #dc2626;
    }

    @keyframes badgePulse {
        0% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.5); opacity: 0.5; }
        100% { transform: scale(1); opacity: 1; }
    }

    .intro-title {
        font-family: 'Plus Jakarta Sans', sans-serif;
        margin-bottom: 25px;
    }

    .title-gradient {
        font-size: 3.5rem;
        font-weight: 900;
        background: linear-gradient(135deg, #1e293b, #dc2626);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        display: block;
        line-height: 1.2;
    }

    .title-block {
        font-size: 3rem;
        font-weight: 800;
        color: #1e293b;
        display: block;
        position: relative;
        display: inline-block;
    }

    .title-block::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 100px;
        height: 4px;
        background: linear-gradient(90deg, transparent, #dc2626, transparent);
        border-radius: 2px;
    }

    .intro-subtitle-wrapper {
        display: flex;
        align-items: center;
        gap: 30px;
        max-width: 700px;
        margin: 40px auto 0;
    }

    .subtitle-decoration {
        width: 60px;
        height: 2px;
        background: linear-gradient(90deg, transparent, #dc2626, transparent);
    }

    .subtitle-decoration.left {
        background: linear-gradient(90deg, transparent, #dc2626);
    }

    .subtitle-decoration.right {
        background: linear-gradient(90deg, #dc2626, transparent);
    }

    .intro-subtitle {
        font-size: 1.1rem;
        color: #475569;
        line-height: 1.8;
        flex: 1;
    }

    /* Features Section */
    .intro-features-container {
        position: relative;
        z-index: 10;
        padding: 0 60px;
    }

    .intro-features {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .intro-feature {
        position: relative;
        text-align: center;
        padding: 35px 25px;
        background: white;
        border-radius: 30px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        overflow: hidden;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    }

    .intro-feature:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 30px 40px -15px rgba(220, 38, 38, 0.3);
        border-color: #dc2626;
    }

    .feature-shine {
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
        transition: left 0.6s ease;
    }

    .intro-feature:hover .feature-shine {
        left: 100%;
    }

    .feature-icon-wrapper {
        position: relative;
        width: 80px;
        height: 80px;
        margin: 0 auto 20px;
    }

    .feature-icon-bg {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, #dc2626, #991b1b);
        border-radius: 30px;
        transform: rotate(45deg);
        opacity: 0.1;
        transition: all 0.3s ease;
    }

    .intro-feature:hover .feature-icon-bg {
        transform: rotate(0deg);
        opacity: 0.2;
    }

    .intro-feature-icon {
        position: relative;
        width: 60px;
        height: 60px;
        background: linear-gradient(135deg, #dc2626, #991b1b);
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 15px;
        font-size: 1.8rem;
        color: white;
        box-shadow: 0 10px 20px rgba(220, 38, 38, 0.3);
        transition: all 0.3s ease;
        z-index: 2;
    }

    .intro-feature:hover .intro-feature-icon {
        transform: scale(1.1) rotate(5deg);
    }

    .intro-feature h4 {
        font-size: 1.3rem;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 10px;
    }

    .intro-feature p {
        font-size: 0.95rem;
        color: #64748b;
        line-height: 1.6;
    }

    /* CTA Button */
    .intro-cta-wrapper {
        position: relative;
        z-index: 10;
        text-align: center;
        padding: 40px 60px 20px;
    }

    .start-btn {
        background: linear-gradient(135deg, #dc2626, #991b1b, #dc2626);
        background-size: 200% 100%;
        color: white;
        padding: 20px 60px;
        border: none;
        border-radius: 60px;
        font-size: 1.3rem;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 20px 40px -10px rgba(220, 38, 38, 0.4);
        display: inline-flex;
        align-items: center;
        gap: 20px;
        position: relative;
        overflow: hidden;
    }

    .start-btn:hover {
        background-position: 100% 0;
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 30px 50px -10px rgba(220, 38, 38, 0.5);
    }

    .btn-text {
        position: relative;
        z-index: 2;
    }

    .btn-icon {
        position: relative;
        z-index: 2;
        transition: transform 0.3s ease;
    }

    .start-btn:hover .btn-icon {
        transform: translateX(10px);
    }

    .btn-ripple {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        transform: translate(-50%, -50%);
        animation: ripple 3s infinite;
    }

    .btn-ripple:nth-child(4) { animation-delay: 0.5s; }
    .btn-ripple:nth-child(5) { animation-delay: 1s; }
    .btn-ripple:nth-child(6) { animation-delay: 1.5s; }

    @keyframes ripple {
        0% { width: 0; height: 0; opacity: 1; }
        100% { width: 300px; height: 300px; opacity: 0; }
    }

    .cta-hint {
        color: #94a3b8;
        font-size: 0.9rem;
        margin-top: 15px;
    }

    /* USER INFO PREMIUM SECTION */
    .user-info-premium {
        position: relative;
        z-index: 10;
        background: linear-gradient(145deg, #ffffff, #f1f5f9);
        border-radius: 40px;
        margin: 20px 60px 40px;
        padding: 40px;
        border: 1px solid rgba(220, 38, 38, 0.1);
        box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    .user-info-decoration {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg, #dc2626, #991b1b, #dc2626);
    }

    .user-info-title {
        font-size: 1.8rem;
        font-weight: 800;
        color: #1e293b;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
    }

    .user-info-title i {
        color: #dc2626;
        font-size: 2rem;
    }

    .user-info-subtitle {
        text-align: center;
        color: #64748b;
        margin-bottom: 30px;
        font-size: 1.1rem;
    }

    .user-info-fields {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
        margin-bottom: 30px;
    }

    .premium-field {
        position: relative;
        width: 100%;
    }

    .field-icon {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        z-index: 2;
        transition: all 0.3s ease;
    }

    .premium-field input {
        width: 100%;
        padding: 16px 20px 16px 50px;
        font-size: 1rem;
        border: 2px solid #e2e8f0;
        border-radius: 20px;
        transition: all 0.3s ease;
        background: white;
        color: #1e293b;
        font-weight: 500;
        position: relative;
        z-index: 1;
    }

    .field-border {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border: 2px solid transparent;
        border-radius: 20px;
        transition: all 0.3s ease;
        pointer-events: none;
        z-index: 3;
    }

    .field-focus-effect {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 20px;
        background: linear-gradient(135deg, #dc2626, #991b1b);
        opacity: 0;
        transition: all 0.3s ease;
        filter: blur(10px);
        z-index: -1;
    }

    .premium-field input:focus {
        outline: none;
        border-color: transparent;
        transform: translateY(-2px);
    }

    .premium-field input:focus ~ .field-border {
        border-color: #dc2626;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1);
    }

    .premium-field input:focus ~ .field-focus-effect {
        opacity: 0.3;
    }

    .premium-field input:focus ~ .field-icon {
        color: #dc2626;
        transform: translateY(-50%) scale(1.1);
    }

    .premium-field input:hover {
        border-color: #94a3b8;
    }

    /* Trust Badges */
    .trust-badges {
        display: flex;
        justify-content: center;
        gap: 30px;
        padding-top: 20px;
        border-top: 1px dashed #e2e8f0;
    }

    .trust-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #64748b;
        font-size: 0.9rem;
    }

    .trust-badge i {
        color: #10b981;
        font-size: 1rem;
    }

    /* Footer Stats */
    .intro-footer {
        position: relative;
        z-index: 10;
        padding: 40px 60px;
        background: linear-gradient(145deg, #f8fafc, #ffffff);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }

    .intro-stats {
        display: flex;
        justify-content: center;
        gap: 60px;
        flex-wrap: wrap;
    }

    .intro-stat {
        text-align: center;
        min-width: 150px;
    }

    .stat-number-wrapper {
        display: flex;
        align-items: baseline;
        justify-content: center;
        margin-bottom: 10px;
    }

    .stat-number {
        font-size: 3rem;
        font-weight: 900;
        color: #dc2626;
        line-height: 1;
        background: linear-gradient(135deg, #dc2626, #991b1b);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .stat-plus, .stat-percent {
        font-size: 2rem;
        font-weight: 800;
        color: #dc2626;
        margin-left: 5px;
    }

    .stat-label {
        font-size: 1rem;
        color: #64748b;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .stat-progress {
        width: 100%;
        height: 4px;
        background: #e2e8f0;
        border-radius: 2px;
        overflow: hidden;
    }

    .stat-progress-bar {
        height: 100%;
        background: linear-gradient(90deg, #dc2626, #991b1b);
        border-radius: 2px;
        animation: progressPulse 2s infinite;
    }

    @keyframes progressPulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.7; }
    }

    .stat-stars {
        color: #fbbf24;
        font-size: 1rem;
        display: flex;
        gap: 3px;
        justify-content: center;
        margin-top: 5px;
    }

    .stat-security {
        display: flex;
        gap: 8px;
        justify-content: center;
        color: #10b981;
        font-size: 1.1rem;
        margin-top: 5px;
    }

    .stat-subtext {
        font-size: 0.8rem;
        color: #94a3b8;
        margin-top: 8px;
        font-weight: 400;
    }

    /* ===== SURVEY SECTION ===== */
    .survey-section {
        display: none;
        max-width: 1200px;
        margin: 40px auto;
        padding: 0 20px;
    }

    .survey-section.active {
        display: block;
        animation: fadeIn 0.8s ease-out;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    /* ===== PROGRESS BAR ===== */
    .progress-container {
        max-width: 800px;
        margin: 30px auto;
        background: white;
        border-radius: var(--radius-full);
        padding: 15px 25px;
        box-shadow: var(--shadow-xl);
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .progress-steps {
        display: flex;
        gap: 10px;
        flex: 1;
        min-width: 200px;
    }

    .progress-step {
        flex: 1;
        height: 8px;
        background: #e2e8f0;
        border-radius: var(--radius-full);
        position: relative;
        overflow: hidden;
    }

    .progress-step-fill {
        height: 100%;
        width: 0;
        transition: width 0.5s ease;
    }

    .progress-step.active .progress-step-fill {
        width: 100%;
    }

    .progress-step.completed .progress-step-fill {
        width: 100%;
    }

    .step-label {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--primary-black-light);
        white-space: nowrap;
    }

    /* ===== CATEGORY CARD ===== */
    .category-card {
        background: white;
        border-radius: 32px;
        box-shadow: var(--shadow-xl);
        overflow: hidden;
        margin: 40px auto;
        max-width: 1100px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        animation: slideIn 0.6s ease-out;
    }

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

    .category-header {
        padding: 30px 40px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .category-icon-large {
        width: 70px;
        height: 70px;
        border-radius: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: white;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }

    .category-info h2 {
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 2.2rem;
        font-weight: 800;
        margin-bottom: 5px;
    }

    .category-info p {
        color: var(--primary-black-light);
        font-size: 1rem;
    }

    /* ===== SUBCATEGORY GRID ===== */
    .subcategory-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
        padding: 40px;
    }

    .subcategory-card {
        background: linear-gradient(145deg, #ffffff, #f8fafc);
        border-radius: 24px;
        padding: 25px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        transition: var(--transition-smooth);
        animation: fadeIn 0.5s ease-out;
        animation-fill-mode: both;
        position: relative;
        width: 100%;
    }

    .subcategory-card:nth-child(1) { animation-delay: 0.1s; }
    .subcategory-card:nth-child(2) { animation-delay: 0.2s; }
    .subcategory-card:nth-child(3) { animation-delay: 0.3s; }

    .subcategory-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
        border-color: currentColor;
    }

    .subcategory-card.na-selected {
        background: linear-gradient(145deg, #f1f5f9, #e2e8f0);
        border: 2px solid #94a3b8 !important;
        opacity: 0.8;
    }

    .subcategory-title {
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 2px solid rgba(0, 0, 0, 0.05);
    }

    .checkbox-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .checkbox-item {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        cursor: pointer;
        padding: 8px 12px;
        border-radius: 12px;
        transition: var(--transition-smooth);
    }

    .checkbox-item:hover {
        background: rgba(0, 0, 0, 0.02);
    }

    .checkbox-item input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

    .checkbox-custom {
        position: relative;
        width: 22px;
        height: 22px;
        background: white;
        border: 2px solid #e2e8f0;
        border-radius: 6px;
        transition: var(--transition-smooth);
        flex-shrink: 0;
        margin-top: 2px;
    }

    .checkbox-item:hover .checkbox-custom {
        border-color: currentColor;
        box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
    }

    .checkbox-item input:checked ~ .checkbox-custom {
        background: currentColor;
        border-color: transparent;
    }

    .checkbox-custom:after {
        content: "";
        position: absolute;
        display: none;
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .checkbox-item input:checked ~ .checkbox-custom:after {
        display: block;
    }

    .checkbox-label {
        flex: 1;
        font-size: 0.95rem;
        color: var(--primary-black-light);
        line-height: 1.5;
    }

    .checkbox-item.disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .checkbox-item.disabled:hover {
        background: transparent;
        transform: none;
    }

    .checkbox-item.disabled .checkbox-custom {
        background: #e2e8f0;
        border-color: #cbd5e1 !important;
    }

    /* N/A Option Styles */
    .na-divider {
        margin: 20px 0 15px 0;
        border-top: 2px dashed #e2e8f0;
        position: relative;
    }

    .na-divider::after {
        content: '◈';
        position: absolute;
        top: -10px;
        left: 50%;
        transform: translateX(-50%);
        background: white;
        padding: 0 10px;
        color: #94a3b8;
        font-size: 14px;
    }

    .na-container {
        padding: 10px 0 5px 0;
        background: linear-gradient(to bottom, transparent, rgba(148, 163, 184, 0.05));
        border-radius: 12px;
    }

    .na-option {
        display: flex;
        align-items: center;
        gap: 12px;
        cursor: pointer;
        padding: 12px 16px;
        border-radius: 12px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        transition: all 0.3s ease;
    }

    .na-option:hover {
        background: #f1f5f9;
        border-color: #94a3b8;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }

    .na-option input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .na-checkbox {
        position: relative;
        display: inline-block;
        width: 22px;
        height: 22px;
        background: white;
        border: 2px solid #94a3b8;
        border-radius: 6px;
        transition: all 0.2s ease;
        flex-shrink: 0;
    }

    .na-option input[type="checkbox"]:checked ~ .na-checkbox {
        background: #64748b;
        border-color: #64748b;
    }

    .na-option input[type="checkbox"]:checked ~ .na-checkbox::after {
        content: "";
        position: absolute;
        left: 7px;
        top: 3px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .na-label {
        font-size: 0.95rem;
        font-weight: 500;
        color: #475569;
        flex: 1;
        line-height: 1.5;
    }

    .na-option:hover .na-label {
        color: #1e293b;
    }

    /* Individual N/A options for VPN/RDP */
    .item-with-na {
        margin-bottom: 15px;
        padding: 12px;
        border-radius: 12px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

    .item-with-na .main-checkbox {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    .item-with-na .na-suboption {
        margin-left: 34px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .item-with-na .na-suboption label {
        display: flex;
        align-items: center;
        gap: 5px;
        cursor: pointer;
        font-size: 0.9rem;
    }

    .item-with-na .na-suboption input[type="checkbox"] {
        accent-color: #94a3b8;
        width: 16px;
        height: 16px;
    }

    /* ===== FILE UPLOAD STYLES ===== */
    .upload-container {
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #e2e8f0;
    }

    .upload-label {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: #f8fafc;
        border: 2px dashed #cbd5e1;
        border-radius: 12px;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.9rem;
        color: #475569;
        font-weight: 500;
    }

    .upload-label:hover {
        border-color: var(--primary-red);
        background: rgba(220, 38, 38, 0.05);
        color: var(--primary-red);
    }

    .upload-label i {
        font-size: 1.2rem;
    }

    .file-input {
        display: none;
    }

    .file-info {
        margin-top: 10px;
        padding: 8px 12px;
        background: #f1f5f9;
        border-radius: 8px;
        font-size: 0.85rem;
        color: #1e293b;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .file-name {
        flex: 1;
        word-break: break-all;
    }

    .file-remove {
        color: #dc2626;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        transition: all 0.2s ease;
    }

    .file-remove:hover {
        background: rgba(220, 38, 38, 0.1);
    }

    .upload-error {
        color: #dc2626;
        font-size: 0.8rem;
        margin-top: 5px;
        padding: 5px 10px;
        background: #fee2e2;
        border-radius: 6px;
    }

    /* ===== NAVIGATION ===== */
    .navigation {
        padding: 0 40px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 1100px;
        margin: 0 auto;
        flex-wrap: wrap;
        gap: 20px;
    }

    .nav-btn {
        display: inline-flex;
        align-items: center;
        gap: 15px;
        padding: 16px 32px;
        border-radius: var(--radius-full);
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-bounce);
        border: none;
        background: white;
        color: var(--primary-black);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
        border: 1px solid #e2e8f0;
    }

    .nav-btn:hover:not(:disabled) {
        transform: translateY(-3px);
        box-shadow: var(--shadow-xl);
    }

    .nav-btn.next {
        background: var(--gradient-primary);
        color: white;
        border: none;
    }

    .nav-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .step-indicator {
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--primary-black-light);
    }

    .step-indicator strong {
        color: var(--primary-red);
        font-size: 1.5rem;
        margin-right: 5px;
    }

    /* ===== SUBMIT BUTTON ===== */
    .submit-wrapper {
        padding: 0 40px 40px;
        text-align: center;
        max-width: 1100px;
        margin: 0 auto;
    }

    .submit-btn {
        background: var(--gradient-primary);
        color: white;
        padding: 18px 50px;
        border: none;
        border-radius: var(--radius-full);
        font-size: 1.1rem;
        font-weight: 700;
        cursor: pointer;
        transition: var(--transition-bounce);
        box-shadow: 0 20px 30px -10px rgba(220, 38, 38, 0.3);
        display: inline-flex;
        align-items: center;
        gap: 15px;
    }

    .submit-btn:hover {
        transform: translateY(-5px) scale(1.05);
        box-shadow: 0 25px 40px -10px rgba(220, 38, 38, 0.4);
    }

    .submit-btn i {
        transition: transform 0.3s ease;
    }

    .submit-btn:hover i {
        transform: translateX(5px);
    }

    /* ===== MESSAGES ===== */
    .success-message,
    .error-message {
        max-width: 900px;
        margin: 20px auto;
        padding: 20px 30px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        gap: 15px;
        animation: slideDown 0.5s ease;
    }

    .success-message {
        background: #d1fae5;
        border-left: 6px solid #059669;
        color: #065f46;
    }

    .error-message {
        background: #fee2e2;
        border-left: 6px solid #dc2626;
        color: #991b1b;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ===== RESPONSIVE DESIGN ===== */
    @media (max-width: 1200px) {
        .intro-title .title-gradient { font-size: 3rem; }
        .intro-title .title-block { font-size: 2.5rem; }
        .intro-features { gap: 20px; }
        .intro-features-container { padding: 0 40px; }
        .user-info-premium { margin: 20px 40px; }
    }

    @media (max-width: 1024px) {
        .intro-features { grid-template-columns: repeat(2, 1fr); }
        .user-info-fields { grid-template-columns: 1fr; }
        .intro-stats { flex-direction: column; gap: 30px; align-items: center; }
        .intro-header { padding: 40px 30px; }
        .subcategory-grid { grid-template-columns: repeat(2, 1fr); }
    }

    @media (max-width: 768px) {
        .intro-header { padding: 30px 20px; }
        .intro-title .title-gradient { font-size: 2.2rem; }
        .intro-title .title-block { font-size: 1.8rem; }
        .intro-subtitle-wrapper { flex-direction: column; gap: 15px; }
        .subtitle-decoration { width: 100px; }
        .intro-features-container { padding: 0 20px; }
        .intro-features { grid-template-columns: 1fr; }
        .user-info-premium { margin: 20px; padding: 30px 20px; }
        .user-info-title { flex-direction: column; gap: 10px; }
        .trust-badges { flex-direction: column; align-items: center; gap: 15px; }
        .intro-footer { padding: 30px 20px; }
        .category-header { flex-direction: column; text-align: center; }
        .subcategory-grid { grid-template-columns: 1fr; padding: 30px 20px; }
        .navigation { flex-direction: column; }
        .nav-btn { width: 100%; justify-content: center; }
        .progress-container { flex-direction: column; align-items: flex-start; }
        .progress-steps { width: 100%; }
    }

    @media (max-width: 480px) {
        .intro-title .title-gradient { font-size: 1.8rem; }
        .intro-title .title-block { font-size: 1.5rem; }
        .intro-badge span { font-size: 0.75rem; }
        .start-btn { padding: 16px 30px; font-size: 1.1rem; }
        .category-info h2 { font-size: 1.6rem; }
        .overlay-title { font-size: 2rem; }
    }