/* ==========================================================================
   استایل‌شیت یکپارچه — نسخه ۲ (بازنویسی کامل ۲۰۲۶-۰۸-۰۱)
   ─ ادغام تمام پچ‌ها (Calm UI + hotfixها) در معماری لایه‌ای
   ─ دارک‌مود توکن‌محور (بدون override پراکنده و !important انباشته)
   ─ ۴ بریک‌پوینت استاندارد: 1180 (منو) / 1020 (گرید) / 720 (موبایل) / 520
   ─ تمام نام کلاس‌ها سازگار با HTML فعلی حفظ شده است
   ========================================================================== */

@layer tokens, reset, base, layout, components, overlays, ambient, utilities, responsive, motion;

/* ═══════════════ ۱) توکن‌ها و تم ═══════════════ */
@layer tokens {
  :root {
    color-scheme: light;
    --font: "Vazirmatn", Tahoma, Arial, sans-serif;

    --bg: #f8f7fc;
    --bg-elevated: #ffffff;
    --surface: #ffffff;
    --surface-solid: #ffffff;
    --surface-2: #f6f4fb;
    --text: #17152b;
    --text-soft: #55516a;
    --muted: #68657a;
    --line: #e9e6f1;
    --line-strong: #d6cfe6;

    --brand: #6d4aff;
    --brand-2: #8b5cf6;
    --brand-soft: #f1edff;
    --cyan: #0891b2;
    --mint: #059669;
    --amber: #d97706;
    --success: #19a974;
    --danger: #c2414b;

    /* گرادیان‌ها ثابت می‌مانند تا در هر دو تم یکسان دیده شوند */
    --gradient-brand: linear-gradient(135deg, #6d4aff, #8b5cf6);
    --gradient-brand-cyan: linear-gradient(135deg, #6d4aff, #06b6d4);
    --gradient-text: linear-gradient(135deg, #6d4aff, #a33ed7);

    --shadow-xs: 0 1px 2px rgba(37,28,74,.05);
    --shadow-sm: 0 8px 22px rgba(37,28,74,.07);
    --shadow: 0 14px 40px rgba(37,28,74,.09);
    --shadow-lg: 0 24px 60px rgba(31,24,63,.16);

    --radius-sm: 12px;
    --radius: 18px;
    --radius-lg: 26px;
    --radius-xl: 32px;

    --shell: min(1160px, calc(100% - 40px));
    --header-h: 76px;
    --ease: cubic-bezier(.2,.8,.2,1);
  }

  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #100d1b;
    --bg-elevated: #16131f;
    --surface: #191626;
    --surface-solid: #191626;
    --surface-2: #211d31;
    --text: #f7f4ff;
    --text-soft: #d2cce4;
    --muted: #a49dbd;
    --line: #39334b;
    --line-strong: #4d4568;

    --brand: #a08dff;
    --brand-2: #b79fff;
    --brand-soft: #2a214d;
    --cyan: #22d3ee;
    --mint: #34d399;
    --amber: #fbbf24;
    --success: #34d399;
    --danger: #fb7185;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
    --shadow-sm: 0 10px 26px rgba(0,0,0,.32);
    --shadow: 0 18px 46px rgba(0,0,0,.4);
    --shadow-lg: 0 28px 70px rgba(0,0,0,.5);
  }
}

/* ═══════════════ ۲) ریست ═══════════════ */
@layer reset {
  *, *::before, *::after { box-sizing: border-box }
  html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 28px);
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0 }
  ul[role="list"], ol[role="list"] { list-style: none; margin: 0; padding: 0 }
  img, svg, video, canvas { display: block; max-width: 100% }
  img { height: auto }
  button, input, textarea, select { font: inherit }
  button, a { -webkit-tap-highlight-color: transparent }
  ::placeholder { color: var(--muted); opacity: .85 }
}

/* ═══════════════ ۳) پایه ═══════════════ */
@layer base {
  html { background: var(--bg) }
  body {
    min-height: 100vh;
    overflow-x: clip;
    isolation: isolate;
    color: var(--text);
    font-family: var(--font);
    line-height: 1.8;
    font-feature-settings: "ss01";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    background-color: var(--bg);
    background-image:
      radial-gradient(circle at 92% -8%, rgba(109,74,255,.10), transparent 32rem),
      radial-gradient(circle at 5% 28%, rgba(6,182,212,.07), transparent 30rem),
      radial-gradient(circle at 80% 78%, rgba(139,92,246,.06), transparent 30rem);
    transition: background-color .3s, color .3s;
  }
  :root[data-theme="dark"] body {
    background-image:
      radial-gradient(circle at 92% -8%, rgba(120,110,255,.14), transparent 34rem),
      radial-gradient(circle at 5% 30%, rgba(34,211,238,.08), transparent 32rem),
      radial-gradient(circle at 78% 76%, rgba(139,92,246,.10), transparent 32rem);
  }
  body > main { position: relative; z-index: 1 }
  body.nav-open { overflow: hidden }
  .code-rain-canvas { opacity: 1; transition: opacity .2s }

  a { color: inherit; text-decoration: none }

  /* توجه: letter-spacing منفی حذف شد — در متن فارسی اتصال حروف را می‌شکند */
  h1, h2, h3, h4 { font-weight: 850; line-height: 1.3; text-wrap: balance }
  h1 { font-size: clamp(2.25rem, 5vw, 4.4rem); line-height: 1.2 }
  h2 { font-size: clamp(1.7rem, 3vw, 2.65rem) }
  h3 { font-size: clamp(1.12rem, 2vw, 1.35rem) }
  p { color: var(--text-soft) }

  ::selection { background: var(--brand); color: #fff }
  :focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px }

  ::-webkit-scrollbar { width: 11px; height: 11px }
  ::-webkit-scrollbar-track { background: var(--bg) }
  ::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--brand), var(--cyan));
    border: 3px solid var(--bg);
    border-radius: 999px;
  }
}

/* ═══════════════ ۴) چیدمان ═══════════════ */
@layer layout {
  .shell { width: var(--shell); margin-inline: auto }
  .section { padding-block: clamp(56px, 8vw, 82px); position: relative }
  /* سکشن‌های زوج با پس‌زمینه‌ی متفاوت — حالا توکن‌محور و سازگار با دارک‌مود */
  .section:nth-of-type(even) { background: var(--bg-elevated) }
  .section-tight { padding-block: clamp(44px, 6vw, 64px) }
  .section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 40px) }
  .section-head.center { text-align: center; margin-inline: auto }
  .section-head p { font-size: clamp(1rem, 2vw, 1.1rem); margin-top: 14px; color: var(--muted); max-width: 680px }
  .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px }
  .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px }
  .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px }
  .why-python-copy { max-width: 880px }
}

