/*!
 * sp-design.css — بنیادِ زبانِ طراحیِ نسخهٔ ۳ (Brand Color System v2.1)
 * نسخه: 1.0.0 — ۱۴۰۵/۰۶/۰۶ (2026-08-25)
 *
 * کلاس‌های مشترکِ همهٔ صفحه‌ها (به‌جز صفحهٔ اصلی که self-contained است و
 * ۴ صفحهٔ محصول که پالتِ مستقل دارند). هر قالب باید wrapper خود را
 * با کلاسِ .sp-page بسازد تا این استایل‌ها فعال شوند.
 *
 * مستندِ کامل: design-system/surrenderpath/MASTER.md — بخشِ «زبانِ طراحیِ نسخهٔ ۳»
 * لود: via mu-plugins/sp-core/inc/assets.php (سراسری)
 */

/* ── توکن‌ها ── */
:root{
  --sp-royal:#004FFF;
  --sp-royal-deep:#003FCC;
  --sp-electric:#1789FC;
  --sp-ink:#191919;
  --sp-ink-2:#2C2C2C;
  --sp-violet:#3A1772;
  --sp-dark:#2C2C2C;
  --sp-muted:#64748b;
  --sp-bg:#FFFFFF;
  --sp-bg-soft:#F7F9FC;
  --sp-card:#fff;
  --sp-line:rgba(25,25,25,.09);
  --sp-radius:20px;
  --sp-ease:cubic-bezier(.16,1,.3,1);
}

/* ── پایهٔ صفحه ── */
.sp-page{font-family:inherit;color:var(--sp-dark);background:var(--sp-bg);overflow-x:clip}
.sp-page .sp-container{max-width:1200px;margin:0 auto;padding:0 24px}
.sp-page .sp-section{padding:88px 0}

/* ── scroll-reveal (فقط وقتی JS هست — sp-reveal.js) ── */
.sp-js .sp-page [data-reveal]{opacity:0;transform:translateY(22px)}
.sp-page [data-reveal]{transition:opacity .7s var(--sp-ease),transform .7s var(--sp-ease);transition-delay:var(--sp-d,0s)}
.sp-page .sp-in{opacity:1 !important;transform:none !important}

/* ── دکمه‌ها ── */
.sp-page .sp-btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--sp-royal);color:#fff;font-weight:800;font-size:1rem;padding:15px 34px;border-radius:999px;text-decoration:none;box-shadow:0 6px 18px rgba(0,79,255,.30);transition:background .18s ease,transform .18s ease,box-shadow .18s ease;cursor:pointer;border:none}
.sp-page .sp-btn-primary:hover{background:var(--sp-royal-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,79,255,.40)}
.sp-page .sp-btn-primary:focus-visible{outline:2px solid var(--sp-royal);outline-offset:3px}
.sp-page .sp-btn-ghost{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--sp-royal);font-weight:800;font-size:1rem;padding:13px 30px;border-radius:999px;border:2px solid rgba(0,79,255,.35);text-decoration:none;transition:border-color .18s ease,background .18s ease;cursor:pointer}
.sp-page .sp-btn-ghost:hover{border-color:var(--sp-royal);background:rgba(0,79,255,.06)}
.sp-page .sp-btn-ghost:focus-visible{outline:2px solid var(--sp-royal);outline-offset:3px}
.sp-page .sp-btn-outline{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--sp-royal);font-weight:800;font-size:.95rem;padding:12px 26px;border-radius:999px;border:2px solid rgba(0,79,255,.35);text-decoration:none;transition:border-color .18s ease,background .18s ease;white-space:nowrap;cursor:pointer}
.sp-page .sp-btn-outline:hover{border-color:var(--sp-royal);background:rgba(0,79,255,.06)}
.sp-page .sp-btn-outline:focus-visible{outline:2px solid var(--sp-royal);outline-offset:3px}
.sp-page .sp-btn-white{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:var(--sp-royal);font-weight:800;font-size:1rem;padding:15px 32px;border-radius:999px;text-decoration:none;box-shadow:0 8px 22px rgba(25,25,25,.20);transition:transform .18s ease,box-shadow .18s ease;cursor:pointer;border:none}
.sp-page .sp-btn-white:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(25,25,25,.26)}
.sp-page .sp-btn-white:focus-visible{outline:2px solid #fff;outline-offset:3px}
.sp-page .sp-btn-white svg{width:18px;height:18px}

/* ── سرصفحهٔ سکشن‌ها (دو ستونه: متن + عمل) ── */
.sp-page .sp-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px}
.sp-page .sp-sec-head__eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--sp-royal);font-size:.85rem;font-weight:800;margin-bottom:10px}
.sp-page .sp-sec-head__eyebrow::before{content:"";width:26px;height:3px;border-radius:99px;background:linear-gradient(90deg,var(--sp-royal),var(--sp-electric))}
.sp-page .sp-sec-head__title{font-size:clamp(1.55rem,2.9vw,2.2rem);font-weight:900;line-height:1.55;margin:0 0 10px;color:var(--sp-ink)}
.sp-page .sp-sec-head__lead{color:var(--sp-muted);font-size:1rem;line-height:2;margin:0;max-width:560px}

