/* ============================================================
   resource/alborzsamane2/css/modern.css — لایه ظاهر به‌روز قالب «البرز سامانه ۲»
   روی استایل‌های header.php و main.php می‌نشیند و فقط ظاهر را عوض می‌کند (ساختار و
   تنظیمات قالب دست نمی‌خورند). چون استایل صفحه اصلی داخل body چاپ می‌شود، انتخابگرهایی
   که با آن هم‌پوشانی دارند با پیشوند body نوشته شده‌اند تا بعد از آن اعمال شوند.
   رنگ اصلی همچنان از --brand (تنظیم «رنگ اصلی» قالب) می‌آید.
   ============================================================ */

:root {
    --accent-2: #0d9488;                                    /* فیروزه‌ای برای گرادیان کنار سبز برند */
    --ink: #0b1220;
    --grad-brand: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 55%, var(--accent-2)) 100%);
    --grad-ink: linear-gradient(135deg, var(--ink) 0%, color-mix(in srgb, var(--brand) 35%, var(--ink)) 100%);
    --radius-xl: 22px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --shadow-card: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px -12px rgba(15, 23, 42, .10);
    --shadow-hover: 0 2px 4px rgba(15, 23, 42, .04), 0 24px 48px -16px color-mix(in srgb, var(--brand) 35%, rgba(15, 23, 42, .25));
}
::selection { background: color-mix(in srgb, var(--brand) 22%, transparent); color: var(--text-primary); }
html { border-top: 0; }
body::before {                                              /* نوار باریک گرادیانی بالای صفحه به‌جای خط صاف */
    content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 2000;
    background: var(--grad-brand);
}

/* ─── دکمه‌ها ─── */
body .btn-as-primary {
    background: var(--grad-brand); border: 0; border-radius: var(--radius-md);
    padding: .7rem 1.45rem;
    box-shadow: 0 8px 20px -8px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
}
body .btn-as-primary:hover {
    background: var(--grad-brand); filter: brightness(1.06);
    transform: translateY(-2px); box-shadow: 0 14px 28px -10px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .2);
}
body .btn-as-outline {
    border-radius: var(--radius-md); padding: .7rem 1.45rem;
    border: 1px solid var(--border-color); color: var(--text-primary) !important;
    background: rgba(255, 255, 255, .8); backdrop-filter: blur(6px);
}
body .btn-as-outline:hover { border-color: var(--brand); color: var(--brand) !important; background: #fff; }

/* ─── سربرگ: لینک فعال و دکمه تماس ─── */
body .as-header { background: rgba(255, 255, 255, .78); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); }
body .as-header.scrolled { background: rgba(255, 255, 255, .92); box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .35); }
body .as-menu a.active, body .as-menu .nav-link.active, body .as-menu-link.active { background: var(--brand-soft) !important; }