/* ═══════════════ ۵) کامپوننت‌ها ═══════════════ */
@layer components {

  /* ── هدر شناور و ناوبری ── */
  .site-header {
    position: sticky; z-index: 1000; top: 12px;
    height: auto; padding: 0 12px;
    background: transparent; border: 0;
  }
  .site-nav {
    min-height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: color-mix(in srgb, var(--bg-elevated) 94%, transparent);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 10px 14px;
    box-shadow: 0 10px 35px rgba(35,25,80,.08);
    backdrop-filter: blur(18px);
    transition: box-shadow .25s, border-color .25s;
  }
  :root[data-theme="dark"] .site-nav { box-shadow: 0 12px 38px rgba(0,0,0,.35) }
  .site-header.scrolled .site-nav { box-shadow: var(--shadow); border-color: var(--line-strong) }

  .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.05rem; font-weight: 850; white-space: nowrap; color: var(--text) }
  .brand b { color: var(--brand); font-weight: 900 }
  .brand-mark {
    width: 42px; height: 42px; border-radius: 14px; flex: 0 0 42px;
    display: grid; place-items: center;
    background: linear-gradient(135deg, #6d4aff, #9f7aea);
    color: #fff; font-weight: 900; font-size: .92rem;
    box-shadow: 0 8px 20px rgba(109,74,255,.25);
    direction: ltr;
  }

  .nav-panel { display: flex; align-items: center; gap: 4px; flex: 1 }
  .nav-panel > a {
    padding: 9px 12px; border-radius: 11px;
    color: var(--text-soft); font-size: .92rem; font-weight: 650;
    transition: background .2s, color .2s;
  }
  .nav-panel > a:hover, .nav-panel > a[aria-current="page"] { background: var(--brand-soft); color: var(--brand) }
  .nav-panel .nav-lab {
    margin-inline-start: auto;
    color: var(--mint);
    background: color-mix(in srgb, var(--mint) 13%, transparent);
  }

  .nav-actions {
    display: flex; align-items: center; gap: 9px;
    border-right: 1px solid var(--line);
    padding-right: 12px; margin-right: 6px;
  }
  .nav-toggle { display: none }

  .icon-button {
    width: 42px; height: 42px; flex: 0 0 42px;
    display: inline-grid; place-items: center;
    border: 1px solid var(--line); border-radius: 13px;
    background: var(--surface); color: var(--text);
    cursor: pointer;
    transition: transform .2s, border-color .2s, background .2s;
  }
  .icon-button:hover { transform: translateY(-2px); border-color: var(--line-strong); background: var(--surface-2) }

  .theme-toggle { position: relative }
  .theme-toggle .sun, .theme-toggle .moon { position: absolute; transition: .25s }
  .theme-toggle .moon { opacity: 0; transform: rotate(-50deg) scale(.6) }
  [data-theme="dark"] .theme-toggle .sun { opacity: 0; transform: rotate(60deg) scale(.6) }
  [data-theme="dark"] .theme-toggle .moon { opacity: 1; transform: none }

  .notification-link { position: relative; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; border: 1px solid var(--line) }
  .notification-link b {
    position: absolute; top: -5px; left: -5px;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 99px; background: var(--danger); color: #fff;
    font-size: .69rem; display: grid; place-items: center;
  }
  .nav-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover }

  /* ── دکمه‌ها ── */
  .button {
    min-height: 44px; padding: 10px 20px;
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: 1px solid transparent; border-radius: 13px;
    font-weight: 800; cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s, border-color .2s, background .2s;
  }
  .button:hover { transform: translateY(-2px) }
  .button:active { transform: translateY(0) scale(.98) }
  .button-primary { background: var(--gradient-brand); color: #fff }
  .button-primary:hover { box-shadow: 0 10px 22px rgba(109,74,255,.24) }
  .button-secondary { background: var(--surface); border-color: var(--line); color: var(--text) }
  .button-secondary:hover { border-color: var(--line-strong); background: var(--surface-2) }
  .button-ghost { background: transparent; color: var(--brand); border-color: var(--line) }
  .button.compact { min-height: 42px; padding: 8px 15px; border-radius: 12px; font-size: .9rem }
  .button.wide { width: 100% }
  .button[disabled] { opacity: .55; cursor: not-allowed; transform: none }

  .header-login { position: relative; padding-left: 38px }
  .header-login::after { content: "↗"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%); font-size: 17px }

  .text-link { color: var(--brand); font-weight: 750; display: inline-flex; align-items: center; gap: 7px; transition: gap .2s }
  .text-link:hover { gap: 11px }

  /* ── نشان‌ها و تایپوگرافی ویژه ── */
  .eyebrow, .kicker {
    display: inline-flex; align-items: center; gap: 8px; width: auto;
    padding: 7px 13px; margin-bottom: 18px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    color: var(--brand); font-size: .83rem; font-weight: 850; letter-spacing: .02em;
    box-shadow: 0 6px 20px rgba(35,25,80,.05);
  }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px color-mix(in srgb, var(--mint) 15%, transparent) }
  .gradient-text { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent }
  .lead { font-size: clamp(1.04rem, 2vw, 1.15rem); line-height: 1.9; color: var(--muted) }

  /* ── هیرو ── */
  .hero { padding-block: clamp(96px, 14vh, 150px) 80px; position: relative; overflow: hidden }
  .hero::before {
    content: ""; position: absolute; pointer-events: none;
    width: min(620px, 80vw); aspect-ratio: 1; left: -28%; top: -8%;
    background: radial-gradient(circle, rgba(109,74,255,.11), transparent 67%);
    filter: blur(10px);
  }
  .hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); align-items: center; gap: clamp(40px, 7vw, 70px) }
  .hero-copy h1 { max-width: 780px }
  .hero-copy .lead { max-width: 660px; margin-top: 22px }
  .hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 30px }
  .hero-trust {
    display: flex; align-items: center; gap: 16px; width: max-content; max-width: 100%;
    margin-top: 28px; padding: 11px 14px;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    color: var(--muted); font-size: .9rem;
  }
  .avatar-stack { display: flex; direction: ltr }
  .avatar-stack span {
    width: 34px; height: 34px; margin-left: -9px;
    display: grid; place-items: center;
    border: 3px solid var(--bg); border-radius: 50%;
    background: var(--gradient-brand-cyan); color: #fff;
    font-size: .72rem; font-weight: 800;
  }
  .hero-visual { position: relative; isolation: isolate }

  /* ── پنجره‌ی کد ── */
  .code-window {
    background: #16122b;
    border: 1px solid #292348; border-radius: 22px;
    box-shadow: 0 24px 55px rgba(31,24,63,.2);
    overflow: hidden;
    transform: rotate(-1.2deg);
    transition: transform .5s var(--ease);
  }
  .code-window:hover { transform: rotate(0) translateY(-4px) }
  .window-bar { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 17px; border-bottom: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.04) }
  .window-dots { display: flex; direction: ltr; gap: 7px }
  .window-dots i { width: 10px; height: 10px; border-radius: 50%; background: #fb7185 }
  .window-dots i:nth-child(2) { background: #fbbf24 }
  .window-dots i:nth-child(3) { background: #34d399 }
  .window-title { color: #8f87ab; font-size: .78rem; direction: ltr }
  .code-body {
    direction: ltr; text-align: left;
    padding: 24px; min-height: 300px; overflow: auto;
    background: #0b0918; color: #d5e3fa;
    font: 500 .87rem/1.95 ui-monospace, SFMono-Regular, Consolas, monospace;
  }
  .code-body .kw { color: #c084fc } .code-body .fn { color: #67e8f9 }
  .code-body .str { color: #86efac } .code-body .num { color: #fbbf24 }
  .code-body .cm { color: #64748b }
  .output-bar { direction: rtl; display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: #120e24; color: #9fb1cc; font-size: .82rem; border-top: 1px solid rgba(255,255,255,.07) }
  .output-bar i { width: 8px; height: 8px; border-radius: 50%; background: #34d399 }

  .floating-card {
    position: absolute; z-index: 2;
    padding: 13px 16px;
    background: var(--surface-solid); border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow); color: var(--text);
    font-size: .82rem; font-weight: 700;
    animation: float 5s ease-in-out infinite;
  }
  .floating-card.one { top: 14%; right: -6% }
  .floating-card.two { bottom: 10%; left: -7%; animation-delay: -2.5s }
  .floating-card strong { display: block; color: var(--mint); font-size: 1.1rem }
  @keyframes float { 50% { transform: translateY(-10px) } }

  /* ── نوار لوگو ── */
  .logo-cloud { border-block: 1px solid var(--line); padding-block: 24px; background: var(--bg-elevated) }
  .logo-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
  .logo-row > * {
    white-space: nowrap; direction: ltr;
    padding: 7px 13px;
    background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px;
    color: var(--muted); font-weight: 800; font-size: .9rem;
  }

  /* ── کارت پایه ── */
  .card, .course-card, .project-card, .testimonial, .stat, .split-panel,
  .certificate-panel, .article-library-card, .exercise-collection-card,
  .contact-form, .faq-item {
    background: var(--surface-solid);
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }
  .card { position: relative; padding: 24px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s }
  .card p { margin-top: 10px }
  @media (hover: hover) {
    .card:hover, .course-card:hover, .project-card:hover,
    .article-library-card:hover, .exercise-collection-card:hover {
      transform: translateY(-4px);
      border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
      box-shadow: var(--shadow);
    }
  }
  .icon-box {
    width: 48px; height: 48px; margin-bottom: 20px;
    display: grid; place-items: center;
    border-radius: 13px; background: var(--brand-soft); color: var(--brand);
    font-weight: 900; font-size: 1.2rem; border: 1px solid var(--line);
  }
  .feature-card:nth-child(2n) .icon-box { color: var(--cyan) }
  .feature-card:nth-child(3n) .icon-box { color: var(--mint) }

  /* ── پنل دو ستونه + مدار پایتون ── */
  .split-panel { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(32px, 6vw, 70px); padding: clamp(24px, 4vw, 48px) }
  .split-panel.instructor-single { grid-template-columns: minmax(0, 900px); justify-content: center }
  .python-orbit { aspect-ratio: 1; position: relative; display: grid; place-items: center; max-width: 500px; margin: auto }
  .python-orbit::before, .python-orbit::after {
    content: ""; position: absolute; inset: 9%; border-radius: 50%;
    border: 1px dashed color-mix(in srgb, var(--brand) 35%, transparent);
    animation: spin 25s linear infinite;
  }
  .python-orbit::after { inset: 24%; animation-direction: reverse; animation-duration: 17s }
  .python-core {
    width: 150px; height: 150px; border-radius: 40px; direction: ltr;
    display: grid; place-items: center;
    background: var(--gradient-brand-cyan); color: #fff;
    font-size: 2.4rem; font-weight: 900;
    box-shadow: 0 30px 80px rgba(109,74,255,.28);
  }
  .orbit-item { position: absolute; direction: ltr; padding: 10px 14px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-sm); font-weight: 750; font-size: .82rem }
  .orbit-item:nth-child(2) { top: 4%; left: 35% }
  .orbit-item:nth-child(3) { top: 29%; right: 1% }
  .orbit-item:nth-child(4) { bottom: 12%; right: 14% }
  .orbit-item:nth-child(5) { bottom: 4%; left: 30% }
  .orbit-item:nth-child(6) { top: 34%; left: 1% }
  @keyframes spin { to { transform: rotate(360deg) } }

  .check-list { display: grid; gap: 15px; margin-top: 26px }
  .check-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--text-soft) }
  .check-list i { flex: 0 0 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--mint) 13%, transparent); color: var(--mint); font-style: normal; font-weight: 900 }

  /* ── کارت دوره ── */
  .course-card { display: flex; flex-direction: column; min-height: 340px; padding: 14px 14px 20px; position: relative; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s }
  .course-cover {
    min-height: 150px; margin-bottom: 18px;
    display: grid; place-items: center; position: relative; overflow: hidden;
    border-radius: 15px;
    background: linear-gradient(135deg, #111827, #312e81); color: #fff;
  }
  .course-cover::before { content: ""; position: absolute; inset: -50%; background: conic-gradient(from 40deg, transparent, rgba(34,211,238,.22), transparent 34%); animation: spin 12s linear infinite }
  .course-cover b { position: relative; font-size: 2.1rem; direction: ltr }
  .course-card:nth-child(2) .course-cover { background: linear-gradient(135deg, #172554, #075985) }
  .course-card:nth-child(3) .course-cover { background: linear-gradient(135deg, #052e2b, #064e3b) }
  .course-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 13px }
  .badge { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .73rem; font-weight: 750 }
  .course-card .card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 20px }
  .price { font-weight: 900; color: var(--brand) }

  /* ── مسیر یادگیری ── */
  .path { display: grid; max-width: 900px; margin-inline: auto; counter-reset: path }
  .path-step { counter-increment: path; display: grid; grid-template-columns: 90px 1fr; gap: 25px; position: relative; padding-bottom: 30px }
  .path-step:not(:last-child)::before { content: ""; position: absolute; right: 44px; top: 54px; bottom: 0; width: 2px; background: linear-gradient(var(--brand), color-mix(in srgb, var(--brand) 10%, transparent)) }
  .path-number { width: 90px; height: 90px; display: grid; place-items: center; border-radius: 24px; background: var(--surface-solid); border: 2px solid var(--brand); color: var(--brand); font-size: 1.6rem; font-weight: 900 }
  .path-number::after { content: counter(path, decimal-leading-zero) }
  .path-content { padding: 19px 24px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px }
  .path-content p { margin-top: 8px }

  /* ── کارت مقاله ── */
  .article-card .article-thumb { height: 155px; display: flex; align-items: flex-end; margin-bottom: 18px; padding: 20px; border-radius: 15px; background: linear-gradient(135deg, #312e81, #0369a1); color: #fff; font-size: 2.1rem; font-weight: 900; direction: ltr }
  .article-card:nth-child(2) .article-thumb { background: linear-gradient(135deg, #064e3b, #0e7490) }
  .article-card:nth-child(3) .article-thumb { background: linear-gradient(135deg, #4c1d95, #be185d) }
  .article-meta { display: flex; gap: 14px; margin-bottom: 12px; color: var(--muted); font-size: .78rem }

  /* ── پنل تیره‌ی تمرین‌ها (در هر دو تم تیره می‌ماند) ── */
  .exercise-showcase {
    position: relative; overflow: hidden;
    padding: clamp(30px, 6vw, 72px);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #07111f, #131f38); color: #f8fbff;
    box-shadow: var(--shadow-lg);
  }
  .exercise-showcase::before { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; left: -120px; top: -180px; background: rgba(99,102,241,.22); filter: blur(90px) }
  .exercise-showcase p { color: #b8c6db }
  .exercise-showcase .section-head { position: relative }
  .exercise-mini { position: relative; padding: 23px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.11); border-radius: 18px; backdrop-filter: blur(10px) }
  .exercise-mini p { margin-top: 9px }
  .exercise-index-grid { display: grid; grid-template-columns: repeat(9, minmax(42px, 1fr)); gap: 9px; margin-top: 28px; position: relative }
  .exercise-index-grid a { aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: rgba(255,255,255,.075); color: #eef5ff; font: 800 .82rem/1 ui-monospace, monospace; transition: .2s }
  .exercise-index-grid a:hover, .exercise-index-grid a:focus-visible { background: #6d4aff; border-color: #8b5cf6; transform: translateY(-3px); box-shadow: 0 10px 24px rgba(109,74,255,.35) }
  .exercise-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; position: relative }
  .exercise-showcase .button-secondary { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.07) }

  /* ── آمار و نظرات ── */
  .stat { padding: 27px; text-align: center }
  .stat strong { display: block; font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.2; color: var(--brand) }
  .stat span { color: var(--muted); font-size: .9rem }
  .testimonial { display: flex; flex-direction: column; padding: 25px }
  .quote { flex: 1; font-size: 1.02rem; color: var(--text) }
  .quote::before { content: "“"; display: block; margin-bottom: 16px; color: var(--brand); font-size: 3rem; line-height: .6 }
  .person { display: flex; align-items: center; gap: 12px; margin-top: 24px }
  .person-avatar { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; background: var(--gradient-brand-cyan); color: #fff; font-weight: 800 }
  .person small { display: block; color: var(--muted) }

  /* ── پروژه ── */
  .project-card { padding: 0; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s, border-color .25s }
  .project-preview { height: 190px; padding: 24px; overflow: hidden; direction: ltr; background: #07111f; color: #b8c9e4; font: 500 .76rem/1.8 ui-monospace, monospace }
  .project-card .project-body { padding: 23px }
  .project-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 15px }

  /* ── گواهینامه ── */
  .certificate-panel {
    display: grid; grid-template-columns: 1fr .9fr; align-items: center; gap: 50px;
    padding: clamp(28px, 6vw, 68px);
    background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 9%, var(--surface-solid)), var(--surface-solid));
    border-radius: var(--radius-xl); overflow: hidden;
  }
  .certificate { position: relative; aspect-ratio: 1.42; padding: 27px; text-align: center; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 15px; box-shadow: var(--shadow-lg); transform: rotate(-3deg) }
  .certificate::before { content: ""; position: absolute; inset: 10px; border: 2px solid color-mix(in srgb, var(--brand) 40%, transparent); border-radius: 9px }
  .certificate > * { position: relative }
  .certificate .brand-mark { margin: 0 auto 18px }
  .certificate h3 { font-size: 1.35rem }
  .certificate strong { display: block; margin: 15px; color: var(--brand); font-size: 1.2rem }
  .certificate small { color: var(--muted) }

  /* ── پنل انجمن (تیره در هر دو تم) ── */
  .community-panel {
    position: relative; overflow: hidden;
    padding: clamp(35px, 7vw, 80px); text-align: center;
    border-radius: var(--radius-xl); color: #fff;
    background:
      radial-gradient(circle at 10% 20%, rgba(34,211,238,.18), transparent 28%),
      radial-gradient(circle at 90% 80%, rgba(167,139,250,.18), transparent 30%),
      #07111f;
  }
  .community-panel p { max-width: 650px; margin: 17px auto 28px; color: #b8c6db }
  .community-panel .button-secondary { color: #fff; border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.07) }

  /* ── سوالات متداول ── */
  .faq-list { display: grid; gap: 10px; max-width: 850px; margin-inline: auto }
  .faq-item { overflow: hidden }
  .faq-item summary { list-style: none; cursor: pointer; position: relative; padding: 18px 55px 18px 20px; font-weight: 800; transition: color .2s }
  .faq-item summary::-webkit-details-marker { display: none }
  .faq-item summary:hover { color: var(--brand) }
  .faq-item summary::before { content: "+"; position: absolute; right: 21px; top: 50%; transform: translateY(-50%); color: var(--brand); font-size: 1.35rem; transition: transform .2s }
  .faq-item[open] summary::before { transform: translateY(-50%) rotate(45deg) }
  .faq-item p { padding: 16px 22px 22px; border-top: 1px solid var(--line); color: var(--muted) }

  /* ── خبرنامه (تیره در هر دو تم) ── */
  .newsletter {
    display: grid; grid-template-columns: 1fr .9fr; gap: 40px; align-items: center;
    padding: clamp(28px, 6vw, 62px);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, #211a43, #4a2e91); color: #fff;
  }
  .newsletter p { color: #cfc8ea }
  .inline-form { display: flex; gap: 9px }
  .inline-form input { flex: 1; min-width: 0 }

  /* ── فرم‌ها ── */
  .field { display: grid; gap: 7px }
  .field label { font-size: .88rem; font-weight: 750 }
  .field input, .field textarea, .field select, .inline-form input, .search-input {
    width: 100%; padding: 13px 15px;
    background: var(--surface-solid); color: var(--text);
    border: 1px solid var(--line); border-radius: 13px;
    transition: border-color .2s, box-shadow .2s;
  }
  .field textarea { resize: vertical; min-height: 130px }
  .field input:focus, .field textarea:focus, .inline-form input:focus, .search-input:focus {
    border-color: var(--brand); outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
  }
  .field-help { color: var(--muted); font-size: .78rem }

  .contact-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 45px }
  .contact-methods { display: grid; gap: 12px; margin-top: 28px }
  .contact-method { display: flex; align-items: center; gap: 12px; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: 15px }
  .contact-form { display: grid; gap: 17px; padding: 28px; box-shadow: var(--shadow-sm) }
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px }
  .hp-field { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; pointer-events: none !important }
  .form-status { min-height: 24px; color: var(--muted); font-size: .88rem }
  .form-status.success { color: var(--success) }
  .form-status.error { color: var(--danger) }

  /* ── فوتر (تیره در هر دو تم) ── */
  .site-footer { margin-top: 60px; padding-top: 70px; background: #171329; color: #d8d3ec }
  .footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 40px; padding-bottom: 48px }
  .footer-about p { max-width: 360px; margin-top: 18px; color: #b3abc9 }
  .footer-grid h2 { margin-bottom: 15px; color: #fff; font-size: 1rem }
  .footer-grid > div:not(:first-child) { display: flex; flex-direction: column; align-items: flex-start; gap: 9px }
  .footer-grid > div:not(:first-child) a { color: #c3bdd9; font-size: .9rem; transition: color .2s }
  .footer-grid a:hover { color: #fff }
  .footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 20px; border-top: 1px solid rgba(255,255,255,.08); color: #9d94b8; font-size: .82rem }

  /* ── کتابخانه‌ی مقالات ── */
  .article-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px }
  .article-library-card {
    position: relative; overflow: hidden;
    min-height: 150px; padding: 20px;
    display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
    color: var(--text); box-shadow: var(--shadow-sm);
    transition: transform .25s var(--ease), border-color .25s, box-shadow .25s;
  }
  .article-library-card::after { content: "←"; position: absolute; left: 18px; bottom: 17px; color: var(--brand); font-weight: 900; transition: transform .2s }
  .article-library-card:hover::after { transform: translateX(-4px) }
  .article-library-card > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: var(--brand-soft); color: var(--brand); font: 800 .72rem/1 ui-monospace, monospace }
  .article-library-card strong { font-size: 1.02rem }
  .article-library-card small { padding-left: 22px; color: var(--muted) }
  .article-library-card.featured { grid-column: span 2; background: radial-gradient(circle at 10% 110%, color-mix(in srgb, var(--mint) 12%, transparent), transparent 42%), linear-gradient(145deg, var(--surface-solid), color-mix(in srgb, var(--brand) 8%, var(--surface-solid))) }
  .article-library-card[hidden] { display: none !important }

  /* ── هاب محتوا ── */
  .content-hub { min-height: 80vh }
  .hub-hero {
    padding-block: clamp(80px, 12vw, 150px) clamp(55px, 8vw, 95px);
    border-bottom: 1px solid var(--line);
    background:
      radial-gradient(circle at 85% 10%, rgba(109,74,255,.16), transparent 32rem),
      radial-gradient(circle at 12% 90%, rgba(5,150,105,.10), transparent 28rem);
  }
  :root[data-theme="dark"] .hub-hero {
    background:
      radial-gradient(circle at 85% 10%, rgba(120,110,255,.18), transparent 32rem),
      radial-gradient(circle at 12% 90%, rgba(52,211,153,.10), transparent 28rem);
  }
  .hub-hero h1 { max-width: 850px; margin-top: 16px }
  .hub-hero .lead { max-width: 720px; margin-top: 20px }
  .hub-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 30px }
  .hub-stats span { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .86rem }
  .hub-stats strong { color: var(--brand); font-size: 1.05rem }
  .hub-toolbar { display: grid; grid-template-columns: auto minmax(240px, 560px) auto; align-items: center; gap: 14px; margin-bottom: 28px; padding: 14px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-sm) }
  .hub-toolbar label { font-weight: 800 }
  .hub-toolbar span { color: var(--muted); font-size: .85rem }
  .hub-empty { padding: 60px 20px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 20px }

  /* ── خروج از حساب ── */
  .session-logout-form { display: flex; margin: 0 }
  .session-logout-form input[type="hidden"] { display: none }
  .session-logout-button {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
    background: color-mix(in srgb, var(--danger) 9%, var(--surface));
    color: var(--danger);
  }
  .session-logout-button:hover { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 15%, var(--surface)) }

  /* ── آکاردئون صفحه‌ی اصلی + کارت‌های مجموعه تمرین ── */
  .home-collapsible { border: 0 }
  .home-collapsible > summary { display: none }
  .exercise-collection-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px }
  .exercise-collection-card {
    --card-accent: var(--brand);
    position: relative; overflow: hidden; isolation: isolate;
    min-height: 220px; padding: 22px;
    display: flex; flex-direction: column; gap: 12px;
    color: var(--text);
    border-radius: 24px;
    background:
      radial-gradient(circle at 90% 0, color-mix(in srgb, var(--card-accent) 14%, transparent), transparent 42%),
      linear-gradient(145deg, var(--surface-solid), var(--surface));
    box-shadow: var(--shadow-sm);
    transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
  }
  .exercise-collection-card::before {
    content: ""; position: absolute; z-index: -1;
    inset: auto -28% -64% auto; width: 180px; aspect-ratio: 1; border-radius: 50%;
    background: color-mix(in srgb, var(--card-accent) 14%, transparent);
    filter: blur(3px);
    transition: transform .45s var(--ease);
  }
  .exercise-collection-card:hover::before { transform: scale(1.35) translate(-10px, -8px) }
  .exercise-collection-card.featured { grid-column: span 2 }
  .collection-card-top, .collection-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px }
  .collection-card-top > span { padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--card-accent) 12%, var(--surface-solid)); color: var(--card-accent); font: 900 .73rem/1.5 var(--font) }
  .collection-card-top > i { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: color-mix(in srgb, var(--card-accent) 13%, var(--surface-solid)); color: var(--card-accent); font: 900 1.2rem/1 var(--font); font-style: normal; transition: transform .3s var(--ease) }
  .exercise-collection-card:hover .collection-card-top > i { transform: rotate(-9deg) scale(1.08) }
  .exercise-collection-card > strong { font-size: 1.13rem; line-height: 1.65 }
  .exercise-collection-card > p { margin: 0; color: var(--text-soft); font-size: .88rem; line-height: 1.9 }
  .collection-card-meta { margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line) }
  .collection-card-meta small { color: var(--muted); font-weight: 800 }
  .collection-card-meta em { color: var(--card-accent); font-style: normal; font-size: .78rem; font-weight: 900; transition: transform .2s }
  .exercise-collection-card:hover .collection-card-meta em { transform: translateX(-4px) }
  .tone-2 { --card-accent: var(--cyan) }
  .tone-3 { --card-accent: var(--mint) }
  .tone-4 { --card-accent: var(--amber) }
  .tone-5 { --card-accent: var(--brand-2) }
}

/* ═══════════════ ۶) اورلی‌ها (توسّت، دیالوگ، لودینگ…) ═══════════════ */
@layer overlays {
  .skip-link { position: fixed; z-index: 9999; top: 8px; right: 50%; transform: translate(50%, -150%); padding: 10px 18px; border-radius: 10px; background: var(--text); color: var(--bg); transition: transform .2s }
  .skip-link:focus { transform: translate(50%, 0) }

  .page-progress { position: fixed; z-index: 1200; top: 0; right: 0; left: 0; height: 3px; pointer-events: none }
  .page-progress span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: right center; background: linear-gradient(90deg, var(--brand), var(--cyan), var(--mint)); will-change: transform }

  .back-to-top {
    position: fixed; z-index: 900; left: 22px; bottom: 22px;
    background: var(--gradient-brand); color: #fff; border: 0;
    box-shadow: var(--shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(15px);
  }
  .back-to-top.visible { opacity: 1; visibility: visible; transform: none }

  .toast {
    position: fixed; z-index: 1300; left: 22px; bottom: 22px;
    max-width: min(420px, calc(100% - 44px));
    display: flex; align-items: center; gap: 14px;
    padding: 14px 17px;
    background: var(--surface-solid); color: var(--text);
    border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--shadow-lg);
    animation: toast-in .35s var(--ease);
  }
  .toast button { border: 0; background: transparent; color: var(--muted); font-size: 1.3rem; cursor: pointer }
  .toast-success { border-right: 4px solid var(--success) }
  .toast-error { border-right: 4px solid var(--danger) }
  @keyframes toast-in { from { opacity: 0; transform: translateY(20px) } }

  .loading-screen { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; background: var(--bg); transition: opacity .45s, visibility .45s }
  .loading-screen.hidden { opacity: 0; visibility: hidden }
  .loader-mark { display: grid; place-items: center; gap: 18px; font-weight: 800 }
  .loader-ring { width: 58px; height: 58px; border: 4px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite }

  .search-dialog {
    width: min(700px, calc(100% - 30px)); padding: 0;
    background: var(--surface-solid); color: var(--text);
    border: 1px solid var(--line); border-radius: 20px;
    box-shadow: var(--shadow-lg);
  }
  .search-dialog[open] { animation: dialog-in .25s var(--ease) }
  @keyframes dialog-in { from { opacity: 0; transform: translateY(14px) } }
  .search-dialog::backdrop { background: rgba(2,6,23,.66); backdrop-filter: blur(8px) }
  .search-box-dialog { padding: 18px }
  .search-dialog-head { display: flex; gap: 10px }
  .search-results { display: grid; gap: 8px; max-height: 55vh; overflow: auto; margin-top: 13px }
  .search-result { display: block; padding: 13px; border: 1px solid var(--line); border-radius: 12px }
  .search-result:hover { background: var(--surface-2) }
  .search-result small { display: block; color: var(--muted) }

  .install-prompt { position: fixed; z-index: 950; right: 22px; bottom: 22px; max-width: 350px; display: none; padding: 18px; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg) }
  .install-prompt.visible { display: block }
  .install-prompt p { margin: 7px 0 14px; font-size: .86rem }
  .install-actions { display: flex; gap: 8px }

  /* ── ظهور تدریجی و اسکلت ── */
  .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease) }
  .reveal.visible { opacity: 1; transform: none }
  .skeleton { position: relative; overflow: hidden; background: var(--surface-2); color: transparent !important; border-radius: 8px }
  .skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); animation: shimmer 1.5s infinite }
  @keyframes shimmer { to { transform: translateX(-100%) } }
}