/* ── هیروی زیرصفحه‌ها — روشن با dot-grid و aurora ── */
.sp-page .sp-page-hero{position:relative;overflow:hidden;background:var(--sp-bg);border-bottom:1px solid rgba(25,25,25,.06)}
.sp-page .sp-page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,79,255,.14) 1.2px,transparent 1.8px);background-size:26px 26px;-webkit-mask-image:radial-gradient(120% 95% at 50% 0%,#000 30%,transparent 82%);mask-image:radial-gradient(120% 95% at 50% 0%,#000 30%,transparent 82%);pointer-events:none}
.sp-page .sp-page-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(640px 420px at 12% 18%,rgba(0,79,255,.12),transparent 70%),radial-gradient(560px 380px at 90% 85%,rgba(23,137,252,.10),transparent 70%);pointer-events:none}
.sp-page .sp-page-hero__inner{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:16px;padding:68px 0 60px;max-width:780px}
.sp-page .sp-page-hero__eyebrow{display:inline-flex;align-items:center;gap:12px;margin:0;color:var(--sp-royal);font-size:.95rem;font-weight:800}
.sp-page .sp-page-hero__tick{width:30px;height:3.5px;border-radius:99px;background:linear-gradient(90deg,var(--sp-royal),var(--sp-electric));flex:none}
.sp-page .sp-page-hero__title{font-size:clamp(2rem,4.6vw,3.2rem);font-weight:900;line-height:1.45;margin:0;color:var(--sp-ink)}
.sp-page .sp-page-hero__hl{color:var(--sp-royal)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sp-page .sp-page-hero__hl{background:linear-gradient(90deg,var(--sp-royal) 20%,var(--sp-electric) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
}
.sp-page .sp-page-hero__sub{font-size:clamp(.98rem,1.5vw,1.12rem);font-weight:500;line-height:2.05;color:var(--sp-muted);max-width:600px;margin:0;text-wrap:pretty}
.sp-page .sp-page-hero__crumb{display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--sp-muted);margin:0;width:max-content;max-width:100%;flex-wrap:nowrap}
.sp-page .sp-page-hero__crumb a{color:var(--sp-royal);text-decoration:none;white-space:nowrap;flex:none}
.sp-page .sp-page-hero__crumb a:hover{text-decoration:underline}
.sp-page .sp-page-hero__crumb span{white-space:nowrap;flex:none}
.sp-page .sp-page-hero__crumb svg{width:14px;height:14px;flex:none}
/* تزئینِ مداریِ هیرو (SVG حلقه‌ها — سمتِ چپ، مهارشده به کانتینر نه ویوپورت) */
.sp-page .sp-page-hero__decor{position:absolute;top:50%;transform:translateY(-50%);left:calc(50% - 660px);width:380px;height:380px;pointer-events:none;opacity:.9}
.sp-page .sp-page-hero__decor .sp-decor-spin{transform-origin:50% 50%;animation:sp-decor-spin 30s linear infinite}
@keyframes sp-decor-spin{to{transform:rotate(360deg)}}

/* ── کارتِ پایه ── */
.sp-page .sp-card{position:relative;background:var(--sp-card);border-radius:var(--sp-radius);border:1px solid var(--sp-line);box-shadow:0 6px 24px rgba(25,25,25,.07);transition:transform .24s var(--sp-ease),box-shadow .24s var(--sp-ease),border-color .24s ease}
.sp-page .sp-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(25,25,25,.13);border-color:rgba(0,79,255,.30)}

