/* ===========================================================================
   وب‌سایت عمومی — چیدمان و بخش‌ها.
   توکن‌ها، دکمه‌ها و کنترل‌های فرم در ui.css هستند و پیش از این فایل بارگذاری
   می‌شوند.
   =========================================================================== */

body {
    font-size: 14.5px;
    line-height: 1.95;
    overflow-x: hidden;
}

html { scroll-behavior: smooth; }

/* افق نرم پشت بخش قهرمان */
body::before {
    content: '';
    position: absolute;
    inset-block-start: 0; inset-inline: 0;
    height: 620px;
    z-index: -1;
    background:
        radial-gradient(62% 58% at 74% 0%, rgba(47,91,224,.075), transparent 68%),
        radial-gradient(48% 46% at 14% 4%, rgba(15,156,134,.055), transparent 64%);
    pointer-events: none;
}

:root { --wrap: 1140px;
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 22px; --sp-6: 32px; --sp-7: 44px; --sp-8: 64px; --sp-9: 88px;
}

.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }

/* --- تایپوگرافی ---------------------------------------------------------
   سه وزن و بس: ۴۰۰ متن، ۵۰۰ برچسب، ۷۰۰ عنوان. وزن ۸۰۰ فقط یک بار در کل
   صفحه استفاده می‌شود: تیتر قهرمان.
   ---------------------------------------------------------------------- */

h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.45; letter-spacing: -.011em; }

.display {
    font-size: clamp(27px, 4.4vw, 46px);
    font-weight: 800;
    line-height: 1.36;
    letter-spacing: -.024em;
}
.display em { font-style: normal; color: var(--plasma); }

.eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 500; color: var(--ion);
    padding: 4px 12px;
    border: 1px solid rgba(15,156,134,.22);
    border-radius: 999px;
    background: var(--ion-soft);
}
.eyebrow::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--ion); }

.lead { color: var(--muted); font-size: 15.5px; max-width: 58ch; }
.section-title { font-size: clamp(21px, 2.5vw, 29px); font-weight: 700; }
.muted { color: var(--muted); }

/* --- سربرگ --------------------------------------------------------------
   کوچک و کم‌وزن. حالت فعال فقط با رنگ و وزن، نه قرص رنگی.
   ---------------------------------------------------------------------- */

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(255,255,255,.84);
    backdrop-filter: blur(16px) saturate(170%);
    border-bottom: 1px solid var(--line);
}
.header-in { display: flex; align-items: center; gap: 18px; height: 60px; }

.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; letter-spacing: -.01em; }
.brand-mark {
    width: 28px; height: 28px; border-radius: 8px;
    background: var(--plasma); color: #fff;
    display: grid; place-items: center;
}
.brand-mark svg { width: 15px; height: 15px; }

.nav { display: flex; align-items: center; gap: 0; margin-inline-start: auto; }
.nav a {
    padding: 7px 11px; border-radius: 7px;
    color: var(--muted); font-size: 13px; font-weight: 400;
    transition: color .16s, background .16s;
}
.nav a:hover { color: var(--ink); background: var(--wash); }
.nav a.is-active { color: var(--ink); font-weight: 500; }

.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

.nav-toggle {
    display: none; width: 36px; height: 36px;
    border-radius: 8px; border: 1px solid var(--line-2);
    background: var(--card); color: var(--ink);
    cursor: pointer; place-items: center;
}
.nav-toggle svg { width: 18px; height: 18px; }

/* --- بخش‌ها ------------------------------------------------------------- */

.section { padding-block: var(--sp-9); }
.section-head { max-width: 58ch; margin-bottom: var(--sp-7); display: grid; gap: var(--sp-3); }

/* --- قهرمان: قفسهٔ سه‌بعدی (عنصر امضا) ----------------------------------
   قفسه عمداً تیره است. یک شیء فیزیکی تیره روی صفحهٔ روشن، تنها نقطهٔ پررنگ
   طراحی است؛ بقیهٔ صفحه ساکت می‌ماند.
   ---------------------------------------------------------------------- */

