/* ═══════════════════════════════════════════════════════════════════
   پرشین میزبان — استایل صفحه‌ی «شماره حساب‌ها»
   /assets/css/cards.css
   ───────────────────────────────────────────────────────────────────
     ۰۰  فونت‌ها
     ۰۱  توکن‌ها — روی خودِ سکشن‌ها (درس تمام‌عرض شدن)
     ۰۲  هیرو
     ۰۳  بادبزن کارت‌ها
     ۰۴  سه قدم
     ۰۵  کارت بانکی
     ۰۶  شبا و شماره حساب
     ۰۷  نکته‌ها
     ۰۸  اعلان کپی
     ۰۹  واکنش‌گرایی
     ۱۰  کاهش حرکت و چاپ

   ⚠️ شماره‌های کارت و شبا عمداً با رقم لاتین نمایش داده می‌شوند —
      همان‌طور که روی کارت فیزیکی حک شده، و همان چیزی که در اپ بانک
      تایپ می‌شود. بقیه‌ی اعداد صفحه فارسی‌اند.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══ ۰۰ · فونت‌ها ═══════════════════════════════════════════════════ */
@font-face{font-family:'PMNum';font-weight:400;font-style:normal;font-display:swap;
  src:url('/assets/fonts/IRANSansXFaNum-Regular.woff2') format('woff2');
  unicode-range:U+06F0-06F9,U+0660-0669,U+002C,U+002E,U+060C,U+066A-066C}
@font-face{font-family:'PMNum';font-weight:700;font-style:normal;font-display:swap;
  src:url('/assets/fonts/IRANSansXFaNum-Bold.woff2') format('woff2');
  unicode-range:U+06F0-06F9,U+0660-0669,U+002C,U+002E,U+060C,U+066A-066C}
@font-face{font-family:'PMMono';font-weight:400;font-style:normal;font-display:swap;
  src:url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
  unicode-range:U+0020-002B,U+002D,U+002F-007E}
@font-face{font-family:'PMMono';font-weight:700;font-style:normal;font-display:swap;
  src:url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
  unicode-range:U+0020-002B,U+002D,U+002F-007E}
@font-face{font-family:'Morabba';font-weight:700;font-style:normal;font-display:swap;
  src:url('/assets/fonts/Morabba-Bold.woff2') format('woff2')}
@font-face{font-family:'Morabba';font-weight:900;font-style:normal;font-display:swap;
  src:url('/assets/fonts/Morabba-Black.woff2') format('woff2')}


/* ═══ ۰۱ · توکن‌ها ══════════════════════════════════════════════════
   روی خودِ سکشن‌ها تعریف شده‌اند، نه فقط روی body_class — اگر
   body_class عوض شود، var(--pad) تعریف‌نشده نمی‌ماند.
   ═══════════════════════════════════════════════════════════════════ */