/* ─── بخش اول (Hero) ─── */
body .as-hero {
    padding-block: 6rem 4.5rem;
    background:
        radial-gradient(600px 380px at 85% 0%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%),
        radial-gradient(520px 360px at 10% 20%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 70%),
        linear-gradient(180deg, #fff 0%, var(--bg-canvas) 100%);
    isolation: isolate;
}
body .as-hero::before {                                     /* شبکه نقطه‌ای محو */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(color-mix(in srgb, var(--brand) 22%, transparent) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
            mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
    opacity: .55;
}
body .as-hero .as-badge {
    background: rgba(255, 255, 255, .85); border: 1px solid var(--border-color);
    box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .25); color: var(--text-secondary);
    padding: .4rem 1rem .4rem .9rem;
}
body .as-hero .as-badge .material-symbols-outlined { color: var(--brand); }
body .as-hero-title {
    font-size: clamp(1.9rem, 3.6vw, 3.1rem); line-height: 1.38; letter-spacing: -.6px;
    background: linear-gradient(135deg, var(--text-primary) 35%, var(--brand) 75%, var(--accent-2) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
body .as-hero-sub { font-size: 1.08rem; max-width: 720px; margin-inline: auto; }
body .as-stats-strip { gap: 1rem; }
body .as-stat-box {
    background: rgba(255, 255, 255, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .9); border-top: 1px solid rgba(255, 255, 255, .9);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card); position: relative; overflow: hidden;
}
body .as-stat-box::after {                                  /* خط گرادیانی کوچک زیر هر آمار */
    content: ""; position: absolute; inset: auto 30% 0 30%; height: 3px; border-radius: 3px 3px 0 0;
    background: var(--grad-brand); opacity: .85;
}
body .as-stat-number {
    background: var(--grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
    font-size: 2.3rem;
}

/* ─── سرتیتر بخش‌ها ─── */
body .as-section { padding-block: 5rem; }
body .as-section-head { margin-bottom: 3.4rem; }
body .as-section-title { font-size: clamp(1.45rem, 2.4vw, 2.05rem); letter-spacing: -.3px; }
body .as-section-title::after {
    content: ""; display: block; width: 56px; height: 4px; border-radius: 4px;
    margin: .85rem auto 0; background: var(--grad-brand);
}
body .as-badge { border-radius: 99px; }

/* ─── کارت‌ها ─── */
body .as-card, body .card {
    border: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
body .as-card:hover, body .card:hover {
    transform: translateY(-6px); box-shadow: var(--shadow-hover);
    border-color: var(--brand-border); border-top-color: var(--brand-border);
}

/* کارت خدمات و مزایا: خط گرادیانی بالا که با hover باز می‌شود + آیکن گرادیانی */
body .as-service-card, body .as-why-card { position: relative; }
body .as-service-card::before, body .as-why-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
    background: var(--grad-brand); transform: scaleX(0); transform-origin: right;
    transition: transform .45s cubic-bezier(.16, 1, .3, 1);
}
body .as-service-card:hover::before, body .as-why-card:hover::before { transform: scaleX(1); }
body .as-service-icon {
    width: 60px; height: 60px; border-radius: 16px; border: 0;
    background: var(--grad-brand); color: #fff;
    box-shadow: 0 12px 24px -12px var(--brand-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
    transition: transform .35s cubic-bezier(.16, 1, .3, 1);
}
body .as-card:hover .as-service-icon { transform: rotate(-6deg) scale(1.06); }
body .as-service-tag {
    border-radius: 99px; background: var(--brand-soft); border-color: transparent;
    color: color-mix(in srgb, var(--brand) 80%, var(--text-primary)); padding: .2rem .7rem;
}

/* بخش «چرا ما» روی زمینه رنگی ملایم */
body #why-us {
    background:
        radial-gradient(700px 300px at 50% 0%, color-mix(in srgb, var(--brand) 8%, transparent), transparent 70%),
        linear-gradient(180deg, transparent, color-mix(in srgb, var(--brand) 4%, transparent));
}

/* نمونه‌کارها و مطالب: سایه گرادیانی روی تصویر */
body .as-portfolio-img-wrap, body .as-news-img-wrap { position: relative; }
body .as-portfolio-img-wrap::after, body .as-news-img-wrap::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, rgba(11, 18, 32, .35) 100%);
    opacity: 0; transition: opacity .35s ease;
}
body .as-card:hover .as-portfolio-img-wrap::after, body .as-card:hover .as-news-img-wrap::after { opacity: 1; }
body .as-portfolio-img-wrap { height: 230px; }
body .as-portfolio-title a, body .as-news-title a { color: var(--text-primary); }
body .as-portfolio-title a:hover, body .as-news-title a:hover { color: var(--brand); }

/* مشتریان */
body .as-client-card {
    border-top: 1px solid var(--border-color); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
}
body .as-client-card:hover { border-color: var(--brand-border); }
body .as-client-logo { max-height: 72px; filter: grayscale(100%) opacity(.75); }
body .as-client-card:hover .as-client-logo { filter: none; }

/* ─── بنر فراخوان (CTA) ─── */
body .as-cta-banner {
    position: relative; overflow: hidden; isolation: isolate;
    background: var(--grad-ink); border: 0; border-radius: var(--radius-xl);
    padding: 4rem 2.5rem; box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--brand) 60%, #000);
}
body .as-cta-banner::before, body .as-cta-banner::after {
    content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
    filter: blur(10px);
}
body .as-cta-banner::before {
    width: 420px; height: 420px; inset: -180px auto auto -120px;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%);
}
body .as-cta-banner::after {
    width: 360px; height: 360px; inset: auto -120px -200px auto;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 45%, transparent), transparent 70%);
}
body .as-cta-banner h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
body .as-cta-banner .btn-light { border-radius: var(--radius-md) !important; transition: transform .25s ease, box-shadow .25s ease; }
body .as-cta-banner .btn-light:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5) !important; }

/* ─── پابرگ ─── */
body .as-footer {
    background:
        radial-gradient(800px 300px at 100% 0%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 70%),
        linear-gradient(180deg, #0b1220 0%, #070b14 100%);
    border-top: 0;
}
body .as-footer::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--grad-brand);
}
body .as-footer-social a { border-radius: 12px; }
body .as-footer-social a:hover { background: var(--grad-brand); border-color: transparent; }

/* ─── نمادها ─── */
body .as-trust__box {
    background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
    padding: .5rem; box-shadow: var(--shadow-card);
}

/* حرکت کمتر برای کسی که در سیستم‌عامل خواسته */
@media (prefers-reduced-motion: reduce) {
    body .as-card, body .as-service-icon, body .btn-as-primary, body .btn-as-outline { transition: none; }
    body .as-card:hover { transform: none; }
}
@media (max-width: 991.98px) {
    body .as-hero { padding-block: 4rem 3rem; }
    body .as-section { padding-block: 3.5rem; }
    body .as-cta-banner { padding: 2.6rem 1.4rem; }
}