.hero { padding-block: var(--sp-9) var(--sp-8); }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: var(--sp-8); align-items: center; }
.hero-copy { display: grid; gap: var(--sp-5); justify-items: start; }
.hero-actions { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

.telemetry {
    display: flex; gap: var(--sp-6); flex-wrap: wrap;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    justify-self: stretch;
}
.telemetry div { display: grid; gap: 1px; }
.telemetry b { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.telemetry span { font-size: 12px; color: var(--faint); }

.rack { perspective: 1500px; perspective-origin: 60% 45%; display: grid; place-items: center; min-height: 400px; }
.rack-body {
    width: 292px;
    display: grid; gap: 10px; padding: 17px;
    border-radius: var(--r-lg);
    background: linear-gradient(168deg, #1c2740, #0e1524);
    box-shadow:
        0 40px 70px -30px rgba(16,24,40,.42),
        0 8px 20px -8px rgba(16,24,40,.18),
        inset 0 1px 0 rgba(255,255,255,.07);
    transform: rotateY(-18deg) rotateX(7deg) rotateZ(1deg);
    transform-style: preserve-3d;
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.rack:hover .rack-body { transform: rotateY(-11deg) rotateX(4deg); }

.unit {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 13px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.05);
    transform: translateZ(16px);
    transition: background .25s, border-color .25s, transform .25s;
}
.unit:nth-child(2) { transform: translateZ(26px); }
.unit:nth-child(3) { transform: translateZ(36px); }
.unit:nth-child(4) { transform: translateZ(26px); }

.unit .led {
    width: 6px; height: 6px; border-radius: 50%; flex: none;
    background: #2ad3b1; box-shadow: 0 0 9px rgba(42,211,177,.9);
    animation: breathe 3.4s ease-in-out infinite;
}
.unit:nth-child(2) .led { animation-delay: .5s; }
.unit:nth-child(3) .led { animation-delay: 1s; background: #5b8bff; box-shadow: 0 0 9px rgba(91,139,255,.9); }
.unit:nth-child(4) .led { animation-delay: 1.5s; }

.unit .label { font-size: 12px; color: rgba(255,255,255,.62); font-family: var(--mono); direction: ltr; }
.unit .bay { display: flex; gap: 3px; margin-inline-start: auto; }
.unit .bay i { width: 3px; height: 14px; border-radius: 2px; background: rgba(255,255,255,.14); }

.unit.is-hot { background: rgba(255,138,90,.14); border-color: rgba(255,138,90,.4); transform: translateZ(46px); }
.unit.is-hot .led { background: #ff8a5a; box-shadow: 0 0 11px rgba(255,138,90,.95); }

@keyframes breathe { 0%, 100% { opacity: .32; } 50% { opacity: 1; } }

/* --- کارت‌ها ------------------------------------------------------------ */

.grid { display: grid; gap: var(--sp-4); align-items: start; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
    display: block;
    padding: var(--sp-5);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--card);
    transition: border-color .22s, box-shadow .22s, transform .22s;
}
.card:hover { border-color: var(--line-2); box-shadow: var(--lift); transform: translateY(-2px); }

.card-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--plasma-soft); color: var(--plasma);
    margin-bottom: var(--sp-4);
}
.card-icon svg { width: 19px; height: 19px; }
.card h3 { font-size: 15.5px; margin-bottom: 6px; }
.card p  { margin: 0; color: var(--muted); font-size: 13.5px; }

/* --- کارت پلن ----------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: var(--sp-4); }

.plan {
    position: relative;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--card);
    display: grid; gap: var(--sp-4);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
    transform-style: preserve-3d;
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--lift-2); }
.plan.is-featured { border-color: rgba(221,90,38,.3); box-shadow: 0 0 0 1px rgba(221,90,38,.12), var(--lift); }

.plan-badge {
    position: absolute; inset-block-start: -10px; inset-inline-end: 20px;
    padding: 3px 12px; border-radius: 999px;
    background: var(--ember); color: #fff;
    font-size: 11.5px; font-weight: 500;
}
.plan-name { font-size: 16px; font-weight: 700; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price b { font-size: 27px; font-weight: 700; letter-spacing: -.025em; }
.plan-price span { font-size: 12.5px; color: var(--faint); }

.spec { display: grid; margin: 0; padding: 0; list-style: none; }
.spec li {
    display: flex; align-items: center; gap: 9px;
    font-size: 13px; color: var(--muted);
    padding-block: 7px;
    border-block-end: 1px solid var(--line);
}
.spec li:last-child { border: 0; }
.spec .k { color: var(--faint); min-width: 72px; }
.spec .v { color: var(--ink); }
.spec svg { width: 15px; height: 15px; color: var(--ion); flex: none; }

/* --- آمار --------------------------------------------------------------- */

.stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid var(--line); border-radius: var(--r-md);
    background: var(--card); overflow: hidden;
}
.stats div { padding: var(--sp-5) var(--sp-4); text-align: center; border-inline-start: 1px solid var(--line); }
.stats div:first-child { border-inline-start: 0; }
.stats b { display: block; font-size: 24px; font-weight: 700; letter-spacing: -.02em; }
.stats span { font-size: 12.5px; color: var(--muted); }

/* --- جدول --------------------------------------------------------------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.data th, table.data td { padding: 12px 15px; text-align: start; }
table.data thead th {
    background: var(--sunk); color: var(--muted);
    font-size: 12.5px; font-weight: 500; white-space: nowrap;
    border-bottom: 1px solid var(--line);
}
table.data tbody tr + tr { border-block-start: 1px solid var(--line); }
table.data tbody tr:hover { background: var(--sunk); }

/* --- سوالات متداول ------------------------------------------------------ */

.faq { display: grid; gap: var(--sp-2); }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.faq details[open] { border-color: var(--line-2); }
.faq summary {
    padding: 15px 19px; cursor: pointer; font-weight: 500; font-size: 14.5px;
    list-style: none; display: flex; align-items: center; gap: var(--sp-3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ''; margin-inline-start: auto; width: 8px; height: 8px; flex: none;
    border-inline-end: 1.8px solid var(--faint); border-block-end: 1.8px solid var(--faint);
    transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .answer { padding: 0 19px 17px; color: var(--muted); font-size: 13.5px; }

/* --- بلاگ --------------------------------------------------------------- */

.post-card {
    display: grid; border-radius: var(--r-md); overflow: hidden;
    border: 1px solid var(--line); background: var(--card);
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--lift); border-color: var(--line-2); }
.post-cover { height: 104px; }
.post-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: grid; gap: 7px; }
.post-body h3 { font-size: 15.5px; line-height: 1.62; }
.post-meta { display: flex; gap: var(--sp-3); font-size: 12px; color: var(--faint); }

/* --- فراخوان ------------------------------------------------------------ */

.cta-band {
    padding: var(--sp-8) var(--sp-6);
    border-radius: var(--r-xl);
    border: 1px solid var(--line);
    background: linear-gradient(160deg, var(--plasma-soft), #fff 70%);
    text-align: center;
    display: grid; gap: var(--sp-4); justify-items: center;
}

/* --- پاورقی ------------------------------------------------------------- */

.site-footer {
    border-block-start: 1px solid var(--line);
    margin-block-start: var(--sp-9);
    padding-block: var(--sp-7) var(--sp-5);
    background: var(--card);
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: var(--sp-6); }
.footer-grid h4 { font-size: 13px; font-weight: 500; margin-bottom: var(--sp-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-grid a { color: var(--muted); font-size: 13px; }
.footer-grid a:hover { color: var(--plasma); }
.footer-base {
    margin-block-start: var(--sp-6); padding-block-start: var(--sp-4);
    border-block-start: 1px solid var(--line);
    display: flex; justify-content: space-between; gap: var(--sp-4);
    font-size: 12.5px; color: var(--faint); flex-wrap: wrap;
}

/* --- نتیجهٔ پرداخت ------------------------------------------------------ */

.result-shell { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-5); }
.result-card {
    width: min(450px, 100%); padding: var(--sp-7) var(--sp-6);
    border-radius: var(--r-lg); border: 1px solid var(--line);
    background: var(--card); text-align: center; box-shadow: var(--lift-2);
}
.result-ring {
    width: 60px; height: 60px; border-radius: 50%; margin: 0 auto var(--sp-4);
    display: grid; place-items: center; border: 1.5px solid;
}
.result-ring svg { width: 26px; height: 26px; }
.r-ok   { border-color: rgba(15,156,110,.35); background: var(--ok-soft);   color: var(--ok); }
.r-bad  { border-color: rgba(217,45,32,.32);  background: var(--bad-soft);  color: var(--bad); }
.r-warn { border-color: rgba(198,122,5,.32);  background: var(--warn-soft); color: var(--warn); }

.kv { margin: var(--sp-5) 0 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; text-align: start; }
.kv div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 10px 15px; font-size: 13px; }
.kv div + div { border-block-start: 1px solid var(--line); }
.kv span { color: var(--muted); }

/* --- ظاهرشدن هنگام اسکرول ----------------------------------------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* --- واکنش‌گرا ---------------------------------------------------------- */

@media (max-width: 1000px) {
    .hero-grid { grid-template-columns: 1fr; gap: var(--sp-7); }
    .rack { min-height: 320px; order: -1; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .stats { grid-template-columns: repeat(2, 1fr); }
    .stats div:nth-child(3) { border-inline-start: 0; }
    .stats div:nth-child(3), .stats div:nth-child(4) { border-block-start: 1px solid var(--line); }
}

@media (max-width: 760px) {
    body { font-size: 14px; }
    .section { padding-block: var(--sp-8); }
    .nav {
        position: fixed; inset-block-start: 60px; inset-inline: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--card);
        border-block-end: 1px solid var(--line);
        box-shadow: var(--lift);
        padding: var(--sp-2); display: none;
    }
    .nav.is-open { display: flex; }
    .nav a { padding: 11px 14px; font-size: 14px; }
    .nav-toggle { display: grid; margin-inline-start: auto; }
    .header-actions .btn-ghost { display: none; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
    .telemetry { gap: var(--sp-5); }
    .rack-body { width: min(272px, 82vw); transform: rotateY(-12deg) rotateX(5deg); }
    .cta-band { padding: var(--sp-7) var(--sp-5); }
}

@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ===========================================================================
   حالت آموزشگاه زبان
   =========================================================================== */

/* --- دستهٔ فلش‌کارت (عنصر امضای این حالت) -------------------------------
   قرینهٔ قفسهٔ سرور در حالت هاستینگ: یک شیء با عمق واقعی که ساکن است و
   توجه را می‌گیرد، بدون انیمیشن سنگین.
   ---------------------------------------------------------------------- */

.deck {
    perspective: 1400px;
    perspective-origin: 55% 45%;
    display: grid;
    place-items: center;
    min-height: 400px;
}
.deck-body {
    position: relative;
    width: 290px; height: 226px;
    transform-style: preserve-3d;
    transform: rotateY(-15deg) rotateX(8deg);
    transition: transform .5s cubic-bezier(.2,.7,.3,1);
}
.deck:hover .deck-body { transform: rotateY(-8deg) rotateX(4deg); }

.flash {
    position: absolute;
    inset: 0;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: 0 22px 44px -22px rgba(16,24,40,.28);
    padding: var(--sp-5);
    display: grid;
    align-content: start;
    gap: var(--sp-2);
    transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.flash-back-2 { transform: translateZ(-46px) translateY(30px) rotate(-4deg); opacity: .55; }
.flash-back-1 { transform: translateZ(-24px) translateY(15px) rotate(-2deg); opacity: .8; }
.flash-front  { transform: translateZ(0); }

.deck:hover .flash-back-2 { transform: translateZ(-46px) translateY(38px) rotate(-6deg); }
.deck:hover .flash-back-1 { transform: translateZ(-24px) translateY(19px) rotate(-3deg); }

.flash-level {
    justify-self: start;
    font-family: var(--mono);
    font-size: 11.5px; font-weight: 700;
    color: var(--plasma);
    background: var(--plasma-soft);
    padding: 3px 10px;
    border-radius: 999px;
}
.flash-word {
    font-family: var(--mono);
    font-size: 27px; font-weight: 700;
    letter-spacing: -.02em;
    direction: ltr;
    margin-top: var(--sp-2);
}
.flash-meaning { font-size: 15px; color: var(--muted); }
.flash-example {
    font-family: var(--mono);
    font-size: 11.5px; line-height: 1.7;
    color: var(--faint);
    direction: ltr;
    padding-top: var(--sp-3);
    margin-top: auto;
    border-top: 1px solid var(--line);
}

/* --- کارت دوره ---------------------------------------------------------- */

.courses { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: var(--sp-4); }

.course {
    position: relative;
    display: grid;
    gap: var(--sp-4);
    align-content: start;
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--card);
    transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .25s, box-shadow .25s;
}
.course:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--lift-2); }
.course.is-featured {
    border-color: rgba(221,90,38,.3);
    box-shadow: 0 0 0 1px rgba(221,90,38,.12), var(--lift);
}

.course-badge {
    position: absolute; inset-block-start: -10px; inset-inline-end: 20px;
    padding: 3px 12px; border-radius: 999px;
    background: var(--ember); color: #fff;
    font-size: 11.5px; font-weight: 500;
}
.course-top { display: block; }
.course-cat {
    display: inline-block;
    font-size: 11.5px; color: var(--ion);
    background: var(--ion-soft);
    padding: 2px 10px; border-radius: 999px;
    margin-bottom: var(--sp-3);
}
.course-title { font-size: 16.5px; font-weight: 700; line-height: 1.55; }
.course-sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); }