/* ═══════════════ ۷) پس‌زمینه‌ی سه‌بعدی محیطی ═══════════════ */
@layer ambient {
  .ambient-3d {
    --mx: 0; --my: 0;
    --a-blue: #6d4aff; --a-cyan: #0891b2; --a-violet: #8b5cf6;
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    pointer-events: none; perspective: 900px; transform-style: preserve-3d;
    contain: strict; opacity: .7;
  }
  :root[data-theme="dark"] .ambient-3d { --a-blue: #7c6cf0; --a-cyan: #22d3ee; --a-violet: #a78bfa; opacity: .88 }
  .ambient-grid {
    position: absolute; left: -20%; right: -20%; bottom: -38%; height: 74%;
    transform-origin: 50% 100%;
    transform: rotateX(67deg) translate3d(calc(var(--mx) * -7px), calc(var(--my) * -4px), -80px);
    background-image:
      linear-gradient(color-mix(in srgb, var(--a-blue) 15%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--a-cyan) 13%, transparent) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(to top, #000 15%, transparent 88%);
    animation: bg-grid 22s linear infinite;
    will-change: transform;
  }
  .ambient-orb, .ambient-panel { position: absolute; display: block; will-change: transform; backface-visibility: hidden }
  .ambient-orb {
    border-radius: 50%;
    box-shadow:
      inset -24px -28px 50px rgba(8,15,40,.16),
      inset 14px 12px 30px rgba(255,255,255,.3),
      0 28px 80px color-mix(in srgb, var(--tone) 22%, transparent);
    background:
      radial-gradient(circle at 30% 25%, rgba(255,255,255,.72), transparent 13%),
      radial-gradient(circle at 38% 34%, color-mix(in srgb, var(--tone) 70%, #fff), var(--tone) 43%, color-mix(in srgb, var(--tone) 18%, transparent) 73%);
  }
  :root[data-theme="dark"] .ambient-orb {
    box-shadow:
      inset -28px -32px 60px rgba(0,0,0,.36),
      inset 12px 10px 25px rgba(255,255,255,.18),
      0 30px 90px color-mix(in srgb, var(--tone) 30%, transparent);
  }
  .orb-a { --tone: var(--a-blue); width: 190px; height: 190px; top: 9%; right: 5%; opacity: .2; animation: orb-a 17s ease-in-out infinite }
  .orb-b { --tone: var(--a-cyan); width: 135px; height: 135px; top: 46%; left: 4%; opacity: .16; animation: orb-b 21s ease-in-out infinite reverse }
  .orb-c { --tone: var(--a-violet); width: 92px; height: 92px; bottom: 12%; right: 18%; opacity: .15; animation: orb-c 15s ease-in-out infinite }
  .ambient-panel {
    width: 170px; height: 220px;
    border: 1px solid color-mix(in srgb, var(--tone) 30%, transparent);
    border-radius: 28px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 11%, rgba(255,255,255,.46)), rgba(255,255,255,.03));
    box-shadow: inset 0 1px rgba(255,255,255,.3), 0 30px 80px color-mix(in srgb, var(--tone) 15%, transparent);
    backdrop-filter: blur(3px);
  }
  :root[data-theme="dark"] .ambient-panel { background: linear-gradient(145deg, color-mix(in srgb, var(--tone) 14%, rgba(10,20,38,.58)), rgba(5,9,19,.06)) }
  .panel-a { --tone: var(--a-violet); top: 24%; left: 11%; opacity: .2; animation: panel-a 19s ease-in-out infinite }
  .panel-b { --tone: var(--a-cyan); bottom: 15%; right: 7%; width: 140px; height: 180px; opacity: .17; animation: panel-b 23s ease-in-out infinite reverse }

  @keyframes bg-grid { to { background-position: 0 64px } }
  @keyframes orb-a { 0%,100% { transform: translate3d(calc(var(--mx)*18px), calc(var(--my)*14px), 20px) } 50% { transform: translate3d(calc(var(--mx)*18px - 34px), calc(var(--my)*14px + 28px), 90px) } }
  @keyframes orb-b { 0%,100% { transform: translate3d(calc(var(--mx)*-14px), calc(var(--my)*10px), 10px) } 50% { transform: translate3d(calc(var(--mx)*-14px + 30px), calc(var(--my)*10px - 35px), 70px) } }
  @keyframes orb-c { 0%,100% { transform: translate3d(calc(var(--mx)*12px), 0, 30px) scale(.94) } 50% { transform: translate3d(calc(var(--mx)*12px - 18px), -25px, 100px) scale(1.08) } }
  @keyframes panel-a { 0%,100% { transform: translate3d(calc(var(--mx)*-20px), calc(var(--my)*-15px), -40px) rotateY(24deg) rotateX(8deg) } 50% { transform: translate3d(calc(var(--mx)*-20px + 22px), calc(var(--mx)*-15px - 28px), 45px) rotateY(12deg) rotateX(-3deg) } }
  @keyframes panel-b { 0%,100% { transform: translate3d(calc(var(--mx)*16px), calc(var(--my)*12px), -20px) rotateY(-28deg) rotateX(6deg) } 50% { transform: translate3d(calc(var(--mx)*16px - 25px), calc(var(--my)*12px + 24px), 55px) rotateY(-15deg) rotateX(-5deg) } }
  body.ambient-paused .ambient-3d * { animation-play-state: paused !important }
}

/* ═══════════════ ۸) یوتیلیتی‌ها ═══════════════ */
@layer utilities {
  .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important }
  .muted { color: var(--muted) }
  .text-center { text-align: center }
  .mt-1 { margin-top: 8px } .mt-2 { margin-top: 16px }
  .mt-3 { margin-top: 24px } .mt-4 { margin-top: 32px }
}

/* ═══════════════ ۹) ریسپانسیو — ۴ بریک‌پوینت ═══════════════ */
@layer responsive {

  /* ── ≤1180px: تبدیل منو به همبرگر ── */
  @media (max-width: 1180px) {
    .nav-toggle { display: grid; gap: 4px; position: relative }
    .nav-toggle span { display: block; width: 20px; height: 2px; border-radius: 3px; background: currentColor; transition: .25s }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }

    .nav-panel {
      position: fixed; z-index: 1000;
      top: calc(var(--header-h) + 26px); right: 16px; left: 16px;
      max-height: calc(100svh - var(--header-h) - 40px);
      overflow: auto;
      flex-direction: column; align-items: stretch; gap: 6px;
      padding: 12px;
      background: var(--surface-solid);
      border: 1px solid var(--line); border-radius: 20px;
      box-shadow: var(--shadow-lg);
      opacity: 0; visibility: hidden; pointer-events: none;
      transform: translateY(-10px) scale(.985);
      transition: .22s var(--ease);
    }
    .nav-panel.open { opacity: 1; visibility: visible; pointer-events: auto; transform: none }
    .nav-panel > a { display: flex; align-items: center; min-height: 46px; padding: 10px 14px; border-radius: 13px; font-weight: 750; font-size: 1rem }
    .nav-panel .nav-lab { margin: 3px 0 0 }

    .nav-actions {
      display: grid; grid-template-columns: 42px 42px minmax(0, 1fr);
      align-items: stretch; gap: 8px; width: 100%;
      border-right: 0; border-top: 1px solid var(--line);
      padding: 12px 0 0; margin: 6px 0 0;
    }
    .nav-actions > .icon-button, .nav-actions > .notification-link { width: 42px; height: 44px }
    .nav-actions > .button { width: 100%; min-height: 44px; padding: 8px 13px; font-size: .86rem; white-space: nowrap }
    .nav-actions > .header-login { padding-left: 13px }
    .nav-actions > .header-login::after { display: none }
    .nav-actions .session-logout-form { grid-column: 1 / -1; width: 100% }
    .nav-actions .session-logout-form .button { width: 100% }
  }

  /* ── ≤1020px: تغییر چیدمان گریدها ── */
  @media (max-width: 1020px) {
    :root { --shell: min(100% - 32px, 900px) }
    .hero-grid { grid-template-columns: 1fr }
    .hero-copy { text-align: center }
    .hero-copy .lead { margin-inline: auto }
    .hero-actions, .hero-trust { justify-content: center; margin-inline: auto }
    .hero-visual { width: 100%; max-width: 680px; margin-inline: auto }
    .grid-4 { grid-template-columns: repeat(2, 1fr) }
    .grid-3 { grid-template-columns: repeat(2, 1fr) }
    .split-panel, .certificate-panel, .newsletter, .contact-grid { grid-template-columns: 1fr }
    .python-orbit { order: -1; width: min(100%, 460px) }
    .certificate { max-width: 520px; margin: auto }
    .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr) }
    .footer-grid > div:last-child { grid-column: 2 }
    .article-library-grid { grid-template-columns: repeat(3, minmax(0,1fr)) }
    .exercise-index-grid { grid-template-columns: repeat(7, minmax(42px,1fr)) }
    .exercise-collection-grid { grid-template-columns: repeat(2, minmax(0,1fr)) }
    .exercise-collection-card.featured { grid-column: span 2 }
  }

  /* ── ≤720px: موبایل ── */
  @media (max-width: 720px) {
    :root { --shell: calc(100% - 24px); --header-h: 68px; --radius-xl: 28px }
    .site-header { top: 8px; padding: 0 6px }
    .site-nav { min-height: 64px; border-radius: 18px; backdrop-filter: none }
    .nav-panel { right: 12px; left: 12px; border-radius: 18px }

    .hero { padding-block: 60px 56px }
    .hero-grid { gap: 38px }
    .hero-copy { text-align: right }
    .hero-copy .lead { margin-inline: 0 }
    .hero-actions { flex-direction: column; margin-inline: 0 }
    .hero-actions .button { width: 100% }
    .hero-trust { width: 100%; margin-inline: 0; align-items: flex-start }
    .code-window { transform: none; border-radius: 18px }
    .code-body { min-height: 250px; padding: 18px; font-size: .75rem }
    .floating-card { display: none }

    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr }
    .card { padding: 20px }
    .section { padding-block: 52px }
    .section-head { margin-bottom: 26px }

    .path-step { grid-template-columns: 57px 1fr; gap: 13px }
    .path-number { width: 57px; height: 57px; border-radius: 17px; font-size: 1rem }
    .path-step:not(:last-child)::before { right: 28px; top: 48px }
    .path-content { padding: 16px }

    .exercise-showcase { padding: 27px 20px }
    .certificate-panel { padding: 28px 18px }
    .certificate { padding: 20px 14px }
    .community-panel { padding: 42px 20px }

    .inline-form { flex-direction: column }
    .inline-form .button { width: 100% }
    .form-grid { grid-template-columns: 1fr }
    .contact-form { padding: 20px }

    .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px }
    .footer-about { grid-column: 1 / -1 }
    .footer-grid > div:last-child { grid-column: auto }
    .footer-bottom { flex-direction: column; align-items: center; text-align: center }

    .back-to-top { left: 12px; bottom: 12px }
    .toast { left: 12px; right: 12px; bottom: 12px; max-width: none }
    .install-prompt { right: 12px; left: 12px; bottom: 12px; max-width: none }

    /* آکاردئون موبایل برای بخش‌های مقالات و تمرین‌ها */
    .home-collapsible { overflow: hidden; background: var(--surface-solid); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm) }
    .home-collapsible > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px; cursor: pointer; font-weight: 900; list-style: none }
    .home-collapsible > summary::-webkit-details-marker { display: none }
    .home-collapsible > summary::after { content: "＋"; color: var(--brand); font-size: 1.2rem }
    .home-collapsible[open] > summary::after { content: "−" }
    .home-collapsible > summary small { margin-inline-start: auto; color: var(--muted); font-weight: 700 }
    .home-collapsible .article-library-grid, .home-collapsible .exercise-collection-grid { padding: 0 12px 12px }
    .section#articles .section-head, .section#exercises .section-head { margin-bottom: 16px }

    .article-library-grid { grid-template-columns: 1fr 1fr }
    .article-library-card.featured { grid-column: 1 / -1 }
    .article-library-card { min-height: 138px; padding: 18px }
    .exercise-index-grid { grid-template-columns: repeat(5, minmax(42px,1fr)) }
    .exercise-actions .button { width: 100% }
    .exercise-collection-grid { grid-template-columns: 1fr }
    .exercise-collection-card, .exercise-collection-card.featured { grid-column: auto; min-height: 190px; padding: 18px; border-radius: 17px }

    .hub-toolbar { grid-template-columns: 1fr }
    .hub-toolbar span { justify-self: start }
    .hub-hero { padding-top: 60px }

    /* کاهش بار رندر پس‌زمینه‌ی سه‌بعدی در موبایل */
    .ambient-3d { opacity: .45; perspective: 700px }
    .ambient-grid { height: 58%; bottom: -28%; background-size: 82px 82px; animation-duration: 32s }
    .orb-a { width: 112px; height: 112px; right: -26px; top: 13%; animation-duration: 25s }
    .orb-b { width: 82px; height: 82px; left: -20px; top: 54%; animation-duration: 29s }
    .orb-c, .panel-b { display: none }
    .panel-a { width: 100px; height: 135px; left: -28px; top: 30%; opacity: .13; animation-duration: 27s }
    .ambient-panel { backdrop-filter: none }
  }

  /* ── ≤520px: موبایل کوچک ── */
  @media (max-width: 520px) {
    :root { --shell: calc(100% - 20px) }
    .brand > span:last-child { display: none }
    .section { padding-block: 46px }
    .article-library-grid { grid-template-columns: 1fr }
    .article-library-card.featured { grid-column: auto }
    .exercise-index-grid { grid-template-columns: repeat(4, minmax(42px,1fr)) }
    .footer-grid { grid-template-columns: 1fr }
  }
}

/* ═══════════════ ۱۰) کاهش حرکت — یک جا برای همه‌چیز ═══════════════ */
@layer motion {
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
    }
    .reveal { opacity: 1; transform: none }
    .ambient-3d { display: none }
    .course-cover::before { display: none }
    .python-orbit::before, .python-orbit::after { animation: none }
    .code-rain-canvas { opacity: .6 }
  }

  /* انیمیشن ورود کارت‌های مجموعه فقط وقتی کاربر حرکت را دوست دارد */
  @media (prefers-reduced-motion: no-preference) {
    .home-collapsible[open] .exercise-collection-card { animation: collection-card-in .5s both }
    .home-collapsible[open] .exercise-collection-card:nth-child(2) { animation-delay: .06s }
    .home-collapsible[open] .exercise-collection-card:nth-child(3) { animation-delay: .12s }
    .home-collapsible[open] .exercise-collection-card:nth-child(4) { animation-delay: .18s }
    .home-collapsible[open] .exercise-collection-card:nth-child(5) { animation-delay: .24s }
    @keyframes collection-card-in { from { opacity: 0; transform: translateY(16px) scale(.98) } to { opacity: 1; transform: none } }
  }
}