/* چیدمان صفحات معرفی عمومی و بخش‌های فراخوان اقدام. */
.hero {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 9vw, 7.5rem) 0;
}
.hero::before {
    content: '';
    position: absolute;
    inset: -20% auto auto 55%;
    width: min(42rem, 70vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 68%);
    pointer-events: none;
}
.hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}
.hero__copy {
    max-width: 45rem;
}
.hero__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.hero__panel {
    padding: 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: linear-gradient(145deg, var(--color-surface), var(--color-surface-2));
    box-shadow: var(--shadow-panel);
}
.hero__signal {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    padding: 0.9rem;
    border-bottom: 1px solid var(--color-border);
}
.hero__signal:last-child {
    border-bottom: 0;
}
.hero__signal strong {
    color: var(--color-heading);
}
.hero__signal span {
    color: var(--color-muted);
    font-size: 0.85rem;
}
.cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
    border-radius: var(--radius-xl);
    background: linear-gradient(130deg, var(--color-primary-soft), var(--color-surface));
}
.cta p {
    margin-bottom: 0;
    color: var(--color-muted);
}
.brand-motif {
    position: relative;
    overflow: hidden;
}
.brand-motif::after {
    content: '';
    position: absolute;
    inset: auto -4rem -5rem auto;
    width: 13rem;
    height: 13rem;
    border: 1px solid color-mix(in srgb, var(--color-primary) 22%, transparent);
    transform: rotate(45deg);
    box-shadow:
        0 0 0 1.2rem color-mix(in srgb, var(--color-primary) 5%, transparent),
        0 0 0 2.4rem color-mix(in srgb, var(--color-primary) 4%, transparent);
    pointer-events: none;
}
@media (max-width: 48rem) {
    .hero__grid {
        grid-template-columns: 1fr;
    }
    .hero__panel {
        max-width: 34rem;
    }
    .cta {
        grid-template-columns: 1fr;
    }
}