:root {
            --primary-color: #0f172a;
            --secondary-color: #f59e0b;
            --accent-color: #ea580c;
            --text-dark: #1e293b;
            --text-light: #64748b;
            --bg-light: #f8fafc;
            --white: #ffffff;
            --primary-light: #1e293b;
            --secondary-light: #fbbf24;
            --radius: 16px;
            --shadow: 0 10px 25px -5px rgba(0,0,0,0.1);
            --shadow-lg: 0 20px 40px -10px rgba(15,23,42,0.18);
        }

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

        body {
            font-family: 'Vazirmatn', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            line-height: 1.8;
        }

        a { text-decoration:none; color:inherit; transition:0.3s; }

        .comp-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }

        .comp-btn-primary {
            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-light));
            color: var(--primary-color);
            padding: 12px 28px;
            border-radius: 12px;
            font-weight: 800;
            box-shadow: 0 4px 15px rgba(245,158,11,0.35);
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: none;
            cursor: pointer;
            font-size: 0.95rem;
            transition: 0.3s;
        }

        .comp-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(245,158,11,0.45);
            color: var(--primary-color);
        }

        .comp-btn-outline {
            border: 2px solid rgba(255,255,255,0.35);
            color: white;
            padding: 10px 24px;
            border-radius: 12px;
            font-weight: 600;
            transition: 0.3s;
        }

        .comp-btn-outline:hover {
            background: rgba(255,255,255,0.12);
            border-color: white;
            color: white;
        }

        .comp-btn-danger {
            background: linear-gradient(135deg, var(--accent-color), #f97316);
            color: white;
            padding: 10px 22px;
            border-radius: 10px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            transition: 0.3s;
        }

        .comp-btn-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(234,88,12,0.4);
            color: white;
        }

        .comp-btn-blue {
            background: linear-gradient(135deg, #3b82f6, #60a5fa);
            color: white;
            padding: 10px 22px;
            border-radius: 10px;
            font-weight: 700;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border: none;
            cursor: pointer;
            font-size: 0.9rem;
            transition: 0.3s;
        }

        .comp-btn-blue:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 18px rgba(59,130,246,0.4);
            color: white;
        }

        .comp-hero-cover {
            height: 340px;
            width: 100%;
            background-color: var(--primary-color);
            position: relative;
            overflow: hidden;
        }

        .comp-hero-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.65;
        }

        .comp-hero-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgba(15,23,42,0.2) 0%, var(--bg-light) 100%);
        }

        .comp-profile-grid {
            display: grid;
            grid-template-columns: 340px 1fr;
            gap: 30px;
            margin-top: -110px;
            position: relative;
            z-index: 2;
        }

        .comp-sidebar-card {
            background: var(--white);
            border-radius: var(--radius);
            padding: 30px;
            text-align: center;
            box-shadow: var(--shadow-lg);
            position: sticky;
            top: 20px;
            border-top: 5px solid var(--secondary-color);
        }

        .comp-logo-box {
            width: 140px;
            height: 140px;
            background: var(--white);
            border-radius: 24px;
            padding: 10px;
            margin: 0 auto 20px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.12);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid #e2e8f0;
        }

        .comp-logo-box img {
            max-width: 100%;
            max-height: 100%;
            border-radius: 16px;
            object-fit: contain;
        }

        .comp-def-logo {
            font-size: 60px;
            color: #cbd5e1;
        }

        .comp-name {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary-color);
            margin-bottom: 5px;
        }

        .comp-en-name {
            font-size: 0.95rem;
            color: var(--secondary-color);
            font-weight: 600;
            margin-bottom: 20px;
            letter-spacing: 0.5px;
        }

        .comp-badges {
            margin-bottom: 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            justify-content: center;
        }

        .comp-side-info-row {
            display: flex;
            justify-content: space-between;
            padding: 13px 0;
            border-bottom: 1px dashed #e2e8f0;
            font-size: 0.92rem;
            color: var(--text-light);
        }

        .comp-side-info-row:last-of-type { border-bottom: none; }

        .comp-side-info-row i {
            color: var(--secondary-color);
            width: 22px;
        }

        .comp-side-info-row strong { color: var(--primary-color); font-weight: 700; }

        .comp-completion-box {
            margin-top: 22px;
            background: var(--bg-light);
            padding: 14px 16px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
        }

        .comp-completion-header {
            display: flex;
            justify-content: space-between;
            font-size: 0.82rem;
            margin-bottom: 8px;
        }

        .comp-completion-header span { color: var(--text-light); }
        .comp-completion-header strong { color: var(--primary-color); }

        .comp-completion-track {
            height: 7px;
            background: #e2e8f0;
            border-radius: 4px;
            overflow: hidden;
        }

        .comp-completion-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--secondary-color), var(--accent-color));
            border-radius: 4px;
            transition: width 1s ease;
        }

        .comp-social-links {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 22px;
            flex-wrap: wrap;
        }

        .comp-social-btn {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            background: var(--bg-light);
            color: var(--primary-light);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            transition: 0.3s;
            border: 1px solid #e2e8f0;
        }

        .comp-social-btn:hover {
            background: var(--primary-color);
            color: var(--secondary-color);
            transform: translateY(-3px);
            border-color: var(--primary-color);
        }

        .comp-main-section {
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .comp-content-card {
            background: var(--white);
            border-radius: var(--radius);
            padding: 32px 35px;
            box-shadow: var(--shadow);
            transition: box-shadow 0.3s;
        }

        .comp-content-card:hover {
            box-shadow: var(--shadow-lg);
        }

        .comp-section-title {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 12px;
            padding-bottom: 14px;
            border-bottom: 2px solid var(--bg-light);
        }

        .comp-section-title i {
            color: var(--secondary-color);
            font-size: 1.3rem;
            background: #fffbeb;
            width: 38px;
            height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
        }

        .comp-slogan-card {
            background: linear-gradient(135deg, #fffbeb, #fef3c7);
            border-right: 5px solid var(--secondary-color);
            text-align: center;
            border-radius: var(--radius);
            padding: 32px 35px;
            box-shadow: var(--shadow);
        }

        .comp-slogan-card h3 {
            color: var(--primary-color);
            font-size: 1.15rem;
            line-height: 1.8;
            font-weight: 700;
        }

        .comp-slogan-icon {
            color: var(--secondary-color);
            font-size: 1.5rem;
            margin-bottom: 12px;
            opacity: 0.5;
        }

        .comp-description-text {
            text-align: justify;
            color: #4b5563;
            line-height: 2.2;
            white-space: pre-wrap;
            font-size: 0.97rem;
        }

        .comp-details-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
        }

        .comp-detail-item {
            background: var(--bg-light);
            padding: 16px;
            border-radius: 14px;
            border: 1px solid #e2e8f0;
            transition: 0.3s;
        }

        .comp-detail-item:hover {
            border-color: var(--secondary-color);
            background: #fffdf5;
            transform: translateY(-2px);
        }

        .comp-detail-label {
            font-size: 0.82rem;
            color: var(--text-light);
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.3px;
        }

        .comp-detail-value {
            font-size: 1rem;
            font-weight: 700;
            color: var(--primary-color);
            display: block;
        }

        .comp-sub-section-title {
            font-size: 0.97rem;
            color: var(--primary-color);
            margin-bottom: 12px;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .comp-sub-section-title i { color: var(--secondary-color); }

        .comp-field-row {
            margin-bottom: 18px;
        }

        .comp-field-label {
            font-size: 0.88rem;
            color: var(--text-light);
            font-weight: 700;
            margin-bottom: 8px;
            display: block;
        }

        .comp-field-text {
            color: var(--text-dark);
            font-size: 0.95rem;
            line-height: 1.7;
        }

        .comp-tag {
            display: inline-block;
            padding: 5px 14px;
            background: #f1f5f9;
            color: var(--primary-color);
            border-radius: 8px;
            font-size: 0.88rem;
            margin: 0 4px 8px 0;
            font-weight: 600;
            border: 1px solid #e2e8f0;
            transition: 0.2s;
        }

        .comp-tag:hover { border-color: var(--secondary-color); }

        .comp-tag-amber {
            background: #fffbeb;
            color: #92400e;
            border-color: #fcd34d;
        }

        .comp-tag-blue {
            background: #eff6ff;
            color: #1d4ed8;
            border-color: #bfdbfe;
        }

        .comp-tag-green {
            background: #f0fdf4;
            color: #15803d;
            border-color: #bbf7d0;
        }

        .comp-tag-red {
            background: #fef2f2;
            color: #b91c1c;
            border-color: #fecaca;
        }

        .comp-tag-orange {
            background: #fff7ed;
            color: #c2410c;
            border-color: #fed7aa;
        }

        .comp-divider {
            margin: 20px 0;
            border: none;
            border-top: 1px dashed #e2e8f0;
        }

        .comp-gallery-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
            gap: 14px;
        }

        .comp-gallery-item {
            position: relative;
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.08);
            cursor: pointer;
            height: 155px;
        }

        .comp-gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: 0.4s;
        }

        .comp-gallery-item:hover img { transform: scale(1.1); }

        .comp-gallery-overlay {
            position: absolute;
            inset: 0;
            background: rgba(15,23,42,0.45);
            opacity: 0;
            transition: 0.3s;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .comp-gallery-item:hover .comp-gallery-overlay { opacity: 1; }

        .comp-gallery-overlay i {
            color: white;
            font-size: 2rem;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }

        .comp-download-card {
            background: linear-gradient(135deg, #fff7ed, #ffedd5);
            border: 2px dashed #fed7aa;
            border-radius: 16px;
            padding: 28px;
            text-align: center;
            flex: 1;
            min-width: 200px;
            transition: 0.3s;
        }

        .comp-download-card:hover {
            border-color: var(--accent-color);
            transform: translateY(-3px);
        }

        .comp-download-card-blue {
            background: linear-gradient(135deg, #eff6ff, #dbeafe);
            border: 2px dashed #bfdbfe;
        }

        .comp-download-card-blue:hover { border-color: #3b82f6; }

        .comp-download-icon {
            font-size: 2.5rem;
            margin-bottom: 12px;
            display: block;
        }

        .comp-download-title {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 0.95rem;
            margin-bottom: 14px;
        }

        .comp-star-wrapper {
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            gap: 5px;
            margin-bottom: 15px;
        }

        .comp-star-icon {
            font-size: 1.8rem;
            color: #cbd5e1;
            cursor: pointer;
            transition: color 0.2s;
        }

        .comp-star-icon.active { color: var(--secondary-color); }

        .comp-review-form {
            background: var(--bg-light);
            padding: 22px;
            border-radius: 14px;
            margin-bottom: 28px;
            border: 1px solid #e2e8f0;
        }

        .comp-review-form-title {
            font-weight: 700;
            margin-bottom: 12px;
            color: var(--primary-color);
            font-size: 0.95rem;
        }

        .comp-review-textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            min-height: 100px;
            margin-bottom: 12px;
            font-family: 'Vazirmatn';
            margin-top: 14px;
            font-size: 0.93rem;
            color: var(--text-dark);
            resize: vertical;
            transition: border-color 0.3s;
        }

        .comp-review-textarea:focus { border-color: var(--secondary-color); }

        .comp-review-item {
            border-bottom: 1px solid #f1f5f9;
            padding: 18px 0;
        }

        .comp-review-item:last-child { border-bottom: none; padding-bottom: 0; }

        .comp-review-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .comp-review-user {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 0.95rem;
        }

        .comp-review-stars { color: var(--secondary-color); letter-spacing: 2px; }

        .comp-review-text {
            color: #4b5563;
            font-size: 0.9rem;
            line-height: 1.7;
        }

        .comp-alert {
            padding: 14px 18px;
            border-radius: 12px;
            margin-bottom: 18px;
            font-size: 0.92rem;
            font-weight: 600;
        }

        .comp-alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
        .comp-alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
        .comp-alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }

        .comp-lightbox-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            padding-top: 60px;
            left: 0; top: 0;
            width: 100%; height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.92);
        }

        .comp-lightbox-content {
            margin: auto;
            display: block;
            max-width: 90%;
            max-height: 85vh;
            border-radius: 10px;
            border: 2px solid rgba(255,255,255,0.2);
        }

        .comp-lightbox-close {
            position: absolute;
            top: 22px;
            right: 35px;
            color: #f1f1f1;
            font-size: 42px;
            font-weight: bold;
            transition: 0.3s;
            cursor: pointer;
            line-height: 1;
        }

        .comp-lightbox-close:hover { color: var(--secondary-color); }

        .comp-index-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, #1e293b 100%);
            color: white;
            padding: 20px 0 80px;
            border-bottom-left-radius: 60px;
            border-bottom-right-radius: 60px;
            margin-bottom: 50px;
            box-shadow: 0 20px 40px -10px rgba(15,23,42,0.4);
        }

        .comp-nav-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 60px;
        }

        .comp-logo-text {
            font-size: 1.8rem;
            font-weight: 900;
            letter-spacing: -1px;
        }

        .comp-logo-text span { color: var(--secondary-color); }

        .comp-nav-btns { display: flex; gap: 10px; }

        .comp-hero-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: center;
        }

        .comp-hero-title {
            font-size: 3rem;
            font-weight: 900;
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .comp-hero-subtitle {
            font-size: 1.1rem;
            color: #94a3b8;
            margin-bottom: 30px;
        }

        .comp-stats-row { display: flex; gap: 20px; }

        .comp-stat-box {
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.12);
            padding: 22px;
            border-radius: 16px;
            flex: 1;
            text-align: center;
            backdrop-filter: blur(10px);
        }

        .comp-stat-num {
            font-size: 2.2rem;
            font-weight: 800;
            display: block;
            color: var(--secondary-color);
        }

        .comp-stat-lbl { font-size: 0.82rem; color: #cbd5e1; }

        .comp-cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 28px;
        }

        .comp-card {
            background: white;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
            transition: 0.3s;
            display: flex;
            flex-direction: column;
            border: 1px solid #f1f5f9;
        }

        .comp-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px -12px rgba(0,0,0,0.18);
            border-color: #e2e8f0;
        }

        .comp-card-header {
            height: 160px;
            position: relative;
            background: #e2e8f0;
        }

        .comp-card-header img { width: 100%; height: 100%; object-fit: cover; }

        .comp-card-logo {
            width: 70px;
            height: 70px;
            background: white;
            border-radius: 14px;
            position: absolute;
            bottom: -35px;
            right: 25px;
            padding: 5px;
            box-shadow: 0 5px 18px rgba(0,0,0,0.12);
            border: 2px solid #f1f5f9;
        }

        .comp-card-logo img { width: 100%; height: 100%; border-radius: 10px; object-fit: contain; }

        .comp-card-body {
            padding: 48px 25px 25px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .comp-card-title {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--primary-color);
            margin-bottom: 5px;
        }

        .comp-card-industry {
            font-size: 0.88rem;
            color: var(--secondary-color);
            margin-bottom: 14px;
            font-weight: 600;
        }

        .comp-card-excerpt {
            font-size: 0.88rem;
            color: var(--text-light);
            line-height: 1.7;
            margin-bottom: 20px;
            flex-grow: 1;
        }

        .comp-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f1f5f9;
            padding-top: 15px;
            margin-top: auto;
        }

        .comp-card-city { font-size: 0.85rem; color: #94a3b8; }
        .comp-card-city i { color: var(--accent-color); margin-left: 4px; }

        @media (max-width: 992px) {
            .comp-profile-grid { grid-template-columns: 1fr; margin-top: -50px; }
            .comp-sidebar-card { position: static; margin-bottom: 28px; }
            .comp-hero-content { grid-template-columns: 1fr; text-align: center; }
            .comp-stats-row { justify-content: center; }
        }

        @media (max-width: 768px) {
            .comp-nav-btns .comp-btn-outline span { display: none; }
            .comp-nav-btns .comp-btn-outline {
                padding: 0;
                width: 46px;
                height: 46px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 12px;
            }
            .comp-nav-btns .comp-btn-outline i { font-size: 1.2rem; margin: 0; }
            .comp-hero-title { font-size: 2rem; }
        }