.pcn,.page-cards,.pcn-toast{
  --mono:'PMNum','PMMono',ui-monospace,'SFMono-Regular','Roboto Mono',monospace;
  --latin:'PMMono','JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --display:'Morabba','IRANSansX','IRANSans',system-ui,sans-serif;
  --pad:clamp(18px,4vw,40px);
  --ease:cubic-bezier(.22,1,.36,1);

  --ink:#04070E; --ink-2:#0A1C28;
  --card:#FFFFFF; --card-2:#F5F9FB;
  --line:#E0EBF0; --line-2:#C8D9E1;
  --tx:#0C1620; --tx-2:#46596A; --tx-3:#8395A1;
  --br:#0E7490; --br-2:#22D3EE; --br-3:#67E8F9; --br-4:#A5F3FC;
  --gold:#C2760A; --gold-2:#F5A524; --gold-3:#FFD27A;
  --em:#0F766E; --em-2:#34D399;
}
.pcn *,.pcn *::before,.pcn *::after{box-sizing:border-box}
.pcn :where(h1,h2,h3,p,ol,ul,li,dl,dt,dd,figure){margin:0;padding:0}
.pcn :where(ol,ul){list-style:none}
.pcn :where(a){color:inherit;text-decoration:none}
.pcn :where(button){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.pcn :where(img){display:block;max-width:100%;border:0}
.pcn :is(a,button):focus-visible{outline:2px solid var(--br-2);outline-offset:3px;border-radius:12px}

.pcn{position:relative;display:block;color:var(--tx)}
.pcn-wrap{width:min(1240px,100% - 2*var(--pad));margin-inline:auto;position:relative;z-index:2}
.pcn-num{font-family:var(--mono);unicode-bidi:isolate;font-variant-numeric:tabular-nums}

/* رنگ هر بانک — از پالت ایرانی سایت، نه رنگ رسمی بانک‌ها */
.pcn [data-c=cy]  {--c:#0E7490;--c2:#22D3EE;--cs:rgba(34,211,238,.13);
  --face:linear-gradient(135deg,#052A34 0%,#0B5566 42%,#0E7490 72%,#1FB7D1 118%)}
.pcn [data-c=nil] {--c:#3730A3;--c2:#6366F1;--cs:rgba(99,102,241,.12);
  --face:linear-gradient(135deg,#14113A 0%,#2A2479 42%,#3F37C9 74%,#7C83F7 122%)}
.pcn [data-c=gold]{--c:#C2760A;--c2:#F5A524;--cs:rgba(245,165,36,.14);
  --face:linear-gradient(135deg,#07090F 0%,#141B2B 45%,#26324A 80%,#3A4A66 118%)}
.pcn [data-c=em]  {--c:#0F766E;--c2:#34D399;--cs:rgba(52,211,153,.14)}


/* ═══ ۰۲ · هیرو ═════════════════════════════════════════════════════ */
.pcn-hero{overflow:hidden;isolation:isolate;background:var(--ink);color:#EEF6FA;
  padding-block:clamp(26px,4vw,48px) clamp(96px,11vw,140px)}
.pcn-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 60% at 22% 42%,rgba(99,102,241,.18),transparent 70%),
    radial-gradient(50% 64% at 78% 18%,rgba(34,211,238,.16),transparent 68%),
    linear-gradient(180deg,var(--ink-2),var(--ink))}
.pcn-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.34;
  background-image:linear-gradient(rgba(103,232,249,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(103,232,249,.07) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(70% 70% at 60% 30%,#000,transparent 76%);
          mask-image:radial-gradient(70% 70% at 60% 30%,#000,transparent 76%)}

.pcn-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(20px,4vw,56px);align-items:center}

.pcn-crumb{margin-block-end:22px}
.pcn-crumb ol{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.8rem;color:#7A929E}
.pcn-crumb li{display:flex;align-items:center;gap:8px}
.pcn-crumb li+li::before{content:"›";color:#4E6270}
.pcn-crumb a{color:var(--br-3)}
.pcn-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pcn-crumb [aria-current]{color:#DCEDF3}

.pcn-flag{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:99px;margin-block-end:16px;
  font-size:.76rem;font-weight:800;color:var(--br-3);background:rgba(34,211,238,.1);border:1px solid rgba(34,211,238,.26)}
.pcn-flag i{width:7px;height:7px;border-radius:50%;background:var(--br-2);flex:none}

.pcn-hero h1{font-family:var(--display);font-size:clamp(1.8rem,4.4vw,2.7rem);font-weight:900;
  line-height:1.3;letter-spacing:-.02em;color:#fff;margin-block-end:14px}
.pcn-hero h1{text-wrap:nowrap}
.pcn-hero h1 b{font-weight:inherit;color:var(--br-2);white-space:nowrap}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .pcn-hero h1 b{color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(100deg,#A5F3FC,#22D3EE 48%,#818CF8)}}
.pcn-lead{max-width:54ch;font-size:clamp(.95rem,1.5vw,1.06rem);line-height:2.05;color:#A3BCC7}
.pcn-lead strong{color:#fff;font-weight:800}

/* ⭐ نام صاحب حساب */
.pcn-who{display:inline-flex;align-items:center;gap:13px;margin-block:24px 26px;padding:12px 18px 12px 22px;
  border-radius:18px;background:rgba(255,255,255,.05);border:1px solid rgba(52,211,153,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.pcn-who-ic{flex:none;width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#04231C;
  background:linear-gradient(140deg,#6EE7B7,#10B981);box-shadow:0 12px 24px -12px rgba(16,185,129,.9)}
.pcn-who small{display:block;font-size:.72rem;color:#8FB3A8;line-height:1.6}
.pcn-who b{display:block;font-family:var(--display);font-size:1.12rem;font-weight:900;color:#fff;line-height:1.5}

.pcn-cta{display:flex;flex-wrap:wrap;gap:10px}
.pcn-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding-inline:22px;
  border-radius:14px;border:1px solid transparent;white-space:nowrap;font-weight:800;font-size:.92rem;
  transition:transform .14s,box-shadow .25s,background-color .2s,color .2s,border-color .2s}
.pcn-btn:active{transform:translateY(1px) scale(.98)}
.pcn-btn--main{color:#03212A;background:linear-gradient(135deg,var(--br-4),var(--br-2) 48%,var(--br));
  box-shadow:0 12px 28px -12px rgba(34,211,238,.9),inset 0 1px 0 rgba(255,255,255,.45)}
.pcn-btn--main:hover{box-shadow:0 18px 36px -12px rgba(34,211,238,1)}
.pcn-btn--main svg{transition:transform .25s}
.pcn-btn--main:hover svg{transform:translateX(-3px)}
.pcn-btn--ghost{color:#E6F4F9;border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.05)}
.pcn-btn--ghost:hover{color:var(--gold-3);border-color:rgba(245,165,36,.5);background:rgba(245,165,36,.08)}
.pcn-btn--line{color:var(--tx);border-color:var(--line-2);background:#fff}
.pcn-btn--line:hover{color:var(--br);border-color:var(--br-2)}


/* ═══ ۰۳ · ⭐ بادبزن کارت‌ها ═════════════════════════════════════════ */
.pcn-fan{position:relative;height:clamp(250px,27vw,320px)}
.pcn-mini{position:absolute;top:50%;left:50%;width:clamp(230px,23vw,292px);aspect-ratio:1.586;
  margin:calc(clamp(230px,23vw,292px) / -3.172) 0 0 calc(clamp(230px,23vw,292px) / -2);
  display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px;border-radius:18px;
  color:#fff;background:var(--face);cursor:pointer;overflow:hidden;isolation:isolate;
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18);
  translate:var(--x) var(--y);rotate:var(--r);
  transition:translate .6s var(--ease),rotate .6s var(--ease),box-shadow .4s}
.pcn-mini::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:repeating-radial-gradient(circle at 108% -12%,rgba(255,255,255,.07) 0 1px,transparent 1px 8px)}
.pcn-mini:nth-child(1){--x:-86px;--y:34px;--r:-14deg}
.pcn-mini:nth-child(2){--x:-4px;--y:4px;--r:-3deg}
.pcn-mini:nth-child(3){--x:78px;--y:-30px;--r:9deg}
/* ⭐ هاور: بادبزن باز می‌شود */
.pcn-fan:hover .pcn-mini:nth-child(1){--x:-124px;--y:42px;--r:-19deg}
.pcn-fan:hover .pcn-mini:nth-child(3){--x:116px;--y:-38px;--r:14deg}
.pcn-mini:hover{box-shadow:0 40px 70px -26px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.22)}
.pcn-mini{animation:pcnFloat 7s ease-in-out infinite}
.pcn-mini:nth-child(2){animation-delay:-2.3s}
.pcn-mini:nth-child(3){animation-delay:-4.6s}
@keyframes pcnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.pcn-mini-top{display:flex;align-items:center;gap:10px}
.pcn-mini-top b{font-family:var(--display);font-size:1rem;font-weight:900}
.pcn-mini .pcn-chip{width:38px;height:28px}
.pcn-mini-num{font-family:var(--latin);font-size:1.02rem;font-weight:700;letter-spacing:.12em;direction:ltr;
  text-align:left;text-shadow:0 1px 0 rgba(0,0,0,.4)}


/* ═══ ۰۴ · سه قدم — روی لبه‌ی هیرو ════════════════════════════════ */
.pcn-accs{background:linear-gradient(180deg,#F1F6F9 0%,#FCFDFE 100%);
  padding-block-end:clamp(48px,6vw,80px)}
.pcn-steps{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  margin-block:clamp(-74px,-7vw,-58px) clamp(38px,5vw,56px);counter-reset:none}
.pcn-step{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:20px 20px 18px;border-radius:20px;background:#fff;border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(12,22,32,.05),0 24px 44px -30px rgba(12,22,32,.35)}
/* پیکان اتصال بین قدم‌ها */
.pcn-step:not(:last-child)::after{content:"";position:absolute;z-index:1;top:50%;inset-inline-end:-11px;
  width:14px;height:14px;margin-top:-7px;border-radius:50%;background:#fff;border:1px solid var(--line-2);
  box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 7px var(--br-2)}
.pcn-step-n{position:absolute;inset-block-start:16px;inset-inline-end:18px;font-size:2.2rem;font-weight:700;
  line-height:1;color:var(--line)}
.pcn-step-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--br-2),var(--br));box-shadow:0 10px 20px -11px var(--br)}
.pcn-step:nth-child(2) .pcn-step-ic{background:linear-gradient(140deg,#818CF8,#4F46E5);box-shadow:0 10px 20px -11px #4F46E5}
.pcn-step:nth-child(3) .pcn-step-ic{background:linear-gradient(140deg,#6EE7B7,#0F766E);box-shadow:0 10px 20px -11px #0F766E}
.pcn-step b{font-family:var(--display);font-size:1.06rem;font-weight:900;margin-block-start:4px}
.pcn-step p{font-size:.86rem;line-height:1.95;color:var(--tx-2)}
.pcn-step p strong{color:var(--tx)}
.pcn-step-go{display:inline-flex;align-items:center;gap:6px;margin-block-start:2px;font-size:.84rem;font-weight:800;color:var(--em)}
.pcn-step-go svg{transition:transform .25s}
.pcn-step-go:hover svg{transform:translateX(-3px)}

.pcn-head{max-width:62ch;margin-block-end:clamp(20px,3vw,30px)}
.pcn-head h2{text-wrap:nowrap;font-family:var(--display);font-size:clamp(1.4rem,3vw,2.05rem);font-weight:900;line-height:1.4;
  letter-spacing:-.015em;margin-block-end:8px}
.pcn-head p{font-size:.95rem;line-height:2;color:var(--tx-2)}


/* ═══ ۰۵ · ⭐ کارت بانکی ═════════════════════════════════════════════
   سه لایه: گرادیان رنگ · خطوط امنیتی دایره‌ای مثل چاپ اسکناس ·
   بافت دانه‌ای. با حرکت ماوس کمی می‌چرخد و برق می‌زند.
   ═══════════════════════════════════════════════════════════════════ */
.pcn-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px);align-items:start}
.pcn-acc{display:flex;flex-direction:column;gap:12px;scroll-margin-top:110px;border-radius:26px;
  transition:box-shadow .4s}
.pcn-acc.is-flash{box-shadow:0 0 0 4px var(--cs),0 0 0 1px var(--c2)}

.pcn-card{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:1.586;
  display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,1.9vw,22px);
  border-radius:22px;color:#fff;background:var(--face);
  box-shadow:0 2px 4px rgba(4,7,14,.1),0 30px 50px -28px rgba(4,7,14,.75),
             inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.25);
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .5s var(--ease),box-shadow .4s}
.pcn-card.is-tilt{transition:transform .08s linear,box-shadow .4s}
/* خطوط امنیتی + بافت دانه‌ای */
.pcn-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-radial-gradient(circle at 112% -18%,rgba(255,255,255,.075) 0 1px,transparent 1px 9px),
    radial-gradient(70% 90% at -10% 110%,rgba(255,255,255,.12),transparent 60%)}
/* برق زدن — دنبال ماوس */
.pcn-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(40% 55% at var(--gx,24%) var(--gy,16%),rgba(255,255,255,.22),transparent 70%);
  opacity:.75;transition:opacity .4s}
.pcn-card[data-c=gold]{box-shadow:0 2px 4px rgba(4,7,14,.1),0 30px 50px -28px rgba(4,7,14,.75),
  inset 0 1px 0 rgba(255,210,122,.35),inset 0 0 0 1px rgba(245,165,36,.18)}

.pcn-card-top{display:flex;align-items:center;gap:11px}
.pcn-logo{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:#fff;
  box-shadow:0 8px 18px -10px rgba(0,0,0,.6)}
.pcn-logo img{width:34px;height:34px;object-fit:contain}
.pcn-mini .pcn-logo{width:38px;height:38px;border-radius:12px}
.pcn-mini .pcn-logo img{width:28px;height:28px}
.pcn-card-bank{flex:1;min-width:0;font-family:var(--display);font-size:1.12rem;font-weight:900;line-height:1.35;color:#fff}
.pcn-card-bank small{display:block;font-family:inherit;font-size:.74rem;font-weight:700;color:rgba(255,255,255,.66)}
.pcn-chip{flex:none;width:44px;height:33px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}

/* شماره‌ی برجسته */
/* ⚠️ بلوک معمولی، نه فلکس: فرزندان فلکس بلوکی می‌شوند و کپی دستی بین گروه‌ها خط جدید می‌گذارد */
.pcn-card-num{display:block;cursor:copy;
  font-family:var(--latin);font-size:clamp(1.12rem,1.7vw,1.25rem);font-weight:700;letter-spacing:.08em;
  color:#F4F9FB;text-align:left;user-select:all;
  text-shadow:0 1px 0 rgba(0,0,0,.45),0 -1px 0 rgba(255,255,255,.12),0 0 18px rgba(255,255,255,.12)}
.pcn-g{display:inline-block;margin-right:.72em}
.pcn-g:last-child{margin-right:0}

.pcn-card-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.pcn-holder small{display:block;font-size:.66rem;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.02em}
.pcn-holder b{display:block;font-size:.94rem;font-weight:800;color:#fff;line-height:1.6}
.pcn-bad{display:block;direction:rtl;text-align:right;font-family:'IRANSansX','IRANSans',system-ui,sans-serif;
  font-size:.86rem;font-weight:700;line-height:1.9;letter-spacing:0;color:#FFD27A;text-shadow:none}

/* دکمه‌ی کپی */
.pcn-copy{position:relative;flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  color:var(--c,var(--br));background:var(--cs,rgba(34,211,238,.12));
  transition:background-color .2s,color .2s,transform .14s}
.pcn-copy:hover{color:#fff;background:linear-gradient(140deg,var(--c2),var(--c))}
.pcn-copy:active{transform:scale(.92)}
.pcn-copy--glass{width:46px;height:46px;border-radius:14px;color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pcn-copy--glass:hover{background:rgba(255,255,255,.26)}
.pcn-i-done{display:none}
.pcn-copy.is-done .pcn-i-copy{display:none}
.pcn-copy.is-done .pcn-i-done{display:block}
.pcn-copy.is-done{color:#04231C;background:linear-gradient(140deg,#6EE7B7,#10B981)}


/* ═══ ۰۶ · شبا و شماره حساب ════════════════════════════════════════ */
.pcn-rows{padding:4px 16px;border-radius:18px;background:#fff;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(12,22,32,.04)}
.pcn-row{display:flex;flex-direction:column;gap:6px;padding-block:13px}
.pcn-row + .pcn-row{border-top:1px dashed var(--line-2)}
.pcn-row dt{font-size:.84rem;font-weight:800;color:var(--tx)}
.pcn-row dt small{margin-inline-start:6px;font-size:.72rem;font-weight:600;color:var(--tx-3)}
.pcn-row dd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pcn-val{display:block;min-width:0;line-height:1.7;font-family:var(--latin);
  font-size:.92rem;font-weight:700;letter-spacing:.02em;color:var(--tx-2);user-select:all}
.pcn-val .pcn-g{margin-right:.1em}

.pcn-all{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:46px;border-radius:14px;
  font-size:.86rem;font-weight:800;color:var(--tx-2);background:transparent;border:1px dashed var(--line-2);
  transition:color .2s,border-color .2s,background-color .2s}
.pcn-all:hover{color:var(--c);border-color:var(--c2);border-style:solid;background:var(--cs)}
.pcn-all.is-done{color:var(--em);border-color:var(--em-2);border-style:solid;background:rgba(52,211,153,.1)}

/* ⭐ یادآوری نام */
.pcn-namenote{display:flex;align-items:flex-start;gap:12px;margin-block-start:clamp(20px,3vw,28px);
  padding:16px 20px;border-radius:18px;font-size:.9rem;line-height:2;color:#7A5410;
  background:#FFFBF2;border:1px solid #FDE3B0}
.pcn-namenote svg{flex:none;margin-top:5px;color:var(--gold)}
.pcn-namenote b{color:#5B3E08}


/* ═══ ۰۷ · نکته‌ها ══════════════════════════════════════════════════ */
.pcn-tips{background:#FCFDFE;padding-block:clamp(44px,6vw,76px);border-top:1px solid var(--line)}
.pcn-tip-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pcn-tip{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:20px;background:#fff;
  border:1px solid var(--line);box-shadow:0 1px 2px rgba(12,22,32,.04),0 18px 36px -30px rgba(12,22,32,.3)}
.pcn-tip b{font-family:var(--display);font-size:1.02rem;font-weight:900;color:var(--tx)}
.pcn-tip p{font-size:.86rem;line-height:1.95;color:var(--tx-2)}
.pcn-tip-ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--c2),var(--c));box-shadow:0 10px 20px -11px var(--c)}
/* تنها کارت تیره — امنیت، مهم‌ترین نکته */
.pcn-tip--dark{position:relative;overflow:hidden;isolation:isolate;color:#EEF6FA;border-color:rgba(52,211,153,.3);
  background:linear-gradient(160deg,var(--ink-2),var(--ink))}
.pcn-tip--dark::before{content:"";position:absolute;z-index:-1;inset-block-start:-40%;inset-inline-end:-30%;
  width:90%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(52,211,153,.24),transparent 66%)}
.pcn-tip--dark b{color:#fff}
.pcn-tip--dark p{color:#A9BECA}

.pcn-end{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;
  margin-block-start:clamp(24px,3vw,34px);padding:18px 22px;border-radius:20px;
  background:linear-gradient(120deg,rgba(34,211,238,.09),rgba(99,102,241,.07));border:1px solid rgba(34,211,238,.24)}
.pcn-end p{font-size:.94rem;line-height:1.9;color:var(--tx-2)}
.pcn-end p b{color:var(--tx);font-family:var(--display);font-weight:900}


/* ═══ ۰۸ · اعلان کپی ════════════════════════════════════════════════ */
.pcn-toast{position:fixed;z-index:950;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:10px;max-width:calc(100% - 32px);padding:12px 18px;border-radius:14px;
  font-size:.9rem;font-weight:700;color:#fff;background:#0C1620;
  box-shadow:0 20px 44px -18px rgba(4,7,14,.8);pointer-events:none;
  opacity:0;transform:translate(-50%,16px);transition:opacity .25s,transform .35s var(--ease)}
.pcn-toast svg{flex:none;color:var(--em-2)}
.pcn-toast.is-on{opacity:1;transform:translate(-50%,0)}
.pcn-toast.is-warn svg{color:var(--gold-2)}


/* ═══ ۰۹ · واکنش‌گرایی ══════════════════════════════════════════════ */
@media (max-width:1100px){
  .pcn-grid{grid-template-columns:minmax(0,1fr);gap:22px}
  /* هر حساب یک ردیف: کارت کنار جزئیات */
  .pcn-acc{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);grid-template-rows:auto 1fr;
    column-gap:20px;row-gap:12px;align-items:start}
  .pcn-acc > .pcn-card{grid-row:1 / 3}
  .pcn-tip-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .pcn-hero-grid{grid-template-columns:minmax(0,1fr)}
  .pcn-fan{height:220px;margin-block-start:8px}
  .pcn-mini{width:210px;margin:-66px 0 0 -105px}
  .pcn-mini:nth-child(1){--x:-70px;--y:22px}
  .pcn-mini:nth-child(3){--x:66px;--y:-20px}
  .pcn-steps{grid-template-columns:minmax(0,1fr)}
  .pcn-step:not(:last-child)::after{top:auto;bottom:-11px;inset-inline-end:auto;inset-inline-start:40px;margin:0}
}
@media (max-width:700px){
  /* 🔴 align-items:start از چیدمان تبلت می‌ماند و کارت را به اندازه‌ی محتوا جمع می‌کرد */
  .pcn-acc{display:flex;align-items:stretch}
  .pcn-card{width:100%;max-width:460px;margin-inline:auto}
  .pcn-who{display:flex}
  .pcn-cta .pcn-btn{flex:1 1 100%}
}
@media (max-width:560px){
  .pcn-tip-grid{grid-template-columns:minmax(0,1fr)}
  .pcn-mini{width:180px;margin:-57px 0 0 -90px;padding:12px 14px;border-radius:14px}
  .pcn-mini-num{font-size:.86rem}
  .pcn-fan{height:190px}
  .pcn-mini:nth-child(1){--x:-56px;--y:18px}
  .pcn-mini:nth-child(3){--x:52px;--y:-16px}
  .pcn-val{font-size:.84rem;letter-spacing:0}
  .pcn-val .pcn-g{margin-right:.36em}
  .pcn-rows{padding-inline:14px}
  .pcn-end{padding:16px}
}

@media (max-width:380px){
  .pcn-val{font-size:.79rem}
  .pcn-val .pcn-g{margin-right:.32em}
  .pcn-rows{padding-inline:12px}
  .pcn-row dd{gap:8px}
}

/* ═══ ۱۰ · کاهش حرکت و چاپ ══════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .pcn *,.pcn *::before,.pcn *::after,.pcn-toast{animation:none !important;
    transition-duration:.001ms !important}
  .pcn-card{transform:none !important}
}
@media print{
  .pcn-hero{background:#fff !important;color:#000 !important;padding-block:0 12px}
  .pcn-hero::before,.pcn-hero::after,.pcn-fan,.pcn-cta,.pcn-copy,.pcn-all,.pcn-toast,.pcn-steps,.pcn-tips{display:none !important}
  .pcn-hero h1,.pcn-lead,.pcn-who b{color:#000 !important}
  .pcn-card{background:#fff !important;color:#000 !important;border:1pt solid #999;box-shadow:none !important;
    transform:none !important;break-inside:avoid}
  .pcn-card::before,.pcn-card::after{display:none}
  .pcn-card-bank,.pcn-card-num,.pcn-holder b{color:#000 !important;text-shadow:none !important}
  .pcn-grid{grid-template-columns:1fr !important}
}