.course-foot {
    display: grid; gap: var(--sp-3);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    margin-top: auto;
}

/* --- صفحهٔ دوره --------------------------------------------------------- */

.course-detail {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--sp-7);
    align-items: start;
    margin-top: var(--sp-5);
}
.course-aside {
    position: sticky; top: 84px;
    padding: var(--sp-5);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--card);
    box-shadow: var(--lift);
}

.syllabus { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.syllabus li {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--card);
    font-size: 14px; color: var(--muted);
}
.syl-num {
    flex: none;
    width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--plasma-soft); color: var(--plasma);
    font-size: 11.5px; font-weight: 700;
    margin-top: 3px;
}

/* --- مسیر پیشرفت -------------------------------------------------------- */

.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); position: relative; }
.path-step {
    padding: var(--sp-5);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--card);
    display: grid; gap: var(--sp-2); align-content: start;
}
.path-num {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--plasma); color: #fff;
    font-size: 13px; font-weight: 700;
    margin-bottom: var(--sp-2);
}
.path-step h3 { font-size: 15px; }
.path-step p { margin: 0; font-size: 13px; color: var(--muted); }

@media (max-width: 1000px) {
    .deck { min-height: 320px; order: -1; }
    .course-detail { grid-template-columns: 1fr; }
    .course-aside { position: static; }
    .path { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .path { grid-template-columns: 1fr; }
    .deck-body { width: min(268px, 80vw); height: 214px; transform: rotateY(-10deg) rotateX(5deg); }
}