/* ── برچسب/تگِ دسته ── */
.sp-page .sp-tag{display:inline-block;font-size:.78rem;font-weight:800;color:var(--sp-royal)}

/* ── چیپِ شیشه‌ای ── */
.sp-page .sp-chip{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:16px;background:rgba(255,255,255,.82);border:1px solid rgba(0,79,255,.16);box-shadow:0 12px 32px rgba(0,79,255,.13);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.88rem;font-weight:700;color:var(--sp-ink)}
.sp-page .sp-chip__icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;background:rgba(0,79,255,.09);color:var(--sp-royal);flex:none}
.sp-page .sp-chip__icon svg{width:18px;height:18px}
/* چیپِ ساده (قرص‌مانند) */
.sp-page .sp-pill{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;color:var(--sp-dark);background:var(--sp-card);border:1px solid rgba(25,25,25,.13);padding:9px 18px;border-radius:999px;transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease}
.sp-page .sp-pill:hover{border-color:var(--sp-royal);color:var(--sp-royal);background:rgba(0,79,255,.05);transform:translateY(-2px)}
.sp-page .sp-pill svg{width:18px;height:18px}

/* ── CTA-band تیره (Obsidian→Violet) ── */
.sp-page .sp-band{position:relative;overflow:hidden;background:linear-gradient(135deg,#191919 0%,#2C2C2C 45%,#3A1772 130%);color:#fff;padding:84px 0;text-align:center}
.sp-page .sp-band::before{content:"";position:absolute;width:640px;height:640px;top:-320px;right:50%;transform:translateX(50%);background:radial-gradient(circle,rgba(23,137,252,.16),transparent 65%);pointer-events:none}
.sp-page .sp-band__rings{position:absolute;width:460px;height:460px;right:-140px;bottom:-180px;pointer-events:none}
.sp-page .sp-band__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px}
.sp-page .sp-band__title{font-size:clamp(1.55rem,3vw,2.3rem);font-weight:900;margin:0;color:#fff}
.sp-page .sp-band__text{font-size:1.05rem;line-height:2;color:rgba(255,255,255,.82);margin:0}
.sp-page .sp-band .sp-btn-primary{margin-top:12px}
.sp-page .sp-band .sp-btn-primary:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ── حالتِ خالی ── */
.sp-page .sp-empty{text-align:center;color:var(--sp-muted);padding:56px 0;line-height:2}

/* ── پیام‌های وضعیت (موفقیت/خطا/اطلاع) ── */
.sp-page .sp-notice{border-radius:16px;padding:18px 22px;font-size:.95rem;line-height:1.9;border:1px solid}
.sp-page .sp-notice--ok{background:rgba(0,79,255,.05);border-color:rgba(0,79,255,.22);color:var(--sp-ink)}
.sp-page .sp-notice--warn{background:rgba(255,184,0,.08);border-color:rgba(255,184,0,.4);color:var(--sp-ink)}
.sp-page .sp-notice--err{background:rgba(237,28,36,.05);border-color:rgba(237,28,36,.28);color:var(--sp-ink)}

/* ── ریسپانسیو ── */
@media (max-width:980px){
  .sp-page .sp-section{padding:60px 0}
  .sp-page .sp-sec-head{flex-direction:column;align-items:flex-start;gap:18px}
  .sp-page .sp-page-hero__decor{width:280px;height:280px;left:-120px;opacity:.55}
  .sp-page .sp-band{padding:60px 0}
  .sp-page .sp-band__rings{display:none}
}
@media (max-width:700px){
  .sp-page .sp-page-hero__inner{padding:52px 0 46px}
}
@media (prefers-reduced-motion:reduce){
  .sp-page *,.sp-page *::before,.sp-page *::after{transition:none !important;animation:none !important}
  .sp-js .sp-page [data-reveal]{opacity:1;transform:none}
}