﻿/* ═══════ پالت مدرن و شیک ترمه کاور (تراکوتا + بژ) ═══════ */
:root {
    --tc-primary: #e67e22; /* نارنجی برند - متعادل */
    --tc-accent: #d35400; /* نارنجی تیره برای تاکید */
    --tc-bg-soft: #fdf2e9; /* پس‌زمینه بسیار ملایم */
    --tc-text-dark: #2c3e50; /* رنگ متن اصلی */
    --tc-text-muted: #5d6d7e; /* رنگ متن ثانویه */
}

/* هیرو با استایل گلس‌مورفیسم ملایم */
.about-hero {
    background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
    border-radius: 20px;
    padding: 4rem 2rem;
    box-shadow: 0 10px 30px rgba(230, 126, 34, 0.2);
}

    .about-hero .badge-brand {
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(5px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: #fff;
    }

    .about-hero h1 {
        font-size: 2.8rem;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .about-hero p {
        color: rgba(255, 255, 255, 0.9);
        font-weight: 300;
    }

/* استایل محتوا */
.content-body {
    color: var(--tc-text-dark);
    text-align: justify;
}

    .content-body h2 {
        color: var(--tc-accent);
        border-right: 4px solid var(--tc-primary);
        padding-right: 15px;
        margin-top: 2.5rem;
    }

.badge-intro {
    background: var(--tc-bg-soft);
    color: var(--tc-accent);
    border: 1px solid #fad7bc;
}

/* باکس‌های برجسته توضیحی */
.highlight-box {
    background: #fafbfc;
    border-right: 4px solid var(--tc-primary);
    border-radius: 8px;
    padding: 1.25rem;
    margin: 1.5rem 0;
}

/* دکمه‌های محصولات لینک‌دار */
.product-tag {
    background: #fff;
    color: var(--tc-text-dark);
    border: 1px solid #eee;
    transition: all 0.3s ease;
    font-weight: 500;
}

    .product-tag:hover {
        background: var(--tc-primary);
        color: #fff !important;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(230, 126, 34, 0.2);
        border-color: var(--tc-primary);
    }

    .product-tag i {
        color: var(--tc-primary);
        transition: color 0.3s;
    }

    .product-tag:hover i {
        color: #fff;
    }

/* کارت‌های ویژگی در پایین صفحه */
.feature-card {
    background: #fff;
    border: 1px solid #f1f1f1;
    border-radius: 18px;
    transition: all 0.4s ease;
}

    .feature-card:hover {
        border-color: var(--tc-bg-soft);
        background: var(--tc-bg-soft);
        transform: translateY(-5px);
    }

    .feature-card i {
        color: var(--tc-primary);
        font-size: 2.5rem;
    }
