@import url('./fonts.css');

:root {
    --brand-dark: #021D3A;
    --brand-dark-2: #00021f;
    --brand-orange: #f7B000;
    --brand-text: #253036;
    --color-brand: #FF7B00;
    --soft: #eef2f6;
    --radius-xl: 1.5rem;
    --footer-bg: #021D3A;
    --footer-text: #c2d7d9;
    --footer-heading: #e9f3f4;
}

html,
body {
    height: 100%;
}

body {
    font-family: 'Vazir', system-ui, -apple-system, Tahoma, sans-serif;
    background: #fff;
    color: var(--brand-text);
    margin: 0;
    line-height: 1.7;
}

/* ناوبری */
.site-header .nav-link {
    color: var(--brand-text);
    transition: color 0.2s;
}

.site-header .nav-link:hover {
    color: var(--brand-dark);
}

/* دو ستونه */
.split-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 2rem 1rem;
    background: radial-gradient(1200px 600px at 90% 10%, #fef6f0 0, #ffffff 60%) no-repeat,
        radial-gradient(800px 400px at 10% 100%, #f1f6ff 0, #ffffff 60%) no-repeat;
}

.pane {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(31, 34, 87, .02), transparent 40%) #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .05), inset 0 1px 0 rgba(255, 255, 255, .6);
    overflow: hidden;
}

.pane::after {
    content: "";
    position: absolute;
    inset: -20% -10% auto -10%;
    height: 55%;
    border-radius: 0 0 50% 50%/0 0 30% 30%;
    background: radial-gradient(120% 80% at 50% -10%, rgba(31, 34, 87, .05), transparent 60%);
    pointer-events: none;
}

/* بلاک هیرو */
.hero-block {
    margin: .75rem 1rem 0;
}

.hero-media {
    height: 240px;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
    background: #dfe6ef;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: scale(1.03);
}

.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 60% at 10% 15%, rgba(255, 255, 255, .25), transparent 60%),
        linear-gradient(to bottom, rgba(0, 0, 0, .08), transparent 40%, rgba(0, 0, 0, .12));
    pointer-events: none;
}

.hero-card {
    position: relative;
    z-index: 2;
    margin: -1.4rem .5rem .75rem;
    padding: 1rem 1.25rem .9rem;
    background: rgba(255, 255, 255, .62);
    backdrop-filter: blur(12px) saturate(125%);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 1rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
}

.fq-card{
    border-radius: 1rem;
    box-shadow: 0 14px 32px rgba(0, 0, 0, .12);
}
        

.hero-card h1 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 .4rem;
    color: #1f2a33;
}

.hero-card p {
    margin: 0;
    color: #4f606a;
    line-height: 1.9;
    font-size: .98rem;
}

.feature-list {
    margin: .7rem 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.feature-list li {
    background: var(--soft);
    color: #51616b;
    border-radius: 999px;
    padding: .3rem .6rem;
    font-size: .82rem;
}

/* کارت نارنجی */
.orange-card {
    position: relative;
    margin: .25rem 1rem 1.25rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #ff7a2f 0%, var(--brand-orange) 55%, #fb5a02 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(246, 103, 34, .25);
    overflow: hidden;
}

.orange-card .shape {
    position: absolute;
    inset: -25% auto auto -10%;
    width: 55%;
    height: 170%;
    background: rgba(255, 255, 255, .07);
    border-radius: 2rem;
    transform: rotate(10deg);
    pointer-events: none;
}

.orange-card h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 .25rem;
}

.orange-card p {
    margin: 0 0 .85rem;
    font-size: 1rem;
    opacity: .95;
}

/* کارت آبی */
.blue-card {
    position: relative;
    margin: .25rem 1rem 1.25rem;
    padding: 1rem;
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #3a41a8 0%, var(--brand-dark) 55%, #00021f 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(31, 34, 87, .25);
    overflow: hidden;
}

.blue-card .shape {
    position: absolute;
    inset: -25% auto auto -10%;
    width: 55%;
    height: 170%;
    background: rgba(255, 255, 255, .07);
    border-radius: 2rem;
    transform: rotate(10deg);
    pointer-events: none;
}

.blue-card h2 {
    font-size: 1.35rem;
    font-weight: 800;
    margin: 0 0 .25rem;
}

.blue-card p {
    margin: 0 0 .85rem;
    font-size: 1rem;
    opacity: .95;
}

/* دکمه‌های دانلود */
.download-badges {
    display: grid;
    gap: .6rem;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.download-badges .btn {
    background: #fff;
    color: #1d2730;
    border: 0;
    padding: .68rem .85rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    transition: transform .15s ease, box-shadow .15s ease;
}

.download-badges .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
}

/* بخش راهنما */
.guide-section .accordion-item {
    border-radius: .5rem;
    margin-bottom: .5rem;
    overflow: hidden;
}

.guide-section .accordion-button {
    font-weight: 700;
    color: var(--brand-dark);
}

.guide-section .accordion-button:not(.collapsed) {
    background-color: #fff;
    color: var(--brand-orange);
}

/* فوتر */
.site-footer {
    background: var(--footer-bg);
    color: var(--footer-text);
}

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

.site-footer a:hover {
    color: var(--color-brand);
}

.footer-brand-name {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
}

.footer-title {
    color: var(--footer-heading);
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.dash-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.dash-list li {
    position: relative;
    padding-right: 1rem;
    margin: .55rem 0;
}

.dash-list li::before {
    content: "-";
    position: absolute;
    right: 0;
    color: #88a9ad;
}

.social a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1b3b40;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cfe6e8;
    transition: .15s ease;
}

.social a:hover {
    background: var(--color-brand);
    color: #fff;
}

.footer-bar {
    background: var(--footer-bg);
    border-top: 1px solid #174046;
    color: #9eb7ba;
}

.footer-links a {
    color: #c8dee0;
    margin: 0 .6rem;
}

.footer-links a:hover {
    color: #fff;
}

/* موبایل */
@media (max-width: 991.98px) {
    .split-2 {
        grid-template-columns: 1fr;
    }

    .hero-media {
        height: 200px;
